/* ============================================================
   FeedToSite — дизайн-система v2. Один источник правды для
   лендинга (index.html), кабинета (cabinet.html) и демо (demo.html).

   Мир: светлая воздушная страница, крупные скругления, точечные
   градиентные акценты и стеклянные плитки поверх градиента.

   Сюда НЕ входит widget.js — у виджета своя намеренно нейтральная
   система: он служит чужому сайту, а не нам. Токены отсюда в него
   не течь не должны.

   Порядок файла:
     1. Шрифты
     2. Токены
     3. Сброс и основание
     4. Раскладка: контейнер, секции, сетки, стопки
     5. Типографика
     6. Примитивы (кнопка … модальное окно)
     7. Движение
   ============================================================ */

/* ============================================================
   1. ШРИФТЫ. Только локальные файлы: внешний CDN для российского
   сайта — лишняя точка отказа. Файлы переменные, 400–800 в одном.
   Кириллица и латиница разведены по unicode-range, чтобы браузер
   качал только нужное.
   ============================================================ */

@font-face{
  font-family:"Unbounded";
  src:url("fonts/unbounded-cyrillic.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Unbounded";
  src:url("fonts/unbounded-latin.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Onest";
  src:url("fonts/onest-cyrillic.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Onest";
  src:url("fonts/onest-latin.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   2. ТОКЕНЫ
   ============================================================ */

:root{
  /* --- Палитра --------------------------------------------- */
  --bg:#FBFCFE;                      /* фон страницы */
  --surface:#FFFFFF;                 /* карточка */
  --surface-2:#F4F6FA;               /* вложенная поверхность: поле, трек, код */
  --glass:rgba(255,255,255,.62);     /* стеклянная плитка */

  --ink:#0E1420;                     /* основной текст, 17.6:1 по --bg */
  --ink-2:#5B6676;                   /* вторичный текст, 5.7:1 по --bg */
  --ink-3:#8B95A5;                   /* подписи, 3.0:1 — только крупный или необязательный текст */
  --line:rgba(14,20,32,.08);         /* границы */
  --line-2:rgba(14,20,32,.14);       /* граница активного контрола */

  --brand:#2F7DF6;                   /* основной акцент */
  --brand-2:#6366F1;                 /* второй стоп градиента */
  --brand-ink:#1D5FD1;               /* тот же акцент, но пригодный для текста: 5.8:1 по белому */
  --brand-soft:rgba(47,125,246,.10); /* мягкая подложка акцента */

  --lime:#C6F24E;
  --coral:#FF6B5A;
  --mint:#35D6A4;
  --violet:#A78BFA;

  /* Текст поверх ярких акцентов: на лайме и мяте белый не читается */
  --on-lime:#243007;
  --on-coral:#3A0F09;
  --on-mint:#06301F;
  --on-violet:#1E1046;

  /* Статусы. До системы на одну роль приходилось два разных зелёных
     и два красных — здесь по одному значению на роль.
     Цвета углублены против первой редакции: статус почти всегда идёт
     буквами по своей же мягкой подложке (.note, .badge, .btn--danger),
     а там прежние #0E8F5F / #A96B00 / #D6382B давали 3.6 / 3.9 / 4.1:1.
     Текущие значения на своей подложке — 4.7 / 5.0 / 4.9:1. */
  --ok:#0B7A51;
  --warn:#8F5A00;
  --bad:#C22A1A;
  --ok-soft:rgba(11,122,81,.10);
  --warn-soft:rgba(143,90,0,.10);
  --bad-soft:rgba(194,42,26,.10);

  /* --- Градиенты -------------------------------------------- */
  --grad-brand:linear-gradient(135deg,#2F7DF6,#6366F1);
  /* Тот же градиент, углублённый под белый текст мелким кеглем:
     на светлом варианте белое 15px даёт 3.9:1, на этом — 5.8:1. */
  --grad-brand-strong:linear-gradient(135deg,#1D5FD1,#4F46E5);
  /* Аврора: подложка секции. Голубой → сиреневый → мятный,
     насыщенность каждого стопа ≤ 12 % (HSV), поэтому поверх
     спокойно живут текст и стекло. */
  /* Подложка заметно плотнее исходной: белые карточки и стекло на бледном
     фоне сливались с ним, и плиты переставали читаться как отдельные блоки. */
  --grad-aurora:
    radial-gradient(120% 78% at 10% 0%,   #CFE0FB 0%, rgba(207,224,251,0) 62%),
    radial-gradient(96% 70% at 88% 6%,    #DED3FB 0%, rgba(222,211,251,0) 64%),
    radial-gradient(110% 86% at 52% 104%, #CBEFE1 0%, rgba(203,239,225,0) 66%),
    #EEF2F9;
  /* Тёплое свечение — второй вариант подложки, для финального CTA */
  --grad-warm:
    radial-gradient(90% 70% at 50% 0%, #FFE2D2 0%, rgba(255,226,210,0) 60%),
    radial-gradient(80% 80% at 80% 100%, #DCE2FF 0%, rgba(220,226,255,0) 62%),
    #F1F0F6;

  /* --- Радиусы ---------------------------------------------- */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;
  --r-barrel:999px / 44%;   /* «бочка»: радиус больше половины короткой стороны */

  /* --- Тени -------------------------------------------------- */
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 12px 32px -10px rgba(16,24,40,.12);
  --sh-3:0 48px 90px -40px rgba(30,60,120,.20);

  /* --- Отступы: шаг кратен 4 --------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* --- Сетка ------------------------------------------------- */
  --wrap:1240px;
  --wrap-wide:1560px;               /* рабочие экраны: настройки + превью рядом */
  --gutter:clamp(16px,4vw,32px);
  --gap:24px;

  /* --- Типографика ------------------------------------------ */
  --font-display:"Unbounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-text:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --t-display:clamp(40px,6.4vw,88px);
  --t-h2:clamp(30px,3.6vw,52px);
  --t-h3:22px;
  --t-h4:17px;              /* заголовок плотного блока в кабинете */
  --t-lede:clamp(17px,1.4vw,21px);
  --t-body:16px;
  --t-meta:13px;

  --measure:64ch;           /* предельная ширина абзаца */

  /* --- Движение ---------------------------------------------- */
  --mo-fast:160ms;
  --mo-base:240ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* --- Размеры контролов ------------------------------------- */
  --ctl-h:46px;             /* кнопка и поле одной высоты — иначе форма «прыгает» */
  --ctl-h-sm:38px;
  --ctl-h-lg:54px;
}

/* ============================================================
   3. СБРОС И ОСНОВАНИЕ
   ============================================================ */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
/* Якорь не должен уезжать под липкую шапку */
:target{ scroll-margin-top:96px }

body{
  margin:0;
  font-family:var(--font-text);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}
p,figure,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0 }
img,svg,video{ max-width:100%; display:block }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; padding:0 }
a{ color:inherit }
hr{ border:0; height:1px; background:var(--line); margin:0 }
[hidden]{ display:none !important }

/* Фокус виден всегда и одинаково. До системы во всех файлах
   было ноль правил :focus — навигация с клавиатуры была невидима. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
:where(a,button,input,select,textarea,summary,[tabindex]):focus:not(:focus-visible){ outline:none }

::selection{ background:rgba(47,125,246,.18); color:var(--ink) }

/* Скрыто визуально, но читается скринридером */
.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ============================================================
   4. РАСКЛАДКА
   ============================================================ */

/* Контейнер: 1240 по центру, поля резиновые */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* Широкий контейнер — для экранов, где панель настроек и превью стоят рядом:
   на 1240 превью сжимается до ширины, при которой виджет сам уходит в две
   колонки, и настройка «колонки» перестаёт что-либо показывать. */
.wrap--wide{ max-width:var(--wrap-wide) }
.wrap--narrow{ max-width:860px }
.wrap--tight{ max-width:620px }

/* Вертикальный ритм секций */
.section{ padding-block:clamp(72px,9vw,128px); position:relative }
.section--sm{ padding-block:clamp(48px,6vw,80px) }
.section--aurora{ background:var(--grad-aurora) }
.section--warm{ background:var(--grad-warm) }

/* Шапка секции: надзаголовок, заголовок, лид */
.section__head{
  display:flex; flex-direction:column; gap:var(--sp-4);
  max-width:760px; margin-bottom:var(--sp-7);
}
.section__head--center{ margin-inline:auto; text-align:center; align-items:center }

/* Сетка 12 колонок. Спаны схлопываются на узком экране. */
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap) }
.sp-2{ grid-column:span 2 } .sp-3{ grid-column:span 3 } .sp-4{ grid-column:span 4 }
.sp-5{ grid-column:span 5 } .sp-6{ grid-column:span 6 } .sp-7{ grid-column:span 7 }
.sp-8{ grid-column:span 8 } .sp-9{ grid-column:span 9 } .sp-12{ grid-column:span 12 }

/* Готовые колоночные раскладки — когда 12 колонок избыточны */
.cols{ display:grid; gap:var(--gap); grid-template-columns:repeat(var(--n,3),minmax(0,1fr)) }
.cols-2{ --n:2 } .cols-3{ --n:3 } .cols-4{ --n:4 }

/* Bento: плитки разного размера в одной сетке */
.bento{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:minmax(180px,auto);
}
.bento > *{ grid-column:span 2 }
.bento .wide{ grid-column:span 4 }
.bento .full{ grid-column:span 6 }
.bento .tall{ grid-row:span 2 }

/* Стопка и ряд — вместо десятка одноразовых margin-ов */
.stack{ display:flex; flex-direction:column; gap:var(--sp-4) }
.stack--sm{ gap:var(--sp-2) }
.stack--lg{ gap:var(--sp-6) }
.row{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap }
.row--tight{ gap:var(--sp-2) }
.row--nowrap{ flex-wrap:nowrap }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3) }
.center{ text-align:center }
.push{ margin-left:auto }

/* Стенд: слева липкий объект, справа прокручиваемые шаги.
   Главный приём лендинга. На мобильном липкость выключается. */
.stage{ display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start }
.stage__pin{ position:sticky; top:clamp(16px,6vh,88px) }
.stage__steps{ display:flex; flex-direction:column; gap:clamp(48px,14vh,160px) }

@media (max-width:980px){
  .grid > [class*="sp-"]{ grid-column:span 12 }
  .cols{ --n:2 }
  .bento > *{ grid-column:span 3 }
  .bento .wide,.bento .full{ grid-column:span 6 }
  .bento .tall{ grid-row:span 1 }
  .stage{ grid-template-columns:minmax(0,1fr) }
  .stage__pin{ position:static }
  .stage__steps{ gap:var(--sp-6) }
}
@media (max-width:640px){
  .cols{ --n:1 }
  .bento > *{ grid-column:span 6 }
  :root{ --gap:16px }
}

/* ============================================================
   5. ТИПОГРАФИКА
   ============================================================ */

.display{ font-family:var(--font-display); font-size:var(--t-display); font-weight:800; line-height:1.02; letter-spacing:-.035em }
.h2{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:800; line-height:1.06; letter-spacing:-.03em }
.h3{ font-family:var(--font-display); font-size:var(--t-h3); font-weight:700; line-height:1.2; letter-spacing:-.02em }
.h4{ font-family:var(--font-display); font-size:var(--t-h4); font-weight:700; line-height:1.3; letter-spacing:-.01em }

.lede{ font-size:var(--t-lede); line-height:1.5; color:var(--ink-2); max-width:var(--measure) }
.body{ font-size:var(--t-body); line-height:1.6; max-width:var(--measure) }
.meta{ font-size:var(--t-meta); font-weight:500; letter-spacing:.01em; color:var(--ink-2) }
.hint{ font-size:var(--t-meta); line-height:1.45; color:var(--ink-2) }
.muted{ color:var(--ink-2) }
/* Снимает ограничение длины строки. Нужно там, где абзац стоит в широкой
   плите один: 64 знака посреди полутора тысяч пикселей выглядят обрывком,
   а не абзацем. Для читаемых текстов ограничение не снимать. */
.text-full{ max-width:none }
/* Старая цена рядом с новой: зачёркнута и приглушена, чтобы читалась
   как скидка, а не как вторая цена. */
.plan__old{ font-size:.62em; color:var(--ink-3); margin-right:.35em; font-weight:600 }
.card--accent .plan__old{ color:rgba(255,255,255,.72) }
/* --ink-3 — 3.0:1. Только там, где текст декоративный или дублирует
   соседний: номер шага, водяная подпись. Смысловую подпись — .meta. */
.faint{ color:var(--ink-3) }

/* Надзаголовок секции: короткая строка над h2 */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--t-meta); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brand-ink);
}

/* Выделение куска заголовка градиентом. Не более одного на экран. */
.grad-text{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.link{
  color:var(--brand-ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:rgba(29,95,209,.35);
  transition:text-decoration-color var(--mo-fast) var(--ease);
}
.link:hover{ text-decoration-color:currentColor }
.link--quiet{ color:inherit; text-decoration-color:var(--line-2) }

.list{ list-style:none; display:flex; flex-direction:column; gap:var(--sp-2) }
.list li{ position:relative; padding-left:26px; color:var(--ink-2) }
.list li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--brand);
}

/* ============================================================
   6. ПРИМИТИВЫ
   ============================================================ */

/* --- 6.1 Кнопка -------------------------------------------- */

.btn{
  --btn-bg:var(--surface);
  --btn-ink:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--ctl-h);
  padding:0 22px;
  font-family:var(--font-text);
  font-size:15px; font-weight:600; line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-decoration:none;
  color:var(--btn-ink);
  background:var(--btn-bg);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
  cursor:pointer;
  transition:transform var(--mo-fast) var(--ease),
             box-shadow var(--mo-fast) var(--ease),
             background-color var(--mo-fast) var(--ease),
             border-color var(--mo-fast) var(--ease),
             opacity var(--mo-fast) var(--ease);
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--sh-2) }
.btn:active{ transform:translateY(0); box-shadow:var(--sh-1) }

/* Основное действие: градиент. На странице одно, максимум два. */
.btn--primary{
  --btn-ink:#fff;
  background:var(--grad-brand-strong);
  border-color:transparent;
  box-shadow:0 10px 24px -12px rgba(47,125,246,.75);
}
.btn--primary:hover{ box-shadow:0 16px 34px -12px rgba(47,125,246,.8) }

/* Второе действие: обводка по светлому */
.btn--ghost{
  background:transparent;
  border-color:var(--line-2);
  box-shadow:none;
}
.btn--ghost:hover{ background:rgba(14,20,32,.04); box-shadow:none }

/* Третье действие: только текст */
.btn--quiet{
  background:transparent; border-color:transparent; box-shadow:none;
  color:var(--ink-2); padding-inline:12px;
}
.btn--quiet:hover{ color:var(--ink); background:rgba(14,20,32,.04); box-shadow:none; transform:none }

/* Разрушающее действие. Заливкой не делаем: удаление не должно
   быть самой заметной кнопкой на экране. */
.btn--danger{
  color:var(--bad); background:var(--bad-soft);
  border-color:rgba(194,42,26,.2); box-shadow:none;
}
.btn--danger:hover{ background:rgba(194,42,26,.16); box-shadow:none }

/* Кнопка поверх стекла и фото — белая полупрозрачная */
/* Кнопка с бегущей радужной каймой. Перенесена из внешнего компонента,
   написанного на React и Tailwind: ни того, ни другого в проекте нет,
   поэтому это обычный вариант .btn — та же высота, тот же радиус, тот же
   шрифт. От оригинала осталась суть: белая заливка, кайма из пяти цветов
   и размытое свечение под кнопкой, оба слоя едут по кругу.

   Приём громкий и правило «не больше двух ярких акцентов на экран» он
   нарушает сознательно: ставится один раз, на главное действие страницы. */
.btn--rainbow{
  --rb-1:0 100% 63%;
  --rb-2:270 100% 63%;
  --rb-3:210 100% 63%;
  --rb-4:195 100% 63%;
  --rb-5:90 100% 63%;
  --rb-speed:2.4s;
  --rb-line:linear-gradient(90deg,
    hsl(var(--rb-1)), hsl(var(--rb-5)), hsl(var(--rb-3)), hsl(var(--rb-4)), hsl(var(--rb-2)));
  position:relative;
  /* Своя система наложения: без неё свечение с z-index:-1 уезжает за фон
     карточки, на которой стоит кнопка, и его попросту не видно. */
  isolation:isolate;
  color:var(--ink);
  border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, var(--rb-line) border-box;
  background-size:100% 100%, 200% 100%;
  animation:rb-slide var(--rb-speed) linear infinite;
  box-shadow:var(--sh-2);
}
.btn--rainbow:hover{ transform:translateY(-2px); box-shadow:var(--sh-3) }
/* Свечение под кнопкой. ::before у .btn занят спиннером, поэтому ::after. */
.btn--rainbow::after{
  content:"";
  position:absolute; left:50%; bottom:-16%; z-index:-1;
  width:64%; height:44%;
  transform:translateX(-50%);
  border-radius:var(--r-pill);
  background:var(--rb-line);
  background-size:200% 100%;
  filter:blur(13px);
  animation:rb-slide var(--rb-speed) linear infinite;
}
@keyframes rb-slide{ from{ background-position:0% } to{ background-position:200% } }

.btn--onglass{
  background:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
}

.btn--sm{ min-height:var(--ctl-h-sm); padding-inline:16px; font-size:14px }
.btn--lg{ min-height:var(--ctl-h-lg); padding-inline:30px; font-size:16px }
.btn--block{ width:100% }
.btn--icon{ padding:0; width:var(--ctl-h); aspect-ratio:1 }
.btn--icon.btn--sm{ width:var(--ctl-h-sm) }

.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;
  filter:saturate(.4);
}
/* Занят: текст остаётся, слева крутится точка */
.btn.is-busy{ pointer-events:none; opacity:.8 }
.btn.is-busy::before{
  content:""; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite;
}

