/* ==========================================================================
   SysFX Stylesheet
   Version: 2.4 (Optimized & Consolidated)
   Author: sysfx
   ========================================================================== */

/* ==========================================================================
   1. Root Variables & Base Styles
   ========================================================================== */
:root {
    /* Colors - Matrix/Emerald Palette */
    --primary-color: #058743;
    --secondary-color: #009c4a;
    --accent-bright: #00d062;
    --accent-dark: #004d24;
    --accent-darkest: #004721;
    --glow-color: var(--accent-bright);

    /* Consolidated Accent */
    --yellow-color: #ffc107;
    --yellow-hover-color: #e0a800;

    /* Base Tones */
    --text-light: #f8f9fa;
    --text-dark: #212529;
    --text-muted-light: #6c757d;
    --text-muted-dark: #adb5bd;
    --link-color: var(--primary-color);
    --link-hover-color: var(--accent-bright);
    --border-light: rgba(0, 0, 0, 0.1);
    --border-dark: rgba(255, 255, 255, 0.15);
    --bg-light: #f8f9fa;
    --bg-dark: #121212;
    --bg-surface-light: #ffffff;
    --bg-surface-dark: #1e1e1e;
    --error-color: #dc3545;
    --success-color: #28a745;

    /* Heading Color */
    --heading-color-light: var(--text-dark);
    --heading-color-dark: var(--text-light);

    /* Glow & Outline */
    --glow-intensity: 5px;
    --glow-spread: 8px;
    --text-glow-shadow: 0 0 var(--glow-intensity) var(--glow-color), 0 0 var(--glow-spread) var(--glow-color);
    --text-glow-shadow-dark-mode: 0 0 calc(var(--glow-intensity) * 1.2) var(--glow-color), 0 0 calc(var(--glow-spread) * 1.3) var(--glow-color);

    /* Gradients */
    --text-gradient: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    --dark-mode-btn-bg-light: linear-gradient(45deg, var(--yellow-color), #ff9800);
    --dark-mode-btn-bg-dark: linear-gradient(45deg, #673ab7, #3f51b5);
    --button-gradient-green: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    --button-gradient-green-hover: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
    --cta-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --bg-gradient-light: linear-gradient(135deg, #f8f9fa, #e9ecef);
    --bg-gradient-dark: linear-gradient(135deg, var(--bg-dark), var(--bg-surface-dark));

    /* Glassmorphism */
    --glass-bg-light: rgba(255, 255, 255, 0.8);
    --glass-border-light: rgba(255, 255, 255, 0.25);
    --glass-bg-dark: rgba(5, 40, 20, 0.65);
    --glass-border-dark: rgba(0, 208, 98, 0.15);
    --glass-blur: 10px;

    /* Shadows */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-dark-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-dark-md: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-dark-lg: 0 10px 45px rgba(0, 0, 0, 0.6);
    --shadow-interactive: var(--shadow-md);
    --shadow-interactive-hover: var(--shadow-lg);
    --shadow-green: 0 4px 15px rgba(5, 135, 67, 0.25);
    --shadow-green-hover: 0 7px 25px rgba(0, 156, 74, 0.35);

    /* Typography */
    --font-family-base: 'Roboto', 'Roboto Mono', 'Segoe UI', sans-serif;
    --font-size-base: 17px;
    --line-height-base: 1.7;
    --heading-font-weight: 700;
    --heading-line-height: 1.3;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;

    /* Borders */
    --border-width: 1px;
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-pill: 50px;
    --border-radius-circle: 50%;

    /* Transitions */
    --transition-speed-fast: 0.15s;
    --transition-speed: 0.3s;
    --transition-speed-slow: 0.5s;
    --transition-ease: ease;
    --transition-ease-out: ease-out;
    --transition-ease-in: ease-in;
    --transition-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

    /* Z-Indexes */
    --z-back: -1;
    --z-base: 1;
    --z-content: 10;
    --z-hero-content: 20;
    --z-sticky: 50;
    --z-header: 1000;
    --z-mobile-nav-overlay: 1040;
    --z-mobile-nav: 1050;
    --z-hamburger: 1060;
    --z-floating: 900;
    --z-modal-backdrop: 1200;
    --z-modal-content: 1210;
    --z-lightbox-backdrop: 1300;
    --z-lightbox-content: 1310;
    --z-scroll-progress: 1400;
    --z-cursor: 9999;
}

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

html {
    scroll-behavior: smooth;
    font-size: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    background: var(--bg-gradient-light);
    color: var(--text-dark);
    position: relative;
    overflow-x: hidden;
    background-color: var(--bg-light);
    opacity: 0;
    transition: opacity 0.5s ease-in, background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body:not(.preload) {
    opacity: 1;
}

/* --- Theme Transitions --- */
body.theme-transitions-active #main-header,
body.theme-transitions-active .glass-morphism,
body.theme-transitions-active .modal-content,
body.theme-transitions-active .main-nav.mobile-nav,
body.theme-transitions-active .main-footer {
    transition: background var(--transition-speed) var(--transition-ease),
                background-color var(--transition-speed) var(--transition-ease),
                border-color var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease),
                backdrop-filter var(--transition-speed) var(--transition-ease);
}
body.theme-transitions-active .modern-button,
body.theme-transitions-active .nav-link,
body.theme-transitions-active a,
body.theme-transitions-active .os-logo,
body.theme-transitions-active .form-input,
body.theme-transitions-active .form-textarea,
body.theme-transitions-active .contact-item i,
body.theme-transitions-active .service-icon i,
body.theme-transitions-active .glow-text,
body.theme-transitions-active .dot,
body.theme-transitions-active .cursor,
body.theme-transitions-active .scroll-progress,
body.theme-transitions-active .social-links a,
body.theme-transitions-active .floating-action-button {
    transition: background var(--transition-speed) var(--transition-ease),
                background-color var(--transition-speed) var(--transition-ease),
                color var(--transition-speed) var(--transition-ease),
                border-color var(--transition-speed) var(--transition-ease),
                fill var(--transition-speed) var(--transition-ease),
                stroke var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease),
                filter var(--transition-speed) var(--transition-ease),
                opacity var(--transition-speed) var(--transition-ease),
                text-shadow var(--transition-speed) var(--transition-ease);
}

/* --- Dark Mode --- */
body.dark-mode {
    background: var(--bg-gradient-dark);
    background-color: var(--bg-dark);
    color: var(--text-light);
    --link-color: var(--secondary-color);
    --link-hover-color: var(--accent-bright);
    --border-light: var(--border-dark);
    --bg-light: var(--bg-dark);
    --bg-surface-light: var(--bg-surface-dark);
    --text-muted-light: var(--text-muted-dark);
    --shadow-sm: var(--shadow-dark-sm);
    --shadow-md: var(--shadow-dark-md);
    --shadow-lg: var(--shadow-dark-lg);
    --shadow-interactive: var(--shadow-dark-md);
    --shadow-interactive-hover: var(--shadow-dark-lg);
    --shadow-green: 0 4px 20px rgba(0, 156, 74, 0.35);
    --shadow-green-hover: 0 7px 30px rgba(5, 135, 67, 0.45);
    --glass-bg-light: var(--glass-bg-dark);
    --glass-border-light: var(--glass-border-dark);
    --heading-color-light: var(--heading-color-dark);
}

body.no-scroll { overflow: hidden; }

/* --- Text/Heading Color Contrast Fix --- */
body:not(.dark-mode) .glass-morphism, body:not(.dark-mode) .modal-content { color: var(--text-dark); }
body.dark-mode .glass-morphism, body.dark-mode .modal-content, body.dark-mode .parallax > *, body.dark-mode .cta > *, body.dark-mode .stats > * { color: var(--text-light); }
body:not(.dark-mode) .hero p, body.dark-mode .hero p { color: var(--text-light); }
body:not(.dark-mode) section p, body:not(.dark-mode) section li, body:not(.dark-mode) section address { color: var(--text-dark); }
body.dark-mode section p, body.dark-mode section li, body.dark-mode section address { color: var(--text-light); }
body:not(.dark-mode) .parallax p, body:not(.dark-mode) .cta p, body:not(.dark-mode) .stats p { color: var(--text-light); }

/* Heading Colors */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    margin-bottom: var(--spacing-md);
    color: var(--heading-color-light);
    text-shadow: none;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: var(--heading-color-dark); }
body:not(.dark-mode) .hero h2, body.dark-mode .hero h2 { color: var(--text-light); }
body:not(.dark-mode) .parallax h2, body:not(.dark-mode) .parallax h3, body:not(.dark-mode) .cta h2, body:not(.dark-mode) .stats h2 { color: var(--text-light); }
body:not(.dark-mode) .service h3 { color: var(--text-dark); }
body.dark-mode .service h3 { color: var(--text-light); }

/* Muted text colors */
body:not(.dark-mode) .text-muted-light, body:not(.dark-mode) .optional, body:not(.dark-mode) .extra-info, body:not(.dark-mode) .timeline-description { color: var(--text-muted-light); }
body.dark-mode .text-muted-light, body.dark-mode .optional, body.dark-mode .extra-info, body.dark-mode .timeline-description { color: var(--text-muted-dark); }

/* Text shadow for readability on parallax */
.parallax h2, .parallax h3, .parallax p, .parallax .services-description { text-shadow: 1px 1px 3px rgba(0,0,0,0.7); }
body.dark-mode .parallax h2, body.dark-mode .parallax h3, body.dark-mode .parallax p, body.dark-mode .services-description { text-shadow: 1px 1px 4px rgba(0,0,0,0.8); }
.parallax .glow-text { text-shadow: var(--text-glow-shadow) !important; }
body.dark-mode .parallax .glow-text { text-shadow: var(--text-glow-shadow-dark-mode) !important; }

/* ==========================================================================
   2. Accessibility & Utility Classes
   ========================================================================== */
.skip-link {
    position: absolute; top: 0; left: -9999px; background-color: var(--primary-color);
    color: white; padding: var(--spacing-sm); z-index: 99999;
    transition: left var(--transition-speed-fast) var(--transition-ease); border-radius: 0 0 var(--border-radius-sm) 0;
}
.skip-link:focus { left: 0; outline: 3px solid var(--accent-bright); outline-offset: 2px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.glass-morphism {
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
    border: var(--border-width) solid var(--glass-border-light); border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}
body.dark-mode .glass-morphism { background: var(--glass-bg-dark); border-color: var(--glass-border-dark); }

#welcome:not(.glass-morphism), #about:not(.glass-morphism) {
    background-color: var(--bg-surface-light); border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg) var(--spacing-md); box-shadow: var(--shadow-md); border: 1px solid var(--border-light);
}
body.dark-mode #welcome:not(.glass-morphism), body.dark-mode #about:not(.glass-morphism) {
    background-color: var(--bg-surface-dark); border-color: var(--border-dark); box-shadow: var(--shadow-dark-md);
}

