/* ================= tokens ================= */
:root{
  --bg:#0d0c09; --bg2:#15130e; --card:#1b1912; --card2:#221f17; --chip:#29261c; --line:#2c2920;
  --ink:#f6f3ea; --ink2:#cfc9b6; --mute:#a59f8c;
  --y:#FFD400; --y2:#ffe766; --y-ink:#FFD400; --on-y:#17150F; --dark:#17150F;
  --glass:rgba(21,19,14,.62); --glass-line:rgba(255,255,255,.08);
  --orb:.16; --dot:rgba(255,255,255,.10); --shadow:0 30px 80px -30px rgba(0,0,0,.8);
  --r:22px; --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); --smooth:cubic-bezier(.65,0,.35,1);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#faf8f1; --bg2:#f2eee3; --card:#ffffff; --card2:#f6f3ea; --chip:#efeadc; --line:#e5dfcf;
    --ink:#17150F; --ink2:#47423a; --mute:#7b7566; --y-ink:#a07f00;
    --glass:rgba(255,255,255,.7); --glass-line:rgba(0,0,0,.07);
    --orb:.28; --dot:rgba(0,0,0,.10); --shadow:0 30px 70px -34px rgba(60,50,20,.35);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#faf8f1; --bg2:#f2eee3; --card:#ffffff; --card2:#f6f3ea; --chip:#efeadc; --line:#e5dfcf;
  --ink:#17150F; --ink2:#47423a; --mute:#7b7566; --y-ink:#a07f00;
  --glass:rgba(255,255,255,.7); --glass-line:rgba(0,0,0,.07);
  --orb:.28; --dot:rgba(0,0,0,.10); --shadow:0 30px 70px -34px rgba(60,50,20,.35);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 Inter,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .5s,color .5s}
body.locked{overflow:hidden}
h1,h2,h3,h4{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.08;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block}
ul,ol{list-style:none}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.card-t{transition:background .5s,border-color .5s}

/* ================= loader ================= */
.loader{position:fixed;inset:0;z-index:100;background:var(--y);display:grid;place-items:center;align-content:center;gap:10px;transition:clip-path 1s var(--ease);clip-path:circle(150% at 50% 50%)}
.loader.done{clip-path:circle(0% at 50% 50%);pointer-events:none}
.loader-icon svg{width:140px;height:140px;animation:pop .7s var(--spring) both}
.loader .hand{transform-origin:54px 54px;animation:spin 1.2s var(--ease) .2s both}
.loader .dot{transform-origin:72px 70px;animation:dotin .5s var(--spring) .9s both}
.loader-word{font:700 44px "Space Grotesk";color:var(--dark);letter-spacing:-.04em;animation:up .6s var(--ease) .5s both}
.loader-word span{color:#fff}
@keyframes spin{from{transform:rotate(-360deg)}to{transform:rotate(0)}}
@keyframes dotin{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes up{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--y);transform-origin:left;transform:scaleX(0);z-index:60}
.cursor-glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;left:0;top:0;
  background:radial-gradient(circle,rgba(255,212,0,.09),transparent 60%);transform:translate(-50%,-50%)}
@media (hover:none){.cursor-glow{display:none}}

/* ================= nav ================= */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1100px,calc(100% - 32px));
  display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;border-radius:999px;
  background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--glass-line);
  transition:transform .5s var(--ease),background .5s,border-color .5s}
.nav.hide{transform:translate(-50%,-140%)}
.brand{display:flex;align-items:center;gap:10px;font:700 20px "Space Grotesk"}
.brand img{border-radius:9px}
.nav-links{display:flex;gap:26px;margin-left:auto;margin-right:10px;font-size:14px;color:var(--mute)}
.nav-links a{position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--y);transform:scaleX(0);transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{transform:scaleX(1)}
.theme-btn{position:relative;width:40px;height:40px;border-radius:50%;background:var(--chip);display:grid;place-items:center;overflow:hidden;font-size:19px;transition:background .5s,transform .3s var(--spring)}
.theme-btn:hover{transform:rotate(-15deg) scale(1.06)}
.theme-btn .ic{position:absolute;transition:transform .6s var(--spring),opacity .4s}
.t-sun{transform:translateY(0) rotate(0);opacity:1}
.t-moon{transform:translateY(30px) rotate(-90deg);opacity:0}
:root[data-theme="light"] .t-sun{transform:translateY(-30px) rotate(90deg);opacity:0}
:root[data-theme="light"] .t-moon{transform:none;opacity:1}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .t-sun{transform:translateY(-30px) rotate(90deg);opacity:0}
  :root:not([data-theme="dark"]) .t-moon{transform:none;opacity:1}
}
@media(max-width:820px){.nav-links{display:none}.theme-btn{margin-left:auto}}

/* ================= buttons ================= */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--y);color:var(--on-y);
  font-weight:700;border-radius:999px;padding:12px 22px;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .3s var(--spring),box-shadow .3s}
.btn .ic{font-size:1.15em;stroke-width:2.2}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 40px -8px rgba(255,212,0,.55)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.97)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-lg{padding:16px 28px;font-size:17px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--y);box-shadow:none}
.btn-ghost::after{display:none}
.btn-lg[data-download]{animation:breathe 2.6s ease-in-out infinite}
.btn-lg[data-download] .ic{animation:nudge 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,212,0,.45)}50%{box-shadow:0 0 0 14px rgba(255,212,0,0)}}
@keyframes nudge{0%,60%,100%{transform:none}70%{transform:translateY(3px)}80%{transform:none}}
@media(max-width:400px){.nav .btn-sm span{display:none}.nav .btn-sm{padding:11px}}

