/* ═══════════════════════════════════════════════════════════════════════════
   Система оформления iCity для веба.
   Значения НЕ придуманы — перенесены из кода приложений, чтобы сайт выглядел
   продолжением продукта, а не посторонней страницей:
     цвета   — icity-new-android/app/src/main/java/org/icitygkt/core/designsystem/theme/Color.kt
     радиусы — там же Shape.kt и icity-ios/Packages/IcityUI/Sources/IcityUI/Theme/IcityShapes.swift
     тени    — icity-ios/.../IcityShadow.swift
     шрифты  — icity-new-android/app/src/main/res/font/{manrope,unbounded}.ttf
   Меняете токен здесь — сверьтесь с источником, иначе сайт и приложение разъедутся.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Шрифты лежат рядом. Внешних запросов у страницы нет ни одного: это и точное
   совпадение с приложением, и отсутствие передачи данных третьей стороне. */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('fonts/unbounded.ttf') format('truetype');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  /* Фирменные */
  --brand: #00A98F;
  --brand-deep: #007E6B;
  --brand-dark: #001C1D;
  --brand-soft: #DFF5F0;

  /* Акценты и состояния */
  --accent: #FFB020;
  --danger: #EF4D4D;
  --danger-soft: #FDE7E7;
  --info: #3B82F6;
  --info-soft: #E4EEFF;
  --sky: #15A0C9;
  --warn-soft: #FFF3DA;
  --warn-ink: #E87A02;

  /* Текст */
  --ink: #0E1726;
  --ink-2: #5A6675;
  --ink-3: #94A0AD;

  /* Поверхности */
  --surface: #FFFFFF;
  --surface-2: #F0F3F5;
  --bg: #F4F6F8;
  --line: #E7EBEF;

  /* Радиусы */
  --r-card: 22px;
  --r-button: 18px;
  --r-tile: 18px;
  --r-small: 14px;
  --r-chip: 8px;
  --r-control: 12px;
  --r-thumb: 16px;

  /* Тени */
  --shadow-soft: 0 10px 30px rgba(14, 23, 38, .08), 0 2px 6px rgba(14, 23, 38, .04);
  --shadow-elevated: 0 18px 44px rgba(14, 23, 38, .14), 0 3px 10px rgba(14, 23, 38, .06);
  --shadow-brand: 0 12px 28px rgba(0, 126, 107, .28);

  /* Шрифты */
  --font-text: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Раскладка */
  --page: 1180px;
  --gutter: 24px;
  --header-h: 68px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #16C6A8;
    --brand-deep: #00A98F;
    --brand-soft: #10322E;
    --accent: #FFC04D;
    --danger: #FF6B6B;
    --danger-soft: #3A1E1E;
    --info: #5C9BFF;
    --info-soft: #16233A;
    --warn-soft: #33280F;
    --warn-ink: #FFB84D;
    --ink: #E8EDF2;
    --ink-2: #A3AFBC;
    --ink-3: #6E7B8A;
    --surface: #131A24;
    --surface-2: #1B242F;
    --bg: #0E1520;
    --line: #263140;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .40), 0 2px 6px rgba(0, 0, 0, .28);
    --shadow-elevated: 0 18px 44px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .34);
    --shadow-brand: 0 12px 28px rgba(0, 169, 143, .30);
  }
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Типографика ────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(32px, 5vw, 54px); font-weight: 800; line-height: 1.08; }
h2 { font-size: clamp(25px, 3.2vw, 36px); font-weight: 700; line-height: 1.16; }
h3 { font-size: clamp(18px, 2vw, 21px); font-weight: 700; line-height: 1.28; }
h4 { font-size: 16px; font-weight: 700; line-height: 1.3; }

p { margin: 0 0 16px; }
.lead { font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }

.eyebrow {
  display: inline-block; margin-bottom: 14px;
  font: 700 12px/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-deep); background: var(--brand-soft);
  padding: 8px 12px; border-radius: var(--r-chip);
}

section { padding: clamp(52px, 8vw, 96px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 + p { margin-top: 14px; }

/* ── Шапка ──────────────────────────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; gap: 28px; height: 100%; }

.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo:hover { text-decoration: none; }
/* Иконка приложения как есть — та же, что у пользователя на домашнем экране и в сторе.
   Подложка внутри самого файла (#001C1D = --brand-dark), поэтому фон здесь не задаётся. */
.logo-mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px; box-shadow: var(--shadow-brand);
}
.logo-text { font: 800 20px/1 var(--font-display); letter-spacing: -.04em; color: var(--ink); }

.nav { display: flex; gap: 4px; margin-right: auto; }
.nav a {
  padding: 9px 13px; border-radius: var(--r-chip);
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
}
.nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--brand-deep); background: var(--brand-soft); }

