:root{
  --black:#0a0708; --coal:#141013; --panel:#1b1519;
  --orange:#ff5c1f; --magenta:#ff2e88; --lemon:#ffd23d; --volt:#b8ff2e;
  --text:#fdf6f0; --text-2:#b3a3a8; --text-3:#7a6b70; --line:#2c2328;
  --display:'Russo One',sans-serif; --sans:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--sans);background:var(--black);color:var(--text);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--orange);color:#160800}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:1.05;letter-spacing:.01em;font-weight:400}

/* particles canvas overlays everything */
#boom{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,7,8,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:var(--display);font-size:21px;display:flex;align-items:center;gap:10px}
.logo .z{
  width:30px;height:30px;background:linear-gradient(135deg,var(--orange),var(--magenta));
  clip-path:polygon(58% 0,100% 0,52% 48%,78% 48%,22% 100%,40% 56%,14% 56%);
}
.logo em{font-style:normal;background:linear-gradient(90deg,var(--orange),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);transition:color .2s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--orange)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;
  padding:15px 32px;font-family:var(--display);font-size:14px;text-transform:uppercase;
  letter-spacing:.06em;border-radius:14px;transition:transform .15s,box-shadow .2s,background .2s;
  position:relative;
}
.btn:focus-visible{outline:3px solid var(--lemon);outline-offset:3px}
.btn-boom{background:linear-gradient(100deg,var(--orange),var(--magenta));color:#fff;box-shadow:0 10px 30px rgba(255,92,31,.4)}
.btn-boom:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 44px rgba(255,46,136,.5)}
.btn-boom:active{transform:scale(.96)}
.btn-ghost{border:2px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn-lg{padding:18px 42px;font-size:16px}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;overflow:hidden}
.hero-burst{
  position:absolute;inset:-10%;background:url('../img/burst.webp') center/cover no-repeat;
  opacity:.5;will-change:transform;
}
.hero-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 68% 45%,transparent 20%,rgba(10,7,8,.9) 75%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;width:100%;padding-top:70px}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;border:2px solid var(--volt);color:var(--volt);
  font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 18px;border-radius:100px;margin-bottom:26px;
}
.hero-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 12px var(--volt)}
.glitch{
  font-size:clamp(52px,9.6vw,124px);position:relative;display:inline-block;
}
.glitch .base{position:relative;z-index:3}
.glitch .layer{position:absolute;inset:0;z-index:2;opacity:.85;pointer-events:none}
.glitch .l1{color:var(--magenta);transform:translate(3px,-2px)}
.glitch .l2{color:var(--orange);transform:translate(-3px,2px)}
.hero-sub{font-size:clamp(16px,1.9vw,20px);color:var(--text-2);max-width:440px;margin:24px 0 40px;font-weight:500}
.hero-sub b{color:var(--lemon)}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hint{margin-top:26px;font-size:13px;color:var(--text-3);display:flex;align-items:center;gap:9px}
.hint svg{width:16px;height:16px;stroke:var(--text-3)}
.can-wrap{position:relative;display:flex;justify-content:center;perspective:1000px}
.can-glow{
  position:absolute;width:76%;aspect-ratio:1;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,92,31,.35),rgba(255,46,136,.12) 55%,transparent 70%);
  filter:blur(26px);
}
#can{
  position:relative;width:min(340px,74%);border-radius:26px;will-change:transform;
  box-shadow:0 50px 110px rgba(0,0,0,.7),0 0 70px rgba(255,46,136,.2);
}
.spark{position:absolute;font-family:var(--display);pointer-events:none;will-change:transform;user-select:none}

