/*
Theme: Granum Lang
Development overrides
Author: Genz0, Андрей Суровцев

Этот файл подключается после app.css.
Все текущие правки во время разработки можно писать здесь.
*/

html,
body,
body.granum-page {
    margin: 0 !important;
    background: #000000 !important;
    overflow-x: hidden !important;
}

/* GRANUM HERO HEADER CORRECTION START */

.granum-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: #f7f5fc !important;
    isolation: isolate;
}

.granum-hero::before,
.granum-hero::after {
    content: none !important;
    display: none !important;
}

.granum-hero__stage,
.granum-hero__canvas,
.granum-hero__poster,
#granum-hero-stage,
#granum-hero-canvas,
#granum-hero-poster {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.granum-hero__shade {
    background:
        linear-gradient(
            90deg,
            rgba(247, 245, 252, 0.98) 0%,
            rgba(247, 245, 252, 0.91) 22%,
            rgba(247, 245, 252, 0.64) 38%,
            rgba(247, 245, 252, 0.18) 56%,
            rgba(247, 245, 252, 0) 72%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.32) 0%,
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0) 82%,
            rgba(247, 245, 252, 0.28) 100%
        ) !important;
}

.granum-hero__content {
    position: relative !important;
    z-index: 5 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    width: min(790px, calc(100% - 48px)) !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    max-height: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 0 0 clamp(24px, 5.5vw, 106px) !important;
    padding: 70px 0 24px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.granum-hero__eyebrow {
    align-self: flex-start;
    margin-bottom: 21px;
    padding: 9px 14px;
    border: 1px solid rgba(99, 79, 156, 0.18);
    border-radius: 999px;
    color: #634f9c;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.granum-hero__eyebrow::before {
    content: none !important;
    display: none !important;
}

.granum-hero__title {
    max-width: 760px;
    margin: 0;
    color: #211b32;
    font-size: clamp(58px, 6vw, 106px);
    font-weight: 800;
    line-height: 0.89;
    letter-spacing: -0.065em;
    text-shadow: none;
}

.granum-hero__subtitle {
    max-width: 600px;
    margin-top: 27px;
    color: #634f9c;
    font-size: clamp(21px, 1.75vw, 30px);
    font-weight: 730;
    line-height: 1.2;
}

.granum-hero__description {
    max-width: 580px;
    margin: 20px 0 0;
    color: rgba(33, 27, 50, 0.7);
    font-size: 17px;
    line-height: 1.55;
}

.granum-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 27px;
}

.granum-button {
    min-height: 58px;
    padding: 0 25px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 750;
}

.granum-button--primary {
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #634f9c, #8067bd);
    box-shadow: 0 18px 42px rgba(99, 79, 156, 0.26);
}

.granum-button--secondary {
    border: 1px solid rgba(99, 79, 156, 0.48);
    color: #634f9c;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
}

.granum-hero__facts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 11px !important;
    width: min(650px, 100%) !important;
    margin-top: 25px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.granum-hero__facts article {
    display: flex !important;
    min-width: 0 !important;
    min-height: 78px !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 13px 15px !important;
    border: 1px solid rgba(99, 79, 156, 0.12) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    box-shadow: none !important;
}

.granum-hero__facts article + article {
    border-left: 1px solid rgba(99, 79, 156, 0.12) !important;
}

.granum-hero__facts strong {
    margin: 0;
    color: #634f9c !important;
    font-size: 17px !important;
    font-weight: 800;
}

.granum-hero__facts span {
    margin-top: 5px;
    color: #736c7e !important;
    font-size: 12px !important;
    line-height: 1.25;
}

.granum-header {
    position: absolute !important;
    z-index: 8 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 88px !important;
    grid-template-columns:
        minmax(260px, 1fr)
        auto
        minmax(260px, 1fr) !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 14px clamp(24px, 4vw, 72px) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(99, 79, 156, 0.12) !important;
    border-radius: 0 !important;
    color: #211b32 !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 8px 30px rgba(33, 27, 50, 0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.granum-brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 13px;
    color: #211b32 !important;
    text-decoration: none;
}

.granum-brand__mark {
    display: grid !important;
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    place-items: center;
    border: 0 !important;
    border-radius: 0 !important;
    color: #634f9c !important;
    background: transparent !important;
    box-shadow: none !important;
}

.granum-brand__mark svg {
    width: 100% !important;
    height: 100% !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
}

.granum-brand__text strong {
    color: #211b32 !important;
    font-size: 21px !important;
    letter-spacing: 0.16em !important;
}

.granum-brand__text small {
    max-width: 170px;
    margin-top: 5px;
    color: rgba(33, 27, 50, 0.58) !important;
    font-size: 10px !important;
    line-height: 1.15;
    letter-spacing: 0.03em;
}

.granum-navigation {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 2.6vw, 44px) !important;
    margin: 0 !important;
}

.granum-navigation a {
    min-height: auto !important;
    padding: 7px 4px !important;
    border-radius: 0 !important;
    color: rgba(33, 27, 50, 0.72) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none;
}

.granum-navigation a:hover,
.granum-navigation a:focus-visible {
    color: #634f9c !important;
    background: transparent !important;
}

.granum-header__button {
    display: inline-flex !important;
    min-height: 50px !important;
    align-items: center;
    justify-content: center;
    justify-self: end;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #634f9c, #8067bd) !important;
    box-shadow: 0 12px 28px rgba(99, 79, 156, 0.2) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none;
}

@media (max-width: 1080px) {
    .granum-header {
        grid-template-columns: 1fr auto !important;
    }

    .granum-navigation {
        display: none !important;
    }

    .granum-hero__content {
        width: min(730px, calc(100% - 48px)) !important;
    }
}

@media (max-width: 767px) {
    .granum-header {
        width: 100% !important;
        min-height: 72px !important;
        padding: 9px 16px !important;
        border-radius: 0 !important;
    }

    .granum-brand__mark {
        width: 43px !important;
        height: 43px !important;
        flex-basis: 43px !important;
    }

    .granum-brand__text strong {
        font-size: 16px !important;
    }

    .granum-brand__text small {
        display: none !important;
    }

    .granum-header__button {
        min-height: 41px !important;
        padding: 0 12px !important;
        font-size: 10px !important;
    }

    .granum-hero__shade {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.5) 0%,
                rgba(255, 255, 255, 0.12) 12%,
                rgba(247, 245, 252, 0) 27%,
                rgba(247, 245, 252, 0.72) 62%,
                rgba(247, 245, 252, 0.98) 100%
            ) !important;
    }

    .granum-hero__content {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        max-height: none !important;
        justify-content: flex-end !important;
        margin: 0 16px !important;
        padding: 90px 0 25px !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .granum-hero__eyebrow {
        margin-bottom: 13px;
        padding: 8px 12px;
        font-size: 9px;
    }

    .granum-hero__title {
        font-size: clamp(46px, 14vw, 66px);
        line-height: 0.92;
    }

    .granum-hero__subtitle {
        margin-top: 17px;
        font-size: 19px;
    }

    .granum-hero__description {
        margin-top: 13px;
        font-size: 14px;
        line-height: 1.45;
    }

    .granum-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 18px;
    }

    .granum-button {
        width: 100%;
        min-height: 50px;
        padding: 0 15px;
        font-size: 13px;
    }

    .granum-hero__facts {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 16px !important;
        padding-bottom: 3px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none;
    }

    .granum-hero__facts::-webkit-scrollbar {
        display: none;
    }

    .granum-hero__facts article {
        min-width: 145px !important;
        min-height: 65px !important;
    }
}

/* GRANUM HERO HEADER CORRECTION END */

/* GRANUM HERO SHELL ALIGNMENT START */

/*
 * Первый экран, второй блок и хедер используют
 * одинаковый центральный контейнер 1480px.
 *
 * Canvas и stage остаются на всю ширину экрана.
 */

/* Первый экран - общий контейнер как у .granum-programs__container */
.granum-hero__content {
    right: auto !important;
    left: auto !important;

    width: min(calc(100% - 64px), 1480px) !important;
    max-width: 1480px !important;

    margin-right: auto !important;
    margin-left: auto !important;

    padding-right: 0 !important;
    padding-left: 0 !important;

    align-items: flex-start !important;
}

/*
 * Текст не растягивается на все 1480px.
 * Расширяется только рабочий контейнер и его левая граница
 * совпадает со вторым экраном.
 */
.granum-hero__eyebrow {
    max-width: 100%;
}

.granum-hero__title {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
}

.granum-hero__subtitle {
    width: min(620px, 100%) !important;
    max-width: 620px !important;
}

.granum-hero__description {
    width: min(590px, 100%) !important;
    max-width: 590px !important;
}

.granum-hero__actions {
    width: auto !important;
    max-width: 100% !important;
}

.granum-hero__facts {
    width: min(650px, 100%) !important;
    max-width: 650px !important;
}

/*
 * Хедер ровно по границам контейнера 1480px.
 *
 * Не используется transform: translateX(-50%),
 * потому что transform управляется GSAP.
 */
.granum-header {
    right: max(32px, calc((100vw - 1480px) / 2)) !important;
    left: max(32px, calc((100vw - 1480px) / 2)) !important;

    width: auto !important;
    max-width: none !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: clamp(20px, 2.2vw, 34px) !important;
    padding-left: clamp(20px, 2.2vw, 34px) !important;
}

/* Логотип строго по левой границе хедера */
.granum-brand {
    justify-self: start !important;
}

/* Навигация строго по центру общего контейнера */
.granum-navigation {
    justify-self: center !important;
}

/* Кнопка строго по правой границе хедера */
.granum-header__button {
    justify-self: end !important;
}

/*
 * Планшеты.
 * Единые боковые отступы первого экрана и хедера.
 */
@media (max-width: 1080px) {
    .granum-hero__content {
        width: calc(100% - 48px) !important;
        max-width: none !important;

        margin-right: 24px !important;
        margin-left: 24px !important;
    }

    .granum-header {
        right: 24px !important;
        left: 24px !important;

        width: auto !important;
    }
}

/*
 * Мобильная версия.
 * Первый экран и хедер используют одинаковые отступы 16px.
 */
