/* Chatix — дизайн-система лендинга.
   Тёмная тема — основная, светлая существует как отдельно подобранный набор
   шагов, а не как инверсия: у лаймового акцента на белом контраст 1.2:1, им
   нельзя рисовать ни график, ни текст. Поэтому в светлой теме акцент — своя
   тёмная ступень того же тона (4.8:1 на белом). */

@layer tokens, base, layout, components, sections, motion;

@layer tokens {
  :root {
    color-scheme: dark;

    /* Поверхности */
    --bg:        light-dark(#f4f4ef, #0a0b0d);
    --surface:   light-dark(#ffffff, #101215);
    --surface-2: light-dark(#fafaf5, #16181c);
    --surface-3: light-dark(#eeefe6, #1d2025);

    /* Текст. Значения выбраны по контрасту к своей поверхности:
       вторичный 6.4:1, приглушённый 4.6:1 — читаемо, а не «серо». */
    --ink:   light-dark(#14161a, #f4f5f3);
    --ink-2: light-dark(#5a6060, #a3a8a2);
    --ink-3: light-dark(#6a706a, #8a9190);

    --line:   light-dark(rgb(20 22 26 / 10%), rgb(255 255 255 / 9%));
    --line-2: light-dark(rgb(20 22 26 / 18%), rgb(255 255 255 / 16%));

    /* Акцент. --accent-bright используется только как заливка под тёмным
       текстом (маркер, плашка): как обводка или мазок на светлом он невидим. */
    --accent:        light-dark(#5c7c00, #ccfb50);
    --accent-bright: #ccfb50;
    --on-accent:     light-dark(#ffffff, #0a0b0d);
    --accent-wash:   color-mix(in oklab, var(--accent) 12%, transparent);

    /* Главная кнопка на светлом — чернильная, а не оливковая: тёмная ступень
       лайма на бумаге выглядит грязно, а яркий лайм не отделяется от фона
       (1.2:1) — заметен был бы только текст на нём. */
    --cta-bg:  light-dark(#14161a, #ccfb50);
    --cta-ink: light-dark(#ffffff, #0a0b0d);

    /* Серия графиков — тот же тон, проверенный на своей поверхности */
    --series:      light-dark(#5c7c00, #ccfb50);
    --grid:        light-dark(rgb(20 22 26 / 9%), rgb(255 255 255 / 8%));

    --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
            "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

    --step--1: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
    --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
    --step-1:  clamp(1.1rem, 1.03rem + 0.34vw, 1.3rem);
    --step-2:  clamp(1.45rem, 1.28rem + 0.85vw, 2rem);
    --step-3:  clamp(1.9rem, 1.55rem + 1.75vw, 3rem);
    --step-4:  clamp(2.55rem, 1.75rem + 3.9vw, 5.2rem);

    --shell: 1200px;
    --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 3rem);
    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 28px;

    --shadow: light-dark(0 24px 60px -32px rgb(20 22 26 / 30%), 0 30px 70px -40px rgb(0 0 0 / 90%));
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}

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

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
  }

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

  body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  p { margin: 0; text-wrap: pretty; }
  ul { margin: 0; padding: 0; list-style: none; }

  a { color: inherit; text-decoration: none; }

  img, svg { display: block; max-width: 100%; }

  button, input { font: inherit; color: inherit; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
  }

  ::selection {
    background: var(--accent-bright);
    color: #0a0b0d;
  }

  [hidden] { display: none !important; }
}

@layer layout {
  .shell {
    width: min(100% - var(--gutter) * 2, var(--shell));
    margin-inline: auto;
  }

  .section {
    padding-block: clamp(4.5rem, 3rem + 7vw, 9rem);
    position: relative;
  }

  .section__head {
    display: grid;
    gap: 1rem;
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  }

  .section__head p {
    color: var(--ink-2);
    font-size: var(--step-1);
    max-width: 38rem;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .eyebrow::before {
    content: "";
    inline-size: 1.6rem;
    block-size: 1px;
    background: var(--accent);
  }

  .h2 { font-size: var(--step-3); }

  .rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0;
  }
}

@layer components {
  /* ---------- Кнопки ---------- */
  .btn {
    --btn-bg: transparent;
    --btn-ink: var(--ink);
    --btn-line: var(--line-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.35rem;
    border: 1px solid var(--btn-line);
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-size: var(--step-0);
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.18s var(--ease), background 0.18s var(--ease),
                border-color 0.18s var(--ease), opacity 0.18s var(--ease);
  }

  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

  .btn--primary {
    --btn-bg: var(--cta-bg);
    --btn-ink: var(--cta-ink);
    --btn-line: transparent;
    font-weight: 600;
  }

  .btn--primary:hover:not([disabled]) {
    --btn-bg: color-mix(in oklab, var(--cta-bg) 86%, var(--cta-ink));
  }

  .btn--quiet {
    --btn-bg: var(--surface-3);
    --btn-line: transparent;
    color: var(--ink-2);
  }

  .btn--sm { padding: 0.5rem 1rem; font-size: var(--step--1); }
  .btn--block { inline-size: 100%; }

  .btn__arrow { transition: transform 0.2s var(--ease); }
  .btn:hover .btn__arrow { transform: translateX(3px); }

  /* ---------- Значки ---------- */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.85rem 0.4rem 0.7rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: var(--step--1);
    color: var(--ink-2);
    background: var(--surface);
  }

  .dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent);
    animation: ping 2.6s var(--ease) infinite;
  }

  @keyframes ping {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  /* ---------- Иконка Lucide через маску: наследует цвет текста ---------- */
  .ic {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    background: currentColor;
    -webkit-mask: var(--src) center / contain no-repeat;
    mask: var(--src) center / contain no-repeat;
    flex: none;
  }

  /* ---------- Тост ---------- */
  .toast {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline: 0;
    z-index: 90;
    margin-inline: auto;
    inline-size: max-content;
    max-inline-size: min(90vw, 28rem);
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    background: light-dark(#14161a, #22252a);
    color: #f4f5f3;
    border: 1px solid light-dark(transparent, rgb(255 255 255 / 12%));
    box-shadow: var(--shadow);
    font-size: var(--step--1);
    opacity: 0;
    translate: 0 1rem;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), translate 0.25s var(--ease);
  }

  .toast.is-visible { opacity: 1; translate: 0 0; }
}

/* =====================================================================
   Шапка
   ===================================================================== */
@layer sections {
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    padding-block: 0.85rem;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-block-end: 1px solid transparent;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
  }

  .site-header.is-stuck { border-block-end-color: var(--line); }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.045em;
  }

  .brand svg { inline-size: 1.65rem; block-size: 1.65rem; }

  .nav {
    display: flex;
    gap: 0.35rem;
    margin-inline-start: auto;
  }

  .nav a {
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: var(--step--1);
    color: var(--ink-2);
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
  }

  .nav a:hover { color: var(--ink); background: var(--surface-3); }

  .header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
  }

  .nav + .header__actions { margin-inline-start: 0; }

  .theme-toggle {
    display: grid;
    place-items: center;
    inline-size: 2.3rem;
    block-size: 2.3rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
  }

  .theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
  .theme-toggle svg { inline-size: 1.05rem; block-size: 1.05rem; }
  .theme-toggle .ic--moon { display: none; }
  :root[data-theme="light"] .theme-toggle .ic--sun { display: none; }
  :root[data-theme="light"] .theme-toggle .ic--moon { display: inline-block; }

  @media (max-width: 860px) {
    .nav { display: none; }
  }

  /* =====================================================================
     Первый экран
     ===================================================================== */
  .hero {
    position: relative;
    padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 6rem);
    isolation: isolate;
  }

  /* Пятно за заголовком. Радиальный градиент, а не картинка: он тянется
     под любой размер и не даёт лишнего запроса. */
  .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: -18vh;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: min(120rem, 160vw);
    block-size: min(70rem, 110vh);
    background:
      radial-gradient(45% 40% at 30% 35%, color-mix(in oklab, var(--accent-bright) light-dark(22%, 14%), transparent), transparent 70%),
      radial-gradient(40% 45% at 72% 20%, color-mix(in oklab, #6c5cff light-dark(16%, 22%), transparent), transparent 68%);
    filter: blur(20px);
    pointer-events: none;
  }

  .hero__grid {
    display: grid;
    gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
    align-items: start;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  @media (max-width: 1000px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); }
  }

  .hero h1 {
    font-size: var(--step-4);
    margin-block: 1.5rem 1.5rem;
  }

  /* Маркер закрашивает слово целиком, а не подчёркивает его снизу: белый
     текст на лайме даёт контраст 1.2:1, тёмный на лайме — 16:1. Фон рисуется
     самим элементом, поэтому никаких z-index под текстом не нужно. */
  .hero h1 em {
    font-style: normal;
    white-space: nowrap;
    background: var(--accent-bright);
    color: #0a0b0d;
    padding-inline: 0.12em;
    margin-inline: -0.04em;
    border-radius: 8px;
    box-decoration-break: clone;
  }

  .hero__lede {
    font-size: var(--step-1);
    color: var(--ink-2);
    max-width: 34rem;
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 2rem;
  }

  /* На узком экране кнопки переносятся и встают лесенкой по ширине текста —
     тянем обе на всю строку, чтобы край был один. */
  @media (max-width: 520px) {
    .hero__cta { display: grid; }
  }

  .hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
    background: var(--line);
    border-block: 1px solid var(--line);
  }

  .hero__stats > div {
    background: var(--bg);
    padding: 1.1rem 1.1rem 1.1rem 0;
    display: grid;
    gap: 0.15rem;
  }

  .hero__stats > div + div { padding-inline-start: 1.1rem; }

  .hero__stats b {
    font-size: var(--step-2);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .hero__stats span {
    font-size: var(--step--1);
    color: var(--ink-3);
  }

  /* ---------- Живой счётчик ---------- */
  .live {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .live b {
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  /* =====================================================================
     Карточка входа
     ===================================================================== */
  .auth {
    position: relative;
    padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    display: grid;
    gap: 1.5rem;
    container-type: inline-size;
  }

  /* Тонкая лаймовая кромка сверху — единственное украшение карточки. */
  .auth::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 12%;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
  }

  .auth__head { display: grid; gap: 0.45rem; }
  .auth__head h2 { font-size: var(--step-2); }
  .auth__head p { color: var(--ink-3); font-size: var(--step--1); }

  .auth__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--surface-3);
    border-radius: 999px;
  }

  .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    font-size: var(--step--1);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
  }

  .tab[aria-selected="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
  }

  .tab small {
    font-size: 0.68em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
  }

  .form { display: grid; gap: 1.15rem; }

  .field { display: grid; gap: 0.45rem; }

  .field > span {
    font-size: var(--step--1);
    color: var(--ink-2);
  }

  .field input {
    inline-size: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
  }

  .field input::placeholder { color: var(--ink-3); }

  .field input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
  }

  .field input.is-invalid { border-color: light-dark(#c0341f, #ff7a68); }

  .error {
    font-size: var(--step--1);
    color: light-dark(#c0341f, #ff7a68);
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: start;
    font-size: var(--step--1);
    color: var(--ink-2);
    cursor: pointer;
    line-height: 1.45;
  }

  .consent input { position: absolute; opacity: 0; pointer-events: none; }

  .consent__box {
    inline-size: 1.2rem;
    block-size: 1.2rem;
    margin-block-start: 0.1rem;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: transparent;
    font-size: 0.75rem;
    transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
  }

  .consent input:checked + .consent__box {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }

  .consent input:focus-visible + .consent__box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

  .auth__note {
    font-size: var(--step--1);
    color: var(--ink-3);
    text-align: center;
  }

  /* ---------- Шаг с кодом ---------- */
  .code { display: grid; gap: 1.15rem; }

  @starting-style {
    .code { opacity: 0; translate: 0 8px; }
  }

  .code { transition: opacity 0.3s var(--ease), translate 0.3s var(--ease); }

  .code__back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-3);
    font-size: var(--step--1);
    cursor: pointer;
  }

  .code__back:hover { color: var(--ink); }

  .code__head { display: grid; gap: 0.4rem; }
  .code__head h3 { font-size: var(--step-2); }
  .code__head p { color: var(--ink-3); font-size: var(--step--1); }
  .code__head b { color: var(--ink); font-weight: 500; }

  .code__cells {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .code__cells input {
    inline-size: 100%;
    aspect-ratio: 3 / 3.6;
    padding: 0;
    text-align: center;
    font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
  }

  .code__cells input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
  }

  .code__cells.is-invalid input { border-color: light-dark(#c0341f, #ff7a68); }

  .code__status {
    font-size: var(--step--1);
    color: var(--ink-3);
    text-align: center;
  }

  .code__status.is-error { color: light-dark(#c0341f, #ff7a68); }

  .code__resend {
    justify-self: center;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: var(--step--1);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .code__resend[disabled] { color: var(--ink-3); text-decoration: none; cursor: not-allowed; }

  /* =====================================================================
     Форматы
     ===================================================================== */
  .formats__grid {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  .fmt {
    background: var(--surface);
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    display: grid;
    gap: 1rem;
    align-content: start;
    transition: background 0.25s var(--ease);
  }

  .fmt:hover { background: var(--surface-2); }

  .fmt__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-3);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
  }

  .fmt__icon {
    display: grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: 12px;
    background: var(--accent-wash);
    color: var(--accent);
    font-size: 1.25rem;
  }

  .fmt h3 { font-size: var(--step-1); }
  .fmt p { color: var(--ink-2); font-size: var(--step--1); }

  .fmt__demo {
    margin-block-start: 0.5rem;
    block-size: 6.5rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 0.9rem;
    display: grid;
    overflow: hidden;
  }

  /* демо: текст */
  .demo-text { align-content: center; gap: 0.4rem; justify-items: start; }

  .demo-text span {
    padding: 0.4rem 0.75rem;
    border-radius: 999px 999px 999px 4px;
    background: var(--surface-3);
    font-size: var(--step--1);
    color: var(--ink-2);
    max-inline-size: 90%;
  }

  .demo-text span:last-child {
    justify-self: end;
    border-radius: 999px 999px 4px 999px;
    background: var(--accent);
    color: var(--on-accent);
  }

  /* демо: голос */
  .demo-voice {
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .demo-voice i {
    inline-size: 4px;
    block-size: var(--h, 30%);
    border-radius: 2px;
    background: var(--accent);
    opacity: 0.85;
    animation: eq 1.1s var(--ease) infinite alternate;
    animation-delay: var(--d, 0s);
  }

  @keyframes eq { to { block-size: var(--h2, 80%); } }

  /* демо: видео */
  .demo-video {
    grid-auto-flow: column;
    gap: 0.55rem;
    align-items: stretch;
  }

  .demo-video div {
    border-radius: 10px;
    background:
      radial-gradient(60% 55% at 50% 78%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 72%),
      var(--surface-3);
    display: grid;
    place-items: end center;
    padding-block-end: 0.4rem;
    position: relative;
    overflow: hidden;
  }

  .demo-video div::before {
    content: "";
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ink) 22%, transparent);
    position: absolute;
    inset-block-end: 1.55rem;
  }

  .demo-video div::after {
    content: "";
    inline-size: 2.6rem;
    block-size: 1.5rem;
    border-radius: 999px 999px 0 0;
    background: color-mix(in oklab, var(--ink) 22%, transparent);
  }

  /* =====================================================================
     География и графики
     ===================================================================== */
  .geo__grid {
    display: grid;
    gap: clamp(1.25rem, 0.5rem + 2vw, 2rem);
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
  }

  @media (max-width: 940px) {
    .geo__grid { grid-template-columns: minmax(0, 1fr); }
  }

  .chart-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
    display: grid;
    gap: 1.5rem;
    align-content: start;
  }

  .chart-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .chart-card__head h3 {
    font-size: var(--step-1);
    letter-spacing: -0.025em;
  }

  .chart-card__head p {
    font-size: var(--step--1);
    color: var(--ink-3);
    inline-size: 100%;
  }

  /* Главная цифра страницы — одна. */
  .figure-hero {
    display: grid;
    gap: 0.2rem;
  }

  .figure-hero b {
    font-size: clamp(2.6rem, 1.9rem + 3vw, 4rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.045em;
  }

  .figure-hero span {
    font-size: var(--step--1);
    color: var(--ink-3);
  }

  .plot { position: relative; inline-size: 100%; }
  .plot svg { display: block; inline-size: 100%; }
  .plot:focus-visible { outline-offset: 6px; }

  .plot__tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
    background: light-dark(#14161a, #22252a);
    color: #f4f5f3;
    border: 1px solid light-dark(transparent, rgb(255 255 255 / 12%));
    box-shadow: var(--shadow);
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.12s var(--ease);
  }

  .plot__tip.is-visible { opacity: 1; }
  .plot__tip b { font-variant-numeric: tabular-nums; }
  .plot__tip span { color: #a3a8a2; }

  /* ---------- Полосы по странам ---------- */
  .bars { display: grid; gap: 0.55rem; }

  .bar {
    display: grid;
    grid-template-columns: 1.35rem minmax(5.5rem, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.2rem 0.35rem;
    border-radius: 8px;
    transition: background 0.15s var(--ease);
  }

  .bar:hover { background: var(--surface-2); }

  .bar img {
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border-radius: 50%;
  }

  .bar__name {
    font-size: var(--step--1);
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bar__track { block-size: 14px; position: relative; }

  .bar__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--w, 0%);
    background: var(--series);
    /* Квадратно у базовой линии, скруглено на конце данных. */
    border-radius: 0 4px 4px 0;
    transform-origin: left center;
    scale: 0 1;
    animation: grow 0.75s var(--ease) forwards;
    animation-delay: var(--d, 0s);
  }

  @keyframes grow { to { scale: 1 1; } }

  .bar__value {
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    min-inline-size: 3.2rem;
    text-align: end;
  }

  /* ---------- Таблица-двойник ---------- */
  .table-view { font-size: var(--step--1); }

  .table-view summary {
    cursor: pointer;
    color: var(--ink-3);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-block: 0.25rem;
  }

  .table-view summary::-webkit-details-marker { display: none; }
  .table-view summary:hover { color: var(--ink); }
  .table-view summary::before { content: "+"; font-size: 1rem; line-height: 1; }
  .table-view[open] summary::before { content: "–"; }

  .table-view__scroll {
    max-block-size: 15rem;
    overflow: auto;
    margin-block-start: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }

  .table-view table {
    inline-size: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

  .table-view th,
  .table-view td {
    padding: 0.4rem 0.75rem;
    text-align: start;
    border-block-end: 1px solid var(--line);
  }

  .table-view th {
    position: sticky;
    inset-block-start: 0;
    background: var(--surface-2);
    color: var(--ink-3);
    font-weight: 500;
  }

  .table-view td:last-child { text-align: end; color: var(--ink-2); }
  .table-view tr:last-child td { border-block-end: 0; }

  /* =====================================================================
     Комнаты
     ===================================================================== */
  .rooms__grid {
    display: grid;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
  }

  @media (max-width: 1000px) {
    .rooms__grid { grid-template-columns: minmax(0, 1fr); }
  }

  .rooms__list { display: grid; gap: 0.9rem; margin-block-start: 2rem; }

  .rooms__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    color: var(--ink-2);
    font-size: var(--step-0);
  }

  .rooms__list .ic {
    color: var(--accent);
    font-size: 1.1rem;
    margin-block-start: 0.15rem;
  }

  /* Макет звонка. Container query, а не media: карточка перестраивается
     по своей ширине, а не по ширине окна. */
  .call {
    container-type: inline-size;
    background: light-dark(#14161a, #0d0f12);
    border: 1px solid light-dark(rgb(20 22 26 / 20%), rgb(255 255 255 / 10%));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    color: #f4f5f3;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .call__bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid rgb(255 255 255 / 8%);
    font-size: 0.8rem;
  }

  .call__bar strong { font-weight: 500; }

  .call__bar span {
    color: #a3a8a2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .call__bar .live-dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--accent-bright);
  }

  .call__time {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    color: #a3a8a2;
  }

  .call__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
  }

  @container (min-width: 40rem) {
    .call__body { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  }

  .call__stage { display: grid; gap: 0.6rem; align-content: start; }

  .tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .tile {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 12px;
    overflow: hidden;
    background:
      radial-gradient(58% 52% at 50% 82%, color-mix(in oklab, var(--tint, #6c5cff) 55%, transparent), transparent 74%),
      #16181c;
    display: grid;
    align-content: end;
    padding: 0.5rem;
  }

  .tile--speaking { outline: 2px solid var(--accent-bright); outline-offset: -2px; }

  /* Силуэт — маска Lucide, не border-radius-фигура */
  .tile__figure {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 62%;
    block-size: 74%;
    background: rgb(255 255 255 / 26%);
    -webkit-mask: var(--src) bottom center / contain no-repeat;
    mask: var(--src) bottom center / contain no-repeat;
    filter: blur(0.4px);
  }

  .tile__name {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    inline-size: max-content;
    max-inline-size: 100%;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgb(10 11 13 / 55%);
    backdrop-filter: blur(6px);
    font-size: 0.72rem;
  }

  .tile__name .ic { font-size: 0.85em; color: #a3a8a2; }
  .tile__name .ic--mic-off { color: #ff7a68; }

  .tile--voice {
    background: #16181c;
    place-content: center;
    align-content: center;
    justify-items: center;
    gap: 0.5rem;
  }

  .avatar {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: #0a0b0d;
    background: var(--tint, #ccfb50);
  }

  .call__controls {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border-radius: 999px;
    background: #16181c;
    border: 1px solid rgb(255 255 255 / 8%);
  }

  .call__controls button {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 8%);
    color: #f4f5f3;
    font-size: 0.95rem;
    cursor: default;
  }

  .call__controls .is-leave { background: #d3402c; }

  .call__chat {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: #16181c;
    border: 1px solid rgb(255 255 255 / 6%);
    min-inline-size: 0;
  }

  .call__chat h4 {
    font-size: 0.78rem;
    color: #a3a8a2;
    font-weight: 500;
    letter-spacing: 0;
  }

  .msg {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    font-size: 0.78rem;
  }

  .msg .avatar { inline-size: 1.6rem; block-size: 1.6rem; font-size: 0.68rem; }
  .msg b { font-weight: 500; display: block; }
  .msg time { color: #6c7169; font-size: 0.72rem; margin-inline-start: 0.35rem; }
  .msg p { color: #a3a8a2; margin-block-start: 0.1rem; }

  .msg__gif {
    margin-block-start: 0.35rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #2a2d33, #1d2025);
    font-size: 0.72rem;
    color: #a3a8a2;
    position: relative;
  }

  .msg__gif span {
    position: absolute;
    inset-block-start: 0.4rem;
    inset-inline-end: 0.4rem;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: #6c7169;
  }

  .call__composer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    font-size: 0.78rem;
    color: #6c7169;
  }

  .call__composer .ic { margin-inline-start: auto; color: #a3a8a2; }

  .call__invite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-block-start: 1px solid rgb(255 255 255 / 8%);
    font-size: 0.78rem;
  }

  .call__invite code {
    font-family: var(--mono);
    color: var(--accent-bright);
    font-size: 0.78rem;
  }

  .call__invite b {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgb(204 251 80 / 12%);
    color: var(--accent-bright);
    font-weight: 500;
  }

  /* =====================================================================
     Безопасность
     ===================================================================== */
  .safety__grid {
    display: grid;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  @media (max-width: 900px) {
    .safety__grid { grid-template-columns: minmax(0, 1fr); }
  }

  .safety__list {
    display: grid;
    gap: 1px;
    background: var(--line);
    border-block: 1px solid var(--line);
  }

  .safety__list > div {
    background: var(--bg);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    padding-block: 1.5rem;
  }

  .safety__list span {
    font-variant-numeric: tabular-nums;
    font-size: var(--step--1);
    color: var(--ink-3);
    padding-block-start: 0.2rem;
  }

  .safety__list h3 { font-size: var(--step-1); margin-block-end: 0.4rem; }
  .safety__list p { color: var(--ink-2); font-size: var(--step-0); }

  /* =====================================================================
     Финальный призыв
     ===================================================================== */
  .cta__inner {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    border-radius: var(--radius-lg);
    background: light-dark(#14161a, #16181c);
    border: 1px solid light-dark(transparent, rgb(255 255 255 / 8%));
    color: #f4f5f3;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
  }

  .cta__inner::before {
    content: "";
    position: absolute;
    inset-block-start: -60%;
    inset-inline-end: -10%;
    inline-size: 45rem;
    block-size: 45rem;
    background: radial-gradient(circle, rgb(204 251 80 / 14%), transparent 62%);
    pointer-events: none;
  }

  .cta__inner h2 { font-size: var(--step-3); position: relative; }
  .cta__inner .eyebrow { color: #8a9190; }
  .cta__inner .eyebrow::before { background: var(--accent-bright); }

  .cta__inner .btn--primary {
    --btn-bg: var(--accent-bright);
    --btn-ink: #0a0b0d;
    position: relative;
  }

  /* =====================================================================
     Подвал
     ===================================================================== */
  .site-footer {
    padding-block: 3rem 2.5rem;
    border-block-start: 1px solid var(--line);
  }

  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    font-size: var(--step--1);
    color: var(--ink-3);
  }

  .site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-inline-start: auto;
  }

  .site-footer nav a:hover { color: var(--ink); }
  .site-footer__note { color: var(--ink-3); }
}

/* =====================================================================
   Движение. Раскрытие по скроллу — на нативном scroll-driven timeline,
   без наблюдателей в JS; при prefers-reduced-motion не подключается вовсе.
   ===================================================================== */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .reveal {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 26%;
      }
    }

    .stagger > * {
      animation: reveal 0.6s var(--ease) both;
      animation-delay: calc(var(--i, 0) * 70ms);
    }
  }

  @keyframes reveal {
    from { opacity: 0; translate: 0 1.75rem; }
    to   { opacity: 1; translate: 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    .bar__fill { scale: 1 1; }
  }
}