:root {
  --green-hero: #1c2a1b;
  --green-offer: #2e3e32;
  --sage: #6f8c72;
  --cream: #eae3d2;
  --black-warm: #141513;
  --ivory: #fdf9f0;
  --cta-gold: #d0b47b;
  --cta-glow: #a4c377;
  --price-green: #025c15;
  --purple: #450065;
  --orange-red: #ff3400;
  --ribbon-yellow: #ffc50c;
  --success: #0a8b39;
  --danger: #ff3514;
}

* { box-sizing: border-box; }
html,
body { width: 100%; max-width: 100%; }
html { scroll-behavior: smooth; overflow-x: hidden; background: #0d120d; }
body { margin: 0; min-width: 0; overflow-x: hidden; background: #0d120d; color: #111; font-family: Montserrat, Arial, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.page { width: 100%; max-width: 375px; min-width: 0; margin-inline: auto; overflow-x: hidden; background: #fff; box-shadow: 0 0 50px rgb(0 0 0 / 35%); }
.page > section,
.site-footer { width: 100%; min-width: 0; }
.section-pad { padding: 44px 10px; }

.hero { background: var(--green-hero); color: var(--ivory); text-align: center; padding-top: 34px; }
.brand-logo { width: 263px; height: 140px; object-fit: contain; margin: 0 auto 14px; }
.hero-copy { padding: 0 8px 24px; }
.hero h1 { margin: 0; font: 400 40px/1 DM Serif Display, Georgia, serif; letter-spacing: 1.5px; }
.hero-copy p { margin: 32px 0 0; font: 700 18px/1.42 DM Serif Display, Georgia, serif; letter-spacing: 2px; text-transform: uppercase; }
.hero-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px 10px 0 0; }
.hero-cta-wrap { padding: 28px 0 38px; background: linear-gradient(180deg, #1c2a1b 0%, #132216 100%); }
.cta { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 12px 24px; border: 0; border-radius: 85px; background: var(--cta-gold); color: var(--green-hero); font: 900 18px/1.05 Montserrat, sans-serif; text-align: center; text-decoration: none; box-shadow: -6px -4px 28px -7px var(--cta-glow); transition: transform .18s ease, filter .18s ease; }
.cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cta--hero { width: 100%; min-height: 70px; border-radius: 85px; font-size: 23px; }

.manifesto { background: var(--cream); text-align: center; }
.manifesto h2 { margin: 0 13px 30px; color: var(--green-hero); font: 900 23px/1.22 Montserrat, sans-serif; }
.manifesto-copy { margin: 0 10px 40px; font: 500 18px/1.5 Montserrat, sans-serif; }
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mosaic img:nth-child(5) { aspect-ratio: auto; object-fit: contain; object-position: center; }
.quick-benefits { display: grid; gap: 27px; margin: 44px auto 0; padding: 0 12px; list-style: none; font: 500 18px/1.35 Montserrat, sans-serif; }
.quick-benefits li { display: flex; align-items: center; justify-content: center; gap: 9px; }

.author-intro { background: var(--sage); color: var(--ivory); text-align: center; padding-inline: 20px; }
.author-intro h2,
.testimonials h2,
.bio > h2 { margin: 0 0 28px; font: 700 29px/1 Montserrat, sans-serif; text-shadow: 0 0 5px #000; }
.author-intro__portrait { width: 335px; aspect-ratio: 1; object-fit: cover; margin: 0 auto 22px; border-radius: 2px; }
.author-intro p { margin: 0 0 30px; font: 500 18px/1.5 Inter, sans-serif; }
.author-intro p:last-child { margin-bottom: 0; }

.guide { background: var(--cream); }
.guide > h2 { margin: 0 20px 42px; color: var(--green-hero); text-align: center; font: 900 23px/1.22 Montserrat, sans-serif; }
.guide-item { margin-bottom: 44px; }
.guide-item h3 { display: flex; align-items: center; gap: 8px; margin: 0 10px 20px; font: 700 25px/1.1 Montserrat, sans-serif; }
.guide-item img { width: 355px; aspect-ratio: 1; object-fit: cover; margin-inline: auto; }
.guide-item p { margin: 22px 20px 0; font: 400 18px/1.5 Montserrat, sans-serif; }
.guide-closing { margin: 10px 16px 0; text-align: center; font: 700 21px/1.35 Montserrat, sans-serif; }
.guide-closing mark { display: inline; padding: 0 3px; background: var(--ribbon-yellow); color: #000; }

.testimonials { background: var(--sage); color: var(--ivory); text-align: center; padding-inline: 6px; }
.testimonials h2 { font-size: 28px; line-height: 1.05; }
.testimonials__subtitle { margin: -8px 14px 28px; color: #f1b29f; font: italic 700 18px/1.4 Montserrat, sans-serif; text-shadow: 0 0 5px #000; }
.testimonials-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.testimonials-grid img { width: 100%; height: auto; background: #fff; border: 1px solid rgb(255 255 255 / 42%); }

.bonuses { background: var(--cream); text-align: center; }
.bonuses > h2 { margin: 0 13px 34px; color: var(--green-hero); font: 900 28px/1.03 Montserrat, sans-serif; }
.bonus-card { width: 353px; max-width: 100%; margin: 0 auto 20px; padding: 20px 12px 18px; border-radius: 10px; background: var(--sage); color: #fff; }
.bonus-card h3 { margin: 0 6px 18px; font: 700 18px/1.15 Montserrat, sans-serif; }
.bonus-card h3 span { color: var(--ribbon-yellow); }
.bonus-card img { width: 269px; aspect-ratio: 1; object-fit: cover; margin: 0 auto 18px; border-radius: 15px; }
.bonus-card p { margin: 0; font: 400 16px/1.35 Roboto, sans-serif; }
.limited-note { margin: 34px 20px 0; color: var(--orange-red); font: 700 18px/1.5 Montserrat, sans-serif; }

.offers { display: grid; gap: 66px; background: var(--green-offer); padding: 70px 7px 74px; }
.price-card { position: relative; width: min(360px, 100%); min-width: 0; margin-inline: auto; padding: 28px 20px 24px; overflow: hidden; border-radius: 10px; background: var(--cream); text-align: center; }
.price-card--basic h2 { margin: 0; color: var(--purple); font: 800 34px/1 Sora, sans-serif; }
.basic-price { margin: 36px 0 26px; color: #054a14; font: 900 63px/1 "Open Sans", sans-serif; letter-spacing: -3px; text-shadow: 0 1px 0 #000; }
.plan-list { padding: 0; list-style: none; text-align: left; }
.plan-list li { position: relative; padding-left: 40px; }
.plan-list li::before { position: absolute; left: 4px; top: .05em; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; font-weight: 900; line-height: 1; }
.plan-list--basic { display: grid; gap: 28px; margin: 28px 10px 38px; font: 400 16px/1.2 Sora, sans-serif; text-transform: uppercase; }
.plan-list--basic .included::before { content: "✓"; color: var(--success); font-size: 28px; }
.plan-list--basic .excluded { text-decoration: line-through; }
.plan-list--basic .excluded::before { content: "×"; background: var(--danger); color: #fff; font-size: 17px; }
.cta--small { width: 299px; max-width: 100%; min-height: 48px; margin-inline: auto; padding: 10px 18px; font-size: 16px; }
.attention { margin: 28px 0 0; font: 500 19px/1.32 Outfit, sans-serif; }
.attention strong { color: #ef2a18; }

.price-card--complete { padding: 30px 0 28px; }
.price-card--complete > h2 { margin: 15px 8px 24px; color: #036b0a; font: 600 38px/1 Sora, sans-serif; }
.best-seller { position: absolute; z-index: 2; left: -53px; top: 31px; width: 210px; padding: 8px 0; transform: rotate(-45deg); background: var(--ribbon-yellow); color: #fff; font: 800 16px/1 Montserrat, sans-serif; }
.collection-image { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.countdown { padding: 22px 14px 16px; }
.countdown > p { margin: 0 0 20px; font: 800 28px/1.1 Poppins, sans-serif; }
.countdown__numbers { display: grid; grid-template-columns: minmax(72px, auto) auto minmax(72px, auto); justify-content: center; align-items: start; column-gap: 12px; }
.countdown__numbers span { display: grid; justify-items: center; min-width: 72px; gap: 2px; }
.countdown__numbers strong { font: 800 46px/1 Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.countdown__numbers small { font: 700 16px/1.2 Poppins, sans-serif; }
.countdown__numbers b { align-self: start; font-size: 36px; line-height: 46px; }
.previous-price { margin: 16px 10px 0; font: 700 20px/1.35 "Open Sans", sans-serif; }
.previous-price del { color: #e00; text-decoration-thickness: 3px; }
.complete-price { margin: 20px 0 24px; color: var(--price-green); font: 900 54px/1 "Open Sans", sans-serif; letter-spacing: -2px; }
.price-card--complete > h3 { margin: 0 30px 32px; font: 800 26px/1.1 Montserrat, sans-serif; }
.plan-list--complete { display: grid; gap: 24px; margin: 0 22px 38px; font: 400 17px/1.34 Sora, sans-serif; }
.plan-list--complete li::before { content: "✓"; color: var(--success); font-size: 26px; }
.cta--complete { width: 320px; max-width: calc(100% - 28px); margin-inline: auto; font-size: 17px; }
.offer-warning { margin: 24px 16px 0; font: 500 15px/1.5 Montserrat, sans-serif; }
.offer-warning strong { color: #e3160d; }

.guarantee { background: var(--cream); text-align: center; padding-inline: 20px; }
.guarantee h2 { margin: 0 0 18px; font: 700 25px/1.25 Montserrat, sans-serif; }
.guarantee p { margin: 0 0 8px; font: 400 20px/1.5 Montserrat, sans-serif; }
.guarantee img { width: 355px; max-width: 100%; height: auto; margin: 26px auto 0; }

.final-cta { background: var(--sage); color: var(--ivory); text-align: center; padding-inline: 6px; }
.final-cta h2 { margin: 0 12px 30px; font: 700 23px/1.2 Montserrat, sans-serif; text-shadow: 0 0 5px #000; }
.final-cta p { margin: 0 20px 40px; font: 400 20px/1.5 Montserrat, sans-serif; text-shadow: 0 0 10px #000; }
.cta--final { width: 364px; max-width: 100%; margin-inline: auto; font-size: 17px; }

.bio { background: var(--black-warm); color: var(--ivory); text-align: center; padding-inline: 10px; }
.bio > h2 { font-size: 27px; line-height: 1; }
.bio > img { width: 355px; aspect-ratio: 1; object-fit: cover; margin-inline: auto; }
.bio-copy { padding: 22px 10px 42px; }
.bio-copy p { margin: 0 0 30px; font: 500 16px/1.5 Inter, sans-serif; }
.bio-copy p:last-child { margin-bottom: 0; }
.faq > h2 { margin: 0 0 34px; color: #fff; font: 900 34px/1 Montserrat, sans-serif; }
.faq { padding-bottom: 4px; }
.faq-item { width: 351px; max-width: 100%; margin: 0 auto 16px; overflow: hidden; border-radius: 10px; background: #f7f8fa; color: #000; text-align: left; }
.faq-item h3 { margin: 0; }
.faq-item button { display: grid; width: 100%; min-height: 76px; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; border: 0; background: transparent; color: #000; text-align: left; font: 600 18px/1.35 Poppins, sans-serif; cursor: pointer; }
.faq-item button span { font-size: 30px; line-height: 1; transition: transform .2s ease; }
.faq-item button[aria-expanded="true"] span { transform: rotate(45deg); }
.faq-item button:focus-visible { outline: 3px solid var(--sage); outline-offset: -4px; }
.faq-answer { padding: 0 18px 18px; }
.faq-answer p { margin: 0; color: #333; font: 400 15px/1.55 Inter, sans-serif; }

.site-footer { padding: 28px 20px 36px; background: #fff; color: #373737; text-align: center; }
.site-footer p { margin: 0 0 14px; font: 400 12px/1.5 Inter, sans-serif; }
.site-footer p:last-child { margin-bottom: 0; }

@media (max-width: 340px) {
  .hero h1 { font-size: 35px; }
  .hero-copy p { font-size: 16px; letter-spacing: 1.5px; }
  .mosaic { gap: 10px; }
  .bonuses > h2 { font-size: 25px; }
  .price-card--complete > h2 { font-size: 33px; }
  .faq > h2 { font-size: 31px; }
  .faq-item button { font-size: 16px; }
}

@media (max-width: 767px) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
}

@media (min-width: 768px) {
  .page { max-width: 100%; }
  .section-pad { padding: 64px clamp(32px, 6vw, 64px); }

  .hero { padding-top: 48px; }
  .hero-copy { max-width: 700px; margin-inline: auto; padding-inline: 32px; }
  .hero-cover { width: min(100%, 620px); margin-inline: auto; }
  .hero-cta-wrap { padding-inline: 64px; }
  .cta--hero { width: min(100%, 620px); margin-inline: auto; }

  .manifesto h2,
  .manifesto-copy,
  .guide > h2,
  .testimonials > h2,
  .testimonials__subtitle,
  .bonuses > h2,
  .limited-note { max-width: 760px; margin-inline: auto; }
  .manifesto h2 { margin-bottom: 30px; }
  .manifesto-copy { margin-bottom: 44px; }
  .mosaic { max-width: 760px; margin-inline: auto; gap: 20px; }
  .quick-benefits { max-width: 760px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; }

  .author-intro {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 44px;
    text-align: left;
  }
  .author-intro h2 { grid-column: 2; margin: 0 0 24px; }
  .author-intro__portrait { grid-column: 1; grid-row: 1 / 4; width: 100%; margin: 0; }
  .author-intro p { grid-column: 2; max-width: 620px; margin: 0 0 24px; }
  .author-intro p:last-child { margin-bottom: 0; }

  .guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 28px;
  }
  .guide > h2,
  .guide-closing { grid-column: 1 / -1; }
  .guide > h2 { margin-bottom: 0; }
  .guide-item { min-width: 0; margin-bottom: 0; }
  .guide-item h3 { margin-inline: 0; }
  .guide-item img { width: 100%; }
  .guide-item p { margin-inline: 0; }
  .guide-closing { margin-top: 0; }

  .testimonials-grid { max-width: 920px; margin-inline: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

  .bonuses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
  }
  .bonuses > h2,
  .limited-note { grid-column: 1 / -1; }
  .bonuses > h2 { margin-bottom: 10px; }
  .bonus-card { width: 100%; margin: 0; padding: 24px 22px; }
  .bonus-card img { width: min(320px, 100%); }
  .bonus-card:nth-of-type(5) { grid-column: 1 / -1; width: calc((100% - 24px) / 2); justify-self: center; }
  .limited-note { margin-top: 14px; }

  .offers { padding: 72px clamp(32px, 6vw, 64px) 80px; }
  .price-card { width: min(100%, 680px); }
  .collection-image { object-fit: contain; }

  .guarantee > *,
  .final-cta > * { max-width: 820px; margin-inline: auto; }
  .guarantee h2 { margin-bottom: 18px; }
  .guarantee img { width: min(100%, 620px); }
  .final-cta h2 { margin-bottom: 30px; }
  .final-cta p { margin-bottom: 40px; }
  .cta--final { width: min(100%, 620px); }

  .bio {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    align-items: center;
    gap: 0 44px;
    text-align: left;
  }
  .bio > h2 { grid-column: 2; margin-bottom: 24px; }
  .bio > img { grid-column: 1; grid-row: 1 / 3; width: 100%; margin: 0; }
  .bio-copy { grid-column: 2; padding: 0; }
  .bio-copy p { max-width: 620px; }
  .faq { grid-column: 1 / -1; width: min(100%, 860px); margin: 64px auto 0; text-align: center; }
  .faq-item { width: 100%; }
}

@media (min-width: 1024px) {
  .page { max-width: 1180px; }
  .section-pad { padding: 72px 48px; }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 520px);
    grid-template-areas:
      "logo cover"
      "copy cover"
      "cta cover";
    grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: 20px 52px;
    padding: 64px 48px;
  }
  .brand-logo { grid-area: logo; margin-bottom: 0; }
  .hero-copy { grid-area: copy; max-width: 540px; padding: 0; }
  .hero h1 { font-size: clamp(40px, 4vw, 56px); }
  .hero-copy p { font-size: clamp(17px, 1.5vw, 20px); }
  .hero-cover { grid-area: cover; width: 100%; margin: 0; border-radius: 10px; }
  .hero-cta-wrap { grid-area: cta; width: 100%; padding: 0; background: transparent; }
  .cta--hero { width: 100%; }

  .mosaic { max-width: 1050px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-benefits { max-width: 1050px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }

  .author-intro { grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); column-gap: 64px; padding-inline: 72px; }

  .guide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 28px; }
  .guide > h2 { max-width: 760px; }

  .testimonials-grid { max-width: 1080px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .offers {
    grid-template-columns: minmax(330px, 420px) minmax(480px, 600px);
    align-items: start;
    justify-content: center;
    gap: 40px;
  }
  .price-card { width: 100%; }
  .price-card--basic { margin-top: 56px; }

  .bio { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 0 72px; padding-inline: 72px; }
}

@media (min-width: 1280px) {
  .section-pad { padding-block: 80px; }
  .hero { padding: 72px 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}