/* ==========================================================
   BUZZKILL — drinkbuzzkill.com
   Apple-grade product site. Dark → light. Show, don't tell.
   ========================================================== */
:root{
  --ink:#0a0a0b;
  --ink-2:#141416;
  --ink-3:#1d1d21;
  --paper:#ffffff;
  --paper-2:#f5f5f7;
  --paper-3:#ececf0;
  --muted:#86868b;
  --muted-d:#a1a1a6;
  --yellow:#ffe14a;
  --yellow-2:#f7d000;
  --orange:#ff8a1f;
  --orange-2:#ff6a00;
  --blue:#29a8ef;
  --blue-2:#5cc8ff;
  --red:#ff3b47;
  --green:#34d399;
  --grad-hot:linear-gradient(100deg,#ffe14a 0%,#ffb21f 45%,#ff6a00 100%);
  --grad-cool:linear-gradient(100deg,#5cc8ff 0%,#29a8ef 55%,#7b6bff 100%);
  --grad-brand:linear-gradient(100deg,#ffe14a 0%,#ff8a1f 50%,#29a8ef 100%);
  --radius:28px;
  --radius-s:18px;
  --shadow-l:0 40px 80px -30px rgba(10,10,11,.28),0 12px 30px -12px rgba(10,10,11,.18);
  --ease:cubic-bezier(.22,.9,.24,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --wrap:1200px;
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Inter",system-ui,-apple-system,"SF Pro Display",sans-serif;background:var(--ink);color:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--yellow);color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Type ---------- */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.dark .eyebrow{color:var(--yellow)}
.h-mega{font-size:clamp(48px,9vw,128px);font-weight:900;letter-spacing:-.055em;line-height:.92}
.h-xl{font-size:clamp(40px,6.4vw,88px);font-weight:850;letter-spacing:-.045em;line-height:.98}
.h-l{font-size:clamp(32px,4.6vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.h-m{font-size:clamp(24px,2.8vw,36px);font-weight:750;letter-spacing:-.03em;line-height:1.1}
.lead{font-size:clamp(18px,1.7vw,23px);line-height:1.45;color:var(--muted);font-weight:500;letter-spacing:-.01em}
.dark .lead{color:var(--muted-d)}
.lead strong{color:var(--ink);font-weight:700}
.dark .lead strong{color:var(--paper)}
.g-hot{background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-cool{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-brand{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.brandface{font-family:"Anton",Impact,sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase}
sup.dag{font-size:.45em;vertical-align:super;opacity:.6;font-weight:600}

/* ---------- Sections / theming ---------- */
section{position:relative}
.dark{background:var(--ink);color:var(--paper)}
.light{background:var(--paper);color:var(--ink)}
.light-2{background:var(--paper-2);color:var(--ink)}
.pad{padding:clamp(96px,14vw,180px) 0}
.pad-s{padding:clamp(64px,9vw,120px) 0}
.glow-hot::before,.glow-cool::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.glow-hot::before{background:radial-gradient(60% 50% at 80% 20%,rgba(255,170,30,.18),transparent 70%),radial-gradient(50% 50% at 10% 90%,rgba(255,225,74,.14),transparent 70%)}
.glow-cool::before{background:radial-gradient(55% 50% at 15% 15%,rgba(41,168,239,.14),transparent 70%),radial-gradient(50% 50% at 90% 85%,rgba(255,138,31,.12),transparent 70%)}
.dark.glow-hot::before{background:radial-gradient(60% 50% at 80% 20%,rgba(255,138,31,.22),transparent 70%),radial-gradient(50% 50% at 10% 90%,rgba(41,168,239,.14),transparent 70%)}
section>.wrap{position:relative;z-index:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;letter-spacing:-.01em;transition:transform .35s var(--spring),box-shadow .35s var(--ease),background .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:scale(.97)}
.btn-hot{background:var(--grad-hot);color:var(--ink);box-shadow:0 10px 30px -8px rgba(255,138,31,.65),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-hot:hover{box-shadow:0 16px 44px -8px rgba(255,138,31,.85),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.22)}
.btn-glass:hover{background:rgba(255,255,255,.2)}
.btn-line{border:1.5px solid rgba(10,10,11,.18);color:var(--ink)}
.dark .btn-line{border-color:rgba(255,255,255,.25);color:#fff}
.btn svg{width:18px;height:18px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--orange-2)}
.dark .link-arrow{color:var(--yellow)}
.link-arrow::after{content:"›";font-size:1.3em;line-height:1;transition:transform .3s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.center .btn-row{justify-content:center}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);transition:background .4s var(--ease),border-color .4s,color .4s}
.nav::before{content:"";position:absolute;inset:0;background:rgba(10,10,11,.55);backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8);border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transition:opacity .4s,background .4s}
.nav.scrolled::before{opacity:1}
.nav.on-light{color:var(--ink)}
.nav.on-light::before{background:rgba(255,255,255,.72);border-bottom-color:rgba(10,10,11,.08);opacity:1}
.nav-in{position:relative;height:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;height:100%}
.nav-logo img{height:42px;width:auto}
.nav-logo .lg-b{display:none}
.nav.on-light .nav-logo .lg-w{display:none}
.nav.on-light .nav-logo .lg-b{display:block}
.nav-links{display:flex;gap:30px;font-size:14px;font-weight:600;letter-spacing:-.005em}
.nav-links a{opacity:.78;transition:opacity .2s;position:relative}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--grad-hot)}
.nav-cta{height:38px;padding:0 18px;font-size:14px}
.nav-right{display:flex;align-items:center;gap:10px}
.burger{display:none;width:40px;height:40px;border-radius:50%;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:23px}
.nav.open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav.open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:99;background:rgba(10,10,11,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;flex-direction:column;justify-content:center;padding:0 32px;gap:6px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.mnav a{font-size:40px;font-weight:800;letter-spacing:-.04em;color:#fff;transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
.mnav .btn{margin-top:26px;align-self:flex-start;font-size:17px;transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
body.menu-open .mnav{opacity:1;pointer-events:auto}
body.menu-open .mnav a,body.menu-open .mnav .btn{transform:none;opacity:1}
body.menu-open .mnav a:nth-child(2){transition-delay:.04s}body.menu-open .mnav a:nth-child(3){transition-delay:.08s}body.menu-open .mnav a:nth-child(4){transition-delay:.12s}body.menu-open .mnav a:nth-child(5){transition-delay:.16s}body.menu-open .mnav .btn{transition-delay:.2s}
body.menu-open .nav{color:#fff}
body.menu-open .nav .lg-w{display:block!important}body.menu-open .nav .lg-b{display:none!important}
body.menu-open .nav::before{opacity:0}
@media(max-width:900px){.nav-links{display:none}.burger{display:block}.nav-cta{display:none}}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}}

/* ---------- Hero (video) ---------- */
.hero{height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end;background:#000}
.hero video.bg,.hero .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,rgba(0,0,0,.82) 88%,#0a0a0b 100%),radial-gradient(80% 60% at 20% 90%,rgba(0,0,0,.55),transparent 70%);pointer-events:none}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px clamp(56px,9vh,110px)}
.hero h1{max-width:12ch}
.hero .lead{max-width:34ch;margin:22px 0 34px;color:rgba(255,255,255,.78)}
.hero-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:13px;font-weight:650;margin-bottom:22px}
.hero-pill b{background:var(--grad-hot);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.play-ring{width:22px;height:22px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center}
.play-ring svg{width:10px;height:10px;margin-left:2px}
.scroll-cue{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);width:24px;height:38px;border:2px solid rgba(255,255,255,.4);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.sound-btn{position:absolute;z-index:3;right:24px;bottom:28px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.sound-btn svg{width:18px;height:18px}

/* Page hero (inner pages) */
.phero{min-height:86svh;display:flex;align-items:center;overflow:hidden;padding:calc(var(--nav-h) + 60px) 0 80px}
.phero video.bg,.phero .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.4),rgba(10,10,11,.15) 40%,#0a0a0b 100%);pointer-events:none}
.phero .wrap{position:relative;z-index:2}
.phero .lead{max-width:40ch;margin-top:24px}

/* ---------- Modal video ---------- */
.vmodal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.vmodal.open{opacity:1;pointer-events:auto}
.vmodal video{width:min(1200px,100%);max-height:84vh;border-radius:20px;box-shadow:0 40px 120px rgba(0,0,0,.6);transform:scale(.94);transition:transform .6s var(--spring)}
.vmodal.open video{transform:none}
.x-btn{position:absolute;top:20px;right:20px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;z-index:3}
.x-btn svg{width:18px;height:18px}

/* ---------- Statement (word reveal) ---------- */
.statement{padding:clamp(120px,18vw,240px) 0}
.statement p{font-size:clamp(34px,5.4vw,72px);font-weight:800;letter-spacing:-.045em;line-height:1.06;max-width:17ch}
.statement .w{opacity:.14;transition:opacity .25s linear}
.statement .w.on{opacity:1}
.statement .w.hot{background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Science sim ---------- */
.sim-card{position:relative;border-radius:36px;background:linear-gradient(180deg,#121214,#0b0b0d);border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:0 60px 120px -40px rgba(0,0,0,.6)}
.light .sim-card{box-shadow:var(--shadow-l)}
.sim-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px 0;flex-wrap:wrap;position:relative;z-index:2}
.seg{display:inline-flex;padding:5px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);position:relative}
.seg button{position:relative;z-index:1;height:40px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:700;color:rgba(255,255,255,.6);transition:color .3s}
.seg button.on{color:var(--ink)}
.seg .thumb{position:absolute;top:5px;bottom:5px;border-radius:999px;background:#fff;transition:left .5s var(--spring),width .5s var(--spring),background .4s}
.seg.bk .thumb{background:var(--grad-hot)}
.sim-meter{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:650;color:rgba(255,255,255,.7)}
.meter{width:160px;height:10px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.meter i{display:block;height:100%;width:30%;border-radius:99px;background:linear-gradient(90deg,#ffb21f,#ff3b47);transition:width .4s linear}
.sim-canvas{display:block;width:100%;height:auto}
.sim-cap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.06)}
.sim-cap div{background:#0d0d0f;padding:22px 24px;color:rgba(255,255,255,.62);font-size:14.5px;line-height:1.45}
.sim-cap b{display:block;color:#fff;font-size:16px;margin-bottom:4px;letter-spacing:-.01em}
.sim-cap .c1 b{color:#ffcf4a}.sim-cap .c2 b{color:#ff6b74}.sim-cap .c3 b{color:#5ee3a8}
.sim-note{font-size:12px;color:var(--muted);margin-top:16px}
@media(max-width:720px){.sim-cap{grid-template-columns:1fr}.meter{width:110px}.seg button{padding:0 14px;font-size:13px}}

/* ---------- Exploded view ---------- */
.explode{height:420vh;background:#000}
.explode-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;perspective:1400px}
.explode-stick::before{content:"";position:absolute;inset:0;background:radial-gradient(42% 46% at 50% 52%,rgba(255,138,31,calc(.10 + var(--glow,0)*.35)),transparent 70%),radial-gradient(30% 30% at 50% 50%,rgba(255,225,74,calc(var(--glow,0)*.25)),transparent 70%)}
.ex-stage{position:relative;width:min(1100px,100vw);height:100%;transform-style:preserve-3d}
.ex-can{position:absolute;left:50%;top:50%;width:clamp(150px,17vw,230px);transform:translate(-50%,-50%);z-index:5;filter:drop-shadow(0 40px 60px rgba(0,0,0,.7));transition:filter .3s}
.ex-can img{width:100%}
.ex-ring{position:absolute;left:50%;top:50%;width:clamp(150px,17vw,230px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) rotateX(72deg);border:1.5px solid rgba(255,190,60,.5);box-shadow:0 0 40px rgba(255,170,30,.4),inset 0 0 30px rgba(255,170,30,.3);opacity:0}
.ex-item{position:absolute;left:50%;top:50%;width:clamp(96px,12vw,170px);margin:calc(clamp(96px,12vw,170px)/-2) 0 0 calc(clamp(96px,12vw,170px)/-2);will-change:transform,opacity}
.ex-item img{width:100%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}
.ex-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);white-space:nowrap;text-align:center;font-size:13px;font-weight:700;letter-spacing:-.01em;color:#fff;opacity:var(--lab,0)}
.ex-label small{display:block;font-weight:500;color:rgba(255,255,255,.55);font-size:11.5px;letter-spacing:0}
.ex-copy{position:absolute;left:0;right:0;text-align:center;padding:0 24px;z-index:6;pointer-events:none}
.ex-copy.top{top:calc(var(--nav-h) + 4vh)}
.ex-copy.bot{bottom:7vh}
.ex-copy h2{transition:opacity .5s,transform .5s var(--ease)}
.ex-copy .lead{max-width:42ch;margin:12px auto 0}
.ex-step{position:absolute;left:0;right:0;opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ex-step.on{opacity:1;transform:none}
.ex-copy.bot .ex-step{bottom:0}
.ex-big{font-size:clamp(56px,10vw,140px);font-weight:900;letter-spacing:-.06em;line-height:.9}
@media(max-width:700px){.ex-label{font-size:11px}.ex-label small{display:none}}

/* ---------- Orbit ---------- */
.orbit-sec{overflow:hidden}
.orbit{position:relative;height:min(78vh,760px);min-height:560px;margin-top:40px}
.orbit-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(120px,14vw,190px);z-index:50;transition:transform .8s var(--spring),filter .6s}
.orbit-core img{width:100%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
.orbit-core::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(255,170,30,.35),transparent 62%);z-index:-1;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12);opacity:.7}}
.orb{position:absolute;left:50%;top:50%;width:clamp(78px,9vw,128px);aspect-ratio:1;margin:calc(clamp(78px,9vw,128px)/-2) 0 0 calc(clamp(78px,9vw,128px)/-2);border-radius:50%;cursor:pointer;will-change:transform}
.orb .bub{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(255,255,255,.02) 70%);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 -10px 30px rgba(255,170,30,.12),0 20px 40px rgba(0,0,0,.35);transition:border-color .3s,box-shadow .3s,transform .5s var(--spring)}
.orb img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;transition:transform .5s var(--spring)}
.orb:hover .bub,.orb.sel .bub{border-color:rgba(255,200,80,.8);box-shadow:inset 0 -10px 30px rgba(255,170,30,.3),0 0 0 6px rgba(255,170,30,.12),0 0 40px rgba(255,170,30,.45)}
.orb:hover img{transform:scale(1.1) rotate(-4deg)}
.orb .tag{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);font-size:12px;font-weight:700;white-space:nowrap;color:rgba(255,255,255,.8);pointer-events:none}
.orb-panel{position:absolute;z-index:200;right:0;top:50%;width:min(380px,92vw);transform:translate(30px,-50%);opacity:0;pointer-events:none;padding:28px;border-radius:28px;background:rgba(22,22,26,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);box-shadow:0 40px 80px rgba(0,0,0,.5);transition:opacity .5s var(--ease),transform .6s var(--spring)}
.orb-panel.open{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.orb-panel::before{content:"";position:absolute;left:28px;right:28px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--grad-hot)}
.orb-panel img{width:96px;height:96px;object-fit:contain;margin-bottom:10px}
.orb-panel h3{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.orb-panel .latin{font-size:13px;color:rgba(255,255,255,.5);font-style:italic;margin:4px 0 14px}
.orb-panel p{font-size:15px;color:rgba(255,255,255,.75);line-height:1.55}
.orb-panel .role{display:inline-block;margin-top:16px;padding:6px 12px;border-radius:999px;background:rgba(255,170,30,.14);color:#ffcf6a;font-size:12px;font-weight:700;letter-spacing:.02em}
.orb-panel .x-btn{top:14px;right:14px;width:34px;height:34px}
.orb-hint{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);font-size:13px;color:rgba(255,255,255,.5);font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap}
.orb-hint i{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(255,225,74,.6);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(255,225,74,0)}100%{box-shadow:0 0 0 0 rgba(255,225,74,0)}}
@media(max-width:820px){.orb-panel{left:50%;right:auto;top:auto;bottom:0;transform:translate(-50%,30px)}.orb-panel.open{transform:translate(-50%,0)}.orb .tag{display:none}}

/* Magic button */
.magic-wrap{display:flex;justify-content:center;margin-top:28px;position:relative;z-index:70}
.magic{position:relative;height:72px;padding:0 40px;border-radius:999px;font-size:19px;font-weight:800;letter-spacing:-.015em;color:var(--ink);background:var(--grad-hot);box-shadow:0 0 0 0 rgba(255,170,30,.6),0 20px 60px -10px rgba(255,138,31,.8);animation:magicPulse 2.4s var(--ease) infinite;overflow:hidden;isolation:isolate}
.magic::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from var(--ang,0deg),#ffe14a,#ff6a00,#29a8ef,#ffe14a);z-index:-2;animation:spin 3s linear infinite}
.magic::after{content:"";position:absolute;inset:3px;border-radius:inherit;background:var(--grad-hot);z-index:-1}
.magic span{display:inline-flex;align-items:center;gap:12px}
.magic svg{width:22px;height:22px}
.magic:hover{transform:scale(1.04)}
.magic:active{transform:scale(.96)}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
@keyframes magicPulse{0%{box-shadow:0 0 0 0 rgba(255,170,30,.55),0 20px 60px -10px rgba(255,138,31,.8)}70%{box-shadow:0 0 0 22px rgba(255,170,30,0),0 20px 60px -10px rgba(255,138,31,.8)}100%{box-shadow:0 0 0 0 rgba(255,170,30,0),0 20px 60px -10px rgba(255,138,31,.8)}}

/* Magic overlay */
.magic-ov{position:fixed;inset:0;z-index:300;background:#000;opacity:0;pointer-events:none;transition:opacity .5s}
.magic-ov.on{opacity:1;pointer-events:auto}
.magic-ov video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.magic-ov video.show{opacity:1}
.magic-ov .flash{position:absolute;inset:0;background:radial-gradient(circle,#fff 0%,#ffe9a6 30%,rgba(255,170,30,0) 70%);opacity:0;transform:scale(.2)}
.magic-ov.on .flash{animation:flash 1.1s var(--ease) forwards}
@keyframes flash{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(2.4)}}
.magic-final{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:18px;background:radial-gradient(60% 60% at 50% 55%,rgba(0,0,0,.45),rgba(0,0,0,.1));opacity:0;transform:translateY(30px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);pointer-events:none}
.magic-final.on{opacity:1;transform:none;pointer-events:auto}
.magic-final img.can{width:clamp(110px,12vw,160px);filter:drop-shadow(0 30px 50px rgba(0,0,0,.7));animation:floaty 5s ease-in-out infinite}
.magic-final h2{text-shadow:0 10px 40px rgba(0,0,0,.6)}
@keyframes floaty{50%{transform:translateY(-14px) rotate(2deg)}}

/* ---------- DHM origin ---------- */
.origin{min-height:100svh;display:flex;align-items:center;overflow:hidden}
.origin video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.origin::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,8,.92) 0%,rgba(6,6,8,.7) 40%,rgba(6,6,8,.1) 75%),linear-gradient(180deg,#0a0a0b 0%,transparent 18%,transparent 80%,#0a0a0b 100%)}
.origin .wrap{position:relative;z-index:2}
.origin .copy{max-width:640px}
.origin h2{font-size:clamp(40px,5.4vw,78px)}
.origin .lead{margin:22px 0 30px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:14px;font-weight:650}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.frost{position:absolute;right:6%;bottom:10%;z-index:2;width:min(300px,30vw);border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 80px rgba(0,0,0,.6)}
.frost video,.frost img{width:100%;aspect-ratio:4/5;object-fit:cover}
.frost figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;font-size:13px;font-weight:650;background:linear-gradient(transparent,rgba(0,0,0,.8))}
@media(max-width:820px){.frost{display:none}.origin::after{background:linear-gradient(180deg,rgba(6,6,8,.6),rgba(6,6,8,.85) 60%,#0a0a0b)}}

/* ---------- Cards / grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:980px){.grid-4{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr}}
@media(max-width:640px){.grid-4,.grid-2{grid-template-columns:1fr}}
.card{position:relative;border-radius:var(--radius);padding:32px;background:linear-gradient(160deg,#ffffff 0%,#f7f7f9 100%);border:1px solid rgba(10,10,11,.07);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 50px -30px rgba(10,10,11,.25);overflow:hidden;transition:transform .5s var(--spring),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 40px 70px -30px rgba(10,10,11,.3)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,var(--grad-hot))}
.card .ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--accent,var(--grad-hot));color:#fff;margin-bottom:22px;box-shadow:0 10px 24px -8px rgba(255,138,31,.6)}
.card .ico svg{width:26px;height:26px}
.card h3{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-bottom:10px}
.card p{color:#55555c;font-size:16px}
.card .step-n{position:absolute;top:24px;right:28px;font-size:56px;font-weight:900;letter-spacing:-.05em;line-height:1;color:rgba(10,10,11,.06)}
.dark .card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(255,255,255,.1);box-shadow:none}
.dark .card p{color:rgba(255,255,255,.65)}
.dark .card .step-n{color:rgba(255,255,255,.07)}
.a-orange{--accent:linear-gradient(135deg,#ffb21f,#ff6a00)}
.a-yellow{--accent:linear-gradient(135deg,#ffe14a,#ffb21f)}
.a-blue{--accent:linear-gradient(135deg,#5cc8ff,#1f8fe0)}
.a-green{--accent:linear-gradient(135deg,#5ee3a8,#10b981)}
.a-red{--accent:linear-gradient(135deg,#ff7a85,#ff3b47)}
.a-violet{--accent:linear-gradient(135deg,#a78bfa,#7b6bff)}

/* Timeline (night) */
.night{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;margin-top:64px}
.night::before{content:"";position:absolute;left:4%;right:4%;top:40px;height:3px;border-radius:3px;background:linear-gradient(90deg,#ffe14a,#ff8a1f,#ff6a00,#29a8ef);opacity:.85}
.night .n{position:relative;text-align:center;padding:0 8px}
.night .dot{width:80px;height:80px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid rgba(10,10,11,.08);box-shadow:0 20px 40px -18px rgba(10,10,11,.35);position:relative}
.night .dot svg{width:32px;height:32px}
.night .dot.hot{background:var(--grad-hot);border:0}
.night .t{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-2)}
.night h4{font-size:22px;font-weight:800;letter-spacing:-.025em;margin:6px 0 6px}
.night p{color:#5c5c63;font-size:15px;max-width:24ch;margin:0 auto}
@media(max-width:820px){.night{grid-template-columns:1fr 1fr;row-gap:48px}.night::before{display:none}}

/* ---------- Flavors ---------- */
.flavors{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px}
.flavor{position:relative;border-radius:40px;min-height:640px;padding:44px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;color:var(--ink);isolation:isolate;transition:transform .6s var(--spring)}
.flavor:hover{transform:translateY(-6px)}
.flavor.o{background:radial-gradient(70% 60% at 50% 30%,#ffe7a3 0%,#ffcf5a 35%,#ffab2e 70%,#ff8a1f 100%)}
.flavor.b{background:radial-gradient(70% 60% at 50% 30%,#f0fbff 0%,#bfe9ff 30%,#7fd0ff 65%,#29a8ef 100%)}
.flavor .can{position:absolute;left:50%;top:44px;width:min(230px,44%);transform:translateX(-50%) rotate(-4deg);filter:drop-shadow(0 40px 40px rgba(0,0,0,.28));transition:transform .8s var(--spring);z-index:1}
.flavor:hover .can{transform:translateX(-50%) rotate(3deg) translateY(-12px) scale(1.04)}
.flavor .fruit{position:absolute;width:150px;z-index:2;filter:drop-shadow(0 20px 20px rgba(0,0,0,.25));animation:floaty 6s ease-in-out infinite}
.flavor .fruit.f1{left:6%;top:30%}
.flavor .fruit.f2{right:4%;top:14%;width:120px;animation-delay:-3s}
.flavor .meta{position:relative;z-index:3;padding:26px;border-radius:26px;background:rgba(255,255,255,.55);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.6)}
.flavor h3{font-size:clamp(30px,3.4vw,44px);font-weight:900;letter-spacing:-.045em;line-height:1}
.flavor p{margin:8px 0 18px;color:rgba(10,10,11,.7);font-weight:500}
@media(max-width:820px){.flavors{grid-template-columns:1fr}.flavor{min-height:600px;padding:22px}.flavor .fruit{width:110px}}

/* ---------- Moments (lifestyle) ---------- */
.moments{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:20px;margin-top:56px;height:min(80vh,720px)}
.moment{position:relative;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-l)}
.moment img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.moment:hover img{transform:scale(1.05)}
.moment:first-child{grid-row:1/3}
.moment figcaption{position:absolute;left:20px;bottom:20px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-weight:750;font-size:14px;color:var(--ink)}
@media(max-width:820px){.moments{grid-template-columns:1fr;grid-template-rows:auto;height:auto}.moment:first-child{grid-row:auto}.moment{aspect-ratio:4/3}}

/* ---------- Guarantee band ---------- */
.guarantee{border-radius:40px;padding:clamp(40px,6vw,80px);background:linear-gradient(120deg,#0a0a0b 0%,#1a1206 60%,#2a1500 100%);color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;overflow:hidden;position:relative}
.guarantee::after{content:"";position:absolute;right:-10%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,138,31,.45),transparent 65%)}
.guarantee>*{position:relative;z-index:1}
.seal{width:min(260px,60vw);aspect-ratio:1;border-radius:50%;margin-left:auto;display:grid;place-items:center;text-align:center;background:var(--grad-hot);color:var(--ink);box-shadow:0 30px 80px -20px rgba(255,138,31,.9);animation:spinSlow 30s linear infinite;position:relative}
.seal-in{animation:spinSlow 30s linear infinite reverse}
.seal b{display:block;font-size:46px;font-weight:900;letter-spacing:-.05em;line-height:.9}
.seal small{font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.seal::before{content:"";position:absolute;inset:10px;border-radius:50%;border:2px dashed rgba(10,10,11,.25)}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@media(max-width:820px){.guarantee{grid-template-columns:1fr}.seal{margin:0 auto}}

/* ---------- Final CTA ---------- */
.final{min-height:92svh;display:flex;align-items:center;overflow:hidden;text-align:center}
.final video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.final::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.2),rgba(0,0,0,.75)),linear-gradient(180deg,#0a0a0b,transparent 20%,transparent 80%,#0a0a0b)}
.final .wrap{position:relative;z-index:2}
.final .lead{margin:20px auto 34px;max-width:36ch;color:rgba(255,255,255,.8)}

/* ---------- Facts panel ---------- */
.facts{background:#fff;color:#000;border:2px solid #000;border-radius:6px;padding:14px 16px;font-family:"Inter",Arial,sans-serif;max-width:440px;box-shadow:var(--shadow-l)}
.facts h4{font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1;border-bottom:1px solid #000;padding-bottom:4px}
.facts .ss{font-size:13px;padding:4px 0 6px;border-bottom:10px solid #000}
.facts table{width:100%;border-collapse:collapse;font-size:13px}
.facts td{padding:4px 0;border-bottom:1px solid #999;vertical-align:top}
.facts td:nth-child(2),.facts td:nth-child(3){text-align:right;white-space:nowrap;padding-left:8px}
.facts tr.hd td{font-weight:700;font-size:11px;border-bottom:5px solid #000}
.facts tr.ind td:first-child{padding-left:14px}
.facts tr.blend td{border-top:8px solid #000;font-weight:800}
.facts .bl{font-size:12.5px;line-height:1.45;padding:6px 0 8px;border-bottom:8px solid #000}
.facts .fn{font-size:11px;padding-top:6px;line-height:1.4}

/* ---------- Ingredient list ---------- */
.ing-card{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid rgba(10,10,11,.07);box-shadow:0 24px 60px -34px rgba(10,10,11,.35);transition:transform .5s var(--spring)}
.ing-card:hover{transform:translateY(-6px)}
.ing-card .pic{position:relative;height:220px;background:radial-gradient(70% 70% at 50% 55%,#2a2a30,#0b0b0d);display:grid;place-items:center;overflow:hidden}
.ing-card .pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent,var(--grad-hot))}
.ing-card .pic img{height:84%;width:auto;filter:drop-shadow(0 20px 24px rgba(0,0,0,.6));transition:transform .8s var(--spring)}
.ing-card:hover .pic img{transform:scale(1.08) rotate(-3deg)}
.ing-card .bd{padding:26px}
.ing-card .k{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-2)}
.ing-card h3{font-size:22px;font-weight:800;letter-spacing:-.03em;margin:4px 0 2px}
.ing-card .latin{font-size:13px;font-style:italic;color:var(--muted);margin-bottom:10px}
.ing-card p{font-size:15px;color:#55555c}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.split .media{border-radius:36px;overflow:hidden;box-shadow:var(--shadow-l)}
.split .media img,.split .media video{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- Rules list ---------- */
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
@media(max-width:980px){.rules{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rules{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:56px auto 0}
.faq details{border-bottom:1px solid rgba(10,10,11,.1);padding:4px 0}
.dark .faq details{border-color:rgba(255,255,255,.12)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:20px;font-weight:750;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:28px;font-weight:400;transition:transform .4s var(--spring);color:var(--orange-2)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:#5c5c63;font-size:17px;max-width:68ch}
.dark .faq details p{color:rgba(255,255,255,.65)}

/* ---------- Forms ---------- */
.form-card{border-radius:32px;padding:clamp(28px,4vw,44px);background:#fff;border:1px solid rgba(10,10,11,.07);box-shadow:var(--shadow-l);position:relative;overflow:hidden}
.form-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent,var(--grad-hot))}
.form-card h3{font-size:28px;font-weight:850;letter-spacing:-.035em;margin-bottom:6px}
.form-card>p{color:#5c5c63;margin-bottom:22px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:700;color:#3a3a40}
.field input,.field select,.field textarea{font:inherit;font-size:16px;padding:14px 16px;border-radius:14px;border:1.5px solid #e2e2e8;background:#fafafb;color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(255,138,31,.15)}
.field textarea{min-height:120px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}

/* ---------- Tabs (contact) ---------- */
.tabs{display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:var(--paper-3);flex-wrap:wrap;justify-content:center}
.tabs button{height:44px;padding:0 20px;border-radius:999px;font-weight:700;font-size:15px;color:#55555c;transition:background .3s,color .3s}
.tabs button.on{background:#fff;color:var(--ink);box-shadow:0 6px 16px -8px rgba(10,10,11,.3)}
.tabpane{display:none}
.tabpane.on{display:block;animation:fadeUp .6s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Footer ---------- */
.foot{background:#000;color:rgba(255,255,255,.7);padding:90px 0 40px;font-size:14px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-logo{width:170px;margin-bottom:22px}
.foot h5{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot ul{list-style:none;display:grid;gap:10px}
.foot a:hover{color:#fff}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:background .2s}
.socials a:hover{background:rgba(255,255,255,.18)}
.socials svg{width:18px;height:18px}
.disclaim{padding-top:30px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.45);display:grid;gap:8px}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}.foot-top>div:first-child{grid-column:1/-1}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;background:var(--yellow);color:var(--ink);padding:16px 0;white-space:nowrap}
.marquee .tr{display:inline-flex;gap:44px;animation:mq 34s linear infinite;font-weight:850;font-size:18px;letter-spacing:-.01em;text-transform:uppercase}
.marquee .tr span{display:inline-flex;align-items:center;gap:44px}
.marquee .tr span::after{content:"✦";color:var(--orange-2)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Big stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-radius:32px;overflow:hidden;background:rgba(10,10,11,.08);margin-top:64px}
.stats div{background:#fff;padding:36px 28px}
.stats b{display:block;font-size:clamp(40px,4.6vw,64px);font-weight:900;letter-spacing:-.05em;line-height:1}
.stats span{color:#5c5c63;font-weight:600;font-size:15px}
.dark .stats{background:rgba(255,255,255,.08)}
.dark .stats div{background:#101012}
.dark .stats span{color:rgba(255,255,255,.6)}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}}

/* section heads */
.shead{max-width:860px}
.shead.center{margin:0 auto}
.shead .lead{margin-top:20px}
.shead .eyebrow{display:block;margin-bottom:16px}

/* utility spacing */
.mt-s{margin-top:24px}.mt-m{margin-top:48px}.mt-l{margin-top:80px}

/* ---------- Inside your body (liver scene) ---------- */
.bodysec{background:radial-gradient(50% 40% at 85% 10%,rgba(92,200,255,.14),transparent 70%),radial-gradient(45% 40% at 5% 95%,rgba(255,178,31,.12),transparent 70%),#fff}
.bscene-wrap{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;align-items:stretch}
.bscene{position:relative;border-radius:36px;background:linear-gradient(160deg,#ffffff 0%,#f7f8fb 100%);border:1px solid rgba(10,10,11,.06);box-shadow:0 1px 0 #fff inset,0 50px 100px -50px rgba(10,10,11,.35),0 12px 30px -18px rgba(10,10,11,.15);overflow:hidden;aspect-ratio:10/8}
.b-svg,.b-canvas{position:absolute;inset:0;width:100%;height:100%}
.b-lab{font:700 30px "Inter",system-ui;fill:#14161c;letter-spacing:-.5px}
.b-glass-liq{transition:opacity .6s}
.b-liver{transform-origin:505px 420px;transform-box:view-box}
.b-ring{transform-origin:505px 425px;transform-box:view-box;opacity:.28;transition:opacity .8s,stroke .8s,filter .8s}
.bscene.support .b-ring{opacity:1;filter:drop-shadow(0 0 10px rgba(46,207,143,.7))}
.b-water{transition:y 1.6s cubic-bezier(.22,.9,.24,1)}
.b-legend{position:absolute;left:5%;top:5.5%;display:flex;gap:18px;flex-wrap:wrap;z-index:3;font-size:clamp(11px,1.15vw,14px);font-weight:700;color:#14161c}
.b-legend span{display:inline-flex;align-items:center;gap:7px}
.b-legend i{width:11px;height:11px;border-radius:50%}
.b-meter{position:absolute;right:5%;top:5.2%;z-index:3;display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(10,10,11,.07);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:12px;font-weight:700;color:#3a3a40}
.b-bar{width:clamp(60px,8vw,110px);height:7px;border-radius:9px;background:#eceef2;overflow:hidden}
.b-bar i{display:block;height:100%;width:5%;border-radius:9px;background:linear-gradient(90deg,#ffb21f,#ff4a3d);transition:width .3s linear,background .5s}
.b-pill{position:absolute;z-index:4;transform:translate(-50%,-50%) scale(.92);padding:9px 18px;border-radius:999px;font-size:clamp(11px,1.25vw,16px);font-weight:800;letter-spacing:-.01em;white-space:nowrap;color:#6b6f78;background:rgba(255,255,255,.82);border:1px solid rgba(10,10,11,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 24px -14px rgba(10,10,11,.35);transition:all .6s cubic-bezier(.34,1.56,.64,1)}
.b-pill.on{transform:translate(-50%,-50%) scale(1.06);color:#fff;border-color:transparent;box-shadow:0 14px 30px -10px var(--pc,rgba(34,181,115,.7))}
.p-dhm.on{background:#0a0a0b;color:#ffd84a;--pc:rgba(255,190,40,.6)}
.p-mt.on{background:linear-gradient(135deg,#4fd08d,#1f9d5c);--pc:rgba(31,157,92,.6)}
.p-ax.on{background:linear-gradient(135deg,#4e7dff,#2a4fd0);--pc:rgba(42,79,208,.6)}
.p-bv.on{background:linear-gradient(135deg,#ffc145,#ff8a1f);--pc:rgba(255,138,31,.6)}
.b-can{position:absolute;z-index:4;left:88%;top:26%;height:22%;transform:translate(-50%,-30%) scale(.6) rotate(10deg);opacity:0;filter:drop-shadow(0 18px 24px rgba(0,0,0,.25));transition:all .9s cubic-bezier(.34,1.56,.64,1)}
.bscene.support .b-can{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(8deg)}
.b-toast{display:none!important;position:absolute;z-index:5;left:50%;bottom:4.5%;transform:translate(-50%,12px);opacity:0;padding:9px 16px;border-radius:999px;background:#0a0a0b;color:#fff;font-size:13px;font-weight:700;white-space:nowrap;transition:all .5s cubic-bezier(.22,.9,.24,1)}
.b-toast.on{opacity:1;transform:translate(-50%,0)}
.bsteps{list-style:none;display:flex;flex-direction:column;gap:12px;justify-content:center}
.bsteps li{position:relative;border-radius:26px;background:rgba(255,255,255,.7);border:1px solid rgba(10,10,11,.07);box-shadow:0 18px 40px -30px rgba(10,10,11,.35);overflow:hidden;transition:background .5s,box-shadow .5s,transform .5s cubic-bezier(.34,1.56,.64,1);flex:none}
.bsteps li.on{background:#fff;box-shadow:0 30px 60px -30px rgba(10,10,11,.4);transform:scale(1.015)}
.bsteps button{display:flex;gap:18px;align-items:flex-start;width:100%;height:100%;text-align:left;padding:22px 24px}
.bsteps .n{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;font-weight:900;color:#fff;background:var(--c);opacity:.45;transition:opacity .4s;box-shadow:0 10px 20px -10px rgba(0,0,0,.3)}
.bsteps li.on .n{opacity:1}
.bsteps b{display:block;font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.025em;color:#14161c;line-height:1.2;padding-top:2px}
.bsteps li:not(.on) b{color:#8a8d95}
.bsteps em{display:block;font-style:normal;color:#55585f;font-size:15px;line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.22,.9,.24,1),opacity .5s,margin .5s}
.bsteps li.on em{max-height:200px;opacity:1;margin-top:6px}
.bsteps .prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--grad-hot)}
@media(max-width:980px){.bscene-wrap{grid-template-columns:1fr}.bsteps li{flex:none}}
@media(max-width:560px){.b-toast{display:none}.bscene{aspect-ratio:10/9}.b-legend{gap:10px;top:4%}.b-meter{display:none}.bsteps button{padding:16px 18px;gap:14px}.bsteps .n{width:42px;height:42px;font-size:19px;border-radius:13px}.b-lab{font-size:34px}}

/* ---------- Magic core (center of orbit) ---------- */
.orbit-core.magic{width:clamp(150px,15vw,200px);height:clamp(150px,15vw,200px);aspect-ratio:1;padding:0;border-radius:50%;background:none;box-shadow:none;animation:none;overflow:visible;isolation:isolate;cursor:pointer}
.orbit-core.magic::before{inset:-55%;background:radial-gradient(circle,rgba(255,170,30,.45),transparent 62%)}
.orbit-core.magic::after{display:none}
.orbit-core.magic .mc-ring{position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from var(--ang,0deg),#fff6c4,#ffb21f,#ff6a00,#ffd84a,#fff6c4);animation:spin 3s linear infinite;z-index:-1;filter:drop-shadow(0 0 18px rgba(255,170,30,.6))}
.orbit-core.magic .mc-in{position:absolute;inset:2px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 35% 28%,#fff3b0 0%,#ffd23f 32%,#ff9a1f 70%,#ff6a00 100%);color:#0a0a0b;box-shadow:inset 0 -14px 30px rgba(180,60,0,.35),inset 0 10px 24px rgba(255,255,255,.55),0 20px 60px -10px rgba(255,138,31,.9);animation:magicPulse 2.4s var(--ease) infinite;transition:transform .5s var(--spring)}
.orbit-core.magic .mc-in svg{width:26px;height:26px}
.orbit-core.magic b{font-size:clamp(14px,1.35vw,18px);font-weight:850;letter-spacing:-.02em;line-height:1.08;text-align:center}
.orbit-core.magic:hover .mc-in{transform:scale(1.06)}
.orbit-core.magic:active .mc-in{transform:scale(.94)}

/* lock the magic orb in place; only its inner face reacts */
.orbit-core.magic,.orbit-core.magic:hover,.orbit-core.magic:active,.orbit-core.magic:focus{transform:translate(-50%,-50%);transition:filter .6s}
.orbit-core.magic{z-index:120}
.orbit-core.magic .mc-in{animation:magicPulse 2.4s var(--ease) infinite,orbFloat 4.5s ease-in-out infinite}
.orbit-core.magic:hover .mc-in{transform:scale(1.045);animation:magicPulse 1.6s var(--ease) infinite}
.orbit-core.magic:active .mc-in{transform:scale(.97)}
.orbit-core.magic:focus-visible{outline:3px solid #fff;outline-offset:8px;border-radius:50%}
@keyframes orbFloat{50%{transform:translateY(-6px)}}
.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:119}

/* ===== v3: subtle Apple-style magic orb + polished glass ingredient spheres ===== */
.orbit-core.magic{width:clamp(112px,9.5vw,136px);height:clamp(112px,9.5vw,136px)}
.orbit-core.magic::before{inset:-70%;background:radial-gradient(circle,rgba(255,150,40,.22),transparent 60%);animation:breathe 5s ease-in-out infinite}
.orbit-core.magic .mc-ring{inset:-1.5px;background:conic-gradient(from var(--ang,0deg),#ffb21f,#ff6a00,#ff3d6e,#7b6bff,#29a8ef,#ffe14a,#ffb21f);animation:spin 6s linear infinite;filter:blur(.3px) drop-shadow(0 0 10px rgba(255,150,40,.55))}
.orbit-core.magic .mc-in{inset:1.5px;gap:6px;background:radial-gradient(120% 120% at 30% 20%,rgba(60,60,68,.95) 0%,rgba(22,22,26,.97) 55%,rgba(12,12,14,.98) 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -12px 24px rgba(255,138,31,.16),0 18px 40px -12px rgba(0,0,0,.7);animation:orbFloat 5s ease-in-out infinite}
.orbit-core.magic .mc-in svg{width:18px;height:18px;color:#ffc24a;filter:drop-shadow(0 0 6px rgba(255,180,60,.8))}
.orbit-core.magic b{font-size:clamp(11.5px,.95vw,13px);font-weight:650;letter-spacing:-.005em;line-height:1.2;color:rgba(255,255,255,.92)}
.orbit-core.magic:hover .mc-in{transform:scale(1.04);animation:orbFloat 5s ease-in-out infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -14px 28px rgba(255,138,31,.3),0 0 40px -6px rgba(255,150,40,.55)}
.orbit-core.magic:hover .mc-ring{animation-duration:2.5s;filter:drop-shadow(0 0 16px rgba(255,150,40,.8))}

/* glass spheres */
.orb{width:clamp(72px,7.4vw,108px);margin:calc(clamp(72px,7.4vw,108px)/-2) 0 0 calc(clamp(72px,7.4vw,108px)/-2)}
.orb .bub{background:
  radial-gradient(65% 45% at 32% 18%,rgba(255,255,255,.26),rgba(255,255,255,0) 70%),
  radial-gradient(80% 60% at 50% 110%,rgba(255,138,31,.32),rgba(255,138,31,0) 70%),
  radial-gradient(circle at 50% 50%,#1d1d22 0%,#121215 70%,#0c0c0e 100%);
  border:1px solid rgba(255,176,80,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -8px 18px rgba(255,138,31,.18),0 0 22px -4px rgba(255,138,31,.35),0 22px 40px -14px rgba(0,0,0,.75);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.orb .bub::after{content:"";position:absolute;inset:6% 18% auto 18%;height:22%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
.orb img{inset:12%;width:76%;height:76%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,150,40,.18))}
.orb:hover .bub,.orb.sel .bub{border-color:rgba(255,190,90,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -10px 22px rgba(255,138,31,.32),0 0 0 4px rgba(255,150,40,.12),0 0 34px -2px rgba(255,138,31,.6),0 22px 40px -14px rgba(0,0,0,.75)}
.orb .tag{font-size:11.5px;font-weight:650;letter-spacing:.01em;color:rgba(255,255,255,.72);top:calc(100% + 10px);text-shadow:0 2px 10px rgba(0,0,0,.8)}
/* keep ring + face floating together */
.orbit-core.magic .mc-ring{animation:spin 6s linear infinite,orbFloat 5s ease-in-out infinite}
.orbit-core.magic:hover .mc-ring{animation:spin 2.5s linear infinite,orbFloat 5s ease-in-out infinite}
.orbit-core.magic:hover .mc-in{transform:none}
.orbit-core.magic:active .mc-in,.orbit-core.magic:active .mc-ring{animation-play-state:paused}

/* ===== Four stages of the night (round video loops) ===== */
.night::before{top:78px}
.night .stage{position:relative;width:156px;height:156px;margin:0 auto 24px;border-radius:50%;padding:4px;background:var(--ring);box-shadow:0 24px 50px -22px rgba(10,10,11,.55);transition:transform .6s var(--spring)}
.night .stage video{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#111}
.night .stage::after{content:"";position:absolute;inset:4px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 -20px 30px -10px rgba(0,0,0,.25);pointer-events:none}
.night .n:hover .stage{transform:translateY(-6px) scale(1.04)}
.night .s1{--ring:linear-gradient(135deg,#7cc4ff,#3b9cff)}
.night .s2{--ring:linear-gradient(135deg,#ffe14a,#ff8a1f)}
.night .s3{--ring:linear-gradient(135deg,#ff9a6a,#ff3b47)}
.night .s4{--ring:linear-gradient(135deg,#7ee6b0,#22b573)}
@media(max-width:820px){.night .stage{width:128px;height:128px}}