diff --git a/.env.example b/.env.example
index f58040a..6484b3c 100644
--- a/.env.example
+++ b/.env.example
@@ -1,8 +1,11 @@
-# Secret key for JWT
+# Secret key for JWT (generate with: openssl rand -base64 32)
 SECRET_KEY=
 
-# Base URL
-BASE_URL=http://localhost:8000
+# Dev server port (8001 avoids conflict with other projects on 8000)
+APP_PORT=8001
+
+# Base URL (must match APP_PORT for local dev)
+BASE_URL=http://127.0.0.1:8001
 
 # Database connection mode (0 = direct, 1 = pooled)
 USE_POOL=0
@@ -14,8 +17,9 @@ DB_SSLMODE=prefer
 # Direct connection settings (when USE_POOL=0)
 DB_USER=postgres
 DB_PASSWORD=postgres
-DB_PORT=5432
-DB_NAME=
+# Use 5433 if another project already uses 5432
+DB_PORT=5433
+DB_NAME=calliflowr
 
 # Pooled connection settings (when USE_POOL=1)
 # DB_APPUSER=
@@ -37,4 +41,7 @@ DOMAIN=
 
 # Resend
 RESEND_API_KEY=
-EMAIL_FROM=
\ No newline at end of file
+EMAIL_FROM=
+
+# Website lead notifications (defaults to hello@calliflowr.com)
+# LEADS_NOTIFY_EMAIL=
\ No newline at end of file
diff --git a/dev.py b/dev.py
new file mode 100644
index 0000000..3d3978f
--- /dev/null
+++ b/dev.py
@@ -0,0 +1,14 @@
+"""Start the local dev server (reads APP_PORT from .env)."""
+
+import os
+
+from dotenv import load_dotenv
+
+load_dotenv()
+
+if __name__ == "__main__":
+    import uvicorn
+
+    port = int(os.getenv("APP_PORT", "8001"))
+    host = os.getenv("APP_HOST", "127.0.0.1")
+    uvicorn.run("main:app", host=host, port=port, reload=True)
diff --git a/main.py b/main.py
index d2f7935..15d8bdd 100644
--- a/main.py
+++ b/main.py
@@ -1,7 +1,8 @@
 import logging
+import os
 from contextlib import asynccontextmanager
 from dotenv import load_dotenv
-from fastapi import FastAPI, Request, Depends, status
+from fastapi import FastAPI, Request, status
 from fastapi.responses import RedirectResponse, Response
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
@@ -16,9 +17,9 @@
     static_pages,
     invitation,
 )
+from routers.website import home, demo, leads
 from utils.core.dependencies import (
     get_user_from_request,
-    require_unauthenticated_client,
 )
 from utils.core.auth import refresh_token_is_persistent, set_auth_cookies
 from utils.core.rate_limit import get_trusted_proxy_hosts
@@ -109,6 +110,9 @@ async def csrf_middleware(request: Request, call_next):
 # --- Include Routers ---
 
 
+app.include_router(home.router)
+app.include_router(demo.router)
+app.include_router(leads.router)
 app.include_router(account.router)
 app.include_router(dashboard.router)
 app.include_router(invitation.router)
@@ -389,17 +393,8 @@ async def general_exception_handler(request: Request, exc: Exception):
     )
 
 
-# --- Home Page ---
-
-
-@app.get("/")
-async def read_home(
-    request: Request, _: None = Depends(require_unauthenticated_client)
-):
-    return templates.TemplateResponse(request, "index.html", {"user": None})
-
-
 if __name__ == "__main__":
     import uvicorn
 
-    uvicorn.run(app, host="0.0.0.0", port=8000)
+    port = int(os.getenv("APP_PORT", "8001"))
+    uvicorn.run(app, host="0.0.0.0", port=port)
diff --git a/routers/core/static_pages.py b/routers/core/static_pages.py
index ca859fb..5b78e54 100644
--- a/routers/core/static_pages.py
+++ b/routers/core/static_pages.py
@@ -3,6 +3,7 @@
 from fastapi.templating import Jinja2Templates
 from utils.core.dependencies import get_optional_user
 from utils.core.models import User
+from utils.website.content import website_home_context
 
 router = APIRouter(tags=["static_pages"])
 templates = Jinja2Templates(directory="templates")
@@ -10,8 +11,19 @@
 # Define valid static pages to prevent arbitrary template access
 VALID_PAGES = {
     "about": "static_pages/about.html",
+    "blog": "static_pages/blog.html",
+    "customers": "static_pages/customers.html",
     "privacy-policy": "static_pages/privacy_policy.html",
-    "terms-of-service": "static_pages/terms_of_service.html",
+    "terms-and-conditions": "static_pages/terms_and_conditions.html",
+    "website-fulfillment-policy": "static_pages/website_fulfillment_policy.html",
+}
+
+WEBSITE_THEMED_PAGES = {
+    "about",
+    "blog",
+    "privacy-policy",
+    "terms-and-conditions",
+    "website-fulfillment-policy",
 }
 
 
