/* Оформление ПУБЛИЧНЫХ страниц: витрина, вход, регистрация, подтверждение,
   подписка, оферта, политика, обратная связь.

   ПОЧЕМУ ОТДЕЛЬНО ОТ app.css. Тот заточен под приложение на весь экран:
   `body{overflow:hidden}` и `.screen{height:100vh}`. Витрине нужна обычная
   прокрутка, и подключение app.css превратило бы её в страницу высотой
   ровно в один экран без возможности пролистать.

   ПОЧЕМУ ОБЩИЙ ФАЙЛ, А НЕ ИНЛАЙН В КАЖДОЙ. Публичных страниц семь, и
   палитра, повторённая семикратно, разъедется при первой же правке цвета.

   ШРИФТ ЛЕЖИТ У НАС, а не подключается с Google Fonts: их домены
   недоступны из России без VPN. Тот же довод, по которому в проекте нет
   CDN и лежит локальная копия Three.js. Подробности — vendor/fonts/README.md. */

/* ---------- шрифт ---------- */

/* Один переменный файл на все веса 400–800: отдельные начертания
   означали бы четыре загрузки вместо одной.

   `font-display:swap` — текст показывается системным шрифтом сразу
   и перерисуется, когда доедет Manrope. Невидимый текст на медленной
   связи хуже, чем текст, один раз сменивший начертание. */
@font-face{
  font-family:'Manrope';
  src:url('../vendor/fonts/manrope-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:'Manrope';
  src:url('../vendor/fonts/manrope-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
                U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- палитра ---------- */

:root{
  /* Тёмная тема — основная. Основание почти чёрное с синевой: на нём
     стеклянные поверхности читаются как стекло, а не как серые прямоугольники. */
  --bg-primary:#0a0b12; --bg-secondary:#11131d; --bg-tertiary:#191c29;
  --border:#242938; --hover-bg:#1e2231; --hover-border:#3a4159;

  --accent:#5b8cff; --accent-hover:#4a7cf5; --accent-2:#8b5cf6;
  --success:#34d399; --warning:#fbbf24; --danger:#f87171;
  --text-primary:#eef0f6; --text-secondary:#a3abc2; --text-muted:#7d86a1;

  /* Фирменные цвета TRASKO — те же, что на модели тягача в 3D-сцене
     (BRAND в public/js/catalog.js). Витрина и продукт должны выглядеть
     одной вещью. Жёлтый тент здесь работает и как акцент оформления:
     это цвет обычной фуры, а не бренда. */
  --tilt:#ffb81c; --tilt-dk:#e0a015; --brand-blue:#0033a0; --frame:#22262f;
  /* Шина отдельным тоном: настоящий цвет резины (#22262f) на тёмном фоне
     сливается с ним начисто, и колёса пропадают. */
  --tyre:#464e63;

  /* Стекло. Отдельными переменными, потому что в светлой теме это
     совершенно другие числа: полупрозрачное белое по 4 % там, где на
     тёмном фоне оно читается, на светлом не видно вовсе. */
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.07);
  --glass-brd:rgba(255,255,255,.09);
  --glass-blur:16px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.65);
  --shadow-sm:0 8px 24px -10px rgba(0,0,0,.55);
  --glow:0 10px 34px -8px rgba(91,140,255,.45);

  --grad:linear-gradient(135deg,var(--accent),var(--accent-2));
  --r:12px; --r-lg:20px; --r-xl:28px;
}

/* Светлая: воздух и мягкие тени вместо свечения. Цвета текста взяты
   из прежней редакции без изменений — они подбирались под контраст
   WCAG AA поштучно, и прямая инверсия тёмных значений его не давала. */
:root[data-theme="light"]{
  --bg-primary:#f6f7fb; --bg-secondary:#ffffff; --bg-tertiary:#eef0f6;
  --border:#dfe3ec; --hover-bg:#eceff6; --hover-border:#c3c9d6;
  --accent:#2563d9; --accent-hover:#1d4fc4; --accent-2:#7c3aed;
  --success:#0b7a4f; --warning:#b45309; --danger:#c0272a;
  --text-primary:#12141d; --text-secondary:#454c60; --text-muted:#5a6178;
  --tyre:#22262f;
  /* Белое стекло высокой плотности: прозрачность 4 %, уместная на тёмном,
     на светлом фоне превращается в невидимую карточку без границ. */
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.86);
  --glass-brd:rgba(19,23,38,.09);
  --shadow:0 20px 46px -18px rgba(23,32,64,.22);
  --shadow-sm:0 8px 22px -12px rgba(23,32,64,.18);
  --glow:0 12px 30px -10px rgba(37,99,217,.35);
}