@media (max-width: 767px) {
    .granum-hero__content {
        right: auto !important;
        left: auto !important;

        width: calc(100% - 32px) !important;
        max-width: none !important;

        margin-right: 16px !important;
        margin-left: 16px !important;

        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .granum-header {
        right: 16px !important;
        left: 16px !important;

        width: auto !important;
        max-width: none !important;

        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .granum-hero__title,
    .granum-hero__subtitle,
    .granum-hero__description,
    .granum-hero__actions,
    .granum-hero__facts {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 390px) {
    .granum-header {
        right: 10px !important;
        left: 10px !important;
    }
}

/* GRANUM HERO SHELL ALIGNMENT END */

/* GRANUM FACT ICONS HEADER CLEANUP START */

.granum-header {
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.granum-brand__mark {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.granum-navigation a {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Сам контейнер фактов не раздуваем */
.granum-hero__facts {
    width: 100% !important;
    max-width: 980px !important;
    gap: 18px !important;
    margin-top: 22px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Размеры плашек оставляем компактными */
.granum-hero__facts article {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(99, 79, 156, 0.10) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    box-shadow: 0 8px 24px rgba(62, 45, 102, 0.04) !important;
}

.granum-hero__fact-icon {
    display: grid !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #634f9c !important;
    background: rgba(99, 79, 156, 0.10) !important;
}

.granum-hero__fact-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

.granum-hero__fact-copy {
    display: block !important;
    min-width: 0 !important;
}

.granum-hero__fact-copy strong {
    display: block !important;
    margin: 0 !important;
    color: #634f9c !important;
    font-size: clamp(18px, 1.2vw, 24px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
}

.granum-hero__fact-copy > span {
    display: block !important;
    margin-top: 4px !important;
    color: rgba(67, 59, 82, 0.72) !important;
    font-size: clamp(11px, 0.8vw, 14px) !important;
    line-height: 1.22 !important;
}

/* CTA в шапке не трогаем */
.granum-header__button {
    box-shadow: 0 12px 28px rgba(99, 79, 156, 0.20) !important;
}

/* Планшет */
@media (max-width: 1080px) {
    .granum-hero__facts {
        gap: 14px !important;
    }

    .granum-hero__facts article {
        min-height: 68px !important;
        padding: 11px 14px !important;
    }
}

/* Мобилка */
@media (max-width: 767px) {
    .granum-header {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .granum-hero__facts {
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }

    .granum-hero__facts::-webkit-scrollbar {
        display: none !important;
    }

    .granum-hero__facts article {
        min-width: 210px !important;
        min-height: 64px !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
    }

    .granum-hero__fact-icon {
        width: 28px !important;
        height: 28px !important;
        flex-basis: 28px !important;
        border-radius: 9px !important;
    }

    .granum-hero__fact-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    .granum-hero__fact-copy strong {
        font-size: 17px !important;
    }

    .granum-hero__fact-copy > span {
        font-size: 11px !important;
        margin-top: 3px !important;
    }
}

/* GRANUM FACT ICONS HEADER CLEANUP END */



/* GRANUM HERO FACT TILES START */

/*
Новая верстка нижних плиток первого экрана.
Тексты и HTML не изменяются.
*/

.granum-hero__facts {
    display: grid !important;
    width: min(100%, 840px) !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    gap: 13px !important;
    overflow: visible !important;
    margin: 31px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.granum-hero__facts article {
    position: relative;
    display: grid !important;
    min-width: 0;
    min-height: 104px;
    grid-template-columns:
        50px minmax(0, 1fr);
    grid-template-rows:
        auto auto;
    align-content: center;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    overflow: hidden;
    padding: 18px 17px !important;
    border:
        1px solid rgba(99, 79, 156, 0.13) !important;
    border-radius: 20px !important;
    color: #211b32;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(169, 142, 219, 0.16),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            rgba(247, 243, 251, 0.82)
        ) !important;
    box-shadow:
        0 17px 42px rgba(62, 43, 101, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 260ms ease,
        box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.granum-hero__facts article + article {
    border-left:
        1px solid rgba(99, 79, 156, 0.13) !important;
}

/* Иконки */

.granum-hero__facts article::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 3;
    display: block;
    width: 50px;
    height: 50px;
    border:
        1px solid rgba(99, 79, 156, 0.13);
    border-radius: 16px;
    background-color:
        rgba(99, 79, 156, 0.08);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 23px 23px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* 9+ лет */

.granum-hero__facts article:nth-child(1)::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23634f9c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5l3.5 2'/%3E%3Cpath d='M8 3.8 6.7 2.5M16 3.8l1.3-1.3'/%3E%3C/svg%3E");
}

/* 5000+ выпускников */

.granum-hero__facts article:nth-child(2)::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23634f9c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-5 9 5-9 5-9-5Z'/%3E%3Cpath d='M7 12.2v4.1c2.9 2.1 7.1 2.1 10 0v-4.1'/%3E%3Cpath d='M21 9v5'/%3E%3C/svg%3E");
}

/* С любого уровня */

.granum-hero__facts article:nth-child(3)::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23634f9c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18V9'/%3E%3Cpath d='M12 18V5'/%3E%3Cpath d='M19 18v-6'/%3E%3Cpath d='m4 7 4-3 4 3 4-3 4 3'/%3E%3C/svg%3E");
}

/* Главные значения */

.granum-hero__facts strong {
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: 0;
    margin: 0 !important;
    color: #211b32 !important;
    font-size:
        clamp(21px, 1.55vw, 27px) !important;
    font-weight: 850 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
    text-wrap: balance;
}

/* Подписи */

.granum-hero__facts span {
    grid-column: 2;
    grid-row: 2;
    display: block;
    min-width: 0;
    margin: 0;
    color:
        rgba(33, 27, 50, 0.61) !important;
    font-size: 12px !important;
    font-weight: 590;
    line-height: 1.38 !important;
    text-wrap: pretty;
}

/* Микроакцент справа */

.granum-hero__facts article::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 16px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        rgba(99, 79, 156, 0.30);
    box-shadow:
        0 0 0 5px rgba(99, 79, 156, 0.055);
}

/* Hover */

@media (hover: hover) {
    .granum-hero__facts article:hover {
        border-color:
            rgba(99, 79, 156, 0.27) !important;
        box-shadow:
            0 23px 52px rgba(62, 43, 101, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
        transform: translateY(-4px);
    }
}

/* Средние экраны */

@media (max-width: 1180px) {
    .granum-hero__facts {
        width: min(100%, 760px) !important;
        gap: 10px !important;
    }

    .granum-hero__facts article {
        min-height: 96px;
        grid-template-columns:
            44px minmax(0, 1fr);
        column-gap: 11px;
        padding: 15px 14px !important;
        border-radius: 18px !important;
    }

    .granum-hero__facts article::before {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background-size: 20px 20px;
    }

    .granum-hero__facts strong {
        font-size:
            clamp(18px, 1.7vw, 23px) !important;
    }

    .granum-hero__facts span {
        font-size: 11px !important;
    }
}

/* Планшет */

@media (max-width: 820px) {
    .granum-hero__facts {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .granum-hero__facts article {
        min-height: 132px;
        grid-template-columns: 1fr;
        grid-template-rows:
            43px auto auto;
        align-content: start;
        row-gap: 6px;
        padding: 14px !important;
    }

    .granum-hero__facts article::before {
        grid-column: 1;
        grid-row: 1;
        width: 43px;
        height: 43px;
    }

    .granum-hero__facts strong {
        grid-column: 1;
        grid-row: 2;
        margin-top: 3px !important;
    }

    .granum-hero__facts span {
        grid-column: 1;
        grid-row: 3;
    }
}

/* Телефон */

@media (max-width: 620px) {
    .granum-hero__facts {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 25px !important;
    }

    .granum-hero__facts article {
        min-height: 82px;
        grid-template-columns:
            46px minmax(0, 1fr);
        grid-template-rows:
            auto auto;
        align-content: center;
        column-gap: 13px;
        row-gap: 3px;
        padding: 14px 15px !important;
        border-radius: 17px !important;
    }

    .granum-hero__facts article::before {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 46px;
        height: 46px;
    }

    .granum-hero__facts strong {
        grid-column: 2;
        grid-row: 1;
        margin: 0 !important;
        font-size: 21px !important;
    }

    .granum-hero__facts span {
        grid-column: 2;
        grid-row: 2;
        font-size: 12px !important;
    }

    .granum-hero__facts article::after {
        top: 14px;
        right: 14px;
    }
}

/* Анимации отключаются для reduced motion */

@media (prefers-reduced-motion: reduce) {
    .granum-hero__facts article {
        transition: none !important;
        transform: none !important;
    }
}

/* GRANUM HERO FACT TILES END */

/* GRANUM PERFORMANCE HOTFIX V2 START */

/*
Исправление чёрных и пустых экранов при быстром скролле.

content-visibility и пауза целых секций отключены.
Оптимизация книги и ленивая карта сохранены.
Блюры первого экрана возвращены.
*/

/* =========================================================
   ВСЕ СЕКЦИИ ВСЕГДА ОТРИСОВЫВАЮТСЯ
   ========================================================= */

#programs,
#advantages,
#why-granum,
#results,
#testing,
#formats,
#international-exams,
#student-stories,
#faq,
#final-contact {
    content-visibility:
        visible !important;
    contain-intrinsic-size:
        none !important;
}

.granum-section-far,
.granum-section-far *,
html.granum-page-hidden
.granum-section-far,
html.granum-page-hidden
.granum-section-far * {
    animation-play-state:
        running !important;
}

/* =========================================================
   ВОЗВРАЩАЕМ БЛЮРЫ ПЕРВОГО ЭКРАНА
   ========================================================= */

.granum-header {
    -webkit-backdrop-filter:
        blur(14px) saturate(1.08) !important;
    backdrop-filter:
        blur(14px) saturate(1.08) !important;
}

.granum-hero__content {
    -webkit-backdrop-filter:
        blur(18px) saturate(1.06) !important;
    backdrop-filter:
        blur(18px) saturate(1.06) !important;
    box-shadow:
        0 24px 68px rgba(43, 29, 74, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.97)
        !important;
}

.granum-hero__facts,
.granum-hero__facts article {
    -webkit-backdrop-filter:
        blur(14px) saturate(1.05) !important;
    backdrop-filter:
        blur(14px) saturate(1.05) !important;
}

/* Первый экран не переводим в low-power без блюров */

html.granum-low-power
.granum-header {
    -webkit-backdrop-filter:
        blur(12px) saturate(1.06) !important;
    backdrop-filter:
        blur(12px) saturate(1.06) !important;
}

html.granum-low-power
.granum-hero__content {
    -webkit-backdrop-filter:
        blur(15px) saturate(1.05) !important;
    backdrop-filter:
        blur(15px) saturate(1.05) !important;
}

html.granum-low-power
.granum-hero__facts,
html.granum-low-power
.granum-hero__facts article {
    -webkit-backdrop-filter:
        blur(11px) saturate(1.04) !important;
    backdrop-filter:
        blur(11px) saturate(1.04) !important;
}

/* =========================================================
   БЕЗОПАСНАЯ ОПТИМИЗАЦИЯ КНИГИ
   ========================================================= */

.granum-real-book {
    contain:
        layout style;
}

.granum-real-book__spread {
    contain:
        layout style;
}

.granum-real-book__ground-shadow {
    right:
        7% !important;
    bottom:
        -31px !important;
    left:
        7% !important;
    height:
        66px !important;
    background:
        radial-gradient(
            ellipse at center,
            rgba(39, 25, 59, 0.22) 0%,
            rgba(39, 25, 59, 0.10) 42%,
            rgba(39, 25, 59, 0) 74%
        ) !important;
    filter:
        none !important;
    opacity:
        0.82;
    transform:
        none !important;
}

.granum-real-book__cover {
    box-shadow:
        0 23px 58px rgba(47, 31, 75, 0.14),
        inset 0 1px rgba(255, 255, 255, 0.96)
        !important;
}

.granum-real-book__leaf {
    will-change:
        auto !important;
    transition:
        transform 760ms
        cubic-bezier(0.62, 0.02, 0.27, 1)
        !important;
    filter:
        none !important;
}

.granum-exams-turn.is-turning
.granum-real-book__leaf {
    will-change:
        transform !important;
}

.granum-exams-turn.is-turning-forward
.granum-real-book__leaf,
.granum-exams-turn.is-turning-back
.granum-real-book__leaf {
    filter:
        none !important;
}

.granum-exams-turn.is-turning
.granum-real-book__page--base-left,
.granum-exams-turn.is-turning
.granum-real-book__page--base-right {
    filter:
        none !important;
}

.granum-real-book__leaf-face--front,
.granum-real-book__leaf-face--back {
    box-shadow:
        inset 0 0 0 1px rgba(99, 79, 156, 0.06)
        !important;
}

.granum-real-book__page-corner {
    filter:
        none !important;
    opacity:
        0.55 !important;
}

.granum-exams-turn__glow {
    filter:
        none !important;
    opacity:
        0.14 !important;
}

/* =========================================================
   ЛЕНИВАЯ КАРТА
   ========================================================= */

iframe[data-granum-lazy-map] {
    display:
        block;
    width:
        100%;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(169, 142, 219, 0.16),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #f8f5fb,
            #eee8f5
        );
}

iframe[data-granum-lazy-map][data-map-state="loaded"] {
    opacity:
        1;
    background:
        #f7f4fb;
}

/* =========================================================
   МОБИЛЬНЫЕ
   ========================================================= */

@media (max-width: 760px) {
    .granum-header {
        -webkit-backdrop-filter:
            blur(10px) saturate(1.05) !important;
        backdrop-filter:
            blur(10px) saturate(1.05) !important;
    }

    .granum-hero__content {
        -webkit-backdrop-filter:
            blur(12px) saturate(1.04) !important;
        backdrop-filter:
            blur(12px) saturate(1.04) !important;
    }

    .granum-hero__facts,
    .granum-hero__facts article {
        -webkit-backdrop-filter:
            blur(9px) saturate(1.03) !important;
        backdrop-filter:
            blur(9px) saturate(1.03) !important;
    }

    .granum-real-book__ground-shadow {
        display:
            none !important;
    }

    .granum-real-book__leaf {
        will-change:
            auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .granum-real-book__leaf {
        transition:
            none !important;
        will-change:
            auto !important;
    }
}

/* GRANUM PERFORMANCE HOTFIX V2 END */

/* GRANUM GSAP SMOOTH V4 START */

/*
GSAP и canvas первого экрана включены.

Stage Lock, MutationObserver и принудительная
блокировка прокрутки не используются.

content-visibility не используется.
*/

/* =========================================================
   ВЕРХНЯЯ СЕКЦИЯ БЕЗ BLUR И BOX-SHADOW
   ========================================================= */

.granum-header,
.granum-header *,
.granum-hero,
.granum-hero *,
.granum-hero__content,
.granum-hero__facts,
.granum-hero__facts article {
    -webkit-backdrop-filter:
        none !important;
    backdrop-filter:
        none !important;
}

.granum-header,
.granum-hero,
.granum-hero__content,
.granum-hero__facts,
.granum-hero__facts article,
.granum-hero__eyebrow {
    box-shadow:
        none !important;
    text-shadow:
        none !important;
}

.granum-header {
    background:
        rgba(255, 255, 255, 0.97) !important;
    border-bottom:
        1px solid rgba(99, 79, 156, 0.10) !important;
}

.granum-hero__content {
    background:
        rgba(255, 255, 255, 0.94) !important;
}

/* Canvas снова видим */

.granum-hero__canvas,
#granum-hero-canvas,
.granum-hero canvas {
    display:
        block !important;
    opacity:
        1 !important;
    visibility:
        visible !important;
    pointer-events:
        none !important;
    filter:
        none !important;
    box-shadow:
        none !important;
}

.granum-hero__poster,
#granum-hero-poster {
    display:
        block;
    box-shadow:
        none !important;
    filter:
        none !important;
}

/* =========================================================
   НЕ ИСПОЛЬЗУЕМ CONTENT-VISIBILITY
   ========================================================= */

#programs,
#advantages,
#why-granum,
#results,
#testing,
#formats,
#international-exams,
#student-stories,
#faq,
#final-contact {
    content-visibility:
        visible !important;
    contain-intrinsic-size:
        none !important;
}

/* =========================================================
   НИЖНИЕ СЕКЦИИ БЕЗ ДОРОГОГО BACKDROP-FILTER
   ========================================================= */

#programs *,
#advantages *,
#why-granum *,
#results *,
#testing *,
#formats *,
#international-exams *,
#student-stories *,
#faq *,
#final-contact * {
    -webkit-backdrop-filter:
        none !important;
    backdrop-filter:
        none !important;
}

/*
Убираем GPU-размытие фоновых пятен.
Сами градиенты и цвета остаются.
*/

#programs [class*="__glow"],
#programs [class*="__blur"],
#advantages [class*="__glow"],
#advantages [class*="__blur"],
#why-granum [class*="__glow"],
#why-granum [class*="__blur"],
#results [class*="__glow"],
#results [class*="__blur"],
#testing [class*="__glow"],
#testing [class*="__blur"],
#formats [class*="__glow"],
#formats [class*="__blur"],
#international-exams [class*="__glow"],
#international-exams [class*="__blur"],
#student-stories [class*="__glow"],
#student-stories [class*="__blur"],
#faq [class*="__glow"],
#faq [class*="__blur"],
#final-contact [class*="__glow"],
#final-contact [class*="__blur"] {
    filter:
        none !important;
    opacity:
        0.17 !important;
}

/* =========================================================
   АНИМАЦИИ ТОЛЬКО TRANSFORM И OPACITY
   ========================================================= */

#programs article,
#programs [class*="card"],
#advantages article,
#advantages [class*="card"],
#why-granum article,
#why-granum [class*="card"],
#results article,
#results [class*="card"],
#testing article,
#testing [class*="card"],
#formats article,
#formats [class*="card"],
#international-exams article,
#international-exams [class*="card"],
#student-stories article,
#student-stories [class*="card"],
#faq article,
#faq [class*="item"],
#final-contact article,
#final-contact [class*="card"] {
    transition-property:
        transform,
        opacity,
        color,
        background-color,
        border-color !important;
}

/*
will-change включается JavaScript только у реально
движущихся элементов и снимается после завершения.
*/

.granum-gsap-active {
    will-change:
        transform,
        opacity !important;
    backface-visibility:
        hidden;
    -webkit-backface-visibility:
        hidden;
}

.granum-gsap-idle {
    will-change:
        auto !important;
}

/* =========================================================
   КНИГА
   ========================================================= */

.granum-real-book__ground-shadow {
    background:
        radial-gradient(
            ellipse at center,
            rgba(39, 25, 59, 0.21) 0%,
            rgba(39, 25, 59, 0.08) 45%,
            transparent 75%
        ) !important;
    filter:
        none !important;
}

.granum-real-book__leaf {
    will-change:
        auto !important;
    filter:
        none !important;
    transition:
        transform 720ms
        cubic-bezier(0.62, 0.02, 0.27, 1)
        !important;
}

.granum-exams-turn.is-turning
.granum-real-book__leaf {
    will-change:
        transform !important;
}

.granum-exams-turn.is-turning-forward
.granum-real-book__leaf,
.granum-exams-turn.is-turning-back
.granum-real-book__leaf {
    filter:
        none !important;
}

.granum-exams-turn.is-turning
.granum-real-book__page--base-left,
.granum-exams-turn.is-turning
.granum-real-book__page--base-right {
    filter:
        none !important;
}

/* =========================================================
   СКРЫТАЯ ВКЛАДКА
   ========================================================= */

html.granum-tab-hidden
.granum-hero canvas {
    visibility:
        hidden !important;
}

/* =========================================================
   МОБИЛЬНЫЕ
   ========================================================= */

@media (max-width: 1024px) {
    #programs *,
    #advantages *,
    #why-granum *,
    #results *,
    #testing *,
    #formats *,
    #international-exams *,
    #student-stories *,
    #faq *,
    #final-contact * {
        -webkit-backdrop-filter:
            none !important;
        backdrop-filter:
            none !important;
    }

    #programs [class*="__glow"],
    #advantages [class*="__glow"],
    #why-granum [class*="__glow"],
    #results [class*="__glow"],
    #testing [class*="__glow"],
    #formats [class*="__glow"],
    #international-exams [class*="__glow"],
    #student-stories [class*="__glow"],
    #faq [class*="__glow"],
    #final-contact [class*="__glow"] {
        display:
            none !important;
    }
}

@media (max-width: 760px) {
    .granum-real-book__ground-shadow {
        display:
            none !important;
    }

    .granum-real-book__leaf {
        will-change:
            auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .granum-gsap-active {
        will-change:
            auto !important;
    }
}

/* GRANUM GSAP SMOOTH V4 END */

/* GRANUM HERO FACT ICON FIX V5 START */

/*
Белый квадрат создавался через article::before.
Псевдоэлемент полностью отключён.
Иконка выводится только через span.granum-hero__fact-icon.
*/

.granum-hero__facts article::before {
    content:
        none !important;
    display:
        none !important;
    width:
        0 !important;
    height:
        0 !important;
    border:
        0 !important;
    background:
        none !important;
    box-shadow:
        none !important;
    opacity:
        0 !important;
}

.granum-hero__fact-icon {
    position:
        relative !important;
    display:
        grid !important;
    width:
        42px !important;
    height:
        42px !important;
    min-width:
        42px !important;
    flex:
        0 0 42px !important;
    place-items:
        center !important;
    margin:
        0 !important;
    border:
        1px solid rgba(99, 79, 156, 0.14) !important;
    border-radius:
        13px !important;
    color:
        #634f9c !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(239, 234, 248, 0.94)
        ) !important;
    box-shadow:
        none !important;
    filter:
        none !important;
    transform:
        none !important;
}

.granum-hero__fact-icon::before,
.granum-hero__fact-icon::after {
    content:
        none !important;
    display:
        none !important;
}

.granum-hero__fact-icon svg {
    display:
        block !important;
    width:
        19px !important;
    height:
        19px !important;
    color:
        inherit !important;
    fill:
        none !important;
    stroke:
        currentColor !important;
    stroke-width:
        1.7 !important;
    stroke-linecap:
        round !important;
    stroke-linejoin:
        round !important;
}

.granum-hero__facts article {
    align-items:
        center !important;
}

@media (max-width: 767px) {
    .granum-hero__fact-icon {
        width:
            38px !important;
        height:
            38px !important;
        min-width:
            38px !important;
        flex-basis:
            38px !important;
        border-radius:
            12px !important;
    }

    .granum-hero__fact-icon svg {
        width:
            17px !important;
        height:
            17px !important;
    }
}

/* GRANUM HERO FACT ICON FIX V5 END */

/* GRANUM HERO TRANSPARENT V6 START */

/*
Полностью убираем белый фон шапки
и основного контейнера первого экрана.
*/

.granum-header,
.granum-hero__content {
    background:
        transparent !important;
    background-color:
        transparent !important;
    background-image:
        none !important;
    box-shadow:
        none !important;
    filter:
        none !important;
    -webkit-backdrop-filter:
        none !important;
    backdrop-filter:
        none !important;
}

.granum-header {
    border:
        0 !important;
    border-bottom:
        0 !important;
}

.granum-hero__content {
    border-color:
        transparent !important;
}

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

.granum-header::before,
.granum-header::after,
.granum-hero__content::before,
.granum-hero__content::after {
    background:
        transparent !important;
    background-color:
        transparent !important;
    background-image:
        none !important;
    box-shadow:
        none !important;
    filter:
        none !important;
    -webkit-backdrop-filter:
        none !important;
    backdrop-filter:
        none !important;
}

/*
Текст, кнопки, иконки, факты и canvas не меняются.
*/

.granum-header__inner,
.granum-hero__content > * {
    position:
        relative;
    z-index:
        2;
}

/* GRANUM HERO TRANSPARENT V6 END */

/* GRANUM NATURAL LAYOUT V12 START */

:root {
    --granum-shell-max:
        1264px;

    --granum-page-gutter:
        clamp(24px, 3vw, 52px);

    --granum-shell-left:
        max(
            var(--granum-page-gutter),
            calc(
                (
                    100vw
                    - var(--granum-shell-max)
                )
                / 2
            )
        );

    --granum-mobile-visual:
        clamp(300px, 44svh, 410px);
}

/* =========================================================
   НИКАКОГО SCALE ДЛЯ DESKTOP-КОНТЕНТА
   ========================================================= */

.granum-header,
.granum-header *,
.granum-hero__content,
.granum-hero__content *,
.granum-hero__facts,
.granum-hero__facts article {
    scale:
        none !important;
}

.granum-header,
.granum-hero__content,
.granum-hero__facts {
    transform:
        none !important;

    translate:
        none !important;

    rotate:
        none !important;

    transform-origin:
        initial !important;
}

/* =========================================================
   HERO БЕЗ BLUR
   ========================================================= */

.granum-hero,
.granum-hero__stage,
.granum-hero__poster,
.granum-hero__canvas,
.granum-hero__shade,
#granum-hero-stage,
#granum-hero-poster,
#granum-hero-canvas {
    filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}

