/* 3DCADY — лендинг. Один общий лист стилей на все страницы.
 *
 * Цвета — те же переменные, что в приложении (cady-desktop/src/styles.css,
 * редизайн 04.08.2026): чёрный фон, панели #1a1a1a, синий акцент #3b82f6.
 * Взяты значениями, а не импортом: у лендинга нет сборщика и нет Tailwind.
 *
 * ⚠️ Шрифты — СИСТЕМНЫЕ, внешних загрузок на сайте нет ни одной.
 * Google Fonts подтянул бы стороннюю сеть на страницу, которую банк смотрит
 * на модерации, а из России она ещё и не всегда доезжает. Inter остаётся
 * первым в стопке: если он стоит у пользователя, вид совпадёт с приложением.
 */

:root {
  --bg: #000000;
  --panel: #1a1a1a;
  --panel-hover: #262626;
  --fg: #ffffff;
  --muted: #999999;
  --border: #292929;
  --border-strong: #404040;
  --accent: #3b82f6;
  --accent-hover: #2b71e0;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 12px;
  --wrap: 1080px;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; font-weight: 650; }
h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.02em; }
h2 { font-size: clamp(23px, 3.2vw, 30px); letter-spacing: -.01em; }
h3 { font-size: 18px; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }
strong { font-weight: 650; }
small { font-size: 13px; }

code, .mono {
  font-family: "JetBrains Mono", Consolas, "SF Mono", ui-monospace, monospace;
  font-size: .9em;
}
code {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .1em .38em;
  overflow-wrap: anywhere;
}
pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 1em;
}
pre code { background: none; border: 0; padding: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.lead { font-size: 18px; color: var(--muted); max-width: 62ch; }

/* ── Метка незаполненного значения ────────────────────────────────
 * Видимая нарочно. Такое на странице не отправишь на модерацию
 * случайно — оно бросается в глаза и грепается: grep -rn 'TODO:' site/
 */
.todo {
  background: #3a2a05;
  color: #ffce6a;
  border: 1px dashed var(--warning);
  border-radius: 5px;
  padding: 0 .35em;
  font-family: "JetBrains Mono", Consolas, ui-monospace, monospace;
  font-size: .85em;
}

/* Метка внутри <code> — а так стоит половина меток в юридических текстах —
 * не должна рисовать вторую рамку поверх рамки кода. Оставляем один цвет. */
code .todo {
  background: none;
  border: 0;
  padding: 0;
}

.todo-note {
  background: #2a1f05;
  border: 1px dashed var(--warning);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 24px;
  color: #ffce6a;
  font-size: 14px;
}
.todo-note p:last-child { margin-bottom: 0; }

/* ── Шапка ─────────────────────────────────────────────────────── */
.site-head {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.02em;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-name { font-weight: 650; letter-spacing: -.01em; }
.site-nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--fg); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--fg); }

/* ── Кнопки ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
}
.btn:hover { background: var(--panel-hover); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── Секции ────────────────────────────────────────────────────── */
section { padding: 56px 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: 0; }
.hero { padding: 72px 0 60px; }
.hero h1 { max-width: 20ch; }

.page-head { padding: 48px 0 8px; border-top: 0; }
.page-head h1 { font-size: clamp(27px, 4vw, 38px); }

/* ── Карточки и сетки ──────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.card h3 { margin-bottom: .4em; }
.card p:last-child, .card ul:last-child, .card ol:last-child { margin-bottom: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ── Шаги ──────────────────────────────────────────────────────── */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin-bottom: 22px;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  font-size: 14px; font-weight: 650;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { margin-bottom: .25em; }
.steps p:last-child { margin-bottom: 0; }

