:root{
  --bg:#0b0b0e;
  --bg-2:#0f1015;
  --text:#e8e8ee;
  --muted:#a1a1b3;
  --brand:#7c5cff; /* accent */
  --accent-berry: linear-gradient(135deg,#ff3b7f 0%, #9b2fff 100%);
  --accent-mango: linear-gradient(135deg,#ffb01f 0%, #ff6b00 100%);
  --accent-peach: linear-gradient(135deg,#ff9a6a 0%, #ff5f7a 100%);
  --card:#161721;
  --line:#232535;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1000px 900px at 10% -10%, rgba(124,92,255,.18), transparent 75%) no-repeat,
    radial-gradient(1000px 900px at 90% -20%, rgba(255,59,127,.12), transparent 80%) no-repeat,
    var(--bg);
  background-size: cover;  /* ensures they stretch, not repeat */
  line-height: 1.55;
}
.container{width:min(1420px, 92%); margin-inline:auto}
a{color:inherit; text-decoration:none}
p{margin:0 0 1rem}
h1,h2,h3{line-height:1.15; margin:0 0 .5rem}
.lead{font-size:1.125rem; color:var(--muted)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.9rem 1.1rem; border-radius:14px; font-weight:600;
  border:1px solid transparent; background:var(--brand); color:#fff; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--text)}
.btn-sm{padding:.6rem .8rem; font-size:.9rem}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(120%) blur(8px);
  background:rgba(11,11,14,.55);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.logo{font-weight:800; letter-spacing:.2px}
.logo-mark{color:var(--brand); margin-right:.25rem}
.logo-dot{color:var(--brand)}
.nav-list{display:flex; gap:1rem; list-style:none; padding:0; margin:0}
.nav-toggle{display:none; background:none; border:0; padding:.5rem; cursor:pointer}
.nav-toggle .bar{display:block; width:22px; height:2px; background:var(--text); margin:4px 0; border-radius:2px}

/* Hero */
.hero{padding:clamp(2rem, 6vw, 5rem) 0 2rem}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(2rem, 6vw, 3.2rem)}
.accent{color:var(--brand)}
.facts-inline{display:flex; gap:1rem; padding:0; list-style:none; color:var(--muted); margin:.75rem 0 0}
.hero-visual{display:grid; place-items:center}

/* Can (pure CSS) */
.can{
  width:240px; height:480px; border-radius:28px;
  background:linear-gradient(180deg,#fcfcff 0%,#dfe1f2 50%,#f7f8ff 100%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), var(--shadow);
  position:relative; isolation:isolate;
}
.can:before{
  content:""; position:absolute; inset:2px; border-radius:26px;
  background:
    radial-gradient(400px 300px at 30% 10%, rgba(255,255,255,.75), transparent 40%),
    radial-gradient(600px 300px at 80% 0%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 25%),
    linear-gradient(180deg, transparent 65%, rgba(0,0,0,.1));
  pointer-events:none;
}
.can .can-label{
  position:absolute; inset:auto 16px 20px 16px;
  text-align:center; font-weight:700; color:#101014; mix-blend:normal;
  background:rgba(255,255,255,.6); padding:.4rem .6rem; border-radius:12px; backdrop-filter:blur(6px); font-size:.95rem;
}

/* Flavor tints */
.can-phantom{
  background:
    radial-gradient(220px 220px at 50% 20%, rgba(255,255,255,.8), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 30%),
    var(--accent-berry);
}
.can-mango{
  background:
    radial-gradient(220px 220px at 50% 20%, rgba(255,255,255,.8), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 30%),
    var(--accent-mango);
}
.can-peach{
  background:
    radial-gradient(220px 220px at 50% 20%, rgba(255,255,255,.8), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 30%),
    var(--accent-peach);
}

.can.small{width:120px; height:240px; border-radius:20px}
.can.medium{width:160px; height:320px; border-radius:24px}
.can.tiny{width:90px; height:180px; border-radius:16px; transform:rotate(-6deg)}
.cluster{display:flex; gap:1rem}
.cluster .can:nth-child(2){transform:rotate(4deg)}
.cluster .can:nth-child(3){transform:rotate(-10deg)}

/* Sections */
.section{padding:clamp(2rem, 6vw, 4rem) 0}
.section .section-head{margin-bottom:1.25rem}

/* Flavors grid */
.flavor-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.flavor-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem;
  box-shadow:var(--shadow); transition:transform .15s ease, border-color .2s ease;
  cursor:pointer; outline:none;
}
.flavor-card:hover,.flavor-card:focus{transform:translateY(-4px); border-color:rgba(255,255,255,.18)}
.flavor-card h3{margin:.75rem 0 .25rem}
.flavor-card p{color:var(--muted); margin:0 0 .25rem}
.link{background:none; border:0; color:var(--brand); font-weight:600; cursor:pointer; padding:0}

/* Why section */
.muted{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.feature{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem}
.icon{font-size:1.4rem; margin-bottom:.25rem}

/* Signup section */
.signup-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:center}
.signup-form{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem}
.signup-form input{
  flex:1 1 280px; padding:.9rem 1rem; border-radius:14px; border:1px solid var(--line);
  background:#10111a; color:var(--text)
}
.form-note{font-size:.85rem; color:var(--muted); margin-top:.25rem}
.form-msg{margin-top:.5rem; font-weight:600}
.muted-text{color:var(--muted); font-size:.85rem}

/* Footer */
.site-footer{padding:2rem 0; border-top:1px solid var(--line); background:#0b0b0e}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; align-items:start}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:.5rem; justify-items:start}
.footer-logo{display:inline-block; margin-bottom:.5rem}
.footnote{color:var(--muted); margin:.3rem 0}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; display:grid; place-items:center; z-index:100}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.modal-card{
  position:relative; z-index:1; width:min(880px, 92%); background:#11121a; color:var(--text);
  border:1px solid var(--line); border-radius:20px; padding:1rem; box-shadow:var(--shadow)
}
.modal-close{position:absolute; top:.5rem; right:.75rem; font-size:1.6rem; background:none; border:0; color:var(--text); cursor:pointer}
.nutrition-grid{display:grid; grid-template-columns:1fr .6fr; gap:1rem; align-items:center}
.nutrition-list{list-style:none; padding:0; margin:0}
.nutrition-list li{padding:.4rem .6rem; border:1px dashed var(--line); border-radius:12px; margin:.35rem 0; background:#0f1020}

/* Accessibility */
.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}

/* -------- Responsive (global) -------- */
@media (max-width: 960px){
  .hero-grid,.signup-grid{grid-template-columns:1fr}
  .flavor-grid{grid-template-columns:1fr 1fr}
  .features{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .flavor-grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-list{
    position:absolute; top:64px; right:4%;
    background:#0f1016; border:1px solid var(--line); border-radius:16px; padding:.5rem;
    display:none; flex-direction:column; min-width:200px
  }
  .nav-list.show{display:flex}
}

/* ===== Hero variants (theme-consistent) ===== */
.center{text-align:center}
.cta-row.center{justify-content:center}
.hero-title-center{text-align:center; font-size:clamp(2rem, 6vw, 3.2rem)}
.hero-subtitle-center{text-align:center; color:var(--muted); margin:.25rem 0 1rem}

/* Home uses hero--split (base styles already apply) */
.hero--split{position:relative}

/* Flavors cover hero */
.hero--cover{position:relative; padding:clamp(2rem, 8vw, 5rem) 0 clamp(1.5rem, 6vw, 3rem); overflow:hidden}
.hero--cover:before,
.hero--cover:after{content:""; position:absolute; inset:0; pointer-events:none}
.hero--cover:before{
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(700px 400px at 85% -10%, rgba(255,59,127,.18), transparent 60%);
  mix-blend-mode:screen; opacity:.9;
}
.hero--cover:after{
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:18px 18px; opacity:.35;
}
.hero-cover-inner{display:grid; justify-items:center; gap:.5rem}
.hero-cover-can{margin-top:.5rem}
.hero--berries{background:linear-gradient(180deg, rgba(124,92,255,.10), rgba(11,11,14,0) 80%)}

/* Why page angled hero */
.hero--angled{position:relative; padding:clamp(2rem, 6vw, 4rem) 0}
.hero--angled:before{
  content:""; position:absolute; left:0; right:0; top:-12vh; height:50vh;
  background:linear-gradient(135deg, rgba(124,92,255,.14), rgba(255,59,127,.10));
  transform:skewY(-4deg); transform-origin:0 0; z-index:-1;
}
.hero-grid.reverse{grid-template-columns:.9fr 1.1fr}

/* Nutrition minimal hero */
.hero--minimal{
  padding:clamp(2rem, 6vw, 3rem) 0 1rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
}

/* Signup spotlight (kept for legacy pages) */
.hero--spotlight{position:relative; overflow:hidden}
.hero--spotlight:before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(600px 380px at 25% 30%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(500px 320px at 85% 10%, rgba(124,92,255,.22), transparent 60%);
  pointer-events:none;
}

/* Flavors cover – small tweaks */
@media (max-width: 960px){
  .hero--cover .hero-cover-can{order:3}
  .hero--cover .cta-row.center{order:4}
}

/* ===== Nutrition upgrades ===== */
.hero-centered{display:grid; gap:.5rem; justify-items:center}
.pill-tabs{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin:.6rem 0 1rem}
.pill{background:#11121a; border:1px solid var(--line); color:var(--text); padding:.5rem .9rem; border-radius:999px; cursor:pointer; font-weight:600}
.pill.is-active{border-color:rgba(255,255,255,.28); box-shadow:var(--shadow)}
.hero-can-stage{display:grid; place-items:center; margin:.25rem 0 0}

.subnav{position:sticky; top:64px; z-index:45; backdrop-filter:blur(8px); background:rgba(11,11,14,.6); border-bottom:1px solid var(--line)}
.subnav-row{display:flex; gap:1rem; padding:.6rem 0}
.subnav a{color:var(--muted)}
.subnav a:hover{color:var(--text)}

.hl-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.hl-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1rem; text-align:center}
.hl-title{display:block; color:var(--muted); font-size:.9rem}
.hl-value{display:block; font-weight:800; font-size:1.4rem}

.facts-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:start}
.facts-card{background:#0f0f16; border:1px solid var(--line); border-radius:18px; padding:1rem}
.facts-row{display:flex; justify-content:space-between; padding:.45rem .2rem}
.facts-row.indent{padding-left:1rem}
.facts-row--title{display:flex; flex-direction:column; gap:.25rem; padding:.2rem 0 .6rem}
.facts-h1{font-weight:800; font-size:1.4rem}
.facts-serving{color:var(--muted); font-size:.9rem}
.facts-divider{height:8px; border-top:6px solid #fff; opacity:.08; margin:.4rem 0}
.facts-divider.thin{height:1px; border-top:1px solid var(--line); opacity:1}

.facts-aside{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1rem}
.aside-title{margin:0 0 .25rem}

.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:start}
.callout{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1rem}

.faq{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.8rem 1rem; margin:.5rem 0}
.faq summary{font-weight:700; cursor:pointer}

@media (max-width: 960px){
  .hl-grid{grid-template-columns:1fr 1fr}
  .facts-wrap,.two-col{grid-template-columns:1fr}
}

/* ===== Signup page upgrades (no spotlight) ===== */
.hero--signup{
  padding:clamp(2rem, 6vw, 4rem) 0 2rem;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(124,92,255,.12), transparent 55%),
    radial-gradient(700px 360px at 95% -15%, rgba(255,59,127,.10), transparent 60%),
    var(--bg);
}
.signup-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1rem, 3vw, 2rem); align-items:center}
.signup-hero-copy h1{margin-bottom:.25rem}
.checklist{list-style:none; padding:0; margin:.5rem 0 1rem; display:grid; gap:.25rem; color:var(--muted)}
.checklist li{display:flex; align-items:center; gap:.5rem}
.checklist li span{
  display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px;
  border:1px solid var(--line); font-weight:800; font-size:.8rem; color:var(--brand); background:#11121a
}
.form-card{background:#10111a; border:1px solid var(--line); border-radius:16px; padding:.9rem; box-shadow:var(--shadow)}
.signup-hero-visual .cluster{margin-bottom:.75rem}
.badge-row{display:flex; gap:.6rem; flex-wrap:wrap}
.badge{display:grid; place-items:center; padding:.6rem .8rem; border:1px solid var(--line); border-radius:12px; background:var(--card)}
.badge strong{font-size:1.05rem}
.badge span{color:var(--muted); font-size:.85rem}
.strip{padding:.9rem 0; background:rgba(16,17,26,.5); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; text-align:center}
.strip-stats>div{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.8rem}
.strip-stats strong{font-size:1.2rem}
.strip-stats span{display:block; color:var(--muted); font-size:.9rem}
.perks-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.perk{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem}
.perk h3{margin:0 0 .25rem}
.perk p{color:var(--muted); margin:0}
.faq{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.8rem 1rem; margin:.5rem 0}
.faq summary{font-weight:700; cursor:pointer}

@media (max-width:1100px){
  .signup-hero-grid{grid-template-columns:1fr}
  .strip-stats{grid-template-columns:1fr 1fr 1fr}
  .perks-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .strip-stats{grid-template-columns:1fr}
  .perks-grid{grid-template-columns:1fr}
}

/* Logo (crow + wordmark) */
.logo{display:flex; align-items:center; gap:.4rem; font-size:1.6rem}
.logo-icon{height:42px; width:auto; display:block}
.logo-text{font-weight:700; font-size:1.4rem; line-height:1}

/* ----- Mobile polish (home + similar heroes) ----- */
@media (max-width:640px){
  /* layout: visual first */
  .hero-grid{grid-template-columns:1fr; gap:.9rem}
  .hero-visual{order:1}
  .hero-copy{order:2}

  /* text */
  .hero h1{font-size:1.85rem; line-height:1.15}
  .lead{
    font-size:.98rem; color:var(--muted);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* CTAs */
  .cta-row{display:grid; grid-template-columns:1fr; gap:.6rem; margin-top:.6rem}
  .btn.btn-ghost{
    border-color:transparent; background:transparent; box-shadow:none;
    text-decoration:underline; padding:.4rem 0; justify-content:flex-start;
  }

  /* fact chips */
  .facts-inline{margin-top:.4rem; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.25rem}
  .facts-inline li{
    background:#10111a; border:1px solid var(--line); color:var(--muted);
    padding:.25rem .5rem; border-radius:999px; white-space:nowrap; font-size:.82rem;
  }

  /* spacing */
  .hero{padding:1.25rem 0 1rem}
  .container{padding-inline:4vw}
}

/* Slightly below tablet */
@media (max-width:820px){
  .hero h1{font-size:2.1rem}
  .lead{font-size:1.02rem}
  .cta-row{gap:.7rem}
  .features{grid-template-columns:1fr 1fr; gap:.9rem}
}

/* ===== Why Future – consolidated mobile fixes (keeps desktop intact) ===== */
@media (max-width:820px){
  .hero.hero--angled .hero-grid{grid-template-columns:1fr; gap:.9rem}
  .hero.hero--angled .hero-copy{order:2}
  .hero.hero--angled .hero-visual{order:1; display:grid; place-items:center}

  .hero.hero--angled .hero-visual .can{width:180px; height:360px; border-radius:24px}

  .hero.hero--angled h1{font-size:2rem; line-height:1.15}
  .hero.hero--angled .lead{
    font-size:1rem; color:var(--muted);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  .hero.hero--angled{overflow:visible; padding:1.25rem 0 1rem}
  .hero.hero--angled::before{
    top:-22vh; height:58vh; left:-12vw; right:-12vw; transform:skewY(-3deg);
  }

  .hero.hero--angled .cta-row{display:grid; grid-template-columns:1fr; gap:.6rem}
  .hero.hero--angled .btn.btn-ghost{
    border-color:transparent; background:transparent; text-decoration:underline;
    justify-content:flex-start; padding:.4rem 0; box-shadow:none;
  }
}
@media (max-width:480px){
  .hero.hero--angled .hero-visual .can{width:150px; height:300px}
  .hero.hero--angled h1{font-size:1.8rem}
}
/* ===== Header nav polish (clean, airy, subtle interactions) ===== */

/* spacing + hit area */
.nav-list { gap: .5rem; }
.nav-list a:not(.btn){
  display:inline-block;
  padding: .55rem .8rem;           /* bigger tap/click target */
  border-radius: 12px;              /* soft pill */
  line-height: 1;
  font-weight: 600;
  position: relative;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  border: 1px solid transparent;    /* keeps layout from shifting on hover */
}

/* hover/focus: soft glassy pill */
.nav-list a:not(.btn):hover,
.nav-list a:not(.btn):focus-visible{
  background: rgba(255,255,255,.06);
  border-color: var(--line);
  outline: none;
  box-shadow: 0 0 0 2px rgba(124,92,255,.12);
}

/* active/current page: keep it subtle, not competing with the CTA */
.nav-list a[aria-current="page"]{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* optional: tiny underline that eases in (cleaner than heavy hover color) */
.nav-list a:not(.btn)::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: linear-gradient(90deg, var(--brand), rgba(255,255,255,.6));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  opacity:.9;
}
.nav-list a:not(.btn):hover::after,
.nav-list a[aria-current="page"]::after{ transform: scaleX(1); }

/* keep the CTA aligned with link height */
.nav-list .btn.btn-sm{
  padding: .6rem .9rem;
  border-radius: 12px;
}