/* =========================================================================
   Fifgo Sales Engine — Coming Soon / Waitlist
   Design Tokens: verbatim from docs/N8N-Workflow/aufgaben/design/fifgo-farbtokens.css
   Rule: brand color (#4E39F9) is ONLY used on the CTA button fill + focus ring
   and as accent light (orbs, glows, active indicators).

   Layout model
   ------------
   .shell  → page column: sticky header / centred main / footer
   .hero   → 1 column on phones + tablets, 2 columns from 1024px
             (copy left, Cleo + her live work panel right)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Neutral scale (zinc-cool) */
  --neutral-0: #FFFFFF;
  --neutral-25: #FAFAFA;
  --neutral-50: #F5F5F6;
  --neutral-100: #EDEDEF;
  --neutral-200: #E1E1E4;
  --neutral-300: #C9C9CE;
  --neutral-400: #8A8A93;
  --neutral-600: #5F5F67;
  --neutral-700: #3F3F45;
  --neutral-800: #26262B;
  --neutral-900: #131317;

  /* Brand action (CTA ONLY on marketing pages) */
  --action: #4E39F9;
  --action-hover: #3E27E4;
  --action-pressed: #3119BC;
  --action-disabled: #C7C0FB;
  --action-on: #FFFFFF;
  --action-on-dark: #9B8CFC;

  /* Surfaces */
  --canvas: #FAFAFA;
  --surface: #FFFFFF;
  --surface-sunken: #F5F5F6;
  --border: #E1E1E4;
  --border-strong: #C9C9CE;
  --border-control: #8A8A93;
  --section-dark: #131317;

  /* Text */
  --text: #131317;
  --text-secondary: #5F5F67;
  --text-muted: #8A8A93;
  --text-on-dark: #F5F5F6;
  --text-on-dark-secondary: #A8A8B0;

  /* Status */
  --status-approved: #1F7A3D;
  --status-approved-bg: #EAF3DE;
  --status-blocked: #C42B2B;
  --status-blocked-bg: #FCEBEB;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(78, 57, 249, 0.35);
  --focus-ring-on-dark: 0 0 0 3px rgba(155, 140, 252, 0.55);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing tokens (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Page frame — one source of truth for width + gutters, so header,
     main and footer stay on the same vertical rails at every width. */
  --container: 1160px;
  --gutter: var(--space-6);
  --header-h: 68px;

  /* Cleo re-framing. Both the poster and the live 3D scene draw her
     off-centre inside their own square, with different offsets:
       poster  → x 12.5%–55.9%, y 19.3%–84.4%  (centre 34.2 / 51.8)
       scene   → x 19.1%–61.6%, y 12.5%–75.5%  (centre 40.3 / 44.0)
     Each layer is blown up by its own --zoom and then pinned by its own
     --anchor, so both end up optically centred and identically sized.
     Tune here if the scene is ever re-exported. */
  --cleo-zoom: 126%;
  --cleo-anchor-x: 34.2%;
  --cleo-anchor-y: 51.8%;
  --cleo-spline-zoom: 130%;
  --cleo-spline-anchor-x: 40.3%;
  --cleo-spline-anchor-y: 44%;

  /* Transitions */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Pointer-reactive vars (filled by JS) */
  --mouse-x: 0;
  --mouse-y: 0;
  --mx: 50%;
  --my: 30%;
  --cursor-x: 50vw;
  --cursor-y: 50vh;
}

