/* Стили сайта для посетителей. Размеры и цвета — из макета в Figma (ширина 1440) */

/* Шрифты: кириллица (с казахскими буквами) и латиница. Браузер скачивает
   только те части, символы из которых есть на странице.
   Inter — основной текст, Science Gothic — заголовки, Space Grotesk — номера пунктов */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/inter-cyrillic-ext.9e494903d6b0.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/inter-cyrillic.4e2553027f1d.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/inter-latin.65850a373e25.woff2") format("woff2");
    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;
}

@font-face {
    font-family: "Science Gothic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/science-gothic-cyrillic-ext.226f40413e60.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Science Gothic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/science-gothic-cyrillic.be02928a2b0a.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Science Gothic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/science-gothic-latin.a2698d7f24e2.woff2") format("woff2");
    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;
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/space-grotesk-latin.f31a9f084a8d.woff2") format("woff2");
    unicode-range: U+0000-00FF;
}

:root {
    --color-bg: #000;
    --color-text: #fff;
    --color-text-soft: #f2f2f7;
    --color-button: #0656e0;
    --color-accent: #0187fd;
    --color-surface: #1a1a1a;
    --color-line: rgb(255 255 255 / 0.2);
    --font-display: "Science Gothic", "Inter", system-ui, sans-serif;
    --font-numbers: "Space Grotesk", "Inter", system-ui, sans-serif;
    /* Отступ от края страницы: 80 на широком экране, 16 на телефоне */
    --page-padding: clamp(16px, 5.56vw, 80px);
    /* Лёгкое затемнение краёв синей кнопки, как в макете */
    --button-shade: url("data:image/svg+xml;utf8,<svg viewBox='0 0 167.6 43.6' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(5.9551 -19.939 5.9297 3.9374 83.8 21.8)'><stop stop-color='rgba(0,0,0,0)' offset='0'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
    --button-shade-large: url("data:image/svg+xml;utf8,<svg viewBox='0 0 352.35 51.136' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(12.52 -23.386 12.466 4.618 176.18 25.568)'><stop stop-color='rgba(0,0,0,0)' offset='0'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
}

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

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

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Inter", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
    margin: 0;
}

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

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

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Текст для программ чтения с экрана, на экране его не видно */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Кнопки --- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 0.8px solid var(--color-text);
    border-radius: 12px;
    background: var(--button-shade), var(--color-button);
    background-size: 100% 100%;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    transition: filter 0.15s;
}

.button:hover {
    filter: brightness(1.15);
}

.button--large {
    width: 100%;
    min-height: 51px;
    border: 1.4px solid var(--color-accent);
    border-radius: 10.5px;
    background-image: var(--button-shade-large);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

/* --- Шапка --- */

.site-header {
    position: relative;
    z-index: 10;
    background: var(--color-bg);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 72px;
    max-width: calc(1280px + 2 * var(--page-padding));
    min-height: 77px;
    margin: 0 auto;
    padding: 0 var(--page-padding);
}

.site-header__logo {
    margin-top: 5px;
    margin-right: auto;
}

.site-nav {
    display: flex;
    gap: 30px;
    color: var(--color-text-soft);
    font-weight: 500;
    font-size: 14.5px;
    white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current] {
    color: var(--color-text);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-switch {
    display: flex;
}

.lang-switch button {
    padding: 8px 6px;
    border: 0;
    background: none;
    color: var(--color-text-soft);
    font-weight: 500;
    font-size: 14.5px;
    opacity: 0.5;
}

.lang-switch button:hover,
.lang-switch button[aria-current] {
    opacity: 1;
}

.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
}

/* Три полоски: средняя — сам span, верхняя и нижняя — его ::before и ::after */
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: var(--color-text);
    border-radius: 1px;
}

.menu-toggle span {
    position: relative;
}

.menu-toggle span::before,
.menu-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-toggle span::before {
    top: -7px;
}

.menu-toggle span::after {
    top: 7px;
}

@media (max-width: 1360px) {
    .site-header__inner {
        gap: 32px;
    }
}

/* На узком экране разделы прячутся в меню под кнопкой с полосками.
   1220 — ширина, на которой казахские пункты меню ещё помещаются в строку */
