/* Baloo 2 latin-ext (self-hosted, variable 500 800) */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('assets/fonts/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Baloo 2 latin (self-hosted, variable 500 800) */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('assets/fonts/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Base (ported from the Zzzello Design helmet block) ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#0A1422;
  color:#F4E8D7;
  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:#5CE1E6;text-decoration:none}
a:hover{color:#9BEFF1}
::selection{background:#5CE1E6;color:#0A1422}
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)}}

/* Focus visibility for keyboard users on the FAQ triggers */
[data-faq-q]:focus-visible{outline:2px solid #5CE1E6;outline-offset:-4px;border-radius:16px}

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

   The prototype is a fixed desktop design (1180px container) with no
   mobile handling. 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 it always reads like the
   original design, just narrower. !important is required to win over
   the inline styles carried over verbatim from the prototype.
   =================================================================== */

/* --- Stack the two-column rows (hero + features) --- */
@media (max-width:880px){
  .hero{
    grid-template-columns:1fr !important;
    padding-top:124px !important;
    gap:8px !important;
  }
  /* phone cluster sits below the copy; keep it compact and left-anchored */
  .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;
  }
  /* phone 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 phones from overflowing --- */
@media (max-width:380px){
  .hero-visual{height:420px !important;max-width:300px !important}
}

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