/* ============================================================
   Токены. Источник правды – design-system.md, раздел 3.
   ============================================================ */
:root {
  /* color */
  --color-bg-page: #0A0A0B;
  --color-bg-sheet: #F3F3F3;
  --color-bg-card: #FFFFFF;
  --color-bg-elevated: #232323;
  --color-border-dark: #323232;
  --color-rule-on-dark: rgba(255, 255, 255, .14);
  --color-rule-on-light: rgba(10, 10, 11, .16);
  --color-glass-light: rgba(243, 243, 243, .72);
  --color-glass-white: rgba(255, 255, 255, .8);
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: #999999;
  --color-text-on-light: #0A0A0B;
  --color-text-on-light-muted: #777777;
  --color-accent: #CCFF14;
  --color-on-accent: #0A0A0B;
  --color-sticker-mint: #71CFA3;
  --color-sticker-sky: #BCEFFF;
  --color-sticker-paper: var(--color-bg-sheet);
  --color-brand-claude: #D97757; /* фирменный оранжевый Claude, только для логотипа */

  /* space */
  --space-5: 5px;  --space-10: 10px; --space-15: 15px; --space-20: 20px;
  --space-25: 25px; --space-35: 35px; --space-50: 50px; --space-70: 70px;
  --space-100: 100px; --space-150: 150px; --space-180: 180px;
  --space-250: 250px; --space-300: 300px;

  /* radius */
  --radius-s: 4px; --radius-m: 12px; --radius-l: 20px;
  --radius-pill-m: 25px; --radius-pill-s: 18px; --radius-badge: 10px; --radius-full: 999px;

  /* grid */
  --grid-columns: 12;
  --grid-gutter: 15px;
  --grid-margin: 25px;
  --sheet-inset: 5px;
  --col-8: 922px;
  --col-10: 1156px;
  --header-h: 100px;
  --hs: 1; /* масштаб hero: min(1, vw/1440, vh/900), ставит main.js */

  /* type: одна гарнитура, один вес */
  --font-display: 'Onest', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --size-pill: clamp(24px, 2.35vw, 34px); /* крупные пилюли-термины, единственный размер вне шкалы */

  /* motion */
  --ease-sharp: cubic-bezier(.9, 0, .1, 1);
  --ease-overshoot: cubic-bezier(.16, .03, .08, 1.55);
  --duration-150: 150ms; --duration-200: 200ms; --duration-300: 300ms; --duration-400: 400ms;
}

/* ============================================================
   База
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 500 22px/1.2 var(--font-display);
  background: var(--color-bg-page);
  color: var(--color-text-on-dark);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga" 1, "kern" 1;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.wrapper { padding-left: var(--grid-margin); padding-right: var(--grid-margin); }
.muted { color: var(--color-text-on-dark-muted); }
.sheet .muted { color: var(--color-text-on-light-muted); }

/* ============================================================
   Типографика – шкала из design-system.md 3.2
   ============================================================ */
.display-xl { font: 500 140px/0.85 var(--font-display); letter-spacing: -.03em; }
.display-l  { font: 500 120px/0.95 var(--font-display); letter-spacing: -.02em; }
.display-m  { font: 500 65px/1.02 var(--font-display);  letter-spacing: -.02em; }
.display-s  { font: 500 48px/1.02 var(--font-display);  letter-spacing: -.02em; }
.title-xs   { font: 500 30px/1.02 var(--font-display);  letter-spacing: -.02em; }
.title-xxs  { font: 500 22px/1.22 var(--font-display);  letter-spacing: -.02em; }
.body-m     { font: 500 22px/1.2 var(--font-display); }
.body-s     { font: 500 18px/1.4 var(--font-display); }
.body-xs    { font: 500 12px/1.4 var(--font-display);   letter-spacing: -.02em; }
.label-m    { font: 500 14px/1.4 var(--font-display); }
.label-s    { font: 500 12px/1.4 var(--font-display); }

@media (max-width: 768px) {
  :root { --grid-margin: 15px; --header-h: 80px; }
  body { font-size: 18px; }
  .display-xl { font-size: 50px; }
  .display-l  { font-size: 65px; }
  .display-m  { font-size: 40px; }
  .display-s  { font-size: 30px; }
  .title-xxs  { font-size: 18px; }
}
@media (max-width: 500px) {
  :root { --sheet-inset: 3px; }
  .display-l { font-size: 44px; }
}

/* ============================================================
   Компоненты – design-system.md, раздел 4
   ============================================================ */

/* Sheet */
.sheet {
  margin: var(--sheet-inset);
  background: var(--color-bg-card);
  color: var(--color-text-on-light);
  border-radius: var(--radius-l);
}
.sheet--grey { background: var(--color-bg-sheet); }
.sheet--white { background: var(--color-bg-card); }

/* Roll */
.roll { display: inline-flex; align-items: center; overflow: hidden; }
.roll__in { display: grid; overflow: hidden; height: 1.6em; line-height: 1.6em; }
.roll__in > span { grid-area: 1 / 1; display: block; transition: transform var(--duration-400) var(--ease-overshoot); white-space: nowrap; }
.roll__in > span:last-child { transform: translateY(100%); }
@media (hover: hover) {
  .roll:hover .roll__in > span:first-child { transform: translateY(-100%); }
  .roll:hover .roll__in > span:last-child  { transform: translateY(0); }
}

/* Button/Primary */
.btn {
  height: 50px; padding: 0 var(--space-25); border-radius: var(--radius-pill-m);
  font: 500 15px/50px var(--font-display);
  display: inline-flex; align-items: center; gap: var(--space-15); width: max-content;
  cursor: pointer; white-space: nowrap;
}
.btn .roll__in { height: 50px; line-height: 50px; }
.btn--accent   { background: var(--color-accent);      color: var(--color-on-accent); }
.btn--black    { background: var(--color-bg-page);     color: var(--color-text-on-dark); }
.btn--light    { background: var(--color-bg-sheet);    color: var(--color-text-on-light); }
.btn--elevated { background: var(--color-bg-elevated); color: var(--color-text-on-dark); }
.btn--white    { background: var(--color-bg-card);     color: var(--color-text-on-light); }
.arrow { width: 9px; height: 9px; fill: currentColor; flex: none; }
.btn--black .arrow { fill: var(--color-accent); }
.btn:focus-visible, .nav-pill a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sheet .btn:focus-visible, .sheet .nav-pill a:focus-visible { outline-color: var(--color-bg-page); }

