/* =====================================================================
   Locus — лендинг. Тёмная «предрассветная» база, собственный арт-дирекшн.
   Без фреймворков. Шрифты self-hosted (OFL): Lora + Golos Text.
   ===================================================================== */

/* Шрифты, дизайн-токены и атмосферные переменные (@property --atm-*) — в
   общем styles/tokens.css (подключается <link>'ом перед этим файлом). Здесь —
   только арт-дирекция лендинга поверх токенов.

   Брендовый @font-face-хук: чтобы заменить крупную фразу на брендовую гарнитуру,
   добавьте @font-face в tokens.css и поменяйте там --font-display. Шрифт OFL. */

/* ----------------------------- База -------------------------------------*/
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 16px); }
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:1rem;             /* 16px база (≥16 на мобильном) */
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;          /* страховка от горизонтального скролла */
}
h1,h2,h3,p,ul,ol,figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
:focus:not(:focus-visible){ outline:none; }
:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; border-radius:3px; }
::selection{ background:rgba(224,163,107,.28); color:#fff; }
img{ max-width:100%; display:block; }


/* --------------------------- Утилиты ------------------------------------*/
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:8px; left:8px; z-index:1000;
  transform:translateY(-150%);
  background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:var(--radius-sm); font-weight:600;
  transition:transform .18s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
.measure{ max-width:64ch; }

/* «точка» — сквозной мотив, рифма с кружками логотипа */
.dot{ display:inline-block; width:.42em; height:.42em; border-radius:50%; background:var(--accent); vertical-align:.06em; }

.arrow{ display:inline-block; margin-left:.4em; transition:transform .25s var(--ease); }
.arrow--down{ margin-left:.5em; }


/* --------------------------- Атмосферное поле ------------------------------------*/
.field{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:var(--bg);
  animation:field-in 1.6s var(--ease) both;   /* мягкое проявление «после контента»; работает и без JS */
}
@keyframes field-in{ from{ opacity:0; } to{ opacity:1; } }
.field__glow{ position:absolute; inset:-12%; will-change:transform; }
/* Градиент несёт ::before, а не сам .field__glow: на .field__glow висит
   бесконечная drift-анимация transform → композитный слой, и мобильный WebKit
   кэширует его background в GPU-текстуру, не перерисовывая при смене atm-переменных
   (фон «застывает» на телефоне). Псевдоэлемент собственного слоя не получает —
   его background перерисовывается в слое родителя при каждом изменении atm. */
.field__glow::before{ content:''; position:absolute; inset:0; }
.field__glow--main::before{
  background:radial-gradient(circle at var(--atm-mx) var(--atm-my),
    hsl(var(--atm-mh) calc(var(--atm-ms)*1%) calc(var(--atm-ml)*1%) / var(--atm-ma)) 0%,
    transparent var(--atm-msz));
}
.field__glow--point::before{
  background:radial-gradient(circle at var(--atm-px) var(--atm-py),
    hsl(var(--atm-ph) calc(var(--atm-ps)*1%) calc(var(--atm-pl)*1%) / var(--atm-pa)) 0%,
    transparent var(--atm-psz));
}
/* грануляция/шум для текстуры (статичный SVG-фильтр, дёшево) */
.field__grain{
  position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* виньетка — глубина по краям + лёгкое затемнение центра ради контраста текста */
.field__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(7,8,13,.55) 100%),
    linear-gradient(180deg, rgba(7,8,13,.25), transparent 18% 78%, rgba(7,8,13,.55));
}
@media (prefers-reduced-motion:no-preference){
  .field__glow--main{ animation:drift-a 46s var(--ease) infinite alternate; }
  .field__glow--point{ animation:drift-b 58s var(--ease) infinite alternate; }
}
/* дрейф + микропараллакс за курсором (--px/--py складываются с дрейфом, var() в keyframes интерполируется покадрово) */
@keyframes drift-a{
  from{ transform:translate3d(calc(-2% + var(--px)*30px), calc(-1.5% + var(--py)*30px),0) scale(1.02);}
  to{   transform:translate3d(calc(2.5% + var(--px)*30px), calc(2% + var(--py)*30px),0) scale(1.07);}
}
@keyframes drift-b{
  from{ transform:translate3d(calc(2% + var(--px)*58px), calc(1% + var(--py)*58px),0) scale(1.05);}
  to{   transform:translate3d(calc(-2% + var(--px)*58px), calc(-2% + var(--py)*58px),0) scale(1.01);}
}


