:root {
  --background: oklch(1.0000 0 0);
  --foreground: oklch(0.1448 0 0);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.1448 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.1448 0 0);
  --primary: oklch(0.2046 0 0);
  --primary-foreground: oklch(0.9851 0 0);
  --secondary: oklch(0.9702 0 0);
  --secondary-foreground: oklch(0.2046 0 0);
  --muted: oklch(0.9702 0 0);
  --muted-foreground: oklch(0.5486 0 0);
  --accent: oklch(0.1750 0.0890 264.0520);
  --accent-foreground: oklch(0.9851 0 0);
  --destructive: oklch(0.5830 0.2387 28.4765);
  --destructive-foreground: oklch(0.9702 0 0);
  --border: oklch(0.9219 0 0);
  --input: oklch(0.9219 0 0);
  --ring: oklch(0.7090 0 0);
  --chart-1: oklch(0.2046 0 0);
  --chart-2: oklch(0.1750 0.0890 264.0520);
  --chart-3: oklch(0.4500 0.1200 200.0000);
  --chart-4: oklch(0.6000 0.1500 280.0000);
  --chart-5: oklch(0.3500 0.1000 320.0000);
  --sidebar: oklch(0.9851 0 0);
  --sidebar-foreground: oklch(0.1448 0 0);
  --sidebar-primary: oklch(0.2046 0 0);
  --sidebar-primary-foreground: oklch(0.9851 0 0);
  --sidebar-accent: oklch(0.9702 0 0);
  --sidebar-accent-foreground: oklch(0.2046 0 0);
  --sidebar-border: oklch(0.9219 0 0);
  --sidebar-ring: oklch(0.7090 0 0);
  --font-sans: 'Inter', 'Roboto', sans-serif;
  --font-serif: 'Merriweather', serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.10);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 4px 6px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.06);
  --shadow-lg: 0px 10px 15px -3px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.05);
  --shadow-xl: 0px 20px 25px -5px hsl(0 0% 0% / 0.10), 0px 10px 10px -5px hsl(0 0% 0% / 0.04);
  --shadow-2xl: 0px 25px 50px -12px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* Professional corporate theme */
.corporate-professional {
  --primary-corporate: oklch(0.2046 0 0); /* Deep charcoal */
  --secondary-corporate: oklch(0.1750 0.0890 264.0520); /* Professional blue accent */
  --neutral-light: oklch(0.9851 0 0); /* Clean white */
  --neutral-medium: oklch(0.9219 0 0); /* Light gray */
  --text-primary: oklch(0.1448 0 0); /* Dark text */
  --text-secondary: oklch(0.5486 0 0); /* Medium gray text */
}

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

body {
  font-family: var(--font-sans) !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  line-height: 1.6 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
}

.btn-primary {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover {
  background-color: var(--accent) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.card {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 1.5rem !important;
}

.text-muted {
  color: var(--muted-foreground) !important;
}

/* Animation Keyframes */
@keyframes heroFade {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes logoEnter {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes navSlide {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes sectionReveal {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes cardFloat {
    from { transform: translateY(30px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes scrollHint {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(8px); opacity: 1; }
}

@keyframes skeleton {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Animation Classes */
.animate-hero-fade {
    animation: heroFade 800ms ease-out forwards;
}

.animate-logo-enter {
    animation: logoEnter 600ms ease-out forwards;
}

.animate-nav-slide {
    animation: navSlide 400ms ease-out forwards;
}

.animate-section-reveal {
    animation: sectionReveal 600ms ease-out forwards;
}

.animate-card-float {
    animation: cardFloat 700ms ease-out forwards;
}

.animate-scroll-hint {
    animation: scrollHint 2s infinite ease-in-out;
}

/* Interactive Hover Effects */
.capability-card {
    transition: all 0.3s ease;
}

.capability-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--shadow-md);
}

.nav-link {
    transition: all 0.2s ease;
}

.nav-link:hover {
    transform: translateX(3px);
}

/* Intersection Observer Classes */
.fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Styles */
.hero-bg {
    background: linear-gradient(135deg, oklch(0.98 0 0) 0%, oklch(0.95 0.02 220) 100%);
}

.logo-hover {
    transition: all 0.3s ease;
}

.logo-hover:hover {
    transform: scale(1.05) rotate(5deg);
}

/* Scroll indicator */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    z-index: 1000;
    transition: width 0.3s ease;
}

/* Mobile menu animations */
.animate-fade-in {
    animation: fadeIn 300ms ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mobile menu slide down animation */
.mobile-menu-enter {
    animation: slideDown 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.mobile-menu-exit {
    animation: slideUp 300ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* Mobile menu background */
#mobileMenu {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999 !important;
}