/* ===================================================================
   THEME TOKENS — this block is the whole rebrand.
   Change these 12 values and the entire page re-skins: every gradient,
   glow, blob, pill and hover state in index.html reads from them.

   The *-rgb twins exist because the markup builds translucent glows with
   rgba(var(--accent-rgb),.4). Keep each pair in sync — the hex and the
   rgb triplet must describe the same colour, or glows drift off-brand.

   This template is dark-first by design: the glass, the glows and the
   shadow depth all rely on a dark backdrop. A light --bg will not just
   look different, it will look broken. Keep --bg deep.
   =================================================================== */
:root{
  /* Canvas + text */
  --bg:#080A11;                 --bg-rgb:8,10,17;
  --ink:#F7EFE6;               --ink-rgb:247,239,230;

  /* Brand accents. --accent is the hero: headline highlight, eyebrows,
     links, step 1, most glows. 2/3/4 are the supporting spectrum used to
     keep sections from feeling monotone. */
  --accent:#FF6A3D;         --accent-rgb:255,106,61;
  --accent-tint:#FF9A6B;    /* lighter --accent: link hover, gradient ends */
  --accent-2:#2FD9A6;     --accent-2-rgb:47,217,166;
  --accent-3:#8B7BFF;     --accent-3-rgb:139,123,255;
  --accent-3-tint:#B5ABFF;
  --accent-4:#FFC53D;     --accent-4-rgb:255,197,61;

  /* Display face for headings. Body stays on the system stack so text
     feels native and loads instantly — only headings pay for a webfont. */
  --display:'Barlow Condensed',system-ui,sans-serif;

  /* The closing-CTA panel. A multi-stop gradient that travels dark ->
     brand -> warm, so the page ends on a lift instead of more of the same. */
  --cta-gradient:linear-gradient(160deg,#0d1120 0%,#241a3a 30%,#6b2a36 54%,#d9502a 76%,#ff8a3d 90%,#ffc53d 100%);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-tint)}
::selection{background:var(--accent);color:var(--bg)}
img{display:block;max-width:100%}

#zz{position:relative;width:100%;overflow:hidden}

/* ===== Keyframes ===== */
@keyframes zzshim{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes zzspin{to{transform:rotate(360deg)}}
@keyframes zztw{0%,100%{opacity:1;filter:brightness(1.15)}50%{opacity:.55;filter:brightness(.8)}}

/* Keyboard users need to see which FAQ row they're on */
[data-faq-q]:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:16px}

/* ===================================================================
   Responsive overrides.

   The design is a fixed 1180px desktop composition whose styles live
   inline on the elements. These breakpoints adapt it for narrow screens
   while preserving its character: the layout stays LEFT-ALIGNED and only
   restacks — it is never re-centered, so a phone still reads like the
   original design, just narrower. Centering everything is the single
   fastest way to make this page look like a generic template.

   !important is load-bearing here: it is what lets these rules win over
   the inline styles. Removing it silently disables the whole file.
   =================================================================== */

/* --- Stack the two-column rows (hero + features) --- */
@media (max-width:880px){
  .hero{
    grid-template-columns:1fr !important;
    padding-top:124px !important;
    gap:8px !important;
  }
  /* screenshot cluster drops below the copy; stays compact */
  .hero-visual{
    height:560px !important;
    width:100% !important;
    max-width:460px !important;
    margin:8px auto 0 !important;
  }

  .feat-row,
  .feat-row-rev{
    grid-template-columns:1fr !important;
    gap:24px !important;
    margin-bottom:64px !important;
  }
  /* screenshot always above the copy, even on the reversed row */
  .feat-media{order:-1 !important}
  .feat-row-rev > div:last-child{order:0 !important}
}

/* --- Collapse the 3-up card grids + hide inline nav links --- */
@media (max-width:720px){
  .nav-links{display:none !important}
  .nav-inner{justify-content:space-between !important}

  .how-grid{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:28px !important}
}

/* --- Phone --- */
@media (max-width:560px){
  .hero{padding-left:20px !important;padding-right:20px !important}
  .hero-visual{height:460px !important;max-width:340px !important}

  .stats-grid{
    grid-template-columns:1fr !important;
    gap:0 !important;
    padding:12px 18px !important;
  }
  .stat-cell{
    border-right:none !important;
    padding:18px 8px !important;
  }
  .stat-cell + .stat-cell{border-top:1px solid rgba(255,255,255,.1)}

  .footer-grid{grid-template-columns:1fr !important}
  .cta-box{padding:56px 24px !important}
}

/* --- Narrow phones: keep the hero screenshots from overflowing --- */
@media (max-width:380px){
  .hero-visual{height:420px !important;max-width:300px !important}
}

/* ===== Reduced motion: neutralise twinkle + float ===== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}