/* ============================================================
   Glitch — лендинг glitchapp.online
   Минимализм: без анимаций, без canvas, без внешних библиотек.
   Палитра и радиусы — 1-в-1 из приложения:
     цвета: glitch_palette.dart (dark)
     радиусы: 18px — крупные блоки/кнопки-CTA, 15px — обычные кнопки
     нажатие: scale 0.96 + opacity .85 за 100мс — как GlitchPressable
   ============================================================ */

:root {
  --bg:          #151515;
  --bg-card:     #1C1C1C;
  --border:      #2C2C2C;
  --border-card: #262626;
  --text:        #EDEDED;
  --text-second: #8A8A8A;
  --text-hint:   #7A7A7A;
  /* Не свой цвет — это ТЕКУЩИЙ дефолтный акцент приложения (theme_provider.dart,
     "дефолт — бирюзовый акцент"), не выдуманный зелёный. accent-dark посчитан
     тем же способом, что GlitchPalette._darken (HSL lightness -14%). */
  --accent:      #2FAE9A;
  --accent-dark: #207668;
  --content-width: 1160px;
  /* Тот же шрифт, что и во всём приложении (app_theme.dart:
     textTheme.apply(fontFamily: 'Inter Tight')) — не только для логотипа.
     Системный стек — только запасной вариант, пока @font-face не подгрузился. */
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* Тот же файл шрифта, что забандлен в приложении (mobile/assets/fonts/
   InterTight-Variable.ttf) — variable-шрифт, поэтому font-weight указан
   диапазоном 100–900, а не одним числом: браузер сам подберёт нужную
   насыщенность (800) из этого единственного файла. */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  position: relative;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Фоновое свечение — по одному пятну у верхнего правого и нижнего левого
   угла геро-секции. Само не кликается и не мешает контенту (z-index: -1). */
.bg-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}

.bg-glow-top {
  top: -180px;
  right: -160px;
  width: 780px;
  height: 780px;
  background: radial-gradient(circle, rgba(47, 174, 154, .22) 0%, rgba(47, 174, 154, 0) 68%);
}

.bg-glow-bottom {
  top: 520px;
  left: -220px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(47, 174, 154, .14) 0%, rgba(47, 174, 154, 0) 70%);
}

/* ---------- Переходы между страницами ---------- */
/* Даёт ощущение "контент подменился на той же странице", как у SPA, но БЕЗ
   JS, роутера и сборки: браузер сам снимает кадр "до" и "после" перехода и
   анимирует разницу. Работает только если ОБЕ страницы подключают этот
   файл — поэтому правило живёт в общем style.css, а не на странице.

   Имена ниже — ключевая часть: помеченный элемент браузер считает ОДНИМ И
   ТЕМ ЖЕ на обеих страницах, поэтому шапка и подвал не моргают и не
   перерисовываются, а стоят на месте, пока меняется середина. Имя обязано
   быть уникальным в пределах страницы — по одной шапке и подвалу, так и есть.

   Где не поддерживается (Firefox) — просто обычный переход, ничего не
   ломается и чинить нечего. */
@view-transition { navigation: auto; }

.nav { view-transition-name: site-nav; }
.footer { view-transition-name: site-footer; }

@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }
@keyframes vt-out { to   { opacity: 0; } }

::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .28s ease both; }

/* Уважаем системную настройку "меньше движения" — там переход мгновенный. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

::selection { background: rgba(47, 174, 154, .35); }

a { color: inherit; }

/* ---------- Навигация ---------- */
/* Полоса на всю ширину экрана, но содержимое внутри ограничено той же
   шириной, что и остальной контент — иначе на широких мониторах лого и
   кнопка расползались бы к самым краям. */

/* z-index обязателен: выпадающая панель "Документации" висит absolute и
   вылезает за пределы шапки на контент страницы. Любая секция ниже с
   position: relative (например .section-security) рисуется
   ПОВЕРХ неё, потому что позиционированные элементы красятся в порядке
   разметки, и перехватывает курсор: панель раскрывалась, но при наведении
   на её нижнюю половину сворачивалась. Шапка обязана быть выше контента. */
