/* ---- Root / Reset ---- */
:root{
    --bg: #0b0c10;
    --bg-2: #0f1117;
    --card: #12141c;
    --text: #e9eef6;
    --muted: #b6c0cf;
    --brand: #87f7d7;        /* minty accent */
    --brand-2: #53c7ff;      /* ocean accent */
    --ring: #2de3b8;
    --ok: #a8ffcf;
    --warn: #ffd166;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 18px;
    --radius-lg: 28px;
    --maxw: 1180px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color: var(--text);
    background:
            radial-gradient(1200px 600px at 10% -10%, rgba(83,199,255,.25), transparent 60%),
            radial-gradient(1000px 600px at 110% 20%, rgba(45,227,184,.15), transparent 60%),
            linear-gradient(180deg, var(--bg), var(--bg-2));
    line-height: 1.5;
}

/* ---- Utilities ---- */
.container{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
}
.muted{ color: var(--muted); }
.tiny{ font-size: .875rem; }
.block{ display:block; width:100%; }
.section-head{ text-align: center; margin-bottom: 28px; }
.section-head h2{ font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin: 0 0 8px; }

/* ---- Buttons ---- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 600;
    transition: transform .06s ease, background .2s ease, border-color .2s ease;
    will-change: transform;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn.solid{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#071013; }
.btn.ghost{ background: transparent; color: var(--text); border-color: rgba(255,255,255,.18); }
.btn.outline{ background: transparent; color: var(--text); border-color: rgba(255,255,255,.28); }

/* ---- Header ---- */
.site-header{
    position: sticky; top:0; z-index: 30;
    backdrop-filter: saturate(140%) blur(10px);
    background: rgba(10,12,16,.6);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{
    display:flex; align-items:center; justify-content: space-between;
    padding: 14px 0;
}
.logo{ display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.3px; }
.logo .logo-mark{
    display:grid; place-items:center;
    width: 36px; height:36px; border-radius: 12px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    color:#071013; font-weight: 900;
}
.logo .logo-type{ font-size: 1.1rem; }

.primary-nav{ display:flex; gap: 18px; align-items:center; }
.primary-nav a{
    color: var(--text); text-decoration:none; opacity:.86;
    padding: 8px 12px; border-radius: 10px;
}
.primary-nav a:hover{ background: rgba(255,255,255,.06); opacity:1; }

.nav-cta{ display:flex; gap:10px; align-items:center; }

/* ---- Hero ---- */
.hero{ padding: 64px 0 32px; }
.hero-grid{
    display:grid; gap: 24px; align-items:center;
    grid-template-columns: 1.3fr 1fr;
}
.hero-copy h1{
    font-size: clamp(2rem, 4.8vw, 3.6rem);
    line-height: 1.05; margin: 8px 0 10px;
}
.eyebrow{ color: var(--ok); font-weight:700; letter-spacing:.12em; text-transform: uppercase; font-size: .8rem; }
.lead{ font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--muted); max-width: 55ch; }
.hero-cta{ display:flex; gap:12px; margin-top: 16px; flex-wrap: wrap; }

.accent-underline{
    background: linear-gradient(180deg, transparent 65%, rgba(83,199,255,.35) 0);
    border-bottom: 3px solid rgba(45,227,184,.8);
}

.trust-badges{
    display:flex; gap:10px; flex-wrap: wrap; margin: 18px 0 0; padding:0; list-style:none;
}
.trust-badges li{
    padding: 8px 12px; border-radius: 999px; border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04); color: var(--muted); font-weight:600; font-size:.9rem;
}

/* ---- Hero Art (mock can) ---- */
.hero-art{ display:grid; justify-items:center; }
.can-mock{
    width: clamp(220px, 30vw, 320px);
    height: clamp(420px, 48vw, 520px);
    border-radius: 22px;
    background:
            radial-gradient(200px 60px at 50% -10%, rgba(255,255,255,.28), transparent 60%),
            linear-gradient(180deg, #111521, #0b0d14 65%, #0b0c10);
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.06);
    display:grid; place-items:center; position: relative;
}
.can-body{
    width: 86%; height: 88%;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(135,247,215,.18), rgba(83,199,255,.12));
    border: 1px solid rgba(255,255,255,.18);
    display:grid; place-items:center;
    text-align:center;
}
.can-brand{
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing:.6px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text; background-clip:text; color: transparent;
}
.can-sub{ color: var(--muted); font-weight: 700; letter-spacing:.2em; text-transform: uppercase; font-size: .8rem; }
.mock-caption{ margin-top: 10px; color: var(--muted); font-size: .9rem; }

/* ---- Reasons ---- */
.reasons{ padding: 36px 0; }
.reasons-grid{
    display:grid; gap:16px;
    grid-template-columns: repeat(4, 1fr);
}
.reason{
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 18px;
}
.reason h3{ margin:0 0 6px; font-size:1.05rem; }

