/* =====================================================
   Viking Forge — product page
   Palette and type follow the app (src/ui/theme.ts).
   ===================================================== */
@font-face{font-family:"Cinzel Decorative";src:url(/assets/fonts/CinzelDecorative-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter_400Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter_600SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Runic;src:url(/assets/fonts/NotoSansRunic.woff2) format("woff2");font-display:swap}

:root{
  --bg:#080D0F;
  --surface:#11191C;
  --elevated:#192328;
  --inset:#0B1114;
  --border:#2A383E;
  --text:#F4F4ED;
  --muted:#94A4AA;
  --subtle:#61747D;
  --ember:#FF7A24;
  --ember-soft:#382318;
  --hot:#FFD36A;
  --deep:#D63808;
  --gold:#DEB55F;
  --ice:#77B7CC;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:1180px;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --brand:"Cinzel Decorative",Georgia,serif;
}
*{box-sizing:border-box}
html{color-scheme:dark;background:#080D0F;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--ember);color:#140800}
.skip{position:absolute;left:16px;top:-100px;z-index:100;background:var(--ember);color:#140800;padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- Ambient layers ---------- */
.embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.cursor-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(255,122,36,.13),rgba(214,56,8,.05) 40%,transparent 70%);will-change:transform}
.noise{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.runes{position:fixed;inset:0;pointer-events:none;z-index:0;font-family:Runic,serif;filter:blur(1.5px)}
.runes span{position:absolute;font-size:clamp(60px,9vw,140px);line-height:1;opacity:.07;color:var(--ember);animation:runeDrift 14s ease-in-out infinite alternate}
.runes .r1{left:3%;top:18%}
.runes .r2{right:4%;top:30%;color:var(--ice);animation-delay:-3s}
.runes .r3{left:6%;top:58%;animation-delay:-6s}
.runes .r4{right:7%;top:72%;color:var(--gold);animation-delay:-2s}
.runes .r5{left:46%;top:88%;color:var(--ice);animation-delay:-8s}
.runes .r6{right:28%;top:8%;animation-delay:-5s;font-size:70px}
.runes .r7{left:24%;top:40%;opacity:.04;animation-delay:-10s}
@keyframes runeDrift{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-26px) rotate(4deg);opacity:.11}}

