fix: hide pillars and suggestions on mobile to prevent overlap with step text

- Replace scroll-snap with sticky pin wrappers (120vh dwell per step)
- Steps stick at 25vh while user scrolls through wrapper height
- IntersectionObserver now watches pin wrappers, clears data-step on exit
- Sidebar animates in at step 0, hides when scrolling away
- Remove aggressive scroll-snap-type from html
- Tablet/mobile: fallback to relative positioning with fixed heights

.gitea/workflows/deploy.yaml

@@ -1,4 +1,4 @@
-name: Deploy HTML to Docker LXC
+name: Deploy Website
 run-name: Deploying static site by ${{ github.actor }}
 
 on:
@@ -8,17 +8,39 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-latest # Adjust if your runner uses a different label
+    runs-on: ubuntu-latest
     steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-
-      - name: Copy site files to Docker LXC
-        uses: appleboy/scp-action@v0.1.7
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.0
         with:
           host: ${{ secrets.SSH_HOST }}
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_KEY }}
-          source: "index.html,privacy.html,terms.html,assets/*"
-          target: "/opt/adiuvai-website/html/"
-          rm: true
+          script: |
+            set -e
+            DEPLOY_DIR="/opt/adiuvai-waitlist/website"
+            REPO_URL="https://git.muticolturano.com/${{ gitea.repository }}.git"
+
+            # Clone latest into temp dir
+            cd /tmp && rm -rf website-deploy
+            git clone --depth 1 "${REPO_URL}" website-deploy
+
+            # Sync files (clear contents, not the directory itself)
+            mkdir -p "$DEPLOY_DIR"
+            find "$DEPLOY_DIR" -mindepth 1 -delete
+            cp -r /tmp/website-deploy/index.html \
+                  /tmp/website-deploy/privacy.html \
+                  /tmp/website-deploy/terms.html \
+                  "$DEPLOY_DIR/"
+            [ -d /tmp/website-deploy/assets ] && cp -r /tmp/website-deploy/assets "$DEPLOY_DIR/"
+
+            # Cleanup
+            rm -rf /tmp/website-deploy
+
+            # Verify
+            if [ -f "$DEPLOY_DIR/index.html" ]; then
+              echo "✅ Website deployed"
+            else
+              echo "❌ index.html not found"
+              exit 1
+            fi

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 70% 50% at 75% 70%, rgba(138,142,169,0.06) 0%, transparent 50%),
-        radial-gradient(ellipse 90% 60% at 50% 110%, rgba(200,195,205,0.08) 0%, transparent 50%);
+        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.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,429 @@
     }
 
     /* ═══════════════════════════════════════
-       PROBLEM — Scrollytelling
+       APP WALKTHROUGH — Sticky + IntersectionObserver
        ═══════════════════════════════════════ */
-    .problem {
+    .walkthrough {
+      position: relative;
+      z-index: 2;
+      padding: 80px 0 40px;
+    }
+    .walkthrough-inner {
+      display: flex;
+      align-items: flex-start;
+      gap: 64px;
+      padding: 0 48px;
+      max-width: 1200px;
+      margin: 0 auto;
+      width: 100%;
+    }
+
+    /* Scroll progress line — left edge */
+    .wt-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 3px;
+      height: 0%;
+      background: linear-gradient(180deg, var(--primary), var(--primary-deep));
+      border-radius: 0 2px 2px 0;
+      transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+      opacity: 0.6;
+    }
+
+    /* Text column — flows naturally, each step creates scroll distance */
+    .wt-text {
+      flex: 0 0 360px;
+      position: relative;
+    }
+    .wt-step-pin {
       min-height: 100vh;
+    }
+    .wt-step-pin:last-child {
+      min-height: 80vh;
+    }
+    .wt-step {
+      position: sticky;
+      top: 25vh;
       display: flex;
       flex-direction: column;
-      justify-content: center;
+      padding: 40px 0;
+      opacity: 0.12;
+      transform: translateY(16px);
+      filter: blur(1px);
+      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+                  transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+                  filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
     }
