:root{
  --bg: #0a0a0b;
  --bg-soft: #101012;
  --surface: #17171a;
  --line: rgba(255,255,255,0.08);
  --text: #f3f1ec;
  --muted: #9a9aa2;
  --accent: #c7ff5e;
  --accent-dim: rgba(199,255,94,0.14);

  --font-display: "Unbounded", "Manrope", sans-serif;
  --font-body: "Manrope", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ background:var(--bg); }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

::selection{ background:var(--accent); color:#08110a; }

.noise{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- NAV ---------- */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px clamp(20px,5vw,64px);
  background:linear-gradient(to bottom, rgba(10,10,11,.85), transparent);
  backdrop-filter:blur(6px);
}

.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:1400px; margin:0 auto;
}

.nav__logo{
  font-family:var(--font-display);
  font-weight:600;
  font-size:20px;
  letter-spacing:.02em;
}

.nav__menu{
  display:flex; gap:36px;
  font-size:14.5px;
  color:var(--muted);
}

.nav__menu a{ position:relative; transition:color .25s ease; }
.nav__menu a:hover{ color:var(--text); }
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:0; height:1px; background:var(--accent);
  transition:width .3s ease;
}
.nav__menu a:hover::after{ width:100%; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:700; font-size:14.5px;
  padding:12px 26px; border-radius:999px;
  cursor:pointer; border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .3s ease, border-color .3s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.25); }

.btn--catalog,
.btn--hero,
.btn--solid{
  background:var(--accent);
  color:#0c1406;
  border-color:transparent;
}
.btn--catalog:hover,
.btn--hero:hover,
.btn--solid:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px -6px rgba(199,255,94,.55);
}

.nav__burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav__burger span{ width:20px; height:2px; background:var(--text); border-radius:2px; }

/* ---------- HERO ---------- */

.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:120px 20px 80px;
  isolation:isolate;
  overflow:hidden;
}

.hero__glow{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(45% 35% at 50% 25%, rgba(199,255,94,.16), transparent 70%),
    radial-gradient(60% 50% at 80% 80%, rgba(120,90,255,.10), transparent 70%);
  will-change:transform;
}

.hero__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(44px, 9vw, 108px);
  line-height:1.02;
  letter-spacing:-.01em;
}

.hero__title span{ display:block; }
.hero__title span:last-child{ color:var(--accent); }

.hero__sub{
  margin-top:26px;
  max-width:480px;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
}

.btn--hero{
  margin-top:40px;
  padding:16px 34px;
}

.hero__lineup{
  width:min(360px, 60%);
  margin:56px auto 0;
  border-radius:20px;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.5));
}

/* ---------- PRELOADER ---------- */

.preloader{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.preloader__logo{
  font-family:var(--font-display); font-weight:600;
  font-size:32px; color:var(--accent);
  opacity:0; transform:scale(.85);
}

/* ---------- BRANDS MARQUEE ---------- */

.brands{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.brands__track{
  display:flex;
  align-items:center;
  gap:28px;
  width:max-content;
  padding:26px 0;
  animation:marquee 22s linear infinite;
  will-change:transform;
}

.brands__track span{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(20px,2.6vw,30px);
  color:var(--muted);
  letter-spacing:.04em;
  white-space:nowrap;
}

.brands__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  flex:none;
}

@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .brands__track{ animation:none; }
}

/* ---------- GLOW TEXT ---------- */

.glow-text{
  transition:text-shadow .9s ease;
  text-shadow:0 0 0 rgba(255,255,255,0);
}
.glow-text.is-glow{
  text-shadow:0 0 14px rgba(255,255,255,.5), 0 0 40px rgba(255,255,255,.22);
}
.glow-text--accent{
  transition:text-shadow .9s ease;
}
.glow-text--accent.is-glow{
  text-shadow:0 0 16px rgba(199,255,94,.7), 0 0 50px rgba(199,255,94,.35);
}

@media (prefers-reduced-motion: reduce){
  .glow-text{ transition:none; }
}

/* ---------- SECTION SHARED ---------- */

.section__eyebrow{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px; font-weight:700;
}

/* ---------- FLAVORS (scroll-pinned stage) ---------- */

.flavors{ position:relative; }

.flavors__pin{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 20px;
  overflow:hidden;
}

.flavors__head{ text-align:center; margin-bottom:8px; max-width:640px; }
.flavors__head h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px,4.2vw,44px);
}

.flavors__stage{
  position:relative;
  width:min(1100px, 92vw);
  height:min(560px, 62vh);
  margin-top:40px;
}

.flavor-slide{
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:40px;
  opacity:0;
  will-change:opacity, transform;
}

.flavor-slide__photo{
  width:100%; max-width:340px; margin:0 auto;
  aspect-ratio:3/4; object-fit:contain;
  background:radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
  border-radius:24px;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}

