* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#090909;
  --card:#111111;
  --card-2:#171717;
  --line:rgba(255,255,255,.08);
  --text:#faf7f2;
  --muted:rgba(255,255,255,.68);
  --soft:rgba(255,255,255,.46);
  --accent:#ff4d00;
  --accent-2:#ff934d;
  --green:#16a34a;
  --shadow:0 20px 70px rgba(0,0,0,.35);
  --radius:24px;
  --max:1180px;
}

html { scroll-behavior: smooth; }
body{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,77,0,.18), transparent 35%),
    radial-gradient(circle at 85% 20%, rgba(255,147,77,.08), transparent 28%),
    var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}

h1,h2,h3,h4,.logo,.btn,.eyebrow,.section-tag,.pill,.stat-value{ font-family:'Inter',sans-serif; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{ width:min(var(--max), calc(100% - 2rem)); margin:0 auto; }
.section{ padding: 5.5rem 0; }
.grid{ display:grid; gap:1.5rem; }

.topbar{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(14px);
  background:rgba(9,9,9,.72);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0;
  gap:1rem;
}
.logo{ font-weight:800; font-size:1.3rem; letter-spacing:-.03em; font-family:'Inter',sans-serif; }
.logo span{ color:var(--accent); }
.topbar-right{ display:flex; align-items:center; gap:.8rem; }
.mini-proof{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  padding:.6rem .9rem; border-radius:999px;
  color:var(--muted); font-size:.86rem;
  white-space:nowrap;
}
.mini-proof-dot{
  width:.55rem; height:.55rem; border-radius:999px; background:var(--green);
  box-shadow:0 0 0 6px rgba(22,163,74,.12);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.4rem; border-radius:14px; border:1px solid transparent;
  font-weight:700; letter-spacing:-.02em; transition:.22s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#ff6f1e);
  color:white; box-shadow:0 12px 30px rgba(255,77,0,.22);
}
.btn-primary:hover{ filter:brightness(1.03); }
.btn-secondary{
  border-color:var(--line); background:rgba(255,255,255,.03); color:var(--text);
}
.btn-secondary:hover{ border-color:rgba(255,255,255,.18); }
.btn-sticky{
  position:fixed; bottom:18px; right:18px; z-index:1000;
  box-shadow:0 18px 50px rgba(255,77,0,.22);
}

.hero{ padding: 4rem 0 4.5rem; position:relative; }
.hero-grid{
  display:grid; grid-template-columns: 1.12fr .88fr; gap:2rem; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--accent); text-transform:uppercase; letter-spacing:.12em;
  font-size:.76rem; font-weight:700; margin-bottom:1.3rem;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--accent);
}
.hero h1{
  font-size: clamp(2.8rem, 7vw, 6.2rem);
  line-height:.92; letter-spacing:-.05em; font-weight:800;
  max-width: 9.6ch;
}
.hero h1 em{ color:var(--accent); font-style:normal; }
.hero-lead{
  margin-top:1.2rem; font-size:1.18rem; color:var(--muted);
  max-width: 36rem;
}
.hero-punch{
  margin-top:1rem; color:#ffd2bd; font-size:1rem;
  max-width:36rem; padding:.95rem 1rem; border:1px solid rgba(255,77,0,.15);
  background:linear-gradient(180deg, rgba(255,77,0,.10), rgba(255,77,0,.04));
  border-radius:16px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.7rem; }
.hero-proof{
  display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem;
}
.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  padding:.7rem 1rem; border-radius:999px; color:var(--muted); font-size:.92rem;
}