/* Системная настройка — только пока человек не выбрал сам. Условие
   :not([data-theme]) не даёт медиазапросу переспорить явный выбор,
   сохранённый в localStorage. */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg-primary:#f6f7fb; --bg-secondary:#ffffff; --bg-tertiary:#eef0f6;
    --border:#dfe3ec; --hover-bg:#eceff6; --hover-border:#c3c9d6;
    --accent:#2563d9; --accent-hover:#1d4fc4; --accent-2:#7c3aed;
    --success:#0b7a4f; --warning:#b45309; --danger:#c0272a;
    --text-primary:#12141d; --text-secondary:#454c60; --text-muted:#5a6178;
    --tyre:#22262f;
    --glass:rgba(255,255,255,.72);
    --glass-strong:rgba(255,255,255,.86);
    --glass-brd:rgba(19,23,38,.09);
    --shadow:0 20px 46px -18px rgba(23,32,64,.22);
    --shadow-sm:0 8px 22px -12px rgba(23,32,64,.18);
    --glow:0 12px 30px -10px rgba(37,99,217,.35);
  }
}

/* ---------- основа ---------- */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg-primary);color:var(--text-primary);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
  /* Горизонтальной прокрутки на витрине быть не должно ни при какой
     ширине: фоновые пятна намеренно вылезают за края. */
  overflow-x:hidden;
}

/* Свечение фона — общее для всех публичных страниц, поэтому на body,
   а не на герое. Три пятна: синее, фиолетовое и тёплое, — тот самый
   переход «тёмно-синий → фиолетовый → чёрный», только не полосой,
   а рассеянным светом; полоса на широком экране выглядит как ошибка
   градиента, а пятна — как освещение. */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 520px at 12% -6%, color-mix(in srgb,var(--accent) 20%, transparent), transparent 68%),
    radial-gradient(680px 480px at 88% 2%, color-mix(in srgb,var(--accent-2) 18%, transparent), transparent 66%),
    radial-gradient(700px 500px at 60% 100%, color-mix(in srgb,var(--tilt) 8%, transparent), transparent 70%);
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;
}

/* Фирменная полоса под самым верхом — три цвета марки как подпись. */
body::before{
  content:'';position:fixed;inset:0 0 auto 0;height:3px;z-index:60;
  background:linear-gradient(90deg,var(--brand-blue),var(--accent),var(--accent-2),var(--tilt));
}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- шапка ---------- */

.top{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s,backdrop-filter .25s;
}
/* Класс вешает скрипт витрины при прокрутке. Пока страница наверху,
   шапка прозрачная и не отрезает герой линией; отъехали — появляется
   стекло, чтобы текст под ней не просвечивал. */
.top.scrolled{
  background:color-mix(in srgb,var(--bg-primary) 72%, transparent);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border-bottom-color:var(--glass-brd);
}
.top .wrap{display:flex;align-items:center;gap:18px;height:70px}
/* min-width:0 обязателен: без него флекс-элемент отказывается сжиматься
   ниже своего содержимого, и на узком экране логотип выдавливает кнопки
   за край — вместе с отступом самой обёртки. */