.gradient-text {
    background: var(--text-gradient); -webkit-background-clip: text; background-clip: text;
    color: transparent !important; -webkit-text-fill-color: transparent !important; display: inline-block;
    font-weight: var(--heading-font-weight); text-shadow: none !important;
}

@keyframes pulseGlow {
    0%, 100% { text-shadow: var(--text-glow-shadow); }
    50% { text-shadow: 0 0 calc(var(--glow-intensity) * 1.4) var(--glow-color), 0 0 calc(var(--glow-spread) * 1.5) var(--glow-color); }
}
@keyframes pulseGlowDark {
    0%, 100% { text-shadow: var(--text-glow-shadow-dark-mode); }
    50% { text-shadow: 0 0 calc(var(--glow-intensity) * 1.6) var(--glow-color), 0 0 calc(var(--glow-spread) * 1.7) var(--glow-color); }
}

.glow-text {
    text-shadow: var(--text-glow-shadow); animation: pulseGlow 2.5s infinite ease-in-out;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; paint-order: stroke fill;
}
body.dark-mode .glow-text { text-shadow: var(--text-glow-shadow-dark-mode); animation-name: pulseGlowDark; }
.gradient-text.glow-text { text-shadow: var(--text-glow-shadow) !important; animation: pulseGlow 2.5s infinite ease-in-out !important; }
body.dark-mode .gradient-text.glow-text { text-shadow: var(--text-glow-shadow-dark-mode) !important; animation-name: pulseGlowDark !important; }

.centered-text { text-align: center; }
.optional, .required-star { font-size: 0.85em; font-weight: normal; color: var(--text-muted-light); }
.required-star { color: var(--error-color); margin-left: 2px; }

.card-hover {
    transition: transform var(--transition-speed-fast) var(--transition-cubic),
                box-shadow var(--transition-speed-fast) var(--transition-cubic),
                border-color var(--transition-speed) var(--transition-ease);
    border: 1px solid transparent;
}
.card-hover:hover, .card-hover:focus-within {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-green-hover);
}
.glass-morphism.card-hover {
    transition: transform var(--transition-speed-fast) var(--transition-cubic),
                box-shadow var(--transition-speed-fast) var(--transition-cubic),
                border-color var(--transition-speed) var(--transition-ease),
                background var(--transition-speed) var(--transition-ease),
                backdrop-filter var(--transition-speed) var(--transition-ease);
}
.glass-morphism.card-hover:hover, .glass-morphism.card-hover:focus-within { box-shadow: var(--shadow-green-hover) !important; }
body.dark-mode .glass-morphism.card-hover:hover, body.dark-mode .glass-morphism.card-hover:focus-within { box-shadow: var(--shadow-green-hover) !important; }

/* Links */
a { color: var(--link-color); text-decoration: none; transition: color var(--transition-speed-fast) var(--transition-ease), text-shadow var(--transition-speed-fast) var(--transition-ease); }
a:hover, a:focus { color: var(--link-hover-color); text-decoration: none; outline: none; text-shadow: 0 0 5px rgba(0, 208, 98, 0.5); }
body.dark-mode a:hover, body.dark-mode a:focus { color: var(--link-hover-color); text-shadow: 0 0 6px rgba(0, 208, 98, 0.6); }
a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: var(--border-radius-sm); text-shadow: none; color: var(--link-hover-color); }
.email-link { word-break: break-all; }

h1 { font-size: clamp(2.1em, 5.2vw, 2.9em); }
h2 { font-size: clamp(1.9em, 4.2vw, 2.5em); }
h3 { font-size: clamp(1.5em, 3.2vw, 1.9em); }

/* ==========================================================================
   3. Preloader, Scroll Progress & Custom Cursor
   ========================================================================== */
.preloader {
    position: fixed; inset: 0; background-color: var(--bg-light); display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: 99999;
    transition: opacity var(--transition-speed-slow) ease-in-out;
}
body.dark-mode .preloader { background-color: var(--bg-dark); }

.preloader-logo { display: flex; justify-content: center; align-items: center; height: 100px; margin-bottom: var(--spacing-md); }
.css-loader { font-family: 'Roboto Mono', monospace; font-weight: 700; font-size: 3.5em; color: var(--primary-color); filter: drop-shadow(0 0 5px var(--primary-color)); }
body.dark-mode .css-loader { color: var(--secondary-color); filter: drop-shadow(0 0 5px var(--secondary-color)); }
.css-loader span { display: inline-block; animation: pulseLoaderText 1.4s infinite ease-in-out both; }
.css-loader span:nth-child(1) { animation-delay: 0.1s; } .css-loader span:nth-child(2) { animation-delay: 0.2s; }
.css-loader span:nth-child(3) { animation-delay: 0.3s; } .css-loader span:nth-child(4) { animation-delay: 0.4s; }
.css-loader span:nth-child(5) { animation-delay: 0.5s; }

@keyframes pulseLoaderText { 0%, 100% { opacity: 0.4; transform: translateY(5px); } 50% { opacity: 1; transform: translateY(-5px); } }

.preloader-dots { display: flex; gap: var(--spacing-sm); }
.dot { width: 12px; height: 12px; background-color: var(--primary-color); border-radius: 50%; animation: bounceDot 1.4s infinite ease-in-out both; }
.dot:nth-child(1) { animation-delay: -0.32s; } .dot:nth-child(2) { animation-delay: -0.16s; }
body.dark-mode .dot { background-color: var(--secondary-color); }
@keyframes bounceDot { 0%, 80%, 100% { transform: scale(0); opacity: 0.5;} 40% { transform: scale(1.0); opacity: 1;} }

.scroll-progress {
    position: fixed; top: 0; left: 0; width: 0%; height: 5px; background: var(--primary-color);
    z-index: var(--z-scroll-progress); transition: width 0.1s linear; box-shadow: 0 0 10px var(--primary-color);
    border-radius: 0 2px 2px 0;
}
body.dark-mode .scroll-progress { background: var(--secondary-color); box-shadow: 0 0 10px var(--secondary-color); }

