---
---

<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden bg-[#080a09] text-white">
  <!-- Video Background - Oversized to guarantee coverage -->
  <div class="absolute -top-[20%] left-0 w-full h-[140%] z-0 pointer-events-none">
    <video
      autoplay
      muted
      loop
      playsinline
      class="w-full h-full object-cover hero-parallax-video opacity-40 saturate-150 contrast-125"
      style="transform: scale(1.3); will-change: transform;"
    >
      <source src="/videos/hero-loop.mp4" type="video/mp4">
    </video>
    <!-- Richer, multi-dimensional overlays -->
    <div class="absolute inset-0 bg-gradient-to-b from-[#080a09] via-[#080a09]/40 to-[#080a09] opacity-80"></div>
    <div class="absolute inset-0 bg-gradient-to-tr from-blue-500/10 via-transparent to-accent/5 opacity-50"></div>
    <div class="absolute inset-0 bg-[#080a09]/20"></div>
  </div>

  <!-- Central Glow for Depth -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[1000px] h-[600px] bg-accent/5 rounded-full blur-[160px] pointer-events-none z-0"></div>

  <!-- Main Content -->
  <div class="relative z-10 w-full max-w-7xl mx-auto px-6 flex flex-col items-center justify-center text-center">
    
    <!-- Top Badge -->
    <div class="mb-12 animate-fade-in opacity-0" style="animation-delay: 0.1s">
      <div class="inline-flex items-center gap-3 px-5 py-2 rounded-full border border-white/10 bg-white/[0.03] backdrop-blur-xl shadow-xl">
        <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse shadow-[0_0_10px_rgba(0,255,136,0.5)]"></span>
        <span class="text-[10px] uppercase tracking-[0.3em] text-white/60 font-mono font-bold">Managed MCP Service</span>
      </div>
    </div>

    <!-- Headline -->
    <h1 class="heading-serif mb-8 text-white animate-fade-in opacity-0" style="animation-delay: 0.2s">
      <span class="block text-5xl sm:text-7xl md:text-8xl lg:text-[9.5rem] leading-[0.85] tracking-tighter drop-shadow-2xl">
        Unlock the full power
      </span>
      <span class="block text-5xl sm:text-7xl md:text-8xl lg:text-[9.5rem] leading-[0.85] tracking-tighter text-accent drop-shadow-[0_0_45px_rgba(0,255,136,0.25)]">
        of Service Titan
      </span>
    </h1>

    <!-- Subheadline -->
    <p class="text-white/60 text-lg md:text-2xl font-light leading-relaxed max-w-2xl mx-auto mb-16 animate-fade-in opacity-0 tracking-tight" style="animation-delay: 0.4s">
      Natural language access to your CRM. AI-powered insights.<br class="hidden md:block" /> Zero complexity. Turn data into revenue instantly.
    </p>

    <!-- CTA -->
    <div class="animate-fade-in opacity-0" style="animation-delay: 0.6s">
      <a href="#waitlist" class="group relative inline-flex items-center gap-4 px-12 py-6 bg-white text-[#080a09] hover:bg-accent transition-all duration-500 rounded-full shadow-[0_0_40px_rgba(255,255,255,0.1)] hover:shadow-[0_0_50px_rgba(0,255,136,0.4)] hover:scale-105">
        <span class="text-xs font-bold uppercase tracking-[0.25em]">Join the Waitlist</span>
        <svg class="w-5 h-5 transition-transform duration-500 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
        </svg>
      </a>
    </div>

  </div>

  <!-- Scroll Indicator -->
  <div class="absolute bottom-12 left-1/2 -translate-x-1/2 animate-bounce-slow opacity-30">
    <div class="w-px h-12 bg-gradient-to-b from-white to-transparent"></div>
  </div>
</section>

<style>
  .animate-fade-in {
    animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

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

  .animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
  }

  @keyframes bounce-slow {
    0%, 100% {
      transform: translateX(-50%) translateY(0);
    }
    50% {
      transform: translateX(-50%) translateY(10px);
    }
  }
</style>