/* Chip */
.chip {
  height: 36px; padding: 0 14px; border-radius: var(--radius-pill-s);
  font: 500 14px/36px var(--font-display);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.chip--black    { background: var(--color-bg-page);     color: var(--color-text-on-dark); }
.chip--white    { background: var(--color-bg-card);     color: var(--color-text-on-light); }
.chip--light    { background: var(--color-bg-sheet);    color: var(--color-text-on-light); }
.chip--elevated { background: var(--color-bg-elevated); color: var(--color-text-on-dark); }
.chip--accent   { background: var(--color-accent);      color: var(--color-on-accent); }
.chip__plus { margin: 0 2px; }
.icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon--logo { stroke: none; }

/* Pill: крупный термин с обводкой, без подложки */
.pill {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .45em .9em; border-radius: var(--radius-full);
  border: 1px solid currentColor;
  font: 500 var(--size-pill)/1.1 var(--font-display); letter-spacing: -.02em; white-space: nowrap;
}
.pill--accent { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.pill--on-light { color: var(--color-text-on-light); }
.pill__logo { width: .7em; height: .7em; }

/* Sticker */
.sticker { border-radius: var(--radius-l); color: var(--color-text-on-light); }
.no-js .sticker { transform: rotate(var(--tilt, -2deg)); }
.sticker--accent { background: var(--color-accent); }
.sticker--mint   { background: var(--color-sticker-mint); }
.sticker--sky    { background: var(--color-sticker-sky); }
.sticker--paper  { background: var(--color-sticker-paper); }

/* Списки с линиями: линия между пунктами, снаружи линий нет */
.steps, .lines, .prices { display: flex; flex-direction: column; --rule: var(--color-rule-on-light); }
.steps li, .lines li, .prices li { position: relative; padding: 12px 0; }
.steps li::after, .lines li::after, .prices li::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--rule); transform-origin: left center; transform: scaleX(var(--rule-scale, 1));
}
.steps li:first-child::after, .lines li:first-child::after, .prices li:first-child::after { display: none; }
.steps { counter-reset: step; }
.steps li { display: grid; grid-template-columns: 32px 1fr; align-items: baseline; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); font: 500 12px/1.4 var(--font-display); opacity: .6; }
.way--plain .steps, .notcourse .lines, .day .lines, .author .lines { --rule: var(--color-rule-on-dark); }
.lines li { display: flex; align-items: baseline; gap: 12px; }
.lines--cols { display: block; columns: 2; column-gap: var(--grid-gutter); }
.lines--cols li { break-inside: avoid; }

/* Список-прожектор: строка загорается у центра экрана и на hover */
.lines--spot li { color: var(--color-text-on-dark-muted); transition: color var(--duration-300), transform var(--duration-400) var(--ease-overshoot); }
.lines--spot li .icon { width: 20px; height: 20px; stroke-width: 1.6; align-self: center; transform-origin: center; transform: rotate(-90deg) scale(.4); opacity: 0; transition: color var(--duration-300), opacity var(--duration-300), transform 600ms var(--ease-overshoot); }
.lines--spot li.is-in .icon { transform: none; opacity: 1; }
.no-js .lines--spot li .icon { transform: none; opacity: 1; }
.lines--spot li.is-lit { color: var(--color-text-on-dark); }
.lines--spot li.is-lit .icon { color: var(--color-accent); }
@media (hover: hover) {
  .lines--spot li:hover { color: var(--color-text-on-dark); transform: translateX(8px); }
  .lines--spot li.is-in:hover .icon { color: var(--color-accent); transform: rotate(45deg); }
}

/* Окно-визуал (референс .h-learn .visual) */
.visual {
  width: 100%; max-width: var(--col-10); margin: 0 auto; aspect-ratio: 1.6;
  background: var(--color-bg-page); border-radius: var(--radius-l); overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-end;
}
.visual--wide { aspect-ratio: 4 / 3; max-width: var(--col-8); }
.visual__full { width: 100%; height: 100%; object-fit: cover; }

/* Картинка вместо курсора */
.cursor-media {
  position: fixed; left: 0; top: 0; width: 280px; margin: -105px 0 0 -140px; pointer-events: none; z-index: 20;
}
.cursor-media__in { aspect-ratio: 4 / 3; border-radius: var(--radius-m); overflow: hidden; background: var(--color-bg-page); opacity: 0; transform: scale(.8); }
.cursor-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.cursor-media video.is-on { opacity: 1; }
.cursor-media__in { position: relative; }
[data-cursor-media] li { cursor: none; }
@media (hover: none) { .cursor-media { display: none; } [data-cursor-media] li { cursor: auto; } }

/* Видео работ во всех окнах: заполняют контейнер, постер до старта */
.lazy-video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--color-bg-elevated); }

/* Сетка */
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); }

