/* ============================================
   FIX: Desktop browser rendering artifact
   ============================================ */
section {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

/* ============================================
   KOREAN MUNICIPAL DESIGN - ENHANCED
   Bigger fonts, vibrant colors, functional
   ============================================ */

:root {
    --kmd-pink: #E91E8C;
    --kmd-pink-dark: #C2185B;
    --kmd-blue: #0288D1;
    --kmd-blue-dark: #01579B;
    --kmd-teal: #00897B;
    --kmd-cyan: #00ACC1;
    --kmd-green: #43A047;
    --kmd-ios-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Force Inter font for all content */
.kmd-card, .kmd-news-content, .kmd-news-category, .kmd-tab {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.kmd-hero {
    background: linear-gradient(180deg, 
        #E8F5E9 0%,
        #FCE4EC 25%,
        #F3E5F5 50%,
        #E8EAF6 75%,
        #E1F5FE 100%
    );
    min-height: 500px;
    position: relative;
}

.kmd-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Course-discovery hero */
.home-course-hero {
    --hero-ink: #10202a;
    --hero-muted: #4b6470;
    --hero-cyan: #00a9bd;
    --hero-pink: #e91e8c;
    --hero-shell: rgba(255, 255, 255, 0.76);
    min-height: auto;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 18%, rgba(0, 172, 193, 0.22), transparent 34%),
        radial-gradient(circle at 12% 16%, rgba(233, 30, 140, 0.18), transparent 30%),
        linear-gradient(135deg, #f6fbfb 0%, #eef9f6 42%, #f9edf4 100%);
    padding: clamp(1.75rem, 3vw, 3.75rem) 0 clamp(2rem, 3.5vw, 4rem);
}

.home-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.95fr);
    align-items: center;
    gap: clamp(1.5rem, 3.8vw, 3.75rem);
    min-width: 0;
}

.home-hero-media {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.home-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.home-hero-title {
    max-width: 14.5ch;
    color: var(--hero-ink);
    font-size: clamp(2.35rem, 4.65vw, 4.35rem);
    font-weight: 800;
    line-height: 1;
    text-wrap: balance;
}

.home-hero-title--pop {
    display: flex;
    max-width: 11.8ch;
    flex-wrap: wrap;
    gap: 0.02em 0.21em;
    align-items: flex-start;
    font-family: 'Baloo 2', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(3.05rem, 6.2vw, 5.45rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.79;
    isolation: isolate;
    margin-bottom: 1.05rem;
    position: relative;
    text-wrap: balance;
    transform: rotate(-1.5deg);
}

.home-hero-title-word {
    --pop-fill: #4ca3ff;
    --pop-rim: #0b6fcd;
    --pop-outer: #ffffff;
    --pop-depth-1: #0969c6;
    --pop-depth-2: #5630c8;
    --pop-soft: rgba(6, 88, 177, 0.24);
    position: relative;
    display: inline-flex;
    align-items: baseline;
    z-index: 3;
    filter:
        drop-shadow(0 0.075em 0 var(--pop-depth-1))
        drop-shadow(0 0.145em 0 var(--pop-depth-2))
        drop-shadow(0 0.21em 0.075em var(--pop-soft));
}

.home-hero-title-letter {
    position: relative;
    display: inline-block;
    z-index: 3;
    color: var(--pop-fill);
    -webkit-text-stroke: 0.038em var(--pop-rim);
    animation: homeTitleLetterPop 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--letter-index, 0) * 34ms);
    paint-order: stroke fill;
    text-shadow: 0 0.026em 0 rgba(255, 255, 255, 0.72);
    transform-origin: 50% 78%;
}

.home-hero-title-letter::before {
    content: attr(data-letter);
    position: absolute;
    inset: 0;
    z-index: -1;
    color: var(--pop-outer);
    -webkit-text-stroke: 0.18em var(--pop-outer);
    paint-order: stroke fill;
}

@keyframes homeTitleLetterPop {
    0% {
        opacity: 0;
        filter: blur(0.16em);
        transform: translateY(0.42em) scale(0.72) rotate(-5deg);
    }

    58% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(-0.1em) scale(1.09) rotate(2deg);
    }

    76% {
        transform: translateY(0.035em) scale(0.96) rotate(-1deg);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

.home-title-flair,
.home-title-glint {
    --flair-delay: calc(var(--title-flair-delay, 1500ms) + (var(--flair-i, 0) * 90ms));
    position: absolute;
    pointer-events: none;
}

.home-title-flair {
    z-index: 1;
    width: clamp(1.65rem, 3vw, 2.45rem);
    height: clamp(1.65rem, 3vw, 2.45rem);
    color: var(--flair-color, #ffcf31);
    filter:
        drop-shadow(0 0.14em 0 #ffffff)
        drop-shadow(0 0.3em 0.18em rgba(24, 85, 210, 0.34));
    opacity: 0;
}

.home-title-flair svg {
    width: 100%;
    height: 100%;
    stroke-width: 2.8;
    transform-origin: 50% 50%;
    animation: homeTitleFlairSpinSettle 1450ms cubic-bezier(0.16, 1, 0.3, 1) var(--flair-delay) both;
}

.home-title-flair--left-top {
    --flair-color: #ffd23f;
    left: 0.36em;
    top: 0.02em;
    animation:
        homeTitleFlairLandLeftTop 1450ms cubic-bezier(0.16, 1, 0.3, 1) var(--flair-delay) both,
        homeTitleFlairHoverLeftTop 3600ms ease-in-out calc(var(--flair-delay) + 1450ms) infinite;
}

.home-title-flair--left-low {
    --flair-color: #38d9f2;
    left: 0.58em;
    bottom: 0.05em;
    width: clamp(1.25rem, 2.1vw, 1.72rem);
    height: clamp(1.25rem, 2.1vw, 1.72rem);
    animation:
        homeTitleFlairLandLeftLow 1380ms cubic-bezier(0.16, 1, 0.3, 1) var(--flair-delay) both,
        homeTitleFlairHoverLeftLow 3900ms ease-in-out calc(var(--flair-delay) + 1380ms) infinite;
}

.home-title-flair--right-top {
    --flair-color: #ff7fbd;
    right: 0.2em;
    top: -0.06em;
    animation:
        homeTitleFlairLandRightTop 1480ms cubic-bezier(0.16, 1, 0.3, 1) var(--flair-delay) both,
        homeTitleFlairHoverRightTop 3700ms ease-in-out calc(var(--flair-delay) + 1480ms) infinite;
}

.home-title-flair--right-low {
    --flair-color: #8b5cf6;
    right: -0.12em;
    bottom: 0.15em;
    width: clamp(1.18rem, 2vw, 1.65rem);
    height: clamp(1.18rem, 2vw, 1.65rem);
    animation:
        homeTitleFlairLandRightLow 1400ms cubic-bezier(0.16, 1, 0.3, 1) var(--flair-delay) both,
        homeTitleFlairHoverRightLow 4100ms ease-in-out calc(var(--flair-delay) + 1400ms) infinite;
}

.home-title-glint {
    z-index: 5;
    width: var(--glint-size, clamp(0.82rem, 1.45vw, 1.18rem));
    height: var(--glint-size, clamp(0.82rem, 1.45vw, 1.18rem));
    color: var(--glint-color, #ffffff);
    filter: drop-shadow(0 0 0.45rem rgba(255, 255, 255, 0.75));
    opacity: 0;
    transform: scale(0.1) rotate(45deg);
}

.home-title-glint.is-shining {
    animation: homeTitleGlintPulse var(--glint-duration, 1350ms) cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

.home-title-glint::before,
.home-title-glint::after {
    content: "";
    position: absolute;
    inset: 44% 0;
    border-radius: 999px;
    background: currentColor;
    box-shadow:
        0 0 0.28rem rgba(255, 255, 255, 1),
        0 0 0.9rem rgba(45, 170, 255, 0.68),
        0 0 1.3rem rgba(255, 128, 189, 0.28);
}

.home-title-glint::after {
    transform: rotate(90deg);
}

.home-title-glint--one {
    --glint-color: #ffffff;
    --flair-i: 1;
    left: 43%;
    top: 12%;
}

.home-title-glint--two {
    --glint-color: #fff3a1;
    --flair-i: 5;
    right: 15%;
    top: 38%;
    width: var(--glint-size, clamp(0.72rem, 1.2vw, 0.98rem));
    height: var(--glint-size, clamp(0.72rem, 1.2vw, 0.98rem));
}

.home-title-glint--three {
    --glint-color: #ffffff;
    --flair-i: 8;
    left: 18%;
    bottom: 20%;
    width: var(--glint-size, clamp(0.66rem, 1.1vw, 0.9rem));
    height: var(--glint-size, clamp(0.66rem, 1.1vw, 0.9rem));
}

@keyframes homeTitleFlairSpinSettle {
    0% {
        transform: rotate(-420deg) scale(0.72);
    }

    58% {
        transform: rotate(42deg) scale(1.1);
    }

    82% {
        transform: rotate(-8deg) scale(0.98);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes homeTitleFlairLandLeftTop {
    0% {
        opacity: 0;
        transform: translate(3.7em, 1.08em) scale(0.34);
    }

    22% {
        opacity: 0.45;
        transform: translate(2.32em, 0.32em) scale(0.7);
    }

    56% {
        opacity: 1;
        transform: translate(0.64em, -0.48em) scale(1.18);
    }

    78% {
        opacity: 1;
        transform: translate(-0.12em, -0.08em) scale(0.96);
    }

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

@keyframes homeTitleFlairLandLeftLow {
    0% {
        opacity: 0;
        transform: translate(4.1em, -0.76em) scale(0.32);
    }

    24% {
        opacity: 0.45;
        transform: translate(2.78em, -1.05em) scale(0.66);
    }

    58% {
        opacity: 1;
        transform: translate(0.82em, -0.3em) scale(1.12);
    }

    80% {
        opacity: 1;
        transform: translate(-0.08em, 0.1em) scale(0.96);
    }

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

@keyframes homeTitleFlairLandRightTop {
    0% {
        opacity: 0;
        transform: translate(-3.85em, 1.02em) scale(0.34);
    }

    22% {
        opacity: 0.45;
        transform: translate(-2.48em, 0.18em) scale(0.7);
    }

    56% {
        opacity: 1;
        transform: translate(-0.68em, -0.54em) scale(1.18);
    }

    78% {
        opacity: 1;
        transform: translate(0.12em, -0.08em) scale(0.96);
    }

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

@keyframes homeTitleFlairLandRightLow {
    0% {
        opacity: 0;
        transform: translate(-4.2em, -0.72em) scale(0.32);
    }

    24% {
        opacity: 0.45;
        transform: translate(-2.86em, -1.04em) scale(0.66);
    }

    58% {
        opacity: 1;
        transform: translate(-0.86em, -0.28em) scale(1.12);
    }

    80% {
        opacity: 1;
        transform: translate(0.08em, 0.1em) scale(0.96);
    }

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

@keyframes homeTitleFlairHoverLeftTop {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translate(-0.06em, -0.13em) rotate(3deg);
    }
}

@keyframes homeTitleFlairHoverLeftLow {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translate(0.08em, -0.12em) rotate(-4deg);
    }
}

@keyframes homeTitleFlairHoverRightTop {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translate(0.07em, -0.14em) rotate(-3deg);
    }
}

@keyframes homeTitleFlairHoverRightLow {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translate(-0.08em, -0.11em) rotate(4deg);
    }
}

@keyframes homeTitleGlintPulse {
    0%, 100% {
        opacity: 0;
        transform: scale(0.08) rotate(45deg);
    }

    12% {
        opacity: 1;
        transform: scale(1.82) rotate(45deg);
    }

    34% {
        opacity: 0.92;
        transform: scale(1.05) rotate(45deg);
    }

    58% {
        opacity: 0.58;
        transform: scale(0.72) rotate(45deg);
    }

    74% {
        opacity: 0;
        transform: scale(0.22) rotate(45deg);
    }
}

.home-hero-title-word:nth-child(2n) {
    transform: rotate(-1.8deg) translateY(0.035em);
}

.home-hero-title-word:nth-child(3n) {
    transform: rotate(2deg) translateY(-0.02em);
}

.home-hero-title-word--cool {
    --pop-fill: #2ed8ea;
    --pop-rim: #0787b0;
    --pop-depth-1: #0575ad;
    --pop-depth-2: #2f46d2;
    --pop-soft: rgba(47, 70, 210, 0.22);
}

.home-hero-title-word--accent {
    --pop-fill: #ffd24b;
    --pop-rim: #f28a16;
    --pop-depth-1: #d65a12;
    --pop-depth-2: #0e90d2;
    --pop-soft: rgba(14, 144, 210, 0.25);
}

.home-hero-title-word--hot {
    --pop-fill: #ff80bd;
    --pop-rim: #d82b88;
    --pop-depth-1: #a91665;
    --pop-depth-2: #5728c8;
    --pop-soft: rgba(87, 40, 200, 0.24);
}

.home-hero-lede {
    max-width: 42rem;
    color: var(--hero-muted);
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    line-height: 1.62;
    text-wrap: pretty;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.25rem;
}

.home-hero-primary,
.home-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.2rem;
    padding: 0.85rem 1.2rem;
    border-radius: 999px;
    font-weight: 800;
    transition: transform 170ms var(--kmd-ios-ease), background-color 170ms var(--kmd-ios-ease), color 170ms var(--kmd-ios-ease);
}

.home-course-hero a:focus-visible,
.home-course-hero button:focus-visible {
    outline: 2px solid rgba(0, 111, 124, 0.55);
    outline-offset: 3px;
}

.home-hero-search input:focus-visible,
.home-hero-search button:focus-visible {
    outline: none;
}

.home-hero-primary {
    background: #006f7c;
    color: #fff;
}

.home-hero-primary:hover {
    background: #005b66;
    transform: translateY(-1px);
}

.home-hero-secondary {
    background: rgba(255, 255, 255, 0.72);
    color: #12313b;
    box-shadow: inset 0 0 0 1px rgba(18, 49, 59, 0.13);
}

.home-hero-secondary:hover {
    background: #fff;
    transform: translateY(-1px);
}

.home-course-picker {
    width: 100%;
    max-width: 46rem;
    margin-top: 0.35rem;
}

.home-course-picker-label {
    margin-bottom: 0.75rem;
    color: #284653;
    font-size: 0.95rem;
    font-weight: 800;
}

.home-course-paths {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@property --course-liquid-x {
    syntax: "<percentage>";
    inherits: false;
    initial-value: -24%;
}

.home-course-path {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.65rem 0.8rem 0.65rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #243b45;
    font-weight: 750;
    isolation: isolate;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(16, 32, 42, 0.1);
    transition: transform 190ms var(--kmd-ios-ease), color 220ms var(--kmd-ios-ease), box-shadow 220ms var(--kmd-ios-ease);
}

.home-course-path::before,
.home-course-path::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.home-course-path::before {
    inset: 0;
    background:
        radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.2), transparent 0.7rem),
        radial-gradient(circle at 89% 76%, rgba(255, 255, 255, 0.16), transparent 0.82rem),
        var(--path-color, var(--hero-cyan));
    clip-path: polygon(
        0 0,
        0 0,
        0 10%,
        0 22%,
        0 36%,
        0 49%,
        0 64%,
        0 78%,
        0 91%,
        0 100%,
        0 100%
    );
    transform: translateZ(0);
    transform-origin: left center;
    transition: clip-path 420ms cubic-bezier(0.25, 1, 0.5, 1);
}

.home-course-path::after {
    top: -45%;
    left: -52%;
    width: 58%;
    height: 190%;
    border-radius: 48% 52% 46% 54% / 44% 57% 43% 56%;
    background:
        radial-gradient(circle at 68% 24%, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at 74% 70%, rgba(255, 255, 255, 0.22), transparent 30%),
        color-mix(in srgb, var(--path-color, var(--hero-cyan)) 86%, white);
    filter: blur(0.6px);
    opacity: 0;
    transform: translateX(-12%) scale(0.72, 1.04) rotate(-9deg);
    transform-origin: center;
    transition:
        transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 130ms var(--kmd-ios-ease);
}

.home-course-path:hover,
.home-course-path:focus-visible,
.home-course-path:active {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--path-color, var(--hero-cyan)) 52%, white);
}

.home-course-path:hover::before,
.home-course-path:focus-visible::before,
.home-course-path:active::before {
    animation: home-course-liquid-fill 760ms cubic-bezier(0.25, 1, 0.5, 1) both;
    clip-path: polygon(
        0 0,
        106% 0,
        101% 9%,
        110% 23%,
        103% 36%,
        112% 50%,
        104% 64%,
        111% 78%,
        102% 91%,
        107% 100%,
        0 100%
    );
}

.home-course-path:hover::after,
.home-course-path:focus-visible::after,
.home-course-path:active::after {
    animation: home-course-liquid-front 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
    opacity: 0.95;
    transform: translateX(275%) scale(1.08, 1.16) rotate(6deg);
    transition:
        transform 640ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 120ms var(--kmd-ios-ease);
}

@keyframes home-course-liquid-fill {
    0% {
        clip-path: polygon(
            0 0,
            0 0,
            0 10%,
            0 22%,
            0 36%,
            0 49%,
            0 64%,
            0 78%,
            0 91%,
            0 100%,
            0 100%
        );
    }
    24% {
        clip-path: polygon(
            0 0,
            22% 0,
            34% 10%,
            27% 22%,
            41% 36%,
            31% 49%,
            45% 64%,
            30% 78%,
            39% 91%,
            24% 100%,
            0 100%
        );
    }
    48% {
        clip-path: polygon(
            0 0,
            52% 0,
            67% 10%,
            56% 22%,
            73% 36%,
            61% 49%,
            78% 64%,
            58% 78%,
            70% 91%,
            53% 100%,
            0 100%
        );
    }
    76% {
        clip-path: polygon(
            0 0,
            82% 0,
            96% 10%,
            87% 22%,
            104% 36%,
            92% 49%,
            108% 64%,
            88% 78%,
            101% 91%,
            84% 100%,
            0 100%
        );
    }
    100% {
        clip-path: polygon(
            0 0,
            106% 0,
            101% 9%,
            110% 23%,
            103% 36%,
            112% 50%,
            104% 64%,
            111% 78%,
            102% 91%,
            107% 100%,
            0 100%
        );
    }
}

@supports ((-webkit-mask: linear-gradient(#000, #000)) or (mask: linear-gradient(#000, #000))) {
    .home-course-path::before {
        --course-liquid-x: -24%;
        clip-path: none;
        -webkit-mask:
            radial-gradient(1.18rem 1.58rem at calc(var(--course-liquid-x) + 0.62rem) 19%, #000 96%, transparent 100%),
            radial-gradient(1.42rem 1.82rem at calc(var(--course-liquid-x) - 0.18rem) 48%, #000 96%, transparent 100%),
            radial-gradient(1.05rem 1.46rem at calc(var(--course-liquid-x) + 0.48rem) 82%, #000 96%, transparent 100%),
            linear-gradient(90deg, #000 0 calc(var(--course-liquid-x) - 0.62rem), transparent calc(var(--course-liquid-x) - 0.62rem));
        mask:
            radial-gradient(1.18rem 1.58rem at calc(var(--course-liquid-x) + 0.62rem) 19%, #000 96%, transparent 100%),
            radial-gradient(1.42rem 1.82rem at calc(var(--course-liquid-x) - 0.18rem) 48%, #000 96%, transparent 100%),
            radial-gradient(1.05rem 1.46rem at calc(var(--course-liquid-x) + 0.48rem) 82%, #000 96%, transparent 100%),
            linear-gradient(90deg, #000 0 calc(var(--course-liquid-x) - 0.62rem), transparent calc(var(--course-liquid-x) - 0.62rem));
        transition: --course-liquid-x 420ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    .home-course-path:hover::before,
    .home-course-path:focus-visible::before,
    .home-course-path:active::before {
        --course-liquid-x: 112%;
        animation: home-course-liquid-mask 760ms cubic-bezier(0.25, 1, 0.5, 1) both;
        clip-path: none;
    }
}

@keyframes home-course-liquid-mask {
    0% { --course-liquid-x: -24%; }
    22% { --course-liquid-x: 28%; }
    46% { --course-liquid-x: 58%; }
    72% { --course-liquid-x: 88%; }
    100% { --course-liquid-x: 112%; }
}

@keyframes home-course-liquid-front {
    0% {
        border-radius: 45% 55% 49% 51% / 43% 57% 43% 57%;
        opacity: 0;
        transform: translateX(-12%) scale(0.7, 1.02) rotate(-10deg);
    }
    28% {
        border-radius: 58% 42% 61% 39% / 48% 42% 58% 52%;
        opacity: 0.96;
        transform: translateX(92%) scale(0.92, 1.24) rotate(7deg);
    }
    64% {
        border-radius: 39% 61% 43% 57% / 58% 50% 50% 42%;
        opacity: 0.82;
        transform: translateX(210%) scale(1.1, 1.08) rotate(-5deg);
    }
    100% {
        border-radius: 54% 46% 42% 58% / 44% 61% 39% 56%;
        opacity: 0.18;
        transform: translateX(318%) scale(1.18, 1.12) rotate(5deg);
    }
}

.home-course-path-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--path-color, var(--hero-cyan)) 16%, white);
    color: var(--path-color, var(--hero-cyan));
    flex: 0 0 auto;
    transition: background-color 220ms var(--kmd-ios-ease), color 220ms var(--kmd-ios-ease), transform 190ms var(--kmd-ios-ease);
}

.home-course-path > span {
    position: relative;
    z-index: 1;
}

.home-course-path:hover .home-course-path-icon,
.home-course-path:focus-visible .home-course-path-icon,
.home-course-path:active .home-course-path-icon {
    background: rgba(255, 255, 255, 0.92);
    color: var(--path-color, var(--hero-cyan));
    transform: scale(1.03);
}

.home-hero-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: min(100%, 30rem);
    max-width: 100%;
    margin-top: 0.5rem;
    padding: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 0 0 1px rgba(16, 32, 42, 0.1);
}

.home-hero-search:focus-within {
    background: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(0, 111, 124, 0.28),
        0 0 0 4px rgba(0, 169, 189, 0.16);
}

.home-hero-search input {
    min-width: 0;
    flex: 1;
    background: transparent;
    color: var(--hero-ink);
    padding: 0.7rem 0.85rem;
    outline: none;
}

.home-hero-search input::placeholder {
    color: #526b76;
}

.home-hero-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    background: var(--hero-cyan);
    color: #fff;
    transition: background-color 160ms var(--kmd-ios-ease), transform 160ms var(--kmd-ios-ease);
}

.home-hero-search button:hover {
    background: #00899b;
    transform: translateY(-1px);
}

.home-hero-visual {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 8.85;
    min-height: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(226, 246, 251, 0.72));
    box-shadow: none;
}

.home-hero-visual a {
    display: block;
    width: 100%;
    height: 100%;
}

.home-hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.home-hero-visual::after {
    display: none;
}

.home-hero-visual-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    padding: 2rem;
    color: var(--hero-ink);
    background: #f8fafc;
}

.home-hero-visual-fallback span {
    max-width: 12rem;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 0.95;
    text-align: center;
}

.home-hero-spotlights {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(16, 32, 42, 0.1);
    padding: clamp(0.55rem, 1.2vw, 0.8rem);
    min-width: 0;
}

.home-hero-spotlights-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
    color: #284653;
    font-size: 0.85rem;
    font-weight: 800;
}

.home-hero-spotlights-count {
    color: #55707a;
    font-size: 0.78rem;
    font-weight: 700;
}

.home-hero-spotlights-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.home-hero-spotlight-toggle {
    display: none;
    width: 1.95rem;
    height: 1.95rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #284653;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(16, 32, 42, 0.11);
    transition:
        background-color 170ms var(--kmd-ios-ease),
        color 170ms var(--kmd-ios-ease),
        transform 170ms var(--kmd-ios-ease);
}

.home-hero-spotlight-toggle:hover,
.home-hero-spotlight-toggle:focus-visible {
    color: #006f7c;
    background: #fff;
    transform: translateY(-1px);
}

.home-hero-spotlight-toggle:focus-visible {
    outline: 2px solid rgba(0, 111, 124, 0.4);
    outline-offset: 2px;
}

.home-hero-spotlight-toggle .spotlight-toggle__play,
.home-hero-spotlights.is-paused .home-hero-spotlight-toggle .spotlight-toggle__pause {
    display: none;
}

.home-hero-spotlights.is-paused .home-hero-spotlight-toggle .spotlight-toggle__play {
    display: inline-flex;
}

.home-hero-spotlight-rail {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.home-hero-spotlight-rail::-webkit-scrollbar {
    display: none;
}

.home-hero-spotlight-card {
    position: relative;
    display: grid;
    grid-template-columns: 4.65rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    flex: 0 0 min(100%, 17.5rem);
    min-height: 5rem;
    padding: 0.55rem 0.65rem 0.55rem 0.55rem;
    border-radius: 0.85rem;
    background: #fff;
    color: #12313b;
    overflow: hidden;
    scroll-snap-align: start;
    text-decoration: none;
    transition:
        transform 220ms var(--kmd-ios-ease),
        background-color 220ms var(--kmd-ios-ease),
        opacity 260ms var(--kmd-ios-ease);
}

.home-hero-spotlight-card:hover {
    background: #f8fdff;
    color: #12313b;
    text-decoration: none;
    transform: translateY(-1px);
}

.home-hero-spotlight-thumb {
    position: relative;
    width: 4.65rem;
    height: 3.9rem;
    border-radius: 0.65rem;
    overflow: hidden;
    background: #eef7fa;
}

.home-hero-spotlight-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    object-fit: cover;
}

.home-hero-spotlight-thumb::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.55) 76%, #fff 100%);
    pointer-events: none;
}

.home-hero-spotlight-body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.home-hero-spotlight-type {
    display: block;
    color: #006f7c;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.home-hero-spotlight-title {
    display: -webkit-box;
    margin-top: 0.16rem;
    overflow: hidden;
    color: #10202a;
    font-size: 0.93rem;
    font-weight: 800;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-hero-spotlight-subtitle {
    display: block;
    margin-top: 0.14rem;
    overflow: hidden;
    color: #55707a;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-hero-spotlight-card > i {
    position: relative;
    z-index: 1;
    align-self: start;
    margin-top: 0;
    color: #9d174d;
    flex: 0 0 auto;
}

.home-hero-spotlights.is-carousel-ready .home-hero-spotlight-toggle {
    display: inline-flex;
}

.home-hero-spotlights.is-carousel-ready .home-hero-spotlight-rail {
    display: grid;
    width: min(100%, 17.5rem);
    overflow: hidden;
    scroll-snap-type: none;
}

.home-hero-spotlights.is-carousel-ready .home-hero-spotlight-card {
    grid-area: 1 / 1;
    width: 100%;
    flex-basis: auto;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(1.15rem, 0, 0) scale(0.985);
}

.home-hero-spotlights.is-carousel-ready .home-hero-spotlight-card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

.home-hero-spotlights.is-carousel-ready .home-hero-spotlight-card.is-active .home-hero-spotlight-body {
    animation: homeSpotlightTextIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero-spotlights.is-carousel-ready .home-hero-spotlight-card.is-active .home-hero-spotlight-thumb img {
    animation: homeSpotlightImageIn 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes homeSpotlightTextIn {
    0% {
        opacity: 0.08;
        transform: translate3d(0.7rem, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes homeSpotlightImageIn {
    0% {
        transform: scale(1.035);
    }
    100% {
        transform: scale(1);
    }
}

@media (max-width: 1024px) {
    .home-hero-layout {
        grid-template-columns: 1fr;
    }

    .home-hero-title {
        max-width: 14ch;
    }

    .home-hero-visual {
        max-width: 42rem;
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .home-course-hero {
        padding: 1.25rem 0 calc(5.25rem + env(safe-area-inset-bottom));
    }

    .home-hero-copy {
        gap: 1rem;
    }

    .home-hero-title {
        max-width: 11.5ch;
        font-size: clamp(2.05rem, 10.5vw, 2.8rem);
        line-height: 1.02;
    }

    .home-hero-title--pop {
        max-width: 11ch;
        font-size: clamp(2.65rem, 12vw, 3.75rem);
        line-height: 0.82;
        gap: 0.025em 0.19em;
        margin-bottom: 0.9rem;
        transform: rotate(-1deg);
    }

    .home-hero-title-word {
        filter:
            drop-shadow(0 0.055em 0 var(--pop-depth-1))
            drop-shadow(0 0.105em 0 var(--pop-depth-2))
            drop-shadow(0 0.145em 0.055em var(--pop-soft));
    }

    .home-hero-title-letter {
        -webkit-text-stroke-width: 0.035em;
        animation-duration: 620ms;
    }

    .home-hero-title-letter::before {
        -webkit-text-stroke-width: 0.14em;
    }

    .home-title-flair--left-top {
        left: 0.28em;
    }

    .home-title-flair--left-low {
        left: 0.48em;
    }

    .home-title-flair--right-top {
        right: 0.4em;
    }

    .home-title-flair--right-low {
        right: 0.18em;
    }

    .home-title-glint--one {
        left: 44%;
        top: 4%;
    }

    .home-hero-lede {
        font-size: 0.98rem;
        line-height: 1.54;
    }

    .home-course-paths {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: calc(100% + 2rem);
        margin-inline: -1rem;
        padding: 0 1rem 0.45rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 1rem;
    }

    .home-course-paths::-webkit-scrollbar {
        display: none;
    }

    .home-hero-actions {
        width: 100%;
        gap: 0.65rem;
        overflow: visible;
        padding: 0;
    }

    .home-hero-primary,
    .home-hero-secondary,
    .home-course-path {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .home-hero-search {
        width: 100%;
        border-radius: 1rem;
    }

    .home-hero-search input {
        width: 100%;
    }

    .home-hero-visual {
        width: 100%;
        border-radius: 1rem;
    }

    .home-hero-spotlights {
        width: 100%;
        padding: 0.65rem;
    }

    .home-hero-spotlights-head {
        gap: 0.5rem;
    }

    .home-hero-spotlights-count {
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .home-hero-spotlights.is-carousel-ready .home-hero-spotlight-rail,
    .home-hero-spotlight-rail {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .home-hero-spotlights.is-carousel-ready .home-hero-spotlight-toggle {
        display: none;
    }

    .home-hero-spotlight-card {
        grid-template-columns: 4.65rem minmax(0, 1fr) auto;
        flex: 0 0 min(82vw, 17rem);
        min-height: 4.95rem;
        gap: 0.65rem;
    }

    .home-hero-spotlights.is-carousel-ready .home-hero-spotlight-card {
        width: auto;
        flex-basis: min(82vw, 17rem);
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .home-hero-spotlight-title {
        font-size: 0.93rem;
        -webkit-line-clamp: 2;
    }

    .home-hero-spotlight-subtitle {
        font-size: 0.8rem;
        -webkit-line-clamp: 1;
    }
}

@media (min-width: 641px) and (max-width: 767px) {
    .home-course-hero {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }

}

@media (max-width: 640px) {
    .home-hero-spotlights-count {
        display: none;
    }
}

/* Enhanced Tabs */
.home-news-heading {
    flex-wrap: wrap;
}

.home-news-heading-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    color: #00ACC1;
    white-space: nowrap;
    transform: translate3d(0, 0, 0);
    transition:
        width 220ms var(--kmd-ios-ease),
        opacity 150ms var(--kmd-ios-ease),
        transform 180ms var(--kmd-ios-ease);
}

.home-news-heading-word.is-heading-out {
    opacity: 0;
    transform: translate3d(0, -0.22em, 0);
    will-change: width, opacity, transform;
}

.home-news-heading-word.is-heading-in {
    opacity: 0;
    transform: translate3d(0, 0.22em, 0);
    will-change: width, opacity, transform;
}

.kmd-tabs {
    display: flex;
    align-items: stretch;
    background: #f8f9fa;
    border-bottom: 2px solid #eee;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    -ms-touch-action: pan-x;
    overscroll-behavior-y: contain;
}

.kmd-tabs::-webkit-scrollbar {
    display: none;
}

.news-tabs-shell {
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: #eefafd;
}

.news-tabs-shell::before,
.news-tabs-shell::after {
    content: '';
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: 48px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

.news-tabs-shell::before {
    left: 0;
    border-top-left-radius: 16px;
    background: linear-gradient(90deg, #eefafd, rgba(238, 250, 253, 0));
}

.news-tabs-shell::after {
    right: 0;
    border-top-right-radius: 16px;
    background: linear-gradient(270deg, #eefafd, rgba(238, 250, 253, 0));
}

.news-tabs-shell.has-left-overflow::before,
.news-tabs-shell.has-right-overflow::after {
    opacity: 1;
    animation: news-tabs-overflow-pulse 2.8s ease-in-out infinite;
}

@keyframes news-tabs-overflow-pulse {
    0%,
    100% {
        opacity: 0.62;
    }

    50% {
        opacity: 1;
    }
}

.kmd-tab {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        color 180ms var(--kmd-ios-ease),
        background-color 180ms var(--kmd-ios-ease),
        transform 120ms var(--kmd-ios-ease);
    border: none;
    background: transparent;
    color: #666;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    touch-action: pan-x;
}

.news-tabs {
    gap: 0;
    align-items: stretch;
    padding: 0;
    background: linear-gradient(90deg, #eefafd 0%, #fff2f8 52%, #fff7e8 100%);
    border-bottom: 2px solid rgba(0, 172, 193, 0.14);
}

.news-tabs .kmd-tab {
    --tab-accent: #00acc1;
    --tab-soft: rgba(0, 172, 193, 0.13);
    padding: 14px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #666;
    box-shadow: none;
    overflow: visible;
    isolation: auto;
    transition:
        color 180ms var(--kmd-ios-ease),
        background-color 180ms var(--kmd-ios-ease),
        transform 160ms var(--kmd-ios-ease);
}

.news-tabs .kmd-tab::before {
    display: none;
}

.news-tabs .kmd-tab[data-news-tab="all"] {
    --tab-accent: #00acc1;
    --tab-soft: rgba(0, 172, 193, 0.11);
}

.news-tabs .kmd-tab[data-news-tab="announcements"] {
    --tab-accent: #e91e8c;
    --tab-soft: rgba(233, 30, 140, 0.1);
}

.news-tabs .kmd-tab[data-news-tab="events"] {
    --tab-accent: #7c3aed;
    --tab-soft: rgba(124, 58, 237, 0.1);
}

.news-tabs .kmd-tab[data-news-tab="courses"] {
    --tab-accent: #f59e0b;
    --tab-soft: rgba(245, 158, 11, 0.12);
}

.news-tabs .kmd-tab[data-news-tab="jobs"] {
    --tab-accent: #16a34a;
    --tab-soft: rgba(22, 163, 74, 0.1);
}

.kmd-tab:active {
    transform: translateY(1px);
}

.kmd-tab:focus {
    outline: none;
}

.kmd-tab:focus-visible {
    outline: 2px solid rgba(0, 172, 193, 0.38);
    outline-offset: -3px;
}

.news-tabs .kmd-tab.active {
    color: #fff;
    background: var(--tab-accent);
    box-shadow: none;
    transform: none;
}

.news-tabs .kmd-tab.active::before {
    opacity: 1;
}

.kmd-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.82);
}

.news-tabs .kmd-tab.active::after {
    display: block;
}

.news-tabs .kmd-tab:not(.active):hover {
    background: var(--tab-soft);
    color: var(--tab-accent);
    box-shadow: none;
    transform: none;
}

.news-tabs .kmd-tab:not(.active):hover::before {
    opacity: 0.12;
}

.news-tab-more {
    min-width: 48px;
    min-height: 48px;
    margin-left: auto;
    padding: 0 1rem;
    color: var(--kmd-cyan);
    background: transparent;
    transition:
        color 180ms var(--kmd-ios-ease),
        background-color 180ms var(--kmd-ios-ease),
        transform 160ms var(--kmd-ios-ease);
}

.news-tab-more:hover,
.news-tab-more:focus-visible {
    color: var(--kmd-pink);
    background: rgba(233, 30, 140, 0.08);
    transform: none;
    outline: none;
}

.news-tabs-container {
    position: relative;
}

.news-tabs-container.news-tabs-transitioning {
    overflow: hidden;
    contain: paint;
    transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: height;
}

.news-tab-content {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    transition:
        opacity 150ms var(--kmd-ios-ease),
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.news-tabs-container.news-tabs-transitioning .news-tab-content {
    will-change: opacity, transform;
}

.news-tab-content.news-tab-entering {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    pointer-events: none;
}

.news-tab-content.news-tab-exiting {
    opacity: 0;
    transform: translate3d(0, -5px, 0);
    pointer-events: none;
}

/* Progress Bar for scrolling content */
.kmd-progress-container {
    position: relative;
    padding-right: 50px;
}

.kmd-progress-bar {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #e0e0e0;
    border-radius: 3px;
}

.kmd-progress-fill {
    width: 100%;
    background: linear-gradient(180deg, var(--kmd-cyan) 0%, var(--kmd-teal) 100%);
    border-radius: 3px;
    transition: height 0.2s;
}

/* News Item */
.kmd-news-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.15s;
}

.kmd-news-item:hover {
    background: #fafafa;
}

.kmd-news-item:last-child {
    border-bottom: none;
}

.news-desktop-read-more {
    --read-more-accent: #00acc1;
    display: none;
    min-height: 112px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid color-mix(in srgb, var(--read-more-accent) 32%, #fff);
    border-radius: 14px;
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.9), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--read-more-accent) 15%, #fff), #fff);
    color: #153241;
    padding: 1rem;
    transition:
        border-color 180ms var(--kmd-ios-ease),
        box-shadow 200ms var(--kmd-ios-ease),
        transform 160ms var(--kmd-ios-ease);
}

.news-desktop-read-more:hover,
.news-desktop-read-more:focus-visible {
    border-color: color-mix(in srgb, var(--read-more-accent) 62%, #fff);
    box-shadow: 0 12px 22px color-mix(in srgb, var(--read-more-accent) 18%, transparent);
    transform: translateY(-2px);
    outline: none;
}

.news-desktop-read-more-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.25;
    color: #10202a;
}

.news-desktop-read-more-copy {
    display: block;
    margin-top: 0.22rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #4b6470;
}

.news-desktop-read-more-icon {
    display: inline-flex;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--read-more-accent);
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(15, 23, 42, 0.16);
}

.kmd-news-date {
    flex-shrink: 0;
    text-align: center;
    min-width: 60px;
}

.kmd-news-date .day {
    font-size: 32px;
    font-weight: 700;
    color: var(--kmd-cyan);
    line-height: 1;
}

.kmd-news-date .month {
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}

.kmd-news-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.4;
}

.kmd-news-content p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.kmd-news-category {
    font-size: 12px;
    color: var(--kmd-teal);
    font-weight: 500;
    margin-bottom: 4px;
}

.news-mobile-more {
    display: none;
}

.news-mobile-more button {
    min-height: 44px;
}

.news-mobile-more.is-loading button {
    opacity: 0.75;
    pointer-events: none;
}

.news-mobile-extra {
    display: flex;
}

@media (min-width: 768px) {
    .news-desktop-read-more {
        display: flex;
    }
}

@media (max-width: 640px) {
    .news-tabs-container {
        position: relative;
    }

    .news-tabs-shell::before,
    .news-tabs-shell::after {
        display: block;
    }

    .news-tab-content {
        position: relative;
        overflow: hidden;
    }

    .news-list .news-mobile-extra {
        display: none !important;
    }

    .news-desktop-read-more {
        display: none !important;
    }

    .news-mobile-more {
        display: flex;
        justify-content: center;
        margin: 0 -1.25rem -1.25rem;
        padding: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 26%);
        border-radius: 0 0 16px 16px;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .news-mobile-more.is-hidden {
        display: none;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
    }

    .news-mobile-more button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 54px;
        padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom));
        border-radius: 0 0 16px 16px;
        background: #00ACC1;
        color: #fff;
        font-size: 0.875rem;
        font-weight: 700;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
        transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    }

    .news-mobile-more button:active {
        transform: scale(0.98);
    }
}

/* Card Slider Section */
.kmd-card-slider {
    position: relative;
}

.kmd-card-slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.kmd-card-slider-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.kmd-card-slider-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kmd-card-slider-nav button {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.kmd-card-slider-nav button:hover {
    border-color: var(--kmd-cyan);
    color: var(--kmd-cyan);
}

.kmd-slider-progress {
    flex: 1;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 0 12px;
    overflow: hidden;
}

.kmd-slider-progress-fill {
    height: 100%;
    background: var(--kmd-cyan);
    border-radius: 2px;
    transition: width 0.3s;
}

/* Social Icons */
.kmd-social-icons {
    display: flex;
    gap: 8px;
}

.kmd-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.2s;
}

.kmd-social-icon:hover {
    transform: scale(1.1);
}

.kmd-social-youtube { background: #FF0000; }
.kmd-social-facebook { background: #1877F2; }
.kmd-social-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.kmd-social-blog { background: #03C75A; }

/* Quick Links */
.kmd-quick-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    color: #444;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.15s;
}

.kmd-quick-link:hover {
    background: #f0f9ff;
    color: var(--kmd-blue);
}

/* Quick Services filter motion */
#services-section {
    --services-section-tint: #06b6d4;
    --services-section-tint-opacity: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
}

#services-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--services-section-tint);
    opacity: var(--services-section-tint-opacity);
    transition:
        background-color 520ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 520ms cubic-bezier(0.32, 0.72, 0, 1);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 48%, transparent 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 48%, transparent 100%);
}

#services-section > .container {
    position: relative;
    z-index: 1;
}

.filter-buttons {
    --services-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
    --filter-goo-x: 0px;
    --filter-goo-y: 0px;
    --filter-goo-width: 0px;
    --filter-goo-height: 34px;
    --filter-goo-direction: 1;
    --filter-goo-center: 0px;
    --filter-goo-drop-near: 8px;
    --filter-goo-drop-mid: 13px;
    --filter-goo-drop-far: 28px;
    --filter-goo-tail-near: -10px;
    --filter-goo-tail-mid: -18px;
    --filter-goo-tail-far: -34px;
    --filter-goo-drop-peak-opacity: 0.98;
    --filter-goo-drop-mid-opacity: 0.86;
    --filter-goo-bridge-x: 0px;
    --filter-goo-bridge-y: 0px;
    --filter-goo-bridge-width: 0px;
    --filter-goo-motion-y: 0px;
    --filter-goo-motion-height: 24px;
    --filter-goo-sweep-origin: left center;
    --filter-goo-color: #06b6d4;
    --filter-goo-solid-color: #06b6d4;
    --filter-goo-color-from: #06b6d4;
    --filter-goo-color-mid: #22d3ee;
    --filter-goo-color-to: #06b6d4;
    --filter-goo-shadow: rgba(6, 182, 212, 0.22);
    --filter-goo-force-stretch: 1.08;
    --filter-goo-force-squash: 0.94;
    --filter-goo-force-recoil: 0.98;
    --filter-squircle-radius: 11px;
    position: relative;
    isolation: isolate;
}

.filter-btn {
    position: relative;
    z-index: 2;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--filter-squircle-radius) !important;
    background: #f3f4f6;
    transition: background-color 180ms var(--services-ease-out),
                color 180ms var(--services-ease-out),
                transform 140ms var(--services-ease-out);
}

.filter-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: #f3f4f6;
    opacity: 0;
    transition: opacity 160ms var(--services-ease-out);
}

.filter-btn:active {
    transform: scale(0.97);
}

.filter-btn.active {
    color: #fff;
    background: #06b6d4;
}

.filter-buttons.has-goo .filter-btn {
    background: transparent !important;
    transition: color 180ms var(--services-ease-out),
                transform 140ms var(--services-ease-out),
                background-color 180ms var(--services-ease-out);
}

.filter-buttons.has-goo .filter-btn::before {
    opacity: 1;
}

.filter-buttons.has-goo .filter-btn.active {
    background: transparent !important;
    box-shadow: none;
}

.filter-buttons.has-goo .filter-btn.active::before {
    opacity: 0;
}

.filter-buttons.has-goo .filter-btn:not(.active) {
    background: transparent !important;
    color: #4b5563;
}

.filter-goo {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    filter: none;
    overflow: visible;
}

.filter-buttons.has-goo.is-goo-moving .filter-goo {
    filter: url("#services-filter-goo");
}

.filter-goo-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.filter-goo__body,
.filter-goo__motion,
.filter-goo__bridge,
.filter-goo__drop,
.filter-goo__tail {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--filter-goo-height);
    transform: translate3d(var(--filter-goo-x), var(--filter-goo-y), 0);
    will-change: transform, width, opacity;
}

.filter-goo__body {
    width: var(--filter-goo-width);
    border-radius: var(--filter-squircle-radius);
    overflow: hidden;
    background-color: var(--filter-goo-solid-color);
    background-image: none;
    box-shadow: 0 10px 22px var(--filter-goo-shadow);
    transition:
        transform 520ms cubic-bezier(0, 0.7, 0.36, 1),
        width 520ms cubic-bezier(0.78, 0, 0.2, 1),
        height 520ms cubic-bezier(0, 0.7, 0.36, 1),
        box-shadow 260ms ease,
        border-radius 520ms cubic-bezier(0, 0.7, 0.36, 1);
}

.filter-goo__body::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 36%);
    opacity: 0.72;
    transform: scale(1);
    transform-origin: var(--filter-goo-sweep-origin);
    pointer-events: none;
}

.filter-goo__bridge {
    width: var(--filter-goo-bridge-width);
    border-radius: var(--filter-squircle-radius);
    background: linear-gradient(105deg, var(--filter-goo-color-from) 0%, var(--filter-goo-color-mid) 48%, var(--filter-goo-color-to) 100%);
    opacity: 0;
    transform: translate3d(var(--filter-goo-bridge-x), var(--filter-goo-bridge-y), 0) scaleX(0.08);
    transform-origin: var(--filter-goo-sweep-origin);
}

.filter-goo__motion {
    width: var(--filter-goo-bridge-width);
    height: var(--filter-goo-motion-height);
    border-radius: 999px;
    background: linear-gradient(105deg, var(--filter-goo-color-from) 0%, var(--filter-goo-color-mid) 48%, var(--filter-goo-color-to) 100%);
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(var(--filter-goo-bridge-x), var(--filter-goo-motion-y), 0) scaleX(0.08);
    transform-origin: var(--filter-goo-sweep-origin);
}

.filter-goo__drop,
.filter-goo__tail {
    width: var(--filter-goo-height);
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(120deg, var(--filter-goo-color-from) 0%, var(--filter-goo-color-to) 100%);
    transition:
        transform 520ms cubic-bezier(0, 0.7, 0.36, 1),
        opacity 160ms ease,
        background-color 220ms ease;
}

.filter-goo__drop {
    transform: translate3d(
        calc(var(--filter-goo-center) + var(--filter-goo-drop-mid)),
        var(--filter-goo-y),
        0
    ) scale(0.72);
}

.filter-goo__tail {
    transform: translate3d(
        calc(var(--filter-goo-center) + var(--filter-goo-tail-mid)),
        var(--filter-goo-y),
        0
    ) scale(0.58);
}

.filter-buttons.has-goo.is-goo-moving .filter-goo__body {
    animation: services-filter-squircle 620ms cubic-bezier(0, 0.7, 0.36, 1) both;
}

.filter-buttons.has-goo.is-goo-moving .filter-goo__body::after {
    animation: services-filter-force 620ms cubic-bezier(0, 0.7, 0.36, 1) both;
}

.filter-buttons.has-goo.is-goo-moving .filter-goo__bridge {
    animation: services-filter-bridge 620ms cubic-bezier(0, 0.7, 0.36, 1) both;
}

.filter-buttons.has-goo.is-goo-moving .filter-goo__motion {
    animation: services-filter-motion-blur 620ms cubic-bezier(0, 0.7, 0.36, 1) both;
}

.filter-buttons.has-goo.is-goo-moving .filter-goo__drop {
    animation: services-filter-drop 620ms cubic-bezier(0, 0.7, 0.36, 1) both;
}

.filter-buttons.has-goo.is-goo-moving .filter-goo__tail {
    animation: services-filter-tail 620ms cubic-bezier(0, 0.7, 0.36, 1) both;
}

@keyframes services-filter-squircle {
    0% {
        border-radius: var(--filter-squircle-radius);
    }

    42% {
        border-radius: calc(var(--filter-squircle-radius) + 3px);
    }

    70% {
        border-radius: calc(var(--filter-squircle-radius) - 1px);
    }

    100% {
        border-radius: var(--filter-squircle-radius);
    }
}

@keyframes services-filter-force {
    0% {
        transform: scale(1);
        opacity: 0.64;
    }

    34% {
        transform: scaleX(var(--filter-goo-force-stretch)) scaleY(var(--filter-goo-force-squash));
        opacity: 0.86;
    }

    68% {
        transform: scaleX(var(--filter-goo-force-recoil)) scaleY(1.035);
        opacity: 0.76;
    }

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

@keyframes services-filter-bridge {
    0% {
        opacity: 0;
        transform: translate3d(var(--filter-goo-bridge-x), var(--filter-goo-bridge-y), 0) scaleX(0.08);
    }

    18% {
        opacity: 0.42;
    }

    58% {
        opacity: 0.34;
        transform: translate3d(var(--filter-goo-bridge-x), var(--filter-goo-bridge-y), 0) scaleX(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--filter-goo-bridge-x), var(--filter-goo-bridge-y), 0) scaleX(1);
    }
}

@keyframes services-filter-motion-blur {
    0% {
        opacity: 0;
        filter: blur(14px);
        transform: translate3d(var(--filter-goo-bridge-x), var(--filter-goo-motion-y), 0) scaleX(0.12);
    }

    20% {
        opacity: 0.46;
    }

    52% {
        opacity: 0.5;
        filter: blur(12px);
        transform: translate3d(var(--filter-goo-bridge-x), var(--filter-goo-motion-y), 0) scaleX(var(--filter-goo-force-stretch));
    }

    82% {
        opacity: 0.18;
        filter: blur(10px);
    }

    100% {
        opacity: 0;
        filter: blur(10px);
        transform: translate3d(var(--filter-goo-bridge-x), var(--filter-goo-motion-y), 0) scaleX(1);
    }
}

@keyframes services-filter-drop {
    0%,
    100% {
        opacity: 0;
        transform: translate3d(
            calc(var(--filter-goo-center) + var(--filter-goo-drop-near)),
            var(--filter-goo-y),
            0
        ) scale(0.56);
    }

    34% {
        opacity: var(--filter-goo-drop-peak-opacity);
        transform: translate3d(
            calc(var(--filter-goo-center) + var(--filter-goo-drop-far)),
            var(--filter-goo-y),
            0
        ) scale(0.9, 0.74);
    }

    64% {
        opacity: var(--filter-goo-drop-mid-opacity);
        transform: translate3d(
            calc(var(--filter-goo-center) + var(--filter-goo-drop-mid)),
            var(--filter-goo-y),
            0
        ) scale(0.74, 0.92);
    }
}

@keyframes services-filter-tail {
    0%,
    100% {
        opacity: 0;
        transform: translate3d(
            calc(var(--filter-goo-center) + var(--filter-goo-tail-near)),
            var(--filter-goo-y),
            0
        ) scale(0.52);
    }

    28% {
        opacity: 0.78;
        transform: translate3d(
            calc(var(--filter-goo-center) + var(--filter-goo-tail-far)),
            var(--filter-goo-y),
            0
        ) scale(0.72, 0.58);
    }

    58% {
        opacity: 0.64;
        transform: translate3d(
            calc(var(--filter-goo-center) + var(--filter-goo-tail-mid)),
            var(--filter-goo-y),
            0
        ) scale(0.62, 0.8);
    }
}

#services-grid {
    --services-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
    --service-filter-color: #06b6d4;
    --service-filter-shadow: rgba(6, 182, 212, 0.16);
    align-items: start;
    grid-auto-rows: max-content;
}

#services-grid.is-filtering {
    overflow: hidden;
    transition: height 260ms var(--services-ease-out);
    will-change: height;
}

.shortcut-item {
    align-self: start;
    transform-origin: 50% 72%;
    position: relative;
    overflow: visible;
    isolation: isolate;
    min-height: 128px;
    transition-property: transform, opacity, border-color, box-shadow, background-color, filter;
    transition-duration: 420ms;
    transition-timing-function: cubic-bezier(0.18, 1.25, 0.3, 1);
    backface-visibility: hidden;
}

.shortcut-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--shortcut-fill, #06b6d420);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition:
        opacity 140ms ease-out,
        transform 360ms cubic-bezier(0.2, 0.82, 0.22, 1);
    z-index: 0;
    pointer-events: none;
}

.shortcut-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--shortcut-fill, #06b6d420);
    opacity: 0;
    clip-path: polygon(0 112%, 18% 108%, 38% 113%, 58% 107%, 78% 111%, 100% 106%, 100% 100%, 0 100%);
    transition:
        opacity 140ms ease-out,
        clip-path 360ms cubic-bezier(0.2, 0.82, 0.22, 1);
    z-index: 1;
    pointer-events: none;
}

