:root{
      --glass-bg: rgba(255,255,255,0.12);
      --glass-border: rgba(255,255,255,0.18);
      --glass-highlight: rgba(255,255,255,0.08);
      --glass-shadow: rgba(0,0,0,0.15);
      --glass-blur: 24px;
      --glass-saturation: 180%;
      --glass-inner-highlight: rgba(255,255,255,0.06);
      --glass-contrast: 1.12;
      --glass-brightness: 1.05;
      
      --glass-hover-bg: rgba(255,255,255,0.18);
      --glass-hover-border: rgba(255,255,255,0.28);
      --glass-hover-highlight: rgba(255,255,255,0.15);
      --glass-hover-shadow: rgba(0,0,0,0.25);
      --glass-hover-blur: 28px;
      --glass-hover-saturation: 200%;
      
      --accent: #9333EA; /* purple accent matching logo */
      --accent-2: #c084fc;
      --purple-shadow: rgba(147, 51, 234, 0.3);
      --purple-glow: rgba(147, 51, 234, 0.6);
      --purple-border: rgba(147, 51, 234, 0.2);
    }
    .font-inter{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}

    /* Glassmorphism card */
    .glass{
      background: 
        radial-gradient(140px 80px at 10% 5%, rgba(255,255,255,0.15), rgba(255,255,255,0) 75%),
        radial-gradient(100px 50px at 90% 95%, rgba(147, 51, 234, 0.08), rgba(147, 51, 234, 0) 70%),
        linear-gradient(135deg, var(--glass-highlight), var(--glass-bg));
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
      border: 1px solid var(--glass-border);
      box-shadow: 
        0 8px 32px var(--glass-shadow), 
        inset 0 1px 1px var(--glass-highlight), 
        0 0 0 1px var(--glass-inner-highlight),
        0 0 20px var(--purple-glow);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border-top-color: var(--purple-border);
      border-left-color: var(--purple-border);
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      will-change: transform, backdrop-filter, box-shadow;
    }
    
    .glass::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 60%;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
      border-radius: inherit;
      pointer-events: none;
    }
    
    /* Add subtle glow effect */
    .glass::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 0.375rem;
      box-shadow: 0 0 18px var(--purple-glow);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: -1;
    }
    
    .glass:hover::after { opacity: 0.7; }
    
    .glass:hover {
      transform: translateY(-6px) scale(1.02);
      backdrop-filter: blur(var(--glass-hover-blur)) saturate(var(--glass-hover-saturation)) contrast(calc(var(--glass-contrast) + 0.08)) brightness(calc(var(--glass-brightness) + 0.03));
      -webkit-backdrop-filter: blur(var(--glass-hover-blur)) saturate(var(--glass-hover-saturation)) contrast(calc(var(--glass-contrast) + 0.08)) brightness(calc(var(--glass-brightness) + 0.03));
      border-color: var(--glass-hover-border);
      background:
        radial-gradient(180px 100px at 15% 0%, rgba(255,255,255,0.25), rgba(255,255,255,0) 70%),
        radial-gradient(120px 60px at 85% 100%, rgba(147, 51, 234, 0.15), rgba(147, 51, 234, 0) 70%),
        linear-gradient(135deg, var(--glass-hover-highlight), var(--glass-hover-bg));
      box-shadow: 
        0 20px 60px var(--glass-hover-shadow), 
        inset 0 1px 3px var(--glass-hover-highlight), 
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 40px var(--purple-glow);
      border-top-color: rgba(147, 51, 234, 0.3);
      border-left-color: rgba(147, 51, 234, 0.3);
    }
    
    .glass:hover::before {
      opacity: 0.8;
      height: 70%;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    }

    /* dark mode overrides */
    .dark { 
      --glass-bg: rgba(30,30,40,0.35);
      --glass-border: rgba(255,255,255,0.08);
      --glass-highlight: rgba(255,255,255,0.04);
      --glass-shadow: rgba(0,0,0,0.28);
      --glass-blur: 18px;
      --glass-saturation: 180%;
      --glass-inner-highlight: rgba(147, 51, 234, 0.10);
      --glass-contrast: 1.05;
      --glass-brightness: 0.98;
      
      --glass-hover-bg: rgba(40,40,55,0.48);
      --glass-hover-border: rgba(255,255,255,0.12);
      --glass-hover-highlight: rgba(255,255,255,0.08);
      --glass-hover-shadow: rgba(0,0,0,0.38);
      --glass-hover-blur: 22px;
      --glass-hover-saturation: 200%;
      
      --purple-shadow: rgba(147, 51, 234, 0.18);
      --purple-glow: rgba(147, 51, 234, 0.3);
    }
    
    .dark .glass{ 
      background:
        radial-gradient(120px 60px at 8% 4%, rgba(147, 51, 234, 0.08), rgba(0, 0, 0, 0) 70%),
        linear-gradient(135deg, var(--glass-highlight), var(--glass-bg));
      box-shadow: 0 6px 20px var(--glass-shadow), inset 0 1px 1px var(--glass-highlight), 0 0 0 1px rgba(147, 51, 234, 0.1);
    }
    
    .dark .glass::before { background: linear-gradient(to bottom, rgba(147, 51, 234, 0.08), rgba(0, 0, 0, 0)); }
    
    .dark .glass::after { box-shadow: 0 0 22px var(--purple-glow); }
    
    .dark .glass:hover {
      backdrop-filter: blur(var(--glass-hover-blur)) saturate(var(--glass-hover-saturation)) contrast(calc(var(--glass-contrast) + 0.05)) brightness(calc(var(--glass-brightness) + 0.02));
      -webkit-backdrop-filter: blur(var(--glass-hover-blur)) saturate(var(--glass-hover-saturation)) contrast(calc(var(--glass-contrast) + 0.05)) brightness(calc(var(--glass-brightness) + 0.02));
      background:
        radial-gradient(160px 80px at 20% 0%, rgba(147, 51, 234, 0.12), rgba(0, 0, 0, 0) 70%),
        linear-gradient(135deg, var(--glass-hover-highlight), var(--glass-hover-bg));
      border-color: var(--glass-hover-border);
      box-shadow: 0 16px 40px var(--glass-hover-shadow), inset 0 1px 3px var(--glass-hover-highlight), 0 0 0 1px rgba(147, 51, 234, 0.15);
    }
    
    .dark .glass:hover::before {
      opacity: 0.9;
      height: 70%;
      background: linear-gradient(to bottom, rgba(147, 51, 234, 0.12), rgba(0, 0, 0, 0));
    }

    /* subtle animated accent */
    .accent-grad{ background: linear-gradient(90deg, #9333EA, #8b5cf6, #c084fc 80%);} 

    /* small utility */
    .soft-shadow{ 
      box-shadow: 
        0 12px 40px var(--purple-shadow), 
        0 4px 12px rgba(0,0,0,0.1),
        0 0 20px var(--purple-glow);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .soft-shadow:hover {
      transform: translateY(-3px) scale(1.01);
      box-shadow: 
        0 20px 60px var(--purple-shadow), 
        0 8px 20px rgba(0,0,0,0.15),
        0 0 30px var(--purple-glow);
    }

    /* Enhanced button glassmorphism */
    .glass-button {
      background: 
        radial-gradient(100px 50px at 50% 0%, rgba(255,255,255,0.2), rgba(255,255,255,0) 70%),
        linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(147, 51, 234, 0.05));
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      border: 1px solid rgba(147, 51, 234, 0.3);
      box-shadow: 
        0 4px 16px rgba(147, 51, 234, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .glass-button:hover {
      background: 
        radial-gradient(120px 60px at 50% 0%, rgba(255,255,255,0.3), rgba(255,255,255,0) 70%),
        linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(147, 51, 234, 0.08));
      border-color: rgba(147, 51, 234, 0.5);
      box-shadow: 
        0 8px 24px rgba(147, 51, 234, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
      transform: translateY(-2px);
    }
    
    /* Hero animations */
    .hero-title {
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 0.8s ease-out 0.2s forwards;
    }
    
    .hero-subtitle {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s ease-out 0.4s forwards;
    }
    
    .hero-cta {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s ease-out 0.6s forwards;
    }
    
    .hero-trusted {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s ease-out 0.8s forwards;
    }
    
    .hero-console {
      opacity: 0;
      transform: translateX(30px) scale(0.95);
      animation: slideInRight 1s ease-out 0.4s forwards;
    }
    
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes slideInRight {
      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }
    
    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .glass, .glass:hover, .soft-shadow, .soft-shadow:hover, .timeline-step, .glass-button, .glass-button:hover,
      .hero-title, .hero-subtitle, .hero-cta, .hero-trusted, .hero-console { 
        animation: none !important; 
        opacity: 1 !important;
        transform: none !important;
      }
    }

    /* hero underline */
    .underline-accent{ background: linear-gradient(90deg,var(--accent), var(--accent-2)); -webkit-background-clip:text; color:transparent }

    /* compact simulator timeline */
    .timeline-step{ transition: transform .28s ease, opacity .28s ease }
    
    /* Custom select styling */
    select.glass {
      color: inherit;
      background-color: transparent;
      border: none;
      cursor: pointer;
      font-size: 0.95rem;
    }
    
    select.glass option {
      background-color: rgba(255, 255, 255, 0.95);
      color: #333;
    }
    
    .dark select.glass option {
      background-color: rgba(30, 30, 40, 0.95);
      color: #f1f1f1;
    }
    
    /* Remove default focus styles and add custom ones */
    select.glass:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.2);
    }
    
    /* Dropdown icon animation */
    .select-wrapper:hover svg {
      transform: translateY(1px);
      color: var(--accent);
      transition: all 0.3s ease;
    }
    
    /* Enhance the select on hover */
    select.glass:hover {
      backdrop-filter: blur(var(--glass-hover-blur)) saturate(var(--glass-hover-saturation));
      -webkit-backdrop-filter: blur(var(--glass-hover-blur)) saturate(var(--glass-hover-saturation));
    }
    
    /* Mobile-specific improvements */
    @media (max-width: 768px) {
      /* Larger touch targets for mobile */
      select.glass {
        min-height: 48px;
        font-size: 1rem;
      }
      
      .glass-button {
        min-height: 48px;
        font-size: 1rem;
        padding: 12px 24px;
      }
      
      /* Improved timeline steps for mobile */
      .timeline-step {
        padding: 16px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      
      .timeline-step .text-xs {
        align-self: flex-end;
        background: rgba(147, 51, 234, 0.1);
        padding: 4px 8px;
        rounded: 4px;
        border-radius: 4px;
      }
      
      /* Better spacing for mobile simulator */
      #simResult {
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      
      /* Prevent zoom on input focus on iOS */
      input, select, textarea {
        font-size: 16px !important;
      }
    }
    
    /* Touch device optimizations */
    @media (hover: none) and (pointer: coarse) {
      .glass:hover {
        transform: none;
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
      }

      .glass-button:hover {
        transform: none;
      }

      .soft-shadow:hover {
        transform: none;
      }
    }

/* Light mode glassmorphism styles */
.light, :root {
  --glass-bg: rgba(255,255,255,0.25);
  --glass-border: rgba(255,255,255,0.4);
  --glass-highlight: rgba(255,255,255,0.1);
  --glass-shadow: rgba(0,0,0,0.1);
  --glass-blur: 20px;
  --glass-saturation: 120%;
  --glass-contrast: 1.05;
  --glass-brightness: 1.02;

  --glass-hover-bg: rgba(255,255,255,0.35);
  --glass-hover-border: rgba(255,255,255,0.5);
  --glass-hover-highlight: rgba(255,255,255,0.15);
  --glass-hover-shadow: rgba(0,0,0,0.15);
  --glass-hover-blur: 24px;

  --accent: #6941C6;
  --accent-2: #C026D3;
  --purple-shadow: rgba(105, 65, 198, 0.2);
  --purple-glow: rgba(105, 65, 198, 0.4);
  --purple-border: rgba(105, 65, 198, 0.3);
}

.light .glass {
  background:
    linear-gradient(135deg, var(--glass-highlight), var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) brightness(var(--glass-brightness));
  border: 1px solid var(--glass-border);
  box-shadow:
    0 4px 16px var(--glass-shadow),
    inset 0 1px 1px var(--glass-highlight),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
}

.light .glass::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  height: 50%;
}

.light .glass::after {
  box-shadow: 0 0 12px var(--purple-glow);
}

.light .glass:hover {
  transform: translateY(-4px) scale(1.01);
  backdrop-filter: blur(var(--glass-hover-blur)) saturate(calc(var(--glass-saturation) + 10%)) contrast(calc(var(--glass-contrast) + 0.02)) brightness(calc(var(--glass-brightness) + 0.01));
  -webkit-backdrop-filter: blur(var(--glass-hover-blur)) saturate(calc(var(--glass-saturation) + 10%)) contrast(calc(var(--glass-contrast) + 0.02)) brightness(calc(var(--glass-brightness) + 0.01));
  border-color: var(--glass-hover-border);
  background:
    linear-gradient(135deg, var(--glass-hover-highlight), var(--glass-hover-bg));
  box-shadow:
    0 8px 24px var(--glass-hover-shadow),
    inset 0 1px 2px var(--glass-hover-highlight),
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0 20px var(--purple-glow);
}

.light .glass:hover::before {
  opacity: 0.9;
  height: 60%;
}

.light .glass:hover::after { opacity: 0.6; }

/* Glass card variants for light mode */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 16px var(--glass-shadow);
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s ease;
  will-change: transform, filter;
}

.glass-card:hover {
  transform: translateY(-2px);
  backdrop-filter: blur(calc(var(--glass-blur) + 4px));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 4px));
  border-color: var(--glass-hover-border);
  box-shadow: 0 8px 24px var(--glass-hover-shadow), 0 0 16px var(--purple-glow);
}

/* Glass header for light mode */
.glass-header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}