/* =================================== */
/* =================================== */
/* =================================== */
/* D. O. 2026 */
/* =====OCTOBER 2026 For Statoplan =====*/
/* =================================== */
/* =================================== */
/* HTML CSS JS GSAP */
/* =================================== */
/* 00. Background Symbols */
/* 01. Header Section */
/* 02. Shared: headings, buttons, arrows, dividers */
/* 03. Hero Section */
/* 04. School Section */
/* 05. Recognize Section */
/* 06. Course Section */
/* 07. Free Section */
/* 08. Speakers Section */
/* 09. Program Section */
/* 10. FAQ Section */
/* 11. Guarantee Section */
/* 12. Registration Section */
/* 15. Registration Modal */
/* 17. Footer Section */
/* every section has its own "Responsive Start / End" block right after it */
/* =================================== */


/* 00. Background Symbols Start */
/* the canvas itself is drawn from js/animate.js -> 11 */
.bg-symbols{
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/* 00. Background Symbols End */


/* 01. Header Section Start */
header {
    position: fixed;   /* закрепляет элемент */
    top: 0;            /* привязка к верхней границе окна */
    left: 0;
    width: 100%;       /* растягиваем на всю ширину окна */
    z-index: 1000;     /* поверх всех остальных элементов */
    padding-top: 19px;
    transition: padding .45s cubic-bezier(.65, 0, .25, 1);
}

/* the plate sticks out 10/20px past the container, so at the top (no plate)
   the logo and the button sit exactly on the container edges like in Figma */
.header__wrap{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 -10px 0 -20px;
    padding: 10px 10px 10px 20px;
}

/* glass plate: hidden on the hero, drawn after ~35px of scroll (class .is-scrolled from js/app.js) */
.header__wrap::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(33, 35, 38, 0);
    border: 1px solid rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0);
    clip-path: inset(0 50% 0 50%);
    transition: clip-path .7s cubic-bezier(.65, 0, .25, 1), background .45s ease, border-color .45s ease, backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease, box-shadow .45s ease;
}

header.is-scrolled{
    padding-top: 10px;
}