.shortcut-item:hover,
.shortcut-item:focus-visible {
    transform: translateY(-3px) scale(1.006) rotate(var(--shortcut-tilt, 0deg));
}

.shortcut-item:hover::before,
.shortcut-item:focus-visible::before {
    opacity: 1;
    transform: scaleY(1);
}

.shortcut-item:hover::after,
.shortcut-item:focus-visible::after {
    opacity: 1;
    clip-path: polygon(0 0, 18% 0, 38% 0, 58% 0, 78% 0, 100% 0, 100% 100%, 0 100%);
}

.shortcut-item > :not(.shortcut-sparkle-field):not(.shortcut-character) {
    position: relative;
    z-index: 4;
}

.shortcut-content {
    display: flex;
    min-height: 88px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform-origin: 42% 58%;
    transition:
        transform 460ms cubic-bezier(0.18, 1.25, 0.3, 1),
        opacity 220ms ease-out;
    will-change: transform;
}

.shortcut-character {
    position: absolute;
    right: -26px;
    bottom: -30px;
    z-index: 2;
    width: clamp(94px, 72%, 148px);
    max-width: none;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: translate3d(44%, 48%, 0) rotate(-14deg) scale(0.68);
    transform-origin: 74% 88%;
    transition:
        opacity 220ms ease-out,
        transform 540ms cubic-bezier(0.18, 1.32, 0.28, 1);
    will-change: transform, opacity;
    filter: drop-shadow(0 16px 22px rgba(15, 23, 42, 0.12));
}

