/* ============================================================
   XANTARA · Сообщество груминг-салонов — светлая тема
   ------------------------------------------------------------
   Шапка висит на фоне без рамки, карта — главный объект
   первого экрана и всей страницы.
   ============================================================ */

:root{
  --bg:        #FCFCFA;
  --bg-soft:   #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F5F4F1;
  --panel:     #FFFFFF;
  --panel-2:   #FFFFFF;
  --line:      rgba(24,26,22,.08);
  --line-2:    rgba(24,26,22,.14);
  --ink:       #191B17;
  --ink-2:     #4E524A;
  --ink-3:     #7C8078;
  --ink-4:     #A9ADA4;

  --green:      #5CBE4C;
  --green-hi:   #6BCC5B;
  --green-deep: #3E9A2F;
  --green-ink:  #327E26;
  --green-tint: rgba(92,190,76,.12);
  --green-tint2:rgba(92,190,76,.24);
  --gold:       #C79338;
  --no:         #DB5449;   /* красный крест в блоке «не нужно» */

  /* карта — нейтральная, цвет только в кружках партнёров */
  --land-1:  #FFFFFF;
  --land-2:  #F4F3EF;
  --land-3:  #E7E6E0;
  --coast-1: rgba(24,26,22,.30);
  --coast-2: rgba(24,26,22,.20);
  --coast-3: rgba(24,26,22,.12);
  --glow-1:  rgba(24,26,22,.03);
  --glow-2:  rgba(24,26,22,0);
  --state-line: rgba(24,26,22,.11);
  --dot: rgba(30,32,28,.34);
  --dot-big: rgba(30,32,28,.5);
  --map-shadow: rgba(28,30,24,.18);
  --map-shadow-2: rgba(28,30,24,.10);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-1: 0 1px 2px rgba(24,26,22,.04), 0 4px 16px rgba(24,26,22,.05);
  --shadow-2: 0 2px 6px rgba(24,26,22,.05), 0 16px 44px rgba(24,26,22,.08);
  --shadow-3: 0 8px 24px rgba(24,26,22,.10), 0 40px 110px rgba(24,26,22,.14);

  --ease: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  /* Заголовочный шрифт — Rubik, вшит в assets/font.css.
     Дальше запасные системные, если файл со шрифтом не подключён. */
  --display: 'Rubik', ui-rounded, 'SF Pro Rounded', 'Segoe UI Variable Display',
             system-ui, sans-serif;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  /* общая сетка: шапка и герой в одних границах */
  --shell-gutter: clamp(18px, 14vw, 220px);
  --shell-max: 1120px;
  --shell-inset: 30px;

  /* половина просвета между блоками: секции складывают его вдвоём */
  --sec-gap: clamp(38px, 4.6vw, 76px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--green-tint2); }

.wrap{
  width:min(var(--shell-max), calc(100% - var(--shell-gutter) * 2));
  margin-inline:auto; position:relative; z-index:1;
}

/* ---------- фон: инструменты грумера ---------- */
/* Два огромных силуэта по краям, на грани видимости. Висят на
   экране, а не на странице, поэтому «работают» всю прокрутку.
   Значения --snip и --tilt считает decorInit() в app.js. */
.decor{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
  --snip:1; --rock:0px; --tilt:0deg;
}
/* 1.5% — три ступени RGB между силуэтом и фоном. Это край: ниже
   рисунок пропадает даже на хорошем экране. */
.decor svg{ position:absolute; display:block; color:var(--ink); opacity:.015; }

/* Лежат по диагонали и заходят под текст и карту — так и было
   задумано: на трёх процентах непрозрачности они читаются как
   фактура бумаги, а не как картинка поверх содержимого. */
.decor__comb{
  left:-8vw; top:-14vh; height:128vh; width:auto;
  transform-origin:50% 50%;
  /* поворот сначала, сдвиг после — расчёска ведёт вдоль себя */
  transform:rotate(calc(-27deg + var(--tilt))) translateY(var(--rock));
}
.decor__sciss{
  right:-10vw; top:-16vh; height:132vh; width:auto;
  transform-origin:50% 50%;
  transform:rotate(23deg);
}

/* лезвие и противоположное кольцо — одна деталь, крутится вокруг винта */
.decor__half{
  transform-box:view-box; transform-origin:280px 600px;   /* винт */
  transition:transform .05s linear;
}
/* в разметке полотна лежат сомкнутыми, весь размах — здесь */
.decor__half--a{ transform:rotate(calc(var(--snip) *  15deg)); }
.decor__half--b{ transform:rotate(calc(var(--snip) * -15deg)); }

@media (max-width:720px){
  /* на телефоне силуэты только мешают тексту */
  .decor{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .decor__half{ transition:none; }
}

/* ---------- шапка: белая капсула, висит на фоне ---------- */
/* капсула закреплена на экране и сделана из «стекла»:
   фон под ней размывается, поэтому карта проступает мягко */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding-top:clamp(12px,1.6vw,18px);
  pointer-events:none;
}
.nav > .wrap{
  pointer-events:auto;
  /* капсула специально шире героя: герой сжат к центру,
     а шапка держит края страницы */
  width:min(1280px, calc(100% - 10vw));
}
.bar{
  display:flex; align-items:center; gap:8px;
  padding:4px 4px 4px calc(var(--shell-inset) - 6px);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  box-shadow:0 1px 2px rgba(24,26,22,.04), 0 8px 30px rgba(24,26,22,.08);
}
.brand{ display:flex; align-items:center; gap:8px; margin-right:auto; min-width:0; }
.brand__paw{ width:23px; height:23px; display:block; flex:none; }
.brand__paw svg{ width:100%; height:100%; fill:var(--green); display:block; }
.brand__name{
  font-family:var(--display); font-size:17.5px; font-weight:800;
  letter-spacing:-.03em; color:var(--ink);
}
.brand__bar{ width:1px; height:16px; background:var(--line-2); margin:0 2px; }
.brand__sub{
  font-family:var(--display); font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4);
}
.nav__links{ display:flex; align-items:center; gap:22px; margin-right:6px; flex:none; }
.nav__links a, .nav__login{
  font-size:14.5px; color:var(--ink-2); background:none; border:0;
  cursor:pointer; padding:0; white-space:nowrap; flex:none;
  font-family:inherit; transition:color .25s;
}
.nav__links a:hover, .nav__login:hover{ color:var(--ink); }

/* кнопка в капсуле компактнее самой страницы */
.bar .btn{ padding:7px 16px; font-size:13px; border-radius:11px; }