/* ================= reveal ================= */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd,0s)}
.reveal.in{opacity:1;transform:none}

/* ================= hero ================= */
.hero{position:relative;min-height:100vh;max-width:1200px;margin:0 auto;padding:130px 24px 60px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.hero-deco{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.dotfill{fill:var(--dot)}
.orbit circle{stroke:var(--line);stroke-dasharray:4 8}
.orbit-spin{transform-origin:870px 400px;animation:rot 40s linear infinite}
.orbit-spin.rev{animation-duration:60s;animation-direction:reverse}
.orbit-dot{fill:var(--y)}
.orb{position:absolute;border-radius:50%;filter:blur(80px);z-index:-1;animation:float 12s ease-in-out infinite;opacity:var(--orb)}
.orb-a{width:440px;height:440px;background:#FFD400;right:0;top:120px}
.orb-b{width:300px;height:300px;background:#ff7a3c;left:-80px;bottom:40px;animation-delay:-6s;opacity:calc(var(--orb) * .6)}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}}
@keyframes rot{to{transform:rotate(360deg)}}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--mute);background:var(--bg2)}
.live{width:8px;height:8px;border-radius:50%;background:var(--y);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,212,0,.7)}100%{box-shadow:0 0 0 10px rgba(255,212,0,0)}}
.hero h1{font-size:clamp(44px,6.6vw,84px);margin:22px 0}
.hl{background:linear-gradient(90deg,#FFD400,#ffb000,#ffe766,#FFD400);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
:root[data-theme="light"] .hl{background-image:linear-gradient(90deg,#d9a400,#ff9500,#c99a00,#d9a400)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .hl{background-image:linear-gradient(90deg,#d9a400,#ff9500,#c99a00,#d9a400)}}
@keyframes shine{to{background-position:300% 0}}
.lead{font-size:18px;color:var(--ink2);max-width:540px}
.lead b{color:var(--y-ink)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 22px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--mute)}
.meta-row li{display:flex;align-items:center;gap:7px}
.meta-row .ic{font-size:16px;color:var(--y-ink)}
.meta{font-size:13px;color:var(--mute)}
.hero-copy .reveal:nth-child(2){--rd:.1s}.hero-copy .reveal:nth-child(3){--rd:.2s}.hero-copy .reveal:nth-child(4){--rd:.3s}.hero-copy .reveal:nth-child(5){--rd:.4s}
.hero-stage{--rd:.3s;display:grid;justify-items:center;gap:22px;perspective:1400px}
.tilt{position:relative;transform-style:preserve-3d;transition:transform .6s var(--ease)}
@media(max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:110px;text-align:center}
  .lead{margin:0 auto}.cta,.meta-row{justify-content:center}
}

/* floating chips */
.float-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:16px;text-align:left;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);
  animation:chipfloat 6s ease-in-out infinite;transform:translateZ(60px);white-space:nowrap}
.float-chip b{display:block;font-size:13px;line-height:1.2}
.float-chip small{font-size:11px;color:var(--mute)}
.fc-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--chip);font-size:17px;color:var(--ink)}
.fc-ic.y{background:var(--y);color:var(--on-y)}
.fc-ic.g{background:#2b8a3e;color:#fff}
.fc1{left:-120px;top:70px}
.fc2{right:-118px;top:200px;animation-delay:-1.5s}
.fc3{left:-104px;bottom:150px;animation-delay:-3s}
.fc4{right:-96px;bottom:60px;animation-delay:-4.5s}
@keyframes chipfloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media(max-width:1180px){.fc1,.fc3{left:-60px}.fc2,.fc4{right:-56px}}
@media(max-width:560px){.float-chip{padding:6px 10px 6px 6px;gap:7px}.fc-ic{width:26px;height:26px;font-size:14px}.float-chip small{display:none}
  .fc1{left:-14px;top:40px}.fc2{right:-14px;top:170px}.fc3{left:-14px;bottom:130px}.fc4{right:-14px;bottom:40px}}

/* stepper under the hero phone */
.stepper{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:460px}
.stepper li{position:relative;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--chip);color:var(--mute);overflow:hidden;transition:color .4s,background .4s}
.stepper li::before{content:"";position:absolute;inset:0;background:var(--y);transform:scaleX(0);transform-origin:left;z-index:-1}
.stepper li{isolation:isolate}
.stepper li.on{color:var(--on-y)}
.stepper li.on::before{animation:fillx .5s var(--ease) forwards}
@keyframes fillx{to{transform:scaleX(1)}}

