/* ═══ САЙТЫ РЯДОМ · ОБЩАЯ ОСНОВА ═══════════════════════════════
   Один источник на четыре сайта экосистемы. Правится ЗДЕСЬ, потом
   bash saity/sobrat.sh раскладывает копии по сайтам; тождество
   копий стережёт proba-saitov.sh.

   Облик — из брендбука приложения: тёмный фон, Manrope, тонкая
   черта, водяной знак-спираль. Акцент у каждого домена свой и
   задаётся на странице переменными --a / --a2 / --grad.        */

:root{
  --bg:#07070C; --sur:#101018; --sur2:#15151F; --line:#212130;
  --t1:#F4F4F8; --t2:#9E9EB0; --t3:#80809A;
  /* палитра только из брендбука приложения: фиолетовое, синее и
     промежуточные. Тёплых и зелёных акцентов здесь нет и не будет —
     сайты обязаны быть схожи со Стафиром, отличаясь оттенком. */
  --a:#705FFB; --a2:#B900F4;
  --grad:linear-gradient(120deg,#A8D4FF,#4A90FF,#B900F4);
  --shrift:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:18px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--t1);font-family:var(--shrift);
  line-height:1.65;font-size:clamp(16px,1.5vw,17.5px);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--t1);text-decoration:none}
::selection{background:var(--a);color:#fff}

/* ── свечение фона и водяной знак ─────────────────────────────── */
.fon{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(52vw 52vw at 82% -8%, color-mix(in srgb,var(--a) 17%,transparent), transparent 62%),
    radial-gradient(60vw 60vw at -12% 78%, color-mix(in srgb,var(--a2) 10%,transparent), transparent 60%),
    var(--bg);
}
/* ── ЗНАК ЗА ЛЕНТОЙ · ровно как в режиме чата ────────────────────
   В приложении знак не наклейка в углу и не вертушка. Он делает
   одно движение при загрузке — приходит из полуоборота, встаёт — и
   дальше стоит и дышит. Лента идёт поверх него: человек прокручивает,
   сообщения появляются, а знак остаётся на месте.

   Отсюда три вещи, и все три взяты из proba.css (.glow, unroll,
   dyhanie), а не придуманы заново:
     · position:fixed — знак не едет со страницей, текст идёт поверх;
     · unroll 3,4 с — поворот с -180° и рост с 0,55 до 1, один раз;
     · dyhanie 6 с — вдох-выдох, тот же ритм, каким дышат в сеансе.
   Дыхание включается после поворота: задержка равна его длине, иначе
   два движения спорят за transform и знак дёргается.

   Знак шире окна (170%), но position:fixed не даёт прокрутки вбок:
   такой элемент не входит в область переливания. Прежний absolute
   на 88vw давал те самые три точки перелива на 412. */
.znak-fonom{position:fixed;z-index:-1;pointer-events:none;
  top:-18%;left:50%;width:170%;aspect-ratio:1;
  transform:translateX(-50%);opacity:.13;
  background:url(znak.svg) no-repeat center/contain;
  animation:unroll 3.4s cubic-bezier(.22,.8,.24,1) both,
            dyhanie 6s ease-in-out 3.4s infinite}
/* Края знака гасятся в фон, как в приложении, — иначе он читается
   картинкой поверх страницы, а не свечением под ней. */
.znak-fonom::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 42%,transparent 26%,var(--bg) 68%)}
@keyframes unroll{
  from{opacity:0;transform:translateX(-50%) rotate(-180deg) scale(.55)}
  to{opacity:.13;transform:translateX(-50%) rotate(0) scale(1)}}
@keyframes dyhanie{
  0%,100%{transform:translateX(-50%) scale(1);filter:brightness(1)}
  45%{transform:translateX(-50%) scale(1.055);filter:brightness(1.14)}
  70%{transform:translateX(-50%) scale(1.012);filter:brightness(1.03)}}

