/* Landing page styles.
 *
 * EVERY value is a token from tokens.css — the same file the admin panel and the Mini App read,
 * linked in from the Api project. A landing page with its own palette is how a product starts looking
 * like two products.
 *
 * No @import of a font from anywhere: Inter is served from this domain (see @font-face in tokens.css
 * and the woff2 files linked into wwwroot/fonts). The privacy claim on this page is checked by opening
 * the network tab.
 */

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

body {
    margin: 0;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- layout --- */

.site-header,
.site-main,
.site-footer {
    max-width: 62rem;
    margin: 0 auto;
    padding: var(--space-24) var(--space-16);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    flex-wrap: wrap;
}

.site-header__brand {
    font-size: var(--font-h5);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
    text-decoration: none;
}

.site-header__nav {
    display: flex;
    gap: var(--space-16);
}

/* Ссылка внутри текста. Без этого правила браузер красит её СВОИМ синим -- цветом, которого нет ни
   в одном токене, -- и подчёркивает сплошной линией. На тёмном фоне это единственное пятно чужого
   цвета на странице, и заметно оно сразу. Правило нарочно широкое: следующая ссылка в тексте
   появится не в этом файле, и искать её потом никто не станет. */
/* :not(.btn) обязателен. Без него правило перебивает .btn--primary по специфичности (0-1-1 против
   0-1-0), и текст кнопки становится синим на синем -- кнопка превращается в пустую плашку. Поймано
   на живой странице сразу после добавления правила. */
.section a:not(.btn),
.site-main p a:not(.btn),
.site-main li a:not(.btn) {
    color: var(--color-action-primary);
    text-decoration-color: var(--color-border-control);
    text-underline-offset: 0.2em;
}

.section a:not(.btn):hover,
.site-main p a:not(.btn):hover,
.site-main li a:not(.btn):hover {
    color: var(--color-action-hover);
    text-decoration-color: currentColor;
}

.section a:not(.btn):focus-visible,
.site-main p a:not(.btn):focus-visible,
.site-main li a:not(.btn):focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-focus);
}

.site-header__nav a,
.site-footer a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.site-header__nav a:hover,
.site-footer a:hover {
    color: var(--color-text-primary);
}

/* Переключатель языка. Отделён рамкой, а не цветом: это единственная ссылка в шапке, которая ведёт
   не в раздел, а меняет саму страницу, и путать её с навигацией не нужно. */
.site-header__lang {
    padding: 0 var(--space-8);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    line-height: 1.8;
}

.site-header__lang:hover {
    border-color: var(--color-border-default);
}

.site-header__lang:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.site-footer {
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text-muted);
}

.site-footer nav {
    display: flex;
    gap: var(--space-16);
    margin-bottom: var(--space-12);
}

/* -------------------------------------------------------------- section --- */

.section {
    padding: var(--space-48) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.section:last-child {
    border-bottom: none;
}

.section__title {
    margin: 0 0 var(--space-16);
    font-size: var(--font-h3);
    line-height: var(--leading-subhead);
    font-weight: 600;
}

.section__lead {
    max-width: 42rem;
    margin: 0 0 var(--space-16);
    font-size: var(--font-body-lg);
    color: var(--color-text-secondary);
}

.section p {
    max-width: 42rem;
    margin: 0 0 var(--space-12);
}

/* ----------------------------------------------------------------- hero --- */

/* Held to one screen on desktop and 90% on mobile so the start of the next block is visible below the
   fold — otherwise part of the audience does not realise the page continues (brandbook ch. 5 §3.1). */
/* Фон первого экрана — требование главы 5 §3.1. ВЕКТОР, а не растр, и это не вкусовщина:
   глава 11 §7 разрешает для фонов лендинга и SVG, и WebP, а §4 требует «зона под текст
   резервируется в композиции, а не расчищается после». Растр этого не гарантирует — `cover`
   двигает кадрирование вместе с шириной экрана; в векторе сеть построена правее x=1180 из 1600,
   то есть текстовая зона свободна по построению, при любом кадрировании.

   Кадр погашен ЦЕЛИКОМ, по правилу §5.1 брифа графики: полоса, безопасная при одной ширине, при
   другой уходит из кадрирования. Акценты бренда взяты в затемнённом виде (#165973, #314d9f,
   #6934ac) — контраст с текстом 6,26–6,31 при норме 4,5, запас на пересэмплирование. Замер по
   отрисованному кадру, а не по задуманным цветам, — см. HeroBackdropTests.

   Выход за padding контейнера отрицательным margin и возврат его же padding'ом: фон доходит до
   края колонки, а заголовок остаётся ровно на той же вертикали, что и все секции ниже. */
.hero {
    min-height: min(90vh, 44rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-inline: calc(-1 * var(--space-16));
    padding: var(--space-48) var(--space-16);
    background-image: url("../img/altconn-hero-backdrop.svg");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}

/* На узком экране `cover` растягивает кадр 2:1 по высоте, и сеть уехала бы под текст целиком.
   Прижимаем к левому краю: там композиционно пусто. Тот же приём, что у блока «Начните за минуту». */
@media (max-width: 48rem) {
    .hero {
        background-position: left center;
    }
}

.hero__title {
    margin: 0 0 var(--space-16);
    font-size: var(--font-display);
    line-height: var(--leading-tight);
    font-weight: 700;
    max-width: 20ch;
}

.hero__subtitle {
    max-width: 38rem;
    margin: 0 0 var(--space-32);
    font-size: var(--font-body-lg);
    color: var(--color-text-secondary);
}

/* -------------------------------------------------------------- buttons --- */

.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-24);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn--primary {
    background: var(--color-action-primary);
    color: var(--color-text-inverse);
}

.btn--primary:hover {
    background: var(--color-action-hover);
}

.btn--secondary {
    border-color: var(--color-border-control);
    color: var(--color-text-primary);
}

.btn--secondary:hover {
    background: var(--color-surface-hover);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
}

/* ------------------------------------------------------------- steps/list --- */

.steps {
    display: grid;
    gap: var(--space-16);
    padding: 0;
    /* Нижний отступ обязателен: на /install сразу за карточками идёт сноска, и при margin: 0 она
       прилипала к рамке вплотную -- блок читался как сломанный. У абзацев верхнего отступа нет по
       общему правилу, поэтому зазор задаётся здесь. */
    margin: 0 0 var(--space-24);
    list-style: none;
    counter-reset: step;
}

@media (min-width: 48rem) {
    .steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.steps li {
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-16);
}

.steps li::before {
    counter-increment: step;
    content: counter(step);
    display: block;
    margin-bottom: var(--space-8);
    color: var(--color-action-primary);
    font-size: var(--font-h4);
    font-weight: 700;
}

.plain-list {
    max-width: 42rem;
    padding-left: var(--space-24);
    margin: 0 0 var(--space-16);
}

.plain-list li {
    margin-bottom: var(--space-8);
}

/* --------------------------------------------------------------- regions --- */

.regions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding: 0;
    margin: 0 0 var(--space-16);
    list-style: none;
}

