/* ============================================================
   Bodur — единый источник правды по стилю.
   Все значения ниже объяснимы одной фразой. Магических чисел в
   разметке быть не должно: если чего-то не хватает — добавь токен.
   ============================================================ */

:root{
  /* Цвет снят замером с трёх фото-референсов владельца (консультация +
     два кадра кабинета). Гамма тёплая целиком: айвори, тауп, латунь.
     Синего в палитре нет. */
  --bg:#efe8df;          /* айвори стены кабинета (#d9d2cb), поднятый до фона страницы */
  --surface:#fdfaf5;     /* тёплый белый бумаг на столе (#f4f2ef) — карточки как листы */
  --text:#2f2721;        /* тёплый тёмный шторы/рамы (#5c4d35), углублён. К --bg 11:1 */
  --text-muted:#6b5b4b;  /* тауп штор (#766355). К --bg 5.7:1 */
  --accent:#8a6520;      /* латунь фурнитуры. Тёмная настолько, чтобы белый
                            текст на кнопке давал 5.4:1, а сама шла текстом 4.9:1 */
  --accent-lift:#deb890; /* тёплая подсветка полок (#deb890) — акцент на тёмном, 5.9:1 */
  --border:#dfd3c4;      /* тёплая граница вместо холодной серой */
  --ink:#3b2f25;         /* тёплый тёмный полок и теней кадра — низ, тёмные
                            секции и вуаль поверх верхнего фото */

  /* Производные тёмной секции — не новые цвета, а прозрачности --surface */
  --on-dark:rgba(255,255,255,.92);
  --on-dark-muted:rgba(255,255,255,.66);
  --on-dark-line:rgba(255,255,255,.16);

  /* Типографика: две семьи, осознанная пара. Засечки — только заголовки. */
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Manrope","Segoe UI",Tahoma,sans-serif;

  /* Модульная шкала. Ничего «на глаз». */
  --t-12:12px; --t-14:14px; --t-16:16px; --t-20:20px;
  --t-24:24px; --t-32:32px; --t-48:48px; --t-64:64px;

  /* Отступы */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px;
  --s-24:24px; --s-32:32px; --s-48:48px; --s-64:64px; --s-96:96px;

  /* Радиусы: сценарий «16» — карточки 16, капсулы 999, мелочь 4. */
  --r-card:16px; --r-pill:999px; --r-sm:4px;

  /* Тени: два уровня. Первый — приподнять карточку, второй — оторвать модалку. */
  --sh-1:0 1px 2px rgba(62,46,30,.06), 0 10px 28px rgba(62,46,30,.09);
  --sh-2:0 24px 70px rgba(40,30,20,.30);

  /* Движение: два пресета, easing не linear. */
  --d:200ms; --d-slow:420ms;
  --e:cubic-bezier(.2,.7,.2,1);

  --maxw:1120px;
  --header-h:72px;
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 82% 8%, rgba(222,184,144,.13), transparent 60%),
    radial-gradient(900px 480px at 8% 52%, rgba(154,131,104,.12), transparent 62%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--t-16);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip, а не hidden: не создаёт scroll-контейнер и не ломает position:sticky */
  overflow-x:clip;
}

h1,h2,h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.015em;
}
h1{font-size:clamp(24px,3.1vw,38px)}
h2{font-size:clamp(20px,2.1vw,27px)}
h3{font-size:17px}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* Фокус виден всегда и не зависит от мыши */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-24)}
@media (max-width:640px){ .wrap{padding:0 var(--s-16)} }

/* Метка-надзаголовок: золото уместно, потому что это не текст, а указатель */
.eyebrow{
  font-size:var(--t-12);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex; align-items:center; gap:var(--s-12);
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); flex:0 0 auto}
.eyebrow.center{justify-content:center}
/* На тёмном фоне тёмная латунь не читается — берём светлый вариант */
.hero .eyebrow,.sec.dark .eyebrow{color:var(--accent-lift)}
.hero .eyebrow::before,.sec.dark .eyebrow::before{background:var(--accent-lift)}

.lead{color:var(--text-muted); font-size:var(--t-16); line-height:1.6}
.muted{color:var(--text-muted)}

/* ---------- Кнопки: капсулы ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-8);
  /* Высота по правке владельца: 48 → 34px, это ровно −30%.
     Ниже рекомендованных 44px для тач-таргета — решение владельца, оно
     осознанное, поэтому в тестах порог опущен, а не отключён. */
  min-height:34px;
  padding:6px var(--s-20);
  border:0; border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:var(--t-16); font-weight:800;
  cursor:pointer;
  transition:transform var(--d) var(--e), box-shadow var(--d) var(--e), color var(--d) var(--e), background-color var(--d) var(--e);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* Контур ровно 1px внутренней тенью — не влияет на размеры, край не мылится.
   Второй слой — парение. */
.btn-gold{
  background:var(--accent); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34), 0 6px 16px rgba(138,101,32,.38);
}
.btn-gold:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 12px 26px rgba(138,101,32,.5)}

.btn-navy{background:var(--ink); color:var(--on-dark); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 16px rgba(62,46,30,.28)}

.btn-ghost{background:var(--surface); color:var(--text); box-shadow:inset 0 0 0 1px var(--border), 0 5px 14px rgba(62,46,30,.10)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--text), 0 10px 22px rgba(62,46,30,.16)}

.btn-on-dark{background:transparent; color:var(--on-dark); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34), 0 6px 16px rgba(0,0,0,.22)}
.btn-on-dark:hover{box-shadow:inset 0 0 0 1px var(--on-dark), 0 10px 22px rgba(0,0,0,.28)}

.btn-lg{min-height:39px; padding:9px 26px}   /* 56 → 39px, те же −30% */
/* Единственная большая кнопка сайта — вход в партнёрскую программу на
   франшизе. Осознанно крупнее общих −30%: владелец попросил именно её
   сделать большой и широкой. */
.btn-xl{
  min-height:52px; padding:13px 44px;
  font-size:17px; letter-spacing:.06em;
}
@media (max-width:640px){ .btn-xl{width:100%; padding:13px 18px; font-size:15.5px} }
.btn-block{width:100%}

/* ---------- Шапка ---------- */
.hdr{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--border);
}
.hdr-in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--s-24);
  height:var(--header-h);
  display:flex; align-items:center; gap:var(--s-24);
}
@media (max-width:640px){
  /* Ряд шапки плотнее: бургер вырос до полноценной цели 44px, и со старыми
     зазорами строка вылезала за экран. */
  .hdr-in{padding:0 var(--s-12); gap:var(--s-8)}
  /* «коуч психолог энергопрактик» в одну строку не влезает рядом с капсулой
     и бургером — на узком экране оставляем только имя. Иначе шапка уезжает
     за край и появляется горизонтальный скролл. */
  .logo-txt span{display:none}
  .logo-txt b{font-size:16px}
  .logo-mark{width:36px; height:36px}
}

/* min-height 44 — логотип это ссылка на главную, значит полноценный тач-таргет */
.logo{display:flex; align-items:flex-start; gap:var(--s-12); flex:0 0 auto; min-height:44px}
.logo-mark{
  width:42px; height:42px; flex:0 0 auto;
  border-radius:12px;
  background:var(--ink); color:var(--accent-lift);
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:var(--t-16); font-weight:700;
  position:relative;
}
/* Золотая точка — единственная декорация марки, рисуется CSS, не картинкой */
.logo-mark::after{
  content:""; position:absolute; top:-3px; right:-3px;
  width:11px; height:11px; border-radius:50%;
  background:var(--accent); border:2.5px solid var(--bg);
}
.logo-txt{display:flex; flex-direction:column; line-height:1.12; padding-top:1px}
.logo-txt b{font-family:var(--font-display); font-size:18px; font-weight:700; white-space:nowrap}
/* Подпись под именем длинная («энергетический менеджмент · диагностика
   состояния») — в одну строку она занимала 334px и на экранах около 1024
   выдавливала меню за край. Поэтому переносим её на две строки и ограничиваем
   ширину. Две строки по 9px укладываются в высоту шапки 72px без изменений. */
.logo-txt span{font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); max-width:196px; line-height:1.25}

