:root {
            --navy: #0a1628;
            --blue: #1565c0;
            --gold: #C9A844;
            --light-blue: #e8f4fd;
            --card-bg: #f0f7ff;
            --muted: #4a5568;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { font-family: 'Inter','Segoe UI',system-ui,sans-serif; color: #1a202c; background: #fff; }

        /* Animations */
        @keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
        @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
        @keyframes pulse-dot { 0%,100%{opacity:.3} 50%{opacity:.8} }
        @keyframes slideIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
        .fade-in { opacity:0; transform:translateY(30px); transition:opacity .7s ease,transform .7s ease; }
        .fade-in.visible { opacity:1; transform:translateY(0); }

        /* Hero particles */
        .particle { position:absolute; width:3px; height:3px; background:rgba(201,168,68,.4); border-radius:50%; animation:pulse-dot 3s ease-in-out infinite; }
        .geo-line { display: none !important; }
        /* Nav dropdowns */
        .nav-dropdown { opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s ease; pointer-events:none; }
        .nav-item:hover .nav-dropdown { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }

        /* Carousel */
        .carousel-slide { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
        .carousel-slide.active { opacity:1; }

        /* Cards */
        .module-card { transition:all .3s ease; border-top:3px solid transparent; }
        .module-card:hover { transform:translateY(-6px); border-top-color:var(--gold); box-shadow:0 12px 40px rgba(10,22,40,.12); }
        .tier-card { transition:all .3s ease; }
        .tier-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(10,22,40,.15); }
        .stat-card { transition:all .3s ease; }
        .stat-card:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(10,22,40,.1); }

        /* Process step arrows */
        .step-arrow { display:none; }
        @media(min-width:768px) { .step-arrow { display:flex; align-items:center; color:var(--gold); font-size:2rem; } }

        /* Mega footer */
        .footer-link { color:rgba(255,255,255,.7); transition:color .2s; }
        .footer-link:hover { color:var(--gold); }

        /* Back to top */
        #backToTop { opacity:0; pointer-events:none; transition:opacity .3s; }
        #backToTop.show { opacity:1; pointer-events:auto; }

        /* Page transitions */
        #app-content { animation: fadeInUp .5s ease; }

        /* Platform layer diagram */
        .arch-layer { transition: all .3s ease; }
        .arch-layer:hover { transform: scale(1.02); filter: brightness(1.1); }

        /* ROI Calculator slider */
        input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:4px; background:linear-gradient(90deg,var(--gold),var(--blue)); outline:none; }
        input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--gold); cursor:pointer; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.2); }

        /* Print */
        @media print { header,#backToTop,.no-print { display:none!important; } body { color:#000; } }

        /* Active nav */
        .nav-link-active { color:var(--gold)!important; }
        .nav-link-active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:var(--gold); border-radius:1px; }

        /* Mobile menu */
        #mobileMenu { transform:translateX(100%); transition:transform .35s ease; }
        #mobileMenu.open { transform:translateX(0); }

        /* Tabs */
        .tab-btn-sol { border-bottom:3px solid transparent; transition:all .2s; }
        .tab-btn-sol.active-tab { border-bottom-color:var(--gold); color:var(--gold); font-weight:600; }

        /* Resource tabs */
        .res-tab { border-bottom:3px solid transparent; transition:all .2s; }
        .res-tab.active-res { border-bottom-color:var(--gold); color:var(--gold); font-weight:600; }

        /* ===== CINEMATIC HERO ANIMATIONS ===== */
        @keyframes gridDrift {
            0% { transform: translate(0, 0); }
            100% { transform: translate(-52px, -52px); }
        }
        @keyframes particlePulse {
            0%, 100% { opacity: 0.15; }
            50% { opacity: 0.7; }
        }
        @keyframes nodePulse {
            0%, 100% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.35); opacity: 1; }
        }
        @keyframes flowLine {
            0% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: -100; }
        }
        @keyframes cardFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
        }
        @keyframes bounceDown {
            0%, 100% { transform: translateY(0) translateX(-50%); }
            50% { transform: translateY(8px) translateX(-50%); }
        }
        @keyframes heroFadeIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes orb1 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(30px,-20px)} 50%{transform:translate(-10px,30px)} 75%{transform:translate(-30px,-10px)} }
        @keyframes orb2 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-25px,15px)} 50%{transform:translate(20px,-25px)} 75%{transform:translate(15px,20px)} }
        @keyframes orb3 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(15px,25px)} 50%{transform:translate(-20px,-15px)} 75%{transform:translate(25px,-20px)} }
        @keyframes orb4 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-20px,-25px)} 50%{transform:translate(15px,20px)} 75%{transform:translate(-15px,15px)} }
        @keyframes orb5 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(20px,10px)} 50%{transform:translate(-25px,20px)} 75%{transform:translate(10px,-25px)} }
        @keyframes orb6 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-15px,20px)} 50%{transform:translate(25px,-10px)} 75%{transform:translate(-20px,-15px)} }

        .hero-grid-overlay {
            position: absolute; inset: 0;
            background:
                linear-gradient(rgba(100,181,246,0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(100,181,246,0.06) 1px, transparent 1px);
            background-size: 52px 52px;
            animation: gridDrift 20s linear infinite;
        }
        .hero-orb {
            position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px);
        }
        .hero-particle {
            position: absolute; border-radius: 50%; pointer-events: none;
        }

        /* Hero stagger animations */
        .hero-brand-row { animation: heroFadeIn 0.7s ease both; animation-delay: 0.2s; }
        .hero-headline { animation: heroFadeIn 0.7s ease both; animation-delay: 0.5s; }
        .hero-subline { animation: heroFadeIn 0.7s ease both; animation-delay: 0.8s; }
        .hero-pills { animation: heroFadeIn 0.7s ease both; animation-delay: 1.0s; }
        .hero-buttons { animation: heroFadeIn 0.7s ease both; animation-delay: 1.2s; }
        .hero-confidential { animation: heroFadeIn 0.7s ease both; animation-delay: 1.4s; }
        .hero-visual { animation: heroFadeIn 1s ease both; animation-delay: 0.6s; }

        .hero-data-card {
            backdrop-filter: blur(8px);
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            padding: 8px 14px;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            position: absolute;
            white-space: nowrap;
            pointer-events: none;
        }

        .scroll-indicator {
            position: absolute; bottom: 28px; left: 50%;
            animation: bounceDown 1.2s ease-in-out infinite;
            display: flex; flex-direction: column; align-items: center; gap: 4px;
        }