.granum-header,
.granum-hero__content,
.granum-hero__facts,
.granum-hero__facts article {
    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}

/* =========================================================
   НАТУРАЛЬНЫЙ DESKTOP, БЕЗ СПЛЮЩИВАНИЯ
   ========================================================= */

@media (min-width: 1200px) {

    .granum-hero {
        min-height:
            max(900px, 100svh) !important;

        overflow:
            hidden !important;

        background:
            #ffffff !important;
    }

    .granum-header {
        top:
            0 !important;

        right:
            var(--granum-shell-left)
            !important;

        left:
            var(--granum-shell-left)
            !important;

        width:
            auto !important;

        max-width:
            var(--granum-shell-max)
            !important;

        box-sizing:
            border-box !important;

        margin:
            0 !important;

        padding:
            11px 24px !important;

        border:
            0 !important;

        border-bottom:
            1px solid rgba(99, 79, 156, 0.10)
            !important;

        border-radius:
            0 0 18px 18px !important;

        background:
            rgba(255, 255, 255, 0.18)
            !important;

        box-shadow:
            none !important;
    }

    .granum-hero__content {
        position:
            absolute !important;

        z-index:
            20 !important;

        top:
            clamp(150px, 18vh, 188px)
            !important;

        right:
            auto !important;

        bottom:
            auto !important;

        left:
            var(--granum-shell-left)
            !important;

        width:
            720px !important;

        max-width:
            720px !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        box-sizing:
            border-box !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            visible !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        background-color:
            transparent !important;

        background-image:
            none !important;

        box-shadow:
            none !important;
    }

    .granum-hero__eyebrow {
        margin:
            0 0 20px !important;
    }

    .granum-hero__title {
        width:
            680px !important;

        max-width:
            680px !important;

        margin:
            0 !important;

        font-size:
            92px !important;

        line-height:
            0.90 !important;

        letter-spacing:
            -0.062em !important;
    }

    .granum-hero__subtitle {
        width:
            600px !important;

        max-width:
            600px !important;

        margin:
            24px 0 0 !important;

        font-size:
            26px !important;

        line-height:
            1.22 !important;
    }

    .granum-hero__description {
        width:
            580px !important;

        max-width:
            580px !important;

        margin:
            17px 0 0 !important;

        font-size:
            16px !important;

        line-height:
            1.48 !important;
    }

    .granum-hero__actions {
        gap:
            11px !important;

        margin:
            24px 0 0 !important;
    }

    .granum-hero__actions
    .granum-button {
        min-height:
            52px !important;

        padding-inline:
            23px !important;

        border-radius:
            13px !important;

        font-size:
            14px !important;
    }

    .granum-hero__facts {
        width:
            718px !important;

        max-width:
            718px !important;

        margin:
            26px 0 0 !important;
    }
}

/* =========================================================
   НОУТБУКИ 1200-1479
   РАЗМЕРЫ НЕМНОГО КОМПАКТНЕЕ, НО БЕЗ SCALE
   ========================================================= */

@media
    (min-width: 1200px)
    and (max-width: 1479px) {

    :root {
        --granum-page-gutter:
            clamp(28px, 3.7vw, 52px);
    }

    .granum-hero {
        min-height:
            880px !important;
    }

    .granum-hero__content {
        top:
            138px !important;

        width:
            690px !important;

        max-width:
            690px !important;
    }

    .granum-hero__title {
        width:
            660px !important;

        max-width:
            660px !important;

        font-size:
            82px !important;
    }

    .granum-hero__subtitle {
        margin-top:
            20px !important;

        font-size:
            23px !important;
    }

    .granum-hero__description {
        margin-top:
            14px !important;

        font-size:
            15px !important;
    }

    .granum-hero__actions {
        margin-top:
            20px !important;
    }

    .granum-hero__facts {
        width:
            690px !important;

        max-width:
            690px !important;

        margin-top:
            21px !important;
    }
}

/* =========================================================
   ПЛАНШЕТ И ОЧЕНЬ МАЛЕНЬКИЙ DESKTOP
   ========================================================= */

@media
    (min-width: 768px)
    and (max-width: 1199px) {

    :root {
        --granum-page-gutter:
            24px;
    }

    .granum-hero {
        min-height:
            850px !important;
    }

    .granum-header {
        top:
            0 !important;

        right:
            20px !important;

        left:
            20px !important;

        width:
            auto !important;

        max-width:
            none !important;

        padding:
            10px 18px !important;
    }

    .granum-navigation {
        display:
            none !important;
    }

    .granum-hero__content {
        position:
            absolute !important;

        z-index:
            20 !important;

        top:
            132px !important;

        right:
            auto !important;

        left:
            24px !important;

        width:
            min(650px, calc(100vw - 48px))
            !important;

        max-width:
            650px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }

    .granum-hero__title {
        font-size:
            clamp(62px, 7.5vw, 78px)
            !important;

        line-height:
            0.91 !important;
    }

    .granum-hero__subtitle {
        max-width:
            570px !important;

        font-size:
            22px !important;
    }

    .granum-hero__description {
        max-width:
            550px !important;

        font-size:
            15px !important;
    }

    .granum-hero__facts {
        width:
            min(650px, 100%) !important;
    }
}

/* =========================================================
   ПЛИТКИ И ИКОНКИ HERO
   ========================================================= */

.granum-hero__facts {
    display:
        grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        !important;

    gap:
        11px !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

.granum-hero__facts article {
    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        42px minmax(0, 1fr)
        !important;

    align-items:
        center !important;

    column-gap:
        12px !important;

    min-width:
        0 !important;

    min-height:
        98px !important;

    box-sizing:
        border-box !important;

    padding:
        13px 15px !important;

    overflow:
        hidden !important;

    border:
        1px solid rgba(99, 79, 156, 0.13)
        !important;

    border-radius:
        16px !important;

    background:
        rgba(255, 255, 255, 0.76)
        !important;

    box-shadow:
        none !important;
}

.granum-hero__facts article::before,
.granum-hero__facts article::after {
    content:
        none !important;

    display:
        none !important;
}

.granum-hero__fact-icon {
    position:
        static !important;

    inset:
        auto !important;

    grid-column:
        1 !important;

    grid-row:
        1 !important;

    display:
        grid !important;

    width:
        42px !important;

    height:
        42px !important;

    min-width:
        42px !important;

    min-height:
        42px !important;

    place-items:
        center !important;

    align-self:
        center !important;

    justify-self:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    color:
        #634f9c !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    filter:
        none !important;

    transform:
        none !important;

    translate:
        none !important;

    rotate:
        none !important;

    scale:
        none !important;
}

.granum-hero__fact-icon::before,
.granum-hero__fact-icon::after {
    content:
        none !important;

    display:
        none !important;
}

.granum-hero__fact-icon svg {
    display:
        block !important;

    width:
        22px !important;

    height:
        22px !important;

    margin:
        0 !important;

    fill:
        none !important;

    stroke:
        currentColor !important;

    stroke-width:
        1.75 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;

    transform:
        none !important;
}

.granum-hero__fact-copy {
    position:
        static !important;

    grid-column:
        2 !important;

    grid-row:
        1 !important;

    display:
        flex !important;

    min-width:
        0 !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        none !important;

    translate:
        none !important;

    rotate:
        none !important;

    scale:
        none !important;
}

.granum-hero__fact-copy strong {
    display:
        block !important;

    margin:
        0 0 4px !important;

    color:
        #211b32 !important;

    font-size:
        21px !important;

    font-weight:
        820 !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -0.035em !important;
}

.granum-hero__fact-copy span {
    display:
        block !important;

    margin:
        0 !important;

    color:
        rgba(33, 27, 50, 0.57)
        !important;

    font-size:
        10px !important;

    line-height:
        1.28 !important;
}

/* =========================================================
   ЕДИНЫЕ ОТСТУПЫ ВСЕХ СЕКЦИЙ
   ========================================================= */

.granum-programs__container,
.granum-advantages__container,
.granum-why__container,
.granum-results__container,
.granum-testing__container,
.granum-learning-path__container,
.granum-exams-turn__container,
.granum-student-stories__container,
.granum-faq__container,
.granum-final-contact__container {
    width:
        min(
            var(--granum-shell-max),
            calc(
                100%
                - (
                    var(--granum-page-gutter)
                    * 2
                )
            )
        )
        !important;

    max-width:
        var(--granum-shell-max)
        !important;

    box-sizing:
        border-box !important;

    margin-right:
        auto !important;

    margin-left:
        auto !important;

    padding-right:
        0 !important;

    padding-left:
        0 !important;
}

/* =========================================================
   ОПТИМИЗАЦИЯ ОТРИСОВКИ
   ========================================================= */

/*
Декоративные glow остаются цветными,
но больше не рассчитывают огромный blur.
*/

#programs [class*="__glow"],
#programs [class*="__blur"],
#advantages [class*="__glow"],
#advantages [class*="__blur"],
#why-granum [class*="__glow"],
#why-granum [class*="__blur"],
#results [class*="__glow"],
#results [class*="__blur"],
#testing [class*="__glow"],
#testing [class*="__blur"],
#formats [class*="__glow"],
#formats [class*="__blur"],
#international-exams [class*="__glow"],
#international-exams [class*="__blur"],
#student-stories [class*="__glow"],
#student-stories [class*="__blur"],
#faq [class*="__glow"],
#faq [class*="__blur"],
#final-contact [class*="__glow"],
#final-contact [class*="__blur"] {
    filter:
        none !important;
}

/*
На ноутбуках отключается backdrop-filter нижних секций.
Обычные фоны, градиенты и границы сохраняются.
*/

@media (max-width: 1799px) {

    #programs *,
    #advantages *,
    #why-granum *,
    #results *,
    #testing *,
    #formats *,
    #international-exams *,
    #student-stories *,
    #faq *,
    #final-contact * {
        -webkit-backdrop-filter:
            none !important;

        backdrop-filter:
            none !important;
    }
}