header.is-scrolled .header__wrap::before{
    clip-path: inset(0 0 0 0);
    background: rgba(33, 35, 38, .62);
    border-color: rgba(255, 255, 255, .09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

/* yellow terminal ticks in the plate corners */
.header__wrap::after{
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        linear-gradient(#F7B500, #F7B500) left top / 10px 1px no-repeat,
        linear-gradient(#F7B500, #F7B500) left top / 1px 10px no-repeat,
        linear-gradient(#F7B500, #F7B500) right bottom / 10px 1px no-repeat,
        linear-gradient(#F7B500, #F7B500) right bottom / 1px 10px no-repeat;
    opacity: 0;
    transition: opacity .4s ease .3s;
}

header.is-scrolled .header__wrap::after{
    opacity: 1;
}

.header__wrap-col1{
    display: block;
    flex-shrink: 0;
}

.header__logo{
    width: 193px;
    height: auto;
}

.header__wrap-col2{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header__wrap-col1-ul {
    display: flex;
    align-items: center;
    gap: 90px;
}

.header__link{
    position: relative;
    color: #D3D6D8;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: color .3s ease;
}

/* hover: underline "loads" in steps, like a progress bar */
.header__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background-color: var(--color-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.header__link:hover{
    color: var(--color-white);
}

.header__link:hover::after {
    transform: scaleX(1);
}

.header__btn{
    margin-left: -40px;
}

/* Иконка бургера */
.burger-icon {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    height: 18px;
    width: 30px;
    cursor: pointer;
}

.burger-line {
    background-color: var(--color-white);
    height: 2px;
    width: 100%;
    transition: transform .35s ease, opacity .25s ease;
}

.burger-icon[aria-expanded="true"] .burger-line:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.burger-icon[aria-expanded="true"] .burger-line:nth-child(2){ opacity: 0; }
.burger-icon[aria-expanded="true"] .burger-line:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
/* 01. Header Section End */

/* 01. Header Section Responsive Start */
@media (max-width: 1280px) {
    .header__wrap-col1-ul{ gap: 48px; }
    .header__btn{ margin-left: -16px; }
}

@media (max-width: 1024px) {
    .burger-icon {
        display: flex;
    }

    header{ padding-top: 10px; }

    .header__logo{ width: 160px; }

    .header__wrap{
        margin: 0 -12px;
        padding: 12px;
    }

    .header__wrap-col1-ul {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        position: fixed;
        top: 86px;
        left: 24px;
        right: 24px;
        z-index: 999;
        margin: 0;
        padding: 30px 22px 22px;
        border: 1px solid var(--color-line);
        background: rgba(27, 29, 32, .94);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
    }

    .header__link {
        font-size: 22px;
        text-align: left;
        align-self: flex-start;
    }

    .header__link::before{
        content: "> ";
        color: var(--color-yellow);
    }

    .header__btn{
        margin: 8px 0 0;
        width: 100%;
    }

    .header__wrap-col1-ul.active {
        display: flex;
        animation: navIn .3s ease both;
    }
}

@keyframes navIn{
    from{ clip-path: inset(0 0 100% 0); }
    to{ clip-path: inset(0 0 0 0); }
}

@media (max-width: 767px) {
    .header__logo{ width: 140px; }
    .header__wrap{ margin: 0 -8px; padding: 10px 8px; }
    .header__wrap-col1-ul{ top: 72px; left: 16px; right: 16px; }
    .header__link{ font-size: 20px; }
}
/* 01. Header Section Responsive End */


/* 02. Shared Start */
.heading{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.heading__eyebrow{
    color: var(--color-yellow);
    font-size: 26px;
    font-weight: 700;
    line-height: normal;
}

.heading__title{
    color: var(--color-white);
    font-size: 60px;
    font-weight: 700;
    line-height: normal;
}

/* yellow button */
.btn-y,
.btn-o{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    height: 60px;
    padding: 2px 32px 0 35px;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.btn-y{
    background: var(--color-yellow);
    color: #000;
}

.btn-o{
    border: 1px solid var(--color-yellow);
    color: var(--color-yellow);
}

/* hover: dark "progress" fills the button in steps, arrow moves on */
.btn-y,
.btn-o{
    transition: background-color .25s ease, color .25s ease;
}

.btn-y:hover{
    background: #FFC52E;
}

.btn-o:hover{
    background: var(--color-yellow);
    color: #000;
}

.btn-arrow{
    flex-shrink: 0;
    width: 28px;
    height: 22px;
    overflow: visible;
    transition: transform .25s ease;
}

.btn-y:hover .btn-arrow,
.btn-o:hover .btn-arrow{
    transform: translateX(4px);
}

.btn-y:active,
.btn-o:active{
    transform: translateY(1px);
}

.hero__btn,
.course__btn,
.free__btn{
    width: 350px;
}

/* square arrows (reviews / speakers) */
.arrows{
    display: flex;
    align-items: center;
    gap: 17px;
}

.arrow{
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    border: 1px solid #535B61;
    color: #969EA3;
    transition: border-color .25s ease, color .25s ease, background .25s ease, opacity .25s ease;
}

.arrow--next,
.arrow:hover{
    border-color: var(--color-yellow);
    color: var(--color-yellow);
}

.arrow:hover{
    background: rgba(247, 181, 0, .08);
}

.arrow:disabled{
    border-color: #535B61;
    color: #969EA3;
    background: none;
    opacity: .45;
    cursor: default;
}

/* hover: a yellow bar runs along the bottom edge in steps */
.card-hover{
    position: relative;
}

.card-hover::after{
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: 2px;
    z-index: 2;
    pointer-events: none;
    background: var(--color-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}

.card-hover:hover::after{
    transform: scaleX(1);
}

/* divider with a square (free section) */
.divider{
    position: relative;
    width: 1312px;
    max-width: 100%;
    height: 8px;
}

.divider::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    height: 1px;
    background: var(--color-line-grey);
}

.divider span{
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    background: #F7B501;
}

.accent-svg{
    flex-shrink: 0;
    overflow: visible;
}
/* 02. Shared End */

/* 02. Shared Responsive Start */
@media (max-width: 1280px) {
    .heading__title{ font-size: 52px; }
    .heading__eyebrow{ font-size: 24px; }
}

@media (max-width: 1024px) {
    .heading__title{ font-size: 44px; }
    .heading__eyebrow{ font-size: 21px; }
    .btn-y, .btn-o{ font-size: 18px; height: 56px; padding: 2px 24px 0 26px; }
}

@media (max-width: 767px) {
    .heading__title{ font-size: 32px; }
    .heading__eyebrow{ font-size: 17px; }
    .btn-y, .btn-o{ font-size: 15px; height: 54px; padding: 2px 18px 0 20px; gap: 16px; }
    .btn-arrow{ width: 24px; height: 19px; }
    .hero__btn, .course__btn, .free__btn{ width: 100%; }
}

@media (max-width: 380px) {
    .heading__title{ font-size: 28px; }
    .btn-y, .btn-o{ font-size: 14px; }
}
/* 02. Shared Responsive End */


/* 03. Hero Section Start */
.hero{
    position: relative;
    padding-top: 169px;
    padding-bottom: 75px;
}

.hero__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero__text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
}

.hero__prompt{
    color: #9FA8B3;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.hero__sub{
    color: #C8CDD2;
    font-family: var(--font-accent);
    font-size: 23px;
    line-height: normal;
}

.hero__title{
    width: 838px;
    max-width: 100%;
    color: var(--color-white);
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
}

.hero__lead{
    margin-bottom: 33.7px;
    color: var(--color-white);
    font-size: 23.25px;
    font-weight: 400;
    line-height: 1.45;
}

.hero__date{
    display: flex;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
}

.hero__date-day{
    color: var(--color-yellow);
    font-size: 28px;
    line-height: normal;
}

.hero__date-time{
    color: #A7ADB5;
    font-size: 26px;
    line-height: normal;
}

.hero__cta{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 19px;
}

.hero__note{
    color: #8B9197;
    font-family: var(--font-accent);
    font-size: 21px;
    line-height: normal;
}

/* right column: absolute coordinates straight from Figma (course-benefits) */
.hero__info{
    position: relative;
    flex-shrink: 0;
    width: 481px;
    height: 660px;
    font-family: var(--font-accent);
}

.hero__free{
    position: absolute;
    left: 5px;
    top: 0;
    color: var(--color-yellow);
    font-size: 49px;
    line-height: normal;
    white-space: nowrap;
}

.hero__free-line{
    position: absolute;
    left: 305px;
    top: 30px;
    width: 130px;
    height: 2px;
    background: var(--color-yellow);
}

.hero__nums{
    position: absolute;
    left: 0;
    top: 117px;
    width: 100%;
}

.hero__num{
    position: absolute;
    top: 0;
    left: 0;
}

.hero__num:last-child{
    left: 295px;
}

.hero__num-val{
    margin-bottom: -33.6px;
    color: var(--color-white);
    font-family: var(--font-main);
    font-size: 180px;
    font-weight: 400;
    line-height: 237.6px;
    white-space: nowrap;
}

.hero__num-text{
    margin-left: 5px;
    color: #A9B1BC;
    font-size: 26px;
    line-height: normal;
    white-space: nowrap;
}

.hero__num-line{
    position: absolute;
    left: 245px;
    top: 40px;
    width: 1.2px;
    height: 184px;
    background: #4B5057;
}

.hero__hr{
    position: absolute;
    left: 5px;
    top: 450px;
    width: 475px;
    height: 1.2px;
    background: var(--color-line-light);
}

.hero__item{
    position: absolute;
    left: 0;
    color: var(--color-white);
    font-size: 29px;
    line-height: normal;
    white-space: nowrap;
}

.hero__item p{
    position: absolute;
    left: 110px;
    top: 0;
}

.hero__item:first-child{ top: 502px; }
.hero__item:first-child p{ top: 5px; }
.hero__item:last-child{ top: 583px; }

.hero__icon{
    position: absolute;
    max-width: none;
    flex-shrink: 0;
    overflow: visible;
}

.hero__icon--play{ left: 21px; top: -1px; width: 38px; height: 47px; }
.hero__icon--cert{ left: 21px; top: 9px; width: 49px; height: 68px; }
/* 03. Hero Section End */

/* 03. Hero Section Responsive Start */
/* below 1280 the right column leaves the Figma coordinates and becomes a normal flow block */
@media (max-width: 1280px) {
    .hero{ padding-top: 150px; }
    .hero__title{ font-size: 96px; width: 680px; }
    .hero__lead{ font-size: 21px; }
    .hero__info{
        position: static;
        width: 380px;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
    }
    .hero__free, .hero__free-line, .hero__nums, .hero__num, .hero__num-line,
    .hero__hr, .hero__item, .hero__item p, .hero__icon{
        position: static;
    }
    .hero__free{ font-size: 42px; }
    .hero__free-line{ width: 110px; margin: 14px 0 0 0; }
    .hero__nums{
        display: grid;
        grid-template-columns: 1fr 1px 1fr;
        gap: 28px;
        margin-top: 24px;
    }
    .hero__num:last-child{ order: 3; }
    .hero__num-line{ order: 2; width: 1px; height: auto; margin-top: 30px; }
    .hero__num-val{ font-size: 140px; line-height: 1.1; margin-bottom: 4px; }
    .hero__num-text{ margin-left: 4px; font-size: 21px; white-space: normal; }
    .hero__hr{ width: 100%; margin: 32px 0 30px; }
    .hero__list{ display: flex; flex-direction: column; gap: 26px; }
    .hero__item{ display: flex; align-items: center; gap: 32px; font-size: 24px; white-space: normal; }
    .hero__icon--play{ width: 34px; height: 42px; margin-left: 4px; }
    .hero__icon--cert{ width: 42px; height: 58px; }
}

@media (max-width: 1024px) {
    .hero{ padding-top: 130px; padding-bottom: 60px; }
    .hero__inner{ flex-direction: column; align-items: stretch; gap: 56px; }
    .hero__title{ font-size: 88px; width: 100%; }
    .hero__info{
        width: 100%;
        grid-template-columns: 1fr 1fr;
        column-gap: 48px;
        align-items: start;
    }
    .hero__free, .hero__free-line{ grid-column: 1 / -1; }
    .hero__nums{ grid-column: 1; }
    .hero__hr{ display: none; }
    .hero__list{ grid-column: 2; margin-top: 46px; padding-left: 32px; border-left: 1px solid var(--color-line-light); }
}

@media (max-width: 767px) {
    .hero{ padding-top: 104px; padding-bottom: 48px; }
    .hero__text{ gap: 16px; }
    .hero__prompt{ font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
    .hero__sub{ font-size: 17px; }
    .hero__title{ font-size: 54px; line-height: 1.02; }
    .hero__lead{ font-size: 16px; margin-bottom: 8px; }
    .hero__date{ flex-wrap: wrap; gap: 4px 14px; }
    .hero__date-day{ font-size: 20px; }
    .hero__date-time{ font-size: 18px; }
    .hero__cta{ width: 100%; gap: 14px; }
    .hero__note{ font-size: 16px; }
    .hero__inner{ gap: 44px; }
    .hero__info{ grid-template-columns: 1fr; }
    .hero__free{ font-size: 34px; }
    .hero__nums{ grid-column: 1; gap: 20px; }
    .hero__num-val{ font-size: 104px; }
    .hero__num-text{ font-size: 17px; }
    .hero__num-line{ margin-top: 20px; }
    .hero__hr{ display: block; margin: 26px 0 24px; }
    .hero__list{ grid-column: 1; margin-top: 0; padding-left: 0; border-left: 0; gap: 20px; }
    .hero__item{ font-size: 20px; gap: 24px; }
    .hero__icon--play{ width: 28px; height: 35px; }
    .hero__icon--cert{ width: 34px; height: 47px; }
}

@media (max-width: 380px) {
    .hero__title{ font-size: 44px; }
    .hero__num-val{ font-size: 88px; }
}
/* 03. Hero Section Responsive End */


/* 04. School Section Start */
.school__inner{
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.school__stats{
    display: flex;
    justify-content: space-between;
    gap: 11px;
}

.school__stat{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 446px;
    height: 300px;
    padding: 30px;
    border: 1px solid var(--color-line);
    background: rgba(33, 35, 38, .55);
    transition: border-color .3s ease, background .3s ease;
}

.school__stat:hover{
    border-color: #4A4E54;
    background: rgba(38, 40, 44, .85);
}

.school__stat-in{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.school__stat-body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 299px;
    overflow: visible;
}

.school__stat-row{
    display: flex;
    align-items: center;
    gap: 20px;
}

.school__stat-val{
    color: var(--color-white);
    font-size: 70px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.school__stat-unit{
    color: var(--color-white);
    font-family: var(--font-accent);
    font-size: 39px;
    line-height: normal;
}

.school__stat-text{
    width: 375px;
    color: #BBC2CA;
    font-family: var(--font-accent);
    font-size: 23px;
    line-height: 1.45;
}

.school__stat-sq{
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-right: -11px;
    background: var(--color-yellow);
}

.school__it{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.school__it-title{
    color: var(--color-white);
    font-size: 40px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
}

.school__it-title span{
    color: var(--color-cyan-title);
}

.school__it-right{
    display: flex;
    align-items: center;
    gap: 49px;
    width: 675px;
    flex-shrink: 0;
}

.school__it-line{
    flex-shrink: 0;
    width: 1.2px;
    height: 86px;
    background: #67717B;
}

.school__it-text{
    color: #B4BAC0;
    font-family: var(--font-accent);
    font-size: 26px;
    line-height: normal;
}

.school__media{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 11px;
}

/* video placeholder */
.media-video{
    position: relative;
    flex-shrink: 0;
    width: 674px;
    height: 399.5px;
    overflow: hidden;
    border: 1.5px solid #60676C;
    background: var(--color-ink-video);
}

.media-video__corner{
    position: absolute;
    width: 17.3px;
    height: 16px;
    border-color: #939A9F;
    border-style: solid;
    border-width: 0;
    pointer-events: none;
    z-index: 2;
    transition: transform .4s cubic-bezier(.65, 0, .25, 1), border-color .3s ease;
}

.media-video__corner--tl{ left: 29px; top: 27px; border-left-width: 1.5px; border-top-width: 1.5px; }
.media-video__corner--tr{ right: 29px; top: 27px; border-right-width: 1.5px; border-top-width: 1.5px; }
.media-video__corner--bl{ left: 29px; bottom: 26px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.media-video__corner--br{ right: 29px; bottom: 26px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

.media-video:hover .media-video__corner{ border-color: var(--color-yellow); }
.media-video:hover .media-video__corner--tl{ transform: translate(-6px, -6px); }
.media-video:hover .media-video__corner--tr{ transform: translate(6px, -6px); }
.media-video:hover .media-video__corner--bl{ transform: translate(-6px, 6px); }
.media-video:hover .media-video__corner--br{ transform: translate(6px, 6px); }

.media-video__play{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 117px;
    height: 108px;
    transform: translate(-50%, -50%);
    transition: transform .3s cubic-bezier(.65, 0, .25, 1);
}

.media-video__play svg{
    width: 100%;
    height: 100%;
    overflow: visible;
}

.media-video__play:hover{
    transform: translate(-50%, -50%) scale(1.08);
}

.media-video iframe,
.media-video video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 3;
}

.media-video.is-playing .media-video__play,
.media-video.is-playing .media-video__corner{
    display: none;
}

/* review card */
.quote{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 675px;
    flex-shrink: 0;
}

.quote__card{
    position: relative;
    width: 655px;
    height: 399.5px;
    margin-top: 1px;
    border: 1.5px solid var(--color-line);
    background: var(--color-ink-card);
}

.quote__sq{
    position: absolute;
    right: -1.5px;
    top: -2.5px;
    width: 9px;
    height: 9px;
    background: var(--color-yellow);
}

.quote__mark{
    position: absolute;
    left: 30.5px;
    top: 32.5px;
    color: var(--color-yellow);
    font-size: 42px;
    line-height: normal;
}

.quote__body{
    position: absolute;
    left: 78.25px;
    top: 50.5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 544px;
    height: 314px;
}

.quote__slides{
    position: relative;
    display: grid;
}

.quote__slide{
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: 100%;
    font-size: 23px;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
}

.quote__slide.is-active{
    opacity: 1;
    visibility: visible;
}

.quote__text{
    color: var(--color-text);
}

.quote__note{
    color: #A3A9AD;
}

.quote__progress{
    position: relative;
    height: 3.5px;
    border-bottom: 1px solid #343A3E;
}

.quote__progress i{
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 3px;
    background: var(--color-cyan);
}

.quote__nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 655.5px;
}

.quote__count{
    color: var(--color-text);
    font-size: 16px;
    line-height: normal;
}

.quote__count-total{
    color: #737C82;
}

.quote__count-total i{
    font-style: normal;
}
/* 04. School Section End */

/* 04. School Section Responsive Start */
@media (max-width: 1439px) {
    .school__stat{ width: auto; flex: 1 1 0; }
    .school__stat-body{ width: auto; flex: 1; }
    .school__stat-text{ width: auto; }
    .school__stat-sq{ margin-right: 0; }
    .media-video{ width: auto; flex: 1 1 0; height: auto; aspect-ratio: 674 / 399.5; }
    .quote{ width: auto; flex: 1 1 0; }
    .quote__card{ width: auto; height: auto; aspect-ratio: 655 / 399.5; margin-right: 20px; }
    .quote__body{ left: 78.25px; right: 32px; width: auto; height: auto; bottom: 34px; }
    .quote__nav{ width: auto; margin-right: 20px; }
}

@media (max-width: 1280px) {
    .school__inner{ gap: 64px; }
    .school__stat{ height: 260px; padding: 26px; }
    .school__stat-val{ font-size: 58px; }
    .school__stat-unit{ font-size: 32px; }
    .school__stat-text{ font-size: 19px; }
    .school__it-title{ font-size: 34px; }
    .school__it-right{ width: auto; gap: 32px; }
    .school__it-text{ font-size: 21px; }
    .quote__slide{ font-size: 19px; width: auto; gap: 24px; }
    .quote__mark{ font-size: 34px; }
    .quote__body{ left: 66px; }
}

@media (max-width: 1024px) {
    .school__inner{ gap: 48px; }
    .school__stats{ flex-direction: column; gap: 16px; }
    .school__stat{ flex: none; width: 100%; height: auto; min-height: 200px; }
    .school__stat-in{ gap: 16px; }
    .school__it{ flex-direction: column; align-items: flex-start; gap: 20px; }
    .school__it-title{ white-space: normal; }
    .school__it-line{ display: none; }
    .school__media{ flex-direction: column; gap: 24px; }
    .media-video{ width: 100%; flex: none; }
    .quote{ width: 100%; flex: none; }
    .quote__card{ margin-right: 0; aspect-ratio: auto; min-height: 360px; }
    .quote__nav{ margin-right: 0; }
}

@media (max-width: 767px) {
    .school__stat{ padding: 22px; min-height: 0; }
    .school__stat-val{ font-size: 46px; }
    .school__stat-unit{ font-size: 26px; }
    .school__stat-text{ font-size: 16px; }
    .school__stat-text br{ display: none; }
    .school__it-title{ font-size: 26px; }
    .school__it-text{ font-size: 17px; }
    .school__it-text br{ display: none; }
    .media-video__play{ width: 78px; height: 72px; }
    .media-video__corner--tl, .media-video__corner--bl{ left: 14px; }
    .media-video__corner--tr, .media-video__corner--br{ right: 14px; }
    .media-video__corner--tl, .media-video__corner--tr{ top: 14px; }
    .media-video__corner--bl, .media-video__corner--br{ bottom: 14px; }
    .quote__card{ min-height: 340px; }
    .quote__mark{ left: 18px; top: 18px; font-size: 28px; }
    .quote__body{ left: 48px; right: 20px; top: 26px; bottom: 24px; }
    .quote__slide{ font-size: 15px; }
    .quote__slide br{ display: none; }
}
/* 04. School Section Responsive End */


/* 05. Recognize Section Start */
.recognize__inner{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.recognize__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.recognize__grid{
    display: flex;
    flex-direction: column;
    gap: 33px;
    width: 1354px;
    max-width: 100%;
}

.recognize__row{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 33px;
}

.point{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 30px;
    border: 1.5px solid var(--color-line);
    background: var(--color-ink-card);
    transition: border-color .3s ease;
}

.point:hover{
    border-color: #4A4E54;
}

.point--01{ width: 59.77%; min-height: 451px; }
.point--02{ width: 37.75%; min-height: 387px; gap: 2px; }
.point--03{ width: 37.75%; min-height: 315px; }
.point--04{ width: 59.79%; min-height: 316px; }

.point__line{
    position: absolute;
    left: -1.5px;
    top: -1.5px;
    width: 24.5%;
    height: 2px;
    background: var(--color-line);
}

.point__num{
    color: var(--color-text-num);
    font-size: 92px;
    font-weight: 400;
    line-height: normal;
    transition: color .3s ease;
}

.point:hover .point__num{
    color: #9AA2A7;
}

.point__text{
    color: var(--color-text-light);
    font-size: 22px;
    line-height: 1.45;
}

.point--02 .point__text{ font-size: 21px; }
.point--03 .point__text{ font-size: 21px; line-height: normal; }

/* 04: the yellow one */
.point--04{
    padding: 31px 30px 30px 6.89%;
    border-color: var(--color-yellow);
    background: var(--color-yellow);
    overflow: hidden;
}

.point--04 .point__num{
    color: #282507;
    font-size: 96px;
}

.point--04 .point__text{
    color: #121408;
    font-size: 24px;
    line-height: normal;
}

.point__corner{
    position: absolute;
    width: 8.26px;
    height: 8px;
    border-color: #29290D;
    border-style: solid;
    border-width: 0;
}

.point__corner--tr{ right: 20px; top: 28px; border-top-width: 1.5px; border-right-width: 1.5px; }
.point__corner--bl{ left: 3.57%; bottom: 28px; border-bottom-width: 1.5px; border-left-width: 1.5px; }

/* 04 hover: diagonal scan-line runs across the yellow card */
.point--04::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 4px);
    opacity: 0;
    transition: opacity .3s ease;
}

.point--04:hover::after{
    opacity: 1;
}
/* 05. Recognize Section End */

/* 05. Recognize Section Responsive Start */
@media (max-width: 1280px) {
    .point__num{ font-size: 76px; }
    .point--04 .point__num{ font-size: 80px; }
    .point__text, .point--02 .point__text, .point--03 .point__text{ font-size: 18px; }
    .point--04 .point__text{ font-size: 20px; }
    .point--01{ min-height: 400px; }
    .point--02{ min-height: 340px; }
}

@media (max-width: 1024px) {
    .recognize__row{ flex-direction: column; align-items: stretch; gap: 20px; }
    .recognize__row--rev{ flex-direction: column; }
    .recognize__grid{ gap: 20px; }
    .point--01, .point--02, .point--03, .point--04{ width: 100%; min-height: 0; }
    .point__text br{ display: none; }
    .recognize__accent{ width: 110px; height: auto; }
}

@media (max-width: 767px) {
    .point{ padding: 22px; }
    .point--04{ padding: 24px 22px 28px 26px; }
    .point__num, .point--04 .point__num{ font-size: 56px; }
    .point__text, .point--02 .point__text, .point--03 .point__text, .point--04 .point__text{ font-size: 15px; line-height: 1.5; }
    .point__corner--tr{ right: 12px; top: 12px; }
    .point__corner--bl{ left: 12px; bottom: 12px; }
    .recognize__accent{ width: 76px; }
}
/* 05. Recognize Section Responsive End */


/* 06. Course Section Start */
.course__inner{
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.course__top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.course__head{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 167px;
    flex-shrink: 0;
}

.course__about{
    color: #B0B6BA;
    font-size: 21px;
    line-height: 1.45;
}

.course__statement{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.course__statement-text{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 648px;
    max-width: 100%;
}

.course__lead{
    color: var(--color-text);
    font-size: 34px;
    line-height: normal;
}

.course__lead-sub{
    color: #989FA4;
    font-size: 24px;
    line-height: normal;
}

.talks{
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.talk{
    position: relative;
    display: flex;
    align-items: center;
    gap: 82px;
    min-height: 192px;
    padding: 41px 44px 40px 46px;
    border-top: 1px solid var(--color-line-mid);
    isolation: isolate;
}

/* bg of the active row "loads" left to right in steps; the first row is active at start */
.talk::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-ink-card);
    opacity: 0;
    transition: opacity .3s ease;
}

.talk.is-active::before{
    opacity: 1;
}

.talk__icon{
    flex-shrink: 0;
    overflow: visible;
    transition: none;
}

.talk__head{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 314px;
    flex-shrink: 0;
}

.talk__title{
    color: var(--color-text);
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
}

.talk__dash{
    width: 33px;
    height: 2px;
    background: var(--color-yellow);
    transform-origin: left;
    transition: transform .3s ease;
}

.talk.is-active .talk__dash{
    transform: scaleX(2);
}

.talk__line{
    flex-shrink: 0;
    width: 1px;
    height: 112px;
    background: var(--color-line-soft);
}

.talk__text{
    flex: 1;
    max-width: 652px;
    color: #BEC3C6;
    font-size: 21px;
    line-height: normal;
}
/* 06. Course Section End */

/* 06. Course Section Responsive Start */
@media (max-width: 1280px) {
    .course__about{ font-size: 18px; }
    .course__about br{ display: none; }
    .course__lead{ font-size: 28px; }
    .course__lead-sub{ font-size: 20px; }
    .talk{ gap: 48px; }
    .talk__head{ width: 270px; }
    .talk__title{ font-size: 24px; }
    .talk__text{ font-size: 18px; }
}

@media (max-width: 1024px) {
    .course__inner{ gap: 56px; }
    .course__top{ flex-direction: column; align-items: flex-start; gap: 28px; }
    .course__head{ height: auto; gap: 26px; }
    .course__statement{ flex-direction: column; align-items: flex-start; gap: 28px; }
    .talk{ flex-wrap: wrap; gap: 24px 32px; padding: 32px 28px; }
    .talk__line{ display: none; }
    .talk__text{ flex: 1 1 100%; max-width: none; padding-left: 92px; }
    .talk__text br{ display: none; }
}

@media (max-width: 767px) {
    .course__about{ font-size: 15px; }
    .course__lead{ font-size: 22px; }
    .course__lead-sub{ font-size: 16px; }
    .talks{ gap: 12px; }
    .talk{ min-height: 0; padding: 24px 18px; gap: 18px 20px; }
    .talk__icon{ width: 42px; height: auto; }
    .talk__head{ width: auto; flex: 1; gap: 16px; }
    .talk__title{ font-size: 19px; }
    .talk__text{ font-size: 15px; padding-left: 0; }
}
/* 06. Course Section Responsive End */


/* 07. Free Section Start */
.free__inner{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
}

.free__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

.free__lock{
    flex-shrink: 0;
    overflow: visible;
}

.free__lock-arc{
    transform-box: fill-box;
    transform-origin: 100% 100%;
    transition: transform .5s cubic-bezier(.65, 0, .25, 1);
}

.free__head:hover .free__lock-arc{
    transform: translateY(-8px);
}

.free__lock-plus{
    transform-box: fill-box;
    transform-origin: center;
}

.free__cols{
    display: flex;
    align-items: flex-start;
    gap: 62px;
}

.free__text{
    width: 581px;
    color: #F0F1EF;
    font-size: 22px;
    line-height: 35px;
}

.free__text .y{
    color: #F7B501;
}

.free__text--muted{
    width: 607px;
    color: var(--color-text-muted);
}

.free__line{
    flex-shrink: 0;
    width: 1px;
    height: 284px;
    background: var(--color-line-grey);
}
/* 07. Free Section End */

/* 07. Free Section Responsive Start */
@media (max-width: 1280px) {
    .free__cols{ gap: 40px; }
    .free__text, .free__text--muted{ width: auto; flex: 1; font-size: 19px; line-height: 31px; }
    .free__line{ height: auto; align-self: stretch; }
}

@media (max-width: 1024px) {
    .free__inner{ gap: 40px; }
    .free__lock{ width: 130px; height: auto; }
    .free__cols{ flex-direction: column; gap: 28px; }
    .free__line{ width: 100%; height: 1px; }
}

@media (max-width: 767px) {
    .free__lock{ width: 86px; }
    .free__text, .free__text--muted{ font-size: 15px; line-height: 25px; }
}
/* 07. Free Section Responsive End */


/* 08. Speakers Section Start */
.speakers__inner{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.speakers__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.speakers__head .arrows{
    gap: 20px;
}

.speakers__viewport{
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

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

.speakers__list{
    display: flex;
    gap: 10px;
}

.speaker{
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 0 0 calc((100% - 20px) / 3);
    padding: 15px;
    border: 1px solid var(--color-line);
    background: var(--color-ink-card);
    scroll-snap-align: start;
}

.speaker__photo{
    position: relative;
    height: 350px;
    overflow: hidden;
    background: linear-gradient(180deg, #2F3136 0%, #232529 100%);
}

.speaker__photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    filter: grayscale(.15);
    transition: transform .6s ease, filter .4s ease;
}

/* scan-lines over the photo on hover */
.speaker__photo::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px);
    opacity: 1;
    transition: opacity .3s ease;
}

.speaker:hover .speaker__photo img{
    transform: scale(1.02);
    filter: grayscale(0);
}

.speaker:hover .speaker__photo::after{
    opacity: .6;
}

.speaker__info{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    min-height: 150px;
    padding: 20px 10px 4px;
}

.speaker__name{
    color: var(--color-white);
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.6px;
    text-transform: uppercase;
}

.speaker__text{
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.45;
}

.speaker__chip{
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
    background: linear-gradient(0deg, rgba(255, 255, 255, .01) 0%, rgba(255, 255, 255, .06) 100%), var(--color-ink-chip);
    transition: background .3s ease;
}

.speaker__chip:hover{
    background: linear-gradient(0deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .1) 100%), var(--color-ink-chip);
}

.speaker__chip-l{
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.speaker__ava{
    display: block;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
}

.speaker__ava svg{
    width: 45px;
    height: 45px;
}

.speaker__go{
    flex-shrink: 0;
    margin-right: 6px;
    color: var(--color-text-muted);
    transition: transform .25s ease, color .25s ease;
}

.speaker__chip:hover .speaker__go{
    transform: translateX(4px);
    color: var(--color-yellow);
}

.speaker__chip-t{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.speaker__chip-t b,
.speaker__chip-t i{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.speaker__chip-t b{
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.speaker__chip-t i{
    color: var(--color-text-muted);
    font-size: 12px;
    font-style: normal;
    line-height: 16px;
}


.speaker__ava--photo{
    overflow: hidden;
    border-radius: 50%;
    background: #3A3D42;
}

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

.speaker__tg{
    flex-shrink: 0;
    margin-right: 4px;
    transition: transform .25s ease;
}

.speaker__chip:hover .speaker__tg{
    transform: translateX(3px);
}
/* 08. Speakers Section End */

/* 08. Speakers Section Responsive Start */
@media (max-width: 1280px) {
    .speaker__photo{ height: 300px; }
    .speaker__name{ font-size: 21px; }
    .speaker__info{ min-height: 140px; }
}

@media (max-width: 1024px) {
    .speakers__head{ gap: 24px; }
    .speaker{ flex-basis: calc((100% - 10px) / 2); }
}

@media (max-width: 767px) {
    .speakers__inner{ gap: 32px; }
    .speakers__head{ align-items: flex-end; }
    .speakers__head .arrows{ gap: 10px; }
    .arrow{ width: 42px; height: 42px; }
    .speaker{ flex-basis: 86%; }
    .speaker__photo{ height: 280px; }
    .speaker__info{ min-height: 0; padding: 14px 4px 18px; gap: 10px; }
    .speaker__name{ font-size: 19px; }
    .speaker__text{ font-size: 14px; }
}
/* 08. Speakers Section Responsive End */


/* 09. Program Section Start */
#program{
    padding-top: 20px;
}

.program__inner{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
}

.program__head{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.program__lead{
    color: var(--color-text-muted);
    font-size: 22px;
    line-height: 35px;
}

.program__tabs{
    display: flex;
    justify-content: space-between;
    gap: 13px;
    width: 100%;
}

.program__tab{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    flex: 0 0 calc((100% - 26px) / 3);
    min-height: 128px;
    padding: 15px 23px 18px;
    overflow: hidden;
    isolation: isolate;
    border: 1.5px solid var(--color-line);
    background: var(--color-ink-card);
    color: #E5E9EB;
    text-align: left;
    transition: color .25s ease .1s, border-color .25s ease;
}

/* active tab: yellow fills it in steps */
.program__tab::before{
    content: "";
    position: absolute;
    inset: -1.5px;
    z-index: -1;
    background: var(--color-yellow);
    opacity: 0;
    transition: opacity .25s ease;
}

.program__tab:hover{
    border-color: #4A4E54;
}

.program__tab.is-active{
    color: #101309;
    border-color: var(--color-yellow);
}

.program__tab.is-active::before{
    opacity: 1;
}

.program__tab-day{
    font-size: 17px;
    font-weight: 400;
    line-height: normal;
}

.program__tab-name{
    font-size: 25px;
    font-weight: 700;
    line-height: normal;
}

.program__panes{
    width: 100%;
}

.program__pane{
    display: none;
}

.program__pane.is-active{
    display: block;
}

.program__item{
    padding: 62px 44px 61px 46px;
    border-bottom: 1px solid var(--color-line-mid);
}

.program__item:first-child{
    padding-top: 41px;
}

/* rows fade in again when the tab is switched (class is added from js/app.js) */
.program__pane.is-swapped .program__item{
    animation: amRowIn .35s ease both;
    animation-delay: calc(var(--i) * .04s);
}

.program__row{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    text-align: left;
}

.program__label{
    flex-shrink: 0;
    width: 172px;
    padding-top: 3px;
    color: var(--color-yellow);
    font-size: 20px;
    line-height: normal;
}

.program__name{
    flex: 1;
    color: var(--color-text);
    font-size: 25px;
    font-weight: 700;
    line-height: normal;
    transition: color .25s ease;
}

.program__row:hover .program__name{
    color: var(--color-yellow);
}

.program__toggle{
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 40px;
}

.program__toggle::before,
.program__toggle::after{
    content: "";
    position: absolute;
    background: #F7B501;
    transition: transform .3s cubic-bezier(.65, 0, .25, 1);
}

.program__toggle::before{
    left: 0;
    top: 9.25px;
    width: 20px;
    height: 1.5px;
}

.program__toggle::after{
    left: 9.25px;
    top: 0;
    width: 1.5px;
    height: 20px;
}

.program__item.is-open .program__toggle::after{
    transform: scaleY(0);
}

.program__panel{
    display: grid;
    grid-template-rows: 0fr;
    margin-left: 172px;
    transition: grid-template-rows .45s cubic-bezier(.65, 0, .25, 1);
}

.program__item.is-open .program__panel{
    grid-template-rows: 1fr;
}

.program__panel-in{
    overflow: hidden;
}

.program__points{
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 26px;
}

.program__points:empty{
    display: none;
}

.program__points li{
    position: relative;
    padding-left: 24px;
    color: var(--color-text-muted);
    font-size: 19px;
    line-height: normal;
}

.program__points li::before{
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    background: #F7B501;
}
.program__item--final .program__label{
    color: var(--color-cyan);
}

.program__item--final .program__points li::before{
    background: var(--color-cyan);
}
/* время эфира под меткой «Эфир N.» */
.program__time{
    display: block;
    margin-top: 6px;
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: normal;
    white-space: nowrap;
}
@media (max-width: 1024px) {
    .program__time{ font-size: 12px; }
}
@media (max-width: 767px) {
    .program__time{ display: inline; margin: 0 0 0 10px; font-size: 13px; }
}
/* 09. Program Section End */

/* 09. Program Section Responsive Start */
@media (max-width: 1280px) {
    .program__tab-name{ font-size: 21px; }
    .program__tab-day{ font-size: 15px; }
    .program__name{ font-size: 22px; }
    .program__points li{ font-size: 17px; }
}

@media (max-width: 1024px) {
    .program__inner{ gap: 36px; }
    .program__lead{ font-size: 18px; line-height: 28px; }
    .program__tabs{ gap: 8px; }
    .program__tab{ flex-basis: calc((100% - 16px) / 3); min-height: 110px; padding: 14px 16px; }
    .program__tab-name{ font-size: 17px; }
    .program__tab-day{ font-size: 13px; }
    .program__item{ padding: 36px 8px 36px 8px; }
    .program__item:first-child{ padding-top: 28px; }
    .program__label{ width: 120px; font-size: 17px; }
    .program__panel{ margin-left: 120px; }
    .program__name{ font-size: 20px; }
}

@media (max-width: 767px) {
    .program__lead{ font-size: 15px; line-height: 24px; }
    .program__tabs{ flex-direction: column; }
    .program__tab{ min-height: 0; padding: 14px 16px 16px; }
    .program__tab-name{ font-size: 17px; }
    .program__item{ padding: 26px 0; }
    .program__item:first-child{ padding-top: 14px; }
    .program__row{ flex-wrap: wrap; row-gap: 8px; }
    .program__label{ width: 100%; order: -1; font-size: 15px; padding-top: 0; }
    .program__name{ font-size: 17px; }
    .program__toggle{ margin-left: 20px; }
    .program__panel{ margin-left: 0; }
    .program__points{ padding-top: 18px; gap: 10px; }
    .program__points li{ font-size: 15px; padding-left: 18px; }
    .program__btn{ width: 100%; white-space: normal; text-align: left; }
}
/* 09. Program Section Responsive End */


/* 10. FAQ Section Start */
.faq__inner{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.faq__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    flex-shrink: 0;
}

.faq__list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 889px;
}

.faq__card{
    display: flex;
    flex-direction: column;
    gap: 21px;
    padding: 30px;
    border: 1.5px solid var(--color-line);
    background: var(--color-ink-card);
    transition: border-color .3s ease;
}

.faq__card:hover{
    border-color: #4A4E54;
}

.faq__q{
    color: #F0F2F1;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
}

.faq__a{
    color: rgba(181, 188, 192, .74);
    font-size: 21px;
    line-height: 1.45;
}
/* 10. FAQ Section End */

/* 10. FAQ Section Responsive Start */
@media (max-width: 1280px) {
    .faq__list{ width: auto; flex: 1; max-width: 820px; }
    .faq__q{ font-size: 21px; }
    .faq__a{ font-size: 18px; }
    .faq__a br{ display: none; }
}

@media (max-width: 1024px) {
    .faq__inner{ flex-direction: column; gap: 40px; }
    .faq__head{ align-items: flex-start; }
    .faq__list{ width: 100%; max-width: none; }
}

@media (max-width: 767px) {
    .faq__head{ gap: 20px; }
    .faq__accent{ width: 180px; height: auto; }
    .faq__list{ gap: 12px; }
    .faq__card{ padding: 20px; gap: 14px; }
    .faq__q{ font-size: 17px; }
    .faq__a{ font-size: 15px; }
}
/* 10. FAQ Section Responsive End */


/* 11. Guarantee Section Start */
.guarantee__inner{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.guarantee__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.guarantee__about{
    width: 886px;
    color: var(--color-text-muted);
    font-size: 22px;
    line-height: 1.45;
}

.guarantee__box{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 236px;
    padding: 20px 81px 20px 41px;
    border: 1.5px solid #566169;
    background: var(--color-ink-box);
}

.frame-corner{
    position: absolute;
    width: 34px;
    height: 33px;
    border-color: #F7B501;
    border-style: solid;
    border-width: 0;
    pointer-events: none;
}

.frame-corner--tl{ left: -1.5px; top: -1.5px; border-left-width: 2px; border-top-width: 2px; }
.frame-corner--tr{ right: -1.5px; top: -1.5px; border-right-width: 2px; border-top-width: 2px; }
.frame-corner--bl{ left: -1.5px; bottom: -1.5px; border-left-width: 2px; border-bottom-width: 2px; }
.frame-corner--br{ right: -1.5px; bottom: -1.5px; border-right-width: 2px; border-bottom-width: 2px; }

.guarantee__title{
    position: relative;
    color: #F7B501;
    font-size: 76px;
    font-weight: 700;
    line-height: normal;
}

.guarantee__shield{
    flex-shrink: 0;
    overflow: visible;
}

.guarantee__note{
    color: var(--color-text-muted);
    font-size: 28px;
    line-height: normal;
}

.guarantee__note b{
    color: var(--color-text);
    font-weight: 700;
}
/* 11. Guarantee Section End */

/* 11. Guarantee Section Responsive Start */
@media (max-width: 1280px) {
    .guarantee__about{ width: auto; max-width: 760px; font-size: 19px; }
    .guarantee__title{ font-size: 62px; }
}

@media (max-width: 1024px) {
    .guarantee__inner{ gap: 40px; }
    .guarantee__head{ flex-direction: column; align-items: flex-start; gap: 20px; }
    .guarantee__box{ padding: 32px 40px; min-height: 200px; }
    .guarantee__title{ font-size: 50px; }
    .guarantee__shield{ width: 80px; height: auto; }
    .guarantee__note{ font-size: 22px; }
}

@media (max-width: 767px) {
    .guarantee__about{ font-size: 15px; }
    .guarantee__box{ padding: 28px 22px; min-height: 0; gap: 16px; }
    .guarantee__title{ font-size: 30px; }
    .guarantee__shield{ width: 52px; }
    .frame-corner{ width: 22px; height: 22px; }
    .guarantee__note{ font-size: 17px; }
}

@media (max-width: 380px) {
    .guarantee__title{ font-size: 25px; }
}
/* 11. Guarantee Section Responsive End */


/* 12. Registration Section Start */
.reg__inner{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.reg__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.reg__head .heading__title{
    white-space: nowrap;
}

.reg__when{
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 24px;
    line-height: normal;
}

.reg__date{
    color: #F7B501;
}

.reg__date span{
    color: #A5AFB6;
}

.reg__name{
    color: #E9ECEC;
}

.reg__cards{
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.reg__card{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 49.5%;
    min-height: 665px;
    padding: 37px 33px 30px 33px;
    border: 1.5px solid #4B646E;
    background: var(--color-ink-free);
    --reg-accent: var(--color-cyan);
    color: var(--reg-accent);
}

.reg__card--paid{
    border-color: #6C623C;
    background: var(--color-ink-page);
    --reg-accent: #F7B501;
}

.reg__accent{
    position: absolute;
    left: -1.5px;
    top: -1.5px;
    width: 168.5px;
    height: 2px;
    background: var(--reg-accent);
    transform-origin: left;
    transition: width .5s ease;
}

.reg__card:hover .reg__accent{
    width: calc(100% + 3px);
}

.reg__sq{
    position: absolute;
    right: -5px;
    top: -1.5px;
    width: 8.4px;
    height: 8px;
    background: var(--reg-accent);
}

.reg__card-head{
    display: flex;
    align-items: center;
    gap: 18px;
}

.reg__card--paid .reg__card-head{
    gap: 28px;
}

.reg__icon{
    flex-shrink: 0;
    overflow: visible;
}

.reg__card-titles{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reg__card-title{
    color: var(--color-text);
    font-size: 25px;
    font-weight: 700;
    line-height: normal;
}

.reg__card-text{
    color: var(--color-text-soft);
    font-size: 18px;
    line-height: normal;
}

.reg__line{
    display: block;
    width: 95%;
    height: 1px;
    margin: 33px 0;
    background: #414B52;
}

.reg__card--paid .reg__line{
    width: 100%;
}

.reg__label{
    color: var(--color-text-soft);
    font-size: 17px;
    line-height: normal;
}

.reg__list{
    display: flex;
    flex-direction: column;
    gap: 27px;
    margin-top: 27px;
}

.reg__card--paid .reg__list{
    gap: 28px;
    margin-top: 28px;
}

.reg__item{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: #E4E9EB;
    font-size: 18px;
    line-height: normal;
}

.reg__check{
    flex-shrink: 0;
    width: 19px;
    height: 18px;
    margin-top: 1px;
    color: var(--reg-accent);
    overflow: visible;
}

.reg__link{
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(247, 181, 1, .6);
    text-underline-offset: 4px;
    transition: color .25s ease;
}

.reg__link:hover{
    color: #F7B501;
}

.reg__btn{
    width: 100%;
    margin-top: auto;
}

.reg__list + .reg__btn{
    margin-top: auto;
}

.reg__card .reg__list{
    margin-bottom: 40px;
}
/* 12. Registration Section End */

/* 12. Registration Section Responsive Start */
@media (max-width: 1280px) {
    .reg__when{ font-size: 20px; gap: 14px; }
    .reg__card{ min-height: 620px; }
    .reg__card-title{ font-size: 22px; }
    .reg__card-text, .reg__item{ font-size: 16px; }
    .reg__card-text br, .reg__item br{ display: none; }
}

@media (max-width: 1024px) {
    .reg__head{ flex-direction: column; align-items: flex-start; gap: 20px; }
    .reg__head .heading__title{ white-space: normal; }
    .reg__cards{ flex-direction: column; gap: 24px; }
    .reg__card{ width: 100%; min-height: 0; }
}

@media (max-width: 767px) {
    .reg__when{ font-size: 16px; gap: 10px; }
    .reg__card{ padding: 26px 18px 20px; }
    .reg__card-head, .reg__card--paid .reg__card-head{ gap: 14px; align-items: flex-start; }
    .reg__icon{ width: 38px; height: auto; }
    .reg__card-title{ font-size: 19px; }
    .reg__card-text{ font-size: 14px; }
    .reg__line{ width: 100%; margin: 22px 0; }
    .reg__label{ font-size: 14px; }
    .reg__list, .reg__card--paid .reg__list{ gap: 18px; margin-top: 18px; }
    .reg__item{ font-size: 14px; gap: 12px; }
    .reg__card .reg__list{ margin-bottom: 28px; }
    .reg__btn{ white-space: normal; text-align: left; }
}
/* 12. Registration Section Responsive End */


/* 12a. Sticky CTA Start */
/* fixed register button at the bottom on phones / tablets; shown after the hero
   button leaves the screen and hidden while #register is in view (js/app.js -> 08) */
.sticky-cta{
    display: none;
}

@media (max-width: 1024px) {
    .sticky-cta{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: block;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--color-line);
        background: rgba(27, 29, 32, .9);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        transform: translateY(110%);
        transition: transform .3s ease;
    }

    .sticky-cta.is-on{
        transform: none;
    }

    .sticky-cta__btn{
        width: 100%;
    }

    .modal-lock .sticky-cta{
        transform: translateY(110%);
    }

    .footer{
        padding-bottom: 76px;
    }
}
/* 12a. Sticky CTA End */

/* 15. Registration Modal Start */
.modal-lock{
    overflow: hidden;
}

.modal{
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(17, 19, 21, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.modal__dialog{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
    max-height: 88vh;
    overflow-y: auto;
    border: 1.5px solid var(--color-line);
    background: var(--color-ink-footer);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
    outline: none;
    transform: translateY(10px);
    transition: transform .3s ease;
    scrollbar-width: thin;
    scrollbar-color: #F7B500 transparent;
}

.modal.is-open .modal__dialog{
    transform: none;
}

/* yellow corner ticks, like the guarantee frame */
.modal__dialog::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(#F7B500, #F7B500) left top / 22px 2px no-repeat,
        linear-gradient(#F7B500, #F7B500) left top / 2px 22px no-repeat,
        linear-gradient(#F7B500, #F7B500) right bottom / 22px 2px no-repeat,
        linear-gradient(#F7B500, #F7B500) right bottom / 2px 22px no-repeat;
}

.modal__bar{
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 12px 12px 24px;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-ink-footer);
}

.modal__bar-path{
    color: var(--color-text-dim);
    font-size: 13px;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal__bar-path::after{
    content: "";
    display: inline-block;
    width: .6em;
    height: 1.1em;
    margin-left: 4px;
    vertical-align: -2px;
    background: var(--color-yellow);
    animation: amBlink 1s steps(1) infinite;
}

.modal__close{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid #535B61;
    color: #969EA3;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, transform .2s ease;
}

.modal__close:hover{
    border-color: var(--color-yellow);
    color: var(--color-yellow);
    transform: rotate(90deg);
}

.modal__form{
    min-height: 140px;
    padding: 36px 40px 40px;
}

.career-modal__eyebrow{
    margin-bottom: 8px;
    color: var(--color-yellow);
    font-size: 15px;
    line-height: normal;
    text-transform: uppercase;
}

.career-modal__tag{
    margin: 4px 0 18px;
    color: var(--color-cyan);
    font-size: 15px;
    line-height: normal;
}

.career-modal__text{
    color: #E4E9EB;
    font-size: 16px;
    line-height: 1.55;
}

.career-modal__label{
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #414B52;
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: normal;
    text-transform: uppercase;
}

.modal__fallback{
    margin: 0 40px 32px;
    padding-top: 20px;
    border-top: 1px solid var(--color-line);
    color: var(--color-text-dim);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.modal__fallback-link{
    color: var(--color-yellow);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.modal__fallback-link:hover{
    color: var(--color-white);
}

.career-modal__title{
    margin-bottom: 8px;
    color: var(--color-white);
    font-size: 30px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.career-modal__lead{
    margin-bottom: 10px;
    color: var(--color-text-muted);
    font-size: 17px;
    line-height: 1.5;
}



.career-modal__list{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
    counter-reset: bonus;
}

.career-modal__list li{
    position: relative;
    padding-left: 44px;
    color: #E4E9EB;
    font-size: 17px;
    line-height: 1.4;
    counter-increment: bonus;
}

.career-modal__list li b{
    color: var(--color-white);
    font-weight: 700;
}

.career-modal__list li::before{
    content: counter(bonus, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-text-num);
}

@media (prefers-reduced-motion: reduce){
    .modal,
    .modal__dialog,
    .modal__close{
        transition: none;
    }
}
/* 15. Registration Modal End */

/* 15. Registration Modal Responsive Start */
@media (max-width: 767px){
    .modal{ padding: 12px; }
    .modal__dialog{ max-height: 92vh; }
    .modal__bar{ padding: 10px 10px 10px 16px; }
    .modal__close{ width: 36px; height: 36px; }
    .modal__form{ padding: 26px 18px 28px; }
    .career-modal__title{ font-size: 22px; }
    .career-modal__lead, .career-modal__list li, .career-modal__text{ font-size: 15px; }
    .modal__fallback{ margin: 0 18px 24px; font-size: 13px; }
    .career-modal__list li{ padding-left: 36px; }
}
/* 15. Registration Modal Responsive End */


/* 17. Footer Section Start */
.footer{
    position: relative;
    z-index: 1;
    margin-top: 25px;
    overflow: hidden;
    border-top: 1px solid var(--color-line);
    background: var(--color-ink-footer);
}

.footer__wrap{
    width: calc(100% - 192px);
    max-width: 1248px;
    margin: 0 auto;
}

.footer__top{
    display: grid;
    grid-template-columns: 416fr 290.66fr 290.67fr 250.67fr;
    padding-top: 56px;
    min-height: 209px;
}

.footer__col-main{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__logo svg{
    width: 160px;
    height: auto;
}

.footer__tagline{
    margin-top: 20px;
    color: var(--color-white);
    font-size: 14px;
    line-height: 22.4px;
}

.footer__ai{
    margin-top: 18px;
    color: #9AA0A6;
    font-size: 13px;
    line-height: 20.8px;
}

.footer__ai-link{
    color: var(--color-yellow);
    font-weight: 500;
    transition: color .2s ease;
}

.footer__ai-link:hover{
    color: var(--color-white);
}

.footer__col-title{
    color: var(--color-text-dim);
    font-size: 11px;
    line-height: 17.6px;
    letter-spacing: 1.6px;
}

.footer__col-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin-top: 23px;
}

.footer__link{
    color: var(--color-white);
    font-size: 14px;
    line-height: 22.4px;
    transition: color .2s ease, transform .2s ease;
}

.footer__link span{
    color: var(--color-text-dim);
    transition: color .2s ease;
}

.footer__link:hover{
    color: var(--color-yellow);
    transform: translateX(4px);
}

.footer__link:hover span{
    color: var(--color-yellow);
}

/* big outlined STRATOPLAN + blinking block cursor */
.footer__brand{
    display: flex;
    align-items: center;
    margin-top: 47px;
    height: 145.29px;
    font-size: 186.3px;
    user-select: none;
}

.footer__brand-text{
    color: transparent;
    -webkit-text-stroke: 1px #3A3E44;
    font-weight: 800;
    line-height: 145.29px;
    letter-spacing: -2.794px;
    white-space: nowrap;
}

.footer__brand-cursor{
    flex-shrink: 0;
    width: .42em;
    height: .72em;
    margin-left: .055em;
    background: var(--color-yellow);
    box-shadow: 0 0 30px 4px rgba(247, 181, 0, .35);
    animation: amBlink 1.1s steps(1) infinite;
}

.footer__bottom{
    margin-top: 28.6px;
    border-top: 1px solid var(--color-line);
}

.footer__bottom-in{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 46.59px;
}

.footer__copy{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-dim);
    font-size: 11px;
    line-height: 17.6px;
    letter-spacing: 1.2px;
}

.footer__dot{
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--color-blue-dot);
    box-shadow: 0 0 8px 2px rgba(46, 184, 255, .55);
    animation: amPulse 2.4s ease-in-out infinite;
}

.footer__up{
    color: var(--color-white);
    font-size: 11px;
    line-height: 17.6px;
    letter-spacing: 1.2px;
    white-space: nowrap;
    transition: color .2s ease;
}

.footer__up:hover{
    color: var(--color-yellow);
}
/* 17. Footer Section End */

/* 17. Footer Section Responsive Start */
@media (max-width: 1280px) {
    .footer__wrap{ width: calc(100% - 80px); }
    .footer__brand{ font-size: 13.4vw; height: auto; }
    .footer__brand-text{ line-height: 1; letter-spacing: -.015em; }
}

@media (max-width: 1024px) {
    .footer__wrap{ width: calc(100% - 48px); }
    .footer__top{ grid-template-columns: 1fr 1fr 1fr; gap: 40px 24px; padding-top: 48px; }
    .footer__col-main{ grid-column: 1 / -1; }
    .footer__brand{ margin-top: 48px; }
}

@media (max-width: 767px) {
    .footer__wrap{ width: calc(100% - 32px); }
    .footer__top{ grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
    .footer__col-content{ margin-top: 14px; }
    .footer__brand{ margin-top: 40px; font-size: 13.6vw; }
    .footer__bottom{ margin-top: 20px; }
    .footer__bottom-in{ min-height: 52px; }
    .footer__copy, .footer__up{ font-size: 10px; letter-spacing: .8px; }
}
/* 17. Footer Section Responsive End */



/* 09a. Program: ether intro + career points */
.program__intro{
    max-width: 1000px;
    padding-top: 20px;
    color: #E4E9EB;
    font-size: 19px;
    line-height: 1.45;
}

.program__intro + .program__points{
    padding-top: 16px;
}

.program__points li.program__career::before{
    background: var(--color-cyan);
}

.program__tag{
    color: var(--color-cyan);
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .program__intro{ font-size: 17px; }
}

@media (max-width: 767px) {
    .program__intro{ padding-top: 14px; font-size: 15px; }
    .program__intro + .program__points{ padding-top: 12px; }
}
/* 09a. Program End */

/* 04a. Video in the centre + reviews on full width */
.school__media{
    justify-content: center;
}

.school__media .media-video{
    flex: none;
    width: 900px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.media-video__poster{
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
    transition: opacity .3s ease, transform .6s ease;
}

.media-video:hover .media-video__poster{
    opacity: .95;
    transform: scale(1.02);
}

.media-video__play{
    z-index: 2;
}

.media-video.is-playing .media-video__poster{
    display: none;
}

.school__reviews{
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.school__reviews-title{
    color: var(--color-white);
    font-size: 40px;
    font-weight: 700;
    line-height: normal;
}

.school__reviews .quote{
    flex: none;
    width: 100%;
}

.school__reviews .quote__card{
    width: 100%;
    height: auto;
    min-height: 300px;
    margin: 0;
    aspect-ratio: auto;
}

.school__reviews .quote__body{
    left: 78px;
    right: 48px;
    top: 50px;
    bottom: 34px;
    width: auto;
    height: auto;
}

.school__reviews .quote__slide{
    max-width: 1000px;
}

.school__reviews .quote__nav{
    width: 100%;
    margin: 0;
}

@media (max-width: 1280px) {
    .school__reviews-title{ font-size: 34px; }
}

@media (max-width: 1024px) {
    .school__reviews .quote__card{ min-height: 320px; }
}

@media (max-width: 767px) {
    .school__reviews{ gap: 20px; }
    .school__reviews-title{ font-size: 22px; }
    .school__reviews .quote__card{ min-height: 340px; }
    .school__reviews .quote__body{ left: 48px; right: 20px; top: 26px; bottom: 24px; }
}
/* 04a. Video + reviews End */

/* 08a. Speakers grid (no slider) */
.speakers__viewport{
    overflow: visible;
}

.speakers__list{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.speaker{
    flex: none;
    min-width: 0;
    padding: 12px;
    gap: 12px;
}

.speaker__photo{
    height: 230px;
}

.speaker__info{
    min-height: 120px;
    padding: 12px 6px 4px;
    gap: 10px;
}

.speaker__name{
    font-size: 18px;
    line-height: 24px;
}

.speaker__text{
    font-size: 13px;
}

.speaker__chip{
    padding: 8px;
}

.speaker__ava,
.speaker__ava svg{
    width: 38px;
    height: 38px;
}

.speaker__chip-t b{ font-size: 13px; }
.speaker__chip-t i{ font-size: 11px; }

@media (max-width: 1280px) {
    .speaker__photo{ height: 200px; }
}

@media (max-width: 1024px) {
    .speakers__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .speakers__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .speaker{ padding: 8px; gap: 8px; }
    .speaker__photo{ height: 150px; }
    .speaker__info{ min-height: 0; padding: 8px 2px 6px; gap: 6px; }
    .speaker__name{ font-size: 14px; line-height: 18px; letter-spacing: -0.3px; }
    .speaker__text{ font-size: 11.5px; line-height: 1.4; }
    .speaker__chip{ padding: 6px; }
    .speaker__ava, .speaker__ava svg{ width: 28px; height: 28px; }
    .speaker__chip-l{ gap: 8px; }
    .speaker__chip-t b{ font-size: 11px; line-height: 15px; }
    .speaker__chip-t i{ font-size: 10px; line-height: 13px; }
    .speaker__tg, .speaker__go{ display: none; }
}
/* 08a. Speakers grid End */

/* 17a. Footer legal details */
.footer__legal{
    max-width: 330px;
    margin-top: 18px;
    color: var(--color-text-dim);
    font-size: 11px;
    line-height: 1.6;
}
/* 17a. Footer legal details End */

/* =================================== */
/* =================================== */
/* =================================== */
/* D. O. 2026 */
/* =====OCTOBER 2026 For Statoplan =====*/
/* =================================== */
/* =================================== */
/* HTML CSS JS GSAP */
/* =================================== */