.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:28px; padding:1.25rem;
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.hero-card::before{
  content:""; position:absolute; inset:auto -10% 80% auto; width:220px; height:220px;
  background:radial-gradient(circle, rgba(255,77,0,.26), transparent 65%);
  pointer-events:none;
}
.mock-window{ border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#0c0c0c; }
.mock-top{
  display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem;
  border-bottom:1px solid var(--line); background:#111;
}
.mock-dots{ display:flex; gap:.45rem; }
.mock-dots span{ width:.68rem; height:.68rem; border-radius:999px; background:#333; }
.mock-badge{ color:var(--accent-2); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.mock-body{ padding:1rem; }
.product-card{
  background:linear-gradient(180deg,#1a1a1a,#101010); border:1px solid var(--line);
  border-radius:20px; overflow:hidden;
}
.product-image{
  height:240px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(135deg, #2a1008, #130d0b 45%, #2a1208);
  display:flex; align-items:center; justify-content:center;
  font-size:4rem;
}
.product-info{ padding:1rem; }
.price-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.price{ font-family:'Inter',sans-serif; font-size:2rem; font-weight:800; letter-spacing:-.04em; }
.old-price{ color:var(--soft); text-decoration:line-through; font-size:.98rem; }
.timer{ margin-top:1rem; border:1px solid var(--line); border-radius:16px; padding:1rem; background:rgba(255,255,255,.03); }
.timer-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.8rem; color:var(--muted); font-size:.9rem; }
.progress{ height:10px; border-radius:999px; background:#1f1f1f; overflow:hidden; }
.progress-bar{ width:74%; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.leaderboard{ margin-top:1rem; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.leaderboard-row{
  display:grid; grid-template-columns: 48px 1fr auto; gap:.8rem;
  padding:.9rem 1rem; border-top:1px solid var(--line); align-items:center;
  background:rgba(255,255,255,.02);
}
.leaderboard-row:first-child{ border-top:none; }
.rank{ font-family:'Inter',sans-serif; font-size:1.1rem; font-weight:800; color:var(--accent-2); }
.tag{ border:1px solid rgba(255,77,0,.2); color:#ffd5c2; background:rgba(255,77,0,.08); border-radius:999px; padding:.25rem .55rem; font-size:.74rem; }

.section-tag{
  display:inline-flex; align-items:center; gap:.55rem; color:var(--accent);
  text-transform:uppercase; letter-spacing:.11em; font-size:.76rem; font-weight:700; margin-bottom:1rem;
}
.section-tag::before{ content:""; width:28px; height:1px; background:var(--accent); }
.section-title{
  font-size: clamp(2rem, 4.6vw, 3.8rem); line-height:1.02; letter-spacing:-.045em; font-weight:800;
  max-width: 12ch;
}
.section-sub{ margin-top:1rem; color:var(--muted); max-width:42rem; font-size:1.05rem; }

.alert-strip{
  padding:1rem 1.1rem; border-radius:18px; border:1px solid rgba(255,77,0,.15);
  background:linear-gradient(180deg, rgba(255,77,0,.10), rgba(255,77,0,.04));
  color:#ffd5c2; margin-top:1.2rem; max-width:56rem;
}

.pain-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1rem; margin-top:2.2rem; }
.pain-card, .result-card, .buyer-card, .psych-card, .step-card, .testimonial, .price-card{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:22px; padding:1.35rem;
}
.pain-card h3, .result-card h3, .buyer-card h3, .psych-card h3, .step-card h3, .price-card h3{
  font-size:1.08rem; letter-spacing:-.02em; margin-bottom:.5rem;
}
.pain-card p, .result-card p, .buyer-card p, .psych-card p, .step-card p, .price-card p{
  color:var(--muted); font-size:.96rem;
}

.split{
  display:grid; grid-template-columns: 1fr 1fr; gap:1.4rem; align-items:start; margin-top:2.2rem;
}

.steps-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:1rem; margin-top:2.1rem; }
.step-no{ font-size:3rem; line-height:1; color:rgba(255,255,255,.08); font-weight:800; margin-bottom:.6rem; }

.psych-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:1rem; margin-top:2rem; }
.psych-icon, .buyer-icon, .pain-icon, .result-icon{ font-size:1.35rem; margin-bottom:.85rem; }

.result-grid, .buyer-grid, .testimonials-grid, .pricing-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:1rem; margin-top:2rem;
}
.testimonial p{ color:var(--text); font-size:1.02rem; line-height:1.65; }
.testimonial small{ display:block; margin-top:1rem; color:var(--soft); }

.stats-band{
  margin-top:2rem; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:1rem;
}
.stat-card{
  background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:20px; padding:1.25rem;
}
.stat-value{ font-size:2rem; font-weight:800; letter-spacing:-.04em; }
.stat-label{ color:var(--soft); margin-top:.25rem; font-size:.9rem; }

.pricing-grid{ align-items:stretch; }
.price-card.featured{ border-color:rgba(255,77,0,.26); background:linear-gradient(180deg, rgba(255,77,0,.10), rgba(255,255,255,.025)); position:relative; }
.featured-badge{
  position:absolute; top:14px; right:14px; background:var(--accent); color:#fff;
  border-radius:999px; font-size:.72rem; font-weight:700; padding:.35rem .6rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.plan-price{ font-family:'Inter',sans-serif; font-size:3rem; font-weight:800; letter-spacing:-.05em; margin:.5rem 0; }
.plan-period{ color:var(--soft); margin-bottom:1rem; }
.plan-list{ list-style:none; display:grid; gap:.7rem; margin-top:1rem; }
.plan-list li{ color:var(--muted); position:relative; padding-left:1.25rem; }
.plan-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; }

.faq{
  margin-top:2rem; display:grid; gap:1rem;
}
details{
  border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); padding:1rem 1.15rem;
}
summary{ cursor:pointer; font-family:'Inter',sans-serif; font-weight:700; letter-spacing:-.02em; }
details p{ margin-top:.8rem; color:var(--muted); }

.final-cta{
  padding:5.5rem 0 6rem;
}
.final-box{
  border:1px solid rgba(255,77,0,.18);
  background:linear-gradient(180deg, rgba(255,77,0,.12), rgba(255,255,255,.025));
  border-radius:30px; padding:2rem; box-shadow:var(--shadow);
  text-align:center;
}
.final-box h2{
  font-size: clamp(2.2rem, 5vw, 4.6rem); letter-spacing:-.05em; line-height:.96;
  max-width: 12ch; margin:0 auto;
}
.final-box p{ margin:1rem auto 1.6rem; color:var(--muted); max-width:42rem; font-size:1.08rem; }
.final-buttons{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

footer{
  padding:1.4rem 0 3rem; color:var(--soft); border-top:1px solid var(--line);
}
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

.fade-up{ opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; }
.fade-up.show{ opacity:1; transform:translateY(0); }

@media (max-width: 1100px){
  .hero-grid, .split{ grid-template-columns:1fr; }
  .steps-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psych-grid, .result-grid, .buyer-grid, .testimonials-grid, .pricing-grid, .stats-band{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px){
  .mini-proof{ display:none; }
  .hero{ padding-top:2.5rem; }
  .section{ padding:4rem 0; }
  .pain-grid, .steps-grid, .psych-grid, .result-grid, .buyer-grid, .testimonials-grid, .pricing-grid, .stats-band{ grid-template-columns:1fr; }
  .hero-card{ padding:.8rem; }
  .product-image{ height:220px; }
  .btn-sticky{ left:12px; right:12px; bottom:12px; width:auto; }
  .topbar-inner{ padding:.9rem 0; }
  .topbar-right .btn{ padding:.9rem 1rem; }
}
