@import url("../fonts/fonts.css");

/* ══════════════════════════════════════════════════════════════
   ТОКЕНЫ — сняты из макета Figma (Selection colors + Typography)
   ══════════════════════════════════════════════════════════════ */

:root {
  --green:      #668448;  /* H1 героя, надзаголовки, цифры */
  --olive:      #535828;  /* кнопка, тёмная секция */
  --olive-mid:  #4C5D3C;  /* стрелки, галочки */
  --lime:       #B1E37E;  /* ссылка на тёмном фоне */
  --sage:       #749158;  /* в макете идёт с прозрачностью 15/30 % */
  --peach:      #FBEEE3;  /* фон секции биорезонанса */

  --white:      #FFFFFF;
  --ink:        #000000;
  --ink-70:     rgba(0, 0, 0, .70);
  --ink-50:     rgba(0, 0, 0, .50);
  --sage-30:    rgba(116, 145, 88, .30);
  --sage-15:    rgba(116, 145, 88, .15);
  --line:       rgba(116, 145, 88, .30);

  --font: 'Montserrat Alternates', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  --t-48: clamp(1.625rem, 1.05rem + 2.5vw, 2.5rem);   /* до 40px */
  --t-32: clamp(1.375rem, 1.18rem + .85vw, 1.75rem);  /* до 28px */
  --t-24: clamp(1.0625rem, 1.02rem + .3vw, 1.1875rem); /* до 19px */
  --t-20: 1.0625rem;                                   /* 17px — основной текст */
  --t-16: 1rem;
  --t-14: .875rem;

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;

  --r-card: 24px;
  --r-pill: 999px;

  --wrap: 1120px;
  --pad: 1.75rem;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ══════════════════════════════════════════════════════════════
   БАЗА
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  /* clip, а не hidden: не создаёт scroll-контейнер и не ломает position: sticky */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-70);
  font-family: var(--font);
  font-size: var(--t-20);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

/* Ни один блок не распирает страницу по горизонтали */
body * { min-width: 0; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-5);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
  /* заголовки не переносим по слогам: слово целиком уходит на новую строку */
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

h1 { font-size: var(--t-48); font-weight: 700; }
h2 {
  font-size: var(--t-48); font-weight: 500;
  margin-top: clamp(3.25rem, 5vw, 4.5rem);
  margin-bottom: clamp(1.5rem, 2vw, 2rem);
}
h3 { font-size: var(--t-32); font-weight: 700; margin-top: var(--sp-7); }
h4 { font-size: var(--t-24); font-weight: 500; }

p { margin: 0 0 var(--sp-4); max-width: 62ch; }

a {
  color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s var(--ease);
}
a:hover { color: var(--olive); }

strong, b { font-weight: 500; color: var(--ink); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.3em; max-width: 62ch; }
li { margin-bottom: var(--sp-2); }
li::marker { color: var(--sage); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

blockquote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--sage-30);
}
blockquote p {
  font-size: var(--t-24); font-weight: 400;
  color: var(--green); margin: 0;
}

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sage-30); color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--olive); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   РАСКЛАДКА
   ══════════════════════════════════════════════════════════════ */

.wrap { width: min(100% - var(--pad) * 2, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--pad) * 2, 760px); margin-inline: auto; }

.section { position: relative; padding-block: clamp(3.75rem, 5.5vw, 6rem); }
.section--tight { padding-block: clamp(2.75rem, 4vw, 4rem); }

/* Шапка секции: заголовок слева, лид справа — как в макете */
.sec-head {
  display: grid; gap: var(--sp-5) var(--sp-8);
  grid-template-columns: 1fr;
  margin-bottom: clamp(2.75rem, 4.5vw, 4.5rem);
}
@media (min-width: 860px) {
  .sec-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; }
  .sec-head__lead { padding-bottom: .35em; }
}
.sec-head h2 { margin: 0; }
.sec-head__lead { font-size: var(--t-24); font-weight: 400; color: var(--ink-70); margin: 0; }

.grid { display: grid; gap: clamp(1.5rem, 2.4vw, 2.25rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* ══════════════════════════════════════════════════════════════
   НАДЗАГОЛОВОК — подчёркнутый капслок
   ══════════════════════════════════════════════════════════════ */

.eyebrow {
  display: inline-block;
  font-size: var(--t-14); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--green);
  border-bottom: 1.5px solid var(--green);
  padding-bottom: 3px;
  margin-bottom: var(--sp-5);
}
.eyebrow--light { color: var(--lime); border-bottom-color: var(--lime); }

/* ══════════════════════════════════════════════════════════════
   КНОПКИ — таблетка
   ══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 58px;
  padding: .85rem 1.9rem;
  font-family: inherit; font-size: var(--t-20); font-weight: 400;
  line-height: 1.25; text-align: center; text-decoration: none;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.985); }

.btn--primary { background: var(--olive); color: #fff; }
.btn--primary:hover { background: #454a20; color: #fff; }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--olive); }
.btn--outline:hover { background: var(--olive); color: #fff; }

.btn--light { background: #fff; color: var(--olive); border-color: #fff; }
.btn--light:hover { background: var(--lime); border-color: var(--lime); color: var(--olive); }

.btn--sm { min-height: 48px; padding: .6rem 1.4rem; font-size: var(--t-16); }
.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* На узких экранах кнопка не должна распирать страницу */
@media (max-width: 620px) {
  .btn {
    min-height: 60px;
    padding: .9rem 1.35rem;
    font-size: var(--t-16);
    width: 100%;
  }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--t-24); font-weight: 400;
  color: var(--green); text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--light { color: var(--lime); }
.link-arrow--light:hover { color: #fff; }

/* ══════════════════════════════════════════════════════════════
   ШАПКА
   ══════════════════════════════════════════════════════════════ */

.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); }

/* шапке нужно больше места, чем колонке текста: иначе меню наезжает на телефон */
.header .wrap { width: min(100% - var(--pad) * 2, 1280px); }

.header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 76px; }

