/* Theme: Dark — near-black canvas, cream text, brand red/blue accents
   brightened to actually read against the dark ground. Same brand identity
   as theme-lightcorp.css (red/blue/white), just built for a dark surface
   instead of a bright one — matching the mood of the "Joshjenjoy Landing
   Page" artifact (near-black bg, warm off-white ink, a single accent doing
   the work). Base styles.css was already written with a lot of dark-mode
   assumptions baked in (header text defaults to white, hero/footer/cta-band
   are hardcoded dark already) — this theme needs far fewer overrides than
   the light one did, since it's closer to the base stylesheet's own
   defaults than lightcorp is. */
/* Font loading: same as theme-lightcorp.css — no @import here, the page's
   own <head> link already loads Figtree + Syne. */

:root {
  --jj-red: #ff4438;
  --jj-blue: #6e8cff;
  --jj-white: #f4f1ea;
  --ink: #f4f1ea;
  --ink-soft: #c7c3d6;
  --navy: #1e1c29;
  --navy-deep: #0b0a11;
  --paper: #14131c;
  --paper-bright: #1e1c29;
  --muted: #938fa6;
  --cyan: #6e8cff;
  --cyan-deep: #8aa3ff;
  --accent: #ff4438;
  --line: rgba(244, 241, 234, 0.12);
  --font-display: "Syne", sans-serif;
  --font-body: "Figtree", sans-serif;
  --radius: 12px;
}

body {
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 92% -4%, rgba(110, 140, 255, 0.1), transparent 55%),
    linear-gradient(180deg, var(--paper-bright), var(--paper));
}

h1, h2, h3, .brand-mark, .logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.logo.logo-img {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.logo.logo-img img,
.logo.logo-img svg {
  height: 48px;
  width: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

.eyebrow {
  color: var(--jj-red);
  font-weight: 700;
}

.site-header.is-solid,
.site-header.always-solid {
  background: rgba(20, 19, 28, 0.88);
  backdrop-filter: blur(14px);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.site-header.is-solid .nav-cta,
.site-header.always-solid .nav-cta,
.nav-cta {
  background: var(--jj-red);
  border-color: var(--jj-red);
  color: #fff;
}
.nav a {
  color: var(--ink-soft);
}
.nav a:hover {
  color: var(--jj-blue);
}
.nav .cart-link {
  background: var(--jj-red);
  color: #fff;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  transition: background 0.2s var(--ease, ease), transform 0.2s var(--ease, ease);
}
.nav .cart-link:hover {
  background: var(--jj-blue);
  color: #fff;
  transform: translateY(-1px);
}
.nav .cart-badge {
  background: var(--paper);
  color: var(--jj-red);
}

.btn-primary {
  background: var(--jj-red);
  color: #fff;
  box-shadow: 0 10px 28px rgba(255, 68, 56, 0.28);
}
.btn-primary:hover {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 10px 28px rgba(244, 241, 234, 0.16);
}
.btn-ink {
  background: var(--jj-blue);
  color: #fff;
}
.btn-ink:hover {
  background: var(--jj-red);
}
.btn-ghost.light,
.btn-ghost {
  border-color: var(--jj-blue);
  color: var(--jj-blue);
}
.btn-ghost.light:hover,
.btn-ghost:hover {
  background: var(--jj-blue);
  color: #fff;
}
.cart-badge {
  background: var(--jj-red);
}

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 92% -8%, rgba(255, 68, 56, 0.18), transparent 60%),
    radial-gradient(820px 460px at -6% 18%, rgba(110, 140, 255, 0.16), transparent 55%),
    radial-gradient(600px 360px at 55% 105%, rgba(110, 140, 255, 0.1), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--paper) 55%);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}
