:root{
  --pink:#FF0066;
  --yellow:#FFE600;
  --cyan:#00D1FF;
  --violet:#6A00FF;
  --black:#0f0f12;
  --ink:#1a1a1f;
  --paper:#ffffff;
  --soft:#f5f5f7;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  line-height:1.6;
  background:var(--paper);
}

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(15,15,18,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.topbar-inner{
  max-width:1200px;margin:0 auto;
  padding:.8rem 1.2rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
}
.logo{
  color:#fff;font-weight:800;letter-spacing:.08em;
  font-size:.95rem;
}
.toplinks{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.toplinks a{
  color:rgba(255,255,255,.9);
  text-decoration:none;
  font-size:.9rem;
}
.toplinks a:hover{color:#fff;text-decoration:underline}
.btn-mini{
  background:var(--pink);
  padding:.45rem .8rem;
  border-radius:999px;
  font-weight:800;
  color:#fff !important;
  text-decoration:none !important;
}

.container{max-width:1200px;margin:0 auto;padding:0 1.2rem}
.narrow{max-width:820px;margin:0 auto}
.center{text-align:center}

.section{padding:5.5rem 0}
.section h2{
  font-size:clamp(1.6rem,2.4vw,2.2rem);
  line-height:1.15;
  margin-bottom:1.2rem;
}
.prose p{margin:.9rem 0}
.lead{font-size:1.1rem;opacity:.95}
.muted{opacity:.78}
.closing{margin-top:1.2rem;font-size:1.15rem}

.btn-primary{
  display:inline-block;
  margin-top:1.2rem;
  background:var(--pink);
  color:#fff;
  padding:1rem 2.2rem;
  text-decoration:none;
  font-weight:900;
  border-radius:999px;
  box-shadow:0 12px 30px rgba(255,0,102,.25);
  transition:transform .12s ease, filter .12s ease;
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.02)}
.btn-ghost{
  display:inline-block;
  margin-top:1.2rem;
  border:2px solid rgba(255,255,255,.75);
  color:#fff;
  padding:.92rem 2.0rem;
  text-decoration:none;
  font-weight:800;
  border-radius:999px;
  margin-left:.7rem;
}
.btn-ghost:hover{border-color:#fff}

.list{margin:1rem 0 0;padding-left:1.2rem}
.list li{margin:.45rem 0}
.list.compact li{margin:.28rem 0}
.list.check{list-style:none;padding-left:0}
.list.check li{padding-left:2rem;position:relative}
.list.check li:before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--pink);font-weight:900;
}

.hero{
  min-height:100vh;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:center;
}
.overlay{position:absolute;inset:0;background:linear-gradient(120deg, rgba(15,15,18,.86), rgba(15,15,18,.35))}
.overlay.light{background:linear-gradient(120deg, rgba(255,230,0,.62), rgba(255,0,102,.28))}
.overlay.soft{background:linear-gradient(120deg, rgba(255,255,255,.78), rgba(255,255,255,.56))}
.overlay.soft.dark{background:linear-gradient(120deg, rgba(15,15,18,.84), rgba(15,15,18,.52))}

.hero-content{
  position:relative;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  align-items:center;
  gap:2.2rem;
  padding:5rem 0;
}
.kicker{
  display:inline-block;
  color:rgba(255,255,255,.92);
  font-weight:800;
  letter-spacing:.02em;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:.5rem .9rem;
  border-radius:999px;
  margin-bottom:1rem;
}
.hero h1{
  color:#fff;
  font-size:clamp(2.0rem,4.2vw,3.4rem);
  line-height:1.06;
  margin-bottom:1rem;
}
.hero .lead{color:rgba(255,255,255,.92);max-width:60ch}
.actions{margin-top:1.1rem}
.benefits{margin-top:1.3rem;display:grid;gap:.65rem}
.benefit{
  display:flex;gap:.7rem;align-items:flex-start;
  color:rgba(255,255,255,.92);
  font-weight:600;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:.7rem .85rem;
  border-radius:14px;
}
.dot{
  width:12px;height:12px;border-radius:50%;
  background:conic-gradient(from 90deg, var(--yellow), var(--pink), var(--cyan), var(--violet), var(--yellow));
  margin-top:.35rem;flex:0 0 auto;
}
.hero-badge{justify-self:end}
.badge-card{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:1.2rem 1.2rem 1.1rem;
  color:#fff;
  width:min(380px, 100%);
  backdrop-filter: blur(10px);
}
.badge-title{font-weight:900;letter-spacing:.08em}
.badge-sub{opacity:.92;margin-top:.25rem}
.badge-line{height:1px;background:rgba(255,255,255,.22);margin:1rem 0}
.badge-points div{margin:.5rem 0}

.pain{background:var(--soft)}
.desired{position:relative;background-size:cover;background-position:center}
.desired .container{position:relative}

.program{position:relative;background-size:cover;background-position:center}
.program .container{position:relative}

.testimonials{background:linear-gradient(135deg, var(--pink), var(--violet));color:#fff}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  margin-top:1.6rem;
}
.card{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:1.25rem 1.2rem;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.quote blockquote{font-size:1.05rem;line-height:1.4}
.quote figcaption{margin-top:.9rem;opacity:.85}

.sarah{background:linear-gradient(135deg, var(--yellow), rgba(255,230,0,.65))}
.split{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:2.2rem;
  align-items:center;
}
.media img{
  width:100%;
  border-radius:22px;
  box-shadow:0 22px 60px rgba(0,0,0,.25);
  border:6px solid rgba(255,255,255,.55);
}

.method{
  position:relative;
  background-size:cover;
  background-position:center;
  color:#fff;
}
.method .container{position:relative}
.method h2{color:#fff}
.method-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  margin-top:1.3rem;
}
.method-card{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.method-card h3{margin-bottom:.6rem;font-size:1.15rem}
.method-card p{opacity:.95}

.forwho{background:linear-gradient(135deg, rgba(0,209,255,.18), rgba(255,0,102,.10))}

.cta{background:var(--black);color:#fff}
.cta h2{color:#fff}

.footer{background:#09090b;color:rgba(255,255,255,.75);padding:1.6rem 0}
.footer-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (max-width: 980px){
  .hero-content{grid-template-columns:1fr;gap:1.4rem}
  .hero-badge{justify-self:start}
  .cards{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .btn-ghost{margin-left:0;margin-top:.8rem}
}


/* v4 additions */
.desired.desired-white { color: #fff; }
.desired.desired-white h2, .desired.desired-white p { color: #fff; text-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* hero layout after removing badge/benefits */
.hero-content { grid-template-columns: 1fr !important; max-width: 980px; }
.hero .actions { margin-top: 1.4rem; }

/* pain icons */
.pain-icons{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.9rem;
  margin-top:1.4rem;
}
.pain-item{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding: .85rem .95rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15,15,18,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.pain-ico{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,0,102,.14), rgba(0,209,255,.14));
  font-size: 18px;
  line-height: 1;
}
@media (max-width: 720px){
  .pain-icons{ grid-template-columns: 1fr; }
}

/* program section details */
.program-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.2rem 0 1.2rem;
}
.program-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,15,18,.08);
  border-radius: 18px;
  padding: 1rem 1rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.pc-title{ font-weight: 800; margin-bottom: .35rem; }
.pc-text{ opacity: .92; }

.dates{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.6rem;
  margin: 1rem 0 1.2rem;
}
.date{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,15,18,.08);
  border-radius: 14px;
  padding: .7rem .85rem;
  font-weight: 700;
}
.date span{ font-weight: 600; opacity: .82; margin-left: .35rem; }

.program-cta{ margin-top: 1.1rem; }

@media (max-width: 980px){
  .program-cards{ grid-template-columns: 1fr; }
  .dates{ grid-template-columns: 1fr; }
}