#programs,
#advantages,
#why-granum,
#results,
#testing,
#formats,
#international-exams,
#student-stories,
#faq,
#final-contact {
    content-visibility:
        visible !important;

    contain-intrinsic-size:
        none !important;
}

.granum-real-book,
.granum-real-book__spread {
    contain:
        layout style;
}

.granum-real-book__ground-shadow {
    filter:
        none !important;
}

.granum-real-book__leaf {
    will-change:
        auto !important;
}

.granum-exams-turn.is-turning
.granum-real-book__leaf {
    will-change:
        transform !important;
}

/* =========================================================
   HERO ВНЕ ЭКРАНА
   ========================================================= */

html.granum-hero-is-offscreen
.granum-hero canvas {
    visibility:
        hidden !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --granum-page-gutter:
            16px;
    }

    .granum-hero {
        min-height:
            0 !important;

        overflow:
            hidden !important;

        background:
            #ffffff !important;
    }

    .granum-header {
        top:
            0 !important;

        right:
            12px !important;

        left:
            12px !important;

        width:
            auto !important;

        max-width:
            none !important;

        min-height:
            62px !important;

        padding:
            8px 10px !important;

        border:
            1px solid rgba(99, 79, 156, 0.10)
            !important;

        border-radius:
            0 0 16px 16px !important;

        background:
            rgba(255, 255, 255, 0.94)
            !important;

        box-shadow:
            none !important;
    }

    .granum-hero__stage,
    #granum-hero-stage {
        position:
            absolute !important;

        z-index:
            1 !important;

        inset:
            0 0 auto !important;

        width:
            100% !important;

        height:
            var(--granum-mobile-visual)
            !important;

        min-height:
            0 !important;

        max-height:
            var(--granum-mobile-visual)
            !important;

        overflow:
            hidden !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;

        filter:
            none !important;
    }

    /*
    На мобильном остаётся фоновый poster.
    GSAP canvas не рисуется и не создаёт дубликат.
    */

    .granum-hero__canvas,
    #granum-hero-canvas,
    .granum-hero canvas {
        display:
            none !important;

        visibility:
            hidden !important;

        opacity:
            0 !important;

        pointer-events:
            none !important;
    }

    .granum-hero__poster,
    #granum-hero-poster {
        position:
            absolute !important;

        z-index:
            1 !important;

        inset:
            0 !important;

        display:
            block !important;

        width:
            100% !important;

        height:
            100% !important;

        max-width:
            none !important;

        max-height:
            none !important;

        object-fit:
            cover !important;

        object-position:
            center center !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;

        filter:
            none !important;

        transform:
            none !important;
    }

    html.granum-mobile-canvas-ready
    .granum-hero__poster,
    html.granum-mobile-canvas-ready
    #granum-hero-poster {
        display:
            block !important;

        visibility:
            visible !important;

        opacity:
            1 !important;
    }

    .granum-hero__shade {
        z-index:
            3 !important;

        display:
            block !important;

        opacity:
            1 !important;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0) 56%,
                rgba(255, 255, 255, 0.70) 76%,
                #ffffff 100%
            )
            !important;

        filter:
            none !important;
    }

    .granum-hero__content {
        position:
            relative !important;

        z-index:
            20 !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        width:
            calc(100% - 32px)
            !important;

        max-width:
            none !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        margin:
            0 auto !important;

        padding:
            calc(
                var(--granum-mobile-visual)
                - 28px
            )
            0
            28px
            !important;

        overflow:
            visible !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }

    .granum-hero__title {
        width:
            auto !important;

        max-width:
            none !important;

        font-size:
            clamp(44px, 13vw, 60px)
            !important;

        line-height:
            0.92 !important;
    }

    .granum-hero__subtitle {
        width:
            auto !important;

        max-width:
            none !important;

        margin-top:
            16px !important;

        font-size:
            clamp(18px, 5.2vw, 22px)
            !important;
    }

    .granum-hero__description {
        width:
            auto !important;

        max-width:
            none !important;

        margin-top:
            11px !important;

        font-size:
            14px !important;

        line-height:
            1.45 !important;
    }

    .granum-hero__actions {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            9px !important;

        margin-top:
            18px !important;
    }

    .granum-hero__actions
    .granum-button {
        width:
            100% !important;

        min-height:
            50px !important;
    }

    .granum-hero__facts {
        grid-template-columns:
            1fr !important;

        gap:
            8px !important;

        width:
            100% !important;

        max-width:
            none !important;

        margin-top:
            17px !important;
    }

    .granum-hero__facts article {
        grid-template-columns:
            38px minmax(0, 1fr)
            !important;

        min-height:
            68px !important;

        padding:
            11px 13px !important;

        border-radius:
            14px !important;
    }

    .granum-hero__fact-icon {
        width:
            38px !important;

        height:
            38px !important;

        min-width:
            38px !important;

        min-height:
            38px !important;
    }

    .granum-hero__fact-icon svg {
        width:
            20px !important;

        height:
            20px !important;
    }

    .granum-hero__fact-copy strong {
        font-size:
            18px !important;
    }

    .granum-programs__container,
    .granum-advantages__container,
    .granum-why__container,
    .granum-results__container,
    .granum-testing__container,
    .granum-learning-path__container,
    .granum-exams-turn__container,
    .granum-student-stories__container,
    .granum-faq__container,
    .granum-final-contact__container {
        width:
            calc(100% - 32px)
            !important;
    }
}

@media (max-width: 420px) {

    :root {
        --granum-page-gutter:
            14px;

        --granum-mobile-visual:
            clamp(285px, 42svh, 360px);
    }

    .granum-header {
        right:
            8px !important;

        left:
            8px !important;
    }

    .granum-hero__content {
        width:
            calc(100% - 28px)
            !important;
    }

    .granum-programs__container,
    .granum-advantages__container,
    .granum-why__container,
    .granum-results__container,
    .granum-testing__container,
    .granum-learning-path__container,
    .granum-exams-turn__container,
    .granum-student-stories__container,
    .granum-faq__container,
    .granum-final-contact__container {
        width:
            calc(100% - 28px)
            !important;
    }
}

/* GRANUM NATURAL LAYOUT V12 END */

/* GRANUM FIXED 1440 V16 START */

/*
На больших экранах:
шапка и все основные контейнеры имеют
единую максимальную ширину 1440px.

GSAP, мобильная версия и внутренние сетки
не изменяются.
*/

@media (min-width: 1440px) {

    :root {
        --granum-wide-shell:
            min(
                1440px,
                calc(100vw - 48px)
            )
            !important;
    }

    .granum-header {
        right:
            auto !important;

        left:
            50% !important;

        width:
            var(--granum-wide-shell)
            !important;

        max-width:
            1440px !important;

        box-sizing:
            border-box !important;

        margin:
            0 !important;

        transform:
            translateX(-50%)
            !important;

        scale:
            none !important;
    }

    /*
    Левый край текста hero совпадает
    с левым краем шапки.
    */

    .granum-hero__content {
        left:
            calc(
                (
                    100vw
                    - var(--granum-wide-shell)
                )
                / 2
            )
            !important;

        scale:
            none !important;
    }

    /*
    Все основные секции имеют
    ту же ширину 1440px, что и шапка.
    */

    .granum-programs__container,
    .granum-advantages__container,
    .granum-why__container,
    .granum-results__container,
    .granum-testing__container,
    .granum-learning-path__container,
    .granum-exams-turn__container,
    .granum-student-stories__container,
    .granum-faq__container,
    .granum-final-contact__container {
        width:
            var(--granum-wide-shell)
            !important;

        max-width:
            1440px !important;

        box-sizing:
            border-box !important;

        margin-right:
            auto !important;

        margin-left:
            auto !important;

        padding-right:
            0 !important;

        padding-left:
            0 !important;

        scale:
            none !important;

        translate:
            none !important;
    }
}

/*
От 1504px ширины окна контейнер становится
ровно 1440px с полями минимум 32px.
*/

@media (min-width: 1504px) {

    :root {
        --granum-wide-shell:
            1440px !important;
    }
}

/* GRANUM FIXED 1440 V16 END */

/* GRANUM RESULTS VISIBLE V19 START */

/*
Класс добавляется только реальной секции результатов,
найденной JavaScript по заголовкам.
*/

.granum-results-visible-v19 {
    opacity:
        1 !important;

    visibility:
        visible !important;

    content-visibility:
        visible !important;

    contain-intrinsic-size:
        none !important;
}

.granum-results-visible-v19
[data-granum-results-v19-reset="1"] {
    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;

    translate:
        none !important;

    rotate:
        none !important;

    scale:
        none !important;

    filter:
        none !important;

    clip-path:
        none !important;

    will-change:
        auto !important;
}

/* GRANUM RESULTS VISIBLE V19 END */

/* GRANUM LEARNING PATH V20 START */

/*
Восстановление только секции:
"Как проходит обучение"
"Понятный путь от первого тестирования до результата".
*/

.granum-learning-path-visible-v20 {
    display:
        block !important;

    height:
        auto !important;

    min-height:
        1px !important;

    max-height:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    overflow:
        visible !important;

    content-visibility:
        visible !important;

    contain-intrinsic-size:
        none !important;

    clip-path:
        none !important;
}

.granum-learning-path-visible-v20
.granum-learning-path__container {
    position:
        relative !important;

    display:
        block !important;

    height:
        auto !important;

    min-height:
        1px !important;

    max-height:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    overflow:
        visible !important;

    clip-path:
        none !important;
}

.granum-learning-path-visible-v20
.granum-learning-path__head,
.granum-learning-path-visible-v20
.granum-learning-path__header,
.granum-learning-path-visible-v20
.granum-learning-path__intro,
.granum-learning-path-visible-v20
.granum-learning-path__grid,
.granum-learning-path-visible-v20
.granum-learning-path__list,
.granum-learning-path-visible-v20
.granum-learning-path__steps,
.granum-learning-path-visible-v20
.granum-learning-path__footer,
.granum-learning-path-visible-v20
.granum-learning-path__cta,
.granum-learning-path-visible-v20
article,
.granum-learning-path-visible-v20
h2,
.granum-learning-path-visible-v20
h3 {
    opacity:
        1 !important;

    visibility:
        visible !important;
}

.granum-learning-path-visible-v20
[data-granum-learning-path-v20-reset="1"] {
    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;

    translate:
        none !important;

    rotate:
        none !important;

    scale:
        none !important;

    filter:
        none !important;

    clip-path:
        none !important;

    will-change:
        auto !important;
}

/* GRANUM LEARNING PATH V20 END */

/* GRANUM WHY PHOTO CARDS V25 START */

/* =========================================================
   СЕКЦИЯ
   ========================================================= */

#why-granum.granum-why {
    position:
        relative !important;

    overflow:
        hidden !important;

    background:
        radial-gradient(
            circle at 52% 13%,
            rgba(190, 164, 237, 0.14),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #fbfaff 0%,
            #f5f1fc 100%
        )
        !important;
}

#why-granum
.granum-why__ambient {
    opacity:
        0.28 !important;
}

/* =========================================================
   DESKTOP-СЕТКА
   ========================================================= */

@media (min-width: 1100px) {

    #why-granum
    .granum-why__grid {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1.22fr)
            minmax(0, 1fr)
            minmax(0, 0.96fr)
            !important;

        grid-template-rows:
            350px
            380px
            292px
            !important;

        gap:
            20px !important;

        align-items:
            stretch !important;
    }

    #why-granum
    .granum-why-card--experience {
        grid-column:
            1 !important;

        grid-row:
            1 / 3 !important;
    }

    #why-granum
    .granum-why-card--graduates {
        grid-column:
            2 !important;

        grid-row:
            1 !important;
    }

    #why-granum
    .granum-why-card--students {
        grid-column:
            3 !important;

        grid-row:
            1 !important;
    }

    #why-granum
    .granum-why-card--teachers {
        grid-column:
            2 !important;

        grid-row:
            2 !important;
    }

    #why-granum
    .granum-why-card--feedback {
        grid-column:
            3 !important;

        grid-row:
            2 !important;
    }

    #why-granum
    .granum-why-card--cluster {
        grid-column:
            1 / 4 !important;

        grid-row:
            3 !important;
    }
}

/* =========================================================
   ОСНОВА КАРТОЧЕК
   ========================================================= */

#why-granum
.granum-why-card {
    position:
        relative !important;

    isolation:
        isolate !important;

    display:
        flex !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    box-sizing:
        border-box !important;

    flex-direction:
        column !important;

    overflow:
        hidden !important;

    border:
        1px solid rgba(99, 79, 156, 0.11)
        !important;

    border-radius:
        28px !important;

    background:
        rgba(255, 255, 255, 0.97)
        !important;

    box-shadow:
        0 18px 55px rgba(53, 38, 84, 0.075)
        !important;

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;

    transition:
        translate 0.35s cubic-bezier(.2, .8, .2, 1),
        scale 0.35s cubic-bezier(.2, .8, .2, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease
        !important;

    transform-origin:
        center center !important;
}

/*
Не задаём transform: none.
Это возвращает возможность GSAP и hover работать вместе.
*/

#why-granum
.granum-why-card::before {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        1 !important;

    inset:
        0 !important;

    display:
        block !important;

    pointer-events:
        none !important;
}

#why-granum
.granum-why-card::after {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        0 !important;

    right:
        0 !important;

    bottom:
        0 !important;

    display:
        block !important;

    width:
        var(--granum-why-photo-width, 56%)
        !important;

    height:
        var(--granum-why-photo-height, 100%)
        !important;

    background-image:
        var(--granum-why-photo)
        !important;

    background-repeat:
        no-repeat !important;

    background-position:
        var(--granum-why-photo-position, right bottom)
        !important;

    background-size:
        var(--granum-why-photo-size, contain)
        !important;

    pointer-events:
        none !important;

    transform-origin:
        right bottom !important;

    transition:
        transform 0.48s cubic-bezier(.2, .8, .2, 1),
        opacity 0.35s ease
        !important;
}

#why-granum
.granum-why-card
> * {
    position:
        relative !important;

    z-index:
        2 !important;
}

#why-granum
.granum-why-card__decor {
    display:
        none !important;
}

/* =========================================================
   HOVER И FOCUS
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    #why-granum
    .granum-why-card:hover,
    #why-granum
    .granum-why-card:focus-visible {
        translate:
            0 -8px !important;

        scale:
            1.01 !important;

        border-color:
            rgba(99, 79, 156, 0.22)
            !important;

        box-shadow:
            0 30px 78px rgba(53, 38, 84, 0.16)
            !important;
    }

    #why-granum
    .granum-why-card:hover::after,
    #why-granum
    .granum-why-card:focus-visible::after {
        transform:
            scale(1.035) !important;
    }
}

#why-granum
.granum-why-card:focus-visible {
    outline:
        3px solid rgba(116, 83, 190, 0.32)
        !important;

    outline-offset:
        4px !important;
}

/* =========================================================
   ТИПОГРАФИКА
   ========================================================= */

#why-granum
.granum-why-card__stat {
    display:
        flex !important;

    align-items:
        flex-end !important;

    gap:
        9px !important;
}

#why-granum
.granum-why-card__value {
    color:
        #674cae !important;

    font-size:
        clamp(65px, 5.1vw, 94px)
        !important;

    font-weight:
        860 !important;

    line-height:
        0.84 !important;

    letter-spacing:
        -0.068em !important;
}

#why-granum
.granum-why-card__unit {
    color:
        #171225 !important;

    font-size:
        20px !important;

    font-weight:
        830 !important;

    line-height:
        1.04 !important;

    text-transform:
        lowercase !important;
}

#why-granum
.granum-why-card__title {
    max-width:
        49% !important;

    margin:
        0 !important;

    color:
        #171225 !important;

    font-size:
        clamp(27px, 2vw, 34px)
        !important;

    font-weight:
        840 !important;

    line-height:
        1.04 !important;

    letter-spacing:
        -0.045em !important;

    text-wrap:
        balance !important;

    overflow-wrap:
        normal !important;

    word-break:
        normal !important;

    hyphens:
        none !important;
}

#why-granum
.granum-why-card__description {
    max-width:
        47% !important;

    margin:
        0 !important;

    color:
        rgba(35, 29, 51, 0.66)
        !important;

    font-size:
        15px !important;

    line-height:
        1.5 !important;

    overflow:
        visible !important;
}

#why-granum
.granum-why-card__icon {
    display:
        grid !important;

    width:
        58px !important;

    height:
        58px !important;

    min-width:
        58px !important;

    min-height:
        58px !important;

    place-items:
        center !important;

    flex:
        0 0 58px !important;

    border:
        1px solid rgba(99, 79, 156, 0.11)
        !important;

    border-radius:
        18px !important;

    color:
        #6b50b4 !important;

    background:
        rgba(255, 255, 255, 0.94)
        !important;

    box-shadow:
        none !important;
}

#why-granum
.granum-why-card__icon svg {
    display:
        block !important;

    width:
        28px !important;

    height:
        28px !important;
}

/* =========================================================
   9+ ЛЕТ
   ========================================================= */

#why-granum
.granum-why-card--experience {
    --granum-why-photo:
        url("https://granumlang.ru/wp-content/uploads/2026/07/1.png");

    --granum-why-photo-width:
        58%;

    --granum-why-photo-height:
        82%;

    --granum-why-photo-size:
        contain;

    --granum-why-photo-position:
        right bottom;

    padding:
        44px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #392169 0%,
            #472d7e 52%,
            #5d3d9d 100%
        )
        !important;
}

