/* Shared stylesheet for all public pages (landing, features, examples,
   pricing). Extracted from landing.html — contains the design tokens, nav,
   footer, buttons, language picker, chat bubbles and the landing sections.
   Page-specific styles live in each page's own <style> block. */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg: #ffffff;
      --bg-2: #f7f9fc;
      --text: #0e1726;
      --muted: #67748b;
      --accent: #2f6fe4;
      --surface: #f2f5fb;
      --border: #e3e8f0;
      --font-logo: "Clash Display", sans-serif;
      --font-display: "Clash Display", sans-serif;
      --font-body: "General Sans", sans-serif;
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --nav-height: 84px;
    }

    html {
      scroll-behavior: smooth;
      /* Decorative hero/glow layers intentionally bleed past their sections.
         Clip that bleed at the viewport root so mobile browsers cannot pan the
         whole page sideways (body clipping alone is not reliable on iOS). */
      overflow-x: hidden;
    }
    body {
      background: var(--bg); color: var(--text);
      font-family: var(--font-body); font-weight: 400; line-height: 1.65;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    /* Full-bleed layout: content runs edge to edge with generous side padding
       rather than a narrow centred column. The padding scales with the
       viewport so on wide screens the left edge (logo, headline, section
       titles) and the right edge (nav, hero scene) sit near the window edges,
       not floating in the middle. Capped very wide so ultra-wide monitors
       don't stretch lines past readability. */
    .container { max-width: 1800px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 6rem); }

    body::after {
      content: ""; position: fixed; inset: 0; z-index: 2000;
      pointer-events: none; opacity: 0.015;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 128px 128px;
    }

    /* --- NAV --- */
    nav {
      position: absolute; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height);
      display: flex; align-items: center;
      background: transparent;
    }
    .nav-inner { width:100%; max-width:1800px; margin:0 auto; padding:0 clamp(1.5rem, 5vw, 6rem); display:flex; align-items:center; justify-content:space-between; }
    .nav-logo {
      display: inline-flex; align-items: center; gap: 0.55rem; flex-shrink: 0;
      font-family: var(--font-logo); font-size: 2.5rem; font-weight: 700;
      letter-spacing: -0.03em; color: var(--text); text-decoration: none; line-height: 1;
    }
    .nav-logo-mark {
      display: block; width: 50px; height: 42px; flex-shrink: 0;
      object-fit: contain; clip-path: inset(1px);
    }
    .nav-logo-word { transform: translateY(-0.02em); }
    /* Nav items share one weight (500) and the black --text colour so the bar
       reads as one consistent row rather than items of mixed emphasis. */
    .nav-links { display:flex; align-items:center; gap: 1.75rem; }
    .nav-links a { position: relative; font-size: 0.95rem; font-weight: 500; color: var(--text); text-decoration: none; transition: color 0.2s; }
    .nav-links a:hover { color: var(--accent); }
    /* Active page marker: accent colour + a short underline under the label. */
    .nav-links a.nav-current { color: var(--accent); font-weight: 600; }
    .nav-links a.nav-current::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
      background: var(--accent); border-radius: 2px;
    }
    /* Language picker — a custom dropdown (shadcn-style) so it stays on-brand
       and scales to any number of languages. Rendered from SUPPORTED_LANGS in
       JS; the trigger shows the active language's code. */
    .lang { position: relative; }
    .lang-trigger {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
      letter-spacing: 0.02em; color: var(--text);
      background: none; border: none; cursor: pointer; padding: 0.3rem 0.1rem;
      transition: color 0.2s;
    }
    .lang-trigger:hover { color: var(--accent); }
    .lang-globe { width: 16px; height: 16px; opacity: 0.85; }
    .lang-chev { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.2s; }
    .lang.open .lang-chev { transform: rotate(180deg); }
    .lang-menu {
      position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px;
      background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
      box-shadow: 0 12px 28px -12px rgba(20,40,90,0.22), 0 2px 6px -3px rgba(20,40,90,0.1);
      padding: 5px; z-index: 200;
      opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top right;
      pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease;
    }
    .lang.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
    .lang-option {
      display: flex; align-items: center; gap: 0.6rem; width: 100%;
      font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--text);
      text-align: left; background: none; border: none; cursor: pointer;
      padding: 0.5rem 0.65rem; border-radius: 8px; transition: background 0.12s;
    }
    .lang-option:hover { background: var(--surface); }
    .lang-option .lang-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); opacity: 0; }
    .lang-option[aria-selected="true"] .lang-check { opacity: 1; }
    .lang-option[aria-selected="true"] { color: var(--accent); }
    .btn {
      display:inline-flex; align-items:center; gap:0.55rem; font-family: var(--font-body);
      font-size: 0.875rem; font-weight: 500; text-decoration: none; border:none; cursor:pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s;
    }
    /* White label on the blue fill, pill-shaped; hover darkens (keeps ≥4.5:1). */
    .btn-primary { color: #fff; font-weight: 600; background: var(--accent); padding: 0.7rem 1.5rem; border-radius: 999px; }
    .btn-primary:hover { background: color-mix(in srgb, var(--accent) 84%, #0a1a3a); }
    .btn:active { transform: translateY(1px); }
    .btn-ghost { color: var(--text); background: transparent; padding: 0.65rem 0.2rem; }
    .btn-ghost:hover { color: var(--accent); }
    .btn-arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.25s var(--ease-out); }
    .btn-primary:hover .btn-arrow { transform: translateX(3px); }
    .btn-play { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); transition: transform 0.25s var(--ease-out); }
    .btn-ghost:hover .btn-play { transform: scale(1.08); }
    /* Nav CTA: solid blue pill, same voice as the hero CTA. */
    .nav-links a.btn-outline {
      color: #fff; font-weight: 500; background: var(--accent);
      border: 1px solid transparent; padding: 0.65rem 1.45rem; border-radius: 999px;
    }
    .nav-links a.btn-outline:hover { background: color-mix(in srgb, var(--accent) 84%, #0a1a3a); color: #fff; }

    /* --- HERO ---
       Fills the viewport so the divider into the "same questions" section sits
       at the fold (≈monitor height) on first load rather than appearing early.
       Flex-centred between the fixed nav and the bottom edge; the top padding
       clears the nav so centring stays visually balanced. */
    .hero { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-height) + 3.5rem) 0 2.5rem; }
    .hero > .container { width: 100%; }
    .hero-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 4rem; align-items: center; }
    /* Pill badge above the headline, frosted like the scene's chips. */
    .hero-badge {
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
      color: color-mix(in srgb, var(--accent) 75%, var(--text));
      background: rgba(255,255,255,0.65); border: 1px solid rgba(47,111,228,0.22);
      border-radius: 999px; padding: 0.42rem 0.95rem; margin-bottom: 1.6rem;
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      box-shadow: 0 8px 20px -14px rgba(47,111,228,0.4);
    }
    .hero-badge svg { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
    .hero h1 {
      font-family: var(--font-display); font-weight: 600;
      font-size: clamp(2.7rem, 4.8vw, 4.5rem); line-height: 1.04; letter-spacing: -0.025em;
      margin-bottom: 1.7rem; text-wrap: balance;
    }
    /* German headline words run longer; a step down keeps it at three lines. */
    html[lang="de"] .hero h1 { font-size: clamp(2.4rem, 4.2vw, 3.8rem); }
    .hero h1 .grad { color: var(--text); }
    .hero h1 em { font-style: normal; color: var(--accent); }
    .hero-sub { font-size: clamp(1.02rem,1.5vw,1.22rem); font-weight: 400; color: color-mix(in srgb, var(--text) 72%, var(--muted)); max-width: 480px; margin-bottom: 2.25rem; line-height: 1.7; }
    .hero-actions { display:flex; align-items:center; gap: 1.5rem; flex-wrap: wrap; }
    .hero-note { margin-top: 1.75rem; font-size: 0.8125rem; color: var(--muted); }
    .hero-note b { color: var(--text); font-weight: 500; }
    /* Trust strip along the hero's bottom edge: icon + fact pairs divided by
       hairlines, mirroring the glass chips on the scene side. */
    .hero-proof { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: 2.75rem; position: relative; }
    .proof-item { display: flex; align-items: flex-start; gap: 0.6rem; }
    .proof-item + .proof-item { border-left: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); padding-left: 1.5rem; }
    .proof-item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
    .proof-text { display: flex; flex-direction: column; gap: 2px; }
    .proof-text b { font-size: 0.8rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
    .proof-text span { font-size: 0.75rem; color: color-mix(in srgb, var(--text) 38%, var(--muted)); }

    /* Load choreography: headline lines, sub, actions and the chat panel rise
       in sequence on first paint. Gated on html.js; disabled with reduced
       motion (content is fully visible without it). */
    @media (prefers-reduced-motion: no-preference) {
      html.js .hero-badge { opacity: 0; transform: translateY(12px); animation: hero-rise 0.7s var(--ease-out) forwards; }
      html.js .hero h1 .grad, html.js .hero h1 em { display: inline-block; opacity: 0; transform: translateY(0.6em); animation: hero-rise 0.9s var(--ease-out) 0.08s forwards; }
      html.js .hero h1 em { animation-delay: 0.2s; }
      html.js .hero-sub, html.js .hero-actions, html.js .hero-note, html.js .hero-proof { opacity: 0; transform: translateY(18px); animation: hero-rise 0.8s var(--ease-out) forwards; }
      html.js .hero-sub { animation-delay: 0.28s; }
      html.js .hero-actions { animation-delay: 0.38s; }
      html.js .hero-note { animation-delay: 0.48s; }
      html.js .hero-proof { animation-delay: 0.58s; }
      html.js .hero-scene { opacity: 0; transform: translateY(26px) scale(0.98); animation: hero-rise 1s var(--ease-out) 0.25s forwards; }
    }
    @keyframes hero-rise { to { opacity: 1; transform: none; } }

    /* --- HERO SCENE: ambient 3D-ish backdrop behind the glass chat panel.
       Gradient blobs, tilted glass shards and gradient spheres; the panel
       itself is frosted so the colour shows through. All decorative. --- */
    .hero-scene { position: relative; }
    /* The left text column always sits above the scene's bleed. */
    .hero-grid > div:first-child { position: relative; z-index: 2; }
    .scene-bg { position: absolute; inset: -18% -14%; pointer-events: none; }
    .blob { position: absolute; border-radius: 50%; filter: blur(56px); }
    .blob.b1 { width: 380px; height: 380px; right: -8%; top: -6%; background: radial-gradient(circle at 35% 35%, rgba(88,140,255,0.5), rgba(88,140,255,0) 70%); }
    .blob.b2 { width: 320px; height: 320px; left: -8%; bottom: -8%; background: radial-gradient(circle at 40% 40%, rgba(150,120,255,0.45), rgba(150,120,255,0) 70%); }
    .blob.b3 { width: 220px; height: 220px; left: 34%; top: 60%; background: radial-gradient(circle at 40% 40%, rgba(70,180,255,0.32), rgba(70,180,255,0) 70%); }

    /* Light rays fanning out from behind the panel: bright thin wedges over a
       screen blend so they read as real light shafts against the pale bg. */
    .scene-rays {
      position: absolute; inset: -46% -34% -20% -18%; pointer-events: none; z-index: 0;
      background: conic-gradient(from 188deg at 56% 38%,
        transparent 0deg, rgba(255,255,255,1) 1.5deg, transparent 6deg,
        transparent 13deg, rgba(150,175,255,0.85) 17deg, transparent 24deg,
        transparent 34deg, rgba(255,255,255,0.95) 38deg, transparent 44deg,
        transparent 55deg, rgba(175,150,255,0.78) 60deg, transparent 67deg,
        transparent 78deg, rgba(255,255,255,0.7) 82deg, transparent 89deg,
        transparent 100deg, rgba(150,190,255,0.6) 105deg, transparent 112deg,
        transparent 284deg, rgba(210,215,255,0.62) 289deg, transparent 296deg,
        transparent 316deg, rgba(255,255,255,0.7) 321deg, transparent 328deg,
        transparent 344deg, rgba(190,175,255,0.55) 349deg, transparent 356deg);
      -webkit-mask-image: radial-gradient(78% 74% at 56% 38%, #000 2%, transparent 82%);
      mask-image: radial-gradient(78% 74% at 56% 38%, #000 2%, transparent 82%);
      mix-blend-mode: screen; opacity: 1;
    }

    /* Perspective stage: a tilted 3D space holding the fanned glass planes.
       Higher rotateX + slight Y gives the reference's "laid-back, turned"
       look; the panel sits above at a matching tilt. */
    .scene-stage {
      position: absolute; inset: 4% -10% 2% 6%; pointer-events: none; z-index: 1;
      transform-style: preserve-3d;
      transform: perspective(1600px) rotateX(30deg) rotateY(-9deg) rotateZ(-13deg);
    }
    /* Glass planes: translucent panes whose OWN body glows blue/violet from
       within (per the reference), with a bright top-left edge highlight and a
       thick soft drop shadow for real depth. */
    .plane {
      position: absolute; border-radius: 26px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.08) 42%, rgba(120,150,255,0.14) 100%),
        radial-gradient(70% 90% at 62% 78%, rgba(120,120,255,0.4), transparent 68%);
      border: 1px solid rgba(255,255,255,0.7);
      box-shadow:
        0 40px 80px -36px rgba(60,70,180,0.5),
        inset 1px 1px 0 rgba(255,255,255,0.7),
        inset 0 0 60px -10px rgba(130,140,255,0.35);
      -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    }
    /* Fanned tightly behind the panel; small offsets so they peek out at the
       edges rather than sprawling across the whole scene. */
    .plane.p1 { inset: 8% 6% 12% 6%; }
    .plane.p2 { inset: 2% -2% 20% 14%; transform: translateZ(-50px) rotateZ(6deg); opacity: 0.9; }
    .plane.p3 { inset: 16% 16% 4% -4%; transform: translateZ(-95px) rotateZ(-7deg); opacity: 0.72; }

    .orb { position: absolute; border-radius: 50%; z-index: 6; }
    /* Prominent 3D glass sphere, fully in view. Layered radials fake refraction:
       a hot specular top-left, a translucent violet body, a bright rim on the
       lower-right where light wraps the glass, and an inner shadow for volume. */
    .orb.o1 {
      width: 116px; height: 116px; right: -8%; top: 56%;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 18%),
        radial-gradient(circle at 68% 74%, rgba(190,210,255,0.9) 0%, rgba(190,210,255,0) 30%),
        radial-gradient(circle at 42% 38%, rgba(150,170,255,0.55), rgba(110,100,240,0.7) 55%, rgba(70,55,200,0.85) 82%),
        radial-gradient(circle at 50% 50%, rgba(120,140,255,0.35), rgba(90,70,220,0.5));
      box-shadow:
        0 30px 60px -18px rgba(70,55,210,0.55),
        inset -10px -14px 30px rgba(50,40,140,0.5),
        inset 8px 10px 24px rgba(255,255,255,0.4);
    }
    /* Small frosted glass bubble on the left, same glass language, smaller. */
    .orb.o2 {
      width: 54px; height: 54px; left: -3%; top: 38%;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 24%),
        radial-gradient(circle at 66% 72%, rgba(200,215,255,0.8) 0%, rgba(200,215,255,0) 34%),
        radial-gradient(circle at 44% 40%, rgba(226,235,252,0.85), rgba(175,195,240,0.7) 72%);
      box-shadow:
        0 14px 30px -12px rgba(90,120,200,0.45),
        inset -5px -6px 14px rgba(120,140,200,0.35),
        inset 4px 5px 12px rgba(255,255,255,0.5);
      opacity: 0.96;
    }
    @media (prefers-reduced-motion: no-preference) {
      html.js .blob, html.js .orb { animation: scene-float 9s ease-in-out infinite; }
      html.js .blob.b2, html.js .orb.o2 { animation-duration: 11s; animation-delay: 1.4s; }
      html.js .blob.b3 { animation-duration: 13s; animation-delay: 0.7s; }
      html.js .orb.o1 { animation-duration: 10s; animation-delay: 0.5s; }
      html.js .scene-rays { animation: rays-drift 16s ease-in-out infinite; }
    }
    @keyframes scene-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes rays-drift { 0%, 100% { opacity: 0.72; } 50% { opacity: 0.95; } }

    /* --- LIVE CHAT (the centrepiece): transparent frosted glass, tilted to
       match the reference's turned, laid-back panel. The low bg alpha + strong
       blur let the scene glow through the glass. --- */
    .chat {
      position: relative; z-index: 4;
      background: rgba(255,255,255,0.55);
      -webkit-backdrop-filter: blur(24px) saturate(1.5);
      backdrop-filter: blur(24px) saturate(1.5);
      border: 1px solid rgba(255,255,255,0.85); border-radius: 22px;
      box-shadow:
        0 50px 90px -34px rgba(40,50,140,0.45),
        inset 1px 1px 0 rgba(255,255,255,0.8),
        inset 0 0 80px -30px rgba(150,160,255,0.3);
      overflow: hidden; display: flex; flex-direction: column; height: 440px;
      /* Turned + leaned into the scene, matching the reference geometry. */
      transform: perspective(1500px) rotateY(-11deg) rotateX(3deg) rotateZ(-0.5deg);
      transform-origin: center right;
    }
    /* A thin diagonal sheen sweeping across the glass for a real reflection. */
    .chat::after {
      content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
      background: linear-gradient(122deg, transparent 30%, rgba(255,255,255,0.28) 44%, transparent 52%, transparent 70%, rgba(255,255,255,0.14) 80%, transparent 88%);
    }
    /* Intense blue→violet glow right under the panel's base, wide so it wraps
       the bottom edge the way the reference lights the floating card. */
    .chat-reflect {
      position: absolute; left: -4%; right: -8%; top: 400px; height: 150px; z-index: 2;
      background:
        radial-gradient(58% 72% at 40% 26%, rgba(96,150,255,0.95), transparent 72%),
        radial-gradient(54% 66% at 76% 40%, rgba(150,110,255,0.92), transparent 74%);
      border-radius: 48px; filter: blur(30px);
      pointer-events: none;
    }
    .chat-bar { display:flex; align-items:center; gap: 0.7rem; padding: 0.95rem 1.2rem; border-bottom: 1px solid rgba(20,40,90,0.08); }
    .chat-ava {
      width: 34px; height: 34px; border-radius: 11px;
      background: linear-gradient(135deg, #5b93ff 0%, #2f5fe0 100%); color: #fff;
      box-shadow: 0 6px 14px -6px rgba(47,95,224,0.6);
      display:grid; place-items:center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1;
    }
    .chat-dots { margin-left: auto; letter-spacing: 2px; color: var(--muted); font-weight: 700; font-size: 1rem; line-height: 1; user-select: none; }
    .chat-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin-top: 1.4rem; position: relative; z-index: 5; }
    /* At full container width the three chips fit one row by borrowing the
       column gap on their left; below that they wrap gracefully. */
    @media (min-width: 1140px) { .chat-chips { flex-wrap: nowrap; margin-left: -4.5rem; } }
    /* Opaque white pills with dark text — they sit over the glowing stage, so
       a translucent fill washed them out. Solid bg keeps them legible. */
    .chat-chip {
      display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
      font-size: 0.78rem; font-weight: 600; color: var(--text);
      background: #ffffff;
      border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 0.9rem;
      box-shadow: 0 12px 26px -12px rgba(40,50,140,0.28);
    }
    .chat-chip svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
    .chat-id { display:flex; flex-direction:column; line-height: 1.25; }
    .chat-name { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
    .chat-status { font-size: 0.7rem; color: var(--muted); display:flex; align-items:center; gap:5px; }
    .chat-status::before { content:""; width:6px; height:6px; border-radius:50%; background:#3ad29f; box-shadow:0 0 0 3px rgba(58,210,159,0.15); }
    /* Fixed-height panel: messages stack from the bottom and overflow scrolls
       up out of view, so adding/removing bubbles never resizes the panel. */
    .chat-body { flex:1; min-height:0; padding: 1.4rem 1.3rem 0.6rem; display:flex; flex-direction:column; justify-content:flex-end; gap: 0.85rem; overflow:hidden; }
    .msg { max-width: 82%; padding: 0.7rem 0.95rem 0.5rem; font-size: 0.9rem; line-height: 1.5; border-radius: 14px; opacity:0; transform: translateY(8px); animation: msg-in 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }
    .msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; font-weight: 400; box-shadow: 0 10px 20px -12px rgba(47,111,228,0.55); }
    .msg.bot { align-self: flex-start; background: #fff; border: 1px solid rgba(20,40,90,0.08); color: var(--text); border-bottom-left-radius: 5px; font-weight: 400; box-shadow: 0 8px 18px -14px rgba(20,40,90,0.3); }
    /* Timestamp + delivery ticks under each bubble's text, WhatsApp-style. */
    .msg .meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 0.64rem; margin-top: 2px; opacity: 0.75; }
    .msg.user .meta { color: rgba(255,255,255,0.9); }
    .msg.bot .meta { color: var(--muted); }
    .msg .meta svg { width: 13px; height: 13px; }
    .msg.typing { align-self:flex-start; background:#fff; border:1px solid var(--border); border-bottom-left-radius:5px; display:inline-flex; gap:5px; padding: 0.85rem 1rem; }
    .msg.typing span { width:6px; height:6px; border-radius:50%; background: var(--muted); animation: blink 1.2s infinite both; }
    .msg.typing span:nth-child(2){ animation-delay:0.2s } .msg.typing span:nth-child(3){ animation-delay:0.4s }
    /* Input row: the user "types" into this field, then it sends. */
    .chat-input { display:flex; align-items:center; gap:0.6rem; padding: 0.8rem 1rem; border-top: 1px solid var(--border); }
    .chat-field {
      flex:1; min-width:0; display:flex; align-items:center; min-height: 38px;
      padding: 0.5rem 0.85rem; font-size: 0.875rem; color: var(--text);
      background: var(--bg); border:1px solid var(--border); border-radius: 11px;
      white-space:nowrap; overflow:hidden;
    }
    .chat-field.empty::before { content: attr(data-ph); color: var(--muted); }
    .chat-field .caret {
      display:inline-block; width:1.5px; height:1.05em; margin-left:1px;
      background: var(--accent); vertical-align:middle; opacity:0;
    }
    .chat-field.active .caret { animation: caret-blink 1s steps(1) infinite; }
    @keyframes caret-blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
    .chat-send {
      flex-shrink:0; width:40px; height:40px; border:none; border-radius:50%; cursor:default;
      background: linear-gradient(135deg, #5b93ff 0%, #2f5fe0 100%); color:#fff; display:grid; place-items:center;
      box-shadow: 0 8px 18px -8px rgba(47,95,224,0.6);
      transition: transform 0.12s ease, filter 0.2s, opacity 0.2s; opacity:0.5;
    }
    .chat-send svg { width:17px; height:17px; transform: translateX(-1px); }
    .chat-send.ready { opacity:1; }
    .chat-send.press { transform: scale(0.82); filter: brightness(1.15); }
    @keyframes msg-in { to { opacity:1; transform:none; } }
    @keyframes blink { 0%,80%,100%{opacity:0.25} 40%{opacity:1} }
    /* --- CONTRAST STRIP: questions pile up → Wilow clears them --- */
    .contrast { padding: 7rem 0; }
    .contrast-head { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; }
    .contrast-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem,3vw,2.4rem); letter-spacing:-0.035em; line-height:1.18; }
    .contrast-head p { margin-top: 1rem; font-size: 1rem; font-weight: 300; color: var(--muted); }
    /* Open two-column exchange: no box, a single center divider, big type.
       The left side reads as the pile, the right as the resolution; checks
       draw themselves in when the section scrolls into view. */
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); position: relative; max-width: 1100px; margin: 0 auto; }
    .split::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
    .col { padding: 0; }
    .col-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.6rem; }
    .col-label { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--text); }
    .col-tag { font-size: 0.8rem; font-weight: 500; }
    .col.left .col-tag { color: #d96943; }
    .col.right .col-tag { color: #14a06d; }
    .q { display: flex; align-items: baseline; gap: 0.85rem; padding: 0.95rem 0; font-size: 1.02rem; color: color-mix(in srgb, var(--text) 80%, var(--muted)); border-top: 1px solid var(--border); }
    .q .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; align-self: center; }
    .col.left .q .dot { background: #d96943; opacity: 0.8; }
    .col.right .q { color: var(--text); }
    .col.right .q .check { width: 18px; height: 18px; flex-shrink: 0; align-self: center; color: #14a06d; }
    .col-foot { margin-top: 1.4rem; font-size: 0.85rem; }
    .col.left .col-foot { color: #d96943; }
    .col.right .col-foot { color: var(--muted); }
    /* Check marks draw in one after another once the section is visible. */
    @media (prefers-reduced-motion: no-preference) {
      html.js .col.right .q .check polyline { stroke-dasharray: 24; stroke-dashoffset: 24; }
      html.js .split.visible .col.right .q .check polyline { animation: check-draw 0.5s var(--ease-out) forwards; }
      html.js .split.visible .col.right .q:nth-child(3) .check polyline { animation-delay: 0.15s; }
      html.js .split.visible .col.right .q:nth-child(4) .check polyline { animation-delay: 0.3s; }
      html.js .split.visible .col.right .q:nth-child(5) .check polyline { animation-delay: 0.45s; }
      html.js .split.visible .col.right .q:nth-child(6) .check polyline { animation-delay: 0.6s; }
    }
    @keyframes check-draw { to { stroke-dashoffset: 0; } }
    @media (max-width: 900px) { .split::before { display: none; } }

    /* --- CLOSE: three plain facts, inline, no cards/list rows --- */
    .close { padding: 7rem 0; }
    .close-lead { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem,3vw,2.1rem); letter-spacing:-0.03em; line-height:1.4; max-width: 880px; margin: 0 auto; text-align: center; }
    .close-lead b { color: var(--text); font-weight: 600; }
    .close-lead .accent { color: var(--accent); font-weight: 600; }

    /* --- CTA --- */
    .cta { padding: 8rem 0; text-align:center; }
    .cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem,4.4vw,3.2rem); letter-spacing:-0.04em; line-height:1.1; margin-bottom: 1.1rem; }
    .cta p { font-size: 1rem; font-weight: 300; color: var(--muted); margin-bottom: 2.2rem; max-width: 440px; margin-inline:auto; }

    /* --- FOOTER --- */
    footer { padding: 2.5rem 0; }
    .footer-inner { position: relative; padding-top: 2.5rem; }
    .footer-inner::before {
      content:""; position:absolute; top:0; left:0; right:0; height:1px;
      background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
    }
    .footer-inner { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
    .footer-inner p { font-size: 0.8125rem; font-weight: 300; color: var(--muted); }
    .footer-inner a { color: var(--muted); text-decoration:none; transition: color 0.2s; }
    .footer-inner a:hover { color: var(--text); }

    /* --- RESPONSIVE --- */
    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
      .split { grid-template-columns: 1fr; }
    }
    /* Burger toggle: hidden on desktop, where the full nav row is visible. */
    .nav-burger {
      display: none; place-items: center;
      width: 44px; height: 44px; margin-right: -8px; padding: 0;
      background: none; border: 0; border-radius: 10px;
      color: var(--text); cursor: pointer;
      transition: transform 0.12s var(--ease-out);
    }
    /* Tactile press feedback on tap. */
    .nav-burger:active { transform: scale(0.92); }
    /* The two icons are stacked so they can cross-fade/rotate into each other
       rather than swapping instantly. */
    .nav-burger svg { width: 24px; height: 24px; grid-area: 1 / 1; }
    .nav-burger .icon-open, .nav-burger .icon-close { transition: opacity 0.2s var(--ease-out), transform 0.3s var(--ease-out); }
    .nav-burger .icon-close { opacity: 0; transform: rotate(-90deg) scale(0.7); }
    .nav-burger[aria-expanded="true"] .icon-open { opacity: 0; transform: rotate(90deg) scale(0.7); }
    .nav-burger[aria-expanded="true"] .icon-close { opacity: 1; transform: none; }
    .nav-backdrop { display: none; }

    @media (max-width: 960px) {
      /* Compact nav: the links row collapses into a burger-toggled panel that
         drops out of the bar. Previously these links were simply display:none,
         which made Features/Examples/Pricing/Log in unreachable on phones. */
      .nav-burger { display: inline-grid; }
      nav { position: fixed; background: var(--bg); border-bottom: 1px solid transparent; }
      nav.menu-open { border-bottom-color: var(--border); }
      /* The bar's own row paints above the sliding panel (z-index below), so
         the panel travels BEHIND the logo/burger instead of over them. */
      .nav-inner { position: relative; z-index: 1; height: 100%; }
      .nav-logo, .nav-burger { position: relative; z-index: 2; }
      .nav-links {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        /* Extra bottom room keeps the language popover inside the animated
           clip once the panel is fully open. */
        padding: 0.5rem 1.25rem 2rem;
        background: var(--bg);
        box-shadow: 0 18px 32px -20px rgba(20,40,90,0.28);
        /* Stays display:flex so open/close can animate (display isn't
           transitionable). The bottom clip reveals the panel from its first
           item to its last, while the small vertical offset gives the opening
           a natural downward motion. visibility takes it out of the a11y tree,
           delayed on close so the animation can finish first. */
        display: flex;
        transform: translateY(-12px); visibility: hidden; pointer-events: none;
        clip-path: inset(0 0 100% 0);
        transition: transform 0.4s cubic-bezier(0.33, 0, 0.15, 1),
                    clip-path 0.4s cubic-bezier(0.33, 0, 0.15, 1),
                    visibility 0s linear 0.4s;
      }
      nav.menu-open .nav-links {
        transform: translateY(0); visibility: visible; pointer-events: auto;
        clip-path: inset(0 0 0 0);
        transition: transform 0.4s cubic-bezier(0.33, 0, 0.15, 1),
                    clip-path 0.4s cubic-bezier(0.33, 0, 0.15, 1),
                    visibility 0s;
      }
      .nav-links a:not(.btn) {
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 1.05rem;
      }
      /* The underline marker is a desktop affordance; on the stacked panel the
         accent colour alone marks the current page. */
      .nav-links a.nav-current::after { content: none; }
      /* Language picker sits inline in the panel (it keeps its IDs and JS
         wiring — only its position and menu anchoring change). */
      .lang { padding: 0.9rem 0 0.2rem; }
      .lang-menu { right: auto; left: 0; }
      .nav-links .btn { margin-top: 0.9rem; justify-content: center; text-align: center; }
      /* Backdrop dims the page behind the open panel; tapping it closes. Kept
         displayed so its dim can fade with the panel rather than snapping. */
      .nav-backdrop {
        display: block; position: fixed; inset: var(--nav-height) 0 0;
        background: rgba(20,40,90,0.28); z-index: -1;
        opacity: 0; visibility: hidden;
        transition: opacity 0.42s var(--ease-out), visibility 0s linear 0.42s;
      }
      nav.menu-open .nav-backdrop {
        opacity: 1; visibility: visible;
        transition: opacity 0.42s var(--ease-out), visibility 0s;
      }
      .container { padding: 0 1.25rem; }
      .nav-inner { padding: 0 1.25rem; }
      /* Stacked hero (h1 + sub + chat) is taller than the viewport on narrow screens —
         drop the 100vh floor so nothing gets clipped. */
      .hero { min-height: 0; padding: calc(var(--nav-height) + 2.5rem) 0 4rem; }

      /* Reduced motion: keep the menu instant, but never gate it on a
         transition finishing — visibility still has to flip both ways. */
      @media (prefers-reduced-motion: reduce) {
        .nav-links, nav.menu-open .nav-links,
        .nav-backdrop, nav.menu-open .nav-backdrop,
        .nav-burger, .nav-burger .icon-open, .nav-burger .icon-close {
          transition: none; transform: none;
        }
      }
    }
    /* Reveal system. Hidden states only apply when JS is running (html.js,
       set by site.js) so content is never gated on an animation trigger.
       [data-stagger] reveals its direct children with a per-child delay. */
    @media (prefers-reduced-motion: no-preference) {
      html.js .animate-in { opacity:0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
      html.js .animate-in.visible { opacity:1; transform:none; }
      html.js [data-stagger] > * { opacity:0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
      html.js [data-stagger].visible > * { opacity:1; transform:none; }
      html.js [data-stagger].visible > *:nth-child(2) { transition-delay: 0.08s; }
      html.js [data-stagger].visible > *:nth-child(3) { transition-delay: 0.16s; }
      html.js [data-stagger].visible > *:nth-child(4) { transition-delay: 0.24s; }
      html.js [data-stagger].visible > *:nth-child(5) { transition-delay: 0.32s; }
      html.js [data-stagger].visible > *:nth-child(6) { transition-delay: 0.40s; }
      html.js [data-stagger].visible > *:nth-child(7) { transition-delay: 0.48s; }
      html.js [data-stagger].visible > *:nth-child(8) { transition-delay: 0.56s; }
    }

/* Static chat bubbles (examples page): rendered without the entry animation. */
.msg.static { opacity: 1; transform: none; animation: none; }

/* --- LANDING: explainer sections for first-time visitors --------------------
   Four sections between the hero and the "same questions" strip: what it is,
   how it works (3 steps), what you get, and an objection-handler. Each has its
   own composition so they don't read as a stack of identical card grids. */

/* "What is it": a centred explainer — one clear sentence with generous
   whitespace. Centred (not full-bleed left) so a plain text block reads calm
   and considered rather than slammed against the left edge. */
.explain { padding: 7rem 0 5.5rem; }
.explain-lead { max-width: 52rem; margin: 0 auto; text-align: center; }
.explain-kicker {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.1rem;
}
.explain h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.32; letter-spacing: -0.02em;
  text-wrap: balance;
}
.explain h2 .accent { color: var(--accent); }
.explain-sub { margin: 1.4rem auto 0; font-size: 1.02rem; font-weight: 300; color: color-mix(in srgb, var(--text) 70%, var(--muted)); line-height: 1.7; max-width: 40rem; }

/* "How it works": three steps as a connected row with a baseline rule. */
.how3 { padding: 3rem 0 6rem; }
.how3-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem,2.6vw,2rem); letter-spacing: -0.03em; margin-bottom: 3rem; text-align: center; }
.how3-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; position: relative; max-width: 1000px; margin: 0 auto; }
.how3-steps::before { content: ""; position: absolute; left: 21px; right: 21px; top: 21px; height: 1px; background: var(--border); }
.how3-steps li { position: relative; }
.how3-n {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border); color: var(--accent);
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 1.2rem;
}
.how3-steps h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; margin-bottom: 0.45rem; }
.how3-steps p { font-size: 0.92rem; font-weight: 300; color: color-mix(in srgb, var(--text) 72%, var(--muted)); line-height: 1.65; max-width: 32ch; }
@media (max-width: 760px) {
  .how3-steps { grid-template-columns: 1fr; gap: 2rem; }
  .how3-steps::before { display: none; }
}