@media (prefers-reduced-motion:reduce){
  .znak-fonom{animation:none;opacity:.13;transform:translateX(-50%)}
}

/* ── страница как разговор ───────────────────────────────────────
   Разделы не «озаглавлены», а открыты репликой Стафира: тот же
   знак, то же имя, тот же штамп «ИИ · время», что в приложении.
   Человек читает страницу так же, как будет читать ленту внутри. */
.replika{display:block;max-width:34em;margin:0 0 22px}
.replika .kto{display:flex;align-items:center;gap:6px;margin-bottom:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#b9aaff}
.replika .kto img{width:16px;height:16px;flex:none}
.replika .slovo{font-size:clamp(19px,2.6vw,26px);font-weight:800;
  letter-spacing:-.02em;line-height:1.25;color:var(--t1)}
.replika .pod{display:flex;align-items:center;gap:7px;margin-top:10px;
  padding-top:6px;border-top:1px solid rgba(255,255,255,.07);
  font-size:11px;color:var(--t2)}
.replika .ai{display:inline-block;padding:0 7px;border-radius:99px;
  background:rgba(112,95,251,.22);border:1px solid rgba(112,95,251,.5);
  color:#c4b7ff;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  line-height:1.7}
/* Ответ человека — его же слова, пузырём справа, как в ленте. */
.otvet{margin:0 0 26px;margin-left:auto;max-width:26em;
  background:linear-gradient(135deg,rgba(112,95,251,.22),rgba(185,0,244,.18));
  border:1px solid rgba(112,95,251,.34);border-radius:16px;
  border-bottom-right-radius:5px;padding:12px 15px;color:var(--t1);
  font-size:clamp(14px,1.6vw,16px)}

.obyortka{max-width:1080px;margin:0 auto;padding:0 clamp(18px,5vw,36px)}

/* ── шапка ────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:9;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* padding-block, а не padding: краткая запись обнуляла боковые
   отступы обёртки, и меню прилипало к самому краю экрана — на
   телефоне первый пункт срезался. Видно на снимке автора. */
.shapka{display:flex;align-items:center;gap:12px;padding-block:13px}
.shapka img{height:30px;width:auto}
.shapka .imya{font-weight:800;letter-spacing:-.02em;font-size:1.06em;white-space:nowrap}
.rol{font-size:.68em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--a);border:1px solid color-mix(in srgb,var(--a) 45%,transparent);
  border-radius:999px;padding:.25em .8em;white-space:nowrap}
/* margin-left:auto прижимает меню вправо — но при переполнении он же
   выталкивает его начало ЗА ЛЕВЫЙ КРАЙ экрана, и первый пункт
   срезается. Поймано на снимке автора с телефона: «Что это»
   показывалось как «то это». На узком меню идёт слева. */
/* Меню не переносится на вторую строку: перенос давал липкую шапку
   в 100–127 точек, а она висит поверх чтения всё время. Не влезло —
   значит ширина узкая, и ниже 1100 пункты убираются целиком. */
.shapka nav{margin-left:auto;display:flex;gap:clamp(10px,2vw,26px);
  align-items:center;flex-wrap:nowrap;min-width:0}
.shapka nav a{color:var(--t2);font-weight:600;font-size:.9em;
  transition:color .15s;white-space:nowrap}
.shapka nav a:hover{color:var(--t1)}

/* ── кнопки ──────────────────────────────────────────────────────
   Взяты из приложения, а не придуманы заново: `.btn` в proba.css —
   скруглённый прямоугольник радиусом --r2 (14px), высотой 46–52,
   вес 600. Я налепил здесь круглые «таблетки» с другим весом, и
   автор сразу увидел: «кнопки не такие». Человек, пришедший с
   сайта, обязан узнать кнопку внутри приложения.               */
.knopka{display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 26px;border-radius:14px;
  font-weight:600;font-size:1em;color:#fff;
  background:linear-gradient(120deg,var(--a),var(--a2));
  transition:transform .12s,opacity .18s,filter .2s}
.knopka:hover{filter:brightness(1.06);color:#fff}
.knopka:active{transform:scale(.985);opacity:.9}
.shapka .knopka{min-height:40px;padding:0 16px;font-size:.88em}
.prizrak{display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 22px;border-radius:14px;font-weight:600;
  color:var(--t2);background:var(--sur2);border:1px solid var(--line);
  transition:border-color .2s,color .2s}
.prizrak:hover{border-color:var(--a);color:var(--t1)}
.prizrak:active{transform:scale(.985)}

/* ── герой ────────────────────────────────────────────────────── */
.geroy{padding:clamp(64px,13vh,132px) 0 clamp(44px,8vh,84px)}
.nadzag{display:inline-flex;align-items:center;gap:.6em;
  font-size:.74em;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--a);margin-bottom:22px}
.nadzag::before{content:'';width:2.2em;height:2px;background:var(--a);border-radius:2px}
.geroy h1{font-size:clamp(36px,6.6vw,68px);font-weight:800;
  letter-spacing:-.035em;line-height:1.06;max-width:15em}
.gradientom{background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.geroy .vvod{margin-top:26px;max-width:36em;color:var(--t2);
  font-size:clamp(17px,2.1vw,20px)}
/* Строка узнавания идёт первой и читается ярче второго абзаца: в ней
   человек видит своё положение, а не то, что ему предлагают. Второй
   абзац остаётся вторичным по цвету — брендбук, 01.2: три оттенка
   на экран, цветного текста нет, разница делается яркостью. */
.geroy .uznavanie{margin-top:24px;color:var(--t1);
  font-size:clamp(18px,2.3vw,22px);line-height:1.45}
.geroy .uznavanie b{font-weight:800}
.geroy .uznavanie + .vvod{margin-top:16px}
.geroy .deystviya{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ── разделы ──────────────────────────────────────────────────── */
section{padding:clamp(44px,8vh,88px) 0;border-top:1px solid var(--line)}
.nomer-sekcii{display:block;font-size:.72em;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--a);margin-bottom:12px}
h2{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.025em;
  line-height:1.15;max-width:22em}
.podzag{color:var(--t2);max-width:44em;margin:16px 0 34px}

/* ── карточки ─────────────────────────────────────────────────── */
.setka{display:grid;gap:16px}
@media(min-width:660px){.setka{grid-template-columns:repeat(2,1fr)}
  .setka.tri{grid-template-columns:repeat(3,1fr)}}
.kartochka{background:color-mix(in srgb,var(--sur) 82%,transparent);
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vw,28px);transition:border-color .2s,transform .2s;
  position:relative;overflow:hidden}
.kartochka:hover{border-color:color-mix(in srgb,var(--a) 55%,var(--line));
  transform:translateY(-2px)}
.kartochka h3{font-size:1.12em;font-weight:800;letter-spacing:-.01em;margin-bottom:.4em}
.kartochka p{color:var(--t2);font-size:.94em}
.kartochka p+p{margin-top:.6em}
.kartochka .yarlyk{font-size:.68em;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a);display:block;margin-bottom:10px}