/* marquee */
.marq{background:linear-gradient(90deg,var(--orange),var(--magenta));padding:14px 0;overflow:hidden;transform:rotate(-1.2deg) scale(1.02);margin:-12px 0 0}
.marq-track{display:flex;gap:48px;white-space:nowrap;width:max-content}
.marq span{font-family:var(--display);font-size:15px;text-transform:uppercase;color:#160800;display:flex;align-items:center;gap:48px}
.marq span::after{content:'⚡'}

/* sections */
.section{padding:110px 0;position:relative}
.kicker{
  font-family:var(--display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--magenta);margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.kicker::before{content:'';width:34px;height:3px;background:linear-gradient(90deg,var(--orange),var(--magenta))}
h2{font-size:clamp(32px,5.4vw,64px);margin-bottom:18px}
h2 .grad{background:linear-gradient(90deg,var(--orange),var(--magenta),var(--lemon));-webkit-background-clip:text;background-clip:text;color:transparent}

/* flavors */
.flavors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
.flavor{
  position:relative;border-radius:24px;padding:40px 32px;min-height:360px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line);
  background:var(--panel);transition:transform .3s,border-color .3s;will-change:transform;cursor:pointer;
}
.flavor:hover{transform:translateY(-8px) rotate(-.6deg)}
.flavor .f-bg{position:absolute;inset:0;opacity:.85;transition:transform .5s}
.flavor:hover .f-bg{transform:scale(1.06)}
.flavor .f-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(10,7,8,.9) 80%)}
.flavor>div:not(.f-bg):not(.f-veil){position:relative;z-index:2}
.flavor .f-num{font-family:var(--display);font-size:13px;color:rgba(255,255,255,.65);letter-spacing:.2em}
.flavor h3{font-size:clamp(24px,2.4vw,32px);margin:10px 0 8px}
.flavor p{font-size:14px;color:#e8d9dd;opacity:.85}
.flavor .f-cap{
  margin-top:18px;display:inline-flex;align-self:flex-start;font-family:var(--display);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:100px;
  background:rgba(10,7,8,.6);border:1px solid rgba(255,255,255,.25);
}

/* formula */
.formula{background:var(--coal);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.f-card{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px 26px;
  transition:border-color .3s,transform .3s;
}
.f-card:hover{border-color:var(--orange);transform:translateY(-5px)}
.f-card .f-val{
  font-family:var(--display);font-size:clamp(28px,3.2vw,42px);
  background:linear-gradient(90deg,var(--orange),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.f-card .f-name{font-weight:700;font-size:15.5px;margin:10px 0 6px}
.f-card p{font-size:13.5px;color:var(--text-2)}

/* charge meter */
.charge{padding:130px 0;text-align:center}
.charge-bar{
  height:26px;border-radius:100px;background:var(--panel);border:1px solid var(--line);
  max-width:760px;margin:48px auto 18px;overflow:hidden;position:relative;
}
.charge-fill{
  height:100%;width:0%;border-radius:100px;
  background:linear-gradient(90deg,var(--volt),var(--lemon),var(--orange),var(--magenta));
  box-shadow:0 0 30px rgba(255,92,31,.5);
}
.charge-pct{font-family:var(--display);font-size:clamp(40px,6vw,72px);color:var(--volt);font-variant-numeric:tabular-nums}
.charge-note{color:var(--text-2);font-size:15px;max-width:460px;margin:14px auto 0}

/* cta */
.cta{padding:40px 0 140px;text-align:center}
.cta-card{
  position:relative;border-radius:32px;overflow:hidden;padding:clamp(48px,7vw,90px) 32px;
  background:linear-gradient(120deg,rgba(255,92,31,.16),rgba(255,46,136,.14));
  border:1px solid rgba(255,92,31,.35);
}
.cta h2{margin-bottom:14px}
.cta p{color:var(--text-2);max-width:440px;margin:0 auto 42px}

/* footer */
footer{border-top:1px solid var(--line);padding:50px 0 36px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}
.foot-links a:hover{color:var(--orange)}
.foot-bottom{margin-top:32px;font-size:12.5px;color:var(--text-3)}

@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:48px;padding-top:120px}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hint{justify-content:center}
  .flavors{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .form-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;position:absolute;top:70px;left:0;right:0;
    background:rgba(10,7,8,.97);padding:26px 24px;gap:20px;border-bottom:1px solid var(--line);
  }
  .menu-btn{display:flex}
  .nav .btn-boom{display:none}
}
@media (max-width:600px){
  .form-grid{grid-template-columns:1fr}
  .section{padding:80px 0}
}

/* ---- cross-document View Transitions (progressive enhancement) ---- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .hero{view-transition-name:page-hero}
  ::view-transition-old(page-hero),::view-transition-new(page-hero){
    animation-duration:.45s;animation-timing-function:cubic-bezier(.4,0,.2,1);
  }
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
}