@@ -36,4 +48,8 @@ async def read_static_page(
     if page_name not in VALID_PAGES:
         raise HTTPException(status_code=404, detail="Page not found")
 
-    return templates.TemplateResponse(request, VALID_PAGES[page_name], {"user": user})
+    context: dict = {"user": user}
+    if page_name in WEBSITE_THEMED_PAGES:
+        context.update(website_home_context())
+
+    return templates.TemplateResponse(request, VALID_PAGES[page_name], context)
diff --git a/routers/website/__init__.py b/routers/website/__init__.py
new file mode 100644
index 0000000..0e9a8ba
--- /dev/null
+++ b/routers/website/__init__.py
@@ -0,0 +1,3 @@
+from routers.website import demo, home, leads
+
+__all__ = ["demo", "home", "leads"]
diff --git a/routers/website/demo.py b/routers/website/demo.py
new file mode 100644
index 0000000..fc278df
--- /dev/null
+++ b/routers/website/demo.py
@@ -0,0 +1,112 @@
+from typing import Optional
+
+from fastapi import APIRouter, Depends, Form, Request
+from fastapi.responses import RedirectResponse
+from fastapi.templating import Jinja2Templates
+
+from utils.core.dependencies import get_optional_user
+from utils.core.htmx import set_flash_cookie
+from utils.core.models import User
+from exceptions.http_exceptions import RateLimitError
+from utils.core.rate_limit import check_website_lead_ip_rate_limit
+from utils.website.content import website_demo_context
+from utils.website.forms import BookDemoSubmission
+from utils.website.notifications import notify_book_demo
+
+router = APIRouter(tags=["website"])
+templates = Jinja2Templates(directory="templates")
+
+
+def _demo_template_context(
+    request: Request,
+    user: Optional[User],
+    *,
+    form_values: dict | None = None,
+    form_errors: dict | None = None,
+    form_error: str | None = None,
+) -> dict:
+    return {
+        "request": request,
+        "user": user,
+        "form_values": form_values or {},
+        "form_errors": form_errors or {},
+        "form_error": form_error,
+        **website_demo_context(),
+    }
+
+
+@router.get("/demo", name="read_demo")
+async def read_demo(
+    request: Request,
+    user: Optional[User] = Depends(get_optional_user),
+):
+    """Public book-a-demo page."""
+    return templates.TemplateResponse(
+        request,
+        "website/demo.html",
+        _demo_template_context(request, user),
+    )
+
+
+@router.post("/demo", name="submit_book_demo")
+async def submit_book_demo(
+    request: Request,
+    user: Optional[User] = Depends(get_optional_user),
+    work_email: str = Form(""),
+    first_name: str = Form(""),
+    last_name: str = Form(""),
+    company: str = Form(""),
+    trade: str = Form(""),
+    phone: str = Form(""),
+    technicians: str = Form(""),
+    phone_answerer: str = Form(""),
+):
+    form_values = {
+        "work_email": work_email,
+        "first_name": first_name,
+        "last_name": last_name,
+        "company": company,
+        "trade": trade,
+        "phone": phone,
+        "technicians": technicians,
+        "phone_answerer": phone_answerer,
+    }
+
+    try:
+        check_website_lead_ip_rate_limit(request)
+    except RateLimitError:
+        return templates.TemplateResponse(
+            request,
+            "website/demo.html",
+            _demo_template_context(
+                request,
+                user,
+                form_values=form_values,
+                form_error="Too many requests. Please try again in a little while.",
+            ),
+            status_code=429,
+        )
+
+    submission, form_errors = BookDemoSubmission.from_form(**form_values)
+    if submission is None:
+        return templates.TemplateResponse(
+            request,
+            "website/demo.html",
+            _demo_template_context(
+                request,
+                user,
+                form_values=form_values,
+                form_errors=form_errors,
+            ),
+            status_code=422,
+        )
+
+    notify_book_demo(submission)
+
+    response = RedirectResponse(url=str(request.url_for("read_demo")), status_code=303)
+    set_flash_cookie(
+        response,
+        "Thanks — we'll be in touch shortly to schedule your demo.",
+        level="success",
+    )
+    return response
diff --git a/routers/website/home.py b/routers/website/home.py
new file mode 100644
index 0000000..ef8cf87
--- /dev/null
+++ b/routers/website/home.py
@@ -0,0 +1,25 @@
+from typing import Optional
+
+from fastapi import APIRouter, Depends, Request
+from fastapi.templating import Jinja2Templates
+
+from utils.core.dependencies import get_optional_user
+from utils.core.models import User
+from utils.website.content import website_home_context
+
+router = APIRouter(tags=["website"])
+templates = Jinja2Templates(directory="templates")
+
+
+@router.get("/", name="read_home")
+async def read_home(
+    request: Request,
+    user: Optional[User] = Depends(get_optional_user),
+):
+    """Public Calliflowr website homepage."""
+    context = {"user": user, **website_home_context()}
+    return templates.TemplateResponse(
+        request,
+        "website/index.html",
+        context,
+    )
diff --git a/routers/website/leads.py b/routers/website/leads.py
new file mode 100644
index 0000000..6b289c6
--- /dev/null
+++ b/routers/website/leads.py
@@ -0,0 +1,78 @@
+from typing import Optional
+
+from fastapi import APIRouter, Depends, Form, Request
+from fastapi.responses import RedirectResponse
+
+from utils.core.dependencies import get_optional_user
+from utils.core.htmx import set_flash_cookie
+from utils.core.models import User
+from exceptions.http_exceptions import RateLimitError
+from utils.core.rate_limit import check_website_lead_ip_rate_limit
+from utils.website.forms import CallMeSubmission
+from utils.website.notifications import notify_call_me
+
+router = APIRouter(tags=["website"])
+
+
+@router.post("/call-me", name="submit_call_me")
+async def submit_call_me(
+    request: Request,
+    name: str = Form(""),
+    business: str = Form(""),
+    email: str = Form(""),
+    phone: str = Form(""),
+    industry: str = Form(""),
+    crm: str = Form(""),
+    crm_other: str = Form(""),
+    user: Optional[User] = Depends(get_optional_user),
+):
+    del user  # public endpoint; auth state does not affect submission
+
+    form_values = {
+        "name": name,
+        "business": business,
+        "email": email,
+        "phone": phone,
+        "industry": industry,
+        "crm": crm,
+        "crm_other": crm_other,
+    }
+
+    try:
+        check_website_lead_ip_rate_limit(request)
+    except RateLimitError:
+        response = RedirectResponse(
+            url=str(request.url_for("read_home")) + "#call-me",
+            status_code=303,
+        )
+        set_flash_cookie(
+            response,
+            "Too many requests. Please try again in a little while.",
+            level="danger",
+        )
+        return response
+
+    submission, form_errors = CallMeSubmission.from_form(**form_values)
+    if submission is None:
+        first_error = next(
+            iter(form_errors.values()), "Please check the form and try again."
+        )
+        response = RedirectResponse(
+            url=str(request.url_for("read_home")) + "#call-me",
+            status_code=303,
+        )
+        set_flash_cookie(response, first_error, level="danger")
+        return response
+
+    notify_call_me(submission)
+
+    response = RedirectResponse(
+        url=str(request.url_for("read_home")) + "#call-me",
+        status_code=303,
+    )
+    set_flash_cookie(
+        response,
+        "Thanks — we'll have Calli ring you shortly.",
+        level="success",
+    )
+    return response
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
index 7b8c78d..5eff7af 100644
Binary files a/static/apple-touch-icon.png and b/static/apple-touch-icon.png differ
diff --git a/static/css/website/base.css b/static/css/website/base.css
new file mode 100644
index 0000000..70d8f4e
--- /dev/null
+++ b/static/css/website/base.css
@@ -0,0 +1,53 @@
+/*
+ * Website base styles — reset and page shell.
+ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    -webkit-font-smoothing: antialiased;
+}
+
+body.website-body {
+    margin: 0;
+    font-family: var(--font-body);
+    color: var(--color-ink);
+    background: var(--color-page);
+}
+
+.website-body a {
+    text-decoration: none;
+    color: var(--color-link);
+}
+
+.website-body a:hover {
+    color: var(--color-deep-fir);
+}
+
+.website-site {
+    width: 100%;
+    min-height: 100vh;
+    background: var(--color-page);
+}
+
+.website-display {
+    font-family: var(--font-display);
+}
+
+@keyframes website-live-pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(159, 232, 112, 0.55);
+    }
+
+    70% {
+        box-shadow: 0 0 0 8px rgba(159, 232, 112, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(159, 232, 112, 0);
+    }
+}
diff --git a/static/css/website/components.css b/static/css/website/components.css
new file mode 100644
index 0000000..c39c524
--- /dev/null
+++ b/static/css/website/components.css
@@ -0,0 +1,536 @@
+/*
+ * Reusable website UI components.
+ */
+
+/* Live status dot */
+.website-live-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-live-dot);
+    animation: website-live-pulse 1.8s infinite;
+    flex: none;
+}
+
+/* Eyebrow / pill badge */
+.website-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 9px;
+    padding: 7px 15px;
+    border-radius: var(--radius-pill);
+    font-size: 12.5px;
+    font-weight: 650;
+    background: var(--color-eyebrow-bg);
+    border: 1px solid var(--color-eyebrow-border);
+    color: var(--color-eyebrow-text);
+}
+
+.website-eyebrow--on-dark {
+    background: rgba(159, 232, 112, 0.13);
+    border: 1px solid rgba(159, 232, 112, 0.28);
+    color: var(--color-sulu);
+}
+
+/* Buttons */
+.website-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 15px 26px;
+    border-radius: var(--radius-lg);
+    font-size: 15.5px;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition:
+        transform var(--ease-hover),
+        filter var(--ease-hover),
+        background-color var(--ease-hover),
+        color var(--ease-hover);
+    white-space: nowrap;
+}
+
+.website-btn:hover {
+    transform: translateY(-1px);
+    filter: brightness(1.04);
+}
+
+.website-body a.website-btn--primary {
+    background: var(--color-deep-fir);
+    color: #ffffff;
+}
+
+.website-body a.website-btn--primary:hover {
+    background: var(--color-deep-fir);
+    color: #ffffff;
+    filter: none;
+}
+
+.website-body a.website-btn--secondary {
+    background: var(--color-panel);
+    border-color: var(--color-border);
+    color: var(--color-ink);
+}
+
+.website-body a.website-btn--secondary:hover {
+    color: var(--color-ink);
+}
+
+.website-body a.website-btn.website-btn--nav {
+    padding: 11px 20px;
+    border-radius: 10px;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.2;
+    min-height: 42px;
+    height: 42px;
+    box-sizing: border-box;
+}
+
+.website-btn--nav.website-btn--primary {
+    background: var(--color-deep-fir);
+    color: #ffffff;
+}
+
+.website-body a.website-btn--nav.website-btn--primary {
+    color: #ffffff;
+}
+
+.website-body a.website-btn--lime {
+    background: var(--color-sulu);
+    color: var(--color-deep-fir);
+}
+
+.website-body a.website-btn--lime:hover {
+    color: var(--color-deep-fir);
+}
+
+.website-body a.website-btn--cta-light {
+    background: rgba(255, 255, 255, 0.55);
+    color: var(--color-deep-fir);
+}
+
+.website-body a.website-btn--cta-light:hover {
+    color: var(--color-deep-fir);
+}
+
+.website-body a.website-btn--ghost-on-dark {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.22);
+    color: #ffffff;
+}
+
+.website-body a.website-btn--ghost-on-dark:hover {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    filter: none;
+}
+
+.website-btn--compact {
+    padding: 12px 22px;
+    border-radius: var(--radius-md);
+    font-size: 14px;
+    font-weight: 750;
+}
+
+.website-btn--cta {
+    padding: 16px 30px;
+    font-size: 15.5px;
+    font-weight: 750;
+}
+
+.website-live-dot--small {
+    width: 7px;
+    height: 7px;
+    background: var(--color-sulu);
+}
+
+.website-live-dot--sulu {
+    background: var(--color-sulu);
+    animation: website-live-pulse 1.8s infinite;
+}
+
+/* Section eyebrow */
+.website-section-eyebrow {
+    display: inline-block;
+    font-size: 12.5px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #5a8a3f;
+}
+
+.website-section-eyebrow--on-dark {
+    color: var(--color-sulu);
+}
+
+/* Step badge */
+.website-step-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 26px;
+    padding: 0 11px;
+    border-radius: 999px;
+    background: var(--color-deep-fir);
+    color: var(--color-sulu);
+    font-family: var(--font-display);
+    font-weight: 750;
+    font-size: 12px;
+    letter-spacing: 0.01em;
+    line-height: 1;
+    white-space: nowrap;
+    flex: none;
+}
+
+/* Status pill */
+.website-status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 11.5px;
+    font-weight: 700;
+    padding: 6px 13px;
+    border-radius: var(--radius-pill);
+}
+
+.website-status-pill--live {
+    background: var(--color-sulu);
+    color: var(--color-deep-fir);
+}
+
+.website-status-pill--tilt {
+    /* kept for optional use; no default tilt */
+}
+
+.website-status-pill__dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--color-deep-fir);
+}
+
+/* Media placeholder */
+.website-media-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(145deg, #eef2e9 0%, #e2e8da 100%);
+    border: 1px dashed #cdd6c1;
+    color: var(--color-muted);
+    text-align: center;
+}
+
+.website-media-placeholder__label {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.45;
+    max-width: 12rem;
+    padding: 1rem;
+}
+
+/* Form mock (call-me preview) */
+.website-form-mock {
+    display: flex;
+    flex-direction: column;
+    gap: 13px;
+}
+
+.website-form-mock__field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.website-form-mock__label {
+    font-size: 12px;
+    font-weight: 650;
+    color: var(--color-body);
+}
+
+.website-form-mock__input {
+    padding: 12px 14px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    font-size: 14px;
+    background: #fbfdf9;
+}
+
+.website-form-mock__input--muted {
+    color: var(--color-muted);
+}
+
+.website-form-mock__input--active {
+    border-color: #b7d69a;
+    color: var(--color-deep-fir);
+    font-weight: 650;
+}
+
+.website-form-mock__submit {
+    width: 100%;
+    justify-content: center;
+    margin-top: 4px;
+}
+
+.website-form-mock__hint {
+    margin: 2px 0 0;
+    font-size: 11.5px;
+    color: var(--color-muted);
+    text-align: center;
+}
+
+/* Real forms */
+.website-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.website-form__row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 14px;
+}
+
+.website-form__field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.website-form__field.is-hidden,
+.website-form__field[hidden] {
+    display: none;
+}
+
+.website-form__label {
+    font-size: 12.5px;
+    font-weight: 650;
+    color: #3a4a38;
+}
+
+.website-form__required {
+    color: #e5484d;
+}
+
+.website-form__input,
+.website-form__select {
+    width: 100%;
+    padding: 13px 14px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    font-size: 14px;
+    background: #fbfdf9;
+    color: var(--color-deep-fir);
+    font-family: inherit;
+}
+
+.website-form__input::placeholder {
+    color: #9aa697;
+}
+
+.website-form__phone {
+    display: flex;
+    align-items: stretch;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: #fbfdf9;
+    overflow: hidden;
+}
+
+.website-form__phone-prefix {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 12px;
+    border-right: 1px solid var(--color-border);
+    color: var(--color-body);
+    font-size: 14px;
+    font-weight: 650;
+    background: #eef4e6;
+    flex: none;
+}
+
+.website-form__phone-input {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+}
+
+.website-form__phone-input:focus {
+    outline: none;
+}
+
+.website-form__phone:focus-within {
+    border-color: #b7d69a;
+    box-shadow: 0 0 0 3px rgba(159, 232, 112, 0.25);
+}
+
+.website-form__input--error,
+.website-form__select.website-form__input--error {
+    border-color: #e5484d;
+}
+
+.website-form__error {
+    margin: 0;
+    font-size: 12px;
+    color: #e5484d;
+}
+
+.website-form__footnote,
+.website-form__hint {
+    margin: 0;
+    font-size: 12.5px;
+    color: var(--color-muted);
+    text-align: center;
+}
+
+.website-form__banner {
+    margin-top: 20px;
+    padding: 14px 16px;
+    border-radius: var(--radius-md);
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.website-form__banner--success {
+    background: var(--color-eyebrow-bg);
+    border: 1px solid var(--color-eyebrow-border);
+    color: var(--color-eyebrow-text);
+}
+
+.website-form__banner--error {
+    background: #fff0f0;
+    border: 1px solid #f3c4c4;
+    color: #9b1c1c;
+}
+
+.website-flash {
+    padding: 12px var(--site-gutter);
+    font-size: 14px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.website-flash--success {
+    background: var(--color-eyebrow-bg);
+    color: var(--color-eyebrow-text);
+}
+
+.website-flash--danger {
+    background: #fff0f0;
+    color: #9b1c1c;
+}
+
+/* Chat mock */
+.website-chat-mock {
+    background: var(--color-deep-fir);
+    border-radius: 18px;
+    padding: 20px 20px 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.website-chat-mock__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: none;
+}
+
+.website-chat-mock__messages {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.website-chat-mock__live {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(159, 232, 112, 0.14);
+    color: var(--color-sulu);
+    font-size: 11.5px;
+    font-weight: 700;
+    padding: 6px 12px;
+    border-radius: var(--radius-pill);
+}
+
+.website-chat-mock__timer {
+    font-size: 11.5px;
+    font-weight: 650;
+    color: var(--color-on-dark-accent);
+    font-variant-numeric: tabular-nums;
+}
+
+.website-chat-bubble {
+    margin: 0;
+    max-width: 86%;
+    font-size: 13px;
+    line-height: 1.5;
+    padding: 10px 14px;
+}
+
+.website-chat-bubble--caller {
+    align-self: flex-start;
+    background: rgba(255, 255, 255, 0.1);
+    color: #e4f0d8;
+    border-radius: 14px 14px 14px 4px;
+}
+
+.website-chat-bubble--agent {
+    align-self: flex-end;
+    background: var(--color-sulu);
+    color: var(--color-deep-fir);
+    font-weight: 550;
+    border-radius: 14px 14px 4px 14px;
+}
+
+/* Checklist */
+.website-checklist {
+    display: flex;
+    gap: 18px;
+    margin: 20px 0 0;
+    padding: 0;
+    list-style: none;
+    font-size: 13px;
+    font-weight: 650;
+    color: #5a8a3f;
+    flex-wrap: wrap;
+}
+
+/* Nav text link */
+.website-body a.website-nav-link {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-on-dark-muted);
+    padding: 11px 6px;
+    text-decoration: underline;
+    text-decoration-color: currentColor;
+    text-underline-offset: 0.42em;
+    text-decoration-thickness: 1px;
+    transition:
+        color var(--ease-hover),
+        text-decoration-color var(--ease-hover);
+}
+
+.website-body a.website-nav-link:hover {
+    color: #ffffff;
+    text-decoration-color: #ffffff;
+}
+
+.website-body a.website-nav-anchor {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-on-dark-muted);
+    padding: 11px 0;
+    border-radius: 0;
+    transition: color var(--ease-hover);
+}
+
+.website-body a.website-nav-anchor:hover {
+    background: transparent;
+    color: #ffffff;
+}
diff --git a/static/css/website/demo.css b/static/css/website/demo.css
new file mode 100644
index 0000000..f8d3552
--- /dev/null
+++ b/static/css/website/demo.css
@@ -0,0 +1,267 @@
+/*
+ * Book-a-demo page (demo-v2).
+ */
+
+.website-body--demo {
+    background: #f7f9f4;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.website-site--demo {
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.website-demo {
+    display: grid;
+    grid-template-columns: 46fr 54fr;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.website-demo__brand-panel {
+    background: var(--color-deep-fir);
+    color: #ffffff;
+    padding: 28px 48px 28px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.website-demo__brand-top {
+    display: flex;
+    align-items: center;
+}
+
+.website-body a.website-demo__back-link {
+    font-size: 13.5px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.72);
+}
+
+.website-body a.website-demo__back-link:hover {
+    color: #ffffff;
+}
+
+.website-demo__brand-copy {
+    margin-top: 36px;
+}
+
+.website-demo__title {
+    font-family: var(--font-display);
+    font-size: 40px;
+    line-height: 1.06;
+    font-weight: 800;
+    letter-spacing: -0.028em;
+    margin: 16px 0 0;
+    color: #ffffff;
+    max-width: 480px;
+}
+
+.website-demo__title-accent {
+    color: var(--color-sulu);
+}
+
+.website-demo__lead {
+    font-size: 15px;
+    line-height: 1.55;
+    color: var(--color-on-dark-muted);
+    margin: 14px 0 0;
+    max-width: 440px;
+}
+
+.website-demo__metrics {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+    margin-top: 28px;
+}
+
+.website-demo__metric {
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.13);
+    border-radius: 14px;
+    padding: 16px 14px;
+    text-align: center;
+}
+
+.website-demo__metric-value {
+    font-family: var(--font-display);
+    font-size: 28px;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    color: var(--color-sulu);
+}
+
+.website-demo__metric-label {
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--color-on-dark-muted);
+    margin-top: 6px;
+    line-height: 1.45;
+}
+
+.website-demo__on-demo {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 16px;
+    padding: 20px 22px;
+    margin-top: auto;
+}
+
+.website-demo__on-demo-label {
+    font-size: 11.5px;
+    font-weight: 700;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--color-on-dark-accent);
+    margin: 0 0 14px;
+}
+
+.website-demo__on-demo-list {
+    display: flex;
+    flex-direction: column;
+    gap: 11px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.website-demo__on-demo-list li {
+    display: flex;
+    gap: 11px;
+    align-items: flex-start;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #e4f0d8;
+}
+
+.website-demo__on-demo-list span {
+    color: var(--color-sulu);
+    font-weight: 800;
+}
+
+.website-demo__founder {
+    display: flex;
+    align-items: center;
+    gap: 13px;
+    margin-top: 18px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.website-demo__founder-photo {
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    flex: none;
+}
+
+.website-demo__founder-copy {
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--color-on-dark-muted);
+    margin: 0;
+}
+
+.website-demo__founder-copy strong {
+    color: #ffffff;
+    font-weight: 650;
+}
+
+.website-demo__form-panel {
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: #f7f9f4;
+    padding: 32px 60px 44px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.website-demo__support {
+    position: relative;
+    text-align: right;
+    font-size: 13px;
+    color: var(--color-muted);
+    font-weight: 550;
+    margin: 0;
+}
+
+.website-demo__support a {
+    font-weight: 650;
+}
+
+.website-demo__form-wrap {
+    position: relative;
+    max-width: 600px;
+    margin: 44px auto 0;
+    width: 100%;
+}
+
+.website-demo__form-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.website-demo__form-title {
+    font-family: var(--font-display);
+    font-size: 34px;
+    font-weight: 800;
+    letter-spacing: -0.025em;
+    color: var(--color-deep-fir);
+    margin: 0;
+}
+
+.website-demo__form-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 10px 0 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #5a8a3f;
+}
+
+.website-demo__form-status-icon {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--color-eyebrow-bg);
+    border: 1px solid #c8dbb4;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    color: var(--color-eyebrow-text);
+}
+
+.website-demo__form-card {
+    background: #ffffff;
+    border: 1px solid var(--color-border-soft);
+    border-radius: 18px;
+    padding: 30px 28px;
+    margin-top: 26px;
+    box-shadow: 0 24px 50px -34px rgba(10, 31, 10, 0.3);
+}
+
+.website-btn--demo-submit {
+    width: 100%;
+    justify-content: center;
+    padding: 15px;
+    border-radius: var(--radius-lg);
+    font-size: 15.5px;
+    font-weight: 750;
+    margin-top: 4px;
+    border: none;
+    cursor: pointer;
+}
diff --git a/static/css/website/login.css b/static/css/website/login.css
new file mode 100644
index 0000000..8f799c7
--- /dev/null
+++ b/static/css/website/login.css
@@ -0,0 +1,400 @@
+/*
+ * Calliflowr branded login (email + password).
+ */
+
+.cf-login-body {
+    margin: 0;
+    min-height: 100vh;
+    font-family: "Instrument Sans", var(--font-body);
+    color: var(--color-ink);
+    background: var(--color-page);
+    -webkit-font-smoothing: antialiased;
+}
+
+.cf-login {
+    display: grid;
+    grid-template-columns: 480px minmax(0, 1fr);
+    min-height: 100vh;
+    background: var(--color-page);
+}
+
+.cf-login__brand {
+    position: relative;
+    background: var(--color-deep-fir);
+    padding: 48px 52px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.cf-login-body a.cf-login__brand-mark {
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: 22px;
+    letter-spacing: -0.02em;
+    color: #ffffff;
+    text-decoration: none;
+}
+
+.cf-login-body a.cf-login__brand-mark:hover {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+.cf-login__brand-copy {
+    margin-top: auto;
+    position: relative;
+    z-index: 2;
+}
+
+.cf-login__live {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--color-deep-fir);
+    border: 1px solid rgba(159, 232, 112, 0.35);
+    color: var(--color-sulu);
+    font-size: 12px;
+    font-weight: 700;
+    padding: 8px 14px;
+    border-radius: var(--radius-pill);
+}
+
+.cf-login__live-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--color-sulu);
+    animation: website-live-pulse 1.6s infinite;
+}
+
+.cf-login__brand-title {
+    font-family: var(--font-display);
+    font-size: 34px;
+    line-height: 1.14;
+    font-weight: 800;
+    letter-spacing: -0.025em;
+    color: #ffffff;
+    margin: 20px 0 0;
+}
+
+.cf-login__brand-highlight {
+    background: var(--color-sulu);
+    color: var(--color-deep-fir);
+    padding: 0 10px 3px;
+    border-radius: 10px;
+    display: inline-block;
+    line-height: 1.2;
+    vertical-align: bottom;
+}
+
+.cf-login__brand-lead {
+    font-size: 15px;
+    line-height: 1.65;
+    color: var(--color-on-dark-muted);
+    margin: 16px 0 0;
+    max-width: 320px;
+}
+
+.cf-login__stats {
+    display: flex;
+    gap: 22px;
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.cf-login__stat-value {
+    font-family: var(--font-display);
+    font-size: 22px;
+    font-weight: 800;
+    color: var(--color-sulu);
+}
+
+.cf-login__stat-label {
+    font-size: 12.5px;
+    font-weight: 550;
+    color: var(--color-on-dark-accent);
+    margin-top: 2px;
+}
+
+.cf-login__glow {
+    position: absolute;
+    right: -120px;
+    bottom: -140px;
+    width: 340px;
+    height: 340px;
+    border-radius: 50%;
+    background: rgba(159, 232, 112, 0.08);
+    pointer-events: none;
+}
+
+.cf-login__glow--soft {
+    right: -40px;
+    bottom: -200px;
+    background: rgba(159, 232, 112, 0.06);
+}
+
+.cf-login__panel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 40px;
+}
+
+.cf-login__card {
+    width: min(400px, 100%);
+}
+
+.cf-login__title {
+    font-family: var(--font-display);
+    font-size: 30px;
+    font-weight: 800;
+    letter-spacing: -0.025em;
+    color: var(--color-deep-fir);
+    margin: 0;
+}
+
+.cf-login__lead {
+    font-size: 14.5px;
+    line-height: 1.6;
+    color: var(--color-body);
+    margin: 10px 0 0;
+}
+
+.cf-login__error {
+    margin-top: 20px;
+    padding: 12px 16px;
+    border-radius: 11px;
+    background: #fdf0ee;
+    border: 1px solid #f0cfc8;
+    color: #8c3a2b;
+    font-size: 13.5px;
+    font-weight: 550;
+}
+
+.cf-login__warning {
+    margin-top: 20px;
+    padding: 12px 16px;
+    border-radius: 11px;
+    background: #fff8e8;
+    border: 1px solid #edd9a8;
+    color: #7a5a12;
+    font-size: 13.5px;
+    font-weight: 550;
+}
+
+.cf-login__form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-top: 28px;
+}
+
+.cf-login__field {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+}
+
+.cf-login__label {
+    font-size: 13px;
+    font-weight: 650;
+    color: var(--color-deep-fir);
+}
+
+.cf-login__input {
+    padding: 13px 16px;
+    border-radius: 11px;
+    border: 1px solid var(--color-border);
+    background: #ffffff;
+    font-family: inherit;
+    font-size: 14.5px;
+    color: var(--color-deep-fir);
+    outline: none;
+}
+
+.cf-login__input::placeholder {
+    color: #a3ac9f;
+}
+
+.cf-login__input:focus {
+    border-color: var(--color-deep-fir);
+    box-shadow: 0 0 0 3px rgba(159, 232, 112, 0.35);
+}
+
+.cf-login__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.cf-login__remember {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13.5px;
+    font-weight: 550;
+    color: var(--color-body);
+    cursor: pointer;
+}
+
+.cf-login__remember input {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--color-deep-fir);
+}
+
+.cf-login-body a.cf-login__forgot {
+    font-size: 13.5px;
+    font-weight: 650;
+    color: var(--color-deep-fir);
+}
+
+.cf-login-body a.cf-login__forgot:hover {
+    color: #2f5c14;
+}
+
+.cf-login__back {
+    margin: 24px 0 0;
+    font-size: 13.5px;
+    font-weight: 550;
+    color: var(--color-body);
+    text-align: center;
+}
+
+.cf-login__submit {
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    padding: 14px;
+    border-radius: 12px;
+    font-family: inherit;
+    font-size: 15px;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    background: var(--color-deep-fir);
+    color: #ffffff;
+    transition: transform var(--ease-hover);
+}
+
+.cf-login__submit:hover:not(:disabled) {
+    transform: translateY(-1px);
+    color: #ffffff;
+}
+
+.cf-login__submit:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.cf-login__note {
+    margin-top: 28px;
+    padding: 14px 18px;
+    border-radius: 12px;
+    background: #eef4e6;
+    border: 1px solid #dfe7d6;
+    font-size: 13px;
+    line-height: 1.6;
+    color: #3a4a38;
+}
+
+.cf-login__note strong {
+    color: var(--color-deep-fir);
+}
+
+.cf-login-body a.cf-login__note-link {
+    font-weight: 700;
+    color: var(--color-deep-fir);
+}
+
+.cf-login-body a.cf-login__note-link:hover {
+    color: #2f5c14;
+}
+
+.cf-login__dashboard-link {
+    display: block;
+    margin-top: 24px;
+    text-align: center;
+    padding: 14px;
+    border-radius: 12px;
+    font-size: 15px;
+    font-weight: 700;
+    background: var(--color-deep-fir);
+    color: #ffffff;
+}
+
+.cf-login-body a.cf-login__dashboard-link:hover {
+    color: #ffffff;
+    transform: translateY(-1px);
+}
+
+/* Toast feedback for failed login (HTMX OOB) */
+.cf-login-body .toast-container {
+    position: fixed;
+    z-index: 1100;
+    max-width: 24rem;
+}
+
+.cf-login-body .toast-container.bottom-0 { bottom: 0; }
+.cf-login-body .toast-container.end-0 { right: 0; }
+.cf-login-body .toast-container.p-3 { padding: 1rem; }
+
+.cf-login-body .toast {
+    width: 100%;
+    border-radius: 12px;
+    color: #fff;
+    box-shadow: 0 12px 28px -16px rgba(10, 31, 10, 0.45);
+    animation: fjp-toast-in 0.2s ease;
+}
+
+.cf-login-body .toast:not(.show) { display: none; }
+.cf-login-body .toast .d-flex { display: flex; align-items: stretch; }
+.cf-login-body .toast-body { flex: 1 1 auto; padding: 0.75rem 0.9rem; font-size: 14px; font-weight: 550; }
+.cf-login-body .toast.text-bg-danger { background: #9b1c1c; }
+.cf-login-body .toast.text-bg-success { background: #245a12; }
+.cf-login-body .toast.text-bg-warning { background: #a16207; color: #fff; }
+.cf-login-body .btn-close {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: #fff;
+    font-size: 1.1rem;
+    line-height: 1;
+    padding: 0.75rem;
+    cursor: pointer;
+    opacity: 0.85;
+}
+.cf-login-body .btn-close::before { content: "×"; }
+
+@media (max-width: 900px) {
+    .cf-login {
+        grid-template-columns: 1fr;
+    }
+
+    .cf-login__brand {
+        min-height: auto;
+        padding: 28px 24px 36px;
+    }
+
+    .cf-login__brand-copy {
+        margin-top: 36px;
+    }
+
+    .cf-login__brand-title {
+        font-size: 28px;
+    }
+
+    .cf-login__glow,
+    .cf-login__glow--soft {
+        display: none;
+    }
+
+    .cf-login__panel {
+        padding: 36px 22px 48px;
+        align-items: flex-start;
+    }
+}
diff --git a/static/css/website/responsive.css b/static/css/website/responsive.css
new file mode 100644
index 0000000..0cfa939
--- /dev/null
+++ b/static/css/website/responsive.css
@@ -0,0 +1,806 @@
+/*
+ * Website responsive layout — tablet + mobile (v3-mobile.dc.html parity).
+ */
+
+/* --- Tablet: collapse multi-column sections --- */
+
+@media (max-width: 1100px) {
+    .website-hero {
+        grid-template-columns: 1fr;
+        gap: 48px;
+        padding: 48px 40px 64px;
+    }
+
+    .website-hero__showcase {
+        width: 100%;
+        max-width: 520px;
+        justify-self: center;
+    }
+
+    .website-hero__live {
+        right: 0;
+    }
+
+    .website-hero__bubble {
+        left: 8px;
+    }
+
+    .website-nav {
+        grid-template-columns: auto 1fr auto;
+        padding: 16px 40px;
+    }
+
+    .website-nav__links {
+        margin-left: 12px;
+        gap: 18px;
+    }
+
+    .website-footer__main {
+        grid-template-columns: 1fr 1fr;
+        gap: 36px;
+    }
+
+    .website-call-me {
+        margin: 0;
+        padding: 64px 40px;
+        border-radius: 0;
+    }
+
+    .website-how__grid {
+        grid-template-columns: 1fr;
+    }
+
+    .website-agents__grid {
+        grid-template-columns: 1fr;
+    }
+
+    .website-faq__grid {
+        grid-template-columns: 1fr;
+        gap: 32px;
+    }
+
+    .website-call-me__grid {
+        grid-template-columns: 1fr;
+        gap: 36px;
+    }
+
+    .website-math__grid {
+        grid-template-columns: 1fr;
+        gap: 72px;
+    }
+
+    .website-math__copy {
+        max-width: 660px;
+    }
+
+    .website-comparison__scroll {
+        border-radius: 20px;
+    }
+
+    .website-demo {
+        grid-template-columns: 1fr;
+        flex: none;
+        height: auto;
+        min-height: 0;
+        overflow: visible;
+    }
+
+    .website-body--demo,
+    .website-site--demo {
+        height: auto;
+        overflow: visible;
+        display: block;
+    }
+
+    .website-demo__brand-panel {
+        height: auto;
+        overflow: visible;
+        padding: 28px var(--site-gutter) 36px;
+    }
+
+    .website-demo__form-panel {
+        height: auto;
+        overflow: visible;
+        padding: 28px var(--site-gutter) 36px;
+    }
+
+    .website-demo__metrics {
+        grid-template-columns: 1fr;
+    }
+
+    .website-demo__title {
+        font-size: 38px;
+    }
+}
+
+/* --- Mobile: 390px artboard parity --- */
+
+@media (max-width: 768px) {
+    :root {
+        --site-gutter: 22px;
+        --section-gutter: 22px;
+    }
+
+    /* Nav — logo + Book a Demo only */
+    .website-nav {
+        display: flex;
+        min-height: 65px;
+        height: auto;
+        gap: 12px;
+        padding: 14px 20px;
+    }
+
+    .website-body a.website-nav__brand {
+        font-size: 20px;
+    }
+
+    .website-nav__links,
+    .website-nav__actions .website-nav-link {
+        display: none;
+    }
+
+    .website-nav__actions {
+        margin-left: auto;
+        justify-self: unset;
+        gap: 0;
+    }
+
+    .website-btn--nav {
+        padding: 11px 16px;
+        border-radius: 10px;
+        font-size: 14px;
+        font-weight: 700;
+        min-height: 40px;
+        height: 40px;
+    }
+
+    /* Content pages */
+    .website-body--content .website-nav--simple {
+        min-height: 52px;
+        padding: 8px 22px;
+    }
+
+    .website-content-page {
+        padding: 36px 22px 48px;
+    }
+
+    .website-content-page__title {
+        font-size: 36px;
+    }
+
+    .website-content-page__body {
+        font-size: 15px;
+        margin-top: 20px;
+    }
+
+    /* Hero */
+    .website-hero {
+        padding: 36px 22px 48px;
+        gap: 36px;
+        min-height: 0;
+    }
+
+    .website-eyebrow {
+        gap: 8px;
+        padding: 6px 13px;
+        font-size: 11.5px;
+    }
+
+    .website-live-dot {
+        width: 7px;
+        height: 7px;
+    }
+
+    .website-hero__title {
+        font-size: 40px;
+        line-height: 1.06;
+        letter-spacing: -0.03em;
+        margin-top: 0;
+        max-width: none;
+    }
+
+    .website-hero__highlight {
+        padding: 0 10px 5px;
+        border-radius: 11px;
+    }
+
+    .website-hero__lead {
+        font-size: 15px;
+        margin-top: 16px;
+        max-width: 320px;
+    }
+
+    .website-hero__actions {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+        margin-top: 24px;
+    }
+
+    .website-hero__actions .website-btn {
+        width: auto;
+        max-width: none;
+        height: 40px;
+        min-height: 40px;
+        padding: 11px 16px;
+        justify-content: center;
+        font-size: 14px;
+        border-radius: 10px;
+    }
+
+    .website-body a.website-hero__text-link {
+        align-self: center;
+        font-size: 15px;
+        padding: 8px 2px;
+    }
+
+    .website-hero__trust {
+        font-size: 12px;
+        margin-top: 18px;
+    }
+
+    .website-hero__showcase {
+        width: 100%;
+        max-width: none;
+    }
+
+    .website-hero__stage {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 560 / 512;
+        margin: 8px 0 0;
+    }
+
+    .website-hero__plate--lime,
+    .website-hero__plate--glass {
+        display: none;
+    }
+
+    .website-hero__live {
+        right: 4px;
+        top: 18px;
+        font-size: 11px;
+        padding: 8px 12px;
+    }
+
+    .website-hero__bubble {
+        left: 4px;
+        bottom: 72px;
+        font-size: 11.5px;
+        padding: 9px 12px;
+        border-radius: 10px;
+        white-space: normal;
+        max-width: 200px;
+        gap: 7px;
+    }
+
+    .website-hero__trust-icon {
+        width: 14px;
+        height: 18px;
+    }
+
+    .website-hero__card-image,
+    .website-hero__card-image.website-media-placeholder {
+        height: 100%;
+        min-height: 0;
+    }
+
+    .website-hero__genres {
+        margin-top: 32px;
+        overflow-x: auto;
+        scrollbar-width: none;
+    }
+
+    .website-hero__genres::-webkit-scrollbar {
+        display: none;
+    }
+
+    .website-hero__genre {
+        flex: none;
+        padding: 9px 14px;
+        font-size: 12px;
+    }
+
+    /* How it works */
+    .website-how {
+        margin-top: 0;
+        padding: 64px 18px 56px;
+        border-radius: 0;
+    }
+
+    .website-how__title {
+        font-size: 31px;
+        line-height: 1.1;
+        margin-top: 12px;
+        max-width: 300px;
+    }
+
+    .website-how__grid {
+        margin-top: 34px;
+        gap: 14px;
+    }
+
+    .website-how-step {
+        border-radius: 22px;
+    }
+
+    .website-how-step--lime,
+    .website-how-step--panel {
+        padding: 24px 22px;
+    }
+
+    .website-how-step--panel {
+        padding-bottom: 0;
+    }
+
+    .website-how-step--dashboard {
+        padding: 24px 16px 28px;
+    }
+
+    .website-how-step__media--dashboard {
+        transform: none;
+    }
+
+    .website-how-step--booked-card {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 18px;
+        padding: 20px 18px 20px;
+    }
+
+    .website-how-step--booked-card .website-how-step__copy {
+        max-width: none;
+        padding-top: 4px;
+        padding-right: 0;
+    }
+
+    .website-how-step--booked-card .website-how-step__title {
+        white-space: normal;
+        font-size: 22px;
+    }
+
+    .website-how-step--booked-card .website-booking-visual {
+        justify-content: flex-end;
+    }
+
+    .website-how__grid--follow {
+        margin-top: 14px;
+    }
+
+    .website-step-badge {
+        height: 24px;
+        padding: 0 10px;
+        font-size: 11.5px;
+    }
+
+    .website-how-step__header {
+        gap: 11px;
+    }
+
+    .website-how-step__title {
+        font-size: 22px;
+        white-space: normal;
+    }
+
+    .website-how-step__lead {
+        font-size: 14px;
+        margin-top: 12px;
+        max-width: none;
+    }
+
+    .website-how-step__lead--on-lime {
+        max-width: none;
+    }
+
+    .website-how-step__lead {
+        min-height: 0;
+    }
+
+    .website-how-step--lime .website-chat-mock {
+        margin-top: 0;
+        padding-top: 0;
+        border-radius: 16px;
+        padding: 16px;
+    }
+
+    .website-how-step__media--chat {
+        margin-top: 22px;
+        padding-top: 0;
+    }
+
+    .website-how-step__screenshot,
+    .website-how-step__media--dashboard .website-media-placeholder {
+        width: 100%;
+        margin-top: 0;
+        border-radius: 12px;
+    }
+
+    .website-booking-visual {
+        margin-bottom: 0;
+    }
+
+    .website-booking-visual__email,
+    .website-booking-visual .website-media-placeholder {
+        width: min(320px, 100%);
+        min-height: 0;
+        height: auto;
+        border-radius: 14px;
+        border: 1px solid var(--color-border-soft);
+    }
+
+    /* Agents */
+    .website-agents {
+        padding: 44px 18px 50px;
+    }
+
+    .website-agents__title {
+        font-size: 29px;
+        margin-top: 10px;
+        max-width: none;
+    }
+
+    .website-agents__grid {
+        margin-top: 26px;
+        gap: 14px;
+    }
+
+    .website-agent-card {
+        border-radius: 20px;
+        padding: 24px 22px;
+    }
+
+    .website-agent-card__watermark {
+        font-size: 180px;
+        right: -24px;
+        bottom: -52px;
+    }
+
+    .website-agent-card--coming_soon .website-agent-card__watermark {
+        right: -18px;
+    }
+
+    .website-agent-card__header {
+        gap: 11px;
+    }
+
+    .website-agent-card__avatar {
+        width: 44px;
+        height: 44px;
+        font-size: 19px;
+    }
+
+    .website-agent-card__name {
+        font-size: 20px;
+    }
+
+    .website-agent-card__role {
+        font-size: 12px;
+    }
+
+    .website-agent-card__status {
+        padding: 5px 11px;
+        font-size: 10.5px;
+    }
+
+    .website-agent-card__status--coming_soon {
+        font-size: 10px;
+    }
+
+    .website-agent-card__description {
+        font-size: 13.5px;
+        margin: 14px 0;
+    }
+
+    .website-agent-card__feature {
+        font-size: 13.5px;
+        gap: 10px;
+    }
+
+    .website-agent-card__cta {
+        margin-top: 20px;
+        width: 100%;
+        justify-content: center;
+    }
+
+    /* Call me */
+    .website-call-me {
+        margin: 0;
+        padding: 48px 22px 52px;
+        border-radius: 0;
+    }
+
+    .website-call-me__grid {
+        gap: 0;
+    }
+
+    .website-call-me__title {
+        font-size: 29px;
+        line-height: 1.12;
+        margin-top: 12px;
+        max-width: none;
+    }
+
+    .website-call-me__lead {
+        font-size: 14.5px;
+        margin-top: 14px;
+        max-width: none;
+    }
+
+    .website-call-me__bullets {
+        flex-wrap: wrap;
+        gap: 14px;
+        margin-top: 18px;
+        font-size: 12.5px;
+    }
+
+    .website-call-me__card {
+        margin-top: 26px;
+        border-radius: 16px;
+        padding: 22px 20px;
+    }
+
+    .website-call-me__card-title {
+        font-size: 16px;
+        margin-bottom: 16px;
+    }
+
+    /* FAQ */
+    .website-faq {
+        padding: 48px 22px;
+    }
+
+    .website-faq__grid {
+        gap: 0;
+    }
+
+    .website-faq__title {
+        font-size: 29px;
+        line-height: 1.1;
+        margin-top: 12px;
+    }
+
+    .website-faq__aside--desktop {
+        display: none;
+    }
+
+    .website-faq__aside--mobile {
+        display: block;
+    }
+
+    .website-faq__list {
+        margin-top: 10px;
+    }
+
+    .website-faq__item {
+        padding: 18px 0;
+    }
+
+    .website-faq__question {
+        font-size: 15.5px;
+    }
+
+    .website-faq__answer {
+        font-size: 13.5px;
+        margin-top: 8px;
+        max-width: none;
+    }
+
+    /* Final CTA */
+    .website-final-cta {
+        padding: 40px 22px 48px;
+    }
+
+    .website-final-cta__panel {
+        flex-direction: column;
+        align-items: stretch;
+        border-radius: 28px;
+        padding: 24px 24px 24px;
+        gap: 28px;
+    }
+
+    .website-final-cta__copy {
+        padding-bottom: 0;
+    }
+
+    .website-final-cta__title {
+        font-size: 33px;
+        line-height: 1.08;
+        max-width: none;
+    }
+
+    .website-final-cta__lead {
+        font-size: 14.5px;
+        margin-top: 14px;
+        max-width: none;
+    }
+
+    .website-final-cta__actions {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+        margin-top: 24px;
+    }
+
+    .website-final-cta__actions .website-btn {
+        justify-content: center;
+        padding: 15px;
+        font-size: 15px;
+        font-weight: 750;
+        border-radius: var(--radius-lg);
+    }
+
+    .website-final-cta__media {
+        justify-content: center;
+        padding-top: 0;
+        padding-right: 0;
+    }
+
+    .website-final-cta__phone {
+        width: min(280px, 72vw);
+        border-radius: 24px;
+        padding: 8px;
+    }
+
+    /* Brand strip */
+    .website-brand-strip {
+        padding: 22px 22px;
+    }
+
+    .website-brand-strip__inner {
+        gap: 12px;
+    }
+
+    .website-body a.website-brand-strip__wordmark {
+        font-size: 22px;
+    }
+
+    .website-brand-strip__tagline {
+        font-size: 14.5px;
+    }
+
+    /* Footer */
+    .website-footer {
+        padding: 44px 22px 22px;
+    }
+
+    .website-footer__main {
+        grid-template-columns: 1fr;
+        gap: 28px;
+    }
+
+    .website-footer__column-title {
+        font-size: 15px;
+        margin-bottom: 16px;
+    }
+
+    .website-footer__nav {
+        gap: 14px;
+        font-size: 15.5px;
+    }
+
+    .website-footer__industries {
+        gap: 14px;
+        font-size: 15.5px;
+    }
+
+    .website-footer__legal {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        margin-top: 48px;
+        padding-top: 22px;
+        font-size: 15.5px;
+    }
+
+    /* Demo page */
+    .website-form__row {
+        grid-template-columns: 1fr;
+    }
+
+    .website-demo__brand-copy {
+        margin-top: 36px;
+    }
+
+    .website-demo__form-wrap {
+        margin-top: 28px;
+    }
+
+    .website-demo__form-title {
+        font-size: 28px;
+    }
+
+    /* Flash banner */
+    .website-flash {
+        padding: 12px 20px;
+        font-size: 13px;
+    }
+
+    /* Missed-call calculator */
+    .website-math {
+        padding: 64px 22px 48px;
+    }
+
+    .website-math__grid {
+        gap: 58px;
+    }
+
+    .website-math__title {
+        font-size: 32px;
+    }
+
+    .website-math__lead {
+        font-size: 14.5px;
+    }
+
+    .website-math__controls {
+        gap: 24px;
+        margin-top: 34px;
+    }
+
+    .website-math__control + .website-math__control {
+        padding-top: 24px;
+    }
+
+    .website-math__control-heading {
+        align-items: flex-start;
+        gap: 14px;
+    }
+
+    .website-math__hint {
+        max-width: 190px;
+    }
+
+    .website-math__value {
+        font-size: 28px;
+    }
+
+    .website-math-receipt {
+        width: min(340px, 94%);
+    }
+
+    .website-math-receipt__paper {
+        padding: 36px 24px 26px;
+    }
+
+    .website-math-receipt__total output {
+        font-size: 38px;
+    }
+
+    .website-math__sources {
+        margin-top: 54px;
+        text-align: left;
+    }
+
+    /* Honest comparison */
+    .website-comparison {
+        padding: 64px 22px 72px;
+    }
+
+    .website-comparison__title {
+        font-size: 32px;
+    }
+
+    .website-comparison__lead {
+        margin-top: 16px;
+        font-size: 14.5px;
+    }
+
+    .website-comparison__scroll {
+        margin-top: 40px;
+        border-radius: 18px;
+    }
+
+    .website-comparison__table {
+        min-width: 920px;
+    }
+
+    .website-comparison__table th,
+    .website-comparison__table td {
+        padding: 16px 18px;
+    }
+
+    .website-comparison__footnote {
+        margin-top: 38px;
+        text-align: left;
+    }
+}
diff --git a/static/css/website/sections.css b/static/css/website/sections.css
new file mode 100644
index 0000000..69cc650
--- /dev/null
+++ b/static/css/website/sections.css
@@ -0,0 +1,1724 @@
+/*
+ * Website section layouts (desktop).
+ */
+
+/* --- Nav --- */
+
+.website-nav {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 28px;
+    min-height: 72px;
+    padding: 18px 64px;
+    background: var(--color-deep-fir);
+}
+
+.website-body a.website-nav__brand {
+    display: flex;
+    align-items: center;
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: 21px;
+    letter-spacing: -0.02em;
+    color: #ffffff;
+    justify-self: start;
+}
+
+.website-body a.website-nav__brand:hover {
+    color: #ffffff;
+}
+
+.website-nav__links {
+    display: flex;
+    gap: 28px;
+    justify-self: start;
+    margin-left: 24px;
+}
+
+.website-nav__actions {
+    justify-self: end;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.website-nav--simple {
+    grid-template-columns: auto 1fr;
+    min-height: 56px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.website-nav--simple .website-nav__actions {
+    justify-self: end;
+}
+
+/* --- Hero --- */
+
+.website-hero {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
+    align-items: center;
+    gap: 64px;
+    text-align: left;
+    padding: 56px 64px 88px;
+    background: var(--color-deep-fir);
+    box-sizing: border-box;
+}
+
+.website-hero__copy {
+    min-width: 0;
+}
+
+.website-hero__copy .website-eyebrow {
+    margin: 0 0 18px;
+}
+
+.website-hero__title {
+    font-family: var(--font-display);
+    font-size: 60px;
+    line-height: 1.06;
+    font-weight: 800;
+    letter-spacing: -0.032em;
+    margin: 0;
+    max-width: 560px;
+    color: #ffffff;
+}
+
+.website-hero__highlight {
+    background: var(--color-sulu);
+    color: var(--color-deep-fir);
+    padding: 0 16px 6px;
+    border-radius: 15px;
+    display: inline-block;
+    line-height: 1.16;
+    vertical-align: bottom;
+}
+
+.website-hero__lead {
+    font-size: 17.5px;
+    line-height: 1.65;
+    color: var(--color-on-dark-muted);
+    margin: 24px 0 0;
+    max-width: 440px;
+}
+
+.website-hero__actions {
+    display: flex;
+    gap: 13px 22px;
+    margin-top: 32px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.website-hero__actions .website-btn {
+    box-sizing: border-box;
+    width: auto;
+    height: 42px;
+    min-height: 42px;
+    padding: 11px 20px;
+    border-radius: 10px;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.2;
+    justify-content: center;
+}
+
+.website-body a.website-hero__text-link {
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
+    padding: 4px 2px;
+    font-size: 16.5px;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: rgba(255, 255, 255, 0.78);
+    text-decoration: underline;
+    text-decoration-color: rgba(255, 255, 255, 0.55);
+    text-underline-offset: 0.38em;
+    text-decoration-thickness: 1.5px;
+    transition:
+        color var(--ease-hover),
+        text-decoration-color var(--ease-hover);
+}
+
+.website-body a.website-hero__text-link:hover {
+    color: #ffffff;
+    text-decoration-color: #ffffff;
+}
+
+.website-hero__trust {
+    margin: 24px 0 0;
+    font-size: 13px;
+    font-weight: 550;
+    color: var(--color-on-dark-accent);
+}
+
+.website-hero__showcase {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-self: end;
+    width: min(100%, 560px);
+}
+
+.website-hero__stage {
+    position: relative;
+    width: 100%;
+    height: 512px;
+}
+
+.website-hero__plate {
+    position: absolute;
+    border-radius: 24px;
+    pointer-events: none;
+}
+
+.website-hero__plate--lime {
+    inset: -18px -14px 26px auto;
+    width: 88%;
+    background: var(--color-sulu);
+    transform: rotate(2.8deg);
+}
+
+.website-hero__plate--glass {
+    inset: 22px auto -14px -16px;
+    width: 88%;
+    background: rgba(233, 242, 224, 0.16);
+    border: 1px solid rgba(216, 228, 200, 0.25);
+    transform: rotate(-3.2deg);
+}
+
+.website-hero__live {
+    position: absolute;
+    right: -18px;
+    top: 34px;
+    z-index: 4;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background:
+        linear-gradient(var(--color-deep-fir), var(--color-deep-fir)) padding-box,
+        linear-gradient(90deg, var(--color-sulu), var(--color-deep-fir)) border-box;
+    border: 2px solid transparent;
+    color: var(--color-sulu);
+    font-size: 12px;
+    font-weight: 700;
+    padding: 9px 15px;
+    border-radius: var(--radius-pill);
+    box-shadow:
+        0 6px 12px -4px rgba(0, 0, 0, 0.45),
+        0 20px 36px -12px rgba(0, 0, 0, 0.55);
+}
+
+.website-hero__live-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--color-sulu);
+    animation: website-live-pulse 1.6s infinite;
+}
+
+.website-hero__bubble {
+    position: absolute;
+    left: -32px;
+    bottom: 55px;
+    z-index: 4;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--color-deep-fir);
+    font-size: 12.5px;
+    font-weight: 650;
+    line-height: 1.45;
+    padding: 10px 12px;
+    border-radius: 12px;
+    border: 2px solid transparent;
+    background:
+        linear-gradient(#ffffff, #ffffff) padding-box,
+        linear-gradient(90deg, var(--color-sulu), var(--color-deep-fir)) border-box;
+    box-shadow:
+        0 6px 10px -3px rgba(10, 31, 10, 0.18),
+        0 18px 36px -8px rgba(10, 31, 10, 0.38);
+    white-space: nowrap;
+}
+
+.website-hero__trust-icon {
+    flex: none;
+    width: 16px;
+    height: 20px;
+    display: block;
+    background-color: var(--color-deep-fir);
+    -webkit-mask-image: url("../../img/website/icons/trusted.png");
+    mask-image: url("../../img/website/icons/trusted.png");
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
+.website-hero__card {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 12px;
+    box-shadow:
+        0 32px 56px -26px rgba(0, 0, 0, 0.55),
+        0 10px 22px -12px rgba(0, 0, 0, 0.35);
+    transform: rotate(2.8deg) scale(0.97);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 1;
+    transition:
+        opacity 0.25s ease,
+        transform 0.25s ease;
+}
+
+.website-hero__card.is-active {
+    opacity: 1;
+    pointer-events: auto;
+    z-index: 2;
+    transform: rotate(2.8deg) scale(1);
+}
+
+.website-hero__card-image {
+    width: 100%;
+    height: 100%;
+    flex: 1 1 auto;
+    min-height: 0;
+    border-radius: 10px;
+    object-fit: cover;
+    display: block;
+    overflow: hidden;
+}
+
+.website-hero__card-image.website-media-placeholder {
+    min-height: 0;
+}
+
+.website-hero__genres {
+    position: relative;
+    z-index: 3;
+    display: flex;
+    gap: 3px;
+    margin-top: 52px;
+    background: #ffffff;
+    border: 1px solid #dfe7d6;
+    border-radius: var(--radius-pill);
+    padding: 5px;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    box-shadow:
+        0 1px 2px rgba(10, 31, 10, 0.05),
+        0 14px 30px -20px rgba(10, 31, 10, 0.35);
+}
+
+.website-hero__genres::-webkit-scrollbar {
+    display: none;
+}
+
+.website-hero__genre {
+    flex: 1 0 auto;
+    text-align: center;
+    white-space: nowrap;
+    border: none;
+    background: transparent;
+    color: var(--color-body);
+    border-radius: var(--radius-pill);
+    padding: 10px 12px;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: -0.005em;
+    font-family: inherit;
+    cursor: pointer;
+    transition:
+        background-color 0.18s ease,
+        color 0.18s ease,
+        box-shadow 0.18s ease;
+}
+
+.website-hero__genre:hover {
+    background: #eef4e6;
+    color: var(--color-deep-fir);
+}
+
+.website-hero__genre.is-active {
+    font-weight: 700;
+    background: var(--color-deep-fir);
+    color: var(--color-sulu);
+    box-shadow: 0 6px 14px -6px rgba(10, 31, 10, 0.45);
+}
+
+.website-hero__genre.is-active:hover {
+    background: var(--color-deep-fir);
+    color: var(--color-sulu);
+}
+
+/* --- How it works --- */
+
+.website-how {
+    margin-top: 0;
+    position: relative;
+    padding: 100px 64px;
+    background: var(--color-page);
+    border-radius: 0;
+    text-align: center;
+}
+
+.website-how__title {
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: 40px;
+    line-height: 1.08;
+    letter-spacing: -0.025em;
+    color: var(--color-deep-fir);
+    margin: 14px auto 0;
+    max-width: 620px;
+}
+
+.website-how__grid {
+    display: grid;
+    grid-template-columns: 0.88fr 1.12fr;
+    gap: 20px;
+    margin-top: 52px;
+    align-items: stretch;
+    text-align: left;
+}
+
+.website-how__grid--follow {
+    margin-top: 20px;
+}
+
+.website-how__grid--single {
+    grid-template-columns: 1fr;
+}
+
+.website-how-step {
+    border-radius: 26px;
+    overflow: hidden;
+}
+
+.website-how-step--lime {
+    background: var(--color-sulu);
+    padding: 34px;
+    display: flex;
+    flex-direction: column;
+}
+
+.website-how-step--panel {
+    background: var(--color-panel);
+    padding: 34px 34px 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.website-how-step--dashboard {
+    padding: 34px 24px 40px;
+}
+
+.website-how-step--alert {
+    padding: 34px;
+}
+
+.website-how-step--booked-card {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 36px;
+    padding: 22px 22px 22px 28px;
+}
+
+.website-how-step--booked-card .website-how-step__copy {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: none;
+    padding-top: 10px;
+    padding-right: 12px;
+}
+
+.website-how-step--booked-card .website-how-step__header {
+    flex-wrap: nowrap;
+    gap: 12px;
+}
+
+.website-how-step--booked-card .website-how-step__title {
+    white-space: nowrap;
+    font-size: 24px;
+    line-height: 1.15;
+}
+
+.website-how-step--booked-card .website-how-step__lead {
+    min-height: 0;
+    max-width: none;
+    width: 100%;
+}
+
+.website-how-step--booked-card .website-how-step__lead--on-lime {
+    max-width: none;
+}
+
+.website-how-step--booked-card .website-booking-visual {
+    display: flex;
+    justify-content: flex-end;
+    flex: 0 0 auto;
+    margin-top: 0;
+    padding-top: 0;
+}
+
+.website-how-step__header {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 13px;
+}
+
+.website-how-step__title {
+    font-family: var(--font-display);
+    font-size: 24px;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+    margin: 0;
+    color: var(--color-deep-fir);
+    white-space: nowrap;
+}
+
+.website-how-step__lead {
+    font-size: 15px;
+    line-height: 1.6;
+    color: var(--color-body);
+    margin: 14px 0 0;
+    max-width: none;
+    width: 100%;
+    min-height: 0;
+}
+
+.website-how-step__lead--on-lime {
+    color: #2f5a1b;
+    max-width: none;
+}
+
+.website-emergency-pill {
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
+    gap: 7px;
+    margin-top: 18px;
+    background: #ffe9db;
+    color: #c2410c;
+    font-size: 11.5px;
+    font-weight: 700;
+    padding: 6px 11px;
+    border-radius: var(--radius-pill);
+}
+
+.website-how-step--lime .website-chat-mock {
+    margin-top: 0;
+    padding-top: 20px;
+}
+
+.website-how-step__media {
+    margin-top: auto;
+    padding-top: 24px;
+}
+
+.website-how-step__media--chat {
+    padding-bottom: 0;
+}
+
+.website-how-step__media--dashboard {
+    padding-top: 28px;
+    margin-top: auto;
+    margin-bottom: auto;
+    transform: translateY(2px);
+}
+
+.website-how-step__screenshot {
+    display: block;
+    width: 100%;
+    height: auto;
+    margin-top: 0;
+    border-radius: 14px;
+    border: 1px solid var(--color-border-soft);
+    box-shadow: 0 12px 36px -20px rgba(10, 31, 10, 0.35);
+}
+
+.website-how-step__media--dashboard .website-media-placeholder {
+    width: 100%;
+    min-height: 220px;
+    margin-top: 0;
+    border-radius: 14px;
+}
+
+.website-booking-visual {
+    position: relative;
+    border-radius: 16px;
+}
+
+.website-booking-visual__email {
+    display: block;
+    width: 390px;
+    max-width: 100%;
+    height: auto;
+    border-radius: 16px;
+    border: 1px solid var(--color-border-soft);
+    box-shadow: 0 20px 44px -26px rgba(10, 31, 10, 0.4);
+    overflow: hidden;
+}
+
+.website-booking-visual .website-media-placeholder {
+    width: 390px;
+    max-width: 100%;
+    min-height: 480px;
+    border-radius: 16px;
+}
+
+
+/* --- Agents --- */
+
+.website-agents {
+    padding: 100px 64px;
+    background: #ffffff;
+    border-top: 1px solid #e7ece1;
+}
+
+.website-agents__intro {
+    text-align: center;
+}
+
+.website-agents__title {
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: 40px;
+    line-height: 1.08;
+    letter-spacing: -0.025em;
+    color: var(--color-deep-fir);
+    margin: 14px auto 0;
+    max-width: 640px;
+}
+
+.website-agents__lead {
+    font-size: 15.5px;
+    line-height: 1.55;
+    color: var(--color-body);
+    margin: 16px auto 0;
+    max-width: 560px;
+}
+
+.website-agents__grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 20px;
+    margin-top: 48px;
+    align-items: stretch;
+}
+
+.website-agent-card {
+    position: relative;
+    overflow: hidden;
+    border-radius: 22px;
+    padding: 28px 26px 26px;
+    display: flex;
+    flex-direction: column;
+}
+
+.website-agent-card--live {
+    background: var(--color-deep-fir);
+    color: #ffffff;
+    box-shadow: 0 30px 60px -30px rgba(10, 31, 10, 0.55);
+}
+
+.website-agent-card--in_pilot {
+    background: #f7faf3;
+    border: 1px solid #d7e2ca;
+}
+
+.website-agent-card--coming_soon {
+    background: #f7faf3;
+    border: 1px dashed #cdd6c1;
+}
+
+.website-agent-card__watermark {
+    position: absolute;
+    right: -28px;
+    bottom: -64px;
+    font-family: var(--font-display);
+    font-size: 200px;
+    font-weight: 800;
+    line-height: 1;
+    user-select: none;
+    pointer-events: none;
+}
+
+.website-agent-card--live .website-agent-card__watermark {
+    color: rgba(159, 232, 112, 0.07);
+}
+
+.website-agent-card--in_pilot .website-agent-card__watermark,
+.website-agent-card--coming_soon .website-agent-card__watermark {
+    right: -20px;
+    color: rgba(10, 31, 10, 0.04);
+}
+
+.website-agent-card__header {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.website-agent-card__avatar {
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: 20px;
+    flex: none;
+}
+
+.website-agent-card__avatar--live {
+    background: var(--color-sulu);
+    color: var(--color-deep-fir);
+    animation: website-live-pulse 2.2s infinite;
+}
+
+.website-agent-card--in_pilot .website-agent-card__avatar {
+    background: #d7ebc0;
+    color: var(--color-deep-fir);
+}
+
+.website-agent-card--coming_soon .website-agent-card__avatar {
+    background: #dbe4d0;
+    color: #5a7a44;
+}
+
+.website-agent-card__titles {
+    min-width: 0;
+    padding-top: 2px;
+}
+
+.website-agent-card__name {
+    font-family: var(--font-display);
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: -0.015em;
+    margin: 0;
+}
+
+.website-agent-card--live .website-agent-card__name {
+    color: #ffffff;
+}
+
+.website-agent-card--in_pilot .website-agent-card__name,
+.website-agent-card--coming_soon .website-agent-card__name {
+    color: #3a4a38;
+}
+
+.website-agent-card__channels {
+    margin: 3px 0 0;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.website-agent-card--live .website-agent-card__channels {
+    color: var(--color-sulu);
+}
+
+.website-agent-card--in_pilot .website-agent-card__channels {
+    color: #5a8a3f;
+}
+
+.website-agent-card--coming_soon .website-agent-card__channels {
+    color: var(--color-muted);
+}
+
+.website-agent-card__status {
+    margin-left: auto;
+    font-size: 11.5px;
+    font-weight: 700;
+    padding: 6px 12px;
+    border-radius: var(--radius-pill);
+    white-space: nowrap;
+    flex: none;
+}
+
+.website-agent-card__status--live {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    background: var(--color-sulu);
+    color: var(--color-deep-fir);
+}
+
+.website-agent-card__status--live::before {
+    content: "";
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--color-deep-fir);
+}
+
+.website-agent-card__status--in_pilot {
+    background: #eaf5db;
+    border: 1px solid #c5dfa8;
+    color: #2f5a1b;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    font-size: 11px;
+}
+
+.website-agent-card__status--coming_soon {
+    background: #eef2e9;
+    border: 1px dashed #c3cfb5;
+    color: #5a6957;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-size: 11px;
+}
+
+.website-agent-card__description {
+    position: relative;
+    font-size: 14.5px;
+    line-height: 1.55;
+    margin: 16px 0;
+}
+
+.website-agent-card--live .website-agent-card__description {
+    color: var(--color-on-dark-muted);
+}
+
+.website-agent-card--in_pilot .website-agent-card__description,
+.website-agent-card--coming_soon .website-agent-card__description {
+    color: #6b7669;
+}
+
+.website-agent-card__features {
+    position: relative;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 11px;
+    flex: 1;
+}
+
+.website-agent-card__feature {
+    display: flex;
+    gap: 11px;
+    align-items: flex-start;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.website-agent-card--live .website-agent-card__feature {
+    color: #e4f0d8;
+}
+
+.website-agent-card--live .website-agent-card__feature strong {
+    color: #ffffff;
+    font-weight: 650;
+}
+
+.website-agent-card--in_pilot .website-agent-card__feature,
+.website-agent-card--coming_soon .website-agent-card__feature {
+    color: #6b7669;
+}
+
+.website-agent-card--in_pilot .website-agent-card__feature strong,
+.website-agent-card--coming_soon .website-agent-card__feature strong {
+    color: #4a5647;
+    font-weight: 650;
+}
+
+.website-agent-card__feature-symbol {
+    font-weight: 800;
+    flex: none;
+}
+
+.website-agent-card--live .website-agent-card__feature-symbol {
+    color: var(--color-sulu);
+}
+
+.website-agent-card--in_pilot .website-agent-card__feature-symbol {
+    color: #5a8a3f;
+}
+
+.website-agent-card--coming_soon .website-agent-card__feature-symbol {
+    color: #9aa697;
+}
+
+.website-agent-card__cta {
+    position: relative;
+    margin-top: 22px;
+    align-self: flex-start;
+}
+
+/* --- Call me --- */
+
+.website-call-me {
+    margin: 0;
+    padding: 100px 64px;
+    background: var(--color-deep-fir);
+    color: #ffffff;
+    border-radius: 0;
+}
+
+.website-call-me__grid {
+    display: grid;
+    grid-template-columns: 1.1fr 0.9fr;
+    gap: 64px;
+    align-items: center;
+}
+
+.website-call-me__title {
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: 40px;
+    line-height: 1.1;
+    letter-spacing: -0.025em;
+    color: #ffffff;
+    margin: 14px 0 0;
+}
+
+.website-call-me__lead {
+    font-size: 16px;
+    line-height: 1.6;
+    color: var(--color-on-dark-muted);
+    margin: 18px 0 0;
+    max-width: 440px;
+}
+
+.website-call-me__bullets {
+    display: flex;
+    gap: 22px;
+    margin: 26px 0 0;
+    padding: 0;
+    list-style: none;
+    font-size: 13.5px;
+    font-weight: 600;
+    color: var(--color-on-dark-accent);
+}
+
+.website-call-me__card {
+    background: var(--color-panel);
+    border-radius: 18px;
+    padding: 28px 26px;
+    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.5);
+}
+
+.website-call-me__card-title {
+    font-family: var(--font-display);
+    font-size: 17px;
+    font-weight: 700;
+    color: var(--color-deep-fir);
+    margin: 4px 0 18px;
+}
+
+/* --- FAQ --- */
+
+.website-faq {
+    padding: 100px clamp(40px, 10vw, 140px);
+    background: #ffffff;
+    border-top: 1px solid #e7ece1;
+}
+
+.website-faq__grid {
+    display: grid;
+    grid-template-columns: 0.7fr 1.3fr;
+    gap: 56px;
+    align-items: start;
+}
+
+.website-faq__title {
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: 40px;
+    line-height: 1.08;
+    letter-spacing: -0.025em;
+    color: var(--color-deep-fir);
+    margin: 14px 0 0;
+}
+
+.website-faq__aside {
+    font-size: 15.5px;
+    line-height: 1.55;
+    color: var(--color-body);
+    margin: 16px 0 0;
+}
+
+.website-faq__aside--mobile {
+    display: none;
+    margin-top: 16px;
+    font-size: 14px;
+}
+
+.website-faq__link {
+    font-weight: 650;
+    border-bottom: 1px solid #b7d69a;
+    color: var(--color-link);
+}
+
+.website-faq__item {
+    padding: 20px 0;
+    border-bottom: 1px solid var(--color-border-soft);
+}
+
+.website-faq__item--last {
+    border-bottom: none;
+}
+
+.website-faq__question {
+    font-size: 16.5px;
+    font-weight: 700;
+    color: var(--color-deep-fir);
+    margin: 0;
+}
+
+.website-faq__answer {
+    font-size: 14.5px;
+    line-height: 1.6;
+    color: var(--color-body);
+    margin: 9px 0 0;
+    max-width: 620px;
+}
+
+/* --- Final CTA --- */
+
+.website-final-cta {
+    padding: 64px clamp(40px, 10vw, 140px) 72px;
+    background: #ffffff;
+}
+
+.website-final-cta__panel {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 32px;
+    background: var(--color-sulu);
+    border-radius: 40px;
+    padding: 32px 48px 32px 64px;
+    text-align: left;
+    overflow: hidden;
+}
+
+.website-final-cta__copy {
+    min-width: 0;
+    flex: 1 1 auto;
+    align-self: auto;
+    padding-bottom: 0;
+}
+
+.website-final-cta__title {
+    font-family: var(--font-display);
+    font-size: 48px;
+    line-height: 1.05;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    color: var(--color-deep-fir);
+    margin: 0;
+    max-width: 640px;
+}
+
+.website-final-cta__lead {
+    font-size: 16.5px;
+    line-height: 1.6;
+    color: #2f5a1b;
+    margin: 18px 0 0;
+    max-width: 460px;
+}
+
+.website-final-cta__actions {
+    display: flex;
+    gap: 14px;
+    justify-content: flex-start;
+    margin-top: 34px;
+    flex-wrap: wrap;
+}
+
+.website-final-cta__media {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    padding-top: 0;
+}
+
+.website-final-cta__phone {
+    display: block;
+    width: min(360px, 34vw);
+    height: auto;
+    object-fit: contain;
+    object-position: center;
+    background: #ffffff;
+    padding: 10px;
+    border-radius: 28px;
+    box-shadow:
+        0 0 0 1px rgba(10, 31, 10, 0.06),
+        0 12px 28px -8px rgba(10, 31, 10, 0.28),
+        0 28px 56px -20px rgba(10, 31, 10, 0.22);
+}
+
+/* --- Content pages (About, Blog, Legal) --- */
+
+.website-body--content {
+    background: #ffffff;
+}
+
+.website-body--content .website-nav--simple {
+    padding-left: clamp(40px, 10vw, 140px);
+    padding-right: clamp(40px, 10vw, 140px);
+}
+
+.website-content-page {
+    padding: 56px clamp(40px, 10vw, 140px) 72px;
+    max-width: none;
+}
+
+.website-content-page__title {
+    position: relative;
+    display: inline-block;
+    font-family: var(--font-display);
+    font-size: clamp(40px, 6vw, 64px);
+    font-weight: 800;
+    letter-spacing: -0.015em;
+    word-spacing: 0.1em;
+    line-height: 1.05;
+    margin: 0;
+    color: var(--color-sulu);
+    -webkit-text-stroke: 0.75px var(--color-deep-fir);
+    paint-order: stroke fill;
+    text-shadow: 0 8px 20px rgba(10, 31, 10, 0.12);
+}
+
+.website-content-page--centered-title .website-content-page__title {
+    display: block;
+    text-align: center;
+}
+
+.website-content-page__effective-date {
+    margin: 12px 0 0;
+    font-size: 11pt;
+    font-style: italic;
+    line-height: 1.4;
+    color: var(--color-body);
+}
+
+.website-content-page--centered-title .website-content-page__effective-date {
+    text-align: center;
+}
+
+.website-content-page__body {
+    margin-top: 28px;
+    font-size: 16.5px;
+    line-height: 1.65;
+    color: var(--color-body);
+    max-width: 640px;
+}
+
+.website-content-page__body p {
+    margin: 0 0 1em;
+}
+
+.website-content-page__body p:last-child {
+    margin-bottom: 0;
+}
+
+/* --- Brand strip (pre-footer) --- */
+
+.website-brand-strip {
+    background: var(--color-sulu);
+    padding: 20px clamp(40px, 10vw, 140px);
+}
+
+.website-brand-strip__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    flex-wrap: wrap;
+}
+
+.website-body a.website-brand-strip__wordmark {
+    display: inline-flex;
+    align-items: center;
+    gap: 1px;
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: 28px;
+    letter-spacing: -0.032em;
+    line-height: 1;
+    color: var(--color-deep-fir);
+}
+
+.website-body a.website-brand-strip__wordmark:hover {
+    color: var(--color-deep-fir);
+}
+
+.website-brand-strip__flower {
+    display: block;
+    margin: 0.12em -0.04em 0;
+    flex: none;
+}
+
+.website-brand-strip__tagline {
+    margin: 0;
+    font-size: 17px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--color-deep-fir);
+}
+
+/* --- Footer --- */
+
+.website-footer {
+    background: var(--color-deep-fir-footer);
+    color: var(--color-on-dark-muted);
+    padding: 72px clamp(40px, 10vw, 140px) 36px;
+}
+
+.website-footer__main {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 40px;
+    align-items: start;
+}
+
+.website-footer__column-title {
+    font-size: 16.5px;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-sulu);
+    margin: 0 0 20px;
+}
+
+.website-footer__contact {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.website-footer__contact-item {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.website-footer__contact-label {
+    font-size: 15.5px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.72);
+}
+
+.website-footer__contact-item a {
+    font-size: 15.5px;
+    font-weight: 400;
+    color: var(--color-on-dark-muted);
+}
+
+.website-footer__contact-item a:hover {
+    color: #ffffff;
+}
+
+.website-footer__nav {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    font-size: 15.5px;
+    font-weight: 400;
+}
+
+.website-footer__nav a {
+    color: var(--color-on-dark-muted);
+}
+
+.website-footer__nav a:hover {
+    color: #ffffff;
+}
+
+.website-footer__industries {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    font-size: 15.5px;
+    font-weight: 400;
+    line-height: 1.35;
+    color: var(--color-on-dark-muted);
+}
+
+.website-footer__address {
+    font-size: 15.5px;
+    font-weight: 400;
+    line-height: 1.75;
+    color: var(--color-on-dark-muted);
+}
+
+.website-footer__legal {
+    margin-top: 72px;
+    padding-top: 28px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    font-size: 15.5px;
+    color: var(--color-sulu);
+}
+
+.website-footer__made {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.35em;
+    line-height: 1.35;
+}
+
+.website-footer__heart {
+    display: inline-block;
+    width: 1.05em;
+    height: 1.05em;
+    flex: none;
+    /* Drop slightly so the heart point sits under the text baseline */
+    transform: translateY(0.22em);
+    background-color: var(--color-sulu);
+    -webkit-mask-image: url("../../img/website/footer/calliflowr-heart.svg");
+    mask-image: url("../../img/website/footer/calliflowr-heart.svg");
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
+/* --- Missed-call revenue calculator --- */
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.website-math {
+    padding: 96px clamp(40px, 6vw, 72px) 72px;
+    background: var(--color-deep-fir);
+    color: #ffffff;
+}
+
+.website-math__grid {
+    display: grid;
+    grid-template-columns: 1.05fr 0.95fr;
+    gap: 80px;
+    align-items: center;
+}
+
+.website-math__title {
+    max-width: 480px;
+    margin: 14px 0 0;
+    color: #ffffff;
+    font-family: var(--font-display);
+    font-size: 40px;
+    font-weight: 800;
+    line-height: 1.1;
+    letter-spacing: -0.025em;
+}
+
+.website-math__lead {
+    max-width: 500px;
+    margin: 20px 0 0;
+    color: var(--color-on-dark-muted);
+    font-size: 15.5px;
+    line-height: 1.7;
+}
+
+.website-math__controls {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    margin-top: 42px;
+}
+
+.website-math__control + .website-math__control {
+    padding-top: 30px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.website-math__control-heading {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 12px;
+}
+
+.website-math__label {
+    display: block;
+    color: var(--color-on-dark-accent);
+    font-size: 12.5px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.website-math__hint {
+    margin: 3px 0 0;
+    color: #6f9450;
+    font-size: 12.5px;
+    font-weight: 550;
+}
+
+.website-math__value {
+    color: var(--color-sulu);
+    font-family: var(--font-display);
+    font-size: 34px;
+    font-weight: 800;
+    line-height: 1;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+}
+
+.website-math__range {
+    width: 100%;
+    accent-color: var(--color-sulu);
+    cursor: pointer;
+}
+
+.website-math__scale {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 6px;
+    color: #6f9450;
+    font-size: 11px;
+    font-weight: 650;
+}
+
+.website-math__result {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.website-math-receipt {
+    position: relative;
+    width: min(380px, 100%);
+    transform: rotate(1.6deg);
+}
+
+.website-math-receipt__tape {
+    position: absolute;
+    z-index: 2;
+    top: -15px;
+    left: 50%;
+    width: 124px;
+    height: 30px;
+    border-radius: 2px;
+    background: rgba(159, 232, 112, 0.85);
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+    transform: translateX(-50%) rotate(-2.5deg);
+}
+
+.website-math-receipt__paper {
+    position: relative;
+    padding: 40px 36px 30px;
+    background: #fffef9;
+    color: var(--color-deep-fir);
+    box-shadow:
+        0 60px 110px -46px rgba(0, 0, 0, 0.8),
+        0 12px 28px -12px rgba(0, 0, 0, 0.4);
+}
+
+.website-math-receipt__paper::after {
+    position: absolute;
+    right: 0;
+    bottom: -10px;
+    left: 0;
+    height: 11px;
+    content: "";
+    background:
+        linear-gradient(-45deg, #fffef9 8px, transparent 0),
+        linear-gradient(45deg, #fffef9 8px, transparent 0);
+    background-size: 15px 15px;
+    filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.3));
+}
+
+.website-math-receipt__header {
+    padding-bottom: 18px;
+    border-bottom: 1.5px dashed #d9d5c2;
+    text-align: center;
+}
+
+.website-math-receipt__brand {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    font-family: var(--font-display);
+    font-size: 17px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+}
+
+.website-math-receipt__header > p {
+    margin: 6px 0 0;
+    color: #a39f8a;
+    font-size: 10.5px;
+    font-weight: 650;
+    letter-spacing: 0.18em;
+}
+
+.website-math-receipt__meta {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 14px;
+    color: #bab6a2;
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+}
+
+.website-math-receipt__lines {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin: 0;
+    padding: 22px 0;
+    color: #3a4a38;
+    font-size: 14px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.website-math-receipt__lines > div {
+    display: flex;
+    align-items: baseline;
+    gap: 9px;
+}
+
+.website-math-receipt__lines > div::after {
+    order: 2;
+    flex: 1;
+    border-bottom: 2px dotted #d9d5c2;
+    content: "";
+}
+
+.website-math-receipt__lines dt {
+    order: 1;
+}
+
+.website-math-receipt__lines dd {
+    order: 3;
+    margin: 0;
+    color: var(--color-deep-fir);
+    font-weight: 750;
+}
+
+.website-math-receipt__total {
+    padding-top: 20px;
+    border-top: 1.5px dashed #d9d5c2;
+    text-align: center;
+}
+
+.website-math-receipt__total p {
+    margin: 0;
+    color: #a39f8a;
+    font-size: 11px;
+    font-weight: 750;
+    letter-spacing: 0.14em;
+}
+
+.website-math-receipt__total output {
+    display: inline-block;
+    margin-top: 10px;
+    padding: 3px 16px 6px;
+    border-radius: 10px;
+    background: var(--color-sulu);
+    color: var(--color-deep-fir);
+    font-family: var(--font-display);
+    font-size: 46px;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+}
+
+.website-math-receipt__total span {
+    display: block;
+    margin-top: 16px;
+    color: var(--color-body);
+    font-size: 13px;
+    font-weight: 650;
+    line-height: 1.55;
+}
+
+.website-math-receipt__barcode {
+    width: 170px;
+    height: 32px;
+    margin: 22px auto 0;
+    opacity: 0.8;
+    background: repeating-linear-gradient(
+        90deg,
+        var(--color-deep-fir) 0 2px,
+        transparent 2px 4px,
+        var(--color-deep-fir) 4px 7px,
+        transparent 7px 9px,
+        var(--color-deep-fir) 9px 10px,
+        transparent 10px 14px
+    );
+}
+
+.website-math-receipt__disclaimer {
+    margin: 12px 0 0;
+    color: #bab6a2;
+    font-size: 10px;
+    font-weight: 550;
+    line-height: 1.4;
+    text-align: center;
+}
+
+.website-math__sources {
+    max-width: 880px;
+    margin: 64px auto 0;
+    color: rgba(201, 220, 182, 0.45);
+    font-size: 11.5px;
+    line-height: 1.75;
+    text-align: center;
+}
+
+/* --- Honest comparison --- */
+
+.website-comparison {
+    padding: 100px clamp(40px, 6vw, 72px) 120px;
+    background: #ffffff;
+}
+
+.website-comparison__intro {
+    text-align: center;
+}
+
+.website-comparison__title {
+    max-width: 640px;
+    margin: 14px auto 0;
+    color: var(--color-deep-fir);
+    font-family: var(--font-display);
+    font-size: 40px;
+    font-weight: 800;
+    line-height: 1.08;
+    letter-spacing: -0.025em;
+}
+
+.website-comparison__lead {
+    max-width: 680px;
+    margin: 20px auto 0;
+    color: var(--color-body);
+    font-size: 15.5px;
+    line-height: 1.7;
+}
+
+.website-comparison__scroll {
+    margin-top: 68px;
+    border: 1px solid var(--color-border-soft);
+    border-radius: 26px;
+    overflow-x: auto;
+}
+
+.website-comparison__table {
+    width: 100%;
+    min-width: 1000px;
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+}
+
+.website-comparison__table th,
+.website-comparison__table td {
+    padding: 18px 26px;
+    border-top: 1px solid #e7ece1;
+    color: var(--color-body);
+    font-size: 13.5px;
+    font-weight: 550;
+    line-height: 1.55;
+    text-align: left;
+    vertical-align: middle;
+}
+
+.website-comparison__table thead th {
+    padding-top: 22px;
+    padding-bottom: 22px;
+    border-top: 0;
+    color: var(--color-body);
+    font-size: 14.5px;
+    font-weight: 700;
+}
+
+.website-comparison__table th:first-child {
+    width: 22%;
+}
+
+.website-comparison__table th:nth-child(2) {
+    width: 28%;
+}
+
+.website-comparison__table th:nth-child(3),
+.website-comparison__table th:nth-child(4) {
+    width: 25%;
+}
+
+.website-comparison__table tbody th {
+    color: var(--color-deep-fir);
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.website-comparison__table .website-comparison__calliflowr {
+    border-color: rgba(255, 255, 255, 0.1);
+    background: var(--color-deep-fir);
+    color: #e4f0d8;
+    font-weight: 600;
+}
+
+.website-comparison__table thead .website-comparison__calliflowr {
+    border-radius: 22px 22px 0 0;
+    color: var(--color-sulu);
+}
+
+.website-comparison__table tbody tr:last-child .website-comparison__calliflowr {
+    border-radius: 0 0 22px 22px;
+}
+
+.website-comparison__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 9px;
+    font-family: var(--font-display);
+    font-size: 17px;
+    font-weight: 800;
+    letter-spacing: -0.015em;
+}
+
+.website-comparison__footnote {
+    max-width: 820px;
+    margin: 56px auto 0;
+    color: #a3ac9f;
+    font-size: 11.5px;
+    line-height: 1.75;
+    text-align: center;
+}
+
diff --git a/static/css/website/tokens.css b/static/css/website/tokens.css
new file mode 100644
index 0000000..b127a9f
--- /dev/null
+++ b/static/css/website/tokens.css
@@ -0,0 +1,53 @@
+/*
+ * Calliflowr website design tokens (desktop v1).
+ * Brand colors: Deep Fir, Sulu.
+ */
+
+:root {
+    /* Brand */
+    --color-deep-fir: #0a1f0a;
+    --color-sulu: #9fe870;
+    --color-deep-fir-footer: #0a1f0a;
+
+    /* Surfaces */
+    --color-page: #f4f7f0;
+    --color-panel: #ffffff;
+
+    /* Text */
+    --color-ink: #0a1f0a;
+    --color-body: #5a6957;
+    --color-muted: #8a948a;
+    --color-link: #245a12;
+    --color-nav: #3a4a38;
+
+    /* Accents */
+    --color-eyebrow-bg: #eaf2e0;
+    --color-eyebrow-border: #d8e4c8;
+    --color-eyebrow-text: #245a12;
+    --color-live-dot: #5fbf3f;
+    --color-on-dark-muted: #c9dcb6;
+    --color-on-dark-accent: #8fb56a;
+
+    /* Borders */
+    --color-border: #d7ddce;
+    --color-border-soft: #e2e8da;
+
+    /* Typography */
+    --font-display: "Bricolage Grotesque", system-ui, sans-serif;
+    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+
+    /* Layout (desktop) */
+    --site-gutter: 56px;
+    --section-gutter: 60px;
+    --mobile-max: 768px;
+
+    /* Shape */
+    --radius-sm: 10px;
+    --radius-md: 11px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-pill: 999px;
+
+    /* Motion */
+    --ease-hover: 0.15s ease;
+}
diff --git a/static/css/website/website.css b/static/css/website/website.css
new file mode 100644
index 0000000..d965d6e
--- /dev/null
+++ b/static/css/website/website.css
@@ -0,0 +1,7 @@
+@import url("tokens.css");
+@import url("base.css");
+@import url("components.css");
+@import url("sections.css");
+@import url("demo.css");
+@import url("login.css");
+@import url("responsive.css");
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
index 0a5062a..21006cf 100644
Binary files a/static/favicon-16x16.png and b/static/favicon-16x16.png differ
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
index b510645..49fec9a 100644
Binary files a/static/favicon-32x32.png and b/static/favicon-32x32.png differ
diff --git a/static/favicon-48x48.png b/static/favicon-48x48.png
new file mode 100644
index 0000000..7f6954c
Binary files /dev/null and b/static/favicon-48x48.png differ
diff --git a/static/favicon.ico b/static/favicon.ico
index 9616478..47ba03c 100644
Binary files a/static/favicon.ico and b/static/favicon.ico differ
diff --git a/static/favicon.svg b/static/favicon.svg
new file mode 100644
index 0000000..6949744
--- /dev/null
+++ b/static/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="Calliflowr">
+  <rect width="48" height="48" rx="11" fill="#0A1F0A"></rect>
+  <g transform="translate(24 24) scale(0.82) translate(-24 -24)">
+    <g fill="#9FE870">
+      <circle cx="36" cy="24" r="6.8"></circle><circle cx="30" cy="13.6" r="6.8"></circle><circle cx="18" cy="13.6" r="6.8"></circle><circle cx="12" cy="24" r="6.8"></circle><circle cx="18" cy="34.4" r="6.8"></circle><circle cx="30" cy="34.4" r="6.8"></circle>
+    </g>
+    <circle cx="24" cy="24" r="6" fill="#0A1F0A"></circle>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/icon-192.png b/static/icon-192.png
new file mode 100644
index 0000000..5bf1548
Binary files /dev/null and b/static/icon-192.png differ
diff --git a/static/icon-512.png b/static/icon-512.png
new file mode 100644
index 0000000..681d80c
Binary files /dev/null and b/static/icon-512.png differ
diff --git a/static/img/brand/apple-touch-icon.png b/static/img/brand/apple-touch-icon.png
new file mode 100644
index 0000000..5eff7af
Binary files /dev/null and b/static/img/brand/apple-touch-icon.png differ
diff --git a/static/img/brand/blossom-dark.svg b/static/img/brand/blossom-dark.svg
new file mode 100644
index 0000000..d23054e
--- /dev/null
+++ b/static/img/brand/blossom-dark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="Calliflowr">
+  <defs><mask id="hole"><rect width="48" height="48" fill="#fff"></rect><circle cx="24" cy="24" r="6" fill="#000"></circle></mask></defs>
+  <g mask="url(#hole)" fill="#0A1F0A">
+    <circle cx="36" cy="24" r="6.8"></circle><circle cx="30" cy="13.6" r="6.8"></circle><circle cx="18" cy="13.6" r="6.8"></circle><circle cx="12" cy="24" r="6.8"></circle><circle cx="18" cy="34.4" r="6.8"></circle><circle cx="30" cy="34.4" r="6.8"></circle>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/brand/blossom-lime-256.png b/static/img/brand/blossom-lime-256.png
new file mode 100644
index 0000000..d60fc9a
Binary files /dev/null and b/static/img/brand/blossom-lime-256.png differ
diff --git a/static/img/brand/blossom-lime-512.png b/static/img/brand/blossom-lime-512.png
new file mode 100644
index 0000000..4836359
Binary files /dev/null and b/static/img/brand/blossom-lime-512.png differ
diff --git a/static/img/brand/blossom-lime.svg b/static/img/brand/blossom-lime.svg
new file mode 100644
index 0000000..187cd50
--- /dev/null
+++ b/static/img/brand/blossom-lime.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="Calliflowr">
+  <defs><mask id="hole"><rect width="48" height="48" fill="#fff"></rect><circle cx="24" cy="24" r="6" fill="#000"></circle></mask></defs>
+  <g mask="url(#hole)" fill="#9FE870">
+    <circle cx="36" cy="24" r="6.8"></circle><circle cx="30" cy="13.6" r="6.8"></circle><circle cx="18" cy="13.6" r="6.8"></circle><circle cx="12" cy="24" r="6.8"></circle><circle cx="18" cy="34.4" r="6.8"></circle><circle cx="30" cy="34.4" r="6.8"></circle>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/brand/favicon-16.png b/static/img/brand/favicon-16.png
new file mode 100644
index 0000000..21006cf
Binary files /dev/null and b/static/img/brand/favicon-16.png differ
diff --git a/static/img/brand/favicon-32.png b/static/img/brand/favicon-32.png
new file mode 100644
index 0000000..49fec9a
Binary files /dev/null and b/static/img/brand/favicon-32.png differ
diff --git a/static/img/brand/favicon-48.png b/static/img/brand/favicon-48.png
new file mode 100644
index 0000000..7f6954c
Binary files /dev/null and b/static/img/brand/favicon-48.png differ
diff --git a/static/img/brand/favicon.svg b/static/img/brand/favicon.svg
new file mode 100644
index 0000000..6949744
--- /dev/null
+++ b/static/img/brand/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="Calliflowr">
+  <rect width="48" height="48" rx="11" fill="#0A1F0A"></rect>
+  <g transform="translate(24 24) scale(0.82) translate(-24 -24)">
+    <g fill="#9FE870">
+      <circle cx="36" cy="24" r="6.8"></circle><circle cx="30" cy="13.6" r="6.8"></circle><circle cx="18" cy="13.6" r="6.8"></circle><circle cx="12" cy="24" r="6.8"></circle><circle cx="18" cy="34.4" r="6.8"></circle><circle cx="30" cy="34.4" r="6.8"></circle>
+    </g>
+    <circle cx="24" cy="24" r="6" fill="#0A1F0A"></circle>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/brand/icon-192.png b/static/img/brand/icon-192.png
new file mode 100644
index 0000000..5bf1548
Binary files /dev/null and b/static/img/brand/icon-192.png differ
diff --git a/static/img/brand/icon-512.png b/static/img/brand/icon-512.png
new file mode 100644
index 0000000..681d80c
Binary files /dev/null and b/static/img/brand/icon-512.png differ
diff --git a/static/img/brand/icon-maskable.svg b/static/img/brand/icon-maskable.svg
new file mode 100644
index 0000000..d1ab4b4
--- /dev/null
+++ b/static/img/brand/icon-maskable.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="Calliflowr">
+  <rect width="48" height="48" fill="#0A1F0A"></rect>
+  <g transform="translate(24 24) scale(0.60) translate(-24 -24)">
+    <g fill="#9FE870">
+      <circle cx="36" cy="24" r="6.8"></circle><circle cx="30" cy="13.6" r="6.8"></circle><circle cx="18" cy="13.6" r="6.8"></circle><circle cx="12" cy="24" r="6.8"></circle><circle cx="18" cy="34.4" r="6.8"></circle><circle cx="30" cy="34.4" r="6.8"></circle>
+    </g>
+    <circle cx="24" cy="24" r="6" fill="#0A1F0A"></circle>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/brand/wordmark-dark.svg b/static/img/brand/wordmark-dark.svg
new file mode 100644
index 0000000..b10780a
--- /dev/null
+++ b/static/img/brand/wordmark-dark.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 62" width="300" height="62" role="img" aria-label="Calliflowr">
+  
+  <text x="0" y="47" font-size="52" fill="#0A1F0A">callifl</text>
+  <g transform="translate(150 15) scale(0.62)">
+    <g fill="#0A1F0A"><circle cx="36" cy="24" r="6.8"></circle><circle cx="30" cy="13.6" r="6.8"></circle><circle cx="18" cy="13.6" r="6.8"></circle><circle cx="12" cy="24" r="6.8"></circle><circle cx="18" cy="34.4" r="6.8"></circle><circle cx="30" cy="34.4" r="6.8"></circle></g>
+    <circle cx="24" cy="24" r="6" fill="#f4f7f0"></circle>
+  </g>
+  <text x="182" y="47" font-size="52" fill="#0A1F0A">wr</text>
+</svg>
\ No newline at end of file
diff --git a/static/img/website/footer/calliflowr-heart.svg b/static/img/website/footer/calliflowr-heart.svg
new file mode 100644
index 0000000..d0fcfef
--- /dev/null
+++ b/static/img/website/footer/calliflowr-heart.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false">
+  <path fill="currentColor" d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>
+</svg>
diff --git a/static/img/website/footer/footer-cta-short.png b/static/img/website/footer/footer-cta-short.png
new file mode 100644
index 0000000..9de11db
Binary files /dev/null and b/static/img/website/footer/footer-cta-short.png differ
diff --git a/static/img/website/footer/footer-cta-shorter.png b/static/img/website/footer/footer-cta-shorter.png
new file mode 100644
index 0000000..e6507a4
Binary files /dev/null and b/static/img/website/footer/footer-cta-shorter.png differ
diff --git a/static/img/website/hero/calliflowr-cleaning.jpg b/static/img/website/hero/calliflowr-cleaning.jpg
new file mode 100644
index 0000000..84bdc85
Binary files /dev/null and b/static/img/website/hero/calliflowr-cleaning.jpg differ
diff --git a/static/img/website/hero/calliflowr-construction.jpg b/static/img/website/hero/calliflowr-construction.jpg
new file mode 100644
index 0000000..d91586d
Binary files /dev/null and b/static/img/website/hero/calliflowr-construction.jpg differ
diff --git a/static/img/website/hero/calliflowr-electrical.jpg b/static/img/website/hero/calliflowr-electrical.jpg
new file mode 100644
index 0000000..3a67764
Binary files /dev/null and b/static/img/website/hero/calliflowr-electrical.jpg differ
diff --git a/static/img/website/hero/calliflowr-garage-door.jpg b/static/img/website/hero/calliflowr-garage-door.jpg
new file mode 100644
index 0000000..c0fa0c5
Binary files /dev/null and b/static/img/website/hero/calliflowr-garage-door.jpg differ
diff --git a/static/img/website/hero/calliflowr-hvac.jpg b/static/img/website/hero/calliflowr-hvac.jpg
new file mode 100644
index 0000000..2874736
Binary files /dev/null and b/static/img/website/hero/calliflowr-hvac.jpg differ
diff --git a/static/img/website/hero/calliflowr-pest-control.jpg b/static/img/website/hero/calliflowr-pest-control.jpg
new file mode 100644
index 0000000..5a7e054
Binary files /dev/null and b/static/img/website/hero/calliflowr-pest-control.jpg differ
diff --git a/static/img/website/hero/calliflowr-plumbing.jpg b/static/img/website/hero/calliflowr-plumbing.jpg
new file mode 100644
index 0000000..a632043
Binary files /dev/null and b/static/img/website/hero/calliflowr-plumbing.jpg differ
diff --git a/static/img/website/hero/calliflowr-roofing.jpg b/static/img/website/hero/calliflowr-roofing.jpg
new file mode 100644
index 0000000..97c4b39
Binary files /dev/null and b/static/img/website/hero/calliflowr-roofing.jpg differ
diff --git a/static/img/website/hero/calliflowr-solar.jpg b/static/img/website/hero/calliflowr-solar.jpg
new file mode 100644
index 0000000..fb85877
Binary files /dev/null and b/static/img/website/hero/calliflowr-solar.jpg differ
diff --git a/static/img/website/how-it-works/step-2.png b/static/img/website/how-it-works/step-2.png
new file mode 100644
index 0000000..d4bfbcf
Binary files /dev/null and b/static/img/website/how-it-works/step-2.png differ
diff --git a/static/img/website/how-it-works/step-3.png b/static/img/website/how-it-works/step-3.png
new file mode 100644
index 0000000..1ec9f55
Binary files /dev/null and b/static/img/website/how-it-works/step-3.png differ
diff --git a/static/img/website/how-it-works/step-4.png b/static/img/website/how-it-works/step-4.png
new file mode 100644
index 0000000..c246bcb
Binary files /dev/null and b/static/img/website/how-it-works/step-4.png differ
diff --git a/static/img/website/icons/trusted.png b/static/img/website/icons/trusted.png
new file mode 100644
index 0000000..19005af
Binary files /dev/null and b/static/img/website/icons/trusted.png differ
diff --git a/static/img/website/screenshots/.gitkeep b/static/img/website/screenshots/.gitkeep
new file mode 100644
index 0000000..34f365b
--- /dev/null
+++ b/static/img/website/screenshots/.gitkeep
@@ -0,0 +1,3 @@
+# Placeholder until real dashboard screenshot is added.
+# Set DASHBOARD_SCREENSHOT in utils/website/content.py to:
+# img/website/screenshots/shot-dashboard.png
diff --git a/static/js/website-calculator.js b/static/js/website-calculator.js
new file mode 100644
index 0000000..7baffe5
--- /dev/null
+++ b/static/js/website-calculator.js
@@ -0,0 +1,37 @@
+(() => {
+  const calculator = document.querySelector("[data-revenue-calculator]");
+  if (!calculator) return;
+
+  const ticketInput = calculator.querySelector("[data-ticket]");
+  const missedInput = calculator.querySelector("[data-missed]");
+  if (!ticketInput || !missedInput) return;
+
+  const currency = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 0,
+  });
+
+  const setText = (selector, value) => {
+    const element = calculator.querySelector(selector);
+    if (element) element.textContent = value;
+  };
+
+  const update = () => {
+    const ticket = Number(ticketInput.value);
+    const missed = Number(missedInput.value);
+    const weeklyLoss = ticket * missed;
+    const monthlyLoss = weeklyLoss * 4.33;
+
+    setText("[data-ticket-label]", currency.format(ticket));
+    setText("[data-missed-label]", String(missed));
+    setText("[data-receipt-ticket]", currency.format(ticket));
+    setText("[data-receipt-missed]", String(missed));
+    setText("[data-weekly-loss]", currency.format(weeklyLoss));
+    setText("[data-monthly-loss]", currency.format(monthlyLoss));
+  };
+
+  ticketInput.addEventListener("input", update);
+  missedInput.addEventListener("input", update);
+  update();
+})();
diff --git a/static/js/website-call-me.js b/static/js/website-call-me.js
new file mode 100644
index 0000000..b6921d9
--- /dev/null
+++ b/static/js/website-call-me.js
@@ -0,0 +1,141 @@
+(() => {
+  const phoneInput = document.querySelector("#call-me #phone");
+  if (phoneInput instanceof HTMLInputElement) {
+    let previousDigitCount = 0;
+
+    const onlyDigits = (raw) => {
+      let digits = String(raw || "").replace(/\D/g, "");
+      if (digits.length === 11 && digits.startsWith("1")) {
+        digits = digits.slice(1);
+      }
+      return digits.slice(0, 10);
+    };
+
+    const formatPhone = (raw, { deleting = false } = {}) => {
+      const digits = onlyDigits(raw);
+      const area = digits.slice(0, 3);
+      const mid = digits.slice(3, 6);
+      const last = digits.slice(6, 10);
+      const n = digits.length;
+
+      if (n === 0) return "";
+      if (n < 3) return `(${area}`;
+      if (n === 3) return deleting ? `(${area}` : `(${area})`;
+      if (n < 6) return `(${area}) ${mid}`;
+      if (n === 6) return deleting ? `(${area}) ${mid}` : `(${area}) ${mid} -`;
+      return `(${area}) ${mid} - ${last}`;
+    };
+
+    const countDigitsBefore = (value, caret) => {
+      let count = 0;
+      const end = Math.min(caret, value.length);
+      for (let i = 0; i < end; i += 1) {
+        if (/\d/.test(value[i])) count += 1;
+      }
+      return count;
+    };
+
+    const caretFromDigitCount = (value, digitCount) => {
+      if (digitCount <= 0) return 0;
+      let seen = 0;
+      for (let i = 0; i < value.length; i += 1) {
+        if (/\d/.test(value[i])) {
+          seen += 1;
+          if (seen === digitCount) {
+            let pos = i + 1;
+            while (pos < value.length && !/\d/.test(value[pos])) pos += 1;
+            return pos;
+          }
+        }
+      }
+      return value.length;
+    };
+
+    const applyFormat = () => {
+      const previous = phoneInput.value;
+      const selectionStart = phoneInput.selectionStart;
+      const caret = selectionStart == null ? previous.length : selectionStart;
+      const typingAtEnd = caret >= previous.length;
+      const digits = onlyDigits(previous);
+      const digitCount = digits.length;
+      const deleting = digitCount < previousDigitCount;
+      const digitsBefore = countDigitsBefore(previous, caret);
+      const next = formatPhone(previous, { deleting });
+
+      previousDigitCount = digitCount;
+
+      if (next !== previous) {
+        phoneInput.value = next;
+      }
+
+      const nextCaret = typingAtEnd
+        ? next.length
+        : caretFromDigitCount(next, Math.min(digitsBefore, digitCount));
+
+      try {
+        phoneInput.setSelectionRange(nextCaret, nextCaret);
+      } catch (_) {
+        // Ignore browsers that reject setSelectionRange on tel inputs.
+      }
+    };
+
+    phoneInput.addEventListener("keydown", (event) => {
+      if (event.key !== "Backspace") return;
+      if (phoneInput.selectionStart !== phoneInput.selectionEnd) return;
+
+      const caret = phoneInput.selectionStart ?? 0;
+      if (caret <= 0) return;
+
+      const charBefore = phoneInput.value[caret - 1];
+      if (/\d/.test(charBefore)) return;
+
+      event.preventDefault();
+      const digits = onlyDigits(phoneInput.value);
+      if (digits.length === 0) {
+        phoneInput.value = "";
+        previousDigitCount = 0;
+        return;
+      }
+
+      const trimmed = digits.slice(0, -1);
+      previousDigitCount = digits.length;
+      phoneInput.value = formatPhone(trimmed, { deleting: true });
+      previousDigitCount = trimmed.length;
+      const pos = phoneInput.value.length;
+      phoneInput.setSelectionRange(pos, pos);
+    });
+
+    phoneInput.addEventListener("input", applyFormat);
+    phoneInput.addEventListener("blur", () => {
+      previousDigitCount = onlyDigits(phoneInput.value).length;
+      phoneInput.value = formatPhone(phoneInput.value, { deleting: false });
+    });
+
+    if (phoneInput.value) {
+      previousDigitCount = onlyDigits(phoneInput.value).length;
+      applyFormat();
+    }
+  }
+
+  const crmSelect = document.querySelector("#call-me #crm");
+  const crmOtherField = document.querySelector("#call-me #crm-other-field");
+  const crmOtherInput = document.querySelector("#call-me #crm_other");
+  if (
+    crmSelect instanceof HTMLSelectElement &&
+    crmOtherField instanceof HTMLElement &&
+    crmOtherInput instanceof HTMLInputElement
+  ) {
+    const syncCrmOther = () => {
+      const showOther = crmSelect.value === "other";
+      crmOtherField.hidden = !showOther;
+      crmOtherField.classList.toggle("is-hidden", !showOther);
+      crmOtherInput.required = showOther;
+      if (!showOther) {
+        crmOtherInput.value = "";
+      }
+    };
+
+    crmSelect.addEventListener("change", syncCrmOther);
+    syncCrmOther();
+  }
+})();
diff --git a/static/js/website-hero.js b/static/js/website-hero.js
new file mode 100644
index 0000000..cb1609a
--- /dev/null
+++ b/static/js/website-hero.js
@@ -0,0 +1,163 @@
+(() => {
+  const root = document.querySelector("[data-hero-showcase]");
+  if (!root) return;
+
+  const cards = Array.from(root.querySelectorAll(".website-hero__card"));
+  const genreStrip = root.querySelector(".website-hero__genres");
+  if (!cards.length || !genreStrip) return;
+
+  const originals = Array.from(genreStrip.querySelectorAll(".website-hero__genre"));
+  if (!originals.length) return;
+
+  const count = originals.length;
+
+  // Three copies: work in the middle set so both sides always have neighbors.
+  for (let copy = 0; copy < 2; copy += 1) {
+    originals.forEach((genre) => {
+      const clone = genre.cloneNode(true);
+      clone.setAttribute("aria-hidden", "true");
+      clone.tabIndex = -1;
+      genreStrip.appendChild(clone);
+    });
+  }
+
+  const genres = Array.from(genreStrip.querySelectorAll(".website-hero__genre"));
+
+  let index = 0;
+  // Start on the middle copy so neighbors exist on both sides.
+  let visualIndex = count;
+  let timer = null;
+  let transitioning = false;
+  const INTERVAL_MS = 2600;
+
+  function loopWidth() {
+    return genres[count].offsetLeft - genres[0].offsetLeft;
+  }
+
+  function centerOn(buttonIndex, behavior = "smooth") {
+    const button = genres[buttonIndex];
+    if (!button) return;
+
+    const stripRect = genreStrip.getBoundingClientRect();
+    const genreRect = button.getBoundingClientRect();
+    const target =
+      genreStrip.scrollLeft +
+      (genreRect.left - stripRect.left) -
+      (stripRect.width - genreRect.width) / 2;
+
+    genreStrip.scrollTo({ left: target, behavior });
+  }
+
+  function syncActiveClasses() {
+    cards.forEach((card, i) => {
+      const active = i === index;
+      card.classList.toggle("is-active", active);
+      card.setAttribute("aria-hidden", active ? "false" : "true");
+    });
+
+    genres.forEach((genre) => {
+      const active = Number(genre.dataset.slideIndex) === index;
+      genre.classList.toggle("is-active", active);
+      if (genre.getAttribute("aria-hidden") !== "true") {
+        genre.setAttribute("aria-selected", active ? "true" : "false");
+      }
+    });
+  }
+
+  /**
+   * Instantly shift scroll by whole loops so visualIndex stays in the middle
+   * copy [count, 2*count). Content looks identical; no animation.
+   */
+  function snapToMiddleCopy() {
+    const width = loopWidth();
+    if (!width) return;
+
+    while (visualIndex >= 2 * count) {
+      genreStrip.scrollLeft -= width;
+      visualIndex -= count;
+    }
+    while (visualIndex < count) {
+      genreStrip.scrollLeft += width;
+      visualIndex += count;
+    }
+  }
+
+  /**
+   * Before a forward step, if the next pill would be past the middle copy,
+   * jump back one loop first so we always smooth-scroll onto a real node.
+   */
+  function prepareForwardStep() {
+    if (visualIndex < 2 * count - 1) return;
+    const width = loopWidth();
+    if (!width) return;
+    genreStrip.scrollLeft -= width;
+    visualIndex -= count;
+  }
+
+  function setActive(nextIndex, targetVisual, behavior = "smooth") {
+    index = ((nextIndex % count) + count) % count;
+    visualIndex = targetVisual;
+    syncActiveClasses();
+    centerOn(visualIndex, behavior);
+  }
+
+  function next() {
+    if (transitioning) return;
+    transitioning = true;
+
+    prepareForwardStep();
+    setActive(index + 1, visualIndex + 1, "smooth");
+
+    window.setTimeout(() => {
+      snapToMiddleCopy();
+      transitioning = false;
+    }, 500);
+  }
+
+  function start() {
+    stop();
+    timer = window.setInterval(next, INTERVAL_MS);
+  }
+
+  function stop() {
+    if (timer !== null) {
+      window.clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  genreStrip.addEventListener("click", (event) => {
+    const button = event.target.closest(".website-hero__genre");
+    if (!button || !genreStrip.contains(button)) return;
+
+    const nextIndex = Number(button.dataset.slideIndex || 0);
+    let targetVisual = genres.indexOf(button);
+
+    // Prefer the forward instance when the strip is moving ahead.
+    if (targetVisual <= visualIndex) {
+      const forwardTwin = targetVisual + count;
+      if (forwardTwin < genres.length && forwardTwin > visualIndex) {
+        targetVisual = forwardTwin;
+      }
+    }
+
+    // Keep selection in/near the middle copy when possible.
+    if (targetVisual < count) {
+      targetVisual += count;
+    } else if (targetVisual >= 2 * count) {
+      targetVisual -= count;
+      genreStrip.scrollLeft -= loopWidth();
+    }
+
+    transitioning = false;
+    setActive(nextIndex, targetVisual);
+    start();
+  });
+
+  root.addEventListener("mouseenter", stop);
+  root.addEventListener("mouseleave", start);
+
+  syncActiveClasses();
+  centerOn(visualIndex, "auto");
+  start();
+})();
diff --git a/static/site.webmanifest b/static/site.webmanifest
index 65c2cbd..aec02ed 100644
--- a/static/site.webmanifest
+++ b/static/site.webmanifest
@@ -1,14 +1,21 @@
 {
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/static/android-chrome-144x144.png",
-            "sizes": "144x144",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+  "name": "Calliflowr",
+  "short_name": "Calliflowr",
+  "icons": [
+    {
+      "src": "/static/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "theme_color": "#0a1f0a",
+  "background_color": "#f4f7f0",
+  "display": "standalone"
 }
diff --git a/templates/account/calliflowr_auth_base.html b/templates/account/calliflowr_auth_base.html
new file mode 100644
index 0000000..52098e0
--- /dev/null
+++ b/templates/account/calliflowr_auth_base.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{% block title %}Sign in{% endblock %} | Calliflowr</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=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
+
+    <link href="{{ url_for('static', path='css/website/website.css') }}" rel="stylesheet">
+
+    <link rel="icon" href="{{ url_for('static', path='favicon.svg') }}" type="image/svg+xml">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', path='favicon-32x32.png') }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', path='favicon-16x16.png') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', path='apple-touch-icon.png') }}">
+    <link rel="manifest" href="{{ url_for('static', path='site.webmanifest') }}">
+    <meta name="theme-color" content="#0a1f0a">
+    <meta name="csrf-token" content="{{ request.state.csrf_token }}">
+
+    <script defer src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/htmx-ext-remove-me@2.0.0/remove-me.js"></script>
+    <script defer src="{{ url_for('static', path='js/ui.js') }}"></script>
+    <script defer src="{{ url_for('static', path='js/app.js') }}"></script>
+    {% block extra_head %}{% endblock %}
+</head>
+<body class="cf-login-body">
+    <div id="toast-container"
+         class="toast-container position-fixed bottom-0 end-0 p-3"
+         hx-ext="remove-me"
+         aria-live="polite">
+      {% set flash = request.state.flash %}
+      {% if flash %}
+        {% with message=flash.message, level=flash.level %}
+          {% include "base/partials/toast.html" %}
+        {% endwith %}
+      {% endif %}
+    </div>
+
+    {% block content %}{% endblock %}
+</body>
+</html>
diff --git a/templates/account/forgot_password.html b/templates/account/forgot_password.html
index 9250384..6e51c53 100644
--- a/templates/account/forgot_password.html
+++ b/templates/account/forgot_password.html
@@ -1,33 +1,73 @@
-{% extends "account/auth_base.html" %}
+{% extends "account/calliflowr_auth_base.html" %}
 
+{% block title %}Forgot password{% endblock %}
 
-{% block title %}Forgot Password{% endblock %}
+{% block content %}
+<div class="cf-login">
+    {% include "account/partials/auth_brand_panel.html" %}
 
-{% block auth_header %}Forgot Password{% endblock %}
+    <div class="cf-login__panel">
+        <div class="cf-login__card">
+            {% if show_form %}
+            <h1 class="cf-login__title">Forgot password</h1>
+            <p class="cf-login__lead">
+                Enter the email for your Calliflowr account and we'll send a link to set a new password.
+            </p>
 
-{% block auth_content %}
-<div class="forgot-password-form">
-    {% if show_form %}
-    <form method="POST" action="{{ url_for('forgot_password') }}"
-          hx-post="{{ url_for('forgot_password') }}" hx-swap="none"
-          class="needs-validation" novalidate>
-          {% include 'base/partials/csrf_field.html' %}
-        <!-- Email Input -->
-        <div class="mb-3">
-            <label for="email" class="form-label">Email</label>
-            <input type="email" class="form-control" id="email" name="email" required>
-        </div>
+            {% if request.state.flash and request.state.flash.level == 'danger' %}
+            <div class="cf-login__error" role="alert">
+                {{ request.state.flash.message }}
+            </div>
+            {% endif %}
 
-        <!-- Submit Button -->
-        <div class="d-grid mb-3">
-            <button type="submit" class="btn btn-primary">Reset Password</button>
-        </div>
-    </form>
+            <form
+                class="cf-login__form"
+                method="POST"
+                action="{{ url_for('forgot_password') }}"
+                hx-post="{{ url_for('forgot_password') }}"
+                hx-swap="none"
+                novalidate
+            >
+                {% include 'base/partials/csrf_field.html' %}
+
+                <label class="cf-login__field" for="email">
+                    <span class="cf-login__label">Email</span>
+                    <input
+                        class="cf-login__input"
+                        type="email"
+                        id="email"
+                        name="email"
+                        placeholder="you@yourcompany.com"
+                        autocomplete="email"
+                        required
+                    >
+                </label>
+
+                <button type="submit" class="cf-login__submit">
+                    Send reset link
+                </button>
+            </form>
 
-    <!-- Login Link -->
-    <p class="text-center">Remember your password? <a href="{{ url_for('read_login') }}">Login here</a></p>
-    {% else %}
-    <p class="text-center">If an account exists with this email, a password reset link will be sent. Note that you can request a password reset only once an hour. If you have not received an email, please check your spam folder or try again later.</p>
-    {% endif %}
+            <p class="cf-login__back">
+                Remember your password?
+                <a href="{{ url_for('read_login') }}" class="cf-login__forgot">Back to sign in</a>
+            </p>
+            {% else %}
+            <h1 class="cf-login__title">Check your email</h1>
+            <p class="cf-login__lead">
+                If an account exists with that email, a password reset link is on the way.
+                You can request another reset once an hour. Haven't seen it? Check spam, then try again later.
+            </p>
+
+            {% if request.state.flash %}
+            <div class="cf-login__note" role="status">
+                {{ request.state.flash.message }}
+            </div>
+            {% endif %}
+
+            <a href="{{ url_for('read_login') }}" class="cf-login__dashboard-link">Back to sign in</a>
+            {% endif %}
+        </div>
+    </div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/account/login.html b/templates/account/login.html
index 9f67572..f92b51e 100644
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -1,71 +1,110 @@
-{% extends "account/auth_base.html" %}
-
+{% extends "account/calliflowr_auth_base.html" %}
 
 {% set show_warning_only = user and invitation_token_warning %}
 {% set warning_heading = "Invitation link expired" if invitation_token_warning == 'expired' else "Invitation link invalid" %}
 
-{% block title %}{% if show_warning_only %}{{ warning_heading }}{% else %}Login{% endif %}{% endblock %}
+{% block title %}{% if show_warning_only %}{{ warning_heading }}{% else %}Sign in{% endif %}{% endblock %}
 
-{% block auth_header %}{% if show_warning_only %}{{ warning_heading }}{% else %}Login{% endif %}{% endblock %}
+{% block content %}
+<div class="cf-login">
+    {% include "account/partials/auth_brand_panel.html" %}
 
-{% block auth_content %}
-<div class="login-form">
-    {% if invitation_token_warning == 'expired' %}
-    <div class="alert alert-warning" role="alert">
-        This invitation link has expired. Ask your organization administrator to send a new invitation, then use the link in the latest email.
-    </div>
-    {% elif invitation_token_warning == 'invalid' %}
-    <div class="alert alert-warning" role="alert">
-        This invitation link is no longer valid. If you were invited again recently, use the link from the most recent invitation email.
-    </div>
-    {% endif %}
+    <div class="cf-login__panel">
+        <div class="cf-login__card">
+            {% if show_warning_only %}
+            <h1 class="cf-login__title">{{ warning_heading }}</h1>
+            {% if invitation_token_warning == 'expired' %}
+            <p class="cf-login__lead">
+                This invitation link has expired. Ask your organization administrator to send a new invitation, then use the link in the latest email.
+            </p>
+            {% else %}
+            <p class="cf-login__lead">
+                This invitation link is no longer valid. If you were invited again recently, use the link from the most recent invitation email.
+            </p>
+            {% endif %}
+            <a href="{{ url_for('read_dashboard') }}" class="cf-login__dashboard-link">Return to dashboard</a>
+            {% else %}
+            <h1 class="cf-login__title">Sign in</h1>
+            <p class="cf-login__lead">
+                Enter the email and password for your Calliflowr account.
+            </p>
 
-    {% if show_warning_only %}
-    <div class="d-grid">
-        <a href="{{ url_for('read_dashboard') }}" class="btn btn-primary">Return to dashboard</a>
-    </div>
-    {% else %}
-    <form method="POST" action="{{ url_for('login') }}"
-          hx-post="{{ url_for('login') }}" hx-swap="none"
-          class="needs-validation" novalidate>
-          {% include 'base/partials/csrf_field.html' %}
-        {# Add hidden input for invitation token if present #}
-        {% if invitation_token %}
-        <input type="hidden" name="invitation_token" value="{{ invitation_token }}">
-        {% endif %}
+            {% if invitation_token_warning == 'expired' %}
+            <div class="cf-login__warning" role="alert">
+                This invitation link has expired. Ask your organization administrator to send a new invitation, then use the link in the latest email.
+            </div>
+            {% elif invitation_token_warning == 'invalid' %}
+            <div class="cf-login__warning" role="alert">
+                This invitation link is no longer valid. If you were invited again recently, use the link from the most recent invitation email.
+            </div>
+            {% endif %}
 
-        <!-- Email Input -->
-        <div class="mb-3">
-            <label for="email" class="form-label">Email</label>
-            <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
-        </div>
+            {% if request.state.flash and request.state.flash.level == 'danger' %}
+            <div class="cf-login__error" role="alert">
+                {{ request.state.flash.message }}
+            </div>
+            {% endif %}
 
-        <!-- Password Input -->
-        <div class="mb-3">
-            <label for="password" class="form-label">Password</label>
-            <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" required>
-        </div>
+            <form
+                class="cf-login__form"
+                method="POST"
+                action="{{ url_for('login') }}"
+                hx-post="{{ url_for('login') }}"
+                hx-swap="none"
+                novalidate
+            >
+                {% include 'base/partials/csrf_field.html' %}
 
-        <!-- "Remember Me" Checkbox -->
-        <div class="mb-3 form-check">
-            <input type="checkbox" class="form-check-input" id="remember" name="remember">
-            <label class="form-check-label" for="remember">Remember Me</label>
-        </div>
+                {% if invitation_token %}
+                <input type="hidden" name="invitation_token" value="{{ invitation_token }}">
+                {% endif %}
 
-        <!-- Submit Button -->
-        <div class="d-grid mb-3">
-            <button type="submit" class="btn btn-primary"
-                    {% if invitation_token_warning %}disabled aria-disabled="true"{% endif %}>
-                Login
-            </button>
-        </div>
-    </form>
+                <label class="cf-login__field" for="email">
+                    <span class="cf-login__label">Email</span>
+                    <input
+                        class="cf-login__input"
+                        type="email"
+                        id="email"
+                        name="email"
+                        placeholder="you@yourcompany.com"
+                        autocomplete="email"
+                        required
+                        {% if invitation_token_warning %}disabled{% endif %}
+                    >
+                </label>
+
+                <label class="cf-login__field" for="password">
+                    <span class="cf-login__label">Password</span>
+                    <input
+                        class="cf-login__input"
+                        type="password"
+                        id="password"
+                        name="password"
+                        placeholder="Enter your password"
+                        autocomplete="current-password"
+                        required
+                        {% if invitation_token_warning %}disabled{% endif %}
+                    >
+                </label>
 
-    <!-- Forgot Password Link -->
-    <p class="text-center"><a href="{{ url_for('read_forgot_password') }}">Forgot Password?</a></p>
+                <div class="cf-login__row">
+                    <label class="cf-login__remember" for="remember">
+                        <input type="checkbox" id="remember" name="remember" {% if invitation_token_warning %}disabled{% endif %}>
+                        Remember me
+                    </label>
+                    <a href="{{ url_for('read_forgot_password') }}" class="cf-login__forgot">Forgot password?</a>
+                </div>
 
-    <!-- Register Link -->
-    <p class="text-center">Don't have an account? <a href="{{ url_for('read_register') }}">Register here</a></p>
-    {% endif %}
+                <button
+                    type="submit"
+                    class="cf-login__submit"
+                    {% if invitation_token_warning %}disabled aria-disabled="true"{% endif %}
+                >
+                    Sign in
+                </button>
+            </form>
+            {% endif %}
+        </div>
+    </div>
 </div>
 {% endblock %}
diff --git a/templates/account/partials/auth_brand_panel.html b/templates/account/partials/auth_brand_panel.html
new file mode 100644
index 0000000..584c041
--- /dev/null
+++ b/templates/account/partials/auth_brand_panel.html
@@ -0,0 +1,34 @@
+<aside class="cf-login__brand" aria-label="Calliflowr">
+    <a href="{{ url_for('read_home') }}" class="cf-login__brand-mark">Calliflowr</a>
+
+    <div class="cf-login__brand-copy">
+        <span class="cf-login__live">
+            <span class="cf-login__live-dot" aria-hidden="true"></span>
+            Calli is answering
+        </span>
+        <h2 class="cf-login__brand-title">
+            Every call answered.<br>
+            Every job <span class="cf-login__brand-highlight">booked.</span>
+        </h2>
+        <p class="cf-login__brand-lead">
+            Sign in to see today's calls, bookings, and the jobs Calli put on your calendar overnight.
+        </p>
+        <div class="cf-login__stats" aria-label="Product highlights">
+            <div>
+                <div class="cf-login__stat-value">1 ring</div>
+                <div class="cf-login__stat-label">avg. pickup</div>
+            </div>
+            <div>
+                <div class="cf-login__stat-value">24/7</div>
+                <div class="cf-login__stat-label">always on</div>
+            </div>
+            <div>
+                <div class="cf-login__stat-value">0</div>
+                <div class="cf-login__stat-label">missed calls</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="cf-login__glow" aria-hidden="true"></div>
+    <div class="cf-login__glow cf-login__glow--soft" aria-hidden="true"></div>
+</aside>
diff --git a/templates/base.html b/templates/base.html
index efd1104..6b180d2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -13,13 +13,12 @@
     <link href="{{ url_for('static', path='css/styles.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', path='css/extras.css') }}" rel="stylesheet">
 
-    <link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', path='apple-touch-icon.png') }}">
+    <link rel="icon" href="{{ url_for('static', path='favicon.svg') }}" type="image/svg+xml">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', path='favicon-32x32.png') }}">
     <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', path='favicon-16x16.png') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', path='apple-touch-icon.png') }}">
     <link rel="manifest" href="{{ url_for('static', path='site.webmanifest') }}">
-    <link rel="mask-icon" href="{{ url_for('static', path='safari-pinned-tab.svg') }}" color="#5bbad5">
-    <meta name="msapplication-TileColor" content="#da532c">
-    <meta name="theme-color" content="#ffffff">
+    <meta name="theme-color" content="#0a1f0a">
     <meta name="csrf-token" content="{{ request.state.csrf_token }}">
     <!-- Scripts in <head> with defer so they are NOT re-processed during
          htmx hx-boost body swaps. This keeps our component JS (ui.js) and its
diff --git a/templates/base/partials/footer.html b/templates/base/partials/footer.html
index af9b546..8f7bf0b 100644
--- a/templates/base/partials/footer.html
+++ b/templates/base/partials/footer.html
@@ -19,7 +19,7 @@ <h5 class="site-footer-heading mb-2">Quick Links</h5>
             <a href="{{ url_for('read_static_page', page_name='privacy-policy') }}">Privacy Policy</a>
           </li>
           <li class="list-inline-item">
-            <a href="{{ url_for('read_static_page', page_name='terms-of-service') }}">Terms of Service</a>
+            <a href="{{ url_for('read_static_page', page_name='terms-and-conditions') }}">Terms of Service</a>
           </li>
         </ul>
       </div>
diff --git a/templates/static_pages/about.html b/templates/static_pages/about.html
index b6f18b0..e131867 100644
--- a/templates/static_pages/about.html
+++ b/templates/static_pages/about.html
@@ -1,9 +1,7 @@
-{% extends "base.html" %}
+{% extends "website/content_base.html" %}
 
-{% block title %}About{% endblock %}
+{% block page_title %}About Us{% endblock %}
+{% block page_main_class %} website-content-page--centered-title{% endblock %}
+{% block page_heading %}About Us{% endblock %}
 
-{% block content %}
-<div class="container mt-5">
-    <h1>About</h1>
-</div>
-{% endblock %}
\ No newline at end of file
+{% block page_body %}{% endblock %}
diff --git a/templates/static_pages/blog.html b/templates/static_pages/blog.html
new file mode 100644
index 0000000..af01d3a
--- /dev/null
+++ b/templates/static_pages/blog.html
@@ -0,0 +1,7 @@
+{% extends "website/content_base.html" %}
+
+{% block page_title %}Blog{% endblock %}
+{% block page_main_class %} website-content-page--centered-title{% endblock %}
+{% block page_heading %}Blog{% endblock %}
+
+{% block page_body %}{% endblock %}
diff --git a/templates/static_pages/customers.html b/templates/static_pages/customers.html
new file mode 100644
index 0000000..9385a32
--- /dev/null
+++ b/templates/static_pages/customers.html
@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block title %}Customers{% endblock %}
+
+{% block content %}
+<div class="container mt-5">
+    <h1>Customers</h1>
+</div>
+{% endblock %}
diff --git a/templates/static_pages/privacy_policy.html b/templates/static_pages/privacy_policy.html
index 5bde236..6a227a9 100644
--- a/templates/static_pages/privacy_policy.html
+++ b/templates/static_pages/privacy_policy.html
@@ -1,9 +1,10 @@
-{% extends "base.html" %}
+{% extends "website/content_base.html" %}
 
-{% block title %}Privacy Policy{% endblock %}
+{% block page_title %}Privacy Policy{% endblock %}
+{% block page_main_class %} website-content-page--centered-title{% endblock %}
+{% block page_heading %}Privacy Policy{% endblock %}
+{% block page_effective_date %}
+<p class="website-content-page__effective-date">Effective Date: XX August, 2026</p>
+{% endblock %}
 
-{% block content %}
-<div class="container mt-5">
-    <h1>Privacy Policy</h1>
-</div>
-{% endblock %}
\ No newline at end of file
+{% block page_body %}{% endblock %}
diff --git a/templates/static_pages/terms_and_conditions.html b/templates/static_pages/terms_and_conditions.html
new file mode 100644
index 0000000..e50ae11
--- /dev/null
+++ b/templates/static_pages/terms_and_conditions.html
@@ -0,0 +1,10 @@
+{% extends "website/content_base.html" %}
+
+{% block page_title %}Terms Of Use{% endblock %}
+{% block page_main_class %} website-content-page--centered-title{% endblock %}
+{% block page_heading %}Terms Of Use{% endblock %}
+{% block page_effective_date %}
+<p class="website-content-page__effective-date">Effective Date: XX August, 2026</p>
+{% endblock %}
+
+{% block page_body %}{% endblock %}
diff --git a/templates/static_pages/terms_of_service.html b/templates/static_pages/terms_of_service.html
deleted file mode 100644
index 767dc0c..0000000
--- a/templates/static_pages/terms_of_service.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Terms of Service{% endblock %}
-
-{% block content %}
-<div class="container mt-5">
-    <h1>Terms of Service</h1>
-</div>
-{% endblock %}
\ No newline at end of file
diff --git a/templates/static_pages/website_fulfillment_policy.html b/templates/static_pages/website_fulfillment_policy.html
new file mode 100644
index 0000000..807aa07
--- /dev/null
+++ b/templates/static_pages/website_fulfillment_policy.html
@@ -0,0 +1,10 @@
+{% extends "website/content_base.html" %}
+
+{% block page_title %}Website Fulfillment Policy{% endblock %}
+{% block page_main_class %} website-content-page--centered-title{% endblock %}
+{% block page_heading %}Website Fulfillment Policy{% endblock %}
+{% block page_effective_date %}
+<p class="website-content-page__effective-date">Effective Date: XX August, 2026</p>
+{% endblock %}
+
+{% block page_body %}{% endblock %}
diff --git a/templates/website/base.html b/templates/website/base.html
new file mode 100644
index 0000000..572dfcd
--- /dev/null
+++ b/templates/website/base.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{% block title %}Calliflowr AI{% endblock %}</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=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">
+
+    <link href="{{ url_for('static', path='css/website/website.css') }}" rel="stylesheet">
+
+    <link rel="icon" href="{{ url_for('static', path='favicon.svg') }}" type="image/svg+xml">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', path='favicon-32x32.png') }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', path='favicon-16x16.png') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', path='apple-touch-icon.png') }}">
+    <link rel="manifest" href="{{ url_for('static', path='site.webmanifest') }}">
+    <meta name="theme-color" content="#0a1f0a">
+
+    {% block extra_head %}{% endblock %}
+</head>
+<body class="{% block body_class %}website-body{% endblock %}">
+    <div class="website-site{% block site_class %}{% endblock %}">
+        {% include "website/partials/flash.html" %}
+        {% block content %}{% endblock %}
+    </div>
+    {% block extra_scripts %}{% endblock %}
+</body>
+</html>
diff --git a/templates/website/content_base.html b/templates/website/content_base.html
new file mode 100644
index 0000000..49e2500
--- /dev/null
+++ b/templates/website/content_base.html
@@ -0,0 +1,22 @@
+{% extends "website/base.html" %}
+
+{% block title %}{% block page_title %}Calliflowr{% endblock %} · Calliflowr AI{% endblock %}
+
+{% block body_class %}website-body website-body--content{% endblock %}
+
+{% block content %}
+    {% include "website/partials/content_nav.html" %}
+
+    <main class="website-content-page{% block page_main_class %}{% endblock %}" id="main">
+        <h1 class="website-content-page__title">{% block page_heading %}{% endblock %}</h1>
+        {% block page_effective_date %}{% endblock %}
+        <div class="website-content-page__body">
+            {% block page_body %}{% endblock %}
+        </div>
+    </main>
+
+    {% if footer_industries is defined %}
+    {% include "website/partials/brand_strip.html" %}
+    {% include "website/partials/footer.html" %}
+    {% endif %}
+{% endblock %}
diff --git a/templates/website/demo.html b/templates/website/demo.html
new file mode 100644
index 0000000..cab1902
--- /dev/null
+++ b/templates/website/demo.html
@@ -0,0 +1,14 @@
+{% extends "website/base.html" %}
+
+{% block title %}Book a demo{% endblock %}
+
+{% block body_class %}website-body website-body--demo{% endblock %}
+
+{% block site_class %} website-site--demo{% endblock %}
+
+{% block content %}
+<div class="website-demo">
+    {% include "website/partials/demo_brand_panel.html" %}
+    {% include "website/partials/demo_form.html" %}
+</div>
+{% endblock %}
diff --git a/templates/website/index.html b/templates/website/index.html
new file mode 100644
index 0000000..9f9f511
--- /dev/null
+++ b/templates/website/index.html
@@ -0,0 +1,21 @@
+{% extends "website/base.html" %}
+
+{% block content %}
+    {% include "website/partials/nav.html" %}
+    {% include "website/partials/hero.html" %}
+    {% include "website/partials/agents.html" %}
+    {% include "website/partials/call_me.html" %}
+    {% include "website/partials/how_it_works.html" %}
+    {% include "website/partials/math.html" %}
+    {% include "website/partials/comparison.html" %}
+    {# {% include "website/partials/faq.html" %} #}
+    {% include "website/partials/final_cta.html" %}
+    {% include "website/partials/brand_strip.html" %}
+    {% include "website/partials/footer.html" %}
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='js/website-hero.js') }}" defer></script>
+<script src="{{ url_for('static', path='js/website-calculator.js') }}" defer></script>
+<script src="{{ url_for('static', path='js/website-call-me.js') }}?v=5" defer></script>
+{% endblock %}
diff --git a/templates/website/macros/agent_card.html b/templates/website/macros/agent_card.html
new file mode 100644
index 0000000..87b6cde
--- /dev/null
+++ b/templates/website/macros/agent_card.html
@@ -0,0 +1,37 @@
+{% from 'website/macros/buttons.html' import render_button %}
+
+{% macro render_agent_card(agent) %}
+<article class="website-agent-card website-agent-card--{{ agent.variant }}" aria-labelledby="agent-{{ agent.id }}-name">
+    <span class="website-agent-card__watermark" aria-hidden="true">{{ agent.letter }}</span>
+
+    <div class="website-agent-card__header">
+        <span class="website-agent-card__avatar{% if agent.variant == 'live' %} website-agent-card__avatar--live{% endif %}" aria-hidden="true">{{ agent.letter }}</span>
+        <div class="website-agent-card__titles">
+            <h3 id="agent-{{ agent.id }}-name" class="website-agent-card__name">{{ agent.name }}</h3>
+            <p class="website-agent-card__channels">{{ agent.channels }}</p>
+        </div>
+        {% if agent.status_label %}
+        <span class="website-agent-card__status website-agent-card__status--{{ agent.variant }}">{{ agent.status_label }}</span>
+        {% endif %}
+    </div>
+
+    <p class="website-agent-card__description">{{ agent.description }}</p>
+
+    <ul class="website-agent-card__features">
+        {% for feature in agent.features %}
+        <li class="website-agent-card__feature">
+            <span class="website-agent-card__feature-symbol" aria-hidden="true">{{ feature.symbol }}</span>
+            <span><strong>{{ feature.bold }}</strong>{{ feature.text }}</span>
+        </li>
+        {% endfor %}
+    </ul>
+
+    {% if agent.cta_label %}
+    {% if agent.variant == "live" %}
+    {{ render_button(agent.cta_label, href=agent.cta_href, variant="lime", size="compact", extra_classes="website-agent-card__cta") }}
+    {% else %}
+    {{ render_button(agent.cta_label, href=agent.cta_href, variant="secondary", size="compact", extra_classes="website-agent-card__cta") }}
+    {% endif %}
+    {% endif %}
+</article>
+{% endmacro %}
diff --git a/templates/website/macros/badges.html b/templates/website/macros/badges.html
new file mode 100644
index 0000000..9abae9b
--- /dev/null
+++ b/templates/website/macros/badges.html
@@ -0,0 +1,16 @@
+{% macro render_step_badge(number) %}
+<span class="website-step-badge" aria-hidden="true">Step {{ number }}</span>
+{% endmacro %}
+
+{% macro render_section_eyebrow(label, on_dark=false) %}
+<span class="website-section-eyebrow{% if on_dark %} website-section-eyebrow--on-dark{% endif %}">{{ label }}</span>
+{% endmacro %}
+
+{% macro render_status_pill(label, variant="live", tilt=false) %}
+<span class="website-status-pill website-status-pill--{{ variant }}{% if tilt %} website-status-pill--tilt{% endif %}">
+    {% if variant == "live" %}
+    <span class="website-status-pill__dot" aria-hidden="true"></span>
+    {% endif %}
+    {{ label }}
+</span>
+{% endmacro %}
diff --git a/templates/website/macros/buttons.html b/templates/website/macros/buttons.html
new file mode 100644
index 0000000..b00f6ea
--- /dev/null
+++ b/templates/website/macros/buttons.html
@@ -0,0 +1,29 @@
+{#
+  Website button macros.
+
+  Usage:
+    {% from 'website/macros/buttons.html' import render_button %}
+    {{ render_button('Book a Demo', href='#cta', variant='primary') }}
+#}
+
+{% macro render_button(label, href="#", variant="primary", size="default", extra_classes="") %}
+{% set size_class = '' %}
+{% if size == 'nav' %}
+{% set size_class = ' website-btn--nav' %}
+{% elif size == 'compact' %}
+{% set size_class = ' website-btn--compact' %}
+{% elif size == 'cta' %}
+{% set size_class = ' website-btn--cta' %}
+{% endif %}
+{% set variant_class = ' website-btn--secondary' if variant == 'secondary' else '' %}
+{% if variant == 'primary' %}
+{% set variant_class = ' website-btn--primary' %}
+{% elif variant == 'lime' %}
+{% set variant_class = ' website-btn--lime' %}
+{% elif variant == 'cta-light' %}
+{% set variant_class = ' website-btn--cta-light' %}
+{% elif variant == 'ghost-on-dark' %}
+{% set variant_class = ' website-btn--ghost-on-dark' %}
+{% endif %}
+<a href="{{ href }}" class="website-btn{{ variant_class }}{{ size_class }}{{ ' ' ~ extra_classes if extra_classes else '' }}">{{ label }}</a>
+{% endmacro %}
diff --git a/templates/website/macros/faq_item.html b/templates/website/macros/faq_item.html
new file mode 100644
index 0000000..b8e88e6
--- /dev/null
+++ b/templates/website/macros/faq_item.html
@@ -0,0 +1,6 @@
+{% macro render_faq_item(item, is_last=false) %}
+<div class="website-faq__item{% if is_last %} website-faq__item--last{% endif %}">
+    <h3 class="website-faq__question">{{ item.question }}</h3>
+    <p class="website-faq__answer">{{ item.answer }}</p>
+</div>
+{% endmacro %}
diff --git a/templates/website/macros/form_fields.html b/templates/website/macros/form_fields.html
new file mode 100644
index 0000000..7e80d01
--- /dev/null
+++ b/templates/website/macros/form_fields.html
@@ -0,0 +1,45 @@
+{% macro render_input(name, label, type="text", required=false, value="", placeholder="", error="", autocomplete="") %}
+<div class="website-form__field">
+    <label class="website-form__label" for="{{ name }}">
+        {{ label }}
+        {% if required %}<span class="website-form__required" aria-hidden="true">*</span>{% endif %}
+    </label>
+    <input
+        class="website-form__input{% if error %} website-form__input--error{% endif %}"
+        type="{{ type }}"
+        id="{{ name }}"
+        name="{{ name }}"
+        value="{{ value }}"
+        {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+        {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
+        {% if required %}required{% endif %}
+    >
+    {% if error %}
+    <p class="website-form__error" id="{{ name }}-error">{{ error }}</p>
+    {% endif %}
+</div>
+{% endmacro %}
+
+{% macro render_select(name, label, options, required=false, value="", error="") %}
+<div class="website-form__field">
+    <label class="website-form__label" for="{{ name }}">
+        {{ label }}
+        {% if required %}<span class="website-form__required" aria-hidden="true">*</span>{% endif %}
+    </label>
+    <select
+        class="website-form__select{% if error %} website-form__input--error{% endif %}"
+        id="{{ name }}"
+        name="{{ name }}"
+        {% if required %}required{% endif %}
+    >
+        {% for option_value, option_label in options %}
+        <option value="{{ option_value }}"{% if option_value == value %} selected{% endif %}>
+            {{ option_label }}
+        </option>
+        {% endfor %}
+    </select>
+    {% if error %}
+    <p class="website-form__error" id="{{ name }}-error">{{ error }}</p>
+    {% endif %}
+</div>
+{% endmacro %}
diff --git a/templates/website/macros/logo.html b/templates/website/macros/logo.html
new file mode 100644
index 0000000..43d7042
--- /dev/null
+++ b/templates/website/macros/logo.html
@@ -0,0 +1,47 @@
+{#
+  Calliflowr hex-flower logo mark.
+
+  Params:
+    width, height — SVG dimensions
+    petal_fill — outer circle color (default Deep Fir)
+    center_fill — inner center color (default page bg)
+    classes — extra CSS classes on svg
+#}
+{% macro render_flower(
+    width=27,
+    height=27,
+    petal_fill="#0a1f0a",
+    center_fill="#f4f7f0",
+    classes=""
+) %}
+<svg
+    width="{{ width }}"
+    height="{{ height }}"
+    viewBox="0 0 48 48"
+    class="{{ classes }}"
+    aria-hidden="true"
+    focusable="false"
+>
+    <circle cx="36" cy="24" r="6.8" fill="{{ petal_fill }}"></circle>
+    <circle cx="30" cy="13.6" r="6.8" fill="{{ petal_fill }}"></circle>
+    <circle cx="18" cy="13.6" r="6.8" fill="{{ petal_fill }}"></circle>
+    <circle cx="12" cy="24" r="6.8" fill="{{ petal_fill }}"></circle>
+    <circle cx="18" cy="34.4" r="6.8" fill="{{ petal_fill }}"></circle>
+    <circle cx="30" cy="34.4" r="6.8" fill="{{ petal_fill }}"></circle>
+    <circle cx="24" cy="24" r="6" fill="{{ center_fill }}"></circle>
+</svg>
+{% endmacro %}
+
+{# Nav / header lockup: text wordmark only #}
+{% macro render_brand_link(href="#") %}
+<a href="{{ href }}" class="website-nav__brand">Calliflowr</a>
+{% endmacro %}
+
+{# Footer wordmark with inline flower (v3 style) #}
+{% macro render_footer_wordmark() %}
+<div class="website-footer__wordmark" aria-label="Calliflowr">
+    <span>callifl</span>
+    {{ render_flower(width=34, height=34, petal_fill="#9FE870", center_fill="#0a1f0a", classes="website-footer__wordmark-flower") }}
+    <span>wr</span>
+</div>
+{% endmacro %}
diff --git a/templates/website/macros/media.html b/templates/website/macros/media.html
new file mode 100644
index 0000000..5ab1791
--- /dev/null
+++ b/templates/website/macros/media.html
@@ -0,0 +1,19 @@
+{#
+  Renders an image or a styled placeholder until assets are ready.
+
+  src — path under /static/ (e.g. img/website/screenshots/shot-dashboard.png)
+#}
+{% macro render_media(src=None, alt="", placeholder="Image coming soon", classes="") %}
+{% if src %}
+<img
+    src="{{ url_for('static', path=src) }}"
+    alt="{{ alt }}"
+    class="website-media {{ classes }}"
+    loading="lazy"
+>
+{% else %}
+<div class="website-media-placeholder {{ classes }}" role="img" aria-label="{{ alt or placeholder }}">
+    <span class="website-media-placeholder__label">{{ placeholder }}</span>
+</div>
+{% endif %}
+{% endmacro %}
diff --git a/templates/website/partials/agents.html b/templates/website/partials/agents.html
new file mode 100644
index 0000000..bc0d0b6
--- /dev/null
+++ b/templates/website/partials/agents.html
@@ -0,0 +1,18 @@
+{% from 'website/macros/badges.html' import render_section_eyebrow %}
+{% from 'website/macros/agent_card.html' import render_agent_card %}
+
+<section id="agents" class="website-agents" aria-labelledby="agents-title">
+    <div class="website-agents__intro">
+        {{ render_section_eyebrow("All-in-one lead management agents") }}
+        <h2 id="agents-title" class="website-agents__title">Your AI CSR Workforce</h2>
+        <p class="website-agents__lead">
+            Trained on your services, pricing, and policies.
+        </p>
+    </div>
+
+    <div class="website-agents__grid">
+        {% for agent in agents %}
+        {{ render_agent_card(agent) }}
+        {% endfor %}
+    </div>
+</section>
diff --git a/templates/website/partials/brand_strip.html b/templates/website/partials/brand_strip.html
new file mode 100644
index 0000000..4faa527
--- /dev/null
+++ b/templates/website/partials/brand_strip.html
@@ -0,0 +1,20 @@
+{% from 'website/macros/logo.html' import render_flower %}
+
+<div class="website-brand-strip" aria-label="Calliflowr">
+    <div class="website-brand-strip__inner">
+        <a href="{{ url_for('read_home') }}" class="website-brand-strip__wordmark">
+            <span>callifl</span>
+            {{ render_flower(
+                width=28,
+                height=28,
+                petal_fill="#0a1f0a",
+                center_fill="#9FE870",
+                classes="website-brand-strip__flower"
+            ) }}
+            <span>wr</span>
+        </a>
+        <p class="website-brand-strip__tagline">
+            The AI CSR for trade businesses
+        </p>
+    </div>
+</div>
diff --git a/templates/website/partials/call_me.html b/templates/website/partials/call_me.html
new file mode 100644
index 0000000..27ca3c1
--- /dev/null
+++ b/templates/website/partials/call_me.html
@@ -0,0 +1,111 @@
+{% from 'website/macros/badges.html' import render_section_eyebrow %}
+{% from 'website/macros/form_fields.html' import render_input, render_select %}
+
+<section id="call-me" class="website-call-me" aria-labelledby="call-me-title">
+    <div class="website-call-me__grid">
+        <div class="website-call-me__copy">
+            {{ render_section_eyebrow("Hear it yourself", on_dark=true) }}
+            <h2 id="call-me-title" class="website-call-me__title">
+                Don't take our word for it.<br>
+            </h2>
+            <p class="website-call-me__lead">
+                Our AI CSR will give you a call within a minute, so you can have a conversation and experience what your customer's hear. 
+                <br><br>
+                Keep in mind, this is just a demo and your AI agent will be fully customized to fit your services logic and needs.
+            </p>
+            {# <ul class="website-call-me__bullets" aria-label="What to expect">
+                <li>✓ A real call</li>
+                <li>✓ 2 minutes</li>
+                <li>✓ No signup</li>
+            </ul> #}
+        </div>
+
+        <div class="website-call-me__card">
+            <h3 class="website-call-me__card-title">Talk to our AI Agent!</h3>
+            <form
+                class="website-form website-form--on-dark"
+                method="post"
+                action="{{ url_for('submit_call_me') }}"
+                novalidate
+            >
+                {% include 'base/partials/csrf_field.html' %}
+
+                {{ render_input(
+                    "name",
+                    "Name",
+                    required=true,
+                    autocomplete="name",
+                    placeholder="Jordan Diaz"
+                ) }}
+                {{ render_input(
+                    "business",
+                    "Company Name",
+                    required=true,
+                    autocomplete="organization",
+                    placeholder="Albany Heating & Cooling"
+                ) }}
+                {{ render_input(
+                    "email",
+                    "Email",
+                    type="email",
+                    required=true,
+                    autocomplete="email",
+                    placeholder="john@yourcompany.com"
+                ) }}
+
+                <div class="website-form__field">
+                    <label class="website-form__label" for="phone">
+                        Mobile number
+                        <span class="website-form__required" aria-hidden="true">*</span>
+                    </label>
+                    <div class="website-form__phone">
+                        <span class="website-form__phone-prefix" aria-hidden="true">+1</span>
+                        <input
+                            class="website-form__input website-form__phone-input"
+                            type="tel"
+                            id="phone"
+                            name="phone"
+                            placeholder="(123) 456 - 7890"
+                            autocomplete="tel-national"
+                            inputmode="numeric"
+                            maxlength="16"
+                            required
+                        >
+                    </div>
+                </div>
+
+                {{ render_select(
+                    "industry",
+                    "Industry",
+                    call_me_industry_options,
+                    required=true
+                ) }}
+                {{ render_select(
+                    "crm",
+                    "CRM",
+                    call_me_crm_options,
+                    required=false
+                ) }}
+                <div class="website-form__field website-form__field--crm-other is-hidden" id="crm-other-field" hidden>
+                    <label class="website-form__label" for="crm_other">
+                        Custom CRM name
+                        <span class="website-form__required" aria-hidden="true">*</span>
+                    </label>
+                    <input
+                        class="website-form__input"
+                        type="text"
+                        id="crm_other"
+                        name="crm_other"
+                        placeholder="What CRM do you use?"
+                        maxlength="120"
+                        autocomplete="off"
+                    >
+                </div>
+
+                <button type="submit" class="website-btn website-btn--lime website-btn--compact website-form-mock__submit">
+                    Call me now!
+                </button>
+            </form>
+        </div>
+    </div>
+</section>
diff --git a/templates/website/partials/comparison.html b/templates/website/partials/comparison.html
new file mode 100644
index 0000000..de715f4
--- /dev/null
+++ b/templates/website/partials/comparison.html
@@ -0,0 +1,76 @@
+{% from 'website/macros/badges.html' import render_section_eyebrow %}
+{% from 'website/macros/logo.html' import render_flower %}
+
+<section id="compare" class="website-comparison" aria-labelledby="comparison-title">
+    <div class="website-comparison__intro">
+        {{ render_section_eyebrow("The honest comparison") }}
+        <h2 id="comparison-title" class="website-comparison__title">Calliflowr vs. Rest</h2>
+        <p class="website-comparison__lead"></p>
+    </div>
+
+    <div class="website-comparison__scroll" tabindex="0" aria-label="Scrollable service comparison">
+        <table class="website-comparison__table">
+            <thead>
+                <tr>
+                    <th scope="col"><span class="sr-only">Feature</span></th>
+                    <th scope="col" class="website-comparison__calliflowr">
+                        <span class="website-comparison__brand">
+                            {{ render_flower(width=17, height=17, petal_fill="#9FE870", center_fill="#0a1f0a") }}
+                            Calliflowr
+                        </span>
+                    </th>
+                    <th scope="col">Answering Service</th>
+                    <th scope="col">Voicemail</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="website-comparison__lead-row">
+                    <th scope="row">Out of 10 after-hours callers</th>
+                    <td class="website-comparison__calliflowr">All 10 reach a CSR who books</td>
+                    <td>All 10 reach a message-taker</td>
+                    <td>~2 leave a message¹</td>
+                </tr>
+                <tr>
+                    <th scope="row">Books the job</th>
+                    <td class="website-comparison__calliflowr">Yes, with text confirmation & availability check</td>
+                    <td>Yes</td>
+                    <td>No</td>
+                </tr>
+                <tr>
+                    <th scope="row">After hours &amp; surges</th>
+                    <td class="website-comparison__calliflowr">20 calls at once, same at 2 AM as 2 PM</td>
+                    <td>Hold queues, night fees</td>
+                    <td>The beep</td>
+                </tr>
+                <tr>
+                    <th scope="row">Emergencies</th>
+                    <td class="website-comparison__calliflowr">Tech called + texted under a minute</td>
+                    <td>A page, eventually</td>
+                    <td>Waits till morning</td>
+                </tr>
+                <tr>
+                    <th scope="row">Spam</th>
+                    <td class="website-comparison__calliflowr">Filtered and tagged</td>
+                    <td>You pay per call, spam included</td>
+                    <td>A full mailbox</td>
+                </tr>
+                <tr>
+                    <th scope="row">Every call recorded</th>
+                    <td class="website-comparison__calliflowr">Recording + summary + outcome</td>
+                    <td>A slip, if they stayed on</td>
+                    <td>Nothing</td>
+                </tr>
+                <tr>
+                    <th scope="row">Cost</th>
+                    <td class="website-comparison__calliflowr">One flat monthly rate</td>
+                    <td>Per minute, spikes when busy</td>
+                    <td>Free, and the priciest column here</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <p class="website-comparison__footnote">
+        ¹ ~8 in 10 voicemail callers hang up without a message (Hiya; Forbes: 86%).
+    </p>
+</section>
diff --git a/templates/website/partials/content_nav.html b/templates/website/partials/content_nav.html
new file mode 100644
index 0000000..1c9ee3b
--- /dev/null
+++ b/templates/website/partials/content_nav.html
@@ -0,0 +1,15 @@
+{% from 'website/macros/logo.html' import render_brand_link %}
+{% from 'website/macros/buttons.html' import render_button %}
+
+<nav class="website-nav website-nav--simple" aria-label="Primary">
+    {{ render_brand_link(href=url_for('read_home')) }}
+
+    <div class="website-nav__actions">
+        {% if user %}
+        <a href="{{ url_for('read_dashboard') }}" class="website-nav-link">Dashboard</a>
+        {% else %}
+        <a href="{{ url_for('read_login') }}" class="website-nav-link">Login</a>
+        {% endif %}
+        {{ render_button('Book a Demo', href=url_for('read_demo'), variant='lime', size='nav') }}
+    </div>
+</nav>
diff --git a/templates/website/partials/demo_brand_panel.html b/templates/website/partials/demo_brand_panel.html
new file mode 100644
index 0000000..491168b
--- /dev/null
+++ b/templates/website/partials/demo_brand_panel.html
@@ -0,0 +1,48 @@
+{% from 'website/macros/media.html' import render_media with context %}
+
+<aside class="website-demo__brand-panel" aria-label="About Calliflowr">
+    <div class="website-demo__brand-top">
+        <a href="{{ url_for('read_home') }}" class="website-demo__back-link">← Back to Calliflowr</a>
+    </div>
+
+    <div class="website-demo__brand-copy">
+        <h1 class="website-demo__title">
+            Your next job is calling.<br>
+            <span class="website-demo__title-accent">Calli picks up.</span>
+        </h1>
+        <p class="website-demo__lead">
+            The AI receptionist for trades. She answers, books the job on your calendar,
+            and keeps your office in the loop — so the crew stays on the tools.
+        </p>
+    </div>
+
+    <div class="website-demo__metrics" aria-label="Key benefits">
+        {% for metric in demo_metrics %}
+        <div class="website-demo__metric">
+            <div class="website-demo__metric-value">{{ metric.value }}</div>
+            <div class="website-demo__metric-label">{{ metric.label }}</div>
+        </div>
+        {% endfor %}
+    </div>
+
+    <div class="website-demo__on-demo">
+        <p class="website-demo__on-demo-label">On the demo</p>
+        <ul class="website-demo__on-demo-list">
+            {% for point in demo_on_points %}
+            <li><span aria-hidden="true">✓</span> {{ point }}</li>
+            {% endfor %}
+        </ul>
+        <div class="website-demo__founder">
+            {{ render_media(
+                src=None,
+                alt="Calliflowr founder",
+                placeholder="Founder",
+                classes="website-demo__founder-photo"
+            ) }}
+            <p class="website-demo__founder-copy">
+                <strong>Hosted by a Calliflowr founder</strong><br>
+                Direct answers, no sales script.
+            </p>
+        </div>
+    </div>
+</aside>
diff --git a/templates/website/partials/demo_form.html b/templates/website/partials/demo_form.html
new file mode 100644
index 0000000..901ec7b
--- /dev/null
+++ b/templates/website/partials/demo_form.html
@@ -0,0 +1,119 @@
+{% from 'website/macros/form_fields.html' import render_input, render_select %}
+
+<section class="website-demo__form-panel" aria-labelledby="demo-form-title">
+    <p class="website-demo__support">
+        Questions? Text <a href="sms:{{ contact_phone_tel }}">{{ contact_phone }}</a>
+    </p>
+
+    <div class="website-demo__form-wrap">
+        <div class="website-demo__form-header">
+            <h2 id="demo-form-title" class="website-demo__form-title">Book a demo</h2>
+        </div>
+
+        <p class="website-demo__form-status">
+            <span class="website-demo__form-status-icon" aria-hidden="true">✓</span>
+            Now onboarding founding shops across Upstate NY
+        </p>
+
+        {% if form_error %}
+        <div class="website-form__banner website-form__banner--error" role="alert">
+            {{ form_error }}
+        </div>
+        {% endif %}
+
+        {% if request.state.flash and not form_errors %}
+        <div class="website-form__banner website-form__banner--success" role="status">
+            {{ request.state.flash.message }}
+        </div>
+        {% else %}
+        <div class="website-demo__form-card">
+            <form
+                class="website-form"
+                method="post"
+                action="{{ url_for('submit_book_demo') }}"
+                novalidate
+            >
+                {% include 'base/partials/csrf_field.html' %}
+
+                {{ render_input(
+                    "work_email",
+                    "Work email",
+                    type="email",
+                    required=true,
+                    value=form_values.get("work_email", ""),
+                    error=form_errors.get("work_email", ""),
+                    autocomplete="email"
+                ) }}
+
+                <div class="website-form__row">
+                    {{ render_input(
+                        "first_name",
+                        "First name",
+                        required=true,
+                        value=form_values.get("first_name", ""),
+                        error=form_errors.get("first_name", ""),
+                        autocomplete="given-name"
+                    ) }}
+                    {{ render_input(
+                        "last_name",
+                        "Last name",
+                        required=true,
+                        value=form_values.get("last_name", ""),
+                        error=form_errors.get("last_name", ""),
+                        autocomplete="family-name"
+                    ) }}
+                </div>
+
+                <div class="website-form__row">
+                    {{ render_input(
+                        "company",
+                        "Company",
+                        required=true,
+                        value=form_values.get("company", ""),
+                        error=form_errors.get("company", "")
+                    ) }}
+                    {{ render_select(
+                        "trade",
+                        "Trade",
+                        demo_trade_options,
+                        required=true,
+                        value=form_values.get("trade", ""),
+                        error=form_errors.get("trade", "")
+                    ) }}
+                </div>
+
+                <div class="website-form__row">
+                    {{ render_input(
+                        "phone",
+                        "Phone",
+                        type="tel",
+                        required=true,
+                        value=form_values.get("phone", ""),
+                        error=form_errors.get("phone", ""),
+                        autocomplete="tel"
+                    ) }}
+                    {{ render_select(
+                        "technicians",
+                        "Technicians",
+                        demo_technician_counts,
+                        value=form_values.get("technicians", ""),
+                        error=form_errors.get("technicians", "")
+                    ) }}
+                </div>
+
+                {{ render_select(
+                    "phone_answerer",
+                    "Who answers your phones today?",
+                    demo_phone_answerers,
+                    value=form_values.get("phone_answerer", ""),
+                    error=form_errors.get("phone_answerer", "")
+                ) }}
+
+                <button type="submit" class="website-btn website-btn--lime website-btn--demo-submit">
+                    Book my demo
+                </button>
+            </form>
+        </div>
+        {% endif %}
+    </div>
+</section>
diff --git a/templates/website/partials/faq.html b/templates/website/partials/faq.html
new file mode 100644
index 0000000..78877be
--- /dev/null
+++ b/templates/website/partials/faq.html
@@ -0,0 +1,24 @@
+{% from 'website/macros/badges.html' import render_section_eyebrow %}
+{% from 'website/macros/faq_item.html' import render_faq_item %}
+
+<section id="faq" class="website-faq" aria-labelledby="faq-title">
+    <div class="website-faq__grid">
+        <div class="website-faq__intro">
+            {{ render_section_eyebrow("FAQ") }}
+            <h2 id="faq-title" class="website-faq__title">Fair questions.</h2>
+            <p class="website-faq__aside website-faq__aside--desktop">
+                Something else?
+                <a href="#cta" class="website-faq__link">Talk to a human →</a>
+            </p>
+        </div>
+        <div class="website-faq__list">
+            {% for item in faq_items %}
+            {{ render_faq_item(item, loop.last) }}
+            {% endfor %}
+            <p class="website-faq__aside website-faq__aside--mobile">
+                Something else?
+                <a href="#cta" class="website-faq__link">Talk to a human →</a>
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/templates/website/partials/final_cta.html b/templates/website/partials/final_cta.html
new file mode 100644
index 0000000..a94dc8f
--- /dev/null
+++ b/templates/website/partials/final_cta.html
@@ -0,0 +1,28 @@
+{% from 'website/macros/buttons.html' import render_button %}
+
+<section id="cta" class="website-final-cta" aria-labelledby="final-cta-title">
+    <div class="website-final-cta__panel">
+        <div class="website-final-cta__copy">
+            <h2 id="final-cta-title" class="website-final-cta__title">
+                Stop losing jobs to voicemail.
+            </h2>
+            <p class="website-final-cta__lead">
+                Fifteen minutes with a founder.<br> Hear our agents take a real call and then decide.
+            </p>
+            <div class="website-final-cta__actions">
+                {{ render_button("Talk to Us", href=url_for('read_demo'), variant="primary", size="cta") }}
+            </div>
+        </div>
+        <div class="website-final-cta__media">
+            <img
+                class="website-final-cta__phone"
+                src="{{ url_for('static', path='img/website/footer/footer-cta-shorter.png') }}"
+                alt="Calliflowr mobile calls view — live emergency call on Summit Air dashboard"
+                width="372"
+                height="361"
+                loading="lazy"
+                decoding="async"
+            >
+        </div>
+    </div>
+</section>
diff --git a/templates/website/partials/flash.html b/templates/website/partials/flash.html
new file mode 100644
index 0000000..c50dfe6
--- /dev/null
+++ b/templates/website/partials/flash.html
@@ -0,0 +1,9 @@
+{% if request.state.flash %}
+<div
+    class="website-flash website-flash--{{ request.state.flash.level|default('success') }}"
+    role="status"
+    aria-live="polite"
+>
+    {{ request.state.flash.message }}
+</div>
+{% endif %}
diff --git a/templates/website/partials/footer.html b/templates/website/partials/footer.html
new file mode 100644
index 0000000..5d40fda
--- /dev/null
+++ b/templates/website/partials/footer.html
@@ -0,0 +1,63 @@
+<footer class="website-footer">
+    <div class="website-footer__main">
+        <div class="website-footer__column">
+            <p class="website-footer__column-title">Contact Us</p>
+            <div class="website-footer__contact">
+                <div class="website-footer__contact-item">
+                    <span class="website-footer__contact-label">Email</span>
+                    <a href="mailto:{{ contact_email }}">{{ contact_email }}</a>
+                </div>
+                <div class="website-footer__contact-item">
+                    <span class="website-footer__contact-label">Phone</span>
+                    <a href="tel:{{ contact_phone_tel }}">{{ contact_phone }}</a>
+                </div>
+            </div>
+        </div>
+
+        <div class="website-footer__column">
+            <p class="website-footer__column-title">Industries</p>
+            <div class="website-footer__industries" aria-label="Industries">
+                {% for industry in footer_industries %}
+                <span>{{ industry }}</span>
+                {% endfor %}
+            </div>
+        </div>
+
+        <div class="website-footer__column">
+            <p class="website-footer__column-title">Mailing</p>
+            <div class="website-footer__address">
+                {% for line in footer_address_lines %}
+                {{ line }}{% if not loop.last %}<br>{% endif %}
+                {% endfor %}
+            </div>
+        </div>
+
+        <div class="website-footer__column">
+            <p class="website-footer__column-title">Company</p>
+            <nav class="website-footer__nav" aria-label="Footer company">
+                <a href="{{ url_for('read_static_page', page_name='blog') }}">Blog</a>
+                <a href="{{ url_for('read_static_page', page_name='about') }}">About Us</a>
+                {# <a href="{{ url_for('read_static_page', page_name='customers') }}">Customers</a> #}
+                <a href="{{ url_for('read_demo') }}">Book a Demo</a>
+                <a href="{{ url_for('read_home') }}#call-me">Talk to our AI</a>
+            </nav>
+        </div>
+
+        <div class="website-footer__column">
+            <p class="website-footer__column-title">Legal</p>
+            <nav class="website-footer__nav" aria-label="Footer legal">
+                <a href="{{ url_for('read_static_page', page_name='privacy-policy') }}">Privacy Policy</a>
+                <a href="{{ url_for('read_static_page', page_name='terms-and-conditions') }}">Terms &amp; Conditions</a>
+                <a href="{{ url_for('read_static_page', page_name='website-fulfillment-policy') }}">Website Fulfillment Policy</a>
+            </nav>
+        </div>
+    </div>
+
+    <div class="website-footer__legal">
+        <span class="website-footer__made">
+            Made with
+            <span class="website-footer__heart" aria-hidden="true"></span>
+            in Upstate New York
+        </span>
+    </div>
+</footer>
diff --git a/templates/website/partials/hero.html b/templates/website/partials/hero.html
new file mode 100644
index 0000000..d5864b8
--- /dev/null
+++ b/templates/website/partials/hero.html
@@ -0,0 +1,73 @@
+{% from 'website/macros/buttons.html' import render_button %}
+{% from 'website/macros/media.html' import render_media with context %}
+
+<section class="website-hero" aria-labelledby="website-hero-title">
+    <div class="website-hero__copy">
+        <p class="website-eyebrow website-eyebrow--on-dark">
+            <span class="website-live-dot website-live-dot--sulu" aria-hidden="true"></span>
+            Answering live across the Capital Region
+        </p>
+        <h1 id="website-hero-title" class="website-hero__title">
+            Every call answered.<br>
+            Every job <span class="website-hero__highlight">booked.</span>
+        </h1>
+
+        <p class="website-hero__lead">
+            Fill your board with our AI CSR agents that answer every call, book the jobs, and briefs your team &mdash; 24/7.
+        </p>
+
+        <div class="website-hero__actions">
+            {{ render_button('Book a Demo', href=url_for('read_demo'), variant='lime', size='nav') }}
+            <a href="#call-me" class="website-hero__text-link">Talk to our AI</a>
+        </div>
+
+        {# <p class="website-hero__trust">
+            Answers in one ring&nbsp;&nbsp;·&nbsp;&nbsp;Keeps your number&nbsp;&nbsp;·&nbsp;&nbsp;Live in 2 days
+        </p> #}
+    </div>
+
+    <div class="website-hero__showcase" data-hero-showcase aria-label="Trades Calli supports">
+        <div class="website-hero__stage">
+            <div class="website-hero__plate website-hero__plate--lime" aria-hidden="true"></div>
+            <div class="website-hero__plate website-hero__plate--glass" aria-hidden="true"></div>
+
+            {# <span class="website-hero__live">
+                <span class="website-hero__live-dot" aria-hidden="true"></span>
+                Calli is answering
+            </span> #}
+            <span class="website-hero__bubble">
+                <span class="website-hero__trust-icon" aria-hidden="true"></span>
+                Built for Service Businesses
+            </span>
+
+            {% for card in crew_cards %}
+            <figure
+                class="website-hero__card{% if loop.first %} is-active{% endif %}"
+                data-slide-index="{{ loop.index0 }}"
+                {% if not loop.first %}aria-hidden="true"{% endif %}
+            >
+                {{ render_media(
+                    src=card.image_src,
+                    alt=card.placeholder,
+                    placeholder=card.placeholder,
+                    classes="website-hero__card-image"
+                ) }}
+            </figure>
+            {% endfor %}
+        </div>
+
+        <div class="website-hero__genres" role="tablist" aria-label="Trade categories">
+            {% for card in crew_cards %}
+            <button
+                type="button"
+                class="website-hero__genre{% if loop.first %} is-active{% endif %}"
+                role="tab"
+                aria-selected="{{ 'true' if loop.first else 'false' }}"
+                data-slide-index="{{ loop.index0 }}"
+            >
+                {{ card.genre }}
+            </button>
+            {% endfor %}
+        </div>
+    </div>
+</section>
diff --git a/templates/website/partials/how_it_works.html b/templates/website/partials/how_it_works.html
new file mode 100644
index 0000000..c848821
--- /dev/null
+++ b/templates/website/partials/how_it_works.html
@@ -0,0 +1,15 @@
+{% from 'website/macros/badges.html' import render_section_eyebrow %}
+
+<section id="how" class="website-how" aria-labelledby="how-title">
+    {{ render_section_eyebrow("How it works") }}
+    <h2 id="how-title" class="website-how__title">From first ring to booked job</h2>
+
+    <div class="website-how__grid">
+        {% include "website/partials/how_step_pickup.html" %}
+        {% include "website/partials/how_step_dashboard.html" %}
+    </div>
+
+    <div class="website-how__grid website-how__grid--follow website-how__grid--single">
+        {% include "website/partials/how_step_booked.html" %}
+    </div>
+</section>
diff --git a/templates/website/partials/how_step_booked.html b/templates/website/partials/how_step_booked.html
new file mode 100644
index 0000000..643d4d0
--- /dev/null
+++ b/templates/website/partials/how_step_booked.html
@@ -0,0 +1,25 @@
+{% from 'website/macros/badges.html' import render_step_badge %}
+{% from 'website/macros/media.html' import render_media with context %}
+
+<article class="website-how-step website-how-step--lime website-how-step--booked-card">
+    <div class="website-how-step__copy">
+        <header class="website-how-step__header">
+            {{ render_step_badge(3) }}
+            <h3 class="website-how-step__title">AI Agent keeps the office informed</h3>
+        </header>
+        <p class="website-how-step__lead website-how-step__lead--on-lime">
+            The agent emails the office with aggregated data in one email so both technician and office can skim over the important details that matter. 
+            <br> <br> 
+            Emergency: Critical situations get flagged and are escalated to on-call technicians via call and text.
+
+        </p>
+    </div>
+    <div class="website-booking-visual">
+        {{ render_media(
+            src=email_screenshot,
+            alt="Booking alert email — AC tune-up booked for Ken Reynolds with window, address, and notes, answered by Calli",
+            placeholder="Booking email preview coming soon",
+            classes="website-booking-visual__email"
+        ) }}
+    </div>
+</article>
diff --git a/templates/website/partials/how_step_dashboard.html b/templates/website/partials/how_step_dashboard.html
new file mode 100644
index 0000000..d44a16a
--- /dev/null
+++ b/templates/website/partials/how_step_dashboard.html
@@ -0,0 +1,22 @@
+{% from 'website/macros/badges.html' import render_step_badge %}
+{% from 'website/macros/media.html' import render_media with context %}
+
+<article class="website-how-step website-how-step--panel website-how-step--dashboard">
+    <header class="website-how-step__header">
+        {{ render_step_badge(2) }}
+        <h3 class="website-how-step__title">AI Agent books the job</h3>
+    </header>
+    <p class="website-how-step__lead">
+        The agent locks the window based on technician availability and texts the customer confirmation. No callbacks, no sticky notes, no lead lost to voicemail overnight.
+        Every call logged with a recording, summary, and outcome. Review the after hours call over coffee.
+        
+    </p>
+    <div class="website-how-step__media website-how-step__media--dashboard">
+        {{ render_media(
+            src=dashboard_screenshot,
+            alt="Calliflowr dashboard calls view — every call with recording, summary, and outcome tag",
+            placeholder="Calls view screenshot coming soon",
+            classes="website-how-step__screenshot"
+        ) }}
+    </div>
+</article>
diff --git a/templates/website/partials/how_step_emergency.html b/templates/website/partials/how_step_emergency.html
new file mode 100644
index 0000000..38febd3
--- /dev/null
+++ b/templates/website/partials/how_step_emergency.html
@@ -0,0 +1,12 @@
+{% from 'website/macros/badges.html' import render_step_badge %}
+
+<article class="website-how-step website-how-step--panel website-how-step--alert">
+    <header class="website-how-step__header">
+        {{ render_step_badge(3) }}
+        <h3 class="website-how-step__title">Emergencies reach your tech</h3>
+    </header>
+    <p class="website-how-step__lead">
+        Gas smell, no heat, burst pipe. Calli rings your on-call tech in under a minute, with a text carrying the name, address, and problem.
+    </p>
+    <span class="website-emergency-pill">⚠ Emergency flagged → tech rang in under a minute</span>
+</article>
diff --git a/templates/website/partials/how_step_pickup.html b/templates/website/partials/how_step_pickup.html
new file mode 100644
index 0000000..a68ae53
--- /dev/null
+++ b/templates/website/partials/how_step_pickup.html
@@ -0,0 +1,28 @@
+{% from 'website/macros/badges.html' import render_step_badge %}
+
+<article class="website-how-step website-how-step--lime">
+    <header class="website-how-step__header">
+        {{ render_step_badge(1) }}
+        <h3 class="website-how-step__title">AI Agent takes the call</h3>
+    </header>
+    <p class="website-how-step__lead website-how-step__lead--on-lime">
+        One ring, any hour, even when the whole crew is out. The agent asks what your best CSR would, and knows a 2 AM no-heat call from a tune-up.
+    </p>
+    <div class="website-how-step__media website-how-step__media--chat">
+        <div class="website-chat-mock" aria-label="Sample live call transcript">
+            <div class="website-chat-mock__toolbar">
+                <span class="website-chat-mock__live">
+                    <span class="website-live-dot website-live-dot--small" aria-hidden="true"></span>
+                    Live call
+                </span>
+                <span class="website-chat-mock__timer">0:42</span>
+            </div>
+            <div class="website-chat-mock__messages">
+                <p class="website-chat-bubble website-chat-bubble--caller">"No heat since last night. Can somebody come out today?"</p>
+                <p class="website-chat-bubble website-chat-bubble--agent">"I've got a 2 to 4 PM window today. Will you be available?"</p>
+                <p class="website-chat-bubble website-chat-bubble--caller">"That works. Thank you!"</p>
+                <p class="website-chat-bubble website-chat-bubble--agent">"I'll text you the confirmation."</p>
+            </div>
+        </div>
+    </div>
+</article>
diff --git a/templates/website/partials/math.html b/templates/website/partials/math.html
new file mode 100644
index 0000000..799039d
--- /dev/null
+++ b/templates/website/partials/math.html
@@ -0,0 +1,93 @@
+{% from 'website/macros/badges.html' import render_section_eyebrow %}
+{% from 'website/macros/logo.html' import render_flower %}
+
+<section id="math" class="website-math" aria-labelledby="math-title" data-revenue-calculator>
+    <div class="website-math__grid">
+        <div class="website-math__copy">
+            {{ render_section_eyebrow("The math", on_dark=true) }}
+            <h2 id="math-title" class="website-math__title">What is a missed call costing you?</h2>
+            <p class="website-math__lead">
+                8 in 10 callers who hit voicemail hang up without a word, and most never call back. They call the next shop on the list. Move the sliders.
+            </p>
+
+            <div class="website-math__controls">
+                <div class="website-math__control">
+                    <div class="website-math__control-heading">
+                        <div>
+                            <label for="average-ticket" class="website-math__label">Your average ticket</label>
+                            <p class="website-math__hint">Repair, service call, or install deposit</p>
+                        </div>
+                        <output class="website-math__value" for="average-ticket" data-ticket-label>$350</output>
+                    </div>
+                    <input
+                        id="average-ticket"
+                        class="website-math__range"
+                        type="range"
+                        min="150"
+                        max="1500"
+                        step="25"
+                        value="350"
+                        data-ticket
+                    >
+                    <div class="website-math__scale"><span>$150</span><span>$1,500</span></div>
+                </div>
+
+                <div class="website-math__control">
+                    <div class="website-math__control-heading">
+                        <div>
+                            <label for="missed-calls" class="website-math__label">Missed calls per week</label>
+                            <p class="website-math__hint">After hours + overflow while you're on a job</p>
+                        </div>
+                        <output class="website-math__value" for="missed-calls" data-missed-label>8</output>
+                    </div>
+                    <input
+                        id="missed-calls"
+                        class="website-math__range"
+                        type="range"
+                        min="0"
+                        max="25"
+                        step="1"
+                        value="8"
+                        data-missed
+                    >
+                    <div class="website-math__scale"><span>0</span><span>25</span></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="website-math__result">
+            <div class="website-math-receipt">
+                <span class="website-math-receipt__tape" aria-hidden="true"></span>
+                <div class="website-math-receipt__paper">
+                    <div class="website-math-receipt__header">
+                        <div class="website-math-receipt__brand">
+                            {{ render_flower(width=15, height=15, petal_fill="#0a1f0a", center_fill="#fffef9") }}
+                            CALLIFLOWR
+                        </div>
+                        <p>MISSED-CALL RECEIPT</p>
+                        <div class="website-math-receipt__meta"><span>YOUR SHOP</span><span>AFTER HOURS</span></div>
+                    </div>
+
+                    <dl class="website-math-receipt__lines">
+                        <div><dt>Missed calls / wk</dt><dd data-receipt-missed>8</dd></div>
+                        <div><dt>Avg ticket</dt><dd data-receipt-ticket>$350</dd></div>
+                        <div><dt>Lost / week</dt><dd data-weekly-loss>$2,800</dd></div>
+                        <div><dt>Weeks / month</dt><dd>× 4.33</dd></div>
+                    </dl>
+
+                    <div class="website-math-receipt__total">
+                        <p>ON THE TABLE EACH MONTH</p>
+                        <output data-monthly-loss>$12,124</output>
+                        <span>One booked job typically covers<br>Calliflowr for the month.</span>
+                    </div>
+                    <div class="website-math-receipt__barcode" aria-hidden="true"></div>
+                    <p class="website-math-receipt__disclaimer">Estimates use industry averages. Your ticket sizes and call volume will vary.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <p class="website-math__sources">
+        Voicemail abandonment ~80% (Hiya; Forbes places it at 86%). ~85% who don't get through never call back (InsideSales/MIT). Small businesses miss 20-35% of business-hours calls, nearly all after hours. Ticket ranges: Angi/HomeAdvisor ($150-650 typical HVAC repair, ~$293-320 national average; plumbing $175-450).
+    </p>
+</section>
diff --git a/templates/website/partials/nav.html b/templates/website/partials/nav.html
new file mode 100644
index 0000000..cd5d5a8
--- /dev/null
+++ b/templates/website/partials/nav.html
@@ -0,0 +1,22 @@
+{% from 'website/macros/logo.html' import render_brand_link %}
+{% from 'website/macros/buttons.html' import render_button %}
+
+<nav class="website-nav" aria-label="Primary">
+    {{ render_brand_link(href=url_for('read_home')) }}
+
+    <div class="website-nav__links">
+        <a href="#agents" class="website-nav-anchor">AI Agents</a>
+        <a href="#call-me" class="website-nav-anchor">Live Demo</a>
+        <a href="#how" class="website-nav-anchor">How it works</a>
+        {# <a href="#faq" class="website-nav-anchor">FAQ</a> #}
+    </div>
+
+    <div class="website-nav__actions">
+        {% if user %}
+        <a href="{{ url_for('read_dashboard') }}" class="website-nav-link">Dashboard</a>
+        {% else %}
+        <a href="{{ url_for('read_login') }}" class="website-nav-link">Login</a>
+        {% endif %}
+        {{ render_button('Book a Demo', href=url_for('read_demo'), variant='lime', size='nav') }}
+    </div>
+</nav>
diff --git a/tests/routers/website/test_forms.py b/tests/routers/website/test_forms.py
new file mode 100644
index 0000000..c701838
--- /dev/null
+++ b/tests/routers/website/test_forms.py
@@ -0,0 +1,127 @@
+"""Tests for public website lead forms."""
+
+from __future__ import annotations
+
+from unittest.mock import patch
+
+import pytest
+
+from main import app
+from utils.core.csrf import CSRF_COOKIE_NAME, generate_csrf_token
+
+
+def _url(name: str, **path_params) -> str:
+    return str(app.url_path_for(name, **path_params))
+
+
+def _csrf_client(client):
+    token = generate_csrf_token()
+    client.cookies.set(CSRF_COOKIE_NAME, token)
+    return token
+
+
+@pytest.fixture
+def demo_form_data() -> dict[str, str]:
+    return {
+        "work_email": "jordan@summitair.com",
+        "first_name": "Jordan",
+        "last_name": "Diaz",
+        "company": "Summit Air & Heating",
+        "trade": "HVAC",
+        "phone": "(518) 555-0142",
+        "technicians": "2-5",
+        "phone_answerer": "office_voicemail",
+    }
+
+
+@pytest.fixture
+def call_me_form_data() -> dict[str, str]:
+    return {
+        "name": "Jordan Diaz",
+        "business": "Summit Air & Heating",
+        "email": "jordan@summitair.com",
+        "phone": "(518) 555-0142",
+        "industry": "HVAC",
+        "crm": "",
+    }
+
+
+def test_read_demo_page_renders(unauth_client):
+    response = unauth_client.get(_url("read_demo"))
+    assert response.status_code == 200
+    assert "Book a demo" in response.text
+    assert "Calli picks up." in response.text
+    assert 'name="work_email"' in response.text
+
+
+@patch("resend.Emails.send")
+def test_submit_book_demo_success_redirects(
+    mock_send,
+    unauth_client,
+    demo_form_data,
+    mock_email_response,
+):
+    mock_send.return_value = mock_email_response
+    token = _csrf_client(unauth_client)
+    response = unauth_client.post(
+        _url("submit_book_demo"),
+        data={**demo_form_data, "csrf_token": token},
+        follow_redirects=False,
+    )
+    assert response.status_code == 303
+    assert response.headers["location"].endswith("/demo")
+    mock_send.assert_called_once()
+
+
+@patch("resend.Emails.send")
+def test_submit_book_demo_validation_error_rerenders_form(
+    mock_send,
+    unauth_client,
+    demo_form_data,
+):
+    token = _csrf_client(unauth_client)
+    invalid = {**demo_form_data, "work_email": "not-an-email"}
+    response = unauth_client.post(
+        _url("submit_book_demo"),
+        data={**invalid, "csrf_token": token},
+    )
+    assert response.status_code == 422
+    assert 'name="work_email"' in response.text
+    mock_send.assert_not_called()
+
+
+@patch("resend.Emails.send")
+def test_submit_call_me_success_redirects_home(
+    mock_send,
+    unauth_client,
+    call_me_form_data,
+    mock_email_response,
+):
+    mock_send.return_value = mock_email_response
+    token = _csrf_client(unauth_client)
+    response = unauth_client.post(
+        _url("submit_call_me"),
+        data={**call_me_form_data, "csrf_token": token},
+        follow_redirects=False,
+    )
+    assert response.status_code == 303
+    assert response.headers["location"].endswith("/#call-me")
+    mock_send.assert_called_once()
+
+
+@patch("resend.Emails.send")
+def test_submit_call_me_validation_error_redirects_with_flash(
+    mock_send,
+    unauth_client,
+    call_me_form_data,
+):
+    token = _csrf_client(unauth_client)
+    invalid = {**call_me_form_data, "phone": "bad"}
+    response = unauth_client.post(
+        _url("submit_call_me"),
+        data={**invalid, "csrf_token": token},
+        follow_redirects=False,
+    )
+    assert response.status_code == 303
+    assert "flash_message=" in response.headers.get("set-cookie", "")
+    mock_send.assert_not_called()
diff --git a/tests/test_get_pages_jinja_integration.py b/tests/test_get_pages_jinja_integration.py
index 35fa17f..d016ed8 100644
--- a/tests/test_get_pages_jinja_integration.py
+++ b/tests/test_get_pages_jinja_integration.py
@@ -15,7 +15,14 @@ def _url(name: str, **path_params) -> str:
     return str(app.url_path_for(name, **path_params))
 
 
-STATIC_PAGES = ("about", "privacy-policy", "terms-of-service")
+STATIC_PAGES = (
+    "about",
+    "blog",
+    "customers",
+    "privacy-policy",
+    "terms-and-conditions",
+    "website-fulfillment-policy",
+)
 
 
 @dataclass(frozen=True)
@@ -30,7 +37,18 @@ class GetPageCase:
 
 GET_PAGE_CASES = [
     GetPageCase(
-        "home", "unauth_client", lambda: _url("read_home"), jinja_route="read_home"
+        "home",
+        "unauth_client",
+        lambda: _url("read_home"),
+        marker="Every call answered.",
+        jinja_route="read_home",
+    ),
+    GetPageCase(
+        "demo",
+        "unauth_client",
+        lambda: _url("read_demo"),
+        marker="Book a Demo",
+        jinja_route="read_demo",
     ),
     GetPageCase(
         "login", "unauth_client", lambda: _url("read_login"), jinja_route="read_login"
@@ -238,7 +256,8 @@ def test_unauthenticated_redirects_to_login(
         assert response.status_code in {303, 307}
         assert "login" in response.headers.get("location", "")
 
-    def test_authenticated_home_redirects_to_dashboard(self, auth_client_owner):
+    def test_authenticated_home_renders_website(self, auth_client_owner):
         response = auth_client_owner.get(_url("read_home"))
-        assert response.status_code == 302
-        assert "dashboard" in response.headers.get("location", "")
+        assert response.status_code == 200
+        assert "Every call answered." in response.text
+        assert "Dashboard" in response.text
diff --git a/tests/utils/website/test_website_forms.py b/tests/utils/website/test_website_forms.py
new file mode 100644
index 0000000..194fcc9
--- /dev/null
+++ b/tests/utils/website/test_website_forms.py
@@ -0,0 +1,74 @@
+"""Tests for website form validation helpers."""
+
+from utils.website.forms import BookDemoSubmission, CallMeSubmission
+
+
+def test_book_demo_submission_accepts_valid_payload():
+    submission, errors = BookDemoSubmission.from_form(
+        work_email="owner@example.com",
+        first_name="Jordan",
+        last_name="Diaz",
+        company="Summit Air",
+        trade="HVAC",
+        phone="(518) 555-0142",
+        technicians="2-5",
+        phone_answerer="owner",
+    )
+    assert errors == {}
+    assert submission is not None
+    assert submission.company == "Summit Air"
+
+
+def test_call_me_submission_rejects_invalid_phone():
+    submission, errors = CallMeSubmission.from_form(
+        name="Jordan Diaz",
+        business="Summit Air",
+        email="jordan@summitair.com",
+        phone="nope",
+        industry="HVAC",
+    )
+    assert submission is None
+    assert "phone" in errors
+
+
+def test_call_me_submission_prefixes_us_phone():
+    submission, errors = CallMeSubmission.from_form(
+        name="Jordan Diaz",
+        business="Summit Air",
+        email="jordan@summitair.com",
+        phone="(518) 555-0142",
+        industry="HVAC",
+    )
+    assert errors == {}
+    assert submission is not None
+    assert submission.phone.startswith("+1")
+    assert submission.industry == "HVAC"
+
+
+def test_call_me_submission_saves_custom_crm_name():
+    submission, errors = CallMeSubmission.from_form(
+        name="Jordan Diaz",
+        business="Summit Air",
+        email="jordan@summitair.com",
+        phone="(518) 555-0142",
+        industry="HVAC Services",
+        crm="other",
+        crm_other="ShopWare Pro",
+    )
+    assert errors == {}
+    assert submission is not None
+    assert submission.crm == "ShopWare Pro"
+
+
+def test_call_me_submission_requires_custom_crm_name():
+    submission, errors = CallMeSubmission.from_form(
+        name="Jordan Diaz",
+        business="Summit Air",
+        email="jordan@summitair.com",
+        phone="(518) 555-0142",
+        industry="HVAC Services",
+        crm="other",
+        crm_other="",
+    )
+    assert submission is None
+    assert "crm_other" in errors
diff --git a/utils/core/rate_limit.py b/utils/core/rate_limit.py
index 9c74505..ed688ca 100644
--- a/utils/core/rate_limit.py
+++ b/utils/core/rate_limit.py
@@ -349,6 +349,11 @@ def _make_rate_limiter(
     max_attempts=_int_env("FORGOT_PASSWORD_EMAIL_LIMIT", 3),
     window_seconds=_int_env("FORGOT_PASSWORD_EMAIL_WINDOW_SECONDS", 60),
 )
+website_lead_ip_limiter = _make_rate_limiter(
+    "website_lead_ip",
+    max_attempts=_int_env("WEBSITE_LEAD_IP_LIMIT", 8),
+    window_seconds=_int_env("WEBSITE_LEAD_IP_WINDOW_SECONDS", 3600),
+)
 
 _ALL_LIMITERS = (
     login_ip_limiter,
@@ -356,6 +361,7 @@ def _make_rate_limiter(
     register_ip_limiter,
     forgot_password_ip_limiter,
     forgot_password_email_limiter,
+    website_lead_ip_limiter,
 )
 
 
@@ -415,3 +421,8 @@ def check_forgot_password_email_rate_limit(email: EmailStr = Form(...)) -> Email
         forgot_password_email_limiter, f"email:{normalized}", "forgot_password_email"
     )
     return email
+
+
+def check_website_lead_ip_rate_limit(request: Request) -> None:
+    ip = get_client_ip(request)
+    _enforce_rate_limit(website_lead_ip_limiter, f"ip:{ip}", "website_lead_ip")
diff --git a/utils/website/__init__.py b/utils/website/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/utils/website/content.py b/utils/website/content.py
new file mode 100644
index 0000000..c673365
--- /dev/null
+++ b/utils/website/content.py
@@ -0,0 +1,463 @@
+"""Copy and structured content for the public Calliflowr website."""
+
+from __future__ import annotations
+
+from typing import Any, TypedDict
+
+
+class CrewCard(TypedDict):
+    id: str
+    genre: str
+    label: str
+    placeholder: str
+    rotate: float
+    offset: bool
+    image_src: str | None
+
+
+class FaqItem(TypedDict):
+    question: str
+    answer: str
+
+
+class AgentFeature(TypedDict):
+    symbol: str
+    bold: str
+    text: str
+
+
+class AgentCard(TypedDict):
+    id: str
+    name: str
+    role: str
+    channels: str
+    letter: str
+    variant: str  # "live" | "in_pilot" | "coming_soon"
+    description: str
+    features: list[AgentFeature]
+    cta_label: str
+    cta_href: str
+    status_label: str | None
+
+
+WEBSITE_CONTACT_PHONE = "+1 (518) 608-8150"
+WEBSITE_CONTACT_PHONE_TEL = "+15186088150"
+WEBSITE_CONTACT_EMAIL = "hello@calliflowr.com"
+
+SHOW_DEMO_GUARANTEE = True
+
+DEMO_TRADES = [
+    "HVAC",
+    "Plumbing",
+    "Electrical",
+    "General contracting",
+    "Other",
+]
+
+
+def _labeled_options(
+    labels: list[str],
+    *,
+    include_blank: bool = True,
+    blank_label: str = "Select…",
+) -> list[tuple[str, str]]:
+    options: list[tuple[str, str]] = []
+    if include_blank:
+        options.append(("", blank_label))
+    options.extend((label, label) for label in labels)
+    return options
+
+
+DEMO_TRADE_OPTIONS = _labeled_options(DEMO_TRADES, include_blank=False)
+
+DEMO_TECHNICIAN_COUNTS = [
+    ("", "Select…"),
+    ("1", "1"),
+    ("2-5", "2–5"),
+    ("6-10", "6–10"),
+    ("11-25", "11–25"),
+    ("26+", "26+"),
+]
+
+DEMO_PHONE_ANSWERERS = [
+    ("", "Select…"),
+    ("office_voicemail", "Office staff, voicemail after hours"),
+    ("owner", "Owner answers"),
+    ("answering_service", "Answering service"),
+    ("voicemail_only", "Voicemail only"),
+    ("other", "Other"),
+]
+
+DEMO_METRICS = [
+    {
+        "value": "1 ring",
+        "label": "Every call picked up before the second ring",
+    },
+    {
+        "value": "24/7",
+        "label": "Nights, weekends, and mid-rush — never closed",
+    },
+    {
+        "value": "1 day",
+        "label": "From signup to answering your line",
+    },
+]
+
+DEMO_ON_POINTS = [
+    "Hear Calli take a real trades call — emergency and all",
+    "See the call log and the booking email your office gets",
+    "Founding-shop pricing and straight answers — from a founder, not a rep",
+]
+
+# Set to a static path when screenshots are added, e.g. "img/website/screenshots/shot-dashboard.png"
+DASHBOARD_SCREENSHOT: str | None = "img/website/how-it-works/step-2.png"
+EMAIL_SCREENSHOT: str | None = "img/website/how-it-works/step-3.png"
+
+
+CREW_CARDS: list[CrewCard] = [
+    {
+        "id": "hvac",
+        "genre": "HVAC",
+        "label": "HVAC · Albany",
+        "placeholder": "HVAC tech at work",
+        "rotate": 1.2,
+        "offset": False,
+        "image_src": "img/website/hero/calliflowr-hvac.jpg",
+    },
+    {
+        "id": "plumber",
+        "genre": "Plumbing",
+        "label": "Plumbing · Troy",
+        "placeholder": "Plumber on site",
+        "rotate": -1.5,
+        "offset": False,
+        "image_src": "img/website/hero/calliflowr-plumbing.jpg",
+    },
+    {
+        "id": "electric",
+        "genre": "Electrical",
+        "label": "Electrical · Saratoga Springs",
+        "placeholder": "Electrician at the panel",
+        "rotate": -1.0,
+        "offset": False,
+        "image_src": "img/website/hero/calliflowr-electrical.jpg",
+    },
+    {
+        "id": "roofing",
+        "genre": "Roofing",
+        "label": "Roofing · Albany",
+        "placeholder": "Roofer on a pitch",
+        "rotate": -1.3,
+        "offset": False,
+        "image_src": "img/website/hero/calliflowr-roofing.jpg",
+    },
+    {
+        "id": "garage",
+        "genre": "Garage Door",
+        "label": "Garage Door · Latham",
+        "placeholder": "Garage door install",
+        "rotate": -1.2,
+        "offset": False,
+        "image_src": "img/website/hero/calliflowr-garage-door.jpg",
+    },
+    {
+        "id": "construction",
+        "genre": "Construction",
+        "label": "Construction · Schenectady",
+        "placeholder": "Crew on a job site",
+        "rotate": 1.4,
+        "offset": False,
+        "image_src": "img/website/hero/calliflowr-construction.jpg",
+    },
+    {
+        "id": "pest",
+        "genre": "Pest Control",
+        "label": "Pest Control · Utica",
+        "placeholder": "Tech at the front door",
+        "rotate": 1.0,
+        "offset": False,
+        "image_src": "img/website/hero/calliflowr-pest-control.jpg",
+    },
+    {
+        "id": "solar",
+        "genre": "Solar",
+        "label": "Solar · Troy",
+        "placeholder": "Solar panel install",
+        "rotate": 1.1,
+        "offset": False,
+        "image_src": "img/website/hero/calliflowr-solar.jpg",
+    },
+    {
+        "id": "cleaning",
+        "genre": "Cleaning",
+        "label": "Cleaning · Saratoga Springs",
+        "placeholder": "Cleaning crew at work",
+        "rotate": -0.9,
+        "offset": False,
+        "image_src": "img/website/hero/calliflowr-cleaning.jpg",
+    },
+]
+
+CALL_ME_INDUSTRIES = [f"{card['genre']} Services" for card in CREW_CARDS]
+CALL_ME_INDUSTRY_OPTIONS = _labeled_options(CALL_ME_INDUSTRIES)
+
+# Popular platforms first, then the rest A–Z (shorter names first within ties), Other last.
+CALL_ME_CRM_POPULAR = [
+    "ServiceTitan",
+    "Housecall Pro",
+    "Jobber",
+    "Service Fusion",
+    "HubSpot",
+    "Salesforce",
+]
+CALL_ME_CRM_REST = sorted(
+    [
+        "AccuLynx",
+        "Clypboard",
+        "FieldEdge",
+        "FieldPulse",
+        "FieldRoutes",
+        "JobNimbus",
+        "PestPac",
+        "Podium",
+        "SimPRO",
+        "Successware",
+        "Workiz",
+    ],
+    key=lambda name: (name.casefold(), len(name)),
+)
+CALL_ME_CRMS = CALL_ME_CRM_POPULAR + CALL_ME_CRM_REST
+CALL_ME_CRM_OPTIONS = _labeled_options(CALL_ME_CRMS) + [
+    ("other", "Custom CRM / Other"),
+]
+
+FOOTER_INDUSTRIES = [
+    "HVAC",
+    "Solar",
+    "Roofing",
+    "Cleaning",
+    "Plumbing",
+    "Electrical",
+    "Garage Door",
+    "Construction",
+    "Pest Control",
+]
+
+FOOTER_ADDRESS_LINES = [
+    "30 3rd St,",
+    "Troy, NY 12180",
+]
+
+WHERE_NOW = [
+    "Albany",
+    "Troy",
+    "Schenectady",
+    "Clifton Park",
+    "Latham",
+    "Saratoga Springs",
+]
+
+WHERE_NEXT = [
+    "Glens Falls",
+    "Utica",
+    "Syracuse",
+    "Hudson Valley",
+]
+
+
+FAQ_ITEMS: list[FaqItem] = [
+    {
+        "question": "Will customers know it's AI?",
+        "answer": (
+            "When asked our agent's simply reply they are the AI CSR agents for your shop. "
+        ),
+    },
+    {
+        "question": "What happens when they agents don't know the answer?",
+        "answer": (
+            "Our agents don't guess beyond the information provided for them. They take the details, tell the customer the office will follow up and logs it as a lead in your dashboard. "
+        ),
+    },
+    {
+        "question": "Can the agents quote prices?",
+        "answer": (
+            "The agents only quotes prices they are given. The rest are booked as an estimate visit or takes details for aa callback, based on rules you set during setup. "
+        ),
+    },
+    {
+        "question": "What about emergencies?",
+        "answer": (
+            "Our agents are trained to flag urgent calls and reach your on-call technicians in under a minute, "
+            "by phone and text, with the details already written out."
+        ),
+    },
+    {
+        "question": "We already have an answering service.",
+        "answer": (
+            "Then you're paying to have messages taken. Our agents check for your availability and book the job while the "
+            "customer's still on the line."
+        ),
+    },
+    {
+        "question": "Do I keep my number? What do I install?",
+        "answer": (
+            "Yes, and nothing. We forward your existing line, same number and "
+            "caller ID, no hardware installation."
+        ),
+    },
+    {
+        "question": "What's the setup and cost?",
+        "answer": (
+            "Our team trains the AI agents on your business and service logic alongside you and mostly deliver within 2 days depending on the complexity. "
+        ),
+    },
+]
+
+
+AGENTS: list[AgentCard] = [
+    {
+        "id": "inbound",
+        "name": "Inbound Agent",
+        "role": "Lead answering",
+        "channels": "Voice + SMS",
+        "letter": "I",
+        "variant": "live",
+        "description": (
+            "Never miss a call, day or night. Every inbound call answered and every "
+            "job booked, even when the whole crew is out or the front-office is busy."
+        ),
+        "features": [
+            {
+                "symbol": "✓",
+                "bold": "Answers in one ring, 24/7.",
+                "text": " No voicemail, no hold music.",
+            },
+            {
+                "symbol": "✓",
+                "bold": "Books the job",
+                "text": " on your calendar and texts the customer a confirmation.",
+            },
+            {
+                "symbol": "✓",
+                "bold": "Reaches your on-call tech",
+                "text": " in under a minute on emergencies.",
+            },
+            {
+                "symbol": "✓",
+                "bold": "Screens spam and takes 20 calls at once.",
+                "text": " Let us handle the pressure in a cold snap.",
+            },
+        ],
+        "cta_label": "Hear it take a call →",
+        "cta_href": "#call-me",
+        "status_label": "Live now",
+    },
+    {
+        "id": "outbound",
+        "name": "Outbound Agent",
+        "role": "Fill the board",
+        "channels": "Voice + SMS",
+        "letter": "O",
+        "variant": "in_pilot",
+        "description": (
+            "Fill the board when the phones go quiet. It works your customer "
+            "list, so open slots turn into booked work."
+        ),
+        "features": [
+            {
+                "symbol": "○",
+                "bold": "Happy calls",
+                "text": " after every job, so good work turns into great reviews.",
+            },
+            {
+                "symbol": "○",
+                "bold": "Win-back calls",
+                "text": " to past customers when the schedule is light.",
+            },
+            {
+                "symbol": "○",
+                "bold": "Estimate follow-ups",
+                "text": " on open quotes before they go cold.",
+            },
+            {
+                "symbol": "○",
+                "bold": "Tune-up and maintenance reminders",
+                "text": " before the season turns.",
+            },
+        ],
+        "cta_label": "",
+        "cta_href": "",
+        "status_label": "In pilot",
+    },
+    {
+        "id": "speed-to-lead",
+        "name": "Speed to Lead",
+        "role": "Hot lead response",
+        "channels": "Voice + SMS",
+        "letter": "S",
+        "variant": "coming_soon",
+        "description": (
+            "Beat the other shop to every hot lead. The moment a lead comes in, our agent "
+            "calls and texts before your competitor picks up the phone."
+        ),
+        "features": [
+            {
+                "symbol": "○",
+                "bold": "Instant response",
+                "text": " to Google LSA, Yelp, Angi, and Thumbtack leads.",
+            },
+            {
+                "symbol": "○",
+                "bold": "Follows up by call and text",
+                "text": " until the lead books.",
+            },
+            {
+                "symbol": "○",
+                "bold": "Every lead logged,",
+                "text": " so nothing sits unworked.",
+            },
+        ],
+        "cta_label": "",
+        "cta_href": "",
+        "status_label": "Coming soon",
+    },
+]
+
+
+def website_shared_context() -> dict[str, Any]:
+    """Context shared across public website pages."""
+    return {
+        "contact_phone": WEBSITE_CONTACT_PHONE,
+        "contact_phone_tel": WEBSITE_CONTACT_PHONE_TEL,
+        "contact_email": WEBSITE_CONTACT_EMAIL,
+        "footer_industries": FOOTER_INDUSTRIES,
+        "footer_address_lines": FOOTER_ADDRESS_LINES,
+    }
+
+
+def website_home_context() -> dict[str, Any]:
+    """Template context shared by the public homepage."""
+    return {
+        **website_shared_context(),
+        "crew_cards": CREW_CARDS,
+        "faq_items": FAQ_ITEMS,
+        "agents": AGENTS,
+        "dashboard_screenshot": DASHBOARD_SCREENSHOT,
+        "email_screenshot": EMAIL_SCREENSHOT,
+        "call_me_industry_options": CALL_ME_INDUSTRY_OPTIONS,
+        "call_me_crm_options": CALL_ME_CRM_OPTIONS,
+    }
+
+
+def website_demo_context() -> dict[str, Any]:
+    """Template context for the book-a-demo page."""
+    return {
+        **website_shared_context(),
+        "demo_trades": DEMO_TRADES,
+        "demo_trade_options": DEMO_TRADE_OPTIONS,
+        "demo_technician_counts": DEMO_TECHNICIAN_COUNTS,
+        "demo_phone_answerers": DEMO_PHONE_ANSWERERS,
+        "demo_metrics": DEMO_METRICS,
+        "demo_on_points": DEMO_ON_POINTS,
+        "show_demo_guarantee": SHOW_DEMO_GUARANTEE,
+    }
diff --git a/utils/website/forms.py b/utils/website/forms.py
new file mode 100644
index 0000000..dac92b6
--- /dev/null
+++ b/utils/website/forms.py
@@ -0,0 +1,170 @@
+"""Validation for public website lead forms."""
+
+from __future__ import annotations
+
+import re
+from typing import Any
+
+from pydantic import BaseModel, EmailStr, Field, ValidationError, field_validator
+
+PHONE_PATTERN = re.compile(r"^[\d\s()+\-.]{7,20}$")
+NAME_PATTERN = re.compile(r"^[\w\s.'-]{1,80}$", re.UNICODE)
+ORG_PATTERN = re.compile(r"^[\w\s.'&,\-/()]{1,120}$", re.UNICODE)
+
+
+def _clean_optional(value: str | None) -> str | None:
+    if value is None:
+        return None
+    stripped = value.strip()
+    return stripped or None
+
+
+def _validation_errors(exc: ValidationError) -> dict[str, str]:
+    errors: dict[str, str] = {}
+    for error in exc.errors():
+        loc = error.get("loc", ())
+        if not loc:
+            continue
+        field = str(loc[0])
+        message = error.get("msg", "Invalid value")
+        if message.startswith("Value error, "):
+            message = message.removeprefix("Value error, ")
+        errors.setdefault(field, message)
+    return errors
+
+
+class BookDemoSubmission(BaseModel):
+    work_email: EmailStr
+    first_name: str = Field(min_length=1, max_length=80)
+    last_name: str = Field(min_length=1, max_length=80)
+    company: str = Field(min_length=1, max_length=120)
+    trade: str = Field(min_length=1, max_length=80)
+    phone: str = Field(min_length=7, max_length=20)
+    technicians: str | None = None
+    phone_answerer: str | None = None
+
+    @field_validator("first_name", "last_name")
+    @classmethod
+    def validate_name_fields(cls, value: str) -> str:
+        cleaned = value.strip()
+        if not cleaned:
+            raise ValueError("This field is required.")
+        if not NAME_PATTERN.match(cleaned):
+            raise ValueError("Contains invalid characters.")
+        return cleaned
+
+    @field_validator("company", "trade")
+    @classmethod
+    def validate_org_fields(cls, value: str) -> str:
+        cleaned = value.strip()
+        if not cleaned:
+            raise ValueError("This field is required.")
+        if not ORG_PATTERN.match(cleaned):
+            raise ValueError("Contains invalid characters.")
+        return cleaned
+
+    @field_validator("phone")
+    @classmethod
+    def validate_phone(cls, value: str) -> str:
+        cleaned = value.strip()
+        if not PHONE_PATTERN.match(cleaned):
+            raise ValueError("Enter a valid phone number.")
+        return cleaned
+
+    @field_validator("technicians", "phone_answerer", mode="before")
+    @classmethod
+    def normalize_optional(cls, value: str | None) -> str | None:
+        return _clean_optional(value)
+
+    @classmethod
+    def from_form(cls, **raw: Any) -> tuple[BookDemoSubmission | None, dict[str, str]]:
+        try:
+            return cls.model_validate(raw), {}
+        except ValidationError as exc:
+            return None, _validation_errors(exc)
+
+
+class CallMeSubmission(BaseModel):
+    name: str = Field(min_length=1, max_length=120)
+    business: str = Field(min_length=1, max_length=120)
+    email: EmailStr
+    phone: str = Field(min_length=7, max_length=20)
+    industry: str = Field(min_length=1, max_length=80)
+    crm: str | None = None
+
+    @field_validator("name")
+    @classmethod
+    def validate_name(cls, value: str) -> str:
+        cleaned = value.strip()
+        if not cleaned:
+            raise ValueError("This field is required.")
+        if not NAME_PATTERN.match(cleaned):
+            raise ValueError("Contains invalid characters.")
+        return cleaned
+
+    @field_validator("business", "industry")
+    @classmethod
+    def validate_org_fields(cls, value: str) -> str:
+        cleaned = value.strip()
+        if not cleaned:
+            raise ValueError("This field is required.")
+        if not ORG_PATTERN.match(cleaned):
+            raise ValueError("Contains invalid characters.")
+        return cleaned
+
+    @field_validator("phone", mode="before")
+    @classmethod
+    def normalize_phone(cls, value: str) -> str:
+        cleaned = str(value or "").strip()
+        digits = re.sub(r"\D", "", cleaned)
+        if digits.startswith("1") and len(digits) == 11:
+            digits = digits[1:]
+        if len(digits) == 10:
+            return f"+1 ({digits[:3]}) {digits[3:6]}-{digits[6:]}"
+        if cleaned.startswith("+1"):
+            return cleaned
+        if cleaned:
+            return f"+1 {cleaned}"
+        return cleaned
+
+    @field_validator("phone")
+    @classmethod
+    def validate_phone(cls, value: str) -> str:
+        cleaned = value.strip()
+        if not PHONE_PATTERN.match(cleaned):
+            raise ValueError("Enter a valid phone number.")
+        return cleaned
+
+    @field_validator("crm", mode="before")
+    @classmethod
+    def normalize_optional(cls, value: str | None) -> str | None:
+        return _clean_optional(value)
+
+    @field_validator("crm")
+    @classmethod
+    def validate_crm(cls, value: str | None) -> str | None:
+        if value is None:
+            return None
+        if not ORG_PATTERN.match(value):
+            raise ValueError("Contains invalid characters.")
+        if len(value) > 120:
+            raise ValueError("Keep this under 120 characters.")
+        return value
+
+    @classmethod
+    def from_form(cls, **raw: Any) -> tuple[CallMeSubmission | None, dict[str, str]]:
+        crm = _clean_optional(raw.get("crm"))
+        crm_other = _clean_optional(raw.get("crm_other"))
+        payload = dict(raw)
+
+        if crm == "other":
+            if not crm_other:
+                return None, {"crm_other": "Enter the CRM you use."}
+            payload["crm"] = crm_other
+
+        payload.pop("crm_other", None)
+
+        try:
+            return cls.model_validate(payload), {}
+        except ValidationError as exc:
+            return None, _validation_errors(exc)
diff --git a/utils/website/notifications.py b/utils/website/notifications.py
new file mode 100644
index 0000000..8787f0f
--- /dev/null
+++ b/utils/website/notifications.py
@@ -0,0 +1,106 @@
+"""Email notifications for website lead forms."""
+
+from __future__ import annotations
+
+import logging
+import os
+
+import resend
+
+from utils.website.content import (
+    DEMO_PHONE_ANSWERERS,
+    DEMO_TECHNICIAN_COUNTS,
+    WEBSITE_CONTACT_EMAIL,
+)
+from utils.website.forms import BookDemoSubmission, CallMeSubmission
+
+logger = logging.getLogger("uvicorn.error")
+
+
+def _option_label(options: list[tuple[str, str]], value: str | None) -> str | None:
+    if not value:
+        return None
+    for option_value, option_label in options:
+        if option_value == value:
+            return option_label
+    return value
+
+
+def _leads_notify_email() -> str:
+    return os.getenv("LEADS_NOTIFY_EMAIL", WEBSITE_CONTACT_EMAIL)
+
+
+def _send_html_email(subject: str, html: str) -> bool:
+    api_key = os.getenv("RESEND_API_KEY")
+    email_from = os.getenv("EMAIL_FROM")
+    if not api_key or not email_from:
+        logger.warning(
+            "Lead notification skipped: RESEND_API_KEY or EMAIL_FROM not configured."
+        )
+        return False
+
+    resend.api_key = api_key
+    params = {
+        "from": email_from,
+        "to": [_leads_notify_email()],
+        "subject": subject,
+        "html": html,
+    }
+    try:
+        sent = resend.Emails.send(params)  # ty: ignore[invalid-argument-type]
+        logger.info("Lead notification sent: %s", sent.get("id"))
+        return True
+    except Exception:
+        logger.exception("Failed to send lead notification email")
+        return False
+
+
+def notify_book_demo(submission: BookDemoSubmission) -> bool:
+    optional_rows = ""
+    technicians = _option_label(DEMO_TECHNICIAN_COUNTS, submission.technicians)
+    phone_answerer = _option_label(DEMO_PHONE_ANSWERERS, submission.phone_answerer)
+    if technicians:
+        optional_rows += (
+            f"<tr><td><strong>Technicians</strong></td><td>{technicians}</td></tr>"
+        )
+    if phone_answerer:
+        optional_rows += (
+            f"<tr><td><strong>Who answers phones</strong></td>"
+            f"<td>{phone_answerer}</td></tr>"
+        )
+
+    html = f"""
+    <h2>New demo request</h2>
+    <table cellpadding="6" cellspacing="0">
+      <tr><td><strong>Email</strong></td><td>{submission.work_email}</td></tr>
+      <tr><td><strong>Name</strong></td><td>{submission.first_name} {submission.last_name}</td></tr>
+      <tr><td><strong>Company</strong></td><td>{submission.company}</td></tr>
+      <tr><td><strong>Trade</strong></td><td>{submission.trade}</td></tr>
+      <tr><td><strong>Phone</strong></td><td>{submission.phone}</td></tr>
+      {optional_rows}
+    </table>
+    """
+    return _send_html_email(
+        f"Demo request — {submission.company}",
+        html,
+    )
+
+
+def notify_call_me(submission: CallMeSubmission) -> bool:
+    crm_value = submission.crm or "—"
+    html = f"""
+    <h2>Call-me request</h2>
+    <table cellpadding="6" cellspacing="0">
+      <tr><td><strong>Name</strong></td><td>{submission.name}</td></tr>
+      <tr><td><strong>Company</strong></td><td>{submission.business}</td></tr>
+      <tr><td><strong>Email</strong></td><td>{submission.email}</td></tr>
+      <tr><td><strong>Phone</strong></td><td>{submission.phone}</td></tr>
+      <tr><td><strong>Industry</strong></td><td>{submission.industry}</td></tr>
+      <tr><td><strong>CRM</strong></td><td>{crm_value}</td></tr>
+    </table>
+    <p>Follow up with an outbound Calli demo call when ready.</p>
+    """
+    return _send_html_email(
+        f"Call-me request — {submission.business}",
+        html,
+    )