/* WUW+ marketing site — brand tokens from design_handoff_website/README.md */
:root{
  --canvas:#0E0B08; --ink:#F6ECDF; --ink-60:rgba(246,236,223,0.6); --ink-65:rgba(246,236,223,0.65); --ink-45:rgba(246,236,223,0.45); --ink-35:rgba(246,236,223,0.35);
  --light-a:#FFF9F3; --light-b:#FDF2E7; --dark-ink:#241d16; --dark-ink-60:rgba(36,29,22,0.6); --dark-ink-55:rgba(36,29,22,0.55); --dark-ink-45:rgba(36,29,22,0.45);
  --coral:oklch(0.62 0.19 30); --coral-33:oklch(0.62 0.19 33); --gold:oklch(0.72 0.13 75); --amber:oklch(0.78 0.16 60); --fence:oklch(0.58 0.22 28);
  --rs:linear-gradient(120deg, oklch(0.72 0.15 60), oklch(0.6 0.2 32), oklch(0.62 0.13 150));
  --orb-esc:linear-gradient(135deg, oklch(0.78 0.16 62) 0%, oklch(0.7 0.19 45) 50%, oklch(0.7 0.14 152) 100%);
  --plus:linear-gradient(120deg, #FFFDF8, #FFE9CF);
  --wallet:linear-gradient(165deg, #3a2e21, #221a10); --card:linear-gradient(170deg, #FBF3E6, #EFE3D0); --flap:linear-gradient(170deg, #33281c, #1d150c);
  --display:'SF Pro Rounded',ui-rounded,-apple-system,system-ui,sans-serif; --body:-apple-system,'SF Pro Text',system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --phone-body:linear-gradient(160deg, #9a9080, #55503f 45%, #2e2a20); --watch-body:linear-gradient(160deg, #b3a992, #7d7462 55%, #574f40);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--canvas); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; text-wrap:pretty; overflow-x:hidden}
a{color:var(--coral); text-decoration:none} a:hover{text-decoration:underline}
button{font-family:var(--body)}
img{max-width:100%}
.rs{background:var(--rs); -webkit-background-clip:text; background-clip:text; color:transparent}
.plus{background:var(--plus); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 6px rgba(255,244,224,0.8))}
.wrap{max-width:1100px; margin:0 auto}
.eyebrow{font:700 13px var(--mono); letter-spacing:2px; color:var(--amber); text-transform:uppercase}
.light .eyebrow{color:var(--coral)}
.display{font-family:var(--display); font-weight:900; letter-spacing:-1.4px; line-height:1.05; margin:0}
h1,h2,h3{margin:0}
.h-xl{font-size:clamp(34px,6vw,58px); letter-spacing:-1.8px; line-height:1.02}
.h-lg{font-size:clamp(30px,5vw,46px)}
.h-md{font-size:clamp(28px,4.6vw,42px); letter-spacing:-1.3px}
.h-sm{font-size:clamp(26px,4.4vw,38px); letter-spacing:-1.1px}
.lede{font-size:17px; line-height:1.55; color:var(--ink-60)}
.light .lede{color:var(--dark-ink-60)}
.center{text-align:center}
.mx{margin-left:auto; margin-right:auto}
.section{padding:96px 24px; position:relative; overflow:hidden}
.light{background:linear-gradient(180deg, var(--light-a), var(--light-b)); color:var(--dark-ink)}
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 26px; border-radius:14px; border:none; font-weight:800; font-size:16px; cursor:pointer; white-space:nowrap; text-decoration:none !important; transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-cream{background:var(--ink); color:var(--dark-ink)}
.btn-coral{background:var(--coral); color:#fff; font-size:15px; padding:12px 22px; border-radius:12px; font-weight:700}
.btn-ghost{background:none; border:1.5px solid rgba(246,236,223,0.25); color:var(--ink); font-weight:700}
.btn-dim{background:rgba(246,236,223,0.1); border:1.5px solid rgba(246,236,223,0.25); color:var(--ink); font-weight:700; font-size:15px; padding:12px 22px; border-radius:12px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; background:var(--coral); color:#fff; padding:8px 12px; border-radius:8px; z-index:100} .skip:focus{left:8px}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); background:rgba(14,11,8,0.78); border-bottom:.5px solid rgba(246,236,223,0.1)}
.nav .wrap{padding:0 22px; height:52px; display:flex; align-items:center; gap:26px}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none !important; font-family:var(--display); font-weight:850; font-size:16px; letter-spacing:-.3px}
.brand .plus{background:linear-gradient(120deg, oklch(0.78 0.16 60), oklch(0.64 0.22 32)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:none}
.mini-icon{position:relative; width:26px; height:26px; border-radius:7px; background:var(--wallet); overflow:hidden; display:inline-block; flex-shrink:0}
.mini-icon i{position:absolute; border-radius:50%} .mini-icon .c{left:2px; right:2px; top:2px; height:13px; border-radius:4px; background:var(--card)} .mini-icon .f{left:0; right:0; bottom:0; height:10px; border-radius:0; background:var(--flap)}
.nav-links{margin-left:auto; display:flex; gap:6px; align-items:center; font-size:13.5px}
.nav-links a{padding:6px 12px; border-radius:99px; color:rgba(246,236,223,0.7); font-weight:600; white-space:nowrap; text-decoration:none !important}
.nav-links a:hover{color:var(--ink)} .nav-links a[aria-current=page]{background:rgba(246,236,223,0.14); color:var(--ink)}
.nav-links .get{margin-left:8px; padding:7px 16px; background:var(--coral); color:#fff; font-weight:700}
@media (max-width:640px){ .nav .wrap{gap:10px; padding:0 14px} .nav-links{gap:2px; font-size:12.5px} .nav-links a{padding:6px 8px} .brand span.t{display:none} }

/* ---------- stars ---------- */
.stars{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.stars i{position:absolute; border-radius:50%; background:#fff; opacity:.15; animation:wTwinkle var(--d,3s) ease-in-out var(--dl,0s) infinite}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:radial-gradient(120% 80% at 50% -10%, oklch(0.3 0.05 45), oklch(0.17 0.035 40) 55%, var(--canvas)); text-align:center; padding:84px 24px 110px}
.hero .wordmark{margin-top:38px; font-family:var(--display); font-weight:900; font-size:clamp(38px,7vw,64px); letter-spacing:-2px; line-height:1}
.wordmark .w1{color:var(--ink)} .wordmark .w2{background:linear-gradient(115deg, #F6ECDF 0%, #F6ECDF 13%, oklch(0.78 0.16 62) 30%, oklch(0.72 0.19 45) 60%, oklch(0.7 0.14 152) 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .tagline{margin:18px auto 0; font-size:clamp(17px,2.6vw,22px); line-height:1.45; color:var(--ink-65); max-width:620px}
.hero .ctas{margin-top:32px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center}
.hero .free{margin-top:16px; font-size:13px; color:rgba(246,236,223,0.4)}
.page-hero{background:radial-gradient(120% 60% at 50% -10%, oklch(0.3 0.05 45), var(--canvas) 60%); text-align:center; padding:80px 24px 30px; overflow:hidden; position:relative}
.page-hero .lede{margin:16px auto 0; font-size:18px; line-height:1.5; max-width:600px}
.page-hero .h-xl{margin-top:14px}

/* ---------- brand icon (3a at rest, 3g escape every 7s) ---------- */
.brand-icon{position:relative; width:200px; height:230px; margin:0 auto}
.brand-icon .wallet{position:absolute; left:0; bottom:0; width:200px; height:200px; border-radius:46px; background:var(--wallet); box-shadow:0 30px 70px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,255,255,0.25)}
.brand-icon .card{position:absolute; left:15px; right:15px; top:13px; height:118px; border-radius:20px; background:var(--card); box-shadow:inset 0 -6px 14px rgba(0,0,0,0.12)}
.brand-icon .orb{position:absolute; border-radius:50%; background:radial-gradient(circle at 32% 28%, oklch(0.86 0.11 var(--h)), oklch(0.62 0.17 var(--h)) 62%, oklch(0.5 0.15 var(--h))); box-shadow:0 3px 8px oklch(0.4 0.12 var(--h) / 0.5), inset 0 1px 2px rgba(255,255,255,0.55)}
.brand-icon svg{position:absolute; inset:0; pointer-events:none}
.brand-icon .thread{stroke:var(--gold); stroke-width:1.2; fill:none; stroke-dasharray:1.8 2.4; stroke-linecap:round; animation:wThread 7s ease-in-out infinite}
.brand-icon .esc{position:absolute; left:136px; top:76px; width:48px; height:48px; border-radius:50%; background:var(--orb-esc); box-shadow:0 6px 14px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.55); animation:wOrbUp 7s ease-in-out infinite}
.brand-icon .esc i{position:absolute; left:16%; top:12%; width:36%; height:30%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.55), transparent 70%)}
.brand-icon .flap{position:absolute; left:0; right:0; bottom:0; height:76px; background:var(--flap); border-radius:42px 42px 46px 46px / 27px 27px 46px 46px; box-shadow:0 -8px 20px rgba(0,0,0,0.3), inset 0 1.5px 1px rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center}
.brand-icon .flap b{font-family:var(--display); font-weight:900; font-size:40px; letter-spacing:-1.1px; color:var(--ink); text-shadow:0 1px 3px rgba(0,0,0,0.25)}
.brand-icon .flap .plus{filter:drop-shadow(0 0 5px rgba(255,244,224,0.95)) drop-shadow(0 0 13px oklch(0.82 0.16 55 / 0.9)); animation:wGlow 3.5s ease-in-out infinite}
@keyframes wOrbUp{0%,18%{transform:translateY(46px);opacity:0}34%{opacity:1}46%,78%{transform:translateY(0);opacity:1}94%,100%{transform:translateY(46px);opacity:0}}
@keyframes wThread{0%,30%{stroke-dashoffset:60;opacity:0}40%{opacity:1}55%,74%{stroke-dashoffset:0;opacity:1}88%,100%{stroke-dashoffset:60;opacity:0}}
@keyframes wGlow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes wLive{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes wTwinkle{0%,100%{opacity:.2}50%{opacity:.95}}
@keyframes tvAppOpen{0%{transform:scale(0.55);opacity:0;filter:blur(8px)}55%{opacity:1}100%{transform:scale(1);opacity:1;filter:blur(0)}}
@keyframes tvRemoteDown{0%{transform:translateY(-130px);opacity:0}50%{opacity:1}82%{transform:translateY(5px)}100%{transform:translateY(0);opacity:1}}
@keyframes wMicPulse{0%{box-shadow:0 0 0 0 oklch(0.62 0.19 33 / 0.5)}100%{box-shadow:0 0 0 18px oklch(0.62 0.19 33 / 0)}}

/* ---------- split layouts ---------- */
.split{max-width:1100px; margin:0 auto; display:flex; gap:60px; align-items:center; flex-wrap:wrap; justify-content:center}
.split.tight{max-width:1060px; gap:56px}
.split.rev{flex-wrap:wrap-reverse}
.split .copy{flex:1; min-width:290px; max-width:470px; text-align:left}
.split .copy.narrow{max-width:440px}
.split .copy .display{margin-top:12px}
.split .copy .lede{margin-top:16px}
.split .stage{flex:1; min-width:300px; max-width:460px}
.split .btn{margin-top:26px}
.feature-list{margin-top:26px; display:flex; flex-direction:column; gap:13px}
.feat{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid rgba(36,29,22,0.07); box-shadow:0 8px 22px rgba(80,50,20,0.08); opacity:0; transform:translateX(-28px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.feat.on{opacity:1; transform:none}
.feat .tile{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0}
.feat .t{display:block; font-family:var(--display); font-weight:800; font-size:15.5px; color:var(--dark-ink)} .feat .s{display:block; margin-top:2px; font-size:13px; color:var(--dark-ink-55)}
.feat .tile.next{background:oklch(0.58 0.22 28 / 0.06); border:2px dashed oklch(0.58 0.22 28 / 0.6)} .feat .tile.smart{background:linear-gradient(140deg, oklch(0.9 0.06 80), oklch(0.82 0.09 60))}
.feat .tile.wheel{border-radius:50%; background:rgba(229,9,20,0.08); border:2px solid rgba(229,9,20,0.55); box-shadow:0 0 14px rgba(229,9,20,0.3)} .feat .tile.remote{border-radius:50%; background:oklch(0.62 0.19 33 / 0.12); border:2px dashed oklch(0.62 0.24 28 / 0.7)}

/* ---------- poster ---------- */
.poster{position:relative; border-radius:var(--r,12px); overflow:hidden; box-shadow:0 8px 22px rgba(50,30,10,0.18); flex-shrink:0; background:#2a2118; width:var(--w); height:var(--h)}
.poster img{display:block; width:100%; height:100%; object-fit:cover}
.poster .pip{position:absolute; top:4px; left:4px; width:16px; height:16px; border-radius:50%; background:oklch(0.64 0.22 32); border:1.5px solid rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; font:900 9px var(--display); color:#fff}
.poster .pill{position:absolute; bottom:4px; left:4px; right:4px; padding:2.5px 4px; border-radius:99px; background:oklch(0.6 0.2 28); font:800 7px var(--display); color:#fff; text-align:center; white-space:nowrap; overflow:hidden}
.poster-row{display:flex; gap:12px; justify-content:center}

/* ---------- phone ---------- */
.phone{position:relative; width:332px; height:678px; border-radius:60px; background:var(--phone-body); padding:7px; box-shadow:0 40px 90px rgba(80,50,20,0.35), inset 0 1.5px 2px rgba(255,255,255,0.5); will-change:transform; transition:transform .25s ease-out, opacity .25s ease-out}
.phone.dark{box-shadow:0 40px 90px rgba(0,0,0,0.55), inset 0 1.5px 2px rgba(255,255,255,0.5)}
.phone.sm{width:312px; height:640px; border-radius:58px}
.phone .side{position:absolute; width:4px; border-radius:3px; background:linear-gradient(270deg, #7a715f, #4a443a)} .phone .s1{left:-2.5px; top:150px; height:34px} .phone .s2{left:-2.5px; top:196px; height:54px} .phone .s3{right:-2.5px; top:170px; height:72px; background:linear-gradient(90deg, #7a715f, #4a443a)}
.phone .screen{width:100%; height:100%; border-radius:54px; overflow:hidden; position:relative; background:linear-gradient(180deg, #FFF6EA, #FBEFDF); box-shadow:inset 0 0 0 4px #050403; color:var(--dark-ink); transition:background .4s ease}
.phone.sm .screen{border-radius:52px}
.phone .screen.remote-bg{background:linear-gradient(180deg, #1d1712, #14100b)}
.phone .island{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:66px; height:20px; border-radius:99px; background:#050403; z-index:5}
.scr{position:absolute; inset:0; overflow:hidden; padding:52px 14px 20px; font-size:11px}
.scr.hidden{display:none}
.scr .bar{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:99px; background:rgba(255,255,255,0.75); box-shadow:0 6px 18px rgba(80,50,20,0.12); border:.5px solid rgba(36,29,22,0.06)}
.av{border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:#fff; flex-shrink:0; background:linear-gradient(140deg, oklch(0.76 0.13 var(--h,60)), oklch(0.54 0.15 var(--h,60)))}
.scr .bar .name{font-family:var(--display); font-weight:850; font-size:15px; white-space:nowrap} .scr .bar .add{margin-left:auto; padding:5px 10px; border-radius:99px; background:var(--coral); color:#fff; font-weight:800; font-size:11px; white-space:nowrap}
.scr .lbl{margin-top:16px; font:800 10.5px var(--mono); letter-spacing:1.4px; color:var(--dark-ink-55); text-transform:uppercase} .scr .lbl.red{color:oklch(0.55 0.21 28)}
.scr .fence{margin-top:8px; padding:9px; border-radius:16px; border:2px solid var(--fence); display:flex; gap:8px}
.scr .fence>div{flex:1; min-width:0} .scr .fence .poster{--w:100%; --h:86px; --r:9px}
.scr .svc{display:inline-block; margin-top:5px; padding:2px 6px; border-radius:5px; font:800 8px var(--mono); white-space:nowrap}
.scr .empty{flex:1; height:86px; border-radius:9px; background:oklch(0.58 0.22 28 / 0.05); border:1.8px dashed oklch(0.58 0.22 28 / 0.55); display:flex; align-items:center; justify-content:center; font:900 34px var(--display); color:oklch(0.58 0.22 28 / 0.28)}
.scr .row{display:flex; gap:9px; overflow:hidden; margin-top:9px} .scr .rec{flex-shrink:0; width:74px} .scr .rec .poster{--w:74px; --h:105px; --r:10px}
.scr .who{margin-top:5px; display:flex; align-items:center; gap:4px; font-size:9.5px; color:var(--dark-ink-60); white-space:nowrap}
.scr .card{margin-top:9px; padding:12px; border-radius:16px; background:linear-gradient(155deg, oklch(0.97 0.02 60), oklch(0.93 0.03 50)); border:1px solid rgba(36,29,22,0.08); box-shadow:0 8px 22px rgba(80,50,20,0.1)}
.scr .card .hd{display:flex; align-items:center; gap:7px; font-family:var(--display); font-weight:800; font-size:13.5px} .scr .card .hd small{margin-left:auto; font-size:10px; font-weight:400; color:var(--dark-ink-45)}
.scr .tiles{margin-top:9px; display:flex; gap:8px} .scr .tiles .poster{--w:72px; --h:102px; --r:9px}
.scr .dots{margin-top:9px; display:flex; gap:5px; justify-content:center; font-size:11px} .scr .dots span{opacity:.4} .scr .dots span:first-child{opacity:1}
.scr .wheelbox{margin-top:9px; padding:11px; border-radius:16px; background:rgba(229,9,20,0.06); border:2px solid rgba(229,9,20,0.55); box-shadow:0 0 22px rgba(229,9,20,0.25)}
.scr .chips{margin-top:9px; display:flex; gap:5px; align-items:center; justify-content:center} .scr .chips span{padding:3px 7px; border-radius:99px; color:#fff; font:800 8px var(--mono); opacity:.55; transform:scale(.9)} .scr .chips span.on{padding:4px 9px; font-size:9.5px; opacity:1; transform:none}
.scr .from{margin-top:9px; padding:11px; border-radius:15px; background:#fff; border:1px solid rgba(36,29,22,0.07); box-shadow:0 6px 18px rgba(80,50,20,0.09); display:flex; gap:10px; align-items:center} .scr .from .poster{--w:42px; --h:60px; --r:7px}
.scr .from .t{margin-top:3px; font-family:var(--display); font-weight:800; font-size:13px} .scr .from .q{margin-top:3px; font-size:10px; font-style:italic; color:var(--dark-ink-55)} .scr .from .loop{font:800 8px var(--mono); color:oklch(0.58 0.14 162); white-space:nowrap}
.scr h4{font-family:var(--display); font-weight:850; font-size:19px; margin:0}
.scr .wcard{margin-top:10px; padding:13px; border-radius:16px; background:#fff; border:1px solid rgba(36,29,22,0.07); box-shadow:0 6px 18px rgba(80,50,20,0.09)}
.scr .wcard.flex{display:flex; align-items:center; gap:14px}
.scr .mlbl{font:800 9px var(--mono); letter-spacing:1.2px; color:rgba(36,29,22,0.5)}
.scr .legend{margin-top:5px; font-size:11.5px; line-height:1.7}
.scr .pct{font-family:var(--display); font-weight:900; font-size:26px; color:oklch(0.55 0.14 162)}
.scr .bar2{margin-top:8px; height:8px; border-radius:99px; overflow:hidden; display:flex} .scr .bar2 i{width:78%; background:oklch(0.66 0.14 162)} .scr .bar2 b{flex:1; background:oklch(0.62 0.19 28 / 0.45)}
.scr .orow{margin-top:7px; padding:9px 11px; border-radius:13px; background:#fff; border:1px solid rgba(36,29,22,0.07); display:flex; align-items:center; gap:11px}
.scr .orow .d{width:34px; text-align:center} .scr .orow .d small{display:block; font:800 8px var(--mono); color:oklch(0.58 0.2 28)} .scr .orow .d b{display:block; font:900 17px var(--display); line-height:1}
.scr .orow .t{flex:1; min-width:0} .scr .orow .t b{display:block; font:800 12.5px var(--display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .scr .orow .t small{display:block; font-size:9.5px; color:rgba(36,29,22,0.5)}
.scr .orow .bell{width:28px; height:28px; border-radius:50%; background:oklch(0.6 0.2 28 / 0.15); border:1.5px solid oklch(0.62 0.2 28); display:flex; align-items:center; justify-content:center; font-size:12px}
.scr .flop{margin-top:12px; padding:10px 12px; border-radius:13px; background:oklch(0.6 0.19 28 / 0.06); border:1.6px dashed oklch(0.6 0.19 28 / 0.55); display:flex; align-items:center; gap:8px; font:800 11.5px var(--display); color:oklch(0.55 0.19 28)}
.scr .flop small{margin-left:auto; font-size:11px; font-weight:400; opacity:.6}
.scr .inv{margin-top:9px; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; background:oklch(0.8 0.13 70 / 0.12); border:1.4px dashed oklch(0.72 0.13 70); font-size:10px; font-weight:700; color:oklch(0.5 0.1 70)} .scr .inv i{width:6px; height:6px; border-radius:50%; background:oklch(0.75 0.13 70)}
.scr .brow{margin-top:9px; padding:10px 12px; border-radius:15px; background:#fff; border:1px solid rgba(36,29,22,0.07); box-shadow:0 5px 15px rgba(80,50,20,0.07); display:flex; align-items:center; gap:10px}
.scr .brow .n{flex:1; min-width:0} .scr .brow .n b{display:block; font:800 13.5px var(--display)} .scr .brow .n small{display:block; font-size:10px; color:oklch(0.5 0.11 162)}
.scr .brow .m{font:800 10px var(--mono); white-space:nowrap} .scr .brow .send{width:26px; height:26px; border-radius:50%; background:rgba(36,29,22,0.06); display:flex; align-items:center; justify-content:center; font-size:11px}
.scr .cons{margin-top:11px; padding:12px 13px; border-radius:15px; background:linear-gradient(120deg, #2a2117, #171009); display:flex; align-items:center; gap:10px; color:#fff} .scr .cons b{display:block; font:800 12.5px var(--display)} .scr .cons small{display:block; font-size:9.5px; opacity:.55}
.scr.remote{color:var(--ink)}
.scr.remote .hd{text-align:center; font:850 14px var(--display); letter-spacing:.5px}
.scr .rstage{margin-top:9px; border-radius:18px; border:2px dashed oklch(0.62 0.24 28 / 0.75); padding:13px; height:380px} .scr .rstage h5{margin:0; font:850 16px var(--display)}
.scr .moods{margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mood{position:relative; height:64px; border-radius:12px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15); background:var(--g)} .mood i{position:absolute; top:5px; right:7px; font-size:16px; opacity:.3; font-style:normal} .mood b{position:absolute; left:9px; bottom:7px; font:800 11.5px var(--display); color:#fff}
.micbar{margin-top:11px; display:flex; align-items:center; gap:9px; padding:0 13px; height:44px; border-radius:99px; background:rgba(255,255,255,0.07); border:1.5px solid rgba(255,255,255,0.13)} .micbar em{flex:1; font-size:11.5px; color:oklch(0.72 0.17 33)} .micbar .mic{width:30px; height:30px; border-radius:50%; background:var(--coral-33); display:flex; align-items:center; justify-content:center; font-size:13px; animation:wMicPulse 1.4s ease-out infinite}

/* ---------- loop ring ---------- */
.ring{display:inline-block; flex-shrink:0} .ring circle{fill:none; stroke-linecap:round}

/* ---------- iPhone page tour ---------- */
.tour-phone{margin-top:30px; display:flex; justify-content:center}
.chips{margin-top:30px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:99px; background:rgba(246,236,223,0.07); border:1.5px solid rgba(246,236,223,0.2); color:rgba(246,236,223,0.75); font-weight:700; font-size:14.5px; cursor:pointer; white-space:nowrap; transition:all .25s ease}
.chip[aria-pressed=true]{background:var(--ink); border-color:var(--ink); color:var(--dark-ink)} .chip[aria-pressed=true] .rs{background:var(--rs); -webkit-background-clip:text; background-clip:text}
.caption{margin:18px auto 10px; max-width:520px; font-size:15.5px; line-height:1.55; color:var(--ink-65); min-height:48px}
.closer{background:var(--canvas); padding:96px 24px; overflow:hidden}
.closer .grid{margin-top:44px; display:flex; gap:52px; justify-content:center; align-items:center; flex-wrap:wrap}
.menu{width:340px; max-width:92vw; display:flex; flex-direction:column; gap:11px; text-align:left}
.menu .item{display:flex; align-items:center; gap:11px; padding:13px 18px; border-radius:99px; background:rgba(246,236,223,0.07); border:1px solid rgba(246,236,223,0.14); cursor:pointer; text-align:left; color:rgba(246,236,223,0.85); font-weight:700; font-size:15px; transition:background .25s ease; width:100%}
.menu .item:hover{background:rgba(246,236,223,0.12)} .menu .item .pl{width:24px; height:24px; border-radius:50%; border:1.5px solid rgba(246,236,223,0.4); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0} .menu .item .ic{margin-left:auto; font-size:15px}
.menu .open{padding:19px 21px; border-radius:24px; background:rgba(246,236,223,0.1); border:1px solid rgba(246,236,223,0.16)}
.menu .open .hd{display:flex; align-items:center; gap:11px; font:850 18px var(--display); color:var(--ink)} .menu .open .tile{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px}
.menu .open p{margin:10px 0 0; font-size:14px; line-height:1.55; color:rgba(246,236,223,0.75)} .menu .open ul{margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px} .menu .open li{font-size:12.5px; line-height:1.45; color:var(--ink-60)}
.menu [hidden]{display:none !important}
.phone3d{width:312px; height:640px; perspective:1000px; perspective-origin:38% 40%; position:relative}
.phone3d .shadow{position:absolute; left:8%; right:8%; bottom:-30px; height:34px; border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.55), transparent 75%); filter:blur(8px)}
.phone3d .phone{box-shadow:-24px 44px 70px rgba(0,0,0,0.5), 0 40px 90px rgba(0,0,0,0.4), inset 0 1.5px 2px rgba(255,255,255,0.5), inset -3px 0 6px rgba(0,0,0,0.35), inset 3px 0 5px rgba(255,255,255,0.18); transform:rotateY(var(--tilt,-17deg)) rotateX(4.5deg); transform-style:preserve-3d; transition:transform .7s cubic-bezier(.3,.9,.3,1)}
.phone3d .phone .back{position:absolute; inset:0; border-radius:58px; background:linear-gradient(160deg, #756c5a, #2a251c); transform:translateZ(-16px)} .phone3d .phone .back2{position:absolute; inset:0; border-radius:58px; background:#4a4436; transform:translateZ(-8px)}
.section.smart{background:radial-gradient(110% 80% at 50% 0%, oklch(0.22 0.045 60), var(--canvas) 70%)}
.lenses{display:flex; gap:14px; justify-content:center; align-items:center}
.lens{width:46px; height:46px; border-radius:50%; background:rgba(246,236,223,0.07); border:1.5px solid rgba(246,236,223,0.18); display:flex; align-items:center; justify-content:center; font-size:19px; cursor:pointer; transition:all .3s cubic-bezier(.3,.9,.3,1); flex-shrink:0; padding:0}
.lens[aria-pressed=true]{width:62px; height:62px; font-size:26px; background:linear-gradient(150deg, oklch(0.5 0.12 60 / 0.9), oklch(0.32 0.09 45 / 0.9)); border:2px solid oklch(0.8 0.14 65); box-shadow:0 0 22px oklch(0.72 0.15 60 / 0.55)}
.lens-card{margin-top:20px; padding:20px; border-radius:24px; background:rgba(246,236,223,0.06); border:1px solid rgba(246,236,223,0.12)}
.lens-card .hd{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .lens-card .hd b{font:850 20px var(--display); letter-spacing:-.4px} .lens-card .hd small{font-size:12.5px; color:rgba(246,236,223,0.5)}
.lens-card .poster-row{margin-top:14px} .lens-card .poster{--w:104px; --h:148px; --r:12px}
.lens-set[hidden]{display:none}
.wheel-frame{margin:40px auto 0; max-width:640px}
.wheel-box{border-radius:22px; border:2px solid var(--svc,#E50914); background:color-mix(in oklab, var(--svc,#E50914) 8%, transparent); box-shadow:0 0 34px color-mix(in oklab, var(--svc,#E50914) 35%, transparent); padding:16px; transition:border-color .35s ease, background .35s ease, box-shadow .35s ease}
.wheel-box .poster-row{gap:11px} .wheel-box .poster{--w:108px; --h:154px; --r:12px}
.wheel-box .shelf[hidden]{display:none}
.reel{margin-top:18px; position:relative; height:42px; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%)}
.reel button{position:absolute; left:50%; top:3px; width:108px; margin-left:-54px; height:34px; border-radius:99px; border:none; font:800 12.5px var(--mono); letter-spacing:.2px; cursor:pointer; white-space:nowrap; will-change:transform}
.wheel-note{margin-top:12px; font-size:13px; color:rgba(246,236,223,0.4)}
.section.react{background:radial-gradient(110% 80% at 50% 100%, oklch(0.22 0.05 33), var(--canvas) 70%)}
.verdict{padding:22px; border-radius:26px; background:rgba(246,236,223,0.06); border:1px solid rgba(246,236,223,0.12); position:relative; overflow:hidden}
.verdict .still{position:absolute; inset:0; opacity:.18; filter:saturate(.8)} .verdict .still img{width:100%; height:100%; object-fit:cover} .verdict>*:not(.still){position:relative}
.verdict .tabs{display:flex; gap:8px; flex-wrap:wrap}
.verdict .tab{padding:7px 13px; border-radius:99px; background:rgba(246,236,223,0.07); border:1.5px solid rgba(246,236,223,0.2); color:rgba(246,236,223,0.8); font-weight:700; font-size:13px; cursor:pointer; transition:all .25s ease; white-space:nowrap}
.verdict .tab[aria-pressed=true]{background:var(--ink); border-color:var(--ink); color:var(--dark-ink)}
.verdict .q{margin-top:16px; font:850 17px var(--display)} .verdict ul{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.verdict li{display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:14px; background:rgba(246,236,223,0.03); border:1px solid rgba(246,236,223,0.1); font-size:14px; font-weight:600}
.verdict li.themed{background:rgba(246,236,223,0.05); border-color:oklch(0.72 0.15 60 / 0.3)} .verdict li .e{font-size:18px} .verdict li .v{flex:1; text-align:left}
.verdict li .tag{padding:2.5px 8px; border-radius:99px; background:oklch(0.72 0.15 60 / 0.18); color:oklch(0.82 0.13 65); font:800 9.5px var(--mono); letter-spacing:.5px}
.verdict .set[hidden]{display:none}
.section.opening{background:radial-gradient(110% 80% at 50% 0%, oklch(0.21 0.04 260), var(--canvas) 70%)}
.premieres{padding:20px; border-radius:26px; background:rgba(246,236,223,0.06); border:1px solid rgba(246,236,223,0.12); display:flex; flex-direction:column; gap:10px}
.prow{padding:12px 14px; border-radius:16px; background:rgba(246,236,223,0.05); border:1px solid rgba(246,236,223,0.1); display:flex; align-items:center; gap:13px}
.prow .poster{--w:36px; --h:52px; --r:7px}
.prow .d{width:42px; text-align:center; flex-shrink:0} .prow .d small{display:block; font:800 9.5px var(--mono); letter-spacing:.5px; color:oklch(0.72 0.17 33)} .prow .d b{display:block; font:900 21px var(--display); line-height:1}
.prow .t{flex:1; min-width:0} .prow .t b{display:block; font:800 15px var(--display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .prow .t small{display:block; margin-top:2px; font-size:11.5px; color:rgba(246,236,223,0.5)}
.bell{width:34px; height:34px; border-radius:50%; background:rgba(246,236,223,0.07); border:1.5px solid rgba(246,236,223,0.2); display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; transition:all .25s ease; flex-shrink:0; padding:0}
.bell[aria-pressed=true]{background:var(--coral-33); border-color:oklch(0.72 0.17 33)}
.party{padding:13px 14px; border-radius:16px; background:linear-gradient(120deg, oklch(0.3 0.07 60 / 0.6), oklch(0.24 0.05 40 / 0.6)); border:1.4px dashed oklch(0.72 0.13 75 / 0.7); display:flex; align-items:center; gap:12px}
.party .stack{display:flex; flex-shrink:0} .party .stack .av{width:28px; height:28px; font-size:11px; border:2px solid #17110d} .party .stack .av+.av{margin-left:-8px}
.party b{display:block; font:800 13.5px var(--display)} .party small{display:block; margin-top:2px; font-size:11.5px; color:rgba(246,236,223,0.55)}
.remote-stage{max-width:760px; margin:44px auto 0}
.remote-stage .q{text-align:center; font:900 clamp(24px,4vw,34px) var(--display); letter-spacing:-1px}
.remote-stage .box{margin-top:26px; border-radius:26px; border:2.5px dashed oklch(0.62 0.24 28 / 0.75); background:#1b1611; padding:26px; color:var(--ink)}
.remote-stage .grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px} .remote-stage .mood{height:74px; border-radius:15px} .remote-stage .mood b{font-size:14px; left:11px; bottom:9px; text-shadow:0 1px 4px rgba(0,0,0,0.4)} .remote-stage .mood i{font-size:21px}
.remote-stage .micbar{margin-top:16px; height:48px; padding:0 16px; background:rgba(255,255,255,0.06)} .remote-stage .micbar em{font-size:14.5px} .remote-stage .micbar .mic{width:34px; height:34px; font-size:15px}
@media (max-width:640px){ .remote-stage .grid{grid-template-columns:repeat(2,1fr)} }
.steps{max-width:860px; margin:40px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.step{padding:20px; border-radius:20px; background:#fff; border:1px solid rgba(36,29,22,0.08); box-shadow:0 8px 24px rgba(80,50,20,0.07); text-align:left}
.step .hd{display:flex; align-items:center; gap:9px; font:800 16px var(--display)} .step .n{width:26px; height:26px; border-radius:50%; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; font:900 13px var(--display)}
.step p{margin:9px 0 0; font-size:13.5px; line-height:1.55; color:var(--dark-ink-60)}

/* ---------- watch ---------- */
.wrist-stage{margin:56px auto 0; width:340px; max-width:90vw; height:430px; perspective:1100px; perspective-origin:50% 8%}
.wrist-stage.hero-stage{margin:0 auto; width:360px; max-width:92vw; height:480px; perspective:900px; perspective-origin:50% 18%; position:sticky; top:calc(50vh - 240px)}
.watch-hero{overflow:visible; padding-bottom:0}
.wrist-runway{position:relative; height:120vh; margin-top:24px}
@media (max-height:700px){ .wrist-stage.hero-stage{top:calc(50vh - 220px)} }
.wrist{position:relative; width:260px; margin:52px auto 0; will-change:transform; transform-style:preserve-3d; transition:transform .25s ease-out, opacity .25s ease-out}
.hero-stage .wrist{width:300px; margin-top:64px}
.band{position:absolute; left:50%; width:128px; height:116px; border-radius:26px; transform:translateZ(-26px); margin-left:-64px} .band.top{top:-88px; background:linear-gradient(180deg, rgba(146,135,118,0), #8f8574 72%, #7c7263)} .band.bot{bottom:-88px; background:linear-gradient(0deg, rgba(146,135,118,0), #8f8574 72%, #7c7263)}
.hero-stage .band{width:140px; height:122px; margin-left:-70px; border-radius:28px; transform:translateZ(-28px)} .hero-stage .band.top{top:-92px} .hero-stage .band.bot{bottom:-92px}
.under{position:absolute; left:26px; right:26px; top:342px; height:52px; transform-origin:top center; transform:rotateX(-90deg); border-radius:0 0 30px 30px; background:linear-gradient(180deg, #c4b9a1, #948a76 55%, #6b6353); box-shadow:inset 0 -8px 12px rgba(0,0,0,0.3), inset 0 3px 3px rgba(255,255,255,0.45)}
.under i{position:absolute; display:block} .under .btn1{left:18%; top:14px; width:74px; height:22px; border-radius:12px; background:linear-gradient(180deg, #b7ac93, #857b66); box-shadow:inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -3px 5px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3)} .under .mic{left:52%; top:20px; width:5px; height:5px; border-radius:50%; background:#3a352c} .under .crown{left:60%; top:5px; width:42px; height:42px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #d8cdb2, #8f8571 70%); box-shadow:inset 0 0 0 5px #b3622a, inset 0 0 0 8px rgba(0,0,0,0.25), 0 2px 5px rgba(0,0,0,0.4)}
.watch{position:relative; width:260px; height:300px; border-radius:58px; background:var(--watch-body); box-shadow:0 40px 80px rgba(0,0,0,0.65), inset 0 2px 3px rgba(255,255,255,0.45), inset 0 -3px 6px rgba(0,0,0,0.35); padding:19px}
.hero-stage .watch{width:300px; height:346px; border-radius:66px; padding:22px; box-shadow:0 46px 90px rgba(0,0,0,0.7), inset 0 2px 3px rgba(255,255,255,0.45), inset 0 -3px 7px rgba(0,0,0,0.35)}
.watch .ab{position:absolute; left:-7px; top:104px; width:9px; height:54px; border-radius:5px; background:linear-gradient(270deg, #c96f2f, #8a4a1d); box-shadow:0 2px 5px rgba(0,0,0,0.4)} .watch .cr{position:absolute; right:-8px; top:92px; width:11px; height:46px; border-radius:5px; background:linear-gradient(90deg, #d8cdb2, #8f8571); box-shadow:inset 0 0 0 2px rgba(0,0,0,0.15), 0 0 0 1.5px #b3622a} .watch .sb{position:absolute; right:-6px; top:152px; width:8px; height:38px; border-radius:4px; background:linear-gradient(90deg, #a89d87, #6e6555)}
.hero-stage .watch .ab{left:-8px; top:120px; width:10px; height:62px} .hero-stage .watch .cr{right:-9px; top:106px; width:12px; height:52px} .hero-stage .watch .sb{right:-7px; top:174px; width:9px; height:44px}
.wface{width:100%; height:100%; border-radius:42px; background:#000; overflow:hidden; position:relative; padding:20px 22px; display:flex; flex-direction:column; box-shadow:inset 0 0 0 3px #0a0906; color:#fff; text-align:left}
.hero-stage .wface{border-radius:48px; padding:24px 26px}
.wface .top{display:flex; align-items:center; justify-content:space-between} .wface .time{font:800 19px var(--display); color:oklch(0.72 0.17 33)} .wface .app{font:700 11px var(--mono); color:rgba(255,255,255,0.4)}
.hero-stage .wface .time{font-size:21px} .hero-stage .wface .app{font-size:12px}
.wface .mid{flex:1; display:flex; flex-direction:column; justify-content:center; gap:11px} .wface .who{display:flex; align-items:center; gap:10px; font-size:14.5px; line-height:1.3; color:rgba(255,255,255,0.75)} .wface .who b{color:#fff}
.hero-stage .wface .who{font-size:16px; gap:11px} .hero-stage .wface .mid{gap:12px}
.wface .av{width:36px; height:36px; font-size:15px; position:relative} .hero-stage .wface .av{width:40px; height:40px; font-size:17px}
.live{position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:oklch(0.64 0.22 32); border:2px solid #000; animation:wLive 1.6s infinite}
.wface .title{font:800 24px var(--display)} .hero-stage .wface .title{font-size:27px} .wface .sub{font-size:13px; color:oklch(0.8 0.11 168)}
.wface .acts{display:flex; gap:9px; justify-content:center} .wface .acts span{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:20px} .wface .acts span.on{background:var(--coral)}
.wface .svcline{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,0.5)} .wface .svcline .nf{padding:3px 9px; border-radius:7px; background:#E50914; color:#fff; font:800 11px var(--mono)}
.wface .acts2{display:flex; gap:10px} .wface .acts2 .add{flex:1; height:44px; border-radius:22px; background:var(--coral); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff} .wface .acts2 .wave{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:18px}
.pills{margin-top:44px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap; font-size:14.5px; color:var(--ink-65)}
.cards4{max-width:1100px; margin:44px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.wcard{padding:26px 20px; border-radius:26px; background:rgba(246,236,223,0.05); border:1px solid rgba(246,236,223,0.1); text-align:center; position:relative}
.wcard .dots{position:absolute; right:14px; top:22px; display:flex; flex-direction:column; gap:4px} .wcard .dots i{width:5px; height:5px; border-radius:50%; background:rgba(246,236,223,0.3)} .wcard .dots i.on{background:rgba(246,236,223,0.95)}
.wcard h3{margin-top:16px; font:800 18px var(--display); letter-spacing:-.3px} .wcard p{margin:7px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-60)}
.mwatch{width:150px; height:178px; margin:0 auto; border-radius:36px; background:var(--watch-body); padding:10px; box-shadow:0 18px 40px rgba(0,0,0,0.5), inset 0 1.5px 2px rgba(255,255,255,0.4)}
.mwatch .f{width:100%; height:100%; border-radius:27px; background:#000; overflow:hidden; position:relative; padding:11px 10px; display:flex; flex-direction:column; justify-content:center; gap:6px; box-shadow:inset 0 0 0 2px #0a0906; color:#fff; font-size:8px; text-align:left}
.mwatch .lbl{font:800 7px var(--mono); letter-spacing:.8px; color:oklch(0.62 0.21 28)} .mwatch .slots{display:flex; gap:3px} .mwatch .slots .poster{--w:auto; --h:44px; --r:6px; flex:1; box-shadow:none} .mwatch .slots .poster .pip{width:9px; height:9px; font-size:5.5px; top:2px; left:2px; border:none}
.mwatch .slots .empty{flex:1; height:44px; border-radius:6px; background:oklch(0.58 0.22 28 / 0.06); border:1px dashed oklch(0.58 0.22 28 / 0.5); display:flex; align-items:center; justify-content:center; font:900 14px var(--display); color:oklch(0.58 0.22 28 / 0.3)}
.mwatch .who{display:flex; align-items:center; gap:5px; margin-top:2px; line-height:1.3; color:rgba(255,255,255,0.7)} .mwatch .who b{color:#fff} .mwatch .av{width:16px; height:16px; font-size:7px; position:relative} .mwatch .live{width:5px; height:5px; border:1px solid #000}
.mwatch .leg{font-size:7.5px; color:rgba(255,255,255,0.7); line-height:1.5} .mwatch .orow{display:flex; align-items:center; gap:4px; padding:4px 6px; border-radius:8px; background:rgba(255,255,255,0.07)} .mwatch .orow .d small{display:block; font:800 5.5px var(--mono); color:oklch(0.68 0.2 28)} .mwatch .orow .d b{display:block; font:900 10px var(--display); line-height:1} .mwatch .orow .t{font-size:7.5px; line-height:1.25; color:rgba(255,255,255,0.8)} .mwatch .orow .t b{color:#fff}
.mwatch .orbs{position:relative; height:64px} .mwatch .orbs .av{position:absolute} .mwatch .hint{font-size:8px; color:rgba(255,255,255,0.6)}
.mwatch .you{position:relative; width:46px; height:46px; margin:0 auto} .mwatch .you .av{width:46px; height:46px; font-size:18px; font-weight:900; background:radial-gradient(circle at 32% 28%, oklch(0.72 0.16 35), oklch(0.52 0.16 35))} .mwatch .you .badge{position:absolute; right:-3px; bottom:-2px; width:15px; height:15px; border-radius:50%; background:oklch(0.6 0.2 33); border:2px solid #141009; display:flex; align-items:center; justify-content:center; font-size:7px}
.mwatch .yname{font:900 10px var(--display); text-align:center} .mwatch .hint.c{text-align:center; font-size:7.5px; color:rgba(255,255,255,0.45)} .mwatch .faces{display:flex; gap:4px; justify-content:center; align-items:center} .mwatch .faces i{width:14px; height:14px; border-radius:50%; opacity:.5} .mwatch .faces b{width:20px; height:20px; border-radius:50%; background:oklch(0.6 0.13 45); border:1.5px solid rgba(255,255,255,0.85)}
.cards3{max-width:1100px; margin:40px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px}
.hcard{padding:22px 24px; border-radius:20px; background:rgba(246,236,223,0.05); border:1px solid rgba(246,236,223,0.1); text-align:left}
.hcard .hd{display:flex; align-items:center; gap:10px; font:800 17px var(--display)} .hcard .hd span{font-size:22px} .hcard p{margin:7px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-60)} .hcard .route{margin-top:10px; font:700 10.5px var(--mono); letter-spacing:1px; color:var(--gold)}

/* ---------- tv ---------- */
.section.tv-chapter{background:linear-gradient(180deg, var(--canvas), oklch(0.16 0.03 40) 30%, var(--canvas)); padding:100px 24px 70px; text-align:center}
.tvwrap{will-change:transform; transition:transform .25s ease-out, opacity .25s ease-out; margin:54px auto 0; max-width:860px}
.tv{border-radius:18px; border:3px solid #1c1815; background:radial-gradient(140% 90% at 50% -10%, oklch(0.30 0.05 45), oklch(0.19 0.035 40) 55%, oklch(0.14 0.03 40)); aspect-ratio:16/9; position:relative; overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,0.6); text-align:left}
.tv.tray-host{background:#141210}
.tv .tray{position:absolute; inset:0; background:linear-gradient(180deg, #1b1917, #121110)}
.tv .tray .top{position:absolute; top:8%; left:6%; right:6%; height:44%; border-radius:10px; background:linear-gradient(140deg, oklch(0.3 0.06 280), oklch(0.2 0.05 320) 60%, oklch(0.16 0.04 260)); opacity:.8}
.tv .tray .apps{position:absolute; top:62%; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:2.2%} .tv .tray .apps i{width:9.5%; aspect-ratio:16/9.5; border-radius:9%/16%; display:block}
.tv .tray .wuw{position:relative; width:11.5%; aspect-ratio:16/9.5; border-radius:9%/16%; background:var(--wallet); box-shadow:0 0 0 2px rgba(255,255,255,0.85), 0 8px 20px rgba(0,0,0,0.55); overflow:hidden}
.tv .tray .wuw .c{position:absolute; left:8%; right:8%; top:9%; height:46%; border-radius:18%/30%; background:var(--card)} .tv .tray .wuw i{position:absolute; border-radius:50%; aspect-ratio:1} .tv .tray .wuw .f{position:absolute; left:0; right:0; bottom:0; height:38%; background:var(--flap); display:flex; align-items:center; justify-content:center; font:900 clamp(8px,1.1vw,12px) var(--display); letter-spacing:-.3px; color:var(--ink)}
.tv .tray .name{position:absolute; top:82%; left:0; right:0; text-align:center; font:800 clamp(9px,1.2vw,13px) var(--display); color:rgba(246,236,223,0.85)}
.tv .app{position:absolute; inset:0; background:radial-gradient(140% 90% at 50% -10%, oklch(0.30 0.05 45), oklch(0.19 0.035 40) 55%, oklch(0.14 0.03 40))}
.tv.tray-host .app{animation:tvAppOpen 1s cubic-bezier(.2,.85,.3,1) .55s both}
.tv .bar{position:absolute; top:3.5%; left:3%; right:3%; display:flex; align-items:center; gap:10px} .tv .bar .logo{font:850 15px var(--display); color:var(--ink)} .tv .bar .tabs{flex:1; display:flex; justify-content:center; align-items:center; gap:7px}
.tv .bar .tabs span{padding:4px 11px; border-radius:99px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); color:rgba(246,236,223,0.7); font-weight:700; font-size:10px; white-space:nowrap} .tv .bar .tabs span.on{background:var(--ink); color:var(--dark-ink); font-weight:800; padding:4px 12px; border:none} .tv .bar .tabs .mic{width:22px; height:22px; border-radius:50%; border:1.5px dashed oklch(0.66 0.24 28); background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; font-size:9px; padding:0}
.tv .bar .av{width:23px; height:23px; font-size:10px; border:1.5px solid rgba(255,255,255,0.4)}
.tv .of{position:absolute; top:15%; right:4%; font:600 10px var(--mono); color:rgba(246,236,223,0.4)}
.tv .pager{position:absolute; right:2.5%; bottom:8%; display:flex; flex-direction:column; gap:4px; align-items:center} .tv .pager span{width:16px; height:12px; border-radius:5px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); font-size:7px; color:rgba(246,236,223,0.6); display:flex; align-items:center; justify-content:center} .tv .pager i{width:4px; height:4px; border-radius:50%; background:rgba(246,236,223,0.3)} .tv .pager i.on{background:rgba(246,236,223,0.9)}
.tv .lenses{position:absolute; top:14%; left:0; right:0; gap:1.4%} .tv .lenses span{border-radius:50%; display:flex; align-items:center; justify-content:center; width:26px; height:26px; font-size:11px; border:1px solid rgba(255,255,255,0.18)} .tv .lenses span.on{width:34px; height:34px; font-size:15px; border:2px solid rgba(255,255,255,0.85)}
.tv .next{position:absolute; top:13%; left:3%; display:flex; gap:6px} .tv .next .poster{--w:44px; --h:62px; --r:8px}
.tv .side-l,.tv .side-r{position:absolute; top:32%; left:50%; opacity:.4} .tv .side-l{transform:translateX(-50%) translateX(-150px) scale(0.82) rotateY(35deg)} .tv .side-r{transform:translateX(-50%) translateX(150px) scale(0.82) rotateY(-35deg)} .tv .side-l .poster,.tv .side-r .poster{--w:130px; --h:184px; --r:12px}
.tv .center{position:absolute; top:27%; left:50%; transform:translateX(-50%)} .tv .center .poster{--w:150px; --h:212px; --r:14px; box-shadow:0 0 40px hsla(30,75%,60%,0.45), 0 18px 40px rgba(0,0,0,0.55)}
.tv .acts{position:absolute; bottom:7%; left:0; right:0; display:flex; justify-content:center; gap:9px; flex-wrap:nowrap; padding:0 2%}
.tv .acts span{padding:7px 13px; border-radius:9px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:rgba(246,236,223,0.6); font-weight:700; font-size:12px; white-space:nowrap} .tv .acts span.hi{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2); color:var(--ink)} .tv .acts span.on{background:var(--ink); color:var(--dark-ink); font-weight:800} .tv .acts i{width:1px; height:20px; background:rgba(255,255,255,0.18); align-self:center}
@media (max-width:700px){ .tv .acts span{font-size:9px; padding:5px 8px} .tv .side-l,.tv .side-r{display:none} .tv .center .poster{--w:110px; --h:156px} .tv .next .poster{--w:30px; --h:42px} .tv .bar .tabs span{font-size:8px; padding:3px 7px} }
.tv-foot{height:110px; position:relative} .tv-foot .spill{position:absolute; left:8%; right:8%; top:-8px; height:70px; background:radial-gradient(60% 100% at 50% 0%, oklch(0.6 0.14 45 / 0.5), transparent 75%); filter:blur(14px)}
.tv-foot .deck{position:absolute; left:50%; transform:translateX(-50%); top:38px; display:flex; align-items:flex-end; gap:16px} .tv-foot .box{width:64px; height:26px; border-radius:8px; background:linear-gradient(180deg, #241f1a, #0c0a08); box-shadow:0 6px 16px rgba(0,0,0,0.5)}
.remote{position:relative; width:22px; height:66px; border-radius:10px; background:linear-gradient(165deg, #dedad2, #c0bbb1 55%, #a09a8f); box-shadow:0 8px 18px rgba(0,0,0,0.5), inset 0 1px 1.5px rgba(255,255,255,0.8), inset 0 -1px 2px rgba(0,0,0,0.22)}
.remote.drop{animation:tvRemoteDown 1.15s cubic-bezier(.3,.9,.35,1) .45s both}
.remote i{position:absolute; display:block; border-radius:50%; background:radial-gradient(circle at 38% 32%, #2e2a25, #0c0a08)} .remote .led{right:3px; top:2.5px; width:3.5px; height:3.5px; background:radial-gradient(circle at 35% 30%, #4a453d, #26211c)} .remote .m{left:50%; top:4px; transform:translateX(-50%); width:1.5px; height:1.5px; background:rgba(50,45,40,0.6)}
.remote .pad{left:50%; top:8px; transform:translateX(-50%); width:16px; height:16px} .remote .pad i{left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; background:radial-gradient(circle at 40% 35%, #221f1b, #060505); box-shadow:0 0 0 .8px rgba(255,255,255,0.08)}
.remote .b1{left:3px; top:28px; width:6.5px; height:6.5px} .remote .b2{right:3px; top:28px; width:6.5px; height:6.5px} .remote .b3{left:3px; top:38px; width:6.5px; height:6.5px} .remote .vol{right:3px; top:38px; width:6.5px; height:17px; border-radius:4px; background:linear-gradient(180deg, #2e2a25, #0c0a08)} .remote .b4{left:3px; top:48px; width:6.5px; height:6.5px}
.couch-tv{margin:44px auto 0; max-width:720px} .couch-tv .tv{border-radius:16px; box-shadow:0 34px 80px rgba(0,0,0,0.55)}
.couch-tv .inner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px} .couch-tv .q{font:900 clamp(19px,3vw,28px) var(--display); letter-spacing:-.7px; color:var(--ink)}
.couch{display:flex; gap:20px} .couch .p{display:flex; flex-direction:column; align-items:center; gap:6px} .couch .av{width:50px; height:50px; font:800 19px var(--display); position:relative; border:3px solid rgba(255,255,255,0.12)} .couch .p.sel .av{border-color:var(--ink)} .couch .p.guest .av{background:rgba(255,255,255,0.1); border:2.5px dashed rgba(255,255,255,0.3)}
.couch .chk{position:absolute; right:-2px; bottom:-2px; width:15px; height:15px; border-radius:50%; background:oklch(0.64 0.22 32); border:2px solid #17110d; display:flex; align-items:center; justify-content:center; font-size:7px; color:#fff; font-weight:800} .couch small{font-size:10px; color:rgba(246,236,223,0.5)} .couch .sel small{color:rgba(246,236,223,0.95)}
.couch-tv .blend{padding:8px 20px; border-radius:10px; background:var(--ink); color:var(--dark-ink); font-weight:800; font-size:13px}
.faceid{width:300px; padding:26px 24px; border-radius:28px; background:linear-gradient(180deg, #FFF6EA, #FBEFDF); box-shadow:0 30px 70px rgba(0,0,0,0.5); text-align:center; color:var(--dark-ink)}
.faceid .ic{width:52px; height:52px; margin:0 auto; border-radius:15px; background:oklch(0.62 0.19 30 / 0.12); display:flex; align-items:center; justify-content:center; font-size:26px} .faceid h3{margin-top:14px; font:850 19px var(--display); letter-spacing:-.4px}
.faceid .emo{margin:14px auto 0; display:inline-flex; gap:10px; padding:10px 22px; border-radius:16px; background:rgba(36,29,22,0.05); font-size:26px} .faceid p{margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--dark-ink-55)}
.faceid .ok{margin-top:16px; padding:13px; border-radius:14px; background:var(--coral); color:#fff; font-weight:800; font-size:15px} .faceid .no{margin-top:11px; font-size:13.5px; font-weight:600; color:rgba(36,29,22,0.5)}
.face-points{margin-top:18px; display:flex; flex-direction:column; gap:9px; font-size:14.5px; color:rgba(246,236,223,0.75)}
.tvcards{max-width:1100px; margin:0 auto; position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.tvcard{padding:26px 24px; border-radius:22px; background:rgba(246,236,223,0.05); border:1px solid rgba(246,236,223,0.1); text-align:left} .tvcard .ic{font-size:26px} .tvcard h3{margin-top:12px; font:800 19px var(--display); letter-spacing:-.3px} .tvcard p{margin:8px 0 0; font-size:14.5px; line-height:1.6; color:var(--ink-60)}
.shelves{max-width:1100px; margin:40px auto 0; display:flex; flex-direction:column; gap:14px}
.shelf-row{display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:18px; border:1.5px solid var(--svc); background:color-mix(in oklab, var(--svc) 7%, transparent); box-shadow:0 0 22px color-mix(in oklab, var(--svc) 22%, transparent); overflow:hidden}
.shelf-row .tag{padding:5px 11px; border-radius:99px; font:800 11px var(--mono); white-space:nowrap; flex-shrink:0; min-width:100px; text-align:center} .shelf-row .poster-row{gap:8px; justify-content:flex-start} .shelf-row .poster{--w:58px; --h:84px; --r:8px}
@media (max-width:640px){ .shelf-row{flex-wrap:wrap} }

/* ---------- reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)} [data-reveal].on{opacity:1; transform:none}

/* ---------- join ---------- */
.join{background:linear-gradient(180deg, var(--light-a), #FBEFE2); color:var(--dark-ink); padding:90px 24px; text-align:center}
.join .wrap{max-width:920px}
.join .stats{margin-top:14px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap} .join .stat{display:flex; align-items:baseline; gap:7px} .join .stat b{font:900 26px var(--display); letter-spacing:-.6px; min-width:2ch} .join .stat b.gold{background:linear-gradient(120deg, oklch(0.66 0.16 60), oklch(0.56 0.19 32)); -webkit-background-clip:text; background-clip:text; color:transparent} .join .stat small{font-size:13.5px; color:var(--dark-ink-55)}
.join-btn{margin:34px auto 0; background:none; border:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--dark-ink-55); font-size:13.5px; font-weight:700}
.join-icon{position:relative; width:96px; height:96px; border-radius:23px; background:var(--wallet); overflow:hidden; display:block; box-shadow:0 16px 34px rgba(80,50,20,0.35), inset 0 1px 2px rgba(255,255,255,0.25); transition:transform .3s cubic-bezier(.3,.9,.3,1)}
.join.open .join-icon{transform:scale(.88)}
.join-icon .c{position:absolute; left:8px; right:8px; top:7px; height:52px; border-radius:12px; background:var(--card)} .join-icon i{position:absolute; border-radius:50%; background:radial-gradient(circle at 32% 28%, oklch(0.86 0.11 var(--h)), oklch(0.62 0.17 var(--h)) 62%, oklch(0.5 0.15 var(--h)))}
.join-icon .f{position:absolute; left:0; right:0; bottom:0; height:38px; background:var(--flap); display:flex; align-items:center; justify-content:center; font:900 19px var(--display); letter-spacing:-.5px; color:var(--ink)} .join-icon .f .plus{filter:drop-shadow(0 0 4px rgba(255,244,224,0.9))}
.join-reveal{display:none} .join.open .join-reveal{display:block}
.threads{display:block; margin-top:-6px; width:100%; height:54px} .threads path{stroke:var(--gold); stroke-width:2; stroke-dasharray:3.5 6.5; fill:none; stroke-linecap:round}
.join.open .threads path{stroke-dasharray:3.5 6.5; animation:threadIn .9s ease-out both}
@keyframes threadIn{from{opacity:0; stroke-dashoffset:120}to{opacity:1; stroke-dashoffset:0}}
.jcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; align-items:stretch}
.jcard{padding:0 10px; display:flex; flex-direction:column; align-items:center; animation:cardIn .7s cubic-bezier(.2,.8,.2,1) both} .jcard:nth-child(2){animation-delay:.08s} .jcard:nth-child(3){animation-delay:.16s}
@keyframes cardIn{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.jorb{position:relative; z-index:1; width:52px; height:52px; border-radius:50%; border:2.5px solid oklch(0.78 0.13 72); box-shadow:0 6px 14px rgba(80,50,20,0.25), 0 0 14px oklch(0.78 0.13 72 / 0.4), inset 0 1px 2px rgba(255,255,255,0.55); display:flex; align-items:center; justify-content:center; font-size:22px}
.jcard .body{margin-top:14px; flex:1; width:100%; padding:20px 18px; border-radius:20px; background:#fff; border:1px solid rgba(36,29,22,0.08); box-shadow:0 10px 28px rgba(80,50,20,0.08); display:flex; flex-direction:column; align-items:center; gap:11px}
.jcard h3{font:850 17px var(--display); letter-spacing:-.3px} .jcard p{margin:0; font-size:13px; line-height:1.5; color:var(--dark-ink-55)}
.jcard .store{margin-top:auto; display:flex; justify-content:center; width:100%} .jcard .store svg,.jcard .store img{height:48px; width:auto}
.badge{display:inline-block; line-height:0} .badge svg{height:48px; width:auto; display:block}
.hero .badge svg{height:52px}
.textme{margin-top:auto; width:100%; display:flex; align-items:center; border:1.5px solid rgba(36,29,22,0.2); border-radius:13px; overflow:hidden; background:#fff}
.textme input{border:none; outline:none; padding:12px 13px; font-size:14px; font-family:var(--body); flex:1; min-width:0; background:transparent; color:var(--dark-ink)} .textme input::placeholder{color:rgba(36,29,22,0.35)}
.textme button{padding:12px 14px; border:none; background:var(--coral); color:#fff; font-weight:700; font-size:13.5px; cursor:pointer; white-space:nowrap}
.textme button[disabled]{opacity:.7}
.invite{width:100%; padding:10px 12px; border-radius:11px; background:rgba(36,29,22,0.045); font-size:11.5px; line-height:1.5; color:var(--dark-ink-60); text-align:left; word-break:break-word}
.jcard .share{margin-top:auto; width:100%; padding:13px 0; border-radius:13px; background:var(--coral); color:#fff; border:none; font-weight:800; font-size:14.5px; cursor:pointer}
.join .note{margin-top:22px; font-size:13px; color:var(--dark-ink-45)} .join .priv{margin-top:10px; font-size:13px; color:var(--dark-ink-55)}

/* ---------- footer ---------- */
.footer{background:var(--canvas); padding:38px 24px; text-align:center; font-size:12.5px; color:var(--ink-35)}
.footer .row{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:12px} .footer a{color:rgba(246,236,223,0.5)} .footer .row2{margin-top:14px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; color:rgba(246,236,223,0.3)} .footer .row2 a{color:rgba(246,236,223,0.45)}
.footer .langs a[aria-current=true]{color:var(--ink); font-weight:700}
.footer .tmdb{margin-top:10px; font-size:11px; color:rgba(246,236,223,0.22)}
.footer .tmdb a{color:rgba(246,236,223,0.3)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important}
  .brand-icon .esc{animation:none; transform:translateY(0); opacity:1} .brand-icon .thread{animation:none; stroke-dashoffset:0; opacity:1}
  .stars i{animation:none; opacity:.45}
  .tv.tray-host .app{animation:none; opacity:1; transform:none; filter:none} .remote.drop{animation:none; opacity:1; transform:none}
  [data-reveal]{opacity:1; transform:none} .feat{opacity:1; transform:none}
  .micbar .mic{animation:none} .live{animation:none}
}

/* ---------- small phones ---------- */
@media (max-width:420px){ .nav-links a{padding:6px 6px; font-size:12px} .nav-links .get{padding:6px 10px; margin-left:2px} }
@media (max-width:520px){ .wheel-box .poster{--w:72px; --h:103px} .wheel-box .poster-row{gap:8px} .lens-card .poster{--w:82px; --h:117px} .lens-card .poster-row{gap:8px} .lenses{gap:10px} }