@media (max-width: 1220px) {
    .site-header__inner {
        gap: 16px;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 8px var(--page-padding) 24px;
        background: var(--color-bg);
        border-bottom: 1px solid rgb(255 255 255 / 0.15);
        font-size: 18px;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a {
        padding: 12px 0;
    }

    .menu-toggle {
        display: block;
    }
}

@media (max-width: 560px) {
    /* На телефоне связаться можно кнопкой WhatsApp рядом */
    .site-header__cta {
        display: none;
    }
}

/* --- Подвал --- */

.site-footer__inner {
    display: grid;
    grid-template-columns: 512px 1fr 379px;
    align-items: start;
    row-gap: 56px;
    max-width: calc(1200px + 2 * var(--page-padding));
    margin: 0 auto;
    padding: 68px var(--page-padding) 30px;
    font-size: 14px;
}

.site-footer__tagline {
    max-width: 403px;
    margin-top: 11px;
    font-weight: 500;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.36px;
}

.site-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 13px;
    font-size: 22px;
    line-height: 19px;
}

.site-footer__nav a {
    opacity: 0.6;
}

.site-footer__nav a:hover,
.site-footer__nav a[aria-current] {
    opacity: 1;
}

.site-footer__nav a[aria-current] {
    font-weight: 600;
}

.site-footer__contact {
    justify-self: end;
    grid-column: 3;
}

.site-footer__contact:hover {
    color: var(--color-accent);
}

/* Карточка «Остались вопросы?» с вырезом под кнопку в правом нижнем углу */
.consult-card {
    position: relative;
    width: 379px;
    height: 173px;
    padding: 19px 23px;
    background: url("img/consult-card.e77a1ce42c5e.svg") no-repeat;
    background-size: 100% 100%;
}

.consult-card__title {
    font-weight: 700;
    font-size: 16px;
}

.consult-card__text {
    max-width: 286px;
    margin-top: 10px;
}

.consult-card__button {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ширина выреза: 211 из 379, на узком экране карточка сжимается вместе с ним */
    width: calc(100% * 211 / 379);
    height: 33px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--color-accent);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.consult-card__button:hover {
    filter: brightness(1.1);
}

@media (max-width: 1100px) {
    .site-footer__inner {
        grid-template-columns: 1fr auto;
        row-gap: 40px;
        padding-top: 48px;
    }

    .site-footer__brand,
    .site-footer__nav,
    .consult-card {
        grid-column: 1 / -1;
    }

    .site-footer__brand img {
        width: 200px;
        height: auto;
    }

    .site-footer__tagline {
        font-size: 28px;
    }

    .site-footer__nav {
        font-size: 20px;
    }

    .consult-card {
        width: min(379px, 100%);
    }

    .site-footer__contact {
        grid-column: 2;
    }
}

@media (max-width: 400px) {
    .consult-card__button {
        font-size: 14px;
    }
}

/* --- Окно «Получить консультацию» --- */

.consultation {
    width: min(842px, calc(100% - 32px));
    padding: 0;
    border: 1px solid var(--color-text);
    border-radius: 16.8px;
    background: var(--color-bg);
    color: var(--color-text);
}

.consultation::backdrop {
    background: rgb(0 0 0 / 0.6);
    backdrop-filter: blur(4px);
}

/* Занимает всё окно: клик мимо него — это клик по затемнённому фону,
   и окно закрывается. Текст — колонкой 376 по центру */
.consultation__body {
    position: relative;
    padding: 56px max(24px, calc((100% - 376px) / 2));
}

.consultation__close {
    position: absolute;
    top: 20px;
    right: 28px;
    width: 15px;
    height: 15px;
    padding: 0;
    border: 0;
    background: none;
}

/* Крестик: две одинаковые линии, вторая повёрнута */
.consultation__close::before,
.consultation__close::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("img/close-line.f7784e49dcdd.svg") no-repeat center / 100% 100%;
}

.consultation__close::after {
    transform: rotate(90deg);
}

.consultation__title {
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
}

.consultation__text {
    margin: 8px 0 32px;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.16px;
}