/* A list, never a map: the globe is forbidden as a metaphor and a world map is the same metaphor
   unrolled (brandbook ch. 1 §15). */
.region {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16);
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
}

.region--down {
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------- tariffs --- */

.tariffs {
    display: grid;
    gap: var(--space-16);
}

/* Never more than three across: a fourth option already needs a comparison table
   (brandbook ch. 5 §3.6). */
@media (min-width: 48rem) {
    .tariffs {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        grid-auto-rows: 1fr;
    }
}

.tariff {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    background: var(--color-surface-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
}

.tariff__name {
    font-size: var(--font-h5);
    font-weight: 600;
}

.tariff__price {
    font-size: var(--font-h2);
    font-weight: 700;
    line-height: var(--leading-tight);
}

.tariff__meta {
    color: var(--color-text-secondary);
    font-size: var(--font-small);
}

.tariff .btn {
    margin-top: auto;
}

/* ------------------------------------------------------------------ faq --- */

/* <details> is the accordion: it opens and closes with no JavaScript at all, which is the requirement
   rather than a preference. */
.faq details {
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--space-12) 0;
}

.faq summary {
    cursor: pointer;
    font-weight: 600;
    padding: var(--space-4) 0;
}

.faq p {
    margin: var(--space-8) 0 0;
    color: var(--color-text-secondary);
}

/* ------------------------------------------------------------ data state --- */

/* The caption that keeps a block honest when the Api is unreachable. The block itself never
   disappears (brandbook ch. 5 §5). */
.data-note {
    display: block;
    margin-top: var(--space-12);
    color: var(--color-text-muted);
    font-size: var(--font-caption);
}

.caption {
    color: var(--color-text-muted);
    font-size: var(--font-caption);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: var(--motion-instant) !important;
    }
}

/* ------------------------------------------------------------ графика --- */

/* Иллюстрации брендбука. Мастера лежат в docs/brandbook/assets/ и в продукт напрямую не идут:
   здесь их веб-версии, ужатые под фактический размер показа и переведённые в WebP. Мастер 1024 px
   на месте, где кадр показывается в 275, -- это 400 КБ вместо 4. Что каждая картинка со страницы
   и из этого файла действительно отдаётся, проверяет SiteImageryTests: удалённый файл иначе
   превращается в тихий 404 на живом сайте, а страница просто остаётся с дырой. */

.figure {
    margin: var(--space-24) 0 0;
}

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

/* Кадр 16:9 занимает ВСЮ колонку, а не ширину абзаца. Абзац держится на 42rem ради длины строки --
   у картинки такого ограничения нет, и в 42rem широкая композиция читалась зажатой, с пустотой
   справа от неё до края секции. */
.figure--wide {
    max-width: 100%;
}

/* Кадр 404 -- не квадрат: мастер квадратный по §4 главы 9, но содержимое в нём занимает узкую
   горизонтальную полосу, и в квадрате оно тонет в пустоте. Веб-версия обрезана по содержимому до
   3:2, поэтому здесь ширина, а не квадратная рамка. */
.figure--inline {
    max-width: 28rem;
}

.steps__img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-12);
    border-radius: var(--radius-md);
}

/* Фон последнего экрана. Кадр декоративный, поэтому он фон, а не <img>: экранному диктору о нём
   объявлять нечего.

   background-size: cover обрезает кадр по пропорции блока, а она меняется с шириной экрана -- то
   есть какая именно часть кадра окажется под текстом, вёрстка решает, а не ассет. Поэтому кадр
   приведён к контрасту 6,0:1 ЦЕЛИКОМ, с запасом на пересэмплирование: на пяти разных геометриях
   блока худший измеренный результат 5,43:1 при норме 4,5. Полосы бы не хватило -- см. §5.1 брифа
   графики. */
.section--backdrop {
    padding: var(--space-48) var(--space-24);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-secondary);
    background-image: url("../img/altconn-backdrop-cta.webp");
    background-size: cover;
    background-position: center;
    border-bottom: none;
}

/* Кадр шире, чем нужно колонке, и на узком экране обрезался бы по центру, оставляя пустоту. Здесь
   он прижимается к левому краю: содержательная часть -- сеть узлов справа -- уходит за текст, а
   спокойная левая треть остаётся под ним. */
@media (max-width: 48rem) {
    .section--backdrop {
        background-position: left center;
    }
}