.nav {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

/* Вкладки и кнопка — одной правой группой, а не по центру всей полосы:
   вкладки должны стоять ближе к "Скачать", а не посередине между ней и лого.
   Новые вкладки добавляются СЮДА ЖЕ, внутрь .nav-tabs — раздвигать их придётся
   именно вместе с кнопкой, а не пересчитывать центр заново. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-tabs {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-tab {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-second);
  text-decoration: none;
  transition: color .15s;
}

.nav-tab:hover { color: var(--text); }

/* Разворачивающаяся вкладка ("Документация"): триггер-кнопка со стрелкой +
   панель, всплывающая по наведению. wrap — точка отсчёта для абсолютного
   позиционирования панели И общая зона наведения.

   Работает на чистом :hover. Раньше панель захлопывалась при наведении на
   её нижнюю половину — но причина была не в ховере, а в том, что секция
   ниже (с position: relative) рисовалась ПОВЕРХ панели и перехватывала
   курсор. Лечится z-index у .nav — см. комментарий там. Не заводить сюда
   JS с задержкой закрытия: он маскировал симптом, а не чинил причину. */
.nav-dropdown-wrap { position: relative; }

/* Сброс браузерных стилей <button> — снаружи должна выглядеть как обычная
   .nav-tab, просто со стрелкой и жестом "клик не нужен". */
.nav-tab-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

.nav-tab-arrow { transition: transform .15s; }

.nav-dropdown-wrap:hover .nav-tab-arrow,
.nav-dropdown-wrap:focus-within .nav-tab-arrow {
  transform: rotate(180deg);
}

/* padding-top, а не margin — зазор между вкладкой и панелью обязан остаться
   ЧАСТЬЮ наводимой зоны, иначе курсор по дороге теряет hover. Видимую
   карточку поэтому рисует вложенный .nav-dropdown-panel, а не сам
   .nav-dropdown. */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .15s ease, transform .15s ease;
}

.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 8px;
  min-width: 240px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .4);
}

.nav-dropdown-item {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14.5px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s;
}

.nav-dropdown-item:hover { background: rgba(255, 255, 255, .06); }

/* Анимированный логотип с эффектом глитча.
   НЕ перерисован шрифтом/градиентом — это настоящая иконка приложения
   (mobile/assets/icon.png, тот же файл, что видно на рабочем столе телефона),
   разрезанная на 4 полосы. Раньше здесь была попытка нарисовать букву "G"
   шрифтом Inter Tight — оказалось, что реальная иконка нарисована ДРУГИМ
   шрифтом/формой (измерено: ширина/высота буквы 1.041 у иконки против 0.898
   у Inter Tight, то есть иконка заметно шире) — так что переисование шрифтом
   в принципе не могло совпасть. Используя саму картинку, эта проблема
   отпадает: в состоянии покоя (сдвиг 0) все 4 слоя показывают ТОЧНО тот же
   рисунок, что и icon.png — включая уже "чуть сломанный" вид самой иконки
   (там намеренно заморожен один из кадров глитча). Полосы (проценты клипа —
   те же значения FractionClip, что и раньше) лишь изредка (см.
   js/glitch-logo.js) на мгновение расходятся сильнее для дополнительного
   эффекта, а потом возвращаются в исходный, "иконочный" вид. */

.g-mark {
  position: relative;
  overflow: hidden;
  width: 32px; height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
}

.g-mark-lg { width: 46px; height: 46px; border-radius: 13px; }

.g-layer {
  position: absolute;
  inset: 0;
  background-image: url("../img/icon.png");
  background-size: cover;
  background-position: center;
}

/* Проценты клипа — те же значения, что FractionClip(top, bottom) в Dart:
   clip-path: inset(top% 0 bottom% 0) даёт ровно тот же видимый диапазон. */
.g-layer-a { clip-path: inset(7% 0 71% 0);  transform: translateX(var(--shift-a, 0px)); }
.g-layer-b { clip-path: inset(45% 0 33% 0); transform: translateX(var(--shift-b, 0px)); }
.g-layer-c { clip-path: inset(76% 0 5% 0);  transform: translateX(var(--shift-c, 0px)); }

/* ---------- Кнопки — те же радиусы и та же анимация нажатия, что в приложении ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  border-radius: 15px;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  /* Совпадает с GlitchPressable: 100мс, scale 0.96 + opacity .85 на нажатии */
  transition: transform .1s ease-out, opacity .1s ease-out, background-color .15s;
}