@media (max-width: 560px) {
    .consultation__close {
        top: 16px;
        right: 16px;
    }

    .consultation__body {
        padding: 48px 20px 32px;
    }

    .consultation__title {
        font-size: 24px;
    }
}

/* ===== Главная страница ===== */

.hero__inner,
.stats__inner,
.how__inner,
.advantages__inner,
.courses__inner {
    position: relative;
    max-width: calc(1280px + 2 * var(--page-padding));
    margin: 0 auto;
    padding-inline: var(--page-padding);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 41px;
    line-height: 1.1;
}

.accent {
    color: var(--color-accent);
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-width: 211px;
    height: 48px;
    padding: 0 24px;
    border: 0.4px solid var(--color-text);
    border-radius: 30px;
    background: rgb(0 0 0 / 0.7);
    backdrop-filter: blur(7.65px);
    font-size: 16px;
    line-height: 1.1;
}

/* --- Главный экран --- */

.hero {
    position: relative;
    overflow: hidden;
}

/* Фото шире экрана, на 1440 начинается в 95 пикселях от левого края.
   Если текст длиннее (по-казахски), блок растёт, и фото растягивается с ним */
.hero__media {
    position: absolute;
    top: -26px;
    bottom: 0;
    left: calc(50% - 625px);
    width: 1604px;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0) 16.181%),
        linear-gradient(-80.87deg, rgb(0 0 0 / 0) 63.1%, #000 89.956%);
}

.hero__inner {
    min-height: 626px;
    padding-top: 60px;
    padding-bottom: 115px;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid #727272;
    border-radius: 28px;
    color: var(--color-text-soft);
    font-size: 13px;
}

.hero__badge::before {
    content: "";
    width: 6px;
    height: 6px;
    background: url("img/badge-dot.e91b7520d091.svg") no-repeat center / 100% 100%;
}

/* Ширина подобрана так, чтобы «— больше,» начинало вторую строку, как в макете */
.hero__title {
    max-width: 640px;
    margin-top: 21px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 68px;
    line-height: 70px;
    text-transform: uppercase;
}

.hero__lead {
    max-width: 509px;
    margin-top: 22px;
    font-size: 18px;
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 342px;
    max-width: 100%;
    height: 52px;
    margin-top: 28px;
    padding: 10px;
    border: 1px solid var(--color-text);
    border-radius: 29px;
    background: rgb(20 20 20 / 0.26);
    font-size: 18px;
    transition: background-color 0.15s;
}

.hero__cta:hover {
    background-color: rgb(255 255 255 / 0.1);
}

.hero__cards {
    position: absolute;
    top: 253px;
    right: var(--page-padding);
    display: flex;
    flex-direction: column;
    gap: 23px;
}

/* Полупрозрачная карточка поверх фото */
.glass-card {
    width: 230px;
    min-height: 102px;
    padding: 20.6px;
    border: 0.4px solid var(--color-text);
    border-radius: 12px;
    background: rgb(0 26 52 / 0.3);
    backdrop-filter: blur(7.35px);
}

.glass-card__title {
    font-size: 18px;
}

.glass-card__text {
    max-width: 186px;
    margin-top: 4px;
    font-weight: 300;
    font-size: 12px;
}

@media (max-width: 900px) {
    /* На телефоне фото уходит под текст, карточки — лентой поверх него */
    .hero__media {
        top: auto;
        bottom: 0;
        left: 50%;
        width: 900px;
        height: 366px;
        transform: translateX(-50%);
    }

    .hero__media::after {
        background:
            linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0) 30%),
            linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 30%);
    }

    .hero__inner {
        min-height: 0;
        padding-top: 32px;
        padding-bottom: 366px;
    }

    .hero__title {
        font-size: clamp(30px, 9vw, 68px);
        line-height: 1.05;
    }

    .hero__lead {
        font-size: 16px;
    }

    .hero__cards {
        top: auto;
        bottom: 16px;
        left: 0;
        right: 0;
        flex-direction: row;
        gap: 12px;
        overflow-x: auto;
        padding-inline: var(--page-padding);
        scroll-padding-inline: var(--page-padding);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .glass-card {
        flex: 0 0 200px;
        scroll-snap-align: start;
    }
}