/* Theme: dark primary (default), light fallback kept in sync for reuse */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--section-dark);
  --fg: var(--text-on-dark);
  --fg-secondary: var(--text-on-dark-secondary);
  --fg-muted: var(--neutral-400);
  --field-bg: rgba(255, 255, 255, 0.04);
  --field-border: rgba(255, 255, 255, 0.10);
  --field-border-hover: rgba(255, 255, 255, 0.20);
  --field-bg-focus: rgba(255, 255, 255, 0.07);
  --grid-stroke: rgba(255, 255, 255, 0.045);
  --shadow-depth: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  --footer-link: var(--text-on-dark-secondary);
  --footer-link-hover: var(--neutral-0);
  --surface-card: rgba(255, 255, 255, 0.03);
  --hairline: rgba(255, 255, 255, 0.08);
  --header-bg: rgba(19, 19, 23, 0.72);
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022));
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 28px 56px -28px rgba(0, 0, 0, 0.75);
  --error-bg: rgba(196, 43, 43, 0.14);
  --error-fg: #FF9B9B;
  --error-border: rgba(196, 43, 43, 0.35);
  --skeleton: var(--neutral-600);
  --skeleton-strong: var(--neutral-200);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--canvas);
  --fg: var(--text);
  --fg-secondary: var(--text-secondary);
  --fg-muted: var(--text-muted);
  --field-bg: var(--neutral-0);
  --field-border: var(--border);
  --field-border-hover: var(--border-strong);
  --field-bg-focus: var(--neutral-0);
  --grid-stroke: rgba(0, 0, 0, 0.06);
  --shadow-depth: 0 24px 48px -16px rgba(78, 57, 249, 0.12);
  --footer-link: var(--text-secondary);
  --footer-link-hover: var(--text);
  --surface-card: var(--neutral-0);
  --hairline: var(--border);
  --header-bg: rgba(250, 250, 250, 0.78);
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  --glass-border: var(--border);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 24px 48px -24px rgba(19, 19, 23, 0.18);
  --error-bg: var(--status-blocked-bg);
  --error-fg: var(--status-blocked);
  --error-border: rgba(196, 43, 43, 0.22);
  --skeleton: var(--neutral-300);
  --skeleton-strong: var(--neutral-600);
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  transition: background-color var(--t-base), color var(--t-base);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

p {
  margin: 0;
}

::selection {
  background: var(--action);
  color: var(--action-on);
}

/* -------------------------------------------------------------------------
   3. Layout shell
   ------------------------------------------------------------------------- */
.shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
}

/* Shared page rails: full-bleed background, content locked to --container.
   Used by the header, main and footer so nothing drifts out of alignment. */
.header,
.main,
.footer {
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
}

/* -------------------------------------------------------------------------
   4. Background layers
   ------------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

.bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-stroke) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-stroke) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(circle 800px at var(--cursor-x) var(--cursor-y), #000 10%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle 800px at var(--cursor-x) var(--cursor-y), #000 10%, transparent 100%);
  opacity: 0.8;
}

.bg__orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(78, 57, 249, 0.30) 0%, rgba(78, 57, 249, 0.09) 35%, transparent 70%);
  transform: translate(-50%, -50%) translate(calc(var(--mouse-x) * 0.04px), calc(var(--mouse-y) * 0.04px));
  filter: blur(40px);
  will-change: transform;
  animation: orb 18s ease-in-out infinite alternate;
}

.bg__orb--accent {
  position: absolute;
  top: 26%;
  left: 74%;
  width: 42vmin;
  height: 42vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(155, 140, 252, 0.18) 0%, transparent 60%);
  transform: translate(-50%, -50%) translate(calc(var(--mouse-x) * -0.06px), calc(var(--mouse-y) * -0.06px));
  filter: blur(48px);
  will-change: transform;
  animation: orb 22s ease-in-out infinite alternate-reverse;
}

.bg__orb--third {
  position: absolute;
  top: 72%;
  left: 18%;
  width: 32vmin;
  height: 32vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(236, 100, 220, 0.14) 0%, transparent 60%);
  transform: translate(-50%, -50%) translate(calc(var(--mouse-x) * 0.05px), calc(var(--mouse-y) * -0.05px));
  filter: blur(60px);
  will-change: transform;
  animation: orb 26s ease-in-out infinite alternate;
}

.bg__grain {
  position: absolute;
  inset: 0;
  background-image: url('assets/noise.svg');
  background-size: 240px 240px;
  background-repeat: repeat;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 600px at var(--cursor-x) var(--cursor-y), rgba(78, 57, 249, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: screen;
}

@keyframes orb {
  0%   { transform: translate(-50%, -50%) translate(calc(var(--mouse-x) * 0.04px), calc(var(--mouse-y) * 0.04px)) scale(1); }
  50%  { transform: translate(-50%, -50%) translate(calc(var(--mouse-x) * 0.04px), calc(var(--mouse-y) * 0.04px)) scale(1.08); }
  100% { transform: translate(-50%, -50%) translate(calc(var(--mouse-x) * 0.04px), calc(var(--mouse-y) * 0.04px)) scale(0.94); }
}

/* -------------------------------------------------------------------------
   5. Utility + a11y
   ------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--action);
  color: var(--action-on);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 14px;
  z-index: 100;
  transition: top var(--t-base);
}

.skip-link:focus {
  top: var(--space-4);
  outline: none;
  box-shadow: var(--focus-ring);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

:root[data-theme="dark"] :focus-visible {
  box-shadow: var(--focus-ring-on-dark);
}

/* -------------------------------------------------------------------------
   6. Header
   Sticky (not fixed): it occupies real space in the shell, so nothing
   underneath can slide beneath it — the old fixed header clipped the top
   of the hero on phones.
   ------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header-h);
  padding-block: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--header-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.brand__name {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.brand__secondary {
  font-weight: 400;
  color: var(--fg-muted);
  font-size: 13px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand:hover .brand__secondary {
  color: var(--fg-secondary);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.lang-switch__btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  transition: color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}

.lang-switch__btn[aria-pressed="true"] {
  background: var(--action);
  color: var(--action-on);
}

.lang-switch__btn:hover:not([aria-pressed="true"]) {
  color: var(--fg);
  background: var(--field-bg);
}

.lang-switch__btn:active:not([aria-pressed="true"]) {
  transform: scale(0.94);
}

/* -------------------------------------------------------------------------
   7. Main + hero grid
   ------------------------------------------------------------------------- */