.btn:active { transform: scale(0.96); opacity: .85; }

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover { background: var(--accent-dark); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-ghost:hover { border-color: var(--accent); }

.btn-disabled {
  color: var(--text-hint);
  cursor: default;
  pointer-events: none;
}

.btn-small { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 12px; }

/* ---------- Герой — только текст, но широко и крупно ---------- */

.hero {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: clamp(80px, 14vh, 160px) clamp(20px, 4vw, 56px) clamp(64px, 10vh, 112px);
  text-align: left;
}

.hero h1 {
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.hero .accent { color: var(--accent); }

.hero .sub {
  margin-top: 26px;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--text-second);
  max-width: 560px;
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--text-hint);
}

/* ---------- Секции ---------- */

.section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: clamp(64px, 9vh, 112px) clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--border);
}

.section-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

.section h2 {
  margin-top: 14px;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 800;
  letter-spacing: -.01em;
}

.section .lead {
  margin-top: 14px;
  font-size: 17px;
  color: var(--text-second);
  line-height: 1.55;
}

.section-download { text-align: center; }
.section-download .hero-actions { justify-content: center; }

/* ============================================================
   БЛОК "ВЕБ-ВЕРСИЯ" — крупный заголовок и кнопка слева, наклонённое
   окно браузера со скриншотом справа, снизу панель из четырёх фактов.

   ВНИМАНИЕ: декоративные примитивы (.sec-pill, .sec-tile, .sec-halo)
   ОБЩИЕ с блоком "Безопасность" ниже и намеренно НЕ продублированы —
   правка там меняет вид и здесь. Специфичное для этого блока живёт
   в .web-*.
   ============================================================ */

.web-hero {
  display: flex;
  align-items: center;
  gap: 56px;
}

.web-hero-text { flex: 1 1 460px; min-width: 0; }

.web-hero-text h2 {
  margin-top: 22px;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
}

.web-hero-text .accent { color: var(--accent); }

.web-lead {
  margin-top: 22px;
  max-width: 480px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-second);
}

.web-cta-row { margin-top: 36px; }

/* Единственная кнопка-«таблетка» на сайте: в референсе она именно такая,
   поэтому радиус отходит от общего 15px ОСОЗНАННО и только здесь. */
.btn-pill {
  border-radius: 999px;
  padding: 0 30px;
  box-shadow: 0 12px 30px rgba(47, 174, 154, .30);
}

.btn-pill:hover { box-shadow: 0 12px 34px rgba(47, 174, 154, .42); }

/* ---------- окно браузера ---------- */

.web-art {
  position: relative;
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.web-halo { width: 460px; height: 380px; }

.web-swoosh {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118%;
  height: 118%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(47, 174, 154, .45));
  pointer-events: none;
}

/* Наклон — чистый CSS-перспектив, без картинки: скриншот внутри остаётся
   обычным <img> и заменяется одним файлом, не трогая разметку. */
.web-window {
  position: relative;
  width: 100%;
  max-width: 620px;
  border-radius: 14px;
  overflow: hidden;
  background: #0F1413;
  border: 1px solid rgba(47, 174, 154, .30);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 40px rgba(47, 174, 154, .18);
  transform: perspective(1600px) rotateY(-13deg) rotateX(3deg) rotate(-1deg);
}

.web-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.web-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

.web-url {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 auto;
  padding: 5px 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
  font-size: 12.5px;
  color: var(--text-second);
}

.web-url svg { color: var(--accent); flex-shrink: 0; }

/* Скриншот любой ширины впишется сам — высоту не фиксируем, чтобы не
   обрезать и не растягивать реальный кадр. */
.web-shot {
  display: block;
  width: 100%;
  height: auto;
}

.web-tile-globe   { left: 0;   top: 6%; }
.web-tile-monitor { right: 0;  top: 34%; }
.web-tile-cursor  { right: 8%; bottom: 8%; }

/* ---------- нижняя панель с фактами ---------- */