.hero::before {
  width: 26rem;
  height: 26rem;
  top: -8rem;
  right: -6rem;
  background: radial-gradient(circle, rgba(255, 68, 56, 0.28), transparent 70%);
  animation: blob-drift-a 14s ease-in-out infinite alternate;
}
.hero::after {
  width: 22rem;
  height: 22rem;
  bottom: -9rem;
  left: -6rem;
  background: radial-gradient(circle, rgba(110, 140, 255, 0.24), transparent 70%);
  animation: blob-drift-b 16s ease-in-out infinite alternate;
}
@keyframes blob-drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-1.5rem, 1.5rem) scale(1.08); }
}
@keyframes blob-drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(1.5rem, -1rem) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after {
    animation: none !important;
  }
}

.hero-veil {
  background: linear-gradient(105deg, rgba(11, 10, 17, 0.88) 0%, rgba(11, 10, 17, 0.6) 46%, rgba(11, 10, 17, 0.2) 100%),
    linear-gradient(0deg, rgba(11, 10, 17, 0.5) 0%, transparent 42%) !important;
}

.hero-media.has-fade .hero-veil {
  background:
    linear-gradient(90deg, rgba(11, 10, 17, 0.48) 0%, rgba(11, 10, 17, 0.16) 34%, rgba(11, 10, 17, 0) 62%),
    linear-gradient(0deg, rgba(11, 10, 17, 0.18) 0%, transparent 36%) !important;
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.brand-mark {
  display: inline-block;
  background: linear-gradient(100deg, var(--jj-red) 0%, var(--jj-blue) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--jj-blue);
  font-size: clamp(2.8rem, 9vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.hero h1 {
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.02em;
  position: relative;
}
.hero .lede {
  color: var(--ink-soft);
  font-size: 1.08rem;
}
.hero-actions .btn {
  padding: 0.95rem 1.9rem;
  font-weight: 700;
  transition: transform 0.18s var(--ease, ease), box-shadow 0.18s var(--ease, ease);
}
.hero-actions .btn:hover {
  transform: translateY(-2px);
}
.hero-actions .btn-primary:hover {
  box-shadow: 0 14px 32px rgba(255, 68, 56, 0.3);
}

.hero-collage figure {
  background: rgba(244, 241, 234, 0.05);
  border: 1px solid rgba(244, 241, 234, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease);
}
.hero-collage:not([data-carousel]) figure:nth-child(odd) {
  transform: rotate(-1.5deg);
}
.hero-collage:not([data-carousel]) figure:nth-child(even) {
  transform: rotate(1.5deg);
}
.hero-collage:not([data-carousel]) figure:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.hero-collage[data-carousel] figure {
  transform: none;
  transition: box-shadow 0.25s var(--ease, ease);
}
@media (prefers-reduced-motion: reduce) {
  .hero-collage figure {
    transform: none !important;
  }
}

.hero-collage-track figure {
  aspect-ratio: 1;
  margin: 0 0.35rem;
  /* Small enough that 4+ tiles peek in the hero column (and ~2.5 on
     a phone) so the marquee doesn't look like a static 3-photo stack. */
  width: clamp(10.25rem, 42vw, 15.5rem);
  min-width: clamp(10.25rem, 42vw, 15.5rem);
  flex: 0 0 auto;
}
.hero-collage-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-collage[data-carousel] {
  display: block;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 2.75rem), transparent);
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 2.75rem), transparent);
}

.section-head h2,
.page-hero h1 {
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 55%, var(--jj-blue) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ink);
}

.category-tile:hover {
  border-color: var(--jj-blue);
  box-shadow: 0 18px 38px rgba(110, 140, 255, 0.18);
}
.category-tile .tile-link {
  color: var(--jj-red);
  font-weight: 700;
}
.category-tile__media {
  background: #201f2c;
}

.product-tile:hover {
  border-color: var(--jj-blue);
  box-shadow: 0 18px 36px rgba(110, 140, 255, 0.16);
}
.product-tile:hover .media img {
  transform: scale(1.08);
}
.product-tile .price {
  color: var(--jj-red);
}
.product-tile .media {
  background: #201f2c;
}