.main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(var(--space-8), 5vh, var(--space-16));
}

.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  /* Auto block margins centre the hero but collapse to 0 when it is taller
     than the viewport, so the top never gets clipped on short screens. */
  margin-block: auto;
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  align-items: center;
  text-align: center;
}

/* Copy column ---------------------------------------------------------- */
.hero__content {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  /* Visual comes first on narrow screens, copy second. */
  order: 2;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action);
  box-shadow: 0 0 0 0 rgba(78, 57, 249, 0.5);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(78, 57, 249, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(78, 57, 249, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 57, 249, 0); }
}

.hero__headline {
  font-size: clamp(32px, 5.2vw, 52px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.028em;
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.hero__sub {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0 auto var(--space-8);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Visual column -------------------------------------------------------- */
.hero__visual {
  order: 1;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* -------------------------------------------------------------------------
   8. Cleo — free-standing 3D presence
   No card, no frame: the Spline character floats directly on the canvas.
   Depth comes from a soft violet aura behind her and a contact shadow below.
   ------------------------------------------------------------------------- */
.cleo {
  width: min(100%, 260px);
  /* Pulls the contact shadow close to the panel below without touching it. */
  margin-bottom: calc(var(--space-2) * -1);
  perspective: 1200px;
}

.cleo__avatar {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
}

/* Aura — soft violet light source behind the character */
.cleo__avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 104%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(78, 57, 249, 0.30) 0%,
    rgba(78, 57, 249, 0.12) 38%,
    rgba(78, 57, 249, 0) 68%
  );
  filter: blur(14px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  animation: cleo-aura 7s ease-in-out infinite;
}

/* Contact shadow — grounds the free-standing figure */
.cleo__avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 42%;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
  animation: cleo-contact 7s ease-in-out infinite;
}

.cleo__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  z-index: 1;
  overflow: hidden;
  /* The figure bobs; the aura + contact shadow on .cleo__avatar stay put. */
  animation: cleo-float 7s ease-in-out infinite;
}

/* Spline web-component — transparent, no chrome. Blown up past the portrait
   edges so the viewer's own hairline border is clipped away, then pinned so
   Cleo lands dead centre. pointer-events: none => the 3D scene ignores the
   cursor entirely and plays its idle loop stably. */
.cleo__spline {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cleo-spline-zoom);
  height: var(--cleo-spline-zoom);
  transform: translate(calc(var(--cleo-spline-anchor-x) * -1), calc(var(--cleo-spline-anchor-y) * -1));
  background: transparent;
  --spline-bg: transparent;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  opacity: 0;
  transition: opacity 700ms ease;
  z-index: 2;
}

