/* ============================================================
   SAL'S COLD BREW - Cinematic scroll experience
   Built on the design system tokens.
   ============================================================ */
@import url("colors_and_type.css");

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.45;
  overflow-x:hidden;
  background:linear-gradient(180deg, oklch(8% .03 285), var(--bg) 30%, oklch(6% .025 285));
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input{font:inherit;}
button,select{font:inherit;}
.wrap{width:min(1200px,calc(100% - 40px));margin-inline:auto;}

/* ---- Fixed texture overlays ---- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:90;}
.fx-scan{opacity:.10;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,oklch(100% 0 0 / .13) 0 1px,transparent 1px 4px);}
.fx-grain{opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.fx-vignette{background:radial-gradient(circle at 50% 42%, transparent 52%, oklch(4% .02 292 / .7));}

/* ---- NAV ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px clamp(18px,4vw,40px);transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent;}
.nav.solid{background:oklch(8% .035 292 / .72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);}
.nav-brand{font-family:var(--font-display);color:var(--pink);font-size:1.15rem;line-height:1;text-shadow:var(--glow-text-pink);}
.nav-brand span{display:block;color:var(--cyan);font-family:var(--font-mono);font-size:.5rem;letter-spacing:.3em;text-shadow:none;margin-top:2px;}
.nav-links{display:flex;align-items:center;gap:26px;color:var(--muted);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;}
.nav-links a{cursor:pointer;transition:color .18s,text-shadow .18s;}
.nav-links a:hover{color:var(--cyan);text-shadow:var(--glow-text-cyan);}
.nav-cart{border:1px solid oklch(72% .27 348 / .72);color:var(--ink);background:oklch(12% .04 292 / .42);min-height:40px;padding:0 16px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 24px oklch(72% .27 348 / .12);border-radius:var(--r-xs);transition:transform .18s,box-shadow .18s;}
.nav-cart:hover{transform:translateY(-1px);box-shadow:0 0 30px oklch(72% .27 348 / .3);}
.nav-cart b{color:var(--yellow);}
@media(max-width:760px){.nav-links{display:none;}}

/* ---- Cart drawer ---- */
body.cart-lock{overflow:hidden;}
.cart-shell{position:fixed;inset:0;z-index:120;display:grid;grid-template-columns:1fr minmax(340px,430px);pointer-events:none;}
.cart-shell[hidden]{display:none;}
.cart-shell.open{pointer-events:auto;}
.cart-scrim{grid-column:1 / -1;grid-row:1;border:0;background:oklch(2% .02 292 / .58);backdrop-filter:blur(5px);cursor:pointer;opacity:0;transition:opacity .24s var(--ease-out);}
.cart-shell.open .cart-scrim{opacity:1;}
.cart-drawer{grid-column:2;grid-row:1;position:relative;z-index:1;height:100vh;display:flex;flex-direction:column;border-left:1px solid var(--line);background:linear-gradient(180deg, oklch(12% .04 292 / .98), oklch(7% .03 285 / .98));box-shadow:-30px 0 80px var(--shadow);transform:translateX(105%);transition:transform .28s var(--ease-out);overflow:hidden;}
.cart-shell.open .cart-drawer{transform:none;}
.cart-drawer::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--yellow));box-shadow:0 0 30px oklch(72% .27 348 / .45);}
.cart-drawer::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 12%, oklch(78% .2 217 / .16), transparent 16rem),linear-gradient(90deg,transparent,oklch(100% 0 0 / .035));}
.cart-top,.cart-bottom,.cart-items,.cart-empty{position:relative;z-index:1;}
.cart-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px 22px 18px;border-bottom:1px solid var(--line-soft);}
.cart-top h2{font-size:1.75rem;margin-top:6px;color:var(--ink);}
.cart-close{width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r-xs);background:oklch(100% 0 0 / .04);color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;box-shadow:0 0 18px oklch(78% .2 217 / .1);transition:transform .18s,border-color .18s;}
.cart-close:hover{transform:translateY(-1px);border-color:var(--cyan);}
.cart-items{flex:1;overflow:auto;padding:14px 14px 8px;display:grid;align-content:start;gap:10px;}
.cart-line{display:grid;grid-template-columns:68px minmax(0,1fr);gap:12px;padding:10px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:linear-gradient(180deg,oklch(16% .05 292 / .82),oklch(9% .035 292 / .82));box-shadow:0 12px 28px oklch(2% .02 292 / .38);}
.cart-line img{align-self:center;width:58px;height:86px;object-fit:contain;filter:drop-shadow(0 0 13px var(--item-accent,var(--cyan)));}
.cart-line-main{min-width:0;}
.cart-line-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-family:var(--font-display);font-size:.92rem;line-height:.96;text-transform:uppercase;}
.cart-line-title span{min-width:0;}
.cart-line-price{color:var(--yellow);white-space:nowrap;text-shadow:var(--glow-yellow);}
.cart-line-meta{margin-top:6px;color:var(--soft);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;}
.cart-line-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid color-mix(in oklch,var(--item-accent,var(--cyan)),transparent 48%);border-radius:var(--r-xs);overflow:hidden;background:oklch(100% 0 0 / .04);}
.qty-stepper button{width:28px;height:28px;border:0;background:transparent;color:var(--ink);cursor:pointer;}
.qty-stepper span{min-width:28px;text-align:center;font-family:var(--font-mono);font-size:.72rem;color:var(--ink);}
.cart-remove{border:0;background:transparent;color:var(--muted);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;}
.cart-remove:hover{color:var(--pink);}
.cart-empty{margin:16px;padding:18px;border:1px dashed var(--line);border-radius:var(--r-md);color:var(--muted);background:oklch(100% 0 0 / .035);}
.cart-empty strong{display:block;color:var(--cyan);font-family:var(--font-display);font-size:1.05rem;text-transform:uppercase;text-shadow:var(--glow-text-cyan);}
.cart-empty span{display:block;margin-top:8px;font-size:.9rem;}
.cart-bottom{padding:16px 18px 20px;border-top:1px solid var(--line-soft);background:oklch(6% .028 285 / .7);}
.cart-total{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.cart-total strong{color:var(--yellow);font-family:var(--font-display);font-size:1.35rem;letter-spacing:0;text-shadow:var(--glow-yellow);}
.cart-checkout{width:100%;min-height:52px;font-size:.8rem;}
.cart-note{margin:12px 0 0;color:var(--soft);font-size:.76rem;text-align:center;}
@media(max-width:760px){
  .cart-shell{grid-template-columns:1fr;}
  .cart-drawer{grid-column:1;width:min(100vw,430px);justify-self:end;}
}

/* ============================================================
   CINEMA - pinned scroll-driven stage
   ============================================================ */
.cinema{position:relative;height:560vh;z-index:1;}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;}

