@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap');

:root{
  --navy-900:#0b1a3a;
  --navy-800:#142c5c;
  --navy-700:#1c3a75;
  --yellow:#f7b217;
  --yellow-dark:#e69b00;
  --orange:#f0801f;
  --surface:#ffffff;
  --surface-alt:#eef1f6;
  --ink:#16213e;
  --ink-soft:#5a6478;
  --line:#dfe4ec;
  --radius:14px;
  --shadow:0 18px 40px -18px rgba(11,26,58,.35);
  --shadow-sm:0 8px 20px -10px rgba(11,26,58,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--surface);
  color:var(--ink);
  font-family:'Nunito Sans', system-ui, -apple-system, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
h1,h2,h3,h4{
  font-family:'Montserrat', system-ui, sans-serif;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.01em;
}
p{margin:0}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
section{padding:64px 0}

.eyebrow{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--yellow);
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:1rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--navy-900);
  background:linear-gradient(180deg,#ffcb4d,var(--yellow) 60%,var(--yellow-dark));
  border:none;
  border-radius:999px;
  padding:1.05rem 2.4rem;
  box-shadow:0 14px 30px -10px rgba(230,155,0,.55);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(230,155,0,.65)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn-sub{
  display:block;
  text-align:center;
  font-size:.78rem;
  color:var(--ink-soft);
  margin-top:.6rem;
}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(31,63,133,.55), transparent 60%),
    linear-gradient(180deg,var(--navy-900),var(--navy-800));
  color:#fff;
  padding:40px 0 56px;
  text-align:center;
}
.hero .banner{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:clamp(1rem,2.4vw,1.3rem);
  color:var(--yellow);
  letter-spacing:.03em;
  margin-bottom:.9rem;
}
.hero h1{
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  font-weight:800;
  color:#fff;
  max-width:760px;
  margin:0 auto 2rem;
}
.hero-art{
  position:relative;
  max-width:520px;
  margin:0 auto 1.8rem;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  aspect-ratio:16/10;
}
.hero-art video{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}
.hero h2.sub{
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  font-weight:800;
  color:#fff;
  max-width:760px;
  margin:.4rem auto 1.8rem;
}
.hero h2.sub em{
  font-style:normal;
  color:var(--yellow);
}

/* ---------- COURSE TITLE STRIP ---------- */
.course-strip{
  text-align:center;
  padding:56px 0 8px;
}
.course-strip .eyebrow{color:var(--orange)}
.course-strip h2{
  font-size:clamp(1.3rem,3vw,1.7rem);
  font-weight:800;
  color:var(--navy-900);
  margin-top:.3rem;
}
.book-cover{
  margin:2rem auto 0;
  width:220px;
  height:auto;
  border-radius:6px;
  box-shadow:var(--shadow);
}

/* ---------- ABOUT + CONTENT ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr} }

.about-grid h3{
  font-size:1.3rem;
  font-weight:700;
  color:var(--ink);
  text-align:center;
  margin-bottom:1.6rem;
}
.about-grid h3 .hl{color:var(--orange)}

.certificate{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:22px;
  display:flex;
  gap:18px;
  align-items:center;
  margin-bottom:1.4rem;
}
.certificate .seal{
  flex:0 0 auto;
  width:88px;
  height:88px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.3);
}
.certificate .seal img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.certificate .body h4{font-size:.98rem;color:var(--navy-900)}
.certificate .body p{font-size:.85rem;color:var(--ink-soft);margin-top:.2rem}

.about-grid p.copy{color:var(--ink-soft);font-size:.95rem;margin-bottom:1rem}
.callout{
  background:var(--surface-alt);
  border-left:4px solid var(--orange);
  border-radius:8px;
  padding:12px 16px;
  font-size:.85rem;
  font-weight:700;
  color:var(--navy-900);
  text-align:center;
}

.content-list{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.content-list li{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  font-size:.88rem;
  color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.content-list .ico{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--navy-900);
  display:flex;align-items:center;justify-content:center;
}
.content-list .ico svg{width:14px;height:14px}

/* ---------- TESTIMONIALS ---------- */
.testi-section{background:var(--surface-alt)}
.testi-section h2{
  text-align:center;font-size:clamp(1.2rem,2.8vw,1.5rem);
  color:var(--navy-900);font-weight:800;margin-bottom:2rem;
}
.video-frame{
  max-width:280px;margin:0 auto 2.4rem;
  aspect-ratio:9/16;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.video-frame video{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}
.testi-lead{
  text-align:center;font-weight:800;color:var(--navy-900);
  font-family:'Montserrat',sans-serif;
  max-width:620px;margin:0 auto 2.2rem;font-size:1rem;
}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){ .testi-grid{grid-template-columns:1fr} }
.testi-card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:20px;
}
.testi-card .who{display:flex;align-items:center;gap:10px;margin-bottom:.8rem}
.avatar{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-900));
  background-size:cover;
  background-position:center;
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:.85rem;
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-lg{width:64px;height:64px}
.testi-card .name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.88rem;color:var(--navy-900)}
.testi-card .stars{color:var(--yellow-dark);font-size:.75rem;letter-spacing:.1em}
.testi-card p{font-size:.85rem;color:var(--ink-soft)}