-    .problem-lines {
-      max-width: 700px;
-      margin: 0 auto;
-      text-align: center;
+    .wt-step.active {
+      opacity: 1;
+      transform: none;
+      filter: blur(0px);
     }
-    .problem-line {
-      font-size: clamp(1.4rem, 3vw, 2rem);
-      font-weight: 400;
+    .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;
-      margin-bottom: 28px;
-      color: var(--text-muted);
+      line-height: 1.3;
+      margin-bottom: 12px;
     }
-    .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);
     }
 
-    /* ═══════════════════════════════════════
-       THE REVEAL
-       ═══════════════════════════════════════ */
-    .reveal { text-align: center; }
-    .reveal h2 { margin-bottom: 56px; }
+    /* Progress dots */
+    .wt-dots {
+      display: flex;
+      gap: 8px;
+      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 {
-      max-width: 840px;
-      margin: 0 auto 56px;
-      border-radius: 16px;
+    /* Device column — sticky, pins below nav while text scrolls */
+    .wt-device {
+      flex: 1;
+      max-width: 640px;
+      position: sticky;
+      top: calc(50vh - 240px);
+      align-self: flex-start;
+    }
+    .wt-device-frame {
+      border-radius: 14px;
       overflow: hidden;
-      background: #fff;
+      background: #fafafa;
       box-shadow:
-        0 2px 4px rgba(0,0,0,0.02),
-        0 8px 16px rgba(0,0,0,0.04),
-        0 32px 64px rgba(0,0,0,0.06);
-      transform: perspective(1200px) rotateX(2deg);
-      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
+        0 2px 4px rgba(0,0,0,0.03),
+        0 8px 20px rgba(0,0,0,0.06),
+        0 24px 48px rgba(0,0,0,0.08),
+        0 48px 80px rgba(0,0,0,0.05);
+      position: relative;
     }
-    .device-frame:hover {
-      transform: perspective(1200px) rotateX(0deg) translateY(-4px);
-      box-shadow:
-        0 2px 4px rgba(0,0,0,0.02),
-        0 12px 24px rgba(0,0,0,0.06),
-        0 48px 80px rgba(0,0,0,0.08);
+    .wt-device-frame::before {
+      content: '';
+      position: absolute;
+      inset: -40px;
+      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%);
+      filter: blur(40px);
+      z-index: -1;
+      border-radius: 40px;
     }
-    .device-topbar {
-      height: 32px;
-      background: #f8f8f8;
+    .wt-topbar {
+      height: 28px;
+      background: #f0f0f0;
       display: flex;
       align-items: center;
-      padding: 0 14px;
-      gap: 6px;
-      border-bottom: 1px solid #eee;
+      padding: 0 12px;
+      gap: 5px;
+      border-bottom: 1px solid #e8e8e8;
     }
-    .device-dot { width: 9px; height: 9px; border-radius: 50%; }
-    .device-dot:nth-child(1) { background: #ff5f57; }
-    .device-dot:nth-child(2) { background: #febc2e; }
-    .device-dot:nth-child(3) { background: #28c840; }
-    .device-frame img { width: 100%; height: auto; display: block; object-fit: contain; }
+    .wt-topbar span { width: 8px; height: 8px; border-radius: 50%; }
+    .wt-topbar span:nth-child(1) { background: #ff5f57; }
+    .wt-topbar span:nth-child(2) { background: #febc2e; }
+    .wt-topbar span:nth-child(3) { background: #28c840; }
 
-    .pillars {
+    /* App recreation */
+    .wt-app {
+      display: flex;
+      min-height: 380px;
+      font-size: 13px;
+      color: #1a1a1a;
+    }
+
+    /* Sidebar — CSS-driven reveal */
+    .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;
+      transform: translateX(-20px);
+      transition: opacity 0.5s ease, transform 0.5s ease;
+    }
+    .walkthrough[data-step="0"] .wt-sidebar,
+    .walkthrough[data-step="1"] .wt-sidebar,
+    .walkthrough[data-step="2"] .wt-sidebar,
+    .walkthrough[data-step="3"] .wt-sidebar {
+      opacity: 1;
+      transform: none;
+    }
+    .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;
+    }
+
+    /* Greeting — CSS-driven reveal */
+    .wt-greeting {
+      opacity: 0;
+      transform: translateY(-10px);
+      transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
+      margin-bottom: 4px;
+    }
+    .walkthrough[data-step="1"] .wt-greeting,
+    .walkthrough[data-step="2"] .wt-greeting,
+    .walkthrough[data-step="3"] .wt-greeting {
+      opacity: 1;
+      transform: none;
+    }
+    .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;
+    }
+
+    /* Brief — CSS-driven reveal */
+    .wt-brief {
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
+      margin: 16px 0 20px;
+      font-size: 13px;
+      line-height: 1.6;
+      color: #555;
+      max-width: 480px;
+    }
+    .walkthrough[data-step="2"] .wt-brief,
+    .walkthrough[data-step="3"] .wt-brief {
+      opacity: 1;
+      transform: none;
+    }
+
+    /* Chat — CSS-driven reveal */
+    .wt-chat {
+      opacity: 0;
+      transform: translateY(15px);
+      transition: opacity 0.5s ease, transform 0.5s ease;
+      margin-top: auto;
+    }
+    .walkthrough[data-step="3"] .wt-chat {
+      opacity: 1;
+      transform: none;
+    }
+    .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; }
+
+    /* Suggestions — CSS-driven reveal */
+    .wt-suggestions {
+      opacity: 0;
+      transform: translateY(15px);
+      transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin-top: 12px;
+    }
+    .walkthrough[data-step="3"] .wt-suggestions {
+      opacity: 1;
+      transform: none;
+    }
+    .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 — CSS-driven reveal */
+    .wt-pillars {
       display: flex;
       gap: 16px;
       justify-content: center;
       flex-wrap: wrap;
+      margin-top: 32px;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
     }
-    .pillar {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 12px 22px;
-      border-radius: 50px;
-      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);
+    .walkthrough[data-step="3"] .wt-pillars {
+      opacity: 1;
+      transform: none;
     }
-    .pillar:hover {
-      background: rgba(255,255,255,0.7);
-      transform: translateY(-2px);
-      box-shadow: 0 8px 20px rgba(0,0,0,0.04);
+
+    /* Walkthrough — Tablet */
+    @media (max-width: 900px) {
+      .walkthrough { padding: 40px 0 24px; }
+      .walkthrough-inner {
+        flex-direction: column;
+        gap: 0;
+        padding: 0 20px;
+      }
+      .wt-progress { display: none; }
+      .wt-device {
+        order: -1;
+        position: sticky;
+        top: 72px;
+        max-width: 100%;
+        z-index: 1;
+        padding-bottom: 8px;
+      }
+      .wt-device-frame { max-height: 35vh; }
+      .wt-app { min-height: 0; max-height: calc(35vh - 22px); overflow: hidden; }
+      .wt-text {
+        flex: none;
+        width: 100%;
+        position: relative;
+      }
+      .wt-step-pin { min-height: 100vh; }
+      .wt-step-pin:last-child { min-height: 70vh; }
+      .wt-step {
+        position: sticky;
+        top: calc(72px + 35vh + 16px);
+        min-height: 0;
+        height: auto;
+        padding: 24px 16px;
+        background: rgba(244,237,243,0.97);
+        border-radius: 16px;
+        margin-bottom: 0;
+      }
+      .wt-device { max-width: 100%; }
+      .wt-app { min-height: 0; }
+      .wt-pillars { display: none; }
+      .wt-suggestions { display: none; }
+      .wt-main { padding: 14px 16px; }
+      .wt-greeting-name { font-size: 20px; }
+      .wt-greeting-label { font-size: 11px; }
+      .wt-topbar { height: 22px; }
+      .wt-topbar span { width: 6px; height: 6px; }
+    }
+
+    /* Walkthrough — Mobile */
+    @media (max-width: 640px) {
+      .walkthrough { padding: 24px 0 16px; }
+      .walkthrough-inner { padding: 0 16px; }
+      .wt-device { top: 68px; }
+      .wt-device-frame { max-height: 30vh; }
+      .wt-app { max-height: calc(30vh - 22px); }
+      .wt-step {
+        top: calc(68px + 30vh + 12px);
+        padding: 20px 12px;
+      }
+      .wt-main { padding: 10px 12px; }
+      .wt-greeting-name { font-size: 16px; }
+      .wt-greeting-name .wt-sparkle { font-size: 14px; }
+      .wt-greeting-label { font-size: 9px; }
+      .wt-sidebar { width: 30px; }
+      .wt-sidebar-logo { width: 18px; height: 18px; }
+      .wt-sidebar-icon { width: 22px; height: 22px; }
+      .wt-sidebar-icon i { width: 11px; height: 11px; }
+      .wt-sidebar-avatar { width: 22px; height: 22px; font-size: 7px; }
+      .wt-brief { font-size: 9px; }
+      .wt-chat-input { padding: 6px 8px 6px 12px; }
+      .wt-chat-input span { font-size: 10px; }
+      .wt-chat-send { width: 22px; height: 22px; }
+      .wt-chat-send i { width: 11px; height: 11px; }
+      .wt-suggestion { font-size: 9px; }
+      .wt-suggestion i { width: 11px; height: 11px; }
     }
-    .pillar i { width: 18px; height: 18px; color: var(--primary-deep); }
 
     /* ═══════════════════════════════════════
        HOW IT WORKS
@@ -543,15 +868,16 @@
       text-align: center;
       padding: 40px 24px;
       border-radius: var(--radius);
-      background: var(--card-bg);
-      backdrop-filter: blur(16px);
-      border: 1px solid var(--card-border);
+      background: rgba(255, 255, 255, 0.55);
+      backdrop-filter: blur(20px);
+      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);
-      transform: translateY(-4px);
-      box-shadow: 0 12px 32px rgba(0,0,0,0.05);
+      background: rgba(255,255,255,0.75);
+      transform: translateY(-6px);
+      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 +904,17 @@
     .feature-card {
       padding: 28px;
       border-radius: var(--radius);
-      background: var(--card-bg);
-      backdrop-filter: blur(16px);
-      border: 1px solid var(--card-border);
-      transition: all var(--transition);
+      background: rgba(255, 255, 255, 0.5);
+      backdrop-filter: blur(20px);
+      border: 1px solid rgba(255, 255, 255, 0.6);
+      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);
-      transform: translateY(-3px);
-      box-shadow: 0 12px 32px rgba(0,0,0,0.04);
+      background: rgba(255,255,255,0.75);
+      box-shadow: 0 20px 48px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.03);
     }
     .feature-icon {
       width: 42px; height: 42px; border-radius: 12px;
@@ -623,9 +950,10 @@
       position: relative;
       padding: 40px;
       border-radius: var(--radius);
-      background: var(--card-bg);
-      backdrop-filter: blur(16px);
-      border: 1px solid var(--card-border);
+      background: rgba(255, 255, 255, 0.55);
+      backdrop-filter: blur(20px);
+      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 +984,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 +1041,8 @@
       .features-grid { grid-template-columns: 1fr; }
       .pillars { flex-direction: column; align-items: center; }
       nav { padding: 0 16px; }
-      .device-frame { transform: none; }
-      .device-frame:hover { transform: none; }
-      .section { padding: 80px 20px; }
+      .section { padding: 48px 20px; }
+      .final-cta { padding: 48px 20px; }
       .founder-quote { padding: 28px; }
     }
 
@@ -732,7 +1056,10 @@
         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; filter: none !important; }
+      .wt-sidebar, .wt-greeting, .wt-brief, .wt-chat, .wt-suggestions, .wt-pillars { opacity: 1 !important; transform: none !important; }
+      .wt-device { position: relative !important; top: auto !important; transform: none !important; }
+      .wt-progress { display: none !important; }
       .particle { display: none; }
     }
   </style>
@@ -746,8 +1073,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>
-      adiuv<span class="ai">AI</span>
+      </svg><span>adiuv<span class="ai">AI</span></span>
     </a>
     <a href="#final-cta" class="btn btn-primary">Join the waitlist</a>
   </nav>
@@ -786,12 +1112,12 @@
       <input type="email" name="email" placeholder="your@email.com" required autocomplete="email" aria-label="Email address">
       <button type="submit" class="btn btn-primary">Get early access</button>
     </form>
-    <p class="form-note hero-el">Free to start · No credit card · Early adopters get priority</p>
+    <p class="form-note hero-el">Free to start · No credit card · <a href="./privacy.html" style="color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;">Privacy policy</a></p>
 
     <div class="form-success" id="success-hero" role="status">
-      <div class="check-icon"><i data-lucide="check" style="color: var(--primary-deep); width:24px; height:24px;"></i></div>
-      <p>You're on the list!</p>
-      <p class="sub">We'll reach out when the beta launches.</p>
+      <div class="check-icon"><i data-lucide="mail" style="color: var(--primary-deep); width:24px; height:24px;"></i></div>
+      <p>Check your inbox!</p>
+      <p class="sub">We sent you a confirmation link. Click it to secure your spot.</p>
     </div>
 
     <div class="scroll-hint" aria-hidden="true">
@@ -800,47 +1126,97 @@
     </div>
   </section>
 
-  <!-- ═══════ SOCIAL PROOF BAR ═══════ -->
-  <div class="proof-bar" role="complementary">
-    Gmail, Outlook &amp; Teams
-    <span class="sep">·</span>
-    100% on your device
-  </div>
+  <!-- ═══════ APP WALKTHROUGH — Sticky Scroll ═══════ -->
+  <section class="walkthrough" id="walkthrough">
+      <div class="wt-progress" id="wt-progress"></div>
+      <div class="walkthrough-inner">
 
-  <!-- ═══════ THE PROBLEM — Scrollytelling ═══════ -->
-  <section class="section problem" id="problem">
-    <div class="problem-lines">
-      <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 ═══════ -->
-  <section class="section reveal" id="reveal">
-    <div class="container">
-      <p class="section-label gs-reveal">The product</p>
-      <h2 class="gs-reveal">Your daily brief, every morning.</h2>
-
-      <div class="device-frame gs-reveal">
-        <div class="device-topbar" aria-hidden="true">
-          <div class="device-dot"></div>
-          <div class="device-dot"></div>
-          <div class="device-dot"></div>
+        <!-- Text column -->
+        <div class="wt-text">
+          <div class="wt-step-pin">
+            <div class="wt-step" data-step="0">
+              <p class="wt-step-num">The problem</p>
+              <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="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>
+          </div>
+          <div class="wt-step-pin">
+            <div class="wt-step" data-step="1">
+              <p class="wt-step-num">The greeting</p>
+              <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>
+          <div class="wt-step-pin">
+            <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>
+          <div class="wt-step-pin">
+            <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>
+          </div>
+        </div>
+
+        <!-- Device column -->
+        <div class="wt-device">
+          <div class="wt-device-frame">
+            <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>
-        <!-- 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">
-        <div class="pillar gs-reveal"><i data-lucide="sparkles"></i> AI Secretary</div>
-        <div class="pillar gs-reveal"><i data-lucide="lock"></i> Private by Design</div>
-        <div class="pillar gs-reveal"><i data-lucide="scale"></i> EU AI Act Compliant</div>
       </div>
-    </div>
   </section>
 
   <!-- ═══════ HOW IT WORKS ═══════ -->
@@ -955,7 +1331,7 @@
             </svg>
             <div>
               <div class="name">Roberto Musso</div>
-              <div class="title">CEO</div>
+              <div class="title">Founder</div>
             </div>
           </div>
         </div>
@@ -973,12 +1349,12 @@
         <input type="email" name="email" placeholder="your@email.com" required autocomplete="email" aria-label="Email address">
         <button type="submit" class="btn btn-primary">Join the waitlist</button>
       </form>
-      <p class="form-note gs-reveal">No spam, ever. Unsubscribe anytime.</p>
+      <p class="form-note gs-reveal">No spam, ever. <a href="./privacy.html" style="color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;">Privacy policy</a></p>
 
       <div class="form-success" id="success-footer" role="status">
-        <div class="check-icon"><i data-lucide="check" style="color: var(--primary-deep); width:24px; height:24px;"></i></div>
-        <p>You're on the list!</p>
-        <p class="sub">We'll reach out when the beta launches.</p>
+        <div class="check-icon"><i data-lucide="mail" style="color: var(--primary-deep); width:24px; height:24px;"></i></div>
+        <p>Check your inbox!</p>
+        <p class="sub">We sent you a confirmation link. Click it to secure your spot.</p>
       </div>
     </div>
   </section>
@@ -989,8 +1365,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>
-      adiuv<span class="ai">AI</span>
+      </svg><span>adiuv<span class="ai">AI</span></span>
     </div>
     <p class="legal">
       &copy; 2026 adiuvAI. All rights reserved.
@@ -1080,22 +1455,52 @@
       });
     });
 
-    // ─── Problem: scroll-driven line reveals ───
-    const lines = gsap.utils.toArray('.problem-line, .problem-conclusion');
-    lines.forEach((el) => {
-      gsap.set(el, { opacity: 0, y: 28 });
-      gsap.to(el, {
-        opacity: 1,
-        y: 0,
-        ease: 'power2.out',
-        scrollTrigger: {
-          trigger: el,
-          start: 'top 82%',
-          end: 'top 58%',
-          scrub: 0.5,
-        },
+    // ─── Walkthrough: CSS sticky + IntersectionObserver ───
+    const wtSection = document.getElementById('walkthrough');
+    const wtSteps = document.querySelectorAll('.wt-step');
+    const wtProgress = document.getElementById('wt-progress');
+
+    if (wtSection && wtSteps.length) {
+      // IntersectionObserver for step activation (observe pin wrappers)
+      const wtPins = document.querySelectorAll('.wt-step-pin');
+      const activeSteps = new Set();
+      const stepObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          const stepEl = entry.target.querySelector('.wt-step');
+          const step = stepEl.getAttribute('data-step');
+          if (entry.isIntersecting) {
+            activeSteps.add(step);
+            wtSteps.forEach(s => s.classList.remove('active'));
+            stepEl.classList.add('active');
+            wtSection.setAttribute('data-step', step);
+          } else {
+            activeSteps.delete(step);
+            stepEl.classList.remove('active');
+            if (activeSteps.size === 0) {
+              wtSection.removeAttribute('data-step');
+            }
+          }
+        });
+      }, {
+        rootMargin: '-45% 0px -45% 0px',
+        threshold: 0,
       });
-    });
+
+      wtPins.forEach(pin => stepObserver.observe(pin));
+
+      // Scroll progress indicator
+      if (wtProgress) {
+        const updateProgress = () => {
+          const rect = wtSection.getBoundingClientRect();
+          const sectionH = wtSection.offsetHeight;
+          const scrolled = -rect.top;
+          const pct = Math.max(0, Math.min(100, (scrolled / (sectionH - window.innerHeight)) * 100));
+          wtProgress.style.height = pct + '%';
+        };
+        window.addEventListener('scroll', updateProgress, { passive: true });
+        updateProgress();
+      }
+    }
 
     // ─── Generic scroll reveals for gs-reveal ───
     gsap.utils.toArray('.gs-reveal').forEach((el, i) => {
@@ -1125,6 +1530,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 ───

privacy.html

@@ -259,6 +259,7 @@
       <p>We do not sell, rent, or trade your personal information. We share data only with:</p>
       <ul>
         <li><strong>Stripe</strong> — for payment processing (PCI DSS Level 1 compliant)</li>
+        <li><strong>Brevo (Sendinblue SAS)</strong> — for transactional emails (waitlist confirmation, product updates). Your email address is shared with Brevo solely to deliver these messages. Brevo acts as a data processor under GDPR and stores data in the EU. <a href="https://www.brevo.com/legal/privacypolicy/">Brevo Privacy Policy</a></li>
         <li><strong>LLM providers</strong> (OpenAI, Anthropic) — text snippets for AI processing, under no-training data agreements</li>
         <li><strong>Cloud infrastructure</strong> (hosting provider) — encrypted data only for cloud backup/sync features</li>
         <li><strong>Law enforcement</strong> — only when required by law, and limited to data we actually possess (account info, not your local content)</li>
@@ -286,7 +287,8 @@
       <ul>
         <li><strong>Account data:</strong> Retained while your account is active. Deleted within 30 days of account deletion request.</li>
         <li><strong>Encrypted backups:</strong> Deleted within 30 days of account deletion, or on your request.</li>
-        <li><strong>Waitlist emails:</strong> Retained until beta launch, then migrated to account data or deleted.</li>
+        <li><strong>Waitlist (confirmed):</strong> Retained until beta launch, then migrated to account data or deleted on request. Every email includes an unsubscribe link that immediately anonymizes your data.</li>
+        <li><strong>Waitlist (unconfirmed):</strong> Automatically anonymized after 48 hours. The anonymized record (signup date, source) is retained for aggregate analytics but contains no personal data.</li>
         <li><strong>Server logs:</strong> Retained for 90 days, then purged.</li>
         <li><strong>Local data:</strong> Under your control — persists until you delete it or uninstall the app.</li>
       </ul>