/* Hide the Spline watermark/logo inside the component's shadow DOM.
   ::part works on newer viewer builds; app.js additionally removes #logo
   from the shadow root as a fallback for builds without the part. */
.cleo__spline::part(logo),
spline-viewer::part(logo) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cleo__portrait.is-ready .cleo__spline {
  opacity: 1;
}

/* Poster — a static render of the same scene, painted immediately.
   It occupies the exact same box as the viewer and cross-fades out once the
   3D scene has rendered its first frame, so there is never an empty hole. */
.cleo__poster {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cleo-zoom);
  height: var(--cleo-zoom);
  transform: translate(calc(var(--cleo-anchor-x) * -1), calc(var(--cleo-anchor-y) * -1));
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: opacity 500ms ease;
  pointer-events: none;
  z-index: 1;
}

.cleo__portrait.is-ready .cleo__poster {
  opacity: 0;
}

@keyframes cleo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes cleo-aura {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

/* Shadow tightens as the figure lifts — sells the float */
@keyframes cleo-contact {
  0%, 100% { opacity: 0.9; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: 0.6; transform: translateX(-50%) scaleX(0.86); }
}

/* -------------------------------------------------------------------------
   9. Agent panel — Cleo's live work loop
   RESEARCH → DISCOVER → ANALYZE → QUALIFY → DELIVER → RESEARCH
   One glass surface: who is working (head) · what it looks like (canvas) ·
   what it means (caption). A single data-stage attribute drives all three.
   ------------------------------------------------------------------------- */
.agent {
  width: 100%;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-2xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-highlight);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  text-align: left;
}

/* Head: identity on the left, phase rail on the right ------------------- */
.agent__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.agent__identity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
  color: var(--fg-muted);
}

.agent__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34D07A;
  flex-shrink: 0;
  animation: agent-online 2.4s ease-out infinite;
}

.agent__name {
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.agent__sep {
  opacity: 0.45;
}

.agent__state {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

@keyframes agent-online {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 208, 122, 0.5), 0 0 10px rgba(52, 208, 122, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(52, 208, 122, 0), 0 0 14px rgba(52, 208, 122, 0.8); }
}

.agent__track {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.agent__track-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--field-border-hover);
  transition:
    width 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 300ms ease,
    box-shadow 300ms ease;
}

.agent__track-dot.is-active {
  width: 18px;
  background: var(--action);
  box-shadow: 0 0 10px rgba(78, 57, 249, 0.6);
}

/* Canvas: the animated stage ------------------------------------------- */
.agent__canvas {
  --u: 1;
  position: relative;
  height: 96px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    var(--field-bg),
    linear-gradient(to right, var(--grid-stroke) 1px, transparent 1px) 0 0 / calc(18px * var(--u)) calc(18px * var(--u)),
    linear-gradient(to bottom, var(--grid-stroke) 1px, transparent 1px) 0 0 / calc(18px * var(--u)) calc(18px * var(--u));
}

/* A faint violet floor-glow tying the canvas to Cleo's aura */
.agent__canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 75% at 50% 50%, rgba(78, 57, 249, 0.14), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Default state — every work-loop element is hidden. */
.agent__canvas > * {
  position: absolute;
  opacity: 0;
  transition: opacity 280ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 1;
}

/* ===== RESEARCH — radar sweep with signals drifting inward ===== */
.agent__radar {
  top: 50%;
  left: 50%;
  width: calc(46px * var(--u));
  height: calc(46px * var(--u));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(155, 140, 252, 0.28);
  background: radial-gradient(circle, rgba(78, 57, 249, 0.22) 0%, rgba(78, 57, 249, 0) 64%);
  overflow: hidden;
}

/* Inner ring — gives the dish some depth */
.agent__radar::before {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  border: 1px solid rgba(155, 140, 252, 0.22);
}