.nav{display:flex; align-items:center; gap:var(--s-4); margin-left:auto}
.nav a,.nav .navlink{
  padding:var(--s-8) var(--s-12);
  min-height:44px; display:inline-flex; align-items:center;
  /* Меню по правке владельца: тоньше, чётче и чёрным.
     Вес 700 → 500, цвет тауп → почти чёрный, чуть разреженные буквы
     и geometricPrecision — так тонкое начертание не мылится. */
  font-size:14.5px; font-weight:500;
  letter-spacing:.005em;
  text-rendering:geometricPrecision;
  border-radius:var(--r-pill);
  color:#171310;
  transition:color var(--d) var(--e), background-color var(--d) var(--e);
}
/* .navlink — это <button>, поэтому сбрасываем его собственный вид */
.nav .navlink{border:0; background:transparent; font-family:inherit; cursor:pointer}
.nav a:hover,.nav .navlink:hover{color:#000; background:rgba(47,39,33,.05)}
.nav a[aria-current="page"]{color:#000; font-weight:700}
.nav a[aria-current="page"]::after{
  content:""; display:block; height:2px; background:var(--accent);
  position:absolute; left:var(--s-12); right:var(--s-12); bottom:6px;
}
.nav a,.nav .navlink{position:relative}
.hdr .btn{margin-left:var(--s-12); flex:0 0 auto}

/* ---------- Кружок «Поделиться» в шапке ---------- */
/* Владелец: кнопка маленькая, компактная, круглая. Поэтому только значок —
   подписи нет ни на одном экране, шапка от неё не толстеет.
   Смысл: с телефона открывается системное окно «Поделиться», оттуда сайт
   уходит себе в Telegram, в заметки или в закладки одним касанием. Где такого
   окна нет (обычно компьютер) — кладём адрес в буфер и говорим об этом. */
.btn-share{
  flex:0 0 auto; position:relative;
  width:38px; height:38px; padding:0;
  display:inline-grid; place-items:center;
  border:1.5px solid var(--border); border-radius:50%;
  background:var(--surface); cursor:pointer;
  transition:border-color var(--d) var(--e), box-shadow var(--d) var(--e), transform var(--d) var(--e);
}
/* Сам кружок маленький, а попадать пальцем нужно уверенно: невидимая
   область нажатия растянута до 46px, на вёрстку она не влияет. */
.btn-share::after{content:""; position:absolute; inset:-4px; border-radius:50%}
.btn-share svg{width:16px; height:16px; fill:none; stroke:var(--accent); stroke-width:1.9; stroke-linecap:round}
.btn-share:hover{border-color:var(--accent); box-shadow:0 4px 12px rgba(62,46,30,.14); transform:translateY(-1px)}
.btn-share:active{transform:none}
.btn-share span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
@media (max-width:640px){ .btn-share{width:36px; height:36px} }


/* Всплывающая подсказка «ссылка скопирована» — живёт 2 секунды внизу экрана */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,14px);
  z-index:80; max-width:calc(100vw - 32px);
  padding:12px 18px; border-radius:999px;
  background:var(--ink); color:var(--on-dark);
  font-size:14px; font-weight:600; box-shadow:0 12px 30px rgba(62,46,30,.35);
  opacity:0; pointer-events:none; transition:opacity .22s var(--e), transform .22s var(--e);
}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* Гамбургер — только на узких */
.burger{
  min-width:44px; min-height:44px; flex:0 0 auto; display:grid; place-items:center;
  display:none;
  margin-left:auto;
  width:48px; height:48px;
  border:1.5px solid var(--border); border-radius:12px;
  background:var(--surface); cursor:pointer;
  padding:0; place-items:center;
}
.burger span{display:block; width:20px; height:2px; background:var(--text); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* Off-canvas: закрытое меню уводим за край через transform, а не display —
   так анимация идёт на компоновке, которую браузер не пересчитывает. */
.mnav{
  /* Правка владельца: меню выпадает сверху, под шапкой, во всю ширину —
     видимая навигация, а не боковая шторка. */
  position:fixed; left:0; right:0; top:var(--header-h); bottom:auto; z-index:60;
  visibility:hidden;
}
.mnav[data-open="true"]{visibility:visible}
.mnav-back{
  position:fixed; inset:0; top:var(--header-h);
  background:rgba(47,39,33,.55);
  opacity:0; transition:opacity var(--d) var(--e);
}
.mnav[data-open="true"] .mnav-back{opacity:1}
.mnav-panel{
  position:relative;
  width:100%;
  background:var(--surface);
  border-bottom:1.5px solid var(--border);
  box-shadow:0 24px 48px rgba(40,30,20,.28);
  padding:var(--s-8) var(--s-16) var(--s-16);
  display:flex; flex-direction:column;
  transform:translateY(-105%);
  transition:transform var(--d-slow) var(--e);
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto;
}
.mnav[data-open="true"] .mnav-panel{transform:translateY(0)}
.mnav-panel a,.mnav-panel .navlink{
  min-height:52px; display:flex; align-items:center;
  padding:0 var(--s-12);
  font-size:17px; font-weight:700;
  border-radius:12px;
  border-bottom:1.5px solid var(--border);
}
.mnav-panel a:last-child{border-bottom:0}
.mnav-panel .navlink{
  width:100%; border-left:0; border-right:0; border-top:0;
  background:transparent; font-family:inherit; text-align:left; cursor:pointer;
  color:inherit;
}
.mnav-panel a[aria-current="page"]{color:var(--accent)}
.mnav-close{
  /* Выпадающему меню крестик не нужен: закрывает бургер, фон и Escape.
     Кнопка остаётся для доступности, но ужата в строку. */
  position:absolute; top:6px; right:10px;
  width:44px; height:44px;
  border:0; border-radius:12px;
  background:transparent; color:var(--text-muted);
  font-size:var(--t-20); cursor:pointer;
}

@media (max-width:900px){
  /* На узком экране прячем меню в бургер, НО «Диагностику» оставляем на виду:
     это вход в воронку, ему нельзя быть в двух тапах. */
  .nav{display:flex; gap:0; margin-left:auto}
  .nav a{display:none}
  .nav .navlink{
    background:var(--accent); color:#fff;
    padding:var(--s-8) var(--s-16); border-radius:var(--r-pill);
    font-size:var(--t-14);
  }
  .nav .navlink:hover{background:var(--accent); color:#fff}
  .hdr .btn-hdr{display:none}
  .burger{display:grid; margin-left:var(--s-8)}
}

/* ---------- Hero (тёмная секция) ---------- */
/* ВЕРХ: фото + тёплый прозрачный слой поверх.
   Фото кладём в /assets/hero.png — больше ничего менять не нужно.
   Если файла нет, остаётся ровный navy: верх не выглядит поломанным. */
.hero{
  position:relative;
  /* Полоса сверху, а не полный экран: высота задана содержимым плюс
     небольшие поля. Фото сидит в этой полосе и не раздувается. */
  padding:var(--s-24) 0 var(--s-32);
  min-height:380px;
  /* Блок с текстом и кнопкой стоит в правом нижнем углу полосы —
     правка владельца. Прижатие по вертикали делает flex-end. */
  display:flex; align-items:flex-end;
  color:var(--on-dark);
  background-color:var(--ink);
  background-image:url("/assets/hero.jpg");
  background-size:cover;
  background-position:50% 42%;
  background-repeat:no-repeat;
}
/* Вуаль тёплая, в оттенках референсов — синей прозрачности нет.
   Ровная по всему кадру: люди на фото по обоим краям, затемнять один
   край нельзя, закроет человека. */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(59,47,37,.86) 0%,
      rgba(52,42,33,.74) 42%,
      rgba(47,39,33,.86) 100%);
}
/* Содержимое верха уходит вправо: сам блок прижат к правому краю,
   текст внутри остаётся выключенным влево — так строки читаются ровно. */