/* "What you get": icon + text rows, tinted band to set it apart. */
.benefits { padding: 6rem 0; background: linear-gradient(180deg, #f5f8fe 0%, #ffffff 78%); }
.benefits-head { max-width: 42rem; margin: 0 auto 3.5rem; text-align: center; }
.benefits-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem,2.8vw,2.2rem); letter-spacing: -0.03em; }
.benefits-head p { margin-top: 0.9rem; font-size: 1rem; font-weight: 300; color: color-mix(in srgb, var(--text) 70%, var(--muted)); line-height: 1.65; }
.benefits-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.5rem 3rem; max-width: 1100px; margin: 0 auto; }
.benefit { display: flex; gap: 1rem; align-items: flex-start; }
.benefit svg { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.benefit h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.benefit p { font-size: 0.92rem; font-weight: 300; color: color-mix(in srgb, var(--text) 72%, var(--muted)); line-height: 1.65; max-width: 38ch; }

/* "Objection": a quiet, quote-led answer to the sceptic. Centred. */
.objection { padding: 6rem 0 7rem; }
.objection-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.objection-q { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem,2.6vw,2rem); letter-spacing: -0.03em; color: var(--text); margin-bottom: 1.2rem; }
.objection-a { font-size: clamp(1.02rem,1.5vw,1.18rem); font-weight: 300; color: color-mix(in srgb, var(--text) 78%, var(--muted)); line-height: 1.7; }
.objection-a b { color: var(--text); font-weight: 600; }

