/* Переменные, сброс, типографика. Всё остальное — в layout.css и sections.css */

:root {
    --ink:        #14161a;
    --ink-soft:   #3d434d;
    --ink-muted:  #6b7280;
    --line:       #e3e6ea;
    --bg:         #ffffff;
    --bg-alt:     #f6f7f9;
    --bg-deep:    #14161a;
    /* Гамма Telegram. #2AABEE фирменный, но на белом даёт контраст 2,57 —
       для текста и кнопок берём #0088CC (3,89), яркий оставляем тёмным секциям. */
    --accent:       #0088cc;
    --accent-dark:  #0077b3;
    --accent-bright:#2aabee;
    --accent-ink:   #14719e;
    --accent-soft:  #e8f4fb;
    --ok:         #1a7f4b;

    --radius:     14px;
    --radius-sm:  8px;
    --shadow:     0 1px 2px rgba(20, 22, 26, .06), 0 8px 24px rgba(20, 22, 26, .06);
    --shadow-lg:  0 2px 4px rgba(20, 22, 26, .06), 0 16px 48px rgba(20, 22, 26, .10);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;

    --wrap: 1120px;
    --gap:  clamp(56px, 8vw, 104px);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
}

h1 { font-size: clamp(32px, 5.2vw, 54px); }
h2 { font-size: clamp(27px, 3.6vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 22px); line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--accent-dark); }

ul { margin: 0; padding: 0; list-style: none; }
strong { color: var(--ink); font-weight: 650; }

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

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

/* Кнопки */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    font-size: 17px;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: background .15s ease, border-color .15s ease,
                color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 136, 204, .28);
}
.btn--primary:hover { background: var(--accent-dark); color: #fff; }

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink-muted); color: var(--ink); }

.btn--on-dark {
    background: #fff;
    color: var(--ink);
}
.btn--on-dark:hover { background: #f0f0f0; color: var(--ink); }

.btn--ghost-on-dark {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
}
.btn--ghost-on-dark:hover {
    border-color: rgba(255, 255, 255, .65);
    color: #fff;
}

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