#hero .buttons {
    display: flex;
    gap: var(--space-10);
}

#hero {
    padding-bottom: var(--space-50);
}

#hero .hero-pills {
    margin-bottom: var(--space-50);
}

.section-subtitle {
    margin-top: var(--space-15);
}

#who-needs-olympus {
    padding: var(--space-50) var(--space-0) var(--space-80) var(--space-0);
}

#who-needs-olympus .audience {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-30);
    width: 100%;
}

#who-needs-olympus .audience-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-30);
    text-align: center;
    background: var(--background-surface);
    border-radius: var(--radius-m);
    filter: var(--shadow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#who-needs-olympus .audience-card .h3 {
    color: var(--primary-text-main);
}

#who-needs-olympus .audience-card .body-l {
    color: var(--primary-text-secondary);
}

#how-olympus-works {
    padding: var(--space-80) var(--space-0);
}

#how-olympus-works .features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-20);
    width: 100%;
    counter-reset: feature;
}

#how-olympus-works .feature {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    align-items: flex-start;
    overflow: hidden;
    padding: var(--space-20);
    text-align: left;
    background: var(--background-surface);
    border-radius: var(--radius-m);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#how-olympus-works .feature .bg-icon {
    display: none;
}

#how-olympus-works .feature .icon {
    display: none;
}

#how-olympus-works .feature .h2 {
    margin-top: var(--space-auto);
    width: 100%;
    text-align: right;
    color: var(--primary-text-main-5);
}

#how-olympus-works .feature .body-l-accent {
    text-align: left;
    color: var(--primary-text-main);
}

#how-olympus-works .feature .body-s {
    text-align: left;
    color: var(--primary-text-secondary);
}

#how-olympus-works button {
    margin-top: var(--space-50);
}

#benefits .benefits-selector {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: row;
    gap: var(--space-5);
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-30);
    padding: var(--space-5);
    width: 420px;
    height: 56px;
    background-color: var(--background-dark-surface);
    border-radius: var(--radius-full);
}

#benefits .benefits-selector::before {
    content: '';
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    width: calc((100% - 15px) / 3);
    height: calc(100% - 10px);
    background: var(--primary-main);
    border-radius: var(--radius-full);
    transition: left var(--transition-fast), width 0.2s var(--ease-in-out), height 0.2s var(--ease-in-out), top 0.2s var(--ease-in-out);
    z-index: 0;
    box-shadow: 0 4px 12px var(--primary-main-30), 0 0 20px var(--primary-main-10);
}

#benefits .benefits-selector.animating::before {
    animation: benefitsSelectorSlide var(--transition-normal);
}

#benefits .benefits-selector.teacher-active::before {
    left: calc((var(--space-100p) - var(--space-15)) / var(--space-factor-3) + var(--space-5));
}

#benefits .benefits-selector.student-active::before {
    left: calc(var(--space-factor-2) * (var(--space-100p) - var(--space-15)) / var(--space-factor-3) + var(--space-10));
}

@keyframes benefitsSelectorSlide {
    0% {
        top: var(--space-5);
        height: calc(100% - 10px);
    }

    50% {
        top: var(--space-10);
        height: calc(100% - 20px);
    }

    100% {
        top: var(--space-5);
        height: calc(100% - 10px);
    }
}

#benefits .benefits-selector .selector-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#benefits .benefits-selector .selector-item span {
    color: var(--primary-text-muted);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

#benefits .benefits-selector .selector-item.active span {
    color: var(--text-inverted);
}

#benefits .benefits {
    display: flex;
    gap: var(--space-16);
    width: 100%;
}

#benefits.bg-dark {
    overflow: hidden;
}

#benefits .benefit {
    padding: var(--space-20);
    width: 100%;
    text-align: center;
    color: var(--text-inverted);
    background: var(--background-dark-surface);
    border: 1px solid var(--background-page-5);
    border-radius: var(--radius-m);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-normal);
    perspective: 800px;
}

#benefits .benefit .h4,
#benefits .benefit .body-l-accent {
    display: flex;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

#benefits .benefit.flip-out .h4,
#benefits .benefit.flip-out .body-l-accent {
    animation: benefitFlipOut 0.25s var(--ease-in) forwards;
}