/* переключатель языка */
.lang{ position:relative; flex:none; }
.lang__btn{
  width:31px; height:31px; border-radius:50%;
  border:1px solid var(--line-2); background:rgba(255,255,255,.7); cursor:pointer;
  font-family:var(--display); font-size:12.5px; font-weight:750; color:var(--ink);
  transition:border-color .25s, background .25s;
}
.lang__btn:hover{ background:var(--surface-2); }
.lang__menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:#fff; border-radius:16px; padding:6px;
  box-shadow:0 2px 6px rgba(24,26,22,.06), 0 16px 40px rgba(24,26,22,.12);
  display:grid; gap:2px; min-width:150px;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .3s var(--ease);
}
.lang.open .lang__menu{ opacity:1; transform:none; pointer-events:auto; }
.lang__menu button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border:0; border-radius:11px; background:none;
  font-size:14.5px; color:var(--ink-2); cursor:pointer; text-align:left;
  transition:background .2s, color .2s;
}
.lang__menu button:hover{ background:var(--surface-2); color:var(--ink); }
.lang__menu button.on{ color:var(--ink); font-weight:600; }
.lang__menu b{ font-family:var(--display); font-size:12px; font-weight:750; color:var(--ink-4); width:24px; }

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:15px;
  border:1px solid var(--line-2);
  background:var(--surface);
  font-family:var(--display); font-size:15px; font-weight:650; letter-spacing:-.01em;
  cursor:pointer;
  box-shadow:var(--shadow-1);
  transition:transform .28s var(--ease), background .25s, border-color .25s, box-shadow .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.btn:active{ transform:translateY(0); }
.btn--primary{
  border-color:transparent; color:#fff;
  background:var(--green);
  box-shadow:0 2px 6px rgba(62,154,47,.18), 0 10px 26px rgba(62,154,47,.20);
}
.btn--primary:hover{ background:var(--green-hi); box-shadow:0 4px 10px rgba(62,154,47,.22), 0 16px 34px rgba(62,154,47,.24); }
.btn--dark{
  border-color:transparent; color:#fff; background:var(--ink);
  box-shadow:0 2px 6px rgba(24,26,22,.16), 0 10px 24px rgba(24,26,22,.14);
}
.btn--dark:hover{ background:#000; box-shadow:0 4px 10px rgba(24,26,22,.2), 0 16px 32px rgba(24,26,22,.18); }

/* главная кнопка страницы — фирменным зелёным */
.btn--green{
  border-color:transparent; color:#fff; background:var(--green-deep);
  box-shadow:0 2px 6px rgba(62,154,47,.24), 0 10px 26px rgba(62,154,47,.22);
}
.btn--green:hover{
  background:var(--green-ink);
  box-shadow:0 4px 10px rgba(62,154,47,.3), 0 16px 34px rgba(62,154,47,.26);
}
/* вторая кнопка выглядит как капсула шапки: белое стекло,
   светлая кромка и мягкая тень — на фоне её видно */
.btn--ghost{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(24,26,22,.04), 0 8px 30px rgba(24,26,22,.08);
}
.btn--ghost:hover{ background:#fff; box-shadow:0 2px 6px rgba(24,26,22,.06), 0 14px 36px rgba(24,26,22,.12); }
.btn--plain{
  background:none; border-color:transparent; box-shadow:none; color:var(--ink-2);
  padding-inline:12px;
}
.btn--plain:hover{ background:var(--surface-2); box-shadow:none; color:var(--ink); }
.btn--lg{ padding:16px 26px; font-size:16px; border-radius:17px; }

/* ---------- герой ---------- */
/* Пропорции героя не трогаем: высоту доводит --fold-pad, который
   считает alignFold() в app.js — чтобы список партнёров не резался
   сгибом пополам. По умолчанию добавка нулевая. */
.hero{
  padding:clamp(84px,12.5vh,116px) 0 clamp(28px,4vw,60px);
  padding-bottom:calc(clamp(28px,4vw,60px) + var(--fold-pad, 0px));
}

/* Текст слева, карта рядом — как на референсе: без большой дыры посередине */
.hero__grid{
  display:grid; align-items:center;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:clamp(12px, 1.6vw, 28px);
}
.hero__grid .map-stage{
  justify-self:end; margin-right:calc(var(--shell-inset) + 16px);
  width:min(780px, 40vw, calc(74vh * 0.723));
  max-width:none;
}
.hero__copy{ text-align:left; min-width:0; padding-left:var(--shell-inset); }

.kicker{
  font-family:var(--display); font-size:13px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4);
  margin-bottom:18px;
}


h1{
  font-family:var(--display);
  margin:0;
  font-size:clamp(38px,6.5vw,106px);
  line-height:.97;
  letter-spacing:-.035em;
  font-weight:900;
  overflow-wrap:normal; word-break:keep-all; hyphens:none;
}
h1 .accent{ color:var(--green-deep); }

.lede{
  /* подпись несёт всю конкретику, поэтому читается сразу
     за заголовком, а не как примечание */
  margin:24px 0 0; max-width:20em;
  font-size:clamp(17px,1.5vw,23px); color:var(--ink-2); line-height:1.42;
  font-weight:450; letter-spacing:-.005em;
}
.hero__copy .hero__cta{ justify-content:flex-start; margin-top:28px; }

.joined{
  margin:20px 0 0;
  font-size:15px; color:var(--ink-4);
}
.joined b{ font-family:var(--display); font-weight:800; color:var(--ink-2); }

.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:26px; }

/* ---------- карта ---------- */
.map-stage{
  position:relative;
  width:100%;
  max-width:min(680px, calc(78vh * 0.723));
  margin-top:0;
  container-type:inline-size;   /* кружки салонов считают размер от ширины карты */
}

/* Земля мягко всплывает, пока страница прокручивается: таймлайн
   анимации — не время, а положение карты в окне. Курсор её не трогает. */
@keyframes landRise{
  from{ transform:translateY(30px) scale(.975); }
  to  { transform:translateY(-10px) scale(1); }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .map-stage{
      animation:landRise linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 60%;
    }
  }
}

.map-svg{ display:block; width:100%; height:auto; overflow:visible; }

.map-island{ opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease), transform 1.1s var(--ease); }
.map-ready .map-island{ opacity:1; transform:none; }

/* Ожила: место плоского SVG занимает объёмная плита на WebGL.
   SVG остаётся в разметке — он служит текстурой и запасным вариантом. */
.map-gl{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  opacity:0; transition:opacity .8s var(--ease);
}
.is-live .map-gl{ opacity:1; }
.is-live .map-svg{ visibility:hidden; }

