/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-primary: #4A7A2E;
  --green-accent:  #7DB83A;
  --green-light:   #EDF4E4;
  --green-dark:    #3D6626;
  --cream:         #F8F6EE;
  --white:         #FFFFFF;
  --gray-light:    #F3F4F6;
  --gray-border:   #E5E7EB;
  --gray-text:     #9CA3AF;
  --text-dark:     #141414;
  --text-muted:    #6B7280;
  /* amber — как пузико авокадо */
  --amber:         #C07928;
  --amber-dark:    #A36420;
  --amber-light:   #FEF3E2;
  /* dark section */
  --dark-bg:       #0D1A09;
  --dark-surface:  rgba(255,255,255,.07);
  --dark-border:   rgba(255,255,255,.12);
  /* shadows */
  --shadow-sm:     0 2px 8px rgba(0,0,0,.07);
  --shadow-md:     0 8px 32px rgba(0,0,0,.12);
  --shadow-green:  0 12px 48px rgba(74,122,46,.25);
  --shadow-amber:  0 8px 32px rgba(192,121,40,.35);
  /* geometry */
  --radius-sm:     8px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --font:          'Golos Text', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
ul  { list-style: none; }
a   { text-decoration: none; color: inherit; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible   { opacity: 1; transform: none; }
.reveal-d1        { transition-delay: .08s; }
.reveal-d2        { transition-delay: .16s; }
.reveal-d3        { transition-delay: .24s; }
.reveal-d4        { transition-delay: .32s; }

/* ═══════════════════════════════════════════
   SCROLL PROGRESS BAR
═══════════════════════════════════════════ */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--green-accent));
  z-index: 1000;
  pointer-events: none;
  transition: width .08s linear;
}

/* ═══════════════════════════════════════════
   STICKY CTA
═══════════════════════════════════════════ */
.sticky-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.sticky-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
.section-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
  opacity: .85;
}
.pain .section-label { color: rgba(255,255,255,.35); }

.section-title {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 56px;
  font-weight: 400;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  border-radius: 100px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform .2s ease, box-shadow .2s ease, background .15s;
  white-space: nowrap;
}

/* Основная CTA — янтарная */
.btn--cta {
  background: var(--amber);
  color: #fff;
  box-shadow: var(--shadow-amber);
}
.btn--cta:hover {
  background: var(--amber-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(192,121,40,.5);
}
.btn--cta:active { transform: translateY(0); }

/* Белая (для тёмных секций) */
.btn--white {
  background: #fff;
  color: var(--green-primary);
  box-shadow: 0 6px 28px rgba(0,0,0,.22);
  font-weight: 800;
}
.btn--white:hover {
  background: var(--cream);
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(0,0,0,.3);
}

.btn--large { padding: 20px 52px; font-size: 18px; }

/* ═══════════════════════════════════════════
   ЭКРАН 1 — HERO
═══════════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--cream);
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 60px 0 80px;
}

/* SVG grain texture */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .028;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Зелёный радиальный блик */
.hero::after {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125,184,58,.13) 0%, transparent 68%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1.5px solid rgba(74,122,46,.2);
  color: var(--green-primary);
  font-size: 11px;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.hero__badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  animation: pulse-dot 2.2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.5); opacity: .6; }
}

.hero__title {
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
  color: var(--text-dark);
}

.hero__title-accent {
  font-style: normal;
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(192,121,40,.3);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

.hero__tagline {
  font-size: clamp(17px, 2vw, 22px);
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 40px;
  font-weight: 400;
}

.hero__cta-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 14px;
  opacity: .7;
}

.hero__microstats {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 16px;
  opacity: .8;
  letter-spacing: .01em;
}

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__mascot {
  width: 100%;
  max-width: 600px;
  height: auto;
  mix-blend-mode: multiply;
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%       { transform: translateY(-14px) rotate(.4deg); }
  70%       { transform: translateY(-8px) rotate(-.3deg); }
}

@keyframes card-drift {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* ═══════════════════════════════════════════
   ЭКРАН 2 — HERO WHY
═══════════════════════════════════════════ */
.section-divider-diagonal {
  height: 60px;
  background: var(--cream);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
  margin-bottom: -1px;
}

.hero-why {
  background: var(--white);
  padding: 96px 0 108px;
  position: relative;
}

.hero-why__lead {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-dark);
  max-width: 780px;
  margin-bottom: 56px;
}

.hero-why__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.hero-why__list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 28px;
  background: var(--green-light);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.45;
  border: 1.5px solid rgba(125,184,58,.2);
}

