:root {
    --text: #1a1a1a;
    --muted: #f6f7fb;
    --primary: #3E3660;
    /* фирменная фиолетовая для кнопок */
    --header-bg: #ffffff;
    --shadow: 0 10px 30px rgba(16, 24, 40, .08);
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0
}

body {
    font-family: Inter, system-ui, Arial, sans-serif;
    color: var(--text);
    background: #fff
}


/* layout */

.container {
    max-width: 1410px;
    margin: 0 auto;
    padding: 0 16px
}


/* NAVBAR */

.site-header {
    position: sticky;
    top: 0;
    background: var(--header-bg);
    border-bottom: 1px solid #eee;
    z-index: 50
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none
}

.logo img {
    height: 34px;
    width: auto;
    display: block
}

.menu .menu-list {
    list-style: none;
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 0;
    align-items: center
}

.menu-link {
    position: relative;
    text-decoration: none;
    color: #1f2328;
    font-weight: 500
}

.menu-item {
    font-family: "Muller", sans-serif;
    position: relative
}


/* caret */

.has-dropdown>.menu-link::after {
    content: "";
    display: inline-block;
    width: 10px;
    /* ширина SVG */
    height: 6px;
    /* высота SVG */
    margin-left: 8px;
    background: url("data:image/svg+xml;utf8,<svg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M9.06501 0.338998L9.86001 1.13475L5.52726 5.469C5.45783 5.53886 5.37527 5.59431 5.28434 5.63215C5.1934 5.66998 5.09588 5.68946 4.99738 5.68946C4.89889 5.68946 4.80137 5.66998 4.71043 5.63215C4.61949 5.59431 4.53693 5.53886 4.46751 5.469L0.132507 1.13475L0.927507 0.339747L4.99626 4.40775L9.06501 0.338998Z' fill='black'/></svg>") no-repeat center;
    background-size: contain;
    transform: translateY(-1px);
}

.has-dropdown:hover>.menu-link::after,
.has-dropdown:focus-within>.menu-link::after {
    transform: translateY(-1px) rotate(180deg);
}


/* dropdown */

.dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    min-width: 260px;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 0px 0px 14px 14px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: .18s ease;
}

.dropdown a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    color: #1f2328;
    text-decoration: none;
    white-space: nowrap
}

.dropdown a:hover {
    background: #f4f6fb
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}


/* BUTTONS */

.btn {
    display: inline-block;
    padding: 12px 18px;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    text-decoration: none;
    line-height: 1;
    font-weight: 600;
    transition: .2s;
    background: #fff;
    color: #111;
}

.btn:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
    transform: translateY(-1px)
}

.btn-primary {
    font-family: "Muller Light", sans-serif;
    background: var(--primary);
    color: #fff;
    border-color: transparent
}

.btn-primary:hover {
    filter: brightness(.95);
    background-color: #6065c7;
    transform: translateY(-2px);
}


/* HERO */

.hero-title {
    font-family: "Gotham Pro Medium", sans-serif;
}

.hero {
    padding: 34px 0 10px
}

.hero-box {
    position: relative;
    border-radius: 24px;
    min-height: 531px;
    background: #ddd no-repeat center/cover;
    background-image: var(--hero-bg);
    background-position: right center;
    /* фото справа */
}

.hero-overlay {
    position: relative;
    width: min(744px, 56%);
    /* примерно левая половина */
    min-height: 531px;
    padding: 136px 48px 83px 32px;
    background: #f3f4f7;
    /* очень светлый, как на референсе */
    color: #111;
    border-radius: 24px 340px 340px 24px;
    /* дуга справа */
    box-shadow: 0 6px 18px rgba(20, 20, 43, .06);
}

.hero-overlay h1 {
    margin: 0 0 16px 0;
    font-size: clamp(18px, 4.5vw, 48px);
    line-height: 1.1;
    font-weight: 800;
}