.cursor {
    position: fixed; top: 0; left: 0; width: 16px; height: 16px; background-color: var(--primary-color);
    border-radius: var(--border-radius-circle); pointer-events: none; z-index: var(--z-cursor); opacity: 0;
    border: 2px solid rgba(0, 208, 98, 0.5); mix-blend-mode: difference; transform: translate(-50%, -50%) scale(1);
    transition: width var(--transition-speed-fast) var(--transition-cubic), height var(--transition-speed-fast) var(--transition-cubic), opacity var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease);
    will-change: transform;
}
body.cursor-ready .cursor { opacity: 1; }
.cursor.hover { transform: translate(-50%, -50%) scale(2.5); background-color: rgba(0, 156, 74, 0.3); border-color: rgba(0, 208, 98, 0.7); }
.cursor.click { transform: translate(-50%, -50%) scale(0.8); transition-duration: 0.1s; }
@media (pointer: coarse) or (hover: none) { .cursor { display: none !important; } }

/* ==========================================================================
   4. Particles Background
   ========================================================================== */
.particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--z-base); opacity: 0.7; transition: opacity var(--transition-speed) var(--transition-ease); border-radius: inherit; }
body.dark-mode .particles-container { opacity: 0.8; }

/* ==========================================================================
   5. Header & Navigation
   ========================================================================== */
#main-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-header); padding: 0; border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    transition: transform var(--transition-speed) var(--transition-cubic), background var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease), backdrop-filter var(--transition-speed) var(--transition-ease);
    border-top: none; border-left: none; border-right: none; background: var(--glass-bg-light); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: var(--border-width) solid var(--glass-border-light); box-shadow: var(--shadow-sm);
}
body.dark-mode #main-header { background: var(--glass-bg-dark); border-bottom-color: var(--glass-border-dark); }

.header-top-bar {
    display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(0, 0, 0, 0.03); font-size: 0.85em; color: var(--text-muted-light); border-bottom: var(--border-width) solid rgba(0, 0, 0, 0.02);
    transition: height var(--transition-speed) var(--transition-cubic), padding var(--transition-speed) var(--transition-cubic), opacity var(--transition-speed) var(--transition-ease) 0.1s, visibility var(--transition-speed) var(--transition-ease) 0.1s, border-bottom var(--transition-speed) var(--transition-ease);
    height: 35px; overflow: hidden;
}
body.dark-mode .header-top-bar { background: rgba(5, 135, 67, 0.05); border-bottom-color: rgba(5, 135, 67, 0.1); color: var(--text-muted-dark); }
#current-time { display: flex; align-items: center; gap: var(--spacing-xs); flex-shrink: 0; }
#current-time i { color: var(--primary-color); } body.dark-mode #current-time i { color: var(--secondary-color); }
.tech-trivia-container { flex-grow: 1; text-align: center; margin: 0 var(--spacing-sm); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tech-trivia { display: inline-block; max-width: 100%; font-size: 0.95em; }
#trivia-icon { margin-right: var(--spacing-xs); opacity: 0.8; }

#darkModeToggle {
    padding: 6px 14px; font-size: 0.9em; border-radius: var(--border-radius-pill); background-image: var(--dark-mode-btn-bg-light); color: var(--text-dark); gap: 8px; min-width: 120px;
    justify-content: center; border: none; transition: background-image var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease), transform var(--transition-speed-fast) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-cubic);
    box-shadow: var(--shadow-sm); flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; overflow: hidden;
}
#darkModeToggle .icon-container { display: inline-flex; transition: transform var(--transition-speed) var(--transition-ease); }
#darkModeToggle i { transition: color var(--transition-speed) var(--transition-ease); color: #ff8f00; }
#darkModeToggle .mode-button-text { transition: color var(--transition-speed) var(--transition-ease); }
body.dark-mode #darkModeToggle { background-image: var(--dark-mode-btn-bg-dark); color: var(--text-light); box-shadow: var(--shadow-dark-sm); }
body.dark-mode #darkModeToggle i { color: #c3aeff; }
#darkModeToggle:hover, #darkModeToggle:focus-visible { transform: scale(1.05); box-shadow: var(--shadow-md); outline: none; }
body.dark-mode #darkModeToggle:hover, body.dark-mode #darkModeToggle:focus-visible { box-shadow: var(--shadow-dark-md); }
#darkModeToggle:hover .icon-container, #darkModeToggle:focus-visible .icon-container { transform: rotate(15deg); }
#darkModeToggle:active { transform: scale(1); box-shadow: var(--shadow-sm); }

.header-main { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); gap: var(--spacing-sm); transition: padding var(--transition-speed) var(--transition-cubic); }
.logo-container { display: flex; flex-shrink: 0; width: 60px; height: 60px; justify-content: center; align-items: center; transition: width var(--transition-speed) var(--transition-cubic), height var(--transition-speed) var(--transition-cubic); }

/* CSS Logo */
.css-logo-link { display: inline-block; text-decoration: none; outline: none; }
.css-logo-text { font-family: 'Roboto Mono', monospace; font-weight: 700; font-size: 1.5em; color: var(--primary-color); text-shadow: 0 0 3px var(--primary-color); position: relative; display: inline-block; transition: all var(--transition-speed) var(--transition-ease); line-height: 1; }
body.dark-mode .css-logo-text { color: var(--secondary-color); text-shadow: 0 0 4px var(--secondary-color); }
.css-logo-text::before, .css-logo-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; clip: rect(0, 0, 0, 0); }
.css-logo-text::before { left: -2px; text-shadow: 2px 0 #ff00c1; animation: glitch-anim-1 3s infinite linear alternate-reverse; }
.css-logo-text::after { left: 2px; text-shadow: -2px 0 #00fff9; animation: glitch-anim-2 3s infinite linear alternate-reverse; }
.css-logo-link:hover .css-logo-text, .css-logo-link:focus .css-logo-text { color: var(--accent-bright); text-shadow: 0 0 6px var(--accent-bright); }
body.dark-mode .css-logo-link:hover .css-logo-text, body.dark-mode .css-logo-link:focus .css-logo-text { color: var(--accent-bright); text-shadow: 0 0 8px var(--accent-bright); }
.css-logo-link:hover .css-logo-text::before { animation: glitch-anim-hover 0.3s infinite linear alternate-reverse; }
.css-logo-link:hover .css-logo-text::after { animation: glitch-anim-hover 0.3s infinite linear alternate-reverse reverse; }
@keyframes glitch-anim-1 { 0% { clip: rect(74px, 9999px, 75px, 0); } 20% { clip: rect(44px, 9999px, 51px, 0); } 40% { clip: rect(27px, 9999px, 32px, 0); } 60% { clip: rect(58px, 9999px, 61px, 0); } 80% { clip: rect(28px, 9999px, 84px, 0); } 100% { clip: rect(55px, 9999px, 60px, 0); } }
@keyframes glitch-anim-2 { 0% { clip: rect(2px, 9999px, 10px, 0); } 20% { clip: rect(67px, 9999px, 73px, 0); } 40% { clip: rect(14px, 9999px, 19px, 0); } 60% { clip: rect(81px, 9999px, 86px, 0); } 80% { clip: rect(12px, 9999px, 18px, 0); } 100% { clip: rect(1px, 9999px, 5px, 0); } }
@keyframes glitch-anim-hover { 0% { clip: rect(0, 9999px, 10px, 0); } 50% { clip: rect(5px, 9999px, 15px, 0); } 100% { clip: rect(0, 9999px, 5px, 0); } }

#header-brand-title { font-size: clamp(1.8em, 4vw, 2.4em); margin: 0; line-height: 1.1; }
#main-header.header-shrunk #header-brand-title { font-size: clamp(1.5em, 3vw, 2em); }
.header-titles { text-align: center; flex-grow: 1; margin: 0 var(--spacing-sm); min-width: 0; transition: opacity var(--transition-speed) var(--transition-ease), visibility var(--transition-speed) var(--transition-ease); }
#typing-effect { min-height: 1.4em; display: block; font-size: clamp(1em, 2.5vw, 1.2em); color: var(--primary-color); margin-top: var(--spacing-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 300; height: 1.4em; line-height: 1.4em; }
body.dark-mode #typing-effect { color: var(--accent-bright); }

.hamburger { display: none; padding: 10px; cursor: pointer; transition: opacity 0.15s linear; border: none; background-color: transparent; z-index: var(--z-hamburger); order: 3; color: var(--text-dark); position: relative; }
body.dark-mode .hamburger { color: var(--text-light); }
.hamburger-box { width: 30px; height: 24px; display: inline-block; position: relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 30px; height: 3px; background-color: currentColor; border-radius: 3px; position: absolute; transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), top 0.1s 0.2s ease-in, bottom 0.1s 0.2s ease-in, opacity 0.1s ease-in; }
.hamburger-inner { display: block; top: 50%; margin-top: -1.5px; } .hamburger-inner::before { content: ""; display: block; top: -10px; } .hamburger-inner::after { content: ""; display: block; bottom: -10px; }
.hamburger.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
.hamburger.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

.main-nav.desktop-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-top: var(--border-width) solid var(--border-light); transition: height var(--transition-speed) var(--transition-cubic), padding var(--transition-speed) var(--transition-cubic), opacity var(--transition-speed) var(--transition-ease), visibility var(--transition-speed) var(--transition-ease), transform var(--transition-speed) var(--transition-cubic), border-top var(--transition-speed) var(--transition-ease); height: auto; overflow: hidden; }
body.dark-mode .main-nav.desktop-nav { border-top-color: var(--border-dark); }
.main-nav.mobile-nav { display: flex; flex-direction: column; align-items: stretch; position: fixed; top: 0; left: 0; width: 85%; max-width: 300px; height: 100vh; height: 100dvh; background: var(--bg-surface-light); padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md); padding-top: 60px; border-right: var(--border-width) solid var(--border-light); box-shadow: var(--shadow-lg); transform: translateX(-105%); overflow-y: auto; z-index: var(--z-mobile-nav); visibility: hidden; opacity: 0; transition: transform 0.4s var(--transition-cubic), visibility 0.4s, opacity 0.4s ease, background-color 0.3s ease, border-color 0.3s ease; }
body.dark-mode .main-nav.mobile-nav { background: var(--bg-surface-dark); border-right-color: var(--border-dark); box-shadow: var(--shadow-dark-lg); }
body.nav-active .main-nav.mobile-nav { transform: translateX(0); visibility: visible; opacity: 1; }