.state-lines path{
  fill:none; stroke:#FFFFFF; stroke-opacity:.85;
  stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round;
}
.coast{ stroke:#FFFFFF; stroke-opacity:.75; stroke-width:2.6; stroke-linejoin:round; }

/* ---------- кружки салонов-партнёров ---------- */
.pins{ position:absolute; inset:0; z-index:2; }
.pin{
  position:absolute; transform:translate(-50%,-50%); width:0; height:0;
  --sz:clamp(26px, 6.6cqw, 48px);
}
/* is-lifted включается при наведении на партнёра в списке под картой */
.pin:hover, .pin:focus-within, .pin.is-open, .pin.is-lifted{ z-index:8; }

/* Зона наведения намеренно шире значка и НЕ меняет размер:
   если двигать саму кнопку, её край убегает из-под курсора и
   значок начинает дёргаться. Растёт только содержимое. */
.pin__btn{
  position:absolute; left:50%; top:50%;
  width:calc(var(--sz,92px) * 1.5); height:calc(var(--sz,92px) * 1.5);
  border:0; padding:0; background:none; cursor:pointer;
  border-radius:50%;
  display:grid; place-items:center;
  transform:translate(-50%,-50%) perspective(760px)
            rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
}
.coin__lift{
  display:grid; place-items:center;
  width:var(--sz,92px); height:var(--sz,92px);
  transition:transform .34s var(--ease);   /* обратно — мягко */
}
.pin__btn:focus-visible{ outline:2px solid var(--green); outline-offset:8px; }
.pin:hover .coin__lift,
.pin:focus-within .coin__lift,
.pin.is-lifted .coin__lift{
  transform:translateY(-10px) scale(1.13);
  transition:transform .42s var(--spring);  /* вверх — плавно */
}

/* Логотип в белой оправе. Тень мягкая и рассеянная — значок
   «висит» над картой, а не приклеен к ней. */
.coin{
  position:relative; display:grid; place-items:center;
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:#fff;
  box-shadow:
    0 0 0 2px #fff,
    0 1px 2px rgba(38,46,28,.10),
    0 6px 12px rgba(38,46,28,.13),
    0 16px 30px rgba(38,46,28,.10);
  opacity:0; transform:scale(.5) translateY(10px);
  transition:box-shadow .28s var(--ease);
}
.map-ready .coin{ animation:coinIn .85s var(--spring) var(--in-delay,0ms) forwards; }
@keyframes coinIn{ to{ opacity:1; transform:none; } }
.pin:hover .coin, .pin:focus-within .coin, .pin.is-lifted .coin{
  box-shadow:
    0 0 0 2px #fff,
    0 2px 4px rgba(38,46,28,.12),
    0 12px 22px rgba(38,46,28,.16),
    0 30px 54px rgba(38,46,28,.13);
}
/* тот же мягкий свет, что лежит на карте: блик сверху-слева и
   лёгкое затемнение к нижнему краю — логотип не «наклейка» */
.coin::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(70% 60% at 30% 22%, rgba(255,255,255,.5), rgba(255,255,255,0) 62%),
    radial-gradient(90% 85% at 72% 88%, rgba(38,46,28,.22), rgba(38,46,28,0) 60%);
  mix-blend-mode:soft-light;
}
.coin img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

/* запасной кружок, если картинки логотипа нет */
.coin__ini{ display:none; }
.coin:not(:has(img)) , .coin--fallback{
  background:var(--ac,#5CBE4C);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.9);
}
.coin:not(:has(img)) .coin__ini, .coin--fallback .coin__ini{
  display:block; font-family:var(--display); font-weight:800; color:#fff;
  font-size:calc(var(--sz,92px) * .3); letter-spacing:-.02em;
}

/* название и оборот выезжают из-под значка при наведении */
.pin__tag{
  position:absolute; left:50%; top:calc(50% + var(--sz,92px) * .5);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  white-space:nowrap; pointer-events:none;
}
.pin__tag > *{
  opacity:0; transform:translateY(-8px) scale(.92);
  transition:opacity .22s var(--ease), transform .3s var(--ease);
}
.pin:hover .pin__tag > *, .pin:focus-within .pin__tag > *, .pin.is-lifted .pin__tag > *{
  opacity:1; transform:none;
  transition:opacity .34s var(--ease), transform .44s var(--spring);
}
.pin__name{
  font-family:var(--display); font-size:13px; font-weight:800; letter-spacing:-.01em;
  color:var(--ink);
  padding:5px 13px; border-radius:999px; background:#fff;
  box-shadow:0 2px 10px rgba(30,40,20,.16);
}


/* ---------- секции ---------- */
/* Один шаг между всеми блоками: соседние секции дают по половине,
   поэтому просвет везде одинаковый — и в начале, и перед калькулятором. */
.section{ padding:var(--sec-gap) 0; position:relative; }
.section--line{ border-top:0; }
.sec-head{ max-width:44em; }
.sec-tag{ font-size:13px; color:var(--green-deep); font-weight:650; font-family:var(--display); }
h2{
  font-family:var(--display);
  margin:10px 0 0; font-size:clamp(28px,3.4vw,44px); line-height:1.08;
  letter-spacing:-.025em; font-weight:800;
}
h2 .thin{ font-weight:600; color:var(--ink-3); }
.sec-sub{ margin:16px 0 0; font-size:16px; color:var(--ink-2); max-width:38em; }



/* ---------- вы не становитесь магазином ---------- */
/* Три вещи, которых не будет: иконка в кружке, красный крест
   поверх и подпись. Между ними пунктир — это одна цепочка,
   а не три отдельных пункта. */
.nope{
  display:grid; align-items:start;
  /* три равные колонки под пункты: если считать их по ширине
     подписей, самая длинная забирает больше места и ряд едет */
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:clamp(6px,1.2vw,16px); justify-items:center;
  margin:clamp(30px,3.6vw,48px) 0 0;
}
.nope__i{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:100%;   /* подпись занимает всю колонку: иначе длинная ломается пополам */
}

.nope__ic{
  position:relative; width:clamp(104px,9.8vw,150px); aspect-ratio:1;
  border-radius:50%; background:var(--green-tint); color:var(--ink);
  /* белое кольцо и мягкая тень — тот же приём, что у кружков
     салонов на карте: рамку видно за счёт тени, а не линии */
  border:4px solid #fff;
  box-shadow:0 1px 2px rgba(24,26,22,.05), 0 10px 26px rgba(24,26,22,.10);
  display:grid; place-items:center;   /* без overflow: он срезал бы крестик */
}
/* банки лежат на подложке, а снимок полки заполняет кружок целиком */
.nope__ic img{ width:94%; height:94%; object-fit:contain; display:block; }
.nope__ic img.nope__fill{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.nope__ic svg{ width:54%; height:54%; display:block; }

/* третий кружок сам работает циферблатом: обод — это рамка
   кружка, внутри только стрелки, банки за ними фоном */
.nope__ic svg.nope__clock{      /* перебиваем общее правило для иконок */
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--ink);
}
.nope__ic--clock img{ width:74%; height:74%; }
.nope__ic--sm{ width:clamp(52px,4.8vw,66px); flex:none; }

/* крест красный: это единственное место на странице, где нужен
   отказ, — зелёный тут читался бы как «можно» */
.nope__x{
  position:absolute; right:0; top:0;
  width:clamp(30px,2.9vw,38px); aspect-ratio:1; border-radius:50%;
  background:var(--no); border:3px solid var(--bg);
}
.nope__x::before, .nope__x::after{
  content:''; position:absolute; left:50%; top:50%;
  width:42%; height:2px; background:#fff; border-radius:2px;
}
.nope__x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.nope__x::after { transform:translate(-50%,-50%) rotate(-45deg); }

.nope__t{
  margin-top:16px;
  font-family:var(--display); font-weight:750;
  font-size:clamp(14.5px,1.15vw,17px); line-height:1.3; letter-spacing:-.02em;
}

/* пунктир между кружками — по центру их высоты */
.nope__dots{
  width:clamp(46px,11vw,200px); height:4px; align-self:start;
  margin-top:clamp(52px,4.9vw,75px);
  background-image:radial-gradient(circle, var(--green) 1.7px, transparent 1.8px);
  background-size:11px 4px; background-repeat:repeat-x;
  background-position:center; opacity:.85;
}

.role__lead{
  margin:clamp(28px,3.2vw,42px) auto 0; max-width:38em; text-align:center;
  font-size:clamp(15.5px,1.3vw,18px); line-height:1.6; color:var(--ink-2);
}

/* итог блока — то единственное, что от салона нужно */
.role__card{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,22px);
  width:fit-content; max-width:100%;
  margin:clamp(22px,2.6vw,34px) auto 0;
  padding:clamp(13px,1.5vw,18px) clamp(20px,2.4vw,30px);
  border-radius:var(--r-xl); background:var(--surface-2);
}
.role__card p{
  margin:0; font-family:var(--display); font-weight:800;
  font-size:clamp(16px,1.5vw,21px); line-height:1.35; letter-spacing:-.025em;
}
.role__card b{ color:var(--green-deep); font-weight:800; }

