/* nerdAppLabs - Ultra Modern SaaS Design */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Modern Color System */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  
  /* Semantic tokens */
  --background: #ffffff;
  --foreground: var(--gray-900);
  --muted: var(--gray-100);
  --muted-foreground: var(--gray-600);
  --border: var(--gray-200);
  --primary: var(--blue-600);
  --primary-foreground: #ffffff;
  --secondary: var(--gray-100);
  --secondary-foreground: 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;
  
  /* Radius */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Dark theme */
.dark {
  --background: var(--gray-900);
  --foreground: var(--gray-50);
  --muted: var(--gray-800);
  --muted-foreground: var(--gray-400);
  --border: var(--gray-700);
  --secondary: var(--gray-800);
  --secondary-foreground: var(--gray-50);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  font-variation-settings: 'opsz' 32;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--foreground);
}

.display-1 {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.1;
}

.display-2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

h1 { font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 600; }
h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }

.text-lg { font-size: 1.125rem; line-height: 1.7; }
.text-xl { font-size: 1.25rem; line-height: 1.7; }
.text-2xl { font-size: 1.5rem; line-height: 1.3; }

p {
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.lead {
  font-size: 1.25rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    transition: all 0.2s ease;
    height: 4rem;
}

.dark .navbar {
    background: rgba(17, 24, 39, 0.95);
}

.navbar-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.navbar-brand:hover {
    opacity: 0.8;
}

.brand-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.brand-tagline {
    font-size: 0.85rem;
    color: var(--muted-foreground);
    letter-spacing: 0.025em;
    margin-left: var(--space-2);
    opacity: 0.8;
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    width: 1.5rem;
    height: 2px;
    background-color: var(--foreground);
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.nav-link {
    padding: var(--space-2) var(--space-3);
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    line-height: 1;
}

.nav-link:hover,
.nav-link.active {
    color: var(--foreground);
    background-color: var(--secondary);
}

.theme-toggle {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    position: relative;
    overflow: hidden;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.05);
}

.theme-toggle:hover::before {
    opacity: 0.1;
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle i {
    position: relative;
    z-index: 1;
    transition: all 0.2s ease;
}

/* Hero Section */
.hero {
    padding: calc(4rem + var(--space-24)) var(--space-8) var(--space-24);
    text-align: center;
    width: 100%;
    margin: 0;
    position: relative;
    background: linear-gradient(135deg, var(--background) 0%, var(--secondary) 100%);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, var(--primary) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, var(--primary) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.02;
    pointer-events: none;
}

/* Page-specific hero backgrounds - Each Completely Unique with Neutral Colors */
.hero-home {
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(99,102,241,0.06) 0%, transparent 50%),
        linear-gradient(135deg, #fafafa 0%, #f5f5f5 20%, #f0f0f0 40%, #f8f8f8 60%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.hero-home::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Network Nodes --%3E%3Ccircle cx='300' cy='200' r='4' fill='%23000000' fill-opacity='0.15'/%3E%3Ccircle cx='500' cy='150' r='6' fill='%23000000' fill-opacity='0.12'/%3E%3Ccircle cx='800' cy='220' r='5' fill='%23000000' fill-opacity='0.14'/%3E%3Ccircle cx='1100' cy='180' r='4' fill='%23000000' fill-opacity='0.12'/%3E%3C!-- Flowing Connection Lines --%3E%3Cpath d='M300 200 Q400 120 500 150 Q650 180 800 220 Q950 200 1100 180' stroke='%23000000' stroke-opacity='0.1' stroke-width='1' fill='none'/%3E%3Cpath d='M200 350 Q400 300 600 380 Q800 420 1000 350 Q1200 320 1400 400' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' fill='none'/%3E%3C!-- Floating Data Particles --%3E%3Ccircle cx='250' cy='300' r='2' fill='%23000000' fill-opacity='0.12'/%3E%3Ccircle cx='450' cy='400' r='1.5' fill='%23000000' fill-opacity='0.1'/%3E%3Ccircle cx='650' cy='250' r='2' fill='%23000000' fill-opacity='0.12'/%3E%3Ccircle cx='850' cy='380' r='1.5' fill='%23000000' fill-opacity='0.1'/%3E%3Ccircle cx='1050' cy='300' r='2' fill='%23000000' fill-opacity='0.12'/%3E%3C!-- Subtle Code Architecture --%3E%3Crect x='100' y='500' width='40' height='25' fill='%23000000' fill-opacity='0.08' rx='3'/%3E%3Crect x='150' y='490' width='30' height='20' fill='%23000000' fill-opacity='0.06' rx='2'/%3E%3Crect x='1200' y='100' width='45' height='30' fill='%23000000' fill-opacity='0.08' rx='3'/%3E%3Crect x='1250' y='90' width='35' height='22' fill='%23000000' fill-opacity='0.06' rx='2'/%3E%3C!-- Watermark Grid Pattern --%3E%3Cdefs%3E%3Cpattern id='watermarkGrid' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 80 0 L 0 0 0 80' fill='none' stroke='%23000000' stroke-opacity='0.04' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='1' fill='%23000000' fill-opacity='0.06'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23watermarkGrid)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9;
    pointer-events: none;
    animation: immersiveFloat 25s ease-in-out infinite;
}

.hero-services {
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(14,165,233,0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(6,182,212,0.04) 0%, transparent 55%),
        linear-gradient(135deg, #fafafa 0%, #f5f5f5 25%, #f0f0f0 50%, #f8f8f8 75%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.hero-services::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Service Modules with Content (Moved Lower) --%3E%3Crect x='200' y='350' width='80' height='60' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' rx='6'/%3E%3Ccircle cx='240' cy='370' r='8' fill='%23000000' fill-opacity='0.06'/%3E%3Crect x='210' y='385' width='20' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='235' y='385' width='15' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='210' y='392' width='25' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='240' y='392' width='15' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='320' y='350' width='80' height='60' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' rx='6'/%3E%3Crect x='330' y='360' width='60' height='12' fill='%23000000' fill-opacity='0.05' rx='2'/%3E%3Crect x='330' y='375' width='25' height='8' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='360' y='375' width='20' height='8' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='330' y='388' width='35' height='8' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='370' y='388' width='15' height='8' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='440' y='350' width='80' height='60' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' rx='6'/%3E%3Ccircle cx='460' cy='370' r='3' fill='%23000000' fill-opacity='0.05'/%3E%3Ccircle cx='470' cy='370' r='3' fill='%23000000' fill-opacity='0.05'/%3E%3Ccircle cx='480' cy='370' r='3' fill='%23000000' fill-opacity='0.05'/%3E%3Ccircle cx='490' cy='370' r='3' fill='%23000000' fill-opacity='0.05'/%3E%3Cpath d='M450 385 L510 385 M450 392 L495 392 M450 399 L505 399' stroke='%23000000' stroke-opacity='0.04' stroke-width='1'/%3E%3Crect x='560' y='350' width='80' height='60' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' rx='6'/%3E%3Cpath d='M570 365 Q585 360 600 365 Q615 370 630 365' stroke='%23000000' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M570 375 Q585 370 600 375 Q615 380 630 375' stroke='%23000000' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Crect x='575' y='385' width='8' height='8' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='588' y='385' width='8' height='8' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='601' y='385' width='8' height='8' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='614' y='385' width='8' height='8' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3C!-- Simple Technical Element --%3E%3Ccircle cx='1000' cy='380' r='15' fill='none' stroke='%23000000' stroke-opacity='0.06' stroke-width='1'/%3E%3Ccircle cx='1000' cy='380' r='8' fill='%23000000' fill-opacity='0.04'/%3E%3C!-- Background Pattern --%3E%3Cdefs%3E%3Cpattern id='servicegrid' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='%23000000' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='30' r='0.5' fill='%23000000' fill-opacity='0.04'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23servicegrid)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.85;
    pointer-events: none;
    animation: immersiveFloat 25s ease-in-out infinite;
}

.hero-portfolio {
    background: 
        radial-gradient(ellipse at 70% 30%, rgba(99,102,241,0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(59,130,246,0.04) 0%, transparent 55%),
        linear-gradient(135deg, #fafafa 0%, #f5f5f5 30%, #f0f0f0 60%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.hero-portfolio::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Portfolio Project Frames with Content (Smaller Boxes) --%3E%3Crect x='150' y='250' width='150' height='90' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' rx='6'/%3E%3Crect x='160' y='260' width='130' height='60' fill='%23000000' fill-opacity='0.03' rx='3'/%3E%3Ccircle cx='225' cy='290' r='12' fill='%23000000' fill-opacity='0.05'/%3E%3Crect x='200' y='305' width='50' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='200' y='312' width='35' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='350' y='250' width='150' height='90' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' rx='6'/%3E%3Crect x='360' y='260' width='130' height='60' fill='%23000000' fill-opacity='0.03' rx='3'/%3E%3Crect x='370' y='270' width='25' height='15' fill='%23000000' fill-opacity='0.05' rx='2'/%3E%3Crect x='400' y='270' width='20' height='15' fill='%23000000' fill-opacity='0.05' rx='2'/%3E%3Crect x='425' y='270' width='25' height='15' fill='%23000000' fill-opacity='0.05' rx='2'/%3E%3Crect x='370' y='290' width='60' height='20' fill='%23000000' fill-opacity='0.04' rx='2'/%3E%3Crect x='550' y='250' width='150' height='90' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' rx='6'/%3E%3Crect x='560' y='260' width='130' height='60' fill='%23000000' fill-opacity='0.03' rx='3'/%3E%3Cpath d='M580 275 Q625 270 670 275 Q625 300 580 305 Z' fill='%23000000' fill-opacity='0.05'/%3E%3Cpath d='M580 310 L670 310 M585 315 L665 315' stroke='%23000000' stroke-opacity='0.04' stroke-width='1'/%3E%3Crect x='750' y='250' width='150' height='90' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' rx='6'/%3E%3Crect x='760' y='260' width='130' height='60' fill='%23000000' fill-opacity='0.03' rx='3'/%3E%3Ccircle cx='795' cy='280' r='5' fill='none' stroke='%23000000' stroke-opacity='0.05' stroke-width='1'/%3E%3Ccircle cx='815' cy='285' r='3' fill='none' stroke='%23000000' stroke-opacity='0.04' stroke-width='1'/%3E%3Ccircle cx='835' cy='290' r='2' fill='none' stroke='%23000000' stroke-opacity='0.04' stroke-width='1'/%3E%3Crect x='770' y='300' width='40' height='12' fill='%23000000' fill-opacity='0.04' rx='2'/%3E%3C!-- Simple Success Indicators --%3E%3Cpath d='M225 370 L230 375 L240 365' stroke='%23000000' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M425 370 L430 375 L440 365' stroke='%23000000' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M625 370 L630 375 L640 365' stroke='%23000000' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M825 370 L830 375 L840 365' stroke='%23000000' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3C!-- Background Pattern --%3E%3Cdefs%3E%3Cpattern id='portfoliogrid' width='50' height='50' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='25' cy='25' r='0.5' fill='%23000000' fill-opacity='0.04'/%3E%3Cpath d='M0 25 L50 25 M25 0 L25 50' stroke='%23000000' stroke-opacity='0.02' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23portfoliogrid)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    pointer-events: none;
    animation: immersiveFloat 25s ease-in-out infinite;
}

.hero-about {
    background: 
        radial-gradient(ellipse at 40% 60%, rgba(156,163,175,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(107,114,128,0.03) 0%, transparent 55%),
        linear-gradient(135deg, #fafafa 0%, #f5f5f5 25%, #f0f0f0 50%, #f8f8f8 75%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.hero-about::before {
    content: '';
    position: absolute;
    top: -8%;
    left: -8%;
    right: -8%;
    bottom: -8%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Timeline --%3E%3Cpath d='M150 350 Q350 330 550 370 Q750 410 1100 350' stroke='%23000000' stroke-opacity='0.12' stroke-width='2' fill='none'/%3E%3C!-- Milestone Dots --%3E%3Ccircle cx='250' cy='340' r='3' fill='%23000000' fill-opacity='0.1'/%3E%3Ccircle cx='450' cy='360' r='3' fill='%23000000' fill-opacity='0.1'/%3E%3Ccircle cx='650' cy='390' r='3' fill='%23000000' fill-opacity='0.1'/%3E%3Ccircle cx='850' cy='370' r='3' fill='%23000000' fill-opacity='0.1'/%3E%3C!-- Growth Branches --%3E%3Cpath d='M250 340 Q300 250 350 200' stroke='%23000000' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M450 360 Q500 450 550 500' stroke='%23000000' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M650 390 Q700 300 750 250' stroke='%23000000' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M850 370 Q900 470 950 520' stroke='%23000000' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3C!-- Simple Value Symbols --%3E%3Cpath d='M330 190 L350 180 L370 190 L360 210 L340 210 Z' fill='%23000000' fill-opacity='0.08'/%3E%3Cpath d='M530 490 Q540 480 550 490' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' fill='none'/%3E%3Ccircle cx='730' cy='240' r='4' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1'/%3E%3Crect x='930' y='510' width='10' height='8' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' rx='1'/%3E%3C!-- Background Pattern --%3E%3Cdefs%3E%3Cpattern id='aboutgrid' width='70' height='70' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='35' cy='35' r='0.5' fill='%23000000' fill-opacity='0.04'/%3E%3Cpath d='M15 15 Q35 25 55 15 M15 55 Q35 45 55 55' stroke='%23000000' stroke-opacity='0.03' stroke-width='0.5' fill='none'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23aboutgrid)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    pointer-events: none;
    animation: aboutFlow 35s ease-in-out infinite;
}

.hero-team {
    background: 
        radial-gradient(ellipse at 15% 35%, rgba(75,85,99,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 65%, rgba(55,65,81,0.03) 0%, transparent 55%),
        linear-gradient(135deg, #fafafa 0%, #f5f5f5 30%, #f0f0f0 60%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.hero-team::before {
    content: '';
    position: absolute;
    top: -5%;
    left: -5%;
    right: -5%;
    bottom: -5%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Central Hub --%3E%3Ccircle cx='700' cy='350' r='20' fill='none' stroke='%23000000' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='12' fill='none' stroke='%23000000' stroke-opacity='0.12' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='4' fill='%23000000' fill-opacity='0.12'/%3E%3C!-- Team Nodes --%3E%3Ccircle cx='300' cy='200' r='6' fill='%23000000' fill-opacity='0.08'/%3E%3Ccircle cx='500' cy='170' r='6' fill='%23000000' fill-opacity='0.08'/%3E%3Ccircle cx='900' cy='190' r='6' fill='%23000000' fill-opacity='0.08'/%3E%3Ccircle cx='1100' cy='230' r='6' fill='%23000000' fill-opacity='0.08'/%3E%3Ccircle cx='250' cy='450' r='6' fill='%23000000' fill-opacity='0.08'/%3E%3Ccircle cx='450' cy='500' r='6' fill='%23000000' fill-opacity='0.08'/%3E%3Ccircle cx='950' cy='470' r='6' fill='%23000000' fill-opacity='0.08'/%3E%3Ccircle cx='1150' cy='430' r='6' fill='%23000000' fill-opacity='0.08'/%3E%3C!-- Connections --%3E%3Cpath d='M306 200 Q500 250 694 345' stroke='%23000000' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M500 176 Q600 250 694 345' stroke='%23000000' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M894 190 Q800 250 706 345' stroke='%23000000' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M1094 230 Q900 250 706 345' stroke='%23000000' stroke-opacity='0.06' stroke-width='1'/%3E%3C!-- Background Pattern --%3E%3Cdefs%3E%3Cpattern id='teamgrid' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='30' cy='30' r='0.5' fill='%23000000' fill-opacity='0.04'/%3E%3Cpath d='M15 15 Q30 25 45 15 M15 45 Q30 35 45 45' stroke='%23000000' stroke-opacity='0.03' stroke-width='0.5' fill='none'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23teamgrid)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    pointer-events: none;
    animation: teamPulse 40s ease-in-out infinite;
}

.hero-contact {
    background: 
        radial-gradient(ellipse at 25% 40%, rgba(59,130,246,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 60%, rgba(99,102,241,0.06) 0%, transparent 50%),
        linear-gradient(135deg, #fafafa 0%, #f5f5f5 20%, #f0f0f0 40%, #f8f8f8 60%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.hero-contact::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Communication Hub --%3E%3Ccircle cx='700' cy='350' r='25' fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='15' fill='none' stroke='%23000000' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='6' fill='%23000000' fill-opacity='0.12'/%3E%3C!-- Message Bubbles --%3E%3Crect x='250' y='180' width='80' height='50' fill='%23000000' fill-opacity='0.06' rx='15'/%3E%3Crect x='260' y='190' width='20' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='260' y='197' width='30' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='260' y='204' width='25' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Cpath d='M290 230 L300 240 L310 230' fill='%23000000' fill-opacity='0.06'/%3E%3Crect x='1000' y='200' width='90' height='55' fill='%23000000' fill-opacity='0.06' rx='15'/%3E%3Crect x='1010' y='210' width='25' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='1010' y='217' width='35' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='1010' y='224' width='30' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Crect x='1010' y='231' width='20' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Cpath d='M1070 255 L1080 265 L1090 255' fill='%23000000' fill-opacity='0.06'/%3E%3C!-- Communication Lines --%3E%3Cpath d='M330 205 Q500 250 675 345' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' stroke-dasharray='3,3'/%3E%3Cpath d='M1000 228 Q850 280 725 345' stroke='%23000000' stroke-opacity='0.08' stroke-width='1' stroke-dasharray='3,3'/%3E%3C!-- Contact Points --%3E%3Ccircle cx='200' cy='400' r='8' fill='%23000000' fill-opacity='0.08'/%3E%3Crect x='195' y='385' width='10' height='8' fill='%23000000' fill-opacity='0.06' rx='1'/%3E%3Crect x='185' y='410' width='30' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Ccircle cx='500' cy='450' r='8' fill='%23000000' fill-opacity='0.08'/%3E%3Crect x='495' y='435' width='10' height='8' fill='%23000000' fill-opacity='0.06' rx='1'/%3E%3Crect x='485' y='460' width='30' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Ccircle cx='900' cy='420' r='8' fill='%23000000' fill-opacity='0.08'/%3E%3Crect x='895' y='405' width='10' height='8' fill='%23000000' fill-opacity='0.06' rx='1'/%3E%3Crect x='885' y='430' width='30' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3Ccircle cx='1200' cy='380' r='8' fill='%23000000' fill-opacity='0.08'/%3E%3Crect x='1195' y='365' width='10' height='8' fill='%23000000' fill-opacity='0.06' rx='1'/%3E%3Crect x='1185' y='390' width='30' height='3' fill='%23000000' fill-opacity='0.04' rx='1'/%3E%3C!-- Connection Network --%3E%3Cpath d='M208 400 Q350 375 692 350' stroke='%23000000' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M508 450 Q600 400 692 355' stroke='%23000000' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M908 420 Q800 385 708 355' stroke='%23000000' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M1192 380 Q950 365 708 355' stroke='%23000000' stroke-opacity='0.06' stroke-width='1'/%3E%3C!-- Global Connection Indicators --%3E%3Ccircle cx='150' cy='150' r='4' fill='%23000000' fill-opacity='0.06'/%3E%3Ccircle cx='1250' cy='120' r='4' fill='%23000000' fill-opacity='0.06'/%3E%3Ccircle cx='100' cy='500' r='4' fill='%23000000' fill-opacity='0.06'/%3E%3Ccircle cx='1300' cy='550' r='4' fill='%23000000' fill-opacity='0.06'/%3E%3C!-- Background Grid --%3E%3Cdefs%3E%3Cpattern id='contactgrid' width='70' height='70' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 70 0 L 0 0 0 70' fill='none' stroke='%23000000' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Ccircle cx='35' cy='35' r='1' fill='%23000000' fill-opacity='0.04'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23contactgrid)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.85;
    pointer-events: none;
    animation: immersiveFloat 25s ease-in-out infinite;
}

.hero-whyus {
    background:
        radial-gradient(ellipse at 35% 30%, rgba(16,185,129,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 65%, rgba(59,130,246,0.05) 0%, transparent 50%),
        linear-gradient(135deg, #fafafa 0%, #f5f5f5 20%, #f0f0f0 40%, #f8f8f8 60%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.hero-whyus::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3Cdefs%3E%3Cpattern id='whyusgrid' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='%23000000' stroke-opacity='0.03' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23whyusgrid)'/%3E%3Ccircle cx='700' cy='350' r='120' fill='none' stroke='%23000000' stroke-opacity='0.04' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='80' fill='none' stroke='%23000000' stroke-opacity='0.05' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='40' fill='none' stroke='%23000000' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M200 350 L600 350' stroke='%23000000' stroke-opacity='0.04' stroke-width='1' stroke-dasharray='5,5'/%3E%3Cpath d='M800 350 L1200 350' stroke='%23000000' stroke-opacity='0.04' stroke-width='1' stroke-dasharray='5,5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.85;
    pointer-events: none;
    animation: immersiveFloat 30s ease-in-out infinite;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-title {
    margin-bottom: var(--space-6);
    background: linear-gradient(135deg, var(--foreground) 0%, var(--muted-foreground) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--muted-foreground);
    margin-bottom: var(--space-8);
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--blue-700);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--muted);
  color: var(--foreground);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: 1rem;
}

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

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: var(--space-2);
}

.form-input {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--background);
    color: var(--foreground);
    font-size: 0.875rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

.form-input::placeholder {
    color: var(--muted-foreground);
}

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

select.form-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1rem;
    padding-right: calc(var(--space-3) + 1.5rem);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select.form-input:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.dark select.form-input {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.dark select.form-input:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Contact Info */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.contact-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.contact-item:hover .contact-icon {
    background: var(--primary);
    color: var(--primary-foreground);
    transform: scale(1.1);
}

.contact-item h5 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: var(--space-1);
}

.contact-item p {
  color: var(--muted-foreground);
  margin: 0;
}

/* Portfolio Specific Styles */
.project-image {
  height: 200px;
  background: var(--secondary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.project-placeholder {
  color: var(--primary);
  opacity: 0.6;
}

.project-content {
  flex: 1;
}

.project-category {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.tech-tag {
  padding: var(--space-1) var(--space-2);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.tech-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-6);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  text-align: center;
}

.tech-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

.tech-icon {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: var(--space-3);
}

.tech-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}

.grid-6 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.success-metric {
  margin-bottom: var(--space-6);
}

.metric-number {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.metric-label {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  font-weight: 500;
}

/* Team Specific Styles */
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8);
}

.team-avatar {
  margin-bottom: var(--space-6);
}

.avatar-placeholder {
  width: 120px;
  height: 120px;
  background: var(--secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  margin: 0 auto;
}

.team-info {
  width: 100%;
}

.team-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: var(--space-2);
}

.team-role {
  display: block;
  font-size: 0.875rem;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: var(--space-4);
}

.team-bio {
  color: var(--muted-foreground);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.team-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.skill-tag {
  padding: var(--space-1) var(--space-3);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius);
}

.expertise-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.expertise-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

.expertise-icon {
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
  transition: all 0.2s ease;
}

.expertise-card:hover .expertise-icon {
  background: var(--primary);
  color: var(--primary-foreground);
  transform: scale(1.1);
}

.expertise-card h5 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: var(--space-2);
}

.expertise-card p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0;
}

/* Sections */
.section {
  padding: var(--space-20) var(--space-6);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-16);
}

.section-title {
  margin-bottom: var(--space-4);
}

.section-description {
  font-size: 1.125rem;
  color: var(--muted-foreground);
}

/* Grid */
.grid {
  display: grid;
  gap: var(--space-8);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Core Values Grid - Fixed 3+3 Layout */
.grid-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* Responsive adjustments for values grid */
@media (max-width: 900px) {
  .grid-values {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Cards */
.card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--primary);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.card:hover::before {
    transform: scaleX(1);
}

.card-icon {
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: var(--space-6);
    font-size: 1.25rem;
    transition: all 0.2s ease;
}

.card:hover .card-icon {
    background: var(--primary);
    color: var(--primary-foreground);
    transform: scale(1.1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--foreground);
}

.card-description {
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* Stats */
.stats {
  background: var(--secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-16);
  margin: var(--space-16) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-8);
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-label {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Footer */
.footer {
  background: var(--secondary);
  border-top: 1px solid var(--border);
  padding: var(--space-16) var(--space-6) var(--space-8);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
  align-items: start;
}

.footer-section h6 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-5);
  color: var(--foreground);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.footer-links a {
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  transition: all 0.2s ease;
  line-height: 1.5;
  display: block;
  padding: var(--space-1) 0;
}

.footer-links a:hover {
  color: var(--primary);
  transform: translateX(2px);
}

.social-links {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
    flex-wrap: wrap;
    justify-content: flex-start;
}

.social-link {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--muted);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
    font-size: 1rem;
    border: 1px solid var(--border);
}

.social-link:hover {
    background: var(--primary);
    color: var(--primary-foreground);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 3rem;
  height: 3rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 40;
  opacity: 0;
  transform: translateY(1rem);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--blue-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Responsive */
@media (max-width: 768px) {
    .navbar-container {
        padding: 0 var(--space-4);
    }
    
    .hero {
        padding: calc(4rem + var(--space-16)) var(--space-4) var(--space-16);
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .section {
        padding: var(--space-16) var(--space-4);
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 280px;
    }
    
    .card {
        padding: var(--space-6);
    }
    
    .stats {
        padding: var(--space-8);
    }
    
    .footer {
        padding: var(--space-12) var(--space-4) var(--space-6);
    }
    
    .contact-info {
        gap: var(--space-4);
    }
    
    .contact-item {
        gap: var(--space-3);
    }
    
    .avatar-placeholder {
        width: 100px;
        height: 100px;
    }
    
    .team-skills {
        justify-content: center;
    }
    
    .brand-tagline {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .navbar-menu {
        position: fixed;
        top: 4rem;
        left: 0;
        right: 0;
        background: var(--background);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        gap: 0;
        padding: var(--space-4);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.3s ease;
        box-shadow: var(--shadow-lg);
    }

    .dark .navbar-menu {
        background: rgba(17, 24, 39, 0.98);
    }

    .navbar-menu.active {
        max-height: 100vh;
        opacity: 1;
    }

    .nav-link {
        padding: var(--space-3) var(--space-2);
        font-size: 0.9rem;
        width: 100%;
        text-align: left;
    }

    .theme-toggle {
        margin-left: 0;
        margin-top: var(--space-4);
        width: 100%;
    }

    body.menu-open {
        overflow: hidden;
    }
}

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

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); } 

/* Fledge Section Hover Effects */
.fledge-logo:hover {
    transform: scale(1.05);
}

.fledge-cta:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
} 

/* Enhanced Animations for Each Unique Hero */
@keyframes immersiveFloat {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25% { transform: translate(20px, -15px) scale(1.02) rotate(1deg); }
    50% { transform: translate(-10px, 20px) scale(0.98) rotate(-0.5deg); }
    75% { transform: translate(-20px, -20px) scale(1.01) rotate(0.5deg); }
}

@keyframes serviceArchitectureFlow {
    0% { transform: translateX(0) scale(1) rotateY(0deg); }
    25% { transform: translateX(15px) scale(1.02) rotateY(2deg); }
    50% { transform: translateX(30px) scale(1.05) rotateY(0deg); }
    75% { transform: translateX(15px) scale(1.02) rotateY(-2deg); }
    100% { transform: translateX(0) scale(1) rotateY(0deg); }
}

@keyframes portfolioShowcase {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    20% { transform: translate(10px, -8px) scale(1.03) rotate(0.5deg); }
    40% { transform: translate(-5px, 12px) scale(0.97) rotate(-0.3deg); }
    60% { transform: translate(-12px, -5px) scale(1.01) rotate(0.3deg); }
    80% { transform: translate(8px, 10px) scale(1.02) rotate(-0.2deg); }
}

@keyframes aboutFlow {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(18px, -12px) rotate(1.5deg) scale(1.01); }
    66% { transform: translate(-12px, 18px) rotate(-1deg) scale(0.99); }
}

@keyframes teamPulse {
    0%, 100% { transform: scale(1) rotate(0deg) translate(0, 0); }
    25% { transform: scale(1.08) rotate(0.8deg) translate(5px, -3px); }
    50% { transform: scale(0.92) rotate(-0.5deg) translate(-3px, 5px); }
    75% { transform: scale(1.04) rotate(0.3deg) translate(3px, 3px); }
} 

/* Dark theme hero backgrounds */
.dark .hero-home {
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(99,102,241,0.06) 0%, transparent 50%),
        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 20%, var(--gray-700) 40%, var(--gray-800) 60%, var(--gray-900) 100%);
}

.dark .hero-home::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Network Nodes --%3E%3Ccircle cx='300' cy='200' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='500' cy='150' r='6' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='800' cy='220' r='5' fill='%23ffffff' fill-opacity='0.07'/%3E%3Ccircle cx='1100' cy='180' r='4' fill='%23ffffff' fill-opacity='0.06'/%3E%3C!-- Flowing Connection Lines --%3E%3Cpath d='M300 200 Q400 120 500 150 Q650 180 800 220 Q950 200 1100 180' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M200 350 Q400 300 600 380 Q800 420 1000 350 Q1200 320 1400 400' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C!-- Floating Data Particles --%3E%3Ccircle cx='250' cy='300' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='450' cy='400' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='650' cy='250' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='850' cy='380' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='1050' cy='300' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3C!-- Subtle Code Architecture --%3E%3Crect x='100' y='500' width='40' height='25' fill='%23ffffff' fill-opacity='0.04' rx='3'/%3E%3Crect x='150' y='490' width='30' height='20' fill='%23ffffff' fill-opacity='0.03' rx='2'/%3E%3Crect x='1200' y='100' width='45' height='30' fill='%23ffffff' fill-opacity='0.04' rx='3'/%3E%3Crect x='1250' y='90' width='35' height='22' fill='%23ffffff' fill-opacity='0.03' rx='2'/%3E%3C!-- Watermark Grid Pattern --%3E%3Cdefs%3E%3Cpattern id='watermarkGridDark' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 80 0 L 0 0 0 80' fill='none' stroke='%23ffffff' stroke-opacity='0.02' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='1' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23watermarkGridDark)'/%3E%3C/svg%3E");
}

.dark .hero-services {
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(14,165,233,0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(6,182,212,0.04) 0%, transparent 55%),
        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 25%, var(--gray-700) 50%, var(--gray-800) 75%, var(--gray-900) 100%);
}

.dark .hero-services::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Service Modules with Content (Moved Lower) --%3E%3Crect x='200' y='350' width='80' height='60' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' rx='6'/%3E%3Ccircle cx='240' cy='370' r='8' fill='%23ffffff' fill-opacity='0.04'/%3E%3Crect x='210' y='385' width='20' height='3' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='235' y='385' width='15' height='3' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='210' y='392' width='25' height='3' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='240' y='392' width='15' height='3' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='320' y='350' width='80' height='60' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' rx='6'/%3E%3Crect x='330' y='360' width='60' height='12' fill='%23ffffff' fill-opacity='0.035' rx='2'/%3E%3Crect x='330' y='375' width='25' height='8' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='360' y='375' width='20' height='8' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='330' y='388' width='35' height='8' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='370' y='388' width='15' height='8' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='440' y='350' width='80' height='60' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' rx='6'/%3E%3Ccircle cx='460' cy='370' r='3' fill='%23ffffff' fill-opacity='0.035'/%3E%3Ccircle cx='470' cy='370' r='3' fill='%23ffffff' fill-opacity='0.035'/%3E%3Ccircle cx='480' cy='370' r='3' fill='%23ffffff' fill-opacity='0.035'/%3E%3Ccircle cx='490' cy='370' r='3' fill='%23ffffff' fill-opacity='0.035'/%3E%3Cpath d='M450 385 L510 385 M450 392 L495 392 M450 399 L505 399' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Crect x='560' y='350' width='80' height='60' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' rx='6'/%3E%3Cpath d='M570 365 Q585 360 600 365 Q615 370 630 365' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1' fill='none'/%3E%3Cpath d='M570 375 Q585 370 600 375 Q615 380 630 375' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1' fill='none'/%3E%3Crect x='575' y='385' width='8' height='8' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='588' y='385' width='8' height='8' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='601' y='385' width='8' height='8' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='614' y='385' width='8' height='8' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3C!-- Simple Technical Element --%3E%3Ccircle cx='1000' cy='380' r='15' fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Ccircle cx='1000' cy='380' r='8' fill='%23ffffff' fill-opacity='0.03'/%3E%3C!-- Background Pattern --%3E%3Cdefs%3E%3Cpattern id='servicegridDark' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='%23ffffff' stroke-opacity='0.02' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='30' r='0.5' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23servicegridDark)'/%3E%3C/svg%3E");
}

.dark .hero-portfolio {
    background: 
        radial-gradient(ellipse at 70% 30%, rgba(99,102,241,0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(59,130,246,0.05) 0%, transparent 55%),
        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 30%, var(--gray-700) 60%, var(--gray-900) 100%);
}

.dark .hero-portfolio::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Portfolio Project Frames with Content (Smaller Boxes) --%3E%3Crect x='150' y='250' width='150' height='90' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' rx='6'/%3E%3Crect x='160' y='260' width='130' height='60' fill='%23ffffff' fill-opacity='0.025' rx='3'/%3E%3Ccircle cx='225' cy='290' r='12' fill='%23ffffff' fill-opacity='0.035'/%3E%3Crect x='200' y='305' width='50' height='3' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='200' y='312' width='35' height='3' fill='%23ffffff' fill-opacity='0.03' rx='1'/%3E%3Crect x='350' y='250' width='150' height='90' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' rx='6'/%3E%3Crect x='360' y='260' width='130' height='60' fill='%23ffffff' fill-opacity='0.025' rx='3'/%3E%3Crect x='370' y='270' width='25' height='15' fill='%23ffffff' fill-opacity='0.035' rx='2'/%3E%3Crect x='400' y='270' width='20' height='15' fill='%23ffffff' fill-opacity='0.035' rx='2'/%3E%3Crect x='425' y='270' width='25' height='15' fill='%23ffffff' fill-opacity='0.035' rx='2'/%3E%3Crect x='370' y='290' width='60' height='20' fill='%23ffffff' fill-opacity='0.03' rx='2'/%3E%3Crect x='550' y='250' width='150' height='90' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' rx='6'/%3E%3Crect x='560' y='260' width='130' height='60' fill='%23ffffff' fill-opacity='0.025' rx='3'/%3E%3Cpath d='M580 275 Q625 270 670 275 Q625 300 580 305 Z' fill='%23ffffff' fill-opacity='0.035'/%3E%3Cpath d='M580 310 L670 310 M585 315 L665 315' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Crect x='750' y='250' width='150' height='90' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' rx='6'/%3E%3Crect x='760' y='260' width='130' height='60' fill='%23ffffff' fill-opacity='0.025' rx='3'/%3E%3Ccircle cx='795' cy='280' r='5' fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1'/%3E%3Ccircle cx='815' cy='285' r='3' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Ccircle cx='835' cy='290' r='2' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Crect x='770' y='300' width='40' height='12' fill='%23ffffff' fill-opacity='0.03' rx='2'/%3E%3C!-- Simple Success Indicators --%3E%3Cpath d='M225 370 L230 375 L240 365' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M425 370 L430 375 L440 365' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M625 370 L630 375 L640 365' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M825 370 L830 375 L840 365' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C!-- Background Pattern --%3E%3Cdefs%3E%3Cpattern id='portfoliogridDark' width='50' height='50' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='25' cy='25' r='0.5' fill='%23ffffff' fill-opacity='0.03'/%3E%3Cpath d='M0 25 L50 25 M25 0 L25 50' stroke='%23ffffff' stroke-opacity='0.015' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23portfoliogridDark)'/%3E%3C/svg%3E");
}

