@font-face{font-family:"Rubik";font-style:italic;font-weight:900;font-display:swap;src:url(/fonts/rubik-latin-900-italic.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-style:italic;font-weight:800;font-display:swap;src:url(/fonts/rubik-latin-800-italic.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/rubik-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/rubik-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/rubik-latin-700-normal.woff2) format("woff2")}

:root{
  --orange:#f2560c;--orange-hot:#ff8a1f;--flare:#ffd27a;--orange-deep:#c63c05;--ember:#7a1f03;
  --ink:#1b0c05;--ink-2:#2a1a12;--ink-soft:#4a1f0a;--paper:#fff7ee;--paper-2:#fdebd9;--paper-dim:#f6c9a6;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:clamp(16px,4vw,56px);--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;scrollbar-color:var(--ink) var(--orange-deep);scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--orange);color:var(--ink);font:400 1.0625rem/1.55 "Rubik",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--ink);color:var(--flare)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--orange-deep)}
::-webkit-scrollbar-thumb{background:var(--ink);border-radius:8px;border:3px solid var(--orange-deep)}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.08em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.foot :focus-visible,.bar.scrolled :focus-visible,.ink :focus-visible{outline-color:var(--flare)}
img{display:block;max-width:100%}
svg{width:1.1em;height:1.1em;flex:none}
button{font:inherit;color:inherit}
.wrap{max-width:1240px;margin:0 auto}

/* ---------- shared type ---------- */
.h2{margin:0 0 .3em;font:900 italic clamp(2.4rem,5.2vw,4.25rem)/.95 "Rubik";letter-spacing:-.01em;text-wrap:balance}
.sub{margin:0 0 clamp(28px,4vw,48px);max-width:52ch;font-size:1.1rem}
.eyebrow{margin:0 0 14px;display:flex;align-items:center;gap:.7em;font:700 .78rem/1 "Rubik";letter-spacing:.16em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:2.5px;background:currentColor;border-radius:2px}
.k{margin:0 0 10px;font:700 .74rem/1 "Rubik";letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.head .sub{margin-bottom:0}
.live{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:#2fd36b;vertical-align:.12em;margin-left:.35em;animation:ping 2.4s var(--ease-out) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,211,107,.55)}70%,100%{box-shadow:0 0 0 .7em rgba(47,211,107,0)}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;white-space:nowrap;align-items:center;gap:.6em;min-height:54px;padding:0 1.35em;border-radius:14px;font:700 1.05rem/1 "Rubik";text-decoration:none;cursor:pointer;border:2.5px solid var(--ink);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .25s,color .25s,translate .5s var(--ease-out);translate:var(--mx,0) var(--my,0)}
.btn:active{transform:scale(.96)}
.btn-main{background:var(--ink);color:var(--paper);box-shadow:0 10px 22px -10px rgba(60,12,0,.8)}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(60,12,0,.85)}
.btn-ghost{background:rgba(255,247,238,.22);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,247,238,.5);transform:translateY(-2px)}
.btn[data-state="done"]{background:#2fd36b;color:var(--ink)}
.btn-sm{min-height:40px;padding:0 1em;border-radius:12px;font-size:.92rem;box-shadow:none}
.btn-lg{min-height:62px;padding:0 1.6em;font-size:1.12rem}
.arr{transition:transform .4s var(--ease-out)}
.btn:hover .arr{transform:translate(3px,-3px)}
.swap{position:relative;width:1.1em;height:1.1em;display:inline-grid}
.swap svg{grid-area:1/1;transition:transform .45s var(--ease-spring),opacity .25s}
.swap .i-b{opacity:0;transform:scale(.3) rotate(-45deg)}
[data-state="done"] .swap .i-a{opacity:0;transform:scale(.3) rotate(45deg)}
[data-state="done"] .swap .i-b{opacity:1;transform:none}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:16px;padding:16px var(--gutter);transition:background .4s,padding .4s,box-shadow .4s}
.bar.scrolled{background:rgba(27,12,5,.84);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);padding-block:10px;box-shadow:0 1px 0 rgba(255,247,238,.08);color:var(--paper)}
.mark{font:900 italic 1.35rem/1 "Rubik";color:var(--paper);-webkit-text-stroke:.14em var(--ink);paint-order:stroke fill;letter-spacing:.01em;text-decoration:none;transition:opacity .3s,transform .4s var(--ease-out)}
.mark:hover{transform:rotate(-3deg) scale(1.04)}
.nav{display:flex;gap:2px;margin-inline:auto}
.nav a{position:relative;padding:9px 14px;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none;transition:background .25s}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.bar-end{display:flex;gap:8px;align-items:center;margin-left:auto}
.nav + .bar-end{margin-left:0}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:2px solid currentColor;transition:transform .35s var(--ease-spring),background .25s,color .25s}
.icon-btn:hover{transform:translateY(-2px) rotate(-6deg);background:var(--ink);color:var(--paper)}
.bar.scrolled .icon-btn:hover{background:var(--paper);color:var(--ink)}
.icon-btn.pump{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.icon-btn.pump svg{width:1.45em;height:1.45em;transition:transform .5s var(--ease-spring)}
.icon-btn.pump:hover{background:var(--paper)}
.icon-btn.pump:hover svg{transform:rotate(90deg) scale(1.08)}
.bar.scrolled .btn-sm{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--orange);transform:scaleX(var(--p,0));transform-origin:left;opacity:0;transition:opacity .3s}
.bar.scrolled .progress{opacity:1}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,4vw,72px);padding:96px var(--gutter) 80px;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;background:
  radial-gradient(60% 70% at 26% 50%,var(--orange-hot) 0%,rgba(255,138,31,0) 70%),
  radial-gradient(120% 90% at 50% 120%,var(--orange-deep) 0%,rgba(198,60,5,0) 60%),var(--orange)}
