/* ==================================================================
   Tokens
================================================================== */
:root {
  --bg-0: #0b0c0e;
  --bg-1: #121417;
  --bg-2: #191c21;
  --bg-3: #21252c;
  --line: #262a31;
  --line-2: #343945;
  --text: #f2f3f5;
  --text-2: #b4b9c3;
  --muted: #838a96;
  --accent: #f2b544;
  --accent-2: #ffd27a;
  --accent-ink: #1a1200;
  --accent-dim: rgba(242, 181, 68, 0.14);
  --glow: rgba(242, 181, 68, 0.17);          /* site-wide backdrop glow, top centre */
  --glow-2: rgba(242, 181, 68, 0.05);        /* secondary glow, lower right */
  --puzzle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22320%22 viewBox=%220 0 320 320%22%3E%3Cg transform=%22translate(-80.0 -80.0)%22 stroke=%22rgba(255,255,255,0.055)%22 stroke-width=%221%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M 0.0 0.0 L 68.8 0.0 C 68.8 11.5 55.0 11.5 60.8 21.1 C 60.8 38.4 99.2 38.4 99.2 21.1 C 105.0 11.5 91.2 11.5 91.2 0.0 L 160.0 0.0 L 160.0 68.8 C 171.5 68.8 171.5 55.0 181.1 60.8 C 198.4 60.8 198.4 99.2 181.1 99.2 C 171.5 105.0 171.5 91.2 160.0 91.2 L 160.0 160.0 L 91.2 160.0 C 91.2 171.5 105.0 171.5 99.2 181.1 C 99.2 198.4 60.8 198.4 60.8 181.1 C 55.0 171.5 68.8 171.5 68.8 160.0 L 0.0 160.0 L 0.0 91.2 C -11.5 91.2 -11.5 105.0 -21.1 99.2 C -38.4 99.2 -38.4 60.8 -21.1 60.8 C -11.5 55.0 -11.5 68.8 0.0 68.8 L 0.0 0.0 Z%22 fill=%22%230b0c0e%22/%3E%3Cpath d=%22M 160.0 0.0 L 228.8 0.0 C 228.8 -11.5 215.0 -11.5 220.8 -21.1 C 220.8 -38.4 259.2 -38.4 259.2 -21.1 C 265.0 -11.5 251.2 -11.5 251.2 0.0 L 320.0 0.0 L 320.0 68.8 C 308.5 68.8 308.5 55.0 298.9 60.8 C 281.6 60.8 281.6 99.2 298.9 99.2 C 308.5 105.0 308.5 91.2 320.0 91.2 L 320.0 160.0 L 251.2 160.0 C 251.2 148.5 265.0 148.5 259.2 138.9 C 259.2 121.6 220.8 121.6 220.8 138.9 C 215.0 148.5 228.8 148.5 228.8 160.0 L 160.0 160.0 L 160.0 91.2 C 171.5 91.2 171.5 105.0 181.1 99.2 C 198.4 99.2 198.4 60.8 181.1 60.8 C 171.5 55.0 171.5 68.8 160.0 68.8 L 160.0 0.0 Z%22 fill=%22%230e1013%22/%3E%3Cpath d=%22M 320.0 0.0 L 388.8 0.0 C 388.8 11.5 375.0 11.5 380.8 21.1 C 380.8 38.4 419.2 38.4 419.2 21.1 C 425.0 11.5 411.2 11.5 411.2 0.0 L 480.0 0.0 L 480.0 68.8 C 491.5 68.8 491.5 55.0 501.1 60.8 C 518.4 60.8 518.4 99.2 501.1 99.2 C 491.5 105.0 491.5 91.2 480.0 91.2 L 480.0 160.0 L 411.2 160.0 C 411.2 171.5 425.0 171.5 419.2 181.1 C 419.2 198.4 380.8 198.4 380.8 181.1 C 375.0 171.5 388.8 171.5 388.8 160.0 L 320.0 160.0 L 320.0 91.2 C 308.5 91.2 308.5 105.0 298.9 99.2 C 281.6 99.2 281.6 60.8 298.9 60.8 C 308.5 55.0 308.5 68.8 320.0 68.8 L 320.0 0.0 Z%22 fill=%22%230b0c0e%22/%3E%3Cpath d=%22M 0.0 160.0 L 68.8 160.0 C 68.8 148.5 55.0 148.5 60.8 138.9 C 60.8 121.6 99.2 121.6 99.2 138.9 C 105.0 148.5 91.2 148.5 91.2 160.0 L 160.0 160.0 L 160.0 228.8 C 148.5 228.8 148.5 215.0 138.9 220.8 C 121.6 220.8 121.6 259.2 138.9 259.2 C 148.5 265.0 148.5 251.2 160.0 251.2 L 160.0 320.0 L 91.2 320.0 C 91.2 308.5 105.0 308.5 99.2 298.9 C 99.2 281.6 60.8 281.6 60.8 298.9 C 55.0 308.5 68.8 308.5 68.8 320.0 L 0.0 320.0 L 0.0 251.2 C 11.5 251.2 11.5 265.0 21.1 259.2 C 38.4 259.2 38.4 220.8 21.1 220.8 C 11.5 215.0 11.5 228.8 0.0 228.8 L 0.0 160.0 Z%22 fill=%22%23101216%22/%3E%3Cpath d=%22M 160.0 160.0 L 228.8 160.0 C 228.8 171.5 215.0 171.5 220.8 181.1 C 220.8 198.4 259.2 198.4 259.2 181.1 C 265.0 171.5 251.2 171.5 251.2 160.0 L 320.0 160.0 L 320.0 228.8 C 331.5 228.8 331.5 215.0 341.1 220.8 C 358.4 220.8 358.4 259.2 341.1 259.2 C 331.5 265.0 331.5 251.2 320.0 251.2 L 320.0 320.0 L 251.2 320.0 C 251.2 331.5 265.0 331.5 259.2 341.1 C 259.2 358.4 220.8 358.4 220.8 341.1 C 215.0 331.5 228.8 331.5 228.8 320.0 L 160.0 320.0 L 160.0 251.2 C 148.5 251.2 148.5 265.0 138.9 259.2 C 121.6 259.2 121.6 220.8 138.9 220.8 C 148.5 215.0 148.5 228.8 160.0 228.8 L 160.0 160.0 Z%22 fill=%22%230d0f12%22/%3E%3Cpath d=%22M 320.0 160.0 L 388.8 160.0 C 388.8 148.5 375.0 148.5 380.8 138.9 C 380.8 121.6 419.2 121.6 419.2 138.9 C 425.0 148.5 411.2 148.5 411.2 160.0 L 480.0 160.0 L 480.0 228.8 C 468.5 228.8 468.5 215.0 458.9 220.8 C 441.6 220.8 441.6 259.2 458.9 259.2 C 468.5 265.0 468.5 251.2 480.0 251.2 L 480.0 320.0 L 411.2 320.0 C 411.2 308.5 425.0 308.5 419.2 298.9 C 419.2 281.6 380.8 281.6 380.8 298.9 C 375.0 308.5 388.8 308.5 388.8 320.0 L 320.0 320.0 L 320.0 251.2 C 331.5 251.2 331.5 265.0 341.1 259.2 C 358.4 259.2 358.4 220.8 341.1 220.8 C 331.5 215.0 331.5 228.8 320.0 228.8 L 320.0 160.0 Z%22 fill=%22%23101216%22/%3E%3Cpath d=%22M 0.0 320.0 L 68.8 320.0 C 68.8 331.5 55.0 331.5 60.8 341.1 C 60.8 358.4 99.2 358.4 99.2 341.1 C 105.0 331.5 91.2 331.5 91.2 320.0 L 160.0 320.0 L 160.0 388.8 C 171.5 388.8 171.5 375.0 181.1 380.8 C 198.4 380.8 198.4 419.2 181.1 419.2 C 171.5 425.0 171.5 411.2 160.0 411.2 L 160.0 480.0 L 91.2 480.0 C 91.2 491.5 105.0 491.5 99.2 501.1 C 99.2 518.4 60.8 518.4 60.8 501.1 C 55.0 491.5 68.8 491.5 68.8 480.0 L 0.0 480.0 L 0.0 411.2 C -11.5 411.2 -11.5 425.0 -21.1 419.2 C -38.4 419.2 -38.4 380.8 -21.1 380.8 C -11.5 375.0 -11.5 388.8 0.0 388.8 L 0.0 320.0 Z%22 fill=%22%230b0c0e%22/%3E%3Cpath d=%22M 160.0 320.0 L 228.8 320.0 C 228.8 308.5 215.0 308.5 220.8 298.9 C 220.8 281.6 259.2 281.6 259.2 298.9 C 265.0 308.5 251.2 308.5 251.2 320.0 L 320.0 320.0 L 320.0 388.8 C 308.5 388.8 308.5 375.0 298.9 380.8 C 281.6 380.8 281.6 419.2 298.9 419.2 C 308.5 425.0 308.5 411.2 320.0 411.2 L 320.0 480.0 L 251.2 480.0 C 251.2 468.5 265.0 468.5 259.2 458.9 C 259.2 441.6 220.8 441.6 220.8 458.9 C 215.0 468.5 228.8 468.5 228.8 480.0 L 160.0 480.0 L 160.0 411.2 C 171.5 411.2 171.5 425.0 181.1 419.2 C 198.4 419.2 198.4 380.8 181.1 380.8 C 171.5 375.0 171.5 388.8 160.0 388.8 L 160.0 320.0 Z%22 fill=%22%230e1013%22/%3E%3Cpath d=%22M 320.0 320.0 L 388.8 320.0 C 388.8 331.5 375.0 331.5 380.8 341.1 C 380.8 358.4 419.2 358.4 419.2 341.1 C 425.0 331.5 411.2 331.5 411.2 320.0 L 480.0 320.0 L 480.0 388.8 C 491.5 388.8 491.5 375.0 501.1 380.8 C 518.4 380.8 518.4 419.2 501.1 419.2 C 491.5 425.0 491.5 411.2 480.0 411.2 L 480.0 480.0 L 411.2 480.0 C 411.2 491.5 425.0 491.5 419.2 501.1 C 419.2 518.4 380.8 518.4 380.8 501.1 C 375.0 491.5 388.8 491.5 388.8 480.0 L 320.0 480.0 L 320.0 411.2 C 308.5 411.2 308.5 425.0 298.9 419.2 C 281.6 419.2 281.6 380.8 298.9 380.8 C 308.5 375.0 308.5 388.8 320.0 388.8 L 320.0 320.0 Z%22 fill=%22%230b0c0e%22/%3E%3C/g%3E%3C/svg%3E");   /* site-wide jigsaw backdrop, near-black pieces */
  --danger: #ff7b6b;
  --accent-text: var(--accent);      /* accent used as text */
  --accent-note: var(--accent-2);    /* text on accent-dim panels */
  --accent-hover: var(--accent-2);   /* primary button hover */
  --nav-bg: rgba(11,12,14,.82);
  --nav-bg-2: rgba(11,12,14,.9);
  --board: #15181d;
  --board-line: #23272e;
  --board-side: #0e1013;
  --success: #2fbf71;
  --success-ink: #08301c;
  color-scheme: dark;

  /* ------------------------------------------------------------------
     Colour system: how to change it later
     The whole site keys off ONE primary hue (amber). To move the brand
     to blue, teal or purple, change --accent, --accent-2, --accent-hover,
     --accent-dim and --accent-text here (and the light-theme block
     below); every button, glow, focus ring, chart line and badge follows.
     Rules the tokens are built to keep:
       - body text on background ≥ 4.5:1 (--text, --text-2, --muted)
       - button label on --accent ≥ 3:1 (--accent-ink is near-black)
       - --accent-text is a darker amber used ONLY for text on light
         surfaces, because pure amber on white fails contrast
     Semantic aliases (the names the brief asks for) map onto those tokens
     so either vocabulary works in new CSS.
  ------------------------------------------------------------------ */
  --color-primary: var(--accent);
  --color-primary-weak: var(--accent-dim);
  --color-primary-text: var(--accent-text);
  --color-bg: var(--bg-0);
  --color-bg-alt: var(--bg-1);
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-border: var(--line);
  --color-success: var(--success);
  --color-error: var(--danger);
}
:root[data-theme="light"] {
  --bg-0: #f5f6f8; --bg-1: #ffffff; --bg-2: #eef0f3; --bg-3: #e3e6eb;
  --line: #e1e4e9; --line-2: #cbd1d9;
  --text: #101214; --text-2: #3d434d; --muted: #646b78; /* 4.96:1 on bg-0 */
  --accent: #e9a930; --accent-2: #f2b544; --accent-hover: #d8991f; --accent-ink: #1a1200; --accent-dim: rgba(233,169,48,.16);
  --accent-text: #8f5f00; --accent-note: #6b4700;
  --glow: rgba(233, 169, 48, 0.16); --glow-2: rgba(233, 169, 48, 0.05);
  --puzzle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22320%22 height=%22320%22 viewBox=%220 0 320 320%22%3E%3Cg transform=%22translate(-80.0 -80.0)%22 stroke=%22rgba(0,0,0,0.07)%22 stroke-width=%221%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M 0.0 0.0 L 68.8 0.0 C 68.8 11.5 55.0 11.5 60.8 21.1 C 60.8 38.4 99.2 38.4 99.2 21.1 C 105.0 11.5 91.2 11.5 91.2 0.0 L 160.0 0.0 L 160.0 68.8 C 171.5 68.8 171.5 55.0 181.1 60.8 C 198.4 60.8 198.4 99.2 181.1 99.2 C 171.5 105.0 171.5 91.2 160.0 91.2 L 160.0 160.0 L 91.2 160.0 C 91.2 171.5 105.0 171.5 99.2 181.1 C 99.2 198.4 60.8 198.4 60.8 181.1 C 55.0 171.5 68.8 171.5 68.8 160.0 L 0.0 160.0 L 0.0 91.2 C -11.5 91.2 -11.5 105.0 -21.1 99.2 C -38.4 99.2 -38.4 60.8 -21.1 60.8 C -11.5 55.0 -11.5 68.8 0.0 68.8 L 0.0 0.0 Z%22 fill=%22%23f5f6f8%22/%3E%3Cpath d=%22M 160.0 0.0 L 228.8 0.0 C 228.8 -11.5 215.0 -11.5 220.8 -21.1 C 220.8 -38.4 259.2 -38.4 259.2 -21.1 C 265.0 -11.5 251.2 -11.5 251.2 0.0 L 320.0 0.0 L 320.0 68.8 C 308.5 68.8 308.5 55.0 298.9 60.8 C 281.6 60.8 281.6 99.2 298.9 99.2 C 308.5 105.0 308.5 91.2 320.0 91.2 L 320.0 160.0 L 251.2 160.0 C 251.2 148.5 265.0 148.5 259.2 138.9 C 259.2 121.6 220.8 121.6 220.8 138.9 C 215.0 148.5 228.8 148.5 228.8 160.0 L 160.0 160.0 L 160.0 91.2 C 171.5 91.2 171.5 105.0 181.1 99.2 C 198.4 99.2 198.4 60.8 181.1 60.8 C 171.5 55.0 171.5 68.8 160.0 68.8 L 160.0 0.0 Z%22 fill=%22%23f0f2f5%22/%3E%3Cpath d=%22M 320.0 0.0 L 388.8 0.0 C 388.8 11.5 375.0 11.5 380.8 21.1 C 380.8 38.4 419.2 38.4 419.2 21.1 C 425.0 11.5 411.2 11.5 411.2 0.0 L 480.0 0.0 L 480.0 68.8 C 491.5 68.8 491.5 55.0 501.1 60.8 C 518.4 60.8 518.4 99.2 501.1 99.2 C 491.5 105.0 491.5 91.2 480.0 91.2 L 480.0 160.0 L 411.2 160.0 C 411.2 171.5 425.0 171.5 419.2 181.1 C 419.2 198.4 380.8 198.4 380.8 181.1 C 375.0 171.5 388.8 171.5 388.8 160.0 L 320.0 160.0 L 320.0 91.2 C 308.5 91.2 308.5 105.0 298.9 99.2 C 281.6 99.2 281.6 60.8 298.9 60.8 C 308.5 55.0 308.5 68.8 320.0 68.8 L 320.0 0.0 Z%22 fill=%22%23f5f6f8%22/%3E%3Cpath d=%22M 0.0 160.0 L 68.8 160.0 C 68.8 148.5 55.0 148.5 60.8 138.9 C 60.8 121.6 99.2 121.6 99.2 138.9 C 105.0 148.5 91.2 148.5 91.2 160.0 L 160.0 160.0 L 160.0 228.8 C 148.5 228.8 148.5 215.0 138.9 220.8 C 121.6 220.8 121.6 259.2 138.9 259.2 C 148.5 265.0 148.5 251.2 160.0 251.2 L 160.0 320.0 L 91.2 320.0 C 91.2 308.5 105.0 308.5 99.2 298.9 C 99.2 281.6 60.8 281.6 60.8 298.9 C 55.0 308.5 68.8 308.5 68.8 320.0 L 0.0 320.0 L 0.0 251.2 C 11.5 251.2 11.5 265.0 21.1 259.2 C 38.4 259.2 38.4 220.8 21.1 220.8 C 11.5 215.0 11.5 228.8 0.0 228.8 L 0.0 160.0 Z%22 fill=%22%23eceef2%22/%3E%3Cpath d=%22M 160.0 160.0 L 228.8 160.0 C 228.8 171.5 215.0 171.5 220.8 181.1 C 220.8 198.4 259.2 198.4 259.2 181.1 C 265.0 171.5 251.2 171.5 251.2 160.0 L 320.0 160.0 L 320.0 228.8 C 331.5 228.8 331.5 215.0 341.1 220.8 C 358.4 220.8 358.4 259.2 341.1 259.2 C 331.5 265.0 331.5 251.2 320.0 251.2 L 320.0 320.0 L 251.2 320.0 C 251.2 331.5 265.0 331.5 259.2 341.1 C 259.2 358.4 220.8 358.4 220.8 341.1 C 215.0 331.5 228.8 331.5 228.8 320.0 L 160.0 320.0 L 160.0 251.2 C 148.5 251.2 148.5 265.0 138.9 259.2 C 121.6 259.2 121.6 220.8 138.9 220.8 C 148.5 215.0 148.5 228.8 160.0 228.8 L 160.0 160.0 Z%22 fill=%22%23f2f3f6%22/%3E%3Cpath d=%22M 320.0 160.0 L 388.8 160.0 C 388.8 148.5 375.0 148.5 380.8 138.9 C 380.8 121.6 419.2 121.6 419.2 138.9 C 425.0 148.5 411.2 148.5 411.2 160.0 L 480.0 160.0 L 480.0 228.8 C 468.5 228.8 468.5 215.0 458.9 220.8 C 441.6 220.8 441.6 259.2 458.9 259.2 C 468.5 265.0 468.5 251.2 480.0 251.2 L 480.0 320.0 L 411.2 320.0 C 411.2 308.5 425.0 308.5 419.2 298.9 C 419.2 281.6 380.8 281.6 380.8 298.9 C 375.0 308.5 388.8 308.5 388.8 320.0 L 320.0 320.0 L 320.0 251.2 C 331.5 251.2 331.5 265.0 341.1 259.2 C 358.4 259.2 358.4 220.8 341.1 220.8 C 331.5 215.0 331.5 228.8 320.0 228.8 L 320.0 160.0 Z%22 fill=%22%23eceef2%22/%3E%3Cpath d=%22M 0.0 320.0 L 68.8 320.0 C 68.8 331.5 55.0 331.5 60.8 341.1 C 60.8 358.4 99.2 358.4 99.2 341.1 C 105.0 331.5 91.2 331.5 91.2 320.0 L 160.0 320.0 L 160.0 388.8 C 171.5 388.8 171.5 375.0 181.1 380.8 C 198.4 380.8 198.4 419.2 181.1 419.2 C 171.5 425.0 171.5 411.2 160.0 411.2 L 160.0 480.0 L 91.2 480.0 C 91.2 491.5 105.0 491.5 99.2 501.1 C 99.2 518.4 60.8 518.4 60.8 501.1 C 55.0 491.5 68.8 491.5 68.8 480.0 L 0.0 480.0 L 0.0 411.2 C -11.5 411.2 -11.5 425.0 -21.1 419.2 C -38.4 419.2 -38.4 380.8 -21.1 380.8 C -11.5 375.0 -11.5 388.8 0.0 388.8 L 0.0 320.0 Z%22 fill=%22%23f5f6f8%22/%3E%3Cpath d=%22M 160.0 320.0 L 228.8 320.0 C 228.8 308.5 215.0 308.5 220.8 298.9 C 220.8 281.6 259.2 281.6 259.2 298.9 C 265.0 308.5 251.2 308.5 251.2 320.0 L 320.0 320.0 L 320.0 388.8 C 308.5 388.8 308.5 375.0 298.9 380.8 C 281.6 380.8 281.6 419.2 298.9 419.2 C 308.5 425.0 308.5 411.2 320.0 411.2 L 320.0 480.0 L 251.2 480.0 C 251.2 468.5 265.0 468.5 259.2 458.9 C 259.2 441.6 220.8 441.6 220.8 458.9 C 215.0 468.5 228.8 468.5 228.8 480.0 L 160.0 480.0 L 160.0 411.2 C 171.5 411.2 171.5 425.0 181.1 419.2 C 198.4 419.2 198.4 380.8 181.1 380.8 C 171.5 375.0 171.5 388.8 160.0 388.8 L 160.0 320.0 Z%22 fill=%22%23f0f2f5%22/%3E%3Cpath d=%22M 320.0 320.0 L 388.8 320.0 C 388.8 331.5 375.0 331.5 380.8 341.1 C 380.8 358.4 419.2 358.4 419.2 341.1 C 425.0 331.5 411.2 331.5 411.2 320.0 L 480.0 320.0 L 480.0 388.8 C 491.5 388.8 491.5 375.0 501.1 380.8 C 518.4 380.8 518.4 419.2 501.1 419.2 C 491.5 425.0 491.5 411.2 480.0 411.2 L 480.0 480.0 L 411.2 480.0 C 411.2 491.5 425.0 491.5 419.2 501.1 C 419.2 518.4 380.8 518.4 380.8 501.1 C 375.0 491.5 388.8 491.5 388.8 480.0 L 320.0 480.0 L 320.0 411.2 C 308.5 411.2 308.5 425.0 298.9 419.2 C 281.6 419.2 281.6 380.8 298.9 380.8 C 308.5 375.0 308.5 388.8 320.0 388.8 L 320.0 320.0 Z%22 fill=%22%23f5f6f8%22/%3E%3C/g%3E%3C/svg%3E");
  --danger: #c93c2c;
  --nav-bg: rgba(245,246,248,.85); --nav-bg-2: rgba(245,246,248,.92);
  --board: #ffffff; --board-line: #e6e9ee; --board-side: #d5d9e0;
  color-scheme: light;
}
:root {
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --max: 1280px;
  --display: "Manrope", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg-0); color: var(--text);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  position: relative; z-index: 0;
}
/* Site-wide backdrop: a jigsaw of near-black pieces (a seamless SVG tile, two pieces = 320px, generated by
   scripts in the repo history: see README "Backdrop") under the warm amber glow, fixed to the viewport so every
   page and section sits on it. The tile is --puzzle (dark) and is overridden for the light theme. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% -5%, var(--glow), transparent 70%),
    radial-gradient(45% 40% at 88% 75%, var(--glow-2), transparent 70%),
    var(--puzzle) 0 0 / 320px 320px repeat;
}
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 var(--s2); }
h1 { font-size: clamp(2.5rem, 6vw, 5.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); letter-spacing: -0.03em; }
h3 { font-size: 1.375rem; }
p { margin: 0 0 var(--s2); }
.lead { font-size: 1.125rem; color: var(--text-2); max-width: 36rem; }
.muted { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 var(--s3);
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--accent); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(var(--s2), 4vw, var(--s5)); }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3); }
section.block { padding: clamp(var(--s6), 9vw, var(--s8)) 0; }
section.block.tight { padding-top: clamp(var(--s5), 6vw, var(--s7)); padding-bottom: clamp(var(--s5), 6vw, var(--s7)); }
.rule { border-top: 0; }   /* sections sit on one continuous canvas; no divider lines */
.sec-head { max-width: 46rem; margin-bottom: clamp(var(--s4), 5vw, var(--s6)); }
.sec-head .lead { margin-top: var(--s2); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* ==================================================================
   Buttons, badges
================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r);
  font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s var(--ease), background .18s, border-color .18s, color .18s;
  position: relative;
}
.btn .arr { transition: transform .18s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--text-2); background: var(--bg-2); }
.btn.quiet { background: transparent; color: var(--text-2); padding: 0; min-height: 0; }
.btn.quiet:hover { color: var(--accent-text); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
/* Semantic variants: use sparingly (confirmations and destructive actions only). */
.btn.success { background: var(--success); border-color: var(--success); color: var(--success-ink); }
.btn.success:hover { filter: brightness(1.08); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--accent-ink); border-right-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2);
}
.badge.accent { border-color: rgba(242,181,68,.4); color: var(--accent-text); background: var(--accent-dim); }
.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ==================================================================
   Navigation