/* Появление */
.js [data-reveal] { visibility: hidden; }
.js [data-reveal].is-ready { visibility: visible; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================================
   Header: закреплён, элементы со стеклом; цвет имени меняется по секции
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--grid-margin); pointer-events: none;
  color: var(--color-text-on-light);
  transition: color var(--duration-300) var(--ease-sharp);
}
.header > * { pointer-events: auto; }
.header--on-dark { color: var(--color-text-on-dark); }
.header__logo { height: 35px; display: inline-flex; align-items: center; gap: var(--space-10); }
.header__ava { width: 35px; height: 35px; border-radius: var(--radius-full); object-fit: cover; }
.header__right { display: flex; align-items: center; gap: var(--space-5); }
.nav-pill {
  height: 50px; padding: 0 14px; border-radius: var(--radius-pill-m);
  background: var(--color-bg-sheet); color: var(--color-text-on-light);
  display: flex; align-items: center; font: 500 15px/50px var(--font-display);
}
.nav-pill a { padding: 0 13px; height: 50px; }
.nav-pill .roll__in { height: 50px; line-height: 50px; }
/* круглая кнопка 50 – стрелка или гамбургер, только на ≤ 1024 */
.btn-round { width: 50px; height: 50px; border-radius: var(--radius-full); display: none; place-items: center; flex: none; cursor: pointer; }
.btn-round.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn-round .arrow { width: 12px; height: 12px; }
.burger { position: relative; color: var(--color-text-on-light); }
.burger__line { position: absolute; left: 16px; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform var(--duration-300) var(--ease-sharp), top var(--duration-300) var(--ease-sharp); }
.burger__line:first-child { top: 21px; }
.burger__line:last-child { top: 27px; }
.burger.is-open .burger__line:first-child { top: 24px; transform: rotate(45deg); }
.burger.is-open .burger__line:last-child { top: 24px; transform: rotate(-45deg); }
/* мобильное меню – лист bg/elevated снизу, как в референсе */
.mobnav {
  position: fixed; left: var(--grid-margin); right: var(--grid-margin); bottom: var(--grid-margin); z-index: 9;
  background: var(--color-bg-elevated); color: var(--color-text-on-dark); border-radius: var(--radius-l);
  padding: var(--space-25) var(--space-25) var(--space-20);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); visibility: hidden;
  transition: clip-path var(--duration-300) var(--ease-sharp), visibility var(--duration-300);
}
.mobnav.is-open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); visibility: visible; }
.mobnav__links { display: flex; flex-direction: column; }
.mobnav__link { display: block; padding: var(--space-15) 0; border-bottom: 1px solid var(--color-border-dark); }
.mobnav__cta { width: 100%; justify-content: center; margin-top: var(--space-20); }
.mobnav__cta .arrow { margin-left: var(--space-10); }
@media (min-width: 1025px) { .mobnav { display: none; } }

.glass { background: var(--color-glass-light); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background var(--duration-300); }
.header--on-grey .glass { background: var(--color-glass-white); }

/* ============================================================
   01 Hero
   ============================================================ */
.hero {
  min-height: calc(100vh - 2 * var(--sheet-inset));
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  padding: var(--header-h) 0 var(--space-50);
}
.hero__top {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: calc(var(--space-25) * var(--hs)); padding-top: calc(var(--space-20) * var(--hs));
}
/* Все размеры hero умножены на --hs: пропорции 1440×900 сохраняются на любом экране */
.hero__top .display-xl { font-size: calc(140px * var(--hs)); }
.hero__kicker { color: var(--color-text-on-light); font-size: calc(22px * var(--hs)); }

.fan {
  --card-w: calc(320px * var(--hs)); /* карточки 4:3 под пропорцию видео */
  --overlap: calc(var(--card-w) * -0.2);
  display: flex; justify-content: center; align-items: flex-start;
  margin-top: calc(var(--space-50) * var(--hs)); padding-top: var(--space-10); width: 100%;
}
.fan__card {
  --y: calc(var(--yv, 0) * 1px * var(--hs));
  width: var(--card-w); aspect-ratio: 4 / 3; flex: none;
  border-radius: var(--radius-l); overflow: hidden; background: var(--color-bg-page);
  transform-origin: 50% 110%;
  transform: rotate(var(--r)) translate(var(--shift, 0), var(--y)) scale(var(--grow, 1));
  position: relative; z-index: var(--z);
  transition: transform var(--duration-400) var(--ease-overshoot), z-index 0s;
}
.fan.is-intro .fan__card { transition: none; }
.fan__card + .fan__card { margin-left: var(--overlap); }
.fan__card img { width: 100%; height: 100%; object-fit: cover; }
/* hover: карточка растёт и всплывает, соседи раздвигаются (на 30 % мягче первой версии) */
@media (hover: hover) {
  .fan__card:hover { z-index: 9; transform: rotate(var(--r)) translate(0, calc(var(--y) - 17px)) scale(1.07); }
  .fan:has(.fan__card:hover) .fan__card:not(:hover) { --shift: -24px; }
  .fan__card:hover ~ .fan__card { --shift: 24px; }
}

.hero__bottom {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: calc(var(--space-25) * var(--hs)); margin-top: calc(var(--space-70) * var(--hs));
}
.hero__lead { max-width: calc(560px * var(--hs)); color: var(--color-text-on-light); font-size: calc(18px * var(--hs)); }
.hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); margin-top: var(--space-10); }

@media (max-width: 1024px) { .nav-pill, .header__cta { display: none; } .btn-round { display: grid; } }
@media (max-width: 768px) {
  .hero__top .display-xl { font-size: clamp(50px, 13vw, 90px); }
  .hero__kicker { font-size: 18px; }
  .hero__lead { font-size: 18px; max-width: 560px; }
  .fan { --card-w: 40vw; --overlap: -14vw; margin-top: var(--space-35); }
  .fan__card { --y: calc(var(--yv, 0) * 1px); }
  .hero__bottom { margin-top: var(--space-50); }
}
@media (max-width: 500px) {
  .header__logo { white-space: nowrap; }
  .fan { --card-w: 46vw; --overlap: -12vw; }
  .fan__card:nth-child(1), .fan__card:nth-child(5) { display: none; }
  .fan__card:nth-child(2), .fan__card:nth-child(4) { --yv: 26; --r: -9deg; }
  .fan__card:nth-child(4) { --r: 9deg; }
  .btn { padding: 0 var(--space-20); }
}

/* ============================================================
   02 Проблема
   ============================================================ */