@keyframes spin{ to{ transform:rotate(360deg) } }

/* --- 6.2 Чип ------------------------------------------------ */

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px;
  font-size:var(--t-meta); font-weight:600; letter-spacing:.02em;
  line-height:1.2;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
  text-decoration:none;
  transition:background-color var(--mo-fast) var(--ease),
             color var(--mo-fast) var(--ease),
             border-color var(--mo-fast) var(--ease),
             transform var(--mo-fast) var(--ease);
}
button.chip{ cursor:pointer }
button.chip:hover{ transform:translateY(-1px); border-color:var(--line-2) }

/* Активный чип — градиент. Работает и для кнопок-фильтров. */
.chip.is-active,.chip[aria-pressed="true"]{
  color:#fff; background:var(--grad-brand-strong); border-color:transparent;
}
.chip--lime  { background:var(--lime);   color:var(--on-lime);   border-color:transparent }
.chip--coral { background:var(--coral);  color:#fff;             border-color:transparent }
.chip--mint  { background:var(--mint);   color:var(--on-mint);   border-color:transparent }
.chip--violet{ background:var(--violet); color:var(--on-violet); border-color:transparent }
.chip--soft  { background:var(--brand-soft); color:var(--brand-ink); border-color:transparent; box-shadow:none }
.chip--lg{ padding:10px 18px; font-size:14px }

/* Хэштег в тексте поста и в фильтре */
.tag{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600;
  color:var(--brand-ink); background:var(--brand-soft);
}

/* --- 6.3 Карточка ------------------------------------------- */

.card{
  position:relative;
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:clamp(20px,2.4vw,32px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
}
.card--sm{ padding:var(--sp-4); border-radius:var(--r-lg); gap:var(--sp-2) }
.card--flat{ box-shadow:none }
/* Реакция на курсор: подъём 3 px и тень глубже */
.card--lift{ transition:transform var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease) }
.card--lift:hover{ transform:translateY(-3px); box-shadow:var(--sh-3) }
/* Одна карточка на секцию может быть залита градиентом */
.card--accent{
  color:#fff; background:var(--grad-brand-strong);
  border-color:transparent; box-shadow:var(--sh-3);
}
.card--accent .lede,.card--accent .meta,.card--accent .muted{ color:rgba(255,255,255,.82) }
.card--accent .link{ color:#fff; text-decoration-color:rgba(255,255,255,.5) }
/* Приподнятая карточка тарифа */
.card--raised{ box-shadow:var(--sh-3); transform:translateY(-8px) }
@media (max-width:980px){ .card--raised{ transform:none } }

.card__title{ font-family:var(--font-display); font-size:var(--t-h4); font-weight:700; letter-spacing:-.01em }
.card__media{ margin:calc(-1 * clamp(20px,2.4vw,32px)); margin-bottom:0; border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden }
.card__media img{ width:100%; height:100%; object-fit:cover }
.card__foot{ margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--line) }

/* Карточка с вырезанным углом (приём №12): в вырез вкладывается
   иконка. Поверхность рисует ::before — только его и можно резать,
   иначе clip-path съест и саму иконку. Тень даём фильтром на
   родителе: обычный box-shadow обрезается вместе с формой. */
.card--cut{
  --cut:84px;
  background:none; border:0; box-shadow:none;
  padding-top:clamp(20px,2.4vw,32px);
  filter:drop-shadow(0 10px 26px rgba(16,24,40,.12));
  isolation:isolate;
}
.card--cut::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--surface);
  border-radius:var(--r-xl);
  clip-path:polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    calc(100% - var(--cut)) var(--cut),
    100% var(--cut),
    100% 100%,
    0 100%
  );
}
.card--cut > *{ position:relative; z-index:1 }
.card--cut .card__notch{
  position:absolute; top:0; right:0; z-index:2;
  width:calc(var(--cut) - 14px); height:calc(var(--cut) - 14px);
  display:grid; place-items:center;
  border-radius:var(--r-lg);
  background:var(--grad-brand-strong); color:#fff;
}
/* Первая строка не должна лезть под вырез */
.card--cut > :first-child{ padding-right:calc(var(--cut) - 8px) }