================================================================== */
header.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,12,14,0); border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
header.nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
header.nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; transition: height .3s var(--ease); }
header.nav.scrolled .wrap { height: 62px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; text-decoration: none; justify-self: start; }
.logo .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--text); position: relative; }
.logo .mark::before { content: ""; position: absolute; left: 6px; top: 12px; width: 14px; height: 2px; background: var(--bg-0); }
.logo .mark::after { content: ""; position: absolute; right: 5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-0); }
nav.primary { display: flex; gap: 4px; }
nav.primary a { text-decoration: none; color: var(--text-2); font-size: 0.925rem; font-weight: 500; padding: 8px 12px; border-radius: var(--r-sm); transition: color .15s, background .15s; }
nav.primary a:hover { color: var(--text); background: var(--bg-2); }
nav.primary a[aria-current="page"] { color: var(--text); }
nav.primary a[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 2px; background: var(--accent); border-radius: 2px; }
.nav-right { justify-self: end; display: flex; gap: 8px; align-items: center; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: transparent; cursor: pointer; position: relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 12px; width: 20px; height: 2px; background: var(--text); transition: transform .25s var(--ease), opacity .2s; }
.menu-btn span { top: 21px; }
.menu-btn span::before { left: 0; top: -6px; }
.menu-btn span::after { left: 0; top: 6px; }
body.menu-open .menu-btn span { background: transparent; }
body.menu-open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }

.menu-overlay {
  position: fixed; inset: 0; z-index: 55; background: var(--bg-0);
  display: flex; flex-direction: column; padding: 96px clamp(var(--s3), 6vw, var(--s6)) var(--s4);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
body.menu-open .menu-overlay { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
body.menu-open { overflow: hidden; }
.menu-overlay a.item { text-decoration: none; font-family: var(--display); font-weight: 700; font-size: clamp(1.75rem, 8vw, 2.5rem); letter-spacing: -0.03em; padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.menu-overlay a.item small { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); letter-spacing: .1em; }
.menu-overlay .menu-foot { margin-top: auto; display: grid; gap: var(--s2); }
.menu-overlay .menu-foot .btn { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  header.nav .wrap { grid-template-columns: 1fr auto; height: 68px; }
  nav.primary { display: none; }
  .nav-right .btn { display: none; }
  .menu-btn { display: block; }
}

/* Mobile sticky bottom CTA */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px clamp(var(--s2), 4vw, var(--s3)) calc(10px + env(safe-area-inset-bottom));
  background: var(--nav-bg-2); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .3s var(--ease);
  display: none;
}
.sticky-cta .btn { width: 100%; justify-content: center; }
.sticky-cta.show { transform: none; }
@media (max-width: 900px) { .sticky-cta { display: block; } body { padding-bottom: 0; } }

/* ==================================================================
   Hero
================================================================== */
/* ------------------------------------------------------------------
   00 Top hero: one field, floating outcomes around it
------------------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-top { position: relative; padding: clamp(var(--s6), 9vw, 130px) 0 clamp(var(--s5), 6vw, var(--s6)); overflow: hidden; }
.hero-top::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 0%, var(--accent-dim), transparent 70%); opacity: .8; }
.hero-top .wrap { position: relative; }
.hero-top-inner { position: relative; z-index: 1; max-width: 48rem; margin: 0 auto; text-align: center; }
.hero-top .eyebrow { display: inline-flex; margin-bottom: var(--s3); }
.hero-top h1 { font-size: clamp(2.5rem, 6.2vw, 5.2rem); max-width: 17ch; margin: 0 auto var(--s4); }
.hero-top-form {
  display: flex; gap: 8px; max-width: 40rem; margin: 0 auto; padding: 6px 6px 6px 8px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-1);
  box-shadow: 0 24px 70px -34px rgba(0, 0, 0, .9); transition: border-color .2s, box-shadow .2s;
}
.hero-top-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim), 0 24px 70px -34px rgba(0, 0, 0, .9); }
.hero-top-form input { flex: 1 1 auto; min-width: 0; padding: 12px 16px; font: inherit; font-size: 1.05rem; color: var(--text); background: transparent; border: 0; border-radius: 999px; }
.hero-top-form input::placeholder { color: var(--muted); }
.hero-top-form input:focus { outline: none; }
.hero-top-form .btn { border-radius: 999px; white-space: nowrap; flex: none; }
.hero-top-note { margin: 16px auto 0; max-width: 34rem; font-size: .9rem; color: var(--muted); }
/* The original hero, now the second screen: normal section proportions so it does not compete with the top hero */
.hero-top + .hero { padding: clamp(var(--s5), 6vw, var(--s6)) 0; }
.hero .hero-title { font-size: clamp(1.7rem, 3.1vw, 2.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; max-width: 22ch; margin-bottom: var(--s3); }
.hero-top + .hero .lead { font-size: 1.02rem; max-width: 30rem; margin-bottom: var(--s3); }
.hero-top + .hero .cta-micro, .hero-top + .hero .hero-trust { font-size: .85rem; }
.hero-top + .hero .trust-row { margin-top: var(--s3); }

.hero-top-orbit { position: absolute; inset: -6% 0 -4%; pointer-events: none; z-index: 0; }
/* Each owner starts small and hidden at the headline (--ox/--oy point from its slot back to the centre,
   set by site.js), then, once the headline has landed, travels out to its slot. Paused under the intro. */
.orb {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: grid; justify-items: center; gap: 8px;
  opacity: 0; transform: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px)) scale(.2);
  animation: orbOut 1.15s cubic-bezier(.2, .8, .2, 1) calc(1.2s + var(--i) * .13s) forwards;
}
html.intro-on .orb { animation-play-state: paused; }
.orb .av {   /* illustrated owner avatar (SVG from site.js), clipped to a circle with a tinted ring */
  width: 68px; height: 68px; border-radius: 50%; overflow: hidden; display: block;
  background: hsl(var(--h) 60% 52% / .16); border: 2px solid hsl(var(--h) 60% 62% / .55);
  box-shadow: 0 16px 44px -18px hsl(var(--h) 70% 55% / .8), 0 0 0 4px hsl(var(--h) 60% 52% / .12);
  animation: orbFloat calc(5s + var(--i) * .7s) ease-in-out calc(var(--i) * -1.3s) infinite alternate;
}
.orb .av svg, .orb .av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.orb .tag {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); white-space: nowrap;
  padding: 6px 10px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--line);
}
.orb.swap .av, .orb.swap .tag { animation: orbSwap .6s var(--ease); }
@keyframes orbOut {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px)) scale(.2); }
  25%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1); }
}
@keyframes orbFloat { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@keyframes orbSwap { 0% { opacity: 1; transform: scale(1); } 40% { opacity: 0; transform: scale(.85); } 60% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
:root[data-theme="light"] .orb .av { background: hsl(var(--h) 60% 50% / .14); border-color: hsl(var(--h) 55% 55% / .5); }
@media (max-width: 960px) { .hero-top-orbit { display: none; } }
@media (max-width: 640px) {
  .hero-top { padding-top: clamp(var(--s5), 12vw, var(--s6)); }
  .hero-top-form { flex-direction: column; border-radius: var(--r-lg); padding: 8px; }
  .hero-top-form input { text-align: center; padding: 12px; }
  .hero-top-form .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .orb { animation: none; opacity: 1; transform: translate(-50%, -50%); } .orb .av { animation: none; } .orb.swap .av, .orb.swap .tag { animation: none; } }
:root[data-motion="reduced"] .orb { animation: none; opacity: 1; transform: translate(-50%, -50%); }
:root[data-motion="reduced"] .orb .av, :root[data-motion="reduced"] .orb.swap .av, :root[data-motion="reduced"] .orb.swap .tag { animation: none; }

.hero { padding: clamp(var(--s5), 8vw, var(--s7)) 0 clamp(var(--s5), 6vw, var(--s6)); position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 80% 30%, rgba(242,181,68,.09), transparent 70%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.hero .wrap { position: relative; }
.hero .grid12 { align-items: center; }
.hero .copy { grid-column: 1 / span 7; }
.hero .vis { grid-column: 8 / span 5; }
.hero h1 { max-width: 14ch; margin-bottom: var(--s3); }
.hero .lead { max-width: 34rem; margin-bottom: var(--s4); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-row { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); }
.trust-row .lbl { font-family: var(--mono); font-size: 0.7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.trust-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.trust-row li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-2); }
.trust-row li svg { width: 16px; height: 16px; color: var(--accent-text); flex: none; }
@media (max-width: 1000px) { .hero .copy, .hero .vis { grid-column: 1 / -1; } .hero .vis { margin-top: var(--s4); } }

/* ==================================================================
   Workflow rail (signature component)
   .flow            container
   .flow.v          vertical (default)   .flow.h  horizontal
   .flow .node      step;   --i sets animation order
================================================================== */
.flow { --dur: 9s; display: flex; flex-direction: column; gap: 0; position: relative; }
.flow .node {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1);
  font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  position: relative; transition: border-color .3s, background .3s;
}
.flow .node .ic { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--muted); transition: color .3s, border-color .3s, background .3s; }
.flow .node .ic svg { width: 15px; height: 15px; }
.flow .node .sub { font-family: var(--mono); font-weight: 400; font-size: 0.68rem; color: var(--muted); letter-spacing: .04em; }
.flow .node .lbl { display: flex; flex-direction: column; gap: 2px; }
.flow .link { width: 2px; height: 22px; margin-left: 27px; background: var(--line-2); position: relative; overflow: hidden; }
.flow .link::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, var(--accent)); opacity: 0; }
.flow.run .node { animation: nodeOn var(--dur) infinite; animation-delay: calc(var(--i) * (var(--dur) / 9)); }
.flow.run .node .ic { animation: icOn var(--dur) infinite; animation-delay: calc(var(--i) * (var(--dur) / 9)); }
.flow.run .link::after { animation: linkPulse var(--dur) infinite; animation-delay: calc(var(--i) * (var(--dur) / 9) + (var(--dur) / 14)); }
@keyframes nodeOn { 0%, 6% { border-color: var(--line); background: var(--bg-1); } 8%, 22% { border-color: var(--accent-text); background: var(--bg-2); } 30%, 100% { border-color: var(--line); background: var(--bg-1); } }
@keyframes icOn { 0%, 6% { color: var(--muted); border-color: var(--line-2); background: transparent; } 8%, 22% { color: var(--accent-ink); border-color: var(--accent-text); background: var(--accent); } 30%, 100% { color: var(--muted); border-color: var(--line-2); background: transparent; } }
@keyframes linkPulse { 0%, 4% { top: -100%; opacity: 0; } 6% { opacity: 1; } 14% { top: 100%; opacity: 1; } 15%, 100% { top: 100%; opacity: 0; } }