#sparks{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.art{position:relative;display:grid;justify-items:center;gap:clamp(34px,4.5svh,56px)}
.rays{position:absolute;left:50%;top:44%;width:240vmax;height:240vmax;translate:-50% -50%;z-index:-2;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,232,170,0) 0deg 5deg,rgba(255,226,160,.22) 5.6deg 6.4deg,rgba(255,232,170,0) 7deg 12deg);
  -webkit-mask:radial-gradient(closest-side,#000 4%,rgba(0,0,0,.6) 14%,transparent 42%);mask:radial-gradient(closest-side,#000 4%,rgba(0,0,0,.6) 14%,transparent 42%);
  animation:spin 140s linear infinite}
.bloom{position:absolute;left:50%;top:44%;width:min(70vw,720px);aspect-ratio:1;translate:-50% -50%;z-index:-2;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,247,220,.95),rgba(255,210,122,.55) 30%,rgba(255,138,31,0) 75%)}
@keyframes spin{to{rotate:360deg}}

/* the slab */
.slab{--w:min(30vw,47svh*.598,360px);position:relative;width:var(--w);aspect-ratio:679/1136;perspective:1600px;border:0;padding:0;background:none;cursor:pointer;
  rotate:-7deg;transition:rotate .9s var(--ease-out);animation:float 7s ease-in-out infinite}
.slab:hover{rotate:-4deg}
@keyframes float{50%{translate:0 -10px}}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease-out)}
.tracking .tilt{transition:transform .12s linear}
.slab-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.25s var(--ease-out)}
.slab.is-revealed .slab-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4.5% / 2.7%}
.face.front{background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,240,226,.62) 38%,rgba(255,255,255,.78) 60%,rgba(255,226,196,.6));
  box-shadow:0 30px 60px -18px rgba(90,20,0,.55),0 8px 18px -6px rgba(90,20,0,.35),inset 0 0 0 1.5px rgba(255,255,255,.95),inset 0 0 0 5px rgba(255,214,170,.55);
  padding:6.5% 6.5% 7%;display:flex;flex-direction:column;gap:3.2%}
.label{border-radius:4px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(27,12,5,.25)}
.label-top{background:var(--ink);display:flex;justify-content:space-between;align-items:center;padding:6% 7%}
.label-top b{font:900 italic calc(var(--w)*.078)/1 "Rubik";color:var(--orange);letter-spacing:.01em}
.label-top span{font:700 calc(var(--w)*.034)/1.1 "Rubik";color:var(--paper);text-align:right;letter-spacing:.06em}
.label-bot{background:#fbfaf7;display:flex;justify-content:space-between;align-items:center;padding:3.4% 7%}
.barcode{height:calc(var(--w)*.04);width:42%;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 3px,var(--ink) 3px 5px,transparent 5px 6px,var(--ink) 6px 7px,transparent 7px 10px)}
.label-bot span{font:500 calc(var(--w)*.035)/1 var(--mono);color:var(--ink);letter-spacing:.08em}
.window{flex:1;border-radius:3.5% / 2.4%;background:linear-gradient(160deg,#2a221f,#151110);display:grid;place-items:center;
  box-shadow:inset 0 0 0 calc(var(--w)*.022) #1d1715,inset 0 0 0 calc(var(--w)*.026) rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.25)}
.window span{font:900 normal calc(var(--w)*.62)/1 "Rubik",system-ui;color:var(--paper);text-shadow:0 0 calc(var(--w)*.08) rgba(255,247,238,.25);translate:0 2%}
.face.back{transform:rotateY(180deg);overflow:hidden;background:#2c2c2e;box-shadow:0 30px 60px -18px rgba(90,20,0,.55),0 8px 18px -6px rgba(90,20,0,.35)}
.face.back img{width:100%;height:100%;object-fit:cover}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.9),rgba(255,255,255,0) 50%),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.6) 42%,transparent 48%)}
.foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:var(--fo,.08);transition:opacity .4s;
  background:repeating-linear-gradient(115deg,#ff4d6d 0,#ffd27a 8%,#7affc4 16%,#6ab8ff 24%,#d07aff 32%,#ff4d6d 40%);background-size:220% 220%;background-position:var(--gx,50%) var(--gy,50%)}
.tracking .foil{--fo:.32}

.caption{display:flex;align-items:center;gap:12px;max-width:min(420px,90vw);text-align:left}
.flip{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);display:grid;place-items:center;cursor:pointer;color:var(--ink);
  box-shadow:0 6px 14px -6px rgba(90,20,0,.6);transition:transform .5s var(--ease-out)}
