/* ── CSS Variables ── */
    :root {
        --primary-color: #181f4e;
        --secondary-color: #954c2e;
        --accent-color: #4b5eaa;
        --light-color: #f0eceb;
        --primary-gradient: linear-gradient(135deg, #181f4e 0%, #954c2e 100%);
        --secondary-gradient: linear-gradient(135deg, #181f4e 0%, #4b5eaa 100%);
        --accent-gradient: linear-gradient(135deg, #4b5eaa 0%, #954c2e 100%);
        --dark-gradient: linear-gradient(135deg, #181f4e 0%, #101640 100%);
        --nav-h: 92px;
        --nav-h-sm: 82px;
    }

    /* ── Scroll Progress ── */
    #scroll-progress {
        position: fixed;
        top: 0; left: 0;
        height: 2.5px;
        width: 0%;
        background: linear-gradient(90deg, #4b5eaa, #954c2e);
        z-index: 9999;
        will-change: width;
        border-radius: 0 2px 2px 0;
        transition: width 0.08s linear;
        box-shadow: 0 0 8px rgba(75, 94, 170, 0.55);
    }

    /* ══════════════════════════════════════════
       NAV – Premium full-width glassmorphism
    ══════════════════════════════════════════ */
    .s4u-nav {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1000;
        height: var(--nav-h);
        display: flex;
        align-items: center;
        transition:
            background   0.55s cubic-bezier(0.4,0,0.2,1),
            box-shadow   0.55s cubic-bezier(0.4,0,0.2,1),
            height       0.4s  cubic-bezier(0.4,0,0.2,1),
            border-color 0.55s;
        will-change: background, height;
        border-bottom: 1px solid transparent;
    }

    /* ── Dark mode (over dark hero) ── */
    .s4u-nav.nav-dark {
        background: transparent;
    }
    .s4u-nav.nav-dark .s4u-nav__link {
        color: rgba(255,255,255,0.78);
    }
    .s4u-nav.nav-dark .s4u-nav__link:hover {
        color: #fff;
        background: rgba(255,255,255,0.08);
    }
    .s4u-nav.nav-dark .s4u-nav__link.active { color: #fff; }
    .s4u-nav.nav-dark .s4u-nav__link::after { background: rgba(255,255,255,0.6); }
    .s4u-nav.nav-dark .nav-hamburger-line { background: rgba(255,255,255,0.88); }
    .s4u-nav.nav-dark .s4u-nav__cta {
        background: rgba(255,255,255,0.11);
        color: #fff;
        border-color: rgba(255,255,255,0.22);
        backdrop-filter: blur(8px);
    }
    .s4u-nav.nav-dark .s4u-nav__cta:hover {
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.5);
    }
    .s4u-nav.nav-dark .logo-dark { display: none; }
    .s4u-nav.nav-dark .logo-light { display: block; }

    /* ── Scrolled mode (frosted glass) ── */
    .s4u-nav.nav-scrolled {
        height: var(--nav-h-sm);
        background: rgba(248, 248, 252, 0.82);
        backdrop-filter: blur(28px) saturate(190%);
        -webkit-backdrop-filter: blur(28px) saturate(190%);
        border-color: rgba(24,31,78,0.07);
        box-shadow: 0 2px 40px rgba(24,31,78,0.09);
    }
    .s4u-nav.nav-scrolled .s4u-nav__link { color: #2a3060; }
    .s4u-nav.nav-scrolled .s4u-nav__link:hover {
        color: var(--secondary-color);
        background: rgba(24,31,78,0.05);
    }
    .s4u-nav.nav-scrolled .s4u-nav__link.active { color: var(--secondary-color); }
    .s4u-nav.nav-scrolled .s4u-nav__link::after { background: var(--primary-gradient); }
    .s4u-nav.nav-scrolled .nav-hamburger-line { background: var(--primary-color); }
    .s4u-nav.nav-scrolled .s4u-nav__cta {
        background: var(--primary-gradient);
        color: #f0eceb;
        border-color: transparent;
        box-shadow: 0 4px 18px rgba(24,31,78,0.25);
    }
    .s4u-nav.nav-scrolled .s4u-nav__cta:hover {
        box-shadow: 0 8px 28px rgba(24,31,78,0.35);
        transform: translateY(-1px);
    }
    .s4u-nav.nav-scrolled .logo-dark { display: block; }
    .s4u-nav.nav-scrolled .logo-light { display: none; }

    /* ── Nav inner layout ── */
    .s4u-nav__inner {
        width: 100%;
        padding: 0 2.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    /* ── Logo ── */
    .s4u-nav__logo {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        text-decoration: none;
        margin-inline-end: 0.5rem;
    }
    .s4u-nav__logo img {
        height: 72px;
        width: auto;
        max-height: 72px;
        transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
    }
    @media (max-width: 575px) {
        :root { --nav-h: 80px; --nav-h-sm: 72px; }
        .s4u-nav__logo img { height: 56px; max-height: 56px; }
    }
    .s4u-nav__logo:hover img { transform: scale(1.06); }
    .logo-dark  { display: block; }
    .logo-light { display: none; }

    /* ── Desktop nav links ── */
    .s4u-nav__links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 0.15rem;
        margin-inline-start: auto;
    }
    .s4u-nav__link {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 0.9rem;
        font-size: 0.915rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 10px;
        position: relative;
        transition: color 0.25s ease, background 0.25s ease;
        white-space: nowrap;
        letter-spacing: 0.01em;
    }
    .s4u-nav__link::after {
        content: '';
        position: absolute;
        bottom: 3px;
        left: 50%;
        width: 0;
        height: 2px;
        border-radius: 2px;
        transform: translateX(-50%);
        transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    .s4u-nav__link:hover::after,
    .s4u-nav__link.active::after { width: 65%; }

    /* ── CTA / Actions ── */
    .s4u-nav__actions {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-inline-start: 1rem;
    }
    .s4u-nav__cta {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.55rem 1.5rem;
        border-radius: 50px;
        font-size: 0.9rem;
        font-weight: 700;
        text-decoration: none;
        border: 1.5px solid transparent;
        transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
        white-space: nowrap;
        letter-spacing: 0.025em;
        position: relative;
        overflow: hidden;
    }
    .s4u-nav__cta-arrow {
        transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
        font-size: 0.85rem;
    }
    .s4u-nav__cta:hover .s4u-nav__cta-arrow {
        transform: translateX(3px);
    }
    [dir="rtl"] .s4u-nav__cta-arrow {
        transform: rotate(180deg);
    }
    [dir="rtl"] .s4u-nav__cta:hover .s4u-nav__cta-arrow {
        transform: rotate(180deg) translateX(3px);
    }

    /* ── Hamburger ── */
    .nav-hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 5px;
        width: 42px;
        height: 42px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        border-radius: 10px;
        transition: background 0.2s;
    }
    .nav-hamburger:hover { background: rgba(128,128,128,0.1); }
    .nav-hamburger-line {
        display: block;
        height: 2px;
        border-radius: 2px;
        transition: all 0.38s cubic-bezier(0.4,0,0.2,1);
        will-change: transform, opacity, width;
    }
    .nav-hamburger-line:nth-child(1) { width: 22px; }
    .nav-hamburger-line:nth-child(2) { width: 15px; }
    .nav-hamburger-line:nth-child(3) { width: 22px; }
    .nav-hamburger.open .nav-hamburger-line:nth-child(1) {
        width: 22px;
        transform: translateY(7px) rotate(45deg);
    }
    .nav-hamburger.open .nav-hamburger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .nav-hamburger.open .nav-hamburger-line:nth-child(3) {
        width: 22px;
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ── Mobile menu ── */
    .nav-mobile-menu {
        position: fixed;
        top: var(--nav-h);
        left: 0; right: 0;
        z-index: 999;
        background: rgba(6, 9, 32, 0.97);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        padding: 1.5rem 1.5rem 2rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: all 0.38s cubic-bezier(0.4,0,0.2,1);
    }
    .nav-mobile-menu.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }
    .nav-mobile-links {
        list-style: none;
        margin: 0 0 1.25rem;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }
    .nav-mobile-link {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.85rem 1rem;
        color: rgba(255,255,255,0.75);
        text-decoration: none;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 12px;
        transition: all 0.22s ease;
        letter-spacing: 0.01em;
    }
    .nav-mobile-link i { font-size: 1.05rem; opacity: 0.75; }
    .nav-mobile-link:hover,
    .nav-mobile-link.active {
        color: #fff;
        background: rgba(255,255,255,0.07);
    }
    .nav-mobile-link.active i { opacity: 1; color: #a5b4fc; }
    .nav-mobile-divider {
        height: 1px;
        background: rgba(255,255,255,0.07);
        margin: 0.75rem 0;
    }
    .nav-mobile-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem;
        background: var(--primary-gradient);
        color: #f0eceb;
        text-decoration: none;
        border-radius: 14px;
        font-weight: 700;
        font-size: 1rem;
        transition: transform 0.25s, box-shadow 0.25s;
        letter-spacing: 0.025em;
    }
    .nav-mobile-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 36px rgba(24,31,78,0.45);
        color: #f0eceb;
    }

    /* ── Responsive breakpoints ── */
    @media (max-width: 991px) {
        .nav-hamburger { display: flex; }
        .s4u-nav__links { display: none; }
    }
    @media (min-width: 992px) {
        .nav-mobile-menu { display: none !important; }
    }
    @media (max-width: 768px) {
        .s4u-nav__inner { padding: 0 1.25rem; }
        .s4u-nav__cta .s4u-nav__cta-label { display: none; }
    }

    /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
    .footer-landing {
        background: var(--primary-color);
        color: var(--light-color);
        padding: 4rem 0 2rem;
        position: relative;
        overflow: hidden;
    }
    .footer-landing::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="0.8" fill="rgba(255,255,255,0.08)"/></svg>');
        opacity: 0.5;
    }
    .footer-landing h5, .footer-landing h6 {
        font-weight: 700;
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 1;
    }
    .footer-landing a {
        color: rgba(255,255,255,0.78);
        text-decoration: none;
        transition: color 0.25s ease;
        position: relative;
        z-index: 1;
    }
    .footer-landing a:hover { color: white; }
    .footer-landing .list-unstyled li { margin-bottom: 0.75rem; }

    .lang-toggle-footer {
        background: rgba(255,255,255,0.12);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.18);
    }
    .lang-toggle-footer .lang-btn { color: rgba(255,255,255,0.85); }
    .lang-toggle-footer .lang-btn:hover { color: white; background: rgba(255,255,255,0.18); }
    .lang-toggle-footer .lang-btn.active {
        background: rgba(255,255,255,0.95);
        color: var(--primary-color);
        box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    }
    .lang-toggle-footer .lang-btn.active i,
    .lang-toggle-footer .lang-btn.active .lang-text { color: var(--primary-color); }
    .lang-toggle-footer .lang-btn.active:hover { background: white; }

/* ── landing page styles ── */
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'Poppins','DIN Next LT Arabic',sans-serif; overflow-x:hidden; }

        /* ══════════════════════════════════════════
           HERO SECTION – Cinematic Dark Immersive
        ══════════════════════════════════════════ */
        .hero-section {
            position: relative;
            width: 100%;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: radial-gradient(ellipse 120% 85% at 50% -10%, #222a5e 0%, #181f4e 46%, #0f1336 100%);
        }

        /* ── Background video loop ── */
        .hero-bg-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            z-index: 1;
            opacity: 0;
            transition: opacity 2s ease;
            pointer-events: none;
        }
        .hero-bg-video.ready { opacity: 0.45; }

        /* Dim further on mobile to keep text readable */
        @media (max-width: 767px) {
            .hero-bg-video.ready { opacity: 0.28; }
        }

        /* Respect reduced-motion: hide video, show static bg */
        @media (prefers-reduced-motion: reduce) {
            .hero-bg-video { display: none; }
        }

        /* ── Two-column hero inner ── */
        .hero-inner {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 100vh;
            padding: calc(var(--nav-h) + 2.5rem) 5% 4rem;
            gap: 2rem;
        }
        .hero-left {
            flex: 1 1 0;
            min-width: 0;
            color: white;
            text-align: left;
            will-change: transform, opacity;
        }
        [dir="rtl"] .hero-left { text-align: right; }

        /* Spline side */
        .hero-right {
            flex: 1 1 0;
            min-width: 0;
            position: relative;
            min-height: 520px;
            opacity: 0; /* revealed by GSAP */
            will-change: opacity, transform;
        }
        #spline-canvas {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 24px;
        }
        .spline-loader {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.6s ease;
            z-index: 5;
            pointer-events: none;
        }
        .spline-loader-ring {
            width: 52px; height: 52px;
            border: 3px solid rgba(255,255,255,0.1);
            border-top-color: rgba(165,184,255,0.85);
            border-radius: 50%;
            animation: spinRing 0.85s linear infinite;
        }
        @keyframes spinRing { to { transform: rotate(360deg); } }

        /* Mouse-tracking spotlight (ibelick-style) */
        .hero-spotlight {
            position: absolute;
            width: 380px; height: 380px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 6;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle at center,
                rgba(255,255,255,0.07) 0%,
                rgba(165,184,255,0.04) 35%,
                transparent 70%);
            filter: blur(18px);
            opacity: 0;
            transition: opacity 0.35s ease;
            will-change: left, top, opacity;
        }

        /* ── Tablet: stack vertically ── */
        @media (max-width: 991px) {
            .hero-section { min-height: auto; }
            .hero-inner {
                flex-direction: column;
                min-height: 100svh;
                min-height: 100vh;
                padding: calc(var(--nav-h) + 2rem) 5% 3.5rem;
                gap: 2rem;
                align-items: center;
            }
            .hero-right {
                width: 100%;
                min-height: 300px;
                flex-shrink: 0;
            }
            .hero-left { text-align: center; width: 100%; }
            [dir="rtl"] .hero-left { text-align: center; }
            .hero-subtitle { margin-left: auto; margin-right: auto; max-width: 540px; }
        }

        /* ── Phone landscape / small tablet ── */
        @media (max-width: 767px) {
            .hero-inner {
                padding: calc(var(--nav-h) + 1.5rem) 4% 3rem;
                gap: 1.75rem;
            }
            .hero-right { min-height: 260px; }
            .hero-badge { margin-bottom: 1.25rem; }
        }

        /* ── Phone portrait ── */
        @media (max-width: 575px) {
            .hero-inner {
                padding: calc(var(--nav-h) + 1.25rem) 1.25rem 2.5rem;
                gap: 1.5rem;
            }
            .hero-right { min-height: 220px; }
            .hero-title {
                font-size: clamp(1.665rem, 7.2vw, 2.52rem);
                letter-spacing: -0.025em;
                margin-bottom: 1.25rem;
            }
            .hero-badge {
                margin-bottom: 1rem;
                font-size: 0.78rem;
                padding: 0.4rem 1rem 0.4rem 0.65rem;
            }
            .hero-subtitle {
                font-size: 0.93rem;
                line-height: 1.65;
                margin-bottom: 1.75rem;
            }
            .hero-trust { gap: 0.65rem; font-size: 0.78rem; margin-top: 1.75rem; }
            .hero-trust-sep { display: none; }
        }

        /* ── Very small phone (≤ 400px) ── */
        @media (max-width: 400px) {
            .hero-inner {
                padding-left: 1rem;
                padding-right: 1rem;
                gap: 1.25rem;
            }
            .hero-right { min-height: 185px; }
            .hero-title { font-size: clamp(1.485rem, 8.1vw, 1.98rem); }
            .btn-hero {
                padding: 0.8rem 1.75rem;
                font-size: 0.92rem;
            }
        }

        /* Gradient Orbs – ambient atmosphere */
        .hero-orb {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(90px);
            will-change: transform;
        }
        .hero-orb-1 {
            width: 780px; height: 780px;
            background: radial-gradient(circle, rgba(75,94,170,0.5) 0%, transparent 68%);
            top: -280px; right: -200px;
            z-index: 2;
            animation: orbDrift1 12s ease-in-out infinite;
        }
        .hero-orb-2 {
            width: 650px; height: 650px;
            background: radial-gradient(circle, rgba(149,76,46,0.38) 0%, transparent 68%);
            bottom: -220px; left: -150px;
            z-index: 2;
            animation: orbDrift2 15s ease-in-out infinite;
        }
        .hero-orb-3 {
            width: 450px; height: 450px;
            background: radial-gradient(circle, rgba(110,128,205,0.20) 0%, transparent 70%);
            top: 30%; left: 35%;
            z-index: 2;
            animation: orbDrift3 18s ease-in-out infinite;
        }
        @keyframes orbDrift1 {
            0%,100% { transform:translate(0,0) scale(1); }
            40%     { transform:translate(-40px,35px) scale(1.08); }
            70%     { transform:translate(25px,-20px) scale(0.94); }
        }
        @keyframes orbDrift2 {
            0%,100% { transform:translate(0,0) scale(1); }
            35%     { transform:translate(50px,-30px) scale(1.06); }
            65%     { transform:translate(-25px,40px) scale(0.92); }
        }
        @keyframes orbDrift3 {
            0%,100% { transform:translate(-50%,-50%) scale(1); }
            50%     { transform:translate(-50%,-50%) scale(1.15) rotate(20deg); }
        }

        /* Perspective Grid */
        .hero-grid {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(75,106,205,0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(75,106,205,0.1) 1px, transparent 1px);
            background-size: 65px 65px;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 25%, rgba(0,0,0,0.4) 65%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 25%, rgba(0,0,0,0.4) 65%, transparent 100%);
        }

        /* Cinematic vignette */
        .hero-vignette {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 38%, rgba(0,0,0,0.55) 100%);
        }

        /* Noise grain texture */
        .hero-noise {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
            opacity: 0.035;
            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: 180px;
            mix-blend-mode: overlay;
        }

        /* SVG Spotlight beam (Aceternity UI / Spotlight component) */
        .hero-spotlight-svg {
            position: absolute;
            z-index: 2;
            pointer-events: none;
            width: 138%;
            height: 169%;
            top: -40px;
            left: 0;
            opacity: 0;
            animation: spotlightIn 2.2s ease 0.6s 1 forwards;
        }
        @media (min-width: 768px) {
            .hero-spotlight-svg { width: 84%; left: 15%; top: -80px; }
        }
        @keyframes spotlightIn {
            0%   { opacity: 0; transform: translate(-72%, -62%) skewX(-30deg); }
            100% { opacity: 1; transform: translate(-50%, -40%) skewX(-30deg); }
        }

        /* ── Hero Content (kept as scroll parallax target) ── */
        .hero-content {
            display: contents; /* pass-through wrapper */
        }

        /* Badge */
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            background: rgba(255,255,255,0.07);
            backdrop-filter: blur(14px) saturate(180%);
            -webkit-backdrop-filter: blur(14px) saturate(180%);
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: 50px;
            padding: 0.48rem 1.2rem 0.48rem 0.75rem;
            font-size: 0.82rem;
            font-weight: 600;
            color: rgba(255,255,255,0.88);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }
        .hero-badge::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50px;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
            background-size: 200% 100%;
            animation: badgeShimmer 3.5s ease-in-out infinite;
        }
        @keyframes badgeShimmer {
            0%   { background-position: -200% 0; }
            100% { background-position:  200% 0; }
        }
        .hero-badge-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: #7d92dd;
            box-shadow: 0 0 7px rgba(125,146,221,0.95), 0 0 14px rgba(125,146,221,0.45);
            flex-shrink: 0;
            animation: dotPulse 2.2s ease-in-out infinite;
        }
        @keyframes dotPulse {
            0%,100% { opacity:1; transform:scale(1); }
            50%     { opacity:0.5; transform:scale(0.8); }
        }

        /* Title */
        .hero-title {
            font-family: 'Inter', 'Poppins', sans-serif;
            font-size: clamp(2.52rem, 6.75vw, 5.04rem);
            font-weight: 800;
            line-height: 1.08;
            letter-spacing: -0.035em;
            color: #fff;
            margin-bottom: 1.75rem;
            position: relative;
        }
        .hero-title-line {
            display: block;
            overflow: hidden;
            padding-bottom: 0.06em; /* prevent descender clip */
        }
        .hero-title-inner {
            display: block;
            will-change: transform, opacity;
        }
        /* Gradient accent on last part of title */
        .hero-title-accent {
            background: linear-gradient(135deg, #8ea3e6 0%, #b2a0d0 45%, #c87a54 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Neutral gradient on main title text (from-neutral-50 to-neutral-400) */
        .hero-title-inner:not(.hero-title-accent) {
            background: linear-gradient(to bottom, #f4f1f0 0%, #cfc4bd 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Subtitle */
        .hero-subtitle {
            font-size: clamp(1rem, 2.2vw, 1.3rem);
            line-height: 1.75;
            font-weight: 400;
            color: rgba(212,212,212,0.95);
            max-width: 600px;
            margin: 0 0 2.75rem;
            will-change: transform, opacity;
        }

        /* Buttons */
        .hero-buttons {
            display: flex;
            gap: 1rem;
            justify-content: flex-start;
            flex-wrap: wrap;
            will-change: transform, opacity;
        }
        [dir="rtl"] .hero-buttons { justify-content: flex-end; }
        .btn-hero {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.95rem 2.4rem;
            font-size: 1rem;
            font-weight: 700;
            border-radius: 50px;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
            position: relative;
            overflow: hidden;
            letter-spacing: 0.025em;
            will-change: transform;
        }
        .btn-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50px;
            background: rgba(255,255,255,0);
            transition: background 0.35s ease;
        }
        .btn-hero:hover::after { background: rgba(255,255,255,0.08); }
        .btn-hero:hover { transform: translateY(-3px) scale(1.03); }
        .btn-hero:active { transform: translateY(-1px) scale(1.01); }
        .btn-hero-primary {
            background: linear-gradient(135deg, #fff 0%, #f0eceb 100%);
            color: var(--primary-color);
            box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
        }
        .btn-hero-primary:hover {
            color: var(--secondary-color);
            box-shadow: 0 16px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
        }
        .btn-hero-outline {
            background: rgba(255,255,255,0.07);
            color: rgba(255,255,255,0.9);
            border: 1.5px solid rgba(255,255,255,0.22);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }
        .btn-hero-outline:hover {
            background: rgba(255,255,255,0.14);
            border-color: rgba(255,255,255,0.5);
            color: #fff;
            box-shadow: 0 8px 32px rgba(0,0,0,0.25);
        }

        /* Floating trust badges below CTA */
        .hero-trust {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 1.5rem;
            margin-top: 2.5rem;
            color: rgba(255,255,255,0.45);
            font-size: 0.82rem;
            font-weight: 500;
            flex-wrap: wrap;
            will-change: opacity;
        }
        [dir="rtl"] .hero-trust { justify-content: flex-end; }
        .hero-trust-item {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .hero-trust-item i {
            color: rgba(165,184,255,0.7);
            font-size: 0.9rem;
        }
        .hero-trust-sep {
            width: 1px; height: 14px;
            background: rgba(255,255,255,0.15);
        }

        /* Scroll Indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 2.5rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            z-index: 10;
            cursor: pointer;
            color: rgba(255,255,255,0.45);
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            transition: color 0.25s;
        }
        .scroll-indicator:hover { color: rgba(255,255,255,0.75); }
        .scroll-mouse {
            width: 24px; height: 40px;
            border: 1.5px solid rgba(255,255,255,0.3);
            border-radius: 12px;
            display: flex;
            justify-content: center;
            padding-top: 6px;
            transition: border-color 0.25s;
        }
        .scroll-indicator:hover .scroll-mouse { border-color: rgba(255,255,255,0.6); }
        .scroll-wheel {
            width: 3px; height: 8px;
            background: rgba(255,255,255,0.7);
            border-radius: 2px;
            animation: scrollWheel 2s ease infinite;
        }
        @keyframes scrollWheel {
            0%   { transform:translateY(0); opacity:1; }
            80%  { transform:translateY(11px); opacity:0; }
            100% { transform:translateY(0); opacity:0; }
        }

        /* ══════════════════════════════════════════
           STATS
        ══════════════════════════════════════════ */
        .stats-section {
            padding:5.5rem 0;
            background: linear-gradient(to bottom, #181f4e 0%, #f0eceb 38%);
            position: relative;
        }
        .stat-card {
            text-align:center;
            padding:2.5rem 1.5rem;
            transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
            border-radius:22px;
            background:white;
            box-shadow:0 6px 30px rgba(0,0,0,0.09);
            margin-bottom:2rem;
            border:1px solid rgba(0,0,0,0.04);
        }
        .stat-card:hover { transform:translateY(-14px) scale(1.04); box-shadow:0 20px 50px rgba(0,0,0,0.14); }
        .stat-number {
            font-size:clamp(2.5rem,5vw,4rem);
            font-weight:800;
            background:var(--primary-gradient);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            background-clip:text;
            margin-bottom:0.5rem;
            display:block;
            font-family:'Inter','Poppins',sans-serif;
        }
        .stat-card h5 { color:#5a6076; font-weight:500; font-size:1.05rem; }

        /* ══════════════════════════════════════════
           SECTION TITLE
        ══════════════════════════════════════════ */
        .section-title { text-align:center; margin-bottom:4rem; }
        .section-title h2 {
            font-size:clamp(2rem,5vw,3.2rem);
            font-weight:800;
            margin-bottom:1rem;
            background:var(--primary-gradient);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            background-clip:text;
            position:relative;
        }
        .section-title h2::after {
            content:'';
            display:block;
            height:4px;
            width:0;
            background:var(--primary-gradient);
            margin:0.75rem auto 0;
            border-radius:2px;
            transition:width 1s cubic-bezier(0.4,0,0.2,1);
        }
        .section-title.in-view h2::after { width:80px; }
        .section-title p { font-size:1.15rem; color:#5a6076; max-width:600px; margin:0 auto; }

        /* ══════════════════════════════════════════
           FEATURES
        ══════════════════════════════════════════ */
        .features-section { padding:6.5rem 0; background:#f0eceb; }
        .feature-card {
            padding:2.5rem;
            background:white;
            border-radius:24px;
            box-shadow:0 10px 35px rgba(0,0,0,0.07);
            transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
            height:100%;
            border:1px solid rgba(0,0,0,0.05);
            position:relative;
            overflow:hidden;
        }
        .feature-card::before {
            content:'';
            position:absolute;
            top:0; left:0;
            width:100%; height:4px;
            background:var(--primary-gradient);
            transform:scaleX(0);
            transform-origin:left;
            transition:transform 0.4s ease;
        }
        .feature-card:hover::before { transform:scaleX(1); }
        .feature-card:hover { transform:translateY(-12px); box-shadow:0 22px 55px rgba(0,0,0,0.13); }
        .feature-icon {
            width:76px; height:76px;
            background:var(--secondary-gradient);
            border-radius:20px;
            display:flex;
            align-items:center;
            justify-content:center;
            margin:0 auto 1.5rem;
            font-size:1.9rem;
            color:var(--light-color);
            transition:all 0.4s ease;
            box-shadow:0 10px 28px rgba(24,31,78,0.22);
        }
        .feature-card:hover .feature-icon { transform:rotate(10deg) scale(1.1); }
        .feature-card h4 { font-weight:700; margin-bottom:0.75rem; color:#181f4e; font-size:1.12rem; }
        .feature-card p { color:#5a6076; line-height:1.75; font-size:0.94rem; }

        /* ══════════════════════════════════════════
           COURSES
        ══════════════════════════════════════════ */
        .courses-section { padding:6.5rem 0; background:linear-gradient(to bottom,#f3efee,#ece5e2); }
        .course-card {
            border-radius:22px;
            overflow:hidden;
            box-shadow:0 10px 32px rgba(0,0,0,0.09);
            transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
            height:100%;
            background:white;
            border:none;
        }
        .course-card:hover { transform:translateY(-12px) scale(1.02); box-shadow:0 22px 55px rgba(0,0,0,0.16); }
        .course-image { height:210px; object-fit:cover; width:100%; transition:transform 0.6s ease; }
        .course-card:hover .course-image { transform:scale(1.07); }
        .course-card .card-body { padding:1.5rem; }
        .course-card .card-title { font-weight:700; margin-bottom:0.65rem; color:#181f4e; font-size:1.08rem; }
        .course-card .card-text { color:#5a6076; font-size:0.92rem; line-height:1.65; margin-bottom:1rem; }

        /* ══════════════════════════════════════════
           ARTICLES
        ══════════════════════════════════════════ */
        .articles-section { padding:6.5rem 0; background:white; }
        .article-card {
            border-radius:22px;
            overflow:hidden;
            box-shadow:0 10px 32px rgba(0,0,0,0.08);
            transition:all 0.4s ease;
            height:100%;
            background:white;
        }
        .article-card:hover { transform:translateY(-10px); box-shadow:0 22px 55px rgba(0,0,0,0.14); }

        /* ══════════════════════════════════════════
           CTA
        ══════════════════════════════════════════ */
        .cta-section {
            padding:6rem 0;
            background:var(--primary-gradient);
            position:relative;
            overflow:hidden;
            text-align:center;
        }
        .cta-section::before {
            content:'';
            position:absolute;
            inset:-50%;
            background:
                radial-gradient(circle at 25% 50%,rgba(255,255,255,0.07) 0%,transparent 45%),
                radial-gradient(circle at 75% 50%,rgba(149,76,46,0.28) 0%,transparent 45%);
            animation:ctaPulse 10s ease-in-out infinite;
        }
        @keyframes ctaPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1) rotate(3deg)} }
        .cta-section h2 { color:#fff; font-size:clamp(1.8rem,4vw,3rem); font-weight:800; position:relative; z-index:1; }
        .cta-section p { color:rgba(255,255,255,0.82); font-size:1.1rem; position:relative; z-index:1; }
        .cta-btn {
            display:inline-flex;
            align-items:center;
            gap:0.5rem;
            background:#fff;
            color:var(--primary-color);
            padding:1rem 2.8rem;
            border-radius:50px;
            font-weight:700;
            font-size:1.05rem;
            text-decoration:none;
            position:relative;
            z-index:1;
            box-shadow:0 10px 32px rgba(0,0,0,0.2);
            transition:transform 0.3s ease,box-shadow 0.3s ease,color 0.3s ease;
        }
        .cta-btn:hover { transform:translateY(-4px) scale(1.04); box-shadow:0 20px 52px rgba(0,0,0,0.3); color:var(--secondary-color); }

        /* ══════════════════════════════════════════
           RESPONSIVE – Buttons & Reduced Motion
        ══════════════════════════════════════════ */
        @media (max-width:991px) {
            .hero-buttons { justify-content: center; }
            [dir="rtl"] .hero-buttons { justify-content: center; }
        }
        @media (max-width:767px) {
            .hero-buttons { flex-direction:column; align-items:center; }
            .btn-hero { width:100%; max-width:300px; justify-content:center; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
        }

        /* ══════════════════════════════════════════
           DESIGN POLISH — buttons · links · focus states
           Brand: navy #181f4e · rust #954c2e · periwinkle #4b5eaa · cream #f0eceb
        ══════════════════════════════════════════ */

        /* Reusable content pill button (replaces ad-hoc inline-styled buttons) */
        .btn-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.85rem 2.5rem;
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: 0.02em;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            text-decoration: none;
            color: var(--light-color);
            background: var(--primary-gradient);
            background-size: 180% 180%;
            background-position: 0% 50%;
            box-shadow: 0 10px 30px rgba(24,31,78,0.26);
            transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background-position .55s ease;
            will-change: transform;
        }
        .btn-pill:hover { color:#fff; transform: translateY(-3px); background-position: 100% 50%; box-shadow: 0 18px 44px rgba(24,31,78,0.38); }
        .btn-pill:active { transform: translateY(-1px); }
        .btn-pill i { font-size: 1.05em; }
        /* Full-width usage (w-100) centres its content */
        .btn-pill { justify-content: center; }
        /* Small variant — used on course cards */
        .btn-pill-sm { padding: 0.5rem 1.4rem; font-size: 0.85rem; box-shadow: 0 6px 18px rgba(24,31,78,0.22); }
        .btn-pill-sm:hover { box-shadow: 0 12px 28px rgba(24,31,78,0.32); }
        /* Disabled state */
        .btn-pill:disabled, .btn-pill.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; }

        /* Footer links: animated underline-grow on hover */
        .footer-landing a { position: relative; }
        .footer-landing a::after {
            content: ''; position: absolute; left: 0; bottom: -2px;
            width: 0; height: 1.5px; background: currentColor;
            transition: width .28s cubic-bezier(.4,0,.2,1);
        }
        [dir="rtl"] .footer-landing a::after { left: auto; right: 0; }
        .footer-landing a:hover::after { width: 100%; }

        /* Course cards read as clickable */
        .course-card, .course-card a { cursor: pointer; }

        /* ── Keyboard focus states (previously missing entirely) ── */
        /* Light surfaces → brand periwinkle ring */
        a:focus-visible,
        button:focus-visible,
        .btn-pill:focus-visible,
        .course-card:focus-visible,
        .s4u-nav.nav-scrolled .s4u-nav__link:focus-visible,
        .s4u-nav.nav-scrolled .s4u-nav__cta:focus-visible,
        .nav-hamburger:focus-visible,
        .lang-btn:focus-visible {
            outline: 3px solid var(--accent-color);
            outline-offset: 3px;
            border-radius: 10px;
        }
        /* Dark surfaces (hero, nav-dark, CTA band, footer, mobile menu) → cream ring */
        .hero-section a:focus-visible,
        .hero-section button:focus-visible,
        .btn-hero:focus-visible,
        .cta-section a:focus-visible,
        .cta-btn:focus-visible,
        .footer-landing a:focus-visible,
        .s4u-nav.nav-dark .s4u-nav__link:focus-visible,
        .s4u-nav.nav-dark .s4u-nav__cta:focus-visible,
        .nav-mobile-menu a:focus-visible,
        .nav-mobile-cta:focus-visible {
            outline: 3px solid var(--light-color);
            outline-offset: 3px;
            border-radius: 10px;
        }
        /* No ring for mouse/touch users */
        a:focus:not(:focus-visible),
        button:focus:not(:focus-visible) { outline: none; }

/* ── Blog: article-card link wrapper, read-more, category chips ── */
.article-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.article-card-link .card-title { color: var(--primary-color); transition: color .2s; }
.article-card-link:hover .card-title { color: var(--secondary-color); }
.article-readmore { font-size: .85rem; font-weight: 700; color: var(--accent-color); }
.blog-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.2rem; }
.blog-chip { padding: .4rem 1.1rem; border-radius: 50px; border: 1.5px solid rgba(24, 31, 78, .18); color: var(--primary-color); font-size: .85rem; font-weight: 600; text-decoration: none; transition: .2s; }
.blog-chip:hover { border-color: var(--primary-color); }
.blog-chip.active { background: var(--primary-gradient); color: var(--light-color); border-color: transparent; }
.blog-article-body { font-size: 1.05rem; line-height: 1.95; color: #3a3f55; }
.blog-article-body p { margin-bottom: 1.1rem; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; color: #6a7086; font-size: .9rem; }
.blog-meta i { color: var(--accent-color); }