.mobile-nav-overlay { content: ''; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); z-index: var(--z-mobile-nav-overlay); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s 0.4s; pointer-events: none; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
body.nav-active .mobile-nav-overlay { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.4s ease, visibility 0s 0s, backdrop-filter 0.4s ease; }

.mobile-nav-close { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); background: none; border: none; color: var(--text-muted-light); font-size: 1.8em; line-height: 1; cursor: pointer; padding: var(--spacing-xs); z-index: calc(var(--z-mobile-nav) + 1); transition: color var(--transition-speed) ease, transform var(--transition-speed) ease; }
.mobile-nav-close:hover, .mobile-nav-close:focus { color: var(--error-color); transform: scale(1.1) rotate(90deg); outline: none;}
body.dark-mode .mobile-nav-close { color: var(--text-muted-dark); }

.nav-link { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 8px 16px; color: var(--text-dark); text-decoration: none; font-weight: 500; border-radius: var(--border-radius-pill); transition: background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease); position: relative; overflow: hidden; }
body.dark-mode .nav-link { color: var(--text-light); }
.nav-link i { color: var(--primary-color); transition: color var(--transition-speed) var(--transition-ease); }
body.dark-mode .nav-link i { color: var(--secondary-color); }
.desktop-nav .nav-link:hover, .desktop-nav .nav-link:focus { color: var(--primary-color); background-color: rgba(5, 135, 67, 0.08); text-decoration: none; outline: none; text-shadow: none; }
body.dark-mode .desktop-nav .nav-link:hover, body.dark-mode .desktop-nav .nav-link:focus { color: var(--secondary-color); background-color: rgba(0, 156, 74, 0.15); text-shadow: none; }
.desktop-nav .nav-link::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--primary-color); transition: width var(--transition-speed) var(--transition-ease-out); }
body.dark-mode .desktop-nav .nav-link::after { background: var(--secondary-color); }
.desktop-nav .nav-link:hover::after, .desktop-nav .nav-link:focus::after { width: 60%; }
.nav-link.active { color: var(--text-light); background-color: var(--primary-color); box-shadow: var(--shadow-inset); text-shadow: none; }
.nav-link.active i { color: var(--text-light); }
.desktop-nav .nav-link.active::after { display: none; }
body.dark-mode .nav-link.active { background-color: var(--secondary-color); color: var(--text-dark); text-shadow: none; }
body.dark-mode .nav-link.active i { color: var(--text-dark); }
.mobile-nav .nav-link { width: 100%; padding: 14px 20px; font-size: 1.1em; justify-content: flex-start; border-radius: var(--border-radius-sm); background: transparent; border-bottom: 1px solid var(--border-light); color: var(--text-dark); }
.mobile-nav .nav-link:last-of-type { border-bottom: none; }
body.dark-mode .mobile-nav .nav-link { border-bottom-color: var(--border-dark); color: var(--text-light); }
.mobile-nav .nav-link:hover, .mobile-nav .nav-link:focus, .mobile-nav .nav-link.active { background-color: rgba(5, 135, 67, 0.1); color: var(--primary-color); box-shadow: none; text-shadow: none; }
.mobile-nav .nav-link.active i { color: var(--primary-color); }
body.dark-mode .mobile-nav .nav-link:hover, body.dark-mode .mobile-nav .nav-link:focus, body.dark-mode .mobile-nav .nav-link.active { background-color: rgba(0, 156, 74, 0.2); color: var(--secondary-color); }
body.dark-mode .mobile-nav .nav-link.active i { color: var(--secondary-color); }

#main-header.header-shrunk { box-shadow: var(--shadow-md); }
body.dark-mode #main-header.header-shrunk { box-shadow: var(--shadow-dark-md); }
#main-header.header-shrunk .header-top-bar { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden; border-bottom: none; }
#main-header.header-shrunk .header-main { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
#main-header.header-shrunk .logo-container { width: 45px; height: 45px; }
#main-header.header-shrunk .css-logo-text { font-size: 1.2em; }
#main-header.header-shrunk #typing-effect { font-size: clamp(0.8em, 2vw, 1em); min-height: 1.2em; height: 1.2em; line-height: 1.2em; }
@media (min-width: 769px) { #main-header.header-shrunk .main-nav.desktop-nav { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden; border-top: none; } }

/* ==========================================================================
   6. Scrolling Text Bar
   ========================================================================== */
.scrolling-text-container {
    background: var(--primary-color); color: var(--text-light); padding: var(--spacing-sm) 0;
    white-space: nowrap; overflow: hidden; width: 100%; position: relative; z-index: var(--z-sticky);
    box-shadow: var(--shadow-sm); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
body.dark-mode .scrolling-text-container { background: var(--secondary-color); color: var(--text-dark); text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF; }
.scrolling-text-content { display: inline-block; padding-left: 100%; animation: scroll-text 30s linear infinite; font-size: 1.1em; font-weight: 500; margin: 0; will-change: transform; }
.scrolling-text-content span { display: inline-block; margin-right: 60px; }
@keyframes scroll-text { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.scrolling-text-container:hover .scrolling-text-content { animation-play-state: paused; }

/* ==========================================================================
   7. Main Content & Sections
   ========================================================================== */
section { margin: var(--spacing-lg) auto; padding: var(--spacing-lg) var(--spacing-md); width: 90%; max-width: 1300px; position: relative; overflow: hidden; border-radius: var(--border-radius-lg); }
.section-animation { opacity: 0; }
#home { margin-top: 0; padding-top: var(--spacing-xl); }

.welcome:not(.glass-morphism) { padding-top: var(--spacing-md); padding-bottom: var(--spacing-lg); position: relative; overflow: hidden; }
.welcome:not(.glass-morphism)::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(5, 135, 67, 0.05) 0%, rgba(5, 135, 67, 0) 60%); opacity: 0.5; pointer-events: none; z-index: 0; }
body.dark-mode .welcome:not(.glass-morphism)::before { background: linear-gradient(160deg, rgba(0, 208, 98, 0.05) 0%, rgba(0, 208, 98, 0) 60%); opacity: 0.7; }
.welcome:not(.glass-morphism) > * { position: relative; z-index: 1; }

.location-content { padding: var(--spacing-lg); }
.location-content p { margin-bottom: var(--spacing-md); }

.parallax { background-attachment: scroll; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; color: var(--text-light); }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { .parallax { background-attachment: fixed; } }
.parallax::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 0; pointer-events: none; border-radius: inherit; transition: background var(--transition-speed) var(--transition-ease); }
.parallax > * { position: relative; z-index: 1; }

.services.parallax { background-image: url('https://img.freepik.com/premium-photo/abstract-futuristic-circuit-board-illustration-high-technology-connection-complex-data-digital-technology-concept-matrix-background-dark-green-color-tone_38391-634.jpg'); background-color: transparent; }
.services.parallax::before { background: rgba(5, 30, 15, 0.75); border-radius: inherit; z-index: -1; }
body.dark-mode .services.parallax::before { background: rgba(0, 10, 5, 0.85); }
.events.parallax { background-image: url('https://m.media-amazon.com/images/I/81QWPvOKCFL.jpg'); }

