.section-kicker {
    margin: 0 0 0.45rem;
    font-size: 0.79rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    color: #9ecbff;
}

.section-title {
    margin: 0 0 1rem;
    font-family: "Montserrat", "Inter", sans-serif;
    font-size: clamp(1.65rem, 4vw, 2.6rem);
    line-height: 1.12;
    font-weight: 800;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.8rem 1.25rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.98rem;
    transition: transform 200ms ease, box-shadow 240ms ease, background-color 220ms ease, color 220ms ease;
}

.btn--primary {
    background: linear-gradient(140deg, #ff2743, #ff0022 58%, #da001f);
    color: #ffffff;
    box-shadow: 0 0 1rem rgba(255, 0, 34, 0.42);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    transform: translateY(-2px);
    background: linear-gradient(140deg, #ff4060, #ff1a3a 58%, #e6102f);
    box-shadow: 0 0 1.6rem rgba(255, 0, 34, 0.7), 0 0 3rem rgba(255, 0, 34, 0.3);
}

.btn--cta {
    font-size: 1.08rem;
    padding: 0.9rem 2rem;
    min-height: 3.2rem;
    letter-spacing: 0.02em;
}

.btn--ghost {
    background: rgba(0, 145, 255, 0.1);
    border-color: rgba(0, 145, 255, 0.55);
    color: #dfecff;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: rgba(0, 145, 255, 0.24);
    color: #ffffff;
}

.btn--pulse:hover,
.btn--pulse:focus-visible {
    animation: pulse-neon 1.15s ease-in-out infinite;
}

@keyframes pulse-neon {
    0%,
    100% {
        box-shadow: 0 0 0.8rem rgba(255, 0, 34, 0.34);
    }

    50% {
        box-shadow: 0 0 1.7rem rgba(255, 0, 34, 0.82);
    }
}

.module-grid {
    margin-top: 1.4rem;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding: 0 14vw 0.35rem 0.1rem;
    max-width: 100%;
    touch-action: pan-x pinch-zoom;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 145, 255, 0.55) rgba(0, 0, 0, 0.2);
}

.module-grid::-webkit-scrollbar {
    height: 0.52rem;
}

.module-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 145, 255, 0.52);
    border-radius: 1rem;
}

.module-card {
    min-width: 82%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.15rem;
    border-radius: 1rem;
    border: 1px solid rgba(0, 145, 255, 0.35);
    background: linear-gradient(165deg, rgba(23, 31, 63, 0.97), rgba(16, 24, 54, 0.95));
    box-shadow: 0 0.55rem 1.5rem rgba(2, 8, 26, 0.36);
}

.module-hint {
    margin-top: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #9eb8ea;
    font-size: 0.74rem;
    letter-spacing: 0.03em;
}

.module-hint__dots {
    display: inline-flex;
    gap: 0.28rem;
}

.module-hint__dots span {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 999px;
    background: rgba(0, 145, 255, 0.45);
}

.module-hint__dots span:nth-child(2) {
    background: rgba(0, 145, 255, 0.7);
}

.module-hint__dots span:nth-child(3) {
    background: rgba(0, 145, 255, 0.3);
}

.module-card:hover {
    border-color: rgba(0, 145, 255, 0.62);
    box-shadow: 0 0.45rem 1.8rem rgba(0, 145, 255, 0.28);
}

.module-card__head {
    display: flex;
    align-items: center;
    gap: 0.72rem;
}

.module-card h3 {
    margin: 0;
    font-family: "Montserrat", "Inter", sans-serif;
    font-size: 1.13rem;
}

.module-card p {
    margin: 0;
    color: #d4e0fb;
    font-size: 0.98rem;
}

.icon-chip {
    width: 2.42rem;
    height: 2.42rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: rgba(0, 145, 255, 0.18);
    border: 1px solid rgba(0, 145, 255, 0.47);
    color: #a9d4ff;
}

.pill-list {
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.pill-list li {
    padding: 0.28rem 0.56rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 145, 255, 0.36);
    background: rgba(0, 145, 255, 0.1);
    color: #d8e9ff;
    font-size: 0.8rem;
}

.slider {
    margin-top: 1.4rem;
    display: grid;
    gap: 1rem;
}

.slider__viewport {
    overflow: hidden;
    border-radius: 1rem;
}

.slider__track {
    display: flex;
    transition: transform 360ms ease;
}

.slide {
    min-width: 100%;
    margin: 0;
}

.media-frame {
    border-radius: 1rem;
    border: 1px solid rgba(0, 145, 255, 0.43);
    background: linear-gradient(155deg, rgba(22, 31, 62, 0.95), rgba(12, 19, 45, 0.94));
    box-shadow: 0 0 1.4rem rgba(0, 145, 255, 0.28);
    overflow: hidden;
}

.media-frame img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-bottom: 1px solid rgba(0, 145, 255, 0.24);
}

.media-frame figcaption {
    margin: 0;
    padding: 0.72rem 0.92rem 0.86rem;
    font-size: 0.92rem;
    color: #ccd9f7;
}

.media-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 16rem;
    margin: 0.8rem;
    border: 1px dashed rgba(0, 145, 255, 0.56);
    border-radius: 0.76rem;
    color: #c7dbff;
    background: linear-gradient(145deg, rgba(0, 145, 255, 0.08), rgba(255, 0, 34, 0.08));
    font-size: 0.93rem;
}

.media-frame.is-missing img {
    display: none;
}

.media-frame.is-missing .media-fallback {
    display: flex;
}

.slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.slider__btn {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-grid;
    place-content: center;
    border-radius: 999px;
    border: 1px solid rgba(0, 145, 255, 0.5);
    background: rgba(0, 145, 255, 0.12);
    color: #e2eeff;
    cursor: pointer;
}

.slider__btn:hover,
.slider__btn:focus-visible {
    background: rgba(0, 145, 255, 0.28);
}

.slider__dots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.slider__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    border: 0;
    background: rgba(177, 199, 240, 0.45);
    cursor: pointer;
}

.slider__dot[aria-current="true"] {
    background: #0091ff;
    box-shadow: 0 0 0.82rem rgba(0, 145, 255, 0.8);
}

@media (min-width: 48rem) {
    .btn {
        min-height: 3.15rem;
        font-size: 1.02rem;
        padding-inline: 1.35rem;
    }

    .module-grid {
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
        touch-action: auto;
        overscroll-behavior-x: auto;
    }

    .module-card {
        min-width: 0;
    }

    .module-hint {
        display: none;
    }
}