/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
        :root {
            /* 🟢 PRIMARY — Sage Green (Wordmark) */
            --primary: #6BBF8E;
            /* main CTA buttons, active states, links */
            --primary-dark: #4a9e70;
            /* hover states, pressed */
            --primary-light: #a8dbbe;
            /* backgrounds, chips, badges */
            --primary-xlight: #eaf6ef;
            /* section backgrounds, card surfaces */
            --primary-pale: #f3fbf6;
            /* subtle alternating sections */

            /* 🔵 SECONDARY — Navy Blue (Human Icon) */
            --secondary: #2b4a8a;
            /* headings, nav logo, footer bg */
            --secondary-dark: #1a3a6b;
            /* footer, dark surfaces */
            --secondary-mid: #3d5fa3;
            /* subheadings, icon fills */
            --secondary-light: #d0dcf5;
            /* badge backgrounds, soft highlights */
            --secondary-xlight: #eef2fb;
            /* card hover states */

            /* ⭐ ACCENT — Cyan-Teal (Star Icon) */
            --accent: #5ab8c4;
            /* highlights, stat numbers, progress bars */
            --accent-light: #d6f0f3;
            /* tag backgrounds, notification chips */
            --accent-xlight: #edf9fa;
            /* subtle accents */

            /* ⚪ NEUTRALS — Clean whites & grays */
            --bg: #ffffff;
            --bg-alt: #f7faf8;
            /* very subtle green-tinted white */
            --surface: #f0f5f2;
            --border: #d4e6da;
            /* green-tinted borders */
            --border-soft: #e8f0eb;
            --text: #0f1f17;
            /* near-black with green undertone */
            --text-mid: #2e4a38;
            /* body text, descriptions */
            --text-muted: #6b8a74;
            /* captions, helper text */

            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --radius-xl: 32px;

            --shadow-sage: 0 12px 32px rgba(107, 191, 142, 0.1);
            --shadow-navy: 0 12px 32px rgba(43, 74, 138, 0.08);
            --glass: rgba(255, 255, 255, 0.75);
        }

        /* ── Floating Animation ── */
        @keyframes floating {
            0% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-15px) rotate(1deg);
            }

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

        .bg-shape {
            position: absolute;
            filter: blur(80px);
            z-index: -1;
            opacity: 0.4;
            animation: floating 8s ease-in-out infinite;
        }

        /* ══ RESET ══ */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            background: var(--bg);
            color: var(--text-mid);
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body.modal-open {
            overflow: hidden;
        }

        /* Friendly, responsive Vimeo modal */
        .vimeo-modal {
            position: fixed;
            inset: 0;
            z-index: 10010;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: rgba(10, 20, 30, 0.78);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .vimeo-modal.is-open {
            display: flex;
        }

        .vimeo-modal-card {
            position: relative;
            width: min(960px, 96vw);
            border-radius: 20px;
            padding: 0.9rem;
            background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
            box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(107, 191, 142, 0.2);
        }

        .vimeo-modal-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin: 0 3rem 0.5rem 0.2rem;
        }

        .vimeo-modal-close {
            position: absolute;
            top: 0.55rem;
            right: 0.55rem;
            width: 40px;
            height: 40px;
            border: 1px solid rgba(228, 62, 62, 0.4);
            border-radius: 999px;
            background: rgba(255, 79, 79, 0.12);
            color: #b91c1c;
            font-size: 1.9rem;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background 0.2s ease;
            z-index: 2;
        }

        .vimeo-modal-close:hover {
            transform: scale(1.05);
            background: rgba(255, 79, 79, 0.18);
        }

        .vimeo-modal-frame {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            border-radius: 14px;
            overflow: hidden;
            background: #0b1324;
            box-shadow: inset 0 0 0 1px rgba(107, 191, 142, 0.2);
        }

        .vimeo-modal-frame iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* ══════════════════════════════════════
           PREMIUM DESIGN SYSTEM (APPLE/OPENAI INSPIRED)
        ══════════════════════════════════════ */

        :root {
            /* Motion Easing */
            --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
            --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
            --spring: cubic-bezier(0.435, 0.02, 0.34, 1.4);

            /* Elevation & Depth */
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.02);
            --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -4px rgba(0, 0, 0, 0.02);
            --shadow-lg: 0 20px 25px -5px rgba(107, 191, 142, 0.08), 0 8px 10px -6px rgba(107, 191, 142, 0.04);
            --shadow-glow-cyan: 0 0 20px rgba(90, 184, 196, 0.3);
            --shadow-glow-violet: 0 0 20px rgba(139, 92, 246, 0.3);
            --shadow-glow-green: 0 0 20px rgba(107, 191, 142, 0.3);

            /* Glassmorphism */
            --glass-bg: rgba(255, 255, 255, 0.65);
            --glass-border: rgba(255, 255, 255, 0.4);
            --glass-blur: blur(14px);
        }

        /* Typography Refinement */
        h1,
        h2,
        h3,
        h4 {
            letter-spacing: -0.02em;
            font-weight: 800;
        }

        .eyebrow {
            letter-spacing: 0.2em;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.7rem;
            opacity: 0.8;
        }

        p {
            color: var(--text-muted);
            line-height: 1.7;
        }

        /* Glass Utility */
        .glass-card {
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-sm);
            transition: all 0.5s var(--ease-out-expo);
        }

        .glass-card:hover {
            border-color: rgba(107, 191, 142, 0.4);
            box-shadow: var(--shadow-lg);
        }

        /* ══════════════════════════════════════
           PREMIUM ENHANCEMENTS OVERLAYS
        ══════════════════════════════════════ */

        /* Math Layer Overlay */
        #math-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
            overflow: hidden;
        }

        /* Neural Overlay */
        #neural-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 999;
            opacity: 0.5;
            background: linear-gradient(135deg,
                    rgba(107, 191, 142, 0.01) 0%,
                    rgba(90, 184, 196, 0.01) 100%);
            mix-blend-mode: screen;
        }

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

        /* Entrance Animations */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1.2s var(--ease-out-expo),
                transform 1.2s var(--ease-out-expo);
            will-change: transform, opacity;
        }

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

        /* Staggered Children Logic */
        .stagger-container.active .reveal {
            opacity: 1;
            transform: translateY(0);
        }

        /* Button Enhancements */
        .btn-green,
        .btn-hero,
        .btn-white,
        .btn-hero-outline {
            position: relative;
            overflow: hidden;
            transition: all 0.4s var(--spring) !important;
            transform-origin: center;
        }

        .btn-green:hover {
            transform: scale(1.05);
            box-shadow: var(--shadow-glow-green);
        }

        .btn-hero:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: var(--shadow-glow-cyan);
        }

        /* Loading Shimmer Effect */
        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }

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

        .shimmer-bg {
            background: linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.4) 50%,
                    rgba(255, 255, 255, 0) 100%);
            background-size: 200% 100%;
            animation: shimmer 2s infinite linear;
        }

        /* Click Ripple */
        .ripple {
            position: absolute;
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            transform: scale(0);
            animation: ripple-effect 0.8s ease-out;
            pointer-events: none;
            z-index: 5;
        }

        @keyframes ripple-effect {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        /* Premium Icon Pulse */
        .nav-link:hover i,
        .btn:hover [data-lucide] {
            animation: icon-pulse 0.6s var(--spring);
        }

        @keyframes icon-pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2) rotate(8deg);
            }

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

        /* ══════════════════════════════════════
           PREMIUM MICRO-ANIMATIONS
        ══════════════════════════════════════ */

        /* Button Sweep Effect */
        .btn-green,
        .btn-hero,
        .btn-white,
        .btn-hero-outline {
            position: relative;
            overflow: hidden;
        }

        .btn-green::after,
        .btn-hero::after,
        .btn-white::after,
        .btn-hero-outline::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 50%;
            height: 200%;
            background: linear-gradient(to right,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0) 100%);
            transform: rotate(25deg);
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .btn-green:hover::after,
        .btn-hero:hover::after,
        .btn-white:hover::after,
        .btn-hero-outline:hover::after {
            left: 150%;
        }

        /* ══════════════════════════════════════
           ADVANCED CARD LIFT & GLOW EFFECTS
        ══════════════════════════════════════ */

        /* Cards with enhanced hover lift */
        .bn-card,
        .g-card,
        .why-card,
        .robo-card,
        .eco-node-item,
        .os-node-card,
        .eco-node,
        .glass-card {
            will-change: transform, box-shadow;
            transition: all 0.5s var(--ease-out-expo);
        }

        /* Lift on Hover with Sophisticated Glow */
        .bn-card:hover,
        .g-card:hover,
        .why-card:hover,
        .robo-card:hover,
        .os-node-card:hover,
        .eco-node:hover {
            transform: translateY(-8px);
            box-shadow:
                0 20px 40px rgba(107, 191, 142, 0.15),
                0 0 30px rgba(107, 191, 142, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        /* Even more elegant on glass cards */
        .glass-card {
            border-color: rgba(107, 191, 142, 0.2);
        }

        .glass-card:hover {
            transform: translateY(-6px);
            border-color: rgba(107, 191, 142, 0.4);
            box-shadow:
                0 20px 40px rgba(107, 191, 142, 0.12),
                0 0 20px rgba(90, 184, 196, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        /* ══════════════════════════════════════
           PREMIUM LINK ANIMATIONS
        ══════════════════════════════════════ */

        /* Navigation and text links with underline reveal */
        a,
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }

        a:not(.btn-green):not(.btn-hero):not(.btn-white):not(.btn-hero-outline):not([class*="chip"]):not(.trust-chip) {
            position: relative;
        }

        a:not(.btn-green):not(.btn-hero):not(.btn-white):not(.btn-hero-outline):not([class*="chip"]):not(.trust-chip)::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            transition: width 0.4s var(--spring);
            will-change: width;
        }

        a:not(.btn-green):not(.btn-hero):not(.btn-white):not(.btn-hero-outline):not([class*="chip"]):not(.trust-chip):hover::after {
            width: 100%;
        }

        /* ══════════════════════════════════════
           REFINED GLASSMORPHISM BORDERS
        ══════════════════════════════════════ */

        .glass-card {
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.7);
            position: relative;
            overflow: hidden;
        }

        /* Subtle inner glow for depth */
        .glass-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            border: 1px solid rgba(255, 255, 255, 0.8);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .glass-card:hover::before {
            opacity: 1;
        }

        /* ══════════════════════════════════════
           ENHANCED ICON ANIMATIONS
        ══════════════════════════════════════ */

        /* Consistent icon animations across all components */
        [data-lucide] {
            transition: transform 0.3s var(--spring),
                color 0.3s ease,
                filter 0.3s ease;
            will-change: transform;
        }

        /* Icon glow on interaction */
        .os-node-card:hover [data-lucide],
        .bn-card:hover [data-lucide],
        .eco-node:hover [data-lucide],
        .g-card:hover [data-lucide],
        .why-card:hover [data-lucide],
        .robo-card:hover [data-lucide] {
            transform: scale(1.25) rotate(6deg);
            filter: drop-shadow(0 0 8px rgba(107, 191, 142, 0.4));
            color: var(--primary);
        }

        /* Trust chips icon animation */
        .trust-chip:hover [data-lucide] {
            transform: scale(1.15) rotate(-8deg);
        }

        /* ══════════════════════════════════════
           SCROLL TRIGGERED LIFT & GLOW
        ══════════════════════════════════════ */

        /* Cards gain enhanced glow when revealed */
        .reveal.active {
            animation: entrance-glow 0.8s var(--ease-out-expo) forwards;
        }

        @keyframes entrance-glow {
            0% {
                opacity: 0;
                filter: drop-shadow(0 0 0 rgba(107, 191, 142, 0));
            }

            100% {
                opacity: 1;
                filter: drop-shadow(0 0 8px rgba(107, 191, 142, 0.15));
            }
        }

        /* ══════════════════════════════════════
           BUTTON GLOW ENHANCEMENT
        ══════════════════════════════════════ */

        .btn-green:hover,
        .btn-hero:hover {
            box-shadow:
                0 20px 40px rgba(107, 191, 142, 0.25),
                0 0 20px rgba(107, 191, 142, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        .btn-hero-outline:hover {
            box-shadow:
                0 12px 24px rgba(90, 184, 196, 0.2),
                0 0 16px rgba(90, 184, 196, 0.15);
        }

        /* Typography: Premium Gradients */
        .hero-h1 em,
        .section-title em,
        .os-title em {
            background: linear-gradient(135deg, var(--primary), var(--accent), #8b5cf6);
            /* Added Violet for AI feel */
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
            animation: gradient-shift 6s ease infinite alternate;
            background-size: 200% 200%;
            filter: drop-shadow(0 0 10px rgba(107, 191, 142, 0.2));
        }

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

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

        /* ══════════════════════════════════════
           CINEMATIC IMAGE MOTION
        ══════════════════════════════════════ */

        /* Continuous "Breathing" Animation */
        @keyframes image-float {
            0% {
                transform: translateY(0);
            }

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

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

        @keyframes image-float-delayed {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(15px);
            }

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

        .hero-photo-main,
        .adaptive-main-img,
        .os-visual-frame {
            animation: image-float 6s ease-in-out infinite;
        }

        .hero-photo-sec,
        .photo-frame {
            animation: image-float-delayed 7s ease-in-out infinite;
        }

        /* Image Hover & Perspective Tilt */
        .hero-photo-main,
        .hero-photo-sec,
        .adaptive-product-showcase,
        .os-visual-frame,
        .photo-frame {
            perspective: 1200px;
            transition: transform 0.8s var(--ease-out-expo),
                filter 0.8s var(--ease-out-expo),
                box-shadow 0.8s var(--ease-out-expo);
            will-change: transform;
            position: relative;
        }

        /* Subtle glow on hover */
        .hero-photo-main:hover,
        .hero-photo-sec:hover,
        .adaptive-product-showcase:hover,
        .os-visual-frame:hover,
        .photo-frame:hover {
            filter: drop-shadow(0 0 30px rgba(107, 191, 142, 0.25));
        }

        .hero-photo-main img,
        .hero-photo-sec img,
        .adaptive-main-img,
        .os-visual-frame img,
        .photo-frame img {
            transition: transform 1.2s var(--ease-out-expo) !important;
            will-change: transform;
        }

        .hero-photo-main:hover img,
        .hero-photo-sec:hover img,
        .adaptive-product-showcase:hover .adaptive-main-img,
        .os-visual-frame:hover img,
        .photo-frame:hover img {
            transform: scale(1.08) rotateZ(1deg);
            filter: drop-shadow(0 0 20px rgba(107, 191, 142, 0.2));
        }

        /* Entry Rotation (Override for images) */
        .hero-photo-main.reveal,
        .hero-photo-sec.reveal,
        .adaptive-main-img.reveal,
        .os-visual-frame.reveal {
            transform: translateY(40px);
            opacity: 0;
        }

        .hero-photo-main.reveal.active,
        .hero-photo-sec.reveal.active,
        .adaptive-main-img.reveal.active,
        .os-visual-frame.reveal.active {
            transform: translateY(0);
            opacity: 1;
        }

        /* Icon system micro-animations */
        [data-lucide] {
            transition: transform 0.3s var(--spring), color 0.3s ease;
        }

        /* Custom Hover Effects for Cards with Icons */
        .os-node-card:hover [data-lucide],
        .bn-card:hover [data-lucide],
        .eco-node:hover [data-lucide] {
            transform: scale(1.2) rotate(8deg);
        }

        /* Float math element style */
        .math-symbol {
            position: absolute;
            color: var(--secondary);
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            font-weight: 400;
            opacity: 0.07;
            user-select: none;
            transition: transform 0.1s ease-out, opacity 0.3s ease, color 0.5s ease;
            will-change: transform, opacity;
            mix-blend-mode: multiply;
            text-shadow: 0 0 20px rgba(107, 191, 142, 0.05);
            pointer-events: none;
        }

        /* Gentle emphasis on math symbols near viewport center */
        .math-symbol:hover {
            opacity: 0.2;
            filter: drop-shadow(0 0 8px rgba(107, 191, 142, 0.1));
        }

        /* ══════════════════════════════════════
           DYNAMIC MATH SYMBOL ANIMATIONS
        ══════════════════════════════════════ */

        /* Base float animation */
        @keyframes math-float {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.12;
            }

            25% {
                opacity: 0.15;
            }

            50% {
                transform: translateY(-20px) rotate(5deg);
                opacity: 0.12;
            }

            75% {
                opacity: 0.1;
            }

            100% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.12;
            }
        }

        /* Complex orbital motion */
        @keyframes math-orbit {
            0% {
                transform: translateX(0) translateY(0) rotate(0deg) scale(1);
            }

            25% {
                transform: translateX(30px) translateY(-20px) rotate(45deg) scale(1.05);
            }

            50% {
                transform: translateX(0) translateY(-40px) rotate(180deg) scale(1);
            }

            75% {
                transform: translateX(-30px) translateY(-20px) rotate(270deg) scale(1.05);
            }

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

        /* Spiral upward motion */
        @keyframes math-spiral {
            0% {
                transform: translateY(0) translateX(0) rotate(0deg);
            }

            50% {
                transform: translateY(-30px) translateX(20px) rotate(180deg);
            }

            100% {
                transform: translateY(0) translateX(0) rotate(360deg);
            }
        }

        /* Gentle pendulum sway */
        @keyframes math-sway {
            0% {
                transform: translateX(0) rotateZ(0deg);
            }

            25% {
                transform: translateX(25px) rotateZ(8deg);
            }

            50% {
                transform: translateX(0) rotateZ(0deg);
            }

            75% {
                transform: translateX(-25px) rotateZ(-8deg);
            }

            100% {
                transform: translateX(0) rotateZ(0deg);
            }
        }

        /* Breathing pulse */
        @keyframes math-breathe {
            0% {
                transform: scale(1) translateY(0);
                opacity: 0.10;
            }

            50% {
                transform: scale(1.15) translateY(-10px);
                opacity: 0.18;
            }

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

        /* Light background variant - very subtle and clear */
        .math-symbol.light-bg {
            color: rgba(107, 191, 142, 0.2);
            opacity: 0.06;
            mix-blend-mode: screen;
            font-weight: 300;
        }

        .math-symbol.light-bg:hover {
            opacity: 0.12;
            color: rgba(107, 191, 142, 0.35);
        }

        /* Dark background variant - more visible */
        .math-symbol.dark-bg {
            color: rgba(255, 255, 255, 0.35);
            opacity: 0.18;
            mix-blend-mode: screen;
        }

        .math-symbol.dark-bg:hover {
            opacity: 0.28;
            color: rgba(255, 255, 255, 0.55);
        }

        /* Neural Overlay */
        #neural-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 999;
            opacity: 0.5;
            background: linear-gradient(135deg,
                    rgba(107, 191, 142, 0.01) 0%,
                    rgba(90, 184, 196, 0.01) 100%);
            mix-blend-mode: screen;
        }

        /* ══════════════════════════════════════
           PREMIUM MICRO-ANIMATIONS
        ══════════════════════════════════════ */

        /* Button Sweep Effect */
        .btn-green,
        .btn-hero,
        .btn-white {
            position: relative;
            overflow: hidden;
        }

        .btn-green::after,
        .btn-hero::after,
        .btn-white::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 50%;
            height: 200%;
            background: linear-gradient(to right,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0) 100%);
            transform: rotate(25deg);
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .btn-green:hover::after,
        .btn-hero:hover::after,
        .btn-white:hover::after {
            left: 150%;
        }

        /* Card Enhancements */
        .bn-card,
        .g-card,
        .why-card,
        .robo-card,
        .os-node,
        .eco-node,
        .os-node-card {
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
        }

        .bn-card:hover,
        .g-card:hover,
        .why-card:hover,
        .robo-card:hover,
        .os-node:hover,
        .eco-node:hover,
        .os-node-card:hover {
            transform: translateY(-12px) scale(1.02) !important;
            box-shadow: 0 30px 60px rgba(107, 191, 142, 0.15), 0 0 20px rgba(107, 191, 142, 0.05) !important;
            border-color: var(--primary-light) !important;
        }

        /* Glassmorphism Refinement */
        .glass-premium {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
        }

        /* Typography: Gradient Titles */
        .hero-h1 em,
        .section-title em,
        .os-title em {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
            animation: gradient-shift 5s ease infinite alternate;
            background-size: 200% 200%;
        }

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

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

        /* Floating Math Animation */
        @keyframes math-float {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.12;
            }

            25% {
                opacity: 0.15;
            }

            50% {
                transform: translateY(-20px) rotate(5deg);
                opacity: 0.12;
            }

            75% {
                opacity: 0.1;
            }

            100% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.12;
            }
        }

        /* ══════════════════════════════════════
           ADVANCED SCROLL ANIMATIONS
        ══════════════════════════════════════ */

        /* Cards fade in with subtle lift on scroll reveal */
        @keyframes scroll-reveal-lift {
            0% {
                opacity: 0;
                transform: translateY(40px);
                filter: blur(8px);
            }

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

        /* Section titles reveal with gradient animation */
        @keyframes title-reveal {
            0% {
                opacity: 0;
                transform: translateY(20px) scaleX(0.9);
            }

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

        img {
            display: block;
            max-width: 100%;
        }

        /* ══ NAV ══ */
        nav {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--border-soft);
            padding: 0 4rem;
            height: 85px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--primary);
            letter-spacing: -0.04em;
            text-decoration: none;
        }

        .logo img {
            width: 120px;
            height: auto;
        }

        .logo-leaf {
            width: 34px;
            height: 34px;
            background: var(--primary);
            border-radius: 50% 50% 50% 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1rem;
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 2.5rem;
        }

        .nav-links a {
            color: var(--text-mid);
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            transition: color .25s;
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .btn-ghost-nav {
            color: var(--primary);
            font-weight: 700;
            font-size: 0.85rem;
            border: 2px solid var(--primary);
            border-radius: 100px;
            padding: .6rem 1.4rem;
            background: transparent;
            cursor: pointer;
            text-decoration: none;
            transition: all .25s;
        }

        .btn-ghost-nav:hover {
            background: var(--primary-xlight);
            transform: translateY(-2px);
        }

        .btn-green {
            background: var(--primary);
            color: #fff;
            font-weight: 700;
            font-size: 0.85rem;
            border: none;
            border-radius: 100px;
            padding: .65rem 1.6rem;
            cursor: pointer;
            text-decoration: none;
            transition: all .25s;
            display: inline-block;
        }

        .btn-green:hover {
            background: var(--primary-dark);
            box-shadow: var(--shadow-sage);
            transform: translateY(-2px);
        }

        /* ══ SECTION HELPERS ══ */
        .section {
            padding: 10rem 0;
        }

        .section-alt {
            background: var(--bg-alt);
        }

        .section-green {
            background: var(--primary-pale);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 4rem;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }

        .eyebrow::before {
            content: '';
            width: 24px;
            height: 2px;
            background: var(--primary);
            border-radius: 2px;
        }

        h2.section-title {
            font-size: clamp(2.2rem, 4vw, 3.2rem);
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.04em;
            color: var(--secondary);
        }

        h2.section-title em {
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            color: var(--primary);
        }

        .section-desc {
            color: var(--text-muted);
            font-size: 1.05rem;
            line-height: 1.7;
            max-width: 580px;
            margin-top: 1rem;
            font-weight: 400;
        }

        .tag {
            display: inline-block;
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            padding: .3rem .8rem;
            border-radius: 100px;
        }

        .tag-green {
            background: var(--primary-light);
            color: var(--primary-dark);
        }

        .tag-teal {
            background: var(--accent-light);
            color: var(--accent);
        }

        .tag-amber {
            background: var(--secondary-light);
            color: var(--secondary);
        }

        /* ══ REVEAL ══ */
        .reveal {
            opacity: 0;
            transform: translateY(26px);
            transition: opacity .7s ease, transform .7s ease;
        }

        .reveal.in {
            opacity: 1;
            transform: none;
        }

        .reveal-delay-1 {
            transition-delay: .1s;
        }

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

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

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

        /* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
        #hero {
            background: var(--primary-pale);
            padding-top: 0;
            overflow: hidden;
            position: relative;
        }

        /* subtle primary pattern top-right */
        #hero::before {
            content: '';
            position: absolute;
            top: -80px;
            right: -80px;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, var(--primary-light) 0%, transparent 65%);
            border-radius: 50%;
            opacity: 0.15;
            pointer-events: none;
        }

        #hero::after {
            content: '';
            position: absolute;
            bottom: -60px;
            left: -60px;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, var(--primary-xlight) 0%, transparent 70%);
            border-radius: 50%;
            opacity: 0.2;
            pointer-events: none;
        }

        .hero-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
            min-height: calc(100vh - 85px);
            padding: 5rem 0;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            background: var(--primary-xlight);
            border: 1px solid var(--primary-light);
            color: var(--primary-dark);
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            padding: .5rem 1.25rem;
            border-radius: 100px;
            margin-bottom: 2rem;
        }

        .hero-badge .ping {
            width: 8px;
            height: 8px;
            background: var(--primary);
            border-radius: 50%;
            animation: ping 2s ease infinite;
        }

        .hero-h1 {
            font-size: clamp(2.1rem, 4.5vw, 3.4rem);
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.05em;
            color: var(--secondary);
        }

        .hero-accent {
            background: linear-gradient(135deg, var(--primary), var(--secondary-mid));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
        }

        .hero-h1 em {
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            color: var(--primary);
            position: relative;
            z-index: 1;
        }

        .hero-h1 em::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: -2px;
            right: -2px;
            height: 12px;
            background: var(--primary-pale);
            border-bottom: 2px solid var(--primary-light);
            z-index: -1;
            opacity: 0.8;
            border-radius: 2px;
        }

        .hero-sub {
            color: var(--text-muted);
            font-size: 1.15rem;
            line-height: 1.7;
            margin-top: 1.5rem;
            max-width: 520px;
            font-weight: 400;
        }

        .hero-actions {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
            margin-top: 3rem;
        }

        .btn-hero {
            background: var(--primary);
            color: #fff;
            font-weight: 700;
            font-size: .95rem;
            padding: 1rem 2.2rem;
            border-radius: 100px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            transition: all .3s;
        }

        .btn-hero:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: var(--shadow-sage);
        }

        .btn-hero-outline {
            background: transparent;
            color: var(--primary);
            font-weight: 700;
            font-size: .95rem;
            padding: 1rem 2.2rem;
            border-radius: 100px;
            border: 2px solid var(--primary);
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            transition: all .3s;
        }

        .btn-hero-outline:hover {
            background: var(--primary-xlight);
            transform: translateY(-3px);
        }

        .hero-trust {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-top: 3.5rem;
            flex-wrap: wrap;
        }

        .trust-chip {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-size: .8rem;
            font-weight: 600;
            color: var(--text-mid);
        }

        .trust-chip .check {
            width: 20px;
            height: 20px;
            background: var(--primary-xlight);
            border: 1px solid var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .65rem;
            color: var(--primary-dark);
        }

        /* ── HERO VISUAL ── */
        .hero-visual {
            position: relative;
            height: 580px;
        }

        .hero-photo-main {
            position: absolute;
            top: 0;
            left: 20px;
            right: 0;
            height: 420px;
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-navy);
            border: 1px solid var(--border);
        }

        .hero-photo-main::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(rgba(43, 74, 138, 0.1), transparent);
            pointer-events: none;
        }

        .hero-photo-main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-photo-sec {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 250px;
            height: 220px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sage);
            border: 6px solid #fff;
        }

        .hero-photo-sec img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-stat-card {
            position: absolute;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 1.25rem 1.5rem;
            box-shadow: var(--shadow-sage);
            min-width: 180px;
            z-index: 5;
        }

        .hsc-1 {
            top: 40px;
            right: -30px;
        }

        .hsc-2 {
            bottom: 140px;
            right: 20px;
        }

        .hsc-val {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary);
            line-height: 1;
        }

        .hsc-lbl {
            font-size: .72rem;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: .08em;
            margin-top: .4rem;
            text-transform: uppercase;
        }

        .dot-grid {
            position: absolute;
            bottom: -20px;
            right: -30px;
            width: 120px;
            height: 120px;
            background-image: radial-gradient(circle, var(--primary-light) 1.5px, transparent 1.5px);
            background-size: 14px 14px;
            opacity: .4;
            z-index: 0;
            pointer-events: none;
        }

        /* ══════════════════════════════════════
   STATS BAND
══════════════════════════════════════ */
        .stats-band {
            background: var(--secondary);
            padding: 4rem 0;
        }

        .stats-row {
            display: flex;
            align-items: center;
            justify-content: space-around;
            gap: 2rem;
        }

        .stat-item {
            text-align: center;
        }

        .stat-val {
            font-size: 2.8rem;
            font-weight: 800;
            color: #fff;
            line-height: 1;
            letter-spacing: -0.04em;
        }

        .stat-lbl {
            font-size: .8rem;
            font-weight: 600;
            color: rgba(255, 255, 255, .65);
            margin-top: .5rem;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .stat-divider {
            width: 1px;
            height: 50px;
            background: rgba(255, 255, 255, .15);
        }

        /* ══════════════════════════════════════
   ECOSYSTEM — LIVING NETWORK
══════════════════════════════════════ */
        .eco-network-container {
            position: relative;
            height: 700px;
            width: 100%;
            margin-top: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: 1000px;
        }

        .eco-network-visual {
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
        }

        /* connections layer */
        .eco-svg-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .eco-line {
            stroke: var(--primary-light);
            stroke-width: 2;
            fill: none;
            stroke-dasharray: 8, 8;
            opacity: 0.4;
            transition: all 0.5s ease;
        }

        .eco-node-active .eco-line {
            stroke: var(--primary);
            stroke-width: 3;
            stroke-dasharray: none;
            opacity: 1;
        }

        /* particles */
        .particle {
            fill: var(--accent);
            filter: blur(1px);
        }

        /* central core */
        .central-core {
            position: absolute;
            z-index: 10;
            width: 180px;
            height: 180px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 50px rgba(107, 191, 142, 0.2), inset 0 0 20px rgba(107, 191, 142, 0.1);
            border: 1px solid var(--primary-light);
            transition: all 0.5s ease;
        }

        .core-inner {
            width: 110px;
            height: 110px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 2rem;
            animation: core-pulse 4s ease-in-out infinite;
            box-shadow: 0 10px 30px rgba(46, 125, 79, 0.3);
        }

        @keyframes core-pulse {

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

            50% {
                transform: scale(1.1);
                filter: brightness(1.1);
            }
        }

        .core-rings {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid var(--primary-light);
            border-radius: 50%;
            opacity: 0;
            animation: ring-expand 4s linear infinite;
        }

        .ring-1 {
            animation-delay: 0s;
        }

        .ring-2 {
            animation-delay: 1.3s;
        }

        .ring-3 {
            animation-delay: 2.6s;
        }

        @keyframes ring-expand {
            0% {
                width: 180px;
                height: 180px;
                opacity: 0.6;
            }

            100% {
                width: 400px;
                height: 400px;
                opacity: 0;
            }
        }

        /* nodes */
        .eco-node {
            position: absolute;
            z-index: 20;
            width: 200px;
            padding: 1.2rem;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid var(--border-soft);
            border-radius: var(--radius-md);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            cursor: pointer;
            box-shadow: var(--shadow-sage);
        }

        .eco-node:hover {
            transform: translate(-50%, -60%) scale(1.08) !important;
            background: #fff;
            border-color: var(--primary);
            box-shadow: 0 20px 40px rgba(107, 191, 142, 0.2);
            z-index: 30;
        }

        /* ══════════════════════════════════════
   ADAPTIVE FLOW VISUAL
══════════════════════════════════════ */
        .adaptive-flow-container {
            margin: 5rem 0 6rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            position: relative;
            padding: 4rem 3rem;
            background: var(--bg-alt);
            border-radius: var(--radius-xl);
            border: 1.5px solid var(--border-soft);
            overflow: visible;
        }

        .adaptive-flow-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(107, 191, 142, 0.05), transparent 70%);
            pointer-events: none;
        }

        .af-zone {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            z-index: 2;
        }

        .af-label {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 1.5rem;
        }

        .af-card-upload {
            background: #fff;
            border-radius: var(--radius-md);
            padding: 2rem;
            box-shadow: var(--shadow-sage);
            border: 2px dashed var(--primary-light);
            animation: bounce-slow 4s ease-in-out infinite;
        }

        @keyframes bounce-slow {

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

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

        .af-engine-box {
            position: relative;
            width: 140px;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .af-engine {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, var(--secondary), var(--primary));
            border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            animation: morph-ai 8s ease-in-out infinite;
            box-shadow: 0 15px 35px rgba(26, 58, 107, 0.15);
            z-index: 2;
        }

        @keyframes morph-ai {
            0% {
                border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
            }

            33% {
                border-radius: 62% 38% 37% 63% / 54% 44% 56% 46%;
            }

            66% {
                border-radius: 41% 59% 49% 51% / 59% 51% 49% 41%;
            }

            100% {
                border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
            }
        }

        .af-engine-glow {
            position: absolute;
            inset: -20px;
            background: radial-gradient(circle, rgba(107, 191, 142, 0.2), transparent 70%);
            animation: pulse-glow 3s ease-in-out infinite;
        }

        @keyframes pulse-glow {

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

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

        .af-outputs {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            width: 100%;
            max-width: 260px;
        }

        .output-chip {
            background: #fff;
            border-radius: 12px;
            padding: 0.8rem 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            box-shadow: var(--shadow-navy);
            border: 1px solid var(--border-soft);
            transition: all 0.3s ease;
            position: relative;
            cursor: pointer;
        }

        .output-chip:hover {
            transform: translateY(-2px) translateX(5px);
            border-color: var(--primary);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        /* Premium Glassmorphism Tooltip */
        .chip-tooltip {
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            width: 250px;
            padding: 1rem 1.25rem;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            color: rgba(255, 255, 255, 0.95);
            font-size: 0.75rem;
            line-height: 1.6;
            text-align: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 1000;
            font-weight: 500;
        }

        .chip-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 8px;
            border-style: solid;
            border-color: rgba(15, 23, 42, 0.9) transparent transparent transparent;
        }

        .output-chip:hover .chip-tooltip,
        .output-chip.active .chip-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .oc-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .af-connector-line {
            position: absolute;
            top: 50%;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-light), var(--accent-light));
            opacity: 0.2;
            z-index: 1;
        }

        .af-c1 {
            left: 28%;
            width: 14%;
            transform: translateY(-50%);
        }

        .af-c2 {
            right: 28%;
            width: 14%;
            transform: translateY(-50%);
        }

        /* Product Showcase Styling */
        .product-showcase-container {
            margin-top: 6rem;
            max-width: 1100px !important;
        }

        .adaptive-product-showcase {
            position: relative;
            background: rgba(255, 255, 255, 0.4);
            padding: 1.5rem;
            border-radius: 32px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(20px);
            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .adaptive-product-showcase:hover {
            transform: translateY(-10px);
            box-shadow: 0 50px 100px rgba(107, 191, 142, 0.15);
            border-color: var(--primary-light);
        }

        .adaptive-main-img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        /* ══════════════════════════════════════
           PSYCHO SECTION ENHANCEMENTS
        ══════════════════════════════════════ */
        .psy-visual-wrapper {
            position: relative;
            border-radius: var(--radius-xl);
            overflow: visible;
            max-width: 1000px;
            margin: 0 auto;
        }

        .psycho-stacked-layout {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 4rem;
        }

        .psycho-text-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .photo-frame {
            width: 100%;
            height: 520px;
            border-radius: 40px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.5);
            background: var(--bg-alt);
        }

        .photo-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .psy-visual-wrapper:hover .photo-frame img {
            transform: scale(1.08);
        }

        .assistant-overlay {
            position: absolute;
            top: -40px;
            right: -20px;
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 1.5rem;
            border-radius: var(--radius-lg);
            box-shadow: 0 25px 50px rgba(43, 74, 138, 0.12);
            width: 300px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            z-index: 5;
            animation: floating 6s ease-in-out infinite;
        }

        /* Re-adding deleted helper styles */
        .stat-highlight-box {
            background: white;
            padding: 2.5rem;
            border-radius: var(--radius-xl);
            display: flex;
            gap: 2rem;
            align-items: center;
            margin: 2.5rem auto;
            border: 1px solid var(--border-soft);
            position: relative;
            overflow: hidden;
            max-width: 650px;
            text-align: left;
            box-shadow: var(--shadow-sage);
        }

        .stat-highlight-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(180deg, var(--accent), var(--secondary));
        }

        .shb-number {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--secondary);
            font-family: 'Instrument Serif', serif;
            font-style: italic;
        }

        .shb-text {
            font-size: 0.95rem;
            color: var(--secondary-mid);
            line-height: 1.6;
            font-weight: 500;
        }

        .shb-source {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .wb-chips {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin: 2rem auto 0;
        }

        .wb-chip {
            background: #fff;
            padding: 0.9rem 1.4rem;
            border-radius: 100px;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--secondary);
            box-shadow: var(--shadow-navy);
            border: 1px solid var(--border-soft);
            transition: all 0.3s ease;
        }

        .wb-chip:hover {
            transform: translateY(-3px);
            border-color: var(--accent);
        }

        .wbc-icon {
            color: var(--accent);
        }

        .mood-tracker {
            position: absolute;
            bottom: -30px;
            left: 40px;
            background: #fff;
            padding: 1.5rem;
            border-radius: var(--radius-lg);
            box-shadow: 0 20px 40px rgba(107, 191, 142, 0.15);
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            width: 240px;
            z-index: 5;
        }

        /* ══════════════════════════════════════
           ORIENTATION BENTO & VISUALS
        ══════════════════════════════════════ */
        .bento-new {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto auto;
            gap: 1.5rem;
            margin-top: 4rem;
        }

        .bn-card {
            background: #fff;
            border-radius: var(--radius-xl);
            padding: 2.5rem;
            border: 1px solid var(--border-soft);
            transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .bn-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-sage);
            border-color: var(--primary-light);
        }

        .bn-card-highlight {
            grid-column: span 2;
            background: var(--secondary);
            color: #fff;
            border: none;
        }

        .bn-card-highlight .bn-name {
            color: #fff;
        }

        .bn-card-highlight .bn-desc {
            color: rgba(255, 255, 255, 0.7);
        }

        .bn-icon-box {
            width: 54px;
            height: 54px;
            background: var(--bg-alt);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 2rem;
            color: var(--primary);
            transition: all 0.3s ease;
        }

        .bn-card:hover .bn-icon-box {
            background: var(--primary);
            color: #fff;
            transform: scale(1.1) rotate(5deg);
        }

        .bn-name {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--secondary);
            margin-bottom: 0.75rem;
        }

        .bn-desc {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .bn-tag {
            display: inline-flex;
            padding: 0.4rem 0.8rem;
            background: var(--primary-pale);
            color: var(--primary-dark);
            border-radius: 100px;
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .bn-card-highlight .bn-tag {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        /* AI Path Visualization in Highlight Card */
        .ai-orientation-visual {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 45%;
            background: radial-gradient(circle at 70% 50%, rgba(107, 191, 142, 0.15), transparent 70%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .path-svg {
            width: 100%;
            height: 100%;
            stroke-dasharray: 400;
            stroke-dashoffset: 400;
            animation: draw-path 4s ease forwards infinite;
        }

        @keyframes draw-path {
            to {
                stroke-dashoffset: 0;
            }
        }

        .student-core {
            position: absolute;
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(255, 255, 255, 0.2);
            z-index: 5;
        }

        .uncertainty-mark {
            position: absolute;
            top: -25px;
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--accent);
            animation: float-q 3s ease-in-out infinite;
        }

        @keyframes float-q {

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

            50% {
                transform: translateY(-10px) scale(1.2);
                opacity: 1;
            }
        }

        .path-destination {
            position: absolute;
            padding: 4px 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
            font-size: 0.6rem;
            color: rgba(255, 255, 255, 0.4);
            white-space: nowrap;
        }

        .dest-active {
            color: var(--primary);
            background: rgba(107, 191, 142, 0.1);
            border: 1px solid var(--primary);
            box-shadow: 0 0 15px var(--primary);
        }

        .mood-bar {
            height: 6px;
            background: var(--bg-alt);
            border-radius: 10px;
            overflow: hidden;
        }

        .mood-fill {
            height: 100%;
            background: var(--primary);
            width: 75%;
        }

        .eco-node-icon {
            width: 48px;
            height: 48px;
            background: var(--primary-xlight);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.8rem;
            color: var(--primary-dark);
            transition: all 0.3s ease;
        }

        .eco-node:hover .eco-node-icon {
            background: var(--primary);
            color: #fff;
            transform: rotateY(180deg);
        }

        .eco-node-name {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--secondary);
            margin-bottom: 0.4rem;
        }

        .eco-node-desc {
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.5;
            opacity: 0;
            height: 0;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .eco-node:hover .eco-node-desc {
            opacity: 1;
            height: auto;
            margin-top: 0.5rem;
        }

        /* node positions (will be calculated or hardcoded for accuracy) */
        /* Center is 50%, 50% */
        /* radius around 280px */
        .node-1 {
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
        }

        /* students top */
        .node-2 {
            top: 38%;
            left: 85%;
            transform: translate(-50%, -50%);
        }

        /* professors right */
        .node-3 {
            top: 82%;
            left: 72%;
            transform: translate(-50%, -50%);
        }

        /* parents bot-right */
        .node-4 {
            top: 82%;
            left: 28%;
            transform: translate(-50%, -50%);
        }

        /* schools bot-left */
        .node-5 {
            top: 38%;
            left: 15%;
            transform: translate(-50%, -50%);
        }

        /* pro-world left */

        /* ══════════════════════════════════════
   ADAPTIVE — SPLIT
══════════════════════════════════════ */
        .split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6rem;
            align-items: center;
        }

        .split.reverse {
            direction: rtl;
        }

        .split.reverse>* {
            direction: ltr;
        }

        /* photo frame */
        .photo-frame {
            position: relative;
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-navy);
            aspect-ratio: 4/3;
            border: 1px solid var(--border);
        }

        .photo-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* primary shape decoration */
        .photo-frame::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(107, 191, 142, 0.08), transparent 50%);
            pointer-events: none;
            z-index: 1;
        }

        /* floating card over photo */
        .float-card {
            position: absolute;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 1.25rem 1.5rem;
            box-shadow: var(--shadow-sage);
            z-index: 5;
        }

        .fc-top {
            top: -24px;
            right: -24px;
        }

        .fc-bot {
            bottom: -24px;
            left: -24px;
        }

        .fc-label {
            font-size: .65rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: .4rem;
        }

        .fc-val {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary);
            line-height: 1;
        }

        .fc-sub {
            font-size: .68rem;
            color: var(--text-muted);
            margin-top: .2rem;
        }

        /* mini bars */
        .mini-bars {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            height: 28px;
            margin-top: .6rem;
        }

        .mb {
            flex: 1;
            border-radius: 4px 4px 0 0;
            background: var(--primary-pale);
        }

        .mb.active {
            background: var(--primary);
        }

        /* steps */
        .steps-list {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            margin-top: 3rem;
        }

        .step-row {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            padding: 1.5rem;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            transition: all .3s;
        }

        .step-row:hover {
            border-color: var(--primary-light);
            background: var(--bg-alt);
            transform: translateX(10px);
        }

        .step-badge {
            width: 36px;
            height: 36px;
            min-width: 36px;
            background: var(--primary-xlight);
            border: 1px solid var(--primary-light);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .85rem;
            font-weight: 800;
            color: var(--primary-dark);
        }

        .step-body h4 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: .3rem;
        }

        .step-body p {
            font-size: .85rem;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* ══════════════════════════════════════
   PSYCHO SECTION
══════════════════════════════════════ */
        .stat-highlight-box {
            margin-top: 2.5rem;
            background: var(--primary-xlight);
            border: 1px solid var(--primary-light);
            border-radius: var(--radius-md);
            padding: 2rem;
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
        }

        .shb-number {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--primary);
            line-height: 1;
            flex-shrink: 0;
        }

        .shb-text {
            font-size: 1rem;
            color: var(--secondary);
            line-height: 1.6;
            font-weight: 700;
        }

        .shb-source {
            font-size: .72rem;
            color: var(--text-muted);
            margin-top: .6rem;
            font-style: italic;
        }

        .wb-chips {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .75rem;
            margin-top: 2rem;
        }

        .wb-chip {
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .85rem 1.25rem;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: .85rem;
            font-weight: 600;
            color: var(--text-mid);
            transition: all .25s;
        }

        .wb-chip:hover {
            border-color: var(--primary-light);
            color: var(--primary);
            background: var(--bg-alt);
        }

        .wb-chip .wbc-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary);
            flex-shrink: 0;
        }

        /* ══════════════════════════════════════
   ORIENTATION BENTO
══════════════════════════════════════ */
        .bento {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1.5rem;
            margin-top: 4rem;
        }

        .bc {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 2.5rem;
            transition: all .3s;
        }

        .bc:hover {
            box-shadow: var(--shadow-sage);
            border-color: var(--primary-light);
            transform: translateY(-5px);
        }

        .bc-1 {
            grid-column: span 2;
        }

        .bc-2 {
            grid-column: span 2;
        }

        .bc-3 {
            grid-column: span 2;
        }

        .bc-4 {
            grid-column: span 3;
        }

        .bc-5 {
            grid-column: span 3;
            background: var(--secondary);
            border-color: var(--secondary);
        }

        .bc-5 * {
            color: #fff !important;
        }

        .bc-5 .tag {
            background: rgba(255, 255, 255, 0.2);
            color: #fff !important;
        }

        .bc-icon {
            font-size: 2.2rem;
            margin-bottom: 1.25rem;
        }

        .bc-name {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--secondary);
            margin-bottom: .5rem;
        }

        .bc-desc {
            font-size: .85rem;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* ══════════════════════════════════════
   CONCOURS
══════════════════════════════════════ */
        .feat-list {
            display: flex;
            flex-direction: column;
            gap: .85rem;
            margin-top: 2rem;
        }

        .fi {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: .95rem;
            color: var(--text-mid);
            font-weight: 500;
            transition: color .25s;
        }

        .fi:hover {
            color: var(--secondary);
        }

        .fi-check {
            width: 24px;
            height: 24px;
            min-width: 24px;
            background: var(--primary-xlight);
            border: 1px solid var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .75rem;
            font-weight: 800;
            color: var(--primary-dark);
        }

        /* quiz mockup */
        .quiz-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-navy);
        }

        .qc-header {
            background: var(--primary-pale);
            border-bottom: 1px solid var(--border-soft);
            padding: 1.25rem 1.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .qc-title {
            font-size: .9rem;
            font-weight: 800;
            color: var(--secondary);
        }

        .qc-timer {
            background: var(--primary);
            color: #fff;
            font-size: .8rem;
            font-weight: 700;
            padding: .35rem .9rem;
            border-radius: 100px;
        }

        .qc-body {
            padding: 2rem;
        }

        .qc-q {
            font-size: .95rem;
            font-weight: 600;
            color: var(--secondary);
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }

        .qc-opt {
            padding: .85rem 1.25rem;
            background: var(--bg-alt);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: .85rem;
            color: var(--text-mid);
            margin-bottom: .6rem;
            cursor: pointer;
            transition: all .2s;
            font-weight: 600;
        }

        .qc-opt:hover {
            border-color: var(--primary-light);
            background: white;
        }

        .qc-opt.sel {
            background: var(--primary-xlight);
            border-color: var(--primary-light);
            color: var(--primary-dark);
        }

        .qc-opt.ok {
            background: var(--primary-light);
            border-color: var(--primary-dark);
            color: var(--primary-dark);
        }

        .qc-progress {
            height: 8px;
            background: var(--border-soft);
            border-radius: 100px;
            margin-top: 2rem;
            overflow: hidden;
        }

        .qc-bar {
            height: 100%;
            border-radius: 100px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            width: 68%;
            animation: barIn .9s ease both;
        }

        @keyframes barIn {
            from {
                width: 0;
            }

            to {
                width: 68%;
            }
        }

        .qc-meta {
            display: flex;
            justify-content: space-between;
            margin-top: .6rem;
            font-size: .72rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        /* ══════════════════════════════════════
   GESTION
══════════════════════════════════════ */
        .g-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 4rem;
        }

        .g-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 2.5rem;
            transition: all .3s;
        }

        .g-card:hover {
            box-shadow: var(--shadow-sage);
            border-color: var(--primary-light);
            transform: translateY(-5px);
        }

        .g-icon {
            width: 56px;
            height: 56px;
            background: var(--primary-pale);
            border: 1px solid var(--primary-light);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            margin-bottom: 1.5rem;
            transition: all .3s;
            color: var(--primary-dark);
        }

        .g-card:hover .g-icon {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }

        .g-name {
            font-size: 1rem;
            font-weight: 800;
            color: var(--secondary);
            margin-bottom: .6rem;
        }

        .g-desc {
            font-size: .85rem;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* ══════════════════════════════════════
   ROBOTICS
══════════════════════════════════════ */
        .robo-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 4rem;
        }

        .robo-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 3rem 2rem;
            text-align: center;
            transition: all .4s;
            position: relative;
            overflow: hidden;
        }

        .robo-card:hover {
            box-shadow: var(--shadow-sage);
            transform: translateY(-8px);
            border-color: var(--primary-light);
        }

        .robo-card.featured {
            background: var(--secondary);
            border-color: var(--secondary);
        }

        .robo-card.featured * {
            color: #fff !important;
        }

        .robo-num {
            position: absolute;
            top: 1.5rem;
            right: 2rem;
            font-size: 4rem;
            font-weight: 800;
            color: var(--primary-pale);
            line-height: 1;
            font-variant-numeric: tabular-nums;
            opacity: 0.5;
        }

        .robo-card.featured .robo-num {
            color: rgba(255, 255, 255, .1);
        }

        .robo-emoji {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            display: block;
        }

        .robo-label {
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: .5rem;
        }

        .robo-name {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--secondary);
            margin-bottom: .75rem;
        }

        .robo-badge-wrap {
            margin-bottom: 1.5rem;
        }

        .rbadge {
            font-size: .75rem;
            padding: .35rem .85rem;
            border-radius: 100px;
            font-weight: 700;
            letter-spacing: .05em;
            display: inline-block;
        }

        .rb-g {
            background: var(--primary-light);
            color: var(--primary-dark);
        }

        .rb-t {
            background: var(--accent-light);
            color: var(--accent);
        }

        .rb-a {
            background: var(--secondary-light);
            color: var(--secondary);
        }

        .robo-card.featured .rbadge {
            background: rgba(255, 255, 255, .2);
            color: #fff;
        }

        .robo-topics {
            text-align: left;
        }

        .rt {
            font-size: .85rem;
            color: var(--text-mid);
            padding: .4rem 0;
            display: flex;
            align-items: center;
            gap: .75rem;
            border-bottom: 1px solid var(--border-soft);
            transition: all .25s;
        }

        .robo-card.featured .rt {
            border-color: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .7);
        }

        .rt:last-child {
            border-bottom: none;
        }

        .rt::before {
            content: '→';
            font-size: .75rem;
            color: var(--primary);
            flex-shrink: 0;
        }

        .robo-card.featured .rt::before {
            color: var(--primary-light);
        }

        /* ══════════════════════════════════════
   WHY
══════════════════════════════════════ */
        .why-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-top: 4rem;
        }

        .why-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 2rem 1.5rem;
            text-align: center;
            transition: all .3s;
        }

        .why-card:hover {
            box-shadow: var(--shadow-sage);
            border-color: var(--primary-light);
            transform: translateY(-5px);
        }

        .why-icon-wrap {
            width: 60px;
            height: 60px;
            background: var(--primary-pale);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            margin: 0 auto 1.25rem;
        }

        .why-name {
            font-size: .9rem;
            font-weight: 800;
            color: var(--secondary);
            line-height: 1.4;
        }

        /* ══════════════════════════════════════
   CTA
══════════════════════════════════════ */
        #cta {
            background: var(--secondary-dark);
            padding: 10rem 0;
            position: relative;
            overflow: hidden;
            color: white;
        }

        #cta::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(107, 191, 142, 0.1), transparent 65%);
            border-radius: 50%;
            pointer-events: none;
        }

        #cta::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(90, 184, 196, 0.08), transparent 65%);
            border-radius: 50%;
            pointer-events: none;
        }

        .cta-inner {
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .cta-inner h2 {
            font-size: clamp(2.4rem, 4vw, 3.8rem);
            font-weight: 800;
            color: #fff;
            letter-spacing: -0.05em;
            line-height: 1.1;
        }

        .cta-inner h2 em {
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            color: var(--primary-light);
        }

        .cta-inner p {
            color: rgba(255, 255, 255, .7);
            font-size: 1.15rem;
            line-height: 1.8;
            max-width: 650px;
            margin: 1.5rem auto 0;
        }

        .cta-btns {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
            margin-top: 3.5rem;
        }

        .btn-white {
            background: #fff;
            color: var(--secondary);
            font-weight: 700;
            font-size: 1rem;
            padding: 1rem 2.5rem;
            border-radius: 100px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all .3s;
        }

        .btn-white:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
            background: var(--primary-xlight);
        }

        .btn-white-outline {
            background: transparent;
            color: #fff;
            font-weight: 700;
            font-size: 1rem;
            padding: 1rem 2.5rem;
            border-radius: 100px;
            border: 2px solid rgba(255, 255, 255, .4);
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all .3s;
        }

        .btn-white-outline:hover {
            border-color: #fff;
            background: rgba(255, 255, 255, .1);
            transform: translateY(-3px);
        }

        /* photo strip */
        .photo-strip {
            display: flex;
            gap: 1.5rem;
            margin-top: 5rem;
            height: 180px;
            overflow: hidden;
            border-radius: var(--radius-xl);
        }

        .ps-item {
            flex: 1;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, .15);
            transition: all .4s;
            position: relative;
        }

        .ps-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(.7) grayscale(100%);
            transition: all .4s;
        }

        .ps-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: 1.5rem;
            opacity: 0;
            transition: all 0.4s;
            transform: translateY(10px);
        }

        .ps-overlay span {
            color: #fff;
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .ps-item:hover {
            flex: 1.5;
        }

        .ps-item:hover .ps-overlay {
            opacity: 1;
            transform: translateY(0);
        }

        .ps-item:hover img {
            filter: brightness(1) grayscale(0%);
            transform: scale(1.05);
        }

        /* ══════════════════════════════════════
           MOBILE NAVIGATION & OVERLAY
        ══════════════════════════════════════ */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--primary);
            cursor: pointer;
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            align-items: center;
            justify-content: center;
            z-index: 1001;
            font-size: 1.5rem;
            transition: all 0.3s ease;
        }

        .menu-toggle svg line {
            transition: all 0.3s ease;
        }

        .menu-toggle:hover {
            color: var(--primary-dark);
            transform: scale(1.1);
        }

        .menu-toggle.active {
            color: var(--primary-dark);
        }

        /* Mobile Language Switcher */
        .lang-switcher-mobile {
            display: none;
        }

        .nav-mobile-divider {
            display: none;
            width: 100%;
            height: 1px;
            background: var(--border-soft);
            margin: 1rem 0;
        }

        /* Mobile nav header (logo + close) — hidden on desktop */
        .nav-mobile-header {
            display: none;
            list-style: none;
        }

        .nav-close {
            display: none;
        }

        @media (max-width: 900px) {
            .menu-toggle {
                display: flex;
            }

            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                width: 80%;
                height: 100vh;
                background: white;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                gap: 1.5rem;
                padding-top: 2rem;
                box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
                transition: right 0.4s var(--ease-out-expo);
                z-index: 1000;
                display: flex !important;
                overflow-y: auto;
            }

            .nav-links li {
                list-style: none;
            }

            .nav-links.active {
                right: 0;
            }

            .nav-links a {
                font-size: 1.1rem;
                color: var(--secondary);
                font-weight: 600;
            }

            /* Logo + close row at top of mobile menu */
            .nav-mobile-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                padding: 0 1.5rem 1.5rem;
                border-bottom: 1px solid var(--border-soft);
                margin-bottom: 0.5rem;
            }

            .nav-mobile-logo img {
                width: 100px;
                height: auto;
            }

            .nav-close {
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--primary-xlight);
                border: 1px solid var(--border);
                color: var(--primary-dark);
                cursor: pointer;
                width: 40px;
                height: 40px;
                min-width: 40px;
                border-radius: 50%;
                font-size: 1.2rem;
                transition: background 0.2s ease;
            }

            .nav-close:hover {
                background: var(--primary-light);
            }

            .nav-mobile-divider {
                display: block;
            }

            .nav-lang-mobile {
                display: flex;
                justify-content: center;
                width: 100%;
                margin-top: 1rem;
            }

            .lang-switcher-mobile {
                display: flex;
                align-items: center;
                background: rgba(107, 191, 142, 0.1);
                border: 1px solid rgba(107, 191, 142, 0.2);
                border-radius: 100px;
                padding: 2px;
                gap: 0;
            }

            .lang-switcher-mobile a {
                display: flex;
            }

            .lang-switcher-mobile .lang-btn {
                background: transparent;
                border: none;
                color: var(--text-mid);
                font-size: 0.75rem;
                font-weight: 800;
                padding: 6px 12px;
                border-radius: 100px;
                cursor: pointer;
                transition: all 0.3s var(--ease-out-expo);
                text-transform: uppercase;
                min-width: 44px;
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .lang-switcher-mobile .lang-btn.active {
                background: var(--primary);
                color: white;
                box-shadow: 0 4px 12px rgba(107, 191, 142, 0.2);
            }

            .lang-switcher-mobile .lang-btn:hover:not(.active) {
                background: rgba(107, 191, 142, 0.15);
            }

            .nav-right {
                display: none;
            }
        }

        @media (max-width: 600px) {
            .nav-links {
                width: 90%;
                gap: 1.2rem;
                padding-top: 5rem;
            }

            .nav-links a {
                font-size: 1rem;
            }
        }

        @media (max-width: 375px) {
            .menu-toggle {
                width: 40px;
                height: 40px;
            }

            nav {
                padding: 0 1rem;
            }
        }

        /* ══════════════════════════════════════
           RESPONSIVE REFINEMENTS (UNIFIED)
        ══════════════════════════════════════ */
        @media (max-width: 1200px) {
            nav {
                padding: 0 2rem;
            }

            .container {
                padding: 0 2rem;
            }

            .hero-inner {
                gap: 3rem;
            }

            .footer-top {
                gap: 3rem;
            }
        }

        @media (max-width: 1024px) {
            .section {
                padding: 6rem 0;
            }

            .hero-inner {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 4rem;
            }

            .hero-h1 {
                font-size: clamp(2.2rem, 5vw, 3.2rem);
                text-align: center !important;
            }

            .hero-sub {
                text-align: center !important;
                margin: 1.5rem auto 0;
            }

            .hero-actions,
            .hero-trust {
                justify-content: center;
            }

            .hero-visual {
                height: 450px;
                margin-top: 2rem;
            }

            .hero-photo-main {
                left: 0;
            }

            .eco-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .af-flow-container {
                flex-direction: column;
                height: auto;
                gap: 4rem;
                padding: 4rem 0;
            }

            .af-connector-line {
                display: none;
            }

            .os-interface-grid {
                grid-template-columns: 1fr;
            }

            .os-core-wrap {
                order: -1;
                margin-bottom: 3rem;
            }

            .stats-row {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 3rem;
            }

            .stat-divider {
                display: none;
            }

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

            footer {
                padding: 5rem 2rem 3rem;
            }
        }

        @media (max-width: 768px) {
            nav {
                height: 75px;
            }

            .section {
                padding: 5rem 0;
            }

            .hero-h1 {
                font-size: 2.5rem;
            }

            .hero-visual {
                height: 350px;
            }

            .hero-photo-sec {
                width: 180px;
                height: 160px;
            }

            .bento {
                grid-template-columns: 1fr 1fr;
            }

            .bc-1,
            .bc-2,
            .bc-3,
            .bc-4,
            .bc-5 {
                grid-column: span 1 !important;
                min-height: 280px;
            }

            .g-grid,
            .robo-grid,
            .why-grid {
                grid-template-columns: 1fr 1fr;
            }

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

            footer {
                padding: 4rem 1.5rem 2rem;
            }

            .photo-strip {
                height: auto;
                flex-wrap: wrap;
            }

            .ps-item {
                min-width: 140px;
                height: 140px;
            }
        }

        @media (max-width: 600px) {
            .hero-h1 {
                font-size: 2.1rem;
            }

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

            .btn-hero,
            .btn-hero-outline {
                width: 100%;
                justify-content: center;
            }

            .hero-visual {
                height: 300px;
            }

            .hero-photo-sec {
                display: none;
            }

            .hero-stat-card {
                min-width: 130px;
                padding: 1rem;
            }

            .hsc-val {
                font-size: 1.3rem;
            }

            .bento,
            .g-grid,
            .robo-grid,
            .why-grid,
            .eco-grid,
            .footer-top {
                grid-template-columns: 1fr;
            }

            .stats-row {
                grid-template-columns: 1fr;
            }

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

            .wb-chips {
                grid-template-columns: 1fr;
            }
        }

        /* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
        footer {
            background: var(--secondary-dark);
            padding: 8rem 4rem 4rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .footer-top {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 5rem;
            padding-bottom: 4rem;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        .footer-brand .logo {
            color: var(--primary);
            font-size: 1.8rem;
        }

        .footer-brand .logo-leaf {
            background: var(--primary-light);
            color: var(--secondary-dark);
        }

        .footer-tagline {
            font-size: .95rem;
            color: rgba(255, 255, 255, .45);
            line-height: 1.8;
            margin-top: 1.5rem;
            font-weight: 400;
            max-width: 320px;
        }

        .footer-col h4 {
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 2rem;
        }

        .footer-col a {
            display: block;
            font-size: .9rem;
            color: rgba(255, 255, 255, .55);
            text-decoration: none;
            margin-bottom: 1rem;
            transition: color .25s;
        }

        .footer-col a:hover {
            color: var(--primary-light);
        }

        .footer-bottom {
            padding-top: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: .85rem;
            color: rgba(255, 255, 255, .3);
        }

        .footer-socials {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

        .social-icon {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .social-icon:hover {
            background: var(--primary);
            border-color: var(--primary);
            transform: translateY(-5px);
            color: #fff;
            box-shadow: 0 10px 20px rgba(107, 191, 142, 0.2);
        }

        .footer-contact-info {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-contact-info:hover {
            color: var(--primary-light);
        }

        .footer-contact-info i {
            color: var(--primary);
        }


        /* ══════════════════════════════════════
           LANGUAGE SWITCHER
        ══════════════════════════════════════ */
        .lang-switcher {
            display: flex;
            align-items: center;
            background: rgba(107, 191, 142, 0.1);
            border: 1px solid rgba(107, 191, 142, 0.2);
            border-radius: 100px;
            padding: 2px;
            margin-right: 1.5rem;
            position: relative;
            z-index: 10;
        }

        .lang-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            color: var(--text-mid);
            font-size: 0.75rem;
            font-weight: 800;
            padding: 6px 12px;
            border-radius: 100px;
            cursor: pointer;
            transition: all 0.3s var(--ease-out-expo);
            text-transform: uppercase;
            text-decoration: none;
        }

        .lang-btn.active {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 12px rgba(107, 191, 142, 0.2);
        }

        .lang-btn:hover:not(.active) {
            background: rgba(107, 191, 142, 0.15);
        }

        .lang-btn::after {
            display: none;
        }

        /* ══════════════════════════════════════
           HERO-SPECIFIC FOCUS SYMBOLS
        ══════════════════════════════════════ */
        .hero-math-symbol {
            position: absolute;
            color: var(--primary-dark);
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            font-weight: 700;
            opacity: 0.25;
            z-index: 1;
            pointer-events: none;
            filter: drop-shadow(0 0 10px rgba(107, 191, 142, 0.2));
            transition: transform 0.2s ease-out;
            user-select: none;
        }

        .hero-symbol-1 {
            top: 15%;
            left: 10%;
            font-size: 4rem;
            animation: focus-orbit 12s linear infinite;
        }

        .hero-symbol-2 {
            top: 60%;
            left: 5%;
            font-size: 3rem;
            animation: focus-orbit-rev 15s linear infinite;
        }

        .hero-symbol-3 {
            top: 25%;
            right: 15%;
            font-size: 5rem;
            animation: focus-pulse 8s ease-in-out infinite alternate;
        }

        .hero-symbol-4 {
            bottom: 20%;
            right: 10%;
            font-size: 3.5rem;
            animation: focus-orbit 20s linear infinite;
        }

        @keyframes focus-orbit {
            0% {
                transform: rotate(0deg) translate(15px) rotate(0deg);
            }

            100% {
                transform: rotate(360deg) translate(15px) rotate(-360deg);
            }
        }

        @keyframes focus-orbit-rev {
            0% {
                transform: rotate(360deg) translate(25px) rotate(-360deg);
            }

            100% {
                transform: rotate(0deg) translate(25px) rotate(0deg);
            }
        }

        @keyframes focus-pulse {
            0% {
                transform: scale(1) translateY(0);
                opacity: 0.2;
            }

            100% {
                transform: scale(1.15) translateY(-20px);
                opacity: 0.35;
            }
        }

        /* ══════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
══════════════════════════════════════ */

        /* Tablet (max-width: 1024px) */
        @media (max-width: 1024px) {
            .hero-grid {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 2rem;
            }

            .hero-visuals {
                display: none;
            }

            .hero-h1 {
                font-size: clamp(2rem, 5vw, 3rem);
            }

            .hero-actions {
                justify-content: center;
            }

            .trust-strip {
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.75rem;
            }

            .stats-band {
                grid-template-columns: repeat(2, 1fr);
            }

            .eco-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .adapt-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .adapt-visual {
                order: -1;
            }

            .bn-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .g-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .robo-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .why-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .os-layout {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .os-nodes {
                grid-template-columns: repeat(2, 1fr);
            }

            .wf-track {
                flex-direction: column;
                gap: 2rem;
            }

            .wf-line {
                display: none;
            }

            .cta-inner {
                flex-direction: column;
                text-align: center;
                gap: 2rem;
            }

            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .orient-bento {
                grid-template-columns: 1fr;
            }

            .concours-layout {
                grid-template-columns: 1fr;
            }

            .psy-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Mobile (max-width: 768px) */
        @media (max-width: 768px) {

            /* Hero */
            .hero {
                padding: 5rem 1rem 3rem;
            }

            .hero-grid {
                padding: 0;
            }

            .hero-h1 {
                font-size: clamp(1.8rem, 6vw, 2.4rem);
                line-height: 1.2;
            }

            .hero-sub {
                font-size: 0.95rem;
            }

            .hero-actions {
                flex-direction: column;
                align-items: stretch;
                gap: 0.75rem;
            }

            .hero-actions .btn-hero,
            .hero-actions .btn-hero-outline {
                width: 100%;
                text-align: center;
                justify-content: center;
            }

            .trust-strip {
                gap: 0.5rem;
            }

            .trust-chip {
                font-size: 0.7rem;
                padding: 0.4rem 0.8rem;
            }

            /* Stats */
            .stats-band {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
                padding: 2rem 1rem;
            }

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

            /* Sections general */
            section {
                padding: 3rem 1rem;
            }

            .section-title {
                font-size: clamp(1.6rem, 5vw, 2.2rem);
            }

            .section-sub {
                font-size: 0.9rem;
            }

            /* Ecosystem */
            .eco-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }

            .eco-node {
                padding: 1.25rem;
            }

            /* Adaptive Learning */
            .adapt-grid {
                grid-template-columns: 1fr;
            }

            .adapt-visual {
                display: none;
            }

            .adapt-steps {
                gap: 1.5rem;
            }

            /* Bento / Orientation */
            .bn-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .orient-bento {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .bn-card {
                padding: 1.5rem;
            }

            /* Concours */
            .concours-layout {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            /* School OS */
            .os-layout {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .os-nodes {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }

            .os-node-card {
                padding: 1rem;
            }

            /* Robotics */
            .robo-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            /* Why grid */
            .why-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            /* Psycho / Wellbeing */
            .psy-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            /* Workflow */
            .wf-track {
                flex-direction: column;
                align-items: center;
                gap: 2rem;
            }

            .wf-step {
                max-width: 100%;
                width: 100%;
            }

            .wf-line {
                display: none;
            }

            /* CTA */
            .cta-inner {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 2rem;
                padding: 2rem 1rem;
            }

            .cta-inner .btn-hero {
                width: 100%;
                justify-content: center;
            }

            /* Footer */
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

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

            /* Modal */
            .modal-content {
                width: 95vw;
                padding: 1rem;
            }

            /* Overflow fix */
            .hero-visuals,
            .hero-photo-sec,
            #math-overlay {
                display: none;
            }

            /* Fix any horizontal overflow */
            * {
                max-width: 100%;
            }

            img,
            video,
            canvas,
            iframe {
                max-width: 100%;
                height: auto;
            }

            /* ── ADAPTIVE LEARNING ── */
            .adaptive-flow-container {
                flex-direction: column;
                padding: 2rem 1.25rem;
                gap: 2.5rem;
                margin: 2.5rem 0 3rem;
            }

            .af-connector-line {
                display: none;
            }

            .af-zone {
                width: 100%;
            }

            .af-card-upload {
                width: 100%;
                box-sizing: border-box;
            }

            .af-outputs {
                width: 100%;
            }

            .output-chip {
                width: 100%;
                box-sizing: border-box;
            }

            .product-showcase-container {
                margin-top: 2.5rem;
                padding: 0;
                max-width: 100% !important;
            }

            .adaptive-product-showcase {
                padding: 0.75rem;
                border-radius: 16px;
            }

            .adaptive-main-img {
                width: 100%;
                height: auto;
                border-radius: 12px;
            }

            /* ── CONCOURS ── */
            .split {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }

            .quiz-card {
                width: 100%;
                box-sizing: border-box;
                overflow: hidden;
            }

            .qc-header {
                flex-direction: column;
                gap: 0.5rem;
                align-items: flex-start;
            }

            .qc-q {
                font-size: 0.85rem;
            }

            .qc-opt {
                font-size: 0.82rem;
                padding: 0.65rem 0.75rem;
            }

            /* ── FOOTER ── */
            .footer-top {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            footer {
                padding: 3.5rem 1.25rem 2rem;
            }

            .footer-tagline {
                max-width: 100%;
            }

            .footer-col h4 {
                margin-bottom: 1rem;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
                gap: 0.5rem;
                padding-top: 1.5rem;
            }

            .footer-socials {
                gap: 0.75rem;
            }
        }

        /* Small Mobile (max-width: 480px) */
        @media (max-width: 480px) {
            .hero-h1 {
                font-size: clamp(1.5rem, 7vw, 2rem);
            }

            .stats-band {
                grid-template-columns: 1fr 1fr;
                gap: 0.75rem;
            }

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

            .eco-grid {
                grid-template-columns: 1fr 1fr;
                gap: 0.75rem;
            }

            .os-nodes {
                grid-template-columns: 1fr 1fr;
            }

            .section-title {
                font-size: clamp(1.4rem, 6vw, 1.8rem);
            }

            .nav-logo span {
                font-size: 1.1rem;
            }

            .trust-strip {
                display: none;
            }

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

            section {
                padding: 2.5rem 0.875rem;
            }

            /* Keep mobile cleaner and calmer */
            #math-overlay,
            #neural-overlay {
                display: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }

            #math-overlay,
            #neural-overlay {
                display: none;
            }
        }

        /* Prevent horizontal scroll globally */
        html,
        body {
            overflow-x: hidden;
            max-width: 100%;
        }

        /* ── BACK TO TOP BUTTON ── */
        .back-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 52px;
            height: 52px;
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(107, 191, 142, 0.35);
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
            z-index: 9999;
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .back-to-top:hover {
            background: var(--primary-dark);
        }

        .back-to-top:active {
            transform: scale(0.93);
        }

        @media (max-width: 768px) {
            .back-to-top {
                width: 48px;
                height: 48px;
                bottom: 1.5rem;
                right: 1rem;
            }
        }


        /* ══════════════════════════════════════
   SECTION-SPECIFIC STYLES (extracted from HTML)
══════════════════════════════════════ */

        .orientation-command-os {
            position: relative;
            padding: 140px 0;
            background: linear-gradient(to bottom, #020617, #0a1025);
            color: #fff;
            overflow: hidden;
        }

        .os-grid-bg {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
            background-size: 40px 40px;
            mask-image: radial-gradient(ellipse at center, black, transparent 80%);
        }

        .os-eyebrow {
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: #6BBF8E;
            margin-bottom: 1.5rem;
        }

        .os-title {
            font-size: clamp(2.5rem, 5vw, 3.8rem);
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 2rem;
        }

        .os-title em {
            font-style: normal;
            background: linear-gradient(90deg, #6BBF8E, #5ab8c4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .os-desc {
            font-size: 1.15rem;
            color: rgba(255, 255, 255, 0.6);
            max-width: 700px;
            margin: 0 auto;
        }

        .os-interface-grid {
            display: grid;
            grid-template-columns: 1fr 1.5fr 1fr;
            gap: 40px;
            align-items: center;
            margin-top: 60px;
        }

        .os-node-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
            margin-bottom: 30px;
        }

        .os-node-card:hover {
            transform: translateX(10px) translateY(-5px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .os-column:last-child .os-node-card:hover {
            transform: translateX(-10px) translateY(-5px);
        }

        .os-match-badge {
            display: inline-block;
            padding: 4px 10px;
            background: rgba(107, 191, 142, 0.1);
            color: #6BBF8E;
            font-size: 0.7rem;
            font-weight: 800;
            border-radius: 100px;
            margin-bottom: 6px;
        }

        .os-node-path {
            font-size: 1.3rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
        }

        .os-node-body p {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.5;
        }

        .os-node-hover {
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease;
            opacity: 0;
        }

        .os-node-card:hover .os-node-hover {
            max-height: 80px;
            margin-top: 1.5rem;
            opacity: 1;
        }

        .insight-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            padding: 6px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .os-core-wrap {
            position: relative;
        }

        /* New Bottom Visual Section */
        .os-bottom-visual {
            margin-top: 6rem;
            display: flex;
            justify-content: center;
            position: relative;
        }

        .os-visual-frame {
            position: relative;
            max-width: 1000px;
            width: 100%;
            border-radius: 32px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
            background: rgba(15, 23, 42, 0.4);
            backdrop-filter: blur(20px);
            transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            aspect-ratio: 16 / 9;
        }

        .os-visual-frame::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10, 16, 37, 0.6), transparent);
            z-index: 1;
            pointer-events: none;
        }

        .os-frame-glow {
            position: absolute;
            inset: -2px;
            background: linear-gradient(90deg, transparent, rgba(107, 191, 142, 0.2), transparent);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 0;
        }

        .os-visual-frame:hover {
            transform: translateY(-20px) scale(1.01);
            border-color: rgba(107, 191, 142, 0.3);
            box-shadow: 0 60px 140px rgba(0, 0, 0, 0.8), 0 0 40px rgba(107, 191, 142, 0.1);
        }

        .os-visual-frame:hover .os-frame-glow {
            opacity: 1;
        }

        .os-visual-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .os-visual-frame:hover img {
            transform: scale(1.05);
        }

        .cognitive-core {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .neural-network-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .path-pulse {
            filter: blur(2px);
        }

        .student-silhouette {
            position: relative;
            width: 120px;
            height: 120px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(255, 255, 255, 0.1);
            z-index: 2;
        }

        .silhouette-glow {
            position: absolute;
            inset: -20px;
            background: radial-gradient(circle, rgba(107, 191, 142, 0.2) 0%, transparent 70%);
            animation: pulseGlow 3s infinite alternate;
        }

        @keyframes pulseGlow {
            from {
                opacity: 0.4;
                transform: scale(0.9);
            }

            to {
                opacity: 0.8;
                transform: scale(1.1);
            }
        }

        .silhouette-svg {
            width: 50px;
            height: 50px;
            color: rgba(255, 255, 255, 0.9);
        }

        .os-label {
            position: absolute;
            padding: 6px 12px;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            font-size: 0.65rem;
            font-weight: 800;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .label-top-left {
            top: 20%;
            left: 10%;
            color: #5ab8c4;
        }

        .label-bot-right {
            bottom: 20%;
            right: 10%;
            color: #6BBF8E;
        }

        .label-bot-right.recommendation {
            border-color: #6BBF8E;
            box-shadow: 0 0 20px rgba(107, 191, 142, 0.3);
            animation: pulseRec 2s infinite;
        }

        @keyframes pulseRec {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.6;
            }
        }

        @media (max-width: 1100px) {
            .os-interface-grid {
                grid-template-columns: 1fr;
            }

            .os-core-wrap {
                order: -1;
                margin-bottom: 40px;
            }
        }

        @media (max-width: 768px) {
            .os-core-wrap {
                display: none;
            }
        }

        .os-command-section {
            padding: 140px 0;
            background: linear-gradient(to bottom, #020617, #050a15);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .os-bg-ambient {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .os-glow {
            position: absolute;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            filter: blur(120px);
            opacity: 0.1;
        }

        .os-glow-1 {
            top: -10%;
            left: -10%;
            background: #6BBF8E;
        }

        .os-glow-2 {
            bottom: -10%;
            right: -10%;
            background: #2b4a8a;
        }

        .os-eyebrow {
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: #6BBF8E;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .os-title {
            font-size: clamp(2.5rem, 5vw, 3.8rem);
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 2rem;
            text-align: center;
        }

        .os-title em {
            font-style: normal;
            background: linear-gradient(90deg, #fff, #6BBF8E);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .os-desc {
            font-size: 1.15rem;
            color: rgba(255, 255, 255, 0.6);
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .os-hub-container {
            margin-top: 80px;
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        .os-dashboard-hero {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 32px;
            padding: 1px;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
            transform: perspective(1000px) rotateX(2deg);
            transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .os-dashboard-hero:hover {
            transform: perspective(1000px) rotateX(0deg);
        }

            @media (max-width: 768px) {
                .os-dashboard-hero {
                    display: none;
                }

                .os-hub-container {
                    margin-top: 40px;
                    gap: 36px;
                }
            }

        .dash-window {
            background: #0c1221;
            border-radius: 31px;
            display: flex;
            height: 600px;
            overflow: hidden;
        }

        .dash-sidebar {
            width: 70px;
            background: rgba(0, 0, 0, 0.2);
            border-right: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px 0;
        }

        .s-logo {
            width: 35px;
            height: 35px;
            background: #6BBF8E;
            border-radius: 8px;
            margin: 0 auto 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            color: #020617;
        }

        .s-nav-item {
            width: 40px;
            height: 40px;
            margin: 10px auto;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.3);
            transition: all 0.3s;
            cursor: pointer;
        }

        .s-nav-item.active {
            background: rgba(107, 191, 142, 0.1);
            color: #6BBF8E;
        }

        .dash-content {
            flex: 1;
            padding: 30px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            overflow-y: auto;
        }

        .dash-top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .dash-title {
            font-weight: 800;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .badge-live {
            font-size: 0.6rem;
            background: rgba(107, 191, 142, 0.1);
            color: #6BBF8E;
            padding: 4px 8px;
            border-radius: 4px;
            text-transform: uppercase;
        }

        .d-avatar {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

        .dash-kpi-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .dash-kpi {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 16px;
        }

        .k-label {
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.4);
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .k-val {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .k-progress {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            overflow: hidden;
        }

        .kp-fill {
            height: 100%;
            background: #6BBF8E;
        }

        .dash-bottom-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 20px;
            flex: 1;
        }

        .dash-panel {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 16px;
            padding: 20px;
        }

        .p-header {
            font-size: 0.8rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: rgba(255, 255, 255, 0.4);
        }

        .p-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.03);
            font-size: 0.85rem;
        }

        .p-tag {
            font-size: 0.7rem;
            background: rgba(255, 255, 255, 0.05);
            padding: 2px 8px;
            border-radius: 4px;
        }

        .p-status {
            color: #6BBF8E;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .p-status.idle {
            color: rgba(255, 255, 255, 0.4);
        }

        .ai-insight-panel {
            background: rgba(107, 191, 142, 0.05);
            border: 1px solid rgba(107, 191, 142, 0.2);
            border-radius: 16px;
            padding: 20px;
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .ai-pulse-hex {
            width: 30px;
            height: 30px;
            background: #6BBF8E;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            animation: aiBlink 2s infinite;
        }

        @keyframes aiBlink {

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

            50% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .ai-msg {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.5;
        }

        .os-modules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .os-node {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 2rem;
            display: flex;
            gap: 20px;
            align-items: center;
            transition: all 0.4s;
            cursor: pointer;
        }

        .os-node:hover {
            background: rgba(107, 191, 142, 0.05);
            border-color: rgba(107, 191, 142, 0.3);
            transform: translateY(-5px);
        }

        .node-icon {
            width: 45px;
            height: 45px;
            background: rgba(107, 191, 142, 0.1);
            color: #6BBF8E;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .node-title {
            font-weight: 800;
            font-size: 1rem;
            margin-bottom: 5px;
        }

        .node-stat {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.4);
        }

        @media (max-width: 1024px) {
            .dash-content {
                display: none;
            }

            .dash-window {
                height: auto;
                flex-direction: column;
            }

            .dash-sidebar {
                width: 100%;
                height: 60px;
                flex-direction: row;
                padding: 0 20px;
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            }

            .dash-kpi-grid {
                grid-template-columns: 1fr;
            }

            .dash-bottom-grid {
                grid-template-columns: 1fr;
            }
        }


        .evolution-timeline-section {
            padding: 160px 0;
            background: linear-gradient(to bottom, #050a15, #0a0f1e);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .evo-bg-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .evo-orb {
            position: absolute;
            width: 600px;
            height: 600px;
            filter: blur(140px);
            opacity: 0.15;
            border-radius: 50%;
        }

        .evo-orb-1 {
            top: -10%;
            left: -5%;
            background: #6BBF8E;
        }

        .evo-orb-2 {
            bottom: -10%;
            right: -5%;
            background: purple;
        }

        .neural-mesh {
            position: absolute;
            inset: 0;
            background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
            opacity: 0.05;
        }

        .evo-eyebrow {
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: #6BBF8E;
            margin-bottom: 2rem;
            text-align: center;
        }

        .evo-title {
            font-size: clamp(2.5rem, 6vw, 4.2rem);
            font-weight: 900;
            line-height: 1.05;
            margin-bottom: 2.5rem;
            text-align: center;
        }

        .evo-title em {
            font-style: normal;
            background: linear-gradient(90deg, #6BBF8E, #5ab8c4, #fff);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .evo-desc {
            font-size: 1.3rem;
            color: rgba(255, 255, 255, 0.6);
            max-width: 900px;
            margin: 0 auto;
            line-height: 1.5;
            text-align: center;
        }

        .evo-journey-container {
            position: relative;
            margin-top: 120px;
            min-height: 500px;
        }

        /* SVG PATH */
        .evo-svg-path {
            position: absolute;
            top: 45%;
            left: 0;
            width: 100%;
            height: 200px;
            transform: translateY(-50%);
            z-index: 1;
            filter: drop-shadow(0 0 10px rgba(107, 191, 142, 0.2));
        }

        .evo-nodes {
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 10;
        }

        .evo-node {
            width: 320px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
        }

        .node-status {
            font-size: 0.6rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.3);
            margin-bottom: 30px;
            font-weight: 700;
        }

        .node-visual {
            position: relative;
            width: 80px;
            height: 80px;
            margin-bottom: 40px;
        }

        .node-ring {
            position: absolute;
            inset: -15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transition: 0.4s;
        }

        .node-core {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.2rem;
            transition: 0.4s;
        }

        .node-tag {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 100px;
            background: rgba(255, 255, 255, 0.05);
            font-size: 0.75rem;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 15px;
        }

        .node-h3 {
            font-size: 1.5rem;
            font-weight: 900;
            margin-bottom: 15px;
        }

        .node-p {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.6;
        }

        .node-topics {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .node-topics span {
            font-size: 0.65rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            padding: 4px 10px;
            border-radius: 5px;
            color: rgba(255, 255, 255, 0.4);
        }

        /* Featured Node (Secondary) */
        .evo-node.featured {
            width: 400px;
            transform: scale(1.1) translateY(-20px);
        }

        .evo-node.featured .node-ring-lg {
            position: absolute;
            inset: -25px;
            border: 2px solid rgba(107, 191, 142, 0.2);
            border-radius: 50%;
            animation: spinNode 10s linear infinite;
        }

        .evo-node.featured .node-core {
            background: #6BBF8E;
            color: #050a15;
            border: none;
            box-shadow: 0 0 40px rgba(107, 191, 142, 0.5);
        }

        .evo-node.featured .node-glow {
            position: absolute;
            inset: -60px;
            background: radial-gradient(circle, rgba(107, 191, 142, 0.15) 0%, transparent 70%);
        }

        .evo-node.featured .node-h3 {
            color: #6BBF8E;
        }

        .node-ai-mark {
            margin-top: 30px;
            font-size: 0.65rem;
            color: #6BBF8E;
            font-weight: 900;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            animation: pulseTxt 2s infinite;
        }

        /* Interactions */
        .evo-node:hover .node-ring {
            border-color: #6BBF8E;
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(107, 191, 142, 0.1);
        }

        .evo-node:hover .node-content {
            transform: translateY(-10px);
        }

        @keyframes spinNode {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes pulseTxt {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        @media (max-width: 1024px) {
            .evo-nodes {
                flex-direction: column;
                gap: 80px;
                align-items: center;
            }

            .evo-svg-path {
                display: none;
            }

            .evo-node {
                width: 100% !important;
                transform: none !important;
            }
        }


        .why-ecosystem-section {
            padding: 160px 0;
            background: radial-gradient(circle at center, #0a1122 0%, #020617 100%);
            position: relative;
            overflow: hidden;
            color: #fff;
        }

        .eco-visual-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .eco-beam {
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            filter: blur(120px);
            opacity: 0.1;
        }

        .eco-beam-1 {
            top: 10%;
            left: 20%;
            background: #6BBF8E;
        }

        .eco-beam-2 {
            bottom: 10%;
            right: 20%;
            background: #5ab8c4;
        }

        .neural-noise {
            position: absolute;
            inset: 0;
            background-image: url('https://www.transparenttextures.com/patterns/pinstripe-dark.png');
            opacity: 0.05;
        }

        .eco-eyebrow {
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: #6BBF8E;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .eco-header-title {
            font-size: clamp(2.2rem, 5vw, 3.8rem);
            font-weight: 900;
            margin-bottom: 2rem;
            text-align: center;
        }

        .eco-header-title em {
            font-style: normal;
            color: #6BBF8E;
        }

        /* VISUALIZATION */
        .eco-system-visualization {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
            height: 600px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .eco-connections-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .eco-path-active {
            opacity: 0.3;
            animation: dashFlow 20s linear infinite;
        }

        @keyframes dashFlow {
            from {
                stroke-dashoffset: 200;
            }

            to {
                stroke-dashoffset: 0;
            }
        }

        /* CORE HUB */
        .eco-core-hub {
            position: relative;
            width: 200px;
            height: 200px;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .core-outer-ring {
            position: absolute;
            inset: -30px;
            border: 1px dashed rgba(107, 191, 142, 0.3);
            border-radius: 50%;
            animation: spinNode 30s linear infinite;
        }

        .core-inner-ring {
            position: absolute;
            inset: -15px;
            border: 2px solid rgba(107, 191, 142, 0.1);
            border-radius: 50%;
        }

        .core-brain {
            position: relative;
            width: 120px;
            height: 120px;
            background: #000;
            border: 2px solid #6BBF8E;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 50px rgba(107, 191, 142, 0.4);
            animation: corePulse 3s infinite ease-in-out;
        }

        .core-glow-layer {
            position: absolute;
            inset: -20px;
            background: radial-gradient(circle, rgba(107, 191, 142, 0.6) 0%, transparent 70%);
            border-radius: 50%;
            opacity: 0.4;
        }

        .core-label {
            font-size: 0.75rem;
            font-weight: 900;
            text-align: center;
            letter-spacing: 0.1em;
            color: #6BBF8E;
            line-height: 1.2;
            z-index: 2;
        }

        .core-satellite-text {
            position: absolute;
            bottom: -40px;
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.3em;
            color: rgba(255, 255, 255, 0.4);
            font-weight: 800;
        }

        @keyframes corePulse {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 30px rgba(107, 191, 142, 0.3);
            }

            50% {
                transform: scale(1.05);
                box-shadow: 0 0 60px rgba(107, 191, 142, 0.6);
            }
        }

        /* NODES */
        .eco-node-item {
            position: absolute;
            width: 280px;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            padding: 1.5rem;
            display: flex;
            gap: 15px;
            z-index: 10;
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            cursor: pointer;
        }

        .eco-node-item:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: #6BBF8E;
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .node-icon-box {
            width: 40px;
            height: 40px;
            min-width: 40px;
            background: rgba(107, 191, 142, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .node-h4 {
            font-size: 1rem;
            font-weight: 800;
            margin-bottom: 8px;
            color: #fff;
        }

        .node-desc {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.5;
            margin: 0;
        }

        @media (max-width: 1024px) {
            .eco-system-visualization {
                height: auto;
                flex-direction: column;
                gap: 40px;
            }

            .eco-nodes-container {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 16px;
            }

            .eco-connections-svg {
                display: none;
            }

            .eco-node-item {
                position: relative;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                width: 100%;
                max-width: 500px;
            }

            .eco-core-hub {
                margin: 40px 0;
            }
        }



        /* ═══════════════════════════════════════════
   BACK-TO-TOP BUTTON
   ═══════════════════════════════════════════ */

        .back-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: white;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(107, 191, 142, 0.3);
            pointer-events: none;
            z-index: 10001;
        }

        .back-to-top:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(107, 191, 142, 0.5);
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .back-to-top svg {
            stroke: white;
        }