/* ---- Shop ---- */
.shop{ padding: 54px 0; }
.product-grid{
    margin-top: 20px;
    display:grid; gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}
.product-card{
    background: var(--card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    overflow:hidden;
    display:flex; flex-direction: column;
}
.product-media{
    aspect-ratio: 4/3;
    background:
            radial-gradient(300px 120px at 20% 10%, rgba(135,247,215,.15), transparent 50%),
            radial-gradient(300px 120px at 100% 10%, rgba(83,199,255,.12), transparent 50%),
            linear-gradient(180deg, #0e121a, #0a0d14);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.product-media.flavor-lime{ background: linear-gradient(180deg, #0e121a, #0a0d14), radial-gradient(300px 140px at 80% 0%, rgba(135,247,215,.25), transparent 60%); background-blend-mode: normal, screen; }
.product-media.flavor-berry{ background: linear-gradient(180deg, #0e121a, #0a0d14), radial-gradient(280px 120px at 85% 10%, rgba(180,120,255,.25), transparent 60%); background-blend-mode: normal, screen; }
.product-media.flavor-grapefruit{ background: linear-gradient(180deg, #0e121a, #0a0d14), radial-gradient(260px 120px at 80% 0%, rgba(255,160,140,.3), transparent 60%); background-blend-mode: normal, screen; }

.product-body{ padding: 14px; display:grid; gap:8px; }
.price{ font-weight:800; font-size:1.05rem; }

/* ---- Subscribe banner ---- */
.sub-banner{
    margin-top: 18px;
    background: rgba(135,247,215,.08);
    border: 1px dashed rgba(135,247,215,.35);
    border-radius: var(--radius);
    padding: 16px;
    display:flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* ---- Flavors ---- */
.flavors{ padding: 42px 0; }
.flavor-grid{ display:grid; gap:16px; }
.flavor-list{
    display:flex; gap: 18px; flex-wrap: wrap; justify-content: center;
    list-style: none; padding:0; margin: 10px 0 0;
}
.dot{
    width:14px; height:14px; border-radius:50%;
    display:inline-block; margin-right:8px; vertical-align: -2px;
    background: var(--brand);
}
.dot.lime{ background:#87f7d7; }
.dot.berry{ background:#b478ff; }
.dot.grapefruit{ background:#ffa082; }
.dot.ocean{ background:#53c7ff; }

/* ---- Science ---- */
.science{ padding: 54px 0; }
.science-grid{
    display:grid; gap: 18px; align-items: start;
    grid-template-columns: 1.3fr .7fr;
}
.bullet{ padding-left: 18px; }
.bullet li{ margin:8px 0; }
.card.panel{
    background: var(--card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow);
}
.specs{
    display:grid; gap: 10px; margin: 0 0 10px;
}
.specs div{
    display:flex; justify-content: space-between; align-items:center;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
}
.specs dt{ color: var(--muted); }
.specs dd{ margin:0; font-weight:800; }

/* ---- Reviews ---- */
.reviews{ padding: 42px 0; }
.review-strip{
    display:grid; gap: 14px;
    grid-template-columns: repeat(3, 1fr);
}
.review{
    margin:0; padding: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
}
.review p{ font-size: 1.05rem; }
.review cite{ color: var(--muted); font-style: normal; }

/* ---- CTA ---- */
.cta{ padding: 54px 0 76px; }
.cta-card{
    background: linear-gradient(180deg, rgba(135,247,215,.12), rgba(83,199,255,.10));
    border:1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    padding: 28px;
    text-align:center;
    box-shadow: var(--shadow);
}
.cta-card h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); margin:0 0 6px; }
.cta-actions{ display:flex; gap: 12px; justify-content:center; margin-top: 10px; flex-wrap: wrap; }

/* ---- Footer ---- */
.site-footer{
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 24px 0 36px;
    background: rgba(0,0,0,.2);
}
.foot-grid{
    display:flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.logo.footer .logo-mark{ width:28px; height:28px; border-radius:10px; font-size:.95rem; }
.footer-nav{ display:flex; gap: 14px; flex-wrap: wrap; }
.footer-nav a{ color: var(--muted); text-decoration: none; }
.footer-nav a:hover{ color: var(--text); }

/* ---- Responsive ---- */
@media (max-width: 980px){
    .hero-grid{ grid-template-columns: 1fr; }
    .science-grid{ grid-template-columns: 1fr; }
    .product-grid{ grid-template-columns: repeat(2, 1fr); }
    .reasons-grid{ grid-template-columns: repeat(2, 1fr); }
    .review-strip{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
    .primary-nav{ display:none; } /* keep it simple w/o JS */
    .product-grid{ grid-template-columns: 1fr; }
}