.problem { padding-top: var(--space-180); }
.problem__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-25); }
.problem__head .display-l { max-width: 1100px; }
.problem__col {
  width: 100%; max-width: var(--col-8); margin: var(--space-100) auto 0;
  display: flex; flex-direction: column; gap: var(--space-70);
}
.problem__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-25); }
.problem__text .title-xs { max-width: 776px; }
/* Промпт как настоящее поле ввода с кнопкой отправки */
.prompt-box {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-25);
  padding: var(--space-25) var(--space-25) var(--space-25) var(--space-35); min-height: 100px;
  background: var(--color-bg-elevated); border-radius: var(--radius-l); color: var(--color-text-on-dark);
}
.prompt-box__text { flex: 1; }
.prompt-box__send {
  width: 50px; height: 50px; border-radius: var(--radius-full); flex: none;
  background: var(--color-accent); color: var(--color-on-accent);
  display: grid; place-items: center; transition: background var(--duration-300), color var(--duration-300);
}
.prompt-box__ico { width: 20px; height: 20px; grid-area: 1 / 1; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--duration-200), transform var(--duration-300) var(--ease-overshoot); }
.prompt-box__ico--stop { fill: currentColor; stroke: none; opacity: 0; transform: scale(.5); }
.prompt-box.is-sent .prompt-box__send { background: var(--color-bg-card); color: var(--color-on-accent); }
.prompt-box.is-sent .prompt-box__ico--send { opacity: 0; transform: scale(.5); }
.prompt-box.is-sent .prompt-box__ico--stop { opacity: 1; transform: scale(1); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .prompt-box.is-sent .prompt-box__ico--stop { animation: none; } }
.problem__same { display: flex; flex-direction: column; gap: var(--space-25); }
.same { display: flex; flex-direction: column; gap: var(--space-10); color: var(--color-text-on-dark); }
.problem__verdict { max-width: 100%; }

@media (max-width: 768px) {
  .problem { padding-top: var(--space-150); }
  .problem__col { margin-top: var(--space-70); gap: var(--space-50); }
  .prompt-box { padding: var(--space-20); min-height: 80px; }
  .prompt-box__text { font-size: 20px; }
}

/* ============================================================
   03 Один инструмент
   ============================================================ */
.contrast { padding-top: var(--space-180); padding-bottom: var(--space-180); }
.contrast__title { text-align: center; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-15); }
.contrast__body { margin-top: var(--space-100); align-items: start; }
.way { display: flex; flex-direction: column; gap: var(--space-25); }
.way--plain { grid-column: 1 / 7; padding: var(--space-50); border-radius: var(--radius-l); background: var(--color-bg-elevated); color: var(--color-text-on-dark-muted); }
.way--plain .title-xs { color: var(--color-text-on-dark); }
.way--sticker { grid-column: 7 / 13; padding: var(--space-50); }
.way .steps { font: 500 18px/1.4 var(--font-display); }
.way__shot { aspect-ratio: 4 / 3; border-radius: var(--radius-m); overflow: hidden; margin-top: var(--space-10); }
.way__shot img { width: 100%; height: 100%; object-fit: cover; }
.way__shot--wide { aspect-ratio: 3040 / 1894; } /* запись экрана автора в тёмной карточке, пропорция самой записи */

.contrast__end { margin-top: var(--space-150); display: flex; flex-direction: column; align-items: center; gap: var(--space-50); }
.contrast__verdict { max-width: 900px; text-align: center; }
.think { display: flex; align-items: center; justify-content: center; gap: var(--space-25); }
.think__meme { width: 260px; aspect-ratio: 1; border-radius: var(--radius-l); overflow: hidden; }
.think__meme img { width: 100%; height: 100%; object-fit: cover; }
.think__sticker { padding: var(--space-35) var(--space-50); white-space: nowrap; }

@media (max-width: 900px) {
  .way--plain { grid-column: 1 / 13; }
  .way--sticker { grid-column: 1 / 13; margin-top: var(--space-50); }
}
@media (max-width: 768px) {
  .contrast { padding-top: var(--space-150); padding-bottom: var(--space-150); }
  .contrast__body { margin-top: var(--space-70); }
  .way--plain, .way--sticker { padding: var(--space-35) var(--space-25); }
  .contrast__end { margin-top: var(--space-100); }
  .think { flex-direction: column; }
  .think__meme { width: 200px; }
  .think__sticker { padding: var(--space-20) var(--space-35); white-space: normal; text-align: center; }
}

/* ============================================================
   04 Эта страница сделана с AI – пин 300vh, скриншоты пролетают мимо
   ============================================================ */
.meta { height: 300vh; overflow: clip; }
.meta__stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.meta__head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-25); }
.meta__head .display-m { max-width: 1000px; }
.meta__logo { width: 100px; height: 100px; margin-bottom: var(--space-10); }
.meta__head .title-xs { max-width: 776px; }
.meta__shots { position: absolute; inset: 0; pointer-events: none; }
.meta__shot {
  position: absolute; left: var(--x); top: 50%; width: var(--w); z-index: var(--z);
  border-radius: var(--radius-m); transform: rotate(var(--rot));
  box-shadow: 0 0 0 1px var(--color-rule-on-light);
}
.meta__shot--blur { filter: blur(3px); opacity: .7; }
@media (max-width: 768px) {
  .meta { height: 220vh; }
  .meta__shot { width: calc(var(--w) * 1.8); }
}

/* ============================================================
   05 Один дизайнер вместо команды
   ============================================================ */
.team { padding-top: var(--space-180); padding-bottom: var(--space-180); }
.team__title { max-width: 1000px; margin: 0 auto; text-align: center; }
.chains { display: flex; flex-direction: column; gap: var(--space-50); margin-top: var(--space-100); }
.chain { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-15); }
.chain__label { text-align: center; }
.chain__list { display: flex; align-items: center; justify-content: center; gap: var(--space-15); flex-wrap: wrap; }
.chain__list .pill { flex: 1; justify-content: center; }
.chain__arrow { color: var(--color-text-on-dark-muted); font: 500 var(--size-pill)/1 var(--font-display); flex: none; }
.team__lead { text-align: center; margin-top: var(--space-100); }
.rail { margin: var(--space-50) calc(-1 * var(--grid-margin)) 0; overflow: hidden; }
.rail__track { display: flex; gap: var(--grid-gutter); width: max-content; padding-left: var(--grid-margin); }
.rail__card { width: clamp(300px, 31.5vw, 453px); display: flex; flex-direction: column; gap: var(--space-15); }
.rail__card figure { aspect-ratio: 4 / 3; border-radius: var(--radius-l); overflow: hidden; background: var(--color-bg-elevated); }
.rail__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rail__card .title-xxs { padding-left: var(--space-5); }
.team__end { max-width: 900px; margin: var(--space-100) auto 0; text-align: center; }