.hero-sub {
    font-family: "Muller", sans-serif;
    margin: 0 0 22px 0;
    color: #5b6472;
    /* серый подзаголовок */
    font-size: clamp(12px, 1.4vw, 18px);
    line-height: 1.3;
}


/* HERO FEATURES */

.hero-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 161px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0 10px 0 10px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #3a3f47
}

.feature .icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #3E3660;
    /* светло-фиолетовый кружок */
    box-shadow: inset 0 0 0 1px rgba(90, 67, 197, .12);
}

.feature .icon img {
    width: 24px;
    height: 24px;
    display: block
}

.feature:last-child span br {
  display: none;
}


/* GENERIC SECTIONS (ниже по странице) */

.section {
    padding: 64px 0
}

.section.muted {
    background: var(--muted)
}

.grid-3 {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr)
}

.card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 18px
}

.site-footer {
    padding: 32px 0;
    border-top: 1px solid #eee;
    background: #fff
}


/* Responsive */

@media (max-width:1080px) {
    .hero-overlay {
        width: 66%
    }
}

@media (max-width:900px) {
    .menu .menu-list {
        gap: 18px
    }
    .hero-box {
        min-height: 300px;
        background-image: url('../img/hero-oil-mobile.png');
    }
    .hero-overlay {
        margin-right: 23%;
        padding: 60px 16px 40px 20px;
        width: auto;
        border-top-left-radius: 20px;
        border-top-right-radius: 96px;
        border-bottom-right-radius: 96px;
        border-bottom-left-radius: 20px;
        min-height: auto;
    }
}

@media (max-width:960px) {
    .menu {
        display: none
    }
    /* мобильное меню добавим позже */
    .hero {
        padding: 20px 0 6px
    }
    .hero-features {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0
    }
    /* Мобильная версия кнопки */
    .hero-overlay .btn-primary {
        width: 70%;
        text-align: center;
        padding: 16px 24px;
        font-size: 14px;
        font-weight: 400;
    }
    .feature .icon {
        width: 23px;
        height: 23px;
    }
    .feature .icon img {
        width: 12px;
        height: 12px;
    }
    .feature:nth-child(2) { place-self: center;}
    .feature:last-child { place-self: end; }
    .feature:last-child span br {
        display: inline;
    }
    /* Мобильная версия кнопки "Все курсы" */
    .tracks-actions .btn-primary {
        width: 100%;
        text-align: center;
        padding: 16px 24px;
        font-size: 16px;
        font-weight: 600;
    }
    /* Мобильная версия кнопки "Все курсы" - расширенная */
    .tracks-actions {
        padding: 0 20px;
    }
    /* Мобильная версия кнопки "Полный список рекомендаций" */
    .recommend-actions .btn-primary {
        width: 100%;
        text-align: center;
        padding: 16px 24px;
        font-size: 16px;
        font-weight: 600;
    }
    .recommend-actions {
        padding: 0 20px;
    }
}


/* VALUES */

.values {
    padding-top: 72px;
    padding-bottom: 72px;
}

.values-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
}


/* Утилиты для показа/скрытия элементов */

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}


/* left column with two photos */

.values-photos {
    position: relative;
    min-height: 520px;
    /* высота зоны, чтобы поместились оба снимка */
}

.values-photos .photo-top,
.values-photos .photo-bottom {
    margin: 0;
}

.values-photos .photo-top {
    width: clamp(520px, 40vw, 640px);
    height: clamp(300px, 23vw, 360px);
    /* верхнее — прямоугольное */
    border-radius: 0;
    overflow: hidden;
}

.values-photos .photo-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}


/* bottom photo - shifted down and right, with rounded corners */

.values-photos .photo-bottom {
    position: absolute;
    left: 41%;
    bottom: -20%;
    border: 16px solid white;
    width: clamp(376px, 42vw, 429px);
    height: clamp(320px, 27vw, 373px);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    /* на случай медленной загрузки */
}

.values-photos .photo-bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}


/* right column with text */

.values-copy h2 {
    margin: 0 0 28px 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 800;
}

.value-item {
    margin-top: 24px;
}