.logo{
  display:flex;align-items:center;gap:10px;font-weight:800;font-size:17.5px;
  letter-spacing:-.02em;color:var(--text-primary);
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.logo:hover{text-decoration:none}
.logo svg{width:27px;height:27px;flex:0 0 auto;color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:16px}
.nav a{
  color:var(--text-secondary);font-size:14.5px;font-weight:600;
  padding:8px 12px;border-radius:9px;transition:color .18s,background .18s;
}
.nav a:hover{color:var(--text-primary);background:var(--glass);text-decoration:none}
.top .spacer{flex:1}

/* Переключатель темы: иконка без подписи, поэтому обязателен aria-label
   в разметке — иначе для чтения с экрана это кнопка без имени. */
.theme-btn{
  width:40px;height:40px;flex:0 0 auto;padding:0;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--glass-brd);
  color:var(--text-secondary);cursor:pointer;transition:color .18s,background .18s;
}
.theme-btn:hover{color:var(--text-primary);background:var(--glass-strong)}
.theme-btn svg{width:19px;height:19px}
/* Показываем ту иконку, которая означает, КУДА переключит нажатие. */
.theme-btn .to-light{display:none}
:root[data-theme="light"] .theme-btn .to-light{display:block}
:root[data-theme="light"] .theme-btn .to-dark{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .theme-btn .to-light{display:block}
  :root:not([data-theme]) .theme-btn .to-dark{display:none}
}

/* ---------- кнопки ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:11px;
  border:1px solid var(--glass-brd);background:var(--glass);
  color:var(--text-primary);font-size:14.5px;font-weight:600;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  /* Двигаем только transform и цвета: анимация ширины или отступов
     заставляет браузер пересчитывать раскладку на каждом кадре. */
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.btn:hover{background:var(--glass-strong);border-color:var(--hover-border);text-decoration:none}
.btn:active{transform:translateY(1px)}

.btn.primary{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:var(--glow);
}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 14px 40px -8px rgba(91,140,255,.6)}
.btn.lg{padding:15px 30px;font-size:16px;border-radius:14px}
.btn.w100{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]:hover{filter:none;transform:none}

/* ---------- секции и типографика ---------- */

section{padding:104px 0;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:16px;
  padding:6px 13px;border-radius:99px;
  background:var(--glass);border:1px solid var(--glass-brd);
}
.eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--tilt);flex:0 0 auto;
}
h1{font-size:clamp(34px,5.6vw,66px);line-height:1.04;font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(27px,3.9vw,44px);line-height:1.12;font-weight:800;letter-spacing:-.03em}
h3{font-size:18.5px;font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(17px,2.1vw,21px);line-height:1.55;color:var(--text-secondary);max-width:58ch}
.section-head{max-width:60ch;margin-bottom:52px}
.section-head p{color:var(--text-secondary);margin-top:14px;font-size:17px}

/* Слово, ради которого секция существует, — градиентом. Не больше одного
   на заголовок: подсветив всё, не подсветишь ничего. */
