/* AI Goal Achiever — лендинг. Вёрстка секций перенесена из утверждённого дизайна
   (Claude Design → «AIGA Landing.dc.html») и живёт inline-стилями прямо в страницах.
   Здесь только общее: токены обеих тем, база, механика переключателя темы и
   мобильные поправки, которые inline-стилям не выразить. */

:root {
  --bg: #08080c;
  --bg2: #0d0d13;
  --surface: #14141b;
  --surface2: #1a1a22;
  --raise: #20202a;
  --border: #23232d;
  --border2: #33333f;
  --text: #f4f4f8;
  --muted: #9a9ab2;
  --dim: #6b6b7b;
  --brand: var(--p-accent);
  --brand-soft: var(--p-accent2);
  --brand-bg: rgba(124, 92, 255, 0.13);
  --green: var(--p-green);
  --green-bg: rgba(61, 214, 140, 0.1);
  --green-line: rgba(61, 214, 140, 0.34);
  --glow: rgba(124, 92, 255, 0.26);
  --glow2: rgba(124, 92, 255, 0.12);
  --store-bg: #16161d;
  --store-border: #30303c;
  --store-fg: #f4f4f8;
  --p-bg: #121216;
  --p-sheet: #17171c;
  --p-card: #1b1b21;
  --p-card2: #22222a;
  --p-track: #26262e;
  --p-border: #2a2a32;
  --p-border2: #2e2e38;
  --p-radio: #55555f;
  --p-grip: #3a3a46;
  --p-text: #ededf0;
  --p-mut: #c2c2cf;
  --p-sub: #8a8a99;
  --p-dim: #6e6e7c;
  --p-done: #7a7a88;
  --p-accent: #7c5cff;
  --p-accent2: #b49bff;
  --p-accentglow: rgba(124, 92, 255, 0.85);
  --p-chip: #332a57;
  --p-chipfg: #cfc0ff;
  --p-selbg: #2a2440;
  --p-green: #3dd68c;
  --p-greenbg: rgba(61, 214, 140, 0.07);
  --p-greenbg2: rgba(61, 214, 140, 0.15);
  --p-greenline: rgba(61, 214, 140, 0.4);
  --p-donetext: #a8b8af;
  --p-donetext2: #6e8a7b;
  --p-tab: #26262c;
  --p-tabactive: #33333a;
  --p-tabfg: #cfcfd8;
  --p-bezel: #08080b;
  --p-bezelborder: rgba(255, 255, 255, 0.16);
  --shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.95);
  --nav: rgba(8, 8, 12, 0.66);
}

html[data-theme='light'] {
  --bg: #faf9fd;
  --bg2: #f2f1f8;
  --surface: #ffffff;
  --surface2: #f5f4fa;
  --raise: #eeecf7;
  --border: #e7e4f0;
  --border2: #d6d2e5;
  --text: #15131c;
  --muted: #605c70;
  --dim: #8b8797;
  --brand: #6a45f0;
  --brand-soft: #5b36e0;
  --brand-bg: rgba(106, 69, 240, 0.07);
  --green: #0e9457;
  --green-bg: rgba(14, 148, 87, 0.07);
  --green-line: rgba(14, 148, 87, 0.26);
  --glow: rgba(106, 69, 240, 0.15);
  --glow2: rgba(106, 69, 240, 0.07);
  --store-bg: #15131c;
  --store-border: #15131c;
  --store-fg: #ffffff;
  --p-bg: #ffffff;
  --p-sheet: #ffffff;
  --p-card: #f4f3fa;
  --p-card2: #eceaf5;
  --p-track: #e6e3f0;
  --p-border: #e5e2ee;
  --p-border2: #dbd7e8;
  --p-radio: #b5b0c4;
  --p-grip: #d2cede;
  --p-text: #15131c;
  --p-mut: #4a4657;
  --p-sub: #6b6779;
  --p-dim: #9995a6;
  --p-done: #9995a6;
  --p-accent: #6a45f0;
  --p-accent2: #5b36e0;
  --p-accentglow: rgba(106, 69, 240, 0.45);
  --p-chip: #ebe4ff;
  --p-chipfg: #5b36e0;
  --p-selbg: #f1ebff;
  --p-green: #0e9457;
  --p-greenbg: rgba(14, 148, 87, 0.08);
  --p-greenbg2: rgba(14, 148, 87, 0.14);
  --p-greenline: rgba(14, 148, 87, 0.3);
  --p-donetext: #4c6b5a;
  --p-donetext2: #6e8a7b;
  --p-tab: #f0eef7;
  --p-tabactive: #e2def1;
  --p-tabfg: #5c5869;
  --p-bezel: #dad7e5;
  --p-bezelborder: rgba(0, 0, 0, 0.1);
  --shadow: 0 50px 100px -46px rgba(30, 20, 70, 0.34);
  --nav: rgba(250, 249, 253, 0.72);
}