.logo {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; flex-shrink: 0;
  padding-block: var(--sp-2);
}
.logo__mark {
  width: auto; height: 42px; flex-shrink: 0;
  transition: transform .4s var(--ease);
}
.logo:hover .logo__mark { transform: rotate(-6deg) scale(1.04); }
.logo__text { display: block; }
.logo__name { display: block; font-size: var(--t-20); font-weight: 500; color: var(--ink); line-height: 1.2; }
.logo__role { display: block; font-size: var(--t-14); font-weight: 300; color: var(--ink-50); line-height: 1.3; }
@media (max-width: 480px) {
  .logo__mark { height: 34px; }
  .logo__name { font-size: var(--t-16); }
  .logo__role { font-size: .8125rem; }
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.85rem, 1.4vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.nav__list a { white-space: nowrap; font-size: .9375rem; }

/* до 1340px телефон в шапке не помещается вместе с меню — оставляем кнопку */
@media (max-width: 1500px) { .header__phone { display: none; } }
.nav__list a {
  font-size: var(--t-16); font-weight: 300;
  color: var(--ink-70); text-decoration: none;
  padding-block: var(--sp-2);
  border-bottom: 1.5px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__list a:hover,
.nav__list a[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); }

.header__phone { font-size: var(--t-16); font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.header__phone:hover { color: var(--green); }

.burger {
  display: none; width: 46px; height: 46px; margin-left: auto;
  background: none; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; padding: 0; position: relative;
}
.burger span {
  position: absolute; left: 13px; width: 18px; height: 1.5px;
  background: var(--ink); transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1180px) {
  .burger { display: block; }
  .header__phone, .header__cta { display: none; }
  .nav {
    position: fixed; inset: 76px 0 auto; margin: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: var(--sp-4) 0 var(--sp-6);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }

  /* Открытие — каскадом сверху вниз. Закрытие — быстрое и без задержек,
     иначе меню «осыпается» и выглядит рвано. */
  .nav__list li,
  .nav__mobile-cta {
    opacity: 0; transform: translateY(-10px);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
    transition-delay: 0s;
  }
  .nav.is-open .nav__list li,
  .nav.is-open .nav__mobile-cta {
    opacity: 1; transform: none;
    transition: opacity .32s var(--ease), transform .38s var(--ease);
    transition-delay: calc(var(--n, 0) * 45ms + 70ms);
  }

  /* при закрытии сама панель тоже уезжает вверх, а не просто гаснет */
  .nav {
    transform: translateY(-14px) scaleY(.985);
    transform-origin: top center;
    transition: opacity .24s var(--ease), transform .28s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav__list {
    flex-direction: column; align-items: stretch; gap: 0;
    width: min(100% - var(--pad) * 2, var(--wrap)); margin-inline: auto;
  }
  .nav__list li + li { border-top: 1px solid var(--sage-15); }
  .nav__list a { display: block; padding: var(--sp-4) 0; font-size: var(--t-20); border: 0; }
  .nav__mobile-cta { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
}
@media (min-width: 1181px) { .nav__mobile-cta { display: none; } }

/* ══════════════════════════════════════════════════════════════
   ПЕРВЫЙ ЭКРАН
   ══════════════════════════════════════════════════════════════ */

/* overflow не режем: ветки должны быть целыми на любой ширине */
.hero { position: relative; overflow: visible; padding-block: 0 0; }

.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: end; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr); gap: var(--sp-6); }
}

/* Крупная ветка «растёт» из-под навигации и может заходить на текст —
   но всегда позади него: z-index 0 против z-index 1 у текста. */
/* Ветка — прямой ребёнок .hero и лежит строго под контентом:
   .hero > .wrap поднят на z-index 1, поэтому на текст она не наезжает. */
.hero__branch {
  position: absolute; z-index: 0;
  top: clamp(-80px, -5vw, -50px);
  /* держимся левого края колонки контента: иначе на широком мониторе
     ветка уезжает к краю экрана и отрывается от текста */
  /* max(0px, …) — иначе на узком экране ветка срезается левым краем окна */
  left: max(0px, calc(max(var(--pad), (100% - var(--wrap)) / 2) - clamp(30px, 3vw, 70px)));
  width: clamp(300px, 30vw, 480px);
  max-width: none;
  pointer-events: none;
  transform-origin: 12% 40%;
  animation: sway 9s ease-in-out infinite;
}
.hero__text { position: relative; padding-top: clamp(160px, 16vw, 235px); }

@media (max-width: 899px) {
  .hero__branch { width: clamp(230px, 52vw, 360px); top: -34px; left: -26px !important; }
  .hero__text { padding-top: clamp(130px, 32vw, 200px); }
}

/* Сцена справа: тёплое свечение, ветка за фигурой, фигура сверху */
.hero__figure { position: relative; isolation: isolate; }

.hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; bottom: 4%;
  width: 112%; aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 52%,
      rgba(116, 145, 88, .20)  0%,
      rgba(116, 145, 88, .13) 28%,
      rgba(116, 145, 88, .06) 46%,
      rgba(251, 238, 227, .5) 62%,
      rgba(255, 255, 255, 0)  74%);
}

/* Заходит из нижнего правого угла секции, крупная. Привязана к колонке
   контента, чтобы на широком мониторе не улетала к краю экрана. */
.hero__leaf-back {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(215px, 24vw, 410px);
  right: calc(max(var(--pad), (100% - var(--wrap)) / 2) - clamp(80px, 7vw, 170px));
  bottom: 16%;
  transform: rotate(196deg);
  transform-origin: 50% 50%;
  opacity: .95;
  animation: sway-slow 12s ease-in-out infinite;
}

/* Покачивание веток. Только transform, поэтому дёшево для GPU. */
@keyframes sway {
  0%, 100% { transform: rotate(0deg)    translateY(0); }
  25%      { transform: rotate(1.6deg)  translateY(-3px); }
  50%      { transform: rotate(.4deg)   translateY(2px); }
  75%      { transform: rotate(-1.2deg) translateY(-2px); }
}
@keyframes sway-slow {
  0%, 100% { transform: rotate(196deg)   translateY(0); }
  33%      { transform: rotate(194.4deg) translateY(4px); }
  66%      { transform: rotate(197.4deg) translateY(-3px); }
}

.hero__portrait { position: relative; z-index: 2; }

/* Мягкое растворение низа фотографии в фон */
/* Маска по самой картинке, а не перекрывающий слой: иначе градиент
   заодно закрашивал ветку за фигурой и давал вертикальный шов. */
/* Растворение только у самого низа. Длинный градиент делал пиджак
   полупрозрачным, и ветка из-за спины просвечивала сквозь него. */
.hero__portrait img {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 96%, rgba(0,0,0,.55) 98.5%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 96%, rgba(0,0,0,.55) 98.5%, transparent 100%);
}

/* Фоновая картинка за текстом убрана: читалась как случайные пятна. */
.hero > .wrap { position: relative; z-index: 1; }

.hero h1 {
  color: var(--ink);
  font-size: clamp(1.875rem, 1.1rem + 2.9vw, 2.875rem);
  line-height: 1.05;
  margin-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
  max-width: 100%;
  /* balance дробил заголовок на три строки — здесь важнее естественный перенос */
  text-wrap: pretty;
}

/* Имя — заголовок, под ним профессия с городами: без неё страница
   теряет релевантность по запросу «нутрициолог Майкоп». */
.hero__role {
  font-size: clamp(1rem, .94rem + .38vw, 1.1875rem);
  font-weight: 500; color: var(--olive);
  margin: 0 0 var(--sp-4);
}
.hero__credo {
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  font-weight: 700; line-height: 1.25; color: var(--green);
  max-width: 20ch; margin: 0 0 var(--sp-5);
}

.hero__lead {
  font-size: clamp(1rem, .96rem + .28vw, 1.125rem);
  font-weight: 300; line-height: 1.6; color: var(--ink-70);
  max-width: 46ch; margin-bottom: var(--sp-6);
}

/* кнопки героя чуть компактнее макета — так они не спорят с заголовком */
.hero .btn { min-height: 56px; padding: .8rem 1.6rem; font-size: 1rem; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-6); }
.stats__num { display: block; font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem); font-weight: 700; line-height: 1; color: var(--green); margin-bottom: var(--sp-3); }
.stats__label { font-size: .9375rem; font-weight: 300; line-height: 1.45; color: var(--ink-70); }
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; gap: var(--sp-5); }
  .stats__num { margin-bottom: var(--sp-2); }
}