/* ── Тарифы ────────────────────────────────────────────────────── */
.plan { display: flex; flex-direction: column; }
.plan-name { font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.plan-price { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.plan-price .per { font-size: 14px; font-weight: 400; color: var(--muted); }
.plan-credits { margin: 10px 0 14px; font-weight: 600; }
.plan ul { list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--muted); }
.plan li { padding-left: 18px; position: relative; }
.plan li::before { content: "·"; position: absolute; left: 6px; color: var(--border-strong); }
.plan-featured { border-color: var(--accent); }
.badge {
  display: inline-block;
  font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(59, 130, 246, .15);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

/* ── Таблицы ───────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 420px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }

/* ── Врезки ────────────────────────────────────────────────────── */
.note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 16px 20px;
  margin: 0 0 20px;
}
.note-warn { border-left-color: var(--warning); }
.note-warn h3 { color: var(--warning); }
.note p:last-child, .note ol:last-child, .note ul:last-child { margin-bottom: 0; }

/* ── Способы оплаты ────────────────────────────────────────────── */
.paylist { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 1em; }
.paylist li {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 15px;
  margin: 0;
}

/* ── Подвал ────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--border);
  padding: 40px 0 56px;
  font-size: 14px;
  color: var(--muted);
}
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--fg); }
.foot-grid {
  display: grid;
  gap: 28px;
  /* 200px, а не 240: при 240 четвёртая колонка (реквизиты) не влезала
     в 1080px вместе с зазорами и уезжала на вторую строку — реквизиты
     оказывались оторванными от остального подвала. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 28px;
}
.foot-title { color: var(--fg); font-weight: 650; margin-bottom: 10px; font-size: 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 6px; }
.requisites { line-height: 1.7; }
.foot-bottom { border-top: 1px solid var(--border); padding-top: 20px; font-size: 13px; }

@media (max-width: 600px) {
  section { padding: 40px 0; }
  .hero { padding: 48px 0 40px; }
  .site-nav { gap: 16px; font-size: 13px; }
}

/* ── Утилиты отступов и ширины ──────────────────────────────────────
 * Инлайновых style="…" на страницах нет ни одного, и это не эстетика,
 * а требование: Content-Security-Policy отдаёт style-src 'self', а
 * инлайновый атрибут style под это правило не подпадает и молча
 * отбрасывается браузером. Поймано прогоном в Chromium: под CSP
 * страница разъезжалась ровно по тем местам, где стояли инлайны.
 * Новый отступ — новый класс здесь, не атрибут в разметке.
 */
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 28px; }
.mt-5 { margin-top: 32px; }
.mt-6 { margin-top: 36px; }
.mt-7 { margin-top: 44px; }
.mb-0 { margin-bottom: 0; }
.mb-tight { margin-bottom: .5em; }
.label-row { margin: 18px 0 6px; }

.small { font-size: 14px; }
.narrow { max-width: 76ch; }
.narrow-s { max-width: 62ch; }
.w-560 { max-width: 560px; }
.w-640 { max-width: 640px; }
.w-760 { max-width: 760px; }
.w-820 { max-width: 820px; }
.w-900 { max-width: 900px; }

.w34 { width: 34%; }
.w38 { width: 38%; }
.w46 { width: 46%; }

/* ── Юридические страницы ───────────────────────────────────────────
 * Оферта, условия оплаты, политика ПДн, согласие. Страницы собираются из
 * Markdown скриптом landing/build-site.py, поэтому разметка внутри
 * .legal — обычные h2/h3/p/ul/ol/table, без классов.
 */
.legal { max-width: 76ch; }
.legal h2 {
  font-size: 21px;
  margin-top: 2em;
  padding-top: .8em;
  border-top: 1px solid var(--border);
}
.legal > :first-child { margin-top: 0; }
.legal h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal h3 { font-size: 17px; margin-top: 1.8em; }
.legal h4 { font-size: 15px; margin-top: 1.5em; color: var(--muted); }
.legal table { margin-bottom: 1em; }
.legal .table-scroll, .legal p, .legal ul, .legal ol { max-width: 100%; }
.legal pre { font-size: 13px; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* ── Окно «ранний доступ» ───────────────────────────────────────────
   Без JavaScript: блок скрыт, а :target показывает его, когда адрес
   заканчивается его идентификатором. Скриптов на сайте нет — их
   запрещает CSP (default-src 'none' без script-src). */
.modal { display: none; }
.modal:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .6);
  padding: 20px;
}
.modal-card { max-width: 460px; width: 100%; }
.modal-card p:last-of-type { margin-bottom: 0; }