.dark .hero-about {
    background: 
        radial-gradient(ellipse at 40% 60%, rgba(156,163,175,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(107,114,128,0.06) 0%, transparent 55%),
        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 25%, var(--gray-700) 50%, var(--gray-800) 75%, var(--gray-900) 100%);
}

.dark .hero-about::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Timeline --%3E%3Cpath d='M150 350 Q350 330 550 370 Q750 410 1100 350' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='2' fill='none'/%3E%3C!-- Milestone Dots --%3E%3Ccircle cx='250' cy='340' r='3' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='450' cy='360' r='3' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='650' cy='390' r='3' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='850' cy='370' r='3' fill='%23ffffff' fill-opacity='0.05'/%3E%3C!-- Growth Branches --%3E%3Cpath d='M250 340 Q300 250 350 200' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3Cpath d='M450 360 Q500 450 550 500' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3Cpath d='M650 390 Q700 300 750 250' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3Cpath d='M850 370 Q900 470 950 520' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3C!-- Simple Value Symbols --%3E%3Cpath d='M330 190 L350 180 L370 190 L360 210 L340 210 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3Cpath d='M530 490 Q540 480 550 490' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Ccircle cx='730' cy='240' r='4' fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Crect x='930' y='510' width='10' height='8' fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' rx='1'/%3E%3C!-- Background Pattern --%3E%3Cdefs%3E%3Cpattern id='aboutgridDark' width='70' height='70' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='35' cy='35' r='0.5' fill='%23ffffff' fill-opacity='0.03'/%3E%3Cpath d='M15 15 Q35 25 55 15 M15 55 Q35 45 55 55' stroke='%23ffffff' stroke-opacity='0.02' stroke-width='0.5' fill='none'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23aboutgridDark)'/%3E%3C/svg%3E");
}

