/* ===== StealthGrow – Global Styles (v2) ===== */
:root{
  --bg:#0b1220;          /* very dark blue/black */
  --card:#111827;        /* Slate 900 */
  --muted:#1f2937;       /* Slate 800 */
  --line:#27334a;        /* accent line */
  --text:#e5e7eb;        /* Slate 200 */
  --sub:#9ca3af;         /* Slate 400 */
  --brand:#10b981;       /* Emerald 500 */
  --brand-600:#059669;   /* Emerald 600 */
  --warn:#f59e0b;        /* Amber 500 */
  --danger:#ef4444;      /* Red 500 */
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --header-h:64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0b1220 0%,#0e1626 100%);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}

/* Smooth scroll + offset for sticky header (prevents cut anchors) */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 14px)}

.container{max-width:1200px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.15rem;border-radius:999px;border:1px solid transparent;background:var(--brand);color:#081317;font-weight:700;box-shadow:var(--shadow);transition:.2s;cursor:pointer}
.btn:hover{transform:translateY(-1px);background:var(--brand-600)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn.secondary{background:transparent;border-color:var(--line);color:var(--text);box-shadow:none}

/* Header */
header{position:sticky;top:0;z-index:40;background:rgba(8,13,24,.7);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(255,255,255,.06);height:var(--header-h)}
.nav{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0}
.brand{display:flex;align-items:center;gap:.75rem}
.logo{width:36px;height:36px;border-radius:12px;background:radial-gradient(120% 120% at 10% 20%, #1e293b 0%, #0b1220 45%, #10b981 46%, #0b1220 47%), conic-gradient(from 180deg at 50% 50%, #10b981 0deg, #059669 180deg, #10b981 360deg);box-shadow:0 0 0 2px rgba(16,185,129,.2)}
.brand h1{font-size:1.1rem;letter-spacing:.5px;margin:0}
.menu{display:flex;gap:1.25rem}
.menu a{color:var(--sub)}
.menu a:hover{color:var(--text)}

/* Hero */
.hero{position:relative;padding:64px 0 36px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.badge{display:inline-flex;gap:.5rem;align-items:center;border:1px solid var(--line);color:var(--sub);padding:.4rem .75rem;border-radius:999px;font-size:.85rem}
.title{font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.1;margin:.75rem 0 1rem;font-weight:800;letter-spacing:.2px}
.title span{color:var(--brand)}
.lead{color:#c5ced8;max-width:60ch}
.hero-actions{display:flex;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}
.hero-visual{border-radius:var(--radius);background:linear-gradient(120deg,#0b1220 0%,#0f1a2b 50%,#0b1220 100%);border:1px solid var(--line);padding:18px;box-shadow:var(--shadow);position:relative}
.case{background:linear-gradient(165deg,#0f172a 0%,#111827 60%,#0b1220 100%);border:1px solid #243045;border-radius:16px;padding:28px;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}
.case .door{height:220px;border-radius:12px;background:linear-gradient(180deg,#0f172a,#0a1220);border:1px solid #1f2b40;position:relative}
.case .door:before{content:"";position:absolute;inset:8px;border-radius:10px;border:1px dashed rgba(255,255,255,.08)}
.case .body{height:220px;border-radius:12px;background:linear-gradient(180deg,#0f172a,#0a1220);border:1px solid #1f2b40;display:grid;place-items:center}
.case .body .plant{width:84px;height:84px;border-radius:50%;background:radial-gradient(#10b981 0%,#0b1220 60%)}
.microcopy{margin-top:10px;color:var(--sub);font-size:.85rem}

/* Sections */
section{padding:48px 0;border-top:1px solid rgba(255,255,255,.06)}
h2{font-size:clamp(1.4rem,2.2vw,2rem);margin:0 0 14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,#0b1220,#0f172a);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}

/* Product cards */
.product{display:flex;flex-direction:column;gap:12px}
.chip{font-size:.75rem;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem;display:inline-flex;gap:.4rem;align-items:center}
.price{font-size:1.25rem;font-weight:800}
.muted{color:var(--sub)}
.prod-img{height:180px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0f172a}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Comparison table */
.table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.table th,.table td{padding:14px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.table th{background:#0e1626;color:#cfe8dd}

/* FAQ */
details{border:1px solid var(--line);border-radius:12px;padding:14px;background:linear-gradient(180deg,#0b1220,#0f172a)}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:600}

/* CTA banner */
.cta{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(90deg,#0b1220,#0f1f2f);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}

/* Footer */
footer{padding:36px 0;color:var(--sub)}

/* Cart Drawer */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:none}
.cart{position:fixed;top:0;right:-440px;width:420px;max-width:90vw;height:100vh;background:#0c1423;border-left:1px solid var(--line);box-shadow:var(--shadow);transition:right .25s ease;display:flex;flex-direction:column}
.cart header{position:static;background:transparent;border:0}
.cart.open{right:0}
.cart-overlay.show{display:block}
.cart-body{flex:1;overflow:auto;padding:16px}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.qty{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{background:transparent;border:0;color:var(--text);width:32px;height:32px;cursor:pointer}
.qty span{display:inline-grid;place-items:center;width:38px}
.cart-footer{padding:16px;border-top:1px solid rgba(255,255,255,.06)}

/* Checkout Drawer */
.checkout-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:none}
.checkout{position:fixed;top:0;right:-680px;width:660px;max-width:96vw;height:100vh;background:#0c1423;border-left:1px solid var(--line);box-shadow:var(--shadow);transition:right .25s ease;display:flex;flex-direction:column}
.checkout.open{right:0}
.checkout-body{flex:1;overflow:auto;padding:16px}
.step{display:none}
.step.active{display:block}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field input,.field select,.field textarea{background:#0b1220;border:1px solid var(--line);color:var(--text);padding:10px;border-radius:10px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.terms{font-size:.9rem;color:var(--sub)}

/* Legal pages */
.legal{max-width:900px;margin:0 auto}
.legal h2{margin-top:0}
.legal h3{margin-top:1.2rem}
.legal p,.legal li{color:var(--text)}
.note{background:#0e1626;border:1px solid var(--line);padding:10px;border-radius:10px;color:var(--sub)}

/* Tabs & Filters */
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:12px 0}
.tab{padding:.5rem .85rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--sub);cursor:pointer}
.tab.active{border-color:var(--brand);color:var(--text)}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:6px 0 16px}
.filters input[type="search"],.filters input[type="number"],.filters select{background:#0b1220;border:1px solid var(--line);color:var(--text);padding:.6rem .8rem;border-radius:10px}
.filters label{color:var(--sub);font-size:.9rem}

/* Product Detail Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:none}
.modal-overlay.show{display:block}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(960px,95vw);max-height:90vh;overflow:auto;background:#0c1423;border:1px solid var(--line);border-radius:var(--radius);display:none;box-shadow:var(--shadow)}
.modal.open{display:block}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.modal .body{padding:16px}
.pdp-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}
.pdp-meta{color:var(--sub);font-size:.9rem}
.pdp-qty{display:inline-flex;gap:8px;align-items:center}
.pdp-qty input{width:80px;background:#0b1220;border:1px solid var(--line);color:var(--text);padding:.5rem;border-radius:10px}

/* Toast */
.toast{position:fixed;right:16px;bottom:16px;background:#0e1626;border:1px solid var(--line);padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(10px);transition:.2s;color:var(--text);box-shadow:var(--shadow);z-index:50}
.toast.show{opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .menu{display:none}
  .pdp-grid{grid-template-columns:1fr}
}