/* --- Цифры --- */

.stats {
    background: var(--color-surface);
}

.stats__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 161px;
}

.stats__list {
    display: flex;
    margin-left: 19px;
}

.stats__item {
    position: relative;
    width: 211px;
}

.stats__item:nth-child(2) {
    width: 168px;
}

.stats__item:nth-child(3) {
    width: 233px;
}

/* Между цифрами по 86 пикселей и тонкая черта посередине */
.stats__item + .stats__item {
    margin-left: 172px;
}

.stats__item + .stats__item::before {
    content: "";
    position: absolute;
    top: 5.5px;
    left: -86px;
    height: 64px;
    border-left: 1px solid var(--color-line);
}

.stats__number {
    font-weight: 700;
    font-size: 41px;
    line-height: 30px;
}

.stats__label {
    margin-top: 5px;
    font-size: 18px;
    line-height: 1.1;
}

.stats__chat {
    flex: none;
    width: 230px;
    height: 115px;
    padding: 18px 17px;
    border: 0.4px solid var(--color-text);
    border-radius: 12px;
    background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 230 115' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-10 13.25 -19.478 -14.701 230 0)'><stop stop-color='rgba(255,255,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>") no-repeat center / 100% 100%;
    backdrop-filter: blur(7.35px);
    font-size: 12px;
    line-height: 1.1;
    transition: border-color 0.15s;
}

.stats__chat:hover {
    border-color: var(--color-accent);
}

.stats__chat-text {
    display: block;
    max-width: 174px;
}

.stats__avatars {
    display: flex;
    margin-top: 13px;
}

.stats__avatars img + img {
    margin-left: -5px;
}

@media (max-width: 1100px) {
    .stats__inner {
        flex-direction: column;
        align-items: flex-start;
        padding-block: 32px;
    }

    .stats__list {
        flex-wrap: wrap;
        gap: 24px 48px;
        margin-left: 0;
    }

    .stats__item + .stats__item {
        margin-left: 0;
    }

    .stats__item + .stats__item::before {
        display: none;
    }
}

/* --- Как это работает --- */

.how {
    position: relative;
    overflow: hidden;
}

.how__flower {
    position: absolute;
    top: -76px;
    left: calc(50% - 751px);
    width: 1003px;
    height: auto;
    max-width: none;
}

.how::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 35.486%),
        linear-gradient(-68.11deg, #000 41.596%, rgb(0 0 0 / 0) 71.954%);
}

.how__inner {
    z-index: 1;
    display: grid;
    grid-template-columns: 670px 1fr;
    align-items: start;
    padding-top: 70px;
    padding-bottom: 67px;
}

.how__intro {
    max-width: 697px;
    margin-top: -8px;
}

.how__text {
    max-width: 509px;
    margin-top: 16px;
    color: var(--color-text-soft);
    font-size: 16px;
    line-height: 1.1;
}

.how__steps {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 242px);
    column-gap: 71px;
    min-height: 241px;
    margin-top: 59px;
    padding: 28px 44px;
    border: 0.8px solid var(--color-text);
    border-radius: 14px;
    background:
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 1280 241' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.21'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(52.711 24.1 -62.338 19.08 0 0)'><stop stop-color='rgba(6,89,231,1)' offset='0'/><stop stop-color='rgba(6,89,231,0)' offset='1'/></radialGradient></defs></svg>") no-repeat center / 100% 100%,
        rgb(0 0 0 / 0.59);
}

.step {
    position: relative;
    color: var(--color-text-soft);
}

/* Черты между шагами стоят не посередине промежутка, как в макете */
.step + .step::before {
    content: "";
    position: absolute;
    top: 0;
    left: -41px;
    height: 187px;
    border-left: 1px solid var(--color-line);
}

.step:nth-child(3)::before {
    left: -30px;
}

.step:nth-child(4)::before {
    left: -19px;
}

.step__number,
.advantage__number {
    font-family: var(--font-numbers);
    font-size: 13px;
}