.dark .hero-team {
    background: 
        radial-gradient(ellipse at 15% 35%, rgba(75,85,99,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 65%, rgba(55,65,81,0.06) 0%, transparent 55%),
        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 30%, var(--gray-700) 60%, var(--gray-900) 100%);
}

.dark .hero-team::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Central Hub --%3E%3Ccircle cx='700' cy='350' r='20' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='12' fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='4' fill='%23ffffff' fill-opacity='0.12'/%3E%3C!-- Team Nodes --%3E%3Ccircle cx='300' cy='200' r='6' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='500' cy='170' r='6' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='900' cy='190' r='6' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='1100' cy='230' r='6' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='250' cy='450' r='6' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='450' cy='500' r='6' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='950' cy='470' r='6' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='1150' cy='430' r='6' fill='%23ffffff' fill-opacity='0.08'/%3E%3C!-- Connections --%3E%3Cpath d='M306 200 Q500 250 694 345' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M500 176 Q600 250 694 345' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M894 190 Q800 250 706 345' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M1094 230 Q900 250 706 345' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3C!-- Background Pattern --%3E%3Cdefs%3E%3Cpattern id='teamgridDark' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='30' cy='30' r='0.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Cpath d='M15 15 Q30 25 45 15 M15 45 Q30 35 45 45' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='0.5' fill='none'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23teamgridDark)'/%3E%3C/svg%3E");
}

