Cybersecurity Hero with Radar UI Dashboard

<style>
  /* Radar Specifics */
  .perspective-1000 {
    perspective: 1000px;
  }

  /* Concentric filled circles pulsing + fading out */
  @keyframes centerCirclePulse {
    0% {
      opacity: 0;
      transform: scale(0.4);
    }

    10% {
      opacity: 0.9;
      transform: scale(1);
    }

    40% {
      opacity: 0.9;
      transform: scale(1.02);
    }

    60% {
      opacity: 0;
      transform: scale(1.2);
    }

    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }

  .center-circle {
    animation: centerCirclePulse 5s ease-out infinite;
  }

  .center-circle--2 {
    animation-delay: 0.12s;
  }

  .center-circle--3 {
    animation-delay: 0.24s;
  }

  /* Rays that appear after the circles fade */
  @keyframes centerRayX {

    0%,
    45% {
      opacity: 0;
      transform: scaleX(0);
    }

    60% {
      opacity: 1;
      transform: scaleX(1);
    }

    100% {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  @keyframes centerRayY {

    0%,
    45% {
      opacity: 0;
      transform: scaleY(0);
    }

    60% {
      opacity: 1;
      transform: scaleY(1);
    }

    100% {
      opacity: 1;
      transform: scaleY(1);
    }
  }

  .center-ray-horizontal {
    height: 1px;
    animation: centerRayX 5s ease-out infinite;
  }

  .center-ray-vertical {
    width: 1px;
    animation: centerRayY 5s ease-out infinite;
  }

  /* Origins so each ray “starts” from the icon center and grows out */
  .center-ray-left {
    transform-origin: right center;
  }

  .center-ray-right {
    transform-origin: left center;
  }

  .center-ray-top {
    transform-origin: center bottom;
  }

  .center-ray-bottom {
    transform-origin: center top;
  }

  /* ================= CUSTOM ANIMATIONS ================= */
  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes spin-reverse-slow {
    from {
      transform: rotate(360deg);
    }

    to {
      transform: rotate(0deg);
    }
  }

  @keyframes radar-scan {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes pulse-glow {

    0%,
    100% {
      opacity: 0.5;
      transform: scale(1);
    }

    50% {
      opacity: 1;
      transform: scale(1.05);
    }
  }

  /* Glass Dashboard Specifics */
  .glass-surface {
    background: rgba(10, 15, 30, 0.65);
    /* Dark semi-transparent base */
    backdrop-filter: blur(24px);
    /* Heavy blur for the "frosted" look */
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      /* Subtle border */
      0 25px 50px -12px rgba(0, 0, 0, 0.5);
    /* Depth shadow */
  }

  /* The glowing top border line */
  .glass-top-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0.8) 50%, transparent 100%);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.6);
    z-index: 10;
  }

  /* Radar Gradients */
  .radar-sweep {
    background: conic-gradient(from 180deg at 50% 50%,
        transparent 0deg,
        transparent 200deg,
        rgba(6, 182, 212, 0.05) 240deg,
        rgba(6, 182, 212, 0.4) 360deg);
  }

  .mask-radar-bottom {
    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 85%);
  }

  .text-gradient-cyan {
    background: linear-gradient(to right, #22d3ee, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
</style>



<!-- Hero Section -->
<section class="overflow-hidden min-h-[1100px] pt-32 pb-44 relative">

  <!-- RADAR BACKGROUND LAYER -->
  <!-- Positioned to be centered behind the UI, masked at bottom -->
  <div
    class="absolute top-0 left-1/2 -translate-x-1/2 w-[1100px] h-[1100px] z-0 pointer-events-none mask-radar-bottom select-none">

    <!-- Radar Container -->
    <div class="relative w-full h-full flex items-center justify-center">

      <!-- 1. The Sweep / Scanner -->
      <div class="absolute inset-0 w-full h-full rounded-full animate-[radar-scan_8s_linear_infinite]">
        <div class="radar-sweep w-full h-full rounded-full"></div>
        <!-- Leading edge glowing line -->
        <div
          class="absolute top-0 left-1/2 w-[2px] h-1/2 bg-gradient-to-b from-cyan-300 via-cyan-500 to-transparent origin-bottom -translate-x-1/2 shadow-[0_0_30px_rgba(34,211,238,1)]">
        </div>
      </div>

      <!-- 2. Outer Ring Structure (Static + Slow Spin) -->
      <!-- Outermost dashed ring -->
      <div
        class="absolute w-[98%] h-[98%] rounded-full border border-dashed border-cyan-500/10 opacity-30 animate-[spin-slow_120s_linear_infinite]">
      </div>

      <!-- Main Outer Circle -->
      <div class="absolute w-[80%] h-[80%] rounded-full border border-cyan-500/10 opacity-60"></div>

      <!-- Decorative Arc Slices (Wedge shapes) -->
      <svg class="absolute w-[80%] h-[80%] animate-[spin-reverse-slow_60s_linear_infinite]" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="49" fill="none" stroke="rgba(34,211,238,0.1)" stroke-width="0.2"
          stroke-dasharray="20 40"></circle>
      </svg>

      <!-- 3. Inner Rings (Close to outer ring as requested) -->
      <div class="absolute w-[72%] h-[72%] rounded-full border border-cyan-500/5"></div>

      <!-- 4. Grid Lines -->
      <div class="absolute w-full h-full opacity-10">
        <div class="absolute top-0 bottom-0 left-1/2 w-px bg-cyan-400"></div>
        <div class="absolute left-0 right-0 top-1/2 h-px bg-cyan-400"></div>
        <div class="absolute top-[14.6%] left-[14.6%] w-[70.8%] h-[70.8%] border border-cyan-400 rounded-full"></div>
      </div>

      <!-- 5. Central Glowing Core (Aligns just above dashboard) -->
      <div
        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[200px] h-[200px] flex items-center justify-center">
        <div class="absolute inset-0 bg-cyan-500/10 blur-xl rounded-full animate-pulse"></div>
        <div class="w-[60%] h-[60%] border border-cyan-400/30 rounded-full flex items-center justify-center">
          <div class="w-2 h-2 bg-cyan-300 rounded-full shadow-[0_0_10px_#22d3ee]"></div>
        </div>
      </div>

      <!-- Floating Data Points on Radar -->
      <div
        class="absolute top-[20%] left-[75%] w-32 h-8 flex items-center gap-2 text-cyan-500/50 text-[10px] font-mono animate-pulse">
        <div class="w-1.5 h-1.5 bg-cyan-500 rounded-full"></div> TARGET_LOCKED
      </div>
      <div
        class="absolute bottom-[40%] left-[25%] w-32 h-8 flex items-center gap-2 text-blue-500/50 text-[10px] font-mono animate-pulse delay-700">
        <div class="w-1.5 h-1.5 bg-blue-500 rounded-full"></div> SCANNING...
      </div>
    </div>
  </div>

  <!-- HERO CONTENT -->
  <div class="flex flex-col z-10 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative items-center"
    style="mask-image: linear-gradient(180deg, transparent, black 0%, black 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 70%, transparent);">

    <!-- Text Content (Floating above dashboard) -->
    <div class="text-center max-w-3xl mx-auto mb-16 pt-10">
      <div
        class="inline-flex items-center gap-2 rounded-full border border-cyan-500/20 bg-cyan-950/20 px-4 py-1.5 mb-8 backdrop-blur-md shadow-[0_0_20px_rgba(34,211,238,0.1)]">
        <div class="h-1.5 w-1.5 animate-pulse bg-cyan-400 rounded-full"></div>
        <span class="text-[10px] font-semibold tracking-widest uppercase text-cyan-300 font-jakarta">
                Next Gen Defense
              </span>
      </div>

      <h1 class="text-5xl md:text-7xl font-medium tracking-tight text-white mb-6 leading-[1.1]">
        Security at the
        <span class="text-gradient-cyan relative inline-block">
                speed of code
                <!-- Glitch decorative underline -->
                <svg class="absolute w-full h-2 bottom-0 left-0 text-cyan-500/30" viewBox="0 0 100 10" preserveAspectRatio="none">
                    <path d="M0 5 Q 50 10 100 5" fill="transparent" stroke="currentColor" stroke-width="1" class=""></path>
                </svg>
              </span>
      </h1>

      <p class="text-lg text-slate-400 font-light max-w-xl mx-auto leading-relaxed">
        Unified security platform for modern engineering teams. Monitor infrastructure drift and detect threats in
        real-time.
      </p>
    </div>

    <!-- GLASS DASHBOARD INTERFACE -->
    <!-- Positioned to overlap bottom half of radar -->
    <div class="w-full max-w-6xl z-20 mt-[-20px] relative perspective-1000">

      <!-- Dashboard Container -->
      <div
        class="glass-surface border-x overflow-hidden transition-all duration-500 animate-enter [--fx-filter:blur(10px)_liquid-glass(5,10)_saturate(1.25)_noise(0.5,1,0)] bg-zinc-900/95 border-white/20 rounded-t-2xl border-b relative backdrop-blur-md">

        <!-- Top Glow Border -->
        <div class="glass-top-border"></div>

        <!-- Subtle internal noise/texture -->
        <div
          class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-[0.03] mix-blend-overlay pointer-events-none">
        </div>

        <!-- Header Bar -->
        <div
          class="z-20 flex bg-black/20 border-white/5 border-b pt-4 pr-6 pb-4 pl-6 relative items-center justify-between">
          <div class="flex items-center gap-4">
            <!-- MacOS style dots -->
            <div class="flex gap-2">
              <div class="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/40"></div>
              <div class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/40"></div>
              <div class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/40"></div>
            </div>
            <div class="h-4 w-px bg-white/10 mx-2"></div>
            <div class="flex items-center gap-2 text-xs font-mono text-cyan-400">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-shield-check">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path>
                <path d="m9 12 2 2 4-4" class=""></path>
              </svg>
              <span>SYS.MONITORING</span>
              <span class="text-slate-600">/</span>
              <span class="text-slate-300">MAIN_CLUSTER</span>
            </div>
          </div>
          <div class="flex items-center gap-4">
            <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-950/40 border border-cyan-500/20">
              <div class="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></div>
              <span class="text-[10px] font-semibold text-cyan-300 tracking-wide">LIVE FEED</span>
            </div>
          </div>
        </div>

        <!-- Dashboard Content -->
        <div class="z-20 flex h-[500px] relative">

          <!-- Sidebar -->
          <div
            class="flex flex-col gap-6 bg-black/10 w-16 border-white/5 border-r pt-6 pb-6 gap-x-6 gap-y-6 items-center">
            <div class="p-2.5 rounded-xl bg-cyan-500/10 text-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.2)]">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-activity">
                <path
                  d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
                  class=""></path>
              </svg>
            </div>
            <div class="p-2.5 rounded-xl text-slate-500 hover:text-slate-200 hover:bg-white/5 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-server">
                <rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
                <rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
                <line x1="6" x2="6.01" y1="6" y2="6"></line>
                <line x1="6" x2="6.01" y1="18" y2="18"></line>
              </svg>
            </div>
            <div class="p-2.5 rounded-xl text-slate-500 hover:text-slate-200 hover:bg-white/5 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-globe">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
                <path d="M2 12h20"></path>
              </svg>
            </div>
            <div
              class="mt-auto p-2.5 rounded-xl text-slate-500 hover:text-slate-200 hover:bg-white/5 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-settings-2">
                <path d="M20 7h-9"></path>
                <path d="M14 17H5"></path>
                <circle cx="17" cy="17" r="3"></circle>
                <circle cx="7" cy="7" r="3"></circle>
              </svg>
            </div>
          </div>

          <!-- Main Grid -->
          <div class="flex-1 grid grid-cols-12 gap-6 overflow-hidden pt-6 pr-6 pb-6 pl-6 gap-x-6 gap-y-6">

            <!-- Stats Row -->
            <div class="col-span-12 grid grid-cols-3 gap-6 h-32">
              <!-- Stat 1 -->
              <div
                class="rounded-xl border border-white/5 bg-white/[0.03] p-5 flex flex-col justify-between group hover:border-cyan-500/30 transition-all hover:bg-cyan-500/[0.05]">
                <div class="flex justify-between items-start">
                  <div class="">
                    <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Total Threats</p>
                    <h3 class="text-2xl font-bold text-white tracking-tight">8,942</h3>
                  </div>
                  <div class="text-cyan-400 bg-cyan-500/10 rounded-md pt-1.5 pr-1.5 pb-1.5 pl-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="lucide lucide-shield-alert">
                      <path
                        d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
                      </path>
                      <path d="M12 8v4"></path>
                      <path d="M12 16h.01"></path>
                    </svg>
                  </div>
                </div>
                <div class="w-full h-1 bg-white/10 rounded-full overflow-hidden mt-2">
                  <div class="h-full w-[70%] bg-cyan-400 rounded-full shadow-[0_0_10px_rgba(34,211,238,0.5)]"></div>
                </div>
              </div>

              <!-- Stat 2 -->
              <div
                class="rounded-xl border border-white/5 bg-white/[0.03] p-5 flex flex-col justify-between group hover:border-cyan-500/30 transition-all hover:bg-cyan-500/[0.05]">
                <div class="flex justify-between items-start">
                  <div class="">
                    <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Sys Latency</p>
                    <h3 class="text-2xl font-bold text-white tracking-tight">
                      12<span class="text-sm font-medium text-slate-500 ml-1">ms</span></h3>
                  </div>
                  <div class="text-cyan-400 bg-cyan-500/10 rounded-md pt-1.5 pr-1.5 pb-1.5 pl-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="lucide lucide-zap">
                      <path
                        d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
                      </path>
                    </svg>
                  </div>
                </div>
                <div class="flex items-center gap-1.5 text-[10px] text-emerald-400 mt-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="lucide lucide-trend-down">
                    <polyline points="22 17 13.5 8.5 8.5 13.5 2 7"></polyline>
                    <polyline points="16 17 22 17 22 11"></polyline>
                  </svg>
                  -4.2% vs last hour
                </div>
              </div>

              <!-- Stat 3 -->
              <div
                class="rounded-xl border border-white/5 bg-white/[0.03] p-5 flex flex-col justify-between group hover:border-cyan-500/30 transition-all hover:bg-cyan-500/[0.05]">
                <div class="flex justify-between items-start">
                  <div class="">
                    <p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Uptime</p>
                    <h3 class="text-2xl font-bold text-white tracking-tight">99.99%</h3>
                  </div>
                  <div class="text-cyan-400 bg-cyan-500/10 rounded-md pt-1.5 pr-1.5 pb-1.5 pl-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="lucide lucide-clock">
                      <circle cx="12" cy="12" r="10"></circle>
                      <polyline points="12 6 12 12 16 14"></polyline>
                    </svg>
                  </div>
                </div>
                <div class="flex gap-1 mt-2">
                  <div class="h-1 flex-1 bg-emerald-500 rounded-full opacity-100 shadow-[0_0_5px_#10b981]"></div>
                  <div class="h-1 flex-1 bg-emerald-500 rounded-full opacity-100 shadow-[0_0_5px_#10b981]"></div>
                  <div class="h-1 flex-1 bg-emerald-500 rounded-full opacity-100 shadow-[0_0_5px_#10b981]"></div>
                  <div class="h-1 flex-1 bg-emerald-500 rounded-full opacity-50"></div>
                </div>
              </div>
            </div>

            <!-- Main Chart Area -->
            <div class="col-span-8 bg-white/[0.02] border border-white/5 rounded-xl p-6 relative">
              <div class="flex items-center justify-between mb-4">
                <h4 class="text-xs font-semibold text-white">Network Traffic</h4>
                <div class="flex gap-2">
                  <button class="text-[10px] px-2 py-0.5 rounded bg-white/10 text-white border border-white/10">1H</button>
                  <button class="text-[10px] px-2 py-0.5 rounded text-slate-500 hover:text-white transition-colors">24H</button>
                </div>
              </div>
              <div class="relative w-full h-[200px]">
                <canvas id="mainChart" width="1268" height="400"
                  style="display: block; box-sizing: border-box; height: 200px; width: 634px;" class=""></canvas>
              </div>
            </div>

            <!-- Logs/Events -->
            <div class="col-span-4 bg-white/[0.02] border border-white/5 rounded-xl flex flex-col">
              <div class="p-4 border-b border-white/5 flex justify-between items-center">
                <h4 class="text-xs font-semibold text-white">Event Log</h4>
                <span class="relative flex h-2 w-2">
                              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
                </span>
              </div>
              <div class="flex-1 overflow-y-hidden p-3 space-y-2 font-mono text-[10px]">
                <div class="flex gap-2 items-center text-slate-400 p-1.5 hover:bg-white/5 rounded cursor-pointer group">
                  <span class="text-slate-600">10:42:01</span>
                  <span class="text-cyan-400">INFO</span>
                  <span class="group-hover:text-white transition-colors">Backup initialized</span>
                </div>
                <div class="flex gap-2 items-center text-slate-400 p-1.5 hover:bg-white/5 rounded cursor-pointer group">
                  <span class="text-slate-600">10:42:05</span>
                  <span class="text-emerald-400">SUCCESS</span>
                  <span class="group-hover:text-white transition-colors">Node synced</span>
                </div>
                <div class="flex gap-2 items-center text-slate-400 p-1.5 hover:bg-white/5 rounded cursor-pointer group">
                  <span class="text-slate-600">10:42:12</span>
                  <span class="text-red-400">ALERT</span>
                  <span class="group-hover:text-white transition-colors">Port 443 spike</span>
                </div>
                <div class="flex gap-2 items-center text-slate-400 p-1.5 hover:bg-white/5 rounded cursor-pointer group">
                  <span class="text-slate-600">10:42:18</span>
                  <span class="text-cyan-400">INFO</span>
                  <span class="group-hover:text-white transition-colors">Heal check passed</span>
                </div>
                <div
                  class="flex gap-2 items-center text-slate-400 p-1.5 hover:bg-white/5 rounded cursor-pointer group opacity-50">
                  <span class="text-slate-600">10:42:22</span>
                  <span class="text-cyan-400">INFO</span>
                  <span class="group-hover:text-white transition-colors">User authenticated</span>
                </div>
              </div>
            </div>

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

      <!-- Bottom Reflection/Glow under dashboard -->
      <div class="absolute -bottom-10 left-0 right-0 h-20 bg-cyan-500/10 blur-[50px] pointer-events-none z-0"></div>
    </div>
  </div>
  <!-- Bottom dark shade -->
  <div
    class="pointer-events-none absolute inset-x-0 bottom-0 h-64 bg-gradient-to-b from-transparent via-black/70 to-black z-[15]">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/chart.js" class=""></script>
  <script class="">
    document.addEventListener('DOMContentLoaded', () => {
                lucide.createIcons();
                
                const ctx = document.getElementById('mainChart').getContext('2d');
                const gradient = ctx.createLinearGradient(0, 0, 0, 200);
                gradient.addColorStop(0, 'rgba(34, 211, 238, 0.4)');
                gradient.addColorStop(1, 'rgba(34, 211, 238, 0)');

                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'],
                        datasets: [{
                            label: 'Requests',
                            data: [45, 52, 49, 62, 58, 65, 75, 68, 72, 85, 80, 92],
                            borderColor: '#22d3ee',
                            backgroundColor: gradient,
                            borderWidth: 2,
                            tension: 0.4,
                            fill: true,
                            pointRadius: 0,
                            pointHoverRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { display: false } },
                        scales: {
                            x: { display: false },
                            y: { display: false }
                        },
                        animation: { duration: 2000 }
                    }
                });
            });
  </script>
</section>