*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --purple: #7030A0;
    --purple-soft: rgba(112,48,160,0.75);
    --purple-glow: rgba(112,48,160,0.12);
    --purple-glow-strong: rgba(112,48,160,0.22);
    --gray: #7F7F7F;
    --gray-dark: #3D3D3D;
    --white: #FFFFFF;
    --off-white: #F8F5FC;
    --border: rgba(112,48,160,0.10);
    --font: 'Spartan', sans-serif;
    --nav-h: 62px;
    --avatar-bar-h: 64px;                /* chat modal avatar bar — drives clip-path animation geometry */
    --shadow-sm: 0 1px 4px rgba(112,48,160,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --radius: 8px;
    --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  }
  html { scroll-behavior: smooth; }
  body { font-family: var(--font); background: var(--white); color: var(--gray); font-size: 14px; line-height: 1.65; overflow-x: hidden; }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    z-index: 100; padding: 0 6vw;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--nav-h);
    transition: box-shadow var(--transition);
  }
  .nav-logo { display: flex; align-items: center; overflow: hidden; height: var(--nav-h); }
  .nav-logo img { height: 28px; width: auto; display: block; transition: opacity var(--transition); }
  .nav-logo:hover img { opacity: 0.8; }
  .nav-links { display: flex; gap: 32px; align-items: center; }
  .nav-links a { color: var(--gray); text-decoration: none; font-size: 12px; font-weight: 400; letter-spacing: 0.2px; transition: color var(--transition); }
  .nav-links a:hover { color: var(--purple); }
  .nav-home { display: block; }
  .nav-cta {
    background: var(--purple); color: #fff !important;
    padding: 8px 20px; border-radius: var(--radius);
    font-weight: 700 !important; font-size: 12px !important;
    box-shadow: 0 2px 8px rgba(112,48,160,0.28);
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition) !important;
  }
  .nav-cta:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(112,48,160,0.38); }

  /* ── BUTTONS ── */
  .btn-white {
    background: #fff; color: var(--purple); border: none;
    padding: 12px 26px; border-radius: var(--radius);
    font-family: var(--font); font-size: 13px; font-weight: 700;
    cursor: pointer; text-decoration: none; display: inline-block;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    transition: transform var(--transition), box-shadow var(--transition);
  }
  .btn-white:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,0.18); }

  /* ── HERO — vertical split ──
     Top half: tagline (text only)
     Bottom half: circuit-board animation (its own panel, fully separated
                  from the tagline so they never visually overlap) */
  .hero {
    margin-top: var(--nav-h);
    position: relative;
    display: flex;
    flex-direction: column;          /* stacked top / bottom */
    border-bottom: 1px solid var(--border);
    min-height: calc(100vh - var(--nav-h));
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 50% 40%, #FFFFFF 0%, #F8F5FC 60%, #EDE8F5 100%);
  }

  /* Top panel — tagline only. Collapsed to its content height
     (flex: 0 0 auto) and anchored to the bottom so the tagline sits as
     low as possible, right at the top of the centered animation band.
     Note: the chip itself is pinned to the vertical CENTER of the
     animation panel below, so some empty band above the chip is
     unavoidable without raising the chip's center point. */
  .hero-top {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px 6vw 0;
    position: relative;
    z-index: 1;
  }

  /* Bottom area — animation panel + tap-hint label stacked.
     The label gets its own dedicated row BELOW the animation so it
     never overlays the circuit board. */
  .hero-bottom {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 280px;
  }

  /* The animation panel itself — canvas + tap target only.
     position:relative so the absolutely-positioned canvas and tap
     target align to THIS panel rather than the whole hero. */
  .hero-animation {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
  }

  /* Label row — its own horizontal strip below the animation */
  .hero-hint {
    flex: 0 0 auto;
    padding: 8px 0 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  #hero-circuit {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  /* Tagline container inside the top panel */
  .hero-content {
    position: relative; z-index: 1;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .hero-text { text-align: center; }
  .hero-tagline {
    font-size: clamp(28px, 4.2vw, 56px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.2px;
    color: var(--gray-dark);
  }
  .hero-tagline .line {
    display: block;
    opacity: 0;
    transform: translateY(14px);
    animation: taglineIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }
  .hero-tagline .line:nth-child(1) { animation-delay: 0.25s; }
  .hero-tagline .line:nth-child(2) { animation-delay: 0.85s; }
  .hero-tagline .line:nth-child(3) { animation-delay: 1.45s; }
  .hero-tagline em { font-style: normal; color: var(--purple); }
  @keyframes taglineIn {
    from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }
  .hero-cta {
    margin-top: 28px;
    opacity: 0;
    animation: taglineIn 0.9s 2.0s cubic-bezier(0.2,0.8,0.2,1) forwards;
    display: inline-flex; gap: 14px; flex-wrap: wrap;
  }
  @media (max-width: 880px) {
    .hero-cta { justify-content: center; }
  }

  /* ── CHIP TAP TARGET ──
     Transparent square overlaid on the AI chip in the circuit animation.
     Position is set by JS (chipBox.style.* in the resize handler) so it
     stays aligned with the rendered chip as the viewport changes. */
  #chip-tap-target {
    position: absolute;
    z-index: 2;            /* sits above the canvas (z:0) but below content (z:1)... */
    cursor: pointer;
    border-radius: 6px;
    background: transparent;
    /* tap target is generous: ~140% of chip size so fingers can hit it easily */
    transition: transform 120ms ease, background-color 120ms ease;
  }
  #chip-tap-target:hover {
    transform: scale(1.06);
    /* Soft purple wash on hover so the user sees the chip itself "light
       up" — the overlay is invisible at rest, but on hover it gives a
       faint glow that reads as "this is the press point." */
    background: radial-gradient(circle at center,
                rgba(112,48,160,0.18) 0%,
                rgba(112,48,160,0.08) 45%,
                rgba(112,48,160,0) 70%);
  }
  #chip-tap-target:active { transform: scale(0.96); }
  #chip-tap-target:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 4px;
  }
  /* Pulse affordance — two rings emanating from the tap target, offset
     by half a cycle for a continuous-feeling expansion. Active until the
     user opens the chat for the first time (JS removes .show-affordance). */
  #chip-tap-target::before,
  #chip-tap-target::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(112,48,160,0.55);
    opacity: 0;
    pointer-events: none;
  }
  #chip-tap-target.show-affordance::before { animation: chipTapPulse 2.4s linear infinite; }
  #chip-tap-target.show-affordance::after  { animation: chipTapPulse 2.4s linear infinite -1.2s; }
  @keyframes chipTapPulse {
    0%   { opacity: 0.45; transform: scale(1.125); }
    100% { opacity: 0;    transform: scale(1.75);  }
  }

  /* "Tap to chat with Hal" label — sits below the chip, fades away
     after the user has opened the chat once (handled in JS) */
  #chip-tap-label {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--purple);
    letter-spacing: 0.4px;
    pointer-events: none;
    opacity: 0;
    animation: chipLabelIn 0.6s 2.4s ease forwards;
    white-space: nowrap;
    text-align: center;
  }
  #chip-tap-label.dismissed {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
  }
  @keyframes chipLabelIn {
    from { opacity: 0; }
    to   { opacity: 0.85; }
  }

  /* ── STICKY AI CHIP WIDGET ──
     A miniature version of the chip. While the user is in the hero, it
     sits invisible directly over the canvas chip. As the user scrolls
     past the hero, JS interpolates its position from "over the canvas
     chip" to "upper right of viewport" — so it visually appears to FLY
     out of the animation to the corner. Clicking it opens the same chat
     modal as the hero chip tap. JS controls top/left/width/height/opacity
     via inline styles, so the only CSS positioning here is `position:
     fixed` — everything else is driven by scroll. */
  #sticky-chip {
    position: fixed;
    /* These four are placeholder defaults; JS overrides them on every
       scroll/resize. Hidden via opacity:0 until JS positions correctly. */
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    z-index: 90;             /* below the nav (100) and chat modal (100) */
    border: 1px solid rgba(15, 15, 20, 0.6);
    /* Brushed-aluminum body — matches the canvas chip metallic look */
    background:
      linear-gradient(180deg, #C8C8CE 0%, #A8A8B0 35%, #7E7E86 70%, #5A5A62 100%);
    color: var(--purple);
    font-family: var(--font);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(20, 10, 30, 0.25);  /* engraved depth */
    cursor: pointer;
    box-shadow:
      0 6px 20px rgba(25, 20, 35, 0.35),
      0 2px 6px rgba(0,0,0,0.18),
      inset 0 -1px 0 rgba(15, 15, 20, 0.5);       /* bottom bezel shadow only — no white top edge */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;    /* untouchable until JS makes it interactable */
    /* No transition on top/left/width/height — those track scroll in
       real time. Only transition opacity for the initial fade-in and
       box-shadow for hover. */
    transition: opacity 0.25s ease, box-shadow 0.2s ease;
  }
  #sticky-chip.interactive {
    pointer-events: auto;
  }
  #sticky-chip:hover {
    box-shadow:
      0 10px 28px rgba(112,48,160,0.48),
      0 3px 10px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.3);
  }
  #sticky-chip:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
  /* "Chat with Hal" hover tooltip — appears to the LEFT of the docked
     button (since the button itself docks to the upper-right corner of
     the viewport, the tooltip needs to grow leftward so it doesn't
     overflow the page). Fades in after a short delay so it doesn't
     flash on accidental cursor brushes. */
  #sticky-chip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    background: var(--purple);
    color: #fff;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease 80ms, transform 180ms ease 80ms;
    box-shadow: 0 2px 8px rgba(25, 20, 35, 0.25);
  }
  #sticky-chip[data-tooltip]:hover::after,
  #sticky-chip[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  /* Pulsing ring affordance — only when chip is fully docked and user
     hasn't opened chat yet. Hidden during flight (which has its own
     visual energy) and after first chat-open. */
  #sticky-chip::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    border: 2px solid rgba(112,48,160,0.55);
    opacity: 0;
    animation: stickyPulse 2.2s ease-out infinite;
    animation-play-state: paused;
  }
  #sticky-chip.docked::before { animation-play-state: running; }
  #sticky-chip.dismissed-affordance::before { display: none; }
  @keyframes stickyPulse {
    0%   { opacity: 0.5; transform: scale(0.95); }
    70%  { opacity: 0;   transform: scale(1.25); }
    100% { opacity: 0;   transform: scale(1.25); }
  }

  /* ── CHAT MODAL OVERLAY ──
     Full-screen modal. Hidden by default; toggled by JS when the chip
     is clicked. Uses position:fixed so it covers the viewport regardless
     of scroll position. */
  .chat-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(40, 25, 60, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* Always display:flex so descendant transitions can render their
       starting state. Visibility + opacity + pointer-events drive
       the "hidden vs. open" state instead. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .chat-modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
  }
  /* ── Holographic unroll ──
     The chat window draws itself open like a futuristic digital interface,
     emanating from the avatar bar (the purple header):
     PHASE 1 (0 → 0.50s): A bright purple beam expands left-to-right across
                          the full width of the avatar bar. As it expands,
                          the avatar bar itself is revealed beneath it.
     PHASE 2 (0.50 → 1.15s): The chat panel unrolls downward from the
                             avatar bar, revealing the body and input.
     PHASE 3 (1.15 → 1.45s): The beam fades out, leaving the chat ready.

     Implementation: the container is always at full size — we use
     `clip-path: inset(...)` to mask what's visible. Clip-path keeps the
     interior content at its natural size (so the avatar bar appears at
     its TRUE height during phase 1, not a scaled version). */

  /* Approx avatar-bar height: 14px padding-top + 36px avatar + 14px padding-bottom = 64px. */

  .chat-modal-container {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: visible;                     /* beam glow extends outside */
    /* Closed state — clip to a thin vertical sliver at top-center,
       at the FULL avatar-bar height (64px). Phase 1 will expand this
       sliver horizontally so the entire avatar bar (with the HAL image)
       sweeps into view across the screen. Negative top/right offsets
       accommodate the floating close button. */
    clip-path: inset(-20px -20px calc(100% - var(--avatar-bar-h)) 50%);
    box-shadow: 0 0 0 rgba(112, 48, 160, 0);
    transition: box-shadow 0.4s ease 1.0s;
  }
  /* The horizontal beam — sits at the BOTTOM EDGE of the avatar bar
     (~62px from container top). Visually acts as the "underline" framing
     the bar during phase 1, and as the leading edge of the body unroll
     during phase 2. Pseudo-elements are subject to the parent's clip-path,
     so the beam is hidden alongside the bar when clipped. */
  .chat-modal-container::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--avatar-bar-h) - 2px);   /* 2px above the bottom edge of the avatar bar */
    height: 3px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(190, 140, 255, 0)   0%,
      rgba(190, 140, 255, 0.95) 12%,
      rgba(255, 255, 255, 1)   50%,
      rgba(190, 140, 255, 0.95) 88%,
      rgba(190, 140, 255, 0)   100%
    );
    box-shadow:
      0 0 14px rgba(190, 140, 255, 0.95),
      0 0 32px rgba(112, 48, 160, 0.7),
      0 0 70px rgba(112, 48, 160, 0.45);
    opacity: 0;
    z-index: 5;
    border-radius: 2px;
  }
  /* Soft trailing under-glow — appears under the avatar bar as the body
     unrolls below, giving the impression the beam is casting light down. */
  .chat-modal-container::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    top: calc(var(--avatar-bar-h) - 4px);   /* just under the avatar bar */
    height: 140px;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(190, 140, 255, 0.55) 0%,
      rgba(112, 48, 160, 0.20)  55%,
      rgba(112, 48, 160, 0)     100%
    );
    filter: blur(14px);
    opacity: 0;
    z-index: 4;
  }

  /* OPEN STATE — clip-path animates in two phases. CSS can interpolate
     clip-path with the same shape function (inset → inset), so we use
     keyframes to choreograph: phase 1 expands the inset horizontally
     while keeping bottom clipped at 100% - 64px (avatar-bar height);
     phase 2 expands the inset vertically (bottom: 100% - 64px → 0). */
  .chat-modal-overlay.open .chat-modal-container {
    animation: hologramUnroll 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    box-shadow:
      0 30px 80px rgba(40, 20, 70, 0.45),
      0 0 60px rgba(112, 48, 160, 0.25);
  }
  .chat-modal-overlay.open .chat-modal-container::before {
    animation: beamPulse 1.45s ease forwards;
  }
  .chat-modal-overlay.open .chat-modal-container::after {
    animation: beamTrail 1.45s ease forwards;
  }
  @keyframes hologramUnroll {
    /* Phase 1 (0% → 45%): horizontal expansion at FULL avatar-bar height.
       The clip's bottom stays at calc(100% - 64px) so only the avatar
       bar is uncovered; the left/right insets collapse from 50% to 0%,
       sweeping the bar (and the HAL avatar inside it) into view across
       the full width. Brief ignition pause at the start to let the
       beam appear before the bar starts drawing. */
    0%   { clip-path: inset(-20px -20px calc(100% - var(--avatar-bar-h)) 50%); }
    8%   { clip-path: inset(-20px -20px calc(100% - var(--avatar-bar-h)) 50%); }   /* beam ignites */
    45%  { clip-path: inset(-20px -20px calc(100% - var(--avatar-bar-h)) 0); }     /* avatar bar fully revealed */
    /* Hold briefly so the eye registers the avatar bar before unrolling */
    55%  { clip-path: inset(-20px -20px calc(100% - var(--avatar-bar-h)) 0); }
    /* Phase 2 (55% → 100%): vertical expansion — bottom inset collapses,
       unrolling the body of the chat downward from the avatar bar. */
    100% { clip-path: inset(-20px -20px -20px 0); }
  }
  @keyframes beamPulse {
    0%   { opacity: 0; }
    5%   { opacity: 1; }                       /* beam ignites */
    50%  { opacity: 1; }                       /* stays bright while avatar bar reveals */
    85%  { opacity: 0.7; }                     /* dimming as panel reaches full height */
    100% { opacity: 0; }                       /* gone once panel is settled */
  }
  @keyframes beamTrail {
    0%   { opacity: 0; }
    50%  { opacity: 0; }                       /* invisible until phase 2 starts */
    65%  { opacity: 0.85; }                    /* glows under the bar as body unrolls */
    90%  { opacity: 0.45; }
    100% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .chat-modal-container {
      clip-path: none;
      transition: opacity 0.2s ease;
    }
    .chat-modal-overlay.open .chat-modal-container {
      clip-path: none;
      animation: none;
    }
    .chat-modal-container::before,
    .chat-modal-container::after { display: none; }
  }
  /* Close button — sits above the chat header in the top-right */
  .chat-modal-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(112,48,160,0.25);
    color: var(--purple);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 120ms ease;
  }
  .chat-modal-close:hover { transform: scale(1.1); }

  /* Inside the modal, the chat panel uses its existing styles but
     drops the slide-in animation (modal does its own entrance) and
     fills the modal container */
  .chat-modal-overlay .hero-chat {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    width: 100%;
    min-height: 60vh;
    max-height: calc(100vh - 80px);
  }

  /* ── CHAT PANEL (rendered inside the modal) ── */
  .hero-chat {
    position: relative;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(112,48,160,0.18);
    border-radius: 14px;
    box-shadow:
      0 8px 30px rgba(112,48,160,0.10),
      0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px);
    animation: taglineIn 0.9s 1.6s cubic-bezier(0.2,0.8,0.2,1) forwards;
    min-height: 480px;
    display: flex;
    flex-direction: column;
  }
  .hero-chat-header {
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-soft) 100%);
    color: #fff;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
  }
  .hero-avatar {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #000;                       /* black backdrop sells the HAL "lens" feel */
    border: 1px solid rgba(255,255,255,0.45);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    /* No overflow:hidden — the green status dot sits at -1px/-1px and
       needs to render outside the circle. The image itself uses
       border-radius to self-clip into a circle. */
  }
  /* Eye breathing — a soft red halo that pulses behind the avatar at
     idle. The HAL-9000 reference is intentional: the eye is "warm,"
     not staring. When Hal is typing (.hero-chat-header has class
     'hal-thinking'), the breath gets faster and brighter so the
     "thinking" state is felt before it's read. */
  .hero-avatar::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
                rgba(220, 30, 30, 0.45) 0%,
                rgba(220, 30, 30, 0.18) 45%,
                rgba(220, 30, 30, 0) 70%);
    pointer-events: none;
    z-index: 0;
    animation: halEyeBreath 3.6s ease-in-out infinite;
  }
  .hero-avatar > * { position: relative; z-index: 1; }
  .hero-chat-header.hal-thinking .hero-avatar::before {
    animation: halEyeThink 1.1s ease-in-out infinite;
  }
  @keyframes halEyeBreath {
    0%, 100% { opacity: 0.55; transform: scale(0.92); }
    50%      { opacity: 1.0;  transform: scale(1.08); }
  }
  @keyframes halEyeThink {
    0%, 100% { opacity: 0.7; transform: scale(0.96); }
    50%      { opacity: 1.0; transform: scale(1.12); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-avatar::before { animation: none; opacity: 0.7; }
    .hero-chat-header.hal-thinking .hero-avatar::before { animation: none; opacity: 1; }
  }
  .hero-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
  }
  .hero-avatar-initial {
    font-weight: 700; font-size: 14px; color: #fff;
    letter-spacing: 0.4px;
  }
  .hero-chat-header .dot {
    position: absolute;
    bottom: -1px; right: -1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #4ade80;
    border: 2px solid var(--purple);
    box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
    animation: chatPulse 2s infinite;
  }
  @keyframes chatPulse {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  }
  /* Suggested-question chips */
  .chat-suggestions {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 4px;
    align-self: flex-start;
    max-width: 100%;
  }
  .chat-suggestion {
    border: 1px solid rgba(112,48,160,0.22);
    background: rgba(255,255,255,0.7);
    color: var(--gray-dark);
    border-radius: 999px;
    padding: 7px 13px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    line-height: 1.3;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
  }
  .chat-suggestion:hover { background: var(--purple-glow); border-color: var(--purple); transform: translateY(-1px); }
  /* ── Hal-activation reveal ────────────────────────────────────
     Staggered fade-in for suggestion chips after Hal finishes typing.
     .pre-reveal hides the chip; JS adds .reveal one-by-one with a
     small delay so they appear like ideas surfacing, not all at once.
  ──────────────────────────────────────────────────────────────── */
  .chat-suggestion.pre-reveal {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease, background var(--transition), border-color var(--transition);
  }
  .chat-suggestion.pre-reveal.reveal {
    opacity: 1;
    transform: translateY(0);
  }
  /* Blinking caret while Hal is "typing" his greeting. The caret is a
     thin purple bar attached as an inline ::after — it sits right after
     the last character, blinks at 1s intervals, and disappears the
     moment the .typing class is removed (i.e. when typing completes). */
  .chat-msg.typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: var(--purple);
    margin-left: 3px;
    vertical-align: -2px;
    animation: halCaret 1s steps(1) infinite;
  }
  @keyframes halCaret {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  .hero-chat-header-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
  .hero-chat-title { font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }
  .hero-chat-sub { font-size: 11px; font-weight: 300; opacity: 0.85; }
  .hero-chat-body {
    flex: 1;
    position: relative;
    min-height: 380px;
    background: #FFFFFF;
  }
  /* Message scroll area */
  .chat-messages {
    position: absolute; inset: 0;
    padding: 18px 18px 14px;
    display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto;
    scroll-behavior: smooth;
  }
  .chat-msg {
    max-width: 86%;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.55;
    border-radius: 14px;
    opacity: 0;
    transform: translateY(6px);
    animation: msgIn 0.35s ease forwards;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .chat-msg a { color: inherit; text-decoration: underline; font-weight: 700; }
  .chat-msg.bot {
    background: var(--off-white);
    color: var(--gray-dark);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
  }
  .chat-msg.user {
    background: var(--purple);
    color: #fff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
  }
  .chat-msg.error { background: #fdecec; color: #8a2424; }
  @keyframes msgIn {
    to { opacity: 1; transform: translateY(0); }
  }
  .chat-typing {
    align-self: flex-start;
    background: var(--off-white);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding: 10px 14px;
    display: inline-flex; gap: 4px;
  }
  .chat-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--purple);
    opacity: 0.6;
    animation: typingDot 1.2s infinite ease-in-out;
  }
  .chat-typing span:nth-child(2) { animation-delay: 0.15s; }
  .chat-typing span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes typingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1; }
  }
  .hero-chat-input {
    padding: 12px 14px;
    border-top: 1px solid rgba(112,48,160,0.10);
    display: flex; gap: 8px; align-items: center;
    background: #fff;
    flex-shrink: 0;
  }
  .hero-chat-input input {
    flex: 1;
    border: 1px solid rgba(112,48,160,0.18);
    background: #fff;
    border-radius: 10px;
    padding: 9px 12px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--gray-dark);
    outline: none;
    transition: border-color var(--transition);
  }
  .hero-chat-input input:focus { border-color: var(--purple); }
  .hero-chat-input button {
    background: var(--purple); color: #fff;
    border: none; border-radius: 10px;
    padding: 9px 14px;
    font-family: var(--font); font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: opacity var(--transition);
  }
  .hero-chat-input button:hover { opacity: 0.9; }
  @media (max-width: 880px) {
    .hero-chat { min-height: 420px; }
  }

  /* ── SECTIONS ── */
  .section-wrap {
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .section-wrap::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(112,48,160,0) 20%,
      rgba(112,48,160,0.55) 50%,
      rgba(112,48,160,0) 80%,
      transparent 100%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position: -50% 0;
    animation: sectionShimmer 7s linear infinite;
    pointer-events: none;
    opacity: 0.7;
  }
  @keyframes sectionShimmer {
    0%   { background-position: -50% 0; }
    100% { background-position: 150% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .section-wrap::after { animation: none; opacity: 0; }
  }
  .section-header {
    display: flex; align-items: center; gap: 18px;
    padding: 32px 6vw; border-bottom: 1px solid var(--border);
  }
  .section-header.light { background: var(--white); }
  .section-header-text { display: flex; flex-direction: column; gap: 3px; }
  .section-kicker { font-size: clamp(28px, 4.2vw, 56px); font-weight: 700; line-height: 1.12; letter-spacing: -1.2px; color: var(--purple); opacity: 1; }

  /* ── CARDS ── */
  .cards-row { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--white); }
  .card {
    padding: 36px 28px; border-right: 1px solid var(--border);
    transition: background var(--transition), box-shadow var(--transition);
    position: relative; overflow: hidden;
  }
  .card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, var(--purple), var(--purple-soft));
    opacity: 0; transition: opacity var(--transition);
  }
  .card:hover { background: #FFFFFF; }
  .card:hover::after { opacity: 1; }
  .card:last-child { border-right: none; }
  .card-num {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    color: var(--purple); opacity: 0.5;
  }
  .card-heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
  }
  .card-heading .card-num { margin-bottom: 0; }
  .card-heading .card-title { margin-bottom: 0; }
  .card-title { font-size: 14px; font-weight: 700; color: var(--gray-dark); margin-bottom: 10px; letter-spacing: -0.2px; }
  .card-body { font-size: 13px; font-weight: 300; line-height: 1.75; }

  /* ── CTA BAND ── */
  .cta-band {
    padding: 56px 6vw;
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; flex-wrap: wrap;
    background: linear-gradient(135deg, #6026A0 0%, #7030A0 50%, #8A44B8 100%);
    position: relative; overflow: hidden;
  }
  .cta-band::before {
    content: ''; position: absolute; top: -60px; left: -60px;
    width: 280px; height: 280px; border-radius: 50%;
    background: rgba(255,255,255,0.05); pointer-events: none;
  }
  .cta-band::after {
    content: ''; position: absolute; bottom: -80px; right: -40px;
    width: 320px; height: 320px; border-radius: 50%;
    background: rgba(255,255,255,0.04); pointer-events: none;
  }
  .cta-band-text { position: relative; z-index: 1; }
  .cta-band-text h2 { font-size: clamp(20px, 2.8vw, 32px); font-weight: 700; letter-spacing: -0.5px; color: #fff; line-height: 1.2; margin-bottom: 8px; }
  .cta-band-text p { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.78); }
  .cta-band .btn-white { position: relative; z-index: 1; }

  /* ── FOUNDER NOTE ── */
  .founder-note {
    padding: 72px 6vw;
    text-align: center;
    background: #FFFFFF;
    border-top: 1px solid var(--border);
  }
  .founder-note p {
    max-width: 640px;
    margin: 0 auto;
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.7;
    color: var(--gray);
  }
  .founder-note .signature {
    display: block;
    margin-top: 18px;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    color: var(--gray-dark);
    letter-spacing: 0.3px;
  }
  @media (max-width: 720px) {
    .founder-note { padding: 48px 5vw; }
    .founder-note p { font-size: 14px; }
  }

  /* ── FOOTER ── */
  footer {
    padding: 28px 6vw; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
  }
  .footer-logo { display: flex; align-items: center; height: 24px; overflow: hidden; }
  .footer-logo img { height: 22px; width: auto; display: block; opacity: 0.75; transition: opacity var(--transition); }
  .footer-logo:hover img { opacity: 1; }
  .footer-links { display: flex; gap: 20px; }
  .footer-links a { font-size: 11px; font-weight: 300; color: var(--gray); text-decoration: none; opacity: 0.6; transition: opacity var(--transition), color var(--transition); }
  .footer-links a:hover { opacity: 1; color: var(--purple); }
  footer p { font-size: 11px; font-weight: 300; opacity: 0.45; }
  .footer-right { display: flex; align-items: center; gap: 24px; margin-left: auto; }

  /* ── RESPONSIVE ── */
  @media (max-width: 640px) {
    /* Nav */
    .nav-home { display: none; }
    :root { --nav-h: 76px; }
    .nav-logo img { height: 56px; }
    .nav-cta { padding: 10px 22px; font-size: 13px !important; min-height: 40px; display: inline-flex; align-items: center; }
    /* Chat modal — takes more of the viewport on mobile */
    .chat-modal-overlay { padding: 12px; }
    .chat-modal-container { max-height: calc(100vh - 24px); }
    .chat-modal-overlay .hero-chat { min-height: 80vh; }
    .chat-modal-close { top: -10px; right: -10px; }
    #chip-tap-label { font-size: 12px; }
    /* Hero chat panel + input */
    .hero-chat { min-height: 320px; }
    .hero-chat-input input { padding: 12px 14px; font-size: 14px; }
    .hero-chat-input button { padding: 12px 18px; font-size: 14px; min-height: 44px; }
    .hero-chat-sub { font-size: 10px; }
    /* Mobile hero — animation takes ~80% of screen, tagline compresses up top */
    .hero { background: radial-gradient(ellipse at 50% 50%, #FFFFFF 0%, #FCFAFE 70%, #F6F2FB 100%); }
    /* Tightened mobile spacing: tagline sits directly above the animation
       with no extra dead space between them. */
    .hero-top { flex: 0 0 auto; padding: 8px 5vw 0; }
    .hero-tagline { font-size: 22px; line-height: 1.15; letter-spacing: -0.6px; }
    .hero-bottom { min-height: 0; flex: 1 1 auto; margin-top: -4px; }
    /* Shorter panel pulls the chip (pinned to the panel's vertical
       center) up toward the tagline, trimming the empty band above it
       so the tagline-to-chip gap roughly matches the chip-to-label gap. */
    .hero-animation { min-height: 52vh; }
    .hero-hint { padding: 4px 0 10px; }
    .cards-row { grid-template-columns: 1fr; }
    .card { border-right: none; border-bottom: 1px solid var(--border); padding: 28px 5vw; }
    .card:last-child { border-bottom: none; }
    .cta-band { flex-direction: column; align-items: stretch; gap: 22px; padding: 40px 5vw; }
    .cta-band .btn-white { width: 100%; text-align: center; padding: 14px 24px; font-size: 14px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
    .founder-note p { font-size: 16px; line-height: 1.65; }
    .footer-links { display: none; }
  }
  /* Reduced-motion fallback is handled in JS (renders a static frame
     instead of looping). Mobile shows the full animation. */