#why-granum
.granum-why-card--experience::before {
    background:
        linear-gradient(
            90deg,
            rgba(53, 30, 94, 0.99) 0%,
            rgba(59, 34, 105, 0.98) 42%,
            rgba(63, 37, 112, 0.78) 54%,
            rgba(68, 41, 119, 0.22) 72%,
            rgba(68, 41, 119, 0) 100%
        )
        !important;
}

#why-granum
.granum-why-card--experience
.granum-why-card__value,
#why-granum
.granum-why-card--experience
.granum-why-card__unit {
    color:
        #ffffff !important;
}

#why-granum
.granum-why-card--experience
.granum-why-card__description {
    max-width:
        48% !important;

    margin-top:
        auto !important;

    color:
        rgba(255, 255, 255, 0.80)
        !important;
}

#why-granum
.granum-why-card--experience
.granum-why-card__description::before {
    content:
        "опыта в сфере\A образования\A и развития";

    display:
        block !important;

    margin-bottom:
        25px !important;

    color:
        #ffffff !important;

    font-size:
        clamp(31px, 2.25vw, 41px)
        !important;

    font-weight:
        850 !important;

    line-height:
        1.04 !important;

    letter-spacing:
        -0.047em !important;

    white-space:
        pre-line !important;

    text-wrap:
        balance !important;
}

/* =========================================================
   5000+ И 600+
   ========================================================= */

#why-granum
.granum-why-card--graduates,
#why-granum
.granum-why-card--students {
    padding:
        34px !important;
}

#why-granum
.granum-why-card--graduates {
    --granum-why-photo:
        url("https://granumlang.ru/wp-content/uploads/2026/07/2.png");

    --granum-why-photo-width:
        53%;

    --granum-why-photo-height:
        83%;

    --granum-why-photo-position:
        right bottom;

    --granum-why-photo-size:
        contain;
}

#why-granum
.granum-why-card--students {
    --granum-why-photo:
        url("https://granumlang.ru/wp-content/uploads/2026/07/2.png");

    --granum-why-photo-width:
        55%;

    --granum-why-photo-height:
        83%;

    --granum-why-photo-position:
        right bottom;

    --granum-why-photo-size:
        contain;
}

#why-granum
.granum-why-card--graduates::before,
#why-granum
.granum-why-card--students::before {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 39%,
            rgba(255, 255, 255, 0.95) 49%,
            rgba(255, 255, 255, 0.55) 61%,
            rgba(255, 255, 255, 0.08) 78%,
            rgba(255, 255, 255, 0) 100%
        )
        !important;
}

#why-granum
.granum-why-card--graduates
.granum-why-card__stat,
#why-granum
.granum-why-card--students
.granum-why-card__stat {
    align-items:
        flex-start !important;

    flex-direction:
        column !important;

    gap:
        10px !important;
}

#why-granum
.granum-why-card--graduates
.granum-why-card__unit,
#why-granum
.granum-why-card--students
.granum-why-card__unit {
    display:
        block !important;

    font-size:
        19px !important;

    line-height:
        1 !important;
}

#why-granum
.granum-why-card--graduates
.granum-why-card__description,
#why-granum
.granum-why-card--students
.granum-why-card__description {
    max-width:
        45% !important;

    margin-top:
        auto !important;
}

/* =========================================================
   ПРЕПОДАВАТЕЛИ И ОБРАТНАЯ СВЯЗЬ
   ========================================================= */

#why-granum
.granum-why-card--teachers,
#why-granum
.granum-why-card--feedback {
    padding:
        32px 32px 30px !important;
}

#why-granum
.granum-why-card--teachers {
    --granum-why-photo:
        url("https://granumlang.ru/wp-content/uploads/2026/07/4.png");

    --granum-why-photo-width:
        57%;

    --granum-why-photo-height:
        84%;

    --granum-why-photo-position:
        right bottom;

    --granum-why-photo-size:
        contain;
}

#why-granum
.granum-why-card--feedback {
    --granum-why-photo:
        url("https://granumlang.ru/wp-content/uploads/2026/07/5.png");

    --granum-why-photo-width:
        57%;

    --granum-why-photo-height:
        84%;

    --granum-why-photo-position:
        right bottom;

    --granum-why-photo-size:
        contain;
}

#why-granum
.granum-why-card--teachers::before,
#why-granum
.granum-why-card--feedback::before {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 41%,
            rgba(255, 255, 255, 0.94) 51%,
            rgba(255, 255, 255, 0.48) 65%,
            rgba(255, 255, 255, 0.04) 82%,
            rgba(255, 255, 255, 0) 100%
        )
        !important;
}

#why-granum
.granum-why-card--teachers
.granum-why-card__title,
#why-granum
.granum-why-card--feedback
.granum-why-card__title {
    max-width:
        49% !important;

    margin-top:
        26px !important;
}

#why-granum
.granum-why-card--teachers
.granum-why-card__description,
#why-granum
.granum-why-card--feedback
.granum-why-card__description {
    max-width:
        46% !important;

    margin-top:
        21px !important;
}

/* =========================================================
   ОБРАЗОВАТЕЛЬНЫЙ КЛАСТЕР
   ========================================================= */

#why-granum
.granum-why-card--cluster {
    --granum-why-photo:
        url("https://granumlang.ru/wp-content/uploads/2026/07/%D0%BD%D0%B8%D0%B7.png");

    --granum-why-photo-width:
        67%;

    --granum-why-photo-height:
        100%;

    --granum-why-photo-position:
        right center;

    --granum-why-photo-size:
        cover;

    padding:
        31px 37px !important;
}

#why-granum
.granum-why-card--cluster::before {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 31%,
            rgba(255, 255, 255, 0.96) 39%,
            rgba(255, 255, 255, 0.62) 49%,
            rgba(255, 255, 255, 0.10) 66%,
            rgba(255, 255, 255, 0) 100%
        )
        !important;
}

#why-granum
.granum-why-card--cluster
.granum-why-card__title {
    max-width:
        37% !important;

    margin-top:
        22px !important;
}

#why-granum
.granum-why-card--cluster
.granum-why-card__description {
    max-width:
        37% !important;

    margin-top:
        auto !important;
}

/* =========================================================
   НОУТБУКИ И ПЛАНШЕТЫ
   ========================================================= */

@media
    (min-width: 768px)
    and (max-width: 1099px) {

    #why-granum
    .granum-why__grid {
        display:
            grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;

        grid-auto-rows:
            auto !important;

        gap:
            18px !important;
    }

    #why-granum
    .granum-why-card {
        grid-column:
            auto !important;

        grid-row:
            auto !important;

        min-height:
            430px !important;
    }

    #why-granum
    .granum-why-card--experience,
    #why-granum
    .granum-why-card--cluster {
        grid-column:
            1 / 3 !important;
    }

    #why-granum
    .granum-why-card--experience {
        min-height:
            620px !important;
    }

    #why-granum
    .granum-why-card--cluster {
        min-height:
            340px !important;
    }

    #why-granum
    .granum-why-card--experience
    .granum-why-card__description {
        max-width:
            46% !important;
    }

    #why-granum
    .granum-why-card--teachers
    .granum-why-card__title,
    #why-granum
    .granum-why-card--feedback
    .granum-why-card__title,
    #why-granum
    .granum-why-card--teachers
    .granum-why-card__description,
    #why-granum
    .granum-why-card--feedback
    .granum-why-card__description {
        max-width:
            51% !important;
    }
}

/* =========================================================
   МОБИЛЬНЫЕ
   ========================================================= */

@media (max-width: 767px) {

    #why-granum
    .granum-why__grid {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            14px !important;
    }

    #why-granum
    .granum-why-card {
        grid-column:
            auto !important;

        grid-row:
            auto !important;

        min-height:
            430px !important;

        padding:
            25px 23px 205px !important;

        border-radius:
            22px !important;

        translate:
            none !important;

        scale:
            none !important;
    }

    #why-granum
    .granum-why-card::after {
        right:
            0 !important;

        bottom:
            0 !important;

        width:
            100% !important;

        height:
            53% !important;

        background-position:
            center bottom !important;

        background-size:
            contain !important;
    }

    #why-granum
    .granum-why-card::before {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 1) 43%,
                rgba(255, 255, 255, 0.94) 52%,
                rgba(255, 255, 255, 0.30) 70%,
                rgba(255, 255, 255, 0) 100%
            )
            !important;
    }

    #why-granum
    .granum-why-card__title,
    #why-granum
    .granum-why-card__description,
    #why-granum
    .granum-why-card--graduates
    .granum-why-card__description,
    #why-granum
    .granum-why-card--students
    .granum-why-card__description,
    #why-granum
    .granum-why-card--teachers
    .granum-why-card__title,
    #why-granum
    .granum-why-card--teachers
    .granum-why-card__description,
    #why-granum
    .granum-why-card--feedback
    .granum-why-card__title,
    #why-granum
    .granum-why-card--feedback
    .granum-why-card__description,
    #why-granum
    .granum-why-card--cluster
    .granum-why-card__title,
    #why-granum
    .granum-why-card--cluster
    .granum-why-card__description {
        max-width:
            100% !important;
    }

    #why-granum
    .granum-why-card--experience {
        min-height:
            610px !important;

        padding:
            28px 24px 300px !important;
    }

    #why-granum
    .granum-why-card--experience::before {
        background:
            linear-gradient(
                180deg,
                rgba(55, 31, 97, 1) 0%,
                rgba(60, 35, 105, 1) 43%,
                rgba(62, 37, 110, 0.94) 53%,
                rgba(66, 40, 117, 0.30) 72%,
                rgba(66, 40, 117, 0) 100%
            )
            !important;
    }

    #why-granum
    .granum-why-card--experience::after {
        height:
            58% !important;
    }

    #why-granum
    .granum-why-card--experience
    .granum-why-card__description {
        max-width:
            100% !important;

        margin-top:
            38px !important;
    }

    #why-granum
    .granum-why-card--graduates,
    #why-granum
    .granum-why-card--students {
        min-height:
            450px !important;
    }

    #why-granum
    .granum-why-card--graduates
    .granum-why-card__description,
    #why-granum
    .granum-why-card--students
    .granum-why-card__description {
        margin-top:
            22px !important;
    }

    #why-granum
    .granum-why-card--teachers,
    #why-granum
    .granum-why-card--feedback {
        min-height:
            500px !important;

        padding-bottom:
            235px !important;
    }

    #why-granum
    .granum-why-card--teachers
    .granum-why-card__title,
    #why-granum
    .granum-why-card--feedback
    .granum-why-card__title {
        margin-top:
            22px !important;
    }

    #why-granum
    .granum-why-card--cluster {
        min-height:
            525px !important;

        padding-bottom:
            275px !important;
    }

    #why-granum
    .granum-why-card--cluster::after {
        height:
            56% !important;

        background-size:
            cover !important;
    }

    #why-granum
    .granum-why-card__value {
        font-size:
            clamp(58px, 18vw, 82px)
            !important;
    }
}

/* GRANUM WHY PHOTO CARDS V25 END */

/* GRANUM WHY PHOTO SIZING V26 START */

/*
Точечная корректировка фотокарточек поверх V25.

1. В большой фиолетовой карточке:
   - фотография занимает всю ширину;
   - высота рассчитывается пропорционально;
   - фиолетовый градиент поверх фотографии удалён;
   - текстовый блок поднят выше.

2. В четырёх белых карточках:
   - фотография занимает всю высоту;
   - ширина рассчитывается пропорционально;
   - фото прижато к правой стороне.

Hover из V25 сохраняется.
*/

/* =========================================================
   БОЛЬШАЯ ФИОЛЕТОВАЯ КАРТОЧКА
   ========================================================= */

@media (min-width: 1100px) {

    #why-granum
    .granum-why-card--experience {
        --granum-why-photo-width:
            100%;

        --granum-why-photo-height:
            100%;

        --granum-why-photo-size:
            100% auto;

        --granum-why-photo-position:
            center bottom;
    }

    /*
    Изображение занимает всю ширину карточки.
    background-size: 100% auto сохраняет пропорции.
    */

    #why-granum
    .granum-why-card--experience::after {
        right:
            0 !important;

        bottom:
            0 !important;

        width:
            100% !important;

        height:
            100% !important;

        opacity:
            1 !important;

        background-position:
            center bottom !important;

        background-size:
            100% auto !important;
    }

    /*
    Полностью убираем фиолетовый слой,
    лежавший поверх фотографии.
    Основной фиолетовый фон карточки сохраняется.
    */

    #why-granum
    .granum-why-card--experience::before {
        background:
            none !important;

        background-image:
            none !important;

        opacity:
            0 !important;
    }

    /*
    Поднимаем текстовый блок выше.
    Раньше margin-top:auto прижимал его к нижней части.
    */

    #why-granum
    .granum-why-card--experience
    .granum-why-card__description {
        max-width:
            47% !important;

        margin-top:
            132px !important;

        margin-bottom:
            0 !important;
    }

    #why-granum
    .granum-why-card--experience
    .granum-why-card__description::before {
        margin-bottom:
            22px !important;
    }
}