main,.footer,.nav{position:relative;z-index:4}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:0 24px;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,122,36,.35) 30%,rgba(255,122,36,.35) 70%,transparent);opacity:0;transition:opacity .4s var(--ease)}
.nav.scrolled{background:linear-gradient(180deg,rgba(8,13,15,.94),rgba(8,13,15,.8));box-shadow:0 18px 40px -24px rgba(0,0,0,.9);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
.nav.scrolled::after{opacity:1}
.nav-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;transition:padding .4s var(--ease)}
.nav.scrolled .nav-inner{padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:34px;height:34px;transition:transform .5s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-12deg) translateY(2px)}
.brand-text{font-family:var(--brand);font-size:17px;letter-spacing:.02em;color:var(--text);white-space:nowrap}
.brand-text span{color:var(--ember)}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:14px;font-weight:600;transition:color .25s,background .25s}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:rgba(255,255,255,.06)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;padding:120px 0 90px;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero-art{position:absolute;inset:-6% -2% 0;z-index:-2}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;opacity:.55;animation:kenBurns 24s ease-in-out infinite alternate;will-change:transform}
@keyframes kenBurns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-2%,-1.5%,0)}}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 70% 60% at 72% 55%,transparent 0,rgba(8,13,15,.35) 55%,rgba(8,13,15,.9) 100%),
  linear-gradient(90deg,rgba(8,13,15,.96) 0%,rgba(8,13,15,.78) 38%,rgba(8,13,15,.25) 70%,rgba(8,13,15,.6) 100%),
  linear-gradient(0deg,var(--bg) 0%,transparent 28%)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:40px;width:100%}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border-radius:999px;border:1px solid rgba(255,122,36,.28);background:rgba(56,35,24,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:600 13px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:#FFC79E}
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(255,122,36,.7);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,122,36,.65)}70%{box-shadow:0 0 0 10px rgba(255,122,36,0)}100%{box-shadow:0 0 0 0 rgba(255,122,36,0)}}
.hero-title,.final-title{margin:22px 0 18px;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(56px,6.9vw,104px);line-height:.92;letter-spacing:-.01em}
.hero-copy{position:relative;z-index:5}
.hero-title{font-size:clamp(44px,6vw,74px)}
.burn{position:relative;display:block;width:max-content;max-width:100%}
.burn .burn-text{display:block;white-space:nowrap}
.burn canvas{position:absolute;pointer-events:none;transition:opacity .3s linear}
.burn canvas.out{opacity:0}
.grad,.section-title em{background:linear-gradient(100deg,var(--hot) 0%,var(--ember) 40%,var(--deep) 75%,var(--ember) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradientShift 7s ease infinite}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* Burn reveal: hidden until JS drives --edge; a late fallback reveals it if JS never runs. */
.burn[data-burn] .burn-text{clip-path:inset(-30% 100% -30% 0);animation:burnFallback .01s 3.5s forwards}
.burn[data-burn][data-direction="-1"] .burn-text{clip-path:inset(-30% 0 -30% 100%)}
.burn.driven .burn-text{animation:none;clip-path:inset(-30% calc(100% - var(--edge,0px)) -30% -10%)}
.burn.driven[data-direction="-1"] .burn-text{clip-path:inset(-30% -10% -30% calc(100% - var(--edge,0px)))}
.burn.lit[data-burn][data-direction] .burn-text{clip-path:none;animation:none}
@keyframes burnFallback{to{clip-path:inset(-30% -10% -30% -10%)}}
.hero-sub{max-width:520px;margin:0;color:#C9D2D4;font-size:clamp(17px,1.6vw,19px)}
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.store{position:relative;display:inline-flex;align-items:center;gap:12px;min-width:190px;padding:11px 20px 11px 16px;border-radius:14px;text-decoration:none;color:#fff;background:#000;border:1px solid rgba(255,255,255,.28);transition:transform .35s var(--ease),border-color .3s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.store-logo{width:30px;height:30px;flex:none}
.store-text{display:flex;flex-direction:column;line-height:1.1}
.store-text small{font-size:11px;letter-spacing:.02em;opacity:.9}
.store-text strong{font-size:21px;font-weight:600;letter-spacing:-.01em}
.store-apple:hover{border-color:rgba(255,160,90,.8);box-shadow:0 0 0 4px rgba(255,122,36,.14),0 14px 40px rgba(255,122,36,.28)}
.store-play:hover{border-color:rgba(119,183,204,.8);box-shadow:0 0 0 4px rgba(119,183,204,.14),0 14px 40px rgba(119,183,204,.24)}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 0;color:var(--muted);font:600 14px/1 var(--display);letter-spacing:.2em;text-transform:uppercase}
.hero-meta i{width:4px;height:4px;border-radius:50%;background:var(--ember)}
.enter{animation:fadeUp .9s var(--ease) both}
.e1{animation-delay:.05s}.e3{animation-delay:1.25s}.e4{animation-delay:1.45s}.e5{animation-delay:1.65s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- Phones ---------- */
.phone{position:relative;margin:0;aspect-ratio:1206/2622;border-radius:13.5%/6.2%;padding:3.2%;background:linear-gradient(145deg,#3a4448,#12181b 30%,#0a0e10 70%,#2e373b);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -20px rgba(0,0,0,.85),0 0 0 1px #000 inset;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.screen{position:relative;width:100%;height:100%;border-radius:11.2%/5.2%;overflow:hidden;background:var(--bg);isolation:isolate}
.screen::after{content:"";position:absolute;left:50%;top:1.6%;width:31%;height:3.3%;transform:translateX(-50%);border-radius:999px;background:#000;z-index:2}
.screen video{width:100%;height:100%;object-fit:cover}
.phone-glow{position:absolute;left:10%;right:10%;bottom:-10%;height:30%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,122,36,.55),transparent 70%);filter:blur(28px);z-index:-1;animation:glowBreath 4s ease-in-out infinite}
@keyframes glowBreath{50%{opacity:.55;transform:scaleX(.9)}}
.hero-phones{position:relative;height:min(640px,72vh);perspective:1400px}
.hero-phones .phone{position:absolute;top:50%;left:38%;width:min(270px,18vw)}
.phone-main{z-index:3;transform:translate(-50%,-50%);animation:rise 1.2s .4s var(--ease) both,float 6s 1.6s ease-in-out infinite}
.phone-side{z-index:2;opacity:.9;filter:brightness(.72)}
.phone-side.left{transform:translate(-118%,-44%) rotate(-8deg) scale(.86);animation:riseLeft 1.2s .6s var(--ease) both}
.phone-side.right{transform:translate(10%,-52%) rotate(8deg) scale(.86);animation:riseRight 1.2s .75s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translate(-50%,-30%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes riseLeft{from{opacity:0;transform:translate(-80%,-30%) rotate(0) scale(.8)}to{opacity:.9;transform:translate(-118%,-44%) rotate(-8deg) scale(.86)}}
@keyframes riseRight{from{opacity:0;transform:translate(-20%,-30%) rotate(0) scale(.8)}to{opacity:.9;transform:translate(10%,-52%) rotate(8deg) scale(.86)}}
.hero-phones .phone-side.far{z-index:4;opacity:1;filter:none;transform:translate(68%,-34%) rotate(5deg);animation:riseFar 1.2s .9s var(--ease) both}
@keyframes riseFar{from{opacity:0;transform:translate(40%,-20%) rotate(0) scale(.9)}to{opacity:1;transform:translate(68%,-34%) rotate(5deg)}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}

.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--subtle);text-decoration:none;font:600 11px/1 var(--display);letter-spacing:.3em;text-transform:uppercase}
.scroll-cue i{position:relative;width:2px;height:38px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--ember);animation:scrollDown 1.7s var(--ease) infinite}
@keyframes scrollDown{to{top:100%}}

/* ---------- Marquee ---------- */
/* ---------- Trailer (beside the pillars) ---------- */
.trailer-frame{position:relative;height:min(700px,82vh);aspect-ratio:720/1560;border-radius:26px;overflow:hidden;background:#000;border:1px solid rgba(255,122,36,.28);box-shadow:0 50px 120px -30px rgba(0,0,0,.9),0 0 80px rgba(255,122,36,.16)}
.trailer-video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.trailer-sound{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px 10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(8,13,15,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,background .3s}
.trailer-sound:hover{border-color:var(--ember);background:rgba(56,35,24,.8)}
.trailer-sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trailer-sound .i-on,.trailer-sound[aria-pressed="true"] .i-off{display:none}
.trailer-sound[aria-pressed="true"] .i-on{display:block}
.marquee{position:relative;z-index:4;overflow:hidden;padding:22px 0;border-block:1px solid rgba(255,122,36,.14);background:linear-gradient(90deg,rgba(56,35,24,.4),rgba(17,25,28,.6),rgba(56,35,24,.4));-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:26px;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font:600 26px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.marquee b{font:400 22px/1 Runic,serif;color:var(--ember);text-shadow:0 0 12px rgba(255,122,36,.6)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{position:relative;padding:130px 0 40px}
.section.wrap{padding-left:24px;padding-right:24px}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--ember);font:600 14px/1 var(--display);letter-spacing:.3em;text-transform:uppercase}
.eyebrow span{font-family:Runic,serif;font-size:18px;letter-spacing:0}
.section-title{margin:16px 0 14px;font:600 clamp(44px,6.6vw,84px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.section-title em{font-style:normal}
.lead{max-width:600px;margin:0;color:var(--muted);font-size:clamp(17px,1.5vw,19px)}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in-view{opacity:1;transform:none}

/* Pillars */
.section.pillars-section{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head trailer" "cards trailer" "stats trailer";column-gap:40px;align-content:start}
.pillars-head{grid-area:head}
.pillars-head .section-title em{display:block}
.pillars-trailer{position:relative;grid-area:trailer;align-self:center;margin:0}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px;grid-area:cards}
.pillar{position:relative;padding:22px 20px 24px;border-radius:18px;background:linear-gradient(180deg,rgba(25,35,40,.92),rgba(11,17,20,.92));border:1px solid var(--border);overflow:hidden;transform-style:preserve-3d;transition:transform .5s var(--ease),opacity .9s var(--ease)}
.pillar h3{margin:16px 0 8px;font:600 24px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.pillar p{margin:0;color:var(--muted);font-size:15px}
.pillar strong{color:var(--text);font-weight:600}
.pillar-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:var(--ember-soft);border:1px solid rgba(255,122,36,.35);box-shadow:0 0 30px rgba(255,122,36,.18) inset}
.pillar-icon svg{width:23px;height:23px;fill:none;stroke:var(--ember);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pillar-glow{position:absolute;left:var(--mx,50%);top:var(--my,50%);width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,36,.22),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.pillar:hover .pillar-glow{opacity:1}
/* Burning border — a rotating ember arc like the app's BurningBorder */
@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.burn-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--angle),transparent 0 55%,rgba(214,56,8,.9) 68%,var(--ember) 78%,var(--hot) 84%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .4s;animation:spin 3.2s linear infinite;pointer-events:none}
.burn-border:hover::before,.burn-border.is-burning::before{opacity:1}
@keyframes spin{to{--angle:360deg}}

.stats{grid-area:stats;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:14px;border-radius:18px;overflow:hidden;background:var(--border);border:1px solid var(--border)}
.stat{padding:18px 12px;text-align:center;background:rgba(11,17,20,.94)}
.stat b{display:block;font:600 clamp(36px,3.8vw,50px)/1 var(--display);background:linear-gradient(180deg,var(--hot),var(--ember) 60%,var(--deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:8px;color:var(--muted);font:600 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase}

/* ---------- Inside (sticky phone) ---------- */
.inside-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:40px}
.feature-list{list-style:none;margin:0;padding:0}
.feature{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0;opacity:.28;transition:opacity .5s var(--ease)}
.feature.is-active{opacity:1}
.feature-tag{align-self:flex-start;padding:6px 12px;border-radius:999px;background:var(--ember-soft);border:1px solid rgba(255,122,36,.3);color:#FFC79E;font:600 13px/1 var(--display);letter-spacing:.2em;text-transform:uppercase}
.feature h3{margin:18px 0 12px;font:600 clamp(40px,4.6vw,64px)/.95 var(--display);text-transform:uppercase}
.feature p{max-width:440px;margin:0;color:var(--muted);font-size:18px}
.feature .phone-inline{display:none}
.sticky-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;gap:28px}
.phone-stage{width:min(310px,27vw)}
.stage-screen video{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .55s var(--ease),transform .8s var(--ease)}
.stage-screen video.is-active{opacity:1;transform:none}
.stage-screen::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,rgba(255,150,60,.55),transparent 60%);opacity:0}
.stage-screen.flash::before{animation:flash .7s var(--ease-out)}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
.stage-progress{width:3px;height:220px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.stage-progress i{display:block;width:100%;height:var(--p,0%);background:linear-gradient(180deg,var(--hot),var(--ember),var(--deep));box-shadow:0 0 12px var(--ember);transition:height .5s var(--ease)}

/* ---------- Gallery ---------- */
.gallery{padding-bottom:60px}
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.gallery-nav{display:flex;gap:10px;padding-bottom:18px}
.round-btn{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.round-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.round-btn:hover{border-color:var(--ember);background:var(--ember-soft)}
.round-btn:active{transform:scale(.92)}
.shots{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px max(24px,calc((100vw - var(--wrap))/2 + 24px)) 40px;scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.shots::-webkit-scrollbar{display:none}
.shots.dragging{cursor:grabbing;scroll-snap-type:none}
.shots img{flex:none;width:clamp(220px,23vw,300px);height:auto;border-radius:22px;scroll-snap-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);transition:transform .5s var(--ease),box-shadow .5s;user-select:none;-webkit-user-drag:none}
.shots img:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:0 40px 70px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,122,36,.4),0 0 40px rgba(255,122,36,.2)}

/* ---------- Final CTA ---------- */
.final{position:relative;padding:160px 0 150px;text-align:center;overflow:hidden;isolation:isolate}
.final-art{position:absolute;inset:0;z-index:-2}
.final-art img{width:100%;height:120%;object-fit:cover;object-position:60% 35%;opacity:.5;will-change:transform}
.final-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg) 0%,rgba(8,13,15,.55) 35%,rgba(8,13,15,.6) 70%,var(--bg) 100%),radial-gradient(ellipse at center,transparent 0,rgba(8,13,15,.7) 80%)}
.final-inner{display:flex;flex-direction:column;align-items:center}
.final-icon{width:96px;height:96px;border-radius:22px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 20px 50px rgba(255,122,36,.35)}
.final-title{font-size:clamp(54px,8.4vw,112px);display:flex;flex-direction:column;align-items:center}
.final .lead{margin:0 auto}
.final .stores{justify-content:center}
.fine{margin:22px 0 0;color:var(--subtle);font-size:14px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--border);padding:34px 0 44px;background:var(--bg)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px}
.footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer nav a{color:var(--muted);font-size:14px;text-decoration:none}
.footer nav a:hover{color:var(--ember)}
.footer p{margin:0;color:var(--subtle);font-size:14px}
.footer .brand-mark{width:28px;height:28px}
.footer .brand-text{font-size:15px}

/* ---------- Responsive ---------- */
@media (min-width:981px) and (max-width:1180px){.hero-phones .phone{width:16vw}}
@media (min-width:1081px) and (max-width:1240px){.pillars-section .trailer-frame{height:600px}}
@media (max-width:1080px){
  .section.pillars-section{grid-template-columns:1fr;grid-template-areas:"head" "trailer" "cards" "stats"}
  .pillars-trailer{justify-self:center;margin-top:44px}
  .trailer-frame{height:min(620px,78vh)}
}
@media (max-width:980px){
  .hero{padding-top:110px}
  .hero-inner{grid-template-columns:1fr;gap:10px;text-align:left}
  .hero-phones{height:520px;margin-top:20px}
  .hero-phones .phone{width:min(230px,44vw)}
  .pillars{grid-template-columns:1fr}
  .inside-grid{grid-template-columns:1fr}
  .sticky-stage{display:none}
  .feature{min-height:0;opacity:1;padding:48px 0 30px;border-top:1px solid rgba(255,255,255,.06)}
  .feature .phone-inline{display:block;width:min(270px,70vw);margin:30px auto 0}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .wrap,.section.wrap{padding-left:16px;padding-right:16px}
  .nav{padding:0 16px}
  .nav-links{display:none}
  .brand-text{font-size:15px}
  .hero-title{font-size:clamp(34px,12.2vw,60px)}
  .trailer-frame{height:min(560px,72vh)}
  .hero-phones{height:430px}
  .hero-phones .phone{left:36%;width:min(180px,46vw)}
  .phone-side.left{transform:translate(-105%,-44%) rotate(-8deg) scale(.82)}
  .phone-side.right{transform:translate(6%,-52%) rotate(8deg) scale(.8)}
  .hero-phones .phone-side.far{transform:translate(58%,-36%) rotate(5deg) scale(.9)}
  @keyframes riseLeft{from{opacity:0}to{opacity:.9;transform:translate(-105%,-44%) rotate(-8deg) scale(.82)}}
  @keyframes riseRight{from{opacity:0}to{opacity:.9;transform:translate(6%,-52%) rotate(8deg) scale(.8)}}
  @keyframes riseFar{from{opacity:0}to{opacity:1;transform:translate(58%,-36%) rotate(5deg) scale(.9)}}
  .store{flex:1 1 180px;min-width:0}
  .section{padding-top:96px}
  .gallery-head{flex-direction:column;align-items:flex-start}
  .gallery-nav{display:none}
  .shots{padding-left:16px;padding-right:16px;gap:14px}
  .shots img{width:68vw}
  .cursor-glow{display:none}
  .final{padding:120px 0 110px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .embers,.cursor-glow{display:none}
}