/* Parallax background layers */
.bg-glow{position:absolute;inset:-10%;z-index:0;
  background:
    radial-gradient(circle at 50% 46%, oklch(60% .25 348 / .30), transparent 38%),
    radial-gradient(circle at 22% 30%, oklch(55% .22 217 / .26), transparent 40%),
    radial-gradient(circle at 80% 70%, oklch(55% .22 217 / .22), transparent 42%);
  transform:translate3d(0, var(--glow-y,0px), 0) scale(var(--glow-s,1));
  filter:blur(10px);
  will-change:transform;
}
.bg-grid{position:absolute;inset:-30% -10%;z-index:0;
  background-image:
    linear-gradient(oklch(78% .2 217 / .14) 1px, transparent 1px),
    linear-gradient(90deg, oklch(72% .27 348 / .12) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 46%, black 30%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 46%, black 30%, transparent 72%);
  transform:perspective(900px) rotateX(58deg) translate3d(0, var(--grid-y,0px), 0) scale(var(--grid-s,1.4));
  transform-origin:50% 30%;
  will-change:transform;
  opacity:var(--grid-o,.6);
}
.bg-rings{position:absolute;left:50%;top:46%;z-index:0;width:min(720px,92vw);aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;
  background:conic-gradient(from var(--ring-rot,0deg), oklch(72% .27 348 / .5), oklch(78% .2 217 / .6), oklch(86% .18 91 / .35), oklch(72% .27 348 / .5));
  -webkit-mask:radial-gradient(circle, transparent 44%, black 45% 49%, transparent 50%);
  mask:radial-gradient(circle, transparent 44%, black 45% 49%, transparent 50%);
  transform:rotateX(64deg) scale(var(--ring-s,1));
  opacity:var(--ring-o,.5);
  filter:drop-shadow(0 0 40px oklch(72% .27 348 / .4));
  will-change:transform,opacity;
}