/* --- LANDING: value trio (top-rule columns) + explore index rows --- */
.value { padding: 1rem 0 6rem; }
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.5rem; }
.value .v { border-top: 1px solid var(--border); padding-top: 1.3rem; }
.value .v h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.value .v p { font-size: 0.9rem; font-weight: 300; color: color-mix(in srgb, var(--text) 72%, var(--muted)); line-height: 1.65; max-width: 38ch; }
.explore { padding: 0 0 5rem; }
.explore-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem,3vw,2.1rem); letter-spacing: -0.03em; margin-bottom: 1.6rem; }
.explore-index { display: block; }
.explore-row {
  position: relative; display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr) auto;
  gap: 1rem 2.5rem; align-items: baseline; padding: 1.5rem 0.9rem;
  border-top: 1px solid var(--border); text-decoration: none; color: var(--text);
}
.explore-row:last-child { border-bottom: 1px solid var(--border); }
.explore-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--surface), transparent 70%);
  opacity: 0; transition: opacity 0.35s var(--ease-out);
}
.explore-row:hover::before { opacity: 1; }
.explore-row h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem,1.7vw,1.35rem); letter-spacing: -0.025em; transition: color 0.25s var(--ease-out); }
.explore-row:hover h3 { color: var(--accent); }
.explore-row p { font-size: 0.9rem; font-weight: 300; color: color-mix(in srgb, var(--text) 70%, var(--muted)); line-height: 1.6; }
.explore-arrow { width: 18px; height: 18px; align-self: center; color: var(--muted); opacity: 0; transform: translateX(-8px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.explore-row:hover .explore-arrow { opacity: 1; transform: none; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .explore-arrow { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .explore-row { grid-template-columns: 1fr auto; }
  .explore-row p { grid-column: 1 / -1; }
}

/* --- FAQ: ruled accordion rows, native details/summary. --- */
.faq { padding: 0 0 7rem; }
.faq-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,3.6vw,2.7rem); letter-spacing: -0.035em; margin-bottom: 2rem; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  list-style: none; cursor: pointer; padding: 1.35rem 0.4rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em;
  transition: color 0.25s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .faq-x { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq summary .faq-x::before, .faq summary .faq-x::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; border-radius: 2px;
  transition: transform 0.35s var(--ease-out);
}
.faq summary .faq-x::before { width: 16px; height: 2px; }
.faq summary .faq-x::after { width: 2px; height: 16px; }
.faq details[open] summary .faq-x::after { transform: rotate(90deg); }
.faq .faq-a { padding: 0 0.4rem 1.5rem; font-size: 0.98rem; color: color-mix(in srgb, var(--text) 75%, var(--muted)); line-height: 1.7; max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq-a { animation: faq-open 0.45s var(--ease-out); }
}
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

/* Primary button micro-motion: slight lift + deeper shadow. */
.btn-primary { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent); }

/* --- DECOR: soft blue glows + wave dividers ---------------------------------
   The visual layer over the white canvas: large soft accent-blue radials
   behind key panels and wave transitions into tinted section bands. */
.hero { position: relative; }
/* Full-bleed scene light: white on the left flowing into a periwinkle wash on
   the right (where the glass panel sits), plus two soft accent glows and a
   pair of diagonal light beams masked to the panel's quadrant. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(234,241,252,0) 40%, rgba(203,222,250,0.55) 78%, rgba(184,209,247,0.8) 100%),
    radial-gradient(720px 540px at 76% 40%, rgba(88,140,255,0.26), transparent 68%),
    radial-gradient(440px 340px at 6% 92%, rgba(47,111,228,0.08), transparent 62%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 42%, rgba(255,255,255,0.55) 46%, transparent 51%,
    transparent 57%, rgba(255,255,255,0.4) 61%, transparent 67%);
  -webkit-mask-image: radial-gradient(75% 95% at 72% 28%, #000 25%, transparent 78%);
  mask-image: radial-gradient(75% 95% at 72% 28%, #000 25%, transparent 78%);
}
.hero > .container { position: relative; }

.wave { display: block; width: 100%; height: clamp(42px, 7vw, 96px); color: #edf3fd; }
.wave svg { display: block; width: 100%; height: 100%; }
.wave.flip svg { transform: scaleY(-1); }

/* Tinted bands the waves lead into. */
.contrast { background: linear-gradient(180deg, #edf3fd 0%, #ffffff 72%); }
.cta { background: #edf3fd; }
footer { background: #edf3fd; }
footer .footer-inner::before { background: linear-gradient(90deg, transparent, rgba(47,111,228,0.25) 20%, rgba(47,111,228,0.25) 80%, transparent); }

/* Section glow helper: soft accent radial behind a centred child. */
.glow { position: relative; }
.glow::before {
  content: ""; position: absolute; inset: -40px -10% ; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 70% at 50% 40%, rgba(47,111,228,0.09), transparent 70%);
}

/* Scene trims for small screens: the 3D stage doesn't read in a narrow stack,
   so drop it and the far decor; keep the panel flat with a soft glow. */
@media (max-width: 640px) {
  .scene-bg { inset: -8% -6%; }
  .blob.b3, .orb.o2, .scene-rays, .scene-stage { display: none; }
  .orb.o1 { width: 60px; height: 60px; right: -4%; top: 52%; }
  .chat { transform: none; }
  .chat-reflect { left: 8%; right: 8%; top: auto; bottom: -30px; height: 80px; }
  .chat-chips { justify-content: center; }
  .hero-proof { gap: 0.9rem 0; flex-direction: column; margin-top: 2.25rem; }
  .proof-item + .proof-item { border-left: none; padding-left: 0; }
}
/* Examples-page bubbles have no meta line; keep symmetric padding. Keyed on the
   panel, NOT on .static — dialog playback removes .static from each bubble as it
   appears, so a .static-keyed padding changed the bubble's height mid-playback
   and resized the panel under the reader (the layout shift this page had). */
.ex-chat .msg { padding: 0.7rem 0.95rem; }

/* ===========================================================================
   SUB-PAGE HEROES (features / examples / pricing)
   Shared grammar so the three subpages read as one family with the landing
   hero: same periwinkle gradient wash, badge pill, wave divider and violet
   accent orb, each with its own thematic glass scene on the right. The scene
   content differs per page; the frame is shared here.
   ======================================================================== */
.subhero { position: relative; padding: calc(var(--nav-height) + 4rem) 0 2.5rem; overflow: hidden; }
.subhero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(234,241,252,0) 42%, rgba(203,222,250,0.5) 80%, rgba(184,209,247,0.72) 100%),
    radial-gradient(680px 500px at 78% 42%, rgba(88,140,255,0.22), transparent 68%),
    radial-gradient(420px 320px at 4% 96%, rgba(47,111,228,0.07), transparent 62%);
}
.subhero > .container { position: relative; }
.subhero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; align-items: center; }
.subhero-grid > div:first-child { position: relative; z-index: 2; }
.subhero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1.06; letter-spacing: -0.035em;
  margin-bottom: 1.3rem; text-wrap: balance;
}
html[lang="de"] .subhero h1 { font-size: clamp(2.1rem, 4vw, 3.3rem); }
.subhero .lede { font-size: clamp(1rem,1.4vw,1.14rem); font-weight: 400; color: color-mix(in srgb, var(--text) 72%, var(--muted)); line-height: 1.7; max-width: 32rem; }
.subhero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* Thematic glass scene shared frame: ambient blobs + orb behind a frosted
   composition, mirroring .hero-scene. Each page fills .subscene with its own
   glass content. */