.value-item h3 {
    margin: 0 0 8px 0;
    font-weight: 800;
    /* жирный подзаголовок */
    font-size: clamp(18px, 2vw, 22px);
}

.value-item p {
    margin: 0;
    color: #424a55;
    line-height: 1.6;
    font-size: clamp(15px, 1.6vw, 17px);
}


/* adaptive */

@media (max-width: 1100px) {
    .values-grid {
        gap: 40px
    }
    .values-photos {
        min-height: 480px
    }
    .values-photos .photo-bottom {
        left: 8%;
        bottom: -10%
    }
}

@media (max-width: 900px) {
    .values-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
    }
    .values-copy {
        order: 1
    }
    .values-photos {
        order: 2;
        min-height: auto
    }
    .values-photos .photo-top {
        width: 100%;
        height: clamp(220px, 48vw, 320px);
    }
    .values-photos .photo-bottom {
        position: relative;
        left: auto;
        bottom: auto;
        width: calc(100% - 56px);
        height: clamp(220px, 50vw, 320px);
        margin-top: -36px;
        margin-left: 28px;
    }
}


/* Мобильная версия секции ценностей */

@media (max-width: 960px) {
    .values {
        padding: 40px 0;
    }
    .values-grid {
        display: block;
        background: #fff;
        border-radius: 16px;
        padding: 24px;
    }
    /* Скрыть десктопную версию */
    .desktop-only {
        display: none;
    }
    /* Показать мобильную версию */
    .mobile-only {
        display: block;
    }
    .values-mobile h2 {
        margin: 0 0 24px 0;
        font-size: 28px;
        font-weight: 800;
        color: #1a1a1a;
        text-align: left;
    }
    .mobile-photo {
        margin: 0 0 24px 0;
        border-radius: 12px;
        overflow: hidden;
    }
    .mobile-photo img {
        width: 100%;
        height: auto;
        display: block;
    }
    .values-mobile .value-item {
        margin: 0 0 20px 0;
    }
    .values-mobile .value-item h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 700;
        color: #1a1a1a;
    }
    .values-mobile .value-item p {
        margin: 0;
        font-size: 16px;
        line-height: 1.6;
        color: #1a1a1a;
    }
    /* Мобильная версия галереи - кнопки внизу */
    .gallery-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .gallery-controls {
        align-self: center;
        margin-top: 16px;
    }
}


/* TRACKS (Направления курсов) */

.section-title {
    margin: 0 0 18px 0;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
}

.tracks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 32px;
    margin-top: 8px;
}

.track-card {
    background: #F2F2F4;
    border-radius: 20px;
    padding: 26px 28px;
    transition: box-shadow .2s ease, transform .2s ease;
    height: clamp(299px, 22vw, 344px);
}

.track-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}


/* верхняя строка карточки: иконка слева, ссылка справа */

.track-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primary);
    flex: 0 0 56px;
}

.icon-badge img {
    width: 26px;
    height: 26px;
    display: block;
    filter: brightness(0) invert(1);
    /* на случай не-белых svg */
}


/* ссылка "Перейти" + стрелка */

.track-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    color: #6c6f75;
    font-size: clamp(18px, 1.2vw + 6px, 22px);
}

.track-link:hover {
    color: #3b3f45;
}

.track-link svg {
    display: block;
}


/* заголовок и текст карточки */

.track-card h3 {
    margin: 40px 0 8px 0;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 800;
    color: #17181a;
}

.track-card p {
    margin: 0;
    color: #454a52;
    line-height: 1.6;
    font-size: clamp(16px, 1.5vw, 20px);
    display: -webkit-box;        /* создаём блочный контейнер */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;       /* ограничиваем количество строк */
    overflow: hidden; 
}


/* нижняя кнопка */

