/* Home v2 - motion is CSS only; everything still works (and stands still) without it */
html,body{overflow-x:clip}
.h-hero{position:relative;padding:18px 0 8px;display:grid;gap:34px}
.h-hero:before{content:"";position:absolute;inset:-120px -40vw auto;height:900px;background:radial-gradient(520px 340px at 72% 46%,rgba(245,150,40,.22),transparent 70%),radial-gradient(700px 420px at 20% 10%,var(--glow),transparent 70%);z-index:-1;animation:breathe 7s ease-in-out infinite;pointer-events:none}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 6px}
.h-hero h1{margin-top:14px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;color:var(--text3);font-size:15px;font-weight:700}
.trust li:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber);margin-right:9px;vertical-align:2px}
.tv{position:relative;margin:0 auto;width:100%;max-width:760px}
.tv .panel{position:relative;border-radius:16px;padding:9px;background:linear-gradient(#1b2340,#0c1122);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px rgba(0,0,0,.5),0 0 120px rgba(245,150,40,.18);animation:float 9s ease-in-out infinite}
.tv .panel img{display:block;width:100%;height:auto;border-radius:9px}
.tv .stand{width:34%;height:10px;margin:0 auto;border-radius:0 0 14px 14px;background:linear-gradient(#1b2340,#0b1020)}
.chipf{position:absolute;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;background:rgba(16,22,44,.86);color:#eef2ff;font-size:14px;font-weight:700;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 14px 30px rgba(0,0,0,.4);backdrop-filter:blur(8px);white-space:nowrap}
.chipf b{color:#f5b942;font-size:12px;letter-spacing:.1em}
.chipf .dot{width:8px;height:8px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 0 0 rgba(255,77,94,.6);animation:ping 1.8s infinite}
.chipf.c1{left:-6px;top:10%;animation:bob 6s ease-in-out infinite}
.chipf.c2{right:-6px;top:44%;animation:bob 7s ease-in-out -2s infinite}
.chipf.c3{left:12%;bottom:-8px;animation:bob 6.5s ease-in-out -4s infinite}
.chipf .mini{width:26px;height:30px}
.sec{margin:84px 0 0}
.sec h2{margin-top:0}
.sec .lead{max-width:620px}
.split{display:grid;gap:30px;align-items:center}
/* Tonight marquee */
.marq{overflow:hidden;margin:22px -20px 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:14px;width:max-content;animation:marq 48s linear infinite;padding:6px 0 14px}
.marq:hover .track{animation-play-state:paused}
.tn{position:relative;width:240px;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.tn img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover}
.tn div{padding:10px 12px 12px}
.tn small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--amber)}
.tn span{display:block;font-weight:800;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn .prog{position:absolute;left:0;bottom:0;height:3px;background:#ff4d5e;width:40%}
/* Popcorn */
.pc{position:relative;display:grid;gap:26px;padding:30px 24px;border-radius:28px;background:radial-gradient(600px 300px at 80% 0,rgba(245,185,66,.20),transparent 70%),var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.moods{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.moods li{padding:9px 16px;border-radius:999px;font-weight:800;font-size:15px;color:var(--text2);box-shadow:inset 0 0 0 2px var(--line);animation:chip 8s infinite}
.moods li:nth-child(2){animation-delay:2s}.moods li:nth-child(3){animation-delay:4s}.moods li:nth-child(4){animation-delay:6s}
.deckwrap{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:360px}
.deck{position:relative;width:210px;height:315px}
.card{position:absolute;inset:0;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1);animation:deck 12s infinite;background:#0b1020}
.card img{display:block;width:100%;height:100%;object-fit:cover}
.card div{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(5,8,18,.92));color:#fff}
.card small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:#f5b942}
.card b{display:block;font-size:20px}
.card i{font-style:normal;font-size:13px;color:#c3cbe3}
.card:nth-child(2){animation-delay:-4s}.card:nth-child(3){animation-delay:-8s}
.mascot{position:absolute;z-index:4;left:calc(50% - 200px);bottom:-6px;width:118px;animation:hop 3.2s ease-in-out infinite;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.pop{display:block;width:100%;height:auto}
.pop .eyes{transform-origin:60px 88px;animation:blink 5s infinite}
.bubble{position:absolute;z-index:5;left:calc(50% - 250px);bottom:150px;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#fff;color:#1a1405;font-weight:800;font-size:14px;box-shadow:0 10px 24px rgba(0,0,0,.25);animation:bubble 6s ease-in-out infinite;white-space:nowrap}
.pads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 0;padding:0;list-style:none;font-size:14px;color:var(--text2)}
.pads li{padding:10px 12px;border-radius:12px;background:var(--bg2)}
.pads b{color:var(--text)}
/* Ambient band - always dark (it's a fireplace) */
.amb{position:relative;margin:84px -20px 0;padding:70px 20px 60px;color:#eef2ff;overflow:hidden;isolation:isolate}
.amb .fire{position:absolute;inset:0;z-index:-2;background:#140803}
.amb .fire img{width:100%;height:100%;object-fit:cover;opacity:.75;animation:flicker 3.5s steps(1) infinite}
.amb:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--bg),transparent 9%,transparent 88%,var(--bg)),linear-gradient(90deg,rgba(10,6,4,.9),rgba(10,6,4,.45) 60%,rgba(10,6,4,.2))}
.amb .in{max-width:1080px;margin:0 auto}
.amb h2{color:#fff}
.amb .lead{color:#e8d9c8}
.amb .eyebrow{color:#ffc56b}
.emb{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:#ffb347;box-shadow:0 0 10px 3px rgba(255,150,40,.8);z-index:-1;animation:ember 7s linear infinite;opacity:0}
.e1{left:52%;animation-delay:0s}.e2{left:58%;animation-delay:-1.4s;animation-duration:8s}.e3{left:63%;animation-delay:-2.8s}.e4{left:68%;animation-delay:-4.1s;animation-duration:9s}.e5{left:73%;animation-delay:-5.3s}.e6{left:78%;animation-delay:-.7s;animation-duration:6s}.e7{left:83%;animation-delay:-3.5s;animation-duration:8.5s}.e8{left:60%;animation-delay:-6.2s}
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:30px 0 0}
.grp{margin:0;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.grp img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.grp:hover img{transform:scale(1.07)}
.grp div{position:absolute;inset:auto 0 0 0;padding:30px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.grp b{display:block;font-size:17px}
.grp span{display:block;font-size:13px;color:#d8dcea;line-height:1.35}
/* features */
.fgrid{display:grid;gap:14px;margin:22px 0 0}
.f{padding:22px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.f h3{margin:0 0 6px;font-size:20px}
.f p{margin:0;color:var(--text2);font-size:16px}
.f .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--bg2);margin:0 0 14px;color:var(--amber)}
.f .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sw{display:flex;gap:8px;margin:0 0 14px}
.sw i{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);animation:swatch 10s infinite}
.sw i:nth-child(1){background:#f5b942}.sw i:nth-child(2){background:#000;animation-delay:2s}.sw i:nth-child(3){background:#8ea3c8;animation-delay:4s}.sw i:nth-child(4){background:#7c4dce;animation-delay:6s}.sw i:nth-child(5){background:#f4efe4;animation-delay:8s}
/* phone */
.phone{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 0 1px var(--line)}
.phone img{display:block;width:100%;height:auto}
.phone:after{content:"";position:absolute;left:14%;width:22%;top:38%;height:3px;background:linear-gradient(90deg,transparent,#f5b942,transparent);box-shadow:0 0 14px #f5b942;animation:scan 2.6s ease-in-out infinite}
.ticks{margin:16px 0 0;padding:0;list-style:none}
.ticks li{padding:7px 0 7px 32px;position:relative;color:var(--text2)}
.ticks li:before{content:"";position:absolute;left:5px;top:15px;width:14px;height:8px;border-left:3px solid var(--amber);border-bottom:3px solid var(--amber);transform:rotate(-45deg)}
.works{margin:56px 0 0;padding:22px 24px;border-radius:22px;background:var(--bg2);color:var(--text2);font-size:16px}
.works b{color:var(--text)}
.faqmini{margin:14px 0 0}
/* keyframes */
@keyframes breathe{50%{opacity:.7;transform:scale(1.04)}}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(255,77,94,0)}100%{box-shadow:0 0 0 0 rgba(255,77,94,0)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes chip{0%,22%{background:var(--amber);color:var(--ink);box-shadow:none}25%,100%{background:transparent}}
@keyframes deck{0%,26%{transform:none;opacity:1;z-index:3}33%{transform:translateX(-130%) rotate(-14deg);opacity:0;z-index:3}34%,59%{transform:translate(30px,-18px) scale(.9);opacity:.55;z-index:1}67%,92%{transform:translate(15px,-9px) scale(.95);opacity:.8;z-index:2}100%{transform:none;opacity:1;z-index:3}}
@keyframes hop{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes bubble{0%,8%{opacity:0;transform:translateY(8px) scale(.9)}14%,80%{opacity:1;transform:none}88%,100%{opacity:0}}
@keyframes flicker{0%{opacity:.75}12%{opacity:.68}27%{opacity:.8}41%{opacity:.7}58%{opacity:.78}73%{opacity:.66}88%{opacity:.76}}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(-40px,-520px);opacity:0}}
@keyframes swatch{0%,18%{transform:scale(1.25)}22%,100%{transform:none}}
@keyframes scan{0%,100%{transform:translateY(-40px);opacity:.2}50%{transform:translateY(60px);opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}}
@media (min-width:760px){
  .h-hero{grid-template-columns:1.05fr 1fr;align-items:center;padding-top:40px}
  .h-hero h1{font-size:clamp(44px,5.2vw,66px)}
  .split{grid-template-columns:1fr 1fr;gap:48px}
  .pc{grid-template-columns:1fr 1fr;padding:44px}
  .amb{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:100px 40px 80px}
  .groups{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .marq{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .tn{width:280px}
}
@media (max-width:759px){.grp span{display:none}.grp div{padding:24px 12px 10px}.grp b{font-size:16px}}
@media (max-width:420px){.chipf{font-size:12px;padding:8px 10px}.chipf.c2{right:-4px}.mascot{left:calc(50% - 170px);width:96px}.bubble{left:12px;bottom:auto;top:0}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.nf{display:grid;gap:34px;align-items:center;padding:30px 0 10px}
.nf .tv{max-width:560px}
.nf .panel{aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;position:relative}
.static{position:absolute;inset:9px;border-radius:9px;background:repeating-radial-gradient(circle at 17% 32%,#cfd3dc 0 1px,#3a3f4f 1px 2px,#8a90a0 2px 3px),repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);background-size:7px 7px,100% 4px;animation:snow .35s steps(4) infinite;opacity:.55}
.osd{position:relative;z-index:2;text-align:center;color:#fff;font-weight:800;text-shadow:0 2px 8px #000}
.osd b{display:block;font-size:clamp(40px,9vw,86px);letter-spacing:.04em;line-height:1}
.osd span{font-size:15px;letter-spacing:.3em;color:#f5b942}
.nf .mascot{position:static;width:96px;margin:0 6px 0 auto;animation:shrug 2.4s ease-in-out infinite}
.nf .bubble{position:relative;left:auto;bottom:auto;display:inline-block;margin:0 0 0 auto;animation:none}
.nfm{display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:560px;margin:0 auto;width:100%}
@keyframes snow{25%{background-position:3px 2px,0 1px}50%{background-position:-2px 4px,0 2px}75%{background-position:4px -3px,0 3px}}
@keyframes shrug{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-6px)}}
@media (min-width:760px){.nf{grid-template-columns:1fr 1.1fr;padding-top:60px}}
@media (prefers-reduced-motion:reduce){.static{animation:none}}