.client-logos[data-carousel] {
  display: block;
  /* The base .client-logos rule caps width at 64rem and centers it - fine
     for the static grid, but in the marquee it left a big empty margin on
     both sides of the strip since the moving track was confined to a
     narrower centered box instead of using the full white bar. */
  max-width: none;
  width: 100%;
  margin: 0;
}
.client-logo {
  /* Placeholder-only styling (shown if a logo image fails to load) - the
     strip itself is pinned white above regardless of theme, so this needs
     a light background too, not the dark var(--paper-bright) this theme
     uses everywhere else. */
  background: #f4f1ea;
  border-color: rgba(15, 27, 51, 0.18);
  color: #6b7280;
}
.client-logo.has-logo {
  border: none;
  background: none;
}

.trust-strip,
.section,
.page-hero {
  color: var(--ink);
}
.trust-strip {
  /* Always a solid white bar with the logos floating directly on it, in
     every theme - not a dark section holding a grid of separate white
     tiles. --paper-bright is #1e1c29 (near-black) in this theme, which is
     exactly the dark strip-behind-white-boxes look being replaced here.
     --ink is also theme-flipped (light text for dark backgrounds), so it
     has to be pinned to a dark value too or text in this section would
     turn invisible against the new white background. */
  background: #fff;
  color: #0f1b33;
}
.product-tile {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.product-tile .body {
  color: var(--ink);
}
.product-tile .actions .btn.is-added,
.product-tile .actions .btn-ink.is-added {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}
.product-tile .actions .btn.is-added:hover,
.product-tile .actions .btn-ink.is-added:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--muted);
}
.category-grid a,
.bento-card {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.testimonials {
  background: var(--paper-bright);
}
.spotlight {
  background: rgba(30, 28, 41, 0.6);
}

.toolbar input,
.toolbar select,
.quote-form input,
.quote-form select,
.quote-form textarea {
  background: rgba(244, 241, 234, 0.04);
  color: var(--ink);
  border-color: var(--line);
}
.toolbar input:focus,
.toolbar select:focus,
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--jj-blue);
  background: var(--paper-bright);
}

.quote-modal {
  background: var(--paper-bright);
  color: var(--ink);
  border-color: var(--line);
}

.product-detail .media,
.quote-line img {
  background: #201f2c;
}

.site-footer {
  background: var(--navy-deep);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.site-footer .logo {
  color: var(--ink);
}
.site-footer a {
  color: var(--ink-soft);
}
.site-footer a:hover {
  color: var(--jj-blue);
}
.footer-contact a {
  color: var(--jj-blue);
}
.quote-footnote {
  color: var(--muted);
}

.cta-band {
  background: linear-gradient(120deg, var(--navy-deep), var(--navy));
  color: var(--ink);
}
.cta-band .lede {
  color: var(--ink-soft);
}

.process-strip {
  background: var(--navy-deep);
  color: var(--ink);
}
.process-strip .eyebrow {
  color: var(--jj-red);
}
.process-strip .muted {
  color: var(--ink-soft);
}
.step-num {
  color: var(--jj-blue);
}
.quote-notice {
  background: linear-gradient(90deg, var(--navy-deep), var(--jj-red));
  color: #fff;
}
.mobile-nav {
  background: rgba(20, 19, 28, 0.98);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.preview-banner {
  background: linear-gradient(90deg, var(--jj-red), var(--jj-blue));
  color: #fff;
  text-align: center;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.jjchat-bubble {
  background: var(--jj-red);
  color: #fff;
}
.jjchat-badge {
  background: #fff;
  color: var(--jj-red);
  border: 2px solid var(--paper);
}
.jjchat-panel {
  background: var(--paper-bright);
  border: 1px solid var(--line);
}
.jjchat-head {
  background: var(--navy-deep);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.jjchat-close {
  color: var(--ink-soft);
}
.jjchat-empty {
  color: var(--ink-soft);
}
.jjchat-msg-visitor {
  background: var(--jj-red);
  color: #fff;
}
.jjchat-msg-staff {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}
.jjchat-input {
  background: rgba(244, 241, 234, 0.04);
  color: var(--ink);
}
.jjchat-input:focus {
  outline: none;
  border-color: var(--jj-blue);
}
.jjchat-send {
  background: var(--jj-red);
  color: #fff;
}