/* The sweep itself */
.agent__radar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(78, 57, 249, 0.55), rgba(78, 57, 249, 0.06) 26%, transparent 34%);
}

.agent[data-stage="research"] .agent__radar {
  opacity: 1;
}

.agent[data-stage="research"] .agent__radar::after {
  animation: radar-sweep 2.6s linear infinite;
}

@keyframes radar-sweep {
  to { transform: rotate(360deg); }
}

.agent__particle {
  width: calc(5px * var(--u));
  height: calc(5px * var(--u));
  border-radius: 50%;
  background: var(--neutral-300);
  box-shadow: 0 0 8px rgba(155, 140, 252, 0.55);
  top: 50%;
  left: 50%;
  --px: calc((var(--p, 0) - 2.5) * 34px * var(--u));
  --py: 0px;
  transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py)));
  will-change: transform, opacity;
  z-index: 2;
}

.agent[data-stage="research"] .agent__particle {
  opacity: 1;
  animation: particle-drift 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.agent__particle:nth-child(1) { --p: 0; --py: calc(-17px * var(--u)); animation-delay: 0s; }
.agent__particle:nth-child(2) { --p: 1; --py: calc( 17px * var(--u)); animation-delay: 0.25s; }
.agent__particle:nth-child(3) { --p: 2; --py: calc(-11px * var(--u)); animation-delay: 0.5s; }
.agent__particle:nth-child(4) { --p: 3; --py: calc( 19px * var(--u)); animation-delay: 0.75s; }
.agent__particle:nth-child(5) { --p: 4; --py: calc(-20px * var(--u)); animation-delay: 1s; }
.agent__particle:nth-child(6) { --p: 5; --py: calc( 14px * var(--u)); animation-delay: 1.25s; }

@keyframes particle-drift {
  0%   { transform: translate(calc(-50% + var(--px) * 2), calc(-50% + var(--py) * 2)) scale(0.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
}

/* ===== DISCOVER — lead fragment card ===== */
.agent__card {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -44%) scale(0.95);
  width: calc(150px * var(--u));
  padding: calc(10px * var(--u)) calc(12px * var(--u));
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--field-border);
  border-radius: calc(8px * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(5px * var(--u));
}

.agent[data-stage="discover"] .agent__card,
.agent[data-stage="analyze"] .agent__card {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ANALYZE reuses the discovered card but slides it left to make room for
   the ICP score badge on the right. */
.agent[data-stage="analyze"] .agent__card {
  transform: translate(-50%, -50%) translateX(calc(-30px * var(--u)));
}

.agent__card-row {
  display: block;
  height: calc(5px * var(--u));
  width: 80%;
  border-radius: 2px;
  background: var(--skeleton);
}

.agent__card-row--name {
  background: var(--skeleton-strong);
  width: 58%;
  height: calc(6px * var(--u));
}

.agent__card-row--short { width: 48%; }

/* ===== ANALYZE — scan line + ICP score ===== */
.agent__scan {
  top: 0;
  left: 26%;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, var(--action) 50%, transparent 100%);
  box-shadow: 0 0 8px rgba(78, 57, 249, 0.6);
  z-index: 2;
}

.agent[data-stage="analyze"] .agent__scan {
  opacity: 1;
  animation: scan-line 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scan-line {
  0%   { left: 26%; }
  100% { left: 74%; }
}

.agent__score {
  top: 50%;
  right: 12%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: calc(4px * var(--u)) calc(8px * var(--u));
  font-family: var(--font-mono);
  font-size: calc(10px * var(--u));
  letter-spacing: 0.04em;
  background: var(--action);
  color: var(--action-on);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 18px -6px rgba(78, 57, 249, 0.8);
  z-index: 3;
}

.agent[data-stage="analyze"] .agent__score {
  opacity: 1;
  animation: score-pop 2.4s ease-out infinite;
}

.agent__score-label { font-weight: 500; opacity: 0.85; }
.agent__score-value { font-weight: 600; font-size: calc(11px * var(--u)); }

/* Lands early and then holds, so the score is actually readable rather than
   flashing once at the very end of the loop. */
@keyframes score-pop {
  0%, 30% { transform: translateY(-50%) scale(0.85); opacity: 0; }
  38%     { opacity: 1; }
  46%     { transform: translateY(-50%) scale(1.12); }
  56%,
  100%    { transform: translateY(-50%) scale(1); opacity: 1; }
}

/* ===== QUALIFY — 4 leads, 3 mute, 1 highlight ===== */
.agent__leads {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 58%;
  height: 68%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(6px * var(--u));
}

.agent[data-stage="qualify"] .agent__leads {
  opacity: 1;
}

.agent__lead {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--field-border);
  border-radius: calc(6px * var(--u));
  transition: opacity 400ms ease, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 400ms ease, background-color 400ms ease;
}

.agent[data-stage="qualify"] .agent__lead {
  opacity: 0.3;
  transform: scale(0.96);
}

.agent[data-stage="qualify"] .agent__lead--top {
  opacity: 1;
  transform: scale(1);
  background: rgba(78, 57, 249, 0.14);
  border-color: rgba(78, 57, 249, 0.5);
  box-shadow: 0 0 0 1px rgba(78, 57, 249, 0.22);
}

.agent[data-stage="qualify"] .agent__lead--top::after {
  content: "";
  position: absolute;
  top: calc(5px * var(--u));
  right: calc(5px * var(--u));
  width: calc(6px * var(--u));
  height: calc(6px * var(--u));
  border-radius: 50%;
  background: var(--action);
  box-shadow: 0 0 8px rgba(78, 57, 249, 0.6);
}

/* ===== DELIVER — outreach goes out, an answer comes back =====
   Deliberately shaped as a conversation so this phase can never be confused
   with the DISCOVER data card: left bubble = the message Cleo writes,
   right accent bubble = the reply it earns. */
.agent__bubble {
  top: 50%;
  left: 6%;
  transform: translateY(calc(-50% + 8px));
  width: 50%;
  padding: calc(9px * var(--u)) calc(11px * var(--u));
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--field-border);
  border-radius: calc(11px * var(--u)) calc(11px * var(--u)) calc(11px * var(--u)) 2px;
  display: flex;
  flex-direction: column;
  gap: calc(5px * var(--u));
  margin-top: calc(-14px * var(--u));
}

.agent[data-stage="deliver"] .agent__bubble {
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity 300ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.agent__bubble-row {
  display: block;
  height: calc(4px * var(--u));
  border-radius: 2px;
  background: var(--skeleton);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.agent__bubble-row--1 { width: 92%; }
.agent__bubble-row--2 { width: 74%; }
.agent__bubble-row--3 { width: 46%; }

.agent[data-stage="deliver"] .agent__bubble-row--1 { opacity: 1; transform: translateX(0); transition-delay: 120ms; }
.agent[data-stage="deliver"] .agent__bubble-row--2 { opacity: 1; transform: translateX(0); transition-delay: 300ms; }
.agent[data-stage="deliver"] .agent__bubble-row--3 { opacity: 1; transform: translateX(0); transition-delay: 480ms; }

.agent__reply {
  top: 50%;
  right: 6%;
  transform: translateY(calc(-50% + 10px));
  width: 34%;
  padding: calc(9px * var(--u)) calc(11px * var(--u));
  background: var(--action);
  border-radius: calc(11px * var(--u)) calc(11px * var(--u)) 2px calc(11px * var(--u));
  box-shadow: 0 10px 24px -10px rgba(78, 57, 249, 0.9);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(5px * var(--u));
  margin-top: calc(20px * var(--u));
}

.agent[data-stage="deliver"] .agent__reply {
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity 300ms ease 760ms, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 760ms;
}

.agent__reply-row {
  display: block;
  height: calc(4px * var(--u));
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
}

.agent__reply-row--1 { width: 84%; }
.agent__reply-row--2 { width: 56%; }

/* Caption: names the phase in words so the animation reads on its own.
   Fixed min-height => swapping phases never resizes the panel. */
.agent__caption {
  display: grid;
  gap: 5px;
  min-height: 46px;
  align-content: start;
  transition: opacity 240ms ease;
}

.agent__caption[data-fading="true"] {
  opacity: 0;
}

.agent__phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action-on-dark);
}

.agent__phase-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--action);
  box-shadow: 0 0 0 0 rgba(78, 57, 249, 0.5);
  animation: pulse 2.4s ease-out infinite;
}