.tracks-actions {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.tracks-actions .btn {
    padding: 12px 22px;
    border-radius: 12px;
}


/* адаптив */

@media (max-width: 900px) {
    .tracks-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .track-card {
        padding: 22px;
    }
    .track-card svg {
        width: 18px;
        height: 18px;
    }
}


/* ABOUT */

.about {
    padding: 64px 0 64px
}

.about-header {
    margin-bottom: 28px
}

.about-header h1 {
    margin: 0 0 12px 0;
    font-size: clamp(28px, 4.4vw, 48px);
    font-weight: 800
}

.about-header .divider {
    height: 1px;
    background: #000000;
    border: 0
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center
}

.about-copy h2 {
    margin: 0 0 14px 0;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 800
}

.about-section-title {
    font-family: "Gotham Pro Medium", sans-serif;
    margin: 0 0 28px 0;
    font-size: clamp(28px, 4.4vw, 48px);
    font-weight: 800
}

.about-description {
    font-family: "Muller", sans-serif;
    font-size: 18px;
    margin: 0 0 14px 0;
    line-height: 1.7;
    color: #1A1A1A
}

.about-copy p {
    margin: 0 0 14px 0;
    line-height: 1.7;
    color: #3e4652
}

.about-photo {
    margin-bottom: 40px;
    height: clamp(260px, 36vw, 420px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(20, 20, 43, .08);
}

.about-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.document-photo {
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.short-term-course-photo {
    height: clamp(280px, 26vw, 303px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(20, 20, 43, .08);
}

.short-term-course-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-list-title {
    font-family: "Muller", sans-serif;
    font-size: 18px;
    color: #1A1A1A;
}

.about-list {
    font-family: "Muller", sans-serif;
    font-size: 16px;
    color: #1A1A1A;
}

.about-list li {
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 22px
    }
    .about-photo {
        order: 2
    }
}


/* NEWS */

.news-title {
    margin: 0 0 16px 0;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    color: #111;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 28px;
}


/* Карточка с фото фоном */

.news-card {
    position: relative;
    min-height: 496px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .08);
}


/* Размытый фон */

.news-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), /* затемнение */
    var(--news-bg) center/cover no-repeat;
    filter: blur(7.5px);
    -webkit-filter: blur(7.5px);
    transform: scale(1.06);
    will-change: filter, transform;
    z-index: 0;
    pointer-events: none;
}


/* ссылка "Перейти" в правом верхнем углу */

.news-go {
    position: absolute;
    top: 36.5px;
    right: 31.7px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 400;
    color: #fff;
    text-shadow:0 2px 8px rgba(0,0,0,.35);
    z-index: 2;
    font-size: clamp(18px, 2vw, 22px);
}

.news-go:hover {
    opacity: .9;
}


/* нижний тёмный overlay-блок */

.news-overlay {
    position: absolute;
    left: 0;
    right: 18px;
    bottom: 40px;
    background: #434343;
    color: #fff;
    border-radius: 0 14px 14px 0;
    padding: 24px 66px 24px 24px;
    /* раньше размывали только под overlay — убираем: */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1;
    max-width: 593px;
}

.news-overlay h3 {
    margin: 0 0 10px 0;
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.news-overlay p {
    margin: 0;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.6;
    color: #f1f1f1;
    text-align: justify;
}


/* адаптив */

@media (max-width: 900px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .news-card {
        min-height: 300px;
    }
    .news-overlay p {
        display: none;
    }
    .news-overlay {
        background: #43434380;
        backdrop-filter: blur(7.5px);
    }
    .news-card::before {
        filter: none;
        background: var(--news-bg) center / cover no-repeat;
    }
    .news-go svg {
        width: 18px;
        height: 18px;
    }
}


/* GALLERY */

.gallery {
    padding: 60px 0;
}

.gallery-header {
    margin-bottom: 32px;
}

.gallery-header h2 {
    margin: 0;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    color: #1a1a1a;
}


/* стрелки */

.gallery-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.gallery-nav {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(62, 54, 96, .25);
    transition: transform .15s ease, opacity .15s ease;
}

.gallery-nav:hover {
    transform: translateY(-1px);
}

.gallery-nav[disabled] {
    opacity: .45;
    cursor: default;
    transform: none;
}


/* лента */

.gallery-viewport {
    position: relative;
}

.gallery-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    gap: 16px;
    grid-auto-columns: calc(33.333% - 11px);
    /* 3 изображения видно, остальные частично */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox скрыть полосу */
}