.testimonials.parallax { background-color: var(--bg-light); background-image: linear-gradient(rgba(5, 135, 67, 0.03), rgba(5, 135, 67, 0.03)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23a0a0a0' fill-opacity='0.06'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat, repeat; background-size: auto; }
body.dark-mode .testimonials.parallax { background-color: var(--bg-dark); background-image: linear-gradient(rgba(0, 156, 74, 0.05), rgba(0, 156, 74, 0.05)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.04'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.testimonials.parallax::before { background: rgba(255, 255, 255, 0.6); }
body.dark-mode .testimonials.parallax::before { background: rgba(0, 0, 0, 0.75); }

/* ==========================================================================
   8. Components
   ========================================================================== */
.hero { padding: var(--spacing-xl) var(--spacing-md); text-align: center; min-height: 70vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-radius: 0; background: var(--bg-gradient-dark); color: var(--text-light); margin: 0 auto; width: 100%; max-width: none; }
.hero-content { max-width: 850px; padding: var(--spacing-lg); position: relative; z-index: var(--z-hero-content); }
.hero-title { margin-bottom: var(--spacing-md); font-size: clamp(2.5em, 7vw, 4em); line-height: 1.2; transform: translateZ(0); filter: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: none; }
.hero-title.glow-text { text-shadow: var(--text-glow-shadow) !important; }
body.dark-mode .hero-title.glow-text { text-shadow: var(--text-glow-shadow-dark-mode) !important; }
.hero-text { font-size: 1.5em; margin-bottom: var(--spacing-lg); max-width: 700px; margin-left: auto; margin-right: auto; }

.cta p { text-align: center; max-width: 650px; margin-left: auto; margin-right: auto; margin-bottom: var(--spacing-lg); font-size: 1.25em; color: rgba(255, 255, 255, 0.9); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); }

.button-container { display: flex; gap: var(--spacing-md); justify-content: center; margin-top: var(--spacing-lg); flex-wrap: wrap; }
.modern-button { background: var(--button-gradient-green); border: none; color: var(--text-light); padding: 14px 32px; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); font-size: var(--font-size-base); font-weight: 500; border-radius: var(--border-radius-lg); cursor: pointer; transition: all var(--transition-speed) var(--transition-cubic); position: relative; overflow: hidden; box-shadow: var(--shadow-green); transform: perspective(1px) translateZ(0); -webkit-tap-highlight-color: transparent; }
.modern-button:hover { text-decoration: none; }
.modern-button::before { content: ''; position: absolute; top: 0; left: -80%; z-index: 1; width: 60%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 100%); transform: skewX(-25deg); transition: left var(--transition-speed-slow) var(--transition-ease); pointer-events: none; }
.modern-button:hover::before { left: 120%; }
.modern-button:hover, .modern-button:focus-visible { transform: translateY(-3px); background: var(--button-gradient-green-hover); box-shadow: var(--shadow-green-hover); color: var(--text-light); outline: none; }
.modern-button:active { transform: translateY(0px); box-shadow: var(--shadow-green); transition-duration: var(--transition-speed-fast); }
.modern-button.primary { font-weight: 700; }
.modern-button.secondary { background: var(--secondary-color); box-shadow: 0 4px 15px rgba(0, 156, 74, 0.3); }
.modern-button.secondary:hover, .modern-button.secondary:focus-visible { background: var(--primary-color); box-shadow: 0 6px 20px rgba(0, 156, 74, 0.5); }
.modern-button.small { padding: 10px 24px; font-size: 0.9em; gap: var(--spacing-xs); }
.button-text, .modern-button i { position: relative; z-index: 2; }
.modern-button i { transition: transform var(--transition-speed) var(--transition-cubic); }
.modern-button:hover i { transform: scale(1.15) rotate(5deg); }
@keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(5, 135, 67, 0.7), var(--shadow-green); } 70% { box-shadow: 0 0 0 18px rgba(5, 135, 67, 0), var(--shadow-green); } 100% { box-shadow: 0 0 0 0 rgba(5, 135, 67, 0), var(--shadow-green); } }
.modern-button.pulse-effect-green { animation: pulseGreen 2.5s infinite cubic-bezier(0.66, 0, 0, 1); }
.modern-button.pulse-effect-green:hover, .modern-button.pulse-effect-green:focus-visible { animation: none; box-shadow: var(--shadow-green-hover); }

/* --- Service Grid --- */
.service-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-lg); padding: var(--spacing-lg) 0; }
.service { padding: var(--spacing-lg); text-align: center; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; background: var(--glass-bg-light); border: 1px solid var(--glass-border-light); border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); transition: background var(--transition-speed) ease, border-color var(--transition-speed) ease, transform var(--transition-speed) var(--transition-cubic), box-shadow var(--transition-speed) var(--transition-cubic); flex: 0 1 300px; min-width: 280px; }
body.dark-mode .service { background: var(--glass-bg-dark); border-color: var(--glass-border-dark); }
@keyframes pulseServiceIcon { 0%, 100% { filter: drop-shadow(0 0 4px var(--primary-color)); transform: scale(1); } 50% { filter: drop-shadow(0 0 8px var(--primary-color)); transform: scale(1.05); } }
@keyframes pulseServiceIconDark { 0%, 100% { filter: drop-shadow(0 0 4px var(--secondary-color)); transform: scale(1); } 50% { filter: drop-shadow(0 0 8px var(--secondary-color)); transform: scale(1.05); } }
.service-icon { display: inline-block; margin-bottom: var(--spacing-md); transition: transform var(--transition-speed) var(--transition-cubic); }
.service-icon i { font-size: 3.2em; color: var(--primary-color); animation: pulseServiceIcon 3s infinite ease-in-out; }
body.dark-mode .service-icon i { color: var(--secondary-color); animation-name: pulseServiceIconDark; }
.service:hover .service-icon i { animation-play-state: paused; transform: scale(1.1) rotate(-5deg); filter: drop-shadow(0 0 10px var(--primary-color)); }
body.dark-mode .service:hover .service-icon i { filter: drop-shadow(0 0 10px var(--secondary-color)); }
.service h3 { margin-bottom: var(--spacing-sm); font-size: 1.4em; }
.service > p:first-of-type { flex-grow: 1; }
.extra-info { font-size: 0.9em; color: var(--text-muted-light); margin-top: var(--spacing-sm); margin-bottom: var(--spacing-md); min-height: 3.4em; }
.service .modern-button { margin-top: auto; align-self: center; }

/* --- OS Logos --- */
.supported-os { margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: var(--border-width) solid rgba(255, 255, 255, 0.2); }
body.dark-mode .supported-os { border-top-color: rgba(0, 208, 98, 0.15); }
.supported-os-title { margin-bottom: var(--spacing-lg); font-weight: 500; }
.os-logo-scroller { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); }
.os-logo-track { display: flex; width: max-content; animation: scroll-logos 40s linear infinite; will-change: transform; }
.os-logo-scroller:hover .os-logo-track { animation-play-state: paused; }
@keyframes scroll-logos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.os-logo { height: 50px; width: 50px; object-fit: contain; margin: 0 var(--spacing-md); filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2)); transition: transform var(--transition-speed) var(--transition-ease), filter var(--transition-speed) var(--transition-ease); flex-shrink: 0; vertical-align: middle; }
.os-logo:hover { transform: scale(1.2); filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3)); }
body.dark-mode .os-logo { filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.4)); }
body.dark-mode .os-logo.apple-dark-invert { filter: invert(1) drop-shadow(2px 2px 3px rgba(0,0,0,0.4)); }
body.dark-mode .os-logo:hover { filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.5)); }
body.dark-mode .os-logo.apple-dark-invert:hover { filter: invert(1) drop-shadow(3px 3px 5px rgba(0,0,0,0.5)); }

