:root {
    --brand-primary: #6366f1;
    --brand-secondary: #8b5cf6;
    --brand-tertiary: #a855f7;
    --accent-cyan: #06b6d4;
    --accent-blue: #3b82f6;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --brand-gradient: linear-gradient(
      135deg,
      #6366f1 0%,
      #8b5cf6 50%,
      #a855f7 100%
    );
    --accent-gradient: linear-gradient(
      90deg,
      #06b6d4 0%,
      #3b82f6 50%,
      #8b5cf6 100%
    );
    --dark-bg: #0a0a0a;
    --dark-surface: #1e293b;
  }

  /* Dark Theme Base */
  body {
    background: linear-gradient(
      135deg,
      #0a0a0a 0%,
      #1e293b 50%,
      #0f172a 100%
    );
    background-attachment: fixed;
    overflow-x: hidden;
  }

  /* Glassmorphism Effects */
  .glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .glass-card {
    background: linear-gradient(
      145deg,
      rgba(99, 102, 241, 0.1) 0%,
      rgba(139, 92, 246, 0.05) 50%,
      rgba(168, 85, 247, 0.1) 100%
    );
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .glass-shimmer {
    position: relative;
    overflow: hidden;
  }

  .glass-shimmer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
    animation: glass-shimmer 3s ease-in-out infinite;
  }

  /* Modern Geometric Shapes */
  .geometric-bg {
    position: absolute;
    background: var(--brand-gradient);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morph 8s ease-in-out infinite;
    filter: blur(40px);
    opacity: 0.3;
  }

  /* Text Gradients */
  .text-brand-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-accent-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Scroll Reveal Animations */
  .scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Custom Cursor */
  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--brand-gradient);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: transform 0.2s ease;
  }

  .custom-cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(99, 102, 241, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: all 0.3s ease;
  }

  /* Hover Effects */
  .card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-hover:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.4),
      0 0 80px rgba(99, 102, 241, 0.3);
  }

  /* Navigation Blur */
  .nav-blur {
    backdrop-filter: blur(20px);
    background: rgba(10, 10, 10, 0.8);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  }

  /* Button Styles */
  .btn-primary {
    background: var(--brand-gradient);
    position: relative;
    overflow: hidden;
  }

  .btn-primary::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.5s;
  }

  .btn-primary:hover::before {
    left: 100%;
  }

  /* Status Indicators */
  .status-dot {
    position: relative;
  }

  .status-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: pulse 2s infinite;
  }

  /* Mobile Optimizations */
  @media (max-width: 768px) {
    .glass {
      backdrop-filter: blur(10px);
    }

    .geometric-bg {
      filter: blur(20px);
    }
  }

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

  /* High contrast mode */
  @media (prefers-contrast: high) {
    .glass {
      border: 2px solid rgba(99, 102, 241, 0.8);
    }
  }