--- a/index.html
+++ b/index.html
@@ -3,142 +3,251 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>doany.ai — Workspace Setup</title>
+  <title>doany.ai — Get Started</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-  <!-- No skip-to-content link -->
-  <!-- No landmark roles -->
-
-  <div class="header">
-    <img src="logo.png" alt="">
-    <span style="font-size: 22px; font-weight: bold; color: #333;">doany.ai</span>
-  </div>
-
-  <!-- STEP 1: Welcome / Sign Up -->
-  <div id="step-1" class="onboarding-step active">
-    <h2 style="font-size: 20px; color: #888;">Create Your Account</h2>
-    <p style="color: #aaa; font-size: 13px;">Sign up to get started with doany.ai workspace</p>
-
-    <form id="signup-form">
-      <div class="form-row">
-        <label>First Name</label>
-        <input type="text" placeholder="John">
-      </div>
-      <div class="form-row">
-        <label>Last Name</label>
-        <input type="text" placeholder="Doe">
-      </div>
-      <div class="form-row">
-        <label>Email Address</label>
-        <input type="text" placeholder="john@company.com">
-      </div>
-      <div class="form-row">
-        <label>Password</label>
-        <input type="text" placeholder="Enter password">
-      </div>
-      <div class="form-row">
-        <label>Confirm Password</label>
-        <input type="text" placeholder="Confirm password">
-      </div>
-      <div class="form-row">
-        <label>Company Name</label>
-        <input type="text" placeholder="Acme Inc">
-      </div>
-      <div class="form-row">
-        <label>Role</label>
-        <select>
-          <option value="">Select your role</option>
-          <option>Developer</option>
-          <option>Designer</option>
-          <option>Product Manager</option>
-          <option>Marketing</option>
-          <option>Sales</option>
-          <option>Other</option>
-        </select>
-      </div>
-      <div class="form-row">
-        <label>Team Size</label>
-        <input type="number" placeholder="10">
-      </div>
-      <div class="form-row" style="margin-top: 5px;">
-        <input type="checkbox" id="terms">
-        <span style="font-size: 11px; color: #bbb;">I agree to the Terms of Service and Privacy Policy</span>
-      </div>
-
-      <div onclick="nextStep(2)" class="btn-primary">SIGN UP NOW →</div>
-    </form>
-  </div>
-
-  <!-- STEP 2: Workspace Config -->
-  <div id="step-2" class="onboarding-step">
-    <h2 style="font-size: 18px; color: #666;">Configure Workspace</h2>
-    <p style="color: #999; font-size: 12px;">Set up your team workspace</p>
-
-    <div class="form-row">
-      <label>Workspace Name</label>
-      <input type="text" placeholder="My Workspace">
-    </div>
-    <div class="form-row">
-      <label>Workspace URL</label>
-      <div style="display:flex; align-items:center; gap:4px;">
-        <span style="color:#999; font-size:13px;">doany.ai/</span>
-        <input type="text" placeholder="my-workspace" style="flex:1">
-      </div>
-    </div>
-    <div class="form-row">
-      <label>Industry</label>
-      <select>
-        <option value="">Pick one</option>
-        <option>Technology</option>
-        <option>Finance</option>
-        <option>Healthcare</option>
-        <option>Education</option>
-        <option>Retail</option>
-        <option>Other</option>
-      </select>
-    </div>
-    <div class="form-row">
-      <label>Primary Use Case</label>
-      <select>
-        <option value="">Pick one</option>
-        <option>Project Management</option>
-        <option>Design Collaboration</option>
-        <option>Engineering Workflows</option>
-        <option>Content Creation</option>
-      </select>
-    </div>
-
-    <div style="display: flex; gap: 8px; margin-top: 15px;">
-      <div onclick="nextStep(1)" class="btn-secondary">← Back</div>
-      <div onclick="nextStep(3)" class="btn-primary">CONTINUE →</div>
-    </div>
-  </div>
-
-  <!-- STEP 3: Invite Team -->
-  <div id="step-3" class="onboarding-step">
-    <h3 style="color: #555; font-size: 16px;">Invite your team members</h3>
-    <p style="font-size: 11px; color: #ccc;">Add emails below, separated by commas</p>
-
-    <textarea placeholder="alice@company.com, bob@company.com" rows="3" style="width: 100%; font-size: 12px; padding: 6px; border: 1px solid #ddd;"></textarea>
-
-    <div style="margin-top: 10px;">
-      <div onclick="nextStep(4)" class="btn-primary" style="background: #28a745;">SEND INVITES & FINISH</div>
-    </div>
-    <div onclick="nextStep(4)" style="font-size: 11px; color: #aaa; cursor: pointer; margin-top: 6px; text-align: center;">skip for now</div>
-  </div>
-
-  <!-- STEP 4: Done -->
-  <div id="step-4" class="onboarding-step">
-    <h2 style="color: #333;">🎉 You're all set!</h2>
-    <p style="color: #999; font-size: 13px;">Your workspace is ready to go.</p>
-    <div class="btn-primary" style="background: #007bff;">Go to Dashboard →</div>
-  </div>
-
-  <!-- Empty state (workspace with no projects) — shown after onboarding -->
-  <div id="empty-state" class="onboarding-step">
-    <p style="color: #ccc; font-size: 14px; text-align: center; margin-top: 60px;">No projects yet.</p>
-  </div>
+
+  <!-- Accessibility: skip link -->
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+
+  <!-- Header -->
+  <header class="header" role="banner">
+    <a href="/" class="header-logo" aria-label="doany.ai home">
+      <span class="header-logo-icon" aria-hidden="true">d</span>
+      <span class="header-wordmark">doany.ai</span>
+    </a>
+  </header>
+
+  <!-- Main content -->
+  <main id="main-content" class="onboarding-container" role="main">
+
+    <!-- Screen reader live region for step announcements -->
+    <div id="sr-announce" class="sr-only" aria-live="polite" aria-atomic="true"></div>
+
+    <!-- Progress bar -->
+    <nav class="progress-bar" aria-label="Onboarding progress">
+      <div class="progress-step active" data-step="1">
+        <div class="progress-dot" aria-current="step">
+          <span class="step-number">1</span>
+          <svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"></polyline></svg>
+        </div>
+        <div class="progress-line"></div>
+      </div>
+      <div class="progress-step" data-step="2">
+        <div class="progress-dot">
+          <span class="step-number">2</span>
+          <svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"></polyline></svg>
+        </div>
+        <div class="progress-line"></div>
+      </div>
+      <div class="progress-step" data-step="3">
+        <div class="progress-dot">
+          <span class="step-number">3</span>
+          <svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"></polyline></svg>
+        </div>
+      </div>
+    </nav>
+
+    <!-- ========================================
+         STEP 1: Create Account (minimal fields)
+         ======================================== -->
+    <section id="step-1" class="onboarding-step active" aria-labelledby="step-1-heading">
+      <h1 id="step-1-heading" class="step-heading">Create your account</h1>
+      <p class="step-subheading">Start building with doany.ai in under a minute.</p>
+
+      <!-- Network error banner -->
+      <div id="error-banner-1" class="error-banner" role="alert">
+        <span class="error-banner-icon" aria-hidden="true">!</span>
+        <span class="error-banner-text">Something went wrong. Please try again.</span>
+        <button class="error-banner-dismiss" aria-label="Dismiss error" onclick="dismissError('error-banner-1')">&times;</button>
+      </div>
+
+      <form id="signup-form" novalidate>
+        <div class="form-group">
+          <label class="form-label" for="email">Email address</label>
+          <input
+            id="email"
+            class="form-input"
+            type="email"
+            placeholder="you@company.com"
+            autocomplete="email"
+            required
+            aria-describedby="email-error"
+          >
+          <p id="email-error" class="form-error" role="alert">Please enter a valid email address.</p>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label" for="password">Password</label>
+          <div class="password-wrapper">
+            <input
+              id="password"
+              class="form-input"
+              type="password"
+              placeholder="At least 8 characters"
+              autocomplete="new-password"
+              minlength="8"
+              required
+              aria-describedby="password-error"
+            >
+            <button type="button" class="password-toggle" aria-label="Show password" onclick="togglePassword()">Show</button>
+          </div>
+          <p id="password-error" class="form-error" role="alert">Password must be at least 8 characters.</p>
+        </div>
+
+        <div class="checkbox-group">
+          <input id="terms" class="checkbox-input" type="checkbox" required aria-describedby="terms-error">
+          <label class="checkbox-label" for="terms">
+            I agree to the <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a>
+          </label>
+        </div>
+        <p id="terms-error" class="form-error" role="alert" style="padding-left: 32px;">You must accept the terms to continue.</p>
+
+        <div class="btn-row" style="margin-top: 28px;">
+          <button type="submit" class="btn-primary" id="signup-btn">
+            <span class="btn-label">Create account</span>
+            <span class="spinner" aria-hidden="true"></span>
+          </button>
+        </div>
+      </form>
+    </section>
+
+    <!-- ========================================
+         STEP 2: Set Up Workspace
+         ======================================== -->
+    <section id="step-2" class="onboarding-step" aria-labelledby="step-2-heading">
+      <h1 id="step-2-heading" class="step-heading">Set up your workspace</h1>
+      <p class="step-subheading">This is where your team will collaborate.</p>
+
+      <div id="error-banner-2" class="error-banner" role="alert">
+        <span class="error-banner-icon" aria-hidden="true">!</span>
+        <span class="error-banner-text">Something went wrong. Please try again.</span>
+        <button class="error-banner-dismiss" aria-label="Dismiss error" onclick="dismissError('error-banner-2')">&times;</button>
+      </div>
+
+      <form id="workspace-form" novalidate>
+        <div class="form-group">
+          <label class="form-label" for="workspace-name">Workspace name</label>
+          <input
+            id="workspace-name"
+            class="form-input"
+            type="text"
+            placeholder="Acme Inc"
+            required
+            aria-describedby="workspace-name-error"
+          >
+          <p id="workspace-name-error" class="form-error" role="alert">Please enter a workspace name.</p>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label" for="workspace-url">Workspace URL</label>
+          <div class="url-input-group">
+            <span class="url-prefix" aria-hidden="true">doany.ai/</span>
+            <input
+              id="workspace-url"
+              class="form-input"
+              type="text"
+              placeholder="acme"
+              required
+              aria-label="Workspace URL slug"
+              aria-describedby="workspace-url-error"
+            >
+          </div>
+          <p id="workspace-url-error" class="form-error" role="alert">Please choose a workspace URL.</p>
+        </div>
+
+        <div class="btn-row">
+          <button type="button" class="btn-secondary" onclick="goToStep(1)">Back</button>
+          <button type="submit" class="btn-primary" id="workspace-btn">
+            <span class="btn-label">Continue</span>
+            <span class="spinner" aria-hidden="true"></span>
+          </button>
+        </div>
+      </form>
+    </section>
+
+    <!-- ========================================
+         STEP 3: Invite Team (skippable)
+         ======================================== -->
+    <section id="step-3" class="onboarding-step" aria-labelledby="step-3-heading">
+      <h1 id="step-3-heading" class="step-heading">Invite your team</h1>
+      <p class="step-subheading">Collaboration is better together. You can always do this later.</p>
+
+      <div id="error-banner-3" class="error-banner" role="alert">
+        <span class="error-banner-icon" aria-hidden="true">!</span>
+        <span class="error-banner-text">Some invites couldn't be sent. Please check the addresses.</span>
+        <button class="error-banner-dismiss" aria-label="Dismiss error" onclick="dismissError('error-banner-3')">&times;</button>
+      </div>
+
+      <form id="invite-form" novalidate>
+        <div class="form-group">
+          <label class="form-label" for="invite-emails">Email addresses</label>
+          <textarea
+            id="invite-emails"
+            class="form-textarea"
+            placeholder="alice@company.com, bob@company.com"
+            rows="3"
+            aria-describedby="invite-hint"
+          ></textarea>
+          <p id="invite-hint" style="font-size: 13px; color: var(--color-neutral-400); margin-top: 4px;">Separate multiple addresses with commas.</p>
+        </div>
+
+        <div class="btn-row">
+          <button type="button" class="btn-secondary" onclick="goToStep(2)">Back</button>
+          <button type="submit" class="btn-primary" id="invite-btn">
+            <span class="btn-label">Send invites</span>
+            <span class="spinner" aria-hidden="true"></span>
+          </button>
+        </div>
+        <button type="button" class="btn-text" onclick="finishOnboarding()">Skip for now</button>
+      </form>
+    </section>
+
+    <!-- ========================================
+         SUCCESS STATE
+         ======================================== -->
+    <section id="step-success" class="onboarding-step" aria-labelledby="success-heading">
+      <div class="success-content">
+        <div class="success-icon" aria-hidden="true">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+        </div>
+        <h1 id="success-heading" class="success-heading">You're all set</h1>
+        <p class="success-text">Your workspace is ready. Let's build something great.</p>
+        <button class="btn-primary" onclick="goToDashboard()" style="width: auto; display: inline-flex; padding: 12px 32px;">
+          <span class="btn-label">Go to dashboard</span>
+        </button>
+      </div>
+    </section>
+
+    <!-- ========================================
+         EMPTY STATE (Dashboard — post-onboarding)
+         ======================================== -->
+    <section id="empty-state" class="onboarding-step" aria-labelledby="empty-heading">
+      <div class="empty-state">
+        <!-- Inline SVG illustration -->
+        <svg class="empty-illustration" viewBox="0 0 180 140" fill="none" aria-hidden="true">
+          <rect x="20" y="30" width="140" height="90" rx="12" fill="#EEF2FF" stroke="#C7D2FE" stroke-width="1.5"/>
+          <rect x="36" y="50" width="48" height="6" rx="3" fill="#C7D2FE"/>
+          <rect x="36" y="64" width="72" height="4" rx="2" fill="#E0E7FF"/>
+          <rect x="36" y="76" width="56" height="4" rx="2" fill="#E0E7FF"/>
+          <rect x="36" y="92" width="32" height="12" rx="6" fill="#6366F1"/>
+          <circle cx="140" cy="30" r="14" fill="#6366F1" opacity="0.15"/>
+          <path d="M136 30h8M140 26v8" stroke="#6366F1" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+        <h2 id="empty-heading" class="empty-heading">Create your first project</h2>
+        <p class="empty-text">Projects keep your team's work organized. Start with one and add more as you grow.</p>
+        <button class="btn-primary" onclick="createProject()">
+          <span class="btn-label">New project</span>
+        </button>
+        <p class="empty-hint">Or import from an existing tool</p>
+      </div>
+    </section>
+
+  </main>
 
   <script src="onboarding.js"></script>
 </body>
