
:root {
  --navy: #173453;
  --navy-dark: #102942;
  --blue: #2da9e8;
  --blue-deep: #176eb2;
  --sky: #eaf8ff;
  --coral: #f26859;
  --coral-soft: #fff0ec;
  --green: #57af68;
  --green-soft: #eef9ed;
  --purple: #8f62c4;
  --gold: #f4b83e;
  --cream: #fffaf0;
  --paper: #fffdf8;
  --text: #22354b;
  --muted: #5c6d7d;
  --border: #dce8ed;
  --shadow: 0 24px 70px rgba(30, 70, 96, 0.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Avenir Next", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.narrow { max-width: 820px; }
.center { text-align: center; }
.section { padding: 104px 0; }
.section-kicker,
.eyebrow {
  color: var(--blue-deep);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.section-kicker.coral { color: var(--coral); }
.section-kicker.green { color: var(--green); }
.section-kicker.purple { color: var(--purple); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--navy); line-height: 1.08; }
h2 { margin-bottom: 22px; font-size: clamp(2.2rem, 4vw, 3.45rem); letter-spacing: -0.04em; }
.section-intro { color: var(--muted); font-size: 1.08rem; line-height: 1.75; }

.topbar { position: relative; z-index: 20; background: var(--navy); color: white; }
.topbar-inner { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 0.83rem; letter-spacing: 0.02em; }
.topbar-inner > span:first-child { color: #ffd85d; }
.topbar-separator { opacity: 0.45; }

.hero { position: relative; overflow: hidden; background: linear-gradient(118deg, #fffdf8 0%, #f7fcff 55%, #e8f8ff 100%); }
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: 0.22; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(36, 125, 171, 0.26) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: linear-gradient(to right, transparent, black 40%, black);
}
.hero-glow { position: absolute; border-radius: 999px; filter: blur(1px); pointer-events: none; }
.hero-glow-one { width: 440px; height: 440px; right: -120px; top: 50px; background: rgba(85, 191, 238, 0.18); }
.hero-glow-two { width: 220px; height: 220px; left: 43%; bottom: 30px; background: rgba(244, 184, 62, 0.13); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.03fr 0.97fr; gap: 55px; align-items: center; min-height: 750px; padding-top: 72px; padding-bottom: 80px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid #c5e5f5; border-radius: 99px; background: rgba(255, 255, 255, 0.75); }
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(87, 175, 104, 0.12); }
.hero h1 { margin: 24px 0 22px; max-width: 650px; font-size: clamp(3rem, 5.2vw, 5.15rem); letter-spacing: -0.055em; }
.hero h1 em { color: var(--blue-deep); font-style: normal; position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: 2%; right: 1%; height: 8px; bottom: -3px; border-radius: 50%; background: var(--gold); transform: rotate(-1.2deg); opacity: 0.8; }
.hero-lead { max-width: 600px; color: var(--muted); font-size: 1.12rem; line-height: 1.72; }
.hero-lead strong { color: var(--navy); }
.hero-points { display: grid; gap: 10px; margin: 25px 0 30px; padding: 0; list-style: none; }
.hero-points li { display: flex; align-items: center; gap: 11px; color: #344c62; font-weight: 650; }
.check-icon { flex: 0 0 auto; width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 0.75rem; font-weight: 900; box-shadow: 0 6px 14px rgba(61, 154, 79, 0.18); }
.hero-action { display: flex; align-items: center; gap: 22px; }
.cta { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border-radius: 14px; padding: 0 25px; font-size: 0.86rem; font-weight: 900; letter-spacing: 0.03em; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.cta:hover { transform: translateY(-2px); }
.cta-primary { background: linear-gradient(135deg, #ff755f, #ef5c50); color: white; box-shadow: 0 14px 28px rgba(235, 84, 73, 0.28); }
.cta-primary:hover { box-shadow: 0 18px 34px rgba(235, 84, 73, 0.36); }
.cta-arrow { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); font-size: 1.1rem; }
.price-mini small, .price-mini strong { display: block; }
.price-mini small { color: var(--muted); font-size: 0.75rem; }
.price-mini strong { color: var(--navy); font-size: 1.45rem; }
.microcopy { margin: 15px 0 0; color: #71808d; font-size: 0.72rem; }

.hero-product { position: relative; min-height: 620px; display: grid; place-items: center; perspective: 1300px; }
.main-book-wrap { position: absolute; z-index: 4; left: 18%; top: 4%; width: 52%; transform: rotateY(-6deg) rotateZ(-1.1deg); }
.book { position: relative; filter: drop-shadow(0 22px 22px rgba(24, 57, 80, 0.21)); }
.book img { width: 100%; border-radius: 4px 11px 11px 4px; }
.book::before { content: ""; position: absolute; z-index: -1; left: -4.5%; top: 1.1%; bottom: 1.1%; width: 7%; border-radius: 5px 0 0 5px; background: #1679bb; transform: skewY(-8deg); box-shadow: inset -3px 0 4px rgba(0,0,0,.1); }
.book::after { content: ""; position: absolute; z-index: -1; left: 2%; right: -2%; bottom: -1.4%; height: 3.2%; border-radius: 0 0 9px 4px; background: repeating-linear-gradient(to bottom, #fff, #fff 2px, #d8e2e8 3px); transform: skewX(-45deg); }
.book-coral::before { background: #e7574e; }
.book-blue::before { background: #1682c7; }
.book-green::before { background: #3b9956; }
.bonus-books { position: absolute; z-index: 5; bottom: 4%; left: 3%; right: 0; display: flex; align-items: flex-end; justify-content: center; gap: 4%; }
.book-bonus { width: 29%; }
.book-bonus:nth-child(1) { transform: rotate(-5deg) translateY(8px); }
.book-bonus:nth-child(2) { transform: translateY(-6px); }
.book-bonus:nth-child(3) { transform: rotate(5deg) translateY(8px); }
.bonus-badge { position: absolute; z-index: 7; right: 4%; top: 8%; width: 130px; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 6px solid white; border-radius: 50%; background: var(--coral); color: white; text-align: center; transform: rotate(7deg); box-shadow: 0 15px 35px rgba(208, 75, 65, .28); }
.bonus-badge strong { font-size: 2.2rem; line-height: 1; }
.bonus-badge span { margin-top: 5px; font-size: .7rem; font-weight: 900; letter-spacing: .06em; }
.product-shadow { position: absolute; z-index: 0; left: 6%; right: 3%; bottom: 0; height: 55px; border-radius: 50%; background: rgba(32, 73, 94, 0.18); filter: blur(18px); }
.trust-strip { position: relative; z-index: 3; border-top: 1px solid rgba(36, 117, 163, 0.14); background: rgba(255,255,255,.83); backdrop-filter: blur(10px); }
.trust-grid { min-height: 105px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.trust-grid > div { display: flex; justify-content: center; align-items: center; gap: 15px; padding: 15px 28px; border-right: 1px solid var(--border); }
.trust-grid > div:last-child { border: 0; }
.trust-icon { flex: 0 0 auto; width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; background: var(--sky); color: var(--blue-deep); font-size: 1.2rem; font-weight: 900; }
.trust-grid p, .trust-grid strong, .trust-grid small { margin: 0; display: block; }
.trust-grid strong { color: var(--navy); font-size: .92rem; }
.trust-grid small { margin-top: 3px; color: var(--muted); font-size: .72rem; }

.problem { background: var(--paper); }
.problem .section-kicker, .inside .section-kicker, .faq .section-kicker { margin-bottom: 16px; }
.problem-grid { margin-top: 58px; display: grid; grid-template-columns: 1fr 74px 1fr; align-items: center; max-width: 980px; }
.problem-card { min-height: 360px; padding: 38px; border-radius: 28px; }
.problem-card h3 { margin: 19px 0 27px; font-size: 1.8rem; }
.problem-card ul { display: grid; gap: 19px; margin: 0; padding: 0; list-style: none; }
.problem-card li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.muted-card { border: 1px solid #e5e8e9; background: #f7f7f5; }
.muted-card li > span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #e5e6e5; color: #949c9f; font-weight: 800; }
.solution-card { position: relative; background: var(--navy); color: white; box-shadow: 0 25px 70px rgba(23, 52, 83, .2); overflow: hidden; }
.solution-card::after { content: "♪"; position: absolute; right: 20px; bottom: -28px; color: rgba(255,255,255,.055); font-size: 10rem; transform: rotate(-12deg); }
.solution-card h3 { color: white; }
.solution-card li { position: relative; z-index: 1; color: #e3edf3; font-weight: 650; }
.card-number { display: inline-flex; padding: 7px 11px; border-radius: 7px; background: #eaedee; color: #6d797d; font-size: .67rem; font-weight: 900; letter-spacing: .13em; }
.solution-card .card-number { background: rgba(45, 169, 232, .18); color: #8fd8fa; }
.transition-arrow { width: 54px; height: 54px; display: grid; place-items: center; margin: auto; border: 7px solid var(--paper); border-radius: 50%; background: var(--coral); color: white; font-size: 1.35rem; box-shadow: 0 10px 20px rgba(242, 104, 89, .25); z-index: 2; }

.method { background: linear-gradient(135deg, #eef9ff, #f9fdff); }
.method-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.method-copy > p { color: var(--muted); font-size: 1.04rem; line-height: 1.75; }
.method-copy .section-kicker { margin-bottom: 17px; }
.method-note { margin-top: 34px; display: flex; align-items: center; gap: 16px; }
.method-note > span { flex: 0 0 auto; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 19px; background: var(--coral); color: white; font-size: 2rem; font-weight: 900; transform: rotate(-4deg); }
.method-note p, .method-note strong, .method-note small { margin: 0; display: block; }
.method-note strong { color: var(--navy); }
.method-note small { max-width: 270px; margin-top: 3px; color: var(--muted); line-height: 1.45; }
.method-steps { position: relative; display: grid; gap: 12px; padding: 28px; border: 1px solid #d5ebf5; border-radius: 30px; background: rgba(255,255,255,.8); box-shadow: 0 24px 60px rgba(40, 111, 145, .1); }
.method-step { position: relative; display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 18px; background: white; box-shadow: 0 8px 25px rgba(38, 82, 106, .07); }
.method-letter { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: white; font-size: 1.5rem; font-weight: 950; }
.step-1 .method-letter { background: var(--blue); }
.step-2 .method-letter { background: var(--coral); }
.step-3 .method-letter { background: var(--gold); }
.step-4 .method-letter { background: var(--green); }
.step-5 .method-letter { background: var(--purple); }
.method-step p, .method-step strong, .method-step small { margin: 0; display: block; }
.method-step strong { color: var(--navy); font-size: 1.05rem; }
.method-step small { margin-top: 2px; color: var(--muted); }
.step-line { position: absolute; left: 43px; bottom: -15px; width: 2px; height: 18px; background: #d3e5ec; }

.inside { overflow: hidden; background: var(--paper); }
.pages-showcase { position: relative; height: 620px; margin-top: 60px; }
.page-card { position: absolute; width: 31%; border: 9px solid white; border-radius: 9px; background: white; box-shadow: var(--shadow); overflow: hidden; }
.page-card img { width: 100%; }
.page-front { z-index: 3; top: 15px; }
.page-back { z-index: 1; top: 72px; opacity: .9; }
.page-back.left { left: 5%; transform: rotate(-9deg); }
.page-front.left-front { left: 22%; transform: rotate(-2deg); }
.page-front.right-front { right: 22%; transform: rotate(2deg); }
.page-back.right { right: 5%; transform: rotate(9deg); }
.page-label { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: white; color: var(--navy); font-size: .75rem; font-weight: 900; box-shadow: 0 10px 30px rgba(29, 68, 93, .16); }
.page-label span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: white; }
.label-one { left: 12%; top: 40px; }
.label-one span { background: var(--blue); }
.label-two { left: 43%; bottom: 40px; }
.label-two span { background: var(--green); }
.label-three { right: 8%; top: 95px; }
.label-three span { background: var(--purple); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 780px; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: white; box-shadow: 0 14px 45px rgba(32, 73, 96, .08); }
.stats-row > div { padding: 24px; text-align: center; border-right: 1px solid var(--border); }
.stats-row > div:last-child { border: 0; }
.stats-row strong, .stats-row span { display: block; }
.stats-row strong { color: var(--blue-deep); font-size: 2.1rem; }
.stats-row span { margin-top: 3px; color: var(--muted); font-size: .79rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }

.benefits { background: var(--navy); }
.benefits h2, .benefits h3 { color: white; }
.benefits-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: end; }
.benefits-heading > p { color: #c5d3df; line-height: 1.75; }
.benefits-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.benefits-grid article { min-height: 240px; padding: 30px; border: 1px solid rgba(255,255,255,.1); border-radius: 23px; background: rgba(255,255,255,.055); }
.benefits-grid h3 { margin: 22px 0 12px; font-size: 1.2rem; }
.benefits-grid p { margin: 0; color: #b8c9d6; font-size: .92rem; line-height: 1.65; }
.benefit-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; color: white; font-size: .73rem; font-weight: 900; letter-spacing: .06em; }
.benefit-icon.blue { background: var(--blue); }.coral-bg { background: var(--coral); }.green-bg { background: var(--green); }.purple-bg { background: var(--purple); }.gold-bg { background: var(--gold); }.navy-bg { background: #33749a; }

.bonuses { background: linear-gradient(180deg, #fffdf8, #f7fcf5); }
.bonuses-grid { margin-top: 65px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bonus-card { overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: white; box-shadow: 0 20px 50px rgba(33, 75, 95, .09); }
.bonus-cover { height: 330px; display: flex; align-items: flex-end; justify-content: center; padding: 35px 40px 0; overflow: hidden; }
.coral-card .bonus-cover { background: var(--coral-soft); }.blue-card .bonus-cover { background: var(--sky); }.green-card .bonus-cover { background: var(--green-soft); }
.book-bonus-large { width: 70%; transform: translateY(18px) rotate(-1.8deg); }
.blue-card .book-bonus-large { transform: translateY(18px) rotate(1.5deg); }
.bonus-copy { padding: 30px; }
.bonus-copy > span { display: inline-flex; padding: 6px 10px; border-radius: 7px; font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.coral-card .bonus-copy > span { background: var(--coral-soft); color: var(--coral); }.blue-card .bonus-copy > span { background: var(--sky); color: var(--blue-deep); }.green-card .bonus-copy > span { background: var(--green-soft); color: #338547; }
.bonus-copy h3 { min-height: 58px; margin: 15px 0 10px; font-size: 1.38rem; }
.bonus-copy p { min-height: 72px; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.bonus-copy > strong { display: block; padding-top: 15px; border-top: 1px solid var(--border); color: var(--navy); font-size: .78rem; }
.total-pages { width: fit-content; margin-top: 42px; display: flex; align-items: center; gap: 15px; padding: 15px 25px; border: 1px solid #cde7d0; border-radius: 99px; background: white; box-shadow: 0 12px 30px rgba(46, 107, 59, .08); }
.total-pages > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 1.4rem; }
.total-pages p, .total-pages strong, .total-pages small { margin: 0; display: block; }
.total-pages strong { color: var(--navy); }.total-pages small { color: var(--muted); }

.audience { background: var(--paper); }
.audience-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.audience-image { position: relative; min-height: 620px; display: grid; place-items: center; border-radius: 40px; background: linear-gradient(135deg, #fff2d3, #e7f8ff); overflow: hidden; }
.audience-image::before, .audience-image::after { content: ""; position: absolute; border-radius: 50%; }
.audience-image::before { width: 230px; height: 230px; top: -80px; right: -60px; border: 38px solid rgba(244,184,62,.2); }
.audience-image::after { width: 150px; height: 150px; left: -55px; bottom: 30px; background: rgba(87,175,104,.15); }
.final-pages { position: relative; z-index: 2; width: 75%; display: flex; align-items: center; justify-content: center; }
.final-pages img { width: 62%; border: 7px solid white; border-radius: 8px; box-shadow: var(--shadow); }
.final-pages img:first-child { transform: rotate(-7deg) translateX(20%); }
.final-pages img:last-child { transform: rotate(7deg) translateX(-15%); }
.audience-sticker { position: absolute; z-index: 4; right: 35px; bottom: 35px; width: 98px; height: 98px; display: grid; place-content: center; border: 5px solid white; border-radius: 50%; background: var(--purple); color: white; text-align: center; font-size: 1.7rem; font-weight: 900; box-shadow: 0 14px 30px rgba(89, 51, 131, .25); }
.audience-sticker small { display: block; font-size: .56rem; letter-spacing: .13em; }
.audience-copy > p { color: var(--muted); line-height: 1.75; }
.audience-copy .section-kicker { margin-bottom: 17px; }
.audience-list { margin-top: 30px; display: grid; gap: 10px; }
.audience-list > div { display: flex; align-items: center; gap: 18px; padding: 17px 19px; border: 1px solid var(--border); border-radius: 17px; background: white; }
.audience-list > div > span { color: var(--blue-deep); font-size: .74rem; font-weight: 900; }
.audience-list p, .audience-list strong, .audience-list small { margin: 0; display: block; }
.audience-list strong { color: var(--navy); }.audience-list small { margin-top: 3px; color: var(--muted); }

.offer { position: relative; overflow: hidden; background: linear-gradient(135deg, #16334f, #0e2841); color: white; }
.offer-pattern { position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 28px 28px; mask-image: radial-gradient(circle at center, black, transparent 78%); }
.offer-wrap { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: 75px; align-items: center; }
.offer-product { position: relative; min-height: 670px; }
.offer-main-book { position: absolute; z-index: 2; top: 0; left: 17%; width: 56%; transform: rotate(-2deg); }
.offer-mini-books { position: absolute; z-index: 4; left: 0; right: 0; bottom: 15px; display: flex; align-items: flex-end; justify-content: center; gap: 3%; }
.offer-mini { width: 29%; }.offer-mini:nth-child(1) { transform: rotate(-5deg); }.offer-mini:nth-child(3) { transform: rotate(5deg); }
.offer-badge { position: absolute; z-index: 5; top: 35px; right: 0; padding: 11px 16px; border-radius: 99px; background: var(--gold); color: var(--navy); font-size: .72rem; font-weight: 950; letter-spacing: .08em; transform: rotate(6deg); }
.offer-card { padding: 46px; border: 1px solid rgba(255,255,255,.13); border-radius: 30px; background: white; color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.22); }
.offer-overline { color: var(--coral); font-size: .72rem; font-weight: 950; letter-spacing: .14em; }
.offer-card h2 { margin: 14px 0 26px; font-size: 2.5rem; }
.offer-card h2 em { display: block; margin-top: 8px; color: var(--blue-deep); font-style: normal; font-size: 1.3rem; }
.offer-card ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.offer-card li { display: flex; align-items: center; gap: 13px; }
.offer-card li span span { display: block; }
.offer-card li strong, .offer-card li small { display: block; }
.offer-card li strong { color: var(--navy); font-size: .93rem; }.offer-card li small { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.price-block { display: flex; flex-wrap: wrap; align-items: center; column-gap: 15px; margin: 26px 0 20px; padding-top: 22px; border-top: 1px solid var(--border); }
.price-block > small { width: 100%; color: var(--muted); }
.price-block div { display: flex; align-items: flex-start; color: var(--navy); }
.price-block sup { margin-top: 10px; font-size: 1rem; font-weight: 900; }.price-block div strong { font-size: 3.5rem; line-height: 1; letter-spacing: -.05em; }.price-block > span { padding: 6px 10px; border-radius: 99px; background: var(--green-soft); color: #378249; font-size: .7rem; font-weight: 850; }
.cta-offer { width: 100%; min-height: 64px; background: linear-gradient(135deg, #5dbf6e, #3e9c53); color: white; box-shadow: 0 15px 30px rgba(55, 151, 75, .28); }
.checkout-note { margin: 12px 0 0; color: #83919b; text-align: center; font-size: .68rem; }

.faq { background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 100px; align-items: start; }
.faq-heading { position: sticky; top: 30px; }
.faq-heading > p { color: var(--muted); }
.faq-list { display: grid; gap: 11px; }
.faq-list details { border: 1px solid var(--border); border-radius: 16px; background: white; overflow: hidden; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 22px; color: var(--navy); font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--sky); color: var(--blue-deep); font-size: 1.1rem; transition: transform .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 22px 22px; color: var(--muted); line-height: 1.65; }

.final-cta { position: relative; overflow: hidden; padding: 78px 0; background: linear-gradient(135deg, #2da9e8, #1678bc); color: white; }
.final-cta::before { content: "♪"; position: absolute; right: 8%; top: -65px; color: rgba(255,255,255,.08); font-size: 16rem; transform: rotate(10deg); }
.final-cta-inner { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; }
.final-cta h2 { max-width: 760px; margin-bottom: 13px; color: white; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.final-cta p { max-width: 760px; margin: 0; color: #eaf8ff; line-height: 1.65; }
.final-note { display: inline-grid; place-items: center; width: 39px; height: 39px; margin-bottom: 16px; border-radius: 12px; background: rgba(255,255,255,.16); }
.cta-light { min-width: 285px; background: white; color: var(--blue-deep); box-shadow: 0 16px 35px rgba(11, 77, 119, .18); }
.cta-light .cta-arrow { background: var(--sky); }
footer { padding: 30px 0; background: #0d253c; color: white; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-inner p, .footer-inner strong, .footer-inner span { margin: 0; display: block; }
.footer-inner strong { font-size: .92rem; }.footer-inner span, .footer-inner small { margin-top: 3px; color: #9fb3c2; font-size: .72rem; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 20px; padding-top: 70px; }
  .hero-copy { max-width: 740px; margin-inline: auto; }
  .eyebrow, .hero-action, .hero-points li { justify-content: center; }
  .hero-lead { margin-inline: auto; }.hero-product { width: min(620px, 100%); margin-inline: auto; }
  .method-grid, .audience-grid, .offer-wrap { gap: 55px; }
  .benefits-heading { gap: 50px; }
  .bonus-cover { height: 275px; padding-inline: 28px; }
  .bonus-copy { padding: 24px; }.bonus-copy h3 { font-size: 1.15rem; }
  .faq-grid { gap: 55px; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 620px); }
  .section { padding: 76px 0; }
  .topbar-inner { flex-wrap: wrap; gap: 5px 9px; padding: 9px 0; text-align: center; font-size: .72rem; }
  .hero-grid { min-height: auto; padding-top: 52px; padding-bottom: 48px; }
  .hero h1 { margin-top: 19px; font-size: clamp(2.65rem, 12vw, 4rem); }.hero h1 em { white-space: normal; }
  .hero-lead { font-size: 1rem; }.hero-points { text-align: left; }.hero-points li { justify-content: flex-start; }
  .hero-action { flex-direction: column; gap: 14px; }.price-mini { display: flex; align-items: baseline; gap: 8px; }
  .hero-product { min-height: 525px; }.main-book-wrap { width: 57%; left: 20%; }.bonus-books { left: 0; gap: 3%; }.book-bonus { width: 31%; }.bonus-badge { width: 105px; height: 105px; right: 0; top: 7%; }.bonus-badge strong { font-size: 1.8rem; }
  .trust-grid { grid-template-columns: 1fr; padding: 15px 0; }.trust-grid > div { justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--border); }.trust-grid > div:last-child { border-bottom: 0; }
  h2 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .problem-grid { grid-template-columns: 1fr; gap: 0; }.transition-arrow { margin: -10px auto; transform: rotate(90deg); }.problem-card { min-height: auto; padding: 30px; }
  .method-grid, .audience-grid, .offer-wrap, .benefits-heading, .faq-grid { grid-template-columns: 1fr; }
  .method-grid { gap: 45px; }.method-steps { padding: 16px; }.method-step { gap: 13px; padding: 12px; }.method-letter { width: 45px; height: 45px; }
  .pages-showcase { height: 470px; margin-top: 40px; }.page-card { width: 47%; border-width: 5px; }.page-back.left { left: 0; }.page-front.left-front { left: 8%; }.page-front.right-front { right: 8%; }.page-back.right { right: 0; }.page-label { font-size: .65rem; padding: 8px 11px; }.label-one { left: 1%; top: 18px; }.label-two { left: 22%; bottom: 25px; }.label-three { right: 1%; top: 74px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }.stats-row > div:nth-child(2) { border-right: 0; }.stats-row > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .benefits-grid, .bonuses-grid { grid-template-columns: 1fr; }.benefits-heading { gap: 5px; }.benefits-grid article { min-height: auto; }
  .bonus-card { display: grid; grid-template-columns: .8fr 1.2fr; }.bonus-cover { height: auto; min-height: 315px; padding: 32px 18px 0; }.book-bonus-large { width: 90%; }.bonus-copy h3, .bonus-copy p { min-height: auto; }
  .audience-grid { gap: 50px; }.audience-image { min-height: 510px; }.audience-copy { order: -1; }
  .offer-wrap { gap: 30px; }.offer-product { min-height: 560px; }.offer-card { padding: 30px 22px; }.offer-card h2 { font-size: 2.05rem; }
  .faq-grid { gap: 30px; }.faq-heading { position: static; }
  .final-cta-inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }.final-cta h2, .final-cta p { margin-inline: auto; }.cta-light { width: 100%; min-width: 0; }
  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 470px) {
  .hero-product { min-height: 450px; }.bonus-badge { width: 88px; height: 88px; border-width: 4px; }.bonus-badge strong { font-size: 1.5rem; }.bonus-badge span { font-size: .56rem; }
  .cta { width: 100%; padding: 0 17px; font-size: .76rem; }.microcopy { line-height: 1.5; }
  .pages-showcase { height: 380px; }.page-label { display: none; }
  .stats-row strong { font-size: 1.65rem; }.stats-row > div { padding: 18px; }
  .bonus-card { display: block; }.bonus-cover { min-height: 310px; }.book-bonus-large { width: 65%; }
  .total-pages { width: calc(100% - 28px); border-radius: 20px; }
  .audience-image { min-height: 410px; }.audience-sticker { width: 80px; height: 80px; right: 20px; bottom: 20px; font-size: 1.35rem; }
  .offer-product { min-height: 470px; }.offer-main-book { width: 61%; left: 20%; }.offer-badge { top: 15px; right: 0; }
  .price-block div strong { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { transition: none; }
}