/* horizontal variant (cards, process) */
.flow.h { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.flow.h .node { grid-template-columns: 1fr; padding: 5px 9px; font-size: 0.72rem; font-family: var(--mono); font-weight: 500; letter-spacing: .02em; border-radius: var(--r-sm); background: var(--bg-2); }
.flow.h .link { width: 14px; height: 2px; margin: 0; }
.flow.h .link::after { top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(to right, transparent, var(--accent)); }
.flow.h.run .link::after { animation: linkPulseH var(--dur) infinite; animation-delay: calc(var(--i) * (var(--dur) / 9) + (var(--dur) / 14)); }
@keyframes linkPulseH { 0%, 4% { left: -100%; opacity: 0; } 6% { opacity: 1; } 14% { left: 100%; opacity: 1; } 15%, 100% { left: 100%; opacity: 0; } }

/* large diagram (detail pages) */
.flow.big { max-width: 560px; }
.flow.big .node { padding: 16px 18px; font-size: 1.05rem; }

/* framed panel around hero flow */
.panel {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  padding: var(--s3); position: relative;
}
.panel .panel-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 0.68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.panel .panel-head .live { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.panel .panel-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.panel .panel-foot { margin-top: var(--s2); font-family: var(--mono); font-size: 0.66rem; color: var(--muted); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .flow.run .node, .flow.run .node .ic, .flow.run .link::after, .panel .panel-head .live::before { animation: none !important; }
  .flow.run .node:nth-child(1) { border-color: var(--accent-text); }
  html { scroll-behavior: auto; }
}

/* ==================================================================
   Problems (flip cards)
================================================================== */
.problems { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.problem { position: relative; min-height: 240px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: var(--s3); cursor: pointer; overflow: hidden; transition: border-color .25s, transform .25s var(--ease); text-align: left; width: 100%; }
.problem:hover, .problem:focus-visible, .problem.on { border-color: var(--line-2); transform: translateY(-2px); }
/* Real 3D flip: front rotates away, back rotates in. Faces hide their backface. */
.problem { perspective: 1100px; }
.problem .face { transition: transform .6s var(--ease); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
.problem .face.front { position: relative; transform: rotateY(0deg); }
.problem .face.back { position: absolute; inset: var(--s3); transform: rotateY(-180deg); }
.problem:hover .front, .problem:focus-visible .front, .problem.on .front { transform: rotateY(180deg); }
.problem:hover .back, .problem:focus-visible .back, .problem.on .back { transform: rotateY(0deg); }
@media (prefers-reduced-motion: reduce) { .problem .face { transition: none; } }
:root[data-motion="reduced"] .problem .face { transition: none; }
.problem h3 { font-size: 1.1rem; margin-bottom: 8px; }
.problem p { font-size: 0.9rem; color: var(--text-2); margin: 0; }
.problem .k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: block; }
.problem .back .k { color: var(--accent-text); }
.problem .hint { position: absolute; right: 16px; bottom: 14px; font-family: var(--mono); font-size: 0.62rem; color: var(--muted); letter-spacing: .08em; }
@media (max-width: 1100px) { .problems { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .problems { grid-template-columns: 1fr; } .problem { min-height: 0; } .problem .face.back { position: relative; inset: auto; display: none; } .problem.on .face.back { display: block; } .problem.on .front { display: none; } .problem:hover .front { opacity: 1; transform: none; } .problem:hover .back { opacity: 1; } .problem .hint { display: none; } }

/* ==================================================================
   Compare (traditional vs system)
================================================================== */
.compare { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s3); align-items: stretch; }
.compare .col { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); background: var(--bg-1); }
.compare .col.system { border-color: rgba(242,181,68,.35); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); }
.compare .col h3 { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); }
.compare .col.trad h3 { color: var(--text-2); }
.compare .chain { list-style: none; margin: 0; padding: 0; }
.compare .chain li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
.compare .chain li:first-child { border-top: 0; }
.compare .chain li .n { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); width: 2ch; }
.compare .trad .chain li .who { margin-left: auto; font-family: var(--mono); font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--danger); }
.compare .system .chain li .who { margin-left: auto; font-family: var(--mono); font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.compare .foot { margin-top: var(--s3); font-size: 0.9rem; color: var(--muted); }
@media (max-width: 900px) { .compare { grid-template-columns: 1fr; } }

/* ==================================================================
   Services
================================================================== */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.service { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: var(--s4); display: flex; flex-direction: column; min-height: 420px; transition: border-color .25s, transform .25s var(--ease); }
.service:hover { border-color: var(--line-2); transform: translateY(-3px); }
.service .k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: .14em; color: var(--accent-text); margin-bottom: var(--s3); display: flex; align-items: center; gap: 10px; }
.service .k::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.service h3 { font-size: 1.5rem; margin-bottom: 8px; }
.service p { color: var(--text-2); font-size: 0.95rem; }
.service ul { list-style: none; padding: 0; margin: var(--s2) 0 var(--s3); display: grid; gap: 6px; }
.service li { font-size: 0.9rem; color: var(--text-2); padding-left: 18px; position: relative; }
.service li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--accent); }
.service .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .services { grid-template-columns: 1fr; } .service { min-height: 0; } }