/* =========================================================
   ФОТОГРАФИИ В БЕЛЫХ КАРТОЧКАХ
   ========================================================= */

@media (min-width: 768px) {

    #why-granum
    .granum-why-card--graduates,
    #why-granum
    .granum-why-card--students,
    #why-granum
    .granum-why-card--teachers,
    #why-granum
    .granum-why-card--feedback {
        --granum-why-photo-width:
            61%;

        --granum-why-photo-height:
            100%;

        --granum-why-photo-size:
            auto 100%;

        --granum-why-photo-position:
            right center;
    }

    /*
    Высота фотографии равна полной высоте карточки.
    Ширина изображения рассчитывается автоматически.
    */

    #why-granum
    .granum-why-card--graduates::after,
    #why-granum
    .granum-why-card--students::after,
    #why-granum
    .granum-why-card--teachers::after,
    #why-granum
    .granum-why-card--feedback::after {
        top:
            0 !important;

        right:
            0 !important;

        bottom:
            auto !important;

        width:
            61% !important;

        height:
            100% !important;

        opacity:
            1 !important;

        background-position:
            right center !important;

        background-size:
            auto 100% !important;
    }

    /*
    Более короткий переход между текстом и фотографией.
    Сама фотография больше не выглядит маленькой плиткой.
    */

    #why-granum
    .granum-why-card--graduates::before,
    #why-granum
    .granum-why-card--students::before,
    #why-granum
    .granum-why-card--teachers::before,
    #why-granum
    .granum-why-card--feedback::before {
        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 1) 39%,
                rgba(255, 255, 255, 0.96) 47%,
                rgba(255, 255, 255, 0.72) 54%,
                rgba(255, 255, 255, 0.20) 64%,
                rgba(255, 255, 255, 0) 73%
            )
            !important;
    }
}

/* =========================================================
   УТОЧНЕНИЯ ДЛЯ ДВУХ НИЖНИХ БЕЛЫХ КАРТОЧЕК
   ========================================================= */

@media (min-width: 1100px) {

    #why-granum
    .granum-why-card--teachers::after {
        width:
            59% !important;

        background-position:
            right center !important;
    }

    #why-granum
    .granum-why-card--feedback::after {
        width:
            60% !important;

        background-position:
            right center !important;
    }

    #why-granum
    .granum-why-card--teachers
    .granum-why-card__title,
    #why-granum
    .granum-why-card--feedback
    .granum-why-card__title {
        max-width:
            48% !important;
    }

    #why-granum
    .granum-why-card--teachers
    .granum-why-card__description,
    #why-granum
    .granum-why-card--feedback
    .granum-why-card__description {
        max-width:
            46% !important;
    }
}

/*
На touch-устройствах изменения hover не добавляются.
Мобильная компоновка V25 остаётся без изменений.
*/

/* GRANUM WHY PHOTO SIZING V26 END */

/* GRANUM WHY TEXT PHOTO V27 START */

/* =========================================================
   БОЛЬШАЯ ФИОЛЕТОВАЯ ПЛИТКА

   Текст теперь располагается сразу под 9+ лет,
   а не в середине фотографии.
   ========================================================= */

@media (min-width: 1100px) {

    #why-granum
    .granum-why-card--experience {
        justify-content:
            flex-start !important;
    }

    #why-granum
    .granum-why-card--experience
    .granum-why-card__stat {
        flex:
            0 0 auto !important;
    }

    #why-granum
    .granum-why-card--experience
    .granum-why-card__description {
        position:
            relative !important;

        z-index:
            4 !important;

        max-width:
            45% !important;

        margin:
            46px 0 0 !important;

        padding:
            0 !important;

        color:
            rgba(255, 255, 255, 0.82)
            !important;
    }

    #why-granum
    .granum-why-card--experience
    .granum-why-card__description::before {
        content:
            "опыта в сфере\A образования\A и развития";

        display:
            block !important;

        max-width:
            100% !important;

        margin:
            0 0 22px !important;

        color:
            #ffffff !important;

        font-size:
            clamp(31px, 2.25vw, 41px)
            !important;

        font-weight:
            850 !important;

        line-height:
            1.04 !important;

        letter-spacing:
            -0.047em !important;

        white-space:
            pre-line !important;

        text-wrap:
            balance !important;
    }

    /*
    Фото остаётся полноширинным,
    но текст расположен в верхней свободной зоне.
    */

    #why-granum
    .granum-why-card--experience::after {
        z-index:
            1 !important;

        width:
            100% !important;

        height:
            100% !important;

        background-position:
            center bottom !important;

        background-size:
            100% auto !important;
    }

    #why-granum
    .granum-why-card--experience::before {
        opacity:
            0 !important;

        background:
            none !important;
    }
}

/* =========================================================
   НОУТБУКИ И ПЛАНШЕТЫ
   ========================================================= */

@media
    (min-width: 768px)
    and (max-width: 1099px) {

    #why-granum
    .granum-why-card--experience
    .granum-why-card__description {
        max-width:
            48% !important;

        margin-top:
            42px !important;
    }
}

/* =========================================================
   МОБИЛЬНЫЕ
   ========================================================= */

@media (max-width: 767px) {

    #why-granum
    .granum-why-card--experience
    .granum-why-card__description {
        max-width:
            100% !important;

        margin:
            28px 0 0 !important;
    }

    #why-granum
    .granum-why-card--experience
    .granum-why-card__description::before {
        margin-bottom:
            17px !important;

        font-size:
            clamp(28px, 8.5vw, 36px)
            !important;
    }
}

/* =========================================================
   НОВАЯ ФОТОГРАФИЯ ДЛЯ 5000+ ВЫПУСКНИКОВ
   ========================================================= */

#why-granum
.granum-why-card--graduates {
    --granum-why-photo:
        url("https://granumlang.ru/wp-content/uploads/2026/07/%D0%91%D0%B5%D0%B7-%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8-1.png")
        !important;
}

#why-granum
.granum-why-card--graduates::after {
    background-image:
        url("https://granumlang.ru/wp-content/uploads/2026/07/%D0%91%D0%B5%D0%B7-%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8-1.png")
        !important;

    background-position:
        right center !important;

    background-size:
        auto 100% !important;
}

/* GRANUM WHY TEXT PHOTO V27 END */

/* GRANUM WHY TITLE V28 START */
@media (min-width: 1100px) {
    #why-granum .granum-why-card--experience .granum-why-card__description {
        max-width: 56% !important;
        margin: 18px 0 0 !important;
        align-self: flex-start !important;
        position: relative !important;
        z-index: 4 !important;
    }

    #why-granum .granum-why-card--experience .granum-why-card__description::before {
        content: "опыта в сфере\Aобразования\Aи развития" !important;
        display: block !important;
        max-width: 100% !important;
        margin: 0 0 18px !important;
        color: #ffffff !important;
        font-size: clamp(28px, 2.15vw, 39px) !important;
        font-weight: 850 !important;
        line-height: 0.96 !important;
        letter-spacing: -0.046em !important;
        white-space: pre !important;
        text-wrap: initial !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
        hyphens: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1099px) {
    #why-granum .granum-why-card--experience .granum-why-card__description {
        max-width: 58% !important;
        margin: 16px 0 0 !important;
    }

    #why-granum .granum-why-card--experience .granum-why-card__description::before {
        content: "опыта в сфере\Aобразования\Aи развития" !important;
        margin: 0 0 16px !important;
        font-size: clamp(26px, 3.1vw, 34px) !important;
        line-height: 0.98 !important;
        white-space: pre !important;
        word-break: keep-all !important;
    }
}

@media (max-width: 767px) {
    #why-granum .granum-why-card--experience .granum-why-card__description {
        margin-top: 18px !important;
    }

    #why-granum .granum-why-card--experience .granum-why-card__description::before {
        content: "опыта в сфере\Aобразования\Aи развития" !important;
        white-space: pre !important;
        margin-bottom: 14px !important;
        line-height: 0.98 !important;
    }
}
/* GRANUM WHY TITLE V28 END */

/* GRANUM TESTING BACKGROUND V29 START */

/*
Новый фон применяется только к секции
"Узнайте свой уровень английского языка бесплатно".
*/

#testing,
section#testing {
    position:
        relative !important;

    isolation:
        isolate !important;

    overflow:
        hidden !important;

    background-color:
        #f5f0fc !important;

    background-image:
        url("https://granumlang.ru/wp-content/uploads/2026/07/%D1%86%D1%82%D0%B0-%D1%84%D0%BE%D0%BE%D0%BD.png")
        !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;

    background-size:
        cover !important;
}

/*
Старые круги и декоративная сетка больше
не перекрывают загруженное изображение.
*/

#testing::before,
#testing::after {
    opacity:
        0 !important;

    background:
        none !important;

    background-image:
        none !important;

    pointer-events:
        none !important;
}

#testing
.granum-testing__ambient,
#testing
.granum-testing__background,
#testing
.granum-testing__network,
#testing
.granum-testing__orbits,
#testing
[class*="testing__ambient"],
#testing
[class*="testing__network"],
#testing
[class*="testing__orbit"] {
    display:
        none !important;
}

/*
Контент и форма располагаются над изображением.
*/

#testing
.granum-testing__container,
#testing
.granum-testing__layout,
#testing
.granum-testing__content,
#testing
.granum-testing__form,
#testing
form {
    position:
        relative !important;

    z-index:
        2 !important;
}

/*
После удаления списка левая колонка
выравнивается по центру секции.
*/

#testing
.granum-testing__layout {
    align-items:
        center !important;
}

#testing
.granum-testing__content {
    align-self:
        center !important;
}

#testing
.granum-testing__description {
    margin-bottom:
        0 !important;
}

/*
На мобильных фон сохраняется,
но позиционируется ближе к правой стороне.
*/

@media (max-width: 767px) {

    #testing,
    section#testing {
        background-position:
            68% center !important;

        background-size:
            cover !important;
    }
}

/* GRANUM TESTING BACKGROUND V29 END */

/* GRANUM PASSPORT PHOTOS V33 START */

/* =========================================================
   ФОТОГРАФИИ В РЕАЛЬНЫХ ПЛИТКАХ ПАСПОРТА

   Первый разворот:
   01, 02, 03

   Второй разворот:
   05

   Финальная правая страница:
   06

   Плитка 04 остаётся без фотографии.
   ========================================================= */

/* Карточки, в которые устанавливаются фото */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(1),

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(2),

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3),

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2),

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final {
    position:
        relative !important;

    isolation:
        isolate !important;

    overflow:
        hidden !important;
}

/* Общий фотослой */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(1)::before,

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(2)::before,

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3)::before,

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2)::before,

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final::before {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        0 !important;

    top:
        0 !important;

    right:
        0 !important;

    bottom:
        0 !important;

    left:
        auto !important;

    display:
        block !important;

    width:
        64% !important;

    height:
        100% !important;

    border-radius:
        0 16px 16px 0 !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;

    background-size:
        100% 100%,
        cover !important;

    opacity:
        1 !important;

    pointer-events:
        none !important;

    transform:
        scale(1) !important;

    transform-origin:
        center center !important;

    transition:
        transform 360ms ease
        !important;
}

/* =========================================================
   ПЛИТКА 01
   ========================================================= */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(1)::before {
    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.99) 14%,
            rgba(255, 255, 255, 0.86) 28%,
            rgba(255, 255, 255, 0.38) 48%,
            rgba(255, 255, 255, 0.05) 66%,
            rgba(255, 255, 255, 0) 78%
        ),
        url("https://granumlang.ru/wp-content/uploads/2026/07/110d15ba-712c-4409-9fdb-25278446ab91.png")
        !important;
}

/* =========================================================
   ПЛИТКА 02
   ========================================================= */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(2)::before {
    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.99) 14%,
            rgba(255, 255, 255, 0.86) 28%,
            rgba(255, 255, 255, 0.38) 48%,
            rgba(255, 255, 255, 0.05) 66%,
            rgba(255, 255, 255, 0) 78%
        ),
        url("https://granumlang.ru/wp-content/uploads/2026/07/ea189f3b-8d83-430f-a1b8-e6f5ad093733-e1784635211953.png")
        !important;
}

/* =========================================================
   ПЛИТКА 03
   ========================================================= */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3)::before {
    width:
        59% !important;

    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.99) 12%,
            rgba(255, 255, 255, 0.82) 26%,
            rgba(255, 255, 255, 0.30) 46%,
            rgba(255, 255, 255, 0) 69%
        ),
        url("https://granumlang.ru/wp-content/uploads/2026/07/b786d616-1e71-4285-bee7-0cf6dab6d39d-e1784635109158.png")
        !important;
}

/* =========================================================
   ПЛИТКА 05
   Вторая карточка в granum-real-book__task-stack
   ========================================================= */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2)::before {
    width:
        60% !important;

    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.99) 13%,
            rgba(255, 255, 255, 0.84) 28%,
            rgba(255, 255, 255, 0.33) 48%,
            rgba(255, 255, 255, 0) 70%
        ),
        url("https://granumlang.ru/wp-content/uploads/2026/07/c986a9fe-74d6-49ea-9e3b-ed69139b2348-e1784635031566.png")
        !important;
}

/* =========================================================
   ПЛИТКА 06
   ========================================================= */

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final::before {
    width:
        61% !important;

    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0.99) 13%,
            rgba(255, 255, 255, 0.84) 28%,
            rgba(255, 255, 255, 0.32) 48%,
            rgba(255, 255, 255, 0) 70%
        ),
        url("https://granumlang.ru/wp-content/uploads/2026/07/ef39127b-dd15-447a-b410-5945ef346ca4-e1784635067377.png")
        !important;
}

/* Текст, номера и иконки поверх фотографий */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-card
.granum-real-book__task-top,

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-card h4,

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2)
.granum-real-book__task-top,

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2) h4,

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final
.granum-real-book__task-top,

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final h4 {
    position:
        relative !important;

    z-index:
        3 !important;
}

/* Ширина текстовой области */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(1) h4,

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(2) h4 {
    max-width:
        61% !important;
}

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3) h4 {
    max-width:
        57% !important;
}

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2) h4 {
    max-width:
        55% !important;
}

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final h4 {
    max-width:
        56% !important;
}

/* Иконки остаются читаемыми поверх фотографий */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-card
.granum-real-book__task-icon,

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-card
.granum-real-book__task-icon,

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final
.granum-real-book__task-icon {
    position:
        relative !important;

    z-index:
        5 !important;

    background:
        rgba(248, 244, 253, 0.93)
        !important;

    box-shadow:
        0 5px 15px rgba(61, 40, 99, 0.09)
        !important;
}

