Replace dark problem section with sticky scroll app walkthrough

- Remove old Problem + Reveal sections (dark bg, SVG waves, static screenshot)
- Add interactive walkthrough: sticky scroll with progressive app UI reveal
- Recreate app UI in HTML/CSS (sidebar, greeting, daily brief, chat, suggestions)
- 4 scroll steps with text descriptions + progress dots on the left
- GSAP ScrollTrigger pins the section and animates elements in sequence
- Pillar badges (AI Secretary, Private by Design, EU AI Act) appear at final step
- Clean up all orphaned CSS/JS from old sections
- Responsive breakpoints for mobile walkthrough layout

index.html

@@ -69,9 +69,9 @@
       position: fixed;
       inset: 0;
       background:
-        radial-gradient(ellipse 80% 60% at 25% 20%, rgba(251,200,129,0.07) 0%, transparent 60%),
+        radial-gradient(ellipse 80% 60% at 25% 20%, rgba(251,200,129,0.10) 0%, transparent 60%),
-        radial-gradient(ellipse 70% 50% at 75% 70%, rgba(138,142,169,0.06) 0%, transparent 50%),
+        radial-gradient(ellipse 70% 50% at 75% 70%, rgba(138,142,169,0.08) 0%, transparent 50%),
-        radial-gradient(ellipse 90% 60% at 50% 110%, rgba(200,195,205,0.08) 0%, transparent 50%);
+        radial-gradient(ellipse 90% 60% at 50% 110%, rgba(200,195,205,0.10) 0%, transparent 50%);
       pointer-events: none;
       z-index: 0;
     }
@@ -81,13 +81,15 @@
       content: '';
       position: fixed;
       inset: 0;
-      opacity: 0.025;
+      opacity: 0.03;
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
       background-size: 200px;
       pointer-events: none;
       z-index: 1;
     }
 