/* ── список-строки ────────────────────────────────────────────── */
.stroki{display:grid;gap:10px;max-width:46em;list-style:none}
.stroki li{background:color-mix(in srgb,var(--sur) 82%,transparent);
  border:1px solid var(--line);border-radius:12px;padding:13px 18px;
  display:flex;gap:14px;align-items:baseline;color:var(--t2);font-size:.96em;
  transition:border-color .2s;
  /* грид-ячейка с flex внутри без этого не ужимается на узких
     экранах — строка выпирала за край на 320 точках */
  min-width:0;flex-wrap:wrap;row-gap:2px}
.stroki li:hover{border-color:color-mix(in srgb,var(--a) 45%,var(--line))}
.stroki li::before{content:'·';color:var(--a);font-weight:800;font-size:1.3em;line-height:1}
.stroki b{color:var(--t1)}

/* ── цепочка шагов (Интерес → … → Ответ) ─────────────────────── */
.tsep{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.tsep .zveno{border:1px solid var(--line);border-radius:999px;padding:.5em 1.1em;
  font-weight:700;font-size:.92em;background:color-mix(in srgb,var(--sur) 82%,transparent)}
.tsep .strelka{color:var(--a);font-weight:800}

/* ── пронумерованные шаги пути ───────────────────────────────── */
.shagi{display:grid;gap:14px;margin-top:6px;counter-reset:shag}
@media(min-width:760px){.shagi{grid-template-columns:repeat(2,1fr)}}
.shag{border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  background:color-mix(in srgb,var(--sur) 82%,transparent);position:relative;
  transition:border-color .2s}
.shag:hover{border-color:color-mix(in srgb,var(--a) 55%,var(--line))}
.shag::before{counter-increment:shag;content:counter(shag);
  display:block;font-size:1.7em;font-weight:800;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;margin-bottom:12px}
.shag b{display:block;font-size:1.06em;letter-spacing:-.01em;margin-bottom:.3em}
.shag p{color:var(--t2);font-size:.94em}

/* ── лестница «не равно» ─────────────────────────────────────── */
.lestnitsa{display:grid;gap:10px;margin-top:6px}
@media(min-width:760px){.lestnitsa{grid-template-columns:repeat(4,1fr)}}
.stupen{border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  background:color-mix(in srgb,var(--sur) 82%,transparent);position:relative}
.stupen b{display:block;margin-bottom:.25em}
.stupen span{color:var(--t2);font-size:.88em}
@media(min-width:760px){
  .stupen:not(:last-child)::after{content:'≠';position:absolute;right:-13px;top:38%;
    color:var(--a);font-weight:800;font-size:1.1em;z-index:1}}

/* ── широкий призыв ──────────────────────────────────────────── */
.prizyv{margin:clamp(44px,8vh,88px) 0;border-radius:26px;position:relative;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--a) 40%,var(--line));
  background:
    radial-gradient(120% 160% at 85% -20%, color-mix(in srgb,var(--a) 26%,transparent), transparent 55%),
    var(--sur);
  padding:clamp(30px,6vw,60px)}
