/* ════════════════════════════════════════════════════════════════════
   «БЕРЕГ» · САЙТ — общий каркас
   Подключается на лендинге, в базе знаний (/wiki/) и документации (/docs/).
   Слой ПОВЕРХ tokens.css (зеркало токенов кабинета) и ДО landing.css.

   Правило одно: цвета, тени, радиусы, отступы и шрифты берутся из токенов
   кабинета. Сайт отличается от кабинета только КРУПНОЙ типографикой и
   ритмом секций — витрине нужен воздух, которого интерфейсу не нужно.
   Сырых HEX здесь нет, кроме белого в инверсных плашках.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Витринная шкала кеглей. В кабинете ровно 9 кеглей до 28px —
        для страницы этого мало, поэтому сверху добавлены три дисплейных
        размера. Внутри макетов кабинета на странице действует шкала
        кабинета, а не эта. ── */
  --fs-d1: clamp(34px, 5.0vw, 58px);   /* h1 первого экрана */
  --fs-d2: clamp(26px, 3.4vw, 40px);   /* h2 секции */
  --fs-d3: clamp(20px, 2.2vw, 26px);   /* h3 крупной плитки */
  --fs-lead: clamp(16px, 1.35vw, 19px);/* лид под заголовком */

  /* Ритм секций */
  --sec-y: clamp(56px, 5.6vw, 88px);
  --sec-y-tight: clamp(40px, 3.8vw, 56px);
  --wrap-max: 1200px;

  /* Движение страницы (длиннее интерфейсного: витрина, а не кнопка) */
  --dur-rv: 620ms;
  --ease-rv: cubic-bezier(.16,.72,.26,1);

  /* ── Тихий текст НА КАНВЕ ──
     Токен --t-4 рассчитан на белую карточку: там он даёт 4,57:1.
     На канве (#F4F8FC) тот же цвет проседает до 4,27:1 и норму AA
     не проходит. Поэтому у сайта есть отдельный «тихий на канве»:
     --t-3 даёт на ней 4,72:1. Правило простое:
       на белой карточке — --t-4, на канве — --t-quiet. */
  --t-quiet: var(--t-3);
}