/* --------------------------- Topbar -------------------------------------*/
.topbar{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(11,13,20,.82), rgba(11,13,20,.42) 70%, transparent);
  border-bottom:1px solid transparent;
}
.topbar__inner{
  max-width:var(--maxw); margin-inline:auto; padding:0 clamp(16px,5vw,48px);
  min-height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{ display:inline-block; padding:8px 0; line-height:1; }
.logo__word{ font-family:var(--font-display); font-weight:500; font-size:1.32rem; --track:.07em; letter-spacing:var(--track); }
/* Знак вместо «o»: та же форма, что в иконке приложения, — /images/logo-mark.svg,
   подставленный маской и залитый акцентом. Размер и база подогнаны к строчной «o»
   Lora: центр кольца стоит там же, где центр очка «o» — 0,25em над базовой
   линией. Диаметр заметно больше высоты буквы, поэтому знак выходит и над
   строчными, и под базовую линию: он читается как знак, а не как ещё одна
   буква. Поля разные, и оба выведены, а не подобраны. Левое ставит центр кольца
   туда же, где центр буквы: 0,375em (полполя знака) минус 0,2925em (полширины
   «o» в Lora). Правое возвращает слову ширину настоящего «Locus»: место буквы —
   это её ширина плюс разрядка, а разрядку после инлайн-блока браузер, в отличие
   от буквы, не добавляет — отсюда var(--track) в calc(). Симметричные поля
   уводили бы знак к «cus». */
.logo__mark{
  display:inline-block; width:.75em; height:.75em;
  vertical-align:-.12em; margin-inline:-.0825em calc(var(--track) - .0825em);
  background-color:var(--accent);
  -webkit-mask-image:url(/images/logo-mark.svg); mask-image:url(/images/logo-mark.svg);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* CTA в шапке — ссылка, а не кнопка: шапка низкая, и полноразмерная кнопка в
   ней перевешивает логотип и спорит с главным CTA в герое. Акцентный курсив
   держит тот же вес, что раньше держала фраза-настроение. */
.topbar__cta{
  font-family:var(--font-display); font-style:italic;
  font-size:1.02rem; color:var(--accent); white-space:nowrap;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.topbar__cta:hover{ color:var(--accent-bright); border-color:currentColor; }

/* Чужое настроение вместо CTA — по ссылке /?m=. Тот же переход, поэтому
   модификатор к .topbar__cta, а не отдельная роль: приглушённый цвет — фраза
   читается репликой того, кто прислал ссылку, а не окриком. На узком экране
   обрезается многоточием — шапка остаётся в одну строку. */
.topbar__cta--vibe{
  color:var(--ink-soft);
  min-width:0; overflow:hidden; text-overflow:ellipsis;
}


/* --------------------------- Секции -------------------------------------*/
.section{ position:relative; padding-block:clamp(64px,12vh,128px); }
.section__title{
  font-family:var(--font-display); font-optical-sizing:auto;
  font-weight:420; line-height:1.08; letter-spacing:-.015em;
  font-size:clamp(1.72rem,1.1rem + 3.2vw,2.9rem);
  text-wrap:balance; overflow-wrap:break-word;
}
.prose{ margin-top:clamp(28px,5vh,42px); }
.prose p{ color:var(--ink-soft); font-size:clamp(1.02rem,.98rem + .4vw,1.2rem); }
.prose p + p{ margin-top:1.1em; }
.prose em{ color:var(--ink); font-style:italic; }

/* «Что не так»: текст по левой границе контента (не по центру колонки) —
   внешний wrap во всю ширину страницы, узкая мера у его левого края */
.contrast .measure{ max-width:var(--maxw); }
.contrast .measure > *{ max-width:64ch; }

/* «про другое»: обычный шрифт; при появлении блока у центра экрана —
   яркая вспышка свечения, затем слово остаётся белым (ярче остального текста),
   и только после этого плавно проявляется тёмный «облачный» карман. */
.contrast__flash{ position:relative; font-style:normal; color:inherit; }
.contrast__flash::before{
  content:""; position:absolute; inset:-95% -34% -110% -34%; z-index:-1;
  background:radial-gradient(64% 72% at 50% 56%, rgba(7,8,13,.82), rgba(7,8,13,.42) 56%, transparent 80%);
  filter:blur(12px); opacity:0; pointer-events:none;
}
.contrast__flash.is-flashing{ animation:contrast-flash 2s var(--ease) both; }
.contrast__flash.is-flashing::before{ animation:contrast-cloud 2s var(--ease) both; }
/* как сварка: резкий ослепительный «удар» с лёгким стробом, затем быстрый спад;
   одновременно со спадом из-за слова поднимается тёмный дым-облако. */
@keyframes contrast-flash{
  0%{ color:inherit; text-shadow:none; }
  3%{ color:#fff; text-shadow:0 0 54px #fff, 0 0 26px var(--accent-bright), 0 0 12px #fff; }
  7%{ color:#fff; text-shadow:0 0 20px var(--accent-bright), 0 0 8px #fff; }       /* строб */
  11%{ color:#fff; text-shadow:0 0 50px #fff, 0 0 24px var(--accent-bright), 0 0 12px #fff; }
  16%{ color:#fff; text-shadow:0 0 18px var(--accent-bright), 0 0 8px #fff; }      /* строб */
  21%{ color:#fff; text-shadow:0 0 46px #fff, 0 0 22px var(--accent-bright), 0 0 10px #fff; }
  50%{ color:#fff; text-shadow:none; }
  100%{ color:#fff; text-shadow:none; }   /* слово остаётся белым */
}
@keyframes contrast-cloud{
  0%{ opacity:0; }
  21%{ opacity:0; }                        /* копится, пока бьёт вспышка */
  50%{ opacity:1; }                        /* поднимается ровно когда гаснет свет */
  100%{ opacity:1; }                       /* и остаётся как фон */
}
@media (prefers-reduced-motion:reduce){
  .contrast__flash.is-flashing,
  .contrast__flash.is-flashing::before{ animation:none; }
  .contrast__flash.is-flashing{ color:#fff; }
  .contrast__flash.is-flashing::before{ opacity:1; }
}


/* ------------------------------ Hero ------------------------------------*/
.hero{ min-height:calc(100dvh - var(--topbar-h)); display:flex; align-items:center; padding-top:clamp(40px,8vh,72px); }
.hero__inner{ position:relative; }
.hero__title{
  font-family:var(--font-display); font-optical-sizing:auto;
  font-weight:400; letter-spacing:-.02em; line-height:1.04;
  font-size:clamp(2.05rem,1rem + 5.2vw,5.2rem);
  text-wrap:balance; overflow-wrap:break-word; margin-bottom:.4em;
}
.hero__sub{
  color:var(--ink-soft); max-width:46ch;
  font-size:clamp(1.06rem,1rem + .6vw,1.34rem); line-height:1.55;
  margin-bottom:clamp(28px,5vh,42px);
}
/* Кнопка — отдельной строкой: scroll-cue под ней читается как подсказка о длине
   страницы, а рядом с кнопкой выглядел бы второй, конкурирующей ссылкой. */
.hero__actions{ display:flex; }


/* ------------------------------ Кнопки ----------------------------------*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.2em;
  min-height:52px; padding:13px 24px; border:1px solid transparent; border-radius:var(--radius-sm);
  font-weight:600; letter-spacing:.01em; white-space:nowrap;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease), opacity .18s var(--ease);
  touch-action:manipulation;
}
.btn--primary{ background:var(--accent); color:var(--accent-ink); }
.btn--primary:hover{ background:var(--accent-bright); }
.btn--primary:active{ transform:translateY(1px); }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.btn--primary:disabled:hover,.btn--primary[aria-disabled="true"]:hover{ background:var(--accent); }

/* scroll-cue */
.scroll-cue{
  display:inline-flex; align-items:center; margin-top:clamp(36px,7vh,64px);
  font-size:.9rem; color:var(--ink-dim);
  transition:color .2s var(--ease);
}
.scroll-cue:hover{ color:var(--ink); }
@media (prefers-reduced-motion:no-preference){
  .scroll-cue .arrow{ animation:nudge 2.4s var(--ease) infinite; }
}
@keyframes nudge{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }


/* --------------------------- Как устроено --------------------------
   Скролл-сценарий «полусфера + сменяющиеся плитки». Базовое состояние
   (без JS / при reduced-motion / на узком экране) — обычный вертикальный
   список плиток. Класс .is-scrolly (ставит landing.js на десктопе с разрешённой
   анимацией) включает закреп сцены и перелистывание плиток на скролле. */
.how__track{ position:relative; }
.how__sticky{ position:relative; }
.how__stage{ position:relative; z-index:1; }
.how__lead{ position:relative; z-index:1; }
.how__intro{ color:var(--ink-soft); font-size:clamp(1.06rem,1rem + .6vw,1.3rem); margin-top:18px; max-width:34ch; }

/* Полусфера — уходит за левый край экрана; за ней слой свечения, поверх — орбиты */
.how__orb{
  position:absolute; left:0; top:50%;
  /* Сфера крупнее самого закрепа: размер ведём от max(ширина, высота) вьюпорта,
     чтобы по вертикали диаметр всегда превышал кадр — верх и низ полусферы
     намеренно срезаются краями сцены (overflow:hidden на .how__sticky). */
  width:clamp(720px,max(80vw,118vh),1760px); aspect-ratio:1;
  transform:translate(-52%,-50%);
  z-index:0; pointer-events:none;
  /* Верх и низ полусферы растворяем сами — там, где она выходит за кадр закрепа
     (overflow-y:visible на .how__sticky). Так сфера остаётся целостной, без
     жёсткого среза на границе блоков, и мягко уходит за пределы сцены. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
}
.how__orb-core{
  position:absolute; inset:13%; border-radius:50%;
  background:radial-gradient(circle at 56% 46%,
    hsl(258 46% 58% / .50) 0%,
    hsl(28 54% 60% / .20) 34%,
    transparent 62%);
  filter:blur(6px);
}
.how__orbits{ position:absolute; inset:0; width:100%; height:100%; color:var(--line-strong); overflow:visible; }
.how__orbits-rot{ transform:rotate(var(--how-rot,0deg)); transform-origin:500px 500px; transition:transform .2s linear; }
.how__ring{ fill:none; stroke:currentColor; stroke-width:0.8; }
.how__ring--dot{ stroke-dasharray:2 12; stroke-linecap:round; opacity:.7; }

/* Стрелки-подсказки, едущие ПО орбитам: лежат на кольцах, ориентированы
   по касательной в сторону прокрутки. Цвет — как у колец (currentColor), не
   акцентный. Лёгкая «качка» вдоль касательной (локальная ось X после rotate). */
.how__cue-arm{ fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transform-box:fill-box; transform-origin:center; transform:scale(.5); }
.how__cue{ opacity:.85; }
/* десктоп — видна правая дуга; мобильный набор спрятан (включается в медиазапросе) */
.how__cues--tall{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .how__cue{ animation:cue-glide 2.6s var(--ease) infinite; animation-delay:var(--d,0s); }
}
@keyframes cue-glide{ 0%,100%{ transform:translateX(-4px); opacity:.45; } 50%{ transform:translateX(5px); opacity:.9; } }

/* Плитки шагов */
.steps{ list-style:none; padding:0; margin:clamp(30px,5vh,48px) 0 0; display:flex; flex-direction:column; gap:14px; }
.step{
  position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(22px,2.8vw,32px);
}
.step__name{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.32rem,1.16rem + .7vw,1.62rem); letter-spacing:-.01em; margin:0 0 .5em; }
.step__text{ color:var(--ink-soft); font-size:clamp(1.04rem,1rem + .35vw,1.2rem); max-width:54ch; }

.how__progress{ display:none; gap:10px; }
.how__dot{ width:7px; height:7px; padding:0; border:0; border-radius:50%; background:var(--line-strong); cursor:pointer; -webkit-appearance:none; appearance:none; transition:background .3s var(--ease), transform .3s var(--ease); }
.how__dot:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.how__dot.is-on{ background:var(--accent); transform:scale(1.3); }

/* ---- режим скролл-сценария (анимация разрешена) ----
   Плитки сменяются НЕ перебором, а проворачиваются по окружности вокруг
   удалённого центра (≈ центр полусферы) и растворяются за пределами сцены:
   transform-origin далеко слева → поворот на var(--delta) гонит плитку по
   вертикальной дуге; активная (--delta:0) стоит вертикально по центру. */
.how.is-scrolly .how__track{ height:360vh; }
.how.is-scrolly .how__sticky{
  position:sticky; top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  display:flex; align-items:center;
  /* По горизонтали обрезаем (полусфера уходит за левый край — иначе появился бы
     горизонтальный скролл), по вертикали НЕ режем: сфера крупнее кадра и должна
     оставаться целостной — её верх/низ растворяет собственная маска .how__orb,
     а не жёсткая граница закрепа. Плитки шагов и так гаснут по opacity (--vis). */
  overflow-x:clip; overflow-y:visible;
}
.how.is-scrolly .how__stage{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:clamp(32px,5vw,72px); width:100%;
}
.how.is-scrolly .how__progress{ display:flex; margin-top:clamp(32px,5.5vh,52px); }
.how.is-scrolly .how__panels{ position:relative; min-height:340px; }
.how.is-scrolly .steps{ position:absolute; inset:0; margin:0; display:block; }
.how.is-scrolly .step{
  position:absolute; inset:0; margin:0;
  display:flex; flex-direction:column; justify-content:center;
  transform-origin:-58vw 50%;
  /* --delta непрерывна (landing.js пишет дробные значения по мере скролла),
     поэтому плитки проворачиваются по дуге плавно. Короткий transition лишь
     сглаживает ступенчатость колеса мыши — не «перещёлкивает» состояния. */
  transform:rotate(calc(var(--delta,0) * 11deg));
  opacity:var(--vis,0); pointer-events:none;
  transition:transform .18s linear, opacity .18s linear;
}
.how.is-scrolly .step.is-active{ pointer-events:auto; }

/* ---- мобильная раскладка скролл-сценария ----
   Полусфера уходит за НИЖНИЙ край (по центру), плитки проворачиваются
   ЛЕВО-ПРАВО: transform-origin далеко снизу → поворот гонит плитку по
   горизонтальной дуге. */
@media (max-width:899px){
  /* сфера ушла вниз — видна верхняя дуга: показываем «верхний» набор стрелок */
  .how__cues--wide{ display:none; }
  .how__cues--tall{ display:inline; }
  .how.is-scrolly .how__stage{
    grid-template-columns:1fr; align-items:start;
    gap:clamp(18px,3vh,30px);
  }
  .how.is-scrolly .how__panels{ min-height:46vh; }
  .how.is-scrolly .step{
    justify-content:flex-start;
    transform-origin:50% 160vh;
    transform:rotate(calc(var(--delta,0) * 8deg));
  }
  .how.is-scrolly .how__orb{
    left:50%; top:auto; bottom:0;
    width:min(190vw,920px);
    transform:translate(-50%,52%);
    /* плавно растворяем низ полусферы у края закрепа (срез всегда на 48% высоты
       орба → fade в прозрачность чуть выше) — нет резкой границы со след. блоком */
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 22%,transparent 46%);
            mask-image:linear-gradient(180deg,#000 0,#000 22%,transparent 46%);
  }
}


/* ---------------- Кому подходит · Чего не будет (диптих) ------*/
/* Противопоставление без заголовка: «присутствие» (для кого) ↔ «отсутствие»
   (чего не будет). Контраст несут вес/температура/контрастность — без галочек
   и без таблицы-сравнения (без оценок «насколько вы подходите»). */
.fit__grid{
  display:grid; gap:clamp(34px,5vw,56px); grid-template-columns:1fr;
  margin-top:clamp(32px,5vh,48px);
  /* общий кегль портрета — задаёт и отступ под маркер у обоих полюсов,
     чтобы текст белого и серого полюса начинался на одной вертикали */
  --portrait-fz:clamp(1.1rem,1rem + .8vw,1.5rem);
}

/* присутствие — тёплое, плотное, крупное (display) */
.fit__present{ display:grid; gap:clamp(18px,3vh,26px); align-content:start; }
.portrait{
  position:relative; padding-left:1.7em;
  font-size:var(--portrait-fz); line-height:1.4; color:var(--ink);
  font-family:var(--font-display); font-weight:380; max-width:34ch;
}
.portrait .dot{ position:absolute; left:0; top:.62em; }

/* отсутствие — тусклее, мельче, отступающее; анафора «без …», без линий.
   Точка-маркер скрыта и проявляется только при наведении: текст сдвигается
   правее, слева возникает точка цвета текста (currentColor). */
.fit__absent{ list-style:none; padding:0; margin:0; align-content:start; }
/* отступ 1.7em — как у .portrait, чтобы текст серого полюса начинался на одной
   вертикали с белым; в этом отступе живёт маркер-тире (как точки слева у портретов) */
.fit__absent li{
  position:relative; padding:14px 0 14px calc(var(--portrait-fz) * 1.7);
  color:var(--ink-dim); font-size:clamp(.98rem,.95rem + .35vw,1.12rem); line-height:1.45;
}
.fit__absent li:first-child{ padding-top:0; }
/* маркер — длинное тире цвета текста; текст стоит на месте, тире при наведении
   выезжает влево и проявляется. Разделяет строчный бокс с первой строкой пункта
   (top = его padding-top) — держится на базовой линии. */
.fit__absent li::before{
  content:"—"; position:absolute; left:0; top:14px;
  line-height:1.45; color:currentColor;
  opacity:0; transform:translateX(.5em);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.fit__absent li:first-child::before{ top:0; }
@media (hover:hover){
  .fit__absent li:hover::before{ opacity:1; transform:none; }
}

/* линия-раздел между полюсами: на мобиле — горизонтальная (полюса в столбик),
   на десктопе становится вертикальной (см. адаптив) */
.fit__rule{
  height:1px;
  background:linear-gradient(to right, transparent, var(--line) 16%, var(--line) 84%, transparent);
}


/* ------------------------------ FAQ --------------------------------*/
.faq__list{ margin-top:clamp(24px,4vh,40px); }
/* линии-разделители растворяются на последней трети длины */
.qa{ position:relative; }
.qa::before,
.qa:last-child::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(to right, var(--line) 66%, transparent);
  pointer-events:none;
}
.qa::before{ top:0; }
.qa:last-child::after{ bottom:0; }
.qa__q{
  position:relative; list-style:none; cursor:pointer; padding:20px 44px 20px 0;
  font-family:var(--font-display); font-style:italic; font-optical-sizing:auto;
  font-size:clamp(1.12rem,1rem + .6vw,1.34rem); color:var(--ink); font-weight:500;
  transition:color .18s var(--ease);
}
.qa__q::-webkit-details-marker{ display:none; }
.qa__q:hover{ color:var(--accent); }
.qa__q::after{
  content:""; position:absolute; right:6px; top:50%; width:13px; height:13px; margin-top:-6px;
  background:
    linear-gradient(var(--ink-dim),var(--ink-dim)) center/100% 1.5px no-repeat,
    linear-gradient(var(--ink-dim),var(--ink-dim)) center/1.5px 100% no-repeat;
  transition:transform .25s var(--ease);
}
.qa[open] .qa__q::after{ transform:none; opacity:.9; background:linear-gradient(var(--accent),var(--accent)) center/100% 1.5px no-repeat; }  /* плюс → минус */
.qa__a{ color:var(--ink-soft); overflow:hidden; }
.qa__a p{ margin:0; padding-bottom:22px; max-width:62ch; }
.qa__a a{ color:var(--accent); border-bottom:1px solid rgba(224,163,107,.4); }
.qa__a a:hover{ border-color:var(--accent); }
@media (prefers-reduced-motion:no-preference){
  .qa[open] .qa__a p{ animation:fade-in .3s var(--ease-out) both; }
}
@keyframes fade-in{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }


/* --------------------------- Финальный CTA -------------------------*/
.final{ text-align:center; padding-bottom:clamp(120px,22vh,240px); }
.final__inner{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.final__title{ max-width:18ch; }
.final__sub{ color:var(--ink-soft); max-width:42ch; font-size:clamp(1.02rem,.98rem + .4vw,1.18rem); }
.final .btn{ margin-top:10px; }
.btn .arrow{ margin-left:.5em; }
.btn:hover .arrow{ transform:translateX(4px); }


/* ------------------------------ Подвал ----------------------------------*/
.footer{ padding-block:clamp(40px,7vh,72px); padding-bottom:calc(clamp(40px,7vh,72px) + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.footer__nav{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px);
  display:flex; flex-wrap:wrap; align-items:center; gap:.7em 1em; font-size:.92rem; color:var(--ink-dim); }
.footer__nav a{ color:var(--ink-dim); border-bottom:1px solid transparent; padding-bottom:1px; transition:color .18s var(--ease), border-color .18s var(--ease); }
.footer__nav a:hover{ color:var(--ink); border-color:var(--line-strong); }
.footer__sep{ color:var(--line-strong); }
.footer__social{ margin-left:auto; display:inline-flex; align-items:center; gap:.6em; }
.footer__nav .footer__icon{
  display:inline-block; width:20px; height:20px; border-bottom:0; padding-bottom:0;
  color:var(--ink-dim); background-color:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:color .18s var(--ease);
}
.footer__nav .footer__icon:hover{ color:var(--accent); }
.footer__icon--vk{ -webkit-mask-image:url(/images/vk.svg); mask-image:url(/images/vk.svg); }
.footer__icon--tg{ -webkit-mask-image:url(/images/telegram.svg); mask-image:url(/images/telegram.svg); }

/* На узком экране ссылки идут в столбик: при переносе по ширине строка рвётся
   произвольно, а разделитель повисает в конце. */
@media (max-width:599px){
  .footer__nav{ flex-direction:column; align-items:flex-start; gap:.55em; }
  .footer__sep{ display:none; }
  .footer__social{ margin-left:0; margin-top:1.1em; }
}


/* --------------------------- Адаптив ------------------------------------*/
/* база — мобайл-first (360px). Дальше — масштабирование вверх. */

@media (min-width:768px){
  /* диптих: присутствие | линия | отсутствие */
  .fit__grid{
    grid-template-columns:1.05fr 1px .85fr;
    align-items:start; column-gap:clamp(40px,5vw,72px); row-gap:0;
  }
  .fit__present .portrait{ max-width:none; }
  /* в столбцах выравнивать полюса не нужно — возвращаем правому тексту
     собственный отступ под маркер, чтобы он стоял ближе к линии-разделу */
  .fit__absent li{ padding-left:1.7em; }
  .fit__rule{
    height:auto; align-self:stretch;
    background:linear-gradient(to bottom, transparent, var(--line) 16%, var(--line) 84%, transparent);
  }
}

@media (min-width:1280px){
  :root{ --maxw:1180px; }
}


/* ------------------- prefers-reduced-motion (полный fallback) -----------*/
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; transition:none; }      /* поле статично — один кадр выбранного состояния */
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .field__glow{ animation:none !important; }
}