/* ---------- BONUS ---------- */
.bonus-section{
  background:linear-gradient(180deg,var(--navy-900),var(--navy-800));
  color:#fff;
  text-align:center;
}
.bonus-section h2{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:800;margin-bottom:2.4rem}
.bonus-section h2 span{color:var(--yellow)}
.bonus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:820px;margin:0 auto}
@media (max-width:820px){ .bonus-grid{grid-template-columns:1fr} }
.bonus-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:22px 16px;
  text-align:left;
}
.bonus-card .n{
  width:40px;height:40px;border-radius:10px;
  background:var(--yellow);color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-family:'Montserrat',sans-serif;margin-bottom:1rem;
}
.bonus-card h4{font-size:.92rem;font-weight:700;color:#fff;margin-bottom:.3rem}
.bonus-card p{font-size:.78rem;color:#c7cfe6;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.bonus-card p.free{color:var(--yellow)}

/* ---------- PRICING ---------- */
.pricing-section{text-align:center}
.pricing-section .kicker{font-size:clamp(1.15rem,2.8vw,1.5rem);font-weight:800;color:var(--navy-900);margin-bottom:2.4rem}
.pricing-section .kicker .hl{color:var(--orange);text-decoration:underline;text-underline-offset:4px}
.price-card{
  max-width:400px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:32px 28px;
}
.price-card .book-cover{width:150px;margin:1.2rem auto}
.price-card .was{font-size:.85rem;color:var(--ink-soft);text-decoration:line-through}
.price-card .now-label{font-size:.8rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-top:.6rem}
.price-card .now{
  font-family:'Montserrat',sans-serif;font-weight:900;color:var(--navy-900);
  font-size:2.6rem;margin:.2rem 0;
}
.price-card .now sup{font-size:1.1rem;top:-1em}
.price-card .install{font-size:.8rem;color:var(--ink-soft);margin-bottom:1.4rem}
.lock-note{font-size:.72rem;color:var(--ink-soft);margin-top:.7rem}

/* ---------- GUARANTEE ---------- */
.guarantee-section{
  background:var(--surface-alt);
  text-align:center;
}
.guarantee-section h2{font-size:clamp(1.2rem,2.8vw,1.5rem);font-weight:800;color:var(--navy-900);margin-bottom:2rem}
.seal-big{
  width:160px;
  margin:0 auto 1.6rem;
  filter:drop-shadow(0 14px 30px rgba(230,155,0,.4));
}
.guarantee-section p{max-width:480px;margin:0 auto;color:var(--ink-soft);font-size:.92rem}

/* ---------- FOOTER / FINAL CTA ---------- */
.final-cta{
  background:linear-gradient(180deg,var(--navy-800),var(--navy-900));
  color:#fff;text-align:center;
}
.final-cta h2{font-size:clamp(1.2rem,2.8vw,1.6rem);font-weight:800;margin-bottom:.6rem}
.final-cta p{color:#c7cfe6;font-size:.9rem;max-width:480px;margin:0 auto 2rem}
.site-footer{
  background:var(--navy-900);
  color:#8ea0c9;
  text-align:center;
  font-size:.72rem;
  padding:26px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.site-footer p{margin:.2rem 0}

.note{
  max-width:1040px;margin:0 auto;padding:0 24px 8px;
  font-size:.7rem;color:var(--ink-soft);text-align:center;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:600px){
  section{padding:48px 0}
  .wrap{padding:0 18px}
  .btn{width:100%;padding:1rem 1.6rem}
  .video-frame{max-width:220px}
}