.hero-in{
  position:relative; z-index:1; width:100%;
  max-width:none; margin:0;
  padding-left:var(--s-24); padding-right:var(--s-24);
  display:flex; justify-content:flex-end;
}
.hero-in > .hero-copy{max-width:640px; width:100%}
@media (max-width:640px){
  .hero-in{padding-left:var(--s-16); padding-right:var(--s-16)}
  /* На узком экране прижимать некуда — блок занимает всю ширину */
  .hero-in > .hero-copy{max-width:none}
}
@media (max-width:640px){
  /* На узком экране текста больше, фото уходит в подложку — держим контраст */
  .hero{background-position:60% 22%}
  .hero::before{
    background:linear-gradient(180deg, rgba(59,47,37,.86) 0%, rgba(52,42,33,.92) 60%, rgba(47,39,33,.95) 100%);
  }
}
.hero h1{color:#fff; max-width:36ch; font-size:clamp(21px,2.4vw,29px)}
.hero h1 em{font-style:normal; color:var(--accent-lift)}
.hero .lead{color:var(--on-dark-muted); max-width:64ch; font-size:15px; margin-top:var(--s-12)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s-12); margin-top:var(--s-16)}
.hero-meta{
  margin-top:var(--s-32); padding-top:var(--s-16);
  border-top:1.5px solid var(--on-dark-line);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:var(--s-24);
}
.hero-meta div b{display:block; font-family:var(--font-display); font-size:22px; color:var(--accent-lift)}
.hero-meta div span{font-size:var(--t-14); color:var(--on-dark-muted)}
@media (max-width:640px){ .hero{padding:var(--s-24) 0; min-height:300px} }

/* ---------- Секции ---------- */
.sec{padding:var(--s-32) 0}
.sec.tight{padding:var(--s-24) 0}
.sec.alt{
  position:relative;
  border-block:1.5px solid var(--border);
  background:var(--surface) url("/assets/ref2.jpg") 50% 42%/cover no-repeat;
}
/* Вуаль светлая: кадр читается как пространство, но текст остаётся контрастным */
.sec.alt::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(247,242,235,.90) 0%, rgba(243,237,228,.86) 50%, rgba(247,242,235,.92) 100%);
}
.sec.alt > .wrap{position:relative; z-index:1}
.sec.dark{
  position:relative;
  color:var(--on-dark);
  background:var(--ink) url("/assets/ref4.jpg") 50% 46%/cover no-repeat;
}
.sec.dark::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(47,39,33,.74) 0%, rgba(40,33,27,.82) 100%);
}
.sec.dark > .wrap{position:relative; z-index:1}
/* Карточки внутри фото-секции — стеклянные слои, чтобы читался объём */
.sec.dark .card{
  background:rgba(255,253,249,.07);
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(7px);
  box-shadow:none;
}
.sec.dark .card h3{color:#fff}
.sec.dark .card p,.sec.dark .card .hint{color:var(--on-dark-muted)}
.sec.dark .card.feature{background:rgba(47,39,33,.62); border-color:rgba(222,184,144,.34)}
/* Параллакс только на широких экранах: на мобильных fixed рвёт прокрутку */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .sec.dark,.ftr{background-attachment:fixed}
}
.sec.dark h2{color:#fff}
.sec.dark .lead,.sec.dark .muted{color:var(--on-dark-muted)}
@media (max-width:640px){ .sec{padding:var(--s-24) 0} }

.sec-head{max-width:66ch; margin-bottom:var(--s-16)}
.sec-head h2{margin-top:var(--s-8)}
.sec-head p{margin-top:var(--s-8)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center h2{text-align:center}

/* ---------- Колесо баланса и выбор сферы ---------- */
.wheelrow{display:grid; gap:var(--s-24); grid-template-columns:1fr; align-items:center}
@media (min-width:900px){ .wheelrow{grid-template-columns:1.05fr .95fr; gap:var(--s-32)} }

.wheelbox{min-width:0}
.wheel{width:100%; max-width:460px; height:auto; margin:0 auto; display:block; overflow:visible}
/* Кольца шкалы — тонкие, чтобы не спорили с секторами */
.wheel-rings circle{stroke:rgba(47,39,33,.10); stroke-width:1}
.wheel-scale text{font:600 9.5px var(--font-body); fill:var(--text-muted)}
.wheel-hub{fill:var(--surface); stroke:var(--border); stroke-width:1.5}
/* «Энергетическое» — длинное слово, в кружок втулки одной строкой не влезает
   наравне с остальными, поэтому оно мельче и стоит отдельной строкой */
.wheel-hub-e{font:700 12.5px var(--font-display); fill:var(--text)}
.wheel-hub-t{font:700 15px var(--font-display); fill:var(--text)}
.wheel-hub-s{font:700 7.5px var(--font-body); fill:var(--text-muted); letter-spacing:.12em; text-transform:uppercase}
.wheel-num{font:800 11px var(--font-body); fill:#fff}
.wheel-cap{font:600 11.5px var(--font-body); fill:var(--text)}
/* Ломаная результата: появляется, когда диагностика пройдена */
.wheel-value{fill:rgba(138,101,32,.16); stroke:var(--accent); stroke-width:2}

/* Наведение и выбор подсвечивают сектор — колесо и список связаны */
.wheel [data-sector]{transition:fill-opacity var(--d) var(--e)}
.wheel [data-sector].on{fill-opacity:.30}
.wheel [data-badge]{transition:r var(--d) var(--e)}
.wheel [data-badge].on{r:16}
.wheel [data-cap].on{font-weight:800}

.spheres{min-width:0}
.spheres h2{margin:var(--s-8) 0 6px}
.sphere-list{display:flex; flex-direction:column; gap:5px}
.sphere{
  display:flex; align-items:center; gap:10px;
  min-height:36px;                       /* строки низкие: без раздутых блоков */
  padding:5px 10px;
  background:var(--surface); color:var(--text);
  border-radius:10px;
  box-shadow:inset 0 0 0 1px var(--border);
  font-size:14.5px; font-weight:500;
  cursor:pointer;
  transition:box-shadow var(--d) var(--e), transform var(--d) var(--e);
}
.sphere:hover{transform:translateX(2px); box-shadow:inset 0 0 0 1px var(--text)}
.sphere:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--accent)}
/* Свой квадратик вместо системного — он один во всём проекте */
.sphere input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:15px; height:15px; margin:0;
  border-radius:4px; box-shadow:inset 0 0 0 1.5px var(--border);
  background:var(--surface); cursor:pointer;
}
.sphere input:checked{background:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent)}
.sphere input:checked::after{
  content:""; display:block; width:7px; height:3.5px; margin:4px auto 0;
  border-left:1.5px solid #fff; border-bottom:1.5px solid #fff;
  transform:rotate(-45deg);
}
.sphere-tools{display:flex; align-items:center; gap:var(--s-16); margin-top:10px}
.linkbtn{
  /* min-height, чтобы по ссылке можно было попасть пальцем:
     сам текст 15px высотой — этого мало */
  display:inline-flex; align-items:center; min-height:32px;
  background:none; border:0; padding:0; cursor:pointer;
  font:600 13px var(--font-body); color:var(--accent);
  text-decoration:underline; text-underline-offset:3px;
}
.linkbtn:hover{color:var(--text)}
/* Номер в цвете своего сектора — связка со колесом без подписей-дублей */
.sphere em{
  flex:0 0 auto; width:21px; height:21px; border-radius:50%;
  background:var(--c); color:#fff;
  display:grid; place-items:center;
  font-style:normal; font:800 11px var(--font-body);
}

/* ---------- Блок запуска диагностики ---------- */
/* ---------- Полоса запуска диагностики ----------
   Во всю ширину экрана и низкая: так зона перестаёт быть комком
   и не отъедает высоту страницы. Сверху бегущая строка, снизу ряд. */
