:root{
  --bg:#050505;
  --panel:#0d0d0d;
  --panel-2:#101010;
  --gold:#d8b347;
  --gold-soft:#f1d678;
  --text:#f4f1eb;
  --muted:#bdb6ab;
  --line:rgba(216,179,71,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
}
.site-bg{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 20% 18%, rgba(216,179,71,.16), transparent 20%),
    radial-gradient(circle at 84% 26%, rgba(216,179,71,.13), transparent 22%),
    radial-gradient(circle at 50% 70%, rgba(216,179,71,.07), transparent 28%),
    #050505;
}
.container{width:min(1240px, calc(100% - 48px)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(14px);
  background:rgba(5,5,5,.85);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.nav{
  min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none}
.brand-mark{
  width:42px; height:42px; display:grid; place-items:center; border-radius:999px;
  background:var(--gold); color:#111; font-family:"Cormorant Garamond", serif; font-size:29px; font-weight:700;
}
.brand-text{
  font-family:"Cormorant Garamond", serif; font-size:38px; line-height:1; transform:translateY(-1px);
}
.menu{display:flex; gap:30px}
.menu a{color:#ddd4c8; text-decoration:none; font-weight:500}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 28px; border-radius:999px; text-decoration:none;
  font-weight:700; transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#111; box-shadow:0 12px 32px rgba(216,179,71,.18)}
.btn-dark{background:#111318; color:#fff; border:1px solid rgba(255,255,255,.09)}
.btn-outline{color:#fff; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02)}

.hero{padding:72px 0 56px}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.eyebrow{
  color:var(--gold-soft); text-transform:uppercase; letter-spacing:.12em; font-size:14px; font-weight:800; margin-bottom:16px;
}
h1,h2{
  font-family:"Cormorant Garamond", serif;
  line-height:.96; margin:0 0 18px; font-weight:600;
}
h1{font-size:88px; max-width:740px}
h1 span{color:var(--gold-soft)}
h2{font-size:68px}
.hero-copy p, .section-intro p, .product-copy p, .use-grid p, .faq-grid p{
  color:var(--muted); font-size:18px; line-height:1.8; max-width:760px;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin:28px 0 28px}
.stats{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; max-width:720px;
}
.stat-card{
  padding:18px 18px 16px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:18px;
}
.stat-card strong{display:block; font-size:23px; margin-bottom:8px; color:var(--gold-soft)}
.stat-card span{color:#d1c8bc}

.hero-visual{position:relative; min-height:760px; display:flex; align-items:center; justify-content:center}
.product-frame{
  background:#f4f4f4; width:min(520px, 100%); border-radius:34px; padding:40px 34px;
  box-shadow:0 40px 120px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03);
}
.product-frame img, .product-image-card img, .banner-preview img{display:block; width:100%; height:auto}
.floating-note{
  position:absolute; padding:18px 22px; border-radius:20px;
  background:rgba(39,39,39,.9); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 42px rgba(0,0,0,.3); color:#f0ece4; line-height:1.45;
}
.floating-note strong{color:var(--gold-soft); font-size:19px}
.note-1{left:-8px; top:150px}
.note-2{right:-6px; top:336px}
.note-3{left:36px; bottom:132px}

.strip{padding:8px 0 44px}
.strip-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.strip-card{
  padding:22px 24px; border:1px solid var(--line); border-radius:18px; color:#ddd4c7;
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.005));
}

.section{padding:76px 0}
.center{text-align:center}
.center p{margin-left:auto; margin-right:auto}
.benefit-grid, .ingredient-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.benefit-card, .ingredient-card{
  padding:28px; border-radius:24px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.006));
}
.benefit-card h3, .ingredient-card h3, .use-card h3, .dose-box h3, .warning-box h3{font-size:24px; margin:0 0 12px}
.benefit-card p, .ingredient-card p, .use-card p, .warning-box p{color:var(--muted); line-height:1.8; font-size:17px; margin:0}
.icon-dot{
  width:18px; height:18px; border-radius:999px; margin-bottom:18px;
  background:radial-gradient(circle at center, var(--gold-soft) 0 35%, var(--gold) 36% 100%);
  box-shadow:0 0 24px rgba(216,179,71,.55);
}

.product-section{padding-top:42px}
.product-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:42px; align-items:center;
}
.product-image-card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008));
  border:1px solid var(--line); border-radius:34px; padding:32px;
}
.product-image-card img{
  background:#f4f4f4; border-radius:22px; padding:28px;
}
.product-copy h2{font-size:76px}
.feature-list{list-style:none; padding:0; margin:24px 0 28px}
.feature-list li{
  position:relative; padding-left:28px; margin:12px 0; color:#ece6dd; font-size:21px;
}
.feature-list li::before{
  content:""; width:10px; height:10px; border-radius:999px; position:absolute; left:0; top:.62em;
  background:var(--gold);
}

.dose-box{
  margin-top:28px; padding:34px; border-radius:28px;
  background:linear-gradient(180deg, rgba(216,179,71,.12), rgba(255,255,255,.02));
  border:1px solid var(--line);
}
.dose-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:0 28px; margin-top:12px;
}
.dose-grid div{
  display:flex; justify-content:space-between; gap:20px; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dose-grid strong{font-size:16px; color:#f1ece3}
.dose-grid span{color:var(--gold-soft); white-space:nowrap}

.use-grid{display:grid; gap:30px}
.use-cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
.use-card{
  padding:28px; border-radius:22px; border:1px solid var(--line); background:rgba(255,255,255,.02);
}
.warning-box{
  padding:30px; border-radius:26px; background:#201912; border:1px solid rgba(216,179,71,.24);
}

.banner-preview{
  margin-top:26px; border-radius:26px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.38);
}
.faq-grid{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:34px; align-items:start;
}
.faq-items{display:grid; gap:16px}
details{
  border:1px solid var(--line); border-radius:18px; padding:22px 24px; background:rgba(255,255,255,.018);
}
summary{
  cursor:pointer; list-style:none; font-size:22px; font-weight:700;
}
summary::-webkit-details-marker{display:none}
details p{margin:14px 0 0; max-width:none}

@media (max-width: 1180px){
  h1{font-size:72px}
  h2{font-size:56px}
  .hero-grid,.product-grid,.faq-grid{grid-template-columns:1fr}
  .benefit-grid,.ingredient-grid{grid-template-columns:repeat(2,1fr)}
  .hero-visual{min-height:auto; padding-top:16px}
  .floating-note{position:static; margin-top:14px}
  .menu{display:none}
}
@media (max-width: 760px){
  .container{width:min(100% - 28px, 100%)}
  .site-header .btn-outline{display:none}
  .brand-text{font-size:30px}
  h1{font-size:52px}
  h2{font-size:42px}
  .stats,.strip-grid,.benefit-grid,.ingredient-grid,.use-cards,.dose-grid{grid-template-columns:1fr}
  .hero{padding-top:42px}
  .product-frame{padding:22px}
  .section{padding:56px 0}
}