/* Root & Global Settings */
:root{
  --primary-blue:#0d1be0;
  --accent-red:#ff4d4f;
  --dark-blue:#070863;
  --gradient:linear-gradient(135deg,var(--dark-blue),var(--primary-blue));
  --gray-100:#f7f7f9;
  --gray-900:#1a1a1a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--gray-900);
  font-size:16px;line-height:1.55;
  background:#fff;
  scroll-behavior:smooth;
}
img,svg,video{max-width:100%;height:auto;display:block}
.container{max-width:1200px;width:100%;margin:auto;padding:0 1rem}
.btn{
  display:inline-block;
  padding:12px 24px;
  font-weight:600;
  font-size:16px;
  border-radius:6px;
  transition:transform .2s,box-shadow .2s;
  text-decoration:none;
  text-align:center;
  color:#fff;
  background:var(--gradient);
}
.btn--primary{background:var(--gradient)}
.btn--secondary{background:var(--accent-red)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,.15)}
/* === Section: Header === */
.header{position:sticky;top:0;z-index:999;background:#fff;transition:box-shadow .3s}
.header.is-scrolled{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.header__content{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.header__brand{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--gray-900);text-decoration:none}
.header__nav{display:flex;align-items:center;gap:1.5rem}
.nav__link{color:var(--gray-900);text-decoration:none;font-weight:500;position:relative}
.nav__link::after{content:"";position:absolute;width:0;height:2px;background:var(--primary-blue);left:0;bottom:-4px;transition:width .2s}
.nav__link:hover::after{width:100%}
/* === Section: Hero === */
.hero{padding:4rem 0 0;background:var(--gradient);color:#fff;position:relative}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem}
.eyebrow{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.hero h1{font-size:clamp(2rem,4vw,2.75rem);margin-bottom:1rem}
.hero p{margin-bottom:1.25rem;max-width:40ch}
.hero__cta{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.stars{font-size:1.2rem;color:gold}
.trust-bullet{font-size:.9rem;font-weight:500}
.hero__media img{border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.3)}
.wave{display:block;width:100%;height:80px;margin-top:3rem}
.wave path{fill:#fff}
.wave--top path{fill:var(--gray-100)}
/* === Section: Features === */
.features{padding:4rem 0;background:#fff}
.features__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.feature-card{text-align:center;padding:2rem 1.5rem;border-radius:12px;background:var(--gray-100)}
.feature-card h3{margin:1rem 0 .5rem;font-size:1.25rem}
.feature-icon{display:block;font-size:2.5rem;margin:0 auto .75rem;text-align:center}
.lottie,.icon-privacy{display:none}
/* === Section: How It Works === */
.how{padding:4rem 0;background:var(--gray-100);scroll-margin-top:100px}
.how__steps{counter-reset:step;display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap;padding:0 .5rem}
.how__steps li{list-style:none;flex:1 1 200px;background:#fff;padding:2rem;border-radius:12px;position:relative;font-weight:500}
.how__steps li::before{counter-increment:step;content:counter(step);position:absolute;top:-1.25rem;left:-1.25rem;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
/* === Section: Audio Demo === */
.audio-demo{padding:4rem 0}
.audio-demo figure{display:flex;flex-direction:column;align-items:center;gap:1rem}
/* === Section: Social Proof === */
.social-proof{background:var(--gray-100);padding:2.5rem 0}
.social-proof__content{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}
.badge{background:var(--primary-blue);color:#fff;padding:.5rem 1rem;border-radius:999px;font-weight:600}
.logo-placeholder{opacity:.6;font-weight:600}
/* === Section: FAQ === */
.faq{padding:4rem 0 2rem}
.faq__title{text-align:center;margin-bottom:2rem;font-size:1.75rem}
.faq details{background:var(--gray-100);padding:1rem 1.5rem;border-radius:8px;margin-bottom:1rem}
.faq summary{cursor:pointer;font-weight:600;outline:none}
/* === Section: Affiliate === */
.affiliate{padding:2rem 0}
.affiliate__card{background:var(--gray-100);padding:1.5rem;border-left:6px solid var(--accent-red);border-radius:6px;text-align:center;font-weight:500}
.affiliate a{color:var(--primary-blue)}
/* === Section: CTA Bar === */
.cta-bar{background:var(--gradient);color:#fff;padding:3rem 0;text-align:center}
.cta-bar__content{display:flex;flex-direction:column;gap:1rem;align-items:center}
.cta-bar h2{font-size:1.75rem}
/* === Section: Footer === */
.footer{background:var(--gray-100);position:relative;padding:3rem 0 1rem;text-align:center}
.footer__grid{display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.5rem}
.footer__nav{display:flex;gap:1.5rem}
.footer__link{color:var(--gray-900);text-decoration:none;font-weight:500}
.footer__social{display:flex;gap:1rem}
.social-icon{color:var(--gray-900);opacity:.8}
.social-icon:hover{opacity:1}
.footer__copy{font-size:.9rem;color:var(--gray-900)}
.disclaimer{font-size:.8rem;font-style:italic;color:var(--gray-900);margin-top:.5rem}
.wave--top{display:none}
/* === Media Queries === */
@media (max-width:767px){
  body{overflow-x:hidden}
  .hero__grid{grid-template-columns:1fr}
  .header__nav{gap:.5rem;flex-wrap:wrap}
  .header__nav .nav__link{display:none}
  .btn{font-size:14px;padding:10px 20px}
  .how__steps{flex-direction:column}
  .how__steps{gap:1rem}
  .how__steps li{padding:1rem 1.25rem}
  .header__content{padding:.75rem 1.25rem}
  .footer{padding-bottom:1rem}
  .footer__grid{margin-bottom:1rem}
  .footer__nav{flex-wrap:wrap;justify-content:center;gap:.75rem}
}
/* END STYLES */ 