/* ==================================================================
   Bento catalog
================================================================== */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(210px, auto); gap: var(--s2); }
.sol {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: var(--s3);
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.sol::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.sol:hover { border-color: var(--line-2); transform: translateY(-3px); background: var(--bg-2); }
.sol:hover::after { transform: scaleX(1); }
.sol .cat { font-family: var(--mono); font-size: 0.66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sol h3 { font-size: 1.2rem; margin: 0; }
.sol p { margin: 0; font-size: 0.9rem; color: var(--text-2); }
.sol .flow { margin-top: 6px; }
.sol .more { font-family: var(--display); font-weight: 700; font-size: 0.85rem; color: var(--accent-text); margin-top: auto; padding-top: 10px; }
.sol.wide { grid-column: span 2; }
.sol.tall { grid-row: span 2; }
.sol.tall .flow.h { flex-direction: column; align-items: flex-start; }
.sol.tall .flow.h .link { width: 2px; height: 12px; margin-left: 10px; }
.sol.tall .flow.h .link::after { top: -100%; left: 0; background: linear-gradient(to bottom, transparent, var(--accent)); }
.sol.tall .flow.h.run .link::after { animation-name: linkPulse; }
@media (max-width: 1100px) { .bento { grid-template-columns: repeat(2, 1fr); } .sol.tall { grid-row: auto; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .sol.wide { grid-column: auto; } }

/* filter bar */
.filterbar { position: sticky; top: 62px; z-index: 40; background: var(--nav-bg-2); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: var(--s4); }
.filterbar .groups { display: flex; flex-direction: column; gap: 8px; }
.filterbar .g { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filterbar .g::-webkit-scrollbar { display: none; }
.filterbar .g .lbl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex: none; width: 72px; }
.chip { flex: none; border: 1px solid var(--line-2); background: transparent; border-radius: 999px; padding: 7px 13px; font-size: 0.82rem; cursor: pointer; color: var(--text-2); transition: background .15s, color .15s, border-color .15s; min-height: 36px; }
.chip:hover { border-color: var(--text-2); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-text); font-weight: 600; }
.filterbar .count { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-left: auto; flex: none; }
.sol.out { opacity: 0; transform: scale(.97); pointer-events: none; }
.sol { transition: border-color .25s, transform .25s var(--ease), background .25s, opacity .25s; }
.catalog-empty { border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: var(--s5); text-align: center; color: var(--muted); }

/* ==================================================================
   Case study cards
================================================================== */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.case { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: var(--s3); text-decoration: none; display: flex; flex-direction: column; gap: 14px; transition: border-color .25s, transform .25s var(--ease); }
.case:hover { border-color: var(--line-2); transform: translateY(-3px); }
.case .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.case h3 { font-size: 1.25rem; margin: 0; }
.case dl { margin: 0; display: grid; gap: 10px; }
.case dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.case dd { margin: 2px 0 0; font-size: 0.9rem; color: var(--text-2); }
.case .res { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.case .res b { font-family: var(--display); font-size: 1.35rem; color: var(--accent-text); letter-spacing: -0.02em; }
.case .res span { font-size: 0.85rem; color: var(--text-2); }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }

/* ==================================================================
   Process timeline
================================================================== */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); position: relative; counter-reset: st; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: var(--line-2); }
.stage { position: relative; padding-top: var(--s5); cursor: default; }
.stage .dot { position: absolute; left: 0; top: 12px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg-0); border: 2px solid var(--line-2); transition: border-color .25s, background .25s, box-shadow .25s; }
.stage:hover .dot, .stage.on .dot { border-color: var(--accent-text); background: var(--accent); box-shadow: 0 0 0 5px var(--accent-dim); }
.stage .n { font-family: var(--mono); font-size: 0.7rem; color: var(--accent-text); letter-spacing: .12em; margin-bottom: 8px; }
.stage h3 { font-size: 1.15rem; margin-bottom: 6px; }
.stage p { font-size: 0.9rem; color: var(--text-2); margin: 0; }
.stage .out { margin-top: 10px; font-family: var(--mono); font-size: 0.66rem; color: var(--muted); letter-spacing: .06em; }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { top: 0; bottom: 0; left: 7px; right: auto; width: 1px; height: auto; }
  .stage { padding: 0 0 var(--s4) var(--s4); }
  .stage .dot { top: 4px; }
}

/* ==================================================================
   Integrations hub
================================================================== */
.hub { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; }
.hub .side { display: grid; gap: 10px; }
.hub .side.left .int { justify-self: end; }
.int { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); padding: 10px 14px; font-size: 0.9rem; position: relative; transition: border-color .2s, transform .2s var(--ease); }
.int:hover { border-color: var(--accent-text); transform: translateX(0) scale(1.02); }
.int .sq { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); opacity: .8; }
.int small { font-family: var(--mono); font-size: 0.64rem; color: var(--muted); }
.hub .core { width: 220px; height: 220px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; text-align: center; position: relative; background: radial-gradient(circle, var(--bg-2), var(--bg-0) 70%); }
.hub .core::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px dashed var(--line); animation: rot 40s linear infinite; }
.hub .core::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 1px solid var(--line); }
@keyframes rot { to { transform: rotate(360deg); } }
.hub .core b { font-family: var(--display); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; display: block; }
.hub .core small { font-family: var(--mono); font-size: 0.64rem; color: var(--muted); letter-spacing: .08em; }
@media (max-width: 900px) { .hub { grid-template-columns: 1fr; justify-items: center; } .hub .side { grid-template-columns: repeat(2, 1fr); width: 100%; } .hub .side.left .int { justify-self: stretch; } .int { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .hub .core::before { animation: none; } }

/* ==================================================================
   Trust
================================================================== */
.trust { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s3); }
.trust .principles { display: grid; gap: var(--s2); }
.principle { border-left: 2px solid var(--accent); padding: 4px 0 4px 18px; }
.principle b { display: block; font-family: var(--display); font-size: 1.05rem; margin-bottom: 4px; }
.principle span { font-size: 0.9rem; color: var(--text-2); }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.metric { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: var(--s3); }
.metric b { display: block; font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.04em; color: var(--accent-text); line-height: 1; }
.metric span { display: block; margin-top: 8px; font-size: 0.9rem; color: var(--text-2); }
.metric small { display: block; margin-top: 10px; font-family: var(--mono); font-size: 0.62rem; color: var(--muted); letter-spacing: .06em; }
.metric.pending b { color: var(--muted); }
.quote { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: var(--s3); font-size: 1rem; }
.quote p { color: var(--text); }
.quote cite { font-style: normal; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); letter-spacing: .06em; }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .metrics { grid-template-columns: 1fr; } }

/* ==================================================================
   CTA band
================================================================== */
.cta-band { position: relative; overflow: hidden; }   /* no divider: the page is one continuous canvas */
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 50% 120%, rgba(242,181,68,.12), transparent 70%); pointer-events: none; }
.cta-band .wrap { position: relative; text-align: center; max-width: 52rem; }
.cta-band h2 { max-width: 20ch; margin: 0 auto var(--s2); }
.cta-band p { color: var(--text-2); max-width: 32rem; margin: 0 auto var(--s4); }
.cta-band .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ==================================================================
   Footer
