:root{
    --bg:#0f1724; /* deep navy */
    --card:#0b1220;
    --muted:#94a3b8;
    --accent:#ff6b6b; /* coral */
    --accent-2:#7c3aed; /* violet */
    --glass: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
body{
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial;
    margin:0; background: linear-gradient(180deg,var(--bg) 0%, #071028 100%);
    color:#e6eef8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1100px;margin:0 auto;padding:1rem}

.site-header{background: linear-gradient(90deg, rgba(124,58,237,0.12), rgba(255,107,107,0.06));backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.03);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;color:inherit;text-decoration:none}
.brand-logo{width:56px;height:56px;border-radius:8px;object-fit:cover;margin-right:0.75rem;box-shadow:0 6px 18px rgba(12,17,26,0.6)}
.brand-text h1{margin:0;font-size:1.25rem}
.tagline{margin:0;font-size:0.85rem;color:var(--muted)}

.main-nav{display:flex;gap:1rem}
.nav-link{color:var(--muted);text-decoration:none;padding:0.5rem 0.6rem;border-radius:6px;transition:all .18s}
.nav-link:hover{color:#fff;background:var(--glass);transform:translateY(-2px)}

.site-main{padding:2.5rem 0}
.site-main .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:1.25rem;margin-bottom:1rem;box-shadow:0 6px 18px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.02)}

.hero{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:center}
.hero h2{margin-top:0;font-size:2rem}
.hero p{color:var(--muted);line-height:1.6}

.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.product{padding:1rem;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03)}
.product img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-bottom:0.5rem}
.product h3{margin:0 0 .25rem 0}
.badge{display:inline-block;padding:0.25rem .5rem;border-radius:999px;background:rgba(124,58,237,0.14);color:var(--accent-2);font-weight:600;font-size:0.8rem}
.muted{color:var(--muted)}

.flavors-list{display:flex;flex-wrap:wrap;gap:0.5rem}
.flavor-pill{background:rgba(255,255,255,0.03);padding:.45rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,0.02);cursor:pointer;color:var(--muted);transition:all .15s}
.flavor-pill:hover{transform:translateY(-3px);color:#fff}
.flavor-pill.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none}

.legend{display:flex;gap:1rem;align-items:center}
.legend .dot{width:12px;height:12px;border-radius:50%}
.dot-high{background:var(--accent)}.dot-heavy{background:#f59e0b}.dot-relax{background:#10b981}

.legal-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.state-pill{background:rgba(255,255,255,0.02);padding:.4rem .6rem;border-radius:8px;color:var(--muted);cursor:pointer;border:1px solid rgba(255,255,255,0.02)}
.state-pill.allowed{background:rgba(16,185,129,0.12);color:#8ef0c7}
.state-pill.banned{background:rgba(255,107,107,0.08);color:#ffb3b3}

.prices-table{width:100%;border-collapse:collapse}
.prices-table th,.prices-table td{padding:.6rem .75rem;border-bottom:1px solid rgba(255,255,255,0.03);text-align:left}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:2rem 0;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.footer-grid a{color:var(--muted);text-decoration:none}
.copyright{text-align:center;color:var(--muted);margin-top:1rem}

@media(max-width:900px){
    .hero{grid-template-columns:1fr}
    .main-nav{display:none}
    .footer-grid{grid-template-columns:1fr}
}