:root {
            --slate-900: #0a2540;
            --slate-800: #1a3a5c;
            --slate-600: #425466;
            --slate-100: #f6f9fc;
            --logic-red: #d92d20;
            --shadow-soft: 0 50px 100px -20px rgba(50, 50, 93, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.05);
            --shadow-btn: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
            --shadow-btn-hover: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
            --shadow-dropdown: 0 50px 100px -20px rgba(50,50,93,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
        }

        body { 
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; 
            background-color: #ffffff;
            color: var(--slate-600);
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, strong { color: var(--slate-900); font-weight: 700; }
        h1 { font-size: 3rem; letter-spacing: -0.04em; margin-bottom: 1.2rem; line-height: 1.15; }
        h2 { font-size: 1.85rem; letter-spacing: -0.02em; margin-top: 2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.05); }
        h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
        p, ul { font-size: 1.05rem; font-weight: 400; margin-bottom: 1.5rem; }
        ul { padding-left: 1.5rem; }
        ul li { margin-bottom: 0.5rem; }
        
        a:not(.btn) { color: var(--slate-900); text-decoration: underline; text-decoration-color: rgba(10, 37, 64, 0.2); font-weight: 600; transition: all 0.2s; }
        a:not(.btn):hover { color: var(--logic-red); text-decoration-color: var(--logic-red); }


        .mesh-background {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: -2; overflow: hidden; pointer-events: none;
            background: #f6f9fc;
        }
        .mesh-blob {
            position: absolute; border-radius: 50%; filter: blur(120px);
            opacity: 0.7; animation: drift 15s infinite alternate ease-in-out;
            will-change: transform;
        }
        .mesh-1 { width: 60vw; height: 60vw; background: #e0f2fe; top: -10vw; left: -10vw; animation-delay: 0s; }
        .mesh-2 { width: 50vw; height: 50vw; background: #fee2e2; bottom: -10vw; right: -10vw; animation-delay: -5s; }
        .mesh-3 { width: 40vw; height: 40vw; background: #f3e8ff; top: 30vh; left: 30vw; animation-delay: -10s; }

        @keyframes drift {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(5%, 10%) scale(1.1); }
        }

        .mesh-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(255, 255, 255, 0.4); z-index: -1; pointer-events: none;
            backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
        }

        /* ======================== BUTTONS ================= */
        .btn-custom {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 0.85rem 2rem; border-radius: 99px;
            font-weight: 600; font-size: 0.95rem; text-decoration: none !important;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            cursor: pointer; border: none; outline: none;
        }
        .btn-primary-custom { background-color: var(--slate-900); color: #ffffff !important; box-shadow: var(--shadow-btn); }
        .btn-primary-custom:hover { transform: translateY(-2px); background-color: var(--slate-800); box-shadow: var(--shadow-btn-hover); }
        
        .btn-outline-custom {
            background-color: rgba(255, 255, 255, 0.8); color: var(--slate-900) !important;
            border: 1px solid rgba(10, 37, 64, 0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.02);
            backdrop-filter: blur(10px);
        }
        .btn-outline-custom:hover { background-color: #ffffff; border-color: rgba(10, 37, 64, 0.3); transform: translateY(-1px); box-shadow: var(--shadow-btn); }
        .btn-custom svg { transition: transform 0.3s ease; }
        .btn-custom:hover svg { transform: translateX(3px); }

        /* ======================== NAV / TOP MENU================= */
        .main-header {
            position: sticky; top: 0; z-index: 1000;
            background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0,0,0,0.05); padding: 0.8rem 4%; display: flex; justify-content: space-between; align-items: center;
        }
        .logo-area { text-decoration: none !important; display: flex; flex-direction: column; }
        .logo-area img { height: 40px; width: auto; }
        .logo-area i { font-size: 0.75rem; font-weight: 600; color: var(--slate-600); margin-top: 4px; letter-spacing: 0.05em; font-style: normal;}
        
        .nav-links { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; gap: 1rem; }
        .nav-item { position: relative; padding: 0.5rem; }
        .nav-item > a { 
            color: var(--slate-900); text-decoration: none !important; font-weight: 600; font-size: 0.95rem;
            display: flex; align-items: center; gap: 4px; padding: 0.5rem 1rem; border-radius: 99px; transition: background 0.2s;
        }
        .nav-item > a:hover { background: rgba(10, 37, 64, 0.05); }
        
        .nav-chevron { width: 14px; height: 14px; transition: transform 0.3s ease; opacity: 0.6; }
        .nav-item:hover .nav-chevron { transform: rotate(180deg); }

        .dropdown-menu-custom {
            position: absolute; top: 100%; left: 0; min-width: 280px;
            background: #ffffff; border: 1px solid rgba(0,0,0,0.05); border-radius: 16px;
            box-shadow: var(--shadow-dropdown); padding: 1rem 0;
            opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98); transform-origin: top left;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1001; list-style: none;
        }
        .nav-item:hover .dropdown-menu-custom { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .dropdown-menu-custom li a {
            display: block; padding: 0.6rem 1.5rem; font-size: 0.95rem; font-weight: 500;
            color: var(--slate-600); text-decoration: none !important; transition: all 0.2s;
        }
        .dropdown-menu-custom li a:hover { color: var(--slate-900); background: #f6f9fc; padding-left: 2rem; }
        .dropdown-menu-custom li.separator { padding: 1rem 1.5rem 0.2rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--slate-900); letter-spacing: 0.05em; margin-top: 0.5rem; border-top: 1px solid rgba(0,0,0,0.05); }

        .mobile-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--slate-900); cursor: pointer; padding: 0.5rem; }

        /* ============================ LAYOUT + INTERACTIVE CARDS ================= */
        .container-main { max-width: 1440px; margin: 0 auto; padding: 0 4%; }
        
        .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 5rem 0 3rem; align-items: center; }
        .image-placeholder {
            background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(246, 249, 252, 0.8));
            border: 1px dashed rgba(10, 37, 64, 0.2); border-radius: 24px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            text-align: center; padding: 3rem; color: var(--slate-600); box-shadow: var(--shadow-soft); aspect-ratio: 4/3;
        }
        
        .content-grid { display: grid; grid-template-columns: 1fr 380px; gap: 4rem; padding: 2rem 0 5rem; }
        
        /* 3D & Glow Glass Cards */
        .card-glass {
            position: relative;
            background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-soft);
            border-radius: 24px; padding: 3.5rem; margin-bottom: 2rem;
            transform-style: preserve-3d;
            transition: transform 0.2s ease-out; /* Smooth return from tilt */
            overflow: hidden;
        }
        
        /* The glow effect layer */
        .card-glass::before {
            content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(10, 37, 64, 0.04), transparent 40%);
            z-index: -1; pointer-events: none; border-radius: inherit;
        }

        .sidebar { position: sticky; top: 120px; }
        .form-control {
            background: #ffffff; border: 1px solid rgba(10,37,64,0.15); border-radius: 12px;
            padding: 0.8rem 1rem; font-family: inherit; font-size: 0.95rem; transition: all 0.3s;
        }
        .form-control:focus { border-color: var(--slate-900); box-shadow: 0 0 0 4px rgba(10,37,64,0.1); }
        .form-label { font-size: 0.85rem; font-weight: 600; color: var(--slate-900); margin-bottom: 0.4rem; }

        /* Areas Matrix */
        .matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
        .matrix a {
            background: rgba(255,255,255,0.7); border: 1px solid rgba(10,37,64,0.1);
            color: var(--slate-600); text-decoration: none !important; text-align: center;
            padding: 0.6rem 1rem; border-radius: 99px; font-size: 0.85rem; font-weight: 500; transition: all 0.2s;
        }
        .matrix a:hover { background: #ffffff; border-color: var(--slate-900); color: var(--slate-900); box-shadow: var(--shadow-btn); transform: translateY(-2px); }

        /* Related Links */
        .related-links { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }
        .related-links a {
            display: flex; justify-content: space-between; align-items: center;
            padding: 1rem 1.2rem; background: rgba(255,255,255,0.5); border: 1px solid rgba(10,37,64,0.1);
            border-radius: 12px; text-decoration: none !important; color: var(--slate-900); font-weight: 600; font-size: 0.95rem; transition: all 0.2s;
        }
        .related-links a:hover { background: #ffffff; box-shadow: var(--shadow-btn); transform: translateX(5px); border-color: var(--logic-red); }
        
        /* ================================= FOOTER ================= */
        #footer { background: var(--slate-900); color: #8898aa; padding: 5rem 0 2rem; margin-top: 4rem; }
        #footer h2, #footer h3, #footer h4 { color: #ffffff; font-size: 1.15rem; margin-bottom: 1.5rem; }
        #footer a { color: #8898aa; text-decoration: none !important; transition: color 0.2s; font-weight: 400; }
        #footer a:hover { color: #ffffff; }
        #footer hr { border-color: rgba(255,255,255,0.1); margin: 2rem 0; }
        #footer svg { fill: #ffffff; margin-right: 8px; vertical-align: text-top; }
        .footer-copyright { background: rgba(0,0,0,0.2); padding: 1.5rem; border-radius: 12px; font-size: 0.85rem; margin-top: 2rem; }

        /* Modal Overrides */
        .modal-content { border-radius: 24px; border: none; box-shadow: var(--shadow-dropdown); padding: 1rem; }
        .modal-header { border-bottom: 1px solid rgba(0,0,0,0.05); }
        .modal-title { font-weight: 800; color: var(--slate-900); font-family: 'Segoe UI', sans-serif;}

        /* ============================== MICRO-ANIMATIONS (REVEAL & STAGGER) ================= */
        .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
        .reveal.is-visible { opacity: 1; transform: translateY(0); }
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        
        /* Staggered items inside a list/matrix */
        .stagger-parent .stagger-item {
            opacity: 0; transform: translateY(15px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }
        .stagger-parent.is-visible .stagger-item { opacity: 1; transform: translateY(0); }

        .stagger-parent .stagger-item:nth-child(1) { transition-delay: 100ms; }
        .stagger-parent .stagger-item:nth-child(2) { transition-delay: 150ms; }
        .stagger-parent .stagger-item:nth-child(3) { transition-delay: 200ms; }
        .stagger-parent .stagger-item:nth-child(4) { transition-delay: 250ms; }
        .stagger-parent .stagger-item:nth-child(5) { transition-delay: 300ms; }
        .stagger-parent .stagger-item:nth-child(6) { transition-delay: 350ms; }
        .stagger-parent .stagger-item:nth-child(7) { transition-delay: 400ms; }
        .stagger-parent .stagger-item:nth-child(8) { transition-delay: 450ms; }
        .stagger-parent .stagger-item:nth-child(9) { transition-delay: 500ms; }
        .stagger-parent .stagger-item:nth-child(10) { transition-delay: 550ms; }
        .stagger-parent .stagger-item:nth-child(11) { transition-delay: 600ms; }
        .stagger-parent .stagger-item:nth-child(12) { transition-delay: 650ms; }
        .stagger-parent .stagger-item:nth-child(13) { transition-delay: 700ms; }

        @media (max-width: 992px) {
            .hero, .content-grid { grid-template-columns: 1fr; gap: 2rem; }
            h1 { font-size: 2.25rem; }
            .card-glass { padding: 2rem; }
            
            .mobile-toggle { display: block; }
            .nav-links { 
                display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; 
                background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 1rem 4%; box-shadow: var(--shadow-btn);
            }
            .nav-links.active { display: flex; }
            .nav-item { width: 100%; padding: 0; }
            .nav-item > a { justify-content: space-between; border-radius: 8px; padding: 1rem; border-bottom: 1px solid rgba(0,0,0,0.05); }
            
            .dropdown-menu-custom {
                position: static; box-shadow: none; border: none; visibility: visible; opacity: 1; display: none;
                background: #f6f9fc; width: 100%; border-radius: 8px; margin-top: 0.5rem; transform: none; padding: 0.5rem 0;
            }
            .nav-item.active .dropdown-menu-custom { display: block; }
            .sidebar { position: static; }
        }