================================================================== */
footer.site { padding: var(--s6) 0 var(--s4); font-size: 0.9rem; color: var(--text-2); }
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s4); }
footer.site h4 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 14px; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--accent-text); }
footer.site .bottom { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; color: var(--muted); }
footer.site .bottom nav { display: flex; gap: 16px; }
@media (max-width: 800px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { footer.site .cols { grid-template-columns: 1fr; } }

/* ==================================================================
   Page heads, detail pages
================================================================== */
.page-head { padding: clamp(var(--s5), 7vw, var(--s7)) 0 clamp(var(--s4), 4vw, var(--s5)); }
.page-head h1 { font-size: clamp(2.25rem, 5vw, 4rem); max-width: 18ch; }
.page-head .lead { max-width: 40rem; }
.crumbs { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); letter-spacing: .06em; margin-bottom: var(--s3); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }

.detail-split { display: grid; grid-template-columns: 6fr 6fr; gap: var(--s5); align-items: start; }
.detail-split .sticky { position: sticky; top: 96px; }
@media (max-width: 900px) { .detail-split { grid-template-columns: 1fr; } .detail-split .sticky { position: static; } }

.numbered { counter-reset: sec; }
.numbered > section { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.numbered > section h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.numbered > section h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero) " — "; font-family: var(--mono); font-size: 0.75rem; letter-spacing: .12em; color: var(--accent-text); vertical-align: middle; font-weight: 500; }
.numbered .prose { max-width: 42rem; color: var(--text-2); }
.numbered .prose p { font-size: 1.05rem; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.feature { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); padding: var(--s3); }
.feature b { display: block; font-family: var(--display); margin-bottom: 6px; }
.feature span { font-size: 0.9rem; color: var(--text-2); }
@media (max-width: 800px) { .features { grid-template-columns: 1fr; } }

.steps { display: grid; gap: 0; counter-reset: hs; }
.hstep { display: grid; grid-template-columns: 56px 1fr; gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.hstep::before { counter-increment: hs; content: counter(hs, decimal-leading-zero); font-family: var(--mono); color: var(--accent-text); font-size: 0.8rem; padding-top: 4px; }
.hstep b { display: block; font-family: var(--display); font-size: 1.1rem; margin-bottom: 4px; }
.hstep span { color: var(--text-2); font-size: 0.95rem; }

.impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.impact .metric small { color: var(--muted); }
@media (max-width: 800px) { .impact { grid-template-columns: 1fr; } }
.note { border: 1px solid rgba(242,181,68,.3); background: var(--accent-dim); border-radius: var(--r); padding: 12px 16px; font-size: 0.88rem; color: var(--accent-note); }

.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.ba { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3); background: var(--bg-1); }
.ba.after { border-color: rgba(242,181,68,.35); }
.ba h3 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.ba.after h3 { color: var(--accent-text); }
.ba ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 0.95rem; display: grid; gap: 6px; }
@media (max-width: 800px) { .beforeafter { grid-template-columns: 1fr; } }

.overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.overview div { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: var(--bg-1); }
.overview dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.overview dd { margin: 4px 0 0; font-family: var(--display); font-weight: 600; }
@media (max-width: 800px) { .overview { grid-template-columns: 1fr 1fr; } }

/* industries */
.industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.industry { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: var(--s3); display: flex; flex-direction: column; gap: 10px; }
.industry h3 { margin: 0; font-size: 1.2rem; }
.industry p { margin: 0; font-size: 0.9rem; color: var(--text-2); }
.industry .links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.industry .links a { font-size: 0.8rem; text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 10px; color: var(--text-2); }
.industry .links a:hover { border-color: var(--accent-text); color: var(--accent-text); }
@media (max-width: 900px) { .industries { grid-template-columns: 1fr; } }

/* ==================================================================
   Booking + contact
================================================================== */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.embed { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); min-height: 600px; overflow: hidden; }
.embed .placeholder { padding: var(--s4); color: var(--text-2); }
.embed .placeholder code { font-family: var(--mono); font-size: 0.82rem; background: var(--bg-3); padding: 2px 6px; border-radius: 4px; }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; }
.agenda li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.agenda li:last-child { border-bottom: 1px solid var(--line); }
.agenda li .i { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--accent-text); font-family: var(--mono); font-size: 0.66rem; }
.agenda li b { display: block; font-family: var(--display); }
.agenda li span { font-size: 0.9rem; color: var(--text-2); }
.meeting-types { display: grid; gap: 10px; margin-top: var(--s2); }
.mt { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--bg-1); text-decoration: none; transition: border-color .2s; }
.mt:hover { border-color: var(--accent-text); }
.mt .dur { font-family: var(--mono); font-size: 0.7rem; color: var(--accent-text); min-width: 5ch; }
.mt b { display: block; font-family: var(--display); font-size: 0.95rem; }
.mt span { font-size: 0.82rem; color: var(--text-2); }
.tz { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-top: 12px; }

form.contact { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: clamp(var(--s3), 3vw, var(--s4)); display: grid; gap: var(--s2); }
form.contact .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 600px) { form.contact .two { grid-template-columns: 1fr; } }
form.contact label { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 500; color: var(--text-2); }
form.contact label .opt { color: var(--muted); font-weight: 400; }
form.contact input, form.contact select, form.contact textarea {
  font: inherit; font-size: 1rem; color: var(--text); padding: 12px 14px; min-height: 48px;
  background: var(--bg-0); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
form.contact select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
form.contact input:focus, form.contact select:focus, form.contact textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-dim); }
form.contact textarea { min-height: 130px; resize: vertical; }
form.contact .err-msg { font-size: 0.78rem; color: var(--danger); display: none; }
form.contact label.invalid input, form.contact label.invalid select, form.contact label.invalid textarea { border-color: var(--danger); }
form.contact label.invalid .err-msg { display: block; }
form.contact .status { font-size: 0.9rem; color: var(--text-2); min-height: 1.4em; }
form.contact .status.ok { color: var(--accent-text); }
form.contact .status.err { color: var(--danger); }
form.contact .fine { font-size: 0.8rem; color: var(--muted); margin: 0; }

/* about */
.editorial { display: grid; grid-template-columns: 4fr 7fr; gap: var(--s5); }
.editorial .side { position: sticky; top: 96px; }
.editorial .side h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.editorial .body h3 { margin-top: var(--s4); font-size: 1.3rem; }
.editorial .body p { color: var(--text-2); font-size: 1.05rem; max-width: 40rem; }
.editorial .body ul { color: var(--text-2); padding-left: 18px; display: grid; gap: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) { .editorial { grid-template-columns: 1fr; } .editorial .side { position: static; } }

/* legal */
.legal { max-width: 42rem; color: var(--text-2); }
.legal h2 { font-size: 1.5rem; margin-top: var(--s5); color: var(--text); }

/* ==================================================================
   Motion: reveal
================================================================== */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn, .sol, .service, .case, .problem { transition: none; } }