/* The hero product */
.hero-can{position:absolute;z-index:3;height:min(74vh,780px);width:auto;
  transform:translate3d(var(--can-x,0px), var(--can-y,0px), 0) rotateZ(var(--can-rz,0deg)) rotateY(var(--can-ry,0deg)) scale(var(--can-s,1));
  filter:drop-shadow(0 0 30px oklch(72% .27 348 / .62)) drop-shadow(0 0 40px oklch(78% .2 217 / .5));
  opacity:var(--can-o,1);
  will-change:transform,opacity;
}

/* ---- Copy layers (absolutely placed, opacity-driven) ---- */
.layer{position:absolute;inset:0;z-index:5;pointer-events:none;}
.layer > *{position:absolute;}

/* giant brand wordmark behind can */
.brand-huge{left:50%;top:46%;translate:-50% -50%;z-index:2;font-family:var(--font-display);font-size:clamp(6rem,24vw,22rem);line-height:.8;color:oklch(72% .27 348 / .14);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;text-shadow:0 0 60px oklch(72% .27 348 / .2);}

.intro-kicker{left:50%;top:10.5%;translate:-50%;white-space:nowrap;font-family:var(--font-mono);font-size:clamp(.7rem,1.4vw,.9rem);letter-spacing:.4em;color:var(--cyan);text-transform:uppercase;text-shadow:var(--glow-text-cyan);text-align:center;}
.intro-head{left:50%;bottom:11%;translate:-50%;width:min(1100px,92vw);text-align:center;font-family:var(--font-display);font-size:clamp(2rem,6vw,4.8rem);line-height:.92;text-transform:uppercase;text-shadow:0 0 30px oklch(72% .27 348 / .4);}
.intro-head .cy{color:var(--cyan);text-shadow:var(--glow-text-cyan);}
.scroll-cue{left:50%;bottom:34px;translate:-50%;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;}
.scroll-cue i{width:1px;height:30px;background:linear-gradient(var(--cyan),transparent);animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* claims (act 2) - three big words stacked on right */
.claims{right:clamp(20px,6vw,90px);top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:14px;align-items:flex-end;text-align:right;}
.claim{font-family:var(--font-display);text-transform:uppercase;line-height:.9;font-size:clamp(1.6rem,4.2vw,3.4rem);}
.claim small{display:block;font-family:var(--font-mono);font-size:.5em;letter-spacing:.16em;color:var(--muted);margin-top:6px;}
.claim.c1{color:var(--yellow);text-shadow:var(--glow-yellow);}
.claim.c2{color:var(--pink);text-shadow:var(--glow-text-pink);}
.claim.c3{color:var(--cyan);text-shadow:var(--glow-text-cyan);}

/* spec callouts (act 3) - pinned around the zoomed label */
.spec-pin{display:flex;flex-direction:column;gap:4px;max-width:230px;}
.spec-pin .v{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.3rem,3vw,2.2rem);line-height:.9;}
.spec-pin .l{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}
.spec-pin .d{font-size:.86rem;color:var(--soft);}
.spec-pin::before{content:"";position:absolute;width:46px;height:1px;background:var(--pin,var(--cyan));box-shadow:0 0 10px var(--pin,var(--cyan));}
.sp-1{left:8%;top:24%;--pin:var(--yellow);text-align:left;}
.sp-1::before{right:-54px;top:14px;}
.sp-2{right:8%;top:30%;--pin:var(--cyan);text-align:right;align-items:flex-end;}
.sp-2::before{left:-54px;top:14px;}
.sp-3{left:10%;bottom:22%;--pin:var(--pink);text-align:left;}
.sp-3::before{right:-54px;top:14px;}
.sp-4{right:10%;bottom:24%;--pin:var(--acid);text-align:right;align-items:flex-end;}
.sp-4::before{left:-54px;top:14px;}
.spec-pin .v.y{color:var(--yellow);text-shadow:var(--glow-yellow);}
.spec-pin .v.c{color:var(--cyan);text-shadow:var(--glow-text-cyan);}
.spec-pin .v.p{color:var(--pink);text-shadow:var(--glow-text-pink);}
.spec-pin .v.a{color:var(--acid);}
@media(max-width:760px){
  .spec-pin{max-width:150px;}
  .sp-1,.sp-3{left:4%;} .sp-2,.sp-4{right:4%;}
  .spec-pin::before{display:none;}
}