body{
  background:
    radial-gradient(1200px 520px at 84% -180px, rgba(53,119,200,.10), transparent 68%),
    linear-gradient(180deg, #F0F6FD 0%, var(--bg) 520px);
  background-attachment: fixed;
  background-color: var(--bg);
  overflow-x: hidden;
}

.wrap{ width:100%; max-width:var(--wrap-max); margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:880px; }
@media (max-width:600px){ .wrap{ padding:0 18px; } }

.muted{ color:var(--t-4); }
.mt-16{ margin-top:16px; }
.nowrap{ white-space:nowrap; }

/* Пропустить к содержимому — для клавиатуры и скринридеров */
.skip{
  position:absolute; left:-9999px; top:8px; z-index:100;
  padding:10px 16px; border-radius:var(--r-1);
  background:var(--surf); box-shadow:var(--ev-3); color:var(--acc-ink);
  font-weight:var(--fw-semibold);
}
.skip:focus{ left:16px; }

/* ════════════════════════════════════════════════════════════════════
   ШАПКА
   ════════════════════════════════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(244,248,252,.72);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.nav.is-stuck{
  background:rgba(247,250,253,.88);
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(16,42,67,.02), 0 10px 28px -22px rgba(16,42,67,.5);
}
.nav-in{ display:flex; align-items:center; gap:24px; height:68px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
/* В вики и документации марка свёрстана через <br>. Имя и подпись теперь
   сами блочные, поэтому перенос лишний — иначе шапка растёт на строку. */
.brand br{ display:none; }
.brand-mark{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:11px;
  background:linear-gradient(160deg, var(--acc-soft), var(--acc-d));
  color:var(--on-acc);
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg);
  box-shadow:0 4px 12px rgba(53,119,200,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.brand-name{
  display:block;
  font-family:var(--font-display); font-weight:800; font-size:17px;
  color:var(--t-1); letter-spacing:.01em; line-height:1.1;
}
.brand-sub{
  display:block; margin-top:1px;
  font-size:var(--fs-xs); letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--t-quiet); font-weight:var(--fw-semibold);
}

.nav-links{ display:flex; gap:4px; margin-left:auto; }
.nav-links a{
  padding:8px 12px; border-radius:var(--r-1);
  font-size:var(--fs-md); font-weight:var(--fw-medium); color:var(--t-3);
  text-decoration:none;
  transition:color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav-links a:hover{ color:var(--t-1); background:rgba(255,255,255,.7); }
/* Раздел, который сейчас на экране: на странице в двадцать экранов
   человек должен видеть, где он, не гадая по заголовкам. */
.nav-links a.is-here{ color:var(--acc-ink); background:var(--acc-sk); }
.nav-act{ display:flex; align-items:center; gap:8px; flex:none; }
.nav-cta{ flex:none; }

.nav-burger{
  display:none; width:38px; height:38px; flex:none;
  align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:var(--r-1);
  background:var(--surf); color:var(--t-2);
}
.nav-burger svg{ width:20px; height:20px; }

.nav-sheet{
  display:none;
  border-top:1px solid var(--line);
  background:rgba(247,250,253,.97);
  backdrop-filter:blur(16px);
  padding:12px 0 18px;
}
.nav-sheet.is-open{ display:block; }
/* :not(.btn) обязателен: без него правило перекрашивало кнопку меню
   в тёмный текст поверх синей заливки (контраст 2,3:1) и подчёркивало
   её линией разделителя. */
.nav-sheet a:not(.btn){
  display:block; padding:12px 4px;
  font-size:var(--fs-body); color:var(--t-2);
  border-bottom:1px solid var(--line);
}
.nav-sheet .btn{ margin-top:14px; }

@media (max-width:940px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-act .btn-ghost{ display:none; }
  .nav-in{ gap:12px; }
  .nav-act{ margin-left:auto; }
}
@media (max-width:520px){
  .nav-act .btn{ display:none; }
  .brand-sub{ display:none; }
}

/* ════════════════════════════════════════════════════════════════════
   СЕКЦИИ
   ════════════════════════════════════════════════════════════════════ */
.sec{ padding:var(--sec-y) 0; position:relative; }
.sec-tight{ padding:var(--sec-y-tight) 0; }
.sec-head{ max-width:760px; margin-bottom:clamp(28px,3.4vw,46px); }
.sec-head-c{ margin-left:auto; margin-right:auto; text-align:center; }

.sec-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--acc-ink);
}
.sec-tag::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--acc); flex:none;
}
.sec-head-c .sec-tag{ justify-content:center; }

.sec h2{ font-size:var(--fs-d2); line-height:1.1; margin-top:14px; letter-spacing:-.02em; }
.sec-lead{
  margin-top:16px; font-size:var(--fs-lead); color:var(--t-3);
  line-height:1.6; max-width:64ch;
}
.sec-head-c .sec-lead{ margin-left:auto; margin-right:auto; }

/* Тонкая волна-разделитель: «берег» как графика, а не как картинка */
.sec-wave{ display:block; width:100%; height:34px; color:var(--acc); opacity:.16; }

/* Инверсная секция — ритм страницы, как в кабинете .card-ink */
.sec-ink{
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(140,187,236,.16), transparent 62%),
    var(--ink);
  color:var(--t-inv);
}
.sec-ink h2, .sec-ink h3, .sec-ink h4{ color:var(--t-inv); }
.sec-ink .sec-lead, .sec-ink p{ color:rgba(234,241,249,.74); }
.sec-ink .sec-tag{ color:var(--acc-bright); }
/* Плитка цвета --ink на секции цвета --ink сливается с фоном и перестаёт
   быть карточкой. Приподнимаем её лёгкой полупрозрачной поверхностью. */
.sec-ink .card{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.09);
  box-shadow:none;
}
.sec-ink .sec-tag::before{ background:var(--acc-bright); }

/* ── Первый экран (общий для сайта: вики и документация им тоже пользуются) ── */
.hero{ padding:clamp(40px,5vw,72px) 0 0; }
.hero h1{ font-size:var(--fs-d1); line-height:1.06; letter-spacing:-.028em; }
.hero-lead{
  margin-top:20px; font-size:var(--fs-lead); color:var(--t-3);
  line-height:1.6; max-width:60ch;
}

/* ════════════════════════════════════════════════════════════════════
   КНОПКИ · размеры сверх кабинетных
   ════════════════════════════════════════════════════════════════════ */