.hl{
  background:linear-gradient(120deg,var(--accent),var(--accent-2) 55%,var(--tilt));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- герой ---------- */

.hero{padding:76px 0 96px;position:relative;overflow:hidden}
/* Техническая сетка — та же, что на полу 3D-сцены внутри приложения.
   Гаснет к низу маской, иначе линии упираются в следующую секцию
   и выглядят как незакрытый фон, а не как подложка. */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(transparent 47px, var(--glass-brd) 47px) 0 0/100% 48px,
    linear-gradient(90deg, transparent 47px, var(--glass-brd) 47px) 0 0/48px 100%;
  -webkit-mask:radial-gradient(120% 85% at 50% 12%, #000 35%, transparent 78%);
  mask:radial-gradient(120% 85% at 50% 12%, #000 35%, transparent 78%);
  opacity:.6;
}
.hero .wrap{
  /* Колонки почти вровень: слева заголовок, справа машина с панелями
     под ней. Пока иллюстрации не было, правую сужали — с ней перекос
     оставил бы фуру мелкой, а она на первом экране главный довод. */
  display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;
  position:relative;z-index:1;
}
.hero p.lead{margin-top:22px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero-note{margin-top:20px;font-size:14px;color:var(--text-muted)}

/* Кружок со стрелкой у второстепенного действия: отличает его от
   основного не только цветом, но и формой — на чёрно-белом снимке
   и при дальтонизме разница остаётся. */
.btn .round{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--glass-strong);border:1px solid var(--glass-brd);
  transition:transform .18s;
}
.btn .round svg{width:13px;height:13px}
.btn:hover .round{transform:translateX(3px)}

/* ---------- сцена героя: витрина продукта ---------- */

.hero-stage{display:flex;flex-direction:column;gap:14px}

/* Метка моноширинным шрифтом — акцент из макета Claude Design, добавленный
   поверх основной гарнитуры: короткие технические подписи (проценты,
   единицы, статусы) читаются как показания прибора, а не как реклама.
   Заголовки и текст остаются на Manrope — это не смена гарнитуры сайта,
   а второй, точечный акцент для чисел и лейблов. */
.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  letter-spacing:.01em;
}
.eyebrow.mono{letter-spacing:.08em}
.eyebrow.sm{
  margin-bottom:12px;padding:4px 10px;font-size:10.5px;
  background:transparent;border-color:var(--glass-brd);
}

/* Карточка-иллюстрация: пример проекта, а не встроенный движок. Числа —
   витринные, как раньше были иллюстративные показатели у фотографии
   фуры; переключатель видов настоящий (см. скрипт в landing.html),
   но переставляет только плашки, не считает раскладку заново — сам
   расчёт по решению из CONTEXT.md остаётся только за подпиской. */
.scene-card{
  background:var(--glass-strong);border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm);
  transition:border-color .22s;
}
.scene-card:hover{border-color:color-mix(in srgb,var(--accent) 40%, transparent)}
.scene-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.scene-ttl{font-weight:700;font-size:15px}
.scene-sub{color:var(--text-muted);font-size:12px;margin-top:2px}

.scene-tabs{display:flex;gap:6px;margin-bottom:16px}
.scene-tab{
  padding:6px 13px;border-radius:9px;border:1px solid var(--glass-brd);
  background:var(--glass);color:var(--text-secondary);font:600 12.5px/1 inherit;
  cursor:pointer;transition:color .15s,border-color .15s,background .15s;
}
.scene-tab:hover{color:var(--text-primary)}
.scene-tab.active{color:var(--text-primary);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%, transparent)}

/* Плашки груза: высота столбика — доля от --h, ширина у всех одна, кроме
   пунктирного «остатка места». Вид «Сверху» и «Сбоку» — те же плашки
   в другой раскладке (grid / приземистый ряд), переключается классом
   на контейнере, который вешает скрипт по клику на вкладку. */