@media (max-width:760px){
  .nope{ grid-template-columns:1fr 1fr; gap:22px 14px; justify-items:center; }
  .nope__dots{ display:none; }
  .role__card{ flex-direction:column; text-align:center; gap:12px; }
}
@media (max-width:420px){
  .nope{ grid-template-columns:1fr; }
}

/* ---------- как устроено партнёрство ---------- */
/* Маршрут, а не карточки: три станции с подъёмом вправо —
   последний шаг про рост, поэтому он и стоит выше всех. */
.flow{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(8px,1.2vw,18px);
  margin-top:clamp(34px,4vw,56px);
}
.flow__step:nth-child(1){ margin-top:clamp(30px,5.4vw,84px); }
.flow__step:nth-child(3){ margin-top:clamp(15px,2.7vw,42px); }

.flow__n{
  font-family:var(--display); font-weight:900; line-height:1;
  font-size:clamp(38px,4.4vw,60px); letter-spacing:-.045em;
  margin-bottom:14px;
  color:transparent; -webkit-text-stroke:1.7px var(--green-deep);
}
@supports not (-webkit-text-stroke:1px red){ .flow__n{ color:var(--green-deep); } }

.flow__step h3{
  margin:0 0 9px; font-family:var(--display); font-weight:800;
  font-size:clamp(19px,1.7vw,24px); line-height:1.2; letter-spacing:-.03em;
}
.flow__step p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-3); }

/* стрелки между станциями: дорисовываются при появлении блока */
.flow__arrow{ width:clamp(58px,6.6vw,118px); height:auto; overflow:visible; }
.flow > .flow__arrow:nth-child(2){ margin-top:clamp(26px,4.4vw,66px); }
.flow > .flow__arrow:nth-child(4){ margin-top:clamp(10px,1.7vw,26px); }
.flow__line, .flow__tip{
  stroke:var(--green); stroke-width:2.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.flow__line{ stroke-dasharray:7 9; }
.flow__tip{ transform-box:view-box; transform-origin:center; }

@media (prefers-reduced-motion: no-preference){
  .flow__line{ stroke-dashoffset:96; }
  .flow__tip{ opacity:0; }
  .flow.in .flow__line{ animation:flowDash 1.1s var(--ease) both; }
  .flow.in .flow__tip{ animation:flowTip .5s var(--ease) .75s both; }
  .flow.in .flow__arrow:nth-child(4) .flow__line{ animation-delay:.35s; }
  .flow.in .flow__arrow:nth-child(4) .flow__tip{ animation-delay:1.1s; }
}
@keyframes flowDash{ from{ stroke-dashoffset:96; } to{ stroke-dashoffset:0; } }
@keyframes flowTip{ from{ opacity:0; transform:translateX(-9px); } to{ opacity:1; transform:none; } }

@media (max-width:900px){
  .nope{ grid-template-columns:1fr; gap:12px; }
  /* в столбик шаги идут по центру */
  .flow{ grid-template-columns:1fr; gap:12px; justify-items:center; text-align:center; }
  .flow__step{ margin-top:0 !important; max-width:34ch; }
  /* стрелки вьются верёвкой: первая уходит влево, вторая вправо,
     и каждая ведёт обратно к центру, к следующему шагу */
  .flow__arrow{
    width:66px; margin:8px 0 !important;
    transform:translateX(calc(-1 * clamp(46px,19vw,86px))) rotate(58deg);
  }
  .flow > .flow__arrow:nth-child(4){
    transform:translateX(clamp(46px,19vw,86px)) scaleX(-1) rotate(58deg);
  }
}

/* финальный призыв */
/* финал без плашки: голый заголовок на фоне бьёт сильнее
   белого прямоугольника во весь экран. Кегль здесь один на всю
   страницу больше стандартного — это последняя точка. */
.cta{ text-align:center; }
.cta h2{
  max-width:14em; margin-inline:auto;
  font-size:clamp(34px,4.6vw,60px);
}
.cta .hero__cta{ justify-content:center; margin-top:clamp(24px,2.8vw,36px); }
.cta .btn--lg{ padding:17px 32px; font-size:18px; border-radius:18px; }
.cta h2{ margin:0 auto; max-width:16em; }
.cta .sec-sub{ margin:18px auto 0; }
.cta .hero__cta{ justify-content:center; }

footer{ padding:34px 0 46px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13px; }
/* подвал в столбик по центру: строка с годом, под ней правовые ссылки */
.foot{
  display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; text-align:center;
}
.foot__legal{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.foot__legal a{
  color:var(--ink-4); border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.foot__legal a:hover{ color:var(--ink-2); border-color:var(--line-2); }

/* появление при прокрутке */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- модалка входа ---------- */
.overlay{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:22px;
  background:rgba(250,249,247,.7);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .4s var(--ease), visibility 0s linear .4s;
}
.overlay.open{ opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s; }
.modal{
  width:min(420px,100%); padding:32px 30px 28px; border-radius:var(--r-xl);
  background:var(--surface); box-shadow:var(--shadow-3);
  transform:translateY(16px) scale(.97); transition:transform .5s var(--spring);
}
.overlay.open .modal{ transform:none; }
.modal h3{ font-family:var(--display); margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; }
.modal p{ margin:10px 0 22px; font-size:14.5px; color:var(--ink-3); line-height:1.55; }
.field{ position:relative; }
.field input{
  width:100%; padding:15px 46px 15px 16px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid transparent; color:var(--ink);
  font-size:16px; outline:none; transition:border-color .3s, box-shadow .3s, background .3s;
}
.field input:focus{ background:#fff; border-color:var(--green); box-shadow:0 0 0 4px var(--green-tint); }
.field__eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:0; background:none; color:var(--ink-4); cursor:pointer; border-radius:9px;
}
.field__eye:hover{ color:var(--ink); background:var(--surface-2); }
.modal .btn{ width:100%; justify-content:center; margin-top:14px; }
.err{ margin:12px 0 0; font-size:13px; color:#D0554E; min-height:18px; }
.shake{ animation:shake .45s; }
@keyframes shake{ 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)} 50%{transform:translateX(-6px)} }
.modal__hint{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3); }

/* ---------- кабинет ---------- */
.cab{
  position:fixed; inset:0; z-index:90; overflow-y:auto;
  background:var(--bg);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .45s var(--ease), visibility 0s linear .45s;
}
.cab.open{ opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s; }
.cab__bar{
  position:sticky; top:0; z-index:5;
  background:linear-gradient(to bottom, rgba(250,249,247,.95), rgba(250,249,247,.72));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.cab__barin{ display:flex; align-items:center; gap:14px; height:76px; }
.cab__who{ margin-right:auto; }
.cab__who b{ display:block; font-family:var(--display); font-size:16px; font-weight:750; letter-spacing:-.01em; }
.cab__who span{ font-size:12.5px; color:var(--ink-3); }

.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:22px 0 0; }
.tab{
  padding:10px 17px; border-radius:13px; border:0;
  background:transparent; color:var(--ink-3); font-size:14.5px; cursor:pointer;
  font-family:var(--display); font-weight:600;
  transition:color .25s, background .25s, box-shadow .25s;
}
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--ink); background:var(--surface); box-shadow:var(--shadow-1); }