.agent__activity {
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-secondary);
}

/* -------------------------------------------------------------------------
   10. Form
   ------------------------------------------------------------------------- */
.form {
  margin: 0;
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__field {
  position: relative;
  flex: 1;
  display: flex;
  min-width: 0;
}

.form__input {
  width: 100%;
  height: 52px;
  padding: 0 var(--space-4);
  font-size: 15px;
  background: var(--field-bg);
  color: var(--fg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}

.form__input::placeholder {
  color: var(--fg-muted);
}

.form__input:hover {
  border-color: var(--field-border-hover);
}

.form__input:focus {
  border-color: var(--action);
  background: var(--field-bg-focus);
  box-shadow: var(--focus-ring);
}

:root[data-theme="dark"] .form__input:focus {
  box-shadow: var(--focus-ring-on-dark);
}

.form__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 52px;
  padding: 0 var(--space-6);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  background: var(--action);
  color: var(--action-on);
  border-radius: var(--radius-lg);
  white-space: nowrap;
  transition: background-color var(--t-fast), box-shadow var(--t-base), transform var(--t-fast);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Animated shine sweep on the CTA on hover */
.form__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.form__submit:hover:not(:disabled) {
  background: var(--action-hover);
  box-shadow: 0 0 0 6px rgba(78, 57, 249, 0.14), 0 14px 28px -10px rgba(78, 57, 249, 0.55);
  transform: translateY(-1px);
}

.form__submit:hover:not(:disabled)::before {
  transform: translateX(120%);
}

.form__submit:active:not(:disabled) {
  background: var(--action-pressed);
  transform: translateY(0) scale(0.985);
  transition: transform 100ms ease-out;
}

.form__submit:focus-visible {
  background: var(--action-hover);
  box-shadow: var(--focus-ring);
}

:root[data-theme="dark"] .form__submit:focus-visible {
  box-shadow: var(--focus-ring-on-dark);
}

.form__submit:disabled {
  background: var(--action-disabled);
  cursor: not-allowed;
  color: var(--action-on);
}

.form__submit[aria-busy="true"] {
  cursor: wait;
}

.form__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: var(--action-on);
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Feedback slot — reserves its height up front so showing an error never
   pushes the footer around. */
.form__feedback {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-height: 56px;
  padding-top: var(--space-3);
}

.form__trust {
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-muted);
}

.form__error {
  padding: 9px 14px;
  font-size: 13px;
  line-height: 1.4;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-fg);
  border-radius: var(--radius-md);
  display: none;
  text-align: left;
}