.gallery-track::-webkit-scrollbar {
    display: none;
}

.gallery-item {
    scroll-snap-align: start;
}

.gallery-item img {
    width: 100%;
    height: 338px;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* адаптив: 3 → 2 → 1 карточка на экран */

@media (max-width:1200px) {
    .gallery-track {
        grid-auto-columns: calc(33.333% - 14.7px);
    }
}

@media (max-width:900px) {
    .gallery-track {
        grid-auto-columns: calc(50% - 11px);
    }
}

@media (max-width:620px) {
    .gallery-track {
        grid-auto-columns: 88%;
    }
    /* почти по одной с небольшим превью следующей */
    .gallery-item img {
        height: 220px;
    }
}


/* RECOMMEND */

.recommend-title {
    margin: 0 0 16px 0;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    color: #111;
}

.recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 32px;
}

.rec-card {
    display: block;
    background: #fff;
    border: 1px solid #E8E8EE;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}

.rec-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(16, 24, 40, .10);
}

.rec-media {
    position: relative;
    width: 100%;
    /* Высоту задаёт JS (половина от высоты отрисованной страницы) */
    overflow: hidden;
    /* <-- ключ! режем лишнее */
    background: #fafafa;
}

.rec-media canvas {
    display: block;
    width: 100%;
    height: auto;
    /* не растягиваем, сохраняем пропорции */
    transform: translateY(0);
    /* сброс на всякий случай */
    will-change: transform;
}


/* если будет фолбэк-изображение */

.rec-media img {
    display: block;
    width: 100%;
    height: auto;
}

.rec-caption {
    display: inline-block;
    margin: 12px 14px 16px;
    padding: 10px 14px;
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
}

.recommend-actions {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}


/* адаптив */

@media (max-width:900px) {
    .recommend-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}


/* карточки достижением миссии */

.mission {
    text-align: center;
    padding: 64px 0;
}

.mission-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    margin-bottom: 32px;
}

.mission-card-desc {
    font-family: "Muller", sans-serif;
    font-size: 28px;
    color: #1A1A1A;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.mission-card {
    background: #F9F9F9;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: left;
    background-size: 200px;
    /* Размер изображения */
    background-repeat: no-repeat;
    background-position: bottom right;
    /* Позиция изображения */
}

.mission-card:nth-child(1) {
    background-image: url("/static/img/barchart.png");
}

.mission-card:nth-child(2) {
    background-image: url("/static/img/checkmark.png");
}

.mission-card:nth-child(3) {
    background-image: url("/static/img/openbook.png");
}

.mission-card p {
    font-size: 20px;
    line-height: 1.6;
    color: #1A1A1A;
    margin-bottom: 16px;
}

.mission-icon {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
}

.mission-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gnn-photo {
    margin-bottom: 40px;
    height: clamp(260px, 36vw, 420px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(20, 20, 43, .08);
}

.gnn-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}


/* контакты */

.contact-title {
    font-family: "Gotham Pro Medium", sans-serif;
    font-size: 30px;
    text-align: center;
}

.contact-desc {
    font-family: "Muller", sans-serif;
    font-size: 20px;
    text-align: center;
}

.contacts-info {
    margin-top: 32px;
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
    background: #F2F2F4;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 32px;
}

.contact-card {
    background: none;
    box-shadow: none;
    padding: 16px;
}

.contact-icon img {
    width: 85px;
    height: 69px;
    margin-bottom: 16px;
}

.contact-icon-phone img {
    width: 76px;
    height: 76px;
    margin-bottom: 16px;
}

.contact-icon-clock img {
    width: 87px;
    height: 87px;
    margin-bottom: 16px;
}

.contact-card h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 16px;
}

.contact-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #3E4652;
}