.pane{ display:none; padding:28px 0 80px; }
.pane.on{ display:block; animation:fadeUp .55s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.hello{
  padding:28px 30px; border-radius:var(--r-xl);
  background:linear-gradient(150deg, var(--green-tint), var(--surface) 62%);
  box-shadow:var(--shadow-1);
}
.hello h3{ font-family:var(--display); margin:0 0 8px; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.hello p{ margin:0; color:var(--ink-2); font-size:15px; max-width:56em; }

.mine{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:18px; }
.mine__c{ padding:20px 22px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-1); }
.mine__v{ font-family:var(--display); font-size:28px; font-weight:800; letter-spacing:-.03em; }
.mine__l{ font-size:12.5px; color:var(--ink-3); margin-top:4px; }

.mods{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:24px; }
.mod{
  border-radius:var(--r-xl); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-1);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.mod:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.mod__h{ padding:24px 24px 20px; cursor:pointer; }
.mod__top{ display:flex; align-items:center; gap:10px; }
.chip{
  font-family:var(--display); font-size:12px; color:var(--green-deep);
  background:var(--green-tint); border-radius:999px; padding:4px 11px; font-weight:700;
}
.mod__min{ margin-left:auto; font-size:12.5px; color:var(--ink-3); }
.mod h3{ font-family:var(--display); margin:14px 0 7px; font-size:19px; font-weight:750; letter-spacing:-.02em; }
.mod p{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.55; }
.mod__done{ margin-left:8px; color:var(--green-ink); font-weight:700; font-size:13px; }

.lesson{ border-top:1px solid var(--line); }
.lesson__h{
  width:100%; text-align:left; display:flex; align-items:center; gap:12px;
  padding:16px 24px; background:none; border:0; cursor:pointer;
  font-family:var(--display); font-size:15px; font-weight:650;
  transition:background .25s;
}
.lesson__h:hover{ background:var(--surface-2); }
.lesson__i{ margin-left:auto; color:var(--ink-4); transition:transform .35s var(--ease); }
.lesson.on .lesson__i{ transform:rotate(180deg); }
.lesson__b{ display:none; padding:0 24px 24px; font-size:14.5px; color:var(--ink-2); line-height:1.68; }
.lesson.on .lesson__b{ display:block; animation:fadeUp .4s var(--ease); }
.lesson__b p{ margin:0 0 12px; }
.lesson__b ul, .lesson__b ol{ margin:0 0 14px; padding-left:20px; }
.lesson__b li{ margin-bottom:7px; }
.note{
  margin:0 0 14px; padding:14px 17px; border-radius:var(--r-md);
  background:rgba(199,147,56,.10);
  font-size:14px; color:var(--ink-2);
}
.say{
  margin:0 0 14px; padding:16px 18px; border-radius:var(--r-md);
  background:var(--green-tint);
  font-size:15.5px; color:var(--green-ink); line-height:1.55; font-weight:500;
}
.say::before{ content:'— '; opacity:.55; }
.vid{ margin:0 0 16px; aspect-ratio:16/9; width:100%; border-radius:var(--r-md); overflow:hidden; background:#000; }
.vid iframe, .vid video{ width:100%; height:100%; border:0; display:block; }

.check{ margin-top:24px; border-radius:var(--r-xl); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-1); }
.check__i{ display:flex; gap:13px; align-items:flex-start; padding:16px 22px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14.5px; transition:background .25s; }
.check__i:last-child{ border-bottom:0; }
.check__i:hover{ background:var(--surface-2); }
.check__i input{
  appearance:none; width:20px; height:20px; margin:1px 0 0; flex:none; border-radius:7px;
  border:1.5px solid var(--line-2); background:#fff; cursor:pointer; transition:.25s;
}
.check__i input:checked{ background:var(--green); border-color:var(--green); }
.check__i input:checked + span{ color:var(--ink-4); text-decoration:line-through; }

.faq__i{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq__q{ font-family:var(--display); font-size:16px; font-weight:700; margin:0 0 7px; }
.faq__a{ margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.6; }

.gen{ display:grid; gap:14px; max-width:640px; margin-top:22px; }
.gen label{ font-size:13px; color:var(--ink-3); display:block; margin-bottom:6px; }
.gen input, .gen select{
  width:100%; padding:13px 15px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink); font-size:15px; outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.gen input:focus, .gen select:focus{ border-color:var(--green); box-shadow:0 0 0 4px var(--green-tint); }
.out{
  margin-top:8px; padding:16px; border-radius:var(--r-md);
  background:var(--surface); box-shadow:var(--shadow-1);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; color:var(--green-ink); white-space:pre-wrap; word-break:break-all; line-height:1.6;
}
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mini{ font-size:13px; color:var(--ink-3); line-height:1.6; }
code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; background:var(--surface-2); padding:1px 6px; border-radius:6px; }



/* ---------- наши партнёры: список под картой ---------- */
.partners{ padding:clamp(6px,1vw,14px) 0 var(--sec-gap); }
.partners__ttl{
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4);
  margin-bottom:16px;
}
.plist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:10px 14px;
}
.plist__i{
  display:flex; align-items:center; gap:11px; min-width:0;
  padding:10px 14px 10px 10px; border-radius:999px;
  background:var(--surface); box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.plist__i:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.plist__logo{
  width:36px; height:36px; border-radius:50%; flex:none; overflow:hidden;
  display:grid; place-items:center; background:var(--surface-2);
  box-shadow:0 0 0 1px rgba(24,26,22,.06);
}
.plist__logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.plist__logo span{ display:none; }
.plist__logo--fb span{
  display:block; font-family:var(--display); font-weight:800;
  font-size:12.5px; color:var(--ink-3);
}
.plist__txt{ min-width:0; line-height:1.25; }
.plist__txt b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:14.5px; letter-spacing:-.01em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.plist__txt i{ display:block; font-style:normal; font-size:12.5px; color:var(--ink-4); }

/* пока список не раскрыт, лишние салоны спрятаны */
.plist__i--extra{ display:none; }
.plist.is-all .plist__i--extra{ display:flex; }

.plist__all{
  margin-top:14px; padding:9px 18px; border-radius:999px;
  border:1px solid var(--line-2); background:transparent; cursor:pointer;
  font-family:var(--display); font-size:13.5px; font-weight:650; color:var(--ink-2);
  transition:background .25s, color .25s, box-shadow .3s var(--ease);
}
.plist__all:hover{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); }
.plist__all[hidden]{ display:none; }

