Spaces:

MultiTrickFox
/

aperture-ai-swarm-portal

Running

App Files Files Community

MultiTrickFox commited on Nov 6

Commit

366544a

verified ·

1 Parent(s): 4d452b7

Please pimp my website visually

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +1138 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Aperture Ai Swarm Portal
-emoji: 🐢
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Aperture AI Swarm Portal ✨
+colorFrom: gray
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,1138 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="dark" style="scroll-behavior: smooth;">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>Aperture - Predictive Intelligence through AI Agent Swarms</title>
+   <script src="https://cdn.tailwindcss.com"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/TextPlugin.min.js"></script>
+   <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=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@300;400&display=swap" rel="stylesheet">
+   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+   <style>
+      /* Enhanced cosmic background with animated particles */
+      html {
+         background-color: #0a0a15;
+         background-image:
+            radial-gradient(at 20% 80%, hsla(230, 80%, 60%, 0.15) 0px, transparent 50%),
+            radial-gradient(at 80% 20%, hsla(300, 80%, 60%, 0.15) 0px, transparent 50%),
+            linear-gradient(to bottom, #0a0a15 0%, #1a1030 100%);
+         overflow-x: hidden;
+      }
+      /* Cosmic particle animation */
+      body::before {
+         content: '';
+         position: fixed;
+         top: 0;
+         left: 0;
+         width: 100%;
+         height: 100%;
+         background:
+            radial-gradient(ellipse at top, rgba(100, 100, 255, 0.1) 0%, transparent 70%),
+            radial-gradient(ellipse at bottom, rgba(255, 100, 255, 0.1) 0%, transparent 70%);
+         z-index: -1;
+         animation: cosmicPulse 20s infinite alternate;
+      }
+      @keyframes cosmicPulse {
+         0% { opacity: 0.3; }
+         50% { opacity: 0.7; }
+         100% { opacity: 0.3; }
+      }
+/* Custom style for Google Icons */
+      .material-symbols-outlined {
+         font-variation-settings:
+            'FILL' 0,
+            'wght' 300,
+            'GRAD' 0,
+            'opsz' 24
+      }
+      /* MODIFIED: Scrollbar Styles for auto-hide on HTML element */
+      html::-webkit-scrollbar {
+         width: 12px;
+         /* width of the entire scrollbar */
+      }
+      html::-webkit-scrollbar-track {
+         background: transparent;
+         /* Hide track */
+      }
+      html::-webkit-scrollbar-thumb {
+         background-color: transparent;
+         /* Hide thumb by default */
+         border-radius: 10px;
+         /* roundness of the scroll thumb */
+         border: 2px solid transparent;
+         /* creates padding around thumb */
+         transition: background-color 0.3s ease, border-color 0.3s ease;
+         /* Smooth transition */
+      }
+      /* Show scrollbar on hover over the html (page) */
+      html:hover::-webkit-scrollbar-thumb {
+         background-color: rgba(150, 150, 150, 0.2);
+         border-color: rgba(255, 255, 255, 0.1);
+      }
+      html:hover::-webkit-scrollbar-thumb:hover {
+         background-color: rgba(180, 180, 180, 0.3);
+      }
+      /* For Firefox */
+      html {
+         scrollbar-width: thin;
+         scrollbar-color: transparent transparent;
+         /* Hide by default */
+         transition: scrollbar-color 0.3s ease;
+      }
+      /* Show on hover for Firefox */
+      html:hover {
+         /* MODIFIED: Set track to transparent */
+         scrollbar-color: rgba(150, 150, 150, 0.2) transparent;
+      }
+      /* ADDED: Styles for custom horizontal scrollbar */
+      .custom-scrollbar-x::-webkit-scrollbar {
+         height: 12px;
+         /* Height for horizontal scrollbar */
+      }
+      .custom-scrollbar-x::-webkit-scrollbar-track {
+         background: transparent;
+      }
+      .custom-scrollbar-x::-webkit-scrollbar-thumb {
+         background-color: transparent;
+         border-radius: 10px;
+         border: 2px solid transparent;
+         transition: background-color 0.3s ease, border-color 0.3s ease;
+      }
+      .custom-scrollbar-x:hover::-webkit-scrollbar-thumb {
+         background-color: rgba(150, 150, 150, 0.2);
+         border-color: rgba(255, 255, 255, 0.1);
+      }
+      .custom-scrollbar-x:hover::-webkit-scrollbar-thumb:hover {
+         background-color: rgba(180, 180, 180, 0.3);
+      }
+      /* Firefox X scrollbar */
+      .custom-scrollbar-x {
+         scrollbar-width: thin;
+         scrollbar-color: transparent transparent;
+         transition: scrollbar-color 0.3s ease;
+      }
+      .custom-scrollbar-x:hover {
+         /* MODIFIED: Set track to transparent */
+         scrollbar-color: rgba(150, 150, 150, 0.2) transparent;
+      }
+      .capabilities-container {
+         position: relative;
+         width: 100%;
+         max-width: 900px;
+         /* From Aura */
+         height: 720px;
+         /* Calculated height for new layout */
+         margin: 0 auto;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         margin-top: 40px;
+         /* Added margin for spacing */
+      }
+      .aperture-core {
+         position: absolute;
+         width: 150px;
+         height: 150px;
+         border-radius: 50%;
+         /* Re-using aperture's glass style */
+         background: rgba(255, 255, 255, 0.05);
+         backdrop-filter: blur(10px);
+         border: 1px solid rgba(255, 255, 255, 0.1);
+         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         /* Initially hidden */
+         opacity: 0;
+         transform: scale(0.5);
+      }
+      .animation-box {
+         /* Aperture's glass styles are applied via Tailwind classes on the element */
+         /* Positioning styles from Aura, adapted for Aperture's content */
+         position: absolute;
+         width: 260px;
+         /* Fixed width for animation */
+         height: 340px;
+         /* Fixed height for animation */
+         /* Initial state for animation */
+         top: 50%;
+         left: 50%;
+         opacity: 0;
+         transform: translate(-50%, -50%) scale(0.5);
+         /* Copied from Aura */
+         transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+         transform-style: preserve-3d;
+      }
+      /* REMOVED: All .card-hover-effect styles */
+      /* MODIFIED: New Card Hover Effect */
+      .glass-card {
+         position: relative;
+         background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.03) 100%);
+         backdrop-filter: blur(12px);
+         border: 1px solid rgba(255, 255, 255, 0.15);
+         box-shadow:
+            0 0 15px rgba(100, 100, 255, 0.1),
+            0 0 30px rgba(0, 0, 0, 0.3);
+         transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+         overflow: hidden;
+         /* Ensure pseudo-elements don't bleed */
+      }
+      .glass-card::before,
+      .glass-card::after {
+         content: '';
+         position: absolute;
+         left: 0;
+         width: 100%;
+         height: 2px;
+         /* Thickness of the flare */
+         /* MODIFIED: White gradient */
+         background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
+         opacity: 0;
+         /* MODIFICATION: Added 'transform' to the transition for smooth animation in/out */
+         transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+         z-index: 10;
+      }
+      .glass-card::before {
+         top: 0;
+         transform: translateY(-100%);
+         /* Start hidden above */
+      }
+      .glass-card::after {
+         bottom: 0;
+         transform: translateY(100%);
+         /* Start hidden below */
+      }
+      .glass-card:hover {
+         transform: translateY(-5px) scale(1.02);
+         border-color: rgba(100, 200, 255, 0.4);
+         box-shadow:
+            0 5px 20px rgba(100, 100, 255, 0.2),
+            0 10px 40px rgba(0, 0, 0, 0.4);
+         background: linear-gradient(135deg, rgba(100, 200, 255, 0.08) 0%, rgba(255, 100, 255, 0.05) 100%);
+}
+      .glass-card:hover::before,
+      .glass-card:hover::after {
+         opacity: 1;
+         transform: translateY(0);
+         background: linear-gradient(90deg,
+            rgba(255,255,255,0) 0%,
+            rgba(100,200,255,0.8) 50%,
+            rgba(255,100,255,0.8) 100%);
+      }
+/* --- ADDED: Faded grid background for content card sections --- */
+      .grid-fade-bg {
+         position: relative;
+      }
+      .grid-fade-bg::before {
+         content: '';
+         position: absolute;
+         inset: 0;
+         /* Create a subtle grid */
+         background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+                           linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+         background-size: 40px 40px;
+         /* Fade it out from the center */
+         mask-image: radial-gradient(ellipse at center, white 40%, transparent 90%);
+         -webkit-mask-image: radial-gradient(ellipse at center, white 40%, transparent 90%);
+         /* MODIFIED: Removed pan-grid animation */
+      }
+      /* --- ADDED: Faded grid background for header section --- */
+      header::before {
+         content: '';
+         position: absolute;
+         inset: 0;
+         /* Fainter grid */
+         background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+                           linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+         background-size: 50px 50px; /* Different size */
+         /* Softer fade */
+         mask-image: radial-gradient(ellipse at center, white 30%, transparent 80%);
+         -webkit-mask-image: radial-gradient(ellipse at center, white 30%, transparent 80%);
+         z-index: -1; /* Ensure it's behind content */
+         /* MODIFIED: Changed to pan-grid animation */
+         animation: pan-grid 20s infinite linear; /* Adjust timing as needed */
+      }
+      /* MODIFIED: Replaced wave-grid with pan-grid */
+      @keyframes pan-grid {
+         0% {
+            background-position: 0px 0px;
+         }
+         100% {
+            /* Common multiple of 40px and 50px grid sizes for a seamless loop */
+            background-position: 200px 200px;
+         }
+      }
+      /* --- ADDED: Nav Link Underline Effect --- */
+      .nav-link {
+         position: relative;
+      }
+      .nav-link::after {
+         content: '';
+         position: absolute;
+         width: 100%;
+         transform: scaleX(0);
+         height: 1px;
+         /* 1px underline */
+         bottom: -4px;
+         /* 4px space below text */
+         left: 0;
+         background-color: #ffffff;
+         /* White underline */
+         transform-origin: bottom left;
+         /* Animate from the left */
+         transition: transform 0.3s ease-out;
+      }
+      .nav-link:hover::after {
+         transform: scaleX(1);
+         transform-origin: bottom left;
+      }
+      /* --- ADDED: Button "Loading" (Swipe Fill) Effect --- */
+      .btn-swipe-fill {
+         position: relative;
+         overflow: hidden;
+         z-index: 1;
+         border: 1px solid rgba(100, 200, 255, 0.3);
+         transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+      .btn-swipe-fill::before {
+         content: '';
+         position: absolute;
+         top: 0;
+         left: -100%;
+         width: 100%;
+         height: 100%;
+         background: linear-gradient(90deg,
+            transparent 0%,
+            rgba(100, 200, 255, 0.3) 50%,
+            rgba(255, 100, 255, 0.3) 100%);
+         transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+         z-index: -1;
+      }
+      .btn-swipe-fill:hover {
+         box-shadow: 0 0 20px rgba(100, 200, 255, 0.3);
+         transform: translateY(-2px);
+      }
+      .btn-swipe-fill:hover::before {
+         left: 100%;
+      }
+      /* Neon text effect */
+      .neon-text {
+         text-shadow:
+            0 0 5px rgba(100, 200, 255, 0.5),
+            0 0 10px rgba(100, 200, 255, 0.3),
+            0 0 15px rgba(100, 200, 255, 0.2);
+      }
+      /* Floating animation */
+      @keyframes float {
+         0% { transform: translateY(0px); }
+         50% { transform: translateY(-10px); }
+         100% { transform: translateY(0px); }
+      }
+      .floating {
+         animation: float 6s ease-in-out infinite;
+      }
+</style>
+   <script>
+      // Custom Tailwind config to apply the mono sans font
+      tailwind.config = {
+         theme: {
+            extend: {
+               fontFamily: {
+                  // --- MODIFIED: Set sans to Grotesk, mono to Space Mono ---
+                  sans: ['"Space Grotesk"', 'sans-serif'],
+                  mono: ['"Space Mono"', 'monospace'],
+               },
+               animation: {
+                  flare: 'flare 3s ease-in-out infinite',
+               },
+               keyframes: {
+                  flare: {
+                     '0%, 100%': {
+                        // Using rgba for blue-500 with 70% opacity
+                        filter: 'drop-shadow(0 0 10px rgba(59, 130, 246, 0.7))'
+                     },
+                     '50%': {
+                        // Using rgba for blue-400 with 100% opacity and more spread
+                        filter: 'drop-shadow(0 0 18px rgba(96, 165, 250, 1))'
+                     },
+                  }
+               }
+            },
+         },
+      }
+   </script>
+</head>
+<body class="text-gray-200 font-sans antialiased">
+   <header class="fixed top-0 left-0 right-0 z-50 p-4 transition-all duration-300">
+      <div class="container mx-auto max-w-6xl">
+         <nav class="glass-card rounded-2xl px-6 py-3 flex justify-between items-center">
+            <a href="#" class="flex items-center space-x-3">
+               <img src="icon.svg" alt="Aperture Icon" class="w-8 h-8 filter brightness-0 invert" />
+               <span class="font-sans font-semibold text-xl text-white">Aperture</span>
+            </a>
+            <div class="hidden md:flex items-center space-x-8 font-mono">
+               <a href="#research-section" class="nav-link text-sm text-gray-300 hover:text-white transition-colors">Research</a>
+               <a href="#data-section" class="nav-link text-sm text-gray-300 hover:text-white transition-colors">Data</a>
+               <a href="#core-section" class="nav-link text-sm text-gray-300 hover:text-white transition-colors">Core</a>
+               <a href="#cta-section" class="nav-link text-sm text-gray-300 hover:text-white transition-colors">Insights</a>
+            </div>
+            <a href="#" class="btn-swipe-fill relative overflow-hidden hidden md:block bg-white/10 text-white font-mono font-medium text-sm px-5 py-2 rounded-full hover:text-[#050508] transition-all duration-400 ease-in-out">
+               Launch Terminal
+            </a>
+            <div class="md:hidden">
+               <span class="material-symbols-outlined text-gray-200 text-3xl">menu</span>
+            </div>
+         </nav>
+      </div>
+   </header>
+   <div class="container mx-auto max-w-6xl px-4 py-16 sm:py-24">
+      <header class="h-[90vh] w-3/4 mx-auto flex flex-col justify-center items-center text-center pb-36 relative">
+         <div class="relative">
+            <img src="icon.svg" alt="Aperture Icon" class="w-24 h-24 sm:w-36 sm:h-36 mb-6 animate-flare floating" />
+            <div class="absolute inset-0 rounded-full bg-blue-500/20 blur-xl -z-10"></div>
+         </div>
+         <h1 class="text-6xl sm:text-7xl font-extrabold text-white mb-4 neon-text">
+            Aperture
+         </h1>
+         <p class="text-xl sm:text-2xl text-gray-300 font-mono font-light bg-gradient-to-r from-blue-300 to-purple-300 bg-clip-text text-transparent">
+            "Next-Gen Economic AI Agents"
+         </p>
+         <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a15] to-transparent"></div>
+      </header>
+      <section id="research-section" class="mb-24 md:flex md:flex-row md:items-stretch md:gap-12 relative">
+         <div class="absolute -top-20 -left-20 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl -z-10"></div>
+         <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl -z-10"></div>
+<div class="md:w-1/2 md:flex md:flex-col section-intro">
+            <div class="md:flex-1 md:flex md:items-end md:justify-center pb-3">
+               <h2 class="text-4xl font-bold text-center text-white md:text-center">Macro & Micro Research<br>Customized For You</h2>
+            </div>
+            <div class="md:flex-1 md:flex md:items-start md:justify-center pt-3">
+               <p class="text-lg text-gray-400 text-center md:text-center mb-12 md:mb-0 font-mono font-light">Our agent swarms deliver predictive intelligence tailored to your specific areas of interest, from ahead-of-day briefs to long-term scenario branching.</p>
+            </div>
+         </div>
+         <div class="md:w-1/2 grid-fade-bg">
+            <div class="grid grid-cols-2 gap-6 mb-6">
+               <div class="glass-card rounded-2xl p-6 flex flex-col items-center text-center">
+                  <span class="material-symbols-outlined text-5xl text-blue-300 mb-4">event_note</span>
+                  <h3 class="text-base md:text-xl font-semibold text-white mb-3">Ahead-of-Day Plans</h3>
+                  <p class="text-gray-300 text-xs md:text-sm font-mono font-light">Get a full predictive brief before premarket opens.</p>
+               </div>
+               <div class="glass-card rounded-2xl p-6 flex flex-col items-center text-center">
+                  <span class="material-symbols-outlined text-5xl text-blue-300 mb-4">assessment</span>
+                  <h3 class="text-base md:text-xl font-semibold text-white mb-3">Weekly / Monthly Scenarios</h3>
+                  <p class="text-gray-300 text-xs md:text-sm font-mono font-light">Forward insights into your personal tracked areas.</p>
+               </div>
+            </div>
+            <div class="grid grid-cols-3 gap-6">
+               <div class="glass-card rounded-2xl p-6 flex flex-col items-center text-center">
+                  <span class="material-symbols-outlined text-5xl text-blue-300 mb-4">psychology</span>
+                  <h3 class="text-base md:text-xl font-semibold text-white mb-3">Causal Reasoning</h3>
+                  <p class="text-gray-300 text-xs md:text-sm font-mono font-light">Predictions with clear, explainable causal links and forward analysis.</p>
+               </div>
+               <div class="glass-card rounded-2xl p-6 flex flex-col items-center text-center">
+                  <span class="material-symbols-outlined text-5xl text-blue-300 mb-4">account_tree</span>
+                  <h3 class="text-base md:text-xl font-semibold text-white mb-3">Scenario Trees</h3>
+                  <p class="text-gray-300 text-xs md:text-sm font-mono font-light">Short, intermediate, & long term outlook with branching predictions.</p>
+               </div>
+               <div class="glass-card rounded-2xl p-6 flex flex-col items-center text-center">
+                  <span class="material-symbols-outlined text-5xl text-blue-300 mb-4">radar</span>
+                  <h3 class="text-base md:text-xl font-semibold text-white mb-3">Micro & Macro Signals</h3>
+                  <p class="text-gray-300 text-xs md:text-sm font-mono font-light">Realtime agent analysis of micro and macro signals as they happen.</p>
+               </div>
+            </div>
+         </div>
+      </section>
+      <section id="data-section" class="mb-24 md:flex md:flex-row md:items-stretch md:gap-12 relative">
+         <div class="absolute top-1/2 left-0 w-32 h-32 bg-blue-500/5 rounded-full blur-xl -z-10 animate-pulse"></div>
+         <div class="absolute bottom-0 right-0 w-48 h-48 bg-purple-500/5 rounded-full blur-xl -z-10 animate-pulse delay-300"></div>
+<div class="md:w-1/2 md:order-last md:flex md:flex-col section-intro">
+            <div class="md:flex-1 md:flex md:items-end md:justify-center pb-3">
+               <h2 class="text-4xl font-bold text-center text-white md:text-center">Extensive Real-Time Data</h2>
+            </div>
+            <div class="md:flex-1 md:flex md:items-start md:justify-center pt-3">
+               <p class="text-lg text-gray-400 text-center md:text-center mb-12 md:mb-0 font-mono font-light">Aperture's agents continuously analyze a vast, real-time data ecosystem, synthesizing signals from financial markets, economic reports, and alternative sources.</p>
+            </div>
+         </div>
+         <div class="md:w-1/2 grid-fade-bg">
+            <div class="grid grid-cols-2 gap-6">
+               <div class="glass-card rounded-2xl p-6">
+                  <div class="flex items-center gap-3 mb-4">
+                     <span class="material-symbols-outlined text-3xl text-blue-300" title="US Bonds">account_balance</span>
+                     <span class="material-symbols-outlined text-3xl text-blue-300" title="US Stocks">trending_up</span>
+                     <span class="material-symbols-outlined text-3xl text-blue-300" title="Gold">paid</span>
+                     <span class="material-symbols-outlined text-3xl text-blue-300" title="Crypto">currency_bitcoin</span>
+                  </div>
+                  <h3 class="text-base md:text-xl font-semibold text-white mb-3">US Bonds, US Stocks, Gold, Crypto</h3>
+                  <ul class="list-disc list-inside text-gray-300 space-y-1 text-xs md:text-sm font-mono font-light">
+                     News, Prices, Events, Earnings, Filings
+                  </ul>
+               </div>
+               <div class="glass-card rounded-2xl p-6">
+                  <div class="flex items-center gap-3 mb-4">
+                     <span class="material-symbols-outlined text-3xl text-blue-300" title="FED">monitoring</span>
+                     <span class="material-symbols-outlined text-3xl text-blue-300" title="BLS">work</span>
+                     <span class="material-symbols-outlined text-3xl text-blue-300" title="BEA">bar_chart</span>
+                  </div>
+                  <h3 class="text-base md:text-xl font-semibold text-white mb-3">Economy, Labor, Growth Signals</h3>
+                  <ul class="list-disc list-inside text-gray-300 space-y-1 text-xs md:text-sm font-mono font-light">
+                     FED,&nbsp;BEA,&nbsp;BLS, FRED, OECD
+                  </ul>
+               </div>
+               <div class="glass-card rounded-2xl p-6">
+                  <span class="material-symbols-outlined text-4xl text-blue-300 mb-4">groups_3</span>
+                  <h3 class="text-base md:text-xl font-semibold text-white mb-3">Institutional Positions & Orderflow</h3>
+                  <ul class="list-disc list-inside text-gray-300 space-y-1 text-xs md:text-sm font-mono font-light">
+                     Large Scale Positions, Real-Time Orderbook Tracking
+                  </ul>
+               </div>
+               <div class="glass-card rounded-2xl p-6">
+                  <span class="material-symbols-outlined text-4xl text-blue-300 mb-4">gavel</span>
+                  <h3 class="text-base md:text-xl font-semibold text-white mb-3">Congress, Insiders, Government</h3>
+                  <ul class="list-disc list-inside text-gray-300 space-y-1 text-xs md:text-sm font-mono font-light">
+                     Disclosed Trades, Contract Filings, Gov. Decisions
+                  </ul>
+               </div>
+            </div>
+         </div>
+      </section>
+      <section id="core-section" class="mb-24 md:flex md:flex-row md:items-stretch md:gap-12 relative">
+         <div class="absolute -top-10 left-1/4 w-40 h-40 bg-blue-500/10 rounded-full blur-2xl -z-10"></div>
+         <div class="absolute bottom-10 right-1/4 w-40 h-40 bg-purple-500/10 rounded-full blur-2xl -z-10"></div>
+<div class="md:w-1/2 md:flex md:flex-col section-intro">
+            <div class="md:flex-1 md:flex md:items-end md:justify-center pb-3">
+               <h2 class="text-4xl font-bold text-center text-white md:text-center">Multi-Agent AI Core</h2>
+            </div>
+            <div class="md:flex-1 md:flex md:items-start md:justify-center pt-3">
+               <p class="text-lg text-gray-400 text-center md:text-center mb-12 md:mb-0 font-mono font-light">The core is a multi-agent system designed for deep research, persistent memory, and swarm consensus, enabling autonomous analysis and continuous learning.</p>
+            </div>
+         </div>
+         <div class="md:w-1/2 grid-fade-bg">
+            <div class="grid grid-cols-2 gap-6">
+               <div class="glass-card rounded-2xl p-5 flex flex-col h-full">
+                  <div id="anim-improve" class="rounded-lg mb-4 w-full h-40 relative"></div>
+                  <h3 class="text-base md:text-xl font-semibold text-white">Record and Search<br>Persistent Memories</h3>
+                  <p class="text-gray-300 text-xs md:text-sm mt-2 flex-grow font-mono font-light">Agents build a persistent knowledge base from observations and research.</p>
+               </div>
+               <div class="glass-card rounded-2xl p-5 flex flex-col h-full">
+                  <div id="anim-connect" class="rounded-lg mb-4 w-full h-40 relative"></div>
+                  <h3 class="text-base md:text-xl font-semibold text-white">Deep Research<br>with Agent Threads</h3>
+                  <p class="text-gray-300 text-xs md:text-sm mt-2 flex-grow font-mono font-light">Delegate parallel tasks to specialized agents for comprehensive analysis.</p>
+               </div>
+               <div class="glass-card rounded-2xl p-5 flex flex-col h-full">
+                  <div id="anim-harmonize" class="rounded-lg mb-4 w-full h-40 relative"></div>
+                  <h3 class="text-base md:text-xl font-semibold text-white">Swarm Consesus<br>for Critical Decisions</h3>
+                  <p class="text-gray-300 text-xs md:text-sm mt-2 flex-grow font-mono font-light">Agents challenge, refine, and merge hypotheses to reach consensus.</p>
+               </div>
+               <div class="glass-card rounded-2xl p-5 flex flex-col h-full">
+                  <div id="anim-understand" class="rounded-lg mb-4 w-full h-40 relative"></div>
+                  <h3 class="text-base md:text-xl font-semibold text-white">Auto Improve from<br>Reasoning Traces</h3>
+                  <p class="text-gray-300 text-xs md:text-sm mt-2 flex-grow font-mono font-light">Continuously learn from historical outcomes and future projections.</p>
+               </div>
+            </div>
+         </div>
+      </section>
+      <section class="text-center mb-24 relative">
+         <div class="absolute inset-0 flex items-center justify-center -z-10">
+            <div class="w-64 h-64 bg-blue-500/5 rounded-full blur-3xl"></div>
+         </div>
+         <p class="text-lg text-gray-300 mb-3 font-mono font-light">Delivered via our:</p>
+         <h2 class="text-3xl font-bold text-white">
+            AI <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-purple-300">Terminal</span>
+            &nbsp;•&nbsp;
+            Rest <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-blue-300">API</span>
+            &nbsp;•&nbsp;
+            Telegram <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-purple-300">Agent</span>
+         </h2>
+      </section>
+      <section class="mb-24 relative">
+         <div class="glass-card rounded-2xl shadow-lg shadow-blue-500/10 overflow-hidden p-3">
+            <div class="bg-gradient-to-br from-gray-900/80 to-blue-900/20 rounded-lg w-full h-[400px] md:h-[600px] flex items-center justify-center border border-dashed border-blue-500/30 relative">
+               <div class="absolute inset-0 flex items-center justify-center">
+                  <div class="w-full h-full bg-gradient-to-r from-blue-500/5 to-purple-500/5 animate-pulse"></div>
+               </div>
+               <p class="text-gray-300 text-2xl z-10">[ Interactive Prototype Embed ]</p>
+            </div>
+         </div>
+         <div class="absolute -bottom-10 -left-10 w-40 h-40 bg-blue-500/10 rounded-full blur-xl -z-10"></div>
+      </section>
+      <section class="mb-24 relative">
+         <div class="absolute -top-20 right-0 w-40 h-40 bg-purple-500/10 rounded-full blur-xl -z-10"></div>
+<h2 class="text-4xl font-bold text-center text-white mb-12">Our Latest Research Insights</h2>
+         <div class="flex overflow-x-auto gap-6 pb-4 custom-scrollbar-x">
+            <div class="glass-card rounded-2xl w-80 flex-shrink-0 overflow-hidden">
+               <div class="h-40 bg-gray-900/70 flex items-center justify-center border-b border-white/10">
+                  <span class="material-symbols-outlined text-gray-500 text-4xl">insights</span>
+               </div>
+               <div class="p-5">
+                  <h3 class="text-lg font-semibold text-white mb-1">Projecting Market Shifts with Swarm Debates</h3>
+                  <p class="text-gray-400 text-sm font-mono font-light">How our agents argue to find the most probable outcome.</p>
+               </div>
+            </div>
+            <div class="glass-card rounded-2xl w-80 flex-shrink-0 overflow-hidden">
+               <div class="h-40 bg-gray-900/70 flex items-center justify-center border-b border-white/10">
+                  <span class="material-symbols-outlined text-gray-500 text-4xl">analytics</span>
+               </div>
+               <div class="p-5">
+                  <h3 class="text-lg font-semibold text-white mb-1">Causal Reasoning in Economic Data</h3>
+                  <p class="text-gray-400 text-sm font-mono font-light">Moving beyond correlation to understand true market drivers.</p>
+               </div>
+            </div>
+            <div class="glass-card rounded-2xl w-80 flex-shrink-0 overflow-hidden">
+               <div class="h-40 bg-gray-900/70 flex items-center justify-center border-b border-white/10">
+                  <span class="material-symbols-outlined text-gray-500 text-4xl">memory_alt</span>
+               </div>
+               <div class="p-5">
+                  <h3 class="text-lg font-semibold text-white mb-1">The 'Aperture' Memory Core</h3>
+                  <p class="text-gray-400 text-sm font-mono font-light">Building persistent, searchable knowledge for AI agents.</p>
+               </div>
+            </div>
+            <div class="glass-card rounded-2xl w-80 flex-shrink-0 overflow-hidden">
+               <div class="h-40 bg-gray-900/70 flex items-center justify-center border-b border-white/10">
+                  <span class="material-symbols-outlined text-gray-500 text-4xl">auto_fix</span>
+               </div>
+               <div class="p-5">
+                  <h3 class="text-lg font-semibold text-white mb-1">Real-time Anomaly Detection</h3>
+                  <p class="text-gray-400 text-sm font-mono font-light">Spotting the signals that human analysts miss.</p>
+               </div>
+            </div>
+         </div>
+      </section>
+      <section id="cta-section" class="text-center mt-24 pt-16 border-t border-white/10 relative overflow-hidden">
+         <div class="absolute -top-32 left-1/2 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl -z-10"></div>
+         <div class="absolute bottom-0 right-0 w-64 h-64 bg-purple-500/10 rounded-full blur-2xl -z-10"></div>
+<h2 class="text-3xl font-bold text-white mb-10">Let's Get Started</h2>
+         <div class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-12">
+            <a href="#waitlist-modal" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold px-8 py-3 rounded-full text-lg shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 transition-all duration-300 ease-in-out transform hover:scale-105 hover:brightness-110">
+               Join the Waitlist
+            </a>
+            <a href="#" class="bg-white/10 text-white font-semibold px-8 py-3 rounded-full text-lg border border-white/20 hover:bg-gradient-to-r hover:from-blue-500/20 hover:to-purple-500/20 transition-all duration-300 ease-in-out transform hover:scale-105">
+               Launch The Terminal
+            </a>
+</div>
+         <div class="flex items-center justify-center gap-8">
+            <a href="#" class="text-gray-400 hover:text-white transition-colors" title="LinkedIn">
+               <svg class="w-7 h-7 fill-current" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+               </svg>
+            </a>
+            <a href="#" class="text-gray-400 hover:text-white transition-colors" title="X (Twitter)">
+               <svg class="w-6 h-6 fill-current" viewBox="0 0 1200 1227" aria-hidden="true">
+                  <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.163 519.284ZM569.165 687.828L521.69 619.924L114.011 78.6338H302.978L604.111 513.62L651.581 581.524L1098.05 1157.94H909.088L569.165 687.828Z" />
+               </svg>
+            </a>
+            <a href="#" class="text-gray-400 hover:text-white transition-colors" title="GitHub">
+               <svg class="w-7 h-7 fill-current" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.108-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+               </svg>
+            </a>
+         </div>
+      </section>
+   </div>
+   <div id="waitlist-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md flex items-center justify-center p-4 opacity-0 pointer-events-none target:opacity-100 target:pointer-events-auto transition-opacity duration-300 z-50">
+      <div class="relative bg-gray-900 border border-white/20 rounded-2xl p-8 shadow-2xl shadow-black/50 w-full max-w-md">
+         <a href="#" class="absolute top-4 right-4 text-gray-500 hover:text-white transition-colors">
+            <span class="material-symbols-outlined text-3xl">close</span>
+         </a>
+         <h3 class="text-2xl font-semibold text-white mb-6">Join the Waitlist</h3>
+         <form action="#" method="POST" class="space-y-4">
+            <div>
+               <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Name</label>
+               <input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
+            </div>
+            <div>
+               <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label>
+               <input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
+            </div>
+            <div>
+               <label for="website" class="block text-sm font-medium text-gray-300 mb-1">Website (Optional)</label>
+               <input type="url" id="website" name="website" placeholder="https://your-company.com" class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
+            </div>
+            <div>
+               <label for="linkedin" class="block text-sm font-medium text-gray-300 mb-1">LinkedIn (Optional)</label>
+               <input type="url" id="linkedin" name="linkedin" placeholder="https://linkedin.com/in/your-profile" class="w-full px-4 py-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
+            </div>
+            <button type="submit" class="w-full bg-blue-600 text-white font-semibold px-6 py-3 rounded-lg text-lg hover:bg-blue-500 transition-all duration-300 !mt-6">Submit</button>
+         </form>
+      </div>
+      <a href="#" class="fixed inset-0 z-[-1]" aria-label="Close modal"></a>
+   </div>
+   <footer class="border-t border-white/10 relative overflow-hidden">
+      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-blue-900/5 -z-10"></div>
+<div class="container mx-auto max-w-6xl px-4 py-8">
+         <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
+            <p class="text-sm text-gray-400 font-mono font-light">&copy; 2025 Aperture. All rights reserved.</p>
+         </div>
+      </div>
+   </footer>
+   <script>
+      document.addEventListener("DOMContentLoaded", function() {
+         // --- Register GSAP Plugins ---
+         gsap.registerPlugin(ScrollTrigger);
+         // --- Helper Functions from Aura ---
+         const MONOCHROME_FILL = (opacity) => `rgba(255, 255, 255, ${Math.max(0, Math.min(1, opacity))})`;
+         // --- ADDED: Animation for Capabilities Section ---
+         function setupCapabilitiesAnimation() {
+            const container = document.querySelector('.capabilities-container');
+            if (!container) return; // Add a check
+            const core = document.querySelector('.aperture-core');
+            // MODIFICATION: This class no longer exists in the specified section,
+            // so this animation will not run on those elements, as intended by the HTML change.
+            const capabilities = gsap.utils.toArray('.animation-box'); // Use new class
+            if (!capabilities.length) return; // Don't run animation if boxes aren't found
+            const tl = gsap.timeline({
+               scrollTrigger: {
+                  trigger: container,
+                  start: "top center",
+                  toggleActions: "play none none none",
+               }
+            });
+            // 1. Fade in the Aperture Core
+            tl.to(core, {
+               opacity: 1,
+               scale: 1,
+               duration: 0.8,
+               ease: "power2.out"
+            });
+            // 2. Animate capabilities outwards
+            // Positions based on: width=260, height=340, gap=40
+            const positions = {
+               cap1: {
+                  x: -150,
+                  y: -190
+               }, // Top-left
+               cap2: {
+                  x: 150,
+                  y: -190
+               }, // Top-right
+               cap3: {
+                  x: -150,
+                  y: 190
+               }, // Bottom-left
+               cap4: {
+                  x: 150,
+                  y: 190
+               } // Bottom-right
+            };
+            tl.to(capabilities, {
+               opacity: 1,
+               scale: 1,
+               duration: 1.2,
+               ease: "back.out(1.7)",
+               stagger: 0.2,
+               // Use a function to set the x and y transform for each box
+               x: (i) => positions[`cap${i+1}`].x,
+               y: (i) => positions[`cap${i+1}`].y,
+            }, "-=0.5");
+         }
+         /**
+          * Creates a canvas element inside a container.
+          * MODIFIED: This version is adapted to work with the Aperture project's
+          * Tailwind layout. It applies absolute positioning to the canvas
+          * so it centers within its 'relative' parent container.
+          */
+         function createCanvasInContainer(containerId, width = 180, height = 180) {
+            const container = document.getElementById(containerId);
+            if (!container) return null;
+            container.innerHTML = "";
+            const canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            // --- MODIFICATION ---
+            // Apply absolute positioning to center the canvas inside the
+            // relative-positioned Tailwind container div.
+            canvas.style.position = "absolute";
+            canvas.style.top = "50%";
+            canvas.style.left = "50%";
+            canvas.style.transform = "translate(-50%, -50%)";
+            // --- END MODIFICATION ---
+            container.appendChild(canvas);
+            return canvas.getContext("2d");
+         }
+         // --- Animation 1: Understand ---
+         // --- MODIFIED: Swapped with setupImproveAnimation to match original request ---
+         function setupPulsatingCirclesAnimation() {
+            const ctx = createCanvasInContainer("anim-understand"); // <-- This now points to "Auto Improve" card
+            if (!ctx) return;
+            const centerX = 90,
+               centerY = 90;
+            let time = 0;
+            let lastTime = 0;
+            const rings = [];
+            for (let r = 0; r < 4; r++) {
+               const radius = 15 + r * 15;
+               const count = 6 + r * 3;
+               for (let i = 0; i < count; i++) {
+                  rings.push({
+                     radius,
+                     count,
+                     index: i,
+                     ringIndex: r,
+                     sz: 3 + r * 0.3,
+                     opacity: (90 - r * 10) / 100,
+                     delay: r * 0.2 + i * 0.1
+                  });
+               }
+            }
+            function animate(timestamp) {
+               if (!lastTime) lastTime = timestamp;
+               time += (timestamp - lastTime) * 0.001;
+               lastTime = timestamp;
+               ctx.clearRect(0, 0, 180, 180);
+               const pulseTime = (time % 3) / 3;
+               let opacity = 0,
+                  scale = 0.2;
+               if (pulseTime < 0.4) {
+                  opacity = pulseTime / 0.4;
+                  scale = 0.2 + (pulseTime / 0.4) * 0.8;
+               } else if (pulseTime < 0.6) {
+                  opacity = 1;
+                  scale = 1;
+               } else {
+                  opacity = 1 - ((pulseTime - 0.6) / 0.4);
+                  scale = 1 - ((pulseTime - 0.6) / 0.4) * 0.8;
+               }
+               ctx.beginPath();
+               ctx.arc(centerX, centerY, 4 * scale, 0, Math.PI * 2);
+               ctx.fillStyle = MONOCHROME_FILL(opacity);
+               ctx.fill();
+               rings.forEach(dot => {
+                  const angle = (dot.index / dot.count) * 2 * Math.PI;
+                  const x = centerX + Math.cos(angle) * dot.radius;
+                  const y = centerY + Math.sin(angle) * dot.radius;
+                  const localTime = ((time + dot.delay) % 3) / 3;
+                  let localOpacity = 0,
+                     localScale = 0.2;
+                  if (localTime < 0.4) {
+                     localOpacity = localTime / 0.4;
+                     localScale = 0.2 + (localTime / 0.4) * 0.8;
+                  } else if (localTime < 0.6) {
+                     localOpacity = 1;
+                     localScale = 1;
+                  } else {
+                     localOpacity = 1 - ((localTime - 0.6) / 0.4);
+                     localScale = 1 - ((localTime - 0.6) / 0.4) * 0.8;
+                  }
+                  ctx.beginPath();
+                  ctx.arc(x, y, dot.sz * localScale, 0, Math.PI * 2);
+                  ctx.fillStyle = MONOCHROME_FILL(localOpacity * dot.opacity);
+                  ctx.fill();
+               });
+               requestAnimationFrame(animate);
+            }
+            requestAnimationFrame(animate);
+         }
+         // --- Animation 2: Connect ---
+         function setupConnectAnimation() {
+            const ctx = createCanvasInContainer("anim-connect");
+            if (!ctx) return;
+            const centerX = 90,
+               centerY = 90;
+            let time = 0;
+            let lastTime = 0;
+            const dotCount = 20,
+               rowCount = 5,
+               spacing = 15;
+            function animate(timestamp) {
+               if (!lastTime) lastTime = timestamp;
+               time += (timestamp - lastTime) * 0.001;
+               lastTime = timestamp;
+               ctx.clearRect(0, 0, 180, 180);
+               for (let row = 0; row < rowCount; row++) {
+                  const y = centerY - ((rowCount - 1) / 2) * spacing + row * spacing;
+                  for (let i = 0; i < dotCount; i++) {
+                     const baseX = centerX - ((dotCount - 1) / 2) * 8 + i * 8;
+                     const amplitude = 4 + row * 2;
+                     const frequency = 1 + row * 0.2;
+                     const phaseOffset = row * 0.5;
+                     const offset = Math.sin(time * frequency + i * 0.2 + phaseOffset) * amplitude;
+                     const finalY = y + offset;
+                     ctx.beginPath();
+                     ctx.arc(baseX, finalY, 2, 0, Math.PI * 2);
+                     ctx.fillStyle = MONOCHROME_FILL(0.9);
+                     ctx.fill();
+                  }
+               }
+               requestAnimationFrame(animate);
+            }
+            requestAnimationFrame(animate);
+         }
+         // --- Animation 3: Harmonize ---
+         function setupHarmonizeAnimation() {
+            const ctx = createCanvasInContainer("anim-harmonize");
+            if (!ctx) return;
+            const centerX = 90,
+               centerY = 90;
+            let time = 0;
+            let lastTime = 0;
+            const pendulumCount = 15,
+               baseFrequency = 0.5,
+               pendulumLength = 70,
+               maxAngle = Math.PI / 12;
+            function animate(timestamp) {
+               if (!lastTime) lastTime = timestamp;
+               time += (timestamp - lastTime) * 0.001;
+               lastTime = timestamp;
+               ctx.clearRect(0, 0, 180, 180);
+               const angle = Math.sin(time * baseFrequency * Math.PI) * maxAngle;
+               for (let i = 0; i < pendulumCount; i++) {
+                  const pendulumX = centerX - pendulumCount * 4 + i * 8;
+                  const pendulumY = centerY - pendulumLength + 20;
+                  const bobX = pendulumX + Math.sin(angle) * pendulumLength;
+                  const bobY = pendulumY + Math.cos(angle) * pendulumLength;
+                  ctx.beginPath();
+                  ctx.moveTo(pendulumX, pendulumY);
+                  ctx.lineTo(bobX, bobY);
+                  ctx.strokeStyle = MONOCHROME_FILL(0.4);
+                  ctx.lineWidth = 1;
+                  ctx.stroke();
+                  ctx.beginPath();
+                  ctx.arc(bobX, bobY, 3, 0, Math.PI * 2);
+                  ctx.fillStyle = MONOCHROME_FILL(0.9);
+                  ctx.fill();
+               }
+               requestAnimationFrame(animate);
+            }
+            requestAnimationFrame(animate);
+         }
+         // --- Animation 4: Improve ---
+         // --- MODIFIED: Swapped with setupPulsatingCirclesAnimation to match original request ---
+         function setupImproveAnimation() {
+            const ctx = createCanvasInContainer("anim-improve"); // <-- This now points to "Record and Search" card
+            if (!ctx) return;
+            const centerX = 90,
+               centerY = 90;
+            let time = 0;
+            let lastTime = 0;
+            const gridSize = 5,
+               spacing = 25;
+            function animate(timestamp) {
+               if (!lastTime) lastTime = timestamp;
+               time += (timestamp - lastTime) * 0.001; // Fixed typo here
+               lastTime = timestamp;
+               ctx.clearRect(0, 0, 180, 180);
+               const breathingFactor = Math.sin(time * 0.5) * 0.2 + 1.0;
+               for (let row = 0; row < gridSize; row++) {
+                  for (let col = 0; col < gridSize; col++) {
+                     if (row === Math.floor(gridSize / 2) && col === Math.floor(gridSize / 2)) continue;
+                     const baseX = (col - (gridSize - 1) / 2) * spacing;
+                     const baseY = (row - (gridSize - 1) / 2) * spacing;
+                     const distance = Math.sqrt(baseX * baseX + baseY * baseY);
+                     const maxDistance = (spacing * Math.sqrt(2) * (gridSize - 1)) / 2;
+                     const normalizedDistance = distance / maxDistance;
+                     const breathingX = baseX * breathingFactor;
+                     const breathingY = baseY * breathingFactor;
+                     const waveX = centerX + breathingX;
+                     const waveY = centerY + breathingY;
+                     const baseSize = 1.5 + (1 - normalizedDistance) * 1.5;
+                     const pulseFactor = Math.sin(time * 2 + normalizedDistance * 5) * 0.6 + 1;
+                     const size = baseSize * pulseFactor;
+                     const opacity = 0.5 + Math.sin(time * 1.5 + distance * 0.1) * 0.2 + normalizedDistance * 0.3;
+                     ctx.beginPath();
+                     ctx.arc(waveX, waveY, size, 0, Math.PI * 2);
+                     ctx.fillStyle = MONOCHROME_FILL(opacity);
+                     ctx.fill();
+                  }
+               }
+               ctx.beginPath();
+               ctx.arc(centerX, centerY, 3, 0, Math.PI * 2);
+               ctx.fillStyle = MONOCHROME_FILL(0.9);
+               ctx.fill();
+               requestAnimationFrame(animate);
+            }
+            requestAnimationFrame(animate);
+         }
+         // --- MODIFIED: Scroll-triggered Animations for Sections ---
+         function setupSectionAnimations() {
+            const sections = [
+               document.querySelector("#research-section"),
+               document.querySelector("#data-section"),
+               document.querySelector("#core-section")
+            ];
+            sections.forEach(section => {
+               if (!section) return;
+               const titleDesc = section.querySelector(".section-intro");
+               const cards = gsap.utils.toArray(section.querySelectorAll(".glass-card"));
+               if (!titleDesc || !cards.length) return;
+               gsap.set(titleDesc, {
+                  opacity: 0,
+                  y: 30
+               });
+               gsap.set(cards, {
+                  opacity: 0
+               });
+               const tl = gsap.timeline({
+                  scrollTrigger: {
+                     trigger: section,
+                     start: "top 60%",
+                     toggleActions: "play none none none" // Changed 'reset' to 'none'
+                  }
+               });
+               tl.to(titleDesc, {
+                  opacity: 1,
+                  y: 0,
+                  duration: 0.8,
+                  ease: "power2.out"
+               });
+               // --- MODIFIED THIS TWEEN ---
+               tl.to(cards, {
+                  opacity: 1,
+                  duration: 2.5,         // CHANGED: from 0.6 to 2
+                  ease: "linear",
+                  stagger: 0.3         // CHANGED: from 0.15 to 0.5
+               }, ">");                // CHANGED: from "+=0.2" to ">" to start after title finishes
+            });
+         }
+         // --- MODIFIED: Scroll-triggered Animation for CTA Section ---
+         function setupCtaAnimation() {
+            const section = document.querySelector("#cta-section");
+            if (!section) return;
+            const title = section.querySelector("h2");
+            const buttonGroup = section.querySelector(".flex-col.sm\\:flex-row");
+            const socialIcons = section.querySelector(".flex.items-center.justify-center.gap-8");
+            if (!title || !buttonGroup || !socialIcons) return;
+            // Set initial state (with y-transform for the 'jump in')
+            gsap.set([title, buttonGroup, socialIcons], {
+               opacity: 0,
+               y: 20 // Start 20px down
+            });
+            const tl = gsap.timeline({
+               scrollTrigger: {
+                  trigger: section,
+                  start: "top 80%",
+                  toggleActions: "play none none none"
+               }
+            });
+            // 1. Fade in Title
+            tl.to(title, {
+               opacity: 1,
+               y: 0, // Animate to original position
+               duration: 1.2, // Slower duration
+               ease: "linear"
+            });
+            // 2. Fade in Buttons (with overlap)
+            tl.to(buttonGroup, {
+               opacity: 1,
+               // y: 0,
+               duration: 1.5, // Slower duration
+               ease: "linear",
+            }, "-=0.5"); // Start 0.5s before the *end* of the title animation
+            // 3. Fade in Socials (with overlap)
+            tl.to(socialIcons, {
+               opacity: 1,
+               // y: 0,
+               duration: 1.2, // Slower duration
+               ease: "linear",
+            }, "-=1.2"); // Start 1.2s before the *end* of the button animation
+         }
+         // --- Run All Animations ---
+         setupCapabilitiesAnimation();
+         setupPulsatingCirclesAnimation(); // This is for anim-understand ("Auto Improve")
+         setupConnectAnimation();
+         setupHarmonizeAnimation();
+         setupImproveAnimation(); // This is for anim-improve ("Record and Search")
+         setupSectionAnimations();
+         setupCtaAnimation();
+      });
+   </script>
+   <script></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>