/* ===== Токены из макета ===== */
    
     :root {
        --bg: #31544e;
        /* фон страницы */
        --bg-2: #132229;
        /* фон hero-блока/секций */
        --card: #16262d;
        /* фон карточек */
        --card-2: #1b2d35;
        --line: #2a3f47;
        /* обводки */
        --text: #e6edf0;
        --muted: #9fb0b7;
        --orange: #e39a5a;
        /* акцент */
        --coral: #d9805a;
        /* кнопка "Начать тренировку" */
        --teal: #54726a;
        /* кнопка "Открыть тренажер", прогресс */
        --teal-2: #5fb3ad;
        --rose: #c9788a;
        --track: #2c3f47;
        --radius: 14px;
        --radius-lg: 22px;
        --container: 1714px;
        --gold: #aa9478;
        --accent: #efb77d;
        --panel-bg: #152024;
        --hero-bottom: #203a36;
    }
    
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }
    
    html {
        scroll-behavior: smooth
    }
    
    body {
        font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.45;
        -webkit-font-smoothing: antialiased;
        background-image: url(../img/bg-main.png);
        background-size: auto;
        background-position: 0 0;
        background-repeat: no-repeat;
    }
    
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        height: 100vh;
        background: linear-gradient(to right, var(--hero-bottom) 0%, rgb(32 58 54 / 65%) 8%, transparent 32%), linear-gradient(90deg, rgb(8 19 22 / 94%) 0%, rgb(8 19 22 / 82%) 25%, rgb(8 19 22 / 50%) 44%, rgb(8 19 22 / 12%) 65%, transparent 82%);
        pointer-events: none;
        z-index: -1;
    }
    
    img {
        display: block;
        max-width: 100%
    }
    
    a {
        color: inherit;
        text-decoration: none
    }
    
    button {
        font: inherit;
        cursor: pointer;
        border: 0;
        background: none;
        color: inherit
    }
    
    .container {
        width: 100%;
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 24px
    }
    /* ===== Кнопки ===== */
    /*
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    padding: 0 36px;
    border-radius: 30px;
    font-weight: 400;
    font-size: 24px;
    transition: filter .2s, transform .15s, background .2s;
    white-space: nowrap;
}

.btn:hover {
    filter: brightness(1.08)
}

.btn:active {
    transform: translateY(1px)
}

.btn-coral {
    background: var(--coral);
    color: #fff;
    height: 36px;
    padding: 0 18px;
    font-size: 14px;
    border-radius: 10px
}

.btn-teal {
    background: var(--teal);
    color: #fff
}

.btn-outline {
    border: 1px solid var(--line);
    color: var(--text);
    background: transparent
}

.btn-outline:hover {
    background: rgba(255, 255, 255, .04)
}

*/
    /* Кнопки */
    
    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin-top: 42px;
    }
    
    .btn {
        display: inline-flex;
        min-height: 94px;
        align-items: center;
        justify-content: center;
        padding: 20px 28px;
        appearance: none;
        border: 2px solid transparent;
        border-radius: 36px;
        color: var(--text);
        font: inherit;
        font-size: 28px;
        line-height: 1.2;
        text-align: center;
        text-shadow: 0 2px 3px rgb(0 0 0 / 30%);
        cursor: pointer;
        transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }
    
    .btn-teal {
        border-color: #8fa99d;
        background: #52786e;
        box-shadow: inset 0 1px 2px rgb(255 255 255 / 14%), 0 0 22px rgb(87 139 119 / 12%);
    }
    
    .btn-outline {
        border-color: var(--gold);
        background: rgb(32 40 42 / 65%);
        box-shadow: inset 0 0 0 2px rgb(255 255 255 / 3%);
    }
    
    @media (hover: hover) {
        .btn-teal:hover:not(:disabled) {
            border-color: #adc6b9;
            background: #628c80;
            box-shadow: 0 0 24px rgb(112 167 144 / 22%);
        }
        .btn-outline:hover:not(:disabled) {
            border-color: #d1b38c;
            background: #2b3434;
        }
    }
    
    .btn:active:not(:disabled) {
        transform: translateY(2px);
    }
    
    .btn:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 5px;
    }
    
    .btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }
    
    .btn--terracotta,
    .badge--terracotta {
        border: 2px solid #bc8773;
        color: #fff6da;
        background: linear-gradient(135deg, #ac6a51 0%, #a55d47 100%);
        box-shadow: inset 0 1px 1px rgb(255 255 255 / 12%), 0 3px 8px rgb(0 0 0 / 18%);
        text-shadow: 0 1px 2px rgb(76 32 21 / 35%);
    }
    /* Кнопка как на изображении */
    
    .btn--terracotta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 78px;
        max-width: 100%;
        padding: 18px 28px;
        appearance: none;
        border-radius: 34px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 28px;
        font-weight: 400;
        line-height: 1.2;
        text-align: center;
        cursor: pointer;
        transition: filter 180ms ease, border-color 180ms ease, transform 180ms ease;
    }
    
    .btn--terracotta:hover {
        color: #ffffff !important;
        background: linear-gradient(135deg, #bb9080 0%, #a55d47 100%);
    }
    
    .training-btn {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 78px;
        padding: 18px 28px;
        border: 1px solid #c9957a;
        border-radius: 34px;
        background: linear-gradient(135deg, #bd896d, #a96348);
        color: #fff4e9;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
        font-weight: 400;
        line-height: 1.2;
        text-align: center;
        text-shadow: 0 1px 2px rgb(75 31 17 / 30%);
        box-shadow: inset 0 1px 1px rgb(255 255 255 / 20%), 0 4px 10px rgb(0 0 0 / 20%);
        cursor: pointer;
        transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    }
    /* Диагональный блик — не перехватывает клики */
    
    .training-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 110deg, transparent 25%, rgb(255 235 207 / 8%) 40%, rgb(255 235 207 / 30%) 50%, rgb(255 235 207 / 8%) 60%, transparent 75%);
        transform: translateX(-120%);
    }
    
    @media (hover: hover) and (pointer: fine) {
        .training-btn:hover:not(:disabled) {
            border-color: #fff4e9;
            box-shadow: inset 0 1px 2px rgb(255 255 255 / 30%), 0 8px 18px rgb(0 0 0 / 25%), 0 0 24px rgb(220 143 91 / 28%);
        }
        .training-btn:hover:not(:disabled)::after {
            animation: training-btn-shine 650ms ease-out;
        }
    }
    
    .training-btn:focus-visible {
        outline: 3px solid #fff4e9;
        outline-offset: 5px;
        box-shadow: 0 0 24px rgb(220 143 91 / 28%);
    }
    
    .training-btn:active:not(:disabled) {
        transform: translateY(1px) scale(0.98);
        box-shadow: inset 0 2px 5px rgb(80 33 18 / 25%), 0 2px 6px rgb(0 0 0 / 18%);
    }
    
    .training-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    @keyframes training-btn-shine {
        from {
            transform: translateX(-120%);
        }
        to {
            transform: translateX(120%);
        }
    }
    
    @media (prefers-reduced-motion: reduce) {
        .training-btn {
            transition: none;
        }
        .training-btn::after {
            display: none;
        }
        .training-btn:hover:not(:disabled),
        .training-btn:active:not(:disabled) {
            transform: none;
        }
    }
    /* ===== Header ===== */
    
    .header {
        top: 0;
        z-index: 50;
        /*
            background: rgba(15, 27, 33, .92);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid transparent;
            */
        position: relative;
    }
    
    .header.scrolled {
        /*border-bottom-color: var(--line)*/
    }
    
    .header__inner {
        /*height: 68px;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding-top: 60px;
    }
    
    .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 600;
        font-size: 22px;
    }
    
    .logo img {
        max-width: 314px;
        height: auto;
    }
    
    .logo__icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        border: 1.5px solid #5f7f88;
        display: grid;
        place-items: center;
        color: var(--teal-2);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: -.5px;
        background: linear-gradient(145deg, #1b2f37, #0f1b21)
    }
    
    .logo b {
        color: var(--orange);
        font-weight: 600
    }
    
    .nav {
        display: flex;
        align-items: center;
        gap: 55px
    }
    
    .nav a {
        font-size: 24px;
        color: #d5dee2;
        transition: color .2s
    }
    
    .nav-btn:hover {
        color: var(--orange)
    }
    
    .burger {
        display: none;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid var(--line);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px
    }
    
    .burger span {
        width: 18px;
        height: 2px;
        background: var(--text);
        border-radius: 2px;
        transition: .25s
    }
    
    .burger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg)
    }
    
    .burger.open span:nth-child(2) {
        opacity: 0
    }
    
    .burger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg)
    }
    /* ===== Hero ===== */
    
    .hero {
        padding: 85px 0 40px;
    }
    
    .hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 781px) 1fr;
        gap: 40px;
        align-items: start;
    }
    
    .hero h1 {
        font-size: 70px;
        line-height: 1.12;
        font-weight: 600;
        letter-spacing: -.5px;
        color: #fff6da;
        text-shadow: 0 2px 2px rgb(0 0 0 / 65%), 0 0 2px rgb(238 226 201 / 15%);
    }
    
    .hero h1 span {
        color: var(--orange)
    }
    
    .hero__text {
        margin-top: 45px;
        font-size: 27px;
        color: #cfd9dd;
        max-width: 628px;
        text-shadow: 0 2px 2px rgb(0 0 0 / 65%), 0 0 2px rgb(238 226 201 / 15%);
    }
    
    .hero__text a {
        color: var(--orange);
    }
    
    .stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 26px;
        max-width: 682px;
        margin-top: 70px;
    }
    /*
.stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    min-width: 118px
}
*/
    
    .stat {
        position: relative;
        display: flex;
        min-height: 144px;
        align-items: baseline;
        justify-content: flex-start;
        gap: 18px;
        overflow: hidden;
        padding: 27px 16px 20px 22px;
        border: 2px solid rgb(170 148 120 / 75%);
        border-radius: 32px;
        background: linear-gradient(145deg, #263031, #20282a);
        box-shadow: inset 0 0 0 2px rgb(255 255 255 / 3%), 0 3px 8px rgb(0 0 0 / 16%);
        text-shadow: 0 2px 3px rgb(0 0 0 / 55%);
    }
    
    .stat>div {
        display: flex;
        margin-left: 59px;
        flex-direction: column;
        width: 100%;
        justify-content: center;
    }
    
    .stat__num {
        position: relative;
        font-size: 44px;
        font-weight: 400;
        line-height: 1.05;
    }
    
    .stat__label {
        position: relative;
        font-size: 27px;
        line-height: 1.2;
    }
    /* Золотистая дуга */
    
    .stat-card__arc {
        position: absolute;
        top: 24px;
        left: 26px;
        width: 48px;
        height: 78px;
        border: 11px solid transparent;
        border-top-color: var(--accent);
        border-left-color: var(--accent);
        border-radius: 85% 25% 0 35%;
        transform: rotate(14deg);
        filter: drop-shadow(0 1px 2px rgb(239 183 125 / 25%));
        pointer-events: none;
    }
    
    .gauge {
        width: 80px;
        height: 80px;
        flex: none;
        position: absolute;
    }
    
    .gauge circle {
        fill: none;
        stroke-width: 4.2px;
        stroke-linecap: round;
    }
    
    .gauge .g-track {
        stroke: var(--track)
    }
    
    .gauge .g-val {
        stroke: var(--orange);
        stroke-dasharray: 0 100;
        transform: rotate(76deg);
        transform-origin: 50% 50%;
        transition: stroke-dasharray 1.1s ease;
    }
    
    .hero__actions {
        display: flex;
        gap: 14px;
        margin-top: 30px;
        flex-wrap: wrap
    }
    
    .hero__art {
        position: relative;
        border-radius: var(--radius-lg);
        overflow: hidden;
        aspect-ratio: 1.18/1;
        background: radial-gradient(60% 50% at 55% 60%, rgba(63, 141, 137, .35), transparent 70%), radial-gradient(30% 30% at 70% 30%, rgba(227, 154, 90, .25), transparent 70%), linear-gradient(160deg, #1a2b33, #0d171c);
        display: none;
    }
    
    .hero__art img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
    
    .hero__art img:not([src]),
    .hero__art img[src=""] {
        display: none
    }
    /* ===== Темы ===== */
    
    .topics {
        padding: 100px 0 100px
    }
    
    .section-title {
        margin: 0 0 40px;
        color: #eee2c9;
        font-size: 56px;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -1px;
        text-align: left;
        text-shadow: 0 2px 2px rgb(0 0 0 / 65%), 0 0 2px rgb(238 226 201 / 15%);
    }
    
    .topics__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px
    }
    
    .card {
        position: relative;
        isolation: isolate;
        box-sizing: border-box;
        width: 100%;
        max-width: 544px;
        padding: 30px 38px 36px;
        overflow: hidden;
        border: 2px solid #a38f73;
        border-radius: 28px;
        background: radial-gradient( ellipse at 50% 42%, rgb(68 101 96 / 16%), transparent 65%), linear-gradient(145deg, #222e31, #1c2e30);
        box-shadow: inset 0 0 0 2px rgb(255 255 255 / 3%), 0 3px 10px rgb(0 0 0 / 20%);
        color: #f1f3ec;
        display: flex;
        flex-direction: column;
        transition: transform 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
    }
    /* Мягкий диагональный блик */
    
    .card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient( 115deg, transparent 30%, rgb(239 204 148 / 3%) 40%, rgb(255 231 190 / 12%) 50%, rgb(239 204 148 / 3%) 60%, transparent 70%);
        opacity: 0;
        transform: translateX(-110%);
    }
    /* Эффект также работает при фокусе ссылки внутри карточки */
    
    .card:focus-within {
        transform: translateY(-6px);
        border-color: #dfbd86;
        box-shadow: inset 0 0 0 1px rgb(238 201 143 / 12%), inset 0 0 28px rgb(220 179 115 / 5%), 0 0 18px rgb(218 174 109 / 15%), 0 16px 32px rgb(0 0 0 / 30%);
    }
    
    .card:focus-within::after {
        animation: card-shine 850ms ease-out both;
    }
    
    @media (hover: hover) and (pointer: fine) {
        .card:hover {
            transform: translateY(-6px);
            border-color: #dfbd86;
            box-shadow: inset 0 0 0 1px rgb(238 201 143 / 12%), inset 0 0 28px rgb(220 179 115 / 5%), 0 0 18px rgb(218 174 109 / 15%), 0 16px 32px rgb(0 0 0 / 30%);
        }
        .card:hover::after {
            animation: card-shine 850ms ease-out both;
        }
    }
    
    @keyframes card-shine {
        0% {
            opacity: 0;
            transform: translateX(-110%);
        }
        20% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translateX(110%);
        }
    }
    /* Уважение к настройке уменьшения движения */
    
    @media (prefers-reduced-motion: reduce) {
        .card {
            transition: none;
        }
        .card:hover,
        .card:focus-within {
            transform: none;
        }
        .course-card::after {
            display: none;
            animation: none;
        }
    }
    
    .card *,
    .card *::before,
    .card *::after {
        box-sizing: inherit;
    }
    
    .card__img {
        aspect-ratio: 1.5/1;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 14px;
        /*background: linear-gradient(150deg, #22363f, #111d23);*/
        position: relative
    }
    
    .card__img img {
        width: 100%;
        height: 100%;
    }
    /*
    .card__img::after {
        content: '</>';
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #3b5660;
        font-weight: 600;
        font-size: 22px;
        pointer-events: none;
        z-index: -1
    }
    */
    
    .card h3 {
        margin: 0 0 16px;
        color: #f3f3ef;
        font-size: 34px;
        font-weight: 400;
        line-height: 1.15;
        letter-spacing: -0.5px;
    }
    
    .card__sub {
        margin: 0 0 8px;
        color: #bdb8a7;
        font-size: 24px;
        font-weight: 400;
        line-height: 1.35;
    }
    
    .card__meta {
        margin-top: auto;
        padding-top: 14px
    }
    
    .card__pct {
        margin: 0;
        color: #f3f3ef;
        font-size: 32px;
        font-weight: 400;
        line-height: 1.1;
    }
    
    .bar {
        height: 18px;
        border-radius: 99px;
        background: var(--track);
        overflow: hidden;
        margin-top: 18px;
    }
    
    .bar i {
        display: block;
        height: 100%;
        width: 0;
        border-radius: 99px;
        background: var(--teal-2);
        transition: width 1s ease
    }
    
    .bar--orange i {
        background: var(--orange)
    }
    
    .bar--rose i {
        background: var(--rose)
    }
    /* ===== Footer ===== */
    
    .footer {
        background: var(--bg-2);
        border-top: 1px solid var(--line);
        padding: 34px 0 0
    }
    
    .footer__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px
    }
    
    .footer h4 {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 12px
    }
    
    .footer ul {
        list-style: none;
        display: grid;
        gap: 6px
    }
    
    .footer li a {
        font-size: 12px;
        color: var(--muted);
        transition: color .2s
    }
    
    .footer li a:hover {
        color: var(--orange)
    }
    
    .socials {
        display: flex;
        gap: 10px
    }
    
    .socials a {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 1px solid var(--line);
        display: grid;
        place-items: center;
        color: #d5dee2;
        background: var(--card);
        transition: .2s
    }
    
    .socials a:hover {
        color: var(--orange);
        border-color: var(--orange)
    }
    
    .socials svg {
        width: 16px;
        height: 16px;
        fill: currentColor
    }
    
    .copyright {
        margin-top: 28px;
        border-top: 1px solid var(--line);
        padding: 16px 0;
        text-align: center;
        font-size: 12px;
        color: var(--muted)
    }
    /* ===== Адаптив: планшет ===== */
    
    @media (max-width:1024px) {
        .hero h1 {
            font-size: 38px
        }
        .hero__grid {
            grid-template-columns: 1fr 1fr;
            gap: 28px
        }
        .topics__grid {
            grid-template-columns: repeat(2, 1fr)
        }
        .footer__grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 28px
        }
    }
    /* ===== Адаптив: мобильный ===== */
    
    @media (max-width:640px) {
        .container {
            padding: 0 16px
        }
        .header__inner {
            height: auto;
            padding-top: 10px;
        }
        .logo {
            font-size: 19px;
        }
        .logo img {
            width: 150px;
        }
        .logo__icon {
            width: 34px;
            height: 34px
        }
        .burger {
            display: flex;
        }
        .nav {
            position: fixed;
            inset: 60px 0 auto 0;
            background: var(--bg);
            border-bottom: 1px solid var(--line);
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            padding: 8px 16px 16px;
            transform: translateY(-8px);
            opacity: 0;
            pointer-events: none;
            transition: .25s
        }
        .nav.open {
            transform: none;
            opacity: 1;
            pointer-events: auto
        }
        .nav a {
            padding: 12px 4px;
            font-size: 16px;
            border-bottom: 1px solid var(--line)
        }
        .nav .btn {
            margin-top: 12px;
            height: 44px;
            font-size: 15px
        }
        .hero {
            padding: 16px 0 32px
        }
        .hero__grid {
            grid-template-columns: 1fr;
            gap: 24px
        }
        .hero__art {
            order: -1;
            aspect-ratio: 1.3/1
        }
        .hero h1 {
            font-size: 30px
        }
        .hero__text {
            font-size: 14px
        }
        .stats {
            gap: 10px;
            margin-top: 24px
        }
        .stat {
            flex: 1 1 calc(50% - 5px);
            min-width: 0;
            padding: 10px 12px
        }
        .hero__actions .btn {
            flex: 1 1 100%
        }
        .section-title {
            font-size: 22px
        }
        .topics__grid {
            grid-template-columns: 1fr;
            gap: 14px
        }
        .footer__grid {
            grid-template-columns: 1fr;
            gap: 22px
        }
        .btn {
            width: 100%;
            min-height: 72px;
            padding: 18px;
            border-radius: 28px;
            font-size: 22px;
        }
    }