/* ================= phone ================= */
.phone{position:relative;width:300px;height:620px;border-radius:50px;background:#050505;padding:11px;
  box-shadow:0 0 0 2px #3a372e,0 0 0 8px #141414,0 0 0 9px #2d2a22,0 50px 100px -30px rgba(0,0,0,.75),0 0 140px -40px rgba(255,212,0,.4)}
#heroPhone{animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
.island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:92px;height:26px;border-radius:20px;background:#000;z-index:9}
.screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#111;color:#fff}
.wp{position:absolute;inset:0;background:linear-gradient(165deg,#1b1733,#0b1b24 70%);overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(30px);opacity:.75}
.b1{width:220px;height:220px;background:#6c4bd8;left:-60px;top:-40px;animation:blob1 14s ease-in-out infinite}
.b2{width:200px;height:200px;background:#0e8fa3;right:-70px;bottom:60px;animation:blob2 16s ease-in-out infinite}
.b3{width:140px;height:140px;background:#ff8a5b;left:40%;top:45%;opacity:.45;animation:blob1 18s ease-in-out infinite reverse}
@keyframes blob1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,80px) scale(1.2)}}
@keyframes blob2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-90px) scale(1.15)}}
.status{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:17px 28px 0;font-size:12px;font-weight:600}
.sb{display:flex;gap:5px;align-items:center}
.sb svg{height:10px;width:auto;fill:#fff}
.apps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 12px;padding:26px 20px 0}
.app{display:grid;justify-items:center;gap:5px}
.app b{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -6px rgba(0,0,0,.6)}
.app .ic{font-size:24px;color:#fff;stroke-width:2}
.app .ic.dark{color:#2f80ed}
.app span{font-size:9.5px;opacity:.9}
.dock{position:absolute;bottom:22px;left:14px;right:14px;z-index:1;display:flex;justify-content:space-around;padding:10px 8px;border-radius:28px;background:rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.dock .app b{width:48px;height:48px}
.home-bar{position:absolute;bottom:8px;left:50%;width:110px;height:4px;margin-left:-55px;border-radius:4px;background:rgba(255,255,255,.75);z-index:2}

/* hero widget */
.hw{position:relative;z-index:3;margin:30px 16px 0;height:158px;perspective:1000px;cursor:pointer}
.hw-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--spring)}
.hw.flip .hw-inner{transform:rotateY(180deg) scale(1.03)}
.hw-face,.pw-face{position:absolute;inset:0;border-radius:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.hw-snap,.pw-snap{transform:rotateY(180deg);background:#000;box-shadow:0 20px 50px -10px rgba(255,212,0,.35)}
.snap-top{position:absolute;left:10px;right:10px;top:10px;display:flex;align-items:center;gap:8px;font-size:12px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.snap-top b{display:block;line-height:1.1}.snap-top small{font-size:10px;opacity:.85}
.av{width:26px;height:26px;border-radius:50%;background:var(--c,#4dabf7);display:grid;place-items:center;font-size:12px;font-weight:700;color:#111;box-shadow:0 0 0 2px #fff}
.badge{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);font-size:10px;font-weight:700;letter-spacing:.04em}
.badge.stay{background:var(--y);color:#111;text-shadow:none}
.snap-cap{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);font-size:12px;font-weight:600;color:#fff;white-space:nowrap}
.snap-bar{position:absolute;left:12px;right:12px;bottom:8px;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.snap-bar i{display:block;height:100%;background:var(--y);width:100%;transform-origin:left}
.hw.flip .snap-bar i,.pw.flip .snap-bar i{animation:drain 4s linear forwards}
@keyframes drain{to{transform:scaleX(0)}}
.hint-dot{position:absolute;right:14px;bottom:14px;width:9px;height:9px;border-radius:50%;background:var(--y);transform:scale(0);transition:transform .5s var(--spring);z-index:3}
.hint-dot.show{transform:scale(1);animation:ping 1.6s infinite}
.ripple{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:2px solid var(--y);opacity:0;pointer-events:none;z-index:4}
.ripple.go{animation:ripple .6s var(--ease)}
@keyframes ripple{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.4);opacity:0}}
.tap-meter{position:relative;z-index:3;display:flex;justify-content:center;gap:6px;margin-top:10px;height:6px;opacity:0;transition:opacity .3s}
.tap-meter.show{opacity:1}
.tap-meter i{width:22px;height:6px;border-radius:6px;background:rgba(255,255,255,.25);transition:background .2s,transform .3s var(--spring)}
.tap-meter i.on{background:var(--y);transform:scaleY(1.4)}
.finger{position:absolute;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,.2));border:2px solid rgba(255,255,255,.85);
  left:50%;top:118px;margin-left:-22px;opacity:0;pointer-events:none;z-index:8;transform:translateY(60px) scale(1.3);transition:opacity .35s,transform .55s var(--ease);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.finger.show{opacity:1;transform:none}
.finger.tap{animation:tap .26s ease}
@keyframes tap{50%{transform:scale(.72);background:rgba(255,212,0,.7)}}
.drop{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--y);box-shadow:0 0 16px 4px rgba(255,212,0,.7);right:36px;top:-20px;opacity:0;z-index:7}
.drop.go{animation:drop 1s cubic-bezier(.5,0,.75,0) forwards}
@keyframes drop{0%{top:-20px;opacity:0}15%{opacity:1}100%{top:213px;opacity:1}}

/* disguise faces (shared by hero + playground) */
.dz{position:absolute;inset:0;padding:18px 20px;display:flex;flex-direction:column;justify-content:center;animation:dzin .6s var(--ease)}
@keyframes dzin{from{opacity:0;transform:scale(.94);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.dz-clock{background:rgba(18,16,12,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;flex-direction:row;align-items:center;gap:16px;border:1px solid rgba(255,255,255,.08)}
.dz-clock .t{font:500 54px "Space Grotesk";letter-spacing:-.04em;line-height:1}
.dz-clock .d{font-size:13px;opacity:.75;margin-top:6px}
.dial{width:96px;height:96px;flex:none}
.dial .face{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.2)}
.dial .tick{stroke:rgba(255,255,255,.55);stroke-width:2;stroke-linecap:round}
.dial .hh,.dial .mh{stroke:#fff;stroke-linecap:round}
.dial .sh{stroke:#ff6b6b;stroke-width:1.4}
.dial .hh{stroke-width:4}.dial .mh{stroke-width:2.6}
.dial g{transform-origin:50px 50px}
.dial .sh-g{transition:transform .4s var(--spring)}
.dz-weather{background:linear-gradient(140deg,#56b4ff,#2563c9);color:#fff;flex-direction:row;align-items:center;gap:12px}
.dz-weather svg.wi{width:72px;height:72px;flex:none}
.dz-weather .tmp{font:500 50px "Space Grotesk";line-height:1}
.dz-weather .d{font-size:12px;opacity:.9}
.dz-weather .fc{display:flex;gap:12px;margin-left:auto;font-size:11px;text-align:center}
.dz-weather .fc svg{width:26px;height:26px;display:block;margin:3px auto}
.hw .dz-weather .fc span:nth-child(3){display:none}
.dz-cal{background:#fff;color:#111;flex-direction:row;align-items:center;gap:18px}
.dz-cal .day{font:700 62px "Space Grotesk";line-height:1;color:#e03131}
.dz-cal .mo{font-weight:700;font-size:12px;color:#e03131;letter-spacing:.12em}
.dz-cal .d{font-size:12px;color:#666}
.dz-cal .ev{display:grid;gap:6px;margin-left:auto;font-size:11px;color:#555}
.dz-cal .ev span{display:flex;align-items:center;gap:6px}
.dz-cal .ev i{width:4px;height:16px;border-radius:2px;background:var(--c)}
.dz-photo{padding:0}
.dz-photo .cap{position:absolute;left:12px;bottom:10px;font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* ================= marquee ================= */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:20px 0;background:var(--bg2);transform:rotate(-1.5deg) scale(1.03);margin:30px 0 40px;transition:background .5s}
.track{display:flex;align-items:center;gap:28px;width:max-content;animation:marq 32s linear infinite;font:500 22px "Space Grotesk";white-space:nowrap}
.track i{width:8px;height:8px;border-radius:50%;background:var(--y);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ================= sections ================= */
section{position:relative}
.section-head{max-width:760px;margin:0 auto 60px;text-align:center;padding:0 24px}
.eyebrow{display:inline-block;color:var(--y-ink);font:600 13px Inter;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.section-head h2{font-size:clamp(32px,5vw,56px)}
.sub{color:var(--mute);margin-top:14px;font-size:17px}

/* ================= story ================= */
.how{padding:100px 0 40px}
.story{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:60px}
.story-stage{position:sticky;top:90px;height:calc(100vh - 110px);display:grid;place-items:center;align-content:center;gap:20px}
.step-dots{display:flex;gap:8px}
.step-dots i{width:8px;height:8px;border-radius:8px;background:var(--line);transition:width .4s var(--ease),background .4s}
.step-dots i.on{width:28px;background:var(--y)}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .5s,transform .5s var(--ease);transform:translateX(20px)}
.step.on{opacity:1;transform:none}
.num{display:inline-flex;align-items:center;gap:10px;font:700 15px "Space Grotesk";color:var(--y-ink);letter-spacing:.1em}
.num .ic{width:38px;height:38px;padding:9px;border-radius:12px;background:var(--chip);color:var(--ink);transition:background .4s,color .4s}
.step.on .num .ic{background:var(--y);color:var(--on-y)}
.step h3{font-size:clamp(28px,3.4vw,42px);margin:14px 0}
.step p{color:var(--ink2);font-size:17px;max-width:440px}
.step b{color:var(--ink)}
@media(max-width:960px){
  .story{grid-template-columns:1fr;gap:0}
  .story-stage{top:64px;height:auto;padding:10px 0;z-index:2;background:linear-gradient(var(--bg) 85%,transparent)}
  .phone-story{transform:scale(.56);margin:-136px 0}
  .step{min-height:58vh;justify-content:flex-start;padding-top:2vh;text-align:center;align-items:center;transform:translateY(20px)}
  .step p{margin:0 auto}
  .steps{padding-bottom:20vh}
}

/* story screens */
.scr{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.scr.on{opacity:1;transform:none}

/* 0 camera — photo click */
.cam{position:absolute;inset:0;background:#000}
.cam > .scene{height:72%;top:9%}
.cam-grid{position:absolute;left:0;right:0;top:9%;height:72%;background:
  linear-gradient(90deg,transparent calc(33.3% - .5px),rgba(255,255,255,.25) 33.3%,transparent calc(33.3% + .5px),transparent calc(66.6% - .5px),rgba(255,255,255,.25) 66.6%,transparent calc(66.6% + .5px)),
  linear-gradient(transparent calc(33.3% - .5px),rgba(255,255,255,.25) 33.3%,transparent calc(33.3% + .5px),transparent calc(66.6% - .5px),rgba(255,255,255,.25) 66.6%,transparent calc(66.6% + .5px))}
.cam-top{position:absolute;top:52px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 22px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--y);z-index:2}
.cam-top .ic{font-size:18px;color:#fff}
.focus{position:absolute;left:50%;top:40%;width:90px;height:90px;margin:-45px 0 0 -45px;opacity:0}
.focus i{position:absolute;width:18px;height:18px;border:2px solid var(--y)}
.focus i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.focus i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.focus i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.focus i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.scr.on .focus{animation:focus 3.4s var(--ease) infinite}
@keyframes focus{0%{opacity:0;transform:scale(1.6)}12%,38%{opacity:1;transform:scale(1)}20%{transform:scale(.92)}45%,100%{opacity:0;transform:scale(1)}}
.cam-bottom{position:absolute;left:0;right:0;bottom:0;height:19%;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#000}
.thumb{position:relative;width:44px;height:44px;border-radius:12px;overflow:hidden;border:2px solid #fff;background:#222}
.thumb .scene{opacity:0}
.scr.on .thumb .scene{animation:thumbin 3.4s infinite}
@keyframes thumbin{0%,72%{opacity:0}78%,100%{opacity:1}}
.shutter{width:68px;height:68px;border-radius:50%;border:4px solid #fff;display:grid;place-items:center}
.shutter i{width:52px;height:52px;border-radius:50%;background:#fff;transition:transform .2s}
.scr.on .shutter i{animation:press 3.4s infinite}
@keyframes press{0%,40%,100%{transform:scale(1)}44%{transform:scale(.8)}50%{transform:scale(1)}}
.flipbtn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center}
.flipbtn .ic{font-size:20px}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.scr.on .flash{animation:flash 3.4s infinite}
@keyframes flash{0%,43%{opacity:0}46%{opacity:.9}58%,100%{opacity:0}}
.shot{position:absolute;left:0;right:0;top:9%;height:72%;overflow:hidden;opacity:0;transform-origin:30px 105%;border-radius:0}
.scr.on .shot{animation:shot 3.4s var(--smooth) infinite}
@keyframes shot{0%,46%{opacity:0;transform:none;border-radius:0}50%{opacity:1;transform:none}74%{opacity:1;transform:translate(8px,40px) scale(.12);border-radius:60px}78%,100%{opacity:0;transform:translate(8px,40px) scale(.12)}}

/* 1 sheet */
.sheet{position:absolute;inset:0;background:#141210;padding:54px 18px 18px;display:flex;flex-direction:column;gap:9px}
.sheet-prev{position:relative;height:96px;border-radius:16px;overflow:hidden;flex:none}
.sheet-prev span{position:absolute;left:10px;bottom:8px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.45)}
.sheet h4{font-size:17px;margin-top:4px}
.friend{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:#1f1c16;font-size:14px;font-weight:600}
.friend i{width:28px;height:28px;border-radius:50%;background:var(--c);display:grid;place-items:center;font-style:normal;font-size:12px;color:#111}
.chk{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid #555;display:grid;place-items:center}
.chk .ic{font-size:13px;stroke-width:3;color:#111;opacity:0;stroke-dasharray:30;stroke-dashoffset:30}
.scr.on .friend:not(.off) .chk{animation:check .4s var(--spring) var(--d) forwards}
.scr.on .friend:not(.off) .chk .ic{animation:drawic .4s ease calc(var(--d) + .15s) forwards}
@keyframes check{to{background:var(--y);border-color:var(--y)}}
@keyframes drawic{to{opacity:1;stroke-dashoffset:0}}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#1f1c16;border-radius:999px;padding:4px;margin-top:4px;font-size:13px;text-align:center}
.seg b{position:relative;z-index:1;padding:6px 0}
.knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--y)}
.scr.on .knob{animation:knob 3.2s var(--ease) infinite}
@keyframes knob{0%,40%{transform:translateX(0)}50%,90%{transform:translateX(100%)}100%{transform:translateX(0)}}
.chips{display:flex;gap:6px}
.chips i{flex:1;text-align:center;font-style:normal;font-size:11px;padding:6px 0;border-radius:10px;background:#1f1c16;color:#a59f8c}
.chips i.sel{background:#3a3320;color:var(--y)}
.sendbtn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:999px;background:var(--y);color:#111;font-weight:700}
.sendbtn .ic{stroke-width:2.2}
.scr.on .sendbtn{animation:pressb 2.4s 1s infinite}
.scr.on .sendbtn .ic{animation:fly 2.4s 1s infinite}
@keyframes pressb{0%,70%,100%{transform:scale(1)}78%{transform:scale(.95)}}
@keyframes fly{0%,72%{transform:none;opacity:1}86%{transform:translate(18px,-18px);opacity:0}87%{transform:translate(-10px,10px);opacity:0}100%{transform:none;opacity:1}}

/* 2 relay */
.relay{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#211c12,#0d0c09)}
.rline{position:absolute;left:50%;width:2px;margin-left:-1px;background:repeating-linear-gradient(#3a362a 0 6px,transparent 6px 12px);height:70px;background-size:2px 12px}
.scr.on .rline{animation:dash .6s linear infinite}
@keyframes dash{to{background-position:0 12px}}
.rline.l1{top:150px}.rline.l2{top:316px}
.node{position:absolute;left:50%;transform:translateX(-50%);display:grid;justify-items:center;align-content:center;gap:4px;width:88px;height:88px;border-radius:26px;background:#1f1c16;border:1px solid #2c2920}
.node .ic{font-size:30px;color:#fff}
.node small{font-size:11px;color:#a59f8c;font-weight:600}
.n1{top:60px}.n2{top:224px;border-color:rgba(255,212,0,.45)}.n3{top:390px}
.n2 .ic{color:var(--y)}
.bin{position:absolute;right:-12px;top:-12px;width:30px;height:30px;border-radius:50%;background:#2b8a3e;display:grid;place-items:center;transform:scale(0)}
.bin .ic{font-size:15px;color:#fff}
.scr.on .bin{animation:bin 3.2s var(--spring) infinite}
@keyframes bin{0%,55%{transform:scale(0)}62%,88%{transform:scale(1)}100%{transform:scale(0)}}
.packet{position:absolute;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:5px;background:var(--y);box-shadow:0 0 20px var(--y);opacity:0}
.scr.on .packet{animation:packet 3.2s var(--ease) infinite}
@keyframes packet{0%{top:140px;opacity:0}8%{opacity:1}35%{top:260px}50%{top:260px}85%{top:420px;opacity:1}95%,100%{top:420px;opacity:0}}
.poof{position:absolute;top:262px;left:calc(50% + 56px);display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#51cf66;opacity:0}
.scr.on .poof{animation:poof 3.2s infinite}
@keyframes poof{0%,55%{opacity:0;transform:translateY(6px)}62%,85%{opacity:1;transform:none}100%{opacity:0}}
.timer48{position:absolute;bottom:26px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#a59f8c}
.timer48 .ic{color:var(--y);font-size:15px}
.scr.on .timer48 .ic{animation:flipg 2.4s var(--spring) infinite}
@keyframes flipg{0%,40%{transform:none}60%,100%{transform:rotate(180deg)}}
.timer48 b{color:var(--y)}

/* home-screen story screens */
.homey .wp{background:linear-gradient(165deg,#1b1733,#0b1b24 70%)}
.mini-w{position:absolute;left:16px;right:16px;top:72px;height:150px;border-radius:26px;overflow:hidden;z-index:2}
.clockw{background:rgba(18,16,12,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);color:#fff;padding:20px;display:flex;flex-direction:column;justify-content:center}
.clockw .t{font:500 56px "Space Grotesk";letter-spacing:-.04em;line-height:1}
.clockw .d{font-size:13px;opacity:.75;margin-top:6px}
.hint-dot.big{width:11px;height:11px}
.scr.on .hint-dot.big{animation:dotpop .6s var(--spring) .3s both,ping 1.6s 1s infinite}
@keyframes dotpop{from{transform:scale(0)}to{transform:scale(1)}}
.zoom-ring{position:absolute;right:18px;top:204px;width:44px;height:44px;margin:-22px -22px 0 0;border-radius:50%;border:2px solid var(--y);opacity:0;z-index:3}
.scr.on .zoom-ring{animation:ring 1.6s .8s infinite}
@keyframes ring{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.8);opacity:0}}
.mini-apps{position:absolute;left:20px;right:20px;top:258px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px 14px;z-index:1}
.mini-apps i{aspect-ratio:1;border-radius:15px;background:linear-gradient(145deg,var(--c1),var(--c2));opacity:.9}
.flipper{overflow:visible;perspective:900px}
.flipper .fa,.flipper .fb{position:absolute;inset:0;border-radius:26px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flipper .fb{transform:rotateY(180deg)}
.scr.on .flipper .fa{animation:flipA 4s var(--spring) infinite}
.scr.on .flipper .fb{animation:flipB 4s var(--spring) infinite}
@keyframes flipA{0%,45%{transform:rotateY(0)}60%,100%{transform:rotateY(-180deg)}}
@keyframes flipB{0%,45%{transform:rotateY(180deg)}60%,100%{transform:rotateY(0)}}
.taps{position:absolute;top:252px;left:0;right:0;display:flex;justify-content:center;gap:14px;z-index:2}
.taps i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 15px "Space Grotesk";font-style:normal;background:rgba(255,255,255,.1);color:#a59f8c}
.scr.on .taps i{animation:tapnum 4s infinite}
.scr.on .taps i:nth-child(2){animation-delay:.3s}.scr.on .taps i:nth-child(3){animation-delay:.6s}
@keyframes tapnum{0%,10%{background:rgba(255,255,255,.1);color:#a59f8c}14%,90%{background:var(--y);color:#111}100%{background:rgba(255,255,255,.1)}}
.finger.auto{top:126px;opacity:1;transform:none}
.scr.on .finger.auto{animation:ftap 4s infinite}
@keyframes ftap{0%,8%,18%,28%,40%{transform:scale(1);background:rgba(255,255,255,.4)}
  12%,22%,32%{transform:scale(.72);background:rgba(255,212,0,.7)}50%,100%{transform:translateY(60px) scale(1);opacity:0}}
.vanish{z-index:3}
.scr.on .vanish{animation:vanish 5s infinite}
@keyframes vanish{0%,62%{opacity:1;filter:none;transform:none}80%,100%{opacity:0;filter:blur(16px);transform:scale(.9)}}
.count{position:absolute;right:10px;top:10px;width:38px;height:38px;display:grid;place-items:center}
.count svg{position:absolute;inset:0;transform:rotate(-90deg)}
.count circle{fill:rgba(0,0,0,.35);stroke:var(--y);stroke-width:3;stroke-dasharray:95;stroke-dashoffset:0}
.scr.on .count circle{animation:cd 5s linear infinite}
@keyframes cd{0%{stroke-dashoffset:0}62%,100%{stroke-dashoffset:95}}
.count span{position:relative;font:700 13px "Space Grotesk";color:#fff}
.back{z-index:2}

/* ================= playground ================= */
.play{padding:120px 24px}
.play-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center}
.dz-tabs{display:grid;gap:10px}
.dz-tab{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line);transition:transform .4s var(--spring),border-color .3s,background .5s}
.dz-tab:hover{transform:translateX(6px)}
.dz-tab.on{border-color:var(--y);box-shadow:0 0 0 3px rgba(255,212,0,.15)}
.tab-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--chip);font-size:22px;transition:background .3s,color .3s}
.dz-tab.on .tab-ic{background:var(--y);color:var(--on-y)}
.dz-tab b{display:block;font-size:16px}.dz-tab small{color:var(--mute);font-size:13px}
.size-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:16px;padding:4px;border-radius:999px;background:var(--chip)}
.size-toggle button{position:relative;z-index:1;padding:10px;font-size:14px;font-weight:600;color:var(--mute);transition:color .3s}
.size-toggle button.on{color:var(--on-y)}
.sz-knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--y);transition:transform .5s var(--spring)}
.size-toggle.wide .sz-knob{transform:translateX(100%)}
.desk{position:relative;height:420px;border-radius:32px;overflow:hidden;display:grid;place-items:center;align-content:center;gap:16px;box-shadow:var(--shadow)}
.desk .wp{background:linear-gradient(165deg,#1b1733,#0b1b24 70%)}
.pw{position:relative;z-index:2;height:170px;perspective:1000px;cursor:pointer;transition:width .7s var(--spring);-webkit-tap-highlight-color:transparent;outline:none}
.pw.square{width:170px}.pw.wide{width:min(380px,calc(100vw - 100px))}
.pw:focus-visible{box-shadow:0 0 0 3px var(--y);border-radius:28px}
.pw-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--spring)}
.pw.flip .pw-inner{transform:rotateY(180deg)}
.pw.bump .pw-inner{animation:bump .25s ease}
@keyframes bump{50%{transform:scale(.96)}}
.pw.square .dz{padding:14px}
.pw.square .dz-clock{flex-direction:column;align-items:flex-start;gap:0}
.pw.square .dz-clock .t{font-size:44px}
.pw.square .dial,.pw.square .fc,.pw.square .ev{display:none}
.pw.square .dz-weather{flex-direction:column;align-items:flex-start;gap:2px}
.pw.square .dz-weather svg.wi{width:50px;height:50px}
.pw.square .dz-weather .tmp{font-size:40px}
.pw.square .dz-cal{flex-direction:column;align-items:flex-start;gap:2px}
.pw.square .dz-cal .day{font-size:54px}
.pw.square .snap-top b,.pw.square .snap-top small{display:none}
.play-hint{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:600;transition:opacity .3s}
.play-hint .ic{font-size:17px;color:var(--y);animation:wag 1.6s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(10deg)}}
.desk .tap-meter{opacity:1;margin-top:0}
@media(max-width:860px){.play-grid{grid-template-columns:1fr}.dz-tabs{grid-template-columns:1fr 1fr}.dz-tab small{display:none}}
@media(max-width:420px){.dz-tab{padding:10px;gap:10px}.tab-ic{width:36px;height:36px;font-size:18px}}

/* ================= privacy ================= */
.privacy{padding:40px 24px 120px}
.pv-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pv{position:relative;text-align:left;padding:26px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden;transition:transform .5s var(--spring),border-color .3s,background .5s}
.pv::before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,212,0,.14),transparent 60%);opacity:0;transition:opacity .3s}
.pv:hover::before{opacity:1}
.pv:hover{transform:translateY(-6px);border-color:rgba(255,212,0,.5)}
.pv:nth-child(3n+2){--rd:.1s}.pv:nth-child(3n){--rd:.2s}
.ico{position:relative;display:inline-grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--chip);font-size:26px;color:var(--y-ink);transition:transform .5s var(--spring),background .3s,color .3s}
.pv:hover .ico{transform:rotate(-10deg) scale(1.1);background:var(--y);color:var(--on-y)}
.pv:hover .ico .ic{stroke-dasharray:80;animation:redraw .9s var(--ease)}
@keyframes redraw{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
.pv h3{font-size:19px;margin:16px 0 6px}.pv p{font-size:14px;color:var(--mute)}
@media(max-width:820px){.pv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pv-grid{grid-template-columns:1fr}}

/* ================= faq ================= */
.faq{padding:0 24px 120px}
.faq-list{max-width:760px;margin:0 auto;display:grid;gap:12px}
.qa{border-radius:18px;background:var(--card);border:1px solid var(--line);transition:border-color .3s,background .5s}
.qa[open]{border-color:rgba(255,212,0,.5)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:600;font-size:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ic{font-size:20px;transition:transform .4s var(--spring);color:var(--y-ink)}
.qa[open] summary .ic{transform:rotate(180deg)}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.qa.opened .ans{grid-template-rows:1fr}
.ans p{overflow:hidden;padding:0 22px;color:var(--ink2);font-size:15px}
.qa.opened .ans p{padding-bottom:18px}

/* ================= final ================= */
.final{padding:0 24px 120px}
.final-card{position:relative;max-width:900px;margin:0 auto;text-align:center;padding:50px 24px 60px;border-radius:36px;overflow:hidden;
  background:radial-gradient(circle at 50% 0%,rgba(255,212,0,.22),transparent 60%),var(--card);border:1px solid var(--line);transition:background .5s}
.final-art{width:min(400px,100%);height:auto;margin:0 auto 10px;display:block;overflow:visible}
.fa-ring circle{stroke:var(--y);stroke-opacity:.35;stroke-dasharray:6 8;transform-origin:200px 70px;animation:rot 20s linear infinite}
.fa-ring circle:last-child{animation-direction:reverse;stroke-opacity:.2}
.fa-face{fill:var(--dark)}
.fa-hand{stroke:#fff;stroke-width:4;stroke-linecap:round;fill:none;transform-origin:200px 70px;animation:rot 8s linear infinite}
.fa-dot{fill:var(--y);animation:ping 1.6s infinite}
.fa-spark{fill:none;stroke:var(--y-ink);stroke-width:1.6;stroke-linejoin:round}
.fa-spark use{animation:twinkle 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.fa-spark use:nth-child(2){animation-delay:-.8s}.fa-spark use:nth-child(3){animation-delay:-1.6s}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
.final-card h2{font-size:clamp(36px,6vw,64px)}
.final-card p{color:var(--mute);margin:12px 0 28px}
.final-card .meta{margin:16px 0 0}

/* ================= footer ================= */
.footer{border-top:1px solid var(--line);background:var(--bg2);padding:56px 24px 28px;transition:background .5s}
.foot-top{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
.foot-brand{display:flex;gap:14px;align-items:center}
.foot-brand img{border-radius:12px}
.foot-brand b{display:block;font:700 20px "Space Grotesk"}.foot-brand span{font-size:14px;color:var(--mute)}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:22px;font-size:14px;color:var(--mute)}
.foot-links a:hover{color:var(--y-ink)}
.share{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink);transition:border-color .3s}
.share:hover{border-color:var(--y)}
.credit{max-width:1100px;margin:46px auto 20px;display:grid;justify-items:center;gap:6px}
.credit-label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s var(--ease)}
.credit.writing .credit-label{opacity:1;transform:none}
.signature{width:min(360px,82vw);height:auto;overflow:visible}
.signature .g{fill:var(--y-ink);fill-opacity:0;stroke:var(--y-ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.signature .sig-under{fill:none;stroke:var(--y-ink);stroke-width:2.2;stroke-linecap:round}
.pen{opacity:0}
.pen-body{fill:var(--ink)}
.pen-nib{fill:var(--y)}
.foot-bottom{max-width:1100px;margin:24px auto 0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:var(--mute)}

/* ================= modal ================= */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;visibility:hidden;transition:visibility 0s .5s}
.modal.open{visibility:visible;transition:none}
.modal-bg{position:absolute;inset:0;background:rgba(5,5,3,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .4s}
.modal.open .modal-bg{opacity:1}
.modal-card{position:relative;width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:30px 26px 24px;text-align:center;
  transform:translateY(40px) scale(.9);opacity:0;transition:transform .55s var(--spring),opacity .3s}
.modal.open .modal-card{transform:none;opacity:1}
.x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--chip);color:var(--mute);display:grid;place-items:center;font-size:18px;transition:transform .3s,color .2s}
.x:hover{transform:rotate(90deg);color:var(--ink)}
.modal-card h3{font-size:24px;margin:14px 0 4px}
.muted{color:var(--mute);font-size:14px}
.dl-anim{display:grid;place-items:center}
.dl-ring{position:relative;width:80px;height:80px;display:grid;place-items:center}
.dl-ring svg:first-child{position:absolute;inset:0;transform:rotate(-90deg)}
.dl-ring circle{fill:none;stroke:var(--y);stroke-width:5;stroke-linecap:round;stroke-dasharray:214;stroke-dashoffset:214}
.modal.open .dl-ring circle{animation:ringfill 1.4s var(--ease) .2s forwards}
@keyframes ringfill{to{stroke-dashoffset:0}}
.dl-arrow{position:absolute;font-size:32px;color:var(--y-ink);stroke-width:2.4}
.modal.open .dl-arrow{animation:arrow 1.4s var(--ease) .2s forwards}
@keyframes arrow{0%{transform:translateY(-10px);opacity:0}30%{opacity:1;transform:none}80%{transform:translateY(8px);opacity:1}100%{transform:translateY(16px);opacity:0}}
.dl-check{position:absolute;font-size:36px;color:var(--y-ink);stroke-width:2.6;transform:scale(0)}
.modal.open .dl-check{animation:dotpop .5s var(--spring) 1.5s forwards}
.install{text-align:left;margin:22px 0 18px;display:grid;gap:10px;counter-reset:s}
.install li{position:relative;padding:12px 14px 12px 50px;border-radius:16px;background:var(--card2);font-size:14px;color:var(--ink2);counter-increment:s;opacity:0;transform:translateX(-16px)}
.modal.open .install li{animation:slidein .5s var(--ease) calc(.6s + var(--i)*.12s) forwards}
@keyframes slidein{to{opacity:1;transform:none}}
.install li::before{content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--y);color:#111;font:700 13px "Space Grotesk";display:grid;place-items:center}
.install b{color:var(--ink)}
.retry{width:100%;font-size:14px}
.qr-wrap{display:none;margin-top:18px;padding:16px;border-radius:18px;background:var(--card2)}
.qr-wrap.show{display:block}
.qr-wrap p{font-size:13px;color:var(--mute);margin-bottom:12px}
#qr{display:inline-block;padding:10px;background:#fff;border-radius:12px}
#qr img,#qr canvas{width:140px!important;height:140px!important}
.info{padding-top:36px}
.info-ico{display:inline-grid;place-items:center;width:80px;height:80px;border-radius:24px;background:var(--y);color:var(--on-y);font-size:40px}
.info-ico .ic{stroke-width:1.6;stroke-dasharray:80;stroke-dashoffset:80}
.modal.open .info-ico{animation:pop .6s var(--spring)}
.modal.open .info-ico .ic{animation:redraw 1.1s var(--ease) .2s forwards}
.info p{color:var(--ink2);margin-top:10px;font-size:15px}

.toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,120px);background:var(--y);color:#111;font-weight:600;font-size:14px;padding:12px 20px;border-radius:999px;transition:transform .5s var(--spring);max-width:calc(100% - 32px);text-align:center}
.toast.show{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* theme switch: circular reveal (see script.js) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}