.form__error[data-show="true"] {
  display: block;
  animation: slideIn 240ms ease-out;
}

.form__status:empty {
  display: none;
}

.form__status-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--glass-bg);
  border: 1px solid rgba(78, 57, 249, 0.28);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: left;
  box-shadow: var(--glass-shadow);
  animation: slideIn 300ms ease-out;
}

.form__status-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--action);
  color: var(--action-on);
  font-weight: 600;
  font-size: 13px;
  margin-top: 1px;
}

.form__status-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 4px;
}

.form__status-body {
  font-size: 14px;
  color: var(--fg-secondary);
  margin: 0;
  line-height: 1.5;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 2;
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  font-size: 13px;
  color: var(--fg-muted);
  border-top: 1px solid var(--hairline);
}

.footer__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.footer__link {
  color: var(--footer-link);
  transition: color var(--t-fast);
  position: relative;
  padding-block: 2px;
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--footer-link-hover);
}

/* -------------------------------------------------------------------------
   12. Entry animation (staggered)
   ------------------------------------------------------------------------- */
[data-fade] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}

[data-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-fade][data-fade-delay="1"] { transition-delay: 80ms; }
[data-fade][data-fade-delay="2"] { transition-delay: 160ms; }
[data-fade][data-fade-delay="3"] { transition-delay: 240ms; }
[data-fade][data-fade-delay="4"] { transition-delay: 320ms; }
[data-fade][data-fade-delay="5"] { transition-delay: 400ms; }