#benefits .benefit.flip-in .h4,
#benefits .benefit.flip-in .body-l-accent {
    animation: benefitFlipIn 0.35s var(--ease-bounce) forwards;
}

@keyframes benefitFlipOut {
    0% {
        opacity: 1;
        transform: rotateX(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: rotateX(-90deg) scale(0.8);
    }
}

@keyframes benefitFlipIn {
    0% {
        opacity: 0;
        transform: rotateX(90deg) scale(0.8);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: rotateX(0) scale(1);
    }
}

#progress {
    padding: var(--space-80) var(--space-0);
}

#progress .content {
    display: flex;
    gap: var(--space-30);
    align-items: center;
    width: 100%;
}

#progress .advantages {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    flex: 1;
    width: 45%;
}

#progress .advantage {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-20);
    background: var(--background-surface);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#progress .advantage-head {
    display: flex;
    gap: var(--space-12);
    align-items: center;
    justify-content: space-between;
}

#progress .advantage-head .caption {
    color: var(--primary-text-muted);
}

#progress .advantage .icon {
    color: var(--primary-main);
}

#progress .advantage button .icon {
    color: var(--primary-text-secondary);
}

#progress .advantage .h4 {
    color: var(--primary-text-main);
}

#progress .advantage .body-l {
    color: var(--primary-text-secondary);
}

#progress .advantage.demo {
    background: var(--primary-main-5);
    border: 1px solid var(--primary-main-10);
}

#progress .advantage.demo button {
    align-self: flex-start;
    margin-top: var(--space-8);
}

#progress .content img {
    width: 52%;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
}

#connection-format {
    padding: var(--space-80) var(--space-0);
}

#connection-format .formats {
    display: flex;
    gap: var(--space-16);
    width: 100%;
}

#connection-format .format {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    padding: var(--space-20) var(--space-10);
    width: 100%;
    background: var(--background-surface);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
}

#connection-format .format .content {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    text-align: center;
}

#connection-format .format .content .body-m {
    color: var(--primary-text-secondary);
}

#connection-format .format .advantage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    width: 100%;
    text-align: center;
    color: var(--primary-text-secondary);
    background: var(--primary-main-5);
    border: 1px solid var(--primary-main-10);
    border-radius: var(--radius-full);
}

#connection-format .format .advantage.important {
    color: var(--primary-main);
    background: var(--primary-main-15);
    border-color: var(--border-focus);
}

#connection-format .format .advantages .advantage.full {
    margin-top: var(--space-10);
}

#connection-format .format button {
    margin-top: var(--space-auto);
}

#connection-format .body-s {
    margin-top: var(--space-16);
    text-align: center;
    color: var(--primary-text-secondary);
}

#feedback {
    padding: var(--space-80) var(--space-0);
}

#selector.page.parents-active::before {
    left: calc((var(--space-100p) - var(--space-17)) / var(--space-factor-3) + var(--space-6));
}

#selector.page.schools-active::before {
    left: calc(var(--space-factor-2) * (var(--space-100p) - var(--space-17)) / var(--space-factor-3) + var(--space-12));
}

@media (max-width: 1024px) {
    section#benefits,
    section#connection-format {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    #benefits .benefits-selector {
        width: 100%;
        max-width: 420px;
    }

    #benefits .benefits {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: var(--space-0) var(--space-0) var(--space-20) var(--space-0);
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    #benefits .benefits::-webkit-scrollbar {
        display: none;
    }

    #benefits .benefit {
        flex-shrink: 0;
        scroll-snap-align: center;
        width: 80%;
    }

    #benefits .benefit * {
        pointer-events: auto !important;
    }

    #benefits .benefit span {
        align-items: center;
        height: 100%;
    }

    #who-needs-olympus .audience {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    #who-needs-olympus .audience-card {
        padding: var(--space-30) var(--space-25);
    }

    #who-needs-olympus {
        padding-bottom: var(--space-50);
    }

    #how-olympus-works .features {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-16);
    }

    #how-olympus-works {
        padding-top: var(--space-0);
    }

    #connection-format .formats {
        display: flex;
        flex-direction: column;
        gap: var(--space-16);
    }

    #connection-format .format {
        width: 100%;
    }

    #connection-format .format * {
        pointer-events: auto !important;
    }

    #progress .content {
        gap: var(--space-20);
    }

    #connection-format {
        padding: var(--space-40);
    }

    #progress {
        margin-top: var(--space-40);
        padding: var(--space-0);
    }

    #progress .advantages {
        width: 100%;
    }

    #progress .content img {
        width: 100%;
    }
}