/* =========================================================
   ПЛИТКА 04 БЕЗ ФОТО
   ========================================================= */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1)::before,
#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1)::after {
    content:
        none !important;

    display:
        none !important;
}

/* =========================================================
   HOVER ФОТОГРАФИЙ
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(1):hover::before,

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(2):hover::before,

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(3):hover::before,

    #international-exams
    .granum-real-book__leaf-face--back
    .granum-real-book__task-stack
    .granum-real-book__task-card:nth-child(2):hover::before,

    #international-exams
    .granum-real-book__page--base-right
    .granum-real-book__task-card--final:hover::before {
        transform:
            scale(1.035) !important;
    }
}

/* =========================================================
   МОБИЛЬНЫЙ
   ========================================================= */

@media (max-width: 760px) {

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(1)::before,

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(2)::before,

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(3)::before,

    #international-exams
    .granum-real-book__leaf-face--back
    .granum-real-book__task-stack
    .granum-real-book__task-card:nth-child(2)::before,

    #international-exams
    .granum-real-book__page--base-right
    .granum-real-book__task-card--final::before {
        width:
            56% !important;
    }

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(1) h4,

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(2) h4,

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(3) h4,

    #international-exams
    .granum-real-book__leaf-face--back
    .granum-real-book__task-stack
    .granum-real-book__task-card:nth-child(2) h4,

    #international-exams
    .granum-real-book__page--base-right
    .granum-real-book__task-card--final h4 {
        max-width:
            57% !important;
    }
}

/* GRANUM PASSPORT PHOTOS V33 END */

/* GRANUM PASSPORT PHOTO TUNING V34 START */

/* =========================================================
   ЦИФРА, ЗАТЕМ ИКОНКА ПОД НЕЙ
   ========================================================= */

#international-exams
.granum-real-book__task-card
.granum-real-book__task-top {
    display:
        flex !important;

    width:
        fit-content !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    gap:
        8px !important;
}

#international-exams
.granum-real-book__task-card
.granum-real-book__task-number {
    display:
        block !important;

    order:
        1 !important;

    font-size:
        9px !important;

    line-height:
        1 !important;
}

#international-exams
.granum-real-book__task-card
.granum-real-book__task-icon {
    order:
        2 !important;

    width:
        31px !important;

    height:
        31px !important;

    min-width:
        31px !important;

    min-height:
        31px !important;

    flex:
        0 0 31px !important;

    border-radius:
        9px !important;
}

#international-exams
.granum-real-book__task-card
.granum-real-book__task-icon svg {
    width:
        16px !important;

    height:
        16px !important;
}

/* =========================================================
   ЗАГОЛОВКИ ПЛИТОК МЕНЬШЕ
   ========================================================= */

#international-exams
.granum-real-book__task-card h4 {
    font-size:
        clamp(11px, 0.72vw, 13px)
        !important;

    font-weight:
        760 !important;

    line-height:
        1.28 !important;

    letter-spacing:
        -0.012em !important;
}

/* Плитки с фотографиями */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(1) h4,

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(2) h4,

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3) h4,

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2) h4,

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final h4 {
    max-width:
        47% !important;

    margin-top:
        auto !important;

    padding-top:
        10px !important;
}

/* Плитка 04 без фотографии */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1) h4 {
    max-width:
        100% !important;
}

/* =========================================================
   МИНИМАЛЬНЫЙ БЕЛЫЙ ПЕРЕХОД

   Белый цвет остаётся только в небольшой зоне рядом
   с текстом. Основная часть фотографии полностью видима.
   ========================================================= */

/* Плитка 01 */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(1)::before {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.91) 5%,
            rgba(255, 255, 255, 0.55) 12%,
            rgba(255, 255, 255, 0.16) 20%,
            rgba(255, 255, 255, 0) 29%
        ),
        url("https://granumlang.ru/wp-content/uploads/2026/07/110d15ba-712c-4409-9fdb-25278446ab91.png")
        !important;

    background-position:
        center center,
        center center !important;

    background-size:
        100% 100%,
        cover !important;
}

/* Плитка 02 */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(2)::before {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.91) 5%,
            rgba(255, 255, 255, 0.55) 12%,
            rgba(255, 255, 255, 0.16) 20%,
            rgba(255, 255, 255, 0) 29%
        ),
        url("https://granumlang.ru/wp-content/uploads/2026/07/ea189f3b-8d83-430f-a1b8-e6f5ad093733-e1784635211953.png")
        !important;

    background-position:
        center center,
        center center !important;

    background-size:
        100% 100%,
        cover !important;
}

/* Плитка 03 */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3)::before {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.88) 5%,
            rgba(255, 255, 255, 0.48) 12%,
            rgba(255, 255, 255, 0.12) 19%,
            rgba(255, 255, 255, 0) 27%
        ),
        url("https://granumlang.ru/wp-content/uploads/2026/07/b786d616-1e71-4285-bee7-0cf6dab6d39d-e1784635109158.png")
        !important;

    background-position:
        center center,
        center center !important;

    background-size:
        100% 100%,
        cover !important;
}

/* Плитка 05 */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2)::before {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.90) 5%,
            rgba(255, 255, 255, 0.52) 12%,
            rgba(255, 255, 255, 0.14) 20%,
            rgba(255, 255, 255, 0) 29%
        ),
        url("https://granumlang.ru/wp-content/uploads/2026/07/c986a9fe-74d6-49ea-9e3b-ed69139b2348-e1784635031566.png")
        !important;

    background-position:
        center center,
        center center !important;

    background-size:
        100% 100%,
        cover !important;
}

/* Плитка 06 */

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final::before {
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.90) 5%,
            rgba(255, 255, 255, 0.52) 12%,
            rgba(255, 255, 255, 0.14) 20%,
            rgba(255, 255, 255, 0) 29%
        ),
        url("https://granumlang.ru/wp-content/uploads/2026/07/ef39127b-dd15-447a-b410-5945ef346ca4-e1784635067377.png")
        !important;

    background-position:
        center center,
        center center !important;

    background-size:
        100% 100%,
        cover !important;
}

/* =========================================================
   УБИРАЕМ ИКОНКИ С ФОТОГРАФИЙ

   Благодаря колонке task-top иконка теперь находится
   слева сразу под номером.
   ========================================================= */

#international-exams
.granum-real-book__task-card
.granum-real-book__task-icon {
    margin:
        0 !important;

    background:
        rgba(246, 241, 252, 0.96)
        !important;

    box-shadow:
        none !important;
}

/* =========================================================
   МОБИЛЬНЫЙ
   ========================================================= */

@media (max-width: 760px) {

    #international-exams
    .granum-real-book__task-card h4 {
        font-size:
            12px !important;

        line-height:
            1.3 !important;
    }

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(1) h4,

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(2) h4,

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(3) h4,

    #international-exams
    .granum-real-book__leaf-face--back
    .granum-real-book__task-stack
    .granum-real-book__task-card:nth-child(2) h4,

    #international-exams
    .granum-real-book__page--base-right
    .granum-real-book__task-card--final h4 {
        max-width:
            49% !important;
    }
}

/* GRANUM PASSPORT PHOTO TUNING V34 END */

/* GRANUM PASSPORT REAL DIAGONAL V35 START */

/*
Исправление вертикальной границы.

::before содержит только фотографию.
::after содержит отдельную белую маску 135deg.

Оба слоя занимают всю плитку, поэтому вертикального
прямоугольного стыка больше нет.
*/

/* =========================================================
   КАРТОЧКИ С ФОТО
   ========================================================= */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(1),

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(2),

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3),

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2),

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final {
    position:
        relative !important;

    isolation:
        isolate !important;

    overflow:
        hidden !important;
}

/* =========================================================
   ФОТОГРАФИЯ, БЕЗ БЕЛОГО ГРАДИЕНТА
   ========================================================= */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(1)::before,

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(2)::before,

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3)::before,

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2)::before,

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final::before {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        0 !important;

    inset:
        0 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    border-radius:
        inherit !important;

    background-repeat:
        no-repeat !important;

    background-position:
        right center !important;

    background-size:
        auto 100% !important;

    opacity:
        1 !important;

    pointer-events:
        none !important;

    transform:
        scale(1) !important;

    transform-origin:
        right center !important;

    transition:
        transform 360ms ease
        !important;
}

/* 01 */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(1)::before {
    background-image:
        url("https://granumlang.ru/wp-content/uploads/2026/07/110d15ba-712c-4409-9fdb-25278446ab91.png")
        !important;
}

/* 02 */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(2)::before {
    background-image:
        url("https://granumlang.ru/wp-content/uploads/2026/07/ea189f3b-8d83-430f-a1b8-e6f5ad093733-e1784635211953.png")
        !important;
}

/* 03 */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3)::before {
    background-image:
        url("https://granumlang.ru/wp-content/uploads/2026/07/b786d616-1e71-4285-bee7-0cf6dab6d39d-e1784635109158.png")
        !important;
}

/* 05 */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2)::before {
    background-image:
        url("https://granumlang.ru/wp-content/uploads/2026/07/c986a9fe-74d6-49ea-9e3b-ed69139b2348-e1784635031566.png")
        !important;
}

/* 06 */

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final::before {
    background-image:
        url("https://granumlang.ru/wp-content/uploads/2026/07/ef39127b-dd15-447a-b410-5945ef346ca4-e1784635067377.png")
        !important;
}

/* =========================================================
   НАСТОЯЩАЯ ДИАГОНАЛЬНАЯ БЕЛАЯ МАСКА 135 DEG
   ========================================================= */

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(1)::after,

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(2)::after,

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3)::after,

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(2)::after,

#international-exams
.granum-real-book__page--base-right
.granum-real-book__task-card--final::after {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        1 !important;

    inset:
        0 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    border-radius:
        inherit !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 28%,
            rgba(255, 255, 255, 0.96) 34%,
            rgba(255, 255, 255, 0.76) 41%,
            rgba(255, 255, 255, 0.42) 48%,
            rgba(255, 255, 255, 0.14) 55%,
            rgba(255, 255, 255, 0) 62%
        )
        !important;

    pointer-events:
        none !important;

    transform:
        none !important;
}

/*
Для широкой плитки 03 диагональ немного короче,
чтобы фотография была открыта сильнее.
*/

#international-exams
.granum-real-book__leaf-face--front
.granum-real-book__task-grid
.granum-real-book__task-card:nth-child(3)::after {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 24%,
            rgba(255, 255, 255, 0.94) 30%,
            rgba(255, 255, 255, 0.68) 37%,
            rgba(255, 255, 255, 0.32) 44%,
            rgba(255, 255, 255, 0.08) 51%,
            rgba(255, 255, 255, 0) 57%
        )
        !important;
}

/* =========================================================
   КОНТЕНТ НАД ФОТО И МАСКОЙ
   ========================================================= */

#international-exams
.granum-real-book__task-card
.granum-real-book__task-top,

#international-exams
.granum-real-book__task-card h4 {
    position:
        relative !important;

    z-index:
        3 !important;
}

/* =========================================================
   ИКОНКА ПОД НОМЕРОМ
   ========================================================= */

#international-exams
.granum-real-book__task-card
.granum-real-book__task-top {
    display:
        flex !important;

    width:
        fit-content !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    gap:
        8px !important;
}

#international-exams
.granum-real-book__task-card
.granum-real-book__task-number {
    order:
        1 !important;
}

#international-exams
.granum-real-book__task-card
.granum-real-book__task-icon {
    order:
        2 !important;

    width:
        31px !important;

    height:
        31px !important;

    min-width:
        31px !important;

    min-height:
        31px !important;

    flex:
        0 0 31px !important;

    margin:
        0 !important;

    border-radius:
        9px !important;

    background:
        rgba(247, 242, 253, 0.96)
        !important;

    box-shadow:
        none !important;
}

#international-exams
.granum-real-book__task-card
.granum-real-book__task-icon svg {
    width:
        16px !important;

    height:
        16px !important;
}

/* =========================================================
   УМЕНЬШЕННЫЕ ЗАГОЛОВКИ
   ========================================================= */

#international-exams
.granum-real-book__task-card h4 {
    font-size:
        clamp(11px, 0.72vw, 13px)
        !important;

    font-weight:
        760 !important;

    line-height:
        1.28 !important;

    letter-spacing:
        -0.012em !important;
}

/* =========================================================
   ПЛИТКА 04 БЕЗ ФОТО
   ========================================================= */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1)::before,

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1)::after {
    content:
        none !important;

    display:
        none !important;
}

/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(1):hover::before,

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(2):hover::before,

    #international-exams
    .granum-real-book__leaf-face--front
    .granum-real-book__task-grid
    .granum-real-book__task-card:nth-child(3):hover::before,

    #international-exams
    .granum-real-book__leaf-face--back
    .granum-real-book__task-stack
    .granum-real-book__task-card:nth-child(2):hover::before,

    #international-exams
    .granum-real-book__page--base-right
    .granum-real-book__task-card--final:hover::before {
        transform:
            scale(1.035) !important;
    }
}

/* GRANUM PASSPORT REAL DIAGONAL V35 END */

/* GRANUM PASSPORT PHOTO 04 V36 START */

/* Плитка 04, первая карточка на обратной стороне листа */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1) {
    position:
        relative !important;

    isolation:
        isolate !important;

    overflow:
        hidden !important;
}

/* Фотография */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1)::before {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        0 !important;

    inset:
        0 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    border-radius:
        inherit !important;

    background-image:
        url("https://granumlang.ru/wp-content/uploads/2026/07/f5a9e954-2b4f-4d4c-b37c-b1ec44aee8ef-1.png")
        !important;

    background-repeat:
        no-repeat !important;

    background-position:
        right center !important;

    background-size:
        auto 100% !important;

    opacity:
        1 !important;

    pointer-events:
        none !important;

    transform:
        scale(1) !important;

    transform-origin:
        right center !important;

    transition:
        transform 360ms ease
        !important;
}

/* Белая диагональная маска 135 градусов */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1)::after {
    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        1 !important;

    inset:
        0 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    border-radius:
        inherit !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 25%,
            rgba(255, 255, 255, 0.94) 31%,
            rgba(255, 255, 255, 0.68) 38%,
            rgba(255, 255, 255, 0.32) 45%,
            rgba(255, 255, 255, 0.08) 52%,
            rgba(255, 255, 255, 0) 58%
        )
        !important;

    pointer-events:
        none !important;

    transform:
        none !important;
}

/* Контент поверх фото */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1)
.granum-real-book__task-top,

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1) h4 {
    position:
        relative !important;

    z-index:
        3 !important;
}

/* Заголовок плитки */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1) h4 {
    max-width:
        48% !important;

    margin-top:
        auto !important;

    padding-top:
        10px !important;

    font-size:
        clamp(11px, 0.72vw, 13px)
        !important;

    font-weight:
        760 !important;

    line-height:
        1.28 !important;
}

