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

/* ----------------------------- Шрифты (OFL) -----------------------------
   Подмножества подгружаются браузером по unicode-range: для кириллицы
   тянутся только *-cyrillic.woff2; latin — для «Locus», email, URL, тире.
   Literata: ось opsz управляется через font-optical-sizing (см. ниже). */

@font-face { font-family:'Golos Text'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/golos-text-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Golos Text'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/golos-text-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Golos Text'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/golos-text-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Golos Text'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/golos-text-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ЭКСПЕРИМЕНТ: дисплейная гарнитура — Lora (OFL) вместо Literata.
   Сабсеты latin/cyrillic, прямое + курсив. Вес статичный 400; диапазон
   400 700 объявлен, чтобы 500/600 в заголовках брались без faux-bold. */
@font-face { font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/lora-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/lora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Lora'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url('../fonts/lora-italic-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Lora'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url('../fonts/lora-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---- Брендовый @font-face-хук ----
   Чтобы заменить крупную фразу на брендовую гарнитуру — раскомментируйте,
   положите woff2 в fonts/ и поменяйте --font-display ниже. Шрифт обязан быть OFL. */
/* @font-face { font-family:'LocusDisplay'; src:url('../fonts/locus-display.woff2') format('woff2'); font-display:swap; } */


/* ----------------- Атмосферные переменные (плавный переток) -----------------
   Регистрируем как анимируемые свойства, чтобы переход состояния поля шёл
   мягким easing'ом «как расплывание капли» (§9), а не скачком. */
@property --atm-mh { syntax:'<number>'; inherits:true; initial-value:255; }   /* main glow hue   */
@property --atm-ms { syntax:'<number>'; inherits:true; initial-value:34; }    /* main sat %      */
@property --atm-ml { syntax:'<number>'; inherits:true; initial-value:44; }    /* main light %    */
@property --atm-ma { syntax:'<number>'; inherits:true; initial-value:0.42; }  /* main alpha      */
@property --atm-mx { syntax:'<percentage>'; inherits:true; initial-value:50%; }
@property --atm-my { syntax:'<percentage>'; inherits:true; initial-value:24%; }
@property --atm-msz{ syntax:'<percentage>'; inherits:true; initial-value:72%; }
@property --atm-ph { syntax:'<number>'; inherits:true; initial-value:30; }    /* point glow hue  */
@property --atm-ps { syntax:'<number>'; inherits:true; initial-value:38; }
@property --atm-pl { syntax:'<number>'; inherits:true; initial-value:54; }
@property --atm-pa { syntax:'<number>'; inherits:true; initial-value:0.22; }
@property --atm-px { syntax:'<percentage>'; inherits:true; initial-value:50%; }
@property --atm-py { syntax:'<percentage>'; inherits:true; initial-value:60%; }
@property --atm-psz{ syntax:'<percentage>'; inherits:true; initial-value:46%; }


/* ----------------------------- Токены -----------------------------------*/
:root{
  --font-ui:'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:'Lora', Georgia, 'Times New Roman', serif;

  /* поверхности и текст (тёмная база) */
  --bg:#0b0d14;
  --bg-2:#0e1019;
  --ink:#ECEDF2;        /* основной текст: ~15:1 на --bg */
  --ink-soft:#C3C6D2;   /* вторичный: ~10:1 */
  --ink-dim:#9498A8;    /* третичный/лейблы: ~6:1 (для крупного/служебного) */
  --line:rgba(236,237,242,0.14);
  --line-strong:rgba(236,237,242,0.26);
  --surface:rgba(255,255,255,0.035);
  --surface-2:rgba(255,255,255,0.06);

  /* акцент — приглушённый предрассветный янтарь (стабилен, не «светофор») */
  --accent:#E0A36B;
  --accent-bright:#EBB682;
  --accent-ink:#1c1305;   /* тёмный текст на янтарной заливке */

  --err:#E9A6A0;          /* мягкая ошибка (≥4.5:1 на --bg) */

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --atm-transition:2.6s var(--ease);

  /* микропараллакс поля за курсором: нормировано в [-1..1], JS подгоняет с инерцией (§9) */
  --px:0; --py:0;

  --radius:14px;
  --radius-sm:10px;
  --maxw:1120px;
  --topbar-h:60px;

  color-scheme:dark;
}

/* переток атмосферы: переход всех atm-переменных на корне */
html{
  transition:
    --atm-mh var(--atm-transition), --atm-ms var(--atm-transition), --atm-ml var(--atm-transition),
    --atm-ma var(--atm-transition), --atm-mx var(--atm-transition), --atm-my var(--atm-transition),
    --atm-msz var(--atm-transition),
    --atm-ph var(--atm-transition), --atm-ps var(--atm-transition), --atm-pl var(--atm-transition),
    --atm-pa var(--atm-transition), --atm-px var(--atm-transition), --atm-py var(--atm-transition),
    --atm-psz var(--atm-transition);
}


/* ----------------------------- База -------------------------------------*/
*,*::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; }

/* «точка» — сквозной мотив §9, рифма с кружками логотипа */
.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; }