.web-facts {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 34px 30px;
  padding: 38px 36px;
  border-radius: 20px;
  border: 1px solid var(--border-card);
  background:
    radial-gradient(80% 140% at 50% 0%, rgba(47, 174, 154, .08) 0%, rgba(47, 174, 154, 0) 60%),
    var(--bg-card);
}

.web-fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(47, 174, 154, .16);
  border: 1px solid rgba(47, 174, 154, .26);
  color: var(--accent);
}

.web-fact h3 {
  margin-top: 18px;
  font-size: 16.5px;
  font-weight: 700;
}

.web-fact p {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-second);
}

@media (max-width: 1000px) {
  .web-hero { flex-direction: column; align-items: flex-start; gap: 44px; }
  .web-art { width: 100%; flex-basis: auto; padding: 20px 0; }
  .web-window { transform: none; }
  .web-facts { margin-top: 44px; }
}

@media (max-width: 560px) {
  /* Плитки и завитки на телефоне налезали бы на само окно — прячем,
     скриншот остаётся. */
  .sec-tile, .web-swoosh { display: none; }
  .web-facts { padding: 26px 22px; gap: 26px; }
}

/* ============================================================
   БЛОК "БЕЗОПАСНОСТЬ" — крупная шапка с композицией, карточки
   с декоративной графикой и нижний баннер.

   Свечение везде строится ОДНИМ способом: акцент --accent в низкой
   прозрачности поверх --bg-card. Свои цвета тут не заводятся, иначе
   блок разъедется с остальным сайтом при смене акцента.
   ============================================================ */

.section-security { position: relative; }

/* ---------- шапка блока ---------- */

.sec-hero {
  display: flex;
  align-items: center;
  gap: 48px;
}

.sec-hero-text { flex: 1 1 520px; min-width: 0; }

.sec-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(47, 174, 154, .12);
  border: 1px solid rgba(47, 174, 154, .35);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}

.sec-hero-text h2 {
  margin-top: 22px;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.sec-hero-text .accent { color: var(--accent); }

.sec-lead {
  margin-top: 20px;
  max-width: 520px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-second);
}

/* Строка из трёх мини-фактов с вертикальными разделителями. */
.sec-facts {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.sec-fact {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text-second);
}

.sec-fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(47, 174, 154, .14);
  color: var(--accent);
}

.sec-fact-divider {
  width: 1px;
  height: 30px;
  background: var(--border);
}

/* ---------- светящаяся композиция справа ---------- */

.sec-hero-art {
  position: relative;
  flex: 1 1 420px;
  height: 400px;
  min-width: 0;
}

/* Орбиты — обычные эллипсы с тонкой акцентной рамкой, повёрнутые
   трансформом. Никакого SVG: так они масштабируются вместе с блоком. */
.sec-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(47, 174, 154, .22);
  border-radius: 50%;
  pointer-events: none;
}

.sec-ring-a {
  width: 430px;
  height: 205px;
  transform: translate(-50%, -50%) rotate(-16deg);
}

.sec-ring-b {
  width: 330px;
  height: 320px;
  border-color: rgba(47, 174, 154, .12);
  transform: translate(-50%, -50%) rotate(22deg);
}

.sec-ring-c {
  width: 250px;
  height: 130px;
  transform: translate(-50%, -50%) rotate(-14deg);
}

/* Мягкое пятно ровно за щитом — придаёт объём без картинки. */
.sec-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 174, 154, .30) 0%, rgba(47, 174, 154, 0) 65%);
  pointer-events: none;
}

.sec-halo-sm { width: 190px; height: 190px; }

.sec-shield {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 222px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 22px rgba(47, 174, 154, .45));
}

.sec-shield-sm { width: 112px; height: 130px; }

/* Парящие плитки — «стеклянные» квадраты с акцентной рамкой и свечением. */
.sec-tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(47, 174, 154, .20), rgba(28, 28, 28, .92));
  border: 1px solid rgba(47, 174, 154, .35);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 22px rgba(47, 174, 154, .16);
  color: var(--accent);
}

.sec-tile-mail   { left: 4%;  top: 16%; }
.sec-tile-server { left: 12%; top: 58%; }
.sec-tile-shield { right: 6%; top: 26%; }
.sec-tile-logo   { left: 26%; bottom: 6%; }
.sec-tile-logo img { border-radius: 9px; display: block; }