/* -------------------------------------------------------------------------
   13. Breakpoints
   ------------------------------------------------------------------------- */

/* --- Small phones ------------------------------------------------------ */
@media (max-width: 400px) {
  :root {
    --gutter: var(--space-4);
    --header-h: 60px;
  }

  .cleo {
    width: min(100%, 210px);
  }

  .agent {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .agent__canvas {
    height: 84px;
  }

  .badge {
    letter-spacing: 0.1em;
  }

  .brand__secondary {
    display: none;
  }
}

/* --- Phones ------------------------------------------------------------ */
@media (max-width: 639px) {
  :root {
    --gutter: var(--space-4);
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }
}

/* --- From 640px: e-mail + CTA sit on one line -------------------------- */
@media (min-width: 640px) {
  .form__row {
    flex-direction: row;
    align-items: stretch;
  }

  .cleo {
    width: min(100%, 300px);
  }

  .agent__canvas {
    --u: 1.2;
    height: 112px;
  }
}

/* --- Tablets: give the visual more presence ---------------------------- */
@media (min-width: 768px) {
  .hero__visual {
    max-width: 460px;
  }

  .agent__canvas {
    --u: 1.35;
    height: 128px;
  }
}

/* --- Desktop: two columns, copy left, Cleo right ----------------------- */
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
    gap: clamp(var(--space-10), 6vw, 88px);
    text-align: left;
  }

  .hero__content {
    order: 1;
    max-width: none;
    margin-inline: 0;
  }

  .hero__sub {
    margin-inline: 0;
  }

  /* Hugs the right rail so the panel lines up with the header switch and
     the footer links instead of floating short of the page edge. */
  .hero__visual {
    order: 2;
    max-width: 440px;
    margin-inline: auto 0;
  }

  .cleo {
    width: min(100%, 320px);
  }

  .agent {
    padding: var(--space-5);
    gap: var(--space-4);
  }

  .agent__canvas {
    --u: 1.45;
    height: 136px;
  }

  .agent__identity {
    font-size: 13.5px;
  }

  .agent__phase {
    font-size: 11px;
  }

  .agent__activity {
    font-size: 14px;
  }

  .agent__caption {
    min-height: 48px;
  }
}

/* --- Wide desktop ------------------------------------------------------ */
@media (min-width: 1280px) {
  .hero__visual {
    max-width: 470px;
  }

  .cleo {
    width: min(100%, 340px);
  }

  .agent__canvas {
    --u: 1.55;
    height: 148px;
  }
}

/* --- Short viewports: trim vertical mass so the whole hero stays on one
       screen on 13" laptops (1280×800, 1440×810 …) -------------------- */
@media (min-width: 1024px) and (max-height: 860px) {
  .cleo {
    width: min(100%, 250px);
  }

  .agent__canvas {
    --u: 1.3;
    height: 112px;
  }

  .agent__caption {
    min-height: 44px;
  }

  .hero__headline {
    font-size: clamp(30px, 3.5vw, 44px);
  }

  .hero__sub {
    margin-bottom: var(--space-6);
  }

  .main {
    padding-block: var(--space-8);
  }
}

/* -------------------------------------------------------------------------
   14. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-fade] {
    opacity: 1;
    transform: none;
  }

  /* Keep the static poster, drop the animated 3D scene entirely. */
  .cleo__portrait.is-ready .cleo__poster { opacity: 1; }
  .cleo__spline { display: none; }

  /* The work-loop canvas is pure motion — the caption still names the
     phase, so nothing is lost by hiding it. */
  .agent__canvas { display: none; }
}

/* -------------------------------------------------------------------------
   15. Print
   ------------------------------------------------------------------------- */
@media print {
  .bg,
  .form,
  .agent__canvas,
  .lang-switch {
    display: none;
  }
}