/* --------------------------- Поле §9 ------------------------------------*/
.field{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:var(--bg);
  animation:field-in 1.6s var(--ease) both;   /* мягкое проявление «после контента» (§9); работает и без 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-flex; align-items:baseline; gap:.22em; padding:8px 0; line-height:1; }
.logo__word{ font-family:var(--font-display); font-weight:500; font-size:1.32rem; letter-spacing:.07em; }
.logo__dots{ height:.34em; width:auto; transform:translateY(.05em); }
.logo__dots circle{ fill:var(--accent); }

.brand-phrase{
  font-size:1.02rem; color:var(--ink-soft);
  max-width:min(58vw,420px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.brand-phrase:hover{ color:var(--ink); border-color:var(--line-strong); }
.brand-phrase[data-state="filled"]{ color:var(--accent); font-family:var(--font-display); font-style:italic; }


/* --------------------------- Секции -------------------------------------*/
.section{ position:relative; padding-block:clamp(64px,12vh,128px); }
.eyebrow{
  display:flex; align-items:center; gap:.6em;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
  margin-bottom:clamp(20px,4vh,30px);
}
.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; }

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

/* «про другое» (§5.2): обычный шрифт; при появлении блока у центра экрана —
   яркая вспышка свечения, затем слово остаётся белым (ярче остального текста),
   и только после этого плавно проявляется тёмный «облачный» карман — тот же,
   что под собранной фразой (.phrase__text::before). */
.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);
}


/* ------------------------------ Форма -----------------------------------*/
.form{ max-width:560px; }
.form__row{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.form__field{ flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:7px; }
.form__label{ font-size:.84rem; letter-spacing:.04em; color:var(--ink-dim); padding-left:2px; }
.form__input{
  width:100%; min-height:52px; padding:13px 16px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font-size:1rem; transition:border-color .18s var(--ease), background .18s var(--ease);
}
.form__input::placeholder{ color:var(--ink-dim); }
.form__input:hover{ border-color:rgba(236,237,242,.36); }
.form__input:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:1px; border-color:transparent; background:var(--surface-2); }
.form__input[aria-invalid="true"]{ border-color:var(--err); }

.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); }
.btn.is-loading{ color:transparent; position:relative; pointer-events:none; }
.btn.is-loading::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--accent-ink); border-top-color:transparent; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

.btn--ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

.form__consent{ display:flex; gap:11px; align-items:flex-start; margin-top:18px; }
.consent__input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:22px; height:22px; margin:1px 0 0; border:1.5px solid var(--line-strong);
  border-radius:6px; background:var(--surface); display:grid; place-content:center;
  transition:border-color .15s var(--ease), background .15s var(--ease); cursor:pointer;
}
.consent__input::before{
  content:""; width:11px; height:11px; transform:scale(0);
  background:var(--accent-ink); transition:transform .15s var(--ease);
  clip-path:polygon(14% 47%,0 60%,40% 100%,100% 22%,86% 8%,38% 70%);
}
.consent__input:checked{ background:var(--accent); border-color:var(--accent); }
.consent__input:checked::before{ transform:scale(1); }
.consent__label{ font-size:.92rem; color:var(--ink-soft); line-height:1.45; cursor:pointer; }
.consent__label a{ color:var(--ink-soft); border-bottom:1px solid var(--line-strong); }
.consent__label a:hover{ color:var(--accent); border-color:var(--accent); }