.scene-boxes{
  display:flex;align-items:flex-end;gap:8px;height:150px;
  padding:12px;border-radius:14px;background:var(--glass);
  border:1px solid var(--glass-brd);
}
.scene-boxes i{
  flex:1;height:var(--h,60%);border-radius:6px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 60%, var(--accent-2)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 22%, transparent);
  transition:height .3s;
}
.scene-boxes i.ok{background:linear-gradient(180deg,var(--success),color-mix(in srgb,var(--success) 65%, #0a0));}
.scene-boxes i.tilt{background:linear-gradient(180deg,var(--tilt),var(--tilt-dk))}
.scene-boxes i.ghost{
  background:none;box-shadow:none;height:88%;
  /* Контур заметнее, чем у обычной границы карточек (--glass-brd):
     это единственная плашка без заливки, и на тёмном фоне ей нужен
     контраст повыше, иначе «свободное место» читается как пустота,
     а не как часть схемы. */
  border:1.5px dashed color-mix(in srgb,var(--text-muted) 55%, transparent);
}
/* «Сверху»: та же грузовая площадка, но плашки — плитка в два ряда,
   как проекция на пол, а не силуэт сбоку. */
.scene-boxes[data-view="top"]{flex-wrap:wrap;align-items:stretch;height:150px}
.scene-boxes[data-view="top"] i{flex:1 1 30%;height:auto;align-self:stretch}
/* «Сбоку»: тот же ряд, но ниже и вровень — вид с торца кузова. */
.scene-boxes[data-view="side"]{height:96px}
.scene-boxes[data-view="side"] i{height:100%}

.scene-foot{display:flex;align-items:center;gap:18px;margin-top:16px;flex-wrap:wrap}
.scene-foot span{display:flex;align-items:baseline;gap:5px;font-size:13.5px;color:var(--text-secondary)}
.scene-foot b{font-size:17px;font-weight:800;color:var(--text-primary)}
.scene-foot small{color:var(--text-muted);font-size:12px}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{
  text-align:center;padding:12px 8px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-brd);
}
.stat b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.stat span{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}

.ok-chip{
  display:inline-flex;align-items:center;gap:4px;margin-left:auto;
  padding:2px 9px;border-radius:99px;letter-spacing:.02em;text-transform:none;
  font-size:11px;font-weight:700;color:var(--success);
  background:color-mix(in srgb,var(--success) 16%, transparent);
  border:1px solid color-mix(in srgb,var(--success) 34%, transparent);
}

/* ---------- признаки под кнопками ---------- */

.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.chip{
  display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-brd);
  font-size:13.5px;line-height:1.35;color:var(--text-secondary);
}
.chip .ic{
  width:34px;height:34px;flex:0 0 auto;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%, transparent),
                                    color-mix(in srgb,var(--accent-2) 18%, transparent));
  border:1px solid var(--glass-brd);
}
.chip .ic svg{width:17px;height:17px}
.chip b{display:block;color:var(--text-primary);font-weight:700;font-size:13.5px}

/* ---------- стеклянные карточки ---------- */

.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.card,.step,.fact,.plan,details{
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-sm);
}
.card{border-radius:var(--r-lg);padding:28px;transition:transform .22s,border-color .22s,box-shadow .22s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%, transparent);box-shadow:var(--shadow)}
.card .ic{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%, transparent),
                                    color-mix(in srgb,var(--accent-2) 18%, transparent));
  border:1px solid var(--glass-brd);color:var(--accent);
}
.card .ic svg{width:22px;height:22px}
.card h3{margin-bottom:9px}
.card p{color:var(--text-secondary);font-size:15px}

/* ---------- шаги ---------- */

.steps{counter-reset:ш;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.step{border-radius:var(--r-lg);padding:28px;transition:transform .22s,border-color .22s}
.step:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%, transparent)}
.step::before{
  counter-increment:ш;content:counter(ш);
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:13px;margin-bottom:16px;
  background:var(--grad);color:#fff;font-weight:800;font-size:17px;
  box-shadow:var(--glow);
}
.step h3{margin-bottom:9px}
.step p{color:var(--text-secondary);font-size:15px}

/* ---------- «почему это выгодно»: калькулятор и разворачиваемые шаги ---------- */

.roi{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:start}

.roi-calc{
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r-xl);padding:30px;
}
.roi-label{display:block;font-size:13.5px;font-weight:700;color:var(--text-secondary);margin-bottom:12px}
.roi-slider-row{display:flex;align-items:center;gap:16px;margin-bottom:8px}
/* Нативный range, перекрашенный под палитру сайта. accent-color сам
   красит и дорожку, и бегунок в большинстве браузеров — без него
   ползунок остался бы системно-серым посреди стеклянной карточки. */