.sec-chip {
  position: absolute;
  right: 0;
  bottom: 22%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(47, 174, 154, .16), rgba(28, 28, 28, .95));
  border: 1px solid rgba(47, 174, 154, .30);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 22px rgba(47, 174, 154, .14);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.sec-chip svg { color: var(--accent); flex-shrink: 0; }

/* ---------- карточки ---------- */

.sec-grid {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Подложка карточки — акцент в очень низкой прозрачности поверх bg-card,
   а не отдельный цвет: при смене акцента блок перекрасится сам. */
.sec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 26px 26px 24px;
  border-radius: 20px;
  border: 1px solid var(--border-card);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(47, 174, 154, .10) 0%, rgba(47, 174, 154, 0) 55%),
    var(--bg-card);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sec-card:hover {
  border-color: rgba(47, 174, 154, .38);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
}

.sec-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;
}

.sec-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(47, 174, 154, .16);
  border: 1px solid rgba(47, 174, 154, .26);
  color: var(--accent);
}

/* Декоративная графика в правом верхнем углу: намеренно приглушена и
   частично уходит за край карточки (overflow: hidden выше), чтобы
   читался объём, а не «наклейка». */
.sec-card-art {
  margin: -6px -14px 0 0;
  color: var(--accent);
  opacity: .55;
  filter: drop-shadow(0 0 14px rgba(47, 174, 154, .35));
  pointer-events: none;
}

.sec-card h3 {
  margin-top: 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.sec-card p {
  margin-top: 12px;
  margin-bottom: 22px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-second);
}

/* margin-top: auto прижимает плашку к низу — у карточек в ряду разный
   объём текста, и без этого плашки скакали бы по вертикали. */
.sec-tag {
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 15px;
  border-radius: 12px;
  background: rgba(47, 174, 154, .10);
  border: 1px solid rgba(47, 174, 154, .22);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- нижний баннер ---------- */

.sec-banner {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 34px 36px;
  border-radius: 20px;
  border: 1px solid var(--border-card);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(47, 174, 154, .10) 0%, rgba(47, 174, 154, 0) 60%),
    var(--bg-card);
}

.sec-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 18px;
  background: rgba(47, 174, 154, .16);
  border: 1px solid rgba(47, 174, 154, .26);
  color: var(--accent);
}

.sec-banner-text { flex: 1 1 320px; min-width: 0; }

.sec-banner-text h3 {
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.sec-banner-text p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-second);
}

.sec-banner-art {
  position: relative;
  width: 220px;
  height: 150px;
  flex-shrink: 0;
}

.sec-banner-side {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 0 1 230px;
}

.sec-banner-side-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(47, 174, 154, .14);
  color: var(--accent);
}

.sec-banner-side strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.sec-banner-side span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-second);
}

/* ---------- узкие экраны ---------- */

@media (max-width: 1000px) {
  .sec-hero { flex-direction: column; align-items: flex-start; gap: 40px; }
  .sec-hero-art { width: 100%; flex-basis: auto; height: 360px; }
  .sec-grid { margin-top: 52px; }
  .sec-banner { flex-wrap: wrap; gap: 24px; }
  .sec-banner-art { display: none; }
}

@media (max-width: 560px) {
  /* Композиция из щита и плиток на телефоне занимает пол-экрана и ничего
     не объясняет — прячем её целиком, а не ужимаем до нечитаемого. */
  .sec-hero-art { display: none; }
  .sec-fact-divider { display: none; }
  .sec-facts { gap: 16px; }
  .sec-banner { padding: 26px 22px; }
  .sec-card { padding: 22px 20px 20px; }
}

/* ============================================================
   ТЕКСТОВЫЕ СТРАНИЦЫ (политика конфиденциальности и т.п.)

   Ширина ЗАМЕТНО уже общей --content-width: 1160px строкой длинный
   юридический текст читать невозможно, комфортный предел — ~90 знаков.
   Шапка и подвал при этом общие с главной, поэтому здесь только колонка
   текста, без своих цветов и шрифтов.
   ============================================================ */

.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 88px) clamp(20px, 4vw, 56px) clamp(72px, 10vh, 104px);
}