.form__msg{ margin-top:14px; font-size:.92rem; min-height:1.2em; }
.form__msg[data-tone="error"]{ color:var(--err); }
.form__msg[data-tone="success"]{ color:var(--accent-bright); }

/* 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);} }


/* --------------------------- §5.3 Как устроено --------------------------
   Скролл-сценарий «полусфера + сменяющиеся плитки». Базовое состояние
   (без JS / при reduced-motion / на узком экране) — обычный вертикальный
   список плиток. Класс .is-scrolly (ставит app.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; }

/* Полусфера §9 — уходит за левый край экрана; за ней слой свечения, поверх — орбиты */
.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; }

/* Стрелки-подсказки, едущие ПО орбитам (§5.3): лежат на кольцах, ориентированы
   по касательной в сторону прокрутки. Цвет — как у колец (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; }
.example-link{ color:var(--accent); border-bottom:1px solid rgba(224,163,107,.4); transition:border-color .2s var(--ease); }
.example-link:hover{ border-color:var(--accent); }
.example-link[data-state="filled"]{ font-style:italic; }

.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 непрерывна (app.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%);
  }
}


/* --------------------------- §5.4 Место — «Схождение» -------------------
   Три ВЕРТИКАЛЬНЫЕ оси-дуги (where слева · when по центру · why справа)
   сходятся к центру. Слова — бесконечная карусель: app.js раскладывает их
   по вертикальной дуге (позиция, изгиб столбца, затухание, слияние у центра)
   одним transform'ом. Собранная фраза стоит В ЦЕНТРЕ; центральные (выбранные)
   слова при готовой тройке «вливаются» в неё. CSS задаёт сцену и состояния. */
/* Секция-сцена занимает весь экран по высоте: при остановке скролла на ней
   виден только её центр, заголовок следующего блока не подглядывает снизу.
   Контент центрируем по вертикали; padding-block остаётся минимальным зазором. */
.place{
  min-height:clamp(440px,72vh,680px);
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(40px,7vh,84px); overflow-x:clip;
}
.place__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(14px,3vh,30px); }
.place__intro{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,1.1rem + 1.4vw,1.9rem); color:var(--ink-soft); transition:opacity .5s var(--ease); }
.place__intro[data-state="filled"]{ opacity:.5; }

/* сцена: слой дуг + центральный оверлей фразы */
.stage{ position:relative; width:100%; max-width:1040px; }