.btn{ text-decoration:none; }
.btn-lg{ padding:13px 24px; font-size:var(--fs-body); border-radius:var(--r-2); }
.btn-sm{ padding:6px 12px; font-size:var(--fs-base); }
.btn-block{ width:100%; justify-content:center; }
.btn-on-accent{ background:var(--surf); color:var(--acc-ink); border-color:transparent; }
.btn-on-accent:hover{ background:#fff; }
.btn-on-ink{
  background:rgba(255,255,255,.08); color:var(--t-inv);
  border:1px solid rgba(255,255,255,.18);
}
.btn-on-ink:hover{ background:rgba(255,255,255,.14); }

/* ════════════════════════════════════════════════════════════════════
   ПОДВАЛ
   ════════════════════════════════════════════════════════════════════ */
.foot{ border-top:1px solid var(--line); padding:clamp(40px,4vw,60px) 0 44px; background:rgba(255,255,255,.5); }
.foot-in{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.foot-note{ font-size:var(--fs-md); color:var(--t-quiet); }
.foot-links{ margin-left:auto; display:flex; gap:20px; flex-wrap:wrap; }
.foot-links a{ font-size:var(--fs-md); color:var(--t-3); text-decoration:none; }
.foot-links a:hover{ color:var(--acc-ink); }

/* Расширенный подвал лендинга: колонки + нижняя строка */
.foot-cols{
  display:grid; gap:32px;
  grid-template-columns:minmax(240px,1.4fr) repeat(3, minmax(140px,1fr));
  padding-bottom:32px; margin-bottom:26px; border-bottom:1px solid var(--line);
}
.foot-about{ font-size:var(--fs-md); color:var(--t-3); line-height:1.6; margin-top:14px; max-width:38ch; }
.foot-col-t{
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--t-quiet); margin-bottom:12px;
}
.foot-col a{ display:block; padding:5px 0; font-size:var(--fs-md); color:var(--t-3); }
.foot-col a:hover{ color:var(--acc-ink); }
@media (max-width:820px){ .foot-cols{ grid-template-columns:1fr 1fr; gap:26px; } }
@media (max-width:520px){ .foot-cols{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════════════
   РАССЫЛКА И ШЕРИНГ (используются и в вики)
   ════════════════════════════════════════════════════════════════════ */
.sub-card{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr) 320px; align-items:start; padding:clamp(24px,3vw,38px); }
@media (max-width:860px){ .sub-card{ grid-template-columns:minmax(0,1fr); gap:24px; } }
.sub-card h2{ font-size:clamp(22px,2.6vw,30px); margin-top:10px; max-width:24ch; }
.sub-lead{ margin-top:12px; font-size:var(--fs-body); color:var(--t-2); line-height:1.65; max-width:60ch; }
.sub-why{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.sub-why li{ font-size:var(--fs-md); color:var(--t-3); line-height:1.55; padding-left:18px; position:relative; }
.sub-why li::before{ content:"·"; position:absolute; left:6px; color:var(--acc); font-weight:700; }
.sub-form{ display:flex; flex-direction:column; gap:12px; }
.sub-note{ font-size:var(--fs-sm); color:var(--t-4); line-height:1.5; }
.sub-ok{ font-size:var(--fs-md); color:var(--acc-ink); font-weight:600; line-height:1.5; }
.share-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:18px; }
.share-cap{ font-size:var(--fs-md); color:var(--t-3); margin-right:4px; }

/* ════════════════════════════════════════════════════════════════════
   ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   Базовый механизм страницы: элемент с .rv ждёт своей очереди, JS вешает
   .is-in. Без JS (или при выключенной анимации) всё видно сразу —
   поэтому скрытие включается ТОЛЬКО когда на <html> стоит .js-motion.
   ════════════════════════════════════════════════════════════════════ */
.js-motion .rv{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--dur-rv) var(--ease-rv), transform var(--dur-rv) var(--ease-rv);
  transition-delay:calc(var(--i, 0) * 70ms);
  will-change:opacity, transform;
}
.js-motion .rv.is-in{ opacity:1; transform:none; }
.js-motion .rv-left{ transform:translateX(-22px); }
.js-motion .rv-right{ transform:translateX(22px); }
.js-motion .rv-scale{ transform:translateY(14px) scale(.985); }

@media (prefers-reduced-motion: reduce){
  .js-motion .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

@media (max-width:760px){
  .sec-head{ margin-bottom:26px; }
}