/* CSS Variables */
 :root {
     /* Brand Colors */
     --primary: #059669;
     --primary-light: #10b981;
     --primary-dark: #047857;
     --secondary: #34d399;
     --accent: #f59e0b;

     /* Neutral Colors */
     --white: #ffffff;
     --gray-50: #f8fafc;
     --gray-100: #f1f5f9;
     --gray-200: #e2e8f0;
     --gray-300: #cbd5e1;
     --gray-400: #94a3b8;
     --gray-500: #64748b;
     --gray-600: #475569;
     --gray-700: #334155;
     --gray-800: #1e293b;
     --gray-900: #0f172a;

     /* Text Colors */
     --text-primary: var(--gray-800);
     --text-secondary: var(--gray-600);
     --text-light: var(--gray-400);

     /* Backgrounds */
     --bg-primary: var(--white);
     --bg-secondary: var(--gray-50);
     --bg-dark: var(--gray-900);

     /* Spacing */
     --space-1: 0.25rem;
     --space-2: 0.5rem;
     --space-3: 0.75rem;
     --space-4: 1rem;
     --space-5: 1.25rem;
     --space-6: 1.5rem;
     --space-8: 2rem;
     --space-10: 2.5rem;
     --space-12: 3rem;
     --space-16: 4rem;
     --space-20: 5rem;
     --space-24: 6rem;

     /* Font Sizes */
     --text-xs: 0.75rem;
     --text-sm: 0.875rem;
     --text-base: 1rem;
     --text-lg: 1.125rem;
     --text-xl: 1.25rem;
     --text-2xl: 1.5rem;
     --text-3xl: 1.875rem;
     --text-4xl: 2.25rem;
     --text-5xl: 3rem;
     --text-6xl: 3.75rem;

     /* Border Radius */
     --radius-sm: 0.25rem;
     --radius-md: 0.5rem;
     --radius-lg: 0.75rem;
     --radius-xl: 1rem;
     --radius-2xl: 1.5rem;
     --radius-full: 9999px;

     /* Shadows */
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

     /* 3D Shadows */
     --shadow-3d: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
     --shadow-3d-hover: 0 30px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2);

     /* Transitions */
     --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

     /* Professional Spacing */
     --section-padding: var(--space-20);
     --card-padding: var(--space-8);
     --card-gap: var(--space-6);
 }

 /* Reset */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
 }

 /* Enhanced smooth scrolling with custom easing */
 html {
     scroll-behavior: smooth;
     scroll-padding-top: 70px;
     /* Account for sticky navbar */
 }

 /* Section transition animations */
 section {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }

 section.animate-in {
     opacity: 1;
     transform: translateY(0);
 }

 /* Staggered animation for section children */
 section.animate-in .container>* {
     animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

 section.animate-in .container>*:nth-child(1) {
     animation-delay: 0.1s;
 }

 section.animate-in .container>*:nth-child(2) {
     animation-delay: 0.2s;
 }

 section.animate-in .container>*:nth-child(3) {
     animation-delay: 0.3s;
 }

 section.animate-in .container>*:nth-child(4) {
     animation-delay: 0.4s;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Professional navbar */
 .navbar {
     position: fixed !important;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     width: 100%;
     transform: translateY(0);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }

 .navbar.hidden {
     transform: translateY(-100%);
 }

 /* Add padding to body to account for fixed navbar */
 body {
     padding-top: 70px;
     font-family: 'Tajawal', 'Cairo', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
     color: var(--text-primary);
     background: var(--bg-primary);
     overflow-x: hidden;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 /* English content uses Cairo first */
 html[lang="en"] body,
 *:lang(en) {
     font-family: 'Cairo', 'Tajawal', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
 }

 /* Ensure form controls inherit font */
 button,
 input,
 select,
 textarea {
     font-family: inherit;
 }

 /* 3D Background Canvas */
 #three-canvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     pointer-events: none;
 }

 /* Loading Screen */
 .loading-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     transition: opacity 0.5s ease;
 }

 .loading-screen.hidden {
     opacity: 0;
     pointer-events: none;
 }

 .loading-content {
     text-align: center;
     color: var(--white);
 }

 .loading-logo {
     width: 80px;
     height: 80px;
     margin: 0 auto var(--space-6);
     animation: logoFloat 3s ease-in-out infinite;
 }

 .loading-logo img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     filter: brightness(0) invert(1);
 }

 .loading-text {
     font-size: var(--text-lg);
     font-weight: 600;
     margin-bottom: var(--space-6);
 }

 .loading-bar {
     width: 200px;
     height: 4px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: var(--radius-full);
     overflow: hidden;
 }

 .loading-progress {
     height: 100%;
     background: var(--white);
     border-radius: var(--radius-full);
     animation: loadingProgress 2s ease-in-out;
 }

 /* Navigation - Professional Clean Design */
 .navbar {
     position: fixed !important;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     width: 100%;
     transform: translateY(0);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }

 .navbar.scrolled {
     background: rgba(255, 255, 255, 0.98) !important;
     backdrop-filter: blur(10px) !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
     border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
 }


 .nav-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 var(--space-6);
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 70px;
     position: relative;
     z-index: 10;
 }

 .nav-brand {
     display: flex;
     align-items: center;
     gap: var(--space-2);
 }

 /* RTL Support for nav-brand */
 [dir="rtl"] .nav-brand {
     margin-right: 0;
     margin-left: auto;
 }

 [dir="ltr"] .nav-brand {
     margin-left: 0;
     margin-right: auto;
 }


 .nav-brand {
     background: transparent;
     border-radius: 0;
     padding: 0 var(--space-6);
     height: 100%;
     display: flex;
     align-items: center;
     margin-left: 0;
 }

 [dir="rtl"] .nav-brand {
     margin-left: 0;
     margin-right: 0;
 }

 [dir="ltr"] .nav-brand {
     margin-left: 0;
     margin-right: 0;
 }

 .nav-brand .logo {
     height: 130px;
     transition: opacity 0.2s ease;
     filter: none;
     background: transparent;
     border-radius: 0;
     padding: 0;
     border: none;
     box-shadow: none;
     opacity: 1;
 }

 .nav-brand .logo:hover {
     opacity: 0.8;
     transform: none;
     filter: none;
 }

 .nav-menu {
     display: flex;
     list-style: none;
     gap: var(--space-2);
     font-size: var(--text-base);
     font-weight: 500;
     align-items: center;
 }

 .nav-link {
     text-decoration: none;
     color: var(--gray-700);
     font-weight: 500;
     font-size: var(--text-base);
     padding: var(--space-2) var(--space-4);
     border-radius: var(--radius-md);
     transition: color 0.2s ease, background 0.2s ease;
     position: relative;
 }

 .nav-link:hover {
     color: var(--primary);
     background: rgba(5, 150, 105, 0.05);
 }

 .navbar.scrolled .nav-link {
     color: var(--gray-700);
 }

 .navbar.scrolled .nav-link:hover {
     color: var(--primary);
     background: rgba(5, 150, 105, 0.05);
 }

 .nav-link::after {
     display: none;
 }

 .nav-link:hover::after {
     display: none;
 }

 .nav-actions {
     display: flex;
     align-items: center;
     gap: var(--space-4);
 }

 .lang-toggle {
     background: transparent;
     color: var(--gray-700);
     border: 1px solid var(--gray-300);
     padding: var(--space-2) var(--space-4);
     border-radius: var(--radius-md);
     font-weight: 500;
     font-size: var(--text-sm);
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
 }

 .lang-toggle:hover {
     color: var(--primary);
     border-color: var(--primary);
     background: rgba(5, 150, 105, 0.05);
 }

 .lang-toggle::before {
     display: none;
 }

 .mobile-toggle {
     display: none;
     flex-direction: column;
     gap: 4px;
     background: none;
     border: none;
     cursor: pointer;
     padding: var(--space-2);
     filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
 }

 .mobile-toggle span {
     width: 25px;
     height: 3px;
     background: var(--white);
     border-radius: 2px;
     transition: var(--transition);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
 }

 /* Hero Section - ULTRA STUNNING ENHANCED */
 .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
     margin-top: 0;
     padding-top: var(--space-8);
     box-shadow:
         inset 0 0 150px rgba(110, 231, 183, 0.15),
         inset 0 0 300px rgba(5, 150, 105, 0.1);
 }

 /* Ultra Stunning Background Image */
 .hero-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
     overflow: hidden;
 }

 .hero-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2125&q=80') center/cover no-repeat;
     will-change: transform;
     animation: heroImageParallax 20s ease-in-out infinite;
     filter: none;
 }

 @keyframes heroImageParallax {

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

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

 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:
         linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(5, 150, 105, 0.05) 30%, rgba(16, 185, 129, 0.03) 50%, rgba(5, 150, 105, 0.05) 70%, rgba(0, 0, 0, 0.25) 100%);
     animation: none;
     z-index: 2;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     filter: none;
 }

 .hero-bg::before {
     display: none;
 }

 @keyframes backgroundPulse {

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

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

 .hero-particles {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 4;
     background:
         radial-gradient(3px 3px at 30px 40px, rgba(255, 255, 255, 0.4), transparent),
         radial-gradient(2px 2px at 60px 90px, rgba(5, 150, 105, 0.5), transparent),
         radial-gradient(2px 2px at 120px 50px, rgba(16, 185, 129, 0.4), transparent),
         radial-gradient(1px 1px at 180px 120px, rgba(52, 211, 153, 0.3), transparent),
         radial-gradient(1px 1px at 250px 80px, rgba(255, 255, 255, 0.25), transparent);
     background-repeat: repeat;
     background-size: 250px 250px, 350px 350px, 450px 450px, 550px 550px, 600px 600px;
     animation: none;
     opacity: 0.6;
 }

 .hero-shapes {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 3;
 }

 .floating-shape {
     position: absolute;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(5, 150, 105, 0.3), rgba(16, 185, 129, 0.2), transparent 70%);
     animation: none;
     backdrop-filter: none;
     filter: none;
     box-shadow: 0 0 40px rgba(5, 150, 105, 0.4);
 }

 .shape-1 {
     width: 150px;
     height: 150px;
     top: 15%;
     left: 8%;
     animation-delay: 0s;
     animation-duration: 18s;
 }

 .shape-2 {
     width: 200px;
     height: 200px;
     top: 55%;
     right: 12%;
     animation-delay: -5s;
     animation-duration: 22s;
 }

 .shape-3 {
     width: 120px;
     height: 120px;
     top: 75%;
     left: 25%;
     animation-delay: -10s;
     animation-duration: 20s;
 }

 .shape-4 {
     width: 180px;
     height: 180px;
     top: 25%;
     right: 35%;
     animation-delay: -15s;
     animation-duration: 24s;
 }

 .hero-content {
     position: relative;
     z-index: 10;
     max-width: 1000px;
     margin: 0 auto;
     padding: calc(var(--space-20) + 90px) var(--space-6) var(--space-20) var(--space-6);
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     min-height: 100vh;
     justify-content: center;
 }

 /* ULTRA FANTASTIC HERO BADGE */
 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: var(--space-2);
     background: var(--primary);
     color: var(--white);
     padding: var(--space-2) var(--space-5);
     border-radius: var(--radius-full);
     margin-bottom: var(--space-6);
     font-size: var(--text-sm);
     font-weight: 600;
     box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
     position: relative;
     overflow: visible;
     border: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     letter-spacing: 0.5px;
     text-transform: uppercase;
 }

 .hero-badge:hover {
     background: var(--primary-dark);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
 }

 .badge-glow,
 .badge-particles {
     display: none;
 }

 .badge-icon {
     font-size: var(--text-base);
 }

 /* Professional Hero Title */
 .hero-title {
     font-size: clamp(2.5rem, 6vw, 4rem);
     font-weight: 800;
     line-height: 1.2;
     margin-bottom: var(--space-6);
     color: #ffffff;
     position: relative;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     letter-spacing: -0.02em;
 }

 @keyframes titleBreath {

     0%,
     100% {
         text-shadow:
             0 0 10px rgba(255, 255, 255, 0.8),
             0 0 20px rgba(5, 150, 105, 0.6),
             0 0 30px rgba(110, 231, 183, 0.4),
             0 0 50px rgba(5, 150, 105, 0.3),
             0 4px 20px rgba(0, 0, 0, 0.9);
     }

     50% {
         text-shadow:
             0 0 15px rgba(255, 255, 255, 1),
             0 0 30px rgba(5, 150, 105, 0.8),
             0 0 40px rgba(110, 231, 183, 0.6),
             0 0 70px rgba(5, 150, 105, 0.5),
             0 6px 25px rgba(0, 0, 0, 0.95);
     }
 }

 .title-line-1 {
     display: block;
     animation: fadeInUp 0.8s ease-out;
     margin-bottom: var(--space-2);
 }

 .title-line-2 {
     display: block;
     animation: fadeInUp 0.8s ease-out 0.2s both;
 }

 .title-word {
     display: inline-block;
     animation: none;
     text-shadow: none;
 }

 .title-accent {
     color: #ffffff;
     animation: none;
     text-shadow: none;
 }

 .title-highlight {
     color: #ffffff;
     animation: none;
     position: relative;
     text-shadow: none;
 }

 .title-highlight::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     border-radius: 2px;
     animation: underlineGlow 2s ease-in-out infinite;
 }

 /* ULTRA FANTASTIC SUBTITLE */
 .hero-subtitle-container {
     margin-bottom: var(--space-6);
     animation: fadeInUp 0.6s ease-out;
 }

 .hero-subtitle {
     font-size: clamp(1.25rem, 3vw, 1.75rem);
     color: #ffffff !important;
     font-weight: 700;
     line-height: 1.5;
     text-shadow: none;
     will-change: text-shadow;
     letter-spacing: 0.02em;
 }

 .subtitle-word {
     display: inline-block;
     margin-left: var(--space-2);
     animation: wordFloat 4s ease-in-out infinite;
 }

 .subtitle-word.accent {
     color: #6ee7b7;
     font-weight: 700;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
 }

 .subtitle-word.highlight {
     color: #6ee7b7;
     font-weight: 800;
     animation: wordFloat 4s ease-in-out infinite 0.5s;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
 }

 /* ULTRA ENHANCED DESCRIPTION */
 .hero-description {
     margin-bottom: var(--space-10);
     animation: fadeInUp 0.6s ease-out;
 }

 /* Ensure ALL text in hero description is white */
 .hero-description,
 .hero-description *,
 .hero-description p,
 .hero-description span,
 .hero-text p,
 .hero-text .description-text,
 .hero-content p,
 .hero-content .description-text {
     color: #ffffff !important;
     text-shadow: none !important;
 }

 .description-text {
     font-size: clamp(1rem, 2.5vw, 1.25rem);
     color: #ffffff !important;
     line-height: 1.8;
     margin-bottom: var(--space-8);
     text-shadow: none !important;
     font-weight: 600 !important;
     letter-spacing: 0.01em;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

 .description-highlights {
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-4);
     justify-content: center;
     margin-top: var(--space-6);
 }

 .highlight-item {
     display: inline-flex;
     align-items: center;
     gap: var(--space-3);
     background:
         linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(5, 150, 105, 0.1)),
         rgba(255, 255, 255, 0.1);
     color: #ffffff;
     padding: var(--space-3) var(--space-6);
     border-radius: var(--radius-full);
     font-size: var(--text-base);
     font-weight: 700;
     border: 1px solid rgba(255, 255, 255, 0.25);
     animation: highlightPulse 3s ease-in-out infinite;
     backdrop-filter: blur(10px) saturate(180%);
     -webkit-backdrop-filter: blur(10px) saturate(180%);
     box-shadow:
         0 4px 15px rgba(0, 0, 0, 0.3),
         0 0 20px rgba(5, 150, 105, 0.2),
         inset 0 1px 0 rgba(255, 255, 255, 0.2);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 .highlight-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.6s ease;
 }

 .highlight-item:hover {
     transform: translateY(-3px) scale(1.05);
     background:
         linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(5, 150, 105, 0.15)),
         rgba(255, 255, 255, 0.15);
     box-shadow:
         0 8px 25px rgba(0, 0, 0, 0.4),
         0 0 30px rgba(5, 150, 105, 0.3);
     border-color: rgba(255, 255, 255, 0.4);
 }

 .highlight-item:hover::before {
     left: 100%;
 }

 .highlight-item:nth-child(2) {
     animation-delay: 0.5s;
 }

 .highlight-item:nth-child(3) {
     animation-delay: 1s;
 }

 /* ULTRA STUNNING ACTION BUTTONS */
 .hero-actions {
     display: flex;
     gap: var(--space-4);
     margin-bottom: var(--space-12);
     justify-content: center;
     flex-wrap: wrap;
 }

 .btn-stunning {
     position: relative;
     overflow: hidden;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     border: none;
 }

 .btn-stunning::before,
 .btn-stunning .btn-bg,
 .btn-stunning .btn-particles,
 .btn-stunning .btn-border-effect {
     display: none;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: var(--space-4) var(--space-8);
     border-radius: var(--radius-md);
     font-weight: 600;
     font-size: var(--text-base);
     text-decoration: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border: none;
     cursor: pointer;
     position: relative;
     overflow: hidden;
 }

 /* Make buttons work as links */
 a.btn {
     text-decoration: none;
     display: inline-flex;
 }

 .btn-primary {
     background: var(--primary);
     color: var(--white);
     box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
     text-shadow: none;
     z-index: 2;
     font-weight: 600;
     letter-spacing: 0.3px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .btn-primary:hover {
     background: var(--primary-dark);
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(5, 150, 105, 0.4);
 }

 .btn-secondary {
     background: transparent;
     color: var(--primary);
     border: 2px solid var(--primary);
     box-shadow: none;
     text-shadow: none;
     z-index: 2;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     font-weight: 600;
     letter-spacing: 0.3px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .btn-secondary:hover {
     background: var(--primary);
     color: var(--white);
     transform: translateY(-2px);
     box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
     border-color: var(--primary);
 }

 .btn-glow {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     border-radius: var(--radius-full);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .btn-primary:hover .btn-glow {
     opacity: 0.2;
 }

 /* ENHANCED STATS */
 .hero-stats {
     display: flex;
     gap: var(--space-8);
     animation: fadeInUp 1.5s ease-out 1.2s both;
     justify-content: center;
     flex-wrap: wrap;
 }

 .stat-item {
     text-align: center;
     padding: var(--space-6);
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(20px);
     border-radius: var(--radius-2xl);
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     min-width: 120px;
 }

 .stat-item:hover {
     transform: translateY(-8px) scale(1.05);
     box-shadow: 0 25px 50px rgba(5, 150, 105, 0.3);
     border-color: rgba(5, 150, 105, 0.3);
 }

 .stat-icon {
     font-size: var(--text-2xl);
     margin-bottom: var(--space-3);
     animation: iconPulse 3s ease-in-out infinite;
 }

 .stat-number {
     font-size: var(--text-4xl);
     font-weight: 900;
     color: var(--white);
     margin-bottom: var(--space-2);
     animation: numberCount 2s ease-out;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
 }

 .stat-label {
     font-size: var(--text-sm);
     color: var(--white);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     opacity: 0.9;
 }

 .stat-glow {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     border-radius: var(--radius-2xl);
     opacity: 0;
     transition: opacity 0.3s ease;
     z-index: -1;
 }

 .stat-item:hover .stat-glow {
     opacity: 0.1;
 }

 /* STUNNING HERO VISUAL */
 .hero-visual {
     position: relative;
     animation: slideInRight 1.5s ease-out 0.8s both;
 }

 .hero-3d-container {
     position: relative;
     perspective: 1000px;
 }

 .floating-tech-icons {
     position: absolute;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .tech-icon {
     position: absolute;
     font-size: var(--text-2xl);
     opacity: 0.6;
     animation: techFloat 6s ease-in-out infinite;
 }

 .tech-icon:nth-child(1) {
     top: 10%;
     left: 10%;
     animation-delay: 0s;
 }

 .tech-icon:nth-child(2) {
     top: 20%;
     right: 15%;
     animation-delay: 1s;
 }

 .tech-icon:nth-child(3) {
     bottom: 20%;
     left: 20%;
     animation-delay: 2s;
 }

 .tech-icon:nth-child(4) {
     bottom: 10%;
     right: 10%;
     animation-delay: 3s;
 }

 /* SCROLL INDICATOR */
 .scroll-indicator {
     position: absolute;
     bottom: var(--space-10);
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-3);
     animation: fadeInUp 0.6s ease-out 0.5s both;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 20;
     padding: var(--space-4);
     border-radius: var(--radius-full);
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     border: 1px solid rgba(255, 255, 255, 0.1);
     text-decoration: none;
     color: inherit;
 }

 .scroll-indicator:hover {
     transform: translateX(-50%) translateY(-8px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow:
         0 10px 30px rgba(0, 0, 0, 0.3),
         0 0 40px rgba(5, 150, 105, 0.3);
 }

 .scroll-text {
     font-size: var(--text-sm);
     color: #ffffff;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     text-shadow:
         0 0 8px rgba(110, 231, 183, 0.6),
         0 2px 4px rgba(0, 0, 0, 0.5);
 }

 .scroll-arrow {
     position: relative;
     width: 3px;
     height: 35px;
     background: linear-gradient(to bottom, rgba(110, 231, 183, 0.9), rgba(5, 150, 105, 0.5), transparent);
     animation: arrowBounce 2s ease-in-out infinite;
     border-radius: 2px;
     box-shadow:
         0 0 10px rgba(110, 231, 183, 0.5),
         0 0 20px rgba(5, 150, 105, 0.3);
 }

 .arrow-line {
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(110, 231, 183, 1), rgba(5, 150, 105, 0.7), transparent);
     border-radius: 2px;
 }

 .arrow-head {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
     border-top: 6px solid var(--primary);
 }

 .floating-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 244, 0.95));
     backdrop-filter: blur(20px);
     padding: var(--space-8);
     border-radius: var(--radius-2xl);
     border: 1px solid rgba(5, 150, 105, 0.1);
     box-shadow: 0 4px 20px rgba(5, 150, 105, 0.1);
     transition: all 0.3s ease;
     animation: float 6s ease-in-out infinite;
 }

 .floating-card:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: 0 20px 40px rgba(5, 150, 105, 0.2);
 }

 .card-header {
     display: flex;
     align-items: center;
     gap: var(--space-4);
     margin-bottom: var(--space-6);
 }

 .card-icon {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     border-radius: var(--radius-xl);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: var(--text-2xl);
     color: var(--white);
     box-shadow: var(--shadow-3d);
 }

 .card-title {
     font-size: var(--text-xl);
     font-weight: 700;
     color: var(--text-primary);
 }

 .card-content p {
     color: var(--text-secondary);
     margin-bottom: var(--space-4);
     line-height: 1.6;
 }

 .card-features {
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-2);
 }

 .feature {
     background: rgba(5, 150, 105, 0.1);
     color: var(--primary);
     padding: var(--space-1) var(--space-3);
     border-radius: var(--radius-full);
     font-size: var(--text-sm);
     font-weight: 500;
     border: 1px solid rgba(5, 150, 105, 0.2);
 }

 /* About Section */
 .about {
     padding: var(--space-20) 0;
     background: var(--bg-secondary);
     position: relative;
     overflow: hidden;
 }

 /* About section header text */
 section.about .section-title,
 section.about .section-header .section-title,
 section#about .section-title {
     color: var(--gray-900) !important;
     text-shadow: none;
 }

 section.about .section-description,
 section.about .section-header .section-description,
 section#about .section-description {
     color: var(--gray-600) !important;
     font-weight: 400;
     text-shadow: none;
 }

 /* Disable all animations/transitions in About section */
 section.about,
 section#about {
     will-change: auto;
 }

 section.about *,
 section#about * {
     animation: none !important;
     transition: none !important;
 }

 section.about .about-hero-card::before,
 section.about .about-hero-card::after,
 section.about .feature-item::before,
 section.about .feature-item::after {
     animation: none !important;
     opacity: 0 !important;
 }

 section.about .about-hero-card:hover,
 section.about .feature-item:hover {
     transform: none !important;
     box-shadow: none !important;
     border-color: inherit !important;
 }

 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 10% 20%, rgba(5, 150, 105, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
     z-index: 1;
 }

 .about::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         linear-gradient(45deg, rgba(5, 150, 105, 0.05) 0%, transparent 30%, transparent 70%, rgba(16, 185, 129, 0.05) 100%);
     z-index: 2;
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 var(--space-6);
     position: relative;
     z-index: 10;
 }

 .section-header {
     text-align: center;
     margin-bottom: var(--space-20);
     position: relative;
     z-index: 10;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

 /* Products section header */
 .products .section-header {
     z-index: 10;
 }

 /* Products section title - bright white */
 .products .section-title {
     color: #ffffff !important;
     text-shadow:
         0 0 10px rgba(255, 255, 255, 0.6),
         0 0 20px rgba(5, 150, 105, 0.5),
         0 2px 8px rgba(0, 0, 0, 0.8),
         0 4px 12px rgba(0, 0, 0, 0.7) !important;
     position: relative;
     z-index: 10;
 }

 .section-badge {
     display: inline-flex;
     align-items: center;
     background: var(--primary);
     color: var(--white);
     padding: var(--space-2) var(--space-5);
     border-radius: var(--radius-full);
     margin-bottom: var(--space-6);
     font-size: var(--text-sm);
     font-weight: 600;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
     transition: all 0.3s ease;
 }

 .section-badge:hover {
     background: var(--primary-dark);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
 }

 .section-title {
     font-size: var(--text-4xl);
     font-weight: 800;
     margin-bottom: var(--space-6);
     color: var(--gray-900);
     line-height: 1.2;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     letter-spacing: -0.02em;
 }

 @media (max-width: 768px) {
     .section-title {
         font-size: var(--text-3xl);
     }
 }

 .section-description {
     font-size: var(--text-lg);
     color: var(--gray-600);
     max-width: 700px;
     margin: 0 auto;
     line-height: 1.7;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
 }

 /* Products section description - bright white text - ULTRA SPECIFIC */
 section.products .section-description,
 section.products .container .section-header .section-description,
 .products .section-header p.section-description,
 #products .section-description,
 #products .section-header .section-description {
     color: #ffffff !important;
     text-shadow:
         0 0 15px rgba(255, 255, 255, 0.9),
         0 0 25px rgba(255, 255, 255, 0.7),
         0 0 35px rgba(255, 255, 255, 0.5),
         0 2px 8px rgba(0, 0, 0, 1),
         0 4px 12px rgba(0, 0, 0, 0.9) !important;
     font-weight: 600 !important;
     position: relative;
     z-index: 10;
 }

 .about-content {
     position: relative;
     z-index: 10;
     max-width: 900px;
     margin: 0 auto;
 }

 .about-hero-card {
     position: relative;
     background: var(--white);
     backdrop-filter: none;
     border-radius: var(--radius-xl);
     padding: var(--space-12) var(--space-10);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     border: 1px solid var(--gray-200);
     overflow: hidden;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .about-hero-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 5px;
     background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary), var(--secondary));
     background-size: 200% 100%;
     animation: gradientShift 3s ease infinite;
     box-shadow: 0 2px 20px rgba(5, 150, 105, 0.5);
 }

 .about-hero-card::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg, transparent, rgba(5, 150, 105, 0.05), transparent);
     transform: rotate(45deg);
     animation: shimmer 5s infinite;
     opacity: 0;
     transition: opacity 0.6s ease;
 }

 .about-hero-card:hover::after {
     opacity: 1;
 }

 .about-hero-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 24px rgba(5, 150, 105, 0.15);
     border-color: var(--primary);
 }

 .hero-card-background {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 10% 20%, rgba(5, 150, 105, 0.08) 0%, transparent 50%),
         radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
     z-index: 0;
 }

 .hero-card-content {
     position: relative;
     z-index: 10;
 }

 @keyframes gradientShift {

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

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

 @keyframes shimmer {
     0% {
         transform: translateX(-100%) translateY(-100%) rotate(45deg);
     }

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

 .title-accent-line {
     width: 60px;
     height: 4px;
     background: linear-gradient(90deg, var(--primary), var(--secondary));
     border-radius: 2px;
     margin-bottom: var(--space-6);
     box-shadow: 0 2px 10px rgba(5, 150, 105, 0.5);
 }

 .about-title {
     font-size: var(--text-4xl);
     font-weight: 900;
     margin-bottom: var(--space-6);

     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     letter-spacing: 0.5px;
     line-height: 1.2;
 }

 .about-description {
     font-size: var(--text-lg);

     margin-bottom: var(--space-10);
     line-height: 1.8;

     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 600;
     letter-spacing: 0.2px;
 }

 .about-features {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--space-4);
     margin-top: var(--space-8);
 }

 @media (max-width: 768px) {
     .about-features {
         grid-template-columns: 1fr;
     }
 }

 .feature-item {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     text-align: right;
     gap: var(--space-4);
     padding: var(--space-6);
     background: var(--white);
     backdrop-filter: none;
     border-radius: var(--radius-lg);
     border: 1px solid var(--gray-200);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
     position: relative;
     overflow: hidden;
 }

 [dir="ltr"] .feature-item {
     text-align: left;
 }

 .feature-item::before,
 .feature-item::after {
     display: none;
 }

 .feature-item:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 16px rgba(5, 150, 105, 0.12);
     border-color: var(--primary);
 }

 .feature-icon-wrapper {
     position: relative;
     width: 56px;
     height: 56px;
     flex-shrink: 0;
 }

 .feature-icon-bg {
     position: absolute;
     inset: 0;
     background: rgba(5, 150, 105, 0.1);
     border-radius: var(--radius-lg);
     transition: all 0.3s ease;
 }

 .feature-icon {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: var(--text-xl);
     color: var(--primary);
     z-index: 1;
     transition: all 0.3s ease;
 }

 .feature-item:hover .feature-icon-bg {
     background: var(--primary);
     transform: none;
 }

 .feature-item:hover .feature-icon {
     color: var(--white);
     transform: none;
 }

 .feature-content {
     flex: 1;
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
 }

 .feature-content h4 {
     font-size: var(--text-lg);
     font-weight: 600;
     margin-bottom: 0;
     color: var(--gray-900);
     text-shadow: none;
     letter-spacing: 0;
     text-align: right;
 }

 [dir="ltr"] .feature-content h4 {
     text-align: left;
 }

 .feature-content p {
     color: var(--gray-600);
     line-height: 1.6;
     font-weight: 400;
     font-size: var(--text-sm);
     text-align: right;
     max-width: none;
     text-shadow: none;
     margin: 0;
 }

 [dir="ltr"] .feature-content p {
     text-align: left;
 }
 }

 .about-visual-wrapper {
     display: flex;
     align-items: stretch;
 }

 .about-visual-container {
     width: 100%;
     position: relative;
     height: 100%;
 }

 .visual-card {
     position: relative;
     background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(25px) saturate(200%);
     border-radius: var(--radius-3xl);
     padding: var(--space-12) var(--space-8);
     box-shadow:
         0 30px 100px rgba(0, 0, 0, 0.25),
         0 0 0 2px rgba(255, 255, 255, 0.8),
         inset 0 2px 4px rgba(255, 255, 255, 0.9);
     border: 2px solid rgba(255, 255, 255, 0.4);
     overflow: hidden;
     transform-style: preserve-3d;
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .visual-card::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg, transparent, rgba(5, 150, 105, 0.08), transparent);
     transform: rotate(45deg);
     animation: shimmer 4s infinite;
 }

 @keyframes shimmer {
     0% {
         transform: translateX(-100%) translateY(-100%) rotate(45deg);
     }

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

 .card-background-glow {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 120%;
     height: 120%;
     background: radial-gradient(ellipse, rgba(5, 150, 105, 0.15), rgba(16, 185, 129, 0.1), transparent 70%);
     border-radius: 50%;
     filter: blur(60px);
     animation: glowPulse 5s ease-in-out infinite;
     z-index: 0;
 }

 @keyframes glowPulse {

     0%,
     100% {
         opacity: 0.4;
         transform: translate(-50%, -50%) scale(1);
     }

     50% {
         opacity: 0.7;
         transform: translate(-50%, -50%) scale(1.3);
     }
 }

 .card-particles {
     position: absolute;
     inset: 0;
     z-index: 1;
     background-image:
         radial-gradient(circle at 20% 30%, rgba(5, 150, 105, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 50% 50%, rgba(52, 211, 153, 0.08) 0%, transparent 50%);
     animation: particleFloat 8s ease-in-out infinite;
 }

 @keyframes particleFloat {

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

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

 .visual-content {
     position: relative;
     z-index: 10;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-10);
     flex: 1;
     justify-content: center;
 }

 .visual-illustration {
     position: relative;
     width: 100%;
     height: 280px;
     margin-bottom: var(--space-8);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .illustration-layer {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .layer-1 {
     z-index: 1;
 }

 .layer-2 {
     z-index: 2;
 }

 .layer-3 {
     z-index: 3;
 }

 .floating-shape {
     position: absolute;
     border-radius: 50%;
     filter: blur(20px);
     animation: floatShape 8s ease-in-out infinite;
 }

 .shape-1 {
     width: 120px;
     height: 120px;
     background: radial-gradient(circle, rgba(5, 150, 105, 0.3), transparent 70%);
     top: 10%;
     left: 15%;
     animation-delay: 0s;
 }

 .shape-2 {
     width: 100px;
     height: 100px;
     background: radial-gradient(circle, rgba(16, 185, 129, 0.25), transparent 70%);
     bottom: 15%;
     right: 20%;
     animation-delay: 2s;
 }

 .shape-3 {
     width: 80px;
     height: 80px;
     background: radial-gradient(circle, rgba(52, 211, 153, 0.2), transparent 70%);
     top: 50%;
     right: 10%;
     animation-delay: 4s;
 }

 @keyframes floatShape {

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

     33% {
         transform: translateY(-30px) translateX(20px) scale(1.1);
         opacity: 0.8;
     }

     66% {
         transform: translateY(20px) translateX(-15px) scale(0.9);
         opacity: 0.7;
     }
 }

 .tech-artwork {
     width: 100%;
     max-width: 320px;
     height: auto;
     filter: drop-shadow(0 20px 50px rgba(5, 150, 105, 0.3));
 }

 .art-circle-1 {
     animation: rotateCircle 25s linear infinite;
     transform-origin: 200px 200px;
 }

 .art-circle-2 {
     animation: rotateCircle 20s linear infinite reverse;
     transform-origin: 200px 200px;
 }

 .art-diamond {
     animation: rotateShape 15s linear infinite;
     transform-origin: 200px 200px;
 }

 .art-square {
     animation: rotateShape 12s linear infinite reverse;
     transform-origin: 200px 200px;
 }

 .art-center {
     animation: centerPulse 3s ease-in-out infinite;
 }

 .art-line-1,
 .art-line-2,
 .art-line-3,
 .art-line-4 {
     animation: lineGlow 4s ease-in-out infinite;
 }

 .art-line-1 {
     animation-delay: 0s;
 }

 .art-line-2 {
     animation-delay: 1s;
 }

 .art-line-3 {
     animation-delay: 2s;
 }

 .art-line-4 {
     animation-delay: 3s;
 }

 @keyframes rotateCircle {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 @keyframes rotateShape {
     from {
         transform: rotate(0deg) scale(1);
     }

     50% {
         transform: rotate(180deg) scale(1.1);
     }

     to {
         transform: rotate(360deg) scale(1);
     }
 }

 @keyframes centerPulse {

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

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

 @keyframes lineGlow {

     0%,
     100% {
         opacity: 0.3;
         stroke-width: 2;
     }

     50% {
         opacity: 0.6;
         stroke-width: 3;
     }
 }

 .glow-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(30px);
     animation: orbFloat 6s ease-in-out infinite;
 }

 .orb-1 {
     width: 100px;
     height: 100px;
     background: radial-gradient(circle, rgba(5, 150, 105, 0.4), transparent 70%);
     top: 20%;
     left: 25%;
     animation-delay: 0s;
 }

 .orb-2 {
     width: 80px;
     height: 80px;
     background: radial-gradient(circle, rgba(16, 185, 129, 0.35), transparent 70%);
     bottom: 25%;
     right: 30%;
     animation-delay: 2s;
 }

 .orb-3 {
     width: 60px;
     height: 60px;
     background: radial-gradient(circle, rgba(52, 211, 153, 0.3), transparent 70%);
     top: 60%;
     left: 15%;
     animation-delay: 4s;
 }

 @keyframes orbFloat {

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

     50% {
         transform: translateY(-40px) translateX(30px) scale(1.3);
         opacity: 0.7;
     }
 }

 .visual-message {
     text-align: center;
     margin-top: var(--space-6);
     position: relative;
     z-index: 10;
 }

 .message-title {
     font-size: var(--text-3xl);
     font-weight: 900;
     background: linear-gradient(135deg, #022c22, #047857, #059669, #10b981);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: var(--space-4);
     letter-spacing: 1px;
     text-transform: uppercase;
     animation: titleGlow 3s ease-in-out infinite;
 }

 @keyframes titleGlow {

     0%,
     100% {
         filter: drop-shadow(0 0 10px rgba(5, 150, 105, 0.3));
     }

     50% {
         filter: drop-shadow(0 0 20px rgba(5, 150, 105, 0.6));
     }
 }

 .message-text {
     font-size: var(--text-lg);
     color: #065f46;
     font-weight: 600;
     line-height: 1.6;
     letter-spacing: 0.3px;
 }

 .visual-card:hover {
     transform: translateY(-8px);
     box-shadow:
         0 40px 120px rgba(0, 0, 0, 0.3),
         0 0 0 2px rgba(255, 255, 255, 0.9),
         inset 0 2px 4px rgba(255, 255, 255, 0.95);
 }

 .image-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     border-radius: var(--radius-2xl);
 }

 .placeholder-icon {
     font-size: 4rem;
     color: var(--white);
     animation: iconPulse3D 2s ease-in-out infinite;
 }

 /* Chairman Section */
 .chairman {
     padding: var(--space-24) 0;
     background: var(--bg-primary);
     position: relative;
     transform-style: preserve-3d;
 }

 .chairman::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 20% 20%, rgba(5, 150, 105, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
     z-index: 1;
 }

 .chairman-content {
     display: grid;
     grid-template-columns: 1fr 2fr;
     gap: var(--space-16);
     align-items: center;
     position: relative;
     z-index: 10;
 }

 .chairman-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 244, 0.95));
     backdrop-filter: blur(20px);
     padding: var(--space-8);
     border-radius: var(--radius-2xl);
     border: 1px solid rgba(5, 150, 105, 0.1);
     box-shadow: var(--shadow-3d);
     position: relative;
     overflow: hidden;
     transition: var(--transition);
     transform-style: preserve-3d;
 }

 .chairman-card:hover {
     transform: translateY(-10px) rotateX(10deg) rotateY(10deg) scale(1.02);
     box-shadow: var(--shadow-3d-hover);
 }

 .chairman-image {
     text-align: center;
 }

 .chairman-photo {
     width: 200px;
     height: 200px;
     border-radius: 50%;
     object-fit: cover;
     margin: 0 auto;
     display: block;
     border: 4px solid var(--primary);
     box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
     transition: all 0.3s ease;
     animation: chairmanFloat 6s ease-in-out infinite;
 }

 .chairman-photo:hover {
     transform: scale(1.05);
     box-shadow: 0 8px 30px rgba(5, 150, 105, 0.4);
 }

 .chairman-badge {
     display: inline-flex;
     align-items: center;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     color: var(--white);
     padding: var(--space-2) var(--space-4);
     border-radius: var(--radius-full);
     margin-bottom: var(--space-4);
     font-size: var(--text-sm);
     font-weight: 600;
     box-shadow: var(--shadow-3d);
 }

 .chairman-name {
     font-size: var(--text-3xl);
     font-weight: 900;
     margin-bottom: var(--space-4);
     color: var(--text-primary);
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .chairman-title {
     font-size: var(--text-lg);
     color: var(--text-secondary);
     margin-bottom: var(--space-6);
     font-weight: 600;
 }

 .chairman-description {
     font-size: var(--text-lg);
     color: var(--text-secondary);
     margin-bottom: var(--space-8);
     line-height: 1.7;
 }

 .chairman-positions {
     display: grid;
     gap: var(--space-4);
 }

 .position-item {
     display: flex;
     align-items: center;
     gap: var(--space-3);
     padding: var(--space-3);
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(10px);
     border-radius: var(--radius-lg);
     border: 1px solid rgba(5, 150, 105, 0.1);
     transition: var(--transition);
     transform-style: preserve-3d;
 }

 .position-item:hover {
     transform: translateX(10px) rotateY(5deg);
     box-shadow: var(--shadow-3d);
 }

 .position-icon {
     width: 40px;
     height: 40px;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: var(--text-lg);
     color: var(--white);
     box-shadow: var(--shadow-3d);
 }

 .position-text {
     font-size: var(--text-base);
     color: var(--text-primary);
     font-weight: 500;
 }

 /* Services Section */
 .services {
     padding: var(--space-20) 0;
     background: var(--bg-secondary);
     position: relative;
 }

 .services::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 30% 70%, rgba(5, 150, 105, 0.05) 0%, transparent 50%),
         radial-gradient(circle at 70% 30%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
     z-index: 1;
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: var(--space-8);
     position: relative;
     z-index: 10;
 }

 @media (max-width: 1400px) {
     .services-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (max-width: 1200px) {
     .services-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 768px) {
     .services-grid {
         grid-template-columns: 1fr;
     }
 }

 .service-card {
     background: var(--white);
     backdrop-filter: none;
     padding: 5px;
     border-radius: var(--radius-xl);
     border: 1px solid var(--gray-200);
     text-align: center;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
     min-width: 0;
 }

 .service-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 24px rgba(5, 150, 105, 0.15);
     border-color: var(--primary);
 }

 .service-icon {
     width: 64px;
     height: 64px;
     background: rgba(5, 150, 105, 0.1);
     border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto var(--space-6);
     font-size: var(--text-2xl);
     color: var(--primary);
     box-shadow: none;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     transform-style: preserve-3d;
 }

 .service-card:hover .service-icon {
     background: var(--primary);
     color: var(--white);
     transform: scale(1.05);
 }

 .service-icon::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
     animation: shimmer 3s ease-in-out infinite;
 }

 .service-title {
     font-size: var(--text-xl);
     margin-bottom: var(--space-3);
     color: var(--gray-900);

 }

 .service-description {
     font-size: var(--text-base);
     color: var(--gray-600);
     margin-bottom: var(--space-5);
     line-height: 1.6;
 }

 .service-features {
     list-style: none;
     margin-bottom: var(--space-6);
     padding: 0;
 }

 .service-features li {
     padding: var(--space-2) 0;
     color: var(--gray-600);
     position: relative;
     font-size: var(--text-sm);
 }

 .service-features li::before {
     content: '✓';
     position: absolute;
     right: 8px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--primary);
     font-weight: 600;
     font-size: var(--text-base);
 }

 .service-cta {
     background: var(--primary);
     color: var(--white);
     padding: var(--space-3) var(--space-6);
     border-radius: var(--radius-md);
     text-decoration: none;
     font-weight: 600;
     font-size: var(--text-sm);
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
     transform-style: preserve-3d;
     border: none;
     cursor: pointer;
     text-align: center;
 }

 /* Ensure service CTA works as link */
 a.service-cta {
     text-decoration: none;
     display: inline-block;
 }

 .service-cta:hover {
     background: var(--primary-dark);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
 }

 /* Products Section */
 .products {
     padding: var(--space-20) 0;
     background: var(--gray-900);
     position: relative;
 }

 .products::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 20% 80%, rgba(5, 150, 105, 0.15) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
         linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(5, 150, 105, 0.1), rgba(0, 0, 0, 0.8));
     z-index: 1;
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: var(--space-6);
     position: relative;
     z-index: 10;
 }

 /* Force white text in products section */
 .products p,
 .products .section-description,
 .products .container p.section-description {
     color: #ffffff !important;
     text-shadow:
         0 0 15px rgba(255, 255, 255, 0.9),
         0 0 25px rgba(255, 255, 255, 0.7),
         0 2px 8px rgba(0, 0, 0, 1),
         0 4px 12px rgba(0, 0, 0, 0.9) !important;
 }

 /* Product card text styling */
 .products .product-card .product-title,
 .products .product-card h3.product-title {
     color: var(--gray-900) !important;
     text-shadow: none !important;
 }

 .products .product-card .product-description,
 .products .product-card p,
 .products .product-card .product-features li {
     color: var(--gray-600) !important;
     text-shadow: none !important;
 }

 .products .product-card:hover .product-title,
 .products .product-card:hover .product-description,
 .products .product-card:hover .product-features li {
     color: var(--gray-900) !important;
     text-shadow: none !important;
 }

 .product-card {
     background: var(--white);
     backdrop-filter: none;
     padding: var(--space-10);
     border-radius: var(--radius-xl);
     border: 1px solid var(--gray-200);
     text-align: center;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     text-decoration: none;
     color: inherit;
     display: block;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }

 .product-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 24px rgba(5, 150, 105, 0.15);
     border-color: var(--primary);
 }

 .product-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: var(--space-6);
 }

 .product-logo {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     border-radius: var(--radius-xl);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow-3d);
     transform-style: preserve-3d;
 }

 .product-logo:hover {
     transform: scale(1.1);
     filter: brightness(1.2);
 }

 .product-logo img {
     width: 40px;
     height: 40px;
     object-fit: contain;
 }

 .logo-placeholder {
     font-size: var(--text-2xl);
     color: var(--white);
 }

 .product-badge {
     background: rgba(5, 150, 105, 0.1);
     color: var(--primary);
     padding: var(--space-1) var(--space-3);
     border-radius: var(--radius-full);
     font-size: var(--text-sm);
     font-weight: 500;
     border: 1px solid rgba(5, 150, 105, 0.2);
 }

 .product-title {
     font-size: var(--text-xl);
     font-weight: 600;
     margin-bottom: var(--space-3);
     color: var(--gray-900);
     line-height: 1.3;
 }

 .product-description {
     font-size: var(--text-base);
     color: var(--gray-600);
     margin-bottom: var(--space-5);
     line-height: 1.6;
 }

 .product-features {
     list-style: none;
     margin-bottom: var(--space-6);
     padding: 0;
 }

 .product-features li {
     padding: var(--space-2) 0;
     color: var(--gray-600);
     position: relative;
     padding-right: var(--space-5);
     font-size: var(--text-sm);
 }

 .product-features li::before {
     content: '✓';
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     color: var(--primary);
     font-weight: 600;
     font-size: var(--text-base);
 }

 .product-cta {
     background: var(--primary);
     color: var(--white);
     padding: var(--space-3) var(--space-6);
     border-radius: var(--radius-md);
     text-decoration: none;
     font-weight: 600;
     font-size: var(--text-sm);
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
     cursor: pointer;
     transform-style: preserve-3d;
 }

 .product-cta:hover {
     background: var(--primary-dark);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
 }

 /* Product-specific hover effects - removed complex gradients */
 .product-card.covac:hover,
 .product-card.vatlex:hover,
 .product-card.tracker:hover {
     background: var(--white);
 }

 .product-card.covac:hover .product-title,
 .product-card.covac:hover .product-description,
 .product-card.covac:hover .product-features li,
 .product-card.vatlex:hover .product-title,
 .product-card.vatlex:hover .product-description,
 .product-card.vatlex:hover .product-features li,
 .product-card.tracker:hover .product-title,
 .product-card.tracker:hover .product-description,
 .product-card.tracker:hover .product-features li {
     color: var(--gray-900);
 }

 /* Contact Section */
 .contact {
     padding: var(--space-20) 0;
     background: var(--bg-primary);
     position: relative;
 }

 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 20% 80%, rgba(5, 150, 105, 0.05) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
     z-index: 1;
 }

 .contact-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-16);
     position: relative;
     z-index: 10;
 }

 .contact-title {
     font-size: var(--text-4xl);
     font-weight: 800;
     margin-bottom: var(--space-6);
     color: var(--text-primary);
 }

 .contact-details {
     display: grid;
     gap: var(--space-6);
 }

 .contact-item {
     display: flex;
     align-items: center;
     gap: var(--space-4);
     padding: var(--space-4);
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(10px);
     border-radius: var(--radius-xl);
     border: 1px solid rgba(5, 150, 105, 0.1);
     transition: var(--transition);
     transform-style: preserve-3d;
 }

 .contact-item:hover {
     transform: translateX(10px) rotateY(5deg);
     box-shadow: var(--shadow-3d);
 }

 .contact-icon {
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     border-radius: var(--radius-xl);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: var(--text-xl);
     color: var(--white);
     box-shadow: var(--shadow-3d);
 }

 .contact-text {
     font-size: var(--text-base);
     color: var(--text-primary);
     font-weight: 500;
 }

 .contact-form {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 244, 0.95));
     backdrop-filter: blur(20px);
     padding: var(--space-8);
     border-radius: var(--radius-2xl);
     border: 1px solid rgba(5, 150, 105, 0.1);
     box-shadow: var(--shadow-3d);
     transform-style: preserve-3d;
 }

 .contact-form:hover {
     transform: rotateX(5deg) rotateY(5deg);
     box-shadow: var(--shadow-3d-hover);
 }

 .form-group {
     margin-bottom: var(--space-6);
 }

 .form-label {
     display: block;
     font-size: var(--text-base);
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: var(--space-2);
 }

 .form-input,
 .form-textarea {
     width: 100%;
     padding: var(--space-4);
     border: 2px solid rgba(5, 150, 105, 0.1);
     border-radius: var(--radius-lg);
     font-size: var(--text-base);
     color: var(--text-primary);
     background: rgba(255, 255, 255, 0.8);
     transition: var(--transition);
 }

 .form-input:focus,
 .form-textarea:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
     transform: translateZ(5px);
 }

 .form-textarea {
     height: 120px;
     resize: vertical;
 }

 .form-submit {
     width: 100%;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     color: var(--white);
     padding: var(--space-4);
     border: none;
     border-radius: var(--radius-lg);
     font-size: var(--text-lg);
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     transform-style: preserve-3d;
 }

 .form-submit:hover {
     transform: translateY(-2px) rotateX(5deg) rotateY(5deg);
     box-shadow: var(--shadow-3d);
 }

 /* Footer - Professional Clean Design */
 .footer {
     background: #1f2937;
     color: rgba(255, 255, 255, 0.8);
     padding: var(--space-16) 0 var(--space-8);
     position: relative;
     margin-top: auto;
     width: 100%;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .footer::before,
 .footer::after {
     display: none;
 }

 .footer-content {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 2fr;
     gap: var(--space-12);
     column-gap: var(--space-8);
     position: relative;
     z-index: 10;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 var(--space-6);
     justify-items: center;
 }

 @media (max-width: 1024px) {
     .footer-content {
         grid-template-columns: 1fr 1fr;
         gap: var(--space-8);
     }
 }

 @media (max-width: 768px) {
     .footer-content {
         grid-template-columns: 1fr;
         gap: var(--space-8);
     }
 }

 /* Footer Brand Section */
 .footer-brand {
     display: flex;
     flex-direction: column;
     gap: var(--space-4);
 }

 .footer-brand::before {
     display: none;
 }

 .footer-logo {
     height: 75px;
     margin-bottom: var(--space-4);
 }

 .footer-logo::after {
     display: none;
 }

 .logo-green {
     height: 150px;
     width: auto;
     filter: brightness(0) invert(1);
     transition: opacity 0.2s ease;
     opacity: 0.9;
 }

 .logo-green:hover {
     opacity: 1;
     transform: none;
     filter: brightness(0) invert(1);
 }

 .footer-description {
     font-size: var(--text-sm);
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.7);
     max-width: 280px;
     font-weight: 400;
 }

 /* Footer Navigation Section */
 .footer-nav {
     display: flex;
     flex-direction: column;
     gap: var(--space-4);
 }

 .footer-nav::before {
     display: none;
 }

 .footer-title {
     font-size: var(--text-base);
     font-weight: 600;
     margin-bottom: var(--space-4);
     color: #ffffff;
 }

 .footer-title::after {
     display: none;
 }

 .footer-navigation {
     display: flex;
     flex-direction: column;
     gap: var(--space-3);
 }

 .nav-item {
     display: flex;
     align-items: center;
     gap: var(--space-2);
     padding: var(--space-1) 0;
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: color 0.2s ease;
     font-size: var(--text-sm);
 }

 .nav-item::after {
     display: none;
 }

 .nav-item:hover {
     color: #ffffff;
     transform: none;
 }

 .nav-icon {
     font-size: var(--text-base);
     transition: color 0.2s ease;
     min-width: 18px;
     color: rgba(255, 255, 255, 0.6);
 }

 .nav-item:hover .nav-icon {
     transform: none;
     color: rgba(255, 255, 255, 0.9);
 }

 .nav-text {
     font-weight: 400;
     font-size: var(--text-sm);
 }

 /* Footer Products Section */
 .footer-products {
     display: flex;
     flex-direction: column;
     gap: var(--space-4);
     place-items: center;
 }

 .footer-products::before {
     display: none;
 }

 .product-links {
     display: flex;
     flex-direction: column;
     /* stack logos vertically */
     align-items: center;
     gap: var(--space-3);
 }

 .product-link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: var(--space-2) var(--space-3);
     color: inherit;
     text-decoration: none;
     border-radius: 8px;
     transition: opacity 0.2s ease, transform 0.2s ease;
     border: none;
 }

 /* Footer product logos */
 .product-link .product-logo-img {
     width: 120px;
     /* unify visual width */
     height: 36px;
     /* unify visual height */
     display: inline-block;
     border-radius: 4px;
     background: transparent;
     object-fit: contain;
     /* for <img> */
 }

 /* Make Covac logo white in footer only */
 .footer .product-link.covac-link .product-logo-img {
     filter: brightness(0) invert(1) grayscale(1) contrast(1.05) drop-shadow(0 0 6px rgba(249, 115, 22, 0.85)) drop-shadow(0 0 14px rgba(249, 115, 22, 0.55));
 }

 .footer .product-link.covac-link:hover .product-logo-img {
     filter: brightness(0) invert(1) grayscale(1) contrast(1.1) drop-shadow(0 0 8px rgba(249, 115, 22, 0.95)) drop-shadow(0 0 18px rgba(249, 115, 22, 0.65));
 }

 /* Vatlex: white with blue glow */
 .footer .product-link.vatlex-link .product-logo-img {
     filter: brightness(0) invert(1) grayscale(1) contrast(1.05) drop-shadow(0 0 6px rgba(59, 130, 246, 0.85)) drop-shadow(0 0 14px rgba(96, 165, 250, 0.55));
 }

 .footer .product-link.vatlex-link:hover .product-logo-img {
     filter: brightness(0) invert(1) grayscale(1) contrast(1.1) drop-shadow(0 0 8px rgba(59, 130, 246, 0.95)) drop-shadow(0 0 18px rgba(96, 165, 250, 0.65));
 }

 .product-link:hover {
     opacity: 0.9;
     transform: translateY(-2px);
 }

 .product-icon {
     font-size: var(--text-lg);
     transition: transform 0.3s ease;
     min-width: 20px;
 }

 .product-link:hover .product-icon {
     transform: scale(1.2);
 }

 /* no product text in footer logos */
 /* Footer Tracker text styled like a logo */
 .footer .product-link .tracker-text {
     font-weight: 800;
     letter-spacing: 0.4px;
     font-size: var(--text-base);
     color: #ffffff;
     text-transform: uppercase;
     text-shadow: 0 0 6px rgba(16, 185, 129, 0.75), 0 0 14px rgba(16, 185, 129, 0.45);
 }

 .footer .product-link .tracker-text::first-letter {
     letter-spacing: 1px;
 }

 /* Stronger glow on hover for tracker text */
 .footer .product-link:hover .tracker-text {
     text-shadow: 0 0 8px rgba(16, 185, 129, 0.95), 0 0 18px rgba(16, 185, 129, 0.65);
 }

 /* Footer text styling - overridden by specific rules below */
 .footer .footer-title,
 .footer .footer-description,
 .footer .product-link .product-text,
 .footer .product-icon,
 .footer .footer-bottom p {
     color: #ffffff !important;
 }

 /* Ensure footer brand description is pure white */
 .footer .footer-brand .footer-description {
     color: rgba(255, 255, 255, 0.8) !important;
     text-shadow: none !important;
 }

 /* Contact section enhancements */
 section.contact {
     position: relative;
     overflow: hidden;
 }

 section.contact::before {
     content: '';
     position: absolute;
     inset: -20%;
     background: radial-gradient(60% 60% at 70% 30%, rgba(16, 185, 129, 0.15), transparent 60%),
         radial-gradient(50% 50% at 20% 70%, rgba(59, 130, 246, 0.12), transparent 60%);
     filter: blur(40px);
     animation: contactGlow 12s ease-in-out infinite alternate;
     pointer-events: none;
 }

 @keyframes contactGlow {
     0% {
         transform: translate3d(0, 0, 0) scale(1);
         opacity: 0.9;
     }

     100% {
         transform: translate3d(0, -10px, 0) scale(1.05);
         opacity: 1;
     }
 }

 /* Decorative floating orbs */
 section.contact::after {
     content: '';
     position: absolute;
     inset: 0;
     background:
         radial-gradient(120px 120px at 15% 20%, rgba(52, 211, 153, 0.12), transparent 60%),
         radial-gradient(160px 160px at 85% 30%, rgba(59, 130, 246, 0.10), transparent 60%),
         radial-gradient(100px 100px at 80% 80%, rgba(244, 114, 182, 0.08), transparent 60%);
     filter: blur(8px) saturate(120%);
     animation: orbsDrift 18s ease-in-out infinite alternate;
     pointer-events: none;
 }

 @keyframes orbsDrift {
     0% {
         transform: translate3d(0, 0, 0);
     }

     50% {
         transform: translate3d(0, -6px, 0) scale(1.01);
     }

     100% {
         transform: translate3d(0, 4px, 0);
     }
 }

 section.contact .contact-content {
     position: relative;
     z-index: 1;
     display: grid;
     gap: var(--space-8);
 }

 /* Floating cards effect */
 section.contact .contact-info,
 section.contact .contact-form {
     background: #ffffff;
     /* white cards as requested */
     backdrop-filter: none;
     border: 1px solid rgba(2, 6, 23, 0.06);
     border-radius: var(--radius-xl);
     box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
     transform: translateY(0);
     animation: floatUp 800ms ease var(--anim-delay, 0ms) both;
 }

 section.contact .contact-info {
     --anim-delay: 0ms;
 }

 section.contact .contact-form {
     --anim-delay: 120ms;
 }

 @keyframes floatUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Animated gradient border for form card */
 section.contact .contact-form {
     position: relative;
 }

 /* Remove hover sweep */
 section.contact .contact-form::before {
     content: none !important;
     animation: none !important;
 }

 section.contact .contact-form:hover::before {
     opacity: 0 !important;
     animation: none !important;
 }

 /* Subtle decorative particles inside the white card (very soft) */
 section.contact .contact-form::after {
     content: '';
     position: absolute;
     inset: 0;
     pointer-events: none;
     background:
         radial-gradient(2px 2px at 20% 30%, rgba(16, 185, 129, 0.06), transparent 60%),
         radial-gradient(3px 3px at 70% 60%, rgba(59, 130, 246, 0.05), transparent 60%),
         radial-gradient(1.5px 1.5px at 40% 80%, rgba(5, 150, 105, 0.05), transparent 60%);
     opacity: 0.7;
 }

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

 /* Hover lift/tilt for cards */
 section.contact .contact-info:hover,
 section.contact .contact-form:hover {
     transform: translateY(-4px);
     transition: transform 200ms ease;
 }

 /* Staggered reveal for left info items */
 section.contact .contact-details .contact-item {
     opacity: 0;
     transform: translateY(10px);
     animation: riseIn 600ms ease forwards;
 }

 section.contact .contact-details .contact-item:nth-child(1) {
     animation-delay: 120ms;
 }

 section.contact .contact-details .contact-item:nth-child(2) {
     animation-delay: 240ms;
 }

 section.contact .contact-details .contact-item:nth-child(3) {
     animation-delay: 360ms;
 }

 @keyframes riseIn {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Staggered reveal for form groups */
 section.contact .form .form-group {
     opacity: 0;
     transform: translateY(12px);
     animation: riseIn 650ms ease forwards;
 }

 /* Remove hover lift on groups */
 section.contact .form .form-group:hover {
     transform: none !important;
 }

 section.contact .form .form-group:hover::after {
     opacity: 0 !important;
 }

 /* Floating chip labels and spacing */
 section.contact .form .form-group {
     position: relative;
     padding-top: 10px;
 }

 section.contact .form .form-label {
     position: absolute;
     top: -10px;
     inset-inline-start: 18px;
     background: #ffffff;
     padding: 0 8px;
     border-radius: 9999px;
     box-shadow: 0 1px 0 rgba(2, 6, 23, 0.06);
 }

 /* Support RTL chip alignment */
 [dir="rtl"] section.contact .form .form-label {
     inset-inline-start: auto;
     inset-inline-end: 18px;
 }

 /* Elevate group on focus */
 section.contact .form .form-group {
     position: relative;
     transition: transform 200ms ease, box-shadow 200ms ease;
 }

 section.contact .form .form-group:focus-within {
     transform: translateY(-2px);
     box-shadow: 0 12px 24px rgba(2, 6, 23, 0.08);
 }

 /* Animated accent ring */
 section.contact .form .form-group::after {
     content: '';
     position: absolute;
     inset: -2px;
     border-radius: 16px;
     padding: 2px;
     opacity: 0;
     background: conic-gradient(from 0deg, rgba(16, 185, 129, 0.7), rgba(59, 130, 246, 0.6), rgba(16, 185, 129, 0.7));
     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     transition: opacity 250ms ease;
     pointer-events: none;
 }

 section.contact .form .form-group:focus-within::after {
     opacity: 1;
 }

 /* Enhanced form layout */
 section.contact .form {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--space-5);
 }

 @media (min-width: 768px) {
     section.contact .form {
         grid-template-columns: 1fr 1fr;
         column-gap: var(--space-6);
         row-gap: var(--space-5);
     }

     section.contact .form .form-group textarea,
     section.contact .form .form-submit {
         grid-column: 1 / -1;
     }
 }

 section.contact .form .form-group:nth-child(1) {
     animation-delay: 140ms;
 }

 section.contact .form .form-group:nth-child(2) {
     animation-delay: 260ms;
 }

 section.contact .form .form-group:nth-child(3) {
     animation-delay: 380ms;
 }

 section.contact .form .form-group:nth-child(4) {
     animation-delay: 500ms;
 }

 section.contact .form .form-group:nth-child(5),
 section.contact .form .form-group:nth-child(6) {
     animation-delay: 620ms;
 }

 /* Make contact section text white and crisp */
 /* Keep header texts white, but make card texts dark for contrast */
 section.contact .section-badge,
 section.contact .section-title,
 section.contact .section-description {
     color: #ffffff !important;
     -webkit-text-fill-color: #ffffff;
     text-shadow: none;
 }

 section.contact .contact-info .contact-title,
 section.contact .contact-info .contact-item,
 section.contact .contact-info .contact-text,
 section.contact .contact-form .form-label {
     color: #0f172a !important;
     -webkit-text-fill-color: #0f172a;
 }

 /* Inputs animation and focus */
 section.contact .form-input,
 section.contact .form-textarea {
     background: #ffffff;
     border: 1px solid rgba(2, 6, 23, 0.14);
     color: #0f172a;
     transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
     border-radius: 14px;
     padding: var(--space-4) var(--space-5);
     box-shadow: 0 1px 0 rgba(2, 6, 23, 0.05) inset;
 }

 section.contact .form-input:hover,
 section.contact .form-textarea:hover {
     border-color: rgba(16, 185, 129, 0.35);
     transform: translateY(-1px);
 }

 section.contact .form-input:hover,
 section.contact .form-textarea:hover {
     transform: none !important;
     border-color: rgba(2, 6, 23, 0.14) !important;
     box-shadow: none !important;
 }

 section.contact .form-input::placeholder,
 section.contact .form-textarea::placeholder {
     color: #64748b;
 }

 section.contact .form-input:focus,
 section.contact .form-textarea:focus {
     outline: none;
     border-color: rgba(16, 185, 129, 0.7);
     box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22), 0 8px 18px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
     transform: translateY(-1px);
 }

 /* Valid/invalid visual feedback */
 section.contact .form-input:valid,
 section.contact .form-textarea:valid {
     border-color: rgba(16, 185, 129, 0.6);
 }

 section.contact .form-input:invalid:focus,
 section.contact .form-textarea:invalid:focus {
     border-color: rgba(185, 28, 28, 0.7);
     box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
 }

 /* Submit button pulse */
 section.contact .form-submit {
     position: relative;
     overflow: hidden;
     grid-column: 1 / -1;
     padding: var(--space-4) var(--space-6);
     border-radius: 14px;
     font-weight: 800;
     letter-spacing: 0.3px;
     background: linear-gradient(135deg, #10b981, #059669);
     color: #ffffff;
     border: 1px solid rgba(16, 185, 129, 0.6);
     transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
 }

 section.contact .form-submit::after {
     content: '';
     position: absolute;
     inset: -2px;
     background: linear-gradient(90deg, rgba(16, 185, 129, 0), rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0));
     filter: blur(8px);
     transform: translateX(-120%);
     animation: buttonSweep 2.8s ease-in-out infinite;
 }

 section.contact .form-submit:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 24px rgba(16, 185, 129, 0.25);
     filter: saturate(115%);
 }

 section.contact .form-submit:active {
     transform: translateY(0);
 }

 section.contact .form-submit:disabled {
     filter: grayscale(0.2) brightness(0.9);
     cursor: not-allowed;
 }

 /* Input icons (RTL friendly - icons on left, extra padding) */
 section.contact #name {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%230f172a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
     background-repeat: no-repeat;
     background-position: left 14px center;
 }

 section.contact #email {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%230f172a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z" fill="none"/><polyline points="22,6 12,13 2,6"/></svg>');
     background-repeat: no-repeat;
     background-position: left 14px center;
 }

 section.contact #company {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%230f172a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>');
     background-repeat: no-repeat;
     background-position: left 14px center;
 }

 section.contact #message {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%230f172a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V5a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>');
     background-repeat: no-repeat;
     background-position: left 14px top 14px;
 }

 section.contact .form-input,
 section.contact .form-textarea {
     padding-left: 48px;
 }

 /* RTL-aware icon alignment */
 [dir="rtl"] section.contact .form-input,
 [dir="rtl"] section.contact .form-textarea {
     padding-left: var(--space-4);
     padding-right: 48px;
 }

 [dir="rtl"] section.contact #name,
 [dir="rtl"] section.contact #email,
 [dir="rtl"] section.contact #company {
     background-position: right 14px center;
 }

 [dir="rtl"] section.contact #message {
     background-position: right 14px top 14px;
 }

 /* Error and status styling */
 section.contact .form-error {
     color: #b91c1c;
     font-size: var(--text-sm);
     margin-top: var(--space-2);
     min-height: 1.25rem;
 }

 section.contact .form-status {
     color: #065f46;
     font-weight: 700;
     margin-top: var(--space-3);
 }

 section.contact .form-input:invalid,
 section.contact .form-textarea:invalid {
     border-color: rgba(185, 28, 28, 0.6);
     box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
 }

 @keyframes buttonSweep {
     0% {
         transform: translateX(-120%);
         opacity: 0;
     }

     35% {
         opacity: 1;
     }

     70% {
         transform: translateX(120%);
         opacity: 0;
     }

     100% {
         transform: translateX(120%);
         opacity: 0;
     }
 }

 /* Contact icons subtle pop on hover */
 section.contact .contact-item:hover .contact-icon {
     transform: scale(1.06);
     transition: transform 200ms ease;
 }

 /* Emphasize the section badge with a gentle shimmer */
 section.contact .section-badge {
     position: relative;
 }

 section.contact .section-badge::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
     transform: translateX(-120%);
     animation: shimmer 3.2s ease-in-out infinite;
     border-radius: inherit;
 }

 @keyframes shimmer {
     0% {
         transform: translateX(-120%);
     }

     60% {
         transform: translateX(120%);
     }

     100% {
         transform: translateX(120%);
     }
 }

 /* Contact header: make title and description dark */
 section.contact .section-header .section-title,
 section.contact .section-header .section-description {
     color: #0f172a !important;
     -webkit-text-fill-color: #0f172a !important;
     text-shadow: none !important;
 }

 /* Enhanced Contact Section */
 /* Footer Contact Section - Enhanced Professional Design */
 .footer-contact {
     display: flex;
     flex-direction: column;
     gap: var(--space-6);
 }

 .footer-contact::before {
     display: none;
 }

 .footer-contact .contact-info {
     display: flex;
     flex-direction: column;
     gap: var(--space-5);
 }

 .footer-contact .contact-link {
     display: flex;
     align-items: center;
     gap: var(--space-4);
     padding: var(--space-3) var(--space-4);
     color: rgba(255, 255, 255, 0.9);
     text-decoration: none;
     transition: all 0.3s ease;
     font-weight: 400;
     font-size: var(--text-base);
     border-radius: var(--radius-md);
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .footer-contact .contact-link::after {
     display: none;
 }

 .footer-contact .contact-link:hover {
     color: #ffffff;
     background: rgba(5, 150, 105, 0.1);
     border-color: rgba(5, 150, 105, 0.3);
     transform: translateX(-4px);
     box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
 }

 .footer-contact .contact-item {
     display: flex;
     align-items: flex-start;
     gap: var(--space-4);
     padding: var(--space-3) var(--space-4);
     color: rgba(255, 255, 255, 0.9);
     font-weight: 400;
     font-size: var(--text-base);
     border-radius: var(--radius-md);
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.05);
     transition: all 0.3s ease;
 }

 .footer-contact .contact-item:hover {
     background: rgba(5, 150, 105, 0.1);
     border-color: rgba(5, 150, 105, 0.3);
     transform: translateX(-4px);
     box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
 }

 .footer-contact .contact-icon {
     font-size: var(--text-lg);
     color: var(--primary);
     min-width: 40px;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(5, 150, 105, 0.15);
     border-radius: 50%;
     transition: all 0.3s ease;
     flex-shrink: 0;
 }

 .footer-contact .contact-link:hover .contact-icon,
 .footer-contact .contact-item:hover .contact-icon {
     background: var(--primary);
     color: #ffffff;
     transform: scale(1.1);
     box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
 }

 .footer-contact .contact-text {
     font-weight: 400;
     font-size: var(--text-base);
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.9);
     transition: color 0.3s ease;
     flex: 1;
 }

 .footer-contact .contact-link:hover .contact-text,
 .footer-contact .contact-item:hover .contact-text {
     color: #ffffff;
 }

 /* Compact Footer Bottom */
 .footer-bottom {
     text-align: center;
     padding-top: var(--space-8);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     margin-top: var(--space-8);
     position: relative;
     z-index: 10;
 }

 .footer-bottom::before {
     display: none;
 }

 .footer-bottom p {
     color: rgba(255, 255, 255, 0.6);
     font-size: var(--text-sm);
     margin: 0;
     font-weight: 400;
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     .footer-content {
         grid-template-columns: 1fr 1fr;
         gap: var(--space-10);
         column-gap: var(--space-12);
     }

     .footer-brand {
         grid-column: 1 / -1;
         text-align: center;
         margin-bottom: var(--space-4);
     }

     .footer-logo {
         height: 90px;
     }
 }

 @media (max-width: 768px) {
     .about-hero-card {
         padding: var(--space-12) var(--space-6);
         margin: 0 var(--space-4);
     }

     .about-features {
         grid-template-columns: 1fr;
         gap: var(--space-5);
         margin-top: var(--space-8);
     }

     .feature-item {
         padding: var(--space-7) var(--space-5);
         max-width: 100%;
     }

     .feature-icon-wrapper {
         width: 65px;
         height: 65px;
     }

     .about-title {
         font-size: var(--text-3xl);
     }

     .about-description {
         font-size: var(--text-base);
     }
 }

 @media (max-width: 480px) {
     .about-hero-card {
         padding: var(--space-10) var(--space-5);
         border-radius: var(--radius-2xl);
     }

     .feature-item {
         padding: var(--space-6) var(--space-4);
     }

     .feature-icon-wrapper {
         width: 60px;
         height: 60px;
     }
 }

 @media (max-width: 768px) {
     .footer {
         padding: var(--space-10) 0 var(--space-6);
     }

     .footer-content {
         grid-template-columns: 1fr;
         gap: var(--space-10);
         text-align: center;
         padding: 0 var(--space-4);
     }

     .footer-brand {
         grid-column: 1;
     }

     .footer-logo {
         height: 80px;
         margin: 0 auto var(--space-4);
     }

     .footer-navigation,
     .product-links,
     .contact-info {
         align-items: center;
     }

     .nav-item,
     .product-link {
         justify-content: center;
         max-width: 280px;
         margin: 0 auto;
     }

     .footer-contact .contact-link,
     .footer-contact .contact-item {
         justify-content: center;
         max-width: 100%;
         margin: 0;
     }

     .footer-contact .contact-icon {
         width: 36px;
         height: 36px;
         min-width: 36px;
         font-size: var(--text-base);
     }

     .contact-text {
         white-space: normal;
         text-align: center;
     }

     .footer-title {
         font-size: var(--text-base);
     }
 }

 @media (max-width: 480px) {
     .footer {
         padding: var(--space-8) 0 var(--space-4);
     }

     .footer-content {
         gap: var(--space-8);
         padding: 0 var(--space-3);
     }

     .footer-logo {
         height: 70px;
     }

     .footer-title {
         font-size: var(--text-sm);
     }

     .nav-item,
     .product-link {
         padding: var(--space-3);
         font-size: var(--text-xs);
         max-width: 200px;
     }

     .footer-contact .contact-link,
     .footer-contact .contact-item {
         padding: var(--space-2) var(--space-3);
         font-size: var(--text-sm);
         max-width: 100%;
     }

     .footer-contact .contact-icon {
         width: 32px;
         height: 32px;
         min-width: 32px;
         font-size: var(--text-sm);
     }

     .nav-icon,
     .product-icon {
         font-size: var(--text-base);
     }
 }

 /* Stunning Animations */
 @keyframes logoFloat {

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

     50% {
         transform: translateY(-8px) scale(1.05);
         filter: brightness(1.1);
     }
 }

 @keyframes loadingProgress {
     0% {
         width: 0%;
         opacity: 0.8;
     }

     50% {
         opacity: 1;
     }

     100% {
         width: 100%;
         opacity: 0.8;
     }
 }

 @keyframes badgeGlow {

     0%,
     100% {
         transform: translateY(0px) scale(1);
         box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
     }

     50% {
         transform: translateY(-3px) scale(1.02);
         box-shadow: 0 8px 30px rgba(5, 150, 105, 0.5);
     }
 }

 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-30px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(30px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes cardHover {
     0% {
         transform: translateY(0px) scale(1);
         box-shadow: 0 4px 20px rgba(5, 150, 105, 0.1);
     }

     100% {
         transform: translateY(-8px) scale(1.02);
         box-shadow: 0 20px 40px rgba(5, 150, 105, 0.2);
     }
 }

 @keyframes chairmanFloat {

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

     50% {
         transform: translateY(-5px) scale(1.02);
     }
 }

 @keyframes iconPulse {

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

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

 @keyframes shimmer {
     0% {
         transform: translateX(-100%);
         opacity: 0;
     }

     50% {
         opacity: 1;
     }

     100% {
         transform: translateX(100%);
         opacity: 0;
     }
 }

 @keyframes gradientShift {

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

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

 @keyframes float {

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

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

 @keyframes pulse {

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

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

 /* FANTASTIC HERO ANIMATIONS */
 @keyframes heroPulse {

     0%,
     100% {
         background-size: 400% 400%, 400% 400%, 100% 100%;
     }

     50% {
         background-size: 500% 500%, 500% 500%, 100% 100%;
     }
 }

 @keyframes particlesFloat {
     0% {
         transform: translateY(0px) translateX(0px);
     }

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

 @keyframes wavesFloat {

     0%,
     100% {
         transform: rotate(0deg) scale(1);
     }

     50% {
         transform: rotate(180deg) scale(1.1);
     }
 }

 @keyframes shapeFloat {

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

     33% {
         transform: translateY(-20px) rotate(120deg);
     }

     66% {
         transform: translateY(10px) rotate(240deg);
     }
 }

 @keyframes gridMove {
     0% {
         transform: translateX(0) translateY(0);
     }

     100% {
         transform: translateX(50px) translateY(50px);
     }
 }

 @keyframes orbFloat {

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

     50% {
         transform: translateY(-30px) scale(1.1);
     }
 }

 @keyframes badgePulse {

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

     50% {
         opacity: 0.6;
         transform: scale(1.05);
     }
 }

 @keyframes wordGlow {

     0%,
     100% {
         text-shadow: 0 0 5px rgba(5, 150, 105, 0.3);
     }

     50% {
         text-shadow: 0 0 20px rgba(5, 150, 105, 0.6);
     }
 }

 @keyframes wordFloat {

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

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

 @keyframes underlineGlow {

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

     50% {
         opacity: 1;
         transform: scaleX(1.1);
     }
 }

 @keyframes highlightPulse {

     0%,
     100% {
         transform: scale(1);
         box-shadow: 0 2px 10px rgba(5, 150, 105, 0.2);
     }

     50% {
         transform: scale(1.05);
         box-shadow: 0 4px 20px rgba(5, 150, 105, 0.4);
     }
 }

 @keyframes btnBgPulse {

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

     50% {
         opacity: 0.2;
         transform: scale(1.05);
     }
 }

 @keyframes borderGlow {

     0%,
     100% {
         opacity: 0.6;
     }

     50% {
         opacity: 1;
     }
 }

 @keyframes numberCount {
     0% {
         transform: scale(0.8);
         opacity: 0;
     }

     50% {
         transform: scale(1.1);
     }

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

 @keyframes techFloat {

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

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

 @keyframes arrowBounce {

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

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

 /* NEW BACKGROUND IMAGE ANIMATIONS */
 @keyframes imagePan {

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

     50% {
         transform: scale(1.05) translateX(-10px);
     }
 }

 @keyframes overlayShift {

     0%,
     100% {
         background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(5, 150, 105, 0.2) 50%, rgba(0, 0, 0, 0.6) 100%);
     }

     50% {
         background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(5, 150, 105, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
     }
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .nav-menu {
         display: none;
     }

     .mobile-toggle {
         display: flex;
     }

     .nav-container {
         height: 70px;
     }

     .nav-brand {
         padding: 0 var(--space-4);
     }

     .nav-brand .logo {
         height: 130px;
     }

     .hero {
         margin-top: 0;
     }

     .hero-content {
         min-height: 100vh;
         padding: calc(var(--space-16) + 80px) var(--space-4) var(--space-16) var(--space-4);
     }

     .hero-title {
         font-size: var(--text-4xl);
     }

     .hero-subtitle {
         font-size: var(--text-xl);
     }

     .hero-actions {
         flex-direction: column;
         align-items: center;
         gap: var(--space-4);
     }

     .about-content {
         grid-template-columns: 1fr;
     }

     .chairman-content {
         grid-template-columns: 1fr;
     }

     .contact-content {
         grid-template-columns: 1fr;
     }

     .services-grid,
     .products-grid {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 480px) {
     .container {
         padding: 0 var(--space-4);
     }

     .hero-title {
         font-size: var(--text-3xl);
     }

     .section-title {
         font-size: var(--text-3xl);
     }
 }

 /* RTL Support */
 [dir="rtl"] .hero-content {
     direction: rtl;
 }

 [dir="rtl"] .about-content {
     direction: rtl;
 }

 [dir="rtl"] .chairman-content {
     direction: rtl;
 }

 [dir="rtl"] .contact-content {
     direction: rtl;
 }

 [dir="rtl"] .service-features li {
     padding-right: 0;
     padding-left: var(--space-6);
 }

 [dir="rtl"] .service-features li::before {
     right: auto;
     left: 0;
 }

 [dir="rtl"] .product-features li {
     padding-right: 0;
     padding-left: var(--space-6);
 }

 [dir="rtl"] .product-features li::before {
     right: auto;
     left: 0;
 }

 /* Accessibility */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
     }
 }

 /* Focus States */
 .btn:focus,
 .nav-link:focus,
 .lang-toggle:focus,
 .mobile-toggle:focus,
 .form-input:focus,
 .form-textarea:focus,
 .form-submit:focus {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
 }

 /* Stunning Visual Enhancements */
 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 20% 20%, rgba(5, 150, 105, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
     animation: pulse 4s ease-in-out infinite;
     z-index: 1;
 }

 .hero-badge::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
     animation: shimmer 3s ease-in-out infinite;
     border-radius: var(--radius-full);
 }

 .btn-primary::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
     animation: shimmer 2s ease-in-out infinite;
     border-radius: var(--radius-full);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .btn-primary:hover::before {
     opacity: 1;
 }

 /* Stunning scroll reveal animations */
 section {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }

 section.animate {
     opacity: 1;
     transform: translateY(0);
 }

 /* Enhanced card animations */
 .service-card,
 .product-card {
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .service-card:hover,
 .product-card:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: 0 20px 40px rgba(5, 150, 105, 0.2);
 }

 /* Stunning text animations */
 .hero-title {
     background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary) 50%, var(--secondary) 100%);
     background-size: 200% 200%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: gradientShift 8s ease infinite;
 }

 /* Enhanced loading screen */
 .loading-screen {
     background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
     background-size: 400% 400%;
     animation: gradientShift 3s ease infinite;
 }

 /* Glow animations */
 @keyframes titleGlow {

     0%,
     100% {
         text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(5, 150, 105, 0.6);
     }

     50% {
         text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(5, 150, 105, 0.8), 0 0 60px rgba(5, 150, 105, 0.4);
     }
 }

 @keyframes subtitleGlow {

     0%,
     100% {
         text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(5, 150, 105, 0.4);
     }

     50% {
         text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(5, 150, 105, 0.6), 0 0 50px rgba(5, 150, 105, 0.3);
     }
 }

 /* Enhanced navbar animations */
 @keyframes navbarSlideIn {
     from {
         transform: translateY(-100%);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 @keyframes logoFloat {

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

     25% {
         transform: translateY(-3px) rotate(1deg);
     }

     50% {
         transform: translateY(-5px) rotate(0deg);
     }

     75% {
         transform: translateY(-3px) rotate(-1deg);
     }
 }

 @keyframes logoGlow {

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

     50% {
         opacity: 0.6;
         transform: scale(1.05);
     }
 }

 @keyframes logoPulse {

     0%,
     100% {
         filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 20px rgba(110, 231, 183, 0.6));
     }

     50% {
         filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 30px rgba(110, 231, 183, 0.8)) drop-shadow(0 0 40px rgba(110, 231, 183, 0.4));
     }
 }

 @keyframes navLinkPulse {

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

     50% {
         transform: scale(1.05);
     }
 }

 /* Neon glow animation for navbar */
 @keyframes neonGlow {

     0%,
     100% {
         box-shadow: 0 0 20px rgba(110, 231, 183, 0.3), 0 0 40px rgba(110, 231, 183, 0.2), 0 0 60px rgba(110, 231, 183, 0.1);
         border-color: rgba(110, 231, 183, 0.2);
     }

     50% {
         box-shadow: 0 0 30px rgba(110, 231, 183, 0.5), 0 0 60px rgba(110, 231, 183, 0.3), 0 0 90px rgba(110, 231, 183, 0.2);
         border-color: rgba(110, 231, 183, 0.4);
     }
 }

 @keyframes neonGlowScrolled {

     0%,
     100% {
         box-shadow: 0 0 30px rgba(110, 231, 183, 0.6), 0 0 60px rgba(110, 231, 183, 0.4), 0 0 90px rgba(110, 231, 183, 0.2), 0 4px 16px rgba(5, 150, 105, 0.3);
         border-color: rgba(110, 231, 183, 0.4);
     }

     50% {
         box-shadow: 0 0 40px rgba(110, 231, 183, 0.8), 0 0 80px rgba(110, 231, 183, 0.6), 0 0 120px rgba(110, 231, 183, 0.4), 0 4px 16px rgba(5, 150, 105, 0.3);
         border-color: rgba(110, 231, 183, 0.6);
     }
 }

 /* Enhanced floating particles effect */
 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: radial-gradient(circle at 20% 80%, rgba(110, 231, 183, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(110, 231, 183, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 40% 40%, rgba(110, 231, 183, 0.05) 0%, transparent 50%);
     animation: particleFloat 20s ease-in-out infinite;
     pointer-events: none;
     z-index: 1;
 }

 @keyframes particleFloat {

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

     25% {
         transform: translateY(-20px) rotate(90deg);
         opacity: 0.6;
     }

     50% {
         transform: translateY(-40px) rotate(180deg);
         opacity: 0.4;
     }

     75% {
         transform: translateY(-20px) rotate(270deg);
         opacity: 0.7;
     }
 }

 /* FINAL OVERRIDE - Products section description MUST be white */
 section#products p.section-description,
 section.products p.section-description,
 .products .container .section-header p.section-description {
     color: #ffffff !important;
     text-shadow:
         0 0 20px rgba(255, 255, 255, 1),
         0 0 30px rgba(255, 255, 255, 0.8),
         0 2px 10px rgba(0, 0, 0, 1),
         0 4px 15px rgba(0, 0, 0, 1) !important;
     font-weight: 600 !important;
 }

 /* FINAL OVERRIDE - Hero subtitle and description MUST be white */
 .hero-subtitle,
 .hero-subtitle-container .hero-subtitle,
 .hero-subtitle-container p,
 .hero-description .description-text,
 .hero-description p,
 .force-white,
 .force-white-text {
     color: #ffffff !important;
     text-shadow: none !important;
 }

 /* Force white class for JavaScript */
 .force-white-text {
     color: #ffffff !important;
     -webkit-text-fill-color: #ffffff !important;
     text-shadow: none !important;
 }