@media (min-width: 1025px) {
    #who-needs-olympus .audience.desktop-item {
        display: grid !important;
    }

    #how-olympus-works .features.desktop-item {
        display: grid !important;
    }
}

@media (min-width: 480px) and (max-width: 1024px) {
    #who-needs-olympus .audience.tablet-item {
        display: grid !important;
    }

    #how-olympus-works .features.tablet-item {
        display: grid !important;
    }
}

@media (max-width: 480px) {
    section#benefits,
    section#connection-format {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    #hero .section-title {
        margin-bottom: var(--space-20);
    }

    #progress .content {
        flex-direction: column;
    }

    #hero .buttons .secondary {
        height: 52px;
    }

    #benefits .benefits-selector {
        width: 100%;
        height: 48px;
        max-width: 343px;
    }

    #benefits .benefits {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: var(--space-0) var(--space-0) var(--space-20) var(--space-0);
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    #benefits .benefits::-webkit-scrollbar {
        display: none;
    }

    #benefits .benefit {
        flex-shrink: 0;
        scroll-snap-align: center;
        width: 80%;
    }

    #benefits .benefit * {
        pointer-events: auto !important;
    }

    #benefits .benefits-selector .selector-item span {
        white-space: nowrap;
        word-break: keep-all;
    }

    #who-needs-olympus {
        padding: var(--space-0) var(--space-16);
        padding-top: var(--space-20);
    }

    #who-needs-olympus .audience {
        display: flex;
        flex-direction: column;
        gap: var(--space-16);
    }

    #feedback {
        padding: var(--space-50) var(--space-0);
    }

    #feedback .form .custom-select[data-name="students-count"]:not(.open):not(.has-value) label {
        top: var(--space-50p);
        transform: translateY(-50%);
    }

    #feedback .form .custom-select[data-name="students-count"] .custom-select__trigger {
        height: 68px !important;
        padding: var(--space-0) var(--space-44) var(--space-0) var(--space-20) !important;
        font-size: var(--font-size-18) !important;
        line-height: 150% !important;
    }

    #who-needs-olympus .audience-card {
        gap: var(--space-16);
        padding: var(--space-25) var(--space-16);
    }

    #how-olympus-works {
        padding: var(--space-50) var(--space-16);
    }

    #how-olympus-works .features {
        flex-direction: column;
    }

    #how-olympus-works .features .num {
        color: var(--primary-text-main-15);
    }

    #how-olympus-works .features .feature {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #how-olympus-works .features .content {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    #connection-format .formats {
        display: flex;
        flex-direction: column;
        gap: var(--space-16);
    }

    #connection-format .format {
        width: 100%;
    }

    #hero .hero-pills {
        margin-bottom: var(--space-20);
    }

    #connection-format .format * {
        pointer-events: auto !important;
    }

    #connection-format .format button {
        margin-top: var(--space-0);
        white-space: nowrap;
        word-break: keep-all;
    }

    #progress {
        padding: var(--space-50) var(--space-16);
    }

    #progress .advantage.demo button {
        width: 100%;
    }

    #connection-format {
        padding: var(--space-50) var(--space-0);
    }

    #connection-format .format .line {
        gap: var(--space-10);
    }

    #connection-format .format .advantages {
        margin-top: var(--space-auto);
    }

    #connection-format .body-s {
        margin-top: var(--space-10);
        text-align: center;
    }

    #connection-format .format .advantage {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (hover: hover) {
    #who-needs-olympus .audience-card:hover {
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3) var(--scale-increase);
    }

    #how-olympus-works .feature:hover {
        transform: var(--up-shift-3);
    }

    #benefits .benefits-selector .selector-item:not(.active):hover {
        background-color: var(--primary-main-25);
    }

    #benefits .benefits-selector .selector-item:hover span {
        transform: var(--scale-decrease);
    }

    #benefits .benefit:hover {
        border-color: var(--primary-main-25);
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3);
    }

    #progress .advantage:hover {
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3);
    }
}