.step__title,
.advantage__title {
    font-weight: 600;
    font-size: 17px;
}

.step__title {
    margin-top: 4px;
}

.step__text,
.advantage__text {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.2;
}

@media (max-width: 1300px) {
    .how__inner {
        grid-template-columns: 1fr;
    }

    .how__intro {
        margin-top: 32px;
    }

    .how__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
        margin-top: 48px;
        padding: 28px;
    }

    .step + .step::before {
        display: none;
    }
}

@media (max-width: 600px) {
    .how__flower {
        left: -300px;
        opacity: 0.7;
    }

    .section-title {
        font-size: 30px;
    }

    .how__steps {
        grid-template-columns: 1fr;
        padding: 24px 20px;
    }
}

/* --- Преимущества --- */

.advantages {
    background: var(--color-surface);
}

.advantages__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 0 32px;
    padding-top: 53px;
    padding-bottom: 52px;
}

.advantages__title .accent {
    display: block;
}

.advantages__lead {
    max-width: 360px;
    color: var(--color-text-soft);
    font-size: 16.444px;
    line-height: 1.1;
    text-align: right;
}

.advantages__grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 31px;
    margin-top: 28px;
}

.advantage {
    min-height: 208px;
    padding: 13px 18px 24px;
    border: 0.4px solid var(--color-text);
    border-radius: 14px;
    background: #0a0a0a;
    color: var(--color-text-soft);
}

.advantage__title {
    margin-top: 38px;
}

.advantage__text {
    max-width: 300px;
}

@media (max-width: 1100px) {
    .advantages__inner {
        grid-template-columns: 1fr;
    }

    .advantages__lead {
        margin-top: 16px;
        text-align: left;
    }

    .advantages__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .advantages__grid {
        grid-template-columns: 1fr;
    }

    .advantage {
        min-height: 0;
    }

    .advantage__title {
        margin-top: 24px;
    }
}

/* --- Курсы --- */

.courses {
    overflow: hidden;
}

.courses__inner {
    display: grid;
    grid-template-columns: 348px minmax(0, 1fr);
    min-height: 533px;
    padding-top: 85px;
    padding-bottom: 60px;
}

.courses__title {
    margin-top: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 54px;
    text-transform: uppercase;
}

.courses__lead {
    max-width: 287px;
    margin-top: 4px;
    font-size: 18px;
    line-height: 1.1;
}

.courses__filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 37px 0 0;
    padding: 0;
    border: 0;
}

.courses__filters label {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 18px;
    line-height: 1.1;
    cursor: pointer;
}

.courses__filters input {
    flex: none;
    width: 13px;
    height: 13px;
    margin: 0;
    background: url("img/radio-off.9feb51ead74a.svg") no-repeat center / 100% 100%;
    appearance: none;
    cursor: pointer;
}

.courses__filters input:checked {
    background-image: url("img/radio-on.a8c7108cce04.svg");
}

.courses__filters input:focus-visible {
    border-radius: 50%;
}