/* --- Modals & Lightbox --- */
.modal { position: fixed; inset: 0; background: rgba(0, 20, 5, 0.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: var(--z-modal-backdrop); display: flex; align-items: center; justify-content: center; padding: var(--spacing-md); opacity: 0; transition: opacity var(--transition-speed) var(--transition-ease), backdrop-filter var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) ease; display: none; }
.modal.active { display: flex; opacity: 1; }
.modal-content { padding: var(--spacing-lg); max-width: 650px; width: 100%; text-align: left; position: relative; transform: scale(0.95) translateY(10px); opacity: 0; transition: transform var(--transition-speed) var(--transition-cubic), opacity var(--transition-speed) var(--transition-ease-out), background var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; z-index: var(--z-modal-content); margin: auto; border-radius: var(--border-radius-md); background: var(--glass-bg-light); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: var(--border-width) solid var(--glass-border-light); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: 90vh; }
body.dark-mode .modal-content { background: var(--glass-bg-dark); border-color: var(--glass-border-dark); box-shadow: var(--shadow-dark-lg); }
.modal.active .modal-content { transform: scale(1) translateY(0); opacity: 1; }
.modal-close { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); background: none; border: none; font-size: 2em; line-height: 1; color: var(--text-muted-light); cursor: pointer; transition: color var(--transition-speed) var(--transition-ease), transform var(--transition-speed) var(--transition-ease); padding: var(--spacing-xs); z-index: 1; }
.modal-close:hover, .modal-close:focus { color: var(--primary-color); transform: scale(1.2) rotate(90deg); outline: none; }
body.dark-mode .modal-close { color: var(--text-muted-dark); }
body.dark-mode .modal-close:hover, body.dark-mode .modal-close:focus { color: var(--accent-bright); }
.modal-title { margin-bottom: var(--spacing-md); padding-right: calc(var(--spacing-sm) + 30px); font-size: 1.6em; display: flex; align-items: center; gap: var(--spacing-sm); color: var(--primary-color); border-bottom: 1px solid var(--border-light); padding-bottom: var(--spacing-sm); flex-shrink: 0; }
body.dark-mode .modal-title { color: var(--secondary-color); border-bottom-color: var(--border-dark); }
.modal-body { margin-top: var(--spacing-md); margin-bottom: var(--spacing-lg); line-height: 1.8; overflow-y: auto; flex-grow: 1; padding-right: var(--spacing-sm); }
.modal-body ul { list-style-type: "\273A"; margin-left: var(--spacing-sm); padding-left: var(--spacing-sm); margin-top: var(--spacing-sm); }
.modal-body li { margin-bottom: var(--spacing-sm); padding-left: var(--spacing-xs); }
.modal-body li::marker { color: var(--primary-color); }
body.dark-mode .modal-body li::marker { color: var(--secondary-color); }
.modal-footer { border-top: var(--border-width) solid var(--border-light); padding-top: var(--spacing-md); margin-top: var(--spacing-lg); display: flex; justify-content: flex-end; gap: var(--spacing-sm); flex-shrink: 0; }
body.dark-mode .modal-footer { border-top-color: var(--border-dark); }
.modal-close-alt { background: var(--text-muted-light); color: var(--text-dark); box-shadow: none; }
.modal-close-alt:hover, .modal-close-alt:focus-visible { background: var(--text-muted-light); filter: brightness(0.9); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
body.dark-mode .modal-close-alt { background: var(--text-muted-dark); color: var(--text-dark); }
body.dark-mode .modal-close-alt:hover, body.dark-mode .modal-close-alt:focus-visible { filter: brightness(1.1); }

/* --- Stats --- */
.stats { background: var(--cta-gradient); color: var(--text-light); }
.stats p { color: rgba(255, 255, 255, 0.9); }
.stats-container { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-lg); padding: var(--spacing-lg) 0; max-width: 1000px; margin: var(--spacing-lg) auto 0; }
.stat-item { padding: var(--spacing-md) var(--spacing-sm); transition: transform var(--transition-speed) var(--transition-cubic), box-shadow var(--transition-speed) var(--transition-cubic), background-color var(--transition-speed) var(--transition-ease); background: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-md); border: var(--border-width) solid rgba(0, 208, 98, 0.2); text-align: center; flex: 0 1 180px; min-width: 150px; }
.stat-item:hover { background-color: rgba(0, 208, 98, 0.15); }
.stat-number { font-size: clamp(2em, 5vw, 2.8em); font-weight: 700; display: block; margin-bottom: var(--spacing-xs); color: var(--accent-bright); line-height: 1.1; }
.stat-label { font-size: 0.95em; font-weight: 400; display: block; color: rgba(255, 255, 255, 0.85); }

/* --- Gallery --- */
.gallery-container { display: flex; overflow-x: auto; gap: var(--spacing-md); padding: var(--spacing-md) 4px var(--spacing-lg); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--primary-color) rgba(5, 135, 67, 0.1); }
.gallery-container::-webkit-scrollbar { height: 8px; }
.gallery-container::-webkit-scrollbar-track { background: rgba(5, 135, 67, 0.1); border-radius: 4px;}
.gallery-container::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 4px; }
body.dark-mode .gallery-container { scrollbar-color: var(--secondary-color) rgba(0, 156, 74, 0.15); }
body.dark-mode .gallery-container::-webkit-scrollbar-track { background: rgba(0, 156, 74, 0.15); }
body.dark-mode .gallery-container::-webkit-scrollbar-thumb { background-color: var(--secondary-color); }
.gallery-item { flex: 0 0 clamp(220px, 30vw, 300px); position: relative; overflow: hidden; border-radius: var(--border-radius-md); cursor: pointer; scroll-snap-align: center; box-shadow: var(--shadow-interactive); outline-offset: 3px; transition: box-shadow var(--transition-speed) var(--transition-cubic), transform var(--transition-speed) ease; }
.gallery-item:hover { transform: scale(1.03); box-shadow: var(--shadow-interactive-hover); }
.gallery-item:focus-visible { outline: 2px solid var(--primary-color); }
body.dark-mode .gallery-item:focus-visible { outline-color: var(--secondary-color); }
.gallery-item img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform var(--transition-speed-slow) var(--transition-cubic); }
.gallery-item:hover img { transform: scale(1.08); }

.lightbox { position: fixed; inset: 0; background: rgba(0, 20, 5, 0.9); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: var(--z-lightbox-backdrop); align-items: center; justify-content: center; padding: var(--spacing-sm); opacity: 0; transition: opacity var(--transition-speed) var(--transition-ease), backdrop-filter var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) ease; display: none; }
.lightbox.active { display: flex; opacity: 1; }
.lightbox-image { display: block; max-width: calc(100% - var(--spacing-sm) * 2); max-height: calc(100% - var(--spacing-xl)); border-radius: var(--border-radius-sm); transition: transform var(--transition-speed) var(--transition-cubic), opacity var(--transition-speed) ease-out; transform: scale(0.9); opacity: 0; cursor: default; z-index: var(--z-lightbox-content); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.lightbox.active .lightbox-image { transform: scale(1); opacity: 1; transition-delay: 0.05s; }
.lightbox-close { position: absolute; top: var(--spacing-md); right: var(--spacing-md); color: rgba(200, 255, 220, 0.8); font-size: 2.5em; line-height: 1; background: none; border: none; cursor: pointer; transition: color var(--transition-speed) var(--transition-ease), transform var(--transition-speed) var(--transition-ease); padding: var(--spacing-sm); z-index: calc(var(--z-lightbox-content) + 1); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.lightbox-close:hover, .lightbox-close:focus { color: var(--accent-bright); transform: scale(1.2) rotate(90deg); outline: none; }

/* --- Testimonials --- */
#testimonials { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.carousel-container { position: relative; max-width: 800px; margin: var(--spacing-md) auto 0; min-height: 280px; padding: 0 50px; }
.testimonial-slider { display: flex; position: relative; min-height: inherit; overflow: hidden; border-radius: var(--border-radius-lg); }
.testimonial { flex-shrink: 0; width: 100%; padding: var(--spacing-lg); box-sizing: border-box; opacity: 0; position: absolute; top: 0; left: 0; transition: opacity var(--transition-speed-slow) var(--transition-cubic), visibility 0s var(--transition-speed-slow); visibility: hidden; }
.testimonial[aria-hidden="false"] { opacity: 1; position: relative; visibility: visible; transition: opacity var(--transition-speed-slow) var(--transition-cubic), visibility 0s 0s; }
.quote-icon { color: var(--primary-color); font-size: 2em; margin-bottom: var(--spacing-sm); display: inline-block; opacity: 0.8; }
body.dark-mode .quote-icon { color: var(--secondary-color); }
.testimonial blockquote { margin: 0; padding: 0; }
.testimonial blockquote p { margin-bottom: var(--spacing-md); font-style: italic; font-size: 1.1em; line-height: 1.6; }
.testimonial-author { margin-top: var(--spacing-md); font-style: normal; font-weight: 500; color: var(--primary-color); text-align: right; font-size: 0.95em; }
body.dark-mode .testimonial-author { color: var(--secondary-color); }
.testimonial-author cite { font-style: normal; }
.carousel-control { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(5, 135, 67, 0.5); border: none; color: var(--text-light); padding: 0; width: 44px; height: 44px; border-radius: var(--border-radius-circle); cursor: pointer; transition: all var(--transition-speed) var(--transition-cubic); z-index: var(--z-content); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; }
.carousel-control i { font-size: 1.2em; line-height: 1; }
.carousel-prev { left: 0; } .carousel-next { right: 0; }
.carousel-control:hover, .carousel-control:focus { background: var(--primary-color); transform: translateY(-50%) scale(1.1); box-shadow: var(--shadow-md); outline: none; }
.carousel-control:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
body.dark-mode .carousel-control { background: rgba(0, 156, 74, 0.5); }
body.dark-mode .carousel-control:hover, body.dark-mode .carousel-control:focus { background: var(--secondary-color); }

/* --- Grid Elements --- */
.case-study-grid, .blog-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); padding: var(--spacing-lg) 0; }
.case-study, .blog-post-preview { padding: var(--spacing-lg); display: flex; flex-direction: column; background: var(--glass-bg-light); border: 1px solid var(--glass-border-light); border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); transition: background var(--transition-speed) ease, border-color var(--transition-speed) ease, transform var(--transition-speed) var(--transition-cubic), box-shadow var(--transition-speed) var(--transition-cubic); }
body.dark-mode .case-study, body.dark-mode .blog-post-preview { background: var(--glass-bg-dark); border-color: var(--glass-border-dark); }
.case-study h3, .blog-post-preview h3 { margin-bottom: var(--spacing-sm); color: var(--primary-color); font-size: 1.3em; }
body.dark-mode .case-study h3, body.dark-mode .blog-post-preview h3 { color: var(--secondary-color); }
.case-study p, .blog-post-preview p { flex-grow: 1; margin-bottom: var(--spacing-md); }
.case-study .modern-button, .blog-post-preview .modern-button { margin-top: auto; align-self: center; }