/* --- 6.4 Стеклянная плитка ---------------------------------- */

/* Стекло только поверх градиентной подложки (.section--aurora,
   .section--warm, .card--accent). Поверх фотографии не ставить —
   текст на ней перестаёт читаться. */
.glass{
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--sh-2);
  border-radius:var(--r-xl);
}
/* Плитка = стекло + внутренние поля карточки. Состав повторён
   целиком, а не через composes: это обычный CSS, не CSS Modules. */
.tile{
  position:relative;
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:clamp(20px,2.4vw,32px);
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(255,255,255,.75);
  border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--sh-2);
}
/* Браузер без backdrop-filter получает плотную подложку, а не мутное пятно */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.tile{ background:rgba(255,255,255,.9) }
}

/* --- 6.5 «Бочка» -------------------------------------------- */

/* Прямоугольник с радиусом больше половины короткой стороны.
   Роль: номерная карточка шага и один акцентный блок на странице. */
.barrel{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:clamp(24px,3vw,40px) clamp(28px,4vw,56px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-barrel);
  box-shadow:var(--sh-2);
}
.barrel--accent{ color:#fff; background:var(--grad-brand-strong); border-color:transparent }
.barrel--glass{
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-color:rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--sh-2);
}
/* Номер шага — крупная цифра в кружке-бочке */
.barrel__num{
  display:grid; place-items:center;
  width:44px; height:44px; flex:0 0 auto;
  font-family:var(--font-display); font-weight:800; font-size:18px;
  color:#fff; background:var(--grad-brand-strong);
  border-radius:var(--r-pill);
}
.barrel--accent .barrel__num{ color:var(--brand-ink); background:#fff }

/* --- 6.6 Иконка в цветной плашке ---------------------------- */

.ibox{
  display:grid; place-items:center;
  width:48px; height:48px; flex:0 0 auto;
  border-radius:var(--r-md);
  background:var(--brand-soft); color:var(--brand-ink);
}
.ibox svg{ width:24px; height:24px; stroke:currentColor; stroke-width:1.6; fill:none }
.ibox--lime  { background:rgba(198,242,78,.28);  color:var(--on-lime) }
.ibox--coral { background:rgba(255,107,90,.16);  color:#B23A2C }
.ibox--mint  { background:rgba(53,214,164,.18);  color:#0B7355 }
.ibox--violet{ background:rgba(167,139,250,.20); color:#5B34C4 }
.ibox--solid { background:var(--grad-brand-strong); color:#fff }
.ibox--lg{ width:56px; height:56px; border-radius:var(--r-lg) }
.ibox--lg svg{ width:28px; height:28px }

/* --- 6.7 Поле ввода ----------------------------------------- */

.field{ display:flex; flex-direction:column; gap:6px }
.field > label,.label{
  font-size:var(--t-meta); font-weight:600; letter-spacing:.01em; color:var(--ink-2);
}
.input,.select,.textarea{
  width:100%;
  min-height:var(--ctl-h);
  padding:11px 14px;
  font-family:var(--font-text); font-size:15px; line-height:1.4;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  transition:border-color var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease);
}
.textarea{ min-height:110px; resize:vertical }
.input::placeholder,.textarea::placeholder{ color:var(--ink-3); opacity:1 }
.input:hover,.select:hover,.textarea:hover{ border-color:rgba(14,20,32,.24) }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-soft);
}
.input[disabled],.select[disabled],.textarea[disabled]{
  background:var(--surface-2); color:var(--ink-3); cursor:not-allowed;
}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--bad); box-shadow:0 0 0 4px var(--bad-soft);
}
.select{
  appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5' fill='none' stroke='%235B6676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
}