/* ---------- что уже готово: шесть карточек ---------- */
.sec-head--center{ max-width:34em; margin-inline:auto; text-align:center; }

.tools{
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:start;      /* раскрытая карточка не тянет соседей по ряду */
  margin-top:clamp(30px,4vw,52px);
}

.tool{
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tool:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.tool.is-open{ box-shadow:var(--shadow-2); }

/* шапка карточки — она же кнопка раскрытия */
.tool__head{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:15px;
  width:100%; padding:clamp(20px,2vw,26px); border:0; background:none;
  text-align:left; cursor:pointer; font:inherit; color:inherit;
}
.tool__icon{
  width:clamp(44px,3.4vw,52px); height:clamp(44px,3.4vw,52px);
  border-radius:16px; display:grid; place-items:center; flex:none;
  background:var(--green-tint); color:var(--green-deep);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.tool__icon svg{ width:55%; height:55%; display:block; }
.tool:hover .tool__icon, .tool.is-open .tool__icon{
  background:var(--green); color:#fff;
}
.tool__txt{ display:block; min-width:0; }
.tool__ttl{
  display:block;
  font-family:var(--display); font-weight:750;
  font-size:clamp(15.5px,1.08vw,17px); line-height:1.2; letter-spacing:-.02em;
}
/* короткая выгода: её видно, не открывая карточку */
.tool__hint{
  display:block; margin-top:5px;
  font-size:13.5px; line-height:1.35; color:var(--ink-3);
}
.tool__more{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line-2);
  transition:transform .4s var(--spring), background .3s, color .3s, border-color .3s;
}
.tool__more svg{ width:15px; height:15px; }
.tool:hover .tool__more{ background:var(--ink); border-color:var(--ink); color:#fff; }
.tool.is-open .tool__more{ transform:rotate(135deg); background:var(--ink); color:#fff; }

/* тело: раскрывается плавно, без прыжка по высоте */
.tool__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.tool.is-open .tool__body{ grid-template-rows:1fr; }
.tool__body > div{ overflow:hidden; }
.tool__body p{
  margin:0; padding:0 clamp(20px,2vw,26px) clamp(20px,2vw,26px);
  font-size:14.5px; line-height:1.6; color:var(--ink-3);
}

/* ---------- сначала продукт ---------- */
/* Заголовок слева, врез справа под общей чертой — как на
   продающем лендинге, откуда блок и перенесён. */
/* заголовок и врез начинаются с одной линии: под чертой справа
   и под первой строкой заголовка слева */
.prod__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,430px);
  gap:clamp(24px,3.4vw,48px); align-items:start;
  margin-bottom:clamp(28px,3.4vw,44px);
}
/* 18px — черта плюс её отступ справа; .1em добирает разницу
   полулидинга: у заголовка он меньше, иначе буквы встают выше */
.prod__head h2{ margin:0; padding-top:calc(18px + .1em); }
.prod__lead{
  margin:0; padding-top:16px;
  border-top:2px solid var(--ink);
  font-size:16px; line-height:1.55; color:var(--ink-2);
}
.prod__lead b{ font-weight:750; color:var(--ink); }

.prod__strip{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(10px,1.1vw,14px);
}
.proof{
  padding:clamp(18px,1.8vw,24px); min-height:190px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.proof:hover{ transform:translateY(-3px); box-shadow:var(--shadow-1); }
.proof__dot{
  display:block; width:9px; height:9px; border-radius:50%;
  background:var(--green); margin-bottom:clamp(22px,2.6vw,36px);
}
.proof h3{
  margin:0 0 9px;
  font-family:var(--display); font-weight:750;
  font-size:clamp(16px,1.15vw,18px); line-height:1.25; letter-spacing:-.025em;
}
.proof p{ margin:0; font-size:14px; line-height:1.5; color:var(--ink-3); }

/* ---------- почему выбирают натуральный корм ---------- */
/* Блок продолжает разговор о продукте, поэтому висит вплотную
   к нему: сверху хватает нижнего отступа предыдущей секции. */

/* Два смысловых блока — про корм и про доход — набраны крупнее
   остальных: с них начинаются главные вопросы салона.
   Колонка шире стандартных 34em, иначе заголовок рассыпается
   в лесенку по два слова. Хвост фразы — фирменной зеленью,
   как лапа в шапке. */
/* размер у всех заголовков блоков один — базовый из h2.
   Колонка шире стандартной только затем, чтобы длинные
   заголовки не рассыпались в лесенку по два слова. */
#natural .sec-head, #income .sec-head{ max-width:min(820px, 100%); }
#natural h2 .thin, #income h2 .thin{ font-weight:800; color:var(--green-deep); }

/* строка-ответ под таким заголовком */
.sec-answer{
  margin:20px 0 0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(17px,1.35vw,19px); letter-spacing:-.03em; color:var(--ink);
}
.nat{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(18px,2vw,26px);
  margin-top:clamp(30px,3.6vw,48px);
}
.nat__i{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.nat__pic{ width:100%; height:clamp(132px,14vw,200px); }
/* размер задаёт контейнер, а не сама картинка: иначе до загрузки
   бокс схлопывается в ноль и подписи прыгают, когда стикеры
   доезжают. object-position ставит собак на общую линию. */
.nat__pic img{
  width:100%; height:100%; display:block;
  object-fit:contain; object-position:center bottom;
  transition:transform .5s var(--ease);
}
.nat__i:hover .nat__pic img{ transform:translateY(-6px) scale(1.03); }
.nat__i h3{
  margin:18px 0 0;
  font-family:var(--display); font-weight:750;
  font-size:clamp(16.5px,1.15vw,18px); letter-spacing:-.03em;
}
.nat__i p{
  margin:8px 0 0; max-width:24ch;
  font-size:14.5px; line-height:1.5; color:var(--ink-3);
}

/* мостик к калькулятору: сверху связь с питанием, снизу тише —
   снятие страха «придётся продавать» */
.nat__note{
  margin:clamp(30px,3.6vw,46px) auto 0; max-width:42em;
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.6vw,34px);
  border-radius:var(--r-lg); background:var(--surface-2);
  text-align:center;
}
.nat__note-t{
  margin:0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(17px,1.45vw,21px); line-height:1.35;
  letter-spacing:-.025em; color:var(--ink);
}
/* тот же зелёный, что в акценте заголовка, а не тёмный из карточек */
.nat__note-t b{ font-weight:800; color:var(--green-deep); }
.nat__note-s{
  margin:10px 0 0;
  font-size:15.5px; line-height:1.55; color:var(--ink-3);
  letter-spacing:-.01em;
}

@media (max-width:980px){
  /* в одну колонку выравнивать не с чем — добор сверху убираем */
  .prod__head{ grid-template-columns:1fr; gap:24px; }
  .prod__head h2{ padding-top:0; }
  .prod__strip{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .proof{ min-height:0; }
  .nat{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .prod__strip{ grid-template-columns:1fr; }
}

/* ---------- калькулятор дохода: ползунок и лестница ---------- */
/* Над карточкой только плашка и заголовок: всё остальное
   сказано там, где стоят сами числа. */

.inc{
  margin-top:clamp(30px,4vw,52px);
  padding:clamp(24px,3vw,42px);
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-2);
}

.inc__head{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.inc__lab{
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4);
}
.inc__count{ display:flex; align-items:baseline; gap:9px; }
.inc__count b{
  font-family:var(--display); font-weight:900; letter-spacing:-.04em;
  font-size:clamp(44px,5vw,68px); line-height:1;
  font-variant-numeric:tabular-nums;
}
.inc__count span{
  font-family:var(--display); font-weight:700;
  font-size:clamp(15px,1.2vw,18px); color:var(--ink-3);
}

/* общая горизонтальная ось: бегунок ползунка и точка на графике
   ходят по одной линии, поэтому у графика поля в полбегунка */
.inc__axis{ margin-top:clamp(14px,1.6vw,20px); }

.inc__range{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:26px; margin:0;
  background:none; cursor:pointer;
}
.inc__range::-webkit-slider-runnable-track{
  height:8px; border-radius:99px;
  background:linear-gradient(90deg, var(--green) 0 var(--p,15%), var(--surface-2) var(--p,15%) 100%);
}
.inc__range::-moz-range-track{
  height:8px; border-radius:99px;
  background:linear-gradient(90deg, var(--green) 0 var(--p,15%), var(--surface-2) var(--p,15%) 100%);
}
.inc__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; margin-top:-9px; border-radius:50%;
  background:#fff; border:0;
  box-shadow:0 1px 2px rgba(24,26,22,.10), 0 6px 18px rgba(24,26,22,.16);
  transition:transform .22s var(--spring);
}
.inc__range::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:0;
  box-shadow:0 1px 2px rgba(24,26,22,.10), 0 6px 18px rgba(24,26,22,.16);
}
.inc__range:active::-webkit-slider-thumb{ transform:scale(1.12); }
.inc__range:focus-visible{ outline:none; }
.inc__range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px var(--green-tint2); }