.nav-toggle {
  display: none; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-control); cursor: pointer; color: var(--ink);
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: var(--r-button);
  font: 700 15px/1 var(--font-text); white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn svg, .nav-toggle svg { width: 18px; height: 18px; flex: none; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand-deep); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-soft); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); }
.btn-sm { padding: 10px 16px; font-size: 14px; }

/* ── Карточки и сетки ───────────────────────────────────────────────────── */

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

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 26px;
  box-shadow: var(--shadow-soft);
}
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }

a.card { color: inherit; display: block; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
a.card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-elevated); border-color: var(--brand); }

.icon-chip {
  width: 46px; height: 46px; border-radius: var(--r-small);
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--brand-soft); color: var(--brand-deep);
}
.icon-chip svg { width: 23px; height: 23px; }
.icon-chip.amber { background: var(--warn-soft); color: var(--warn-ink); }
.icon-chip.blue  { background: var(--info-soft); color: var(--info); }
.icon-chip.rose  { background: var(--danger-soft); color: var(--danger); }

/* ── Обложка страницы ───────────────────────────────────────────────────── */

.hero { padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 + p { margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.page-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 48px); }
.page-hero h1 + p { margin-top: 18px; max-width: 760px; }

/* Рамка телефона вокруг настоящего скриншота приложения.
   Раньше здесь был нарисованный CSS-макет — он врал о продукте, показывая экран,
   которого нет. Снимки лежат в assets/shots/ и взяты из готовых материалов Google Play. */
.phone {
  width: min(300px, 78vw); margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 38px; padding: 11px;
  box-shadow: var(--shadow-elevated);
}
.phone-screen {
  aspect-ratio: 1080 / 2392;   /* пропорции снимков: 1080x2392, современный высокий экран */
  border-radius: 28px; overflow: hidden; background: var(--surface-2);
}
.phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Галерея экранов: те же рамки в ряд, с подписью под каждой. */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px; }
.shot { text-align: center; }
.shot .phone { width: 100%; max-width: 260px; }
.shot figcaption { margin-top: 16px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.shot figcaption b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 3px; }

/* ── Списки-достоинства ─────────────────────────────────────────────────── */

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007E6B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.checks strong { display: block; }

/* ── Шаги ───────────────────────────────────────────────────────────────── */

.steps { counter-reset: step; display: grid; gap: 20px; }
.step { position: relative; padding-left: 62px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: var(--r-small);
  display: grid; place-items: center;
  background: var(--brand-deep); color: #fff;
  font: 800 17px/1 var(--font-display); box-shadow: var(--shadow-brand);
}
.step h3 { margin-bottom: 6px; }
.step p { margin-bottom: 0; }

/* ── Полоса-выноска ─────────────────────────────────────────────────────── */

.band {
  background: linear-gradient(140deg, var(--brand-dark) 0%, #05413B 55%, var(--brand-deep) 100%);
  color: #fff; border-radius: var(--r-card); padding: clamp(28px, 5vw, 52px);
  box-shadow: var(--shadow-elevated);
}
.band h2 { color: #fff; }
.band p { color: rgba(255, 255, 255, .82); }
.band .btn-ghost { background: #fff; color: var(--brand-dark); border-color: transparent; }
.band .btn-ghost:hover { color: var(--brand-deep); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.stat b { display: block; font: 800 clamp(26px, 3.4vw, 38px)/1 var(--font-display); color: var(--brand-deep); letter-spacing: -.03em; }
.stat span { display: block; margin-top: 8px; color: var(--ink-2); font-size: 14.5px; }
.band .stat b { color: #fff; }
.band .stat span { color: rgba(255, 255, 255, .78); }

/* ── Заметка ────────────────────────────────────────────────────────────── */

.note {
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn-ink) 34%, transparent);
  border-radius: var(--r-small); padding: 18px 22px; color: var(--ink);
}
.note strong { color: var(--warn-ink); }
.note p:last-child { margin-bottom: 0; }

/* ── Вопросы и ответы ───────────────────────────────────────────────────── */

.faq { display: grid; gap: 12px; }
details.qa {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-small); padding: 18px 22px;
}
details.qa[open] { border-color: var(--brand); box-shadow: var(--shadow-soft); }
details.qa summary {
  cursor: pointer; list-style: none; font-weight: 700; font-size: 16.5px;
  display: flex; align-items: center; gap: 14px;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+"; margin-left: auto; flex: none;
  width: 28px; height: 28px; border-radius: var(--r-chip);
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--brand-deep);
  font: 700 18px/1 var(--font-text);
}
details.qa[open] summary::after { content: "−"; background: var(--brand-soft); }
details.qa p { margin: 14px 0 0; color: var(--ink-2); }

/* ── Таблица ────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-small); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }

/* ── Подвал ─────────────────────────────────────────────────────────────── */

.footer { background: var(--surface); border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 64px) 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.footer h4 { margin-bottom: 14px; font-family: var(--font-text); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: var(--ink-2); font-size: 15px; }
.footer a:hover { color: var(--brand-deep); }
.footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  color: var(--ink-3); font-size: 13.5px;
}