* {
  box-sizing: border-box;
}

/* Кнопки сторов размечены inline-стилями, поэтому hidden без !important их не прячет. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-soft);
  text-decoration: none;
}

a:hover {
  color: var(--brand);
}

::selection {
  background: var(--brand);
  color: #fff;
}

/* Якоря (#get) не должны прятаться под sticky-хедером. */
[id] {
  scroll-margin-top: 76px;
}

/* Кнопка темы: сбрасываем дефолтный вид <button>, остальное задано inline. */
.theme-toggle {
  border: 0;
  padding: 0;
  font: inherit;
}

/* В тёмной теме показываем солнце («переключи на светлую»), в светлой — луну. */
html[data-theme='light'] .icon-sun {
  display: none;
}

html:not([data-theme='light']) .icon-moon {
  display: none;
}

/* Scroll-reveal: элементы секций выезжают снизу, когда до них доскроллили. Прячем их только
   при html[data-anim='on'] — атрибут ставит инлайн-скрипт в <head>, и только когда JS жив и
   система не просит меньше движения. Без атрибута страница просто статична, без мигания. */
html[data-anim='on'] .reveal {
  --reveal-shift: 18px;
  --reveal-time: 0.52s;
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--reveal-time) ease-out,
    transform var(--reveal-time) cubic-bezier(0.22, 0.7, 0.3, 1);
}

/* Мокапы телефонов — объекты в 600+ пикселей высотой: на их фоне ход в 18px не читается
   совсем, поэтому им втрое больший сдвиг и, под стать ему, больше времени. Переопределяем
   только переменные — тогда .is-in и блок reduced-motion ниже остаются главными. */
html[data-anim='on'] .phone-col.reveal {
  --reveal-shift: 56px;
  --reveal-time: 0.76s;
}

html[data-anim='on'] .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Настройку могли включить уже после загрузки — data-anim остаётся, движение убираем здесь. */
@media (prefers-reduced-motion: reduce) {
  html[data-anim='on'] .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Юридические страницы (/terms, /privacy) собираются на бэкенде из content/legal/*.md —
   размечать их inline-стилями, как остальные страницы, нечем, поэтому типографика документа
   живёт здесь. Отступ между разделами — gap колонки плюс margin заголовка (12 + 32 = 44). */
.legal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal-body h2 {
  margin: 32px 0 0;
  font:
    800 24px Manrope,
    sans-serif;
  letter-spacing: -0.6px;
  color: var(--text);
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p {
  margin: 0;
  font:
    400 17px/1.65 Manrope,
    sans-serif;
  color: var(--muted);
  text-wrap: pretty;
}

/* Закрывающая строка «By using AI Goal Achiever…» — приглушённая, как в исходной вёрстке. */
.legal-body > p:last-child {
  color: var(--dim);
}

.legal-body ul {
  margin: 0;
  padding-left: 21px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.legal-body li {
  font:
    400 17px/1.6 Manrope,
    sans-serif;
  color: var(--muted);
  text-wrap: pretty;
}

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

.legal-body strong {
  font-weight: 700;
  color: var(--text);
}

.legal-body blockquote {
  margin: 8px 0 0;
  border-left: 2px solid var(--brand);
  padding: 2px 0 2px 18px;
}

.legal-body blockquote p {
  font:
    600 17px/1.6 Manrope,
    sans-serif;
  color: var(--text);
}

/* Мобильные поправки: дизайн задаёт отступы inline, поэтому важность обязательна. */
@media (max-width: 760px) {
  /* Когда текст и мокап телефона не встают рядом, колонка мокапа центруется. */
  .phone-col {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {
  .brand-name {
    display: none;
  }

  .site-nav {
    padding: 12px 20px !important;
  }

  /* Заголовок карточки цели переносится — иконка и процент прижимаются к верху. */
  .goal-card {
    align-items: flex-start !important;
  }

  .stats-pill span {
    white-space: normal !important;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-float {
    left: 8px !important;
    bottom: 40px !important;
  }

  .stat-grid > div {
    padding: 14px !important;
  }
}