/* Номер и иконка столбиком */

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1)
.granum-real-book__task-top {
    display:
        flex !important;

    width:
        fit-content !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    gap:
        8px !important;
}

#international-exams
.granum-real-book__leaf-face--back
.granum-real-book__task-stack
.granum-real-book__task-card:nth-child(1)
.granum-real-book__task-icon {
    width:
        31px !important;

    height:
        31px !important;

    min-width:
        31px !important;

    min-height:
        31px !important;

    flex:
        0 0 31px !important;

    margin:
        0 !important;

    border-radius:
        9px !important;

    background:
        rgba(247, 242, 253, 0.96)
        !important;

    box-shadow:
        none !important;
}

@media (hover: hover) and (pointer: fine) {

    #international-exams
    .granum-real-book__leaf-face--back
    .granum-real-book__task-stack
    .granum-real-book__task-card:nth-child(1):hover::before {
        transform:
            scale(1.035) !important;
    }
}

@media (max-width: 760px) {

    #international-exams
    .granum-real-book__leaf-face--back
    .granum-real-book__task-stack
    .granum-real-book__task-card:nth-child(1) h4 {
        max-width:
            50% !important;

        font-size:
            12px !important;
    }
}

/* GRANUM PASSPORT PHOTO 04 V36 END */

/* GRANUM HERO MOBILE CANVAS V57 START */

@media (max-width: 767px) {

    /*
    Hero остаётся одной обычной секцией.
    Высоту определяет существующий контент.
    */

    #granum-hero,
    .granum-hero {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        contain: none !important;
        isolation: isolate !important;
    }

    /*
    Фрейм занимает полную фактическую высоту hero.
    */

    #granum-hero-stage,
    #granum-hero .granum-hero__stage {
        position: absolute !important;
        z-index: 1 !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    #granum-hero-poster,
    #granum-hero-canvas,
    #granum-hero .granum-hero__poster,
    #granum-hero .granum-hero__canvas {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #granum-hero-poster {
        z-index: 1 !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /*
    Главное исправление.
    Отменяем мобильный display:none и visibility:hidden.
    */

    html:not(.granum-tab-hidden):not(.granum-hero-is-offscreen)
    #granum-hero-canvas,
    html:not(.granum-tab-hidden):not(.granum-hero-is-offscreen)
    #granum-hero
    .granum-hero__canvas {
        z-index: 2 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }

    #granum-hero-shade,
    #granum-hero .granum-hero__shade {
        position: absolute !important;
        z-index: 3 !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        pointer-events: none !important;
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /*
    Контент остаётся внутри той же секции.
    */

    #granum-hero-content,
    #granum-hero .granum-hero__content {
        position: relative !important;
        z-index: 20 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: calc(100% - 32px) !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        max-height: none !important;
        box-sizing: border-box !important;
        margin: 0 16px !important;
        padding: 90px 0 25px !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #granum-header {
        z-index: 30 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #granum-hero,
    #granum-hero *,
    #granum-hero *::before,
    #granum-hero *::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (max-width: 420px) {
    #granum-hero-content {
        width: calc(100% - 28px) !important;
        margin-right: 14px !important;
        margin-left: 14px !important;
    }
}

/* GRANUM HERO MOBILE CANVAS V57 END */

/* GRANUM FINAL SNAPSHOT V64 CSS START */

@media (max-width: 767px) {

    /*
    После окончания GSAP stage становится
    обычной статичной картинкой.
    */

    html body
    #granum-hero.granum-final-snapshot-ready-v64
    #granum-hero-stage,

    html.granum-hero-is-offscreen
    body
    #granum-hero.granum-final-snapshot-ready-v64
    #granum-hero-stage,

    html.granum-tab-hidden
    body
    #granum-hero.granum-final-snapshot-ready-v64
    #granum-hero-stage {
        display:
            block !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        transition:
            none !important;

        animation:
            none !important;

        transform:
            none !important;
    }

    html body
    #granum-hero.granum-final-snapshot-ready-v64
    img[data-granum-final-snapshot-v64="1"],

    html.granum-hero-is-offscreen
    body
    #granum-hero.granum-final-snapshot-ready-v64
    img[data-granum-final-snapshot-v64="1"],

    html.granum-tab-hidden
    body
    #granum-hero.granum-final-snapshot-ready-v64
    img[data-granum-final-snapshot-v64="1"] {
        position:
            absolute !important;

        inset:
            0 !important;

        display:
            block !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        width:
            100% !important;

        height:
            100% !important;

        min-width:
            100% !important;

        min-height:
            100% !important;

        max-width:
            none !important;

        max-height:
            none !important;

        object-fit:
            cover !important;

        object-position:
            center center !important;

        z-index:
            2 !important;

        transition:
            none !important;

        animation:
            none !important;

        transform:
            translateZ(0) !important;

        -webkit-backface-visibility:
            hidden !important;

        backface-visibility:
            hidden !important;

        pointer-events:
            none !important;
    }

    /*
    После создания снимка живые canvas
    больше вообще не участвуют в отрисовке.
    */

    html body
    #granum-hero.granum-final-snapshot-ready-v64
    #granum-hero-stage
    canvas,

    html body
    #granum-hero.granum-final-snapshot-ready-v64
    #granum-hero-poster {
        display:
            none !important;

        visibility:
            hidden !important;

        opacity:
            0 !important;

        transition:
            none !important;

        animation:
            none !important;

        pointer-events:
            none !important;
    }

    /*
    Простая рассеянная белая подложка.

    Без рамки, без стекла, без blur,
    без тяжёлой дорогой тени.
    */

    html body
    #granum-hero
    #granum-hero-content,

    html body
    #granum-hero
    .granum-hero__content {
        background:
            radial-gradient(
                ellipse 100% 48%
                at 24% 30%,
                rgba(255, 255, 255, 0.58) 0%,
                rgba(255, 255, 255, 0.40) 34%,
                rgba(255, 255, 255, 0.21) 58%,
                rgba(255, 255, 255, 0.07) 76%,
                rgba(255, 255, 255, 0) 92%
            ),
            radial-gradient(
                ellipse 90% 34%
                at 30% 59%,
                rgba(255, 255, 255, 0.27) 0%,
                rgba(255, 255, 255, 0.12) 52%,
                rgba(255, 255, 255, 0) 88%
            )
            !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;

        filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        backdrop-filter:
            none !important;
    }

    html body
    #granum-hero
    #granum-hero-content
    h1,

    html body
    #granum-hero
    #granum-hero-content
    p {
        text-shadow:
            0 1px 7px
                rgba(255, 255, 255, 0.72)
            !important;
    }
}

/* GRANUM FINAL SNAPSHOT V64 CSS END */

/* GRANUM MAX FINAL CONTACT V68 START */

/*
Настоящая иконка MAX в нижнем контактном блоке.
*/

.granum-final-contact__max-icon {
    display:
        inline-flex !important;

    flex:
        0 0 auto !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    overflow:
        hidden !important;
}

.granum-final-contact__max-icon svg {
    display:
        none !important;
}

.granum-final-contact__max-icon img {
    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        48px !important;

    max-height:
        48px !important;

    object-fit:
        contain !important;
}

/*
Плавающий блок MAX остаётся на прежнем месте.
Меняется только фон кнопки с иконкой.
*/

.granum-max-contact-v66__button {
    background:
        #ffffff !important;

    border:
        1px solid
        rgba(71, 26, 255, 0.12) !important;

    box-shadow:
        0 15px 38px
        rgba(71, 26, 255, 0.20) !important;
}

.granum-max-contact-v66__button::before {
    border-color:
        rgba(71, 26, 255, 0.08) !important;
}

.granum-max-contact-v66__button:hover {
    box-shadow:
        0 19px 44px
        rgba(71, 26, 255, 0.27) !important;
}

/* GRANUM MAX FINAL CONTACT V68 END */

/* GRANUM CHEAP CARD HOVER V69 START */

/*
У плиток полностью отключаем тяжёлые фильтры.
Сами цвета, размеры и структура плиток сохраняются.
*/

html body.home .granum-advantage-card,
html body.home .granum-benefit-card,
html body.home .granum-card,
html body.home .granum-exam-card,
html body.home .granum-format-card,
html body.home .granum-learning-step__card,
html body.home .granum-panel,
html body.home .granum-program-card,
html body.home .granum-real-book__task-card,
html body.home .granum-result-card,
html body.home .granum-results-card,
html body.home .granum-review-card,
html body.home .granum-step-card,
html body.home .granum-stories-v41__card,
html body.home .granum-story-card,
html body.home .granum-testing__benefits-panel,
html body.home .granum-tile,
html body.home .granum-why-card,
html body.home .granum-advantage-card::before,
html body.home .granum-advantage-card::after,
html body.home .granum-benefit-card::before,
html body.home .granum-benefit-card::after,
html body.home .granum-card::before,
html body.home .granum-card::after,
html body.home .granum-exam-card::before,
html body.home .granum-exam-card::after,
html body.home .granum-format-card::before,
html body.home .granum-format-card::after,
html body.home .granum-learning-step__card::before,
html body.home .granum-learning-step__card::after,
html body.home .granum-panel::before,
html body.home .granum-panel::after,
html body.home .granum-program-card::before,
html body.home .granum-program-card::after,
html body.home .granum-real-book__task-card::before,
html body.home .granum-real-book__task-card::after,
html body.home .granum-result-card::before,
html body.home .granum-result-card::after,
html body.home .granum-results-card::before,
html body.home .granum-results-card::after,
html body.home .granum-review-card::before,
html body.home .granum-review-card::after,
html body.home .granum-step-card::before,
html body.home .granum-step-card::after,
html body.home .granum-stories-v41__card::before,
html body.home .granum-stories-v41__card::after,
html body.home .granum-story-card::before,
html body.home .granum-story-card::after,
html body.home .granum-testing__benefits-panel::before,
html body.home .granum-testing__benefits-panel::after,
html body.home .granum-tile::before,
html body.home .granum-tile::after,
html body.home .granum-why-card::before,
html body.home .granum-why-card::after {
    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;

    filter:
        none !important;

    will-change:
        auto !important;
}

/*
Лёгкая базовая тень вместо тяжёлого стекла.
*/

html body.home .granum-advantage-card,
html body.home .granum-benefit-card,
html body.home .granum-card,
html body.home .granum-exam-card,
html body.home .granum-format-card,
html body.home .granum-learning-step__card,
html body.home .granum-panel,
html body.home .granum-program-card,
html body.home .granum-real-book__task-card,
html body.home .granum-result-card,
html body.home .granum-results-card,
html body.home .granum-review-card,
html body.home .granum-step-card,
html body.home .granum-stories-v41__card,
html body.home .granum-story-card,
html body.home .granum-testing__benefits-panel,
html body.home .granum-tile,
html body.home .granum-why-card {
    box-shadow:
        0 5px 15px
        rgba(53, 40, 82, 0.075)
        !important;

    transition-property:
        transform,
        box-shadow,
        border-color,
        background-color
        !important;

    transition-duration:
        180ms !important;

    transition-timing-function:
        ease-out !important;

    backface-visibility:
        hidden !important;

    -webkit-backface-visibility:
        hidden !important;
}

/*
Пока выполняется появление V67,
CSS transition не мешает GSAP.
*/

[data-granum-form-reveal-v67]:not(
    .granum-form-reveal-v67-visible
) {
    transition:
        none !important;
}

/*
Дешёвый hover только для мыши.

Без blur.
Без scale.
Без свечения.
Без движения вложенных картинок.
*/

@media (hover: hover) and (pointer: fine) {

    html body.home .granum-advantage-card:hover,
html body.home .granum-benefit-card:hover,
html body.home .granum-card:hover,
html body.home .granum-exam-card:hover,
html body.home .granum-format-card:hover,
html body.home .granum-learning-step__card:hover,
html body.home .granum-panel:hover,
html body.home .granum-program-card:hover,
html body.home .granum-real-book__task-card:hover,
html body.home .granum-result-card:hover,
html body.home .granum-results-card:hover,
html body.home .granum-review-card:hover,
html body.home .granum-step-card:hover,
html body.home .granum-stories-v41__card:hover,
html body.home .granum-story-card:hover,
html body.home .granum-testing__benefits-panel:hover,
html body.home .granum-tile:hover,
html body.home .granum-why-card:hover {
        transform:
            translate3d(
                0,
                -2px,
                0
            )
            !important;

        box-shadow:
            0 9px 21px
            rgba(53, 40, 82, 0.115)
            !important;

        border-color:
            rgba(99, 79, 156, 0.23)
            !important;
    }

    html body.home .granum-advantage-card:active,
html body.home .granum-benefit-card:active,
html body.home .granum-card:active,
html body.home .granum-exam-card:active,
html body.home .granum-format-card:active,
html body.home .granum-learning-step__card:active,
html body.home .granum-panel:active,
html body.home .granum-program-card:active,
html body.home .granum-real-book__task-card:active,
html body.home .granum-result-card:active,
html body.home .granum-results-card:active,
html body.home .granum-review-card:active,
html body.home .granum-step-card:active,
html body.home .granum-stories-v41__card:active,
html body.home .granum-story-card:active,
html body.home .granum-testing__benefits-panel:active,
html body.home .granum-tile:active,
html body.home .granum-why-card:active {
        transform:
            translate3d(
                0,
                -1px,
                0
            )
            !important;

        transition-duration:
            80ms !important;
    }

    html body.home .granum-advantage-card:hover img,
html body.home .granum-benefit-card:hover img,
html body.home .granum-card:hover img,
html body.home .granum-exam-card:hover img,
html body.home .granum-format-card:hover img,
html body.home .granum-learning-step__card:hover img,
html body.home .granum-panel:hover img,
html body.home .granum-program-card:hover img,
html body.home .granum-real-book__task-card:hover img,
html body.home .granum-result-card:hover img,
html body.home .granum-results-card:hover img,
html body.home .granum-review-card:hover img,
html body.home .granum-step-card:hover img,
html body.home .granum-stories-v41__card:hover img,
html body.home .granum-story-card:hover img,
html body.home .granum-testing__benefits-panel:hover img,
html body.home .granum-tile:hover img,
html body.home .granum-why-card:hover img {
        transform:
            none !important;

        filter:
            none !important;
    }
}

/*
На сенсорных устройствах hover не зависает.
*/

@media (hover: none), (pointer: coarse) {

    html body.home .granum-advantage-card,
html body.home .granum-benefit-card,
html body.home .granum-card,
html body.home .granum-exam-card,
html body.home .granum-format-card,
html body.home .granum-learning-step__card,
html body.home .granum-panel,
html body.home .granum-program-card,
html body.home .granum-real-book__task-card,
html body.home .granum-result-card,
html body.home .granum-results-card,
html body.home .granum-review-card,
html body.home .granum-step-card,
html body.home .granum-stories-v41__card,
html body.home .granum-story-card,
html body.home .granum-testing__benefits-panel,
html body.home .granum-tile,
html body.home .granum-why-card {
        transform:
            none !important;

        transition-duration:
            140ms !important;
    }
}

/* GRANUM CHEAP CARD HOVER V69 END */