/* Поле + кнопка в одну строку (email в герое, добавление канала) */
.inline-form{ display:flex; gap:var(--sp-2); align-items:stretch; flex-wrap:wrap }
.inline-form .input{ flex:1 1 220px; min-width:0 }
.inline-form .btn{ flex:0 0 auto }

/* Ошибка под полем */
.err{
  display:flex; gap:6px; align-items:flex-start;
  font-size:var(--t-meta); line-height:1.4; color:var(--bad);
}

/* Флажок */
.check{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; color:var(--ink); cursor:pointer;
}
.check input[type="checkbox"]{
  width:18px; height:18px; margin:0; flex:0 0 auto;
  accent-color:var(--brand); cursor:pointer;
}
.check:has(input[disabled]){ color:var(--ink-3); cursor:not-allowed }
.check input[disabled]{ cursor:not-allowed }

/* Тумблер: там, где переключение действует сразу, без «Сохранить» */
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:14px }
.switch input{ position:absolute; opacity:0; width:0; height:0 }
.switch__track{
  position:relative; width:42px; height:24px; flex:0 0 auto;
  background:rgba(14,20,32,.16); border-radius:var(--r-pill);
  transition:background-color var(--mo-fast) var(--ease);
}
.switch__track::after{
  content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:var(--sh-1);
  transition:transform var(--mo-fast) var(--ease);
}
.switch input:checked + .switch__track{ background:var(--grad-brand-strong) }
.switch input:checked + .switch__track::after{ transform:translateX(18px) }
.switch input:focus-visible + .switch__track{ outline:3px solid var(--brand); outline-offset:2px }
.switch input[disabled] + .switch__track{ opacity:.45 }
.switch:has(input[disabled]){ color:var(--ink-3); cursor:not-allowed }

