<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Slabflow | Premium Marketing Agency</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Montserrat:wght@500;700;800;900&display=swap"
      rel="stylesheet"
    />

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Icons (Lucide) -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <!-- Tailwind Config & Custom CSS -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              brand: {
                yellow: "#FFC72C", // Logo inspired yellow
                yellowDark: "#E5B120",
                black: "#0A0A0A",
                gray: "#1A1A1A",
                lightGray: "#F5F5F5",
              },
            },
            fontFamily: {
              sans: ["Inter", "sans-serif"],
              heading: ["Montserrat", "sans-serif"],
            },
            boxShadow: {
              glow: "0 0 20px rgba(255, 199, 44, 0.4)",
              "glow-hover": "0 0 30px rgba(255, 199, 44, 0.6)",
              premium: "0 10px 40px -10px rgba(0,0,0,0.3)",
            },
          },
        },
      };
    </script>

    <style>
      /* Custom Styles & Animations */
      body {
        background-color: #0a0a0a;
        color: #ffffff;
        overflow-x: hidden;
      }

      /* Fancy Hero Background */
      .hero-bg {
        background: radial-gradient(
          circle at 50% 50%,
          #1a1a1a 0%,
          #0a0a0a 100%
        );
        position: relative;
      }
      .hero-bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(
          rgba(255, 199, 44, 0.05) 1px,
          transparent 1px
        );
        background-size: 30px 30px;
        opacity: 0.5;
        z-index: 0;
      }

      /* Dropdown Setup */
      .dropdown-menu {
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .nav-item:hover .dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
      }

      /* Scroll Reveal Animation Classes */
      .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
      }
      .reveal.active {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 {
        transition-delay: 0.1s;
      }
      .reveal-delay-2 {
        transition-delay: 0.2s;
      }
      .reveal-delay-3 {
        transition-delay: 0.3s;
      }

      /* Hide scrollbar for clean look */
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: #0a0a0a;
      }
      ::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #ffc72c;
      }

      /* Card Hover Effects */
      .glass-card {
        background: rgba(26, 26, 26, 0.6);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.4s ease;
      }
      .glass-card:hover {
        border-color: rgba(255, 199, 44, 0.3);
        transform: translateY(-5px);
        box-shadow: 0 10px 30px -10px rgba(255, 199, 44, 0.1);
      }

      /* Mobile Menu Overlay Transition */
      #mobile-menu-overlay {
        clip-path: circle(0% at 50% 100%);
        transition: clip-path 0.5s ease-in-out;
      }
      #mobile-menu-overlay.open {
        clip-path: circle(150% at 50% 100%);
      }

      /* Interactive Pyramid Styles */
      .pyramid-group {
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
      }
      .pyramid-path {
        transition: all 0.4s ease;
      }
      .pyramid-text {
        fill: white;
        transition: all 0.4s ease;
      }
      .pyramid-subtext {
        fill: #aaa;
        transition: all 0.4s ease;
      }

      .pyramid-group:hover .pyramid-path {
        fill: rgba(255, 199, 44, 0.1);
      }

      /* Sleek glowing active state instead of solid block */
      .pyramid-group.active .pyramid-path {
        fill: rgba(255, 199, 44, 0.15) !important;
        stroke-width: 3px !important;
        filter: drop-shadow(0 0 20px rgba(255, 199, 44, 0.4));
      }
      .pyramid-group.active .pyramid-text {
        fill: #ffc72c !important;
        text-shadow: 0 0 15px rgba(255, 199, 44, 0.5);
      }
      .pyramid-group.active .pyramid-subtext {
        fill: #ffffff !important;
      }

      .pyramid-card {
        border-left-color: rgba(255, 255, 255, 0.1);
        opacity: 0.5;
        cursor: pointer;
        transition: all 0.4s ease;
      }
      .pyramid-card:hover {
        opacity: 0.8;
        transform: translateX(5px);
      }
      .pyramid-card.active {
        border-left-color: #ffc72c;
        opacity: 1;
        transform: translateX(10px);
        background: rgba(26, 26, 26, 0.9);
        box-shadow: 0 10px 30px -10px rgba(255, 199, 44, 0.15);
      }
      .pyramid-card .card-num {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        transition: all 0.4s ease;
      }
      .pyramid-card.active .card-num {
        background: #ffc72c;
        border-color: #ffc72c;
        color: black;
        box-shadow: 0 0 15px rgba(255, 199, 44, 0.4);
      }

      /* Orbit Animations & Variables */
      .orbit-ring-1 { width: 250px; height: 250px; }
      .orbit-ring-2 { width: 400px; height: 400px; }
      .orbit-ring-3 { width: 550px; height: 550px; }
      .planet-1, .planet-2 { --orbit-radius: 125px; }
      .planet-3, .planet-4 { --orbit-radius: 200px; }
      .planet-5, .planet-6 { --orbit-radius: 275px; }

      @media (min-width: 1024px) {
        .orbit-ring-1 { width: 300px; height: 300px; }
        .orbit-ring-2 { width: 450px; height: 450px; }
        .orbit-ring-3 { width: 650px; height: 650px; }
        .planet-1, .planet-2 { --orbit-radius: 150px; }
        .planet-3, .planet-4 { --orbit-radius: 225px; }
        .planet-5, .planet-6 { --orbit-radius: 325px; }
      }

      .planet {
        position: absolute; top: 50%; left: 50%;
        width: 3.5rem; height: 3.5rem; margin-top: -1.75rem; margin-left: -1.75rem;
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: rgba(10, 10, 10, 0.9); border: 1px solid rgba(255, 199, 44, 0.4);
        box-shadow: 0 0 20px rgba(255, 199, 44, 0.2), inset 0 0 15px rgba(255, 199, 44, 0.1);
        backdrop-filter: blur(8px); color: #ffc72c; z-index: 1; pointer-events: auto;
        transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; cursor: pointer;
      }

      .planet:hover { animation-play-state: paused !important; z-index: 10; }
      .planet:hover > div { opacity: 1 !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }

      .planet-1:hover { background: rgba(24, 119, 242, 0.2); color: #1877f2; border-color: rgba(24, 119, 242, 0.5); box-shadow: 0 0 20px rgba(24, 119, 242, 0.4), inset 0 0 15px rgba(24, 119, 242, 0.2); }
      .planet-2:hover { background: rgba(99, 102, 241, 0.2); color: #6366f1; border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 0 20px rgba(99, 102, 241, 0.4), inset 0 0 15px rgba(99, 102, 241, 0.2); }
      .planet-3:hover { background: rgba(66, 133, 244, 0.2); color: #4285f4; border-color: rgba(66, 133, 244, 0.5); box-shadow: 0 0 20px rgba(66, 133, 244, 0.4), inset 0 0 15px rgba(66, 133, 244, 0.2); }
      .planet-4:hover { background: rgba(52, 168, 83, 0.2); color: #34a853; border-color: rgba(52, 168, 83, 0.5); box-shadow: 0 0 20px rgba(52, 168, 83, 0.4), inset 0 0 15px rgba(52, 168, 83, 0.2); }
      .planet-5:hover { background: rgba(16, 185, 129, 0.2); color: #10b981; border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 0 20px rgba(16, 185, 129, 0.4), inset 0 0 15px rgba(16, 185, 129, 0.2); }
      .planet-6:hover { background: rgba(251, 188, 4, 0.2); color: #fbbc04; border-color: rgba(251, 188, 4, 0.5); box-shadow: 0 0 20px rgba(251, 188, 4, 0.4), inset 0 0 15px rgba(251, 188, 4, 0.2); }

      @keyframes orbit1 { 0% { transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); } 100% { transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg); } }
      @keyframes orbit2 { 0% { transform: rotate(180deg) translateX(var(--orbit-radius)) rotate(-180deg); } 100% { transform: rotate(540deg) translateX(var(--orbit-radius)) rotate(-540deg); } }
      @keyframes orbit3 { 0% { transform: rotate(90deg) translateX(var(--orbit-radius)) rotate(-90deg); } 100% { transform: rotate(450deg) translateX(var(--orbit-radius)) rotate(-450deg); } }
      @keyframes orbit4 { 0% { transform: rotate(270deg) translateX(var(--orbit-radius)) rotate(-270deg); } 100% { transform: rotate(630deg) translateX(var(--orbit-radius)) rotate(-630deg); } }
      @keyframes orbit5 { 0% { transform: rotate(45deg) translateX(var(--orbit-radius)) rotate(-45deg); } 100% { transform: rotate(405deg) translateX(var(--orbit-radius)) rotate(-405deg); } }
      @keyframes orbit6 { 0% { transform: rotate(225deg) translateX(var(--orbit-radius)) rotate(-225deg); } 100% { transform: rotate(585deg) translateX(var(--orbit-radius)) rotate(-585deg); } }

      /* Marquee Animation */
      @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }
      .animate-marquee {
        display: flex;
        width: max-content;
        animation: marquee 35s linear infinite;
      }
      .animate-marquee:hover {
        animation-play-state: paused;
      }

      /* Range Slider Custom Styling */
      input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        height: 4px;
        border-radius: 2px;
        outline: none;
        background: #333;
      }
      input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #FFC72C;
        border: 4px solid #1A1A1A;
        cursor: pointer;
        box-shadow: 0 0 15px rgba(255, 199, 44, 0.6);
        transition: transform 0.1s ease;
      }
      input[type=range]::-webkit-slider-thumb:hover {
        transform: scale(1.15);
        box-shadow: 0 0 20px rgba(255, 199, 44, 0.8);
      }

      /* Custom Checkbox Styles */
      .custom-checkbox input:checked + div {
        background-color: #ffc72c;
        border-color: #ffc72c;
      }
      .custom-checkbox input:checked + div svg {
        display: block;
        color: #000;
      }
    </style>
  </head>
  <body class="antialiased selection:bg-brand-yellow selection:text-black">
    <!-- Desktop Top Bar -->
    <div
      id="top-bar"
      class="fixed w-full top-0 z-[60] bg-[#0a0a0a] border-b border-white/10 hidden lg:flex items-center h-10 transition-transform duration-300"
    >
      <div
        class="max-w-7xl mx-auto px-6 w-full flex justify-between items-center text-xs font-bold tracking-wider text-gray-400"
      >
        <!-- Left Side: Social & Reviews -->
        <div class="flex items-center gap-6">
          <a
            href="https://www.facebook.com/profile.php?id=61553973082010"
            target="_blank"
            rel="noopener noreferrer"
            class="hover:text-brand-yellow transition-colors flex items-center gap-2 uppercase"
          >
            <i data-lucide="facebook" class="w-4 h-4 text-[#1877F2]"></i>
            Facebook
          </a>
          <a 
            href="https://share.google/cVQJuq1aU4OE36ftV" 
            target="_blank" 
            rel="noopener noreferrer"
            class="flex items-center gap-2 border-l border-white/10 pl-6 group cursor-pointer"
          >
            <div class="flex text-brand-yellow gap-0.5">
              <i data-lucide="star" class="w-3.5 h-3.5 fill-current"></i>
              <i data-lucide="star" class="w-3.5 h-3.5 fill-current"></i>
              <i data-lucide="star" class="w-3.5 h-3.5 fill-current"></i>
              <i data-lucide="star" class="w-3.5 h-3.5 fill-current"></i>
              <i data-lucide="star" class="w-3.5 h-3.5 fill-current"></i>
            </div>
            <span class="text-white group-hover:text-brand-yellow transition-colors">5.0 Google Reviews</span>
          </a>
        </div>

        <!-- Right Side: Phone -->
        <a
          href="tel:+12139213059"
          class="hover:text-brand-yellow transition-colors flex items-center gap-2 text-sm text-white font-bold tracking-normal"
        >
          <i data-lucide="phone" class="w-4 h-4 text-brand-yellow"></i> +1
          213-921-3059
        </a>
      </div>
    </div>

    <!-- Sticky Desktop Navigation -->
    <header
      class="fixed w-full top-10 z-50 bg-brand-black/80 backdrop-blur-md border-b border-white/10 hidden lg:block transition-all duration-300"
      id="desktop-nav"
    >
      <div
        class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between"
      >
        <!-- Logo -->
        <a href="#" class="flex items-center gap-3 group">
          <svg
            viewBox="0 0 100 100"
            class="w-10 h-10 transform group-hover:rotate-12 transition-transform duration-500"
          >
            <polygon points="50,15 80,30 50,45 20,30" fill="#FFFFFF" />
            <polygon points="20,35 35,42.5 35,75 20,67.5" fill="#FFC72C" />
            <polygon points="80,35 65,42.5 65,75 80,67.5" fill="#FFC72C" />
            <polygon points="50,60 80,75 50,90 20,75" fill="#FFFFFF" />
          </svg>
          <span
            class="font-heading font-bold text-2xl tracking-tight text-white"
            >slabflow</span
          >
        </a>

        <!-- Nav Links -->
        <nav class="flex items-center gap-8 h-full">
          <a
            href="#hero"
            class="text-sm font-medium text-gray-300 hover:text-brand-yellow transition-colors"
            >Home</a
          >

          <!-- Dropdown -->
          <div class="relative nav-item h-full flex items-center">
            <button
              class="text-sm font-medium text-gray-300 hover:text-brand-yellow transition-colors flex items-center gap-1"
            >
              Services <i data-lucide="chevron-down" class="w-4 h-4"></i>
            </button>
            <!-- Dropdown Menu -->
            <div
              class="absolute top-[80px] left-1/2 -translate-x-1/2 w-64 bg-brand-gray border border-white/10 rounded-xl shadow-premium p-2 dropdown-menu z-50"
            >
              <a
                href="#services"
                class="block px-4 py-3 text-sm text-gray-300 hover:bg-brand-black hover:text-brand-yellow rounded-lg transition-colors"
                >Meta Ads</a
              >
              <a
                href="#services"
                class="block px-4 py-3 text-sm text-gray-300 hover:bg-brand-black hover:text-brand-yellow rounded-lg transition-colors"
                >Local Service Ads</a
              >
              <a
                href="#services"
                class="block px-4 py-3 text-sm text-gray-300 hover:bg-brand-black hover:text-brand-yellow rounded-lg transition-colors"
                >Websites</a
              >
              <a
                href="#services"
                class="block px-4 py-3 text-sm text-gray-300 hover:bg-brand-black hover:text-brand-yellow rounded-lg transition-colors"
                >GMB Optimization</a
              >
              <a
                href="#services"
                class="block px-4 py-3 text-sm text-gray-300 hover:bg-brand-black hover:text-brand-yellow rounded-lg transition-colors"
                >SEO</a
              >
              <a
                href="#services"
                class="block px-4 py-3 text-sm text-gray-300 hover:bg-brand-black hover:text-brand-yellow rounded-lg transition-colors"
                >Review Management</a
              >
            </div>
          </div>

          <a
            href="#about"
            class="text-sm font-medium text-gray-300 hover:text-brand-yellow transition-colors"
            >About</a
          >
          <a
            href="#benefits"
            class="text-sm font-medium text-gray-300 hover:text-brand-yellow transition-colors"
            >Benefits</a
          >
        </nav>

        <!-- CTA -->
        <button
          onclick="openModal()"
          class="bg-brand-yellow text-black px-6 py-2.5 rounded-full font-semibold text-sm shadow-glow hover:shadow-glow-hover hover:-translate-y-0.5 transition-all duration-300"
        >
          Get a Proposal
        </button>
      </div>
    </header>

    <!-- Mobile Header (Just Logo) -->
    <header
      class="lg:hidden fixed w-full top-0 z-40 bg-brand-black/90 backdrop-blur-md border-b border-white/10"
    >
      <div class="flex items-center justify-center h-16">
        <a href="#" class="flex items-center gap-2">
          <svg viewBox="0 0 100 100" class="w-8 h-8">
            <polygon points="50,15 80,30 50,45 20,30" fill="#FFFFFF" />
            <polygon points="20,35 35,42.5 35,75 20,67.5" fill="#FFC72C" />
            <polygon points="80,35 65,42.5 65,75 80,67.5" fill="#FFC72C" />
            <polygon points="50,60 80,75 50,90 20,75" fill="#FFFFFF" />
          </svg>
          <span class="font-heading font-bold text-xl tracking-tight text-white"
            >slabflow</span
          >
        </a>
      </div>
    </header>

    <main>
      <!-- Hero Section -->
      <section
        id="hero"
        class="hero-bg min-h-screen flex items-center pt-24 lg:pt-32 pb-12 relative overflow-hidden"
      >
        <div
          class="max-w-7xl mx-auto px-6 relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center w-full"
        >
          <!-- Text Side (Left) -->
          <div
            class="lg:col-span-6 flex flex-col items-center text-center lg:items-start lg:text-left pt-10 lg:pt-0"
          >
            <div
              class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/10 bg-white/5 text-gray-300 text-sm font-medium mb-8 reveal"
            >
              <span
                class="w-2 h-2 rounded-full bg-brand-yellow animate-pulse"
              ></span>
              Elevate Your Digital Presence
            </div>

            <h1
              class="text-5xl md:text-6xl xl:text-7xl font-heading font-black leading-tight mb-6 reveal reveal-delay-1 min-h-[120px] md:min-h-0"
            >
              Flow into the Future of <br />
              <span
                id="typewriter"
                class="text-transparent bg-clip-text bg-gradient-to-r from-brand-yellow to-[#FFE58F]"
                >Digital Marketing</span
              ><span class="text-brand-yellow font-light animate-[pulse_1s_ease-in-out_infinite] relative -top-1 md:-top-2">|</span>
            </h1>

            <p
              class="text-lg md:text-xl text-gray-300 max-w-xl mb-10 reveal reveal-delay-2 font-medium leading-relaxed"
            >
              We specialize in Meta Ads, SEO, and High-Conversion Websites that
              turn clicks into loyal customers and scale your business
              effortlessly.
            </p>

            <div
              class="flex flex-col items-center lg:items-start gap-10 reveal reveal-delay-3 w-full mt-6"
            >
              <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
                <a
                  href="#services"
                  class="bg-brand-yellow text-black px-8 py-4 rounded-full font-bold text-lg shadow-glow hover:shadow-glow-hover hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2 whitespace-nowrap"
                >
                  Explore Services
                  <i data-lucide="arrow-right" class="w-5 h-5"></i>
                </a>
                <button
                  onclick="openModal()"
                  class="bg-transparent border border-white/20 text-white hover:bg-white/5 hover:border-white/40 px-8 py-4 rounded-full font-bold text-lg transition-all duration-300 flex items-center justify-center gap-2 whitespace-nowrap"
                >
                  Book a Call
                </button>
              </div>

              <!-- Trust Indicators -->
              <div class="flex flex-col items-center lg:items-start gap-4 mt-2">
                <div class="flex items-center gap-3">
                  <div class="flex text-brand-yellow gap-1">
                    <i data-lucide="star" class="w-6 h-6 fill-current"></i>
                    <i data-lucide="star" class="w-6 h-6 fill-current"></i>
                    <i data-lucide="star" class="w-6 h-6 fill-current"></i>
                    <i data-lucide="star" class="w-6 h-6 fill-current"></i>
                    <i data-lucide="star" class="w-6 h-6 fill-current"></i>
                  </div>
                  <span class="text-white font-bold text-xl tracking-wide">5.0</span>
                </div>
                <div
                  class="flex items-center gap-5 text-gray-300 text-lg font-medium"
                >
                  <a href="https://share.google/cVQJuq1aU4OE36ftV" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2.5 hover:text-brand-yellow transition-colors">
                    <svg
                      viewBox="0 0 24 24"
                      class="w-7 h-7"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                        fill="#4285F4"
                      />
                      <path
                        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                        fill="#34A853"
                      />
                      <path
                        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                        fill="#FBBC05"
                      />
                      <path
                        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                        fill="#EA4335"
                      />
                    </svg>
                    Google
                  </a>
                  <span class="w-1.5 h-1.5 rounded-full bg-white/20"></span>
                  <span
                    class="font-heading font-bold text-[26px] tracking-tight text-white flex items-center"
                  >
                    Clut<span class="relative inline-block"
                      >c<span
                        class="absolute top-[48%] left-[55%] -translate-x-1/2 -translate-y-1/2 w-[5px] h-[5px] bg-[#ff3d2e] rounded-full"
                      ></span
                    ></span
                    >h
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Animation Side (Right) -->
          <div
            class="lg:col-span-6 relative h-[400px] md:h-[600px] lg:h-[700px] flex items-center justify-center w-full mt-10 lg:mt-0 reveal"
          >
            <!-- Decorative Glow specific to orbit -->
            <div
              class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] lg:w-[500px] lg:h-[500px] bg-brand-yellow/15 blur-[100px] rounded-full pointer-events-none animate-pulse"
            ></div>

            <!-- Orbit System -->
            <div
              class="absolute inset-0 pointer-events-none flex items-center justify-center z-0 opacity-80"
            >
              <!-- Rings -->
              <div
                class="absolute border border-white/10 rounded-full border-dashed orbit-ring-1 animate-[spin_60s_linear_infinite]"
              ></div>
              <div
                class="absolute border border-white/5 rounded-full border-dashed orbit-ring-2 animate-[spin_90s_linear_infinite_reverse]"
              ></div>
              <div
                class="absolute border border-white/5 rounded-full border-dashed orbit-ring-3 animate-[spin_120s_linear_infinite]"
              ></div>

              <!-- Planets (Services) -->
              <!-- Meta -->
              <div
                class="planet planet-1"
                style="animation: orbit1 35s linear infinite"
              >
                <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg">
                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                </svg>
                <div
                  class="absolute -bottom-8 left-1/2 -translate-x-1/2 text-[10px] font-bold tracking-widest text-white uppercase opacity-70 whitespace-nowrap"
                >
                  Meta Ads
                </div>
              </div>

              <!-- Websites -->
              <div
                class="planet planet-2"
                style="animation: orbit2 35s linear infinite"
              >
                <i data-lucide="monitor-smartphone" class="w-6 h-6"></i>
                <div
                  class="absolute -bottom-8 left-1/2 -translate-x-1/2 text-[10px] font-bold tracking-widest text-white uppercase opacity-70 whitespace-nowrap"
                >
                  Websites
                </div>
              </div>

              <!-- GMB -->
              <div
                class="planet planet-3"
                style="animation: orbit3 50s linear infinite"
              >
                <i data-lucide="map-pin" class="w-6 h-6"></i>
                <div
                  class="absolute -bottom-8 left-1/2 -translate-x-1/2 text-[10px] font-bold tracking-widest text-white uppercase opacity-70 whitespace-nowrap"
                >
                  GMB
                </div>
              </div>

              <!-- Local Ads -->
              <div
                class="planet planet-4"
                style="animation: orbit4 50s linear infinite"
              >
                <i data-lucide="target" class="w-6 h-6"></i>
                <div
                  class="absolute -bottom-8 left-1/2 -translate-x-1/2 text-[10px] font-bold tracking-widest text-white uppercase opacity-70 whitespace-nowrap"
                >
                  Local Ads
                </div>
              </div>

              <!-- SEO -->
              <div
                class="planet planet-5"
                style="animation: orbit5 70s linear infinite"
              >
                <i data-lucide="search" class="w-6 h-6"></i>
                <div
                  class="absolute -bottom-8 left-1/2 -translate-x-1/2 text-[10px] font-bold tracking-widest text-white uppercase opacity-70 whitespace-nowrap"
                >
                  SEO
                </div>
              </div>

              <!-- Reviews -->
              <div
                class="planet planet-6"
                style="animation: orbit6 70s linear infinite"
              >
                <i data-lucide="star" class="w-6 h-6"></i>
                <div
                  class="absolute -bottom-8 left-1/2 -translate-x-1/2 text-[10px] font-bold tracking-widest text-white uppercase opacity-70 whitespace-nowrap"
                >
                  Reviews
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Logos / Trust Banner (Infinite Marquee) -->
      <div class="border-y border-white/10 bg-brand-gray/50 py-12 overflow-hidden reveal relative">
        <div class="max-w-7xl mx-auto px-6 text-center mb-8 relative z-20">
          <p class="text-sm text-gray-500 font-medium uppercase tracking-widest">
            Trusted by industry leaders
          </p>
        </div>

        <div class="w-full relative flex items-center">
          <!-- Fade Edges for smooth entry/exit -->
          <div class="absolute top-0 left-0 w-24 md:w-48 h-full bg-gradient-to-r from-[#121212] to-transparent z-10 pointer-events-none"></div>
          <div class="absolute top-0 right-0 w-24 md:w-48 h-full bg-gradient-to-l from-[#121212] to-transparent z-10 pointer-events-none"></div>

          <!-- Scrolling Track -->
          <div class="animate-marquee flex items-center w-max">
            
            <!-- GROUP 1 -->
            <div class="flex items-center justify-around w-max shrink-0 px-8">
              <!-- HouseLift Team -->
              <img src="edited-image.png" alt="HouseLift Team" onerror="this.onerror=null; this.src='https://placehold.co/200x80/1a1a1a/FFC72C?text=HouseLift+Team'" class="h-12 md:h-16 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500 mx-10 md:mx-16 cursor-pointer" />
              <!-- Cabinet Innovators -->
              <img src="Logo(JPEG)-01.jpg" alt="Cabinet Innovators" onerror="this.onerror=null; this.src='https://placehold.co/200x80/1a1a1a/FFC72C?text=Cabinet+Innovators'" class="h-12 md:h-16 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500 mx-10 md:mx-16 cursor-pointer rounded" />
              <!-- Ultra Scape -->
              <img src="image_d4a3dd.png" alt="Ultra Scape" onerror="this.onerror=null; this.src='https://placehold.co/200x80/1a1a1a/FFC72C?text=Ultra+Scape'" class="h-12 md:h-16 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500 mx-10 md:mx-16 cursor-pointer" />
              <!-- Alpine Vista -->
              <img src="image_d4a35b.png" alt="Alpine Vista" onerror="this.onerror=null; this.src='https://placehold.co/200x80/1a1a1a/FFC72C?text=Alpine+Vista'" class="h-12 md:h-16 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500 mx-10 md:mx-16 cursor-pointer" />
              <!-- Terramann -->
              <img src="image_d49f22.png" alt="Terramann" onerror="this.onerror=null; this.src='https://placehold.co/200x80/1a1a1a/FFC72C?text=Terramann'" class="h-12 md:h-16 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500 mx-10 md:mx-16 cursor-pointer rounded-xl" />
            </div>

            <!-- GROUP 2 (Exact Duplicate for Seamless Loop) -->
            <div class="flex items-center justify-around w-max shrink-0 px-8">
              <!-- HouseLift Team -->
              <img src="edited-image.png" alt="HouseLift Team" onerror="this.onerror=null; this.src='https://placehold.co/200x80/1a1a1a/FFC72C?text=HouseLift+Team'" class="h-12 md:h-16 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500 mx-10 md:mx-16 cursor-pointer" />
              <!-- Cabinet Innovators -->
              <img src="Logo(JPEG)-01.jpg" alt="Cabinet Innovators" onerror="this.onerror=null; this.src='https://placehold.co/200x80/1a1a1a/FFC72C?text=Cabinet+Innovators'" class="h-12 md:h-16 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500 mx-10 md:mx-16 cursor-pointer rounded" />
              <!-- Ultra Scape -->
              <img src="image_d4a3dd.png" alt="Ultra Scape" onerror="this.onerror=null; this.src='https://placehold.co/200x80/1a1a1a/FFC72C?text=Ultra+Scape'" class="h-12 md:h-16 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500 mx-10 md:mx-16 cursor-pointer" />
              <!-- Alpine Vista -->
              <img src="image_d4a35b.png" alt="Alpine Vista" onerror="this.onerror=null; this.src='https://placehold.co/200x80/1a1a1a/FFC72C?text=Alpine+Vista'" class="h-12 md:h-16 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500 mx-10 md:mx-16 cursor-pointer" />
              <!-- Terramann -->
              <img src="image_d49f22.png" alt="Terramann" onerror="this.onerror=null; this.src='https://placehold.co/200x80/1a1a1a/FFC72C?text=Terramann'" class="h-12 md:h-16 w-auto object-contain grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500 mx-10 md:mx-16 cursor-pointer rounded-xl" />
            </div>
            <!-- Service 6 (Review Management - Google Star Yellow) -->
            <div
              class="glass-card p-8 rounded-2xl reveal reveal-delay-2 group cursor-pointer" onclick="openModal()"
            >
              <div
                class="w-14 h-14 bg-brand-yellow/10 rounded-xl flex items-center justify-center text-brand-yellow mb-6 transition-colors duration-400 group-hover:bg-[#FBBC04]/20 group-hover:text-[#FBBC04]"
              >
                <i data-lucide="star" class="w-7 h-7"></i>
              </div>
              <h3 class="text-xl font-heading font-bold mb-3">
                Review Management
              </h3>
              <p class="text-gray-400 text-sm leading-relaxed mb-6">
                Turn your happiest clients into your best marketers. We automate
                review generation to build an unstoppable online reputation.
              </p>
              <div
                class="text-brand-yellow text-sm font-semibold flex items-center gap-1 hover:gap-2 transition-all"
                >Learn more <i data-lucide="arrow-right" class="w-4 h-4"></i
              ></div>
            </div>
          </div>
        </div>
      </section>

      <!-- ROI Calculator Section -->
      <section id="roi-calculator" class="py-24 bg-brand-black relative border-t border-white/5 overflow-hidden">
        <!-- Background Glows -->
        <div class="absolute bottom-0 right-0 w-[600px] h-[600px] bg-brand-yellow/5 blur-[120px] rounded-full pointer-events-none"></div>

        <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          
          <!-- Left: Inputs -->
          <div class="reveal">
            <h2 class="text-4xl md:text-5xl font-heading font-black mb-12 tracking-tight">
              <span class="text-white">ROI</span> <span class="text-[#2BD45E]" style="text-shadow: 0 0 20px rgba(43, 212, 94, 0.4);">Calculator.</span>
            </h2>

            <div class="space-y-10">
              <!-- Slider 1 -->
              <div class="group">
                <div class="flex justify-between items-end mb-4">
                  <label class="text-[11px] font-bold tracking-[0.15em] text-gray-300 uppercase">Monthly Site Leads</label>
                  <span class="text-brand-yellow font-heading font-bold text-2xl" id="roi-val-leads">50</span>
                </div>
                <input type="range" id="roi-leads" min="0" max="200" value="50" step="1" class="w-full">
              </div>

              <!-- Slider 2 -->
              <div class="group">
                <div class="flex justify-between items-end mb-4">
                  <label class="text-[11px] font-bold tracking-[0.15em] text-gray-300 uppercase">Booking Rate &bull; Leads &rarr; Booked Appts</label>
                  <span class="text-brand-yellow font-heading font-bold text-2xl" id="roi-val-booking">25%</span>
                </div>
                <input type="range" id="roi-booking" min="0" max="100" value="25" step="1" class="w-full">
              </div>

              <!-- Slider 3 -->
              <div class="group">
                <div class="flex justify-between items-end mb-4">
                  <label class="text-[11px] font-bold tracking-[0.15em] text-gray-300 uppercase">Close Rate &bull; Appts &rarr; Sold Jobs</label>
                  <span class="text-brand-yellow font-heading font-bold text-2xl" id="roi-val-close">25%</span>
                </div>
                <input type="range" id="roi-close" min="0" max="100" value="25" step="1" class="w-full">
              </div>

              <!-- Slider 4 -->
              <div class="group">
                <div class="flex justify-between items-end mb-4">
                  <label class="text-[11px] font-bold tracking-[0.15em] text-gray-300 uppercase">Average Revenue Per Job</label>
                  <span class="text-brand-yellow font-heading font-bold text-2xl" id="roi-val-revenue">$25,000</span>
                </div>
                <input type="range" id="roi-revenue" min="1000" max="100000" value="25000" step="1000" class="w-full">
              </div>
            </div>
          </div>

          <!-- Right: Outputs -->
          <div class="reveal reveal-delay-1 relative z-10">
            <div class="bg-[#111111] rounded-3xl border border-white/10 p-8 md:p-12 relative overflow-hidden shadow-2xl">
              <!-- Soft inner top-right glow -->
              <div class="absolute top-0 right-0 w-[300px] h-[300px] bg-brand-yellow/10 blur-[80px] rounded-full pointer-events-none"></div>

              <div class="text-center relative z-10">
                <h4 class="text-[11px] font-bold tracking-[0.15em] text-brand-yellow uppercase mb-2">Revenue Your Site Generates Each Month</h4>
                <div class="flex items-baseline justify-center text-white mb-2">
                  <span class="text-5xl md:text-6xl lg:text-7xl font-heading font-black tracking-tight" id="roi-out-monthly">+$78,125</span>
                  <span class="text-gray-400 font-bold ml-1 text-xl md:text-2xl">/MO</span>
                </div>
                <p class="text-gray-400 text-sm md:text-base">
                  From <strong class="text-white" id="roi-out-jobs">3.1 closed jobs</strong> a month &middot; built on YOUR numbers, not agency hype.
                </p>
              </div>

              <div class="w-full h-px bg-white/10 my-10 relative z-10"></div>

              <div class="grid grid-cols-2 gap-8 mb-10 relative z-10">
                <div class="text-center">
                  <h4 class="text-3xl md:text-4xl font-heading font-black text-white mb-1" id="roi-out-yearly">+$937,500</h4>
                  <p class="text-[10px] md:text-xs font-bold tracking-[0.15em] text-gray-400 uppercase leading-tight">Site-Driven Revenue<br>Per Year</p>
                </div>
                <div class="text-center">
                  <h4 class="text-3xl md:text-4xl font-heading font-black text-brand-yellow mb-1" id="roi-out-return">263x</h4>
                  <p class="text-[10px] md:text-xs font-bold tracking-[0.15em] text-gray-400 uppercase leading-tight">Return on<br>Your Retainer</p>
                </div>
              </div>

              <!-- Buyback Time Box -->
              <div class="bg-gradient-to-r from-brand-yellow/10 to-transparent border border-brand-yellow/20 rounded-xl p-5 md:p-6 flex flex-col md:flex-row items-center justify-between gap-4 relative z-10">
                <div class="flex items-center gap-3">
                  <i data-lucide="clock" class="w-5 h-5 text-brand-yellow"></i>
                  <span class="text-[11px] font-bold tracking-[0.15em] text-white uppercase">Subscription Buyback Time</span>
                </div>
                <div class="text-right">
                  <div class="text-brand-yellow font-heading font-bold text-xl md:text-2xl leading-none" id="roi-out-buyback">~46 minutes</div>
                  <div class="text-[9px] font-bold tracking-[0.1em] text-gray-400 uppercase mt-1">Of one avg job @ 25% margin</div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </section>

      <!-- Google Reviews Section -->
      <section id="reviews" class="py-24 bg-brand-gray relative border-t border-white/5">
        <div class="max-w-7xl mx-auto px-6">
          <!-- Header -->
          <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 reveal">
            <div>
              <h2 class="text-4xl md:text-5xl font-heading font-bold mb-4">
                Client <span class="text-brand-yellow">Success</span>
              </h2>
              <div class="flex items-center gap-3">
                <div class="flex text-brand-yellow">
                  <i data-lucide="star" class="w-5 h-5 fill-current"></i>
                  <i data-lucide="star" class="w-5 h-5 fill-current"></i>
                  <i data-lucide="star" class="w-5 h-5 fill-current"></i>
                  <i data-lucide="star" class="w-5 h-5 fill-current"></i>
                  <i data-lucide="star" class="w-5 h-5 fill-current"></i>
                </div>
                <span class="text-white font-bold text-lg">5.0</span>
                <span class="text-gray-400 text-sm">Excellent rating on Google</span>
              </div>
            </div>
            
            <a 
              href="https://share.google/nhr4iREndhAixZ9rt" 
              target="_blank" 
              rel="noopener noreferrer" 
              class="mt-6 md:mt-0 flex items-center gap-2 bg-white/5 hover:bg-white/10 border border-white/10 px-6 py-3 rounded-full text-white transition-all font-medium group"
            >
              <svg viewBox="0 0 24 24" class="w-5 h-5" xmlns="http://www.w3.org/2000/svg">
                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
              </svg>
              Read all reviews
              <i data-lucide="arrow-up-right" class="w-4 h-4 text-brand-yellow group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i>
            </a>
          </div>

          <!-- Review Cards Grid -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            
            <!-- Card 1 -->
            <div class="bg-brand-black p-8 rounded-2xl border border-white/5 reveal hover:border-brand-yellow/30 transition-all duration-300 flex flex-col shadow-lg">
              <div class="flex justify-between items-start mb-5">
                <div class="flex items-center gap-4">
                  <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-lg shadow-inner">M</div>
                  <div>
                    <h4 class="font-bold text-white leading-tight">Michael T.</h4>
                    <p class="text-xs text-gray-500 mt-0.5">3 weeks ago</p>
                  </div>
                </div>
                <svg viewBox="0 0 24 24" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                </svg>
              </div>
              <div class="flex text-[#FBBC05] mb-4">
                <i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i>
              </div>
              <p class="text-gray-300 text-sm leading-relaxed flex-grow">
                "Slabflow completely transformed our online presence. Within 3 months of launching our new site and Local Service Ads, our lead volume doubled. Highly recommend their professional team to any local business!"
              </p>
            </div>

            <!-- Card 2 -->
            <div class="bg-brand-black p-8 rounded-2xl border border-white/5 reveal reveal-delay-1 hover:border-brand-yellow/30 transition-all duration-300 flex flex-col shadow-lg">
              <div class="flex justify-between items-start mb-5">
                <div class="flex items-center gap-4">
                  <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center text-white font-bold text-lg shadow-inner">S</div>
                  <div>
                    <h4 class="font-bold text-white leading-tight">Sarah L.</h4>
                    <p class="text-xs text-gray-500 mt-0.5">1 month ago</p>
                  </div>
                </div>
                <svg viewBox="0 0 24 24" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                </svg>
              </div>
              <div class="flex text-[#FBBC05] mb-4">
                <i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i>
              </div>
              <p class="text-gray-300 text-sm leading-relaxed flex-grow">
                "The Meta ads strategy they implemented was incredible. We stopped wasting money on broad audiences and finally saw a massive return on ad spend. Communication and reporting are top-notch."
              </p>
            </div>

            <!-- Card 3 -->
            <div class="bg-brand-black p-8 rounded-2xl border border-white/5 reveal reveal-delay-2 hover:border-brand-yellow/30 transition-all duration-300 flex flex-col shadow-lg hidden md:flex">
              <div class="flex justify-between items-start mb-5">
                <div class="flex items-center gap-4">
                  <div class="w-12 h-12 rounded-full bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center text-white font-bold text-lg shadow-inner">D</div>
                  <div>
                    <h4 class="font-bold text-white leading-tight">David R.</h4>
                    <p class="text-xs text-gray-500 mt-0.5">2 months ago</p>
                  </div>
                </div>
                <svg viewBox="0 0 24 24" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                </svg>
              </div>
              <div class="flex text-[#FBBC05] mb-4">
                <i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i><i data-lucide="star" class="w-4 h-4 fill-current"></i>
              </div>
              <p class="text-gray-300 text-sm leading-relaxed flex-grow">
                "Their GMB optimization and local SEO got us ranking #1 in our city. The strategy gives us peace of mind knowing our brand is always fast, secure, and easily found by clients searching for us."
              </p>
            </div>

          </div>
        </div>
      </section>

      <!-- The Growth Pyramid Section -->
      <section
        id="pyramid"
        class="py-24 bg-brand-black relative overflow-hidden border-t border-white/5"
      >
        <!-- Background Glows -->
        <div
          class="absolute top-1/4 -left-32 w-96 h-96 bg-brand-yellow/5 rounded-full blur-[100px] pointer-events-none"
        ></div>

        <div class="max-w-7xl mx-auto px-6">
          <div class="text-center mb-16 reveal">
            <h2 class="text-4xl md:text-5xl font-heading font-bold mb-4">
              The Slabflow <span class="text-brand-yellow">Growth Pyramid</span>
            </h2>
            <p class="text-gray-400 max-w-2xl mx-auto text-lg">
              How we engineer predictable revenue by mastering Traffic,
              Trust, and Conversion.
            </p>
          </div>

          <div class="flex flex-col lg:flex-row items-center gap-16">
            <!-- Pyramid Graphic (Left) -->
            <div class="w-full lg:w-1/2 flex justify-center reveal">
              <div
                class="relative w-full max-w-md mx-auto transform hover:scale-105 transition-transform duration-700"
              >
                <svg
                  viewBox="0 0 400 300"
                  class="w-full h-auto drop-shadow-2xl overflow-visible"
                >
                  <!-- Peak: Conversion -->
                  <g
                    id="group-conversion"
                    class="pyramid-group"
                    onclick="setActivePyramidLevel('conversion')"
                  >
                    <path
                      class="pyramid-path"
                      d="M 140 90 L 260 90 L 200 0 Z"
                      fill="rgba(26,26,26,0.9)"
                      stroke="#FFC72C"
                      stroke-width="2"
                    />
                    <text
                      class="pyramid-text"
                      x="200"
                      y="60"
                      font-size="18"
                      font-family="Montserrat"
                      font-weight="900"
                      text-anchor="middle"
                      letter-spacing="1"
                    >
                      CONVERSION
                    </text>
                    <text
                      class="pyramid-subtext"
                      x="200"
                      y="75"
                      font-size="11"
                      font-family="Inter"
                      font-weight="bold"
                      text-anchor="middle"
                    >
                      Custom Websites
                    </text>
                  </g>

                  <!-- Middle: Trust -->
                  <g
                    id="group-trust"
                    class="pyramid-group"
                    onclick="setActivePyramidLevel('trust')"
                  >
                    <path
                      class="pyramid-path"
                      d="M 70 195 L 330 195 L 267 100 L 133 100 Z"
                      fill="rgba(26,26,26,0.9)"
                      stroke="#FFC72C"
                      stroke-width="2"
                    />
                    <text
                      class="pyramid-text"
                      x="200"
                      y="150"
                      font-size="22"
                      font-family="Montserrat"
                      font-weight="900"
                      text-anchor="middle"
                      letter-spacing="2"
                    >
                      TRUST
                    </text>
                    <text
                      class="pyramid-subtext"
                      x="200"
                      y="170"
                      font-size="13"
                      font-family="Inter"
                      text-anchor="middle"
                    >
                      Google Reviews
                    </text>
                  </g>

                  <!-- Base: Traffic -->
                  <g
                    id="group-traffic"
                    class="pyramid-group active"
                    onclick="setActivePyramidLevel('traffic')"
                  >
                    <path
                      class="pyramid-path"
                      d="M 0 300 L 400 300 L 337 205 L 63 205 Z"
                      fill="rgba(26,26,26,0.9)"
                      stroke="#FFC72C"
                      stroke-width="2"
                    />
                    <text
                      class="pyramid-text"
                      x="200"
                      y="255"
                      font-size="24"
                      font-family="Montserrat"
                      font-weight="900"
                      text-anchor="middle"
                      letter-spacing="2"
                    >
                      TRAFFIC
                    </text>
                    <text
                      class="pyramid-subtext"
                      x="200"
                      y="275"
                      font-size="14"
                      font-family="Inter"
                      text-anchor="middle"
                    >
                      Ads &amp; SEO
                    </text>
                  </g>
                </svg>
              </div>
            </div>

            <!-- Explanation Text (Right) -->
            <div
              class="w-full lg:w-1/2 flex flex-col gap-4 reveal reveal-delay-1"
            >
              <!-- Conversion (Peak) -->
              <div
                id="card-conversion"
                class="pyramid-card glass-card p-6 rounded-2xl border-l-4"
                onclick="setActivePyramidLevel('conversion')"
              >
                <div class="flex items-center gap-3 mb-2">
                  <div
                    class="card-num w-8 h-8 rounded-full flex items-center justify-center font-bold"
                  >
                    3
                  </div>
                  <h4 class="text-xl font-heading font-bold text-white">
                    Conversion
                    <span
                      class="text-gray-400 font-normal text-sm ml-2 hidden sm:inline-block"
                      >(Custom Websites)</span
                    >
                  </h4>
                </div>
                <p class="text-gray-400 text-sm leading-relaxed pl-11">
                  The peak. All traffic means nothing if your storefront
                  isn't optimized. We build lightning-fast, highly-tuned
                  websites designed specifically to turn your traffic into
                  paying customers.
                </p>
              </div>

              <!-- Trust (Middle) -->
              <div
                id="card-trust"
                class="pyramid-card glass-card p-6 rounded-2xl border-l-4"
                onclick="setActivePyramidLevel('trust')"
              >
                <div class="flex items-center gap-3 mb-2">
                  <div
                    class="card-num w-8 h-8 rounded-full flex items-center justify-center font-bold"
                  >
                    2
                  </div>
                  <h4 class="text-xl font-heading font-bold text-white">
                    Trust
                    <span
                      class="text-gray-400 font-normal text-sm ml-2 hidden sm:inline-block"
                      >(Review Management)</span
                    >
                  </h4>
                </div>
                <p class="text-gray-400 text-sm leading-relaxed pl-11">
                  The core bridge. Before a prospect reaches out, they check
                  your reviews. We implement automated systems to consistently
                  generate 5-star Google Reviews to build trust instantly.
                </p>
              </div>

              <!-- Traffic (Base) -->
              <div
                id="card-traffic"
                class="pyramid-card glass-card p-6 rounded-2xl border-l-4 active"
                onclick="setActivePyramidLevel('traffic')"
              >
                <div class="flex items-center gap-3 mb-2">
                  <div
                    class="card-num w-8 h-8 rounded-full flex items-center justify-center font-bold"
                  >
                    1
                  </div>
                  <h4 class="text-xl font-heading font-bold text-white">
                    Traffic
                    <span
                      class="text-brand-yellow font-normal text-sm ml-2 hidden sm:inline-block"
                      >(Ads & SEO)</span
                    >
                  </h4>
                </div>
                <p class="text-gray-400 text-sm leading-relaxed pl-11">
                  The foundation. We drive highly targeted, high-intent traffic to
                  your brand using precision Meta Ads, Local Ads, and SEO so you 
                  are seen by people ready to buy.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- CTA Section -->
      <section
        class="py-24 bg-brand-black relative overflow-hidden border-t border-white/5"
      >
        <div class="max-w-5xl mx-auto px-6 relative z-10 reveal">
          <!-- Premium Sleek White Card -->
          <div
            class="bg-white rounded-3xl p-10 md:p-20 text-center relative overflow-hidden shadow-[0_20px_60px_-15px_rgba(255,199,44,0.15)] hover:shadow-[0_20px_60px_-15px_rgba(255,199,44,0.3)] transition-shadow duration-500 border border-gray-200"
          >
            <!-- Sleek Texture Pattern (Dots) -->
            <div
              class="absolute inset-0 bg-[radial-gradient(#00000015_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none"
            ></div>

            <!-- Inner Decorative Glow -->
            <div
              class="absolute -top-32 left-1/2 -translate-x-1/2 w-[500px] h-[400px] bg-brand-yellow/30 blur-[100px] rounded-full pointer-events-none"
            ></div>

            <h2
              class="text-4xl md:text-5xl lg:text-6xl font-heading font-black text-black mb-6 relative z-10 tracking-tight"
            >
              Ready to scale your business?
            </h2>
            <p
              class="text-lg md:text-xl text-gray-600 mb-10 font-medium max-w-2xl mx-auto relative z-10"
            >
              Let's build a customized marketing strategy that drives real,
              predictable revenue.
            </p>

            <button
              onclick="openModal()"
              class="relative z-10 inline-flex items-center gap-2 bg-brand-yellow text-black px-10 py-5 rounded-full font-bold text-lg shadow-2xl hover:bg-[#E5B120] hover:-translate-y-1 transition-all duration-300 group"
            >
              Get Your Free Marketing Audit
              <i
                data-lucide="arrow-up-right"
                class="w-6 h-6 text-black group-hover:rotate-12 transition-transform"
              ></i>
            </button>
          </div>
        </div>
      </section>
    </main>

    <!-- Footer -->
    <footer class="bg-black pt-20 pb-24 md:pb-10 border-t border-white/10">
      <div class="max-w-7xl mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
          <!-- Brand Col -->
          <div class="md:col-span-1">
            <a href="#" class="flex items-center gap-2 mb-6">
              <svg viewBox="0 0 100 100" class="w-8 h-8">
                <polygon points="50,15 80,30 50,45 20,30" fill="#FFFFFF" />
                <polygon points="20,35 35,42.5 35,75 20,67.5" fill="#FFC72C" />
                <polygon points="80,35 65,42.5 65,75 80,67.5" fill="#FFC72C" />
                <polygon points="50,60 80,75 50,90 20,75" fill="#FFFFFF" />
              </svg>
              <span
                class="font-heading font-bold text-xl tracking-tight text-white"
                >slabflow</span
              >
            </a>
            <p class="text-gray-400 text-sm leading-relaxed mb-6">
              Premium digital marketing solutions designed to elevate your brand
              and dominate your local market.
            </p>
            <div class="flex items-center gap-4">
              <a
                href="https://www.facebook.com/profile.php?id=61553973082010"
                target="_blank"
                rel="noopener noreferrer"
                class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-brand-yellow hover:text-black transition-colors"
                ><i data-lucide="facebook" class="w-5 h-5"></i
              ></a>
              <a
                href="#"
                class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-brand-yellow hover:text-black transition-colors"
                ><i data-lucide="instagram" class="w-5 h-5"></i
              ></a>
              <a
                href="#"
                class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-brand-yellow hover:text-black transition-colors"
                ><i data-lucide="linkedin" class="w-5 h-5"></i
              ></a>
            </div>
          </div>

          <!-- Services Col -->
          <div>
            <h4
              class="font-heading font-bold text-white mb-6 uppercase tracking-wider text-sm"
            >
              Services
            </h4>
            <ul class="space-y-3">
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-brand-yellow text-sm transition-colors"
                  >Meta Ads</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-brand-yellow text-sm transition-colors"
                  >Local Service Ads</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-brand-yellow text-sm transition-colors"
                  >Custom Websites</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-brand-yellow text-sm transition-colors"
                  >GMB Optimization</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-brand-yellow text-sm transition-colors"
                  >SEO Strategies</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-brand-yellow text-sm transition-colors"
                  >Review Management</a
                >
              </li>
            </ul>
          </div>

          <!-- Company Col -->
          <div>
            <h4
              class="font-heading font-bold text-white mb-6 uppercase tracking-wider text-sm"
            >
              Company
            </h4>
            <ul class="space-y-3">
              <li>
                <a
                  href="#about"
                  class="text-gray-400 hover:text-brand-yellow text-sm transition-colors"
                  >About Us</a
                >
              </li>
              <li>
                <a
                  href="#benefits"
                  class="text-gray-400 hover:text-brand-yellow text-sm transition-colors"
                  >Why Choose Us</a
                >
              </li>
              <li>
                <a
                  href="#reviews"
                  class="text-gray-400 hover:text-brand-yellow text-sm transition-colors"
                  >Testimonials</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-brand-yellow text-sm transition-colors"
                  >Privacy Policy</a
                >
              </li>
            </ul>
          </div>

          <!-- Contact Col -->
          <div>
            <h4
              class="font-heading font-bold text-white mb-6 uppercase tracking-wider text-sm"
            >
              Contact Us
            </h4>
            <ul class="space-y-4">
              <li class="flex items-start gap-3 text-sm text-gray-400">
                <i
                  data-lucide="map-pin"
                  class="w-5 h-5 text-brand-yellow shrink-0"
                ></i>
                <span>Toronto, ON, Canada</span>
              </li>
              <li class="flex items-start gap-3 text-sm text-gray-400">
                <i
                  data-lucide="phone"
                  class="w-5 h-5 text-brand-yellow shrink-0 mt-0.5"
                ></i>
                <div class="flex flex-col gap-2">
                  <a
                    href="tel:+12139213059"
                    class="hover:text-white transition-colors flex items-center gap-2"
                  >
                    <span class="text-base leading-none" title="United States">🇺🇸</span> +1 213-921-3059
                  </a>
                  <a
                    href="tel:+16472779682"
                    class="hover:text-white transition-colors flex items-center gap-2"
                  >
                    <span class="text-base leading-none" title="Canada">🇨🇦</span> +1 647-277-9682
                  </a>
                </div>
              </li>
              <li class="flex items-center gap-3 text-sm text-gray-400">
                <i
                  data-lucide="mail"
                  class="w-5 h-5 text-brand-yellow shrink-0"
                ></i>
                <a
                  href="mailto:hello@slabflow.com"
                  class="hover:text-white transition-colors"
                  >hello@slabflow.com</a
                >
              </li>
            </ul>
          </div>
        </div>

        <div
          class="border-t border-white/10 pt-8 flex flex-col md:flex-row items-center justify-between gap-4"
        >
          <p class="text-gray-500 text-sm">
            © <span id="year"></span> Slabflow Agency. All rights reserved.
          </p>
          <div class="flex gap-4">
            <a href="#" class="text-gray-500 text-sm hover:text-white">Terms</a>
            <a href="#" class="text-gray-500 text-sm hover:text-white"
              >Privacy</a
            >
            <a href="#" class="text-gray-500 text-sm hover:text-white"
              >Cookies</a
            >
          </div>
        </div>
      </div>
    </footer>

    <!-- Mobile Sticky Bottom Nav -->
    <nav
      class="lg:hidden fixed bottom-0 left-0 right-0 bg-black/90 backdrop-blur-lg border-t border-white/10 z-50 pb-safe"
    >
      <div class="flex justify-around items-center h-16 px-2">
        <!-- Chat Button -->
        <button
          class="flex flex-col items-center justify-center w-full h-full text-gray-400 hover:text-brand-yellow transition-colors group"
        >
          <div class="relative">
            <i
              data-lucide="message-circle"
              class="w-6 h-6 mb-1 group-hover:-translate-y-1 transition-transform"
            ></i>
            <span
              class="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full"
            ></span>
          </div>
          <span class="text-[10px] font-medium uppercase tracking-wider"
            >Chat</span
          >
        </button>

        <!-- Center Menu Button -->
        <div class="relative -top-5 flex-shrink-0">
          <button
            id="mobile-menu-btn"
            class="w-14 h-14 bg-brand-yellow rounded-full flex items-center justify-center text-black shadow-glow hover:shadow-glow-hover transition-all active:scale-95"
          >
            <i data-lucide="grid-2x2" class="w-6 h-6" id="menu-icon"></i>
            <i data-lucide="x" class="w-6 h-6 hidden" id="close-icon"></i>
          </button>
        </div>

        <!-- Call Button -->
        <a
          href="tel:+12139213059"
          class="flex flex-col items-center justify-center w-full h-full text-gray-400 hover:text-brand-yellow transition-colors group"
        >
          <i
            data-lucide="phone-call"
            class="w-6 h-6 mb-1 group-hover:-translate-y-1 transition-transform"
          ></i>
          <span class="text-[10px] font-medium uppercase tracking-wider"
            >Call</span
          >
        </a>
      </div>
    </nav>

    <!-- Mobile Menu Fullscreen Overlay -->
    <div
      id="mobile-menu-overlay"
      class="fixed inset-0 bg-brand-black z-40 hidden flex-col px-8 pt-24 pb-24 overflow-y-auto"
    >
      <nav class="flex flex-col gap-8 w-full max-w-sm mx-auto my-auto">
        <!-- Main Links -->
        <div class="flex flex-col gap-6 text-center pt-4">
          <a
            href="#hero"
            class="mobile-link text-2xl font-heading font-bold text-white hover:text-brand-yellow transition-colors"
            >Home</a
          >
          <a
            href="#about"
            class="mobile-link text-2xl font-heading font-bold text-white hover:text-brand-yellow transition-colors"
            >About Us</a
          >
          <a
            href="#benefits"
            class="mobile-link text-2xl font-heading font-bold text-white hover:text-brand-yellow transition-colors"
            >Why Choose Us</a
          >
        </div>

        <!-- Services Dropdown (Open by default) -->
        <div class="w-full flex flex-col items-center">
          <button
            onclick="document.getElementById('mobile-services-list').classList.toggle('hidden'); document.getElementById('mobile-services-icon').classList.toggle('rotate-180');"
            class="flex items-center justify-center gap-2 text-2xl font-heading font-bold text-white hover:text-brand-yellow transition-colors mb-5 w-full"
          >
            Services <i id="mobile-services-icon" data-lucide="chevron-up" class="w-6 h-6 transition-transform duration-300"></i>
          </button>
          
          <div
            id="mobile-services-list"
            class="w-full bg-white/5 rounded-2xl p-6 border border-white/10 shadow-lg flex flex-col gap-5 text-center transition-all duration-300"
          >
            <a
              href="#services"
              class="mobile-link text-gray-300 text-lg font-medium hover:text-white transition-colors"
              >Meta Ads</a
            >
            <a
              href="#services"
              class="mobile-link text-gray-300 text-lg font-medium hover:text-white transition-colors"
              >Local Ads</a
            >
            <a
              href="#services"
              class="mobile-link text-gray-300 text-lg font-medium hover:text-white transition-colors"
              >Websites</a
            >
            <a
              href="#services"
              class="mobile-link text-gray-300 text-lg font-medium hover:text-white transition-colors"
              >GMB Boost</a
            >
            <a
              href="#services"
              class="mobile-link text-gray-300 text-lg font-medium hover:text-white transition-colors"
              >SEO</a
            >
            <a
              href="#services"
              class="mobile-link text-gray-300 text-lg font-medium hover:text-white transition-colors"
              >Reviews</a
            >
          </div>
        </div>

        <!-- CTA Button -->
        <button
          onclick="toggleMenu(); setTimeout(openModal, 400);"
          class="mt-2 inline-block bg-brand-yellow text-black px-8 py-4 rounded-full font-bold text-lg mx-auto w-full shadow-glow hover:shadow-glow-hover hover:-translate-y-1 transition-all"
        >
          Get a Proposal
        </button>
      </nav>
    </div>

    <!-- Proposal Form Modal -->
    <div
      id="proposal-modal"
      class="fixed inset-0 z-[100] hidden items-center justify-center px-4"
    >
      <!-- Backdrop -->
      <div
        class="absolute inset-0 bg-black/80 backdrop-blur-sm transition-opacity duration-300 opacity-0"
        id="modal-backdrop"
        onclick="closeModal()"
      ></div>

      <!-- Modal Content -->
      <div
        class="relative bg-[#111] border border-white/10 rounded-3xl w-full max-w-lg p-6 md:p-8 transform scale-95 opacity-0 transition-all duration-300 shadow-2xl shadow-brand-yellow/10 overflow-y-auto max-h-[90vh]"
        id="modal-content"
      >
        <!-- Close Button -->
        <button
          onclick="closeModal()"
          class="absolute top-4 right-4 md:top-6 md:right-6 text-gray-400 hover:text-brand-yellow transition-colors bg-white/5 hover:bg-white/10 p-2 rounded-full"
        >
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>

        <div class="mb-8 pr-8">
          <h3 class="text-3xl font-heading font-bold mb-2 text-white">
            Let's <span class="text-brand-yellow">Connect</span>
          </h3>
          <p class="text-gray-400 text-sm">
            Fill out the form below to request a proposal or book a strategy
            call.
          </p>
        </div>

        <form
          class="space-y-5"
          onsubmit="event.preventDefault(); alert('Form submitted! We will connect it to your backend soon.'); closeModal();"
        >
          <!-- Text Inputs -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
              <label
                class="block text-xs font-bold uppercase tracking-wider text-gray-400 mb-2"
                >Full Name *</label
              >
              <input
                type="text"
                required
                class="w-full bg-black border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-brand-yellow focus:ring-1 focus:ring-brand-yellow transition-all"
                placeholder="Jane Doe"
              />
            </div>
            <div>
              <label
                class="block text-xs font-bold uppercase tracking-wider text-gray-400 mb-2"
                >Company Name</label
              >
              <input
                type="text"
                class="w-full bg-black border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-brand-yellow focus:ring-1 focus:ring-brand-yellow transition-all"
                placeholder="Acme Corp"
              />
            </div>
          </div>

          <div>
            <label
              class="block text-xs font-bold uppercase tracking-wider text-gray-400 mb-2"
              >Email Address *</label
            >
            <input
              type="email"
              required
              class="w-full bg-black border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-brand-yellow focus:ring-1 focus:ring-brand-yellow transition-all"
              placeholder="jane@example.com"
            />
          </div>

          <!-- Checkboxes -->
          <div>
            <label
              class="block text-xs font-bold uppercase tracking-wider text-gray-400 mb-3"
              >Services Requested</label
            >
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <label
                class="custom-checkbox flex items-center gap-3 cursor-pointer group"
              >
                <div class="relative flex items-center justify-center">
                  <input type="checkbox" class="sr-only" />
                  <div
                    class="w-5 h-5 border border-white/20 rounded bg-black transition-all group-hover:border-brand-yellow/50 flex items-center justify-center"
                  >
                    <svg
                      class="w-3.5 h-3.5 hidden pointer-events-none"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="3"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M5 13l4 4L19 7"
                      ></path>
                    </svg>
                  </div>
                </div>
                <span
                  class="text-sm text-gray-300 group-hover:text-white transition-colors"
                  >Meta Ads</span
                >
              </label>

              <label
                class="custom-checkbox flex items-center gap-3 cursor-pointer group"
              >
                <div class="relative flex items-center justify-center">
                  <input type="checkbox" class="sr-only" />
                  <div
                    class="w-5 h-5 border border-white/20 rounded bg-black transition-all group-hover:border-brand-yellow/50 flex items-center justify-center"
                  >
                    <svg
                      class="w-3.5 h-3.5 hidden pointer-events-none"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="3"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M5 13l4 4L19 7"
                      ></path>
                    </svg>
                  </div>
                </div>
                <span
                  class="text-sm text-gray-300 group-hover:text-white transition-colors"
                  >Local Service Ads</span
                >
              </label>

              <label
                class="custom-checkbox flex items-center gap-3 cursor-pointer group"
              >
                <div class="relative flex items-center justify-center">
                  <input type="checkbox" class="sr-only" />
                  <div
                    class="w-5 h-5 border border-white/20 rounded bg-black transition-all group-hover:border-brand-yellow/50 flex items-center justify-center"
                  >
                    <svg
                      class="w-3.5 h-3.5 hidden pointer-events-none"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="3"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M5 13l4 4L19 7"
                      ></path>
                    </svg>
                  </div>
                </div>
                <span
                  class="text-sm text-gray-300 group-hover:text-white transition-colors"
                  >Custom Websites</span
                >
              </label>

              <label
                class="custom-checkbox flex items-center gap-3 cursor-pointer group"
              >
                <div class="relative flex items-center justify-center">
                  <input type="checkbox" class="sr-only" />
                  <div
                    class="w-5 h-5 border border-white/20 rounded bg-black transition-all group-hover:border-brand-yellow/50 flex items-center justify-center"
                  >
                    <svg
                      class="w-3.5 h-3.5 hidden pointer-events-none"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="3"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M5 13l4 4L19 7"
                      ></path>
                    </svg>
                  </div>
                </div>
                <span
                  class="text-sm text-gray-300 group-hover:text-white transition-colors"
                  >GMB Optimization</span
                >
              </label>

              <label
                class="custom-checkbox flex items-center gap-3 cursor-pointer group"
              >
                <div class="relative flex items-center justify-center">
                  <input type="checkbox" class="sr-only" />
                  <div
                    class="w-5 h-5 border border-white/20 rounded bg-black transition-all group-hover:border-brand-yellow/50 flex items-center justify-center"
                  >
                    <svg
                      class="w-3.5 h-3.5 hidden pointer-events-none"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="3"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M5 13l4 4L19 7"
                      ></path>
                    </svg>
                  </div>
                </div>
                <span
                  class="text-sm text-gray-300 group-hover:text-white transition-colors"
                  >SEO Strategies</span
                >
              </label>

              <label
                class="custom-checkbox flex items-center gap-3 cursor-pointer group"
              >
                <div class="relative flex items-center justify-center">
                  <input type="checkbox" class="sr-only" />
                  <div
                    class="w-5 h-5 border border-white/20 rounded bg-black transition-all group-hover:border-brand-yellow/50 flex items-center justify-center"
                  >
                    <svg
                      class="w-3.5 h-3.5 hidden pointer-events-none"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="3"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M5 13l4 4L19 7"
                      ></path>
                    </svg>
                  </div>
                </div>
                <span
                  class="text-sm text-gray-300 group-hover:text-white transition-colors"
                  >Review Management</span
                >
              </label>
            </div>
          </div>

          <button
            type="submit"
            class="w-full bg-brand-yellow text-black font-bold py-4 rounded-xl hover:shadow-glow hover:-translate-y-0.5 transition-all duration-300 mt-6 flex items-center justify-center gap-2"
          >
            Submit Request <i data-lucide="send" class="w-4 h-4"></i>
          </button>
        </form>
      </div>
    </div>

    <!-- Scripts -->
    <script>
      // Initialize Lucide Icons
      lucide.createIcons();

      // Set Current Year in Footer
      document.getElementById("year").textContent = new Date().getFullYear();

      // Scroll Reveal Animation Logic
      const revealElements = document.querySelectorAll(".reveal");

      const revealOptions = {
        threshold: 0.15,
        rootMargin: "0px 0px -50px 0px",
      };

      const revealObserver = new IntersectionObserver(function (
        entries,
        observer
      ) {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) {
            return;
          } else {
            entry.target.classList.add("active");
            observer.unobserve(entry.target);
          }
        });
      },
      revealOptions);

      revealElements.forEach((el) => {
        revealObserver.observe(el);
      });

      // Mobile Menu Toggle Logic
      const menuBtn = document.getElementById("mobile-menu-btn");
      const menuOverlay = document.getElementById("mobile-menu-overlay");
      const menuIcon = document.getElementById("menu-icon");
      const closeIcon = document.getElementById("close-icon");
      const mobileLinks = document.querySelectorAll(".mobile-link");
      let menuOpen = false;

      function toggleMenu() {
        menuOpen = !menuOpen;
        if (menuOpen) {
          menuOverlay.classList.remove("hidden");
          // Small delay to allow display:block to apply before animating opacity/clip-path
          setTimeout(() => {
            menuOverlay.classList.add("open");
          }, 10);
          menuIcon.classList.add("hidden");
          closeIcon.classList.remove("hidden");
          document.body.style.overflow = "hidden"; // Prevent background scrolling
        } else {
          menuOverlay.classList.remove("open");
          setTimeout(() => {
            menuOverlay.classList.add("hidden");
          }, 500); // Wait for transition to finish
          menuIcon.classList.remove("hidden");
          closeIcon.classList.add("hidden");
          document.body.style.overflow = "";
        }
      }

      menuBtn.addEventListener("click", toggleMenu);

      // Close menu when clicking a link
      mobileLinks.forEach((link) => {
        link.addEventListener("click", () => {
          if (menuOpen) toggleMenu();
        });
      });

      // Modal Logic
      const modal = document.getElementById("proposal-modal");
      const modalBackdrop = document.getElementById("modal-backdrop");
      const modalContent = document.getElementById("modal-content");

      function openModal() {
        modal.classList.remove("hidden");
        modal.classList.add("flex");
        // Small delay to allow display to apply before fading in
        setTimeout(() => {
          modalBackdrop.classList.remove("opacity-0");
          modalContent.classList.remove("scale-95", "opacity-0");
          modalContent.classList.add("scale-100", "opacity-100");
        }, 10);
        document.body.style.overflow = "hidden";
      }

      function closeModal() {
        modalBackdrop.classList.add("opacity-0");
        modalContent.classList.remove("scale-100", "opacity-100");
        modalContent.classList.add("scale-95", "opacity-0");

        setTimeout(() => {
          modal.classList.add("hidden");
          modal.classList.remove("flex");
          if (!menuOpen) {
            // Keep overflow hidden if mobile menu is still open
            document.body.style.overflow = "";
          }
        }, 300); // Wait for transition
      }

      // Sticky Navbar effect on scroll (Desktop)
      const desktopNav = document.getElementById("desktop-nav");
      const topBar = document.getElementById("top-bar");
      window.addEventListener("scroll", () => {
        if (window.scrollY > 40) {
          if (topBar) topBar.style.transform = "translateY(-100%)";
          desktopNav.style.transform = "translateY(-40px)";
          desktopNav.classList.add("shadow-lg");
          desktopNav.style.backgroundColor = "rgba(10, 10, 10, 0.95)";
        } else {
          if (topBar) topBar.style.transform = "translateY(0)";
          desktopNav.style.transform = "translateY(0)";
          desktopNav.classList.remove("shadow-lg");
          desktopNav.style.backgroundColor = "rgba(10, 10, 10, 0.8)";
        }
      });

      // Pyramid Interactivity Logic
      function setActivePyramidLevel(level) {
        // Remove active class from all groups and cards
        document
          .querySelectorAll(".pyramid-group")
          .forEach((el) => el.classList.remove("active"));
        document
          .querySelectorAll(".pyramid-card")
          .forEach((el) => el.classList.remove("active"));

        // Add active class to the clicked group and corresponding card
        document.getElementById(`group-${level}`).classList.add("active");
        document.getElementById(`card-${level}`).classList.add("active");

        // Optional: color adjustment for text inside cards based on active state
        document
          .querySelectorAll(".pyramid-card .text-brand-yellow")
          .forEach((el) => {
            el.classList.remove("text-brand-yellow");
            el.classList.add("text-gray-400");
          });

        const activeCardTextSpan = document.querySelector(
          `#card-${level} span`
        );
        if (activeCardTextSpan) {
          activeCardTextSpan.classList.remove("text-gray-400");
          activeCardTextSpan.classList.add("text-brand-yellow");
        }
      }

      // Typewriter Effect Logic
      const typeWords = ["Digital Marketing", "Your Success", "Business Growth", "Predictable Revenue"];
      let typeIndex = 0;
      let isDeletingType = false;
      let typeText = "Digital Marketing";
      const typeElement = document.getElementById("typewriter");

      function typeWriterEffect() {
        if (!typeElement) return;
        
        const currentWord = typeWords[typeIndex % typeWords.length];

        if (isDeletingType) {
          typeText = currentWord.substring(0, typeText.length - 1);
        } else {
          typeText = currentWord.substring(0, typeText.length + 1);
        }

        typeElement.innerHTML = typeText;

        let typeSpeed = 80; // Speed of typing
        if (isDeletingType) typeSpeed /= 2; // Delete twice as fast

        // If word is completely typed out
        if (!isDeletingType && typeText === currentWord) {
          typeSpeed = 2500; // Pause at the end of the word for 2.5s
          isDeletingType = true;
        } 
        // If word is completely deleted
        else if (isDeletingType && typeText === "") {
          isDeletingType = false;
          typeIndex++;
          typeSpeed = 500; // Pause before typing the next word
        }

        setTimeout(typeWriterEffect, typeSpeed);
      }

      // Start the typing effect after the initial load reveal animations (2.5 seconds)
      setTimeout(typeWriterEffect, 2500);

      // ROI Calculator Logic
      function initROICalculator() {
        const leadsInput = document.getElementById('roi-leads');
        const bookingInput = document.getElementById('roi-booking');
        const closeInput = document.getElementById('roi-close');
        const revenueInput = document.getElementById('roi-revenue');

        const outMonthly = document.getElementById('roi-out-monthly');
        const outJobs = document.getElementById('roi-out-jobs');
        const outYearly = document.getElementById('roi-out-yearly');
        const outReturn = document.getElementById('roi-out-return');
        const outBuyback = document.getElementById('roi-out-buyback');

        // Assumed Retainer value based on the math in the screenshot
        const RETAINER = 3000; 

        function updateSliderTrack(input) {
          const val = ((input.value - input.min) / (input.max - input.min)) * 100;
          input.style.background = `linear-gradient(to right, #FFC72C ${val}%, #333 ${val}%)`;
        }

        function calculateROI() {
          const leads = parseFloat(leadsInput.value);
          const bookingRate = parseFloat(bookingInput.value);
          const closeRate = parseFloat(closeInput.value);
          const avgRevenue = parseFloat(revenueInput.value);

          // Update Labels
          document.getElementById('roi-val-leads').innerText = leads;
          document.getElementById('roi-val-booking').innerText = bookingRate + '%';
          document.getElementById('roi-val-close').innerText = closeRate + '%';
          document.getElementById('roi-val-revenue').innerText = '$' + avgRevenue.toLocaleString();

          // Math Logic
          const closedJobs = leads * (bookingRate / 100) * (closeRate / 100);
          const monthlyRev = closedJobs * avgRevenue;
          const yearlyRev = monthlyRev * 12;
          const roiMult = monthlyRev > 0 ? Math.round(monthlyRev / RETAINER) : 0;

          // Buyback Calculation (Assumes 1 job takes ~10 hours [600 mins] to fulfill and has a 25% margin)
          const profitPerJob = avgRevenue * 0.25;
          let buybackText = 'N/A';
          if (profitPerJob > 0) {
            const fractionOfJobNeeded = RETAINER / profitPerJob;
            const minutesNeeded = Math.round(fractionOfJobNeeded * 600); // 600 minutes = 10 hrs baseline
            if (minutesNeeded < 60) {
              buybackText = `~${minutesNeeded} minutes`;
            } else {
              buybackText = `~${(minutesNeeded / 60).toFixed(1)} hours`;
            }
          }

          // Update Output DOM
          outMonthly.innerText = '+$' + monthlyRev.toLocaleString('en-US', {maximumFractionDigits: 0});
          outJobs.innerText = closedJobs.toFixed(1) + (closedJobs === 1 ? ' closed job' : ' closed jobs');
          outYearly.innerText = '+$' + yearlyRev.toLocaleString('en-US', {maximumFractionDigits: 0});
          outReturn.innerText = roiMult + 'x';
          outBuyback.innerText = buybackText;

          // Update Visual Tracks
          updateSliderTrack(leadsInput);
          updateSliderTrack(bookingInput);
          updateSliderTrack(closeInput);
          updateSliderTrack(revenueInput);
        }

        // Add Listeners
        [leadsInput, bookingInput, closeInput, revenueInput].forEach(input => {
          if(input) {
            input.addEventListener('input', calculateROI);
          }
        });

        // Initial Calculation to set tracks and default values
        if(leadsInput) calculateROI();
      }

      // Initialize Calculator
      initROICalculator();

    </script>
  </body>
</html>