.legal h1 {
  margin-top: 22px;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.legal-date {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-hint);
}

.legal h2 {
  margin-top: 44px;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Подраздел внутри h2 (например 3.1/3.2/3.3 в Правилах сообщества) —
   меньше и без своего крупного отступа сверху, читается как часть того
   же раздела, а не новый. */
.legal h3 {
  margin-top: 22px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

.legal p {
  margin-bottom: 12px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-second);
  /* Без переносов слов (hyphens) выключка на узкой колонке рвёт текст
     большими пробелами между словами — особенно заметно на длинных
     юридических терминах ("персонализированный", "идентификационный"). */
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.legal ul {
  margin: 12px 0 12px 2px;
  padding-left: 20px;
}

.legal li {
  margin-bottom: 9px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-second);
}

.legal li::marker { color: var(--accent); }

/* Выделения внутри пункта — это подписи ("Пароль — хранится…"), поэтому
   светлее основного текста, а не жирнее тем же цветом. */
.legal strong {
  font-weight: 600;
  color: var(--text);
}

.legal a {
  color: var(--accent);
  text-decoration: none;
}

.legal a:hover { text-decoration: underline; }

.legal-divider {
  height: 1px;
  margin: 52px 0 8px;
  background: var(--border);
}

.legal-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 56px;
  margin-top: 16px;
  padding: 24px 26px;
  border-radius: 18px;
  border: 1px solid var(--border-card);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(47, 174, 154, .08) 0%, rgba(47, 174, 154, 0) 55%),
    var(--bg-card);
}

.legal-contact-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  color: var(--text-hint);
}

.legal-contact-value {
  display: block;
  font-size: 15px;
  color: var(--text);
}

/* ---------- Футер ---------- */

.footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 64px clamp(20px, 4vw, 56px) 72px;
  border-top: 1px solid var(--border);
}

/* align-items: stretch (по умолчанию) + justify-content: space-between внутри
   бренд-колонки прижимает копирайт к низу — на одну линию с последней
   ссылкой в колонках справа, как в референсе. */
.footer-inner {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.footer-brand {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

/* Копирайт и соцсети — одна нижняя группа, чтобы justify-content: space-between
   у .footer-brand прижимал их к низу ВМЕСТЕ, а не растаскивал по высоте. */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-social {
  display: flex;
  gap: 8px;
}

/* Сами SVG уже содержат готовый закруглённый квадрат фирменного цвета
   с белым глифом (файлы из website/img-эталона Telegram/VK/Mail.ru) —
   ссылке не нужен свой фон/рамка, только реакция на нажатие. */
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  overflow: hidden;
  /* Совпадает с GlitchPressable, как и обычные .btn на сайте. */
  transition: transform .1s ease-out, opacity .1s ease-out, filter .15s;
}

.footer-social-link:active { transform: scale(0.96); opacity: .85; }
.footer-social-link:hover { filter: brightness(1.08); }

.footer-copy {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-hint);
}

/* ВСЕГДА 3 равные колонки, а не auto-fit: тот при нехватке места схлопывал
   их до 2 и растягивал на всю ширину — казалось, что зазор огромный, хотя
   на деле раздувались сами колонки. Так все три просто сужаются вместе. */
.footer-cols {
  flex: 2 1 480px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 32px;
}

.footer-col h4 {
  margin-bottom: 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

.footer-col a {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-second);
  text-decoration: none;
  transition: color .15s;
}

.footer-col a:last-child { margin-bottom: 0; }

.footer-col a:hover { color: var(--text); }

/* Три жёсткие колонки подвала (см. .footer-cols) хороши, пока хватает
   ширины — на телефоне сузились бы до состояния "каждое слово переносится".
   Ниже 640px складываем их в одну колонку одну под другой. */
@media (max-width: 640px) {
  .footer-cols { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .nav { padding: 16px 20px; }
  .hero-actions .btn { width: 100%; }
  /* На узком телефоне лого+вкладка+кнопка не помещаются в одну строку без
     сжатия текста. Основная аудитория этой ширины — установка Android-APK,
     не веб-версия, поэтому вкладку на самых узких экранах просто прячем,
     а не переносим строкой/хардкодим уменьшенный шрифт. */
  .nav-tabs { display: none; }
}