.dark .hero-contact {
    background: 
        radial-gradient(ellipse at 25% 40%, rgba(59,130,246,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 60%, rgba(99,102,241,0.12) 0%, transparent 50%),
        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 20%, var(--gray-700) 40%, var(--gray-800) 60%, var(--gray-900) 100%);
}

.dark .hero-contact::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3C!-- Communication Hub --%3E%3Ccircle cx='700' cy='350' r='25' fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='15' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='6' fill='%23ffffff' fill-opacity='0.15'/%3E%3C!-- Message Bubbles --%3E%3Crect x='250' y='180' width='80' height='50' fill='%23ffffff' fill-opacity='0.06' rx='15'/%3E%3Crect x='260' y='190' width='20' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3Crect x='260' y='197' width='30' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3Crect x='260' y='204' width='25' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3Cpath d='M290 230 L300 240 L310 230' fill='%23ffffff' fill-opacity='0.06'/%3E%3Crect x='1000' y='200' width='90' height='55' fill='%23ffffff' fill-opacity='0.06' rx='15'/%3E%3Crect x='1010' y='210' width='25' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3Crect x='1010' y='217' width='35' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3Crect x='1010' y='224' width='30' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3Crect x='1010' y='231' width='20' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3Cpath d='M1070 255 L1080 265 L1090 255' fill='%23ffffff' fill-opacity='0.06'/%3E%3C!-- Communication Lines --%3E%3Cpath d='M330 205 Q500 250 675 345' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1' stroke-dasharray='3,3'/%3E%3Cpath d='M1000 228 Q850 280 725 345' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1' stroke-dasharray='3,3'/%3E%3C!-- Contact Points --%3E%3Ccircle cx='200' cy='400' r='8' fill='%23ffffff' fill-opacity='0.08'/%3E%3Crect x='195' y='385' width='10' height='8' fill='%23ffffff' fill-opacity='0.06' rx='1'/%3E%3Crect x='185' y='410' width='30' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3Ccircle cx='500' cy='450' r='8' fill='%23ffffff' fill-opacity='0.08'/%3E%3Crect x='495' y='435' width='10' height='8' fill='%23ffffff' fill-opacity='0.06' rx='1'/%3E%3Crect x='485' y='460' width='30' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3Ccircle cx='900' cy='420' r='8' fill='%23ffffff' fill-opacity='0.08'/%3E%3Crect x='895' y='405' width='10' height='8' fill='%23ffffff' fill-opacity='0.06' rx='1'/%3E%3Crect x='885' y='430' width='30' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3Ccircle cx='1200' cy='380' r='8' fill='%23ffffff' fill-opacity='0.08'/%3E%3Crect x='1195' y='365' width='10' height='8' fill='%23ffffff' fill-opacity='0.06' rx='1'/%3E%3Crect x='1185' y='390' width='30' height='3' fill='%23ffffff' fill-opacity='0.04' rx='1'/%3E%3C!-- Connection Network --%3E%3Cpath d='M208 400 Q350 375 692 350' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M508 450 Q600 400 692 355' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M908 420 Q800 385 708 355' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M1192 380 Q950 365 708 355' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3C!-- Global Connection Indicators --%3E%3Ccircle cx='150' cy='150' r='4' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='1250' cy='120' r='4' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='100' cy='500' r='4' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='1300' cy='550' r='4' fill='%23ffffff' fill-opacity='0.06'/%3E%3C!-- Background Grid --%3E%3Cdefs%3E%3Cpattern id='contactgridDark' width='70' height='70' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 70 0 L 0 0 0 70' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Ccircle cx='35' cy='35' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23contactgridDark)'/%3E%3C/svg%3E");
}

.dark .hero-whyus {
    background:
        radial-gradient(ellipse at 35% 30%, rgba(16,185,129,0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 65%, rgba(59,130,246,0.08) 0%, transparent 50%),
        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 20%, var(--gray-700) 40%, var(--gray-800) 60%, var(--gray-900) 100%);
}

.dark .hero-whyus::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none'%3E%3Cdefs%3E%3Cpattern id='whyusgridDark' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23whyusgridDark)'/%3E%3Ccircle cx='700' cy='350' r='120' fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='80' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Ccircle cx='700' cy='350' r='40' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M200 350 L600 350' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' stroke-dasharray='5,5'/%3E%3Cpath d='M800 350 L1200 350' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' stroke-dasharray='5,5'/%3E%3C/svg%3E");
}