        /* ── Google Fonts ── */
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Baloo+2:wght@400;600;700;800&display=swap');

        body {
            font-family: 'Nunito', sans-serif;
        }

        .font-baloo {
            font-family: 'Baloo 2', cursive;
        }

        /* ── Nav underline ── */
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 0;
            height: 2.5px;
            background: #E82428;
            border-radius: 2px;
            transition: width .2s;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        /* ── Mobile menu ── */
        #mobile-menu {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, opacity 0.3s ease;
        }

        #mobile-menu.menu-open {
            max-height: 520px;
            opacity: 1;
        }

        /* ── Hamburger bars ── */
        .hbar {
            display: block;
            width: 24px;
            height: 2.5px;
            background: #E82428;
            border-radius: 999px;
            transition: transform 0.3s ease, opacity 0.25s ease, background 0.2s;
        }

        /* ── FAQ ── */
        .faq-answer {
            display: none;
        }

        .faq-item.open .faq-answer {
            display: block;
        }

        .faq-item.open .toggle-btn {
            background: #E82428;
            color: white;
        }

        /* ── Hover states ── */
        .feat-chip:hover {
            border-left-color: #E82428;
            transform: translateX(5px);
        }

        .pkg-card:hover {
            transform: translateY(-6px);
        }

        .curr-item:hover {
            transform: translateX(4px);
        }

        .method-card:hover {
            border-color: #E82428;
            background: white;
            transform: translateY(-4px);
        }

        .ben-card:hover {
            background: rgba(255, 255, 255, .13);
        }

        /* ── Pseudo-elements ── */
        .video-wrap::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        .testi-card::before {
            content: '\201C';
            position: absolute;
            top: 14px;
            right: 22px;
            font-size: 72px;
            font-family: 'Baloo 2', cursive;
            color: rgba(232, 36, 40, .10);
            line-height: 1;
        }

        .hero-before::before {
            content: '';
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: rgba(255, 217, 61, .13);
            top: -150px;
            right: -120px;
            pointer-events: none;
        }

        .hero-after::after {
            content: '';
            position: absolute;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(232, 36, 40, .07);
            bottom: -60px;
            left: 8%;
            pointer-events: none;
        }

        .stat-top {
            border-top: 3px solid #E82428;
        }

        .hero-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, #E82428, #1C2B6E, #FFD93D);
        }

        .footer-link:hover {
            color: #FFD93D;
        }

        /* ════════════════════════════════════════════
           ANIMATIONS
        ════════════════════════════════════════════ */

        /* --- Hero badge bounce-in --- */
        @keyframes badgePop {
            0% {
                opacity: 0;
                transform: scale(0.6) translateY(-10px);
            }

            70% {
                transform: scale(1.08) translateY(2px);
            }

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

        .hero-badge {
            animation: badgePop 0.7s cubic-bezier(.34, 1.56, .64, 1) both;
        }

        /* --- Hero heading slide-in --- */
        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .hero-title {
            animation: slideInLeft 0.8s 0.25s ease both;
        }

        .hero-sub {
            animation: slideInLeft 0.8s 0.45s ease both;
        }

        .hero-btns {
            animation: slideInLeft 0.8s 0.6s ease both;
        }

        .hero-stats {
            animation: slideInLeft 0.8s 0.75s ease both;
        }

        /* --- Hero card slide-in-right --- */
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .hero-card-wrap {
            animation: slideInRight 0.9s 0.35s ease both;
        }

        /* --- Floating orbs in hero background --- */
        @keyframes orb1 {

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

            33% {
                transform: translate(20px, -30px) scale(1.05);
            }

            66% {
                transform: translate(-15px, 20px) scale(0.95);
            }
        }

        @keyframes orb2 {

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

            50% {
                transform: translate(-25px, -20px) scale(1.08);
            }
        }

        .hero-orb1 {
            animation: orb1 9s ease-in-out infinite;
        }

        .hero-orb2 {
            animation: orb2 12s ease-in-out infinite;
        }

        /* --- Navbar slide-down on load --- */
        @keyframes navSlide {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        nav {
            animation: navSlide 0.55s ease both;
        }

        /* --- Stat card pop on scroll (JS adds .stat-visible) --- */
        .stat-card {
            opacity: 0;
            transform: translateY(16px) scale(0.95);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .stat-card.stat-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* --- Chip shake on hover --- */
        @keyframes chipShake {

            0%,
            100% {
                transform: translateX(5px);
            }

            25% {
                transform: translateX(9px) rotate(1deg);
            }

            75% {
                transform: translateX(7px) rotate(-1deg);
            }
        }

        .feat-chip:hover {
            animation: chipShake 0.4s ease;
        }

        /* --- Package cards stagger (JS adds class) --- */
        .pkg-card {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s;
        }

        .pkg-card.pkg-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- SPROUT items stagger --- */
        .curr-item {
            opacity: 0;
            transform: translateX(-20px);
            transition: opacity 0.45s ease, transform 0.45s ease;
        }

        .curr-item.curr-visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* --- Method cards --- */
        .method-card {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.2s, background 0.2s;
        }

        .method-card.meth-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Benefit cards --- */
        .ben-card {
            opacity: 0;
            transform: scale(0.93);
            transition: opacity 0.45s ease, transform 0.45s ease, background 0.2s;
        }

        .ben-card.ben-visible {
            opacity: 1;
            transform: scale(1);
        }

        /* --- Testimonial cards --- */
        .testi-card {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .testi-card.testi-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- FAQ items --- */
        .faq-item {
            opacity: 0;
            transform: translateX(-12px);
            transition: opacity 0.4s ease, transform 0.4s ease, border-left-color 0.2s;
        }

        .faq-item.faq-visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* --- Section headings --- */
        @keyframes headingReveal {
            from {
                opacity: 0;
                transform: translateY(18px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .sec-heading {
            opacity: 0;
        }

        .sec-heading.heading-visible {
            animation: headingReveal 0.6s ease both;
        }

        /* --- SPROUT sticky card pulse ring --- */
        @keyframes ringPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(232, 36, 40, .25);
            }

            70% {
                box-shadow: 0 0 0 16px rgba(232, 36, 40, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(232, 36, 40, 0);
            }
        }

        .sprout-card {
            animation: ringPulse 3s ease-in-out infinite;
        }

        /* --- Benefit section heading glow --- */
        @keyframes whiteGlow {

            0%,
            100% {
                text-shadow: 0 0 0 transparent;
            }

            50% {
                text-shadow: 0 0 24px rgba(255, 255, 255, .25);
            }
        }

        .ben-heading {
            animation: whiteGlow 4s ease-in-out infinite;
        }

        /* --- Footer stagger --- */
        .footer-col {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .footer-col.footer-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Button ripple --- */
        .btn-ripple {
            position: relative;
            overflow: hidden;
        }

        .btn-ripple::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, .18);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.35s ease;
        }

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

        /* --- Feat chip border slide --- */
        .feat-chip {
            transition: border-left-color 0.2s, transform 0.25s;
        }

        /* --- Video wrap shimmer --- */
        @keyframes shimmer {
            0% {
                background-position: -400px 0;
            }

            100% {
                background-position: 400px 0;
            }
        }

        .video-shimmer {
            animation: shimmer 2.4s linear infinite;
        }

        /* --- Scroll indicator (hero bottom) --- */
        @keyframes scrollBounce {

            0%,
            100% {
                transform: translateY(0);
                opacity: .7;
            }

            50% {
                transform: translateY(8px);
                opacity: 1;
            }
        }

        .scroll-hint {
            animation: scrollBounce 1.5s ease-in-out infinite;
        }

        /* --- Navbar link hover underline transition already present,
               add link colour transition --- */
        .nav-link {
            transition: color .2s;
        }

        /* --- Admission form inputs focus ring animation --- */
        input:focus,
        select:focus {
            transition: border-color .2s, box-shadow .2s;
            box-shadow: 0 0 0 3px rgba(232, 36, 40, .15);
        }

        /* --- Submit button shine --- */
        @keyframes shine {
            from {
                background-position: -200% center;
            }

            to {
                background-position: 200% center;
            }
        }

        .submit-btn {
            background-size: 200% auto;
            transition: background-position .4s, transform .15s, box-shadow .15s;
        }

        .submit-btn:hover {
            background-image: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 40%, #1d4ed8 100%);
            animation: shine 1s linear infinite;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(37, 99, 235, .45);
        }

        /* --- Floating background stars in hero --- */
        @keyframes twinkle {

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

            50% {
                opacity: .55;
                transform: scale(1.3);
            }
        }

        .star {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            animation: twinkle var(--dur, 3s) ease-in-out infinite;
        }

        /* --- Ben card top border animate width --- */
        .ben-card {
            border-top-width: 3px !important;
        }

        /* --- AOS override: keep our custom opacity/transform for staggered items,
               prevent AOS from double-animating them --- */
        [data-aos] {
            pointer-events: auto !important;
        }