body { 
      font-family: 'Inter', system-ui, sans-serif;
      background: #08080a;
      min-height: 100vh;
    }
    
    .font-display {
      font-family: 'Sora', system-ui, sans-serif;
    }
    
    /* Curved gradient hero section */
    .hero-gradient {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 800px;
      background: linear-gradient(135deg, #08090c 0%, #0c1220 25%, #111827 50%, #0f172a 75%, #0a0f1a 100%);
      z-index: 0;
    }
    
    /* SVG wave at bottom of gradient */
    .hero-wave {
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      z-index: 1;
    }
    
    .hero-wave svg {
      display: block;
      width: 100%;
      height: 120px;
    }
    
    /* Glass card effect */
    .glass-card {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.3s ease;
    }
    
    .glass-card:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.15);
      transform: translateY(-4px);
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    
    @keyframes glow-pulse {
      0%, 100% { box-shadow: 0 0 40px rgba(239, 68, 68, 0.6), 0 0 80px rgba(239, 68, 68, 0.3); }
      50% { box-shadow: 0 0 60px rgba(239, 68, 68, 0.8), 0 0 120px rgba(239, 68, 68, 0.4); }
    }
    
    @keyframes glow-pulse-green {
      0%, 100% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.6), 0 0 80px rgba(34, 197, 94, 0.3); }
      50% { box-shadow: 0 0 60px rgba(34, 197, 94, 0.8), 0 0 120px rgba(34, 197, 94, 0.4); }
    }
    
    @keyframes fade-up {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slide-in-left {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes slide-in-right {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes subtle-float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      33% { transform: translateY(-5px) rotate(0.5deg); }
      66% { transform: translateY(3px) rotate(-0.5deg); }
    }
    
    @keyframes gradient-shift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    
    @keyframes speaking-pulse {
      0%, 100% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.15); opacity: 1; }
    }
    
    .float-animation { animation: float 4s ease-in-out infinite; }
    .glow-red { animation: glow-pulse 2s ease-in-out infinite; }
    .glow-green { animation: glow-pulse-green 1.5s ease-in-out infinite; }
    
    .animate-fade-up { 
      opacity: 0;
      animation: fade-up 0.8s ease-out forwards;
    }
    
    .animate-fade-in {
      opacity: 0;
      animation: fade-in 1s ease-out forwards;
    }
    
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }
    .delay-5 { animation-delay: 0.5s; }
    
    .subtle-float { animation: subtle-float 6s ease-in-out infinite; }
    
    .speaking-ring {
      animation: speaking-pulse 0.8s ease-in-out infinite;
    }
    
    .hero-glow {
      background: radial-gradient(ellipse 50% 30% at 50% 0%, rgba(239, 68, 68, 0.1), transparent 70%);
    }
    
    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }
    
    .reveal-left {
      opacity: 0;
      transform: translateX(-30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .reveal-left.active {
      opacity: 1;
      transform: translateX(0);
    }
    
    .reveal-right {
      opacity: 0;
      transform: translateX(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .reveal-right.active {
      opacity: 1;
      transform: translateX(0);
    }
    
    /* Hover effects */
    .hover-lift {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .hover-lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }
    
    /* Animated gradient border */
    .gradient-border {
      position: relative;
    }
    
    .gradient-border::before {
      content: '';
      position: absolute;
      inset: -1px;
      background: linear-gradient(90deg, #ef4444, #f97316, #ef4444);
      background-size: 200% 100%;
      border-radius: inherit;
      animation: gradient-shift 3s linear infinite;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .gradient-border:hover::before {
      opacity: 1;
    }
    
    /* Problem cards shake */
    @keyframes subtle-shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-2px); }
      75% { transform: translateX(2px); }
    }
    
    .problem-card:hover {
      animation: subtle-shake 0.3s ease-in-out;
    }

    /* Works with apps - Parallax section */
    #apps-section {
      min-height: 520px;
    }

    @media (max-width: 768px) {
      #apps-section {
        min-height: auto;
      }

      /* Faster reveals on mobile */
      .reveal,
      .reveal-left,
      .reveal-right {
        transition: opacity 0.4s ease, transform 0.4s ease !important;
        transition-delay: 0s !important;
      }
    }

    /* Zoom participant speaking border */
    @keyframes zoom-speaking {
      0%, 100% { border-color: rgba(34, 197, 94, 0.3); }
      50% { border-color: rgba(34, 197, 94, 0.7); }
    }

    .zoom-speaking-border {
      border: 1px solid rgba(34, 197, 94, 0.3);
      animation: zoom-speaking 2s ease-in-out infinite;
    }

    /* Timeline steps */
    .timeline-step.active .timeline-number {
      border-color: #ef4444;
      box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), 0 0 40px rgba(239, 68, 68, 0.2);
    }

    .timeline-step.active .timeline-number span {
      color: #ef4444;
    }

    .timeline-step.active h3 {
      color: white;
    }