/* ============================================================
   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 {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

.nav {
  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;
}

/* Анимированный логотип с эффектом глитча.
   НЕ перерисован шрифтом/градиентом — это настоящая иконка приложения
   (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-small { width: 26px; height: 26px; border-radius: 8px; }

.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: center;
}

.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: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  justify-content: center;
  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;
}

/* ---------- Список возможностей/безопасности — независимые карточки ---------- */
/* auto-fit сам решает, сколько колонок влезает — на широком экране это 3-4,
   на планшете 2, на телефоне 1, без ручных брейкпоинтов под каждый размер.
   Раньше список был ОДНИМ сплошным блоком с общим фоном (полосы между
   карточками — подсвеченный фон снизу, не настоящий отступ), и если число
   карточек не делилось на число колонок нацело, в последнем ряду оставались
   пустые "дыры" внутри общей рамки — заметный баг на широких экранах.
   Теперь каждая карточка — независимый элемент со своим фоном/рамкой/радиусом
   (как bgCard+borderCard в приложении), а между ними настоящий gap. Неполный
   последний ряд просто оставляет пустое место фона страницы, а не дыру. */

.list {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.item {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 28px 26px;
}

.item h3 {
  font-size: 17px;
  font-weight: 700;
}

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

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

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

.footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 36px clamp(20px, 4vw, 56px) 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--border);
}

.f-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-second);
}

.f-links {
  display: flex;
  gap: 22px;
}

.f-links a {
  font-size: 14px;
  color: var(--text-second);
  text-decoration: none;
}

.f-links a:hover { color: var(--text); }

@media (max-width: 480px) {
  .nav { padding: 16px 20px; }
  .hero-actions .btn { width: 100%; }
}