:root {
            /* Official Brand Colors */
            --brand-light: #93BF52;
            --brand-dark: #125F45;
            --brand-white: #F2F2F2;

            /* Night Mode (Dark Theme) Defaults */
            --bg-main: #061A13;
            --bg-alt: #0A281D;
            --text-main: #F2F2F2;
            --text-sub: rgba(242, 242, 242, 0.78);
            --text-muted: rgba(242, 242, 242, 0.55);

            /* Adaptive Logo Colors in Dark Mode (Ensures high contrast on dark glass) */
            --logo-dark-fill: #F2F2F2;
            --logo-icon-dark-fill: #1E8A65;
            --logo-light-fill: #93BF52;

            /* Glass & Blur Tokens */
            --glass-bg: rgba(18, 95, 69, 0.26);
            --glass-border: rgba(147, 191, 82, 0.25);
            --glass-highlight: linear-gradient(155deg, rgba(147, 191, 82, 0.22) 0%, rgba(18, 95, 69, 0.50) 50%, rgba(6, 26, 19, 0.85) 100%);
            --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(242, 242, 242, 0.12);
            --header-bg: rgba(6, 26, 19, 0.78);
            --sub-card-bg: rgba(6, 26, 19, 0.58);
            --spotlight: rgba(147, 191, 82, 0.15);
        }

        html.light {
            /* Day Mode (Light Theme) using Official #F2F2F2, #125F45, #93BF52 */
            --bg-main: #F2F2F2;
            --bg-alt: #E5ECE8;
            --text-main: #0B3B2B;
            --text-sub: #125F45;
            --text-muted: rgba(18, 95, 69, 0.72);

            /* Adaptive Logo Colors in Light Mode (Exact original SVG colors) */
            --logo-dark-fill: #125F45;
            --logo-icon-dark-fill: #125F45;
            --logo-light-fill: #93BF52;

            /* Glass & Blur Tokens in Light Mode */
            --glass-bg: rgba(255, 255, 255, 0.72);
            --glass-border: rgba(18, 95, 69, 0.18);
            --glass-highlight: linear-gradient(155deg, rgba(147, 191, 82, 0.22) 0%, rgba(255, 255, 255, 0.88) 55%, rgba(242, 242, 242, 0.96) 100%);
            --glass-shadow: 0 18px 45px rgba(18, 95, 69, 0.10), inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
            --header-bg: rgba(242, 242, 242, 0.84);
            --sub-card-bg: rgba(18, 95, 69, 0.06);
            --spotlight: rgba(147, 191, 82, 0.22);
        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: var(--bg-main);
            color: var(--text-main);
            font-family: 'Cairo', 'Inter', sans-serif;
            overflow-x: hidden;
            line-height: 1.65;
            transition: background-color 0.4s ease, color 0.4s ease;
        }

        ::selection {
            background: #93BF52;
            color: #061A13;
        }

        /* Adaptive SVG Logo Classes */
        .logo-primary-dark {
            fill: var(--logo-dark-fill);
            transition: fill 0.4s ease;
        }
        .logo-icon-wing {
            fill: var(--logo-icon-dark-fill);
            transition: fill 0.4s ease;
        }
        .logo-primary-light {
            fill: var(--logo-light-fill);
            transition: fill 0.4s ease;
        }

        /* 3D WebGL Canvas Background */
        #webgl-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            pointer-events: none;
        }

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

        /* Intro Splash Portal */
        #intro-loader {
            position: fixed;
            inset: 0;
            background: linear-gradient(135deg, #061A13 0%, #125F45 100%);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 5px solid #93BF52;
        }

        /* Glassmorphism & Blur Containers */
        .glass-header {
            background: var(--header-bg);
            backdrop-filter: blur(22px) saturate(170%);
            -webkit-backdrop-filter: blur(22px) saturate(170%);
            border-bottom: 1px solid var(--glass-border);
        }

        .glass-card {
            background: var(--glass-bg);
            backdrop-filter: blur(22px) saturate(160%);
            -webkit-backdrop-filter: blur(22px) saturate(160%);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
            position: relative;
            overflow: hidden;
        }

        .glass-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--spotlight), transparent 45%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 1;
        }

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

        .glass-card:hover {
            border-color: rgba(147, 191, 82, 0.65);
        }

        .glass-card-highlight {
            background: var(--glass-highlight);
            backdrop-filter: blur(24px) saturate(170%);
            -webkit-backdrop-filter: blur(24px) saturate(170%);
            border: 1.5px solid #93BF52;
            box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(147, 191, 82, 0.14);
            position: relative;
            overflow: hidden;
        }

        .sub-glass {
            background: var(--sub-card-bg);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(12px);
        }

        .perspective-stage {
            perspective: 1400px;
            transform-style: preserve-3d;
        }

        .tilt-card {
            transform-style: preserve-3d;
            will-change: transform;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        /* Unified Brand Frame for All Photos */
        .aam-unified-frame {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            border: 2px solid #93BF52;
            background: #092C20;
            box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
        }

        .aam-unified-frame::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 56px;
            height: 56px;
            background: linear-gradient(225deg, #93BF52 0%, #93BF52 46%, transparent 48%);
            z-index: 20;
            pointer-events: none;
        }

        .aam-unified-frame::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 48px;
            height: 48px;
            background: linear-gradient(45deg, #125F45 0%, #125F45 46%, transparent 48%);
            z-index: 20;
            pointer-events: none;
        }

        .aam-frame-bar {
            position: absolute;
            bottom: 0;
            inset-inline: 0;
            height: 5px;
            background: linear-gradient(90deg, #125F45 0%, #93BF52 50%, #125F45 100%);
            z-index: 22;
        }

        /* 3D Hologram Pillars (For Executed Project Depths) */
        .holo-pillar-wrap {
            perspective: 800px;
            transform-style: preserve-3d;
        }

        .holo-pillar {
            position: relative;
            width: 100%;
            border-radius: 10px 10px 4px 4px;
            background: linear-gradient(180deg, rgba(147, 191, 82, 0.55) 0%, rgba(18, 95, 69, 0.50) 55%, rgba(18, 95, 69, 0.12) 100%);
            border-top: 2px solid #93BF52;
            border-inline: 1px solid rgba(147, 191, 82, 0.3);
            box-shadow: 0 -8px 25px rgba(147, 191, 82, 0.15), inset 0 10px 20px rgba(242, 242, 242, 0.2);
            transform-origin: bottom center;
            transform: rotateX(8deg);
        }

        .holo-cap {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%) rotateX(65deg);
            width: 80%;
            height: 20px;
            border-radius: 50%;
            border: 2px solid rgba(147, 191, 82, 0.8);
            background: radial-gradient(circle, rgba(147, 191, 82, 0.65) 0%, transparent 70%);
            box-shadow: 0 0 16px rgba(147, 191, 82, 0.45);
        }

        .holo-pillar.active-lime {
            background: linear-gradient(180deg, #93BF52 0%, rgba(18, 95, 69, 0.85) 60%, rgba(18, 95, 69, 0.25) 100%);
            border-top: 2px solid #F2F2F2;
            box-shadow: 0 -12px 35px rgba(147, 191, 82, 0.5), inset 0 12px 22px rgba(242, 242, 242, 0.4);
        }

        /* Theme Text Helpers */
        .t-main { color: var(--text-main); }
        .t-sub { color: var(--text-sub); }
        .t-muted { color: var(--text-muted); }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-main); }
        ::-webkit-scrollbar-thumb { background: #125F45; border-radius: 4px; border: 1px solid #93BF52; }
        ::-webkit-scrollbar-thumb:hover { background: #93BF52; }


/* Project-level logo presentation: original supplied artwork, with adaptive contrast variants. */
.brand-logo { display: block; object-fit: contain; }
.brand-logo-horizontal { max-height: 3.25rem; }
.brand-logo-vertical { max-width: 100%; }
.brand-logo-icon { flex: 0 0 auto; }
.intro-brand-logo { display: block; object-fit: contain; }

/* Accessibility and resilience: retain layout when motion or remote libraries are unavailable. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}