/* ── Страница дома (/dom/…, рисуется скриптом assets/dom.js) ────────────── */

/* Скрипт прячет блоки атрибутом hidden; display у классов ниже не должен его перебивать. */
.wiki-hero [hidden], .wiki-body[hidden], .wiki-body [hidden] { display: none !important; }

.wiki-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.wiki-home:has(.wiki-photo:not([hidden])) { grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); }
.wiki-photo { border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-soft); aspect-ratio: 4 / 3; }
.wiki-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wiki-home-text h1 { font-size: clamp(28px, 4vw, 44px); }
.wiki-home-text .lead { margin-top: 12px; }
.wiki-crumbs { margin-bottom: 10px; color: var(--ink-3); }
.wiki-crumbs a { color: var(--brand-deep); }
.wiki-org { margin-top: 6px; }
.wiki-org-name { margin: 0 0 4px; font-weight: 700; }
.wiki-org-contacts { margin: 0; }
.wiki-org-contacts a { color: var(--ink); }
.wiki-status h1 { margin-bottom: 14px; }
.wiki-status .lead { max-width: 640px; }

.wiki-card { display: flex; flex-direction: column; }
.wiki-card-cover { width: calc(100% + 52px); margin: -26px -26px 18px; border-radius: var(--r-card) var(--r-card) 0 0; aspect-ratio: 16 / 9; object-fit: cover; }
.wiki-card h3 { margin-bottom: 8px; }
.wiki-card .wiki-card-date { margin: auto 0 0; padding-top: 10px; }

.wiki-article { max-width: 820px; margin: 0 auto; padding: clamp(24px, 4vw, 40px); }
.wiki-article h2 { margin-bottom: 14px; }
.wiki-cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r-small); margin-bottom: 22px; }
.wiki-html { font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.wiki-html h1, .wiki-html h2, .wiki-html h3, .wiki-html h4, .wiki-html h5, .wiki-html h6 { margin: 28px 0 10px; }
.wiki-html h1 { font-size: clamp(24px, 3vw, 32px); }
.wiki-html h2 { font-size: clamp(21px, 2.6vw, 26px); }
.wiki-html h3 { font-size: 19px; }
.wiki-html img { border-radius: var(--r-small); display: block; margin: 18px auto; }
.wiki-html blockquote { margin: 18px 0; padding: 12px 20px; border-left: 4px solid var(--brand); background: var(--brand-soft); border-radius: 0 var(--r-small) var(--r-small) 0; }
.wiki-html blockquote p:last-child { margin-bottom: 0; }
.wiki-html code { font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.wiki-html pre { background: var(--surface-2); padding: 16px; border-radius: var(--r-small); overflow-x: auto; }
.wiki-html pre code { padding: 0; background: none; }
.wiki-html table { display: block; overflow-x: auto; }
.wiki-html th, .wiki-html td { border: 1px solid var(--line); }
.wiki-html ul, .wiki-html ol { padding-left: 24px; }
.wiki-html li { margin-bottom: 6px; }
.wiki-html hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }
.wiki-html a { text-decoration: underline; }
.wiki-html input[type="checkbox"] { margin-right: 8px; accent-color: var(--brand-deep); }
.wiki-html figure { margin: 18px 0; }
.wiki-html figcaption { font-size: 14px; color: var(--ink-2); text-align: center; }

@media (max-width: 760px) {
  .wiki-home:has(.wiki-photo:not([hidden])) { grid-template-columns: 1fr; }
  .wiki-photo { aspect-ratio: 16 / 10; }
  .wiki-card-cover { width: calc(100% + 44px); margin: -22px -22px 16px; }
}

/* ── Узкий экран ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49;
    flex-direction: column; gap: 2px; margin: 0; padding: 12px var(--gutter) 20px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-elevated);
    display: none;
  }
  body.nav-open .nav { display: flex; }
  .nav a { padding: 13px; font-size: 16px; }
  .header-cta { display: none; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .card { padding: 22px; }
}

@media print {
  .header, .footer, .nav-toggle, .hero-actions { display: none !important; }
  body { background: #fff; }
}