.contact-desc a {
    color: #3E4652;       
    text-decoration: none;
}

.contact-desc a:hover {
    color: #7F6FC4;       
    text-decoration: underline; 
}



/* ===== fonts ===== */

@font-face {
    font-family: "Gotham Pro Medium";
    src: url("../fonts/gothampro_medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Pro Light";
    src: url("../fonts/gothampro_light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham Pro Bold";
    src: url("../fonts/gothampro_bold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Muller";
    src: url("../fonts/MullerRegular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Muller Light";
    src: url("../fonts/MullerLight.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Muller Bold";
    src: url("../fonts/MullerBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* плавная прокрутка к якорю */

html {
    scroll-behavior: smooth;
}


/* ===== NEWS LIST PAGE ===== */

.news-page .page-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: #111;
}

.news-page .page-rule {
    height: 1px;
    border: 0;
    background: #D9DAE1;
    margin: 12px 0 18px;
}

.news-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* общая карточка новости (стек из баннера и тела) */

.news-row {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .06);
    scroll-margin-top: 96px;
    /* чтобы якорь не прятался под фикс-хедером */
    border: 1px solid #000000;
}


/* верхний баннер */

.row-banner {
    position: relative;
    height: clamp(180px, 28vw, 584px);
    background: var(--photo) center / cover no-repeat;
    /* ← только картинка */
}


/* если захотите большой текст поверх баннера
.row-banner-copy{
  position:absolute; left:24px; bottom:24px;
  color:#fff; font-weight:800; font-size: clamp(24px, 4vw, 40px);
}
*/


/* низ карточки */

.row-body {
    padding: 18px 20px 22px;
    background: #fff;
}

.row-title {
    margin: 0 0 16px 0;
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 32px);
    color: #121212;
}

.row-desc {
    color: #121212;
    /* line-height:1.7; */
    font-size: clamp(16px, 2.2vw, 20px);
}


/* адаптивные отступы */

@media (max-width: 960px) {
    .row-body {
        padding: 16px;
    }
}

.row-banner {
    position: relative;
    overflow: hidden;
}

.row-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ===== RECOMMEND LIST PAGE ===== */

.recommend-page .page-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: #111;
}

.recommend-page .page-rule {
    height: 1px;
    border: 0;
    background: #D9DAE1;
    margin: 12px 0 18px;
}

.recommend-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* ===== CATALOG PAGE ===== */

.catalog-page .page-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: #111;
}

.catalog-page .page-rule {
    height: 1px;
    border: 0;
    background: #1a1a1a;
    opacity: .6;
    margin: 12px 0 80px;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 28px;
}

.catalog-card {
    background: #f5f5f5;
    /* светло-серый фон */
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04) inset;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* контент сверху */
    min-height: 110px;
}

.catalog-title {
    margin: 0 0 18px 0;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 700;
    color: #121212;
}

.catalog-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    /* фирменный фиолетовый */
}

.catalog-link:hover {
    opacity: .9;
}

.catalog-link svg {
    display: block;
}

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

.contact-desc a {
    color: var(--primary);
    text-decoration: none;
}

.contact-desc a:hover {
    text-decoration: underline;
}


/* ===== CORPORATE TRAINING PAGE ===== */

.corp-page .page-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: #111;
}

.corp-page .page-rule {
    height: 1px;
    border: 0;
    background: #000;
    opacity: .6;
    margin: 12px 0 24px;
}

.corp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 32px;
    align-items: start;
}

.ct-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .08);
    padding: 18px 18px 14px;
    align-self: start;
    scroll-margin-top: 96px;
}

.ct-head {
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 2px solid #1a1a1a;
    /* тонкая вертикальная черта как на макете */
    margin-bottom: 12px;
    padding: 28px 0px 28px 18px;
}

.ct-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex: 0 0 26px;
}

.ct-title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(20px, 2.1vw, 24px);
    color: #111;
}

.ct-photo {
    margin: 12px 0 12px 0;
    height: clamp(180px, 22vw, 299px);
    border-radius: 12px;
    overflow: hidden;
}