/* lineup cue + fleet (act 4) */
.fleet-head{left:50%;top:14%;translate:-50%;text-align:center;}
.fleet-head .k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.34em;color:var(--cyan);text-transform:uppercase;text-shadow:var(--glow-text-cyan);}
.fleet-head h2{font-family:var(--font-display);font-size:clamp(2rem,6vw,4.6rem);text-transform:uppercase;margin-top:10px;text-shadow:0 0 30px oklch(72% .27 348 / .4);}
.fleet{position:absolute;left:50%;top:54%;translate:-50% -50%;display:flex;gap:clamp(10px,2.4vw,34px);align-items:flex-end;justify-content:center;width:min(1240px,96vw);}
.fleet figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;}
.fleet img{height:clamp(170px,30vh,330px);width:auto;filter:drop-shadow(0 0 18px var(--fglow,oklch(78% .2 217 / .5)));}
.fleet figcaption{font-family:var(--font-display);text-transform:uppercase;font-size:.74rem;color:var(--ink);text-align:center;line-height:1;}
.fleet .fk{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;}

/* progress meter */
.meter{position:fixed;right:18px;top:50%;translate:0 -50%;z-index:80;width:2px;height:160px;background:oklch(78% .2 217 / .16);border-radius:2px;}
.meter i{display:block;width:100%;height:var(--meter,0%);background:linear-gradient(var(--pink),var(--cyan));box-shadow:0 0 14px var(--cyan);border-radius:2px;}
@media(max-width:760px){.meter{display:none;}}

/* ============================================================
   POST-CINEMA SECTIONS
   ============================================================ */
.section{position:relative;z-index:2;padding:clamp(80px,11vw,140px) 0;}
.eyebrow{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.24em;color:var(--cyan);text-transform:uppercase;text-shadow:var(--glow-text-cyan);}
.section h2{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,4.8rem);text-transform:uppercase;margin:14px 0 0;text-shadow:0 0 26px oklch(72% .27 348 / .35);}