input[type=range]{
  flex:1;height:6px;border-radius:99px;accent-color:var(--accent);cursor:pointer;
}
#roiRidesOut{
  font-weight:800;font-size:15px;white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:9ch;text-align:right;
}
.roi-fact{margin-top:26px;padding-top:22px;border-top:1px solid var(--glass-brd)}
.roi-fact b{
  display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;
  margin:6px 0 8px;font-variant-numeric:tabular-nums;
}
.roi-fact p{color:var(--text-secondary);font-size:14px;line-height:1.5}

.roi-steps{display:flex;flex-direction:column;gap:12px}
.roi-step{
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s;
}
.roi-step.open{border-color:color-mix(in srgb,var(--accent) 40%, transparent)}
.roi-step-hd{
  width:100%;display:flex;align-items:flex-start;gap:14px;padding:20px 22px;
  background:none;border:none;color:inherit;text-align:left;cursor:pointer;font-family:inherit;
}
.roi-num{color:var(--accent);font-weight:700;font-size:13px;padding-top:2px}
.roi-step-txt{display:flex;flex-direction:column;gap:5px;flex:1}
.roi-step-txt b{font-size:16px;font-weight:700}
.roi-step-txt span{color:var(--text-secondary);font-size:14.5px;line-height:1.45}
.roi-plus{
  flex:0 0 auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:19px;line-height:1;font-weight:400;transition:transform .22s,color .18s;
}
.roi-step.open .roi-plus{transform:rotate(45deg);color:var(--accent)}
.roi-step-more{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;
}
.roi-step-more p{
  overflow:hidden;min-height:0;color:var(--text-secondary);font-size:14px;line-height:1.55;
  padding:0 22px 0 50px;
}
.roi-step.open .roi-step-more{grid-template-rows:1fr}
.roi-step.open .roi-step-more p{padding-bottom:20px}

/* ---------- тарифы ---------- */

/* Переключатель период оплаты. Тот же принцип, что у переключателя темы:
   один явно активный вариант, остальные — приглушены. */
.seg{
  display:inline-flex;gap:3px;padding:4px;border-radius:99px;margin-bottom:32px;
  background:var(--glass);border:1px solid var(--glass-brd);
}
.seg-btn{
  padding:9px 18px;border-radius:99px;border:none;background:none;
  color:var(--text-secondary);font:600 14px/1 inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:color .18s,background .18s;
}
.seg-btn.active{background:var(--grad);color:#fff}
.seg-save{
  font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:99px;
  background:color-mix(in srgb,#fff 22%, transparent);
}
.seg-btn:not(.active) .seg-save{
  background:color-mix(in srgb,var(--success) 18%, transparent);color:var(--success);
}

/* Приписка под карточками тарифов — не третий, придуманный тариф,
   а честный переход к форме связи для того, что тарифной сеткой
   не решается (см. пояснение в landing.html). */
.plan-more{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:22px;padding:22px 26px;border-radius:var(--r-lg);
  background:var(--glass);border:1px dashed var(--glass-brd);
}
.plan-more p{color:var(--text-secondary);font-size:14.5px;margin-top:5px}

.plans{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:start}
.plan{border-radius:var(--r-xl);padding:32px;position:relative;transition:transform .22s}
.plan:hover{transform:translateY(-4px)}
/* Выделенный тариф: плотнее стекло и градиентная рамка. Рамка сделана
   маской, а не border-image: тот не дружит с закруглением. */
.plan.on{
  background:var(--glass-strong);
  box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--accent) 45%, transparent);
}
.plan.on::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.plan .badge{
  position:absolute;top:-13px;left:32px;padding:5px 14px;border-radius:99px;
  background:var(--grad);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.02em;box-shadow:var(--glow);
}
.plan h3{font-size:15px;color:var(--text-secondary);font-weight:700;letter-spacing:.02em}
.price{font-size:clamp(34px,4vw,44px);font-weight:800;letter-spacing:-.035em;margin:10px 0 6px}
.price span{font-size:16px;font-weight:600;color:var(--text-muted);letter-spacing:0}
.plan ul{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;font-size:15px;color:var(--text-secondary);align-items:flex-start}
.plan li::before{
  content:'';flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:color-mix(in srgb,var(--success) 20%, transparent);
  /* Галочка нарисована фоном, а не символом: у текстовой «✓» разная
     ширина в разных шрифтах, и список едет. Цвет обводки в data-URI
     задаётся числом и темой не управляется, поэтому для светлой темы
     ниже стоит отдельная, более тёмная галочка — светло-зелёная на белом
     почти не читается. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}

/* Галочка для светлой темы: тот же значок, но обводка цвета --success
   светлой палитры (#0b7a4f). Светло-зелёная #34d399 на белом фоне
   не добирает контраста. */
:root[data-theme="light"] .plan li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a4f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .plan li::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a4f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
}