.shortcut-item:hover .shortcut-content,
.shortcut-item:focus-visible .shortcut-content {
    transform: translate3d(-26px, 0, 0) scale(0.91);
}

.shortcut-item:hover .shortcut-character,
.shortcut-item:focus-visible .shortcut-character {
    opacity: 1;
    transform: translate3d(-4px, -42px, 0) rotate(-5deg) scale(1);
}

@media (max-width: 640px) {
    .shortcut-item {
        min-height: 116px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .shortcut-character {
        right: -24px;
        bottom: -28px;
        width: clamp(78px, 82%, 112px);
    }

    .shortcut-item:hover .shortcut-content,
    .shortcut-item:focus-visible .shortcut-content {
        transform: translate3d(-15px, 0, 0) scale(0.92);
    }

    .shortcut-item:hover .shortcut-character,
    .shortcut-item:focus-visible .shortcut-character {
        transform: translate3d(-2px, -30px, 0) rotate(-5deg) scale(1);
    }
}

.shortcut-sparkle-field {
    position: absolute;
    inset: -18px;
    width: calc(100% + 36px);
    height: calc(100% + 36px);
    pointer-events: none;
    overflow: visible;
    z-index: 3;
    color: var(--shortcut-sparkle-color, #06b6d4);
    contain: layout style;
}

.shortcut-sparkle {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    fill: currentColor;
    filter: drop-shadow(0 4px 8px color-mix(in srgb, currentColor 24%, transparent));
}

.shortcut-sparkle--star {
    transform: translate(calc(var(--spark-x, 50px) - 50px), calc(var(--spark-y, 50px) - 50px)) scale(0.02) rotate(var(--spark-r, 0deg));
}

.shortcut-sparkle--dot {
    transform: translate(calc(var(--spark-x, 50px) - 50px), calc(var(--spark-y, 50px) - 50px)) scale(0.04);
}

.shortcut-item.is-sparkling .shortcut-sparkle {
    animation: shortcutSparklePop 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--spark-delay, 0ms) both;
}

.shortcut-item.is-sparkling .shortcut-sparkle--dot {
    animation-name: shortcutSparkleDot;
}

@keyframes shortcutSparklePop {
    0% {
        opacity: 0;
        transform: translate(calc(var(--spark-x) - 50px), calc(var(--spark-y) - 50px)) scale(0.02) rotate(var(--spark-r));
    }
    42% {
        opacity: 0.95;
        transform: translate(calc(var(--spark-x) - 50px), calc(var(--spark-y) - 50px)) scale(var(--spark-scale, 0.13)) rotate(calc(var(--spark-r) + 28deg));
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--spark-x) + var(--spark-dx, 0px) - 50px), calc(var(--spark-y) + var(--spark-dy, -10px) - 50px)) scale(0.02) rotate(calc(var(--spark-r) + 96deg));
    }
}