.hero__figure { position: relative; }
/* только портрет тянем на всю колонку: ветка и свечение имеют свои размеры */
.hero__portrait img { width: 100%; }

/* ══════════════════════════════════════════════════════════════
   КАРТОЧКИ ПАРАМЕТРОВ — бейдж заходит на верхний край
   ══════════════════════════════════════════════════════════════ */

.param-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; padding-top: 64px; }
@media (min-width: 780px) { .param-grid { grid-template-columns: repeat(3, 1fr); } }

.param {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--sage-30);
  border-radius: var(--r-card);
  padding: 80px var(--sp-5) var(--sp-6);
  text-decoration: none; color: inherit; display: block;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.param:hover { border-color: var(--sage); transform: translateY(-3px); }
.param__badge { position: absolute; top: -64px; left: 50%; transform: translateX(-50%); width: 148px; }
.param h3 { margin: 0 0 var(--sp-3); }
.card h3 { font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem); }
.param p { font-size: var(--t-20); font-weight: 300; margin: 0; max-width: none; }

/* ══════════════════════════════════════════════════════════════
   ТЁМНАЯ ОЛИВКОВАЯ СЕКЦИЯ
   ══════════════════════════════════════════════════════════════ */

.band-dark {
  position: relative;
  background: var(--olive);
  color: rgba(255, 255, 255, .70);
  /* верхний и нижний отступ больше высоты растворов, иначе градиент съедает текст */
  padding-block: clamp(7rem, 9.5vw, 10rem);
}
.band-dark::before,
.band-dark::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: clamp(110px, 13vw, 180px); pointer-events: none; z-index: 0;
}
/* многоступенчатый градиент вместо линейного — переход мягче */
.band-dark::before {
  top: 0;
  background: linear-gradient(to bottom,
    #fff 0%, rgba(255,255,255,.94) 14%, rgba(255,255,255,.82) 28%,
    rgba(255,255,255,.62) 43%, rgba(255,255,255,.40) 58%,
    rgba(255,255,255,.20) 74%, rgba(255,255,255,.07) 88%, transparent 100%);
}
.band-dark::after {
  bottom: 0;
  /* --edge-next — цвет секции, которая идёт следом. Иначе между ними белая полоса. */
  background: linear-gradient(to top,
    var(--edge-next, #fff) 0%,
    color-mix(in srgb, var(--edge-next, #fff) 94%, transparent) 14%,
    color-mix(in srgb, var(--edge-next, #fff) 82%, transparent) 28%,
    color-mix(in srgb, var(--edge-next, #fff) 62%, transparent) 43%,
    color-mix(in srgb, var(--edge-next, #fff) 40%, transparent) 58%,
    color-mix(in srgb, var(--edge-next, #fff) 20%, transparent) 74%,
    color-mix(in srgb, var(--edge-next, #fff) 7%,  transparent) 88%,
    transparent 100%);
}

/* следом идёт светло-оливковая секция — растворяем в её цвет, а не в белый */
.band-dark:has(+ .section--alt) { --edge-next: #EAEEE6; }
.band-dark:has(+ .band-peach)   { --edge-next: var(--peach); }

/* Соседняя секция не должна подмешивать свой белый раствор сверху:
   иначе между двумя цветами появляется белая полоса. */
.band-dark + .section--alt::before,
.band-dark + .band-peach::before,
.section--alt + .band-peach::before,
.band-peach + .section--alt::before { content: none; }
.band-dark > .wrap { position: relative; z-index: 1; }

.band-dark h2 { color: #fff; }
.band-dark p { color: rgba(255, 255, 255, .70); }
.band-dark strong { color: #fff; }

.check-list { list-style: none; padding: 0; margin: var(--sp-6) 0; max-width: 62ch; }
.check-list li {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--sp-3);
  align-items: start; margin-bottom: var(--sp-3);
  font-size: var(--t-20); font-weight: 300;
}
.check-list img { width: 26px; margin-top: .15em; }

/* ══════════════════════════════════════════════════════════════
   ЧЕТЫРЕ ШАГА ЗИГЗАГОМ
   ══════════════════════════════════════════════════════════════ */

.steps { position: relative; margin-top: var(--sp-8); }

.step {
  position: relative; z-index: 2;
  background: #fff;
  border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  box-shadow: 0 10px 30px rgba(83, 88, 40, .08);
  max-width: 420px;
}
.step__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.step__word, .step__num { font-size: var(--t-32); font-weight: 300; color: var(--sage-30); }
.step h3 { font-size: var(--t-24); font-weight: 700; margin: 0 0 var(--sp-3); }
.step p { font-size: var(--t-16); font-weight: 300; margin: 0; max-width: none; }
.step p strong { font-weight: 700; color: var(--ink); }

.steps__arrow { position: absolute; z-index: 4; pointer-events: none; }

@media (min-width: 1000px) {
  .steps { min-height: 860px; }
  .step { max-width: 340px; }
  .step--1 { position: absolute; top: 0;     left: 24%; }
  .step--2 { position: absolute; top: 118px; right: 0; }
  .step--3 { position: absolute; top: 450px; left: 46%; }
  .step--4 { position: absolute; top: 530px; left: 0; }
  /* стрелки строго в промежутках: ни одна не заходит на карточку */
  .steps__arrow--1 { top: 45px;  left: 1%;  width: 170px; }
  .steps__arrow--2 { top: 196px; left: 55%; width: 152px; transform: rotate(11deg); }
  .steps__arrow--3 { top: 385px; right: 6%; width: 170px; transform: scaleX(-1) rotate(12deg); }
  .steps__arrow--4 { top: 620px; left: 33%; width: 135px; transform: scaleX(-1); }
}
@media (max-width: 999px) {
  .steps { display: grid; gap: var(--sp-5); }
  .step { max-width: none; }
  .steps__arrow { display: none; }
}

.steps__bg {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .45; pointer-events: none; overflow: hidden;
}
.steps__bg img { width: min(72%, 720px); }

/* ══════════════════════════════════════════════════════════════
   ПЕРСИКОВАЯ СЕКЦИЯ
   ══════════════════════════════════════════════════════════════ */

.band-peach {
  position: relative;
  background: var(--peach);
  padding-block: clamp(5.5rem, 7.5vw, 8rem);
  overflow: hidden;
}
.band-peach::before,
.band-peach::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: clamp(100px, 12vw, 170px); pointer-events: none; z-index: 0;
}
.band-peach::before { top: 0;    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.9) 18%, rgba(255,255,255,.66) 38%, rgba(255,255,255,.36) 62%, rgba(255,255,255,.12) 84%, transparent 100%); }
.band-peach::after  { bottom: 0; background: linear-gradient(to top,    #fff 0%, rgba(255,255,255,.9) 18%, rgba(255,255,255,.66) 38%, rgba(255,255,255,.36) 62%, rgba(255,255,255,.12) 84%, transparent 100%); }

/* Светло-оливковая секция — те же мягкие края, а не резкая полоса */
.section--alt {
  position: relative;
  padding-block: clamp(5.5rem, 7.5vw, 8rem);
}
.section--alt::before,
.section--alt::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: clamp(90px, 10vw, 150px); pointer-events: none; z-index: 0;
}
.section--alt::before { top: 0;    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.88) 20%, rgba(255,255,255,.6) 42%, rgba(255,255,255,.3) 66%, transparent 100%); }
.section--alt::after  { bottom: 0; background: linear-gradient(to top,    #fff 0%, rgba(255,255,255,.88) 20%, rgba(255,255,255,.6) 42%, rgba(255,255,255,.3) 66%, transparent 100%); }
/* фото аппарата крупнее и с выходом за колонку, как в макете */
.band-peach .split { align-items: center; }
@media (min-width: 900px) {
  .band-peach .split { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); }
}
.peach-figure { position: relative; }
/* фото уходит вправо за край секции, не наезжая на текст */
.peach-figure img { width: 122%; max-width: none; margin-left: auto; margin-right: -22%; }
/* белый ореол убран: он конфликтовал с ::before у .fade-img--right
   и давал вертикальный шов поверх персикового фона */
@media (max-width: 899px) {
  .peach-figure img { width: 100%; margin-right: 0; }
}

.split { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: var(--sp-8); }
  .split--rev > *:first-child { order: 2; }
}

.disclaimer { font-size: var(--t-16); font-weight: 300; color: var(--ink-50); max-width: 90ch; margin-top: var(--sp-5); }

/* ══════════════════════════════════════════════════════════════
   КАРТОЧКИ, ЦЕНЫ, FAQ, ФОРМА
   ══════════════════════════════════════════════════════════════ */

.card {
  background: #fff;
  border: 1.5px solid var(--sage-30);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
a.card { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
a.card .link-arrow { margin-top: auto; padding-top: var(--sp-4); }
.grid > .card, .grid > a.card { height: 100%; }
a.card:hover { border-color: var(--sage); transform: translateY(-3px); }
.card h3, .param h3, .step h3, .service-card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card--fill { background: var(--sage-15); border-color: transparent; }

.tag {
  display: inline-block; font-size: var(--t-14); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--green); margin-bottom: var(--sp-3);
}

.price { font-size: var(--t-32); font-weight: 700; color: var(--green); line-height: 1.1; margin-bottom: var(--sp-3); }
.price small { font-size: var(--t-16); font-weight: 300; color: var(--ink-50); }

.answer-box { background: var(--sage-15); border-radius: var(--r-card); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-6); }
.answer-box p { margin-bottom: 0; font-size: var(--t-20); }
.answer-box p + p { margin-top: var(--sp-3); }

.faq { border-top: 1.5px solid var(--sage-30); margin-top: var(--sp-6); }
.faq__item { border-bottom: 1.5px solid var(--sage-30); }
.faq__item summary {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-size: var(--t-24); font-weight: 500; color: var(--ink); line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; margin-left: auto; flex-shrink: 0;
  font-size: var(--t-32); font-weight: 300; line-height: 1; color: var(--sage);
}
.faq__item summary::after { transition: transform .25s var(--ease), color .2s var(--ease); }
.faq__item summary:hover::after { color: var(--green); }
.faq__item[open] summary::after { content: "−"; }

/* details сам по себе не анимируется: раскрываем через grid-строку нулевой высоты */
.faq__wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.faq__item[open] .faq__wrap { grid-template-rows: 1fr; }
.faq__wrap > div { overflow: hidden; }

/* Закрытие: браузер убирает open мгновенно, поэтому сворачиваем сами,
   а атрибут снимаем уже после анимации (см. main.js). */
.faq__item.is-closing .faq__wrap { grid-template-rows: 0fr; }
.faq__item.is-closing .faq__answer { opacity: 0; transform: translateY(-4px); }
.faq__item.is-closing summary::after { content: "+"; }

.faq__answer {
  padding-bottom: var(--sp-5);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s var(--ease) .06s, transform .3s var(--ease) .06s;
}
.faq__item summary { transition: color .2s var(--ease); }
.faq__item summary:hover { color: var(--green); }
.faq__item[open] .faq__answer { opacity: 1; transform: none; }

/* браузеры без grid-анимации всё равно показывают ответ */
@supports not (grid-template-rows: 0fr) {
  .faq__wrap { display: block; }
  .faq__answer { opacity: 1; transform: none; }
}
.faq__answer p:last-child { margin-bottom: 0; }

.form-card { background: #fff; border: 1.5px solid var(--sage-30); border-radius: var(--r-card); padding: clamp(1.5rem, 3vw, var(--sp-7)); }
.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-size: var(--t-16); font-weight: 500; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--t-20); font-weight: 300; color: var(--ink);
  background: #fff; border: 1.5px solid var(--sage-30);
  border-radius: var(--r-pill); padding: .9rem 1.4rem; width: 100%;
  transition: border-color .18s var(--ease);
}
.field textarea { border-radius: var(--r-card); min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); outline: none; }
.field__hint { font-size: var(--t-14); color: var(--ink-50); }
.field--error input { border-color: #b5502e; }
.field__error { font-size: var(--t-14); color: #b5502e; }

.consent {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3);
  align-items: start; margin-bottom: var(--sp-5);
  font-size: var(--t-14); color: var(--ink-70); line-height: 1.5;
}
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--olive); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-status { margin-top: var(--sp-4); font-size: var(--t-16); }
.form-status[data-state="error"] { color: #b5502e; }

.crumbs { padding-top: var(--sp-5); font-size: var(--t-14); color: var(--ink-50); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; max-width: none; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: var(--sage-30); }
.crumbs a { color: var(--ink-50); text-decoration: none; }
.crumbs a:hover { color: var(--green); }

.contact-list { border-top: 1.5px solid var(--sage-30); margin-bottom: var(--sp-6); }
.contact-row {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: 1.5px solid var(--sage-30);
  text-decoration: none; color: var(--ink); transition: padding-left .18s var(--ease);
}
.contact-row:hover { padding-left: var(--sp-3); color: var(--green); }
.contact-row__label { flex: 0 0 110px; font-size: var(--t-14); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-50); }
.contact-row__value { font-weight: 500; }

.table-wrap { overflow-x: auto; margin-bottom: var(--sp-5); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-16); }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1.5px solid var(--sage-30); }
th { font-weight: 500; color: var(--ink); background: var(--sage-15); white-space: nowrap; }

.article__body { font-size: var(--t-20); }
.article__body h2 { margin-top: clamp(3.5rem, 6vw, 5rem); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--t-14); color: var(--ink-50); margin-bottom: var(--sp-5); }

/* ══════════════════════════════════════════════════════════════
   ФИНАЛЬНЫЙ CTA
   ══════════════════════════════════════════════════════════════ */

.cta {
  background: var(--olive); color: rgba(255, 255, 255, .75);
  border-radius: var(--r-card);
  padding: clamp(2rem, 5vw, var(--sp-8));
  text-align: center;
}
.cta h2 { color: #fff; margin-inline: auto; max-width: 24ch; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.cta .after { text-align: left; margin-bottom: var(--sp-6); }
.cta p { margin-inline: auto; max-width: 52ch; color: rgba(255, 255, 255, .75); }
.cta .btn-row { justify-content: center; margin-top: var(--sp-6); }

/* ══════════════════════════════════════════════════════════════
   ПОДВАЛ
   ══════════════════════════════════════════════════════════════ */

.footer {
  background: var(--sage-15);
  padding-block: clamp(3rem, 5vw, 4.5rem) var(--sp-6);
  margin-top: clamp(4.5rem, 7vw, 7rem);
  font-size: var(--t-16); font-weight: 300;
}
.footer__grid {
  display: grid; gap: var(--sp-6) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-bottom: var(--sp-7);
}
/* колонке с именем и контактами нужно больше ширины, чем спискам ссылок */
@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: 1.5fr 1.15fr 1fr .8fr 1.1fr; }
}
.footer__brand { min-width: 0; }
.footer__logo .logo__name { white-space: nowrap; }
.footer h3 {
  font-size: var(--t-14); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--green); margin: 0 0 var(--sp-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--sp-2); }
.footer a { color: var(--ink-70); text-decoration: none; }
.footer a:hover { color: var(--green); }
.footer__logo { align-items: flex-start; margin-bottom: var(--sp-5); }
.footer__logo .logo__mark { height: 38px; }
.footer__logo .logo__text { display: grid; gap: 2px; }
.footer__contacts { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.footer__contacts a { color: var(--ink); font-weight: 500; }
.footer__bottom {
  padding-top: var(--sp-5); border-top: 1.5px solid var(--sage-30);
  display: grid; gap: var(--sp-3); font-size: var(--t-14); color: var(--ink-50);
}

/* ══════════════════════════════════════════════════════════════
   ДВИЖЕНИЕ
   ══════════════════════════════════════════════════════════════ */

/* Контент виден всегда. Прячем только когда JS точно работает и сможет показать. */
/* ── Появление при скролле ──────────────────────────────────
   Контент виден всегда; прячем только когда JS точно работает
   и гарантированно покажет обратно.                            */

/* Появление заметнее: больше ход, лёгкий масштаб, разный характер по типам.
   Всё на transform и opacity — без пересчёта раскладки. */

.js .reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: transform, opacity;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Заголовки: выезжают снизу из-под невидимой линии */
.js .reveal-text {
  opacity: 0; transform: translateY(30px);
  transition: opacity .75s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal-text.is-visible { opacity: 1; transform: none; }

/* Карточки: подъём с приближением и лёгким наклоном — так «оживают» заметнее */
.js .reveal-card {
  opacity: 0;
  transform: translateY(46px) scale(.955);
  transition: opacity .7s var(--ease), transform .95s var(--ease);
  transition-delay: calc(var(--i, 0) * 130ms);
  will-change: transform, opacity;
}
.js .reveal-card.is-visible { opacity: 1; transform: none; }

/* Картинки в двухколоночных блоках: заметный выезд сбоку */
.js .reveal-side {
  opacity: 0; transform: translateX(64px) scale(.97);
  transition: opacity .9s var(--ease), transform 1.05s var(--ease);
}
.js .reveal-side.is-visible { opacity: 1; transform: none; }
.js .reveal-side--left { transform: translateX(-64px) scale(.97); }

/* Списки-галочки: пункты подтягиваются один за другим */
.js .check-list li,
.js .recognise__list li {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .55s var(--ease);
}
.js .is-visible .check-list li,
.js .check-list.is-visible li,
.js .is-visible .recognise__list li {
  opacity: 1; transform: none;
}
.js .check-list li:nth-child(1),  .js .recognise__list li:nth-child(1)  { transition-delay: .10s; }
.js .check-list li:nth-child(2),  .js .recognise__list li:nth-child(2)  { transition-delay: .18s; }
.js .check-list li:nth-child(3),  .js .recognise__list li:nth-child(3)  { transition-delay: .26s; }
.js .check-list li:nth-child(4),  .js .recognise__list li:nth-child(4)  { transition-delay: .34s; }
.js .recognise__list li:nth-child(5) { transition-delay: .42s; }
.js .recognise__list li:nth-child(6) { transition-delay: .50s; }
.js .recognise__list li:nth-child(7) { transition-delay: .58s; }
.js .recognise__list li:nth-child(8) { transition-delay: .66s; }

/* Фоновый декор мягко плывёт при прокрутке — сайт «дышит».
   Скролл-таймлайн: без слушателей скролла и без работы в главном потоке. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .decor {
      animation: decor-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes decor-drift {
      from { transform: scale(var(--fx), var(--fy)) translateY(46px); }
      to   { transform: scale(var(--fx), var(--fy)) translateY(-46px); }
    }
    .hero__figure { animation: hero-drift linear both; animation-timeline: view(); animation-range: entry 100% exit 100%; }
    @keyframes hero-drift { from { transform: translateY(0); } to { transform: translateY(-38px); } }
  }
}

/* ВАЖНО: базовое состояние — видимое.
   Раньше элементы стояли на opacity: 0 и ждали анимацию; если она
   не запускалась (фоновая вкладка, энергосбережение, планшет),
   первый экран оставался пустым. Теперь анимация только «подхватывает»
   элемент через backwards на время задержки, а покоем всегда является
   нормальный видимый вид. */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-scale {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.js .stats > div {
  animation: rise .7s var(--ease) backwards;
}
.js .stats > div:nth-child(1) { animation-delay: .35s; }
.js .stats > div:nth-child(2) { animation-delay: .45s; }
.js .stats > div:nth-child(3) { animation-delay: .55s; }

.js .hero h1,
.js .hero__lead,
.js .hero__offer,
.js .hero .btn-row {
  animation: rise .8s var(--ease) backwards;
}
.js .hero h1       { animation-delay: .10s; }
.js .hero__lead    { animation-delay: .20s; }
.js .hero__offer   { animation-delay: .28s; }
.js .hero .btn-row { animation-delay: .60s; }

.js .hero__branch {
  animation:
    fade-in .8s var(--ease) .05s backwards,
    sway 9s ease-in-out 1s infinite;
}
.js .hero__leaf-back {
  animation:
    fade-in .9s var(--ease) .3s backwards,
    sway-slow 12s ease-in-out 1.2s infinite;
}

.js .hero__figure {
  animation: rise-scale .9s var(--ease) .1s backwards;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal, .js .reveal-text, .js .reveal-card, .js .reveal-side,
  .js .stats > div, .js .hero h1, .js .hero__lead, .js .hero .btn-row,
  .js .hero__branch, .js .hero__figure,
  .js .check-list li, .js .recognise__list li {
    opacity: 1 !important; transform: none !important;
  }
  .hero__branch, .hero__leaf-back { animation: none !important; }
}

@media print {
  .header, .footer, .cta, .burger, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
}

/* ══════════════════════════════════════════════════════════════
   ВНУТРЕННИЕ СТРАНИЦЫ
   ══════════════════════════════════════════════════════════════ */

.section--alt { background: var(--sage-15); }
.section--peach { background: var(--peach); }

.page-head { padding-block: var(--sp-6) clamp(2.5rem, 4vw, 3.5rem); }
.page-head h1 { margin-bottom: var(--sp-4); }
.page-head__lead { font-size: var(--t-24); font-weight: 400; color: var(--ink-70); max-width: 46ch; }

/* карточка услуги */
.service-card { display: flex; flex-direction: column; height: 100%; }
.service-card h3 { font-size: 1.25rem; line-height: 1.25; }
.service-card__price {
  font-size: var(--t-32); font-weight: 700; color: var(--green);
  line-height: 1.1; margin-bottom: var(--sp-3);
}
.service-card__unit { font-size: var(--t-16); font-weight: 300; color: var(--ink-50); }
.service-card__body { flex: 1; }
.service-card__body p { font-size: var(--t-16); }
.service-card--featured { background: var(--sage-15); border-color: var(--sage); }
.service-card .link-arrow { font-size: var(--t-16); margin-top: var(--sp-4); }

/* кейс */
.case { background: #fff; border: 1.5px solid var(--sage-30); border-radius: var(--r-card); padding: var(--sp-6); }
.case__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--t-14); color: var(--ink-50);
  padding-top: var(--sp-4); margin-top: var(--sp-4);
  border-top: 1.5px solid var(--sage-15);
}
.case__disclaimer { font-size: var(--t-14); color: var(--ink-50); margin-top: var(--sp-3); }

/* цитата-выноска */
.pull {
  background: var(--sage-15); border-radius: var(--r-card);
  padding: var(--sp-6); text-align: center;
}
.pull p { font-size: var(--t-24); font-weight: 400; color: var(--green); margin: 0 auto var(--sp-3); max-width: 34ch; }
.pull cite { font-style: normal; font-size: var(--t-14); color: var(--ink-50); }

/* список статей */
.post-list { display: grid; gap: var(--sp-5); }
.post-card__title { font-size: var(--t-24); font-weight: 700; color: var(--ink); margin: var(--sp-2) 0; }
.post-card__excerpt { font-size: var(--t-16); color: var(--ink-70); margin-bottom: var(--sp-3); }
.btn__price { font-weight: 300; opacity: .75; white-space: nowrap; }
.footer__disclaimer { max-width: 90ch; line-height: 1.55; }
.section__lead { font-size: var(--t-24); font-weight: 400; color: var(--ink-70); max-width: 52ch; }


@media (max-width: 899px) {
  /* поворот раздувает габаритный бокс — на узком экране ветку ужимаем и отводим от края */
  .hero__leaf-back { width: clamp(150px, 36vw, 220px); right: -10%; bottom: 14%; }
  .hero__glow { width: 104%; }
}


/* ══════════════════════════════════════════════════════════════
   РАСТВОРЕНИЕ ОБРЕЗАННЫХ ФОТО В ФОН СВОЕГО БЛОКА
   --fade задаёт цвет: белый, персиковый или оливковый.
   ══════════════════════════════════════════════════════════════ */

.fade-img { position: relative; }
.fade-img > picture,
.fade-img > img { display: block; }

/* Маска по картинке. Слой поверх давал шов и закрашивал соседние элементы. */
.fade-img img {
  -webkit-mask-image: linear-gradient(to top,
    transparent 0%, rgba(0,0,0,.3) 7%, rgba(0,0,0,.72) 15%, #000 26%, #000 100%);
  mask-image: linear-gradient(to top,
    transparent 0%, rgba(0,0,0,.3) 7%, rgba(0,0,0,.72) 15%, #000 26%, #000 100%);
}

/* Фото уходит за край секции: растворяем со стороны спины и волос. */
.fade-img--left img {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 9%, rgba(0,0,0,.7) 20%, #000 34%, #000 100%),
    linear-gradient(to top,   transparent 0%, rgba(0,0,0,.35) 6%, rgba(0,0,0,.8) 14%, #000 24%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 9%, rgba(0,0,0,.7) 20%, #000 34%, #000 100%),
    linear-gradient(to top,   transparent 0%, rgba(0,0,0,.35) 6%, rgba(0,0,0,.8) 14%, #000 24%, #000 100%);
  mask-composite: intersect;
}

.band-peach   { --fade: var(--peach); }
.band-dark    { --fade: var(--olive); }
.section--alt { --fade: #f4f6f1; }
body, .section, .hero { --fade: #fff; }


/* ══════════════════════════════════════════════════════════════
   БЛОКИ ПОД ЛЕСТНИЦУ ХАНТА
   ══════════════════════════════════════════════════════════════ */

/* Ступень 2 — узнавание проблемы: чек-лист жалоб словами клиентов */
.recognise {
  position: relative; overflow: hidden;
  background: var(--sage-15);
  border-radius: var(--r-card);
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 940px) {
  .recognise { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
}
.recognise h2 { margin: 0 0 var(--sp-4); }
.recognise__list {
  list-style: none; padding: 0; margin: 0 0 var(--sp-5);
  display: grid; gap: var(--sp-3) var(--sp-5);
  max-width: none;
}
@media (min-width: 620px) { .recognise__list { grid-template-columns: 1fr 1fr; } }
.recognise__list li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3);
  align-items: start; margin: 0;
  font-size: var(--t-16); font-weight: 300; line-height: 1.5; color: var(--ink-70);
}
.recognise__list li::before {
  content: ""; width: 22px; height: 22px; margin-top: .3em;
  border: 1.5px solid var(--sage); border-radius: 6px;
}
.recognise__note { font-size: var(--t-16); color: var(--ink); font-weight: 500; margin: 0 0 var(--sp-5); max-width: none; }

/* Ступень 3 — сравнение: что уже пробовали и почему не сработало */
.tried { display: grid; gap: var(--sp-4); }
@media (min-width: 860px) { .tried { grid-template-columns: 1fr 1fr; } }

.tried__row {
  display: grid; gap: var(--sp-3);
  background: #fff; border: 1.5px solid var(--sage-30);
  border-radius: var(--r-card); padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.tried__what {
  font-size: var(--t-20); font-weight: 700; color: var(--ink); margin: 0;
}
.tried__why { font-size: var(--t-16); font-weight: 300; color: var(--ink-70); margin: 0; max-width: none; }
.tried__mine {
  font-size: var(--t-16); color: var(--olive); margin: 0; max-width: none;
  padding-top: var(--sp-3); border-top: 1.5px solid var(--sage-15);
}
.tried__mine b { color: var(--green); font-weight: 700; }

/* Ступень 5 — что произойдёт после заявки: снимаем неизвестность */
.after { display: grid; gap: var(--sp-5); counter-reset: a; }
@media (min-width: 780px) { .after { grid-template-columns: repeat(3, 1fr); } }
.after__item { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-4); align-items: start; }
.after__item::before {
  counter-increment: a; content: counter(a);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-16);
}
.after__item h3 { font-size: var(--t-20); color: #fff; margin: 0 0 var(--sp-2); }
.after__item p { font-size: var(--t-16); font-weight: 300; margin: 0; max-width: none; }

/* Оффер под заголовком героя */
.hero__offer {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5); padding: 0; list-style: none; max-width: 46ch;
}
.hero__offer li {
  margin: 0; font-size: .9375rem; font-weight: 500; color: var(--olive);
  display: inline-flex; align-items: center; gap: .45em;
}
.hero__offer li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   ДЕКОР ВНУТРЕННИХ СТРАНИЦ
   Полупрозрачные растительные элементы из набора клиента.
   ══════════════════════════════════════════════════════════════ */

.decor {
  position: absolute; z-index: 0;
  pointer-events: none; user-select: none;
  /* Приглушено намеренно: элемент лежит под текстом и не должен
     спорить с ним за внимание. */
  opacity: .2;
}
.section > .wrap,
.section > .wrap-narrow,
.band-peach > .wrap,
.band-peach > .wrap-narrow,
.section--alt > .wrap,
.section--alt > .wrap-narrow { position: relative; z-index: 1; }

/* Ветка в исходнике: срез стебля слева сверху, тонкий кончик справа снизу.
   Разворачиваем так, чтобы кончик всегда смотрел внутрь секции, а срез уходил за край. */
.decor { --fx: 1; --fy: 1; transform: scale(var(--fx), var(--fy)); }

/* верхние элементы опущены ниже шапки и крошек, иначе налезают на логотип */
/* Позиции считаются от краёв колонки контента, а не от краёв экрана:
   на широких мониторах декор иначе улетает к границам окна. */
:root { --edge: max(-40px, calc((100% - var(--wrap)) / 2 - 150px)); }

.decor--tr { top: clamp(150px, 15vw, 260px); right: var(--edge); width: clamp(150px, 18vw, 320px); --fx: -1; --fy:  1; }
.decor--tl { top: clamp(160px, 16vw, 275px); left:  var(--edge); width: clamp(145px, 17vw, 300px); --fx:  1; --fy:  1; }
.decor--br { bottom: 2%; right: var(--edge); width: clamp(190px, 23vw, 400px); --fx: -1; --fy: -1; }
.decor--bl { bottom: 3%; left:  var(--edge); width: clamp(190px, 23vw, 390px); --fx:  1; --fy: -1; }

/* средние позиции — чтобы декор шёл вниз по странице, а не толпился по углам */
.decor--mr { top: 44%; right: var(--edge); width: clamp(180px, 21vw, 360px); --fx: -1; --fy: 1; }
.decor--ml { top: 46%; left:  var(--edge); width: clamp(180px, 21vw, 360px); --fx:  1; --fy: 1; }

/* Свеча, миска, капсулы — предметы с естественным «верхом».
   Их разворачивать нельзя, иначе свеча горит вниз. */
.decor--obj,
.decor[src*="salad-bowl"],
.decor[src*="candle-leaves"] { --fy: 1; }
.decor--obj.decor--br,
.decor--obj.decor--bl { --fx: 1; }

.decor--soft  { opacity: .14; }
.decor--faint { opacity: .09; }

/* на узких экранах чуть тише, но всё ещё заметно */
@media (max-width: 760px) {
  .decor { opacity: .12; width: clamp(140px, 42vw, 220px); }
  .decor--soft { opacity: .09; }
  .decor--faint { opacity: .06; }
}

@keyframes decor-sway {
  0%, 100% { transform: scale(var(--fx), var(--fy)) rotate(0deg)    translateY(0); }
  33%      { transform: scale(var(--fx), var(--fy)) rotate(1.4deg)  translateY(-4px); }
  66%      { transform: scale(var(--fx), var(--fy)) rotate(-1deg)   translateY(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .decor--float { animation: decor-sway 14s ease-in-out infinite; transform-origin: 50% 50%; }
}


/* ══════════════════════════════════════════════════════════════
   УВЕДОМЛЕНИЕ О COOKIE
   Аналитика не запускается, пока человек не согласился.
   ══════════════════════════════════════════════════════════════ */

.cookie {
  position: fixed; z-index: 120;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  background: #fff;
  border: 1.5px solid var(--sage-30);
  border-radius: var(--r-card);
  box-shadow: 0 16px 44px rgba(83, 88, 40, .14);
  padding: clamp(1rem, 2vw, 1.5rem);
  opacity: 0; transform: translateY(16px);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.cookie.is-shown { opacity: 1; transform: none; }
.cookie.is-hiding { opacity: 0; transform: translateY(16px); }

/* Пока открыто мобильное меню, плашка не должна лежать поверх его кнопок */
body.is-menu-open .cookie {
  opacity: 0; transform: translateY(16px); pointer-events: none;
}

.cookie__inner {
  display: grid; gap: var(--sp-4);
  align-items: center;
  width: min(100%, var(--wrap)); margin-inline: auto;
}
@media (min-width: 820px) {
  .cookie__inner { grid-template-columns: 1fr auto; gap: var(--sp-6); }
}

.cookie__text {
  margin: 0; max-width: 72ch;
  font-size: var(--t-14); font-weight: 300; line-height: 1.55; color: var(--ink-70);
}
.cookie__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cookie__actions .btn { min-height: 46px; padding: .55rem 1.35rem; white-space: nowrap; }
@media (max-width: 620px) {
  .cookie {
    left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
    padding: var(--sp-4);
  }
  .cookie__inner { gap: var(--sp-3); }
  .cookie__text { font-size: .8125rem; line-height: 1.45; }
  .cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .cookie__actions .btn { width: 100%; min-height: 44px; padding: .5rem .9rem; font-size: .875rem; }
}

/* ══════════════════════════════════════════════════════════════
   ПОДПИСЬ СТУДИИ varganov-web — баннеры 01 и 02 из каталога
   Шрифт VW Pixel встроен в CSS (base64), внешних запросов нет.
   ══════════════════════════════════════════════════════════════ */

@font-face{font-family:"VW Pixel";font-weight:400 700;font-display:block;src:url(data:font/woff2;base64,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) format("woff2");unicode-range:U+0020-002F,U+003A-007E,U+00B7,U+2026}
@font-face{font-family:"VW Pixel";font-weight:400 700;font-display:block;src:url(data:font/woff2;base64,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) format("woff2");unicode-range:U+0401,U+0410-042F}
.vwb01{--vwb-bg:#000;--vwb-fg:#fff;--vwb-mute:#8c8c8c;--vwb-dim:#4a4a4a;--vwb-line:#5a5a5a;box-sizing:border-box;text-decoration:none;-webkit-font-smoothing:antialiased;cursor:pointer}.vwb01.vwb--light{--vwb-bg:#fff;--vwb-fg:#000;--vwb-mute:#595959;--vwb-dim:#a6a6a6;--vwb-line:#8c8c8c}.vwb01 *,.vwb01 *::before,.vwb01 *::after{box-sizing:border-box}.vwb01:focus-visible{outline:2px solid var(--vwb-fg);outline-offset:3px}.vwb01{position:fixed;right:16px;bottom:16px;z-index:2147483000;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:var(--vwb-bg);color:var(--vwb-fg);border:2px dotted var(--vwb-line);font:500 14px/1 "VW Pixel",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;letter-spacing:.04em}.vwb01 .p{color:var(--vwb-mute);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace}.vwb01 .c{display:block;width:8px;height:15px;background:var(--vwb-fg);animation:vwb01b 1s steps(1) infinite}@keyframes vwb01b{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.vwb01 .c{animation:none}}@media (max-width:480px){.vwb01{right:8px;bottom:8px;padding:7px 10px}}
.vwb02{--vwb-bg:#000;--vwb-fg:#fff;--vwb-mute:#8c8c8c;--vwb-dim:#4a4a4a;--vwb-line:#5a5a5a;box-sizing:border-box;text-decoration:none;-webkit-font-smoothing:antialiased;cursor:pointer}.vwb02.vwb--light{--vwb-bg:#fff;--vwb-fg:#000;--vwb-mute:#595959;--vwb-dim:#a6a6a6;--vwb-line:#8c8c8c}.vwb02 *,.vwb02 *::before,.vwb02 *::after{box-sizing:border-box}.vwb02:focus-visible{outline:2px solid var(--vwb-fg);outline-offset:3px}.vwb02{display:inline-flex;align-items:center;gap:12px;padding:8px 2px;color:var(--vwb-fg);background:transparent}.vwb02 svg{flex:none}.vwb02 .t{display:flex;flex-direction:column;gap:5px}.vwb02 .s{font:500 14px/1 "VW Pixel",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;letter-spacing:.12em;color:var(--vwb-mute)}.vwb02 .b{font:500 18px/1 "VW Pixel",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;letter-spacing:.02em}.vwb02:hover .b{text-decoration:underline dotted;text-underline-offset:4px}

/* подгонка под этот сайт */
.vwb01 { bottom: calc(16px + var(--cookie-h, 0px)); transition: bottom .42s var(--ease), opacity .2s ease; }
body.is-menu-open .vwb01 { opacity: 0; pointer-events: none; }
@media (max-width: 480px) { .vwb01 { bottom: calc(8px + var(--cookie-h, 0px)); } }
.footer__bottom .vwb02 { margin-top: var(--sp-4); }

/* ══════════════════════════════════════════════════════════════
   КНОПКА ВКОНТАКТЕ — плавающая, над плашкой студии
   ══════════════════════════════════════════════════════════════ */

.soc-vk {
  position: fixed; z-index: 130;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--cookie-h, 0px) + 49px);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #0077FF; color: #fff;
  transition: transform .25s var(--ease), bottom .42s var(--ease), opacity .2s ease;
}
.soc-vk svg { width: 22px; height: 22px; }
.soc-vk:hover { color: #fff; transform: scale(1.1); }

/* два расходящихся кольца — как на znanievkod.ru */
.soc-vk::before, .soc-vk::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid #0077FF;
  animation: soc-ring 2.4s ease-out infinite;
  pointer-events: none;
}
.soc-vk::after { animation-delay: 1.2s; }
@keyframes soc-ring {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.9); opacity: 0; }
}

body.is-menu-open .soc-vk { opacity: 0; pointer-events: none; }

@media (max-width: 620px) {
  .soc-vk { right: 12px; bottom: calc(8px + var(--cookie-h, 0px) + 45px); width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .soc-vk, .soc-vk:hover { transition: none; transform: none; }
  .soc-vk::before, .soc-vk::after { animation: none; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   СТРАНИЦЫ ОШИБОК 404 / 501 / 503
   ══════════════════════════════════════════════════════════════ */

.page-error .footer { margin-top: 0; }

.error {
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  min-height: clamp(560px, 78vh, 780px);
  padding-block: clamp(3rem, 7vw, 6rem);
  text-align: center;
}

/* тёплое свечение за содержимым */
.error__glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 46%;
  width: min(120%, 900px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(116, 145, 88, .16) 0%,
    rgba(116, 145, 88, .08) 34%,
    rgba(251, 238, 227, .45) 56%,
    rgba(255, 255, 255, 0) 72%);
}

.error__inner { position: relative; z-index: 2; }

/* Крупный код ошибки живёт фоном за заголовком */
.error__code {
  position: absolute; z-index: -1;
  left: 50%; top: 50%;
  transform: translate(-50%, -58%);
  margin: 0;
  font-size: clamp(9rem, 30vw, 20rem);
  font-weight: 700; line-height: .8;
  letter-spacing: -.04em;
  color: var(--sage);
  opacity: .16;
  user-select: none;
}

.error h1 { margin-bottom: var(--sp-4); }
.error__lead {
  font-size: var(--t-24); font-weight: 300; color: var(--ink-70);
  max-width: 46ch; margin: 0 auto var(--sp-6);
}
.error__note {
  font-size: var(--t-16); color: var(--olive); font-weight: 500;
  max-width: 44ch; margin: 0 auto var(--sp-6);
}

.error__links {
  list-style: none; padding: 0;
  margin: 0 auto var(--sp-6); max-width: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3) var(--sp-5);
}
.error__links li { margin: 0; }
.error__links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: .25rem;
  font-size: var(--t-16);
}

.error__actions { justify-content: center; margin-bottom: var(--sp-6); }
.error__contact { font-size: var(--t-14); color: var(--ink-50); margin: 0 auto; max-width: 46ch; }

/* Ветки по краям — те же, что на сайте */
.error__branch { position: absolute; z-index: 1; pointer-events: none; opacity: .55; }
.error__branch--a {
  width: clamp(220px, 30vw, 460px);
  top: -4%; left: clamp(-90px, -6vw, -40px);
}
.error__branch--b {
  width: clamp(240px, 34vw, 520px);
  bottom: -6%; right: clamp(-90px, -6vw, -40px);
  transform: scaleX(-1);
}

@media (max-width: 760px) {
  .error__branch { opacity: .35; }
  .error__branch--a { width: 58vw; }
  .error__branch--b { width: 64vw; }
}

/* ── Движение ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .error__code   { animation: err-breathe 7s ease-in-out infinite; }
  .error__glow   { animation: err-pulse 9s ease-in-out infinite; }
  .error__branch--a { animation: err-float-a 11s ease-in-out infinite; }
  .error__branch--b { animation: err-float-b 13s ease-in-out infinite; }

  .js .error h1,
  .js .error__lead,
  .js .error__links,
  .js .error__note,
  .js .error__actions,
  .js .error__contact { animation: rise .8s var(--ease) backwards; }
  .js .error h1        { animation-delay: .10s; }
  .js .error__lead     { animation-delay: .20s; }
  .js .error__links    { animation-delay: .30s; }
  .js .error__note     { animation-delay: .30s; }
  .js .error__actions  { animation-delay: .40s; }
  .js .error__contact  { animation-delay: .52s; }
}

@keyframes err-breathe {
  0%, 100% { transform: translate(-50%, -58%) scale(1);     opacity: .16; }
  50%      { transform: translate(-50%, -60%) scale(1.035); opacity: .20; }
}
@keyframes err-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.07); opacity: .8; }
}
@keyframes err-float-a {
  0%, 100% { transform: rotate(0deg)   translateY(0); }
  50%      { transform: rotate(2.4deg) translateY(-14px); }
}
@keyframes err-float-b {
  0%, 100% { transform: scaleX(-1) rotate(0deg)    translateY(0); }
  50%      { transform: scaleX(-1) rotate(-2.2deg) translateY(12px); }
}


/* Декор финального блока живёт ВНУТРИ зелёной карточки, а не под ней.
   Карточка непрозрачная, поэтому снаружи элемент просто скрывался. */
.cta { position: relative; overflow: hidden; }
.cta > .decor--inside { position: absolute; z-index: 0; }
.cta__body { position: relative; z-index: 1; }

.decor--inside {
  left: clamp(-70px, -4vw, -30px);
  bottom: clamp(-50px, -3vw, -20px);
  width: clamp(190px, 24vw, 380px);
  --fx: 1; --fy: -1;
  /* на тёмном фоне светлая зелень читается только приглушённой */
  opacity: .16;
}
@media (max-width: 900px) {
  .decor--inside { width: clamp(150px, 42vw, 220px); left: -30px; bottom: -24px; opacity: .13; }
}


/* Пальцем попасть в ссылку сложнее, чем курсором: на узких экранах
   даём спискам ссылок нормальную высоту. */
@media (max-width: 760px) {
  .footer li a,
  .contact-row,
  .error__links a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer li { margin-bottom: 0; }
}