/* Ползунок. До системы не был стилизован нигде: в кабинете
   ползунки были системно-синие, на демо — акцентные. */
.range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:24px; margin:0; background:transparent; cursor:pointer;
}
.range::-webkit-slider-runnable-track{ height:6px; border-radius:var(--r-pill); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line) }
.range::-moz-range-track{ height:6px; border-radius:var(--r-pill); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line) }
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; margin-top:-6px;
  border-radius:50%; background:var(--brand);
  border:3px solid #fff; box-shadow:var(--sh-1);
}
.range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--brand); border:3px solid #fff; box-shadow:var(--sh-1);
}
.range[disabled]{ opacity:.45; cursor:not-allowed }

/* Образцы цвета */
/* Зазор поменьше: восемь образцов вместе с пипеткой должны укладываться
   в одну строку узкой панели настроек — иначе пипетка переносится вниз. */
.swatches{ display:flex; gap:var(--sp-1); flex-wrap:wrap; align-items:center }
.swatch{
  width:28px; height:28px; padding:0; flex:0 0 auto;
  border-radius:50%; cursor:pointer;
  border:2px solid transparent;
  box-shadow:0 0 0 1px var(--line), var(--sh-1);
  transition:transform var(--mo-fast) var(--ease), box-shadow var(--mo-fast) var(--ease);
}
.swatch:hover{ transform:scale(1.08) }
.swatch.is-active,.swatch[aria-pressed="true"]{
  border-color:#fff; box-shadow:0 0 0 2px var(--ink), var(--sh-1);
}
/* Пипетка «свой цвет» — последняя в том же ряду, что и образцы. Форма нарочно
   другая, квадратная: круглые образцы — готовые варианты, квадрат — «любой из
   палитры». Правило живёт здесь, а не на страницах: кабинет и демо чинили её
   каждый по-своему, и один контрол выходил в кабинете квадратным, а на демо круглым. */