.flip:hover{transform:rotate(180deg)}
.flip:disabled{opacity:.45;cursor:default;transform:none}
.caption p{margin:0;font-size:.98rem;line-height:1.35}
.caption strong{display:block;font:800 italic 1.15rem/1.2 "Rubik"}
.caption .muted{color:var(--ink-soft)}

.copy{position:relative;max-width:640px}
.logo{margin:0 0 .35em;font:900 italic clamp(3.75rem,9.6vw,8.75rem)/.88 "Rubik";letter-spacing:-.01em;position:relative;display:inline-grid;transform:rotate(-3deg);transform-origin:left center}
.logo span{grid-area:1/1;white-space:nowrap}
.logo .ex{color:var(--ink);-webkit-text-stroke:.17em var(--ink);paint-order:stroke fill;translate:.085em .12em;
  text-shadow:.02em .02em 0 var(--ink),.04em .04em 0 var(--ink),.06em .06em 0 var(--ink),.12em .16em .22em rgba(90,20,0,.5)}
.logo .side{color:#ff7a1f;-webkit-text-stroke:.1em var(--ink);paint-order:stroke fill;
  text-shadow:.013em .017em 0 #ef5a10,.025em .034em 0 #e44d0b,.038em .051em 0 #d84209,.05em .068em 0 #c93b07,.062em .085em 0 #b83405,.075em .102em 0 #a52d04,.088em .119em 0 #8f2604}
.logo .face-t{color:var(--paper);-webkit-text-stroke:.085em var(--ink);paint-order:stroke fill;filter:drop-shadow(0 0 .035em rgba(255,190,90,.95))}
.lede{margin:0 0 .4em;font:800 italic clamp(1.5rem,2.6vw,2.25rem)/1.12 "Rubik";letter-spacing:-.005em;text-wrap:balance}
.body{margin:0 0 1.6em;max-width:46ch;font-size:clamp(1.02rem,1.25vw,1.15rem)}
.pot{margin:0 0 1.75em;max-width:520px}
.pot-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.pot-row b{font:800 italic 1.15rem/1 "Rubik"}
.pot-row span{font-weight:700;font-variant-numeric:tabular-nums;font-size:1rem}
.track{position:relative;height:22px;border-radius:999px;background:rgba(27,12,5,.16);box-shadow:inset 0 0 0 2.5px var(--ink);overflow:hidden}
.fill{position:absolute;inset:0;width:0;border-radius:999px;overflow:hidden;background:linear-gradient(180deg,#fff,var(--paper) 55%,#ffe2c4);box-shadow:inset 0 0 0 2.5px var(--ink),inset 0 -4px 0 rgba(122,31,3,.18);transition:width 1.6s var(--ease-out)}
.fill::after{content:"";position:absolute;inset:3px 8px auto;height:4px;border-radius:4px;background:rgba(255,255,255,.95)}
.fill::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,180,90,.55) 50%,transparent 70%);background-size:250% 100%;animation:sheen 2.8s ease-in-out infinite}
@keyframes sheen{from{background-position:150% 0}to{background-position:-100% 0}}
.pot-note{margin:.6em 0 0;font-size:.92rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.flash{animation:flash .9s var(--ease-out)}
@keyframes flash{0%{color:var(--orange-hot);text-shadow:0 0 18px rgba(255,138,31,.7)}}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:2;margin:-34px -2% 0;width:104%;rotate:-1.6deg;background:var(--ink);color:var(--paper);overflow:hidden;padding:18px 0;box-shadow:0 14px 30px -14px rgba(27,12,5,.6)}
.ticker-track{display:flex;align-items:center;width:max-content;animation:marquee 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font:900 italic clamp(1.3rem,2.8vw,2.1rem)/1 "Rubik";padding-inline:.7em;white-space:nowrap;text-transform:uppercase}
.ticker .o{color:transparent;-webkit-text-stroke:1.5px var(--orange)}
.ticker i{width:14px;height:14px;background:var(--orange);rotate:45deg;border-radius:2px;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}