.prizyv h2{max-width:16em}
.prizyv p{color:var(--t2);max-width:36em;margin-top:14px}
.prizyv .knopka{margin-top:30px}

/* ── подвал ──────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:34px 0 52px;color:var(--t3);font-size:.88em}
footer .obyortka{display:grid;gap:8px}
footer a{color:var(--t2)}
footer a:hover{color:var(--t1)}

/* ── появление ───────────────────────────────────────────────────
   Прячет и показывает ТОЛЬКО скрипт: в CSS ничего не скрыто.
   Иначе страница, на которой анимация не проиграется — старый
   браузер, экономия батареи, снимок в безголовом хроме, — осталась
   бы пустой, и человек увидел бы чёрный экран вместо сайта.
   Это ровно тот случай «если Х не сработает, будет пусто».   */
/* Длительность — из брендбука, раздел 13: «Появление реплики ·
   0,3 с · снизу вверх». Было 0,6 — вдвое дольше положенного, и
   страница читалась вялой. Величина не подбирается на глаз. */
/* Блок не просто гаснет и включается — он проявляется из размытия,
   как реплика в приложении: там слово приходит с blur(5px) и оседает
   в резкость. Тот же приём на блоках даёт ту самую прорисовку. */
.spryatan{opacity:0;transform:translateY(14px);filter:blur(5px)}
.pokazan{opacity:1;transform:none;filter:none;
  transition:opacity .3s cubic-bezier(.22,.8,.24,1),
             transform .3s cubic-bezier(.22,.8,.24,1),
             filter .3s cubic-bezier(.22,.8,.24,1)}