.ct-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-short {
    font-size: 15px;
    line-height: 1.7;
    color: #1a1a1a;
}

.ct-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.ct-actions .btn {
    border-radius: 12px;
}

.ct-more {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-weight: 600;
    color: #3b3b3b;
}

.ct-more svg {
    transition: transform .18s ease;
}

.ct-card.is-open .ct-more svg {
    transform: rotate(180deg);
}

.ct-content {
    margin-top: 12px;
    padding-right: 4px;
    font-size: 15px;
    line-height: 1.7;
    color: #1a1a1a;
    border-top: 1px dashed #e2e2e8;
    padding-top: 12px;
}


/* мобильная колонка */

@media (max-width:900px) {
    .corp-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .ct-photo {
        height: clamp(180px, 44vw, 240px);
    }
}


/* мобильная версия секции миссий */

@media (max-width: 768px) {
    .mission-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .mission-card {
        background: #F9F9F9;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        text-align: left;
        background-size: 80px;
        background-repeat: no-repeat;
        background-position: bottom right;
    }
    .mission-card-desc {
        font-size: 14px;
        line-height: 1.6;
        color: #3E4652;
    }
    .mission-title {
        font-size: 18px;
        text-align: center;
        margin-bottom: 24px;
    }
}

@media (max-width: 768px) {
    .about-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .about-photo {
        order: -1;
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
    }
    .about-copy {
        text-align: left;
    }
    .about-section-title {
        font-size: 18px;
        margin-bottom: 16px;
    }
    .about-description {
        font-size: 14px;
        line-height: 1.6;
    }
}

@media (max-width: 768px) {
    .document-photo img {
        width: 100%;
        max-width: 300px;
        height: auto;
        margin: 0 auto;
        display: block;
    }
}

@media (max-width: 768px) {
    .contacts-grid {
        display: block; /* карточки в колонку */
    }

    .contact-card {
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 16px 0;
        border-bottom: 1px solid #ffffff00;
    }

    .contact-card:last-child {
        border-bottom: none;
    }

    .contacts-info {
        background: #ffffff;
        border-radius: 16px;
        padding: 24px;
    }
}

/* ===== MEGA FOOTER ===== */
.mega-footer{
  background:#1C1C1C;
  color:#fff;
  padding-top:64px;
  margin-top:56px;
}
.mega-footer .container{padding:0 16px}

/* top */
.footer-top{padding:48px 0 28px}
.footer-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr; /* фото слева шире */
  gap:40px;
  align-items:start;
}

/* photos mosaic: big + two small */
.footer-photos{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "big s1"
    "big s2";
  gap:22px;
}
.ph{margin:0;border-radius:18px;overflow:hidden;background:#222}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph-big{grid-area:big; height: clamp(360px, 38vw, 520px)}
.ph-s1{grid-area:s1; height: clamp(160px, 17vw, 240px)}
.ph-s2{grid-area:s2; height: clamp(160px, 17vw, 240px)}

/* form */
.footer-form{padding-right:12px}
.footer-title{
  margin:0 0 18px 0;
  font-size: clamp(24px,3vw,32px);
  font-weight:800;
  color:#fff;
}
.footer-form-body{display:block}
.form-row.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-bottom:14px;
}
.form-field{display:block}
.form-field>span{
  display:block; margin:0 0 8px 8px;
  font-size:18px; color:#d9d9de; font-weight:600;
}
.input, .textarea{
  width:100%;
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.35);
  border-radius:14px;
  padding:14px 16px;
  outline:none;
  font-size:18px;
}
.input::placeholder, .textarea::placeholder{color:rgba(255,255,255,.6)}
.input:focus, .textarea:focus{
  border-color:#7F6FC4; box-shadow:0 0 0 3px rgba(127,111,196,.15);
}
.textarea{min-height:138px; resize:vertical}
.footer-send{
  margin-top:18px; padding:14px 20px;
}