@media (max-width: 900px) {
  .chain__list .pill { flex: none; }
}
@media (max-width: 768px) {
  .team { padding-top: var(--space-150); padding-bottom: var(--space-150); }
  .chains { margin-top: var(--space-50); }
  .team__lead { margin-top: var(--space-70); }
  .rail__card { width: calc(100vw - 2 * var(--grid-margin) - 15px); }
  .team__end { margin-top: var(--space-70); }
}

/* ============================================================
   06 Что такое wow-сайт
   ============================================================ */
.wow__inner { padding-top: var(--space-150); padding-bottom: var(--space-150); }
.wow__title { text-align: center; max-width: 100%; margin: 0 auto; }
.defs { margin: var(--space-100) auto 0; max-width: var(--col-10); --rule: var(--color-rule-on-light); }
.defs li {
  position: relative; display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--grid-gutter);
  align-items: baseline; padding: var(--space-25) 0;
}
.defs li::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--rule); transform-origin: left center; transform: scaleX(var(--rule-scale, 1));
}
.defs li:first-child::after { display: none; }
.defs .body-s { max-width: 560px; }
.wow__stack { max-width: var(--col-10); margin: var(--space-50) auto 0; display: flex; align-items: center; gap: var(--space-25); flex-wrap: wrap; }
.terms { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.wow__stack .body-s { max-width: 460px; }
.code { margin-top: var(--space-150); align-items: start; }
.code__text { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--space-20); }
.code__text .display-m { margin-bottom: var(--space-10); }
.code__shot { aspect-ratio: 4 / 3; border-radius: var(--radius-l); overflow: hidden; margin-top: var(--space-25); }
.code__shot img { width: 100%; height: 100%; object-fit: cover; }
.code__sticker { grid-column: 7 / 13; padding: var(--space-50); display: flex; flex-direction: column; gap: var(--space-25); }
.code__sticker .steps { font: 500 18px/1.4 var(--font-display); }

@media (max-width: 900px) {
  .defs li { grid-template-columns: 1fr; row-gap: var(--space-10); }
  .code__text { grid-column: 1 / 13; }
  .code__sticker { grid-column: 1 / 13; margin-top: var(--space-50); }
}
@media (max-width: 768px) {
  .wow__inner { padding-top: var(--space-100); padding-bottom: var(--space-100); }
  .defs { margin-top: var(--space-70); }
  .code { margin-top: var(--space-100); }
  .code__sticker { padding: var(--space-35) var(--space-25); }
}

/* ============================================================
   07 Не курс по Claude Code
   ============================================================ */
.notcourse { padding-top: var(--space-180); padding-bottom: var(--space-180); }
.notcourse__body { align-items: start; }
.notcourse__left { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--space-20); }
.notcourse__left .display-m { margin-bottom: var(--space-10); }
.notcourse__list { grid-column: 7 / 13; font: 500 22px/1.22 var(--font-display); letter-spacing: -.02em; }
.notcourse__verdict { max-width: 900px; margin: var(--space-150) auto 0; text-align: center; }

@media (max-width: 900px) {
  .notcourse__left { grid-column: 1 / 13; }
  .notcourse__list { grid-column: 1 / 13; margin-top: var(--space-50); }
}
@media (max-width: 768px) {
  .notcourse { padding-top: var(--space-150); padding-bottom: var(--space-150); }
  .notcourse__list { font-size: 18px; }
  .notcourse__verdict { margin-top: var(--space-100); }
}

/* ============================================================
   08 Этот сайт тоже сделан с AI – лист
   ============================================================ */
.sitetwo__inner { padding-top: var(--space-150); padding-bottom: var(--space-150); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-70); }
.sitetwo__inner .display-m { max-width: 900px; }
.sitetwo__text { display: flex; flex-direction: column; gap: var(--space-25); max-width: 900px; }
@media (max-width: 768px) { .sitetwo__inner { padding-top: var(--space-100); padding-bottom: var(--space-100); gap: var(--space-50); } }

/* ============================================================
   09 Как ты изменишься – полоса лиц статична, ниже пин с облаком пилюль
   ============================================================ */
.change__top { padding-top: var(--space-150); padding-bottom: var(--space-35); }
/* полоса: одна высота, зазор 1 px, один радиус у всех кроме пилюли */
.strip { width: 100%; height: 286px; display: flex; gap: 1px; }
.strip__item { height: 100%; overflow: hidden; background: var(--color-bg-elevated); border-radius: calc(var(--radius-l) * 2); }
.strip__item img { width: 100%; height: 100%; object-fit: cover; }
.strip__item--wide   { flex: 2.4; }
.strip__item--square { flex: none; aspect-ratio: 1; }
.strip__item--pill   { flex: 1.2; border-radius: var(--radius-full); }
.strip__item--rect   { flex: 1.5; }
.change { height: 300vh; }
.change__stage { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: flex-start; }
.change__inner { width: 100%; padding-top: var(--space-70); padding-bottom: var(--space-50); display: flex; flex-direction: column; align-items: center; text-align: center; }
.change__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); }
.change__head .display-m { max-width: 900px; }
.change__head .title-xs { max-width: 776px; }
.change__lead { margin-top: var(--space-70); }
.cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-15); margin-top: var(--space-20); max-width: var(--col-10); --size-pill: clamp(22px, 2vw, 30px); }
.cloud .pill { will-change: transform; }
.change__end { max-width: 900px; margin-top: var(--space-70); }
/* глитч на hover: копии текста в акцентном и голубом со сдвигом, рваная маска */
.glitch { position: relative; display: inline-block; }
@media (hover: hover) {
  .pill:hover .glitch { animation: glitch 420ms steps(2, end) 1; }
}
@keyframes glitch {
  0%   { transform: none; text-shadow: none; clip-path: none; }
  20%  { transform: translate(-3px, 1px); text-shadow: 3px 0 var(--color-accent), -3px 0 var(--color-sticker-sky); }
  40%  { transform: translate(3px, -1px); text-shadow: -3px 0 var(--color-accent), 3px 0 var(--color-sticker-sky); clip-path: inset(15% 0 40% 0); }
  60%  { transform: translate(-2px, 0); clip-path: inset(55% 0 5% 0); }
  80%  { transform: translate(2px, 1px); text-shadow: 2px 0 var(--color-accent), -2px 0 var(--color-sticker-sky); clip-path: none; }
  100% { transform: none; text-shadow: none; }
}
@media (max-width: 900px) {
  .strip { height: 200px; }
  .strip__item--wide { flex: 1.6; }
}
@media (max-width: 768px) {
  .change { height: auto; }
  .change__top { padding-top: var(--space-100); }
  .strip { height: 120px; }
  .change__stage { position: static; min-height: 0; }
  .change__inner { padding-top: var(--space-70); padding-bottom: var(--space-100); }
  .change__lead { margin-top: var(--space-35); }
  .cloud { gap: var(--space-10); }
  .change__end { margin-top: var(--space-50); }
}

