/*
 * Общие стили: шрифт, токены бренда МедВебика, типографика, контейнер, кнопки, поля форм.
 * Источник стиля — бренд-кит (C:\Users\USER\Documents\МедВебика\medwebika-brand-kit, styles/tokens.css).
 * Стили блока — assets/css/blocks/{блок}.css, шапка/меню/модальное окно/подвал — layout.css.
 */

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* цвета бренда */
    --c-primary: #0647ff;       /* акцент, заливка кнопок */
    --c-primary-dark: #073acb;  /* цвет логотипа, наведение на кнопку */
    --c-ink: #081165;           /* заголовки, меню */
    --c-text: #2a3372;          /* основной текст */
    --c-muted: #6375b8;         /* второстепенный текст */
    --c-line: #dce8ff;          /* разделители */
    --c-soft: #edf5ff;          /* светлая голубая поверхность */
    --c-soft-2: #dce8ff;
    --c-bg: #ffffff;
    --c-ok: #0e9f8f;
    --c-err: #d23c4f;

    /* форма */
    --radius-xl: 28px;
    --radius-l: 22px;
    --radius-m: 16px;
    --radius-s: 12px;
    --pill: 9999px;
    --shadow: 0 16px 40px rgba(8, 17, 101, .07);
    --shadow-s: 0 6px 18px rgba(8, 17, 101, .06);

    /* сетка: контент 1410px, как в бренд-ките */
    --container: 1450px;
    --gutter: 20px;
    --section-gap: 100px;       /* расстояние между блоками страницы (на телефоне — ниже, в @media) */
    /* заголовки на телефоне (≤640px) — одна шкала для всех блоков: блоки берут размер отсюда, а не свой */
    --fs-h1-m: 30px;            /* H1 первого экрана */
    --fs-h2-m: 26px;            /* заголовок секции */
    --fs-h3-m: 20px;            /* заголовок карточки */

    --font: "Manrope", Arial, sans-serif;
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; /* якоря не прячутся под закреплённой шапкой */ scrollbar-gutter: stable; }

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font: 400 17px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #849fff; outline-offset: 4px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* ритм страницы: между соседними блоками ровно --section-gap. Белые секции — без внутренних отступов,
   цветная полоса во всю ширину (.section--band) — отступ внутри такой же */
.section { padding-block: 0; }
.section--band { padding-block: var(--section-gap); }
#main > * + * { margin-top: var(--section-gap); }
#main > :last-child { margin-bottom: var(--section-gap); }
@media (max-width: 640px) { :root { --section-gap: 64px; } }

.visually-hidden, .hp {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* иконки */
.ico { width: 1.2em; height: 1.2em; flex: none; }

/* типографика */
.eyebrow {
    margin-bottom: 16px;
    color: var(--c-primary);
    font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
}
.h2 {
    color: var(--c-ink);
    font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; line-height: 1.1; letter-spacing: -.035em;
    text-wrap: balance;
}
.text-accent { color: var(--c-primary); }
@media (max-width: 640px) { .h2 { font-size: var(--fs-h2-m); } }

/* кнопки — капсулы, без стрелок (правило бренда) */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 60px; padding: 14px 32px;
    border: 1px solid var(--c-primary); border-radius: var(--pill);
    background: var(--c-primary); color: #fff;
    font: 500 18px/1.35 var(--font); text-align: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn--outline { background: #fff; color: var(--c-primary); }
.btn--outline:hover { background: var(--c-soft); border-color: var(--c-primary); color: var(--c-primary); }
.btn--lg { min-height: 72px; padding: 18px 44px; font-size: 20px; }
.btn--sm { min-height: 52px; padding: 12px 26px; font-size: 17px; }
.btn--wide { width: 100%; }

/* поля */
.field { display: grid; gap: 8px; }
.field__label { font-size: 14px; font-weight: 600; color: var(--c-ink); }
.field__input {
    width: 100%; min-height: 60px; padding: 0 22px;
    border: 1px solid var(--c-line); border-radius: var(--pill);
    background: #fff; font-size: 17px; color: var(--c-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input::placeholder { color: #9aa6d1; }
.field__input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(6, 71, 255, .12); }
.field__input.is-error { border-color: var(--c-err); }

/* согласие на обработку ПДн (blocks/_consent.php) */
.consent { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.45; color: var(--c-muted); }
.consent__input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.consent__box {
    flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px;
    border: 1.5px solid #b4c3ea; border-radius: 6px; background: #fff; color: #fff;
    transition: background .15s ease, border-color .15s ease;
}
.consent__box .ico { width: 15px; height: 15px; opacity: 0; }
.consent__input:checked + .consent__box { background: var(--c-primary); border-color: var(--c-primary); }
.consent__input:checked + .consent__box .ico { opacity: 1; }
.consent__input:focus-visible + .consent__box { outline: 3px solid #849fff; outline-offset: 2px; }
.consent.is-error .consent__box { border-color: var(--c-err); }
.consent a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }

/* сообщение формы */
.lead-form__msg { font-size: 14px; font-weight: 600; }
.lead-form__msg:empty { display: none; }
.lead-form__msg.is-error { color: var(--c-err); }
.lead-form__msg.is-ok { color: var(--c-ok); }

/* «таблетка» с иконкой */
.chip {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 7px 20px 7px 7px; border-radius: var(--pill);
    background: var(--c-soft); color: var(--c-ink); font-size: 15px; font-weight: 600;
}
.chip__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-primary); color: #fff; }
.chip__ico .ico { width: 18px; height: 18px; }

@media (max-width: 600px) {
    .btn, .btn--lg { min-height: 52px; padding: 12px 24px; font-size: 16px; }
    .field__input { min-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}