/* ---------- вопросы ---------- */

.faq{display:flex;flex-direction:column;gap:12px;max-width:860px}
details{border-radius:var(--r-lg);padding:20px 24px;transition:border-color .2s}
details[open]{border-color:color-mix(in srgb,var(--accent) 40%, transparent)}
summary{
  cursor:pointer;font-weight:700;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:'';flex:0 0 auto;width:22px;height:22px;
  background:currentColor;color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/22px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/22px no-repeat;
  transition:transform .22s;
}
details[open] summary::after{transform:rotate(180deg)}
details p{color:var(--text-secondary);font-size:15px;margin-top:14px}

/* ---------- призыв в конце ---------- */

.cta{
  border-radius:var(--r-xl);padding:clamp(34px,5vw,64px);text-align:center;
  background:var(--glass-strong);border:1px solid var(--glass-brd);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.cta::before{
  content:'';position:absolute;inset:-40% -10% auto;height:340px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 26%, transparent),transparent);
}
.cta > *{position:relative}
.cta p{color:var(--text-secondary);margin-top:16px;font-size:17.5px;max-width:56ch;margin-inline:auto}
.cta .hero-actions{justify-content:center;margin-top:32px}

/* ---------- подвал ---------- */

footer{border-top:1px solid var(--glass-brd);padding:44px 0;color:var(--text-muted);font-size:14.5px}
footer .wrap{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
footer a{color:var(--text-secondary)}
footer a:hover{color:var(--text-primary)}
footer .spacer{flex:1}
.foot-brand{display:flex;flex-direction:column;gap:4px}
.foot-brand .logo{font-size:16px}

/* ---------- страницы-документы и формы ---------- */

.page{max-width:840px;margin:0 auto;padding:56px 24px 88px}
.page h1{font-size:clamp(28px,4.4vw,42px);margin-bottom:10px}
.page h2{font-size:22px;margin:38px 0 12px}
.page p{color:var(--text-secondary);margin-bottom:14px}
.page ul{color:var(--text-secondary);margin:0 0 14px 24px;display:flex;flex-direction:column;gap:8px}

.note{
  background:color-mix(in srgb,var(--warning) 13%, transparent);
  border:1px solid color-mix(in srgb,var(--warning) 42%, transparent);
  border-radius:var(--r-lg);padding:17px 20px;color:var(--text-primary);
  margin:20px 0;font-size:15px;
}
.card-form{
  max-width:440px;margin:64px auto;padding:36px;border-radius:var(--r-xl);
  background:var(--glass-strong);border:1px solid var(--glass-brd);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow);
}
.field{margin-bottom:17px}
.field label{display:block;font-size:13.5px;color:var(--text-secondary);margin-bottom:7px;font-weight:600}
.inp{
  width:100%;background:color-mix(in srgb,var(--bg-primary) 55%, transparent);
  border:1px solid var(--glass-brd);color:var(--text-primary);
  border-radius:var(--r);padding:13px 15px;font-size:15.5px;font-family:inherit;
  transition:border-color .18s,box-shadow .18s;
}
.inp::placeholder{color:var(--text-muted)}
.inp:focus{
  border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%, transparent);
}
textarea.inp{resize:vertical;min-height:120px;line-height:1.6}
.err{color:var(--danger);font-size:14px;min-height:20px;margin:5px 0}
.ok{color:var(--success);font-size:14px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-secondary);cursor:pointer}
.chk input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.muted{color:var(--text-muted);font-size:14px}
.center{text-align:center}

