/* =============================================
           FOCUS-VISIBLE: WCAG 2.4.7 compliance
           Replaces outline:none: only shows focus
           ring on keyboard navigation, not mouse click
        ============================================= */
        :focus { outline: none; }
        :focus-visible {
            outline: 2px solid #4f46e5;
            outline-offset: 3px;
            border-radius: 4px;
        }
        /* Buttons and links get a more visible ring */
        a:focus-visible, button:focus-visible, select:focus-visible {
            outline: 2px solid #4f46e5;
            outline-offset: 3px;
            box-shadow: 0 0 0 4px rgba(79,70,229,0.2);
        }

        /* =============================================
           SR-ONLY: Visually hidden but readable by
           Google bots and screen readers. WCAG standard.
           Position absolute prevents layout shift.
        ============================================= */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Skip navigation: screen readers / keyboard users */
        .skip-link {
            position: absolute;
            top: -100px;
            left: 0;
            background: var(--primary-mid);
            color: #fff;
            padding: 10px 20px;
            z-index: 99999;
            font-size: 0.9rem;
            font-weight: 700;
            border-radius: 0 0 8px 0;
            transition: top 0.2s;
        }
        .skip-link:focus {
            top: 0;
        }

        /* =============================================
           CSS VARIABLES, Poori website ka color system
           Ek jagah change karo, sab jagah apply hoga
        ============================================= */
        :root {
            --primary: #3730a3;
            --primary-mid: #4f46e5;
            --primary-light: #818cf8;
            --primary-glow: rgba(79, 70, 229, 0.35);
            --secondary: #0ea5e9;
            --accent: #f59e0b;
            --accent-pink: #ec4899;
            --success: #10b981;

            /* Light Theme Backgrounds */
            --bg-base: #f0f4ff;  /* UI FIX: light indigo-blue base - replaces near-white */
            --bg-card: rgba(255, 255, 255, 0.72);
            --bg-card-solid: #ffffff;
            --border-card: rgba(255, 255, 255, 0.85);
            --border-subtle: rgba(55, 48, 163, 0.08);

            /* Text */
            --text-dark: #0f172a;
            --text-body: #334155;
            --text-muted: #64748b;
            --text-light: #64748b; /* contrast improved: #94a3b8 → #64748b (WCAG AA) */

            /* Shadows */
            --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.04);
            --shadow-md: 0 10px 35px rgba(15, 23, 42, 0.06);
            --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.08);
            --shadow-primary: 0 15px 40px rgba(79, 70, 229, 0.2);

            /* Fonts */
            --font-display: 'Playfair Display', serif;
            --font-body: 'Plus Jakarta Sans', sans-serif;

            /* Transitions */
            --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* =============================================
           RESET & BASE, Sab elements ki base styling
        ============================================= */
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            background: var(--bg-base);
            color: var(--text-body);
            overflow-x: hidden;
            cursor: auto;
        }

        /* =============================================
           SCROLL PROGRESS BAR, Page ke upar ek line
           jo scroll karne par barhti jaati hai
        ============================================= */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-mid), var(--accent-pink), var(--secondary));
            z-index: 10000;
            width: 0%;
            transition: width 0.1s linear;
        }

        /* =============================================
           AMBIENT ANIMATED BACKGROUND, Light & airy feel
           Dark nahi, balke soft gradient animation
        ============================================= */
        .ambient-bg {
            position: fixed;
            inset: 0;
            z-index: -2;
            background: linear-gradient(145deg, #e8eeff 0%, #eef2ff 25%, #e6f0ff 50%, #eff3ff 75%, #e8eeff 100%);  /* UI FIX: light blue-indigo ambient bg */
            background-size: 400% 400%;
            animation: ambientShift 30s ease infinite;
        }

        @keyframes ambientShift {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /* Blob shapes, depth dene ke liye blurred circles */
        .blob {
            position: fixed;
            border-radius: 50%;
            filter: blur(120px);
            opacity: 0.45;
            pointer-events: none;
            z-index: -1;
        }

        .blob-1 {
            width: 60vw;
            height: 60vw;
            top: -20%;
            left: -20%;
            background: #c7d2fe;
            animation: blobFloat1 28s ease-in-out infinite alternate;
        }

        .blob-2 {
            width: 50vw;
            height: 50vw;
            bottom: -15%;
            right: -15%;
            background: #e9d5ff;
            animation: blobFloat2 22s ease-in-out infinite alternate;
        }

        .blob-3 {
            width: 30vw;
            height: 30vw;
            top: 40%;
            left: 30%;
            background: #bae6fd;
            animation: blobFloat1 35s ease-in-out infinite alternate-reverse;
            opacity: 0.25;
        }

        @keyframes blobFloat1 {
            from {
                transform: translate(0px, 0px) scale(1) rotate(0deg);
            }

            to {
                transform: translate(80px, 60px) scale(1.12) rotate(15deg);
            }
        }

        @keyframes blobFloat2 {
            from {
                transform: translate(0px, 0px) scale(1) rotate(0deg);
            }

            to {
                transform: translate(-60px, 80px) scale(0.9) rotate(-10deg);
            }
        }

        /* Noise texture overlay, premium feel */
        .noise {
            position: fixed;
            inset: 0;
            z-index: -1;
            opacity: 0.03;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 200px 200px;
        }

        /* =============================================
           FLOATING MATH PARTICLES, Hero background mein
           mathematical symbols tairte hain
        ============================================= */
        .particles-canvas {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }

        .math-particle {
            position: absolute;
            font-family: var(--font-display);
            color: var(--primary-mid);
            opacity: 0;
            font-weight: 700;
            animation: particleFloat linear infinite;
            user-select: none;
        }

        @keyframes particleFloat {
            0% {
                opacity: 0;
                transform: translateY(100px) rotate(0deg);
            }

            10% {
                opacity: 0.12;
            }

            90% {
                opacity: 0.07;
            }

            100% {
                opacity: 0;
                transform: translateY(-120vh) rotate(360deg);
            }
        }

        /* =============================================
           SCROLL REVEAL, Elements scroll par aate hain
           IntersectionObserver se trigger hota hai
        ============================================= */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-left {
            opacity: 0;
            transform: translateX(-40px);
            transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
        }

        .reveal-left.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .reveal-right {
            opacity: 0;
            transform: translateX(40px);
            transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
        }

        .reveal-right.visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* Delay classes */
        .delay-1 {
            transition-delay: 0.1s;
        }

        .delay-2 {
            transition-delay: 0.2s;
        }

        .delay-3 {
            transition-delay: 0.3s;
        }

        .delay-4 {
            transition-delay: 0.4s;
        }

        /* =============================================
           TYPOGRAPHY, Headings aur text
        ============================================= */
        h1,
        h2,
        h3 {
            font-family: var(--font-display);
            color: var(--text-dark);
        }

        h4,
        h5,
        h6,
        p,
        span,
        a,
        li {
            font-family: var(--font-body);
        }

        p {
            line-height: 1.75;
            color: var(--text-body);
        }

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(79, 70, 229, 0.08);
            color: var(--primary-mid);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 7px 16px;
            border-radius: 30px;
            border: 1px solid rgba(79, 70, 229, 0.15);
            margin-bottom: 18px;
        }

        .section-title {
            font-size: 2.6rem;
            line-height: 1.2;
            letter-spacing: -0.5px;
            color: var(--text-dark);
            margin-bottom: 16px;
        }

        .section-title span {
            font-family: var(--font-display);
            background: linear-gradient(135deg, var(--primary-mid), var(--accent-pink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .section-subtitle {
            font-size: 1.05rem;
            color: var(--text-muted);
            max-width: 560px;
            line-height: 1.7;
        }

        /* Section Layout */
        section {
            padding: 110px 5%;
            max-width: 1280px;
            margin: 0 auto;
        }

        .section-head {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-head .section-subtitle {
            margin: 0 auto;
        }

        /* =============================================
           BUTTONS, Premium interactive buttons
        ============================================= */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 30px;
            border-radius: 50px;
            font-size: 0.95rem;
            font-weight: 600;
            font-family: var(--font-body);
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s var(--ease);
            position: relative;
            overflow: hidden;
        }

        .btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.15);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .btn:hover::after {
            opacity: 1;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-mid) 0%, var(--primary) 100%);
            color: white;
            box-shadow: 0 8px 24px var(--primary-glow);
        }

        .btn-primary:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 16px 35px rgba(79, 70, 229, 0.45);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.9);
            color: var(--text-dark);
            border: 1px solid var(--border-subtle);
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow-sm);
        }

        .btn-secondary:hover {
            background: #fff;
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
            border-color: rgba(79, 70, 229, 0.2);
        }

        .btn-whatsapp {
            background: linear-gradient(135deg, #25d366, #128c7e);
            color: white;
            box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
        }

        .btn-whatsapp:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 35px rgba(37, 211, 102, 0.45);
        }

        /* =============================================
           NAVIGATION BAR, Fixed top, glassmorphism
        ============================================= */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 16px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(248, 250, 255, 0.6);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.7);
            z-index: 9000;
            transition: all 0.4s var(--ease);
        }

        .navbar.scrolled {
            padding: 12px 5%;
            background: rgba(248, 250, 255, 0.88);
            box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
        }

        /* W.H. Academy Logo, SVG embedded */
        .nav-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .logo-svg-wrap {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--primary-mid), var(--primary));
            border-radius: 12px;
            box-shadow: 0 6px 18px var(--primary-glow);
            flex-shrink: 0;
            transition: transform 0.3s var(--ease-spring);
        }

        .nav-logo:hover .logo-svg-wrap {
            transform: rotate(-6deg) scale(1.08);
        }

        .logo-text-group {
            display: flex;
            flex-direction: column;
            line-height: 1;
            gap: 5px;
        }

        .logo-text-main {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.22rem;
            font-weight: 700;
            letter-spacing: 2px;
            background: linear-gradient(135deg, var(--primary-mid) 0%, #7c3aed 50%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
        }

        .logo-text-sub {
            font-size: 0.62rem;
            font-weight: 700;
            color: var(--text-light);
            letter-spacing: 2px;
            text-transform: uppercase;
            font-family: var(--font-body);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            list-style: none;
        }

        .nav-links a {
            display: block;
            padding: 8px 14px;
            text-decoration: none;
            color: var(--text-body);
            font-size: 0.9rem;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .nav-links a:hover {
            color: var(--primary-mid);
            background: rgba(79, 70, 229, 0.06);
        }

        /* Dropdown */
        .dropdown {
            position: relative;
        }

        .dropdown-menu {
            position: absolute;
            top: calc(100% + 12px);
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(20px);
            border-radius: 18px;
            min-width: 210px;
            border: 1px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
            padding: 10px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.25s var(--ease);
        }

        .dropdown.active .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .dropdown-menu a {
            padding: 10px 16px;
            border-radius: 10px;
            font-size: 0.88rem;
        }

        .dropdown-menu a:hover {
            background: rgba(79, 70, 229, 0.06);
        }

        .hamburger {
            display: none;
            cursor: pointer;
            font-size: 1.4rem;
            color: var(--text-dark);
        }

        /* =============================================
           HERO SECTION, First impression, wow factor
           Floating particles + animated gradient text
        ============================================= */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding-top: 90px;
            position: relative;
            overflow: hidden;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(79, 70, 229, 0.2);
            color: var(--primary-mid);
            padding: 9px 20px;
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 600;
            box-shadow: 0 4px 14px rgba(79, 70, 229, 0.08);
            margin-bottom: 30px;
            animation: badgePop 0.8s var(--ease-spring) 0.2s both;
        }

        .hero-badge .dot {
            width: 7px;
            height: 7px;
            background: var(--success);
            border-radius: 50%;
            animation: pulseDot 2s infinite;
        }

        @keyframes pulseDot {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
            }

            50% {
                box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
            }
        }

        .hero-headline {
            font-family: var(--font-display);
            font-size: clamp(2.8rem, 6vw, 5.5rem);
            font-weight: 900;
            line-height: 1.08;
            letter-spacing: -2px;
            color: var(--text-dark);
            max-width: 920px;
            margin-bottom: 28px;
            animation: heroSlideUp 0.9s var(--ease) 0.35s both;
            position: relative;
            z-index: 2;
        }

        .hero-headline .gradient-word {
            background: linear-gradient(135deg, var(--primary-mid) 0%, var(--accent-pink) 50%, var(--secondary) 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientText 5s linear infinite;
        }

        @keyframes gradientText {
            0% {
                background-position: 0% center;
            }

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

        .hero-sub {
            font-size: 1.15rem;
            color: var(--text-muted);
            max-width: 600px;
            line-height: 1.75;
            margin-bottom: 45px;
            animation: heroSlideUp 0.9s var(--ease) 0.5s both;
            position: relative;
            z-index: 2;
        }

        .hero-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
            animation: heroSlideUp 0.9s var(--ease) 0.65s both;
            position: relative;
            z-index: 2;
        }

        /* Hero ke saath stats chips */
        .hero-stats-row {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 55px;
            animation: heroSlideUp 0.9s var(--ease) 0.8s both;
            position: relative;
            z-index: 2;
        }

        .hero-stat-chip {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 16px;
            padding: 12px 22px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: var(--shadow-sm);
        }

        .chip-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(79, 70, 229, 0.06));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: var(--primary-mid);
        }

        .chip-text strong {
            display: block;
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--text-dark);
            font-family: var(--font-display);
        }

        .chip-text span {
            font-size: 0.78rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        @keyframes heroSlideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes badgePop {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(-10px);
            }

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

        /* =============================================
           STATS COUNTER SECTION, Animated numbers
           Scroll par counter chalte hain
        ============================================= */
        .stats-section {
            padding: 0 5% 90px;
            max-width: 1280px;
            margin: 0 auto;
        }

        .stats-wrapper {
            background: linear-gradient(135deg, var(--primary-mid) 0%, var(--primary) 100%);
            border-radius: 32px;
            padding: 55px 50px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-primary);
        }

        .stats-wrapper::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -20%;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 50%;
            pointer-events: none;
        }

        .stats-wrapper::after {
            content: '';
            position: absolute;
            bottom: -30%;
            right: -10%;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 50%;
            pointer-events: none;
        }

        .stat-item {
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .stat-item+.stat-item {
            border-left: 1px solid rgba(255, 255, 255, 0.15);
            padding-left: 30px;
        }

        .stat-number {
            font-family: var(--font-display);
            font-size: 3rem;
            font-weight: 900;
            color: white;
            line-height: 1;
            margin-bottom: 8px;
            display: block;
        }

        .stat-plus {
            color: var(--accent);
        }

        .stat-label {
            font-size: 0.88rem;
            color: rgba(255, 255, 255, 0.75);
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        /* =============================================
           TUTOR SECTION, Teacher ka profile card
        ============================================= */
        .tutor-card {
            background: #ffffff;
            backdrop-filter: blur(24px);
            border: none;
            border-radius: 35px;
            padding: 55px;
            display: grid;
            grid-template-columns: 1fr 2.8fr;
            gap: 55px;
            align-items: center;
            box-shadow: var(--shadow-md);
            transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
            position: relative;
            overflow: hidden;
        }

        .tutor-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 250px;
            height: 250px;
            background: radial-gradient(circle, rgba(79, 70, 229, 0.07) 0%, transparent 70%);
            pointer-events: none;
        }

        .tutor-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 30px 70px rgba(79, 70, 229, 0.1);
        }

        /* Avatar wrapper */
        .tutor-avatar-wrap {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .avatar-rings {
            position: absolute;
            width: 210px;
            height: 210px;
            border-radius: 50%;
        }

        .avatar-ring-1 {
            border: 2px solid rgba(79, 70, 229, 0.15);
            animation: ringPulse 3s ease-in-out infinite;
        }

        .avatar-ring-2 {
            width: 240px;
            height: 240px;
            border: 1px solid rgba(79, 70, 229, 0.08);
            animation: ringPulse 3s ease-in-out infinite 1s;
        }

        @keyframes ringPulse {

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

            50% {
                transform: scale(1.06);
                opacity: 0.3;
            }
        }

        .tutor-avatar {
            width: 185px;
            height: 185px;
            border-radius: 50%;
            background: linear-gradient(135deg, #eef2ff, #e0e7ff);
            border: 5px solid #ffffff;
            box-shadow: 0 20px 50px rgba(79, 70, 229, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            z-index: 2;
            position: relative;
        }

        .tutor-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
        }

        .avatar-placeholder {
            font-size: 5rem;
            color: var(--primary-light);
        }

        .avatar-glow-ring {
            position: absolute;
            width: 200px;
            height: 200px;
            background: var(--primary-glow);
            border-radius: 50%;
            filter: blur(30px);
            z-index: 1;
            animation: glowPulse 4s ease-in-out infinite;
        }

        @keyframes glowPulse {

            0%,
            100% {
                opacity: 0.4;
                transform: scale(0.9);
            }

            50% {
                opacity: 0.7;
                transform: scale(1.1);
            }
        }

        /* Tutor info */
        .tutor-info {
            position: relative;
            z-index: 2;
        }

        .tutor-name {
            font-size: 2.2rem;
            margin-bottom: 12px;
            letter-spacing: -0.5px;
        }

        .tutor-role-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(79, 70, 229, 0.08);
            color: var(--primary-mid);
            border: 1px solid rgba(79, 70, 229, 0.15);
            padding: 8px 18px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 700;
            margin-bottom: 22px;
        }

        /* ── Upgraded Tutor Typography ── */
        .ti-label-row {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }
        .ti-founder-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #fff;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            padding: 5px 13px;
            border-radius: 30px;
        }
        .ti-roles-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }
        .ti-role-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 15px;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 700;
        }
        .ti-role-primary {
            background: rgba(79,70,229,0.08);
            color: var(--primary-mid);
            border: 1px solid rgba(79,70,229,0.18);
        }
        .ti-role-secondary {
            background: rgba(14,165,233,0.08);
            color: #0284c7;
            border: 1px solid rgba(14,165,233,0.18);
        }
        .ti-role-accent {
            background: rgba(245,158,11,0.08);
            color: #b45309;
            border: 1px solid rgba(245,158,11,0.2);
        }
        .ti-divider {
            width: 60px;
            height: 3px;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--primary-mid), var(--accent));
            margin-bottom: 20px;
        }
        .ti-stats-row {
            display: flex;
            align-items: center;
            gap: 0;
            background: rgba(79,70,229,0.04);
            border: 1px solid rgba(79,70,229,0.1);
            border-radius: 16px;
            padding: 18px 22px;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 8px;
        }
        .ti-stat {
            flex: 1;
            text-align: center;
            min-width: 70px;
        }
        .ti-stat-num {
            display: block;
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary-mid), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }
        .ti-stat-label {
            display: block;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-top: 4px;
        }
        .ti-stat-divider {
            width: 1px;
            height: 40px;
            background: rgba(79,70,229,0.12);
            flex-shrink: 0;
        }
        @media (max-width: 500px) {
            .ti-stat-divider { display: none; }
            .ti-stat { min-width: 45%; }
        }

        .tutor-bio {
            font-size: 1rem;
            line-height: 1.8;
            color: var(--text-muted);
            margin-bottom: 28px;
            max-width: 640px;
        }

        .credentials-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 32px;
        }

        .credential-pill {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--text-body);
            transition: all 0.3s var(--ease);
        }

        .credential-pill:hover {
            border-color: var(--primary-light);
            background: #fff;
        }

        .credential-pill i {
            color: var(--primary-mid);
            font-size: 1rem;
            width: 16px;
            text-align: center;
        }

        .tutor-btns {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }

        /* =============================================
           COURSES SECTION, Class cards grid
        ============================================= */
        .courses-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }

        .course-card {
            background: var(--bg-card-solid);
            border: 1px solid var(--border-subtle);
            border-radius: 28px;
            padding: 36px 30px;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-sm);
            transition: all 0.4s var(--ease);
            position: relative;
            overflow: hidden;
        }

        .course-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-mid), var(--accent-pink));
            transform: scaleX(0);
            transition: transform 0.4s var(--ease);
            transform-origin: left;
        }

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

        .course-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 55px rgba(79, 70, 229, 0.1);
            border-color: rgba(79, 70, 229, 0.15);
        }

        .course-icon-wrap {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(79, 70, 229, 0.05));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            color: var(--primary-mid);
            margin-bottom: 24px;
            transition: all 0.3s var(--ease));
        }

        .course-card:hover .course-icon-wrap {
            background: linear-gradient(135deg, var(--primary-mid), var(--primary));
            color: white;
            transform: rotate(-8deg) scale(1.1);
        }

        .course-level {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--primary-mid);
            margin-bottom: 10px;
        }

        .course-title {
            font-size: 1.5rem;
            margin-bottom: 12px;
        }

        .course-desc {
            font-size: 0.92rem;
            color: var(--text-muted);
            flex: 1;
            line-height: 1.7;
            margin-bottom: 28px;
        }

        .course-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 28px;
        }

        .tag {
            background: rgba(79, 70, 229, 0.06);
            color: var(--primary-mid);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid rgba(79, 70, 229, 0.1);
        }

        /* =============================================
           ANIMATED GRADIENT BORDERS
           Uses ::before pseudo-element so inner card
           stays fully white, only border glows
        ============================================= */
        @property --grad-angle {
            syntax: '<angle>';
            inherits: false;
            initial-value: 0deg;
        }
        @keyframes gradientBorderSpin {
            to { --grad-angle: 360deg; }
        }

        /* Wrapper holds the glowing border via ::before */
        .demo-card-wrap,
        .tutor-card-wrap,
        .quiz-card-wrap {
            position: relative;
            border-radius: 38px;
            padding: 3px;
            background: transparent;
            isolation: isolate;
        }
        .quiz-card-wrap {
            max-width: 780px;
            margin: 0 auto;
            border-radius: 36px;
        }

        /* The animated gradient lives ONLY in ::before behind the card */
        .demo-card-wrap::before,
        .tutor-card-wrap::before,
        .quiz-card-wrap::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: conic-gradient(
                from var(--grad-angle),
                var(--primary-mid) 0%,
                var(--accent-pink) 25%,
                var(--secondary) 50%,
                #a78bfa 75%,
                var(--primary-mid) 100%
            );
            animation: gradientBorderSpin 4s linear infinite;
            z-index: -1;
        }

        /* Inner cards, solid white, slightly smaller radius */
        .demo-card,
        .tutor-card,
        .quiz-wrapper {
            position: relative;
            z-index: 1;
            border-radius: 35px !important;
            background: #ffffff !important;
        }

        /* =============================================
        ============================================= */
        .demo-card {
            background: #ffffff;
            backdrop-filter: blur(24px);
            border: none;
            border-radius: 35px;
            padding: 65px 55px;
            text-align: center;
            box-shadow: var(--shadow-md);
            max-width: 860px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
        }

        .demo-card::before {
            content: '';
            position: absolute;
            bottom: -60px;
            right: -60px;
            width: 280px;
            height: 280px;
            background: radial-gradient(circle, rgba(79, 70, 229, 0.1) 0%, transparent 65%);
            border-radius: 50%;
        }

        .demo-card::after {
            content: '';
            position: absolute;
            top: -40px;
            left: -40px;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 65%);
            border-radius: 50%;
        }

        .demo-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }

        .demo-icon-wrap {
            width: 95px;
            height: 95px;
            border-radius: 28px;
            background: linear-gradient(135deg, var(--primary-mid), var(--primary));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: white;
            margin: 0 auto 28px;
            box-shadow: 0 15px 35px var(--primary-glow);
            animation: iconBounce 3s ease-in-out infinite;
            position: relative;
            z-index: 2;
        }

        @keyframes iconBounce {

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

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

        /* =============================================
           TESTIMONIALS SECTION, Students ki reviews
        ============================================= */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .testimonial-card {
            background: var(--bg-card-solid);
            border: 1px solid var(--border-subtle);
            border-radius: 24px;
            padding: 30px;
            box-shadow: var(--shadow-sm);
            transition: all 0.3s var(--ease);
            position: relative;
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
            border-color: rgba(79, 70, 229, 0.15);
        }

        .quote-icon {
            font-size: 2.2rem;
            line-height: 1;
            font-family: serif;
            color: var(--primary-light);
            margin-bottom: 14px;
            display: block;
        }

        .testimonial-text {
            font-size: 0.92rem;
            line-height: 1.75;
            color: var(--text-body);
            margin-bottom: 22px;
            font-style: italic;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .author-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-mid), var(--secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            color: white;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .author-name {
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-dark);
        }

        .author-class {
            font-size: 0.78rem;
            color: var(--text-muted);
        }

        .stars {
            color: var(--accent);
            font-size: 0.85rem;
            margin-top: 3px;
        }

        /* =============================================
           QUIZ MODULE, Interactive math quiz
        ============================================= */
        .quiz-wrapper {
            background: #ffffff;
            border: none;
            border-radius: 30px;
            padding: 45px;
            max-width: 100%;
            margin: 0;
            box-shadow: none;
        }

        .quiz-header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-subtle);
        }

        .quiz-progress-text {
            font-weight: 700;
            color: var(--primary-mid);
            font-size: 0.95rem;
        }

        .quiz-score-badge {
            background: rgba(79, 70, 229, 0.08);
            color: var(--primary-mid);
            border-radius: 20px;
            padding: 6px 14px;
            font-weight: 700;
            font-size: 0.88rem;
        }

        /* Progress bar */
        .quiz-progress-bar-wrap {
            background: rgba(79, 70, 229, 0.08);
            border-radius: 10px;
            height: 8px;
            margin-bottom: 32px;
            overflow: hidden;
        }

        .quiz-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-mid), var(--accent-pink));
            border-radius: 10px;
            transition: width 0.5s var(--ease);
        }

        .quiz-q-text {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-dark);
            line-height: 1.5;
            margin-bottom: 28px;
            font-family: var(--font-display);
        }

        .quiz-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .option-btn {
            background: rgba(248, 250, 255, 0.8);
            border: 2px solid var(--border-subtle);
            padding: 15px 20px;
            border-radius: 16px;
            text-align: left;
            font-size: 0.98rem;
            font-weight: 500;
            color: var(--text-body);
            cursor: pointer;
            transition: all 0.25s var(--ease);
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: var(--font-body);
        }

        .option-btn .opt-letter {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(79, 70, 229, 0.08);
            color: var(--primary-mid);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85rem;
            flex-shrink: 0;
            transition: all 0.25s;
        }

        .option-btn:hover:not(:disabled) {
            border-color: var(--primary-light);
            background: white;
            transform: translateX(6px);
            box-shadow: var(--shadow-sm);
        }

        .option-btn:hover:not(:disabled) .opt-letter {
            background: var(--primary-mid);
            color: white;
        }

        .option-btn.correct {
            background: #f0fdf4;
            border-color: #22c55e;
            color: #166534;
        }

        .option-btn.correct .opt-letter {
            background: #22c55e;
            color: white;
        }

        .option-btn.wrong {
            background: #fff1f2;
            border-color: #f43f5e;
            color: #9f1239;
        }

        .option-btn.wrong .opt-letter {
            background: #f43f5e;
            color: white;
        }

        .quiz-footer {
            margin-top: 28px;
            display: flex;
            justify-content: flex-end;
        }

        /* Quiz result */
        .quiz-result-view {
            text-align: center;
            padding: 30px 0;
        }

        .result-ring {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(79, 70, 229, 0.06));
            border: 4px solid var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 28px;
            font-family: var(--font-display);
            font-size: 2.2rem;
            font-weight: 900;
            color: var(--primary-mid);
            box-shadow: 0 0 0 8px rgba(79, 70, 229, 0.06);
            animation: resultPop 0.5s var(--ease-spring) both;
        }

        @keyframes resultPop {
            from {
                transform: scale(0);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .result-title {
            font-size: 1.8rem;
            margin-bottom: 12px;
        }

        .result-msg {
            color: var(--text-muted);
            margin-bottom: 28px;
        }

        /* =============================================
           CLASS WISE QUIZZES, Upgraded Glassmorphism
        ============================================= */

        /* Dropdowns row */
        .cw-dropdowns-row {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 48px;
        }

        /* Glass dropdown card */
        .cw-glass-dropdown {
            position: relative;
            background: rgba(255,255,255,0.72);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1.5px solid transparent;
            border-radius: 16px;
            padding: 0 20px 0 54px;
            min-width: 280px;
            box-shadow: 0 8px 32px rgba(79,70,229,0.08), 0 0 0 1.5px rgba(79,70,229,0.12) inset;
            background-clip: padding-box;
            transition: box-shadow 0.35s var(--ease), transform 0.25s var(--ease);
            overflow: hidden;
        }
        .cw-glass-dropdown::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(236,72,153,0.04));
            pointer-events: none;
        }
        .cw-glass-dropdown:focus-within {
            box-shadow: 0 8px 36px rgba(79,70,229,0.18), 0 0 0 2px var(--primary-mid) inset;
            transform: translateY(-2px);
        }
        .cw-glass-dropdown:focus-within::before {
            background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(236,72,153,0.06));
        }
        .cw-dd-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            width: 28px; height: 28px;
            border-radius: 8px;
            background: linear-gradient(135deg, var(--primary-mid), var(--primary));
            display: flex; align-items: center; justify-content: center;
            color: #fff;
            font-size: 0.82rem;
            pointer-events: none;
            z-index: 1;
        }
        .cw-dd-arrow {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-mid);
            font-size: 0.8rem;
            pointer-events: none;
            transition: transform 0.3s;
            z-index: 1;
        }
        .cw-glass-dropdown:focus-within .cw-dd-arrow {
            transform: translateY(-50%) rotate(180deg);
        }
        .cw-select {
            width: 100%;
            appearance: none;
            border: none;
            background: transparent;
            font-family: var(--font-body);
            font-size: 0.97rem;
            font-weight: 600;
            color: var(--text-dark);
            padding: 16px 32px 16px 0;
            cursor: pointer;
            outline: none; /* overridden below with focus-visible */
            position: relative;
            z-index: 1;
        }
        .cw-select option { color: var(--text-dark); background: #fff; }

        /* Slide-in animation for second dropdown */
        .cw-subject-drop-wrap {
            min-width: 280px;
            animation: cwSlideDown 0.35s var(--ease-spring) both;
        }
        @keyframes cwSlideDown {
            from { opacity: 0; transform: translateY(-12px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* Coming soon box */
        .cw-coming-soon-box {
            text-align: center;
            padding: 70px 30px;
            border: 2px dashed rgba(79,70,229,0.18);
            border-radius: 28px;
            background: #ffffff;
            animation: cwSlideDown 0.4s var(--ease) both;
        }
        .cw-cs-icon {
            width: 80px; height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(245,158,11,0.1));
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 20px;
            font-size: 2rem; color: var(--accent);
        }
        .cw-coming-soon-box h3 { font-size: 1.5rem; margin-bottom: 10px; }
        .cw-coming-soon-box p  { color: var(--text-muted); font-size: 0.95rem; }

        /* Content area */
        .cw-content { animation: cwSlideDown 0.45s var(--ease) both; }

        /* Term accordion */
        .cw-term-block {
            margin-bottom: 20px;
            border: 1.5px solid rgba(79,70,229,0.10);
            border-radius: 20px;
            overflow: hidden;
            background: #ffffff;
            box-shadow: var(--shadow-sm);
        }
        .cw-term-toggle {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 24px;
            background: linear-gradient(135deg, rgba(79,70,229,0.05), rgba(79,70,229,0.02));
            border: none;
            cursor: pointer;
            font-family: var(--font-body);
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-dark);
            transition: background 0.25s;
        }
        .cw-term-toggle span { display: flex; align-items: center; gap: 10px; color: var(--primary-mid); }
        .cw-term-toggle:hover { background: rgba(79,70,229,0.09); }
        .cw-term-arrow { color: var(--primary-mid); transition: transform 0.3s var(--ease); }
        .cw-term-arrow.open { transform: rotate(180deg); }
        .cw-term-body { padding: 24px; border-top: 1px solid rgba(79,70,229,0.08); }

        /* Chapters grid */
        .cw-chapters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 18px;
        }

        /* Chapter card, minimal glass */
        .cw-chapter-card {
            position: relative;
            background: #ffffff;
            border: 1.5px solid rgba(148,163,184,0.22);
            border-radius: 18px;
            padding: 20px 18px 16px;
            display: flex; flex-direction: column; gap: 10px;
            transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s;
        }
        .cw-chapter-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
        .cw-chapter-card.active-chapter {
            background: linear-gradient(145deg, #eef2ff, #faf5ff);
            border-color: rgba(79,70,229,0.28);
            box-shadow: 0 8px 30px rgba(79,70,229,0.13);
        }
        .cw-chapter-card.locked {
            background: #f8fafc;
            border-color: rgba(148,163,184,0.14);
        }

        /* Chapter icon row */
        .cw-chapter-top {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .cw-chapter-icon {
            width: 34px; height: 34px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.95rem;
            flex-shrink: 0;
        }
        .active-chapter .cw-chapter-icon {
            background: linear-gradient(135deg, var(--primary-mid), var(--primary));
            color: #fff;
        }
        .locked .cw-chapter-icon {
            background: rgba(148,163,184,0.12);
            color: var(--text-light);
        }
        .cw-chapter-num {
            font-size: 0.73rem;
            font-weight: 800;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }
        .active-chapter .cw-chapter-num { color: var(--primary-mid); }
        .locked .cw-chapter-num { color: var(--text-light); }

        .cw-chapter-title {
            font-size: 0.91rem;
            font-weight: 600;
            line-height: 1.45;
            flex: 1;
        }
        .active-chapter .cw-chapter-title { color: var(--text-dark); }
        .locked .cw-chapter-title { color: var(--text-muted); }

        /* FREE DEMO badge */
        .cw-free-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            font-size: 0.7rem; font-weight: 800;
            letter-spacing: 0.8px; text-transform: uppercase;
            padding: 5px 12px; border-radius: 30px; width: fit-content;
            animation: demoPulse 2.2s infinite;
        }
        @keyframes demoPulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.45); }
            50%      { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
        }

        /* Chapter buttons */
        .cw-chapter-actions { position: relative; margin-top: 4px; }
        .cw-chapter-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            width: 100%; padding: 11px 18px; border-radius: 12px;
            font-size: 0.87rem; font-weight: 700;
            font-family: var(--font-body); border: none; cursor: pointer;
            text-decoration: none; transition: all 0.25s var(--ease);
        }
        .active-btn {
            background: linear-gradient(135deg, var(--primary-mid), var(--primary));
            color: #fff; box-shadow: 0 6px 20px var(--primary-glow);
        }
        .active-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(79,70,229,0.4); }
        .coming-soon-btn {
            background: rgba(148,163,184,0.1);
            color: var(--text-light); cursor: not-allowed;
        }

        /* Tooltip */
        .cw-tooltip {
            position: absolute; bottom: calc(100% + 10px); left: 50%;
            transform: translateX(-50%);
            background: #0f172a; color: #fff;
            font-size: 0.77rem; font-family: var(--font-body);
            padding: 9px 14px; border-radius: 10px;
            max-width: 250px; white-space: normal; text-align: center; line-height: 1.45;
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: opacity 0.2s, visibility 0.2s; z-index: 100;
        }
        .cw-tooltip::after {
            content: ''; position: absolute; top: 100%; left: 50%;
            transform: translateX(-50%); border: 6px solid transparent;
            border-top-color: #0f172a;
        }
        .cw-chapter-card.locked:hover .cw-tooltip { opacity: 1; visibility: visible; }

        /* Note box */
        .cw-note {
            margin-top: 32px; display: flex; align-items: flex-start; gap: 12px;
            background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.2);
            border-radius: 16px; padding: 16px 22px;
            font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;
        }
        .cw-note i { color: var(--accent); font-size: 1.05rem; margin-top: 2px; flex-shrink: 0; }

        /* Responsive */
        @media (max-width: 640px) {
            .cw-glass-dropdown, .cw-subject-drop-wrap { min-width: 90vw; }
            .cw-chapters-grid { grid-template-columns: 1fr; }
            .cw-term-body { padding: 14px; }
        }

        /* Plan note: home tuition info */
        .plan-note {
            display: flex; align-items: flex-start; gap: 10px;
            background: rgba(79,70,229,0.06);
            border: 1px solid rgba(79,70,229,0.14);
            border-radius: 12px; padding: 12px 14px;
            font-size: 0.8rem; color: var(--text-muted);
            line-height: 1.55; margin-bottom: 18px; text-align: left;
        }
        .plan-note i { color: var(--primary-mid); margin-top: 2px; flex-shrink: 0; }
        .plan-note-featured {
            background: rgba(255,255,255,0.12);
            border-color: rgba(255,255,255,0.2);
            color: rgba(255,255,255,0.85);
        }
        .plan-note-featured i { color: rgba(255,255,255,0.9); }
        .note-tel { color: var(--primary-mid); font-weight: 700; text-decoration: none; }
        .note-tel:hover { text-decoration: underline; }
        .note-tel-w { color: #fff; font-weight: 700; text-decoration: none; }
        .note-tel-w:hover { text-decoration: underline; }

        /* =============================================
           NOTES / LIBRARY SECTION, Coming soon box
        ============================================= */
        .library-box {
            background: var(--bg-card);
            backdrop-filter: blur(16px);
            border: 2px dashed rgba(79, 70, 229, 0.2);
            border-radius: 32px;
            padding: 80px 30px;
            text-align: center;
            transition: border-color 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
        }

        .library-box:hover {
            border-color: rgba(79, 70, 229, 0.4);
        }

        .library-icon {
            width: 85px;
            height: 85px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            color: var(--primary-light);
        }

        .coming-soon-badge {
            background: rgba(245, 158, 11, 0.1);
            color: var(--accent);
            border: 1px solid rgba(245, 158, 11, 0.25);
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        /* =============================================
           PRICING SECTION, 3 tier pricing cards
        ============================================= */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            align-items: center;
        }

        .pricing-card {
            background: var(--bg-card-solid);
            border: 1px solid var(--border-subtle);
            border-radius: 32px;
            padding: 38px 32px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            transition: all 0.4s var(--ease);
            position: relative;
        }

        .pricing-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-md);
        }

        .pricing-card.featured {
            background: linear-gradient(160deg, var(--primary-mid) 0%, var(--primary) 100%);
            border-color: var(--primary);
            transform: scale(1.04);
            box-shadow: var(--shadow-primary);
        }

        .pricing-card.featured:hover {
            transform: scale(1.04) translateY(-6px);
        }

        .pricing-card.featured h3,
        .pricing-card.featured .price-val,
        .pricing-card.featured .price-period,
        .pricing-card.featured li,
        .pricing-card.featured p {
            color: rgba(255, 255, 255, 0.9) !important;
        }

        .pricing-card.featured li i {
            color: #6ee7b7 !important;
        }

        .featured-label {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--accent);
            color: white;
            padding: 5px 18px;
            border-radius: 20px;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
        }

        .pricing-tier-name {
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        .pricing-card.featured .pricing-tier-name {
            color: rgba(255, 255, 255, 0.7);
        }

        .pricing-title {
            font-size: 1.4rem;
            margin-bottom: 18px;
        }

        .price-wrap {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 4px;
            margin-bottom: 8px;
        }

        .price-currency {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-muted);
        }

        .price-val {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 3.2rem;
            font-weight: 900;
            color: var(--text-dark);
            letter-spacing: -1px;
            line-height: 1;
        }

        .price-period {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 22px;
        }

        .pricing-desc {
            font-size: 0.88rem;
            color: var(--text-muted);
            margin-bottom: 24px;
        }

        .pricing-features {
            list-style: none;
            text-align: left;
            margin-bottom: 32px;
        }

        .pricing-features li {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            font-size: 0.9rem;
            color: var(--text-body);
        }

        .pricing-features li i {
            color: var(--success);
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        .pricing-divider {
            height: 1px;
            background: var(--border-subtle);
            margin: 20px 0;
        }

        .pricing-card.featured .pricing-divider {
            background: rgba(255, 255, 255, 0.15);
        }

        /* Pricing group headings (Middle / Matric / HSSC) */
        .pricing-group {
            margin-bottom: 56px;
        }

        .pricing-group-header {
            text-align: center;
            margin-bottom: 32px;
        }

        .pricing-group-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(79,70,229,0.08);
            color: var(--primary-mid);
            border: 1px solid rgba(79,70,229,0.18);
            border-radius: 50px;
            padding: 6px 20px;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .pricing-group-title {
            font-size: 1.45rem;
            font-weight: 800;
            color: var(--text-dark);
            margin: 0 0 6px;
        }

        .pricing-group-sub {
            font-size: 0.88rem;
            color: var(--text-muted);
            margin: 0;
        }

        /* Federal Board notice inside card */
        .board-notice {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid rgba(245, 158, 11, 0.25);
            border-radius: 12px;
            padding: 12px 14px;
            margin: 16px 0;
            text-align: left;
            font-size: 0.8rem;
            color: var(--text-body);
            line-height: 1.55;
        }

        .board-notice i {
            color: #d97706;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .pricing-card.featured .board-notice {
            background: rgba(255,255,255,0.12);
            border-color: rgba(255,255,255,0.25);
            color: rgba(255,255,255,0.9);
        }

        .pricing-card.featured .board-notice i {
            color: #fcd34d;
        }

        /* Resource level/subject buttons */
        .resource-level-btn {
            font-size: 0.88rem;
            padding: 11px 20px;
            transition: all 0.3s var(--ease);
        }
        .resource-level-btn.active {
            background: linear-gradient(135deg, var(--primary-mid), var(--primary));
            color: white;
            border-color: transparent;
            box-shadow: 0 8px 24px var(--primary-glow);
        }

        /* Subject list */
        .subject-list {
            text-align: left;
            border: 1px solid var(--border-subtle);
            border-radius: 18px;
            overflow: hidden;
            margin-bottom: 4px;
        }
        .subject-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 13px 18px;
            font-size: 0.92rem;
            font-weight: 500;
            color: var(--text-body);
            border-bottom: 1px solid var(--border-subtle);
            cursor: pointer;
            transition: background 0.2s;
            background: #fff;
            user-select: none;
        }
        .subject-item:last-child { border-bottom: none; }
        .subject-item:hover { background: rgba(79,70,229,0.04); }
        .subject-item span { display:flex; align-items:center; gap:10px; }
        .subject-item span i { color: var(--primary-mid); width:16px; text-align:center; }
        .sub-lock { color: var(--text-light); font-size:0.85rem; }
        .sub-chevron { color: var(--primary-mid); font-size:0.8rem; transition: transform 0.25s; }
        .subject-item.open .sub-chevron { transform: rotate(180deg); }
        .subject-has-sub:hover { background: rgba(79,70,229,0.06); }

        /* Sub-dropdown */
        .sub-dropdown {
            display: none;
            background: rgba(79,70,229,0.03);
            border-bottom: 1px solid var(--border-subtle);
        }
        .sub-dropdown.open { display: block; }
        .sub-dropdown-item {
            padding: 11px 18px 11px 44px;
            font-size: 0.87rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 10px;
            border-top: 1px solid rgba(79,70,229,0.06);
        }
        .sub-dropdown-item i { color: var(--text-light); font-size:0.78rem; }

        /* =============================================
           WH FEEDBACK SECTION: Premium API-driven design
        ============================================= */

        /* ── Section Wrapper with mesh background ── */
        .wh-feedback-outer {
            position: relative;
            background:
                radial-gradient(ellipse 80% 60% at 15% 20%, rgba(99,102,241,0.08) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 85% 80%, rgba(124,58,237,0.07) 0%, transparent 55%),
                radial-gradient(ellipse 50% 40% at 50% 50%, rgba(14,165,233,0.05) 0%, transparent 60%),
                var(--bg-base);
            overflow: hidden;
        }
        .wh-feedback-outer::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(circle, rgba(99,102,241,0.06) 1px, transparent 1px);
            background-size: 36px 36px;
            pointer-events: none;
        }

        .wh-feedback-section {
            max-width: 1280px;
            margin: 0 auto;
            padding: 110px 5%;
            position: relative;
            z-index: 1;
        }

        /* ── Stats bar under heading ── */
        .wh-stats-bar {
            display: flex;
            justify-content: center;
            gap: 32px;
            flex-wrap: wrap;
            margin-bottom: 60px;
        }
        .wh-stat-pill {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(99,102,241,0.15);
            border-radius: 50px;
            padding: 10px 22px;
            box-shadow: 0 4px 18px rgba(79,70,229,0.08);
        }
        .wh-stat-pill-icon {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            color: #fff;
            flex-shrink: 0;
        }
        .wh-stat-pill-text strong {
            display: block;
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--text-dark);
            line-height: 1.1;
        }
        .wh-stat-pill-text span {
            font-size: 0.72rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        /* ── Submit Feedback CTA ── */
        .wh-feedback-cta {
            text-align: center;
            margin-bottom: 72px;
            padding: 40px 32px;
            background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(124,58,237,0.06));
            border: 1px solid rgba(99,102,241,0.15);
            border-radius: 28px;
            position: relative;
            overflow: hidden;
        }
        .wh-feedback-cta::before {
            content: '\f4ad';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            font-size: 9rem;
            color: rgba(99,102,241,0.05);
            right: -20px;
            top: -20px;
            line-height: 1;
        }
        .wh-feedback-cta h4 {
            font-family: var(--font-display);
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 8px;
        }
        .wh-feedback-cta p {
            color: var(--text-muted);
            font-size: 0.93rem;
            margin-bottom: 24px;
            max-width: 420px;
            margin-left: auto;
            margin-right: auto;
        }
        .btn-feedback-submit {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
            color: #fff !important;
            -webkit-text-fill-color: #fff;
            font-weight: 700;
            font-size: 1rem;
            padding: 15px 36px;
            border-radius: 50px;
            text-decoration: none;
            box-shadow: 0 8px 28px rgba(245,158,11,0.4), 0 2px 8px rgba(0,0,0,0.08);
            transition: transform 0.22s var(--ease), box-shadow 0.22s;
            letter-spacing: 0.3px;
            position: relative;
            z-index: 1;
        }
        .btn-feedback-submit:hover {
            transform: translateY(-4px) scale(1.04);
            box-shadow: 0 20px 45px rgba(245,158,11,0.5);
        }

        /* ── Section label for cards ── */
        .wh-featured-label {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 28px;
        }
        .wh-featured-label span {
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--primary-mid);
        }
        .wh-featured-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, var(--border-subtle), transparent);
        }

        /* ── Testimonial Cards (Glassmorphism + gradient top bar) ── */
        .wh-tcard-scroll {
            display: flex;
            gap: 22px;
            overflow-x: auto;
            padding: 10px 4px 24px;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: var(--primary-light) transparent;
            margin-bottom: 90px;
        }
        .wh-tcard-scroll::-webkit-scrollbar { height: 4px; }
        .wh-tcard-scroll::-webkit-scrollbar-track { background: transparent; }
        .wh-tcard-scroll::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 10px; }

        .wh-tcard {
            flex: 0 0 310px;
            scroll-snap-align: start;
            background: #fff;
            border-radius: 22px;
            padding: 0;
            box-shadow: 0 6px 30px rgba(15,23,42,0.08), 0 2px 8px rgba(79,70,229,0.06);
            position: relative;
            transition: transform 0.28s var(--ease), box-shadow 0.28s;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .wh-tcard:hover {
            transform: translateY(-8px);
            box-shadow: 0 24px 56px rgba(79,70,229,0.16), 0 8px 20px rgba(15,23,42,0.08);
        }
        /* Gradient top accent bar: unique per card position */
        .wh-tcard-accent {
            height: 5px;
            width: 100%;
            border-radius: 22px 22px 0 0;
        }
        .wh-tcard-inner {
            padding: 26px 26px 24px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .wh-tcard-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .wh-tcard-stars {
            display: flex;
            gap: 3px;
        }
        .wh-tcard-stars i { color: #FFD700; font-size: 0.92rem; filter: drop-shadow(0 1px 2px rgba(255,200,0,0.4)); }
        .wh-tcard-stars i.empty { color: #e5e7eb; filter: none; }
        .wh-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 50px;
            letter-spacing: 0.4px;
            box-shadow: 0 3px 10px rgba(79,70,229,0.35);
            white-space: nowrap;
        }
        .wh-badge i { font-size: 0.58rem; }

        /* Giant quote mark */
        .wh-tcard-quote-wrap {
            position: relative;
            flex: 1;
            margin-bottom: 20px;
        }
        .wh-tcard-quote-icon {
            font-family: Georgia, serif;
            font-size: 5rem;
            line-height: 0.6;
            color: var(--primary-light);
            opacity: 0.2;
            position: absolute;
            top: 0;
            left: -4px;
            user-select: none;
        }
        .wh-tcard-quote {
            font-style: italic;
            font-size: 0.95rem;
            color: var(--text-body);
            line-height: 1.78;
            padding-top: 22px;
            position: relative;
            z-index: 1;
        }
        .wh-tcard-subject {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.72rem;
            color: var(--primary-mid);
            background: rgba(79,70,229,0.08);
            border: 1px solid rgba(79,70,229,0.14);
            border-radius: 50px;
            padding: 3px 11px;
            margin-bottom: 18px;
            font-weight: 600;
            width: fit-content;
        }
        /* Author row */
        .wh-tcard-author {
            display: flex;
            align-items: center;
            gap: 12px;
            border-top: 1px solid var(--border-subtle);
            padding-top: 16px;
            margin-top: auto;
        }
        .wh-tcard-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1rem;
            color: #fff;
            flex-shrink: 0;
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
        }
        .wh-tcard-name {
            font-weight: 800;
            font-size: 0.91rem;
            color: var(--text-dark);
        }
        .wh-tcard-meta {
            font-size: 0.74rem;
            color: var(--text-muted);
            margin-top: 2px;
        }

        /* ── All Reviews: mini card layout ── */
        .wh-flist-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 28px;
            padding-bottom: 20px;
            border-bottom: 2px solid var(--border-subtle);
        }
        .wh-flist-sub-title {
            font-family: var(--font-display);
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--text-dark);
            margin: 0;
        }
        .wh-flist-sub-title span { color: var(--primary-mid); }
        .wh-flist-count-chip {
            background: linear-gradient(135deg, var(--primary-mid), #7c3aed);
            color: #fff;
            font-size: 0.78rem;
            font-weight: 700;
            padding: 5px 16px;
            border-radius: 50px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .wh-flist {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
        }
        .wh-flist-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 20px 24px;
            background: #fff;
            border-radius: 18px;
            border: 1px solid var(--border-subtle);
            border-left: 4px solid transparent;
            box-shadow: 0 2px 12px rgba(15,23,42,0.04);
            transition: transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
            animation: fadeInUp 0.4s var(--ease) both;
            position: relative;
            overflow: hidden;
        }
        .wh-flist-item::before {
            content: '\201C';
            font-family: Georgia, serif;
            font-size: 5rem;
            line-height: 1;
            color: var(--primary-light);
            opacity: 0.07;
            position: absolute;
            bottom: -10px;
            right: 12px;
            pointer-events: none;
        }
        .wh-flist-item:hover {
            transform: translateX(4px);
            box-shadow: 0 6px 24px rgba(79,70,229,0.1);
            border-color: var(--primary-light);
        }
        .wh-flist-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.1rem;
            color: #fff;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .wh-flist-body { flex: 1; min-width: 0; }
        .wh-flist-top {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 5px;
        }
        .wh-flist-name {
            font-weight: 800;
            font-size: 0.94rem;
            color: var(--text-dark);
        }
        .wh-flist-stars {
            display: flex;
            gap: 2px;
        }
        .wh-flist-stars i { font-size: 0.74rem; color: #FFD700; filter: drop-shadow(0 1px 1px rgba(255,200,0,0.3)); }
        .wh-flist-stars i.empty { color: #e5e7eb; filter: none; }
        .wh-flist-info {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: 9px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
        }
        .wh-flist-text {
            font-size: 0.92rem;
            color: var(--text-body);
            line-height: 1.7;
        }
        .wh-flist-wh-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            color: #fff;
            font-size: 0.62rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 50px;
            letter-spacing: 0.3px;
        }
        .wh-flist-subject {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 0.71rem;
            color: var(--primary-mid);
            background: rgba(79,70,229,0.08);
            border-radius: 50px;
            padding: 2px 9px;
            font-weight: 600;
        }
        .wh-flist-date {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 0.71rem;
            color: var(--text-light);
        }

        /* Skeleton / Loading */
        .wh-feedback-loading {
            display: flex;
            gap: 20px;
            margin-bottom: 80px;
            overflow: hidden;
        }
        .wh-skel-card {
            flex: 0 0 300px;
            height: 220px;
            border-radius: 22px;
            background: linear-gradient(90deg, #e8ecf8 25%, #f4f6ff 50%, #e8ecf8 75%);
            background-size: 400% 100%;
            animation: shimmer 1.4s infinite;
        }
        @keyframes shimmer {
            0%   { background-position: 100% 50%; }
            100% { background-position: -100% 50%; }
        }
        .wh-flist-skel {
            height: 80px;
            border-radius: 18px;
            background: linear-gradient(90deg, #e8ecf8 25%, #f4f6ff 50%, #e8ecf8 75%);
            background-size: 400% 100%;
            animation: shimmer 1.4s infinite;
            margin-bottom: 14px;
        }

        .wh-no-data {
            text-align: center;
            color: var(--text-muted);
            padding: 50px;
            font-size: 0.95rem;
        }

        /* ── Reply Box: base ── */
        .wh-flist-reply {
            margin-top: 12px;
            padding: 12px 16px;
            border-radius: 0 12px 12px 0;
        }

        /* 🔴 Admin reply */
        .wh-reply-admin {
            background: linear-gradient(135deg, rgba(220,38,38,0.05), rgba(239,68,68,0.04));
            border-left: 3px solid #dc2626;
        }

        /* 🔵 Educator reply */
        .wh-reply-educator {
            background: linear-gradient(135deg, rgba(29,155,240,0.06), rgba(79,70,229,0.04));
            border-left: 3px solid #1d9bf0;
        }

        .wh-flist-reply-by {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }

        /* Shared badge base */
        .wh-reply-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.74rem;
            font-weight: 800;
            padding: 3px 11px;
            border-radius: 50px;
            letter-spacing: 0.3px;
        }

        /* 🔴 Admin badge */
        .wh-badge-admin {
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            color: #fff;
            box-shadow: 0 2px 8px rgba(220,38,38,0.3);
        }
        .wh-badge-admin i { font-size: 0.65rem; }

        /* 🔵 Educator badge */
        .wh-badge-educator {
            background: linear-gradient(135deg, #1d9bf0, #0ea5e9);
            color: #fff;
            box-shadow: 0 2px 8px rgba(29,155,240,0.3);
        }
        .wh-badge-educator i { font-size: 0.65rem; }

        /* Blue verified ✓ circle */
        .wh-verified-icon {
            width: 16px;
            height: 16px;
            background: #1d9bf0;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .wh-verified-icon i { font-size: 0.48rem; color: #fff; }

        /* "Educator" label next to verified icon */
        .wh-reply-educator-label {
            font-size: 0.72rem;
            font-weight: 600;
            color: #1d9bf0;
        }

        .wh-flist-reply-text {
            font-size: 0.88rem;
            color: var(--text-body);
            line-height: 1.65;
        }

        /* Responsive */
        /* Blob & particle animations off on mobile: GPU/battery fix */
        @media (max-width: 768px) {
            .blob { animation: none !important; opacity: 0.4; }
            .math-particle { display: none !important; }
        }
        @media (max-width: 768px) {
            .wh-tcard { flex: 0 0 272px; }
            .wh-feedback-section { padding: 72px 5%; }
            .wh-stats-bar { gap: 14px; }
            .wh-flist-item { padding: 16px 18px; }
        }
        @media (max-width: 480px) {
            .wh-stat-pill { padding: 8px 16px; }
            .wh-feedback-cta { padding: 30px 20px; }
        }

        /* =============================================
           FOOTER
        ============================================= */
        footer {
            background: #0a0f1e;
            padding: 80px 5% 30px;
            position: relative;
            overflow: hidden;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary-mid), var(--accent-pink), var(--secondary), transparent);
        }

        .footer-inner {
            max-width: 1280px;
            margin: 0 auto;
        }

        .footer-top {
            display: grid;
            grid-template-columns: 2.2fr 1fr 1fr 1fr;
            gap: 50px;
            margin-bottom: 60px;
        }

        .footer-brand-col .logo-text-main {
            color: white;
        }

        .footer-brand-col .logo-text-sub {
            color: rgba(255, 255, 255, 0.5);
        }

        .footer-tagline {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
            line-height: 1.75;
            max-width: 320px;
            margin: 18px 0 28px;
        }

        .footer-social {
            display: flex;
            gap: 10px;
        }

        .social-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.3s var(--ease);
        }

        .social-icon:hover {
            background: var(--primary-mid);
            border-color: var(--primary-mid);
            color: white;
            transform: translateY(-4px);
        }

        .footer-col h5 {
            color: white;
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 20px;
            letter-spacing: 0.5px;
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col li {
            margin-bottom: 10px;
        }

        .footer-col a {
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.2s;
        }

        .footer-col a:hover {
            color: white;
        }

        .footer-col li.contact-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
            margin-bottom: 12px;
        }

        .footer-col li.contact-item i {
            color: var(--primary-light);
            margin-top: 3px;
            flex-shrink: 0;
        }

        .footer-bottom {
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .footer-bottom p {
            color: rgba(255, 255, 255, 0.35);
            font-size: 0.85rem;
        }

        .footer-bottom-right {
            display: flex;
            gap: 20px;
        }

        .footer-bottom-right a {
            color: rgba(255, 255, 255, 0.35);
            text-decoration: none;
            font-size: 0.85rem;
            transition: color 0.2s;
        }

        .footer-bottom-right a:hover {
            color: rgba(255, 255, 255, 0.7);
        }

        /* =============================================
           RESPONSIVE, Mobile friendly design
        ============================================= */
        @media (max-width: 1024px) {
            .stats-wrapper {
                grid-template-columns: repeat(2, 1fr);
            }

            .stat-item+.stat-item:nth-child(3) {
                border-left: none;
            }

            .pricing-card.featured {
                transform: scale(1);
            }

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

            .footer-top {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 900px) {

            .courses-grid,
            .testimonials-grid,
            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .tutor-card-wrap,
            .tutor-card {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 36px;
            }
            .tutor-card {
                padding: 40px 28px;
            }

            .credentials-grid {
                grid-template-columns: 1fr;
                max-width: 400px;
                margin: 0 auto 28px;
                text-align: left;
            }

            .tutor-btns {
                justify-content: center;
            }

            .tutor-bio {
                margin: 0 auto 24px;
            }
        }

        @media (max-width: 768px) {
            section {
                padding: 80px 5%;
            }

            .hero-headline {
                font-size: 2.6rem;
                letter-spacing: -1px;
            }

            .hero-actions {
                flex-direction: column;
                width: 100%;
            }

            .hero-actions .btn {
                width: 100%;
            }

            .hero-stats-row {
                gap: 10px;
            }

            .hero-stat-chip {
                padding: 10px 14px;
            }

            .stats-wrapper {
                grid-template-columns: repeat(2, 1fr);
                padding: 38px 24px;
                gap: 20px;
            }

            .stat-item+.stat-item {
                border-left: none;
                padding-left: 0;
            }

            .hamburger {
                display: block;
            }

            .nav-links {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                flex-direction: column;
                align-items: flex-start;
                padding: 20px 5%;
                gap: 4px;
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
                transition: clip-path 0.4s var(--ease);
                border-bottom: 1px solid var(--border-subtle);
            }

            .nav-links.active {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }

            .dropdown-menu {
                position: static;
                box-shadow: none;
                border: none;
                background: transparent;
                padding-left: 18px;
                opacity: 1;
                visibility: visible;
                display: none;
                transform: none;
            }

            .dropdown.active .dropdown-menu {
                display: flex;
            }

            .dropdown:hover .dropdown-menu {
                display: none;
            }

            .demo-card {
                padding: 45px 28px;
            }

            .footer-top {
                grid-template-columns: 1fr;
                gap: 36px;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }

        @media (max-width: 500px) {
            .hero-stats-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            .stat-number {
                font-size: 2.4rem;
            }

            .section-title {
                font-size: 2rem;
            }

            .quiz-wrapper {
                padding: 28px 20px;
            }
        }

        /* =============================================
           PERFORMANCE: backdrop-filter disabled on
           low-end devices / prefers-reduced-motion
        ============================================= */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        /* Low-end Android: disable heavy backdrop-filter */
        @media (max-width: 480px) and (max-resolution: 150dpi) {
            .navbar.scrolled,
            .wh-tcard,
            .wh-stat-pill,
            .wh-feedback-cta,
            [style*="backdrop-filter"] {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background: rgba(255,255,255,0.96) !important;
            }
        }

        /* =====================================================================
           HERO + NAV REDESIGN 2026  (dark indigo nav + two-column lavender hero)
           Ye block sab se aakhir mein hai taake purani CSS ko override kare.
        ===================================================================== */

        /* ---------- NAVBAR: dark indigo gradient ---------- */
        .navbar {
            background: linear-gradient(90deg, #1b1b4d 0%, #29276b 55%, #3532a0 100%) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            padding: 14px 5%;
        }
        .navbar.scrolled {
            background: linear-gradient(90deg, #171742 0%, #232160 55%, #2f2c92 100%) !important;
            box-shadow: 0 8px 30px rgba(18, 16, 55, 0.35) !important;
        }
        /* Logo: "W.H." white + "Academy" gradient (like the reference) */
        /* Logo: "W.H." + "Academy" same font (Playfair Display), BOLD; W.H. white, Academy gradient */
        .navbar .logo-text-main {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.3rem;
            letter-spacing: 0.5px;
            background: none;
            -webkit-text-fill-color: #ffffff;
            color: #ffffff;
        }
        .navbar .logo-text-main .logo-accent {
            font-family: var(--font-display);
            font-weight: 900;
            background: linear-gradient(120deg, #a78bfa 0%, #f472b6 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .navbar .logo-text-sub { color: rgba(255, 255, 255, 0.72); }
        .hamburger { color: #ffffff; }

        /* ===== DESKTOP NAV (>=1181px): tighten so all 12 links + Enroll fit ===== */
        @media (min-width: 1200px) {
            .navbar { padding: 12px 22px; }
            .nav-links { gap: 3px; }
            .nav-links a {
                color: #edecff;
                padding: 7px 10px;
                font-size: 0.8rem;
                white-space: nowrap;
            }
            .nav-links a:hover {
                color: #ffffff;
                background: rgba(255, 255, 255, 0.1);
            }
            .nav-links a.active {
                color: #ffffff;
                background: rgba(255, 255, 255, 0.12);
                position: relative;
            }
            .nav-links a.active::after {
                content: '';
                position: absolute;
                left: 10px; right: 10px; bottom: 2px;
                height: 3px; border-radius: 3px;
                background: linear-gradient(90deg, #f97316, #ec4899);
            }
            .dropdown-menu a { color: var(--text-body); white-space: normal; }
            .dropdown-menu a:hover { color: var(--primary-mid); }
        }

        /* ===== MOBILE / MID NAV (<=1180px): hamburger + DARK dropdown panel ===== */
        @media (max-width: 1199px) {
            .hamburger { display: block; }
            .nav-links {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: linear-gradient(160deg, #1b1b4d 0%, #29276b 60%, #322f92 100%);
                backdrop-filter: none;
                flex-direction: column;
                align-items: stretch;
                padding: 14px 6% 22px;
                gap: 2px;
                max-height: calc(100vh - 62px);
                max-height: calc(100dvh - 62px);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
                transition: clip-path 0.4s var(--ease);
                border-bottom: 1px solid rgba(255, 255, 255, 0.12);
                box-shadow: 0 22px 40px rgba(15, 12, 45, 0.4);
            }
            .nav-links.active {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
            .nav-links a {
                color: #f1f0ff;
                width: 100%;
                padding: 12px 12px;
                font-size: 1rem;
                border-radius: 10px;
            }
            .nav-links a:hover,
            .nav-links a.active {
                color: #ffffff;
                background: rgba(255, 255, 255, 0.1);
            }
            .nav-links a.active::after { display: none; }
            /* sub-menu inside dark panel */
            .dropdown-menu {
                position: static;
                box-shadow: none;
                border: none;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 10px;
                padding: 4px 6px;
                margin: 2px 0 4px 10px;
                opacity: 1;
                visibility: visible;
                display: none;
                transform: none;
            }
            .dropdown.active .dropdown-menu { display: flex; flex-direction: column; }
            .dropdown:hover .dropdown-menu { display: none; }
            .dropdown.active .dropdown-menu { display: flex; }
            .dropdown-menu a { color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; }
            .dropdown-menu a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
        }

        /* ---------- HERO 2026: two-column lavender ---------- */
        .hero.hero-2026 {
            min-height: auto;
            display: block;
            text-align: left;
            align-items: stretch;
            padding: 0 0 46px;
            background: linear-gradient(160deg, #f5f2fc 0%, #efeaf8 48%, #f4eefb 100%);
        }

        /* ===== BANNER: full-width, image = background, text on top ===== */
        .hero-banner {
            position: relative;
            width: 100%;
            border-radius: 0;
            overflow: hidden;
            min-height: 900px;
            display: flex;
            align-items: flex-start;
            padding: 172px 0 62px;
            background:
                linear-gradient(90deg,
                    rgba(247, 243, 252, 0.97) 0%,
                    rgba(247, 243, 252, 0.90) 24%,
                    rgba(247, 243, 252, 0.50) 38%,
                    rgba(247, 243, 252, 0.12) 48%,
                    rgba(247, 243, 252, 0.00) 56%),
                url("/images/hero-student.webp") center 32% / cover no-repeat;
        }
        .hero-banner-inner {
            max-width: 1280px;
            width: 100%;
            margin: 0 auto;
            padding: 0 5%;
        }
        .hero-copy { position: relative; z-index: 2; max-width: 540px; }
        /* text ko image se saaf alag karne ke liye halka white halo */
        @media (min-width: 1001px) {
            .hero-banner .hero-headline { text-shadow: 0 2px 12px rgba(247, 243, 252, 0.98), 0 1px 2px rgba(247,243,252,0.9); }
            .hero-banner .hero-sub { text-shadow: 0 1px 8px rgba(247, 243, 252, 1), 0 0 3px rgba(247,243,252,1); font-weight: 600; }
            .hero-banner .hf-label { text-shadow: 0 1px 7px rgba(247, 243, 252, 1), 0 0 3px rgba(247,243,252,1); }
        }

        /* image element sirf mobile ke liye (desktop pe banner bg use hota hai) */
        .hero-photo-m { display: none; }

        /* ---------- copy styles ---------- */
        .hero-2026 .hero-badge {
            background: #ecfdf5;
            border: 1px solid rgba(5, 150, 105, 0.35);
            color: #047857;
            margin-bottom: 24px;
            box-shadow: 0 6px 18px rgba(5, 150, 105, 0.14);
        }
        .hero-2026 .hero-badge i { color: #059669; }
        .hero-2026 .hero-headline {
            font-family: var(--font-display);
            font-size: clamp(2.3rem, 3.9vw, 3.7rem);
            line-height: 1.05;
            letter-spacing: -1.5px;
            text-align: left;
            max-width: 560px;
            margin: 0 0 20px;
            color: #17153a;
        }
        .hero-2026 .hero-headline .gradient-word {
            background: linear-gradient(90deg,
                #4f46e5 0%, #7c3aed 14%, #c026d3 28%, #db2777 40%,
                #f97316 50%, #db2777 60%, #c026d3 72%, #7c3aed 86%, #4f46e5 100%);
            background-size: 220% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: none;
            animation: heroWave 7s linear infinite;
        }
        @keyframes heroWave {
            0%   { background-position: 0% 50%; }
            100% { background-position: 220% 50%; }
        }
        .hero-2026 .hero-sub {
            text-align: left;
            max-width: 400px;
            margin: 0 0 18px;
            color: #3f3d56;
            font-size: 1.02rem;
            line-height: 1.65;
        }
        .hero-2026 .hero-actions { justify-content: flex-start; margin-bottom: 30px; }
        .hero-2026 .btn { border-radius: 14px; padding: 15px 26px; }
        .hero-2026 .btn-primary { background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%); }
        .hero-2026 .btn-secondary {
            color: #6d28d9;
            border: 1.5px solid rgba(124, 58, 237, 0.4);
            background: #ffffff;
        }
        .hero-2026 .btn-secondary:hover { border-color: #7c3aed; color: #6d28d9; }

        /* feature row -> 2 x 2 (do vertical, phir do) taake books dikhein */
        .hero-features {
            display: grid;
            grid-template-columns: auto auto;
            justify-content: start;
            column-gap: 72px;
            row-gap: 18px;
            width: max-content;
        }
        .hf-item {
            display: flex; flex-direction: row; align-items: center;
            gap: 11px; max-width: none;
        }
        .hf-icon {
            width: 46px; height: 46px; border-radius: 13px;
            display: flex; align-items: center; justify-content: center;
            background: #ffffff; color: #7c3aed; font-size: 1.05rem;
            box-shadow: 0 6px 18px rgba(109, 40, 217, 0.14);
            flex-shrink: 0;
        }
        .hf-label { font-size: 0.84rem; font-weight: 600; color: #2f2b45; line-height: 1.25; }

        /* ===== CARDS ROW (image ke neeche) — POORA card colorful ===== */
        .hero-cards-row {
            width: min(1280px, 90%);
            margin: 22px auto 0;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .hv-card {
            border-radius: 18px;
            padding: 22px 22px;
            box-shadow: 0 16px 40px rgba(30, 27, 75, 0.14);
            display: flex; gap: 16px; align-items: flex-start;
            color: #ffffff;
        }
        .hvc-icon {
            width: 66px; height: 66px; border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 2.7rem; color: #ffffff; flex-shrink: 0;
            line-height: 1;
            background: rgba(255, 255, 255, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.35);
        }
        .hv-card strong { display: block; font-size: 1.05rem; color: #ffffff; font-weight: 800; margin-bottom: 4px; }
        .hv-card > div > span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.92); line-height: 1.45; display: block; }
        .hvc-accent { width: 34px; height: 3px; border-radius: 2px; margin-top: 12px; background: rgba(255, 255, 255, 0.85); }

        /* har card ka apna colorful gradient */
        .hv-card-1 { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); }
        .hv-card-2 { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); }
        .hv-card-3 { background: linear-gradient(135deg, #db2777 0%, #f472b6 100%); }

        /* TRUST BAR */
        .hero-trustbar {
            width: min(1280px, 90%);
            margin: 18px auto 0;
            background: #ffffff;
            border: 1px solid rgba(124, 58, 237, 0.10);
            border-radius: 20px;
            padding: 20px 34px;
            display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
            box-shadow: 0 18px 50px rgba(30, 27, 75, 0.08);
            position: relative; z-index: 2;
        }
        .htb-item { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; color: #374151; }
        .htb-item i { color: #7c3aed; }
        .htb-lead { color: #6d28d9; font-weight: 800; }
        .htb-lead i { font-size: 1.12rem; }

        /* ---------- HERO 2026 responsive ---------- */
        /* Tablet & mobile: banner bg image HATAO, image ko neeche clean banner bana do */
        @media (max-width: 1000px) {
            .hero.hero-2026 { padding: 96px 5% 40px; }
            .hero-banner {
                background: none;
                min-height: auto;
                padding: 0;
                box-shadow: none;
                border-radius: 0;
                display: block;
            }
            .hero-banner-inner { padding: 0; max-width: none; }
            .hero-copy { max-width: none; }
            .hero-2026 .hero-headline, .hero-2026 .hero-sub { max-width: none; }
            .hero-2026 .hero-sub { text-shadow: none; }

            .hero-features { width: 100%; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 16px; }
            .hf-icon { color: #7c3aed; }

            .hero-photo-m {
                display: block;
                width: 100%;
                max-width: 680px;
                margin: 6px auto 4px;
                border-radius: 22px;
                box-shadow: 0 26px 60px rgba(79, 70, 229, 0.18);
            }
            .hero-cards-row { width: 100%; max-width: 680px; margin: 16px auto 0; gap: 12px; }
            .hero-trustbar { width: 100%; }
        }
        @media (max-width: 768px) {
            .hero-2026 .hero-actions { flex-direction: row; flex-wrap: wrap; }
            .hero-2026 .hero-actions .btn { width: auto; flex: 1 1 auto; }
            .hero-features { column-gap: 20px; }
            .hero-trustbar { gap: 18px 26px; padding: 18px 22px; }
        }
        /* phones: cards single column + features single column */
        @media (max-width: 620px) {
            .hero-cards-row { grid-template-columns: 1fr; }
            .hero-features { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 520px) {
            .hero-2026 .hero-actions .btn { width: 100%; }
        }


/* ===== Nav pill boxes — subtle colourful (added 2026-09-14) ===== */
@media (min-width: 1200px) {
  .nav-links { gap: 8px; }
  .nav-links > li > a:not(.btn){
    border:1px solid rgba(79,70,229,0.14);
    background:rgba(79,70,229,0.05);
    border-radius:11px; font-weight:600;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .nav-links > li > a:not(.btn):hover{ transform:translateY(-1px); box-shadow:0 5px 16px rgba(79,70,229,0.14); }
  .nav-links > li.dropdown.active > a:not(.btn){ box-shadow:0 5px 16px rgba(79,70,229,0.16); }
  .nav-links > li:nth-child(1) > a:not(.btn){ background:rgba(79,70,229,0.05); border-color:rgba(79,70,229,0.15);}
  .nav-links > li:nth-child(2) > a:not(.btn){ background:rgba(79,70,229,0.06); border-color:rgba(79,70,229,0.16);}
  .nav-links > li:nth-child(3) > a:not(.btn){ background:rgba(124,58,237,0.06); border-color:rgba(124,58,237,0.16);}
  .nav-links > li:nth-child(4) > a:not(.btn){ background:rgba(5,150,105,0.07); border-color:rgba(5,150,105,0.18);}
  .nav-links > li:nth-child(5) > a:not(.btn){ background:rgba(14,165,233,0.07); border-color:rgba(14,165,233,0.18);}
  .nav-links > li:nth-child(6) > a:not(.btn){ background:rgba(236,72,153,0.06); border-color:rgba(236,72,153,0.16);}
  .nav-links > li:nth-child(7) > a:not(.btn){ background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.20);}
  .nav-links > li:nth-child(1) > a:not(.btn):hover{ background:rgba(79,70,229,0.13);}
  .nav-links > li:nth-child(2) > a:not(.btn):hover{ background:rgba(79,70,229,0.13);}
  .nav-links > li:nth-child(3) > a:not(.btn):hover{ background:rgba(124,58,237,0.14);}
  .nav-links > li:nth-child(4) > a:not(.btn):hover{ background:rgba(5,150,105,0.15);}
  .nav-links > li:nth-child(5) > a:not(.btn):hover{ background:rgba(14,165,233,0.15);}
  .nav-links > li:nth-child(6) > a:not(.btn):hover{ background:rgba(236,72,153,0.14);}
  .nav-links > li:nth-child(7) > a:not(.btn):hover{ background:rgba(245,158,11,0.16);}
}


/* ===== Mobile dropdown contain + focus fixes (added 2026-09-14) ===== */
@media (max-width: 1199px){
  .nav-links .dropdown-menu{
    position: static !important; left: auto !important; right:auto !important; transform: none !important;
    min-width: 0 !important; width: auto !important; max-width: 100% !important;
    box-shadow: none !important; margin: 2px 0 6px 14px !important; padding: 4px 6px !important;
  }
}
/* Remove harsh blue focus lines on interactive elements; keep a soft ring for keyboard only */
.btn, button, select, .cw-select, .nav-links a, a.btn, .dropdown-menu a { -webkit-tap-highlight-color: transparent; }
.btn:focus, button:focus, select:focus, .cw-select:focus, .nav-links a:focus, a.btn:focus,
.btn:focus-visible, button:focus-visible, select:focus-visible, .cw-select:focus-visible,
.nav-links a:focus-visible, a.btn:focus-visible { outline: none !important; }
.btn:focus-visible, button:focus-visible, .cw-select:focus-visible { box-shadow: 0 0 0 3px rgba(79,70,229,0.22); }


/* ===== Nav pill boxes (mobile) — colourful on dark panel (added 2026-09-14) ===== */
@media (max-width: 1199px){
  .nav-links > li > a:not(.btn){
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-left-width: 3px; border-radius: 10px; margin: 3px 0;
  }
  .nav-links > li:nth-child(1) > a:not(.btn){ border-left-color:#818cf8; }
  .nav-links > li:nth-child(2) > a:not(.btn){ border-left-color:#818cf8; }
  .nav-links > li:nth-child(3) > a:not(.btn){ border-left-color:#c4b5fd; }
  .nav-links > li:nth-child(4) > a:not(.btn){ border-left-color:#6ee7b7; }
  .nav-links > li:nth-child(5) > a:not(.btn){ border-left-color:#7dd3fc; }
  .nav-links > li:nth-child(6) > a:not(.btn){ border-left-color:#f9a8d4; }
  .nav-links > li:nth-child(7) > a:not(.btn){ border-left-color:#fcd34d; }
}