/* слой вертикальных дуг — общий для трёх осей; затухание сверху/снизу */
.picker--arcs{
  position:relative; width:100%; height:clamp(400px,56vh,500px);
  overflow:hidden; touch-action:pan-y;   /* вертикаль мышью ведём сами; на тач — скролл страницы + тап */
  cursor:grab;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.picker--arcs:active{ cursor:grabbing; }

/* каждая ось — слой на всю сцену; слова позиционирует app.js (absolute, transform) */
.axis{ position:absolute; inset:0; border:0; padding:0; margin:0; min-inline-size:0; }
.axis__opts{ position:absolute; inset:0; }

.chip{
  position:absolute; left:50%; top:50%; will-change:transform, opacity;
  transform:translate(-50%,-50%);   /* стартовое; дальше управляет app.js */
}
.chip input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.chip__txt{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:6px 14px; border-radius:999px;
  border:1px solid transparent; background:transparent;
  font-family:var(--font-display); font-optical-sizing:auto; font-weight:400;
  font-size:clamp(.86rem,.78rem + .55vw,1.35rem); line-height:1; white-space:nowrap;
  color:var(--ink-dim);
  transition:color .2s var(--ease);
}
.chip:hover .chip__txt{ color:var(--ink-soft); }
/* «в фокусе» — слово в центре (ещё не зафиксировано) */
.chip.is-active .chip__txt{ color:var(--ink); }
/* «выбрано» — зафиксированное значение оси */
.chip input:checked ~ .chip__txt{ color:var(--accent); font-style:italic; }
.chip.is-active input:checked ~ .chip__txt{ color:var(--accent-bright); }
.chip input:focus-visible ~ .chip__txt{ outline:2px solid var(--accent-bright); outline-offset:3px; }

/* собранная фраза + «поделиться» — оверлей в центре сцены (туда «вливаются» слова) */
.phrase{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5; width:100%; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.4vh,22px);
}
.phrase[hidden]{ display:none; }
.phrase__text{
  position:relative; font-family:var(--font-display); font-optical-sizing:auto;
  font-weight:400; font-style:italic; line-height:1.12; letter-spacing:-.01em;
  font-size:clamp(1.5rem,1.1rem + 2.3vw,2.7rem);
  max-width:26ch; text-wrap:balance; overflow-wrap:break-word; color:#fff;
}
/* локальная подложка-затемнение под фразой — контраст и «карман» в центре дуг */
.phrase__text::before{
  content:""; position:absolute; inset:-44% -18% -104% -18%; z-index:-1;
  background:radial-gradient(70% 76% at 50% 62%, rgba(7,8,13,.82), rgba(7,8,13,.42) 56%, transparent 80%);
  filter:blur(12px);
}
.is-animating .phrase__text{ animation:phrase-in .6s var(--ease-out) both; }
@keyframes phrase-in{ from{ opacity:0; transform:translateY(8px) scale(.99); filter:blur(3px);} to{ opacity:1; transform:none; filter:none;} }

.btn-share{
  pointer-events:auto;
  display:inline-flex; align-items:center; min-height:48px; padding:11px 22px;
  background:rgba(11,13,20,.55); backdrop-filter:blur(5px);
  border:1px solid var(--accent); border-radius:999px;
  color:var(--accent); font-weight:600; letter-spacing:.01em;
  transition:background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.btn-share:hover{ background:var(--accent); color:var(--accent-ink); }
.btn-share:hover .arrow{ transform:translateX(4px); }
.btn-share:active{ transform:translateY(1px); }

.place__noscript{ color:var(--ink-soft); }

/* примеры (§6) — без чисел, без real-time */
.examples{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5em 1em; color:var(--ink-dim); font-size:.95rem; }
.examples[hidden]{ display:none; }
.examples__label{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.examples__item{ background:none; border:0; padding:2px 0; color:var(--ink-soft); font-style:italic; font-family:var(--font-display); border-bottom:1px solid var(--line); transition:color .18s var(--ease), border-color .18s var(--ease); }
.examples__item:hover{ color:var(--accent); border-color:var(--accent); }
.examples__sep{ color:var(--line-strong); }


/* ---------------- §5.5 + §5.6 Кому подходит · Чего не будет (диптих) ------*/
/* Противопоставление без заголовка: «присутствие» (для кого) ↔ «отсутствие»
   (чего не будет). Контраст несут вес/температура/контрастность — без галочек
   и без таблицы-сравнения (§5: без оценок «насколько вы подходите»). */
.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);
}


/* ------------------------------ §5.7 FAQ --------------------------------*/
.faq__list{ margin-top:clamp(24px,4vh,40px); }
/* линии-разделители растворяются на последней трети длины (§5.7) */
.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;} }


/* --------------------------- §5.8 Финальный 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--ghost{ margin-top:10px; }
.final .arrow{ margin-left:.5em; }
.final .btn--ghost:hover .arrow{ transform:translateY(-3px); }


/* ------------------------------ Подвал ----------------------------------*/
.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; gap:.7em 1em; justify-content:center; 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); }


/* ------------------------------ Toast -----------------------------------*/
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(12px);
  z-index:200; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:999px;
  padding:12px 22px; font-size:.94rem; box-shadow:0 10px 40px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease);
}
/* toast виден/скрыт через .is-visible (opacity), не через [hidden] */
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }


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

@media (min-width:768px){
  .form__msg{ min-height:1.4em; }
  /* диптих §5.5+5.6: присутствие | линия | отсутствие */
  .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; }
}