/* ---------- оживление ---------- */

/* Появление при прокрутке. Класс `in` вешает Intersection Observer;
   без скрипта (и в поисковом роботе) содержимое видно как обычно —
   поэтому скрывает не CSS сам по себе, а только вместе с `.js-anim`
   на <html>, который ставит тот же скрипт. */
.js-anim .reveal{opacity:0;transform:translateY(22px)}
.js-anim .reveal.in{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .6s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
}

@keyframes всплыть{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.anim{animation:всплыть .55s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0) * 80ms)}

/* Уважаем системную настройку «уменьшить движение» — как и app.css.
   Важно не просто отключить анимации, а вернуть содержимое в видимое
   состояние: иначе `.reveal` останется прозрачным навсегда. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .js-anim .reveal{opacity:1;transform:none}
}

/* ---------- узкий экран ---------- */

@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  section{padding:72px 0}
  .nav{display:none}
  .hero{padding:48px 0 72px}

  /* Панели уходят под текст: на узком экране первым должен идти
     заголовок, а не показатели. */
  .hero-stage{order:1}

  .roi{grid-template-columns:1fr}
}
/* Телефон: в шапке остаются знак, переключатель темы и одно действие,
   и они обязаны поместиться вместе с отступами. */
@media (max-width: 620px){
  body{font-size:16px}
  /* Плашка над заголовком на 375 px не помещается в строку, а перенос
     оставляет точку висеть между строк. Уменьшаем кегль и разрядку —
     этого хватает, чтобы длинный текст плашки встал в одну строку. */
  .eyebrow{font-size:10.5px;letter-spacing:.07em;padding:5px 11px}
  .eyebrow::before{width:5px;height:5px}
  .top .wrap{gap:10px;padding:0 16px;height:64px}
  .logo{font-size:15.5px}
  .logo svg{width:23px;height:23px}
  .top .btn{padding:10px 14px;font-size:13.5px}
  /* Прячем ТОЛЬКО то, что помечено вручную, и никогда не по признаку
     «не основная кнопка».

     Правило было именно таким и стоило дорого: на странице подписки
     единственный выход — кнопка «Выйти», она не основная, и на телефоне
     человек с истёкшим пробным периодом не мог выйти из учётной записи
     вообще. Тем же правилом пряталось «На главную» на оферте, политике
     и обратной связи. Признак «не основная» ничего не говорит о том,
     можно ли элемент убрать. */
  .hide-sm{display:none}
  /* Имя пользователя в шапке — украшение: на 375 px оно вытесняет кнопку,
     ради которой шапка на этой странице и нужна. */
  .top .who{display:none}
  .wrap{padding:0 16px}
  .card,.step,.plan{padding:24px}
  .plan{border-radius:var(--r-lg)}
  footer .wrap{gap:16px}
  .hero-actions .btn{width:100%}
  .stat-row{grid-template-columns:1fr 1fr 1fr;gap:7px}
  .stat{padding:9px 5px}
  .stat b{font-size:16px}
  .roi-calc{padding:22px}
  .roi-step-hd{padding:17px 16px}
  .roi-step-more p{padding-left:36px}
  .seg{width:100%}
  .seg-btn{flex:1;justify-content:center}
}