.subscene { position: relative; min-height: 340px; }
.subscene-bg { position: absolute; inset: -16% -12%; pointer-events: none; }
.subscene .orb-v {
  position: absolute; width: 78px; height: 78px; right: -8%; top: 52%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #cabdff, #8273ef 58%, #5040ce);
  box-shadow: 0 18px 38px -16px rgba(90,70,220,0.5);
}
.subscene .orb-w {
  position: absolute; width: 30px; height: 30px; left: -4%; top: 12%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff, #d7e3fa 70%, #b9cdf2);
  box-shadow: 0 10px 22px -10px rgba(90,120,200,0.4); opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .subscene .orb-v { animation: scene-float 10s ease-in-out infinite; }
  html.js .subscene .orb-w { animation: scene-float 12s ease-in-out 1.2s infinite; }
}

/* Reused card material for the glass scenes: frosted tile with soft edge. */
.glass-tile {
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.8); border-radius: 16px;
  box-shadow: 0 26px 56px -30px rgba(20,40,90,0.32), 0 3px 12px -6px rgba(20,40,90,0.1);
}

/* Load choreography for the subheroes, matching the landing hero. */
@media (prefers-reduced-motion: no-preference) {
  html.js .subhero .hero-badge { opacity: 0; transform: translateY(12px); animation: hero-rise 0.7s var(--ease-out) forwards; }
  html.js .subhero h1 { opacity: 0; transform: translateY(18px); animation: hero-rise 0.85s var(--ease-out) 0.1s forwards; }
  html.js .subhero .lede, html.js .subhero .subhero-actions { opacity: 0; transform: translateY(18px); animation: hero-rise 0.8s var(--ease-out) forwards; }
  html.js .subhero .lede { animation-delay: 0.24s; }
  html.js .subhero .subhero-actions { animation-delay: 0.36s; }
  html.js .subscene { opacity: 0; transform: translateY(24px) scale(0.98); animation: hero-rise 1s var(--ease-out) 0.22s forwards; }
}

@media (max-width: 900px) {
  .subhero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .subscene { min-height: 280px; }
}
@media (max-width: 640px) {
  .subhero { padding: calc(var(--nav-height) + 2.5rem) 0 1.5rem; }
  .subscene { display: none; }
}