/* bottom bar */
.footer-bottom{padding:26px 0 36px}
.bottom-row{
  display:flex; align-items:center; gap:24px;
  position:relative;
}
.footer-logo img{height:44px; width:auto; display:block}
.footer-contacts{
  display:flex; gap:18px; flex-wrap:wrap; color:#e9e9ee; line-height:1.6;
}
.footer-contacts a{color:#e9e9ee; text-decoration:none}
.footer-contacts a:hover{color:#bdb7ef; text-decoration:underline}
.footer-address{opacity:.9}

/* socials */
.footer-social{
  margin-left:auto; display:flex; gap:14px;
}
.soc{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:#3E3660;
  box-shadow:0 4px 16px rgba(62,54,96,.35);
}
.soc img{width:22px; height:22px; filter:brightness(0) invert(1); display:block}

/* responsive */
@media (max-width: 980px){
  .footer-grid{grid-template-columns:1fr; gap:24px}
  .footer-form{padding-right:0}
  .form-row.two{grid-template-columns:1fr}
}
@media (max-width: 960px){
  .footer-bottom{padding:18px 0 28px}
  .bottom-row{flex-direction:column; align-items:flex-start; gap:16px}
  .footer-social{margin-left:0}
}

/************************
 * MOBILE NAVBAR (burger)
 ************************/
.burger{display:none; position:relative; width:38px; height:38px; border:0px solid #d0d7de; border-radius:10px; background:#fff; cursor:pointer; align-items:center; justify-content:center;}
.burger span{position:absolute; left:9px; right:9px; height:2px; background:#1f2328; transition:transform .18s ease, opacity .18s ease, top .18s ease}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:18px}
.burger span:nth-child(3){top:24px}
.burger.is-open span:nth-child(1){top:18px; transform:rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){top:18px; transform:rotate(-45deg)}

/* panel */
.mobile-menu{position:fixed; inset:76px 0 0 0; /* below sticky header */ background:#fff; z-index:60; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .18s ease, transform .18s ease, visibility .18s; box-shadow:0 12px 30px rgba(16,24,40,.12);}
.mobile-menu.is-open{opacity:1; visibility:visible; transform:translateY(0)}
.mobile-menu-inner{height:calc(100vh - 76px); overflow:auto; padding:0px 16px 28px}
.mobile-close{position:sticky; top:0; margin-left:auto; display:block; width:38px; height:38px; border-radius:10px; border:1px solid #e1e4e8; background:#fff; font-size:24px; line-height:36px; text-align:center; cursor:pointer}

.mm-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.mm-item{background:#f7f8fb; border:1px solid #eceff4; border-radius:12px; padding:12px}
.mm-head{font-weight:800; font-size:16px; margin:2px 0 8px}
.mm-sub{list-style:none; margin:0; padding:0 0 0 6px; display:flex; flex-direction:column; gap:8px}
.mm-link{display:block; padding:10px 10px; border-radius:10px; text-decoration:none; color:#1f2328; font-weight:600}
.mm-link:active{background:#eef0f6}

@media (max-width: 960px){
  .burger{display:inline-flex}
  .menu{display:none} /* already present, keep for clarity */
}

/* contacts inside mobile panel */
.mm-info{margin:16px 0 0; padding:16px 12px; background:#fff; border:1px solid #eceff4; border-radius:12px}
.mm-quick{display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:12px}
.mm-cta{display:block; text-align:center; padding:12px 14px; border-radius:12px; text-decoration:none; font-weight:700}
.mm-cta--primary{background: var(--primary); color:#fff}
.mm-cta--ghost{border:1px solid #d0d7de; color:#1f2328; background:#fff}
.mm-contacts{list-style:none; margin:0 0 12px 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 14px; font-size:14px}
.mm-contacts a{color:#3b3b3b; text-decoration:none}
.mm-contacts a:hover{text-decoration:underline}
.mm-social{display:flex; gap:12px; margin:0 0 10px 0;justify-content: center;}
.mm-address{font-size:13px; color:#5a6472}