/* ── прорисовка слов · @keyframes слово из proba.css ─────────────
   Заголовки-реплики Стафира пишутся так же, как его речь в чате:
   слово за словом, каждое проявляется из размытия снизу вверх за
   0,42 секунды. Величины — blur(5px), blur(1.2px) на 60 %, ход
   cubic-bezier(.22,.8,.24,1) — не подбирались, а взяты из proba.css;
   их тождество стережёт проба 10.

   Скрыто ТОЛЬКО внутри .prorisovka, а класс ставит скрипт в момент
   показа: слова без него полностью видимы, и страница без скрипта
   или со сломанной анимацией никого не встречает пустым заголовком.
   Задержку каждому слову назначает скрипт — она растёт с номером
   слова, отчего строка именно пишется, а не вспыхивает. */
.prorisovka .wd{display:inline-block;
  animation:slovo-syn .42s cubic-bezier(.22,.8,.24,1) both}
@keyframes slovo-syn{
  from{opacity:0;filter:blur(5px);transform:translateY(4px)}
  60%{opacity:.85;filter:blur(1.2px)}
  to{opacity:1;filter:blur(0);transform:none}}

/* «Печатает…» — те же три точки, что в приложении: человек ждёт
   ответ так же, как ждал бы внутри. Стили из proba.css. */
.typing{display:flex;gap:4px;padding:13px 16px;background:var(--sur);
  border:1px solid var(--line);border-radius:16px;
  border-bottom-left-radius:5px;width:fit-content;margin-bottom:9px;
  align-self:flex-start}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--t3);
  animation:tochka 1.4s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes tochka{
  0%,60%,100%{opacity:.3;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none}}
@media (prefers-reduced-motion:reduce){
  .spryatan{opacity:1;transform:none;filter:none}
  .pokazan{transition:none}
  .prorisovka .wd{animation:none}
  html{scroll-behavior:auto}
}
/* ── шапка на телефоне ────────────────────────────────────────────
   Прежде здесь меню переносилось на вторую строку, а главное
   действие пряталось. Выходило наоборот: шапка съедала пятую часть
   экрана и не давала ровно того, ради чего висит. В приложении
   шапка — одна строка, и действие в ней всегда на виду.

   Теперь на телефоне остаются знак, имя и вход; пункты якорей уходят
   — разделы всё равно идут подряд, а прокрутка на телефоне дешевле
   попадания пальцем в мелкий пункт. */
/* Граница 1100, а не 640: на 768 меню переносилось на две строки и
   шапка вырастала до 127 точек, а на 1024 пять пунктов сайта автора
   вместе с именем, ролью и входом не влезали — вход вылезал за край
   на десятки точек. Обе величины намерены прибором. Якорные пункты
   на ноутбуке уступают входу: без них человек прокрутит, без входа
   уйдёт. */
@media (max-width:1100px){
  .shapka nav a:not(.knopka){display:none}
  .shapka nav{margin-left:auto}
  .shapka .knopka{min-height:38px;padding:0 14px;font-size:.84em}
  /* Подпись роли уходит: на сайте автора шапка несла знак, имя,
     «метод ИДА» и вход — вместе они не влезали в 412, и вход
     выезжал за правый край на полсотни точек, утаскивая за собой
     всю страницу. Поймано прибором экранов, не глазами: глазами я
     смотрел только анонс. */
  .rol{display:none}
}
/* Самые узкие телефоны: на 320 знак, имя и вход вместе не влезали —
   вход выезжал за край на двадцать точек и утаскивал страницу вбок.
   Убираем не вход, а лишние точки вокруг него: имя чуть мельче,
   отступы теснее. Порог измерен прибором, а не назначен на глаз. */
@media (max-width:380px){
  .shapka{gap:8px}
  .shapka .imya{font-size:.95em}
  .shapka .knopka{padding:0 12px;font-size:.8em}
}
/* Заголовок раздела не заезжает под липкую шапку при переходе по
   якорю: отступ равен её высоте с запасом. Без этого человек
   попадает на раздел, у которого срезана первая строка. */
[id]{scroll-margin-top:78px}