/* Razz Flavour Co. — black & white foundation with label colours: pink, purple, lime and fruit accents */
:root {
  --bg: #0e0b14;
  --bg-2: #15111e;
  --surface: #1b1626;
  --surface-2: #241d33;
  --line: rgba(255, 255, 255, .1);
  --text: #f7f4fb;
  --muted: #b5adc4;
  --pink: #ff2e88;
  --purple: #7b5cff;
  --lime: #a6ec2f;
  --yellow: #ffc62e;
  --orange: #ff8a1e;
  --grad: linear-gradient(100deg, var(--pink), var(--orange) 45%, var(--yellow));
  --grad-fusion: linear-gradient(100deg, #e3263f, var(--purple));
  --radius: 22px;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p a, .fine a { color: var(--lime); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; margin: 0; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

.container { width: min(1180px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--lime); color: #000; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

.eyebrow {
  font: 600 .8rem/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--lime);
  margin: 0 0 16px;
}
.h1 { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 900; }
.h2 { font-size: clamp(1.8rem, 4.6vw, 3.2rem); font-weight: 800; margin-bottom: 18px; }
.h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 14px; }
.muted { color: var(--muted); }
.fine { font-size: .9rem; color: var(--muted); margin-top: 28px; }
.section { padding: clamp(64px, 10vw, 120px) 0; position: relative; }
.section-lead { color: var(--muted); max-width: 56ch; font-size: 1.1rem; }
.section-head { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: end; justify-content: space-between; margin-bottom: 40px; }
.section-head .h2 { margin: 0; }
.section-head .section-lead { margin: 0; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: shimmer 6s ease-in-out infinite alternate;
}
@keyframes shimmer { to { background-position: 100% 0; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--text);
  --btn-fg: #0e0b14;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 1rem/1 var(--body);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--spring), box-shadow .35s var(--ease);
  isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 34px -10px var(--btn-bg); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--pink { --btn-bg: var(--pink); --btn-fg: #fff; }
.btn--purple { --btn-bg: var(--purple); --btn-fg: #fff; }
.btn--lime { --btn-bg: var(--lime); --btn-fg: #0e0b14; }
.btn--accent { --btn-bg: var(--a); --btn-fg: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.btn--small { padding: 11px 18px; font-size: .92rem; }
.link-arrow { font-weight: 600; text-decoration: none; color: var(--text); display: inline-flex; gap: 6px; align-items: center; }
.link-arrow span { transition: transform .3s var(--spring); }
.link-arrow:hover span { transform: translateX(4px); }
.link-arrow:hover span:first-child:not(:last-child) { transform: translateX(-4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: background .3s, backdrop-filter .3s, box-shadow .3s;
}
.site-header.is-scrolled {
  background: rgba(14, 11, 20, .78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; transition: height .3s; }
.is-scrolled .header-inner { height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 8px 20px -6px rgba(255,46,136,.5); transition: transform .6s var(--spring); }
.brand:hover img { transform: rotate(-12deg) scale(1.08); }
.brand__text { font: 900 1.15rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.brand__text small { display: block; font: 600 .7rem/1.4 var(--body); letter-spacing: .2em; color: var(--muted); }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.site-nav ul a {
  display: block; padding: 8px 14px; border-radius: 999px;
  text-decoration: none; font-weight: 600; color: var(--muted);
  transition: color .2s, background .2s;
}
.site-nav ul a:hover { color: var(--text); background: rgba(255,255,255,.06); }
.site-nav ul a[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.1); }
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-toggle {
    display: grid; place-content: center; gap: 7px;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.08); border: 1px solid var(--line); cursor: pointer; z-index: 2;
  }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .35s var(--spring); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .site-nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: 32px;
    background: rgba(14, 11, 20, .97);
    backdrop-filter: blur(10px);
    clip-path: circle(0 at calc(100% - 39px) 38px);
    transition: clip-path .6s var(--ease);
    visibility: hidden;
  }
  .site-nav.is-open { clip-path: circle(150% at calc(100% - 39px) 38px); visibility: visible; }
  .site-nav ul { flex-direction: column; align-items: center; gap: 4px; }
  .site-nav ul a { font: 800 1.6rem/1.2 var(--display); padding: 10px 18px; color: var(--text); }
  .site-nav.is-open li { animation: rise .5s var(--ease) both; }
  .site-nav.is-open li:nth-child(2) { animation-delay: .05s; }
  .site-nav.is-open li:nth-child(3) { animation-delay: .1s; }
  .site-nav.is-open li:nth-child(4) { animation-delay: .15s; }
  .site-nav.is-open li:nth-child(5) { animation-delay: .2s; }
  body.nav-open { overflow: hidden; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Animated background blobs + bubbles ---------- */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blobs span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
  animation: drift 18s ease-in-out infinite alternate;
}
.blobs span:nth-child(1) { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: var(--pink); left: -12%; top: -18%; }
.blobs span:nth-child(2) { width: 40vw; height: 40vw; max-width: 540px; max-height: 540px; background: var(--purple); right: -10%; top: 10%; animation-duration: 22s; animation-delay: -6s; }
.blobs span:nth-child(3) { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; background: var(--orange); left: 35%; bottom: -25%; opacity: .35; animation-duration: 26s; animation-delay: -12s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 4vh) scale(1.15); }
  100% { transform: translate(-4vw, 8vh) scale(.92); }
}
.bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bubbles i {
  position: absolute; bottom: -40px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06);
  animation: bubble 12s linear infinite;
}
.bubbles i:nth-child(odd) { border-color: rgba(166,236,47,.55); }
.bubbles i:nth-child(3n) { border-color: rgba(255,46,136,.55); width: 18px; height: 18px; }
.bubbles i:nth-child(1) { left: 4%; animation-delay: 0s; }
.bubbles i:nth-child(2) { left: 12%; animation-delay: -3s; animation-duration: 15s; }
.bubbles i:nth-child(3) { left: 21%; animation-delay: -7s; }
.bubbles i:nth-child(4) { left: 29%; animation-delay: -1s; animation-duration: 17s; }
.bubbles i:nth-child(5) { left: 38%; animation-delay: -9s; }
.bubbles i:nth-child(6) { left: 46%; animation-delay: -4s; animation-duration: 14s; }
.bubbles i:nth-child(7) { left: 55%; animation-delay: -11s; }
.bubbles i:nth-child(8) { left: 62%; animation-delay: -2s; animation-duration: 16s; }
.bubbles i:nth-child(9) { left: 70%; animation-delay: -6s; }
.bubbles i:nth-child(10) { left: 77%; animation-delay: -8s; animation-duration: 13s; }
.bubbles i:nth-child(11) { left: 84%; animation-delay: -5s; }
.bubbles i:nth-child(12) { left: 90%; animation-delay: -10s; animation-duration: 18s; }
.bubbles i:nth-child(13) { left: 95%; animation-delay: -12s; }
.bubbles i:nth-child(14) { left: 50%; animation-delay: -14s; animation-duration: 20s; }
@keyframes bubble {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(20px, -50vh) scale(1); }
  100% { transform: translate(-10px, -105vh) scale(1.1); opacity: 0; }
}

/* ---------- Entrance + scroll reveal ---------- */
.hero-in { display: inline-block; animation: heroIn .9s var(--ease) both; animation-delay: calc(var(--d, 0) * .1s + .1s); }
p.hero-in, div.hero-in, nav.hero-in, h1.hero-in, img.hero-in, a.hero-in.mail-big, button.hero-in { display: block; }
.hero__ctas.hero-in, .crumbs.hero-in { display: flex; }
@keyframes heroIn { from { opacity: 0; transform: translateY(40px); filter: blur(6px); } }
.js [data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * .1s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; margin-top: -76px; padding: 140px 0 80px; min-height: min(100svh, 920px); display: flex; align-items: center; }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero__title { font-size: clamp(2.5rem, 6.4vw, 5.4rem); font-weight: 900; margin-bottom: 26px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__lead { font-size: 1.15rem; color: #ddd6e8; max-width: 52ch; margin-bottom: 32px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stage { position: relative; height: clamp(420px, 52vw, 620px); }
.hero__ring {
  position: absolute; left: 50%; top: 52%; width: 82%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--pink), var(--orange), var(--yellow), var(--lime), var(--purple), var(--pink));
  mask: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
  animation: spin 24s linear infinite; opacity: .8;
}
@keyframes spin { to { rotate: 360deg; } }
.hb { position: absolute; bottom: 6%; will-change: transform; transition: transform .2s linear; }
.hb img { height: 100%; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); animation: float 6s ease-in-out infinite; }
.hb--1 { height: 46%; left: 0; bottom: 16%; rotate: -16deg; z-index: 0; }
.hb--2 { height: 64%; left: 13%; bottom: 8%; rotate: -8deg; z-index: 1; }
.hb--3 { height: 86%; left: 50%; translate: -50% 0; bottom: 2%; z-index: 2; }
.hb--4 { height: 64%; right: 13%; bottom: 8%; rotate: 8deg; z-index: 1; }
.hb--5 { height: 46%; right: 0; bottom: 16%; rotate: 16deg; z-index: 0; }
.hb--1 img { animation-delay: -1s; animation-duration: 7s; }
.hb--2 img { animation-delay: -2.5s; }
.hb--4 img { animation-delay: -4s; animation-duration: 6.5s; }
.hb--5 img { animation-delay: -3s; animation-duration: 7.5s; }
.hb { animation: popIn 1s var(--spring) both; }
.hb--1 { animation-delay: .55s; } .hb--2 { animation-delay: .4s; } .hb--3 { animation-delay: .25s; } .hb--4 { animation-delay: .4s; } .hb--5 { animation-delay: .55s; }
@keyframes popIn { from { opacity: 0; transform: translateY(80px) scale(.7); } }
@keyframes float { 50% { transform: translateY(-16px); } }

@media (max-width: 880px) {
  .hero { padding: 110px 0 40px; min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__stage { height: 380px; order: -1; margin-bottom: -10px; }
}
@media (max-width: 480px) {
  .hero__stage { height: 300px; }
  .hero__ctas .btn { flex: 1 1 100%; }
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--lime); color: #0e0b14; overflow: hidden;
  rotate: -2deg; margin: 10px -20px; position: relative; z-index: 2;
  box-shadow: 0 20px 40px -20px rgba(166,236,47,.6);
}
.marquee__track { display: flex; width: max-content; align-items: center; gap: 28px; padding: 16px 0; animation: marquee 32s linear infinite; }
.marquee__track span { font: 900 clamp(1.1rem, 2.4vw, 1.6rem)/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.marquee__track i { font-style: normal; font-size: 1.2rem; color: var(--pink); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Intro + steps ---------- */
.intro__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px 80px; align-items: start; }
.intro__text p { font-size: 1.15rem; color: #ddd6e8; }
.intro__text strong { color: var(--text); }
.steps { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; position: relative; overflow: hidden;
  transition: transform .4s var(--spring), border-color .3s, opacity .8s var(--ease);
}
.step:hover { transform: translateY(-6px); border-color: rgba(166,236,47,.5); }
.step__n { font: 900 3.2rem/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--lime); display: block; margin-bottom: 18px; }
.step h3 { font-size: 1.15rem; margin-bottom: 10px; }
.step p { color: var(--muted); margin: 0; }
@media (max-width: 880px) {
  .intro__grid, .steps { grid-template-columns: 1fr; }
  .steps { margin-top: 40px; }
}

/* ---------- Range panels (home) ---------- */
.range-panel {
  position: relative; overflow: hidden; border-radius: 32px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: center;
  padding: clamp(28px, 5vw, 60px); margin-top: 32px;
  isolation: isolate;
}
.range-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-size: 200% 200%; animation: pan 14s ease-in-out infinite alternate;
}
.range-panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25;
  background-image: radial-gradient(rgba(255,255,255,.7) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
  mask: linear-gradient(120deg, transparent 30%, #000 100%);
  -webkit-mask: linear-gradient(120deg, transparent 30%, #000 100%);
}
@keyframes pan { to { background-position: 100% 100%; } }
.range-panel--slushd::before { background-image: linear-gradient(135deg, #ff2e88, #ff5e5e 35%, #ff9b2e 70%, #ffc62e); }
.range-panel--fusiond::before { background-image: linear-gradient(135deg, #e3263f, #8b3fd9 45%, #5560e8 80%, #3f2a9e); }
.range-panel--fusiond { grid-template-columns: 1.1fr 1fr; }
.range-panel--fusiond .range-panel__copy { order: 2; }
.range-logo { width: min(320px, 80%); margin-bottom: 18px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.25)); }
.range-panel__tag { font: 800 1.3rem/1.2 var(--display); }
.range-panel__copy > p { color: rgba(255,255,255,.92); max-width: 46ch; }
.range-panel__list { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .9rem; }
.range-panel .btn { --btn-bg: #0e0b14; --btn-fg: #fff; margin-top: 6px; }
.range-panel__bottles { display: flex; justify-content: center; align-items: flex-end; height: clamp(300px, 36vw, 440px); }
.rp-bottle { height: 100%; margin: 0 -2%; transition: transform .5s var(--spring); transform-origin: bottom center; }
.rp-bottle img { height: 100%; width: auto; filter: drop-shadow(0 24px 30px rgba(0,0,0,.4)); }
.rp-bottle:nth-child(1) { height: 88%; rotate: -8deg; }
.rp-bottle:nth-child(3) { height: 88%; rotate: 8deg; }
.rp-bottle:nth-child(2) { z-index: 1; }
.rp-bottle:hover { transform: translateY(-18px) scale(1.06); z-index: 2; }
.range-panel.is-in .rp-bottle { animation: popIn .9s var(--spring) both; animation-delay: calc(var(--i) * .12s + .2s); }
@media (max-width: 880px) {
  .range-panel, .range-panel--fusiond { grid-template-columns: 1fr; }
  .range-panel--fusiond .range-panel__copy { order: 0; }
  .range-panel__bottles { height: 300px; }
}

/* ---------- Sizes ---------- */
.size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.size-card {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 34px;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .4s var(--spring), opacity .8s var(--ease), border-color .3s;
}
.size-card:hover { transform: translateY(-6px) rotate(-.5deg); }
.size-card--120:hover { border-color: var(--pink); }
.size-card--60:hover { border-color: var(--purple); }
.size-card::before {
  content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -80px; border-radius: 50%;
  filter: blur(50px); opacity: .45; transition: transform .6s var(--ease);
}
.size-card:hover::before { transform: scale(1.3); }
.size-card--120::before { background: var(--pink); }
.size-card--60::before { background: var(--purple); }
.size-card__num { font: 900 1.4rem/1 var(--display); color: var(--muted); position: relative; }
.size-card__num span { font-size: clamp(3.6rem, 8vw, 5.4rem); color: var(--text); letter-spacing: -.04em; margin-right: 4px; }
.size-card__tag {
  display: inline-block; margin: 18px 0 14px; padding: 6px 12px; border-radius: 999px;
  font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.08); color: var(--lime); position: relative;
}
.size-card h3 { font-size: 1.1rem; margin-bottom: 10px; position: relative; }
.size-card p { color: var(--muted); margin: 0; position: relative; }
@media (max-width: 720px) { .size-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { padding: 0 0 clamp(64px, 10vw, 120px); }
.cta-band__inner {
  text-align: center; padding: clamp(40px, 7vw, 80px) 24px; border-radius: 32px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,46,136,.35), transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(123,92,255,.35), transparent 50%),
    var(--surface);
  border: 1px solid var(--line);
}
.cta-band__inner p { color: var(--muted); max-width: 52ch; margin: 0 auto 22px; }
.mail-big {
  display: inline-block; font: 800 clamp(1.05rem, 3.8vw, 2.2rem)/1.2 var(--display);
  text-decoration: none; color: var(--text); overflow-wrap: anywhere;
  background: var(--grad); background-size: 0 4px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 6px; transition: background-size .5s var(--ease), color .3s;
}
.mail-big:hover { background-size: 100% 4px; color: #fff; }

/* ---------- Range pages ---------- */
.range-hero, .page-hero { position: relative; overflow: hidden; margin-top: -76px; padding: 150px 0 80px; }
.range-hero--slushd { background: linear-gradient(180deg, #2a0f24 0%, var(--bg) 100%); }
.range-hero--fusiond { background: linear-gradient(180deg, #1b1240 0%, var(--bg) 100%); }
.range-hero--slushd .blobs span:nth-child(2) { background: var(--orange); }
.range-hero--fusiond .blobs span:nth-child(1) { background: #e3263f; }
.range-hero--fusiond .blobs span:nth-child(3) { background: #5560e8; }
.range-hero__inner { position: relative; z-index: 1; text-align: center; }
.range-hero__logo img { width: min(560px, 90%); margin: 10px auto 20px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.4)); animation: wobble 6s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-6px); } }
.range-hero__tag { font: 800 clamp(1.2rem, 3vw, 1.8rem)/1.2 var(--display); }
.range-hero__intro { color: #ddd6e8; max-width: 60ch; margin-inline: auto; font-size: 1.12rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: var(--muted); margin-bottom: 18px; justify-content: inherit; }
.range-hero .crumbs { justify-content: center; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* ---------- Product cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  position: relative; border-radius: 28px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), border-color .3s, box-shadow .4s, opacity .8s var(--ease);
}
.card:hover { border-color: color-mix(in srgb, var(--a) 60%, transparent); box-shadow: 0 30px 60px -30px var(--a); }
.card .bottle-stage { height: 340px; }
.card__body { padding: 8px 26px 26px; }
.card__range { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.card__title { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
.card__title a { text-decoration: none; }
.card__title .amp, .product__title .amp, .mini .amp { color: var(--lime); }
.card__desc { color: var(--muted); }
.chips { list-style: none; padding: 0; margin: 0 0 20px; display: flex; gap: 8px; }
.chips li { font-size: .82rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.card__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.card .btn { --btn-bg: var(--a); --btn-fg: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }

/* Bottle stage + size switch (shared by cards and product page) */
.bottle-stage {
  position: relative; display: flex; align-items: flex-end; justify-content: center; padding-top: 26px;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--a) 28%, transparent), transparent 70%);
}
.bottle-stage__glow {
  position: absolute; width: 60%; aspect-ratio: 1; left: 20%; top: 18%; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a), var(--b), var(--a));
  filter: blur(46px); opacity: .45; animation: spin 10s linear infinite;
}
.bottle-img {
  position: relative; height: 92%; width: auto; max-width: 90%; object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.5));
  transition: transform .6s var(--spring);
}
.card:hover .bottle-img { transform: translateY(-12px) rotate(-3deg) scale(1.04); }
.bottle-img.is-60 { height: 78%; }
.bottle-img.is-swapping { animation: swapIn .6s var(--spring) both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(40px) scale(.8) rotate(6deg); } }
.size-switch {
  display: flex; gap: 4px; padding: 4px; margin: 14px auto 0; width: max-content;
  border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); position: relative;
}
.size-switch button {
  font: 700 .85rem/1 var(--body); padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer;
  color: var(--muted); background: transparent; transition: background .3s, color .3s, transform .3s var(--spring);
}
.size-switch button:hover { color: var(--text); }
.size-switch button.is-on { background: var(--a, var(--lime)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.size-switch button:active { transform: scale(.94); }

/* ---------- Product page ---------- */
.product { position: relative; overflow: hidden; margin-top: -76px; padding: 120px 0 40px; }
.product__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 25% 35%, color-mix(in srgb, var(--a) 45%, transparent), transparent 45%),
    radial-gradient(circle at 75% 70%, color-mix(in srgb, var(--b) 35%, transparent), transparent 45%);
  animation: breathe 10s ease-in-out infinite alternate;
  mask: linear-gradient(#000 60%, transparent);
  -webkit-mask: linear-gradient(#000 60%, transparent);
}
@keyframes breathe { to { transform: scale(1.12) rotate(3deg); } }
.product__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.bottle-stage--lg { height: clamp(380px, 46vw, 540px); background: none; }
.bottle-stage--lg .bottle-img { transition: transform .25s linear; }
.size-switch--lg button { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; }
.size-switch--lg button img { height: 36px; width: auto; }
.product__range-logo { width: 220px; margin-bottom: 18px; }
.product__title { font-size: clamp(2.2rem, 5.6vw, 4.2rem); font-weight: 900; margin-bottom: 20px; }
.product__desc { font-size: 1.18rem; color: #ddd6e8; max-width: 52ch; }
.size-rows { margin: 30px 0; }
.size-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center;
  padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  margin-bottom: 10px; transition: border-color .3s, background .3s, transform .4s var(--spring);
}
.size-row[data-on] { border-color: var(--a); background: color-mix(in srgb, var(--a) 12%, transparent); transform: translateX(6px); }
.size-row__num { font: 900 2.4rem/1 var(--display); }
.size-row__num small { font-size: .9rem; color: var(--muted); margin-left: 2px; }
.size-row h3 { font: 700 1.02rem/1.3 var(--body); margin-bottom: 4px; letter-spacing: 0; }
.size-row p { color: var(--muted); margin: 0; font-size: .95rem; }
.product__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.mini {
  display: flex; align-items: center; gap: 22px; padding: 20px 26px; border-radius: 24px; text-decoration: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--a) 22%, var(--surface)), color-mix(in srgb, var(--b) 22%, var(--surface)));
  border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s, opacity .8s var(--ease);
}
.mini:hover { border-color: var(--a); }
.mini img { height: 150px; width: auto; transition: transform .5s var(--spring); filter: drop-shadow(0 14px 16px rgba(0,0,0,.45)); }
.mini:hover img { transform: rotate(-8deg) scale(1.08); }
.mini span { font: 800 1.35rem/1.2 var(--display); }
@media (max-width: 880px) {
  .product { padding-top: 100px; }
  .product__grid { grid-template-columns: 1fr; gap: 20px; }
  .bottle-stage--lg { height: 420px; }
  .mini-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .size-row { grid-template-columns: 1fr; gap: 6px; }
  .bottle-stage--lg { height: 360px; }
}

/* ---------- Other range link ---------- */
.other-range { padding-top: 0; }
.other-range__inner { text-align: center; }
.other-range__link { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.other-range__link img { width: min(380px, 80vw); transition: transform .5s var(--spring); }
.other-range__link:hover img { transform: scale(1.06) rotate(-2deg); }

/* ---------- About / contact ---------- */
.page-hero .container { position: relative; z-index: 1; }
.page-hero__lead { font-size: 1.2rem; color: #ddd6e8; max-width: 56ch; margin-top: 20px; }
.page-hero--contact .mail-big { margin-top: 18px; font-size: clamp(1.15rem, 4.6vw, 3rem); }
.copy-btn {
  margin-top: 18px; font: 600 .95rem/1 var(--body); color: var(--text); cursor: pointer;
  padding: 11px 18px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line);
  transition: background .3s, transform .3s var(--spring);
}
.copy-btn:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.copy-btn.is-done { background: var(--lime); color: #0e0b14; }
.about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: start; }
.about-text p { font-size: 1.15rem; color: #ddd6e8; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.stats li { display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform .4s var(--spring), opacity .8s var(--ease); }
.stats li:hover { transform: translateX(8px); }
.stats b { font: 900 3.4rem/1 var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 1.2ch; }
.stats span { font-weight: 600; color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 14px 0 14px 38px; border-bottom: 1px solid var(--line); position: relative; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 15px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0b14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat;
}
.flavour-links { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.flavour-links a {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; text-decoration: none; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--spring), border-color .3s;
}
.flavour-links a:hover { transform: translateX(6px); border-color: var(--a); }
.flavour-links .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--a); box-shadow: 0 0 12px var(--a); }
@media (max-width: 880px) { .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: 64px 0 28px; background: var(--bg-2); }
.footer-glow { position: absolute; left: 50%; top: -200px; width: 700px; height: 300px; translate: -50% 0; background: radial-gradient(ellipse, rgba(255,46,136,.25), transparent 70%); pointer-events: none; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.footer-blurb { color: var(--muted); max-width: 34ch; margin-top: 18px; }
.site-footer h4 { font: 700 .8rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: var(--muted); }
.site-footer ul a { text-decoration: none; color: var(--muted); transition: color .2s; overflow-wrap: anywhere; }
.site-footer ul a:hover { color: var(--text); }
.footer-bottom {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted);
}
.footer-bottom a { color: var(--text); font-weight: 600; text-decoration: none; }
.footer-bottom a:hover { color: var(--lime); }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- 18+ ---------- */
.age-note b { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border-radius: 50%; border: 2px solid var(--pink); color: var(--pink); font: 800 .7rem/1 var(--display); vertical-align: middle; }
.age-gate {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: rgba(8, 6, 12, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: fadeIn .4s var(--ease) both;
}
.age-gate__box {
  width: min(440px, 100%); text-align: center; padding: 40px 28px 32px; border-radius: 28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,46,136,.3), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(123,92,255,.3), transparent 55%),
    var(--surface);
  border: 1px solid var(--line); box-shadow: 0 40px 80px -20px rgba(0,0,0,.6);
  animation: popIn .6s var(--spring) both;
}
.age-gate__box img { width: 88px; height: 88px; margin: 0 auto 18px; }
.age-gate h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
.age-gate p { color: var(--muted); }
.age-gate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.age-gate__no { margin: 18px 0 0; color: var(--pink) !important; font-weight: 600; }
body.age-locked { overflow: hidden; }
@keyframes fadeIn { from { opacity: 0; } }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--text); }
.cta-band__note { margin-top: 22px !important; font-size: .95rem; }
.consumer-note { margin-top: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

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