:root{
    --bg:#0d0d11; --text:#f4f4f7; --violet:#8b7cf5; --cyan:#4fc3e8;
    --grad:linear-gradient(120deg,#9a86ff,#7c6cf0 45%,#4fc3e8);
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* Hide the native scrollbar — the progress rail + dots are our indicator.
     Scrolling (wheel/touch/keys) still works. */
  html{scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar{width:0;height:0;display:none}
  body{font-family:var(--sans);color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.5}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1100px;margin:0 auto;padding:0 26px;width:100%}
  .kick{font-weight:800;letter-spacing:3px;font-size:12px;text-transform:uppercase;color:var(--violet)}

  /* App Store badge (Apple standard black lockup) */
  .store{display:inline-flex;align-items:center;gap:12px;background:#000;color:#fff;padding:13px 22px 13px 18px;border-radius:15px;transition:transform .15s;border:1px solid rgba(255,255,255,.14)}
  .store:hover{transform:translateY(-2px)}
  .store svg{width:26px;height:26px;fill:#fff}
  .store .t{display:flex;flex-direction:column;line-height:1.1}.store .t small{font-size:11px;opacity:.85}.store .t b{font-size:19px;font-weight:600}
  .store.nav{padding:8px 15px 8px 12px;border-radius:12px}
  .store.nav svg{width:19px;height:19px}.store.nav .t small{font-size:8.5px}.store.nav .t b{font-size:14px}

  /* fixed stage — viewport never moves; panels crossfade in place */
  .stage{position:fixed;inset:0;overflow:hidden}
  nav{position:absolute;top:env(safe-area-inset-top);left:0;right:0;z-index:60;display:flex;align-items:center;gap:12px;height:74px;padding:0 30px}
  nav .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:22px;letter-spacing:-.02em}
  nav .brand img{width:30px;height:30px;border-radius:9px;box-shadow:0 4px 16px rgba(139,124,245,.4)}
  nav .spacer{flex:1}

  .panel{position:absolute;inset:0;display:flex;align-items:center;opacity:0;pointer-events:none;will-change:opacity,transform}
  .panel .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
  .panel.center .wrap{grid-template-columns:1fr;text-align:center;max-width:820px}

  h1{font-weight:800;font-size:clamp(44px,6.6vw,84px);line-height:1.0;letter-spacing:-.03em;margin:14px 0 0}
  h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  h2{font-weight:800;font-size:clamp(32px,4.6vw,58px);line-height:1.02;letter-spacing:-1.4px;margin:14px 0 16px}
  .lede{font-size:clamp(16px,1.6vw,20px);color:rgba(244,244,247,.78);max-width:36ch;margin:20px 0 30px}
  .panel p.body{font-size:18px;color:rgba(244,244,247,.78);max-width:40ch}
  .center h2{max-width:16ch;margin:12px auto 14px}
  .center p{color:rgba(244,244,247,.75);margin-bottom:30px}

  /* per-panel backgrounds — cohesive dark violet/cyan */
  .bg0{background:radial-gradient(120% 90% at 85% 0%,#3a2f6e 0%,rgba(58,47,110,0) 48%),linear-gradient(155deg,#1a1830,#141425 55%,#0d0d11)}
  .bg1{background:linear-gradient(155deg,#221d3c,#131327 55%,#0c0c12)}
  .bg2{background:radial-gradient(120% 90% at 8% 100%,#1c4c57 0%,rgba(28,76,87,0) 55%),linear-gradient(155deg,#17203a,#0f1220)}
  .bg3{background:linear-gradient(155deg,#241d40,#13122a 55%,#0c0c13)}
  .bg4{background:radial-gradient(120% 90% at 92% 100%,#1c4c57 0%,rgba(28,76,87,0) 55%),linear-gradient(155deg,#1d1936,#10101d)}
  .bg5{background:radial-gradient(90% 120% at 50% 0%,#3a2f6e 0%,rgba(58,47,110,0) 55%),linear-gradient(155deg,#1a1830,#0d0d11)}

  /* phone */
  .phone{position:relative;width:clamp(230px,26vw,310px);aspect-ratio:1320/2868;border-radius:14%/6.4%;margin:0 auto;
    background:linear-gradient(#1c1a1e,#0b0b0d);padding:2.4%;box-shadow:0 44px 100px rgba(10,8,20,.55),inset 0 0 0 2px rgba(255,255,255,.06)}
  .phone::before{content:"";position:absolute;top:2.6%;left:50%;transform:translateX(-50%);width:32%;height:3.2%;background:#000;border-radius:999px;z-index:3}
  .phone img{width:100%;height:100%;object-fit:cover;border-radius:11.5%/5.3%;display:block}

  /* progress rail + dots + hint — purely visual, must never intercept taps */
  .rail,.dots,.hintScroll{pointer-events:none}
  .rail{position:absolute;right:26px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:12px}
  .rail .track{width:3px;height:190px;background:rgba(255,255,255,.16);border-radius:3px;position:relative;overflow:hidden}
  .rail .fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--grad);border-radius:3px;transition:height .25s ease}
  .rail .count{font:700 12px var(--sans);letter-spacing:1px;color:rgba(244,244,247,.7)}
  .dots{position:absolute;right:20px;bottom:26px;z-index:50;display:flex;gap:8px}
  .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);transition:.3s}
  .dots i.on{background:var(--text);transform:scale(1.15)}
  .hintScroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;color:rgba(244,244,247,.55);font-size:12px;letter-spacing:2px;animation:bob 1.8s infinite}
  @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

  .legal{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:14px;color:rgba(244,244,247,.62)}
  .legal a{transition:color .15s}.legal a:hover{color:#fff}
  .legal span{opacity:.35}
  footer{position:absolute;left:0;right:0;bottom:0;z-index:60;padding:22px 30px calc(22px + env(safe-area-inset-bottom));display:flex;gap:18px;align-items:center;font-size:13px;color:rgba(244,244,247,.6);pointer-events:auto}
  footer a,nav a,.legal a,.store{pointer-events:auto}
  footer .brand{display:flex;align-items:center;gap:9px;font-weight:700}
  footer .brand img{width:20px;height:20px;border-radius:6px}
  footer .spacer{flex:1}footer a{opacity:.85}footer a:hover{opacity:1}

  .spacer{height:500vh}

  @media(max-width:860px){
    .panel{align-items:center}
    .panel .wrap{grid-template-columns:1fr;text-align:center;gap:22px;padding:96px 22px 96px}
    .lede,.panel p.body{margin-left:auto;margin-right:auto}
    h1{font-size:clamp(34px,10vw,52px)}
    h2{font-size:clamp(26px,8vw,40px)}
    .phone{width:clamp(150px,42vw,210px)}
    .play,.phone{order:-1}
    .rail,.hintScroll{display:none}
    .dots{bottom:calc(64px + env(safe-area-inset-bottom))}
    footer{font-size:12px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:8px 14px}
    footer .brand{width:100%}
  }

  /* below the stage: normal flow text for crawlers and readers, painted over the fixed stage */
  nav .lnk{font-size:14px;font-weight:600;color:rgba(244,244,247,.78)}nav .lnk:hover{color:#fff}
  nav .lnk,.below a{pointer-events:auto}
  .below{position:relative;z-index:80;background:#0d0d11;padding:70px 0 40px;border-top:1px solid rgba(255,255,255,.08)}
  .below .wrap{max-width:860px}
  .below h2{font-size:clamp(26px,4vw,38px);letter-spacing:-.8px;margin:0 0 22px}
  .below section{margin-bottom:56px}
  .below .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .below .steps div,.below details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:20px}
  .below .steps b{display:block;font-size:18px;margin-bottom:6px}
  .below p,.below summary{color:rgba(244,244,247,.78);font-size:16.5px}
  .below summary{cursor:pointer;font-weight:700;color:#f4f4f7;list-style:none}
  .below details{margin-bottom:12px}.below details p{margin-top:12px}
  .below .links{display:flex;flex-wrap:wrap;gap:12px}
  .below .links a{background:rgba(139,124,245,.14);border:1px solid rgba(139,124,245,.35);padding:12px 18px;border-radius:14px;font-weight:600}
  .below .links a:hover{background:rgba(139,124,245,.26)}
  .sitefoot{font-size:14px;color:rgba(244,244,247,.6)}
  .sitefoot a{color:rgba(244,244,247,.8)}.sitefoot a:hover{color:#fff}
  .sitefoot .row{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
  .sitefoot b{color:#f4f4f7;margin-right:4px}
  @media(max-width:860px){.below .steps{grid-template-columns:1fr}nav .lnk{display:none}}