/* flavor detail section */
.flavors{background:radial-gradient(circle at 80% 8%, oklch(78% .2 217 / .1), transparent 30rem), linear-gradient(180deg, oklch(7% .03 285), oklch(11% .045 292));}
.flavor-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:42px;}
.flavor-head p{margin:0;color:var(--muted);max-width:34rem;}
.flavor-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
@media(max-width:1040px){.flavor-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.flavor-grid{grid-template-columns:1fr;}}
.fcard{position:relative;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:20px;border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(180deg, oklch(16% .055 292), oklch(8% .035 292));box-shadow:var(--shadow-card);cursor:pointer;transition:transform .28s var(--ease-out),border-color .28s,box-shadow .28s;}
.fcard::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--accent);box-shadow:0 0 20px var(--accent);}
.fcard::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 26%, color-mix(in oklch, var(--accent), transparent 78%), transparent 60%);opacity:.7;transition:opacity .28s;}
.fcard:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:var(--shadow-card), 0 0 34px color-mix(in oklch, var(--accent), transparent 60%);}
.fcard:hover::after{opacity:1;}
.fcard img{position:absolute;left:50%;top:6%;height:240px;width:auto;max-width:none;translate:-50% 0;filter:drop-shadow(0 0 18px color-mix(in oklch, var(--accent), transparent 50%));transition:transform .4s var(--ease-out);z-index:1;}
.fcard:hover img{transform:scale(1.06) rotate(-3deg);}
.fcard .meta{position:relative;z-index:2;}
.fcard .num{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;margin-bottom:8px;}
.fcard h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.18rem;margin:0 0 8px;line-height:.95;}
.fcard p{margin:0 0 14px;color:var(--muted);font-size:.86rem;}
.fcard .tags{display:flex;flex-wrap:wrap;gap:6px;}
.fcard .tag{border:1px solid color-mix(in oklch, var(--accent), transparent 55%);color:var(--ink);background:oklch(100% 0 0 / .04);padding:5px 8px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-xs);}
.fcard-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin-top:14px;padding:0 12px;border:1px solid var(--accent);border-radius:var(--r-xs);color:var(--ink);background:oklch(100% 0 0 / .04);font-family:var(--font-display);font-size:.66rem;text-transform:uppercase;box-shadow:0 0 18px color-mix(in oklch, var(--accent), transparent 74%);transition:transform .18s var(--ease-out),box-shadow .18s,background .18s;}
.fcard-link:hover{transform:translateY(-2px);background:color-mix(in oklch,var(--accent),transparent 86%);box-shadow:0 0 26px color-mix(in oklch, var(--accent), transparent 58%);}
.buy-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:14px;}
.buy-row label{display:grid;gap:5px;min-width:0;}
.buy-row label span{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);}
.buy-row select{width:100%;min-height:38px;border:1px solid color-mix(in oklch, var(--accent), transparent 58%);border-radius:var(--r-xs);color:var(--ink);background:oklch(8% .032 292 / .88);padding:0 9px;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;outline:none;}
.buy-row select:focus{border-color:var(--accent);box-shadow:0 0 18px color-mix(in oklch, var(--accent), transparent 62%);}
.buy-row button{min-height:38px;border:1px solid var(--accent);border-radius:var(--r-xs);background:color-mix(in oklch,var(--accent),oklch(10% .035 292) 76%);color:var(--ink);padding:0 12px;font-family:var(--font-display);font-size:.68rem;text-transform:uppercase;cursor:pointer;box-shadow:0 0 18px color-mix(in oklch, var(--accent), transparent 70%);transition:transform .18s var(--ease-out),box-shadow .18s;}
.buy-row button:hover{transform:translateY(-2px);box-shadow:0 0 26px color-mix(in oklch, var(--accent), transparent 52%);}

/* sizes strip */
.sizes-section{background:linear-gradient(180deg, oklch(11% .045 292), oklch(8% .035 292));}
.sizes-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;}
@media(max-width:760px){.sizes-row{grid-template-columns:1fr;}}
.size-tile{border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(180deg, oklch(15% .05 292 / .7), oklch(9% .04 292 / .8));padding:26px;display:flex;align-items:center;gap:22px;transition:border-color .25s,transform .25s;}
.size-tile:hover{border-color:var(--cyan);transform:translateY(-4px);}
.size-tile img{height:150px;width:auto;filter:drop-shadow(0 0 16px oklch(72% .27 348 / .45));}
.size-tile .big{font-family:var(--font-display);font-size:2.4rem;line-height:.9;color:var(--yellow);text-shadow:var(--glow-yellow);}
.size-tile .sl{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-top:8px;}
.size-tile p{margin:8px 0 0;color:var(--soft);font-size:.84rem;}

