/* Оформление сайта: день, синее небо, дорога.
   Мир взят с рисунка владельца (`assets/robot.webp`): светло-голубой
   воздух, синий указателя АЗС, зелёный — только там, где «есть».
   Чужих доменов в загрузке нет ни одного, шрифт лежит своей копией
   (`assets/README.md`). */

@font-face {
    font-family: 'Golos Text';
    src: url('assets/golos-400-cyrillic.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Golos Text';
    src: url('assets/golos-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2190-2193, U+2212;
}

@font-face {
    font-family: 'Golos Text';
    src: url('assets/golos-700-cyrillic.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Golos Text';
    src: url('assets/golos-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2190-2193, U+2212;
}

:root {
    --ink: #10243d;
    --dim: #4d6076;
    --line: #d9e4ef;
    --paper: #ffffff;
    --sky: #eaf4fd;
    --accent: #1478c0;
    --accent-ink: #0f5f99;
    --yes: #12925a;
    --shadow: 0 1px 2px rgba(16, 36, 61, 0.05), 0 10px 24px rgba(16, 36, 61, 0.07);
    --radius: 14px;
}

* {
    box-sizing: border-box;
}

::selection {
    background: #cfe7f8;
    color: var(--ink);
}

body {
    margin: 0;
    padding: 0 1.25rem 4rem;
    background: var(--paper);
    color: var(--ink);
    font: 1.0625rem/1.65 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

main, header, footer {
    max-width: 46rem;
    margin: 0 auto;
}

header {
    padding: 1.25rem 0;
    font-size: 0.95rem;
}

header a {
    color: var(--dim);
    text-decoration: none;
}

header a:hover {
    color: var(--accent-ink);
}

h1 {
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 0.85rem;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 2.75rem 0 0.75rem;
    text-wrap: balance;
}

/* Подзаголовок внутри раздела отличается весом, а не ростом: ростом
   отличается сам раздел, и третья ступень размеров сделала бы шкалу
   плоской вместо ясной. */
h3 {
    font-size: 1.05rem;
    margin: 1.5rem 0 0.25rem;
}

p, li {
    margin: 0.6rem 0;
}

ul, ol {
    padding-left: 1.2rem;
}

li {
    padding-left: 0.15rem;
}

a {
    color: var(--accent-ink);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

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

/* Первый экран: слово слева, робот справа. На телефоне робот уходит
   наверх и уменьшается — читают всё-таки текст, а не картинку. */
.hero {
    display: grid;
    grid-template-columns: 1fr minmax(0, 15rem);
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 0 0.5rem;
}

.hero-said {
    min-width: 0;
}

.hero-said p {
    font-size: 1.15rem;
    color: var(--dim);
    max-width: 34ch;
}

.hero img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
}

.cta {
    display: inline-block;
    margin: 1.25rem 0 0.5rem;
    padding: 0.85rem 1.6rem;
    background: var(--accent);
    color: #ffffff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(16, 36, 61, 0.12), 0 8px 18px rgba(20, 120, 192, 0.25);
    transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.15s ease;
}

.cta:hover {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(16, 36, 61, 0.14), 0 12px 24px rgba(20, 120, 192, 0.3);
}

.cta:active {
    transform: translateY(0);
}

.under-cta {
    color: var(--dim);
    font-size: 0.95rem;
    margin: 0.35rem 0 0;
}

/* Сигнал показывается так, как приходит в Telegram: пузырь, знак,
   заправка полужирным, марка с ценой. Ничего, кроме пересказа
   настоящего сообщения, здесь нет. */
.signal {
    max-width: 23rem;
    margin: 1rem 0 0.5rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius) var(--radius) var(--radius) 4px;
    background: var(--sky);
    box-shadow: var(--shadow);
}

.signal b {
    display: block;
    margin-bottom: 0.55rem;
}

.signal .fuel {
    font-variant-numeric: tabular-nums;
}

.signal .button {
    display: block;
    margin-top: 0.8rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--line);
    color: var(--accent-ink);
    text-align: center;
    font-size: 0.95rem;
}

/* Тарифы: строки, а не колонки таблицы. На телефоне колонки сминались
   в столбики по одному слову, а тут всё идёт сверху вниз само. */
.plans {
    margin: 1rem 0 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.plan {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0.25rem 1rem;
    padding: 0.9rem 1.1rem;
    border-top: 1px solid var(--line);
}

.plan:first-child {
    border-top: 0;
}

.plan-price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.plan-price span {
    display: block;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--dim);
}

.plan-what {
    color: var(--dim);
    font-size: 0.98rem;
}

.paid {
    background: var(--sky);
}

.paid .plan-what {
    color: var(--ink);
}

.why h3 {
    margin-bottom: 0;
}

.why p {
    margin-top: 0.15rem;
    color: var(--dim);
}

.honest li {
    color: var(--dim);
}

.legal-block {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.98rem;
}

.legal-block h2 {
    font-size: 1.35rem;
    margin-top: 1.75rem;
}

.legal-block p, .legal-block li {
    color: var(--dim);
}

.legal-block b {
    color: var(--ink);
}

footer {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    color: var(--dim);
    font-size: 0.95rem;
}

footer a {
    color: var(--dim);
}

/* Страницы документов: те же слова, только длинные. */
.date {
    color: var(--dim);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.lead {
    font-size: 1.1rem;
}

.note {
    border-left: 2px solid var(--line);
    padding: 0.2rem 0 0.2rem 1rem;
    color: var(--dim);
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    font-size: 0.98rem;
}

th, td {
    border: 1px solid var(--line);
    padding: 0.55rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--sky);
    font-weight: 700;
}

@media (max-width: 34rem) {
    body {
        font-size: 1rem;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Робот идёт первым и вполовину уже: на телефоне он здоровается, а
       не занимает собой первый экран. */
    .hero img {
        order: -1;
        width: 9.5rem;
    }

    .plan {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    table {
        font-size: 0.9rem;
    }

    th, td {
        padding: 0.45rem 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta {
        transition: none;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8eef6;
        --dim: #a3b3c6;
        --line: #2b3646;
        --paper: #131820;
        --sky: #1c2532;
        --accent: #3ea2e4;
        --accent-ink: #77c2f0;
        --yes: #3fbd85;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.35);
    }

    ::selection {
        background: #24445e;
        color: var(--ink);
    }

    /* Светлая надпись на светлом акценте читалась бы серой: текст
       кнопки становится цветом фона страницы. */
    .cta, .cta:hover {
        color: var(--paper);
    }

    /* Синяя тень на тёмном фоне перестаёт быть тенью и становится
       свечением. Здесь она чёрная, как и положено тени. */
    .cta {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 18px rgba(0, 0, 0, 0.35);
    }

    .cta:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.4);
    }
}