@keyframes shortcutSparkleDot {
    0% {
        opacity: 0;
        transform: translate(calc(var(--spark-x) - 50px), calc(var(--spark-y) - 50px)) scale(0.04);
    }
    44% {
        opacity: 0.75;
        transform: translate(calc(var(--spark-x) - 50px), calc(var(--spark-y) - 50px)) scale(var(--spark-scale, 0.22));
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--spark-x) + var(--spark-dx, 0px) - 50px), calc(var(--spark-y) + var(--spark-dy, -8px) - 50px)) scale(0.04);
    }
}

.shortcut-item.is-filter-settling {
    border-color: color-mix(in srgb, var(--service-filter-color) 14%, #e5e7eb);
    box-shadow: 0 3px 6px color-mix(in srgb, var(--service-filter-color) 10%, transparent);
}

.shortcut-item.is-filter-settling .shortcut-content > span:first-child {
    animation: services-card-icon-settle 360ms cubic-bezier(0, 0.7, 0.36, 1) both;
}

@keyframes services-card-icon-settle {
    0% {
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }

    42% {
        transform: translateY(-1px) scale(1.028, 0.982);
        filter: saturate(1.08);
    }

    72% {
        transform: translateY(0.5px) scale(0.992, 1.01);
    }

    100% {
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }
}

.shortcut-filter-clone {
    contain: layout paint style;
    backface-visibility: hidden;
}

/* Service Items */
.kmd-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
}