/* product detail page */
.product-page main{position:relative;z-index:2;}
.products-hero{position:relative;overflow:hidden;padding:clamp(120px,16vw,190px) 0 clamp(60px,8vw,96px);background:radial-gradient(circle at 74% 22%, oklch(78% .2 217 / .16), transparent 28rem),radial-gradient(circle at 18% 18%, oklch(72% .27 348 / .18), transparent 30rem),linear-gradient(180deg, oklch(8% .03 285), oklch(11% .045 292));border-bottom:1px solid var(--line);}
.products-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(oklch(78% .2 217 / .1) 1px,transparent 1px),linear-gradient(90deg,oklch(72% .27 348 / .08) 1px,transparent 1px);background-size:58px 58px;-webkit-mask-image:radial-gradient(circle at 52% 38%,black,transparent 70%);mask-image:radial-gradient(circle at 52% 38%,black,transparent 70%);opacity:.62;}
.products-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:clamp(28px,6vw,72px);align-items:end;}
.products-hero h1{font-family:var(--font-display);font-size:clamp(3rem,8vw,7.5rem);line-height:.9;text-transform:uppercase;text-shadow:0 0 34px oklch(72% .27 348 / .42);max-width:10ch;margin:14px 0 22px;}
.products-hero p{max-width:42rem;color:var(--muted);font-size:1.08rem;margin:0;}
.format-board{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(180deg,oklch(15% .05 292 / .78),oklch(7% .03 285 / .78));box-shadow:var(--shadow-panel);}
.format-board span{min-height:48px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line-soft);border-radius:var(--r-xs);padding:0 14px;color:var(--ink);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:oklch(100% 0 0 / .035);}
.format-board span::after{content:"Ready";color:var(--yellow);font-size:.62rem;text-shadow:var(--glow-yellow);}
.product-list{display:grid;gap:18px;padding:clamp(54px,8vw,96px) 0 clamp(80px,10vw,130px);}
.product-panel{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) minmax(260px,320px);gap:24px;align-items:center;min-height:230px;padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(135deg,color-mix(in oklch,var(--accent),transparent 92%),transparent 36%),linear-gradient(180deg,oklch(15% .05 292 / .86),oklch(8% .035 292 / .9));box-shadow:var(--shadow-card);overflow:hidden;scroll-margin-top:92px;}
.product-panel::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--accent);box-shadow:0 0 24px var(--accent);}
.product-panel::after{content:"";position:absolute;right:-110px;top:-110px;width:260px;aspect-ratio:1;border:1px solid color-mix(in oklch,var(--accent),transparent 54%);transform:rotate(18deg);opacity:.48;}
.product-media,.product-copy,.product-buy{position:relative;z-index:1;}
.product-media{display:grid;place-items:center;min-height:180px;}
.product-media img{max-height:190px;width:auto;filter:drop-shadow(0 0 20px color-mix(in oklch,var(--accent),transparent 45%));}
.product-copy .num{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.product-copy h2{font-family:var(--font-display);font-size:clamp(1.7rem,4vw,3.4rem);line-height:.9;text-transform:uppercase;margin:0 0 12px;text-shadow:0 0 24px color-mix(in oklch,var(--accent),transparent 68%);}
.product-copy p{max-width:38rem;margin:0 0 14px;color:var(--muted);}
.product-copy .tags{display:flex;flex-wrap:wrap;gap:7px;}
.product-copy .tag{border:1px solid color-mix(in oklch,var(--accent),transparent 55%);border-radius:var(--r-xs);padding:5px 8px;background:oklch(100% 0 0 / .04);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;}
.product-buy{display:grid;gap:12px;padding:15px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:oklch(6% .028 285 / .48);}
.product-buy label{display:grid;gap:7px;}
.product-buy label span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--soft);text-transform:uppercase;}
.product-buy select{width:100%;min-height:44px;border:1px solid color-mix(in oklch,var(--accent),transparent 58%);border-radius:var(--r-xs);background:oklch(9% .035 292 / .92);color:var(--ink);padding:0 10px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;}
.product-buy select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 20px color-mix(in oklch,var(--accent),transparent 64%);}
.product-buy .btn{width:100%;font-size:.82rem;min-height:48px;background:var(--accent);box-shadow:0 0 24px color-mix(in oklch,var(--accent),transparent 48%);}
@media(max-width:940px){
  .products-hero-grid,.product-panel{grid-template-columns:1fr;}
  .product-panel{gap:16px;}
  .product-media{min-height:0;}
  .product-media img{max-height:220px;}
}