/* ============================================================
   10 Программа – чёрная, три дня карточками
   ============================================================ */
.program { padding-top: var(--space-180); padding-bottom: var(--space-180); display: flex; flex-direction: column; gap: var(--space-15); }
.program__title { text-align: center; margin-bottom: var(--space-70); }
.day { background: var(--color-bg-elevated); border-radius: var(--radius-l); padding: var(--space-50); }
.day__grid { align-items: start; }
.day__left { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--space-20); }
.day__left .display-m { margin-bottom: var(--space-5); }
.day__meta { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.day__meta .chip--elevated { background: var(--color-bg-page); }
.day__result { display: flex; flex-direction: column; gap: var(--space-10); margin-top: var(--space-15); }
.day__label { display: inline-flex; align-items: center; gap: var(--space-10); }
.day__label .icon { width: 18px; height: 18px; color: currentColor; }
.day__shot { aspect-ratio: 4 / 3; max-width: 420px; border-radius: var(--radius-m); overflow: hidden; margin: var(--space-10) 0; }
.day__shot img { width: 100%; height: 100%; object-fit: cover; }
.day__right { grid-column: 7 / 13; display: flex; flex-direction: column; gap: var(--space-15); }
@media (max-width: 900px) {
  .day__left { grid-column: 1 / 13; }
  .day__right { grid-column: 1 / 13; margin-top: var(--space-35); }
  .lines--cols { columns: 1; }
}
@media (max-width: 768px) {
  .program { padding-top: var(--space-150); padding-bottom: var(--space-150); }
  .program__title { margin-bottom: var(--space-35); }
  .day { padding: var(--space-35) var(--space-20); }
}

/* ============================================================
   11 Какие проекты можно продавать – лист
   ============================================================ */
.projects__inner { padding-top: var(--space-150); padding-bottom: var(--space-150); }
.projects__title { text-align: center; max-width: 900px; margin: 0 auto; }
.projects__body { margin-top: var(--space-100); align-items: start; row-gap: var(--space-70); }
.offer { display: flex; flex-direction: column; gap: var(--space-25); }
.offer:nth-child(1) { grid-column: 1 / 6; }
.offer:nth-child(2) { grid-column: 7 / 13; }
.offer .body-s { max-width: 520px; }
/* выписки Upwork над колонками: белое окно на сером листе, картинка целиком */
.offer__shot { width: 100%; max-width: 460px; border-radius: var(--radius-l); overflow: hidden; background: var(--color-bg-card); margin-bottom: var(--space-10); }
.offer__shot img { width: 100%; height: auto; display: block; }
.prices { margin-top: var(--space-10); }
.prices li { display: grid; grid-template-columns: 1fr max-content; column-gap: var(--space-25); align-items: baseline; padding: var(--space-15) var(--space-20); margin: 0 calc(-1 * var(--space-20)); border-radius: var(--radius-m); transition: background var(--duration-300); }
.prices li::after { left: var(--space-20); right: var(--space-20); }
.prices__name, .prices__value { transition: transform var(--duration-400) var(--ease-overshoot); display: inline-block; }
@media (hover: hover) {
  .prices li:hover { background: var(--color-bg-card); }
  .prices li:hover .prices__name { transform: translateX(8px); }
  .prices li:hover .prices__value { transform: scale(1.06); transform-origin: right center; }
}
.prices__value { text-align: right; white-space: nowrap; }
.projects__end { max-width: 900px; margin: var(--space-100) auto 0; text-align: center; }
@media (max-width: 900px) {
  .offer:nth-child(1), .offer:nth-child(2) { grid-column: 1 / 13; }
}
@media (max-width: 768px) {
  .projects__inner { padding-top: var(--space-100); padding-bottom: var(--space-100); }
  .projects__body { margin-top: var(--space-70); row-gap: var(--space-50); }
  .projects__end { margin-top: var(--space-70); }
}

/* ============================================================
   12 Кто я – пин 400vh: видео выезжают справа большими, сжимаются в ряд слева,
   текст проявляется по скроллу; ≤ 900 – статичная раскладка
   ============================================================ */
.author { height: 400vh; }
.author__stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.author__body { width: 100%; align-items: start; }
.author__left { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--space-50); }
.author__videos { display: flex; gap: var(--space-10); }
.vcard {
  height: 340px; aspect-ratio: 9 / 16; border-radius: var(--radius-m); overflow: hidden;
  background: var(--color-bg-elevated); transform-origin: 0 0; will-change: transform; cursor: pointer;
}
.vcard video { width: 100%; height: 100%; object-fit: cover; display: block; }
.author__right { grid-column: 7 / 13; display: flex; flex-direction: column; gap: var(--space-25); }
.facts { display: flex; flex-direction: column; gap: var(--space-10); }
.author__list { margin-top: var(--space-5); }
@media (max-width: 900px) {
  .author { height: auto; padding-top: var(--space-150); padding-bottom: var(--space-150); }
  .author__stage { position: static; height: auto; display: block; overflow: visible; }
  .author__left, .author__right { grid-column: 1 / 13; }
  .author__right { margin-top: var(--space-50); }
  /* три видео на всю ширину контейнера: ширина от flex, высота от пропорции */
  .author__videos { width: 100%; }
  .vcard { flex: 1 1 0; height: auto; }
}
@media (max-width: 768px) {
  .author__list { font-size: 18px; }
}