.kmd-service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    color: #555;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    border-radius: 12px;
}

.kmd-service-item:hover {
    background: #f0f9ff;
    color: var(--kmd-blue);
}

.kmd-service-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 10px;
    transition: all 0.2s;
}

.kmd-service-item:hover .kmd-service-icon {
    background: #e3f2fd;
}

/* ============================================
   MOBILE SCROLL-SNAP + NATIVE FEEL
   ============================================ */
@media (max-width: 640px) {
    .featured-courses-scroll,
    .upcoming-events-scroll {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-bottom: 0.5rem;
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        scroll-padding-inline: 1rem;
    }
    
    .featured-courses-scroll > *,
    .upcoming-events-scroll > * {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 85%;
    }
    
    .featured-courses-scroll::-webkit-scrollbar,
    .upcoming-events-scroll::-webkit-scrollbar {
        display: none;
    }
    
    /* Filter buttons scroll on mobile */
    .filter-buttons {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
    
    .filter-buttons::-webkit-scrollbar {
        display: none;
    }
    
    .filter-btn {
        flex-shrink: 0;
    }
    
    /* Larger tap targets */
    .shortcut-item {
        min-height: 100px;
    }
    
    /* News tabs scroll - horizontal only */
    .news-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        touch-action: pan-x;
        -ms-touch-action: pan-x;
        overscroll-behavior: contain;
    }
    
    .news-tabs::-webkit-scrollbar {
        display: none;
    }
    
    /* Filter buttons scroll - horizontal only */
    .filter-buttons {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        touch-action: pan-x;
        -ms-touch-action: pan-x;
        scrollbar-width: none;
        overscroll-behavior: contain;
    }
    
    .filter-buttons::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================
   TESTIMONIALS - Stable Marquee Hover
   ============================================ */
.testimonial-marquee {
    --testimonial-hover-in: cubic-bezier(0.23, 1, 0.32, 1);
    --testimonial-hover-out: cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    padding-block: 0.85rem;
    margin-block: -0.85rem;
    position: relative;
    z-index: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.testimonial-marquee-track {
    display: flex;
    width: max-content;
    animation: testimonial-marquee-scroll var(--testimonial-duration, 36s) linear infinite;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.testimonial-marquee-set {
    display: flex;
    flex: 0 0 auto;
    gap: 1.5rem;
    align-items: stretch;
    padding-right: 1.5rem;
    isolation: isolate;
}

.testimonial-marquee-card {
    width: min(82vw, 21rem);
    min-height: 16rem;
    overflow: hidden;
    border: 1px solid transparent;
    contain: layout style;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: 50% 62%;
    transition:
        transform 235ms var(--testimonial-hover-out),
        box-shadow 170ms ease,
        filter 170ms ease,
        border-color 170ms ease;
    will-change: transform;
    z-index: 1;
}

.testimonial-marquee-card > * {
    position: relative;
    z-index: 1;
}

.testimonial-marquee-card__quote-mark,
.testimonial-marquee-card__stars,
.testimonial-marquee-card__content,
.testimonial-marquee-card__author,
.testimonial-marquee-card__avatar {
    transition:
        transform 210ms var(--testimonial-hover-out),
        filter 170ms ease;
}

.testimonial-marquee-card__quote-mark {
    transform-origin: 50% 10%;
}

.testimonial-marquee-card__content {
    max-width: 98%;
}

.testimonial-section-container {
    overflow: visible;
}

.testimonial-marquee-author {
    margin-top: auto;
}

.testimonial-marquee--static {
    -webkit-mask-image: none;
    mask-image: none;
}

.testimonial-marquee--static .testimonial-marquee-track {
    width: 100%;
    justify-content: center;
    animation: none;
}

.testimonial-marquee--static .testimonial-marquee-set {
    padding-right: 0;
}

@media (hover: hover) and (pointer: fine) {
    .testimonial-marquee:hover .testimonial-marquee-track {
        animation-play-state: paused;
    }

    .testimonial-marquee-card:hover {
        border-color: rgba(6, 182, 212, 0.22);
        box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.13), 0 0.45rem 0.9rem rgba(15, 23, 42, 0.07);
        filter: saturate(1.02);
        transform: translate3d(0, -0.35rem, 0) scale(1.045);
        transition:
            transform 215ms var(--testimonial-hover-in),
            box-shadow 180ms ease,
            filter 180ms ease,
            border-color 180ms ease;
        z-index: 5;
    }

    .testimonial-marquee-card:hover .testimonial-marquee-card__avatar {
        transform: scale(1.035);
    }
}

@keyframes testimonial-marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (min-width: 768px) {
    .testimonial-marquee-card {
        width: 22rem;
    }
}

@media (min-width: 1280px) {
    .testimonial-marquee-card {
        width: 23rem;
    }
}

/* Soft reduced motion for the landing page.
   Some browsers inherit this from OS animation settings, which made the homepage feel broken.
   Preserve the landing-page motion language while keeping timings short. */
@media (prefers-reduced-motion: reduce) {
    .home-course-hero .home-hero-title-letter {
        animation: homeTitleLetterPop 340ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
        animation-delay: calc(var(--letter-index, 0) * 14ms) !important;
        filter: none;
    }

    .home-course-hero .home-title-flair {
        opacity: 1;
    }

    .home-course-hero .home-title-flair svg {
        animation: homeTitleFlairSpinSettle 460ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    .home-hero-primary,
    .home-hero-secondary,
    .home-course-path,
    .home-course-path-icon,
    .home-hero-search button,
    .home-hero-spotlight-toggle,
    .home-hero-spotlight-card,
    .home-hero-spotlight-body,
    .home-hero-spotlight-thumb img,
    .home-news-heading-word,
    .news-tabs-shell::before,
    .news-tabs-shell::after,
    .kmd-tab,
    .news-tabs .kmd-tab,
    .news-tab-more,
    .news-tabs-container.news-tabs-transitioning,
    .news-tab-content,
    .kmd-news-item,
    #services-section::before,
    #services-grid.is-filtering,
    .filter-btn,
    .shortcut-item,
    .shortcut-content,
    .shortcut-character,
    .shortcut-item::before,
    .shortcut-item::after,
    .testimonial-marquee-card,
    .testimonial-marquee-card__quote-mark,
    .testimonial-marquee-card__stars,
    .testimonial-marquee-card__content,
    .testimonial-marquee-card__author,
    .testimonial-marquee-card__avatar {
        transition-duration: 150ms !important;
    }

    .home-hero-spotlights.is-carousel-ready .home-hero-spotlight-card.is-active .home-hero-spotlight-body,
    .home-hero-spotlights.is-carousel-ready .home-hero-spotlight-card.is-active .home-hero-spotlight-thumb img {
        animation: none !important;
    }

    .home-news-heading-word {
        transition:
            width 180ms var(--kmd-ios-ease),
            opacity 130ms var(--kmd-ios-ease),
            transform 150ms var(--kmd-ios-ease) !important;
    }

    .news-tabs-shell::before,
    .news-tabs-shell::after {
        transition: opacity 150ms ease !important;
    }

    .kmd-tab,
    .news-tabs .kmd-tab,
    .news-tab-more {
        transition:
            color 150ms var(--kmd-ios-ease),
            background-color 150ms var(--kmd-ios-ease),
            transform 120ms var(--kmd-ios-ease) !important;
    }

    .news-tabs-container.news-tabs-transitioning {
        transition: height 210ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .news-tab-content {
        transition:
            opacity 130ms var(--kmd-ios-ease),
            transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    #services-section::before {
        transition:
            background-color 260ms cubic-bezier(0.32, 0.72, 0, 1),
            opacity 260ms cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    #services-grid.is-filtering {
        transition: height 210ms var(--services-ease-out) !important;
    }

    .filter-btn {
        transition:
            background-color 150ms var(--services-ease-out),
            color 150ms var(--services-ease-out),
            transform 120ms var(--services-ease-out) !important;
    }

    .shortcut-item {
        transition:
            transform 250ms cubic-bezier(0.18, 1.1, 0.3, 1),
            opacity 150ms ease-out,
            border-color 150ms ease-out,
            box-shadow 150ms ease-out,
            background-color 150ms ease-out,
            filter 150ms ease-out !important;
    }

    .shortcut-content {
        transition:
            transform 260ms cubic-bezier(0.18, 1.1, 0.3, 1),
            opacity 150ms ease-out !important;
    }

    .shortcut-character {
        transition:
            opacity 150ms ease-out,
            transform 300ms cubic-bezier(0.18, 1.1, 0.3, 1) !important;
    }

    .shortcut-item::before,
    .shortcut-item::after {
        transition-duration: 210ms !important;
    }

    .shortcut-item::before {
        transition:
            opacity 130ms ease-out,
            transform 210ms cubic-bezier(0.2, 0.82, 0.22, 1) !important;
    }

    .shortcut-item::after {
        transition:
            opacity 130ms ease-out,
            clip-path 210ms cubic-bezier(0.2, 0.82, 0.22, 1) !important;
    }

    .home-course-path::after {
        display: block;
    }

    .home-course-path:hover::before,
    .home-course-path:focus-visible::before,
    .home-course-path:active::before {
        animation: home-course-liquid-fill 360ms cubic-bezier(0.25, 1, 0.5, 1) both !important;
    }

    .home-course-path:hover::after,
    .home-course-path:focus-visible::after,
    .home-course-path:active::after {
        animation: home-course-liquid-front 360ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    @supports ((-webkit-mask: linear-gradient(#000, #000)) or (mask: linear-gradient(#000, #000))) {
        .home-course-path:hover::before,
        .home-course-path:focus-visible::before,
        .home-course-path:active::before {
            animation: home-course-liquid-mask 360ms cubic-bezier(0.25, 1, 0.5, 1) both !important;
        }
    }

    .news-tabs-shell.has-left-overflow::before,
    .news-tabs-shell.has-right-overflow::after,
    .filter-goo__body,
    .filter-goo__body::after,
    .filter-goo__motion,
    .filter-goo__bridge,
    .filter-goo__drop,
    .filter-goo__tail,
    .shortcut-item.is-filter-settling .shortcut-content > span:first-child,
    .shortcut-item.is-sparkling .shortcut-sparkle {
        animation-duration: 320ms !important;
    }

}