/* ---- FINAL CTA ---- */
.cta{position:relative;z-index:2;overflow:hidden;padding:clamp(90px,13vw,170px) 0;text-align:center;background:radial-gradient(circle at 50% 30%, oklch(60% .25 348 / .22), transparent 50%), linear-gradient(180deg, oklch(8% .035 292), oklch(5% .02 285));border-top:1px solid var(--line);}
.cta-grid-bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(oklch(78% .2 217 / .1) 1px,transparent 1px),linear-gradient(90deg, oklch(72% .27 348 / .1) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(circle at 50% 40%, black, transparent 70%);mask-image:radial-gradient(circle at 50% 40%, black, transparent 70%);opacity:.5;}
.cta .inner{position:relative;z-index:2;}
.cta h2{font-family:var(--font-display);font-size:clamp(2.6rem,9vw,7rem);text-transform:uppercase;line-height:.88;text-shadow:0 0 36px oklch(72% .27 348 / .5);}
.cta h2 .cy{color:var(--cyan);text-shadow:var(--glow-text-cyan);}
.cta p{margin:22px auto 36px;max-width:30rem;color:var(--muted);font-size:1.1rem;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn{border:0;min-height:56px;padding:0 30px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;color:var(--bg);background:var(--pink);font-family:var(--font-display);text-transform:uppercase;font-size:.96rem;border-radius:var(--r-sm);box-shadow:var(--glow-pink);transition:transform .18s var(--ease-out),box-shadow .18s;}
.btn:hover{transform:translateY(-3px);box-shadow:var(--glow-pink-lg);}
.btn:active{transform:translateY(0);}
.btn.outline{background:transparent;color:var(--ink);border:1px solid var(--cyan);box-shadow:0 0 24px oklch(78% .2 217 / .2);}
.btn.outline:hover{background:oklch(78% .2 217 / .12);}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--yellow);box-shadow:0 0 24px oklch(86% .18 91 / .18);}
.btn.ghost:hover{background:oklch(86% .18 91 / .1);}

footer{position:relative;z-index:2;padding:40px 0;border-top:1px solid var(--line);text-align:center;color:var(--soft);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;z-index:130;transform:translate(-50%,160px);padding:14px 20px;color:var(--bg);background:var(--yellow);font-family:var(--font-display);text-transform:uppercase;font-size:.86rem;box-shadow:var(--glow-yellow);border-radius:var(--r-xs);transition:transform .26s var(--ease-out);}
.toast.show{transform:translate(-50%,0);}

/* reveal on scroll for post-cinema */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}

/* ============================================================
   REDUCED MOTION / fallback
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .scroll-cue i{animation:none!important;}
  html:not(.motion-ready) .cinema{height:auto;}
  html:not(.motion-ready) .stage{position:relative;height:auto;min-height:auto;padding:120px 0;}
  html:not(.motion-ready) .hero-can{position:relative;transform:none!important;opacity:1!important;height:min(70vh,560px);}
  html:not(.motion-ready) .brand-huge{display:none;}
  html:not(.motion-ready) .layer{position:relative;inset:auto;opacity:1!important;}
  html:not(.motion-ready) .claims,
  html:not(.motion-ready) .fleet-head,
  html:not(.motion-ready) .fleet{position:relative;translate:none;inset:auto;right:auto;left:auto;top:auto;bottom:auto;margin:30px auto;}
  html:not(.motion-ready) .spec-pin{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:14px auto;}
  html:not(.motion-ready) .spec-pin::before{display:none;}
  html:not(.motion-ready) .scroll-cue,
  html:not(.motion-ready) .meter{display:none;}
  .reveal{opacity:1;transform:none;}
}