/* ==================================================================
   Theme toggle
================================================================== */
.theme-btn { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--text-2); transition: color .15s, border-color .15s; }
.theme-btn:hover { color: var(--text); border-color: var(--text-2); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .moon { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .moon { display: block; }
.menu-overlay .theme-btn { width: 100%; height: 48px; grid-auto-flow: column; gap: 10px; font-family: var(--display); font-weight: 700; }

/* ==================================================================
   3D hero: the automation board
   A lead "packet" travels a path across tiles (your tools). Each tile
   rises and ripples the board when the packet lands. Pointer tilts the rig.
================================================================== */
.hero3d { position: relative; width: 100%; aspect-ratio: 700 / 600; perspective: 1500px; perspective-origin: 50% 20%; --rx: 48deg; --rz: -34deg; --dur: 12s; --sc: 1; }
.hero3d .scaler { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform: scale(var(--sc)); transform-style: preserve-3d; }
.hero3d .rig { position: absolute; left: -280px; top: -200px; width: 560px; height: 400px; transform: rotateX(var(--rx)) rotateZ(var(--rz)); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.hero3d .board {
  position: absolute; inset: 0; border-radius: 16px; transform-style: preserve-3d;
  background: var(--board);
  background-image: linear-gradient(var(--board-line) 1px, transparent 1px), linear-gradient(90deg, var(--board-line) 1px, transparent 1px);
  background-size: 30px 30px; background-position: 15px 15px;
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 1px var(--board-side);
}
.hero3d .board::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: var(--board-side); transform: translateZ(-18px) translate(6px, 6px); }
.hero3d .board::after { content: ""; position: absolute; inset: -40px; border-radius: 40px; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); transform: translateZ(-60px); filter: blur(10px); }
:root[data-theme="light"] .hero3d .board::after { background: radial-gradient(closest-side, rgba(16,18,20,.18), transparent); }

.hero3d .wires { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(2px); overflow: visible; }
.hero3d .wires .base { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.hero3d .wires .trail { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 90 1200; stroke-dashoffset: 1200; animation: trail var(--dur) linear infinite; opacity: .9; }
@keyframes trail { to { stroke-dashoffset: -90; } }

.hero3d .packet, .hero3d .packet-shadow { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; offset-path: path("M80 60 H480 V200 H80 V340"); offset-rotate: 0deg; animation: travel var(--dur) linear infinite; }
.hero3d .packet { background: var(--accent-2); box-shadow: 0 0 0 3px rgba(242,181,68,.25), 0 0 18px 4px rgba(242,181,68,.55); transform: translateZ(34px); }
.hero3d .packet-shadow { background: rgba(0,0,0,.5); filter: blur(4px); transform: translateZ(1px) scale(1.4); }
@keyframes travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.hero3d .tile { position: absolute; left: var(--x); top: var(--y); width: 128px; height: 58px; margin: -29px 0 0 -64px; transform-style: preserve-3d; transform: translateZ(16px); animation: tileRise var(--dur) linear infinite; animation-delay: calc((var(--t) - 0.035) * var(--dur)); }
.hero3d .tile .face {
  position: absolute; inset: 0; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-2);
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; padding: 0 10px;
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--text);
  transform-style: preserve-3d; transition: transform .3s var(--ease), border-color .3s;
  animation: tileLight var(--dur) linear infinite; animation-delay: calc((var(--t) - 0.035) * var(--dur));
}
.hero3d .tile .face::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: var(--board-side); transform: translateZ(-16px) translate(5px, 5px); z-index: -1; }
.hero3d .tile .ic { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--muted); animation: icLight var(--dur) linear infinite; animation-delay: calc((var(--t) - 0.035) * var(--dur)); }
.hero3d .tile .ic svg { width: 15px; height: 15px; }
.hero3d .tile small { display: block; font-family: var(--mono); font-weight: 400; font-size: 9px; color: var(--muted); letter-spacing: .03em; white-space: nowrap; }
.hero3d .tile:hover .face { transform: translateZ(22px); border-color: var(--accent); }
.hero3d .ripple { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: translateZ(-15px) scale(.3); pointer-events: none; animation: ripple var(--dur) linear infinite; animation-delay: calc((var(--t) - 0.035) * var(--dur)); }
.hero3d .ripple.r2 { animation-delay: calc((var(--t) - 0.01) * var(--dur)); border-width: 1px; }
@keyframes tileRise  { 0%, 3% { transform: translateZ(16px); } 5%, 10% { transform: translateZ(36px); } 15%, 100% { transform: translateZ(16px); } }
@keyframes tileLight { 0%, 3% { border-color: var(--line-2); background: var(--bg-2); } 5%, 10% { border-color: var(--accent); background: var(--bg-3); } 15%, 100% { border-color: var(--line-2); background: var(--bg-2); } }
@keyframes icLight   { 0%, 3% { color: var(--muted); background: transparent; border-color: var(--line-2); } 5%, 10% { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } 15%, 100% { color: var(--muted); background: transparent; border-color: var(--line-2); } }
@keyframes ripple    { 0%, 3% { opacity: 0; transform: translateZ(-15px) scale(.3); } 5% { opacity: .9; } 24% { opacity: 0; transform: translateZ(-15px) scale(3.6); } 100% { opacity: 0; transform: translateZ(-15px) scale(3.6); } }

/* standing sign: shows the tile's detail, faces the viewer */
.hero3d .sign {
  position: absolute; left: 50%; bottom: 100%; width: 150px; margin-left: -75px; padding: 6px 9px; border-radius: 8px;
  background: var(--bg-1); border: 1px solid var(--accent); color: var(--text-2); font-family: var(--mono); font-size: 10px; line-height: 1.35; text-align: center;
  transform-origin: 50% 100%; transform: rotateX(90deg) translateZ(20px); opacity: 0; transition: opacity .25s, transform .25s var(--ease); pointer-events: none;
}
.hero3d .tile:hover .sign { opacity: 1; transform: rotateX(90deg) translateZ(30px); }

.hero3d .legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero3d .legend .live { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.hero3d .legend .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); animation: blink 2s infinite; }
.hero-list { display: none; }
@media (max-width: 640px) { .hero3d { display: none; } .hero-list { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .hero3d .rig { transition: none; }
  .hero3d .packet, .hero3d .packet-shadow, .hero3d .wires .trail, .hero3d .tile, .hero3d .tile .face, .hero3d .tile .ic, .hero3d .ripple, .hero3d .legend .live::before { animation: none !important; }
  .hero3d .packet, .hero3d .packet-shadow { offset-distance: 38%; }
}

/* ==================================================================
   Effects: gradient mesh, kinetic headline, cursor halo
================================================================== */
.hero .mesh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero .mesh i {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .18;
  animation: drift 26s ease-in-out infinite alternate;
}
.hero .mesh i:nth-child(1) { width: 520px; height: 520px; left: 45%; top: -10%; background: var(--accent); }
.hero .mesh i:nth-child(2) { width: 420px; height: 420px; left: 70%; top: 40%; background: #4f6cff; opacity: .10; animation-duration: 34s; animation-delay: -12s; }
.hero .mesh i:nth-child(3) { width: 360px; height: 360px; left: -10%; top: 50%; background: var(--accent-2); opacity: .08; animation-duration: 40s; animation-delay: -20s; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-90px, 60px) scale(1.15); } }
:root[data-theme="light"] .hero .mesh i { opacity: .16; }

.kinetic .w { display: inline-block; opacity: 0; transform: translateY(.35em) rotate(1.5deg); transform-origin: left bottom; animation: wordIn .7s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes wordIn { to { opacity: 1; transform: none; } }

#halo { position: fixed; left: 0; top: 0; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(242,181,68,.10), transparent 60%); opacity: 0; transition: opacity .4s; will-change: transform; }
:root[data-theme="light"] #halo { background: radial-gradient(circle, rgba(233,169,48,.14), transparent 60%); }
@media (hover: none), (prefers-reduced-motion: reduce) { #halo { display: none; } .hero .mesh i { animation: none; } .kinetic .w { opacity: 1; transform: none; animation: none; } }

/* ==================================================================
   Configurator: build your stack
================================================================== */
.configurator { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: clamp(var(--s3), 3vw, var(--s4)); display: grid; grid-template-columns: 5fr 7fr; gap: var(--s4); }
.configurator .q { margin-bottom: var(--s3); }
.configurator .q .lbl { font-family: var(--mono); font-size: 0.66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.configurator .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.configurator .result { border-left: 1px solid var(--line); padding-left: var(--s4); }
.configurator .result .head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.configurator .result h3 { margin: 0; font-size: 1.2rem; }
.configurator .stack { display: grid; gap: 10px; }
.configurator .stack .item { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--bg-2); text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.configurator .stack .item:hover { border-color: var(--accent); transform: translateX(2px); }
.configurator .stack .item .n { font-family: var(--mono); font-size: 0.7rem; color: var(--accent-text); padding-top: 3px; }
.configurator .stack .item b { display: block; font-family: var(--display); }
.configurator .stack .item span { font-size: 0.85rem; color: var(--text-2); }
.configurator .stack .item.web { border-style: dashed; }
.configurator .cta { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.configurator .empty { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) { .configurator { grid-template-columns: 1fr; } .configurator .result { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--s3); } }

/* ==================================================================
   ROI calculator (modelled)
================================================================== */
.roi { display: grid; grid-template-columns: 6fr 6fr; gap: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); padding: clamp(var(--s3), 3vw, var(--s4)); }
.roi .inputs { display: grid; gap: 14px; }
.roi label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--text-2); }
.roi label input, .roi label select { width: 120px; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg-0); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; text-align: right; }
.roi label select { text-align: left; }
.roi label input:focus, .roi label select:focus { outline: none; border-color: var(--accent); }
.roi .assume { margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 14px; }
.roi .assume .lbl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.roi .out { display: grid; gap: 12px; align-content: start; }
.roi .out .metric b { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.roi .out .metric small { color: var(--muted); }
.roi .out .cta { margin-top: 6px; }
@media (max-width: 900px) { .roi { grid-template-columns: 1fr; } }

/* ==================================================================
   Before / after slider (case studies)
================================================================== */
.ba-slider { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-1); min-height: 260px; --pos: 50%; }
.ba-slider .pane { position: absolute; inset: 0; padding: var(--s3) var(--s3) var(--s3) var(--s3); }
.ba-slider .pane.before { background: var(--bg-1); }
.ba-slider .pane.after { background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); clip-path: inset(0 0 0 var(--pos)); }
.ba-slider .pane h3 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 12px; display: inline-flex; gap: 8px; align-items: center; }
.ba-slider .pane.after h3 { color: var(--accent-text); }
.ba-slider .pane ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 46rem; }
.ba-slider .pane li { font-size: 0.95rem; color: var(--text-2); padding-left: 18px; position: relative; }
.ba-slider .pane.before li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 2px; background: var(--danger); }
.ba-slider .pane.after li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 2px; background: var(--accent); }
.ba-slider .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--accent); transform: translateX(-1px); pointer-events: none; }
.ba-slider .handle::after { content: "⟷"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 16px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.ba-slider input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-slider input[type="range"]:focus-visible ~ .handle { outline: 2px solid var(--accent-2); }
.ba-caption { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-top: 10px; letter-spacing: .04em; }

/* flow tooltips + replay */
.flow .node[data-tip] { cursor: help; }
.flow .node .tip { position: absolute; left: 44px; bottom: calc(100% + 6px); background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 10px; font-family: var(--body); font-weight: 400; font-size: 0.8rem; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; z-index: 5; }
.flow .node:hover .tip, .flow .node:focus-visible .tip { opacity: 1; transform: none; }
.replay { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); cursor: pointer; }
.replay:hover { border-color: var(--accent); color: var(--accent-text); }

/* exit-intent modal */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--s2); background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.modal.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal .box { width: min(520px, 100%); background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: clamp(var(--s3), 4vw, var(--s4)); position: relative; transform: translateY(10px); transition: transform .3s var(--ease); }
.modal.open .box { transform: none; }
.modal h3 { font-size: 1.5rem; }
.modal p { color: var(--text-2); }
.modal .close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font-size: 18px; line-height: 1; }
.modal form { display: grid; gap: 10px; margin-top: var(--s2); }
.modal input { font: inherit; font-size: 1rem; color: var(--text); background: var(--bg-0); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px; }
.modal input:focus { outline: none; border-color: var(--accent); }
.modal .fine { font-size: 0.78rem; color: var(--muted); margin: 4px 0 0; }
.modal .status { font-size: 0.9rem; min-height: 1.3em; color: var(--text-2); }
.modal .status.ok { color: var(--accent-text); }