.hero-why__num {
  font-size: 64px;
  font-weight: 900;
  color: var(--amber);
  letter-spacing: -0.04em;
  flex-shrink: 0;
  line-height: 1;
  opacity: .85;
}

/* ═══════════════════════════════════════════
   БЛОК 2 — PAIN (тёмный)
═══════════════════════════════════════════ */
.pain {
  padding: 108px 0 96px;
  background: var(--dark-bg);
  overflow: hidden;
  position: relative;
}

.pain::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(to top, rgba(74,122,46,.06), transparent);
  pointer-events: none;
}

.pain .section-title    { color: #fff; }
.pain .section-subtitle { color: rgba(255,255,255,.5); margin-bottom: 48px; }

/* ── Тело: левая + правая ── */
.pain__body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 52px;
  align-items: start;
  margin-bottom: 60px;
}

.pain__main { display: flex; flex-direction: column; gap: 32px; }

/* Большая акцентная фраза */
.pain__accent-phrase {
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: #fff;
  text-shadow: 0 0 80px rgba(255,255,255,.12), 0 0 160px rgba(125,184,58,.1);
}

/* ── Машина ── */
.pain__car-scene {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pain__car-wrapper {
  position: relative;
  width: 100%;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 24px 32px 16px;
}

.pain__car-base {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  animation: car-shake 4.5s ease-in-out infinite;
}

.pain__handbrake {
  position: absolute;
  width: 18%;
  height: auto;
  right: 30%;
  top: 20%;
  mix-blend-mode: multiply;
  transform-origin: bottom center;
  animation: handbrake-cycle 4.5s ease-in-out infinite;
}

@keyframes car-shake {
  0%, 100%      { transform: translateX(0) rotate(0deg); }
  10%, 30%, 50% { transform: translateX(-4px) rotate(-.4deg); }
  20%, 40%      { transform: translateX(4px) rotate(.4deg); }
  65%           { transform: translateX(0) rotate(0deg); }
  70%           { transform: translateX(16px) rotate(.7deg); }
  78%           { transform: translateX(0) rotate(0deg); }
}

@keyframes handbrake-cycle {
  0%         { transform: rotate(0deg) translateY(0) scale(1); opacity: 1; }
  10%, 30%   { transform: rotate(-10deg); opacity: 1; }
  20%, 40%   { transform: rotate(10deg);  opacity: 1; }
  55%        { transform: rotate(0deg) translateY(0) scale(1); opacity: 1; }
  65%        { transform: rotate(-44deg) translateY(-56px) scale(.4); opacity: 0; }
  75%        { transform: rotate(0deg) translateY(0) scale(1); opacity: 0; }
  85%, 100%  { transform: rotate(0deg) translateY(0) scale(1); opacity: 1; }
}

/* ── Метафора ── */
.pain__metaphor {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,.7);
  border-left: 3px solid var(--amber);
  padding-left: 20px;
  max-width: 520px;
}
.pain__metaphor strong { color: #fff; }

/* ── Банка с болями ── */
.pain__jar-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  filter: drop-shadow(0 0 48px rgba(125,184,58,.18));
}

.pain__jar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 8px;
  text-align: center;
}

.pain__jar-lid {
  height: 16px;
  background: rgba(255,255,255,.14);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
}

.pain__jar {
  position: relative;
  height: 400px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--dark-border);
  border-radius: 0 0 48px 48px;
  overflow: hidden;
}

.pain__card {
  position: absolute;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  backdrop-filter: blur(4px);
}

.pain__cta { text-align: center; position: relative; z-index: 1; }

/* ═══════════════════════════════════════════
   БЛОК 3 — PROCESS
═══════════════════════════════════════════ */
.process {
  padding: 120px 0;
  background: var(--green-light);
  text-align: center;
}

.process .section-subtitle { margin: 0 auto 72px; }

.process__steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 72px;
}

.process__step {
  flex: 1;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 56px 36px 48px;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.process__step:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-green);
}

.process__step-num {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(192,121,40,.45);
}

.process__step-icon {
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px; height: 148px;
}
.process__step-icon img { width: 128px; height: 128px; object-fit: contain; }

.process__step h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 14px;
  color: var(--text-dark);
}

.process__step p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
}

.process__connector {
  flex-shrink: 0;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--green-accent));
  align-self: center;
  margin-top: -17px;
  position: relative;
  opacity: .85;
}
.process__connector::after {
  content: '';
  position: absolute;
  right: -6px; top: -5px;
  border: 6px solid transparent;
  border-left-color: var(--green-accent);
}