/* лестница: ступени процента по обороту */
.inc__chart{
  position:relative; margin:12px 13px 0;
  height:clamp(112px,13vw,168px);
}
.inc__svg{ display:block; width:100%; height:100%; overflow:visible; }
.inc__area{ fill:url(#incGrad); }
.inc__line{
  fill:none; stroke:var(--green); stroke-width:2.5;
  stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
/* закрашенная часть лестницы догоняет бегунок */
#incClipR{ transition:width .12s linear; }
.inc__area--off{ fill:rgba(24,26,22,.035); }
.inc__line--off{ stroke:var(--line-2); stroke-width:2; }

/* пунктирный потолок: выше 20% ставка не поднимается */
.inc__ceil{
  position:absolute; left:0; right:0; top:9.09%;   /* 20 из 22 по шкале */
  border-top:1.5px dashed var(--line-2);
  pointer-events:none;
}
.inc__ceil span{
  position:absolute; right:0; top:-11px;
  padding:2px 9px; border-radius:99px;
  background:var(--surface); color:var(--ink-3);
  font-family:var(--display); font-weight:750; font-size:12px;
  letter-spacing:-.01em; white-space:nowrap;
}

/* точка едет по ступеням ровно под бегунком */
.inc__dot{
  position:absolute; width:0; height:0; left:0; top:100%;
  transition:left .12s linear, top .18s var(--ease);
  pointer-events:none;
}
.inc__dot i{
  position:absolute; left:-8px; top:-8px;
  width:16px; height:16px; border-radius:50%;
  background:var(--green); border:3.5px solid var(--surface);
  box-shadow:0 2px 10px rgba(62,154,47,.35);
}

.inc__ticks{
  display:flex; justify-content:space-between;
  margin:10px 13px 0;
  font-size:12px; color:var(--ink-4); font-variant-numeric:tabular-nums;
}

/* итог: процент и деньги */
.inc__out{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(22px,2.6vw,32px);
}
.inc__cell{
  padding:clamp(16px,1.8vw,22px);
  border-radius:var(--r-lg);
  background:var(--surface-2);
}
.inc__cell--money{
  background:
    linear-gradient(180deg, rgba(92,190,76,.13), rgba(92,190,76,.05));
}
.inc__cap{
  display:block;
  font-family:var(--display); font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4);
}
.inc__cell--money .inc__cap{ color:var(--green-ink); }

.inc__rate{ display:flex; align-items:baseline; gap:1px; margin-top:6px; }
.inc__rate b{
  font-family:var(--display); font-weight:900; letter-spacing:-.04em;
  font-size:clamp(34px,3.4vw,46px); line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.inc__rate i{
  font-style:normal; font-family:var(--display); font-weight:900;
  font-size:clamp(22px,2.2vw,30px); letter-spacing:-.03em;
}
/* перешагнули ступень — процент коротко подпрыгивает */
.inc__rate.is-bump{ animation:incBump .42s var(--spring); }
@keyframes incBump{
  0%{ transform:scale(1); }
  38%{ transform:scale(1.09); }
  100%{ transform:scale(1); }
}
.inc__next{
  display:block; margin-top:8px;
  font-size:13px; line-height:1.35; color:var(--ink-3);
}

.inc__sum{
  margin-top:6px;
  font-family:var(--display); font-weight:900; letter-spacing:-.04em;
  font-size:clamp(34px,3.6vw,50px); line-height:1.05; color:var(--green-ink);
  font-variant-numeric:tabular-nums;
}
/* главное про выплату стоит вплотную к сумме, а не в подводке:
   там его читают вместе с цифрой, а не до неё */
.inc__year{
  display:block; margin-top:10px;
  font-size:14px; line-height:1.45; color:var(--green-ink); opacity:.85;
}
.inc__year b{ font-weight:800; opacity:1; }

.inc__cover{
  margin:clamp(16px,1.8vw,22px) 0 0;
  font-family:var(--display); font-weight:650;
  font-size:clamp(15px,1.25vw,18px); line-height:1.45;
  letter-spacing:-.01em; color:var(--ink-2);
  min-height:1.45em;          /* строка появляется не сразу — держим место */
  transition:opacity .25s var(--ease);
}
.inc__cover b{ font-weight:750; color:var(--ink); }
.inc__cover.is-fade{ opacity:0; }

.inc__law{
  margin:14px 0 0;
  font-size:12.5px; line-height:1.45; color:var(--ink-4);
}

@media (max-width:720px){
  .inc__out{ grid-template-columns:1fr; }
  .inc__head{ flex-direction:column; align-items:flex-start; gap:4px; }
}

@media (max-width:900px){
  .tools{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .tools{ grid-template-columns:1fr; }
  .tool__head{ gap:13px; }
}

/* ---------- адаптив ---------- */
/* 1020–1400: поля в 14vw съедают колонку с текстом — заголовок
   мельчает, кнопки встают в столбик. На таких экранах поля
   совпадают с полями шапки, и текст снова идёт от её края. */
@media (min-width:1021px) and (max-width:1400px){
  :root{ --shell-gutter:clamp(28px,5vw,88px); }
}

@media (max-width:1020px){
  .hero{ padding-top:clamp(88px,14vw,110px); }
  /* в столбик: текст, карта */
  .hero__grid{
    grid-template-columns:1fr; justify-items:stretch; gap:28px;
  }
  .hero__copy{ width:100%; max-width:none; padding-left:var(--shell-inset); }
  .hero__grid .map-stage{
    justify-self:center; margin-right:0;
    width:min(520px, 100%); max-width:none;
  }
  .map-stage{ max-width:min(520px, calc(100vw - var(--shell-gutter) * 2 - var(--shell-inset) * 2)); }
  .nav__links{ gap:16px; }
  .brand__sub, .brand__bar{ display:none; }
  .steps{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  :root{ --shell-gutter:16px; --shell-inset:14px; }
  .hero{ padding-top:clamp(80px,18vw,96px); }
  /* Два блока в столбик съедали пол-экрана. Ужимаем так, чтобы
     обе кнопки встали в одну строку; 44px по высоте — нижняя
     граница удобного нажатия, ниже не опускаем. */
  .btn--lg{ padding:11px 14px; font-size:13.5px; border-radius:12px; }
  .hero__cta{ gap:8px; margin-top:20px; flex-wrap:wrap; }
  /* В капсуле остаются логотип, вход и язык. Вход не прячем:
     с телефона в кабинет иначе не попасть — только ужимаем. */
  .bar{ padding:5px 5px 5px var(--shell-inset); gap:6px; }
  .bar .btn--dark{
    padding:10px 14px; font-size:13px; border-radius:12px;
    min-width:0; white-space:nowrap;
  }
  .nav__links a{ display:none; }
  .nav__links{ margin-right:2px; }
  .brand__name{ font-size:15px; }
  .lang__btn{ width:32px; height:32px; }
  .brand__sub{ display:none; }
  .row2{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .map-island,   .coin{ opacity:1; transform:none; }
  }

/* ---------- города на подходе ---------- */
/* Крутится «загрузка»: салона ещё нет, но город уже в работе. */
.spot{
  position:absolute; transform:translate(-50%,-50%);
  width:0; height:0; pointer-events:none;
  --sz:clamp(26px, 6.6cqw, 48px);   /* тот же масштаб, что у значков салонов */
}
.spot__ring{
  position:absolute; left:50%; top:50%;
  width:calc(var(--sz,44px) * .56); height:calc(var(--sz,44px) * .56);
  margin:calc(var(--sz,44px) * -.28) 0 0 calc(var(--sz,44px) * -.28);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.8), rgba(255,255,255,0) 78%);
  color:var(--green-deep);
  opacity:0;
  animation:spotIn .6s var(--ease) var(--in-delay,0ms) forwards;
}
/* палочка: сама обёртка крутится вокруг центра, а видимая
   чёрточка сидит у неё сверху — так собирается циферблат */
.spot__ring i{
  position:absolute; inset:0; display:block;
  animation:iosFade 2.4s linear infinite;   /* та же цифра — в app.js (SPIN) */
}
.spot__ring i::before{
  content:''; display:block; margin:0 auto;
  width:11%; height:29%; border-radius:99px;
  background:currentColor;
}
@keyframes iosFade{ 0%{ opacity:1 } 100%{ opacity:.12 } }
@keyframes spotIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .spot__ring{ animation:none; opacity:1; }
  .spot__ring i{ animation:none; opacity:.45; }
  }

/* ---------- призыв и карточка куратора ---------- */
/* Кнопка уводит на чужой сайт, поэтому под ней сразу сказано,
   что будет дальше: сюрприз на этом шаге стоит дороже всего. */
.cta__note{
  margin:16px auto 0; max-width:34em;
  font-size:13.5px; line-height:1.5; color:var(--ink-4);
}

.me{
  display:grid; align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,2vw,28px);
  margin:clamp(26px,3vw,40px) auto 0; max-width:760px;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  border-radius:var(--r-xl);
  background:var(--surface); box-shadow:var(--shadow-1);
}
.me__ava{
  width:clamp(64px,6vw,84px); height:clamp(64px,6vw,84px);
  border-radius:50%; object-fit:cover; display:block; flex:none;
  box-shadow:0 0 0 3px var(--surface-2);
}
.me__role{
  font-family:var(--display); font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--green-deep);
}
.me__name{
  font-family:var(--display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(18px,1.6vw,22px); line-height:1.2; margin-top:2px;
}
.me__txt p{ margin:6px 0 0; font-size:14px; line-height:1.5; color:var(--ink-3); }

.me__btns{ display:flex; gap:8px; flex:none; }
.me__btn{ padding:9px 15px; font-size:14px; border-radius:12px; gap:7px; }
.me__btn svg{ width:19px; height:19px; display:block; }

@media (max-width:760px){
  .me{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:12px; }
  .me__btns{ width:100%; }
  .me__btn{ flex:1; justify-content:center; }
}

/* ---------- правовые страницы ---------- */
.legal{ padding:clamp(46px,6vw,90px) 0 clamp(30px,4vw,60px); }
.legal .wrap{ max-width:min(760px, 100%); }
.legal__back{
  display:inline-block; margin-bottom:clamp(22px,2.6vw,34px);
  font-size:14px; color:var(--ink-3); transition:color .25s;
}
.legal__back:hover{ color:var(--ink); }
.legal h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(30px,3.4vw,44px); line-height:1.1; margin:0 0 clamp(20px,2.4vw,30px);
}
.legal h2{
  font-size:clamp(17px,1.4vw,20px); font-weight:750; letter-spacing:-.02em;
  margin:clamp(24px,2.6vw,34px) 0 8px;
}
.legal p{ margin:0 0 12px; font-size:15px; line-height:1.65; color:var(--ink-2); }
/* поля, которые нужно заполнить: специально бросаются в глаза */
.legal__fill{
  background:rgba(219,84,73,.12); color:#B23B32;
  padding:1px 7px; border-radius:6px; font-size:.94em;
}

/* галочка «оставаться в кабинете» */
.remember{
  display:flex; align-items:center; gap:9px;
  margin:14px 0 0; font-size:13.5px; color:var(--ink-3); cursor:pointer;
  user-select:none;
}
.remember input{ width:16px; height:16px; accent-color:var(--green-deep); cursor:pointer; flex:none; }