.startband{
  background:var(--ink); color:var(--on-dark);
  border-block:1px solid rgba(255,255,255,.10);
}
.marquee{overflow:hidden; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.10)}
.marquee-track{
  display:flex; width:max-content; gap:72px; padding-left:72px;
  /* linear здесь осознанно: бегущая строка должна идти с ровной
     скоростью, любое ускорение читается как рывок. */
  animation:marquee 38s linear infinite;
}
/* Движение слева направо: лента стартует сдвинутой влево и едет вправо */
@keyframes marquee{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
.marquee span{
  font-family:var(--font-display); font-style:italic; font-weight:700;
  font-size:17px; letter-spacing:.01em; color:#fff; white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none; transform:none} }

.startrow{
  display:flex; align-items:center; gap:var(--s-24);
  padding-top:14px; padding-bottom:14px;
}
.startrow-txt{flex:1 1 auto; min-width:0}
.startrow h2{color:#fff; font-size:20px}
.startrow .hint{color:var(--on-dark-muted); margin-top:3px}
.startrow .btn{flex:0 0 auto}
/* Кнопка запуска и ссылка на глубокую версию колонкой: сразу видно, что
   быстрый прогон по умолчанию, а подробный — по желанию */
.startbtns{flex:0 0 auto; display:grid; justify-items:center; gap:4px}
.startbtns .linkbtn{color:var(--accent-lift)}
.startbtns .linkbtn:hover{color:#fff}
@media (max-width:640px){
  .startrow{flex-direction:column; align-items:flex-start; gap:var(--s-12)}
  .marquee span{font-size:15px}
  .startbtns{width:100%; justify-items:stretch}
  .startbtns .btn{width:100%}
  .startbtns .linkbtn{justify-content:center}
}

/* ---------- Карточки: разный вес, а не три близнеца ---------- */
.cards{display:grid; gap:var(--s-12); grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
/* Первая карточка шире — иерархия читается до чтения текста */
.cards.lead-first{grid-template-columns:1.35fr 1fr 1fr}
@media (max-width:900px){ .cards.lead-first{grid-template-columns:1fr} }

.card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-card);
  padding:var(--s-16);
  /* Парение: плотная тень в покое, а не только на наведении.
     Ближний слой даёт край, дальний — отрыв от фона. */
  box-shadow:0 2px 4px rgba(62,46,30,.10), 0 18px 38px rgba(62,46,30,.16);
  display:flex; flex-direction:column; gap:var(--s-12);
  transition:transform var(--d) var(--e), box-shadow var(--d) var(--e);
}
.card:hover{transform:translateY(-6px); box-shadow:0 3px 6px rgba(62,46,30,.12), 0 28px 56px rgba(62,46,30,.22)}
/* Название формата подано как премиальное: крупнее, засечки, чуть
   плотнее набор. Это главное, что читают в карточке. */
.card h3{margin-top:var(--s-4); font-size:21px; letter-spacing:-.02em; line-height:1.2}
.card p{color:var(--text-muted); font-size:var(--t-16)}
.card .price{font-family:var(--font-display); font-size:var(--t-32); color:var(--text)}
.card .price small{font-family:var(--font-body); font-size:var(--t-14); font-weight:700; color:var(--text-muted)}
.card .btn{margin-top:auto}
.card.feature{background:var(--ink); color:var(--on-dark); border-color:transparent}
.card.feature h3{color:#fff}
.card.feature p{color:var(--on-dark-muted)}

.tag{
  align-self:flex-start;
  font-size:var(--t-12); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:var(--s-4) var(--s-12); border-radius:var(--r-pill);
  background:rgba(138,101,32,.12); color:var(--accent);
}
.card.feature .tag{background:rgba(222,184,144,.20); color:var(--accent-lift)}

/* Нумерованный список шагов — рисуем числа, а не эмодзи */
.steps{display:grid; gap:var(--s-16); counter-reset:step; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.step{padding-top:var(--s-16); border-top:2px solid var(--border); counter-increment:step}
.step::before{
  content:counter(step,decimal-leading-zero);
  display:block; margin-bottom:var(--s-8);
  font-family:var(--font-display); font-size:var(--t-24); color:var(--accent);
}
.step h3{font-size:16px; margin-bottom:6px}
.step p{color:var(--text-muted); font-size:var(--t-14)}
.sec.dark .step{border-top-color:var(--on-dark-line)}
.sec.dark .step p{color:var(--on-dark-muted)}

/* Список с галочкой, нарисованной CSS */
.checks{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-12)}
.checks li{position:relative; padding-left:30px; color:var(--text-muted); font-size:var(--t-16)}
.checks li::before{
  content:""; position:absolute; left:0; top:7px;
  width:9px; height:5px;
  border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}
.sec.dark .checks li{color:var(--on-dark-muted)}

/* ---------- Прайс в карточке услуги ----------
   Строка = услуга и цена. Одна линия, без абзацев: имя слева, цена
   справа, между ними тонкий пунктир. Карточки в ряду равной высоты,
   поэтому кнопка прижата вниз через margin-top:auto у .card .btn. */
.cards-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); align-items:stretch}
.pl-sub{color:var(--text-muted); font-size:13.5px; margin-bottom:2px}
.pl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.pl li{
  display:flex; align-items:baseline; gap:8px;
  padding:7px 0;
  border-bottom:1px dashed var(--border);
  font-size:14px; line-height:1.3;
}
.pl li:last-child{border-bottom:0}
.pl-n{flex:1 1 auto; min-width:0}
/* Пояснение к услуге — два-три слова, не абзац */
.pl-n i{font-style:normal; color:var(--text-muted); font-size:12.5px; margin-left:4px}
.pl-p{flex:0 0 auto; white-space:nowrap; font-variant-numeric:tabular-nums}
.pl-p b{font-weight:800; color:var(--text)}
/* Старая цена рядом с новой, зачёркнутая и приглушённая */
.pl-p s{color:var(--text-muted); font-weight:600; font-size:12.5px; margin-right:4px}
/* min-height, чтобы по ссылке в прайсе можно было попасть пальцем:
   сам текст 16px высотой — этого мало */
.pl-link{
  display:inline-flex; align-items:center; min-height:32px;
  color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:3px;
}
.pl-link:hover{color:var(--text)}

/* ---------- Гармонизаторы ---------- */
/* Только для скринридера. Заголовок страницы обязан быть в разметке,
   но на экране его несёт сам кадр — дублировать надписью нельзя. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Верх раздела — кадр владельца. Надпись, впечатанная в сам снимок,
   расплывалась и тонула в фоне — правка владельца. Поэтому кадр опущен
   ниже, чтобы печёная надпись ушла за рамку полосы, а заголовок набран
   живым текстом: он всегда чёткий и яркий, с тонкой тенью для границы.
   Кнопки — ровно по центру полосы, под заголовком. */
.hero-garm{
  min-height:340px;
  background-image:url("/assets/garm-hero.jpg");
  background-position:50% 100%;
  display:flex; align-items:center;
}
.hero-garm::before{
  background:linear-gradient(180deg,
    rgba(47,39,33,.52) 0%,
    rgba(44,36,29,.46) 44%,
    rgba(40,33,27,.72) 100%);
}
.hero-garm .hero-in{justify-content:center}
.hero-garm .hero-copy{max-width:none; text-align:center}
.hero-garm h1.garm-title{
  position:static; width:auto; height:auto; margin:0;
  overflow:visible; clip:auto; clip-path:none; white-space:normal;
  max-width:none;
  font-size:clamp(30px,4.4vw,52px); line-height:1.08; color:#fff;
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(30,24,18,.65), 0 6px 24px rgba(30,24,18,.45);
}
.hero-garm .hero-cta{justify-content:center; margin-top:var(--s-24)}
@media (max-width:640px){
  .hero-garm{min-height:250px; background-position:56% 88%}
  .hero-garm::before{
    background:linear-gradient(180deg, rgba(47,39,33,.60) 0%, rgba(44,36,29,.56) 44%, rgba(40,33,27,.80) 100%);
  }
}

/* ---------- Тест-драйв: пояснение светлым блоком ---------- */
/* Определения парами: слева термин, под ним расшифровка. Две колонки на
   широком экране, поэтому четыре пункта укладываются в две строки. */
/* Минимум 420px даёт ровно две колонки на широком экране: четыре пункта
   ложатся 2 + 2, а не 3 + 1 с дырой справа. */
.deflist{margin:var(--s-8) 0 0; display:grid; gap:var(--s-16) var(--s-32);
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.deflist dt{font-weight:800; font-size:14.5px; color:var(--text); line-height:1.3}
.deflist dd{margin:3px 0 0; font-size:13.5px; line-height:1.5; color:var(--text-muted)}
/* Цена в шапке пакета: крупная, рядом с названием, без отдельной строки */
.pack-top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-12); flex-wrap:wrap}
.pack-p{font-family:var(--font-display); font-size:21px; color:var(--accent); white-space:nowrap}

/* ---------- Условия и цены: микроблоки ---------- */
/* Владелец: текст расплывается, блоки должны чётко отличаться. Поэтому
   тонкое чёрное начертание на белом и выраженная многослойная тень —
   блок читается как отдельный лист, лежащий над страницей. */
.mbs{display:grid; gap:var(--s-16); grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.mb{
  background:#fffdfa; border:1px solid var(--border); border-radius:14px;
  padding:var(--s-16) var(--s-16) 14px;
  box-shadow:0 2px 4px rgba(40,30,20,.12), 0 14px 26px rgba(40,30,20,.18), 0 34px 64px rgba(40,30,20,.14);
  transition:transform var(--d) var(--e), box-shadow var(--d) var(--e);
}
.mb:hover{
  transform:translateY(-7px);
  box-shadow:0 3px 6px rgba(40,30,20,.14), 0 24px 44px rgba(40,30,20,.24), 0 52px 92px rgba(40,30,20,.18);
}
.mb h3{font-size:16px; font-weight:700; color:#14100d; letter-spacing:-.01em}
.mb p,.mb li,.mb span{color:#14100d; font-weight:400; font-size:13.5px; line-height:1.5}
.mb-sub{color:#5d5147 !important; margin-top:2px}
.mb-list{list-style:none; margin:10px 0 0; padding:0}
.mrow{
  display:flex; gap:10px; align-items:baseline; justify-content:space-between;
  padding:6px 0; border-bottom:1px dashed var(--border);
}
.mb-list li:last-child .mrow,.mrow.last{border-bottom:0}
.mrow b{font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
/* Итог пакета: слева перечёркнутая сумма по отдельности, справа цена */
.msum{
  margin-top:12px; padding-top:11px; border-top:1.5px solid var(--border);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.msum s{color:#6b5b4b; font-weight:400; font-size:13.5px}
.msum b{font-family:var(--font-display); font-size:21px; font-weight:700; color:var(--accent); white-space:nowrap}
.mnote{margin-top:10px; font-size:12.5px !important; color:#5d5147 !important; line-height:1.45}

/* ---------- Франшиза: калькулятор премий ---------- */
.headrow{display:grid; gap:var(--s-24); align-items:start; grid-template-columns:1fr; margin-bottom:var(--s-16)}
@media (min-width:900px){ .headrow{grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:var(--s-32)} }
.calc .field label{display:block; font-size:13px; font-weight:800; margin-bottom:6px}
.calc input{
  width:100%; min-height:44px; padding:8px 14px;
  border:1.5px solid var(--border); border-radius:12px;
  background:var(--surface); color:var(--text);
  font:inherit; font-weight:700; font-size:16px;
}
.calc input:focus{outline:3px solid var(--accent); outline-offset:1px}
.calc-out{margin-top:10px}

/* ---------- Франшиза: капсулы уровней партнёрства ---------- */
/* Левая к левому краю, правая к правому. Цвета приглушённые металлические:
   платина — тёплое серебро, изумруд — светлый и неяркий. Парение как у
   премиальных кнопок: контур волосяной, тень глубокая. */
.tiers2{display:flex; justify-content:space-between; gap:var(--s-12); flex-wrap:wrap}
.btn-plat{
  background:linear-gradient(160deg,#eceae6,#cfccc5);
  color:#3a362f;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 2px 4px rgba(62,58,50,.14), 0 14px 30px rgba(62,58,50,.28);
}
.btn-plat:hover{box-shadow:inset 0 0 0 1px #fff, 0 4px 8px rgba(62,58,50,.16), 0 22px 44px rgba(62,58,50,.34)}
.btn-emer{
  background:linear-gradient(160deg,#dcebe1,#accfba);
  color:#274536;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65), 0 2px 4px rgba(39,69,54,.16), 0 14px 30px rgba(39,69,54,.26);
}
.btn-emer:hover{box-shadow:inset 0 0 0 1px #fff, 0 4px 8px rgba(39,69,54,.18), 0 22px 44px rgba(39,69,54,.32)}
@media (max-width:640px){ .tiers2{flex-direction:column} .tiers2 .btn{width:100%} }

/* Поле-ловушка: не видно человеку, но бот его заполняет и выдаёт себя */
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* ---------- Рекомендация в результате диагностики ---------- */
.res-rec{
  margin-top:var(--s-16); padding:var(--s-16);
  background:rgba(222,184,144,.18);
  border:1.5px solid var(--accent); border-radius:14px;
  display:grid; gap:10px; justify-items:start;
}
.res-rec-t{font-size:var(--t-12); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.res-rec p{color:#14100d; font-size:14.5px; line-height:1.55}
.res-rec-p{font-weight:800; white-space:nowrap}

/* Следующий шаг после диагностики: разбор у Дмитрия, ниже — глубокая версия */
.res-next{
  margin-top:var(--s-12); padding:var(--s-16);
  background:var(--surface);
  border:1.5px solid var(--border); border-radius:14px;
  display:grid; gap:10px; justify-items:start;
}
.res-next p{color:#14100d; font-size:14.5px; line-height:1.55}
.res-next-d{margin-top:6px; padding-top:12px; border-top:1px solid var(--border); width:100%; font-size:13.5px}

/* ---------- Контакты: личка и каналы ---------- */
/* Три способа написать лично — крупные строки, дальше каналы помельче.
   Обе секции идут подряд, без разброса по странице. */
.socs{display:grid; gap:var(--s-12); grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.soc{
  display:flex; align-items:center; gap:var(--s-12);
  min-height:62px; padding:12px var(--s-16);
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-card); box-shadow:var(--sh-1);
  transition:transform var(--d) var(--e), box-shadow var(--d) var(--e);
}
.soc:hover{transform:translateY(-3px); box-shadow:0 3px 6px rgba(62,46,30,.12), 0 20px 40px rgba(62,46,30,.18)}
.soc-t{min-width:0; display:grid; line-height:1.25}
.soc-t b{font-size:var(--t-16); font-weight:800}
.soc-t span{font-size:13px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Каналы — тот же ряд, но компактнее: подписка вторична по отношению к личке */
.chans{display:grid; gap:var(--s-8); grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.chan{
  display:flex; align-items:center; gap:10px;
  min-height:46px; padding:8px var(--s-12);
  border:1.5px solid var(--border); border-radius:12px;
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  font-size:14px; font-weight:700;
  transition:border-color var(--d) var(--e), background-color var(--d) var(--e);
}
.chan:hover{border-color:var(--text); background:var(--surface)}
.chan span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chan i{font-style:normal; font-weight:600; color:var(--text-muted); font-size:12.5px}

/* Значки нарисованы SVG, а не эмодзи: у ВК, Telegram и MAX эмодзи нет,
   а суррогат вроде «самолётика» читается как самолёт, а не как мессенджер.
   Цвета фирменные — это метки брендов, а не палитра сайта. */
.ico{flex:0 0 auto; display:block; border-radius:9px}
.soc .ico{width:34px; height:34px}
.chan .ico{width:24px; height:24px; border-radius:7px}
/* У MAX буквенный знак, и рисуется он через content: тогда «M» не попадает
   в текст ссылки и подпись не читается как «MAX MAX основной». */
.ico-max{
  background:var(--accent); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-body); font-weight:800;
}
.soc .ico-max{font-size:16px}
.chan .ico-max{font-size:12px}
.ico-max::before{content:"M"}

/* ---------- Фото по нижним углам секции ---------- */
/* Небольшой кадр в углу, не растянутый: своя пропорция, ширина ограничена.
   Маска гасит его к верхнему и внутреннему краю, поэтому снимок читается
   как фон и не спорит с формой. overflow:hidden держит его внутри секции —
   за границы блока он не выходит. */
.sec.corners{overflow:hidden}
.corner{
  position:absolute; bottom:0; z-index:0;
  width:min(330px, 36vw); aspect-ratio:1.55;
  background-repeat:no-repeat; background-size:114% auto; background-position:50% 24%;
  opacity:.55; pointer-events:none;
}
/* Гасим ровно два края, как просил владелец: верхний и тот, что смотрит
   внутрь, на форму. Два линейных градиента пересекаются, поэтому нижний
   внешний угол остаётся плотным и люди на снимке читаются.
   Направление внутреннего края у левого и правого кадра зеркальное,
   поэтому и градиенты разные. */
.corner.l{
  left:0;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 20%),
    linear-gradient(to right, #000 46%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 20%),
    linear-gradient(to right, #000 46%, transparent 100%);
  mask-composite:intersect;
}
.corner.r{
  right:0;
  /* Свой кадр и своя пропорция: на нём двое за столом, снимок почти
     квадратный. Не увеличиваю — ширина та же, показывается целиком. */
  aspect-ratio:1.176;
  background-size:cover; background-position:50% 50%;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 20%),
    linear-gradient(to left, #000 46%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 20%),
    linear-gradient(to left, #000 46%, transparent 100%);
  mask-composite:intersect;
}
@media (max-width:900px){
  /* На узком экране форма занимает всю ширину — кадры уводим глубже в фон */
  .corner{width:42vw; opacity:.3}
}

/* ---------- Подробнее об услугах: горизонтальные мини-статьи ---------- */
/* Ряд, а не карточка: слева название, справа текст, между рядами тонкая
   линия. Так блок читается сверху вниз одним движением и не растёт в
   газетную колонку. */
.arts{display:grid}
.art{
  display:grid; gap:var(--s-12) var(--s-32);
  grid-template-columns:1fr;
  padding:var(--s-24) 0;
  /* Правка владельца: тёплая бежевая линия сливалась с фоном, границы
     блоков расплывались. Тонкая, но ярко-чёрная — блоки видно сразу. */
  border-top:1px solid #14100d;
  /* Липкая шапка не должна накрывать заголовок при переходе по якорю */
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.art:first-child{border-top:0; padding-top:var(--s-12)}
@media (min-width:820px){ .art{grid-template-columns:minmax(0,260px) minmax(0,1fr)} }

.art-head{min-width:0}
.art-tag{
  font-size:var(--t-12); font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted);
}
.art-head h3{margin-top:6px; font-size:21px; line-height:1.2; letter-spacing:-.02em}
/* Эмодзи — метка раздела, не смысловая иконка: скринридеру она не нужна */
.art-em{margin-right:8px; font-size:19px}

.art-body{min-width:0; max-width:70ch; display:grid; gap:var(--s-8); align-content:start}
.art-gist{font-weight:800; color:var(--text); font-size:var(--t-16); line-height:1.45}
/* Тоже правка владельца: тауп расплывался, второстепенный текст читаем
   только ярко-чёрным. Иерархия остаётся за весом шрифта, не за цветом. */
.art-body p{color:#14100d; font-size:14.5px; line-height:1.55}
.art-lbl{color:var(--text); font-weight:800}
.art-price{
  margin-top:2px; padding:7px var(--s-12);
  background:rgba(222,184,144,.20);
  border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;
  color:var(--text) !important; font-weight:800; font-size:14.5px;
}
.art-price s{color:var(--text-muted); font-weight:600; margin-right:6px}
.art-todo{color:var(--accent) !important; font-style:italic}
/* Кнопка в мини-статье тонкая: главный призыв наверху, здесь он не спорит */
.btn-thin{
  justify-self:start; min-height:32px; padding:5px var(--s-16);
  font-weight:600; font-size:14.5px;
  background:transparent; color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border), 0 4px 12px rgba(62,46,30,.08);
}
.btn-thin:hover{box-shadow:inset 0 0 0 1px var(--text), 0 8px 18px rgba(62,46,30,.14)}
/* Название услуги в верхнем прайсе — ссылка вниз, на её мини-статью.
   Сама строка 17px высотой, пальцем не попасть: вертикальные поля растят
   область нажатия до 33px, а отрицательные margin не дают строке вырасти. */
.pl-jump{
  display:inline-block; padding:8px 0; margin:-8px 0;
  border-bottom:1px dashed var(--border);
}
/* Правка владельца: было непонятно, что строка нажимается. Ссылка
   растягивается псевдоэлементом на всю строку прайса, а строка на
   наведении получает светлую прямоугольную подложку чуть шире себя. */
.pl li{position:relative; border-radius:8px; transition:background-color var(--d) var(--e)}
.pl-jump::after{content:""; position:absolute; inset:0; border-radius:8px}
.pl li:has(.pl-jump):hover{
  background:rgba(222,184,144,.30);
  box-shadow:0 0 0 6px rgba(222,184,144,.30);
}
.pl li:has(.pl-jump):hover .pl-jump{color:var(--accent); border-bottom-color:var(--accent)}
/* Ссылка «смотреть →» в той же строке остаётся нажимаемой поверх растяжки */
.pl-p a{position:relative; z-index:1}
.pl-jump:hover{border-bottom-color:var(--accent); color:var(--accent)}

/* ---------- Кейсы: кадр офиса в верхней полосе ---------- */
/* Снимок широкий, 3:1 — ложится в полосу почти целиком. Текст верха стоит
   справа, поэтому вуаль плотная справа и сходит влево, где стоят люди. */
.hero-ks{
  background-image:url("/assets/keysy-hero.jpg");
  background-position:50% 45%;
}
.hero-ks::before{
  background:
    linear-gradient(90deg, rgba(47,39,33,.18) 0%, rgba(47,39,33,.34) 34%, rgba(44,36,29,.76) 64%, rgba(40,33,27,.86) 100%),
    linear-gradient(180deg, rgba(47,39,33,.12) 0%, rgba(47,39,33,0) 42%, rgba(40,33,27,.44) 100%);
}
@media (max-width:900px){
  /* Узкий экран: текст во всю ширину, прижимать некуда — вуаль вертикальная */
  .hero-ks{background-position:52% 46%}
  .hero-ks::before{
    background:linear-gradient(180deg, rgba(47,39,33,.52) 0%, rgba(44,36,29,.68) 42%, rgba(40,33,27,.90) 100%);
  }
}

/* ---------- Франшиза: кадр вручения сертификата ---------- */
/* Люди стоят по центру кадра, а текст верха прижат вправо. Поэтому вуаль
   здесь не сверху вниз, как на других страницах, а слева направо: лица
   остаются открытыми, под текстом плотно — он читается. */
.hero-fr{
  background-image:url("/assets/franchise-hero.jpg");
  background-position:50% 22%;
  /* Текст стоит в самом низу полосы, поэтому снизу поля почти нет */
  padding:64px 0 18px;
}
/* Блок текста прижат к левому краю экрана вплотную — правка владельца.
   Поэтому и вуаль перевёрнута: плотно слева, под текстом, и сходит вправо,
   где на кадре лица. */
.hero-fr .hero-in{justify-content:flex-start; padding-left:0}
.hero-fr .hero-copy{max-width:720px}
/* Шире, чем общие 36ch: иначе заголовок ломается на три строки */
.hero-fr h1{max-width:48ch}
.hero-fr .lead{max-width:66ch}
.hero-fr::before{
  background:
    linear-gradient(90deg, rgba(40,33,27,.84) 0%, rgba(44,36,29,.72) 40%, rgba(47,39,33,.28) 74%, rgba(47,39,33,.14) 100%),
    linear-gradient(180deg, rgba(47,39,33,.10) 0%, rgba(47,39,33,0) 40%, rgba(40,33,27,.46) 100%);
}
@media (max-width:900px){
  /* Узкий экран: текст занимает всю ширину, прижимать его некуда —
     возвращаемся к вертикальной вуали, иначе справа текст на светлом. */
  .hero-fr{background-position:46% 24%; padding:40px 0 18px}
  .hero-fr .hero-in{padding-left:var(--s-16)}
  .hero-fr::before{
    background:linear-gradient(180deg, rgba(47,39,33,.42) 0%, rgba(44,36,29,.62) 42%, rgba(40,33,27,.90) 100%);
  }
}

/* Кадр с карточками у левого края верхней полосы. Без увеличения: блок
   держит родную пропорцию снимка (0.8) при высоте полосы, поэтому кадр
   ложится целиком, ничего не обрезая. Верхний и правый края растворяются
   маской, левый и нижний прижаты к краям полосы. */
.hero-garm .hero-left{
  position:absolute; left:0; bottom:0; z-index:0;
  height:100%; aspect-ratio:0.8;
  background:url("/assets/garm-left.jpg?v=1") 50% 50%/cover no-repeat;
  pointer-events:none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 22%),
    linear-gradient(to right, #000 52%, transparent 98%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 22%),
    linear-gradient(to right, #000 52%, transparent 98%);
  mask-composite:intersect;
}
@media (max-width:640px){
  /* На телефоне слева стоит заголовок с кнопками — кадр им мешает, прячем */
  .hero-garm .hero-left{display:none}
}

/* Два невысоких блока: в каждом по две сферы колеса. Строка = позиция,
   поэтому блок расходится вширь, а не растёт в высоту. */
/* Сфер семь, они делятся 4 + 3. Блоки идут друг под другом во всю ширину:
   так каждая сфера получает широкую колонку, подписи не переносятся, и оба
   блока остаются низкими — высоту выигрываем за счёт ширины. */
.gg{display:grid; gap:var(--s-12); grid-template-columns:1fr}
.gcard{
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-card); padding:var(--s-16);
  box-shadow:var(--sh-1);
  display:grid; gap:var(--s-16);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
}
/* Во втором блоке сфер три, а не четыре: без своего минимума auto-fit
   отводит четыре колонки и справа висит пустое место. */
.gcard.three{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.ggroup{min-width:0}
.ggroup h3{
  font-family:var(--font-body); font-size:12px; font-weight:800;
  letter-spacing:.10em; text-transform:uppercase; color:var(--accent);
}
.glist{margin:var(--s-8) 0 0; padding:0; list-style:none}
.glist li{
  position:relative; padding:3px 0 3px 13px;
  /* Правка владельца: тауп расплывался — позиции читаются только чётким
     чёрным. Заголовок группы остаётся латунным, он и держит иерархию. */
  font-size:13.5px; line-height:1.4; color:#14100d;
}
.glist li::before{
  content:""; position:absolute; left:0; top:10px;
  width:5px; height:5px; border-radius:50%; background:var(--accent-lift);
}

/* Карточка карусели с картинкой: пропорция кадра, а не 9/16 как у видео */
.gph{
  /* margin обнуляем: у figure он по умолчанию 16px/40px и разносит ленту.
     align-self не даёт flex-контейнеру растянуть карточку по высоте соседей. */
  margin:0; align-self:flex-start;
  flex:0 0 auto; width:288px; scroll-snap-align:start;
  border-radius:var(--r-card); overflow:hidden;
  background:var(--surface); border:1.5px solid var(--border);
  box-shadow:0 2px 4px rgba(62,46,30,.10), 0 18px 38px rgba(62,46,30,.16);
  transition:transform var(--d) var(--e), box-shadow var(--d) var(--e);
}
.gph:hover{transform:translateY(-6px); box-shadow:0 3px 6px rgba(62,46,30,.12), 0 28px 56px rgba(62,46,30,.22)}
/* height:auto обязателен: без него атрибут height из разметки перебивает
   aspect-ratio и карточка вытягивается в портрет. */
.gph img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
@media (max-width:640px){ .gph{width:232px} }

/* Единственный «громкий» блок раздела — он и продаёт */
.tdrive{
  background:var(--ink); color:var(--on-dark);
  border:1.5px solid rgba(222,184,144,.34);
  border-radius:var(--r-card); padding:var(--s-24);
  box-shadow:var(--sh-1);
  display:grid; gap:var(--s-16); align-items:center; grid-template-columns:1fr;
}
@media (min-width:820px){ .tdrive{grid-template-columns:1.15fr .85fr; gap:var(--s-32)} }
.tdrive h2{color:#fff}
.tdrive .eyebrow{color:var(--accent-lift)}
.tdrive .eyebrow::before{background:var(--accent-lift)}
.tdrive .hint{color:var(--on-dark-muted); margin-top:var(--s-8)}
.tdrive .pl li{border-bottom-color:var(--on-dark-line)}
.tdrive .pl-n{color:var(--on-dark)}
.tdrive .pl-p b{color:var(--accent-lift)}
.tdrive .btn{margin-top:var(--s-12)}

/* ---------- Карусель отзывов ---------- */
.carousel{position:relative}
.car-track{
  display:flex; gap:var(--s-12);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 2px var(--s-12);
  scrollbar-width:thin;
}
.car-track::-webkit-scrollbar{height:6px}
.car-track::-webkit-scrollbar-thumb{background:var(--border); border-radius:999px}
.rev{
  position:relative; flex:0 0 auto;
  width:232px; aspect-ratio:9/16;
  scroll-snap-align:start;
  border-radius:var(--r-card); overflow:hidden;
  background:linear-gradient(160deg, #4a3b2d, #2f2721);
  box-shadow:0 2px 4px rgba(62,46,30,.10), 0 18px 38px rgba(62,46,30,.16);
  transition:transform var(--d) var(--e), box-shadow var(--d) var(--e);
}
.rev:hover{transform:translateY(-6px); box-shadow:0 3px 6px rgba(62,46,30,.12), 0 28px 56px rgba(62,46,30,.22)}
/* Кнопка воспроизведения занимает всю карточку: попасть невозможно не попасть */
/* Кадр из ролика: видно, кто говорит, ещё до нажатия.
   Если Drive превью не отдал, картинка убирается скриптом и остаётся
   тёплая подложка — карточка не выглядит поломанной. */
.rev-poster{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92);
}
.rev-play{
  position:absolute; inset:0; z-index:2;
  border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
/* Треугольник нарисован CSS, а не картинкой и не эмодзи */
.rev-play i{
  width:52px; height:52px; border-radius:50%;
  background:rgba(253,250,245,.92);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:grid; place-items:center;
  transition:transform var(--d) var(--e), background-color var(--d) var(--e);
}
.rev-play i::after{
  content:""; margin-left:4px;
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--accent);
}
.rev-play:hover i{transform:scale(1.08); background:#fff}
.rev-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:var(--s-16) var(--s-12) var(--s-12);
  background:linear-gradient(to top, rgba(30,24,18,.92), rgba(30,24,18,0));
  color:#fff;
}
.rev-meta b{display:block; font-family:var(--font-display); font-size:15px; line-height:1.2}
.rev-meta span{display:block; margin-top:3px; font-size:11.5px; color:rgba(255,255,255,.72); line-height:1.3}
.rev iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3}
.rev.playing .rev-meta{display:none}
.rev-fallback{
  position:absolute; inset:auto 0 0 0; z-index:4;
  padding:10px; text-align:center; color:#fff; font-weight:700; font-size:13px;
  background:rgba(30,24,18,.85);
}
/* Стрелки: за пределами полосы, чтобы не накрывать карточки */
.car-arw{
  position:absolute; top:calc(50% - 20px); z-index:4;
  width:38px; height:38px; border-radius:50%;
  border:0; box-shadow:inset 0 0 0 1px var(--border), 0 6px 16px rgba(62,46,30,.16);
  background:var(--surface); color:var(--text);
  font-size:22px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.car-arw:hover{box-shadow:inset 0 0 0 1px var(--text), 0 10px 22px rgba(62,46,30,.22)}
.car-arw.prev{left:-14px}
.car-arw.next{right:-14px}
.car-arw[disabled]{opacity:.35; cursor:default}
@media (max-width:640px){
  .rev{width:196px}
  /* На телефоне листают пальцем, стрелки только мешают */
  .car-arw{display:none}
}

/* ---------- Кейс ---------- */
.case{
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-card); padding:var(--s-16);
  box-shadow:var(--sh-1);
  display:grid; gap:var(--s-16); grid-template-columns:1fr;
}
.case + .case{margin-top:var(--s-16)}
@media (min-width:780px){ .case{grid-template-columns:1fr 1fr} }
.case .ba{display:grid; gap:var(--s-16)}
.case .ba div{padding:var(--s-16); border-radius:12px; background:var(--bg); border:1.5px solid var(--border)}
.case .ba b{display:block; font-size:var(--t-12); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--s-4)}
.case .ba div.after{background:rgba(138,101,32,.07); border-color:rgba(138,101,32,.34)}
.case .ba div.after b{color:var(--accent)}

/* ---------- Форма ---------- */
.form{display:grid; gap:var(--s-16)}
.field label{display:block; font-size:var(--t-14); font-weight:700; margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%; min-height:48px;
  padding:var(--s-12) var(--s-16);
  background:var(--surface); color:var(--text);
  border:1.5px solid var(--border); border-radius:12px;
  font-family:inherit; font-size:var(--t-16); font-weight:600;
}
.field textarea{min-height:120px; resize:vertical; font-weight:500}
.field input::placeholder,.field textarea::placeholder{color:#a3927e}
.hint{font-size:var(--t-12); color:var(--text-muted)}
.two{display:grid; gap:var(--s-16); grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}

/* Состояния формы: успех и ошибка существуют, а не «должны быть» */
.note{padding:var(--s-12) var(--s-16); border-radius:12px; font-size:var(--t-14); font-weight:700}
.note.ok{background:rgba(31,122,66,.1); color:#1a6338}
.note.err{background:rgba(192,57,43,.1); color:#a3271b}
[hidden]{display:none !important}

/* ---------- Подвал: эмблема по центру, как на референсе ---------- */
/* НИЗ: одна строка — копирайт и меню. Эмблема убрана, трёхэтажности нет. */
.ftr{
  position:relative;
  color:var(--on-dark-muted);
  padding:var(--s-16) 0;
  background:var(--ink) url("/assets/ref3.jpg") 50% 70%/cover no-repeat;
}
.ftr::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(59,47,37,.93) 0%, rgba(48,38,29,.96) 100%);
}
.ftr > .wrap{position:relative; z-index:1}
.ftr-row{
  padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-16) var(--s-24);
  font-size:var(--t-14);
}
.ftr-nav{display:flex; flex-wrap:wrap; gap:var(--s-8) var(--s-16); margin-left:auto}
.ftr-nav a{min-height:44px; display:inline-flex; align-items:center; font-weight:700; color:var(--on-dark-muted)}
.ftr-nav a:hover{color:#fff}
/* На мобильном подвальное меню скрыто: оно дублирует бургер и только
   гонит высоту вниз. Остаётся одна строка копирайта. */
@media (max-width:640px){ .ftr-nav{display:none} }


/* ---------- Модалка квиза ---------- */
.modal{position:fixed; inset:0; z-index:70; visibility:hidden}
.modal[data-open="true"]{visibility:visible}
.modal-back{position:absolute; inset:0; background:rgba(47,39,33,.66); opacity:0; transition:opacity var(--d) var(--e)}
.modal[data-open="true"] .modal-back{opacity:1}
.modal-box{
  position:absolute; left:50%; top:50%;
  width:min(620px,calc(100vw - 32px));
  max-height:min(88vh,780px);
  transform:translate(-50%,-50%) scale(.97);
  opacity:0;
  background:var(--surface); border-radius:var(--r-card);
  box-shadow:var(--sh-2);
  display:flex; flex-direction:column;
  transition:transform var(--d-slow) var(--e), opacity var(--d-slow) var(--e);
}
.modal[data-open="true"] .modal-box{transform:translate(-50%,-50%) scale(1); opacity:1}
.modal-top{
  padding:var(--s-24) var(--s-24) var(--s-16);
  border-bottom:1.5px solid var(--border);
  display:flex; align-items:flex-start; gap:var(--s-16);
}
.modal-top .eyebrow{flex:1 1 auto}
.modal-close{
  flex:0 0 auto; width:44px; height:44px;
  border:1.5px solid var(--border); border-radius:12px;
  background:var(--surface); color:var(--text-muted);
  font-size:var(--t-20); cursor:pointer; line-height:1;
}
.modal-close:hover{border-color:var(--text); color:var(--text)}
.modal-body{padding:var(--s-24); overflow-y:auto; -webkit-overflow-scrolling:touch}
.modal-foot{
  padding:var(--s-16) var(--s-24) var(--s-24);
  border-top:1.5px solid var(--border);
  display:flex; align-items:center; gap:var(--s-12);
}

.bar{height:5px; border-radius:var(--r-pill); background:var(--border); overflow:hidden; margin-top:var(--s-12)}
.bar i{display:block; height:100%; width:0; background:var(--accent); border-radius:var(--r-pill); transition:width var(--d-slow) var(--e)}
.qcount{font-size:var(--t-12); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted)}

.q h3{font-size:17px; line-height:1.3; margin-bottom:var(--s-12)}
/* Варианты: компактно и в два столбца — не детский сад с высокими строками */
.opts{display:grid; gap:6px}
@media (min-width:560px){ .opts{grid-template-columns:1fr 1fr} }
.opt{
  display:flex; align-items:flex-start; gap:9px;
  /* 44px — палец. Короткая строка в одну линию иначе давала 34px и
     промахи на телефоне. */
  width:100%; min-height:44px;
  padding:11px 10px;
  text-align:left;
  background:var(--bg); color:var(--text);
  border:0; border-radius:9px;
  box-shadow:inset 0 0 0 1px var(--border);
  font-family:inherit; font-size:14px; font-weight:500; line-height:1.35;
  cursor:pointer;
  transition:box-shadow var(--d) var(--e), background-color var(--d) var(--e);
}
.opt:hover{box-shadow:inset 0 0 0 1px var(--text)}
.opt[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--accent); background:rgba(138,101,32,.07)}
/* Квадратик мультивыбора: отмечать можно несколько */
.opt i{
  flex:0 0 auto; width:14px; height:14px; margin-top:2px;
  border-radius:4px; box-shadow:inset 0 0 0 1.5px var(--border); background:var(--surface);
}
.opt[aria-pressed="true"] i{background:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent)}
.opt[aria-pressed="true"] i::after{
  content:""; display:block; width:6px; height:3px; margin:3.5px auto 0;
  border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(-45deg);
}

/* Результат: резюме-диагноз, разбор по сферам и колесо */
.res-diag{font-size:14.5px; line-height:1.5; margin-bottom:var(--s-16)}
.res-list{display:flex; flex-direction:column; gap:10px; margin-bottom:var(--s-16)}
.res-row{padding-bottom:8px; border-bottom:1px solid var(--border)}
.res-row:last-child{border-bottom:0}
.res-row-top{display:flex; justify-content:space-between; gap:var(--s-12); font-size:13.5px; font-weight:700}
.res-row-top span:last-child{font-variant-numeric:tabular-nums; color:var(--text-muted)}
.res-row .bar{margin-top:5px; height:4px}
.res-row.low .res-row-top span:last-child{color:#a3271b}
.res-row-note{margin-top:5px; font-size:12.5px; line-height:1.4; color:var(--text-muted)}
.res-wheel{margin-top:var(--s-16); padding-top:var(--s-16); border-top:1px solid var(--border)}
.res-wheel .wheel-copy{max-width:340px}

.res-score{display:flex; align-items:baseline; gap:var(--s-12); margin-bottom:10px}
.res-score b{font-family:var(--font-display); font-size:var(--t-32); color:var(--accent); line-height:1}
.axes{display:grid; gap:var(--s-12); margin:var(--s-24) 0}
.axis{display:grid; gap:6px}
.axis-top{display:flex; justify-content:space-between; gap:var(--s-12); font-size:var(--t-14); font-weight:700}
.axis-top span:last-child{color:var(--text-muted); font-variant-numeric:tabular-nums}
.axis .bar{margin-top:0}
.axis.weak .bar i{background:#c0392b}

/* ---------- Reveal: только opacity + transform ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity var(--d-slow) var(--e), transform var(--d-slow) var(--e)}
.reveal.in{opacity:1; transform:none}
/* Без JS ничего не спрятано — страница читается как обычный документ */
.no-js .reveal{opacity:1; transform:none}

/* Помощник для скрин-ридеров */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:#fff; padding:var(--s-12) var(--s-16); font-weight:800; border-radius:0 0 12px 0}
.skip:focus{left:0}

/* Узкий телефон: в шапке теперь четыре элемента — логотип, «Диагностика»,
   «Поделиться» и бургер. По ширине им нужно 424px, а у iPhone SE всего 360.
   Поэтому ужимаем каждый понемногу и ничего не выбрасываем: имя владельца,
   вход в диагностику и обе кнопки остаются на месте. */
@media (max-width:430px){
  .hdr-in{gap:6px}
  .logo{gap:8px}
  .logo-mark{width:32px; height:32px; font-size:14px}
  .logo-mark::after{width:9px; height:9px; top:-2px; right:-2px; border-width:2px}
  .logo-txt b{font-size:14px}
  .nav .navlink{padding:var(--s-8) 11px; font-size:13px}
  .burger{width:44px; height:44px; margin-left:6px}
  .burger span,.burger span::before,.burger span::after{width:18px}
}