/* ============================================================
   13 Что останется – серый лист, 3 + 2 карточки с цифрой
   ============================================================ */
.remains__inner { padding-top: var(--space-150); padding-bottom: var(--space-150); }
.remains__title { text-align: center; max-width: 900px; margin: 0 auto; }
.remains__grid { margin-top: var(--space-100); row-gap: var(--grid-gutter); }
.remain {
  grid-column: span 4; position: relative; overflow: hidden;
  background: var(--color-bg-card); border-radius: var(--radius-l); padding: var(--space-50) var(--space-35) var(--space-35);
  min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-10);
}
.remain--wide { grid-column: span 6; }
.remain__num { position: absolute; top: var(--space-20); right: var(--space-25); opacity: .12; line-height: 1; transition: color var(--duration-300), opacity var(--duration-300), transform var(--duration-400) var(--ease-overshoot); }
/* hover: карточка наклоняется за мышью (JS ставит --rx/--ry), чернеет, цифра загорается акцентом */
.remain { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--duration-300) ease-out, background var(--duration-300), color var(--duration-300); transform-style: preserve-3d; }
@media (hover: hover) {
  .remain:hover { background: var(--color-bg-page); color: var(--color-text-on-dark); }
  .remain:hover .remain__num { color: var(--color-accent); opacity: 1; transform: translateY(-6px); }
}
.remain .body-s { max-width: 460px; }
@media (max-width: 900px) { .remain, .remain--wide { grid-column: 1 / 13; min-height: 0; padding-top: var(--space-100); } }
@media (max-width: 768px) { .remains__inner { padding-top: var(--space-100); padding-bottom: var(--space-100); } .remains__grid { margin-top: var(--space-70); } }

/* ============================================================
   14 Бонус «Сверх» – чёрная, лента без подписей
   ============================================================ */
.bonus { padding-top: var(--space-180); padding-bottom: var(--space-180); }
.bonus__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-25); }
.bonus__text { max-width: 900px; }
.bonus__title { display: inline-flex; align-items: baseline; gap: .25em; flex-wrap: wrap; justify-content: center; }
.bonus__logo { height: .82em; width: auto; align-self: center; }
.rail--slow { margin-top: var(--space-70); }
.rail__card--bare figure { aspect-ratio: 4 / 3; }
/* галерея встреч «Сверх»: фильтры-чипы, карточки 3/12, снимок с builder.sverh.ai */
.meetings { margin-top: var(--space-70); display: flex; flex-direction: column; align-items: center; gap: var(--space-50); }
.meetings__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.meetings__filters .chip { cursor: pointer; transition: background var(--duration-300), color var(--duration-300); }
.meetings__filters .chip.is-active { background: var(--color-accent); color: var(--color-on-accent); }
.meetings__grid { width: 100%; row-gap: var(--grid-gutter); }
.meet { grid-column: span 3; background: var(--color-bg-elevated); border-radius: var(--radius-l); padding: var(--space-15) var(--space-15) var(--space-25); display: flex; flex-direction: column; gap: var(--space-15); }
.meet[hidden] { display: none; }
.meet__media { aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: var(--color-bg-page); }
.meet__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-overshoot); }
@media (hover: hover) { .meet:hover .meet__media img { transform: scale(1.04); } }
.meet__tags { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.meet__tags .chip { height: 30px; line-height: 30px; padding: 0 12px; font-size: 13px; }
.meet__title { padding: 0 var(--space-5); flex: 1; }
.meet__foot { display: flex; justify-content: space-between; gap: var(--space-15); padding: 0 var(--space-5); }
.meet__foot span { display: inline-flex; align-items: center; gap: 6px; }
.icon--fill { fill: currentColor; stroke: none; }
.meetings__more.is-done { display: none; }
@media (max-width: 1024px) { .meet { grid-column: span 6; } }
@media (max-width: 600px) { .meet { grid-column: 1 / 13; } }
.bonus__end { text-align: center; margin-top: var(--space-70); }
@media (max-width: 768px) { .bonus { padding-top: var(--space-150); padding-bottom: var(--space-150); } .rail--slow { margin-top: var(--space-50); } }

/* ============================================================
   15 Тарифы – серый лист, три карточки, средняя чёрная
   ============================================================ */
.pricing__inner { padding-top: var(--space-150); padding-bottom: var(--space-150); }
.pricing__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-25); }
.plans { margin-top: var(--space-100); align-items: start; row-gap: var(--grid-gutter); }
.plan {
  grid-column: span 4; position: relative; display: flex; flex-direction: column; gap: var(--space-15);
  background: var(--color-bg-card); border-radius: var(--radius-l); padding: var(--space-35);
}
.plan--featured { background: var(--color-bg-page); color: var(--color-text-on-dark); margin-top: calc(-1 * var(--space-25)); padding-top: var(--space-50); }
.plan--featured .muted { color: var(--color-text-on-dark-muted); }
.plan__badge { position: absolute; top: calc(-1 * var(--space-15)); left: var(--space-35); }
.plan__price { margin-top: var(--space-5); display: flex; align-items: baseline; gap: var(--space-15); flex-wrap: wrap; }
.plan__old { text-decoration: line-through; }
.plan__from { margin-top: var(--space-10); }
.plan__key { padding: var(--space-15) 0 var(--space-5); }
.plan__list { --rule: var(--color-rule-on-light); }
.plan--featured .plan__list { --rule: var(--color-rule-on-dark); }
.plan__list li { padding: 9px 0; }
.plan__note { margin-top: var(--space-5); }
.plan__btn { margin-top: auto; align-self: stretch; width: 100%; justify-content: center; }
.plan .btn { margin-top: var(--space-20); }
@media (max-width: 1024px) { .plan { padding: var(--space-25); } }
@media (max-width: 900px) { .plan { grid-column: 1 / 13; } .plan--featured { margin-top: 0; } }
@media (max-width: 768px) { .pricing__inner { padding-top: var(--space-100); padding-bottom: var(--space-100); } .plans { margin-top: var(--space-70); } }

/* ============================================================
   15a Отзывы – белый лист, карточки референса на светлом
   ============================================================ */