.process__step-time {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-light);
  border-radius: 100px;
  padding: 5px 14px;
}

.process__cta { text-align: center; }

/* ═══════════════════════════════════════════
   COMPARE — ОБЩЕЕ
═══════════════════════════════════════════ */
.compare           { padding: 108px 0; }
.compare--mailing  { background: var(--white); }
.compare--target   { background: var(--cream); }

.compare .section-title { max-width: 800px; }

/* ── VS layout (для mailing) ── */
.compare__vs-layout {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 36px;
}

.compare__vs-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.compare__vs-badge {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--text-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .04em;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  flex-shrink: 0;
}

/* ── Обычная таблица (для target) ── */
.compare__table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-md);
  overflow: visible;
  margin-bottom: 36px;
}

/* ── Колонки ── */
.compare__col--bad {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.compare__col--good {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  overflow: hidden;
  box-shadow: var(--shadow-green);
  position: relative;
  z-index: 2;
  transform: scale(1.025);
  transform-origin: left center;
}

/* В VS-layout — своё скругление */
.compare__vs-layout .compare__col--bad {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.compare__vs-layout .compare__col--good {
  border-radius: var(--radius-md);
  transform: none;
  box-shadow: var(--shadow-green);
}

.compare__col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 28px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.compare__col-icon { font-size: 22px; }

.compare__col--bad  .compare__col-header { background: #F3F4F6; color: var(--text-muted); border-bottom: 1px solid var(--gray-border); }
.compare__col--good .compare__col-header { background: linear-gradient(135deg, var(--green-accent), var(--green-primary)); color: #fff; }

.compare__list { padding: 8px 0 24px; }
.compare__list li {
  padding: 13px 28px;
  font-size: 15px;
  line-height: 1.45;
  border-bottom: 1px solid var(--gray-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.compare__list li:last-child { border-bottom: none; }
.compare__col--bad  .compare__list { background: #F9FAFB; }
.compare__col--good .compare__list { background: var(--green-light); }
.compare__col--bad  .compare__list li { color: var(--text-muted); }
.compare__col--good .compare__list li { color: var(--text-dark); font-weight: 500; }
.compare__col--bad  .compare__list li::before { content: '—'; color: var(--gray-text); flex-shrink: 0; font-weight: 700; }
.compare__col--good .compare__list li::before { content: '✓'; color: var(--amber); flex-shrink: 0; font-weight: 900; font-size: 16px; }

/* Итог-строка (VS блок) */
.compare__col-result {
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 700;
}
.compare__col-result--bad  { background: #F3F4F6; color: var(--text-muted); }
.compare__col-result--good { background: var(--amber-light); color: var(--amber-dark); }

/* Примечания — без серой подложки */
.compare__note,
.compare__disclaimer {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  border-left: 3px solid var(--amber);
  padding-left: 18px;
  max-width: 680px;
}
.compare__cta { margin-top: 44px; }

/* ── Fear box ── */
.fear-box {
  background: linear-gradient(135deg, #1C0A09 0%, #2A1010 100%);
  border: 1px solid rgba(220,60,40,.18);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin-bottom: 52px;
  color: #fff;
  max-width: 680px;
}

.fear-box__title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  margin-bottom: 24px;
  letter-spacing: -.01em;
}

.fear-box__rows { display: flex; flex-direction: column; }

.fear-box__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  gap: 16px;
}
.fear-box__name  { font-size: 15px; color: rgba(255,255,255,.65); }
.fear-box__price { font-size: 18px; font-weight: 800; color: #F87171; letter-spacing: -.01em; white-space: nowrap; }

.fear-box__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 0 0;
  gap: 16px;
}
.fear-box__total span:first-child { font-size: 15px; color: rgba(255,255,255,.6); }
.fear-box__total-num {
  font-size: 32px;
  font-weight: 900;
  color: var(--amber);
  letter-spacing: -0.03em;
}

.fear-box__time-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0 0;
  gap: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 4px;
}
.fear-box__time-row span:first-child { font-size: 15px; color: rgba(255,255,255,.6); }
.fear-box__time-val {
  font-size: 17px;
  font-weight: 800;
  color: #F87171;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   БЛОК 6 — FOR WHOM
═══════════════════════════════════════════ */
.forwhom { padding: 108px 0; background: var(--white); }

.forwhom__groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 44px;
}

.forwhom__group {
  background: var(--green-light);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  transition: transform .3s ease, box-shadow .3s ease;
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
}
.forwhom__group::before {
  content: attr(data-num);
  position: absolute;
  bottom: -18px;
  right: -8px;
  font-size: 130px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(74,122,46,.07);
  pointer-events: none;
  user-select: none;
}
.forwhom__group:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-green);
  border-color: rgba(125,184,58,.3);
}

.forwhom__group-num {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 16px;
  opacity: .8;
}

.forwhom__group h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: 18px;
  color: var(--text-dark);
}

.forwhom__group ul { display: flex; flex-direction: column; gap: 9px; }
.forwhom__group li {
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.forwhom__group li::before {
  content: '·';
  color: var(--amber);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.forwhom__group:nth-child(1) {
  background: var(--cream);
}
.forwhom__group:nth-child(1)::before { color: rgba(192,121,40,.06); }

.forwhom__group:nth-child(3) {
  background: var(--amber-light);
}
.forwhom__group:nth-child(3)::before { color: rgba(192,121,40,.1); }

.forwhom__not {
  max-width: 680px;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  border-left: 3px solid var(--gray-border);
  padding-left: 18px;
}
.forwhom__not strong { color: var(--text-dark); }

/* ═══════════════════════════════════════════
   БЛОК 7 — FAQ
═══════════════════════════════════════════ */
.faq { padding: 108px 0; background: var(--cream); }
.faq .section-subtitle { margin-bottom: 52px; }

.faq__list {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.faq__item { background: var(--white); border-bottom: 1px solid var(--gray-border); }
.faq__item:last-child { border-bottom: none; }

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: left;
  transition: background .15s, color .15s;
}
.faq__question:hover { background: var(--green-light); }
.faq__question[aria-expanded="true"] { color: var(--green-primary); background: var(--green-light); font-weight: 700; }

.faq__arrow {
  flex-shrink: 0;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%234A7A2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform .25s ease;
}
.faq__question[aria-expanded="true"] .faq__arrow { transform: rotate(180deg); }

.faq__answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq__answer.open { max-height: 400px; padding-bottom: 24px; }
.faq__answer p {
  padding: 4px 28px 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* ═══════════════════════════════════════════
   FINAL CTA
═══════════════════════════════════════════ */
.final-cta {
  padding: 108px 0;
  background: linear-gradient(135deg, #162E0A 0%, #2A5218 45%, #3D6E22 100%);
  overflow: hidden;
  position: relative;
}
.final-cta::before {
  content: '';
  position: absolute;
  top: -200px; right: -80px;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125,184,58,.16) 0%, transparent 65%);
  pointer-events: none;
}

.final-cta__inner {
  display: flex;
  align-items: center;
  gap: 64px;
  position: relative;
  z-index: 1;
}

.final-cta__mascot {
  flex-shrink: 0;
  width: 400px;
  height: auto;
  mix-blend-mode: screen;
  animation: float 5s ease-in-out infinite;
}

.final-cta__content h2 {
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 900;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.final-cta__content p {
  font-size: 17px;
  color: rgba(255,255,255,.65);
  margin-bottom: 44px;
  line-height: 1.65;
}

.final-cta .btn--large {
  padding: 24px 68px;
  font-size: 20px;
  letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer {
  background: #0D1A09;
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.footer__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.footer__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer__brand > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer__name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.footer__desc {
  font-size: 13px;
  color: rgba(255,255,255,.35);
}
.footer__tg {
  font-size: 14px;
  font-weight: 600;
  color: var(--amber);
  opacity: .9;
  transition: opacity .15s;
}
.footer__tg:hover { opacity: 1; }

.footer__copy {
  padding: 16px 0;
}
.footer__copy p { font-size: 12px; color: rgba(255,255,255,.2); }
.footer__legal  { margin-top: 4px; }

/* ═══════════════════════════════════════════
   MOBILE — 768px
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .container { padding: 0 20px; }

  /* ── Section padding ── */
  .hero       { min-height: auto; padding: 56px 0 52px; }
  .hero-why   { padding: 60px 0 68px; }
  .pain       { padding: 68px 0 60px; }
  .process    { padding: 72px 0; }
  .compare    { padding: 68px 0; }
  .forwhom    { padding: 72px 0; }
  .faq        { padding: 72px 0; }
  .final-cta  { padding: 72px 0; }

  .section-subtitle { margin-bottom: 36px; }

  .section-divider-diagonal { height: 36px; }

  /* ── Hero — текст первым, картинка ниже ── */
  .hero__inner   { grid-template-columns: 1fr; gap: 28px; }
  .hero__visual  { order: 2; }
  .hero__mascot  { max-width: 240px; margin: 0 auto; }
  .hero__title   { font-size: 44px; }
  .hero__tagline { font-size: 17px; margin-bottom: 32px; }

  /* ── Hero Why ── */
  .hero-why__lead { font-size: 17px; margin-bottom: 32px; }
  .hero-why__list { grid-template-columns: 1fr; gap: 12px; }
  .hero-why__list li { padding: 18px 20px; }
  .hero-why__num  { font-size: 36px; }

  /* ── Pain ── */
  .pain__body          { grid-template-columns: 1fr; gap: 36px; margin-bottom: 44px; }
  .pain__accent-phrase { font-size: 44px; }
  .pain__jar-col       { filter: none; }

  /* Карточки боли — статический wrap с лёгкой CSS-анимацией */
  .pain__jar {
    height: auto;
    min-height: 140px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    align-content: flex-start;
    border-radius: var(--radius-md);
    overflow: visible;
  }
  .pain__card {
    position: static;
    white-space: normal;
    animation: card-drift 3.2s ease-in-out infinite;
  }
  .pain__card:nth-child(2) { animation-delay: .35s; }
  .pain__card:nth-child(3) { animation-delay: .7s; }
  .pain__card:nth-child(4) { animation-delay: 1.05s; }
  .pain__card:nth-child(5) { animation-delay: 1.4s; }
  .pain__card:nth-child(6) { animation-delay: .55s; }
  .pain__card:nth-child(7) { animation-delay: .9s; }
  .pain__card:nth-child(8) { animation-delay: 1.6s; }
  .pain__card:nth-child(9) { animation-delay: .2s; }

  /* ── Process ── */
  .process .section-subtitle { margin-bottom: 48px; }
  .process__steps    { flex-direction: column; gap: 32px; }
  .process__connector {
    width: 2px; height: 28px;
    background: linear-gradient(180deg, var(--amber), var(--green-accent));
    align-self: center; margin-top: 0;
  }
  .process__connector::after {
    right: -5px; top: auto; bottom: -6px;
    border-left-color: transparent;
    border-top-color: var(--green-accent);
  }

  /* ── Compare ── */
  .compare__vs-layout { grid-template-columns: 1fr; gap: 12px; }
  .compare__vs-divider { display: none; }
  .compare__vs-layout .compare__col--bad,
  .compare__vs-layout .compare__col--good { border-radius: var(--radius-md); transform: none; }

  .compare__table { grid-template-columns: 1fr; }
  .compare__col--bad  { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .compare__col--good { border-radius: 0 0 var(--radius-md) var(--radius-md); transform: none; }

  .compare__note,
  .compare__disclaimer { max-width: 100%; }

  /* ── Fear box ── */
  .fear-box { padding: 28px 24px; }
  .fear-box__total { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fear-box__total-num { font-size: 26px; }

  /* ── For Whom ── */
  .forwhom__groups { grid-template-columns: 1fr; gap: 16px; }

  /* ── Final CTA ── */
  .final-cta__inner  { flex-direction: column; text-align: center; gap: 28px; }
  .final-cta__mascot { width: 220px; }
  .final-cta__content h2 { font-size: 28px; }

  /* ── Footer ── */
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ═══════════════════════════════════════════
   MOBILE — 480px
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  /* Sticky CTA не растягивается на весь экран */
  .sticky-cta .btn { width: auto; }

  .btn        { width: 100%; justify-content: center; }
  .btn--large { padding: 18px 32px; font-size: 16px; }

  .hero__title  { font-size: 38px; }
  .hero__mascot { max-width: 200px; }

  .pain__accent-phrase { font-size: 36px; }

  .faq__question { padding: 18px 16px; font-size: 15px; }
  .faq__answer p { padding: 0 16px; }

  .compare__list li,
  .compare__col-header { padding-left: 16px; padding-right: 16px; }

  .forwhom__group { padding: 24px 18px; }
  .process__step  { padding: 32px 20px; }

  .fear-box        { padding: 24px 18px; }
  .fear-box__price { font-size: 16px; }
}

/* ═══════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero__mascot, .final-cta__mascot { animation: none; }
  .pain__car-base, .pain__handbrake { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__badge::before { animation: none; }
}
@media (max-width: 480px) {
  .hero__mascot,
  .final-cta__mascot { animation: none; }
}