/* --- Timelines --- */
.event-timeline { display: flex; flex-direction: column; gap: var(--spacing-lg); margin-top: var(--spacing-lg); position: relative; padding-left: 60px; max-width: 850px; margin-left: auto; margin-right: auto; }
.event-timeline::before { content: ''; position: absolute; top: 10px; left: 20px; width: 4px; height: calc(100% - 20px); background: var(--primary-color); border-radius: 2px; opacity: 0.3; }
body.dark-mode .event-timeline::before { background: var(--secondary-color); opacity: 0.4; }
.event-card { position: relative; padding: var(--spacing-md); display: grid; grid-template-columns: 80px 1fr; gap: var(--spacing-md); align-items: start; background: rgba(5, 135, 67, 0.04); border-radius: var(--border-radius-md); }
body.dark-mode .event-card { background: rgba(0, 156, 74, 0.08); }
.event-card::after { content: ''; position: absolute; top: 18px; left: -42px; width: 18px; height: 18px; background: var(--secondary-color); border: 4px solid var(--primary-color); border-radius: var(--border-radius-circle); z-index: var(--z-base); transition: transform var(--transition-speed) var(--transition-cubic); }
body.dark-mode .event-card::after { background: var(--primary-color); border-color: var(--secondary-color); }
.event-card:hover::after { transform: scale(1.2); }
.event-date { grid-column: 1 / 2; font-weight: bold; color: var(--primary-color); text-align: right; padding-top: 3px; font-size: 0.9em; white-space: normal; }
body.dark-mode .event-date { color: var(--secondary-color); }
.event-content { grid-column: 2 / 3; }
.event-content h3 { margin-bottom: var(--spacing-xs); font-size: 1.3em; }
.event-content .modern-button { margin-top: var(--spacing-md); }

.timeline { position: relative; padding-left: 50px; margin-top: var(--spacing-lg); max-width: 700px; margin-left: auto; margin-right: auto; }
.timeline::before { content: ''; position: absolute; top: 5px; left: 18px; width: 4px; height: calc(100% - 10px); background: var(--primary-color); border-radius: 2px; opacity: 0.2; }
body.dark-mode .timeline::before { background: var(--secondary-color); opacity: 0.3; }
.timeline-item { position: relative; padding: var(--spacing-xs) 0 var(--spacing-lg) var(--spacing-lg); border: none; background: transparent; box-shadow: none; margin-bottom: 0; }
.timeline-item::after { content: ''; position: absolute; top: 9px; left: -9px; width: 14px; height: 14px; background: var(--secondary-color); border: 3px solid var(--primary-color); border-radius: var(--border-radius-circle); z-index: var(--z-base); transition: transform var(--transition-speed) var(--transition-cubic); }
body.dark-mode .timeline-item::after { background: var(--primary-color); border-color: var(--secondary-color); }
.timeline-item:hover::after { transform: scale(1.2); }
.timeline-year { font-weight: bold; color: var(--primary-color); display: inline-block; margin-bottom: var(--spacing-xs); font-size: 1.2em; }
body.dark-mode .timeline-year { color: var(--secondary-color); }
.timeline-description { font-size: 1em; line-height: 1.6; }