+    /* Section wave dividers — removed, using gradient fades instead */
+
     .container {
       max-width: 1100px;
       margin: 0 auto;
@@ -163,7 +165,7 @@
     .nav-logo {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 8px;
       font-size: 1.1rem;
       font-weight: 400;
       letter-spacing: -0.02em;
@@ -402,7 +404,7 @@
        SECTIONS (shared)
        ═══════════════════════════════════════ */
     .section {
-      padding: 120px 24px;
+      padding: 64px 24px;
       position: relative;
       z-index: 2;
     }
@@ -416,106 +418,308 @@
     }
 
     /* ═══════════════════════════════════════
-       PROBLEM — Scrollytelling
+       APP WALKTHROUGH — Sticky Scroll
        ═══════════════════════════════════════ */
-    .problem {
+    .walkthrough {
-      min-height: 100vh;
+      position: relative;
+      z-index: 2;
+      height: 100vh;
       display: flex;
-      flex-direction: column;
+      align-items: center;
       justify-content: center;
+      overflow: hidden;
     }
-    .problem-lines {
+    .walkthrough-inner {
-      max-width: 700px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 64px;
+      padding: 0 48px;
+      max-width: 1200px;
       margin: 0 auto;
-      text-align: center;
+      width: 100%;
     }
-    .problem-line {
+
-      font-size: clamp(1.4rem, 3vw, 2rem);
+    /* Text column (left) */
-      font-weight: 400;
+    .wt-text {
+      flex: 0 0 320px;
+      position: relative;
+      min-height: 200px;
+    }
+    .wt-step {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    .wt-step.active {
+      opacity: 1;
+      transform: none;
+    }
+    .wt-step-num {
+      font-size: 0.68rem;
+      font-weight: 600;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+      color: var(--primary-deep);
+      margin-bottom: 10px;
+    }
+    .wt-step h3 {
+      font-size: clamp(1.5rem, 2.5vw, 2rem);
+      font-weight: 600;
       letter-spacing: -0.02em;
-      line-height: 1.5;
+      line-height: 1.3;
-      margin-bottom: 28px;
+      margin-bottom: 12px;
-      color: var(--text-muted);
     }
-    .problem-conclusion {
+    .wt-step p {
+      font-size: 0.95rem;
+      color: var(--text-muted);
+      line-height: 1.7;
+    }
+    .wt-step .emphasis {
       font-weight: 700;
       color: var(--text);
-      margin-top: 36px;
-      font-size: clamp(1.5rem, 3.5vw, 2.2rem);
-      line-height: 1.4;
-      letter-spacing: -0.02em;
     }
-    .problem-conclusion em {
+    .wt-step .emphasis em {
       font-style: normal;
       color: var(--primary-deep);
     }
 
-    /* ═══════════════════════════════════════
+    /* Progress dots */
-       THE REVEAL
+    .wt-dots {
-       ═══════════════════════════════════════ */
+      display: flex;
-    .reveal { text-align: center; }
+      gap: 8px;
-    .reveal h2 { margin-bottom: 56px; }
+      margin-top: 28px;
+    }
+    .wt-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--muted);
+      transition: all 0.4s ease;
+    }
+    .wt-dot.active {
+      background: var(--primary);
+      transform: scale(1.25);
+    }
 
-    .device-frame {
+    /* Device column (right) */
-      max-width: 840px;
+    .wt-device {
-      margin: 0 auto 56px;
+      flex: 1;
-      border-radius: 16px;
+      max-width: 640px;
+      position: relative;
+    }
+    .wt-device-frame {
+      border-radius: 14px;
       overflow: hidden;
-      background: #fff;
+      background: #fafafa;
       box-shadow:
-        0 2px 4px rgba(0,0,0,0.02),
+        0 2px 4px rgba(0,0,0,0.03),
-        0 8px 16px rgba(0,0,0,0.04),
+        0 8px 20px rgba(0,0,0,0.06),
-        0 32px 64px rgba(0,0,0,0.06);
+        0 24px 48px rgba(0,0,0,0.08),
-      transform: perspective(1200px) rotateX(2deg);
+        0 48px 80px rgba(0,0,0,0.05);
-      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
     }
-    .device-frame:hover {
+    .wt-device-frame::before {
-      transform: perspective(1200px) rotateX(0deg) translateY(-4px);
+      content: '';
-      box-shadow:
+      position: absolute;
-        0 2px 4px rgba(0,0,0,0.02),
+      inset: -40px;
-        0 12px 24px rgba(0,0,0,0.06),
+      background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(251,200,129,0.10) 0%, rgba(251,200,129,0.02) 40%, transparent 70%);
-        0 48px 80px rgba(0,0,0,0.08);
+      filter: blur(40px);
+      z-index: -1;
+      border-radius: 40px;
     }
-    .device-topbar {
+    .wt-topbar {
-      height: 32px;
+      height: 28px;
-      background: #f8f8f8;
+      background: #f0f0f0;
       display: flex;
       align-items: center;
-      padding: 0 14px;
+      padding: 0 12px;
-      gap: 6px;
+      gap: 5px;
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid #e8e8e8;
     }
-    .device-dot { width: 9px; height: 9px; border-radius: 50%; }
+    .wt-topbar span { width: 8px; height: 8px; border-radius: 50%; }
-    .device-dot:nth-child(1) { background: #ff5f57; }
+    .wt-topbar span:nth-child(1) { background: #ff5f57; }
-    .device-dot:nth-child(2) { background: #febc2e; }
+    .wt-topbar span:nth-child(2) { background: #febc2e; }
-    .device-dot:nth-child(3) { background: #28c840; }
+    .wt-topbar span:nth-child(3) { background: #28c840; }
-    .device-frame img { width: 100%; height: auto; display: block; object-fit: contain; }
 
-    .pillars {
+    /* App recreation */
+    .wt-app {
+      display: flex;
+      min-height: 380px;
+      font-size: 13px;
+      color: #1a1a1a;
+    }
+
+    /* Sidebar */
+    .wt-sidebar {
+      width: 44px;
+      background: #f4f0f4;
+      border-right: 1px solid #e8e4e8;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 10px 0;
+      gap: 4px;
+      opacity: 0;
+    }
+    .wt-sidebar-logo {
+      width: 24px;
+      height: 24px;
+      margin-bottom: 8px;
+    }
+    .wt-sidebar-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #8a8ea9;
+      transition: all 0.2s;
+    }
+    .wt-sidebar-icon.active {
+      background: rgba(251,200,129,0.15);
+      color: #e5a94e;
+    }
+    .wt-sidebar-icon i { width: 16px; height: 16px; }
+    .wt-sidebar-avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: #d4d0d8;
+      margin-top: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 9px;
+      font-weight: 700;
+      color: #666;
+    }
+
+    /* Main content area */
+    .wt-main {
+      flex: 1;
+      padding: 32px 40px;
+      display: flex;
+      flex-direction: column;
+      background: #fafafa;
+    }
+    .wt-greeting {
+      opacity: 0;
+      margin-bottom: 4px;
+    }
+    .wt-greeting-label {
+      font-size: 14px;
+      color: #8a8ea9;
+      font-weight: 400;
+    }
+    .wt-greeting-name {
+      font-size: 36px;
+      font-weight: 700;
+      letter-spacing: -0.03em;
+      color: #1a1a1a;
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+    }
+    .wt-greeting-name .wt-sparkle {
+      color: #e5a94e;
+      font-size: 28px;
+      line-height: 1;
+    }
+    .wt-brief {
+      opacity: 0;
+      margin: 16px 0 20px;
+      font-size: 13px;
+      line-height: 1.6;
+      color: #555;
+      max-width: 480px;
+    }
+    .wt-chat {
+      opacity: 0;
+      margin-top: auto;
+    }
+    .wt-chat-input {
+      display: flex;
+      align-items: center;
+      background: #fff;
+      border: 1px solid #e0dce0;
+      border-radius: 24px;
+      padding: 10px 14px 10px 18px;
+      gap: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+    }
+    .wt-chat-input span {
+      flex: 1;
+      color: #b0aab4;
+      font-size: 13px;
+    }
+    .wt-chat-send {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: rgba(251,200,129,0.15);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .wt-chat-send i { width: 14px; height: 14px; color: #e5a94e; }
+    .wt-suggestions {
+      opacity: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin-top: 12px;
+    }
+    .wt-suggestion {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12.5px;
+      color: #8a8ea9;
+      padding: 2px 0;
+    }
+    .wt-suggestion i { width: 14px; height: 14px; flex-shrink: 0; }
+
+    /* Pillar pills (below device) */
+    .wt-pillars {
       display: flex;
       gap: 16px;
       justify-content: center;
       flex-wrap: wrap;
+      margin-top: 32px;
+      opacity: 0;
     }
-    .pillar {
+
-      display: flex;
+    @media (max-width: 900px) {
-      align-items: center;
+      .walkthrough-inner {
-      gap: 10px;
+        flex-direction: column;
-      padding: 12px 22px;
+        gap: 32px;
-      border-radius: 50px;
+        padding: 80px 20px 24px;
-      background: var(--card-bg);
-      backdrop-filter: blur(16px);
-      border: 1px solid var(--card-border);
-      font-size: 0.88rem;
-      font-weight: 500;
-      transition: all var(--transition);
       }
-    .pillar:hover {
+      .wt-text { flex: none; width: 100%; min-height: 120px; }
-      background: rgba(255,255,255,0.7);
+      .wt-device { max-width: 100%; }
-      transform: translateY(-2px);
+      .wt-app { min-height: 280px; }
-      box-shadow: 0 8px 20px rgba(0,0,0,0.04);
+      .wt-main { padding: 20px 24px; }
+      .wt-greeting-name { font-size: 24px; }
+    }
+    @media (max-width: 640px) {
+      .walkthrough-inner { padding: 72px 16px 16px; gap: 20px; }
+      .wt-text { flex: none; }
+      .wt-app { min-height: 240px; font-size: 11px; }
+      .wt-main { padding: 16px 18px; }
+      .wt-greeting-name { font-size: 20px; }
+      .wt-greeting-name .wt-sparkle { font-size: 18px; }
+      .wt-sidebar { width: 36px; }
+      .wt-sidebar-icon { width: 26px; height: 26px; }
+      .wt-sidebar-icon i { width: 13px; height: 13px; }
+      .wt-brief { font-size: 11px; }
+      .wt-chat-input { padding: 8px 10px 8px 14px; }
+      .wt-suggestion { font-size: 11px; }
     }
-    .pillar i { width: 18px; height: 18px; color: var(--primary-deep); }
 
     /* ═══════════════════════════════════════
        HOW IT WORKS
@@ -543,15 +747,16 @@
       text-align: center;
       padding: 40px 24px;
       border-radius: var(--radius);
-      background: var(--card-bg);
+      background: rgba(255, 255, 255, 0.55);
-      backdrop-filter: blur(16px);
+      backdrop-filter: blur(20px);
-      border: 1px solid var(--card-border);
+      border: 1px solid rgba(255, 255, 255, 0.65);
+      box-shadow: 0 4px 16px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02);
       transition: all var(--transition);
     }
     .step-card:hover {
-      background: rgba(255,255,255,0.65);
+      background: rgba(255,255,255,0.75);
-      transform: translateY(-4px);
+      transform: translateY(-6px);
-      box-shadow: 0 12px 32px rgba(0,0,0,0.05);
+      box-shadow: 0 16px 40px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.03);
     }
     .step-num {
       width: 48px; height: 48px; border-radius: 50%;
@@ -578,16 +783,17 @@
     .feature-card {
       padding: 28px;
       border-radius: var(--radius);
-      background: var(--card-bg);
+      background: rgba(255, 255, 255, 0.5);
-      backdrop-filter: blur(16px);
+      backdrop-filter: blur(20px);
-      border: 1px solid var(--card-border);
+      border: 1px solid rgba(255, 255, 255, 0.6);
-      transition: all var(--transition);
+      box-shadow: 0 4px 16px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02);
+      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
       position: relative;
+      transform-style: preserve-3d;
     }
     .feature-card:hover {
-      background: rgba(255,255,255,0.65);
+      background: rgba(255,255,255,0.75);
-      transform: translateY(-3px);
+      box-shadow: 0 20px 48px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.03);
-      box-shadow: 0 12px 32px rgba(0,0,0,0.04);
     }
     .feature-icon {
       width: 42px; height: 42px; border-radius: 12px;
@@ -623,9 +829,10 @@
       position: relative;
       padding: 40px;
       border-radius: var(--radius);
-      background: var(--card-bg);
+      background: rgba(255, 255, 255, 0.55);
-      backdrop-filter: blur(16px);
+      backdrop-filter: blur(20px);
-      border: 1px solid var(--card-border);
+      border: 1px solid rgba(255, 255, 255, 0.65);
+      box-shadow: 0 8px 32px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
     }
     .founder-quote::before {
       content: '\201C';
@@ -656,12 +863,9 @@
        ═══════════════════════════════════════ */
     .final-cta {
       text-align: center;
-      padding: 120px 24px;
+      padding: 64px 24px;
       position: relative;
       z-index: 2;
-      background:
-        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(251,200,129,0.06) 0%, transparent 60%),
-        linear-gradient(180deg, var(--bg) 0%, var(--bg-shifted) 100%);
     }
     .final-cta h2 { margin-bottom: 12px; }
     .final-cta .subtitle {
@@ -716,9 +920,8 @@
       .features-grid { grid-template-columns: 1fr; }
       .pillars { flex-direction: column; align-items: center; }
       nav { padding: 0 16px; }
-      .device-frame { transform: none; }
+      .section { padding: 48px 20px; }
-      .device-frame:hover { transform: none; }
+      .final-cta { padding: 48px 20px; }
-      .section { padding: 80px 20px; }
       .founder-quote { padding: 28px; }
     }
 
@@ -732,7 +935,8 @@
         transition-duration: 0.01ms !important;
       }
       .gs-reveal { opacity: 1; transform: none; }
-      .problem-line, .problem-conclusion { opacity: 1 !important; transform: none !important; }
+      .wt-step { opacity: 1 !important; transform: none !important; }
+      .wt-sidebar, .wt-greeting, .wt-brief, .wt-chat, .wt-suggestions, .wt-pillars { opacity: 1 !important; transform: none !important; }
       .particle { display: none; }
     }
   </style>
@@ -746,8 +950,7 @@
         <path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
         <path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
         <circle cx="32" cy="32" r="2.5" fill="#040404" opacity="0.18"/>
-      </svg>
+      </svg><span>adiuv<span class="ai">AI</span></span>
-      adiuv<span class="ai">AI</span>
     </a>
     <a href="#final-cta" class="btn btn-primary">Join the waitlist</a>
   </nav>
@@ -807,39 +1010,87 @@
     100% on your device
   </div>
 
-  <!-- ═══════ THE PROBLEM — Scrollytelling ═══════ -->
+  <!-- ═══════ APP WALKTHROUGH — Sticky Scroll ═══════ -->
-  <section class="section problem" id="problem">
+  <section class="walkthrough" id="walkthrough">
-    <div class="problem-lines">
+      <div class="walkthrough-inner">
-      <p class="problem-line">Your important emails hide between newsletters.</p>
-      <p class="problem-line">Your tasks live in three different apps.</p>
-      <p class="problem-line">Meeting notes sit in a doc you'll never open again.</p>
-      <p class="problem-conclusion">You don't need another tool.<br>You need <em>a secretary</em>.</p>
-    </div>
-  </section>
 
-  <!-- ═══════ THE REVEAL ═══════ -->
+        <!-- Text column -->
-  <section class="section reveal" id="reveal">
+        <div class="wt-text">
-    <div class="container">
+          <div class="wt-step" data-step="0">
-      <p class="section-label gs-reveal">The product</p>
+            <p class="wt-step-num">The problem</p>
-      <h2 class="gs-reveal">Your daily brief, every morning.</h2>
+            <h3>Your important emails hide between newsletters.</h3>
-
+            <p>You miss deadlines buried in threads. Tasks get lost across three different apps. Sound familiar?</p>
-      <div class="device-frame gs-reveal">
+            <div class="wt-dots"><span class="wt-dot active"></span><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot"></span></div>
-        <div class="device-topbar" aria-hidden="true">
+          </div>
-          <div class="device-dot"></div>
+          <div class="wt-step" data-step="1">
-          <div class="device-dot"></div>
+            <p class="wt-step-num">The greeting</p>
-          <div class="device-dot"></div>
+            <h3>Every morning, your AI secretary is ready.</h3>
+            <p>Open the app and it already knows what happened overnight — emails scanned, tasks prioritized, deadlines flagged.</p>
+            <div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot active"></span><span class="wt-dot"></span><span class="wt-dot"></span></div>
+          </div>
+          <div class="wt-step" data-step="2">
+            <p class="wt-step-num">The brief</p>
+            <h3>Meeting notes sit in a doc you'll never open again.</h3>
+            <p>Not here. Your daily brief is a clear, AI-generated summary of what matters today — tasks, follow-ups, and deadlines in one place.</p>
+            <div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot active"></span><span class="wt-dot"></span></div>
+          </div>
+          <div class="wt-step" data-step="3">
+            <p class="wt-step-num">The result</p>
+            <h3 class="emphasis">You don't need another tool.<br>You need <em>a secretary</em>.</h3>
+            <p>Ask it anything. It understands your projects, your emails, your schedule — and it never leaves your device.</p>
+            <div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot active"></span></div>
           </div>
-        <!-- Screenshot of the adiuvAI desktop app -->
-        <img src="./assets/home.png"
-             alt="adiuvAI dashboard showing a personalized morning brief with tasks, priorities, and AI chat assistant"
-             loading="lazy" width="1920" height="1079">
         </div>
 
-      <div class="pillars">
+        <!-- Device column -->
-        <div class="pillar gs-reveal"><i data-lucide="sparkles"></i> AI Secretary</div>
+        <div class="wt-device">
-        <div class="pillar gs-reveal"><i data-lucide="lock"></i> Private by Design</div>
+          <div class="wt-device-frame">
-        <div class="pillar gs-reveal"><i data-lucide="scale"></i> EU AI Act Compliant</div>
+            <div class="wt-topbar"><span></span><span></span><span></span></div>
+            <div class="wt-app">
+              <!-- Sidebar -->
+              <div class="wt-sidebar" id="wt-sidebar">
+                <svg class="wt-sidebar-logo" viewBox="0 0 64 64" fill="none">
+                  <path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
+                  <path d="M16,32 L48,32 L32,60 Z" fill="#040404"/>
+                </svg>
+                <div class="wt-sidebar-icon active"><i data-lucide="house"></i></div>
+                <div class="wt-sidebar-icon"><i data-lucide="chart-gantt"></i></div>
+                <div class="wt-sidebar-icon"><i data-lucide="clipboard-check"></i></div>
+                <div class="wt-sidebar-icon"><i data-lucide="folder-kanban"></i></div>
+                <div class="wt-sidebar-avatar">JD</div>
               </div>
+              <!-- Main -->
+              <div class="wt-main">
+                <div class="wt-greeting" id="wt-greeting">
+                  <div class="wt-greeting-label">Good morning,</div>
+                  <div class="wt-greeting-name">James <span class="wt-sparkle">✦</span></div>
+                </div>
+                <div class="wt-brief" id="wt-brief">
+                  Good morning! Just a quick reminder to wrap up task X today and reply to that project email. Also, please don't forget that the documentation and the estimate are due tomorrow.
+                </div>
+                <div class="wt-chat" id="wt-chat">
+                  <div class="wt-chat-input">
+                    <span>Ask me anything...</span>
+                    <div class="wt-chat-send"><i data-lucide="arrow-up"></i></div>
+                  </div>
+                </div>
+                <div class="wt-suggestions" id="wt-suggestions">
+                  <div class="wt-suggestion"><i data-lucide="list-todo"></i> What's on my plate today?</div>
+                  <div class="wt-suggestion"><i data-lucide="trending-up"></i> Summarize this week</div>
+                  <div class="wt-suggestion"><i data-lucide="circle-alert"></i> Any overdue tasks?</div>
+                  <div class="wt-suggestion"><i data-lucide="lightbulb"></i> Suggest next actions</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="pillars wt-pillars" id="wt-pillars">
+            <div class="pillar"><i data-lucide="sparkles"></i> AI Secretary</div>
+            <div class="pillar"><i data-lucide="lock"></i> Private by Design</div>
+            <div class="pillar"><i data-lucide="scale"></i> EU AI Act Compliant</div>
+          </div>
+        </div>
+
       </div>
   </section>
 
@@ -989,8 +1240,7 @@
       <svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
         <path d="M32,4 L48,32 L16,32 Z" fill="#fbc881"/>
         <path d="M16,32 L48,32 L32,60 Z" fill="currentColor"/>
-      </svg>
+      </svg><span>adiuv<span class="ai">AI</span></span>
-      adiuv<span class="ai">AI</span>
     </div>
     <p class="legal">
       &copy; 2026 adiuvAI. All rights reserved.
@@ -1080,22 +1330,64 @@
       });
     });
 
-    // ─── Problem: scroll-driven line reveals ───
+    // ─── Walkthrough: sticky scroll with progressive app reveal ───
-    const lines = gsap.utils.toArray('.problem-line, .problem-conclusion');
+    const wtSection = document.getElementById('walkthrough');
-    lines.forEach((el) => {
+    const wtSteps = gsap.utils.toArray('.wt-step');
-      gsap.set(el, { opacity: 0, y: 28 });
+    const wtSidebar = document.getElementById('wt-sidebar');
-      gsap.to(el, {
+    const wtGreeting = document.getElementById('wt-greeting');
-        opacity: 1,
+    const wtBrief = document.getElementById('wt-brief');
-        y: 0,
+    const wtChat = document.getElementById('wt-chat');
-        ease: 'power2.out',
+    const wtSuggestions = document.getElementById('wt-suggestions');
+    const wtPillars = document.getElementById('wt-pillars');
+
+    if (wtSection) {
+      // Set initial states
+      gsap.set(wtSteps, { opacity: 0, y: 40 });
+      gsap.set(wtSteps[0], { opacity: 1, y: 0 });
+      gsap.set([wtSidebar], { opacity: 0, x: -30 });
+      gsap.set([wtGreeting], { opacity: 0, y: -20 });
+      gsap.set([wtBrief], { opacity: 0, y: 20 });
+      gsap.set([wtChat], { opacity: 0, y: 30 });
+      gsap.set([wtSuggestions], { opacity: 0, y: 30 });
+      gsap.set([wtPillars], { opacity: 0, y: 20 });
+
+      const wtTl = gsap.timeline({
         scrollTrigger: {
-          trigger: el,
+          trigger: wtSection,
-          start: 'top 82%',
+          start: 'top top',
-          end: 'top 58%',
+          end: () => '+=' + (window.innerHeight * 3),
-          scrub: 0.5,
+          scrub: 0.6,
+          pin: true,
+          anticipatePin: 1,
+          invalidateOnRefresh: true,
         },
       });
-    });
+
+      // Use normalized 0-1 positions so timing scales with any scroll distance
+      wtTl
+        // Step 0 visible at start → sidebar flies in
+        .to(wtSidebar, { opacity: 1, x: 0, duration: 0.15, ease: 'power2.out' }, 0)
+        .to(wtSteps[0], { opacity: 0, y: -30, duration: 0.08 }, 0.13)
+        // Step 1: greeting
+        .to(wtSteps[1], { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.18)
+        .to(wtGreeting, { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.18)
+        // Hold step 1
+        .to({}, { duration: 0.08 }, 0.28)
+        // Step 2: brief
+        .to(wtSteps[1], { opacity: 0, y: -30, duration: 0.08 }, 0.36)
+        .to(wtSteps[2], { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.42)
+        .to(wtBrief, { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.42)
+        // Hold step 2
+        .to({}, { duration: 0.08 }, 0.52)
+        // Step 3: chat + suggestions + pillars
+        .to(wtSteps[2], { opacity: 0, y: -30, duration: 0.08 }, 0.60)
+        .to(wtSteps[3], { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.66)
+        .to(wtChat, { opacity: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.66)
+        .to(wtSuggestions, { opacity: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.72)
+        .to(wtPillars, { opacity: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.78)
+        // Hold step 3 visible
+        .to({}, { duration: 0.14 }, 0.86);
+    }
 
     // ─── Generic scroll reveals for gs-reveal ───
     gsap.utils.toArray('.gs-reveal').forEach((el, i) => {
@@ -1125,6 +1417,32 @@
         scrub: true,
       },
     });
+
+
+
+    // ─── 3D tilt on feature cards ───
+    document.querySelectorAll('.feature-card').forEach((card) => {
+      card.addEventListener('mousemove', (e) => {
+        const r = card.getBoundingClientRect();
+        const x = (e.clientX - r.left) / r.width - 0.5;
+        const y = (e.clientY - r.top) / r.height - 0.5;
+        gsap.to(card, {
+          rotateY: x * 10,
+          rotateX: y * -10,
+          transformPerspective: 600,
+          duration: 0.4,
+          ease: 'power2.out',
+        });
+      });
+      card.addEventListener('mouseleave', () => {
+        gsap.to(card, {
+          rotateY: 0,
+          rotateX: 0,
+          duration: 0.6,
+          ease: 'elastic.out(1, 0.5)',
+        });
+      });
+    });
   });
 
   // ─── Waitlist Form Handler ───