.swatches input[type="color"]{
  width:28px; height:28px; padding:0; flex:0 0 auto;
  border:0; background:none; border-radius:var(--r-sm); cursor:pointer;
}
.swatches input[type="color"]::-webkit-color-swatch-wrapper{ padding:0 }
.swatches input[type="color"]::-webkit-color-swatch{
  border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.swatches input[type="color"]::-moz-color-swatch{
  border:1px solid var(--line-2); border-radius:var(--r-sm);
}

/* Поле, растущее под текст: подзаголовок виджета бывает длинным, и в одну
   строку было видно начало, а конец приходилось прокручивать вслепую. */
textarea.grows{
  resize:none; overflow:hidden; min-height:calc(var(--sp-6) + 2px);
  line-height:1.5; field-sizing:content;
}

/* Строка-шапка: заголовок, метки и кнопки в один ряд с переносом.
   Нужна кабинету и админке — правило общее, чтобы не разъезжалось. */
.chan__head{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap }

/* Верстак: слева узкая панель настроек, справа широкое превью.
   Три четверти под превью — столько же виджет займёт на настоящей странице.
   Уже 760 px виджет сам сжимается до двух колонок, и настройка «колонки»
   перестаёт что-либо менять, поэтому доля именно такая.
   Правило общее для кабинета и демо: раньше каждая страница городила свою
   раскладку, и они разъезжались. */
.edit{ display:block }
.edit__side{ margin-bottom:var(--sp-6) }
/* Строка над колонками: возврат слева, подпись превью справа — ровно по своим
   колонкам, чтобы обе панели начинались с одного уровня. */
.edit--bar{ margin-bottom:var(--sp-3) }
.edit--bar > p{ margin:0 }

@media (min-width:981px){
  .edit{ display:grid; grid-template-columns:minmax(300px,1fr) 3fr; gap:var(--gap); align-items:start }
  /* Панель не прокручивается сама и не липнет. Своя прокрутка вела себя
     по-разному в зависимости от того, насколько высоким получилось превью:
     при описании под фото оно выше, страница длиннее, и панель упиралась
     в свой край раньше страницы. Теперь обе колонки едут вместе — одинаково
     при любой раскладке. */
  .edit__side{ margin-bottom:0 }
  /* После .edit, иначе align-items:start из общего правила перебивает */
  .edit--bar{ align-items:center }
}

/* Содержимое карточки, залитой градиентом. Система осветляет только
   .lede/.meta/.muted — цена, список и линия футера оставались тёмными,
   то есть синим по синему. Правило общее: так залиты выделенный тариф
   на лендинге и на демо. */
.card--accent .plan__price small{ color:rgba(255,255,255,.82) }
.card--accent .list li{ color:rgba(255,255,255,.9) }
.card--accent .list li::before{ background:#fff }
.card--accent .card__foot{ border-top-color:rgba(255,255,255,.28) }

/* --- 6.8 Сегмент-контрол и вкладки -------------------------- */

/* Сегмент: выбор одного из 2–4 вариантов внутри формы */
.seg{
  display:inline-flex; gap:4px; padding:4px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.seg > button{
  flex:1 1 auto;
  min-height:34px; padding:0 16px;
  font-size:14px; font-weight:600; line-height:1.15;
  color:var(--ink-2); background:transparent;
  border-radius:var(--r-pill); cursor:pointer;
  transition:color var(--mo-fast) var(--ease), background-color var(--mo-fast) var(--ease);
}
.seg > button:hover{ color:var(--ink) }
.seg > button.is-active,.seg > button[aria-pressed="true"],.seg > button[aria-selected="true"]{
  color:#fff; background:var(--grad-brand-strong); box-shadow:var(--sh-1);
}
.seg > button[disabled]{ opacity:.4; cursor:not-allowed }
.seg--block{ display:flex; width:100% }
/* Вариант с двумя строками в подписи («Под / фото») */
.seg--tall > button{ min-height:48px; padding:6px 12px; font-size:13px }

/* Вкладки: переключение содержимого секции */
.tabs{ display:flex; gap:var(--sp-2); flex-wrap:wrap }
.tab{
  min-height:var(--ctl-h-sm); padding:0 18px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600;
  color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pill);
  cursor:pointer;
  transition:color var(--mo-fast) var(--ease), border-color var(--mo-fast) var(--ease), background-color var(--mo-fast) var(--ease);
}
.tab:hover{ color:var(--ink); border-color:var(--line-2) }
.tab[aria-selected="true"],.tab.is-active{
  color:#fff; background:var(--grad-brand-strong); border-color:transparent;
}

/* --- 6.9 Сниппет кода --------------------------------------- */

.snippet{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  overflow:hidden;
}
.snippet__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:10px 10px 10px 16px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.snippet__head .label{ margin:0 }
.code{
  display:block;
  margin:0; padding:var(--sp-4) var(--sp-4);
  font-family:var(--font-mono); font-size:13px; line-height:1.7;
  color:#243043;
  background:var(--surface);
  /* Переносим, а не прячем в скрытую прокрутку: строку встраивания
     человек копирует глазами так же часто, как кнопкой. */
  white-space:pre-wrap; overflow-wrap:anywhere; min-width:0;
}
/* Префикс c- обязателен: без него .tag столкнётся с хэштегом */
.code .c-tag{ color:#1D5FD1 }
.code .c-attr{ color:#8A5B00 }
.code .c-val{ color:#0B7355 }
/* Комментарий в сниппете — --ink-2, а не --ink-3: строку встраивания читают
   глазами, а 3.0:1 для этого мало. Приглушённость сохраняется. */
.code .c-cmt{ color:var(--ink-2) }

/* --- 6.10 Рамка «сайт клиента» ------------------------------ */

/* Один вид на лендинге и на демо. Раньше их было два разных. */
.browser{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
  overflow:hidden;
}
.browser__bar{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:12px 16px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.browser__dots{ display:flex; gap:6px; flex:0 0 auto }
.browser__dots i{ width:10px; height:10px; border-radius:50%; background:#FF5F57 }
.browser__dots i:nth-child(2){ background:#FEBC2E }
.browser__dots i:nth-child(3){ background:#28C840 }
.browser__url{
  flex:1 1 auto; min-width:0;
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:12px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.browser__body{ background:#fff }
.browser__body iframe{ display:block; width:100%; border:0 }

/* --- 6.11 Бейдж, статус, уведомление ------------------------ */

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; letter-spacing:.01em;
  color:var(--ink-2); background:var(--surface-2);
}
.badge--brand{ color:var(--brand-ink); background:var(--brand-soft) }
.badge--ok{ color:var(--ok); background:var(--ok-soft) }
.badge--warn{ color:var(--warn); background:var(--warn-soft) }
.badge--bad{ color:var(--bad); background:var(--bad-soft) }
.badge--solid{ color:#fff; background:var(--grad-brand-strong) }

/* Строка результата под формой */
.note{
  display:flex; gap:var(--sp-2); align-items:flex-start;
  padding:10px 14px; border-radius:var(--r-md);
  font-size:14px; line-height:1.45;
  color:var(--ink-2); background:var(--surface-2);
}
.note--ok{ color:var(--ok); background:var(--ok-soft) }
.note--warn{ color:var(--warn); background:var(--warn-soft) }
.note--bad{ color:var(--bad); background:var(--bad-soft) }

/* Тост: результат действия там, где строка под кнопкой уедет
   за пределы экрана (длинная прокрутка кабинета). */
.toasts{
  position:fixed; z-index:80; right:16px; bottom:16px;
  display:flex; flex-direction:column; gap:var(--sp-2);
  max-width:min(380px,calc(100vw - 32px));
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:var(--sp-2);
  padding:12px 16px;
  font-size:14px; line-height:1.45;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-2);
  animation:toast-in var(--mo-base) var(--ease) both;
}
/* Состояние показываем точкой и еле заметной тонировкой плашки,
   а не цветной полосой у края: полоса-вкладка слева — приём,
   которого нет ни в одном референсе. Тонировка кладётся слоем
   поверх --surface, чтобы плашка осталась непрозрачной. */
.toast--ok::before,.toast--bad::before{
  content:""; flex:0 0 auto;
  width:8px; height:8px; margin-top:.45em;
  border-radius:50%;
}
.toast--ok{ background:linear-gradient(rgba(11,122,81,.07),rgba(11,122,81,.07)),var(--surface) }
.toast--ok::before{ background:var(--ok) }
.toast--bad{ background:linear-gradient(rgba(194,42,26,.07),rgba(194,42,26,.07)),var(--surface) }
.toast--bad::before{ background:var(--bad) }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* Полоса заполнения: просмотры за неделю, лимит виджетов */
.meter{
  height:8px; border-radius:var(--r-pill);
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line);
  overflow:hidden;
}
.meter > i{
  display:block; height:100%; border-radius:inherit;
  background:var(--grad-brand);
  transition:width var(--mo-base) var(--ease);
}
.meter--over > i{ background:var(--bad) }

/* Пара «подпись — значение» в боковой карточке */
.kv{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); font-size:14px }
.kv > span{ color:var(--ink-2) }
.kv > b{ font-weight:600 }

/* --- 6.12 Пустое состояние и скелет -------------------------- */

.empty{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  padding:var(--sp-7) var(--sp-5);
  text-align:center; color:var(--ink-2);
  border:1px dashed var(--line-2); border-radius:var(--r-lg);
  background:var(--surface);
}
.empty .h4{ color:var(--ink) }

.skel{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,#EEF1F6 25%,#F7F9FC 37%,#EEF1F6 63%);
  background-size:400% 100%;
  animation:skel 1.4s ease infinite;
}
@keyframes skel{ from{ background-position:100% 0 } to{ background-position:0 0 } }

/* --- 6.13 Шапка страницы ------------------------------------ */

.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(251,252,254,.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.topbar__in{
  display:flex; align-items:center; gap:var(--sp-4);
  min-height:68px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800; font-size:17px;
  letter-spacing:-.02em; color:var(--ink); text-decoration:none;
}
.brand img,.brand svg{ width:28px; height:28px }
.nav{ display:flex; align-items:center; gap:var(--sp-5); margin-left:var(--sp-5) }
.nav a{
  font-size:15px; color:var(--ink-2); text-decoration:none;
  transition:color var(--mo-fast) var(--ease);
}
.nav a:hover{ color:var(--ink) }
@media (max-width:820px){
  .nav{ display:none }
  .nav.is-open{
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; left:0; right:0; top:100%;
    margin:0; padding:var(--sp-4) var(--gutter);
    background:var(--surface); border-bottom:1px solid var(--line);
    box-shadow:var(--sh-2);
  }
}

/* Липкая полоса действия внизу экрана (форма регистрации на лендинге) */
.dock{
  position:sticky; bottom:0; z-index:50;
  padding:var(--sp-3) 0;
  background:rgba(251,252,254,.86);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid var(--line);
}

/* --- 6.14 Модальное окно ------------------------------------ */

.modal{
  position:fixed; inset:0; z-index:90;
  display:none; align-items:center; justify-content:center;
  padding:var(--sp-4);
  background:rgba(14,20,32,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.modal.is-open{ display:flex }
.modal__box{
  width:min(460px,100%);
  max-height:calc(100vh - 32px); overflow:auto;
  display:flex; flex-direction:column; gap:var(--sp-4);
  padding:clamp(20px,3vw,32px);
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
  animation:modal-in var(--mo-base) var(--ease) both;
}
.modal__box--wide{ width:min(760px,100%) }
@keyframes modal-in{ from{ opacity:0; transform:translateY(12px) scale(.985) } to{ opacity:1; transform:none } }

/* --- 6.15 Разделитель, лента прокрутки ----------------------- */

.divider{ height:1px; background:var(--line); border:0 }
.scroller{
  display:flex; gap:var(--gap);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--sp-2);
  scrollbar-width:thin;
}
.scroller > *{ scroll-snap-align:start; flex:0 0 auto }

/* ============================================================
   7. ДВИЖЕНИЕ
   ============================================================ */

/* Появление при прокрутке. Прячем только когда JS точно работает:
   страница ставит <html class="js"> первой же строкой, иначе без
   скрипта содержимое осталось бы невидимым.

   Разметка:  <div class="reveal" style="--d:1">…
   Скрипт:    new IntersectionObserver(es=>es.forEach(e=>{
                if(e.isIntersecting){e.target.classList.add('is-in');io.unobserve(e.target)}
              }),{rootMargin:'0px 0px -10% 0px'})  — см. DESIGN_SYSTEM.md */
.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--mo-base) var(--ease), transform var(--mo-base) var(--ease);
  transition-delay:calc(var(--d,0) * 60ms);
}
.js .reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .btn--rainbow, .btn--rainbow::after{ animation:none }
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none }
  .card--lift:hover,.btn:hover,.chip:hover,.swatch:hover{ transform:none }
}