/* --- Contact & Forms --- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); max-width: 1000px; margin: var(--spacing-lg) auto 0; }
.contact-info h3, .contact-form-container h3 { margin-bottom: var(--spacing-lg); font-weight: 500; font-size: 1.5em; }
.contact-item { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-sm) 0; border-bottom: var(--border-width) solid var(--border-light); }
body.dark-mode .contact-item { border-bottom-color: var(--border-dark); }
.contact-item:last-child { border-bottom: none; }
.contact-item i { color: var(--primary-color); font-size: 1.5em; margin-top: 5px; flex-shrink: 0; width: 1.5em; text-align: center; }
body.dark-mode .contact-item i { color: var(--secondary-color); }
.contact-item strong { display: block; margin-bottom: var(--spacing-xs); font-weight: 500; }
.contact-item address { font-style: normal; line-height: 1.6; }
.contact-item address a { font-size: 0.9em; display: inline-block; margin-top: var(--spacing-xs); }
.contact-form { display: grid; gap: var(--spacing-md); }
.form-group { position: relative; display: flex; flex-direction: column; }
.form-label { display: block; font-weight: 500; margin-bottom: var(--spacing-xs); }
.form-input, .form-textarea { width: 100%; padding: 14px 16px; border: var(--border-width) solid var(--border-light); border-radius: var(--border-radius-sm); font-size: var(--font-size-base); background: var(--bg-surface-light); color: var(--text-dark); transition: border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease), background var(--transition-speed) var(--transition-ease); line-height: 1.5; }
body.dark-mode .form-input, body.dark-mode .form-textarea { background: var(--bg-surface-dark); color: var(--text-light); border-color: var(--border-dark); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted-light); opacity: 0.7; }
body.dark-mode .form-input::placeholder, body.dark-mode .form-textarea::placeholder { color: var(--text-muted-dark); }
.form-input:focus, .form-textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(5, 135, 67, 0.25); outline: none; background: var(--bg-surface-light); }
body.dark-mode .form-input:focus, body.dark-mode .form-textarea:focus { border-color: var(--secondary-color); background: var(--bg-surface-dark); box-shadow: 0 0 0 3px rgba(0, 156, 74, 0.35); }
.form-textarea { resize: vertical; min-height: 140px; }
.form-input.invalid, .form-textarea.invalid { border-color: var(--error-color) !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important; }
.form-error { color: var(--error-color); font-size: 0.85em; margin-top: var(--spacing-xs); display: none; }
.form-error:not(:empty) { display: block; }
.form-footer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); margin-top: var(--spacing-xs); }
.form-submit-button { width: auto; justify-self: start; }
.form-submit-button:disabled { opacity: 0.7; cursor: not-allowed; background: var(--text-muted-light); box-shadow: none; }
.form-submit-button:disabled::before { display: none; }
body.dark-mode .form-submit-button:disabled { background: var(--text-muted-dark); }
.form-status { margin-top: 0; font-weight: 500; display: none; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); width: 100%; }
.form-status.loading { color: var(--text-muted-light); }
.form-status.success { color: var(--success-color); background-color: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.2); }
.form-status.error { color: var(--error-color); background-color: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.2); }
body.dark-mode .form-status.success { color: #a3e9a4; background-color: rgba(40, 167, 69, 0.2); border-color: rgba(40, 167, 69, 0.4); }
body.dark-mode .form-status.error { color: #f8d7da; background-color: rgba(220, 53, 69, 0.2); border-color: rgba(220, 53, 69, 0.4); }

/* --- Map --- */
#map { width: 100%; height: 400px; margin: var(--spacing-lg) 0; border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); border: var(--border-width) solid var(--border-light); z-index: var(--z-base); background-color: #eee; }
body.dark-mode #map { border-color: var(--border-dark); background-color: #333; }
.leaflet-popup-content-wrapper { border-radius: var(--border-radius-sm) !important; background: var(--bg-surface-light) !important; color: var(--text-dark) !important; box-shadow: var(--shadow-md) !important; }
body.dark-mode .leaflet-popup-content-wrapper { background: var(--bg-surface-dark) !important; color: var(--text-light) !important; box-shadow: var(--shadow-dark-md) !important; }
.leaflet-popup-content { font-size: 0.95em; line-height: 1.6; margin: 10px 15px !important; }
.leaflet-popup-content strong { color: var(--primary-color); }
body.dark-mode .leaflet-popup-content strong { color: var(--secondary-color); }
.leaflet-popup-tip { background: var(--bg-surface-light) !important; box-shadow: var(--shadow-sm) !important; }
body.dark-mode .leaflet-popup-tip { background: var(--bg-surface-dark) !important; box-shadow: var(--shadow-dark-sm) !important; }
.leaflet-control-attribution { font-size: 0.8em !important; background: rgba(255, 255, 255, 0.7) !important; padding: 2px 6px !important; border-radius: var(--border-radius-sm) 0 0 0 !important; }
body.dark-mode .leaflet-control-attribution { background: rgba(0, 0, 0, 0.6) !important; color: rgba(255,255,255,0.7) !important; }
body.dark-mode .leaflet-control-attribution a { color: #aaa !important; }

/* --- Footer & Floating Elements --- */
.main-footer { margin-top: var(--spacing-xl); padding: var(--spacing-lg) var(--spacing-md); text-align: center; border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; border-bottom: none; border-left: none; border-right: none; color: var(--text-muted-light); opacity: 0; transform: translateY(40px); transition: opacity var(--transition-speed-slow) var(--transition-ease-out), transform var(--transition-speed-slow) var(--transition-cubic), background var(--transition-speed) ease, border-color var(--transition-speed) ease, backdrop-filter var(--transition-speed) ease; background: var(--glass-bg-light); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: var(--border-width) solid var(--glass-border-light); }
.main-footer.visible { opacity: 1; transform: translateY(0); }
body.dark-mode .main-footer { color: var(--text-muted-dark); background: var(--glass-bg-dark); border-top-color: var(--glass-border-dark); }
.footer-content { max-width: 1100px; margin: 0 auto; }
.copyright { font-size: 0.9em; margin-bottom: var(--spacing-md); }
.social-links { margin: var(--spacing-md) 0; display: flex; justify-content: center; gap: var(--spacing-lg); }
.social-links a { color: var(--text-muted-light); font-size: 1.8em; transition: all var(--transition-speed) var(--transition-cubic); display: inline-block; }
body.dark-mode .social-links a { color: var(--text-muted-dark); }
.social-links a:hover, .social-links a:focus { transform: scale(1.15) rotate(5deg); }

.floating-elements { position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg); z-index: var(--z-floating); display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-sm); }
.floating-buttons { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.floating-action-button { background: var(--secondary-color); color: var(--text-light); border: none; border-radius: var(--border-radius-circle); width: 50px; height: 50px; font-size: 1.4em; cursor: pointer; transition: all var(--transition-speed) var(--transition-cubic); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-interactive); }
.floating-action-button i { line-height: 1; }
.floating-action-button:hover, .floating-action-button:focus { transform: scale(1.15) rotate(15deg); box-shadow: var(--shadow-interactive-hover); background: var(--primary-color); outline: none; }
.floating-action-button:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
body.dark-mode .floating-action-button { background-color: var(--secondary-color); box-shadow: var(--shadow-dark-md); color: var(--text-dark); }
body.dark-mode .floating-action-button:hover, body.dark-mode .floating-action-button:focus { background-color: var(--primary-color); box-shadow: var(--shadow-dark-lg); color: var(--text-light); }
.floating-action-button.music-button { background: var(--primary-color); transition: background-color var(--transition-speed) ease-out; }
.floating-action-button.music-button.muted { background: var(--text-muted-light); color: var(--text-dark); }
body.dark-mode .floating-action-button.music-button { background: var(--secondary-color); }
body.dark-mode .floating-action-button.music-button.muted { background: #555; color: var(--text-muted-dark); }
.scroll-top-btn { background: var(--primary-color); }
.scroll-top-btn:hover, .scroll-top-btn:focus { background: var(--secondary-color); }
body.dark-mode .scroll-top-btn { background: var(--secondary-color); color: var(--text-dark); }
body.dark-mode .scroll-top-btn:hover, body.dark-mode .scroll-top-btn:focus { background: var(--primary-color); color: var(--text-light); }

/* ==========================================================================
   9. Responsive Design (Consolidated)
   ========================================================================== */

/* Tablet (Landscape) / Small Desktops */
@media (min-width: 768px) {
    .contact-grid { grid-template-columns: minmax(280px, 1fr) 2fr; }
}

/* Tablet (Portrait) / Large Phones */
@media (max-width: 992px) {
    :root { --font-size-base: 16px; --spacing-lg: 2rem; --spacing-xl: 3rem; }
    section { width: 92%; padding: var(--spacing-lg) var(--spacing-sm); max-width: 95%; }
    .stats-container { gap: var(--spacing-md); flex-basis: 160px; }
    .service-grid { gap: var(--spacing-md); }
    .contact-grid { gap: var(--spacing-lg); }
    #header-brand-title { font-size: 2em; }
    #typing-effect { font-size: 1.1em; height: 1.3em; min-height: 1.3em; line-height: 1.3em;}
    .logo-container { width: 55px; height: 55px; }
    .css-logo-text { font-size: 1.4em; }
    .tech-trivia-container { display: none; }
    .hero-title { font-size: clamp(2.2em, 6vw, 3.5em); }
    .hero-text { font-size: 1.3em; }
    .scrolling-text-content { font-size: 1em; }
}

/* Phones */
@media (max-width: 768px) {
    :root { --font-size-base: 15px; }
    h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; }
    #header-brand-title { font-size: 1.8em; }
    .hamburger { display: inline-block; }
    .main-nav.desktop-nav { display: none; }
    .scrolling-text-container { padding: var(--spacing-sm) 0; }
    .scrolling-text-content { font-size: 0.95em; animation-duration: 25s; }
    .hero { min-height: 60vh; }
    .hero-title { font-size: clamp(2em, 5.5vw, 3em); }
    .hero-text { font-size: 1.2em; }
    .service-grid { grid-template-columns: 1fr; } 
    .case-study-grid, .blog-preview-grid { grid-template-columns: 1fr; }
    .stats-container { gap: var(--spacing-md); flex-basis: 140px; }
    .gallery-item { flex-basis: clamp(180px, 50vw, 240px); }
    .event-timeline { padding-left: 45px; }
    .event-card { grid-template-columns: 60px 1fr; }
    .event-card::after { left: -32px; width: 14px; height: 14px; border-width: 3px; }
    .event-date { font-size: 0.85em; }
    .floating-elements { bottom: var(--spacing-md); right: var(--spacing-md); }
    .floating-action-button { width: 45px; height: 45px; font-size: 1.3em; }
    .timeline { padding-left: 40px; }
    .timeline-item::after { left: -7px; }
    .carousel-container { padding-left: 40px; padding-right: 40px; }
    .carousel-prev { left: 5px; transform: translateY(-50%); }
    .carousel-next { right: 5px; transform: translateY(-50%); }
    section { max-width: 98%; }
}

/* Small Phones */
@media (max-width: 480px) {
    :root { --font-size-base: 14px; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2.5rem;}
    h1 { font-size: 1.8em; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; }
    #header-brand-title { font-size: 1.6em; }
    #typing-effect { font-size: 0.95em; height: 1.2em; min-height: 1.2em; line-height: 1.2em; }
    .header-main { padding: var(--spacing-sm) var(--spacing-sm); }
    .header-top-bar { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
    .logo-container { width: 45px; height: 45px; }
    .css-logo-text { font-size: 1.2em; }
    #darkModeToggle { font-size: 0.8em; padding: 5px 10px; min-width: auto; gap: 4px; }
    .main-nav.mobile-nav { width: 90%; max-width: 280px; }
    .hero { min-height: 55vh; }
    .hero-title { font-size: clamp(1.8em, 5vw, 2.5em); }
    .hero-text { font-size: 1.1em; }
    .button-container { gap: var(--spacing-sm); }
    .modern-button { padding: 12px 24px; font-size: 0.95em; }
    .modern-button.small { padding: 8px 18px; }
    .stats-container { gap: var(--spacing-sm); flex-basis: 120px; }
    .stat-number { font-size: 2em; }
    .os-logo-track { animation-duration: 30s; }
    .os-logo { height: 40px; width: 40px; margin: 0 var(--spacing-sm); }
    .carousel-control { width: 35px; height: 35px; }
    .floating-elements { bottom: var(--spacing-sm); right: var(--spacing-sm); gap: var(--spacing-xs); }
    .floating-action-button { width: 40px; height: 40px; font-size: 1.2em; }
    .contact-grid { gap: var(--spacing-lg); }
    .contact-info, .contact-form-container { padding: var(--spacing-sm); }
}

@media (max-width: 500px) {
    .carousel-container { padding: 0; }
    .carousel-prev { left: 5px; transform: translateY(-50%); }
    .carousel-next { right: 5px; transform: translateY(-50%); }
}