.testi { padding-top: var(--space-150); padding-bottom: var(--space-150); }
.testi__head { text-align: center; }
.rail--testi { margin-top: var(--space-70); }
.testi__card {
  width: clamp(300px, 31.5vw, 453px); aspect-ratio: 1.04; flex: none;
  border: 1px solid var(--color-rule-on-light); border-radius: var(--radius-m);
  padding: var(--space-50) var(--space-35) var(--space-25);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; gap: var(--space-25);
  color: var(--color-text-on-light); white-space: normal;
  transition: border-color var(--duration-300), background var(--duration-300);
}
.testi__quote { max-width: 340px; }
.testi__who { display: flex; flex-direction: column; align-items: center; gap: var(--space-15); }
.testi__ava { width: 60px; height: 60px; border-radius: var(--radius-full); background: var(--color-bg-sheet); display: grid; place-items: center; font: 500 18px/1 var(--font-display); letter-spacing: -.02em; }
@media (hover: hover) { .testi__card:hover { border-color: var(--color-text-on-light); background: var(--color-bg-sheet); } }
@media (max-width: 768px) {
  .testi { padding-top: var(--space-100); padding-bottom: var(--space-100); }
  .testi__card { width: calc(100vw - 2 * var(--grid-margin) - 15px); aspect-ratio: .9; padding: var(--space-35) var(--space-20) var(--space-20); }
  .testi__quote { font-size: 18px; }
}

/* ============================================================
   16 Гарантия – чёрная, лево-правый паттерн
   ============================================================ */
.guarantee { padding-top: var(--space-180); padding-bottom: var(--space-180); }
.guarantee__body { align-items: start; }
.guarantee__left { grid-column: 1 / 6; }
.guarantee__title { display: flex; flex-direction: column; gap: var(--space-10); }
.guarantee__right { grid-column: 7 / 13; display: flex; flex-direction: column; gap: var(--space-25); }
.guarantee__list { margin-top: var(--space-5); --rule: var(--color-rule-on-dark); }
.guarantee__list li { padding: var(--space-15) 0; align-items: center; }
.guarantee__list li:last-child { border-bottom: 1px solid var(--rule); }
.guarantee__list .icon { width: 20px; height: 20px; stroke-width: 1.6; color: currentColor; }
@media (max-width: 900px) { .guarantee__left, .guarantee__right { grid-column: 1 / 13; } .guarantee__right { margin-top: var(--space-50); } }
@media (max-width: 768px) { .guarantee { padding-top: var(--space-150); padding-bottom: var(--space-150); } }

/* ============================================================
   17 FAQ – белый лист, аккордеон на линиях
   ============================================================ */
.faq__inner { padding-top: var(--space-150); padding-bottom: var(--space-150); }
.faq__title { text-align: center; }
.faq__list { max-width: var(--col-8); margin: var(--space-70) auto 0; --rule: var(--color-rule-on-light); }
.faq__list li { display: block; padding: 0; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-25); padding: var(--space-25) 0; text-align: left; }
.faq__plus { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform var(--duration-400) var(--ease-overshoot); }
.faq__q[aria-expanded="true"] .faq__plus { transform: rotate(45deg); }
.faq__a { height: 0; overflow: hidden; }
.faq__a-in { padding: 0 0 var(--space-25); max-width: 700px; display: flex; flex-direction: column; gap: var(--space-10); color: var(--color-text-on-light-muted); }
.no-js .faq__a { height: auto; }
@media (max-width: 768px) { .faq__inner { padding-top: var(--space-100); padding-bottom: var(--space-100); } .faq__list { margin-top: var(--space-50); } }

/* ============================================================
   18 Финал – слова цитаты въезжают справа, сетка точек за мышью, одна карточка
   ============================================================ */
.final { position: relative; padding-top: var(--space-180); padding-bottom: var(--space-150); overflow: hidden; }
.final__grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.final__top { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-50); }
.final__lead { max-width: 900px; }
.final__quote { max-width: 1200px; }
.final__quote .word { display: inline-block; will-change: transform; }
.final__card {
  position: relative; margin-top: var(--space-150); align-items: start;
  background: var(--color-bg-elevated); border-radius: var(--radius-l); padding: var(--space-50); row-gap: var(--space-50); column-gap: 60px; /* 4× gutter: три колонки не должны сливаться */
}
.final__pic { grid-column: 1 / 5; align-self: stretch; border-radius: var(--radius-m); overflow: hidden; background: var(--color-bg-card); min-height: 320px; }
.final__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.final__left { grid-column: 5 / 9; display: flex; flex-direction: column; gap: var(--space-20); }
.final__list { --rule: var(--color-rule-on-dark); }
.final__right { grid-column: 9 / 13; display: flex; flex-direction: column; gap: var(--space-25); align-self: stretch; justify-content: space-between; }
.final__bonus { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-20) 0; border-top: 1px solid var(--color-rule-on-dark); border-bottom: 1px solid var(--color-rule-on-dark); }
.final__bonus-title { display: inline-flex; align-items: baseline; gap: .3em; }
.final__bonus-logo { height: .9em; width: auto; align-self: center; }
.final__facts { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.final__btn { width: 100%; justify-content: center; }
@media (max-width: 900px) {
  .final__card { display: flex; flex-direction: column; column-gap: 0; }
  .final__pic { min-height: 0; aspect-ratio: 1.45; }
  .final__btn { white-space: normal; height: auto; line-height: 1.2; padding: var(--space-15) var(--space-20); text-align: center; }
  .final__btn .roll__in { height: auto; line-height: 1.2; white-space: normal; }
  .final__btn .roll__in > span { white-space: normal; }
}
@media (max-width: 768px) { .final { padding-top: var(--space-150); padding-bottom: var(--space-100); } .final__card { margin-top: var(--space-100); padding: var(--space-35) var(--space-20); } }

/* ============================================================
   19 Футер
   ============================================================ */
.footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-25); padding-top: var(--space-25); padding-bottom: var(--space-25); border-top: 1px solid var(--color-rule-on-dark); flex-wrap: wrap; }
.footer__nav { display: flex; gap: var(--space-25); }
.footer__top { color: var(--color-text-on-dark-muted); }
@media (hover: hover) { .footer a:hover { color: var(--color-accent); } }