/* booking success */
.booked { border: 1px solid rgba(242,181,68,.4); background: var(--accent-dim); border-radius: var(--r-lg); padding: var(--s3); display: grid; gap: 10px; }
.booked .tick { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; animation: pop .5s var(--ease); }
.booked .tick svg { width: 22px; height: 22px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.booked h3 { margin: 0; }
.booked ol { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 6px; }

/* ==================================================================
   Site assistant (chat widget)
================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 70; }
.chat-launch { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--text); font-family: var(--display); font-weight: 700; font-size: 0.9rem; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .18s var(--ease), border-color .18s; }
.chat-launch:hover { transform: translateY(-2px); border-color: var(--accent); }
.chat-launch svg { width: 18px; height: 18px; color: var(--accent); }
.chat.open .chat-launch { display: none; }
.chat-panel { position: absolute; right: 0; bottom: 0; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 100px)); display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden; }
.chat-panel header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-panel header b { font-family: var(--display); display: block; }
.chat-panel header small { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: .06em; color: var(--muted); margin-top: 2px; }
.chat-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font-size: 18px; line-height: 1; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.msg { max-width: 88%; padding: 10px 12px; border-radius: 12px; font-size: 0.92rem; line-height: 1.5; }
.msg p { margin: 0 0 6px; } .msg p:last-child { margin: 0; }
.msg ul { margin: 4px 0 0; padding-left: 18px; }
.msg.user { justify-self: end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.msg.bot { justify-self: start; background: var(--bg-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.bot a { color: var(--accent-text); }
.msg.typing { color: var(--muted); letter-spacing: .2em; animation: blink 1s infinite; }
.chat-suggest { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.chat-suggest::-webkit-scrollbar { display: none; }
.chat-suggest .chip { flex: none; font-size: 0.78rem; padding: 6px 10px; min-height: 32px; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg-0); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; }
.chat-form input:focus { outline: none; border-color: var(--accent); }
.chat-fine { margin: 0; padding: 0 16px 10px; font-size: 0.7rem; color: var(--muted); }
.chat-fine a { color: var(--accent-text); }
@media (max-width: 900px) { .chat { bottom: 84px; right: 12px; } .chat.low { bottom: 16px; } .chat-panel { height: min(560px, calc(100vh - 120px)); } }

/* sticky cta hint */
.sticky-cta .hint { display: block; text-align: center; font-family: var(--mono); font-size: 0.64rem; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }

/* ==================================================================
   Ion layer: the remaining effects from the brief
================================================================== */
.block.rule { position: relative; }   /* the old divider light was removed: no lines between sections */

/* problem cards: icon pops in as the row reveals */
.problem .icon { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--accent); margin-bottom: 12px; opacity: 0; transform: scale(.6) rotate(-8deg); transition: transform .5s var(--ease), opacity .5s; transition-delay: calc(var(--i) * 90ms + 150ms); }
.problem .icon svg { width: 17px; height: 17px; }
.problems.in .problem .icon { opacity: 1; transform: none; }

/* services: lift + thin glow border */
.service:hover { box-shadow: 0 0 0 1px rgba(242,181,68,.45), 0 18px 50px -20px rgba(242,181,68,.35); border-color: rgba(242,181,68,.45); }

/* catalog cards: hover reveals outcomes, speeds the mini flow; glow border */
.sol .peek { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s var(--ease), opacity .3s; margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sol .peek li { font-size: 0.82rem; color: var(--accent-text); padding-left: 14px; position: relative; }
.sol .peek li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 1px; background: var(--accent); }
.sol:hover .peek, .sol:focus-visible .peek { max-height: 120px; opacity: 1; }
.sol:hover { box-shadow: 0 0 0 1px rgba(242,181,68,.35), 0 18px 50px -20px rgba(242,181,68,.3); }
.sol:hover .flow.h { --dur: 4s; }
.sol.enter { opacity: 0; transform: scale(.96); }

/* process timeline draws itself */
.timeline::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.6s var(--ease); }
.timeline.in::before { transform: scaleX(1); }
.timeline .stage { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 260ms + 200ms); }
.timeline.in .stage { opacity: 1; transform: none; }
@media (max-width: 900px) { .timeline::before { transform: scaleY(0); transform-origin: top center; } .timeline.in::before { transform: scaleY(1); } }

/* industry trust bar with tooltips */
.industry-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.industry-bar .ib { position: relative; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 0.88rem; color: var(--text-2); background: var(--bg-1); text-decoration: none; transition: border-color .2s, color .2s; }
.industry-bar .ib:hover, .industry-bar .ib:focus-visible { border-color: var(--accent); color: var(--text); }
.industry-bar .ib .tipbox { position: absolute; left: 0; bottom: calc(100% + 8px); width: 260px; padding: 10px 12px; border-radius: var(--r); background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text-2); font-size: 0.8rem; line-height: 1.45; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; pointer-events: none; z-index: 5; }
.industry-bar .ib .tipbox b { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px; }
.industry-bar .ib:hover .tipbox, .industry-bar .ib:focus-visible .tipbox { opacity: 1; transform: none; }

/* final CTA: pulse behind the primary button */
.cta-band .btn.primary { position: relative; }
.cta-band .btn.primary::before { content: ""; position: absolute; inset: -4px; border-radius: 999px; box-shadow: 0 0 0 0 rgba(242,181,68,.55); animation: ctaPulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(242,181,68,.55); } 70% { box-shadow: 0 0 0 18px rgba(242,181,68,0); } 100% { box-shadow: 0 0 0 0 rgba(242,181,68,0); } }

/* case-study story: rail draws as you scroll, sections reveal, metrics pop */
.numbered { position: relative; }
.numbered::before { content: ""; position: absolute; left: -22px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 100% 0%, var(--line); }
@supports (animation-timeline: view()) {
  .numbered::before { animation: rail linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; }
  @keyframes rail { from { background-size: 100% 0%; } to { background-size: 100% 100%; } }
}
@media (max-width: 1360px) { .numbered::before { display: none; } }
.impact .metric, .metrics .metric { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.impact.in .metric, .metrics.in .metric { opacity: 1; transform: none; }
.impact.in .metric:nth-child(2), .metrics.in .metric:nth-child(2) { transition-delay: .12s; }
.impact.in .metric:nth-child(3), .metrics.in .metric:nth-child(3) { transition-delay: .24s; }

/* booking explainer above the calendar */
.explainer { margin-bottom: var(--s3); }
.explainer .flow.h { gap: 10px; }
.explainer .flow.h .node { font-family: var(--display); font-size: 0.9rem; font-weight: 700; padding: 10px 14px; background: var(--bg-1); border-color: var(--line-2); }
.explainer .flow.h .link { width: 22px; }

/* about: soft background shapes with parallax */
.shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.shapes i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .12; }
.shapes i:nth-child(1) { width: 420px; height: 420px; right: -120px; top: 40px; background: var(--accent); }
.shapes i:nth-child(2) { width: 300px; height: 300px; left: -80px; top: 60%; background: #4f6cff; opacity: .08; }
@supports (animation-timeline: scroll()) {
  .shapes i { animation: parallax linear both; animation-timeline: scroll(); }
  .shapes i:nth-child(2) { animation-direction: reverse; }
  @keyframes parallax { from { transform: translateY(0); } to { transform: translateY(-160px); } }
}
.page-head.with-shapes { position: relative; }
.page-head.with-shapes .wrap { position: relative; z-index: 1; }

/* contact: success slides in */
form.contact .status.ok { animation: slideIn .45s var(--ease); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* motion switch (footer) */
.motion-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.motion-btn:hover { color: var(--accent-text); }

/* site-level no-animation mode: mirrors the OS reduced-motion setting */
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation: none !important; transition: none !important; }
:root[data-motion="reduced"] .reveal, :root[data-motion="reduced"] .kinetic .w, :root[data-motion="reduced"] .timeline .stage, :root[data-motion="reduced"] .problem .icon, :root[data-motion="reduced"] .impact .metric, :root[data-motion="reduced"] .metrics .metric { opacity: 1; transform: none; }
:root[data-motion="reduced"] .timeline::before { transform: none; }
:root[data-motion="reduced"] #halo { display: none; }
@media (prefers-reduced-motion: reduce) {
  .block.rule::before, .cta-band .btn.primary::before, .shapes i, .numbered::before { animation: none !important; }
  .timeline::before { transform: none; } .timeline .stage, .problem .icon, .impact .metric, .metrics .metric { opacity: 1; transform: none; transition: none; }
  .sol .peek { transition: none; }
}

/* Ion additions: glow on more cards, integration tooltips, animated FAQ */
.case:hover, .industry:hover { box-shadow: 0 0 0 1px rgba(242,181,68,.35), 0 18px 50px -20px rgba(242,181,68,.3); border-color: rgba(242,181,68,.45); }
.industry { transition: border-color .25s, box-shadow .25s; }
.int[data-tip] { position: relative; cursor: default; }
.int[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 6;
  width: max-content; max-width: 240px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2);
  font-size: 0.8rem; line-height: 1.4; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.int[data-tip]:hover::after, .int[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hub .side.right .int[data-tip]::after { left: auto; right: 0; }
/* FAQ: animated open/close where the browser supports it (Chrome 131+, others fall back to instant) */
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } .case:hover, .industry:hover { box-shadow: none; } }