.flavor-slide__brand{
  font-family:var(--font-display);
  font-size:13px; font-weight:700; letter-spacing:.14em;
  color:var(--accent);
}

.flavor-slide__text h3{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,40px);
  font-weight:600;
  margin:14px 0 18px;
}

.flavor-slide__meta{ display:flex; gap:10px; margin-bottom:24px; }
.flavor-slide__meta span{
  font-size:13px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}

.flavor-slide__row{ display:flex; align-items:center; gap:22px; }
.flavor-slide__row strong{ font-family:var(--font-display); font-size:26px; }

/* shared bottle-svg styling (catalog + CTA) */
.bottle{
  position:relative; z-index:2;
  width:34%; height:auto;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.55));
}
.bottle__cap-top{ fill:#d8d8dc; }
.bottle__cap{ fill:#ececed; }
.bottle__neck{ fill:#cfcfd3; }
.bottle__body{ fill:#141416; stroke:rgba(255,255,255,.14); }
.bottle__liquid{ opacity:.92; }
.bottle__shine{ fill:rgba(255,255,255,.10); }

.flavors__progress{
  display:flex; gap:8px; margin-top:36px;
}
.flavors__progress span{
  width:26px; height:3px; border-radius:3px;
  background:var(--line);
  transition:background .3s ease;
}
.flavors__progress span.active{ background:var(--accent); }

/* ---------- ABOUT ---------- */

.about{ padding:140px clamp(20px,6vw,64px); }

.about__grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:60px; align-items:center;
}

.about__block h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px,4vw,42px);
  margin-bottom:22px;
  max-width:14ch;
}

.about__block p{
  color:var(--muted); line-height:1.7; font-size:16px; max-width:52ch;
}

.about__stats{
  display:grid; gap:26px;
}

.stat{
  border-top:1px solid var(--line);
  padding-top:18px;
  display:flex; align-items:baseline; gap:14px;
}
.stat strong{
  font-family:var(--font-display); font-size:34px; color:var(--accent);
}
.stat span{ color:var(--muted); font-size:14.5px; }

/* ---------- CHAT ---------- */

.chat{
  position:relative;
  margin:0 clamp(16px,4vw,40px) 60px;
  padding:48px clamp(20px,5vw,72px);
  min-height:380px;
  border-radius:32px;
  overflow:hidden;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}

.chat__bg{
  position:absolute; inset:-10% 0; z-index:0;
  background:
    linear-gradient(180deg, rgba(10,10,11,.55), rgba(10,10,11,.88)),
    url("assets/cta-lineup.jpg") center 30% / cover no-repeat;
  filter:grayscale(.55) brightness(.6);
  will-change:transform;
}

.chat__stage{
  position:relative; z-index:1;
  width:100%; max-width:480px;
  display:flex; flex-direction:column; gap:14px;
}

.bubble{
  max-width:78%;
  padding:12px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);
  opacity:0;
  will-change:opacity, transform;
}

.bubble p{ font-size:14.5px; line-height:1.5; }
.bubble b{ color:var(--accent); font-weight:700; }
.bubble span{
  display:block; margin-top:6px;
  font-size:11px; color:var(--muted);
}

.bubble__link{ color:var(--accent); font-weight:700; }
.bubble__link:hover{ text-decoration:underline; }

.bubble--left{ align-self:flex-start; border-bottom-left-radius:4px; }
.bubble--right{
  align-self:flex-end;
  border-bottom-right-radius:4px;
  background:rgba(199,255,94,.1);
  border-color:rgba(199,255,94,.22);
  margin-left:22%;
}

/* ---------- CATALOG CTA ---------- */

.catalog-cta{
  margin:0 clamp(16px,4vw,40px) 40px;
  padding:90px 32px;
  border-radius:32px;
  text-align:center;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(199,255,94,.14), transparent 70%),
    var(--surface);
  border:1px solid var(--line);
}

.catalog-cta h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px,4.5vw,48px);
}

.catalog-cta p{
  color:var(--muted); margin:18px auto 34px; max-width:44ch; font-size:16px;
}

/* ---------- FOOTER ---------- */

.footer{ padding:50px clamp(20px,6vw,64px) 40px; }

.footer__inner{
  max-width:1400px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  border-top:1px solid var(--line);
  padding-top:28px;
}

.footer__logo{ font-family:var(--font-display); font-weight:600; }
.footer p{ color:var(--muted); font-size:13.5px; }

/* ---------- RESPONSIVE ---------- */

@media (max-width:860px){
  .nav__menu{ display:none; }
  .about__grid{ grid-template-columns:1fr; }
  .flavor-slide{ grid-template-columns:1fr; text-align:center; }
  .flavor-slide__photo{ max-width:220px; }
  .flavor-slide__meta{ justify-content:center; }
  .flavor-slide__row{ justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .hero__scroll-line::after{ animation:none; }
}