/* Выбранный формат: остальные карточки прячутся */
.courses:has(#course-filter-group:checked) .course-card:not([data-kind="group"]),
.courses:has(#course-filter-individual:checked) .course-card:not([data-kind="individual"]),
.courses:has(#course-filter-ielts:checked) .course-card:not([data-kind="ielts"]) {
    display: none;
}

.courses__track {
    display: flex;
    gap: 24.5px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.courses__track::-webkit-scrollbar {
    display: none;
}

/* Текст карточки прижат к низу, картинка — фоном */
.course-card {
    position: relative;
    display: flex;
    flex: 0 0 284px;
    flex-direction: column;
    justify-content: flex-end;
    height: 331px;
    padding: 10px 10px 36px;
    overflow: hidden;
    border: 0.818px solid var(--color-text);
    border-radius: 10.6px;
    background: #000;
    scroll-snap-align: start;
    transition: border-color 0.15s;
}

.course-card:hover {
    border-color: var(--color-accent);
}

.course-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
}

.course-card--ielts {
    border-width: 0.4px;
    border-radius: 9px;
}

.course-card--ielts .course-card__image {
    height: auto;
}

/* Заголовок стоит в вырезе картинки и не должен заходить на шапку выпускника */
.course-card--ielts .course-card__title {
    max-width: 130px;
}

.course-card__title,
.course-card__text,
.course-card__price {
    position: relative;
    max-width: 235px;
    font-size: 14.73px;
    line-height: 1.1;
}

.course-card__title {
    max-width: 174px;
    font-weight: 700;
    font-size: 19.64px;
    line-height: 0.92;
}

.course-card__text {
    margin-top: 16px;
}

.course-card__price {
    margin-top: 24px;
}

/* Вся карточка — ссылка, стрелка в правом нижнем углу */
.course-card__link {
    position: absolute;
    inset: 0;
    background: url("img/arrow-card.2326edbaab1b.svg") no-repeat right 10px bottom 15px / 40px 6px;
}

.courses__progress {
    position: relative;
    height: 2px;
    margin-top: 28px;
    border: 1px solid rgb(255 255 255 / 0.26);
    border-radius: 16px;
}

.courses__thumb {
    position: absolute;
    top: -3px;
    height: 6px;
    border-radius: 16px;
    background: #50b0ff;
}

@media (max-width: 1100px) {
    /* minmax(0, …): иначе колонка растягивается до ширины всей ленты карточек */
    .courses__inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding-top: 56px;
    }

    .courses__list {
        margin-top: 32px;
        margin-right: calc(-1 * var(--page-padding));
    }

    .courses__track {
        padding-right: var(--page-padding);
    }

    .courses__progress {
        margin-right: var(--page-padding);
    }

    .course-card {
        flex-basis: 260px;
    }
}

/* --- Вопросы и ответы --- */

.faq {
    background:
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 1277' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.96'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-72 127.7 -144 -81.19 1440 0)'><stop stop-color='rgba(1,135,253,1)' offset='0'/><stop stop-color='rgba(1,135,253,0)' offset='1'/></radialGradient></defs></svg>") no-repeat center / 100% 100%,
        #000;
}

.faq__inner {
    max-width: calc(1201px + 2 * var(--page-padding));
    margin: 0 auto;
    padding: 49px var(--page-padding) 125px;
}

.faq__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 40px;
}

.faq__subtitle {
    margin-top: 2px;
    font-size: 32px;
    line-height: 40px;
}

.faq__list {
    margin-top: 51px;
}

.faq__item {
    display: grid;
    grid-template-columns: 89px 510px 1fr;
    font-size: 24px;
    line-height: 23px;
}

.faq__item + .faq__item {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid #8e8e93;
}

.faq__number,
.faq__question {
    font-weight: 500;
}

.faq__question {
    max-width: 401px;
    font-size: inherit;
}

.faq__answer {
    max-width: 600px;
}

@media (max-width: 1100px) {
    .faq__inner {
        padding-bottom: 64px;
    }

    .faq__title {
        font-size: 32px;
        line-height: 1.1;
    }

    .faq__subtitle {
        font-size: 22px;
        line-height: 1.3;
    }

    .faq__list {
        margin-top: 32px;
    }

    .faq__item {
        grid-template-columns: 40px 1fr;
        font-size: 18px;
        line-height: 1.3;
    }

    .faq__answer {
        grid-column: 2;
        margin-top: 12px;
    }
}

/* --- Связаться --- */

.contact {
    display: grid;
    grid-template-columns: 703fr 737fr;
    min-height: 641px;
}

.contact__questions,
.contact__chat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 64px;
}

.contact__questions {
    padding-inline: clamp(16px, 6.67vw, 96px) 32px;
    background:
        linear-gradient(180deg, rgb(0 149 255 / 0) 65.43%, #0af 114.39%),
        url("img/contact-bg.aeb879615912.webp") no-repeat center bottom / 100% 100%;
}

.contact__chat {
    padding-inline: clamp(16px, 9.44vw, 136px) var(--page-padding);
    background: #161616;
}

/* Заголовки с лёгким градиентом по тексту, как в макете */
.contact__title,
.contact__chat-title {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.contact__title {
    max-width: 560px;
    background-image: linear-gradient(-89.55deg, #cfcfcf 0%, #fff 96.965%);
    font-weight: 700;
    font-size: 54px;
    line-height: 1.2;
}

.contact__lead {
    max-width: 449px;
    margin-top: 10px;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: 0.26px;
}

.contact__chat-title {
    max-width: 420px;
    background-image: linear-gradient(-68.43deg, #fff 66.694%, #222 137.77%);
    font-size: 41px;
    line-height: 1.2;
}

.contact__chat-lead {
    max-width: 389px;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.16px;
}

.contact__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 365px;
    max-width: 100%;
    height: 51px;
    margin-top: 40px;
    border-radius: 16px;
    background:
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 365.3 51.136' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.2'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(33.191 -0.041685 2.2894 15.892 182.65 25.568)'><stop stop-color='rgba(0,0,0,0)' offset='0'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>") no-repeat center / 100% 100%,
        var(--color-accent);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    transition: filter 0.15s;
}

.contact__button:hover {
    filter: brightness(1.1);
}

.contact__note {
    margin-top: 12px;
    color: var(--color-text-soft);
    font-size: 10px;
    line-height: 1.3;
}

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

    .contact__title {
        font-size: 36px;
    }

    .contact__lead {
        font-size: 20px;
    }

    .contact__chat-title {
        font-size: 30px;
    }
}

/* ===== Страницы «Каталог», «О компании», «Контакты» ===== */

.page-head__inner,
.catalog-item__inner,
.prose__inner {
    max-width: calc(1280px + 2 * var(--page-padding));
    margin: 0 auto;
    padding-inline: var(--page-padding);
}

/* Шапка страницы: та же синяя подсветка справа сверху, что у вопросов и ответов */
.page-head {
    background:
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 600' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.96'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-72 60 -144 -38 1440 0)'><stop stop-color='rgba(1,135,253,1)' offset='0'/><stop stop-color='rgba(1,135,253,0)' offset='1'/></radialGradient></defs></svg>") no-repeat center / 100% 100%,
        #000;
}

.page-head__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 70px;
    padding-bottom: 72px;
}

.page-head__title {
    max-width: 900px;
    margin-top: 32px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 54px;
    line-height: 1.1;
}

.page-head__lead {
    max-width: 600px;
    margin-top: 20px;
    color: var(--color-text-soft);
    font-size: 18px;
    line-height: 1.3;
}

.page-head__button {
    width: 365px;
    max-width: 100%;
    margin-top: 32px;
}

/* --- Каталог: курс за курсом, фон чередуется --- */

.catalog-item:nth-of-type(even) {
    background: var(--color-surface);
}

.catalog-item__inner {
    display: grid;
    grid-template-columns: 284px minmax(0, 1fr);
    align-items: start;
    gap: 64px;
    padding-block: 64px;
}

.catalog-item__body {
    max-width: 720px;
}

.catalog-item__text {
    margin-top: 20px;
    color: var(--color-text-soft);
    font-size: 18px;
    line-height: 1.4;
}

.catalog-item__subtitle {
    margin-top: 28px;
    font-weight: 600;
    font-size: 17px;
}

.catalog-item__list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    color: var(--color-text-soft);
    font-size: 16px;
    line-height: 1.3;
}

.catalog-item__list li {
    position: relative;
    padding-left: 22px;
}

.catalog-item__list li::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}

.catalog-item__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-top: 32px;
}

.catalog-item__button {
    width: 240px;
}

.catalog-item__price {
    color: var(--color-text-soft);
    font-size: 14px;
}

/* --- Текст страницы «О компании» --- */

.prose__inner {
    max-width: calc(800px + 2 * var(--page-padding));
    padding-block: 64px;
}

.prose p {
    margin-top: 20px;
    color: var(--color-text-soft);
    font-size: 18px;
    line-height: 1.5;
}

.advantages__grid--flush {
    margin-top: 0;
}

@media (max-width: 800px) {
    .page-head__title {
        font-size: 34px;
    }

    .catalog-item__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding-block: 48px;
    }

    .catalog-item .course-card {
        width: min(284px, 100%);
    }
}