/* ============================================================================
   DBA CHILE SPA — shared design system (multi-page site)
   ----------------------------------------------------------------------------
   Every page of the site loads this single stylesheet. There is NOT a single
   inline `style` attribute nor an inline <style> block anywhere in the HTML:
   that is what allows the gateway to ship a strict Content-Security-Policy
   (`style-src 'self'`) with no `unsafe-inline` escape hatch.

   Layer order fixes cascade priority explicitly (tokens < base < layout < ui).
   ========================================================================== */
@layer tokens, base, layout, ui, motion, utils;

/* ---------- Registered custom properties (animatable gradients/angles) ---- */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --glow { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --shine { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

@layer tokens {
  :root {
    /* Brand hue drives every accent through OKLCH. 183.5 reproduces the
       original palette: #14B8A6 / #0F766E / #115E59. The Brand Lab slider
       rewrites --bh at runtime to prove full parametrisation. */
    --bh: 183.5;
    --bc: 0.113;

    --brand-100: oklch(0.95 calc(var(--bc) * 0.30) var(--bh));
    --brand-200: oklch(0.90 calc(var(--bc) * 0.55) var(--bh));
    --brand-300: oklch(0.855 calc(var(--bc) * 0.80) var(--bh));  /* ~#5EEAD4 */
    --brand-400: oklch(0.80 calc(var(--bc) * 0.95) var(--bh));
    --brand-500: oklch(0.715 var(--bc) var(--bh));               /* ~#14B8A6 */
    --brand-600: oklch(0.565 calc(var(--bc) * 0.80) var(--bh));  /* ~#0F766E */
    --brand-700: oklch(0.475 calc(var(--bc) * 0.68) var(--bh));  /* ~#115E59 */
    --brand-900: oklch(0.30 calc(var(--bc) * 0.45) var(--bh));

    /* Support hues stay relative to the brand so recolouring never clashes */
    --violet: oklch(0.70 0.13 calc(var(--bh) + 90));
    --amber:  oklch(0.80 0.14 calc(var(--bh) + 190));
    /* Status colours are redefined per theme so small text always clears 4.5:1 */
    --danger: oklch(0.63 0.20 25);
    --ok:     oklch(0.75 0.15 155);
    --warn:   oklch(0.80 0.15 75);

    /* Typography scale — fluid, clamped, no horizontal overflow at 320px */
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;

    --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --fs-sm:   clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
    --fs-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
    --fs-lg:   clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    --fs-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
    --fs-2xl:  clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
    --fs-3xl:  clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
    --fs-hero: clamp(2.3rem, 1.4rem + 3.6vw, 4.35rem);

    /* Spacing scale (density 5/10 — standard marketing rhythm) */
    --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
    --sp-9: clamp(3.5rem, 7vw, 7rem);

    --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

    --shell: min(1240px, 100% - clamp(2rem, 6vw, 5rem));
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --spring: linear(0,.2 4%,.62 8.6%,.86 12%,1.02 15.6%,1.08 19%,1.06 23%,1 30%,.99 40%,1);
    --t-fast: 140ms; --t-med: 260ms; --t-slow: 620ms;

    --nav-h: 68px;
  }

  /* ---- Dark surface (default: maximum impact) ---- */
  :root, [data-theme="dark"] {
    --bg:        oklch(0.17 0.014 var(--bh));
    --bg-deep:   oklch(0.13 0.013 var(--bh));
    --surface:   oklch(0.215 0.017 var(--bh));
    --surface-2: oklch(0.255 0.019 var(--bh));
    --line:      oklch(0.34 0.021 var(--bh));
    --line-soft: oklch(0.28 0.017 var(--bh));
    --text:      oklch(0.975 0.006 var(--bh));
    --text-2:    oklch(0.83 0.014 var(--bh));
    --text-3:    oklch(0.68 0.016 var(--bh));
    --accent:    var(--brand-400);
    --accent-strong: var(--brand-300);
    --on-accent: oklch(0.16 0.03 var(--bh));
    --glass:     color-mix(in oklab, var(--surface) 62%, transparent);
    --shadow-1: 0 1px 2px oklch(0 0 0 / .5), 0 8px 24px -12px oklch(0 0 0 / .7);
    --shadow-2: 0 24px 70px -28px oklch(0 0 0 / .85), 0 2px 8px oklch(0 0 0 / .4);
    --ring: 0 0 0 3px color-mix(in oklab, var(--brand-400) 55%, transparent);
    --grid-line: color-mix(in oklab, var(--brand-300) 9%, transparent);
    --code-bg: oklch(0.145 0.016 var(--bh));
  }

  /* ---- Light surface ---- */
  [data-theme="light"] {
    --bg:        oklch(0.985 0.004 var(--bh));
    --bg-deep:   oklch(0.955 0.008 var(--bh));
    --surface:   oklch(1 0 0);
    --surface-2: oklch(0.975 0.007 var(--bh));
    --line:      oklch(0.90 0.011 var(--bh));
    --line-soft: oklch(0.935 0.008 var(--bh));
    --text:      oklch(0.235 0.021 var(--bh));
    --text-2:    oklch(0.42 0.019 var(--bh));
    --text-3:    oklch(0.495 0.017 var(--bh));
    --ok:        oklch(0.52 0.13 155);
    --warn:      oklch(0.53 0.14 60);
    --danger:    oklch(0.52 0.20 27);
    --accent:    var(--brand-600);          /* 4.9:1 on white — WCAG AA */
    --accent-strong: var(--brand-700);
    --on-accent: oklch(1 0 0);
    --glass:     color-mix(in oklab, white 72%, transparent);
    --shadow-1: 0 1px 2px oklch(0.5 0.03 var(--bh) / .10), 0 10px 26px -16px oklch(0.5 0.03 var(--bh) / .30);
    --shadow-2: 0 28px 64px -30px oklch(0.45 0.04 var(--bh) / .38), 0 2px 6px oklch(0.5 0.03 var(--bh) / .08);
    --ring: 0 0 0 3px color-mix(in oklab, var(--brand-600) 45%, transparent);
    --grid-line: color-mix(in oklab, var(--brand-700) 10%, transparent);
    --code-bg: oklch(0.20 0.02 var(--bh));
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1.5rem);
    color-scheme: dark;
  }
  [data-theme="light"] { color-scheme: light; }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.65;
    font-synthesis-weight: none;
    letter-spacing: -0.011em;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
  }

  /* viewport-fit=cover is declared, so notches must be paid for explicitly */
  body { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }

  /* Touch tuning: no 300ms double-tap delay, no default grey flash */
  :where(a, button, [role="button"], summary, label, input, select) { touch-action: manipulation; }
  html { -webkit-tap-highlight-color: color-mix(in oklab, var(--brand-500) 22%, transparent); }

  img, svg, canvas, video { display: block; max-width: 100%; }
  h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; text-decoration: none; }
  button, input, textarea, select { font: inherit; color: inherit; }
  ul, ol { list-style: none; padding: 0; }
  code { font-family: var(--font-mono); font-size: 0.94em; }

  /* Visible, consistent focus for every interactive element */
  :focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
    border-radius: 6px;
  }
  :where(a, button, [role="button"], summary, input, select, textarea):focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--brand-500); color: oklch(0.14 0.02 var(--bh)); }

  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--bg-deep); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--brand-600), var(--brand-700));
    border-radius: 99px; border: 3px solid var(--bg-deep);
  }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--brand-500), var(--brand-600)); }
  html { scrollbar-color: var(--brand-600) var(--bg-deep); scrollbar-width: thin; }
}

@layer layout {
  .shell { width: var(--shell); margin-inline: auto; }
  section { position: relative; padding-block: var(--sp-9); }
  .stack > * + * { margin-top: var(--sp-4); }

  /* Modern auto-fit grids: no media queries needed for the common cases */
  .grid { display: grid; gap: clamp(0.9rem, 1.6vw, 1.4rem); }
  .g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
  .g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
  /* Two asymmetric columns that collapse on their own */
  .split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
  .split-wide { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
                grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  @media (max-width: 940px) { .split-wide { grid-template-columns: 1fr; } }
}

@layer ui {
  /* ===================== Skip link & scroll progress ===================== */
  .skip {
    position: fixed; top: 0; left: 50%; translate: -50% -140%; z-index: 999;
    background: var(--accent); color: var(--on-accent); font-weight: 700;
    padding: 0.7rem 1.3rem; border-radius: 0 0 var(--r-md) var(--r-md);
    transition: translate var(--t-med) var(--ease);
  }
  .skip:focus { translate: -50% 0; }

  .progress {
    position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 90;
    background: linear-gradient(90deg, var(--brand-300), var(--brand-500) 45%, var(--violet));
    transform-origin: 0 50%; scale: var(--p, 0) 1; pointer-events: none;
    box-shadow: 0 0 18px color-mix(in oklab, var(--brand-400) 60%, transparent);
  }

  /* ============================== Navigation ============================= */
  .nav {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 80;
    height: var(--nav-h); display: flex; align-items: center;
    transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease), backdrop-filter var(--t-med);
    border-bottom: 1px solid transparent;
  }
  .nav[data-stuck="true"] {
    background: var(--glass);
    backdrop-filter: blur(16px) saturate(1.7);
    -webkit-backdrop-filter: blur(16px) saturate(1.7);
    border-bottom-color: var(--line-soft);
    box-shadow: var(--shadow-1);
  }
  .nav .shell { display: flex; align-items: center; gap: var(--sp-4); width: var(--shell); }

  .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; letter-spacing: -0.04em; font-size: 1.06rem; }
  .brand-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 3px 10px color-mix(in oklab, var(--brand-500) 45%, transparent)); }
  .brand small { display: block; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; color: var(--text-3); text-transform: uppercase; line-height: 1; margin-top: 2px; }

  .nav-links { display: flex; gap: 0.1rem; margin-inline: auto; }
  .nav-links a {
    position: relative; padding: 0.55rem 0.7rem; border-radius: var(--r-pill); white-space: nowrap;
    font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .nav-links a:hover { color: var(--text); background: color-mix(in oklab, var(--accent) 12%, transparent); }
  .nav-links a[aria-current="page"] { color: var(--accent-strong); }
  .nav-links a[aria-current="page"]::after {
    content: ''; position: absolute; inset-block-end: 2px; inset-inline: 0.75rem;
    height: 2px; border-radius: 2px; background: var(--accent-strong);
  }

  .icon-btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
    border-radius: var(--r-md); border: 1px solid var(--line-soft); background: transparent;
    cursor: pointer; color: var(--text-2);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease);
  }
  .icon-btn:hover { color: var(--accent-strong); border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
  .icon-btn:active { scale: 0.93; }
  .kbd-hint {
    display: none; align-items: center; gap: 0.4rem; height: 44px; padding-inline: 0.85rem;
    border: 1px solid var(--line-soft); border-radius: var(--r-md); color: var(--text-3);
    font-size: var(--fs-xs); background: transparent; cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
  }
  .kbd-hint:hover { border-color: var(--accent); color: var(--accent-strong); }
  kbd {
    font-family: var(--font-mono); font-size: 0.68rem; padding: 0.15rem 0.4rem;
    border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--text-2);
  }

  /* ================================ Buttons ============================== */
  .btn {
    --_bg: var(--accent);
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    gap: 0.55rem; min-height: 48px; padding: 0.8rem 1.5rem; border: 0;
    border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-sm);
    letter-spacing: -0.01em; cursor: pointer; overflow: hidden; isolation: isolate;
    background: var(--_bg); color: var(--on-accent); white-space: nowrap;
    box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--accent) 75%, transparent);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), filter var(--t-fast);
    translate: var(--mx, 0) var(--my, 0);   /* magnetic hover offset */
  }
  .btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
    background: linear-gradient(120deg, transparent 20%, oklch(1 0 0 / .35) 50%, transparent 80%);
    translate: -120% 0; transition: opacity var(--t-fast);
  }
  .btn:hover { box-shadow: 0 18px 44px -14px color-mix(in oklab, var(--accent) 85%, transparent); filter: brightness(1.06); }
  .btn:hover::before { opacity: 1; animation: sweep 900ms var(--ease); }
  .btn:active { transform: scale(0.97); }
  .btn[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.3); }
  .btn-ghost {
    background: transparent; color: var(--text); box-shadow: none;
    border: 1px solid var(--line); backdrop-filter: blur(8px);
  }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent-strong); background: color-mix(in oklab, var(--accent) 10%, transparent); filter: none; }
  .btn-sm { min-height: 40px; padding: 0.5rem 1rem; font-size: var(--fs-xs); }
  .btn-lg { min-height: 56px; padding: 1rem 2rem; font-size: var(--fs-base); }
  .btn .ripple {
    position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
    background: oklch(1 0 0 / .45); pointer-events: none; animation: ripple 620ms var(--ease) forwards;
  }
  @keyframes sweep { to { translate: 120% 0; } }
  @keyframes ripple { to { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } }

  /* ================================= Chips =============================== */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.95rem;
    border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-strong);
    background: color-mix(in oklab, var(--accent) 13%, transparent);
    border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
    white-space: nowrap;
  }
  .eyebrow svg { width: 14px; height: 14px; }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 70%, transparent); animation: beat 2.4s ease-out infinite; }
  @keyframes beat { 70%, 100% { box-shadow: 0 0 0 9px transparent; } }

  .grad { background: linear-gradient(100deg, var(--brand-300), var(--brand-500) 40%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* ============================== Section head =========================== */
  .head { max-width: 62ch; margin-bottom: var(--sp-7); }
  .head h2 { font-size: var(--fs-3xl); margin-block: 0.7rem 0.8rem; }
  .head p { color: var(--text-2); font-size: var(--fs-lg); }

  /* ================================= Cards =============================== */
  .card {
    position: relative; padding: clamp(1.2rem, 2.2vw, 1.7rem); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-1); overflow: hidden; isolation: isolate;
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
    container-type: inline-size;
  }
  /* Cursor-tracked spotlight, driven by --px/--py set in JS */
  .card::after {
    content: ''; position: absolute; inset: -1px; z-index: -1; opacity: 0; pointer-events: none;
    background: radial-gradient(340px circle at var(--px, 50%) var(--py, 0%), color-mix(in oklab, var(--accent) 22%, transparent), transparent 62%);
    transition: opacity var(--t-med) var(--ease);
  }
  .card:hover, .card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: color-mix(in oklab, var(--accent) 40%, var(--line-soft)); }
  .card:hover::after, .card:focus-within::after { opacity: 1; }
  .card h3 { font-size: var(--fs-lg); margin-bottom: 0.45rem; letter-spacing: -0.025em; }
  .card p { color: var(--text-2); font-size: var(--fs-sm); }
  .card-pad-lg { padding: clamp(1.4rem, 3vw, 2.2rem); }
  .card-static:hover { transform: none; }

  .ico {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
    margin-bottom: 1rem; color: var(--on-accent); flex: none;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    box-shadow: 0 8px 22px -10px color-mix(in oklab, var(--brand-500) 85%, transparent);
  }
  .ico svg { width: 23px; height: 23px; }
  .ico-sm { width: 42px; height: 42px; margin: 0; }
  .card:hover .ico { animation: nudge 620ms var(--spring); }
  @keyframes nudge { 50% { transform: translateY(-5px) rotate(-6deg); } }

  /* ================================= Hero ================================ */
  .hero {
    position: relative; min-height: min(92svh, 880px); display: grid; align-items: center;
    padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-7); overflow: clip;
  }
  /* The light surface needs its own tint, otherwise the generative background
     has nothing to read against. */
  [data-theme="light"] .hero { background: linear-gradient(180deg, oklch(0.955 0.035 var(--bh)), var(--bg) 92%); }
  [data-theme="light"] .hero-veil {
    background:
      radial-gradient(115% 78% at 10% 6%, color-mix(in oklab, var(--brand-300) 62%, transparent), transparent 60%),
      radial-gradient(88% 68% at 94% 20%, color-mix(in oklab, var(--violet) 30%, transparent), transparent 64%),
      linear-gradient(to bottom, transparent 58%, var(--bg) 99%);
  }
  .fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.95; }
  .hero-veil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(120% 80% at 12% 8%, color-mix(in oklab, var(--brand-600) 26%, transparent), transparent 60%),
      radial-gradient(90% 70% at 92% 22%, color-mix(in oklab, var(--violet) 20%, transparent), transparent 62%),
      linear-gradient(to bottom, transparent 55%, var(--bg) 99%);
  }
  .hero .shell { position: relative; z-index: 2; }
  .hero h1 { font-size: var(--fs-hero); letter-spacing: -0.05em; font-weight: 800; line-height: 1.04; margin-block: 1.1rem 1.2rem; max-width: 15ch; }
  /* No overflow clipping here: the headline must be free to wrap on narrow
     viewports. The reveal is carried by each word, not by a mask. */
  .hero h1 .line { display: block; padding-bottom: 0.06em; }
  .hero h1 .line > span { display: block; }
  .hero-sub { font-size: var(--fs-lg); color: var(--text-2); max-width: 54ch; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--sp-5); }

  /* Compact hero for interior pages */
  .page-hero { position: relative; padding-block: calc(var(--nav-h) + var(--sp-7)) var(--sp-7); overflow: clip; }
  .page-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(90% 120% at 8% 0%, color-mix(in oklab, var(--brand-600) 22%, transparent), transparent 60%),
      radial-gradient(70% 90% at 95% 10%, color-mix(in oklab, var(--violet) 16%, transparent), transparent 62%);
  }
  [data-theme="light"] .page-hero::before {
    background:
      radial-gradient(90% 120% at 8% 0%, color-mix(in oklab, var(--brand-300) 55%, transparent), transparent 62%),
      radial-gradient(70% 90% at 95% 10%, color-mix(in oklab, var(--violet) 24%, transparent), transparent 62%);
  }
  .page-hero .shell { position: relative; z-index: 1; }
  .page-hero h1 { font-size: var(--fs-3xl); margin-block: 0.9rem 1rem; max-width: 22ch; }
  .page-hero p.lead { font-size: var(--fs-lg); color: var(--text-2); max-width: 68ch; }

  .crumbs { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
  .crumbs a:hover { color: var(--accent-strong); }
  .crumbs li + li::before { content: '/'; margin-right: 0.45rem; color: var(--line); }
  .crumbs li { display: inline-flex; align-items: center; }

  .stats { display: flex; flex-wrap: wrap; row-gap: 1.3rem; column-gap: clamp(1.2rem, 3vw, 2.6rem); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line-soft); list-style: none; }
  .stat { min-width: 9.5rem; }   /* reserved width: counters must not reflow siblings */
  .stat b { display: block; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.045em; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
  .stat span { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; }

  /* ===================== 3D brain (canvas point cloud) =================== */
  .brain-stage {
    position: relative; display: grid; place-items: center;
    min-height: min(74vw, 480px);
    /* pan-y keeps vertical page scrolling working on touch devices while
       horizontal drags still rotate the brain. */
    touch-action: pan-y;
  }
  .brain-stage canvas {
    width: 100%; height: 100%; position: absolute; inset: 0;
    cursor: grab; border-radius: var(--r-xl);
  }
  .brain-stage canvas:active { cursor: grabbing; }
  .brain-stage canvas:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; }
  .brain-glow {
    position: absolute; inset: 8%; border-radius: 50%; z-index: -1; filter: blur(52px);
    background: radial-gradient(circle, color-mix(in oklab, var(--brand-500) 52%, transparent), transparent 68%);
    animation: pulse-glow 6s ease-in-out infinite;
  }
  @keyframes pulse-glow { 50% { opacity: .55; scale: 1.06; } }
  .brain-hint {
    position: absolute; inset-block-end: 0; inset-inline: 0; text-align: center;
    font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; letter-spacing: 0.06em;
    display: flex; gap: 0.5rem; align-items: center; justify-content: center; flex-wrap: wrap;
    pointer-events: none;
  }
  .brain-readout {
    position: absolute; inset-block-start: 0; inset-inline-start: 0;
    font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3);
    background: color-mix(in oklab, var(--surface) 55%, transparent);
    border: 1px solid var(--line-soft); border-radius: var(--r-sm);
    padding: 0.3rem 0.6rem; pointer-events: none; backdrop-filter: blur(6px);
  }

  /* ============================== Tech marquee =========================== */
  .marquee { position: relative; overflow: hidden; padding-block: 1.1rem; min-height: 3.6rem; border-block: 1px solid var(--line-soft); background: color-mix(in oklab, var(--surface) 50%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee-track { display: flex; gap: 3rem; width: max-content; animation: slide 34s linear infinite; }
  .mq-set { display: flex; gap: 3rem; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
  .marquee-track span { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: var(--fs-sm); color: var(--text-3); letter-spacing: -0.02em; white-space: nowrap; }
  .marquee-track svg { width: 19px; height: 19px; color: var(--accent); }
  @keyframes slide { to { translate: -50% 0; } }

  /* =============================== Bento grid ============================ */
  .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.8rem, 1.5vw, 1.2rem); }
  .bento > * { grid-column: span 2; }
  .bento > .wide { grid-column: span 3; }
  .bento > .full { grid-column: span 6; }
  @media (max-width: 900px) { .bento > * { grid-column: span 3; } }
  @media (max-width: 620px) { .bento > *, .bento > .wide { grid-column: span 6; } }

  /* ============================ Query optimizer ========================== */
  .lab { border-radius: var(--r-xl); border: 1px solid var(--line-soft); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
  .lab-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.1rem; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
  .lab-bar .lights { display: flex; gap: 6px; }
  .lab-bar .lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
  .lab-bar .lights i:nth-child(1) { background: oklch(0.68 0.19 25); }
  .lab-bar .lights i:nth-child(2) { background: oklch(0.80 0.15 85); }
  .lab-bar .lights i:nth-child(3) { background: var(--ok); }
  .lab-bar strong { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
  .code {
    font-family: var(--font-mono); font-size: clamp(0.72rem, 1.5vw, 0.84rem); line-height: 1.75;
    background: var(--code-bg); color: oklch(0.92 0.01 var(--bh)); padding: 1.15rem 1.25rem;
    overflow-x: auto; tab-size: 2; margin: 0; scrollbar-width: thin;
  }
  .code .k { color: var(--brand-300); font-weight: 600; }
  .code .f { color: var(--violet); }
  .code .s { color: var(--amber); }
  .code .c { color: oklch(0.60 0.02 var(--bh)); font-style: italic; }
  .code .hl { background: color-mix(in oklab, var(--ok) 22%, transparent); border-radius: 4px; padding: 1px 3px; }
  .code .bad { background: color-mix(in oklab, var(--danger) 24%, transparent); border-radius: 4px; padding: 1px 3px; }

  /* Space reserved for the four plan rows before JS injects them (CLS = 0) */
  .plan { display: grid; gap: 0.55rem; padding: 1.1rem 1.25rem; min-height: 8.5rem; align-content: center; }
  .plan-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2.4fr auto; gap: 0.75rem; align-items: center; font-size: var(--fs-xs); }
  .plan-row span:first-child { color: var(--text-2); font-weight: 600; }
  .bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
  .bar i {
    display: block; height: 100%; border-radius: 99px; width: var(--w, 0%);
    background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
    transition: width 900ms var(--ease), background 400ms var(--ease);
  }
  .bar.slow i { background: linear-gradient(90deg, oklch(0.60 0.19 25), oklch(0.75 0.16 45)); }
  .plan-row .ms { font-family: var(--font-mono); color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 500; }
  .lab-foot { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
  .verdict { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; }
  .verdict.win { color: var(--ok); }
  .verdict.warn { color: var(--warn); }

  /* B-tree seek visualiser (laboratorio) */
  .btree { display: grid; gap: 0.9rem; justify-items: center; padding-block: 0.5rem; min-height: 15rem; }
  .btree-level { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
  .btree-node {
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
    padding: 0.4rem 0.7rem; border-radius: var(--r-sm); border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text-3); min-width: 3.4rem; text-align: center;
    transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease), scale var(--t-med) var(--spring);
  }
  .btree-node[data-state="path"] { border-color: var(--accent); color: var(--accent-strong); background: color-mix(in oklab, var(--accent) 16%, var(--surface-2)); scale: 1.06; }
  .btree-node[data-state="hit"] { border-color: var(--ok); color: var(--on-accent); background: var(--ok); scale: 1.12; }
  .btree-node[data-state="scan"] { border-color: var(--danger); color: var(--danger); background: color-mix(in oklab, var(--danger) 14%, var(--surface-2)); }
  .btree-caption { font-size: var(--fs-xs); color: var(--text-3); font-family: var(--font-mono); }

  /* ============================ Live dashboard =========================== */
  .obs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
  .metric { padding: 1.1rem 1.25rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-soft); }
  .metric h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); font-weight: 700; }
  .metric b { display: block; font-family: var(--font-mono); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -0.04em; margin-block: 0.25rem; font-variant-numeric: tabular-nums; }
  .metric canvas { width: 100%; height: 46px; }
  .trend { font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; gap: 0.25rem; }
  .trend.up { color: var(--ok); } .trend.down { color: var(--danger); }

  .gauge { display: grid; place-items: center; }
  .gauge svg { width: 100%; max-width: 150px; aspect-ratio: 1; transform: rotate(-90deg); }
  .gauge circle { fill: none; stroke-width: 9; stroke-linecap: round; }
  .gauge .track { stroke: var(--surface-2); }
  .gauge .val { stroke: url(#gg); stroke-dasharray: var(--c, 283); stroke-dashoffset: var(--o, 283); transition: stroke-dashoffset 1.6s var(--ease); }
  .gauge figcaption { text-align: center; margin-top: 0.5rem; }
  .gauge figcaption b { font-family: var(--font-mono); font-size: var(--fs-xl); color: var(--accent-strong); }

  .log-feed { font-family: var(--font-mono); font-size: var(--fs-xs); display: grid; gap: 0.55rem; min-height: 11rem; align-content: start; margin-top: var(--sp-4); color: var(--text-2); }
  .log-time { color: var(--text-3); }
  .log-ok { color: var(--ok); }
  .log-warn { color: var(--warn); }

  /* ============================== Brand lab ============================== */
  .swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .swatch { width: 46px; height: 46px; border-radius: 11px; border: 1px solid var(--line-soft); box-shadow: var(--shadow-1); }
  .sw-200 { background: var(--brand-200); } .sw-300 { background: var(--brand-300); }
  .sw-500 { background: var(--brand-500); } .sw-600 { background: var(--brand-600); }
  .sw-700 { background: var(--brand-700); }
  input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px;
    background: linear-gradient(90deg, oklch(0.72 0.14 0), oklch(0.72 0.14 60), oklch(0.72 0.14 120), oklch(0.72 0.14 180), oklch(0.72 0.14 240), oklch(0.72 0.14 300), oklch(0.72 0.14 360));
    cursor: pointer; margin-block: 0.9rem;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand-500); border: 3px solid var(--surface); box-shadow: 0 3px 12px oklch(0 0 0 / .45); cursor: grab;
  }
  input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: var(--brand-500);
    border: 3px solid var(--surface); box-shadow: 0 3px 12px oklch(0 0 0 / .45); cursor: grab;
  }

  .seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-soft); flex-wrap: wrap; }
  .seg button {
    border: 0; background: transparent; color: var(--text-2); cursor: pointer; font-size: var(--fs-xs);
    font-weight: 700; padding: 0.5rem 0.95rem; border-radius: var(--r-pill); min-height: 38px;
    transition: color var(--t-fast) var(--ease);
  }
  .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { color: var(--on-accent); background: var(--accent); }

  /* Device preview frames */
  .devices { display: flex; gap: 1.4rem; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
  .device { border-radius: 22px; border: 2px solid var(--line); background: var(--bg-deep); padding: 8px; box-shadow: var(--shadow-2); position: relative; overflow: hidden; }
  .device::before { content: ''; position: absolute; top: 3px; left: 50%; translate: -50% 0; width: 46px; height: 4px; border-radius: 99px; background: var(--line); }
  .device .screen { border-radius: 14px; overflow: hidden; background: var(--surface); position: relative; }
  .device figcaption { text-align: center; font-size: var(--fs-xs); color: var(--text-3); margin-top: 0.55rem; font-weight: 600; }
  .device.phone .screen { width: 132px; height: 264px; }
  .device.tablet .screen { width: 206px; height: 264px; }
  .device.desk .screen { width: 336px; height: 210px; }

  /* Mini wireframe used inside the device screens */
  .mini { --u: 4px; padding: 8px; display: grid; gap: 6px; height: 100%; background: var(--surface); grid-template-rows: auto 1fr auto; }
  .mini .mbar { height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); }
  .mini .mhero { border-radius: 6px; background: color-mix(in oklab, var(--accent) 18%, var(--surface-2)); flex: 1; min-height: 44px; display: grid; align-content: center; gap: 4px; padding: 6px; }
  .mini .ml { height: 5px; border-radius: 3px; background: color-mix(in oklab, var(--text) 22%, transparent); }
  .mini .ml.sm { width: 55%; } .mini .ml.xs { width: 34%; background: var(--accent); }
  .mini .mgrid { display: grid; gap: 5px; }
  .mini .mgrid-1 { grid-template-columns: 1fr; }
  .mini .mgrid-2 { grid-template-columns: 1fr 1fr; }
  .mini .mgrid-4 { grid-template-columns: repeat(4, 1fr); }
  .mini .mhero-split { grid-template-columns: 1fr 1fr; display: grid; align-items: center; }
  .mini .mcell { border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line-soft); min-height: 26px; }
  .mini .mcell-tall { min-height: 44px; }

  /* ================================ Steps =============================== */
  .steps { display: grid; gap: 0; position: relative; }
  .step { display: grid; grid-template-columns: 62px 1fr; gap: 1.2rem; padding-block: 1.4rem; position: relative; }
  .step::before { content: ''; position: absolute; left: 31px; top: 0; bottom: 0; width: 2px; background: var(--line-soft); }
  .step:first-child::before { top: 50%; }
  .step:last-child::before { bottom: 50%; }
  .step-n {
    position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-mono); font-weight: 600; font-size: 1.1rem; background: var(--surface);
    border: 2px solid var(--line); color: var(--text-3);
    transition: border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), scale var(--t-med) var(--spring);
  }
  .step.on .step-n { border-color: var(--accent); color: var(--accent-strong); scale: 1.08; box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 14%, transparent); }
  .step h3 { font-size: var(--fs-lg); margin-bottom: 0.3rem; }
  .step p { color: var(--text-2); font-size: var(--fs-sm); max-width: 62ch; }

  /* ============================== Timeline ============================== */
  .timeline { display: grid; gap: 0; }
  .tl-item { display: grid; grid-template-columns: 88px 1fr; gap: 1.2rem; padding-block: 1.25rem; position: relative; }
  .tl-item::before { content: ''; position: absolute; left: 43px; top: 0; bottom: 0; width: 2px; background: var(--line-soft); }
  .tl-item:first-child::before { top: 50%; }
  .tl-item:last-child::before { bottom: 50%; }
  .tl-year {
    position: relative; z-index: 1; width: 88px; height: 44px; border-radius: var(--r-pill);
    display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700;
    background: var(--surface); border: 2px solid var(--line); color: var(--text-3); font-size: var(--fs-sm);
    transition: border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  }
  .tl-item.on .tl-year { border-color: var(--accent); color: var(--accent-strong); box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 13%, transparent); }
  .tl-item h3 { font-size: var(--fs-lg); margin-bottom: 0.25rem; }
  .tl-item p { color: var(--text-2); font-size: var(--fs-sm); max-width: 66ch; }

  /* =========================== Client sectors =========================== */
  .sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
  .sector {
    padding: 1.2rem 1.3rem; border-radius: var(--r-lg); background: var(--surface);
    border: 1px solid var(--line-soft); display: grid; gap: 0.5rem; align-content: start;
    transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  }
  .sector:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line-soft)); transform: translateY(-4px); }
  .sector b { font-family: var(--font-mono); font-size: var(--fs-xl); color: var(--accent-strong); letter-spacing: -0.04em; }
  .sector h3 { font-size: var(--fs-base); }
  .sector p { font-size: var(--fs-sm); color: var(--text-2); }

  /* ======================= Security: defence layers ===================== */
  .layers { display: grid; gap: 0.7rem; }
  .layer {
    display: grid; grid-template-columns: 46px 1fr auto; gap: 1rem; align-items: center;
    padding: 0.95rem 1.15rem; border-radius: var(--r-md); border: 1px solid var(--line-soft);
    background: linear-gradient(90deg, color-mix(in oklab, var(--accent) calc(var(--depth, 1) * 4%), var(--surface)), var(--surface));
    transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  }
  .layer:hover { border-color: var(--accent); transform: translateX(4px); }
  .layer h3 { font-size: var(--fs-base); margin: 0; }
  .layer p { font-size: var(--fs-xs); color: var(--text-3); margin-top: 0.15rem; }
  .layer .tag { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-strong); white-space: nowrap; }

  /* Client-side self audit */
  .audit { display: grid; gap: 0.5rem; margin-top: var(--sp-4); }
  .audit li {
    display: grid; grid-template-columns: 1fr auto; gap: 0.8rem; align-items: center;
    padding: 0.7rem 0.9rem; border-radius: var(--r-sm); background: var(--surface-2);
    border: 1px solid var(--line-soft); font-size: var(--fs-sm);
  }
  .audit .name { font-weight: 600; }
  .audit .why { display: block; font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
  .badge {
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; padding: 0.25rem 0.6rem;
    border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-3); white-space: nowrap;
  }
  .badge[data-state="pass"] { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 55%, transparent); background: color-mix(in oklab, var(--ok) 12%, transparent); }
  .badge[data-state="fail"] { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 55%, transparent); background: color-mix(in oklab, var(--danger) 12%, transparent); }
  .badge[data-state="warn"] { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 55%, transparent); background: color-mix(in oklab, var(--warn) 12%, transparent); }

  /* ================================ Tables ============================== */
  .table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); scrollbar-width: thin; }
  table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: var(--fs-sm); }
  thead th {
    text-align: left; padding: 0.9rem 1.1rem; background: var(--surface-2); color: var(--text-3);
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 800;
    border-bottom: 1px solid var(--line-soft); position: sticky; top: 0;
  }
  tbody td, tbody th { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--text-2); text-align: left; }
  tbody th { color: var(--text); font-weight: 700; }
  tbody tr:last-child :is(td, th) { border-bottom: 0; }
  tbody tr:hover :is(td, th) { background: color-mix(in oklab, var(--accent) 7%, transparent); }
  td .yes { color: var(--ok); font-weight: 700; }
  td .no { color: var(--text-3); }

  /* ============================== Accordion ============================= */
  details.acc { border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color var(--t-fast); }
  details.acc + details.acc { margin-top: 0.6rem; }
  details.acc:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line-soft)); }
  details.acc summary { cursor: pointer; padding: 1rem 1.15rem; font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; gap: 0.8rem; list-style: none; min-height: 52px; }
  details.acc summary::-webkit-details-marker { display: none; }
  details.acc summary::after { content: ''; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); rotate: 45deg; transition: rotate var(--t-med) var(--ease); flex: none; }
  details.acc[open] summary::after { rotate: -135deg; }
  details.acc[open] summary { color: var(--accent-strong); }
  .acc-body { padding: 0 1.15rem 1.15rem; color: var(--text-2); font-size: var(--fs-sm); }
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details.acc::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-med) var(--ease), content-visibility var(--t-med) allow-discrete; }
    details.acc[open]::details-content { block-size: auto; }
  }

  /* ================================ Forms =============================== */
  .field { display: grid; gap: 0.4rem; }
  .field label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
  .field :is(input, textarea, select) {
    width: 100%; padding: 0.85rem 1rem; border-radius: var(--r-md); min-height: 48px;
    background: var(--bg-deep); border: 1px solid var(--line); color: var(--text);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast);
  }
  .field :is(input, textarea):focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
  .field textarea { min-height: 118px; resize: vertical; }
  .field .err { font-size: var(--fs-xs); color: var(--danger); min-height: 1.1em; font-weight: 600; }
  .field :is(input, textarea)[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent); }
  .field :is(input, textarea)[data-ok="1"] { border-color: color-mix(in oklab, var(--ok) 70%, transparent); }
  /* Honeypot: invisible to humans, irresistible to naive bots. Kept out of the
     tab order and hidden from assistive tech on purpose. */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
  .consent { display: grid; grid-template-columns: 20px 1fr; gap: 0.7rem; align-items: start; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); }
  .consent input { width: 20px; height: 20px; min-height: 20px; margin-top: 3px; accent-color: var(--brand-500); }

  /* ============================ Command palette ========================= */
  dialog.cmdk {
    width: min(620px, 92vw); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-2);
    margin-top: 12vh; overflow: hidden;
  }
  dialog.cmdk::backdrop { background: oklch(0 0 0 / .62); backdrop-filter: blur(6px); }
  dialog.cmdk[open] { animation: pop 260ms var(--ease); }
  dialog.cmdk[open]::backdrop { animation: fade 260ms var(--ease); }
  .cmdk input { width: 100%; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; padding: 1.1rem 1.25rem; font-size: var(--fs-lg); outline: none; }
  .cmdk input:focus-visible { border-bottom-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
  .cmdk ul { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem; }
  .cmdk li button {
    width: 100%; text-align: left; display: flex; align-items: center; gap: 0.8rem; border: 0; background: transparent;
    padding: 0.7rem 0.85rem; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; min-height: 44px;
  }
  .cmdk li button:hover, .cmdk li[data-active="true"] button { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent-strong); }
  .cmdk li button[disabled] { color: var(--text-3); cursor: default; }
  .cmdk li small { margin-left: auto; color: var(--text-3); font-weight: 500; font-size: var(--fs-xs); }
  .cmdk-foot { display: flex; gap: 1rem; padding: 0.6rem 1.25rem; border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--text-3); background: var(--surface-2); }
  @keyframes pop { from { opacity: 0; translate: 0 -14px; scale: 0.97; } }
  @keyframes fade { from { opacity: 0; } }

  /* ============================== Mobile drawer ========================== */
  .drawer {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); z-index: 95;
    background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-2);
    padding: calc(var(--nav-h) + 1rem) calc(1.4rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) 1.4rem; translate: 100% 0;
    transition: translate var(--t-med) var(--ease), visibility var(--t-med); visibility: hidden;
    display: grid; align-content: start; gap: 0.3rem; overscroll-behavior: contain; overflow-y: auto;
  }
  .drawer[data-open="true"] { translate: 0 0; visibility: visible; }
  .drawer a { padding: 0.8rem 0.9rem; border-radius: var(--r-md); font-weight: 700; font-size: var(--fs-lg); }
  .drawer a:hover { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent-strong); }
  .drawer a[aria-current="page"] { color: var(--accent-strong); background: color-mix(in oklab, var(--accent) 10%, transparent); }
  .scrim { position: fixed; inset: 0; z-index: 94; background: oklch(0 0 0 / .55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--t-med), visibility var(--t-med); }
  .scrim[data-open="true"] { opacity: 1; visibility: visible; }

  /* ================================ Toasts ============================== */
  .toasts { position: fixed; inset-block-end: calc(1.2rem + env(safe-area-inset-bottom)); inset-inline-end: calc(1.2rem + env(safe-area-inset-right)); z-index: 120; display: grid; gap: 0.6rem; justify-items: end; pointer-events: none; }
  .toast {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.15rem; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
    font-size: var(--fs-sm); font-weight: 600; max-width: min(380px, 88vw);
    animation: toast-in 420ms var(--spring);
  }
  .toast svg { color: var(--ok); flex: none; }
  .toast.out { animation: toast-out 320ms var(--ease) forwards; }
  @keyframes toast-in { from { opacity: 0; translate: 0 20px; scale: .95; } }
  @keyframes toast-out { to { opacity: 0; translate: 0 12px; scale: .96; } }

  /* ============================ Back to top ============================= */
  .totop {
    position: fixed; inset-block-end: calc(1.2rem + env(safe-area-inset-bottom)); inset-inline-start: calc(1.2rem + env(safe-area-inset-left)); z-index: 70;
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line); color: var(--text-2); cursor: pointer;
    box-shadow: var(--shadow-1); opacity: 0; translate: 0 12px; pointer-events: none;
    transition: opacity var(--t-med), translate var(--t-med) var(--ease), color var(--t-fast), border-color var(--t-fast);
  }
  .totop[data-show="true"] { opacity: 1; translate: 0 0; pointer-events: auto; }
  .totop:hover { color: var(--accent-strong); border-color: var(--accent); }

  /* ============================== CTA band ============================== */
  .cta-band {
    border-radius: var(--r-xl); padding: clamp(1.8rem, 4vw, 3rem); text-align: center;
    background:
      radial-gradient(120% 140% at 12% 0%, color-mix(in oklab, var(--brand-600) 34%, transparent), transparent 62%),
      var(--surface);
    border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line-soft));
    box-shadow: var(--shadow-2);
  }
  .cta-band h2 { font-size: var(--fs-2xl); margin-bottom: 0.7rem; }
  .cta-band p { color: var(--text-2); max-width: 60ch; margin-inline: auto; }
  .cta-band .row { justify-content: center; margin-top: var(--sp-5); }

  /* ================================ Footer ============================== */
  footer { border-top: 1px solid var(--line-soft); background: var(--bg-deep); padding-block: var(--sp-8) calc(var(--sp-5) + env(safe-area-inset-bottom)); }
  footer h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-3); margin-bottom: 0.9rem; font-weight: 800; }
  footer a { color: var(--text-2); font-size: var(--fs-sm); }
  footer a:hover { color: var(--accent-strong); }
  footer li + li { margin-top: 0.5rem; }
  .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2.5rem; }
  .foot-about { min-width: 220px; }
  .legal { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); }

  /* Decorative section grid. Stays under the content but above the section
     background, so it also shows on tinted (.alt) sections. */
  section > .shell { position: relative; z-index: 1; }
  .grid-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 75%);
  }
}

@layer motion {
  /* ---------------------------------------------------------------------
     Reveal on scroll. Progressive enhancement in three tiers:
     1) Scroll-driven animations (Chromium/Safari, off main thread)
     2) IntersectionObserver fallback -> [data-seen]  (Firefox today)
     3) No JS / no support -> content visible, never hidden
     --------------------------------------------------------------------- */
  .reveal { opacity: 1; }

  @supports (animation-timeline: view()) {
    .reveal {
      opacity: 0; translate: 0 26px; filter: blur(6px);
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    .reveal.late { animation-range: entry 2% cover 34%; }
    @keyframes reveal-in { to { opacity: 1; translate: 0 0; filter: blur(0); } }

    .parallax { animation: par linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes par { to { translate: 0 90px; opacity: .25; } }
  }

  @supports not (animation-timeline: view()) {
    .reveal { opacity: 0; translate: 0 26px; transition: opacity 700ms var(--ease), translate 700ms var(--ease); }
    .reveal[data-seen="true"] { opacity: 1; translate: 0 0; }
  }

  .stagger > * { transition-delay: calc(var(--i, 0) * 65ms); }
  @supports (animation-timeline: view()) { .stagger > * { animation-delay: 0ms; } }

  /* Word-by-word headline reveal (JS splits the text) */
  .word { display: inline-block; opacity: 0; translate: 0 0.9em; rotate: x -60deg; transform-origin: 50% 100%;
          animation: word-up 900ms var(--ease) forwards; animation-delay: calc(var(--wi, 0) * 55ms + 120ms); }
  @keyframes word-up { to { opacity: 1; translate: 0 0; rotate: x 0deg; } }

  .fade-up { animation: fade-up 800ms var(--ease) both; animation-delay: var(--d, 0ms); }
  @keyframes fade-up { from { opacity: 0; translate: 0 22px; } }
  .d-1 { --d: 200ms; } .d-2 { --d: 340ms; } .d-3 { --d: 520ms; } .d-4 { --d: 640ms; } .d-5 { --d: 760ms; }

  .skeleton {
    border-radius: 6px; height: 12px;
    background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in oklab, var(--accent) 18%, var(--surface-2)) 50%, var(--surface-2) 75%);
    background-size: 200% 100%; animation: skl 1.2s linear infinite;
  }
  @keyframes skl { to { background-position: -200% 0; } }

  /* --------------------------- Reduced motion --------------------------- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important;
    }
    .reveal, .word, .fade-up { opacity: 1 !important; translate: none !important; filter: none !important; rotate: none !important; }
    /* Static, single set of logos: no motion and no visible duplicates */
    .marquee { mask-image: none; padding-inline: var(--sp-4); }
    .marquee-track { animation: none !important; justify-content: center; width: 100%; }
    .mq-set { flex-wrap: wrap; justify-content: center; row-gap: 0.9rem; max-width: 100%; column-gap: 1.6rem; }
    .mq-set + .mq-set { display: none; }
    .fx-canvas { display: none; }
    .hero-veil { background: radial-gradient(120% 80% at 20% 10%, color-mix(in oklab, var(--brand-600) 30%, transparent), transparent 62%), linear-gradient(to bottom, transparent 60%, var(--bg)); }
  }
}

@layer utils {
  .muted { color: var(--text-2); }
  .dim { color: var(--text-3); }
  .accent { color: var(--accent-strong); }
  .ok-txt { color: var(--ok); }
  .warn-txt { color: var(--warn); }
  .small { font-size: var(--fs-sm); }
  .xs { font-size: var(--fs-xs); }
  .lg { font-size: var(--fs-lg); }
  .xl { font-size: var(--fs-xl); }
  .h2-size { font-size: var(--fs-3xl); }
  .mono { font-family: var(--font-mono); }
  .bold { font-weight: 700; }
  .center { text-align: center; margin-inline: auto; }
  .txt-center { text-align: center; }
  .row { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
  .row-top { align-items: flex-start; }
  .between { justify-content: space-between; }
  .gap-lg { gap: 1.5rem; }
  .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
  .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
  .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
  .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
  .no-margin { margin: 0; }
  .flex-1 { flex: 1; min-width: min(100%, 240px); }
  .span-all { grid-column: 1 / -1; }
  .max-34 { max-width: 34ch; } .max-60 { max-width: 60ch; } .max-70 { max-width: 70ch; }
  .nowrap { white-space: nowrap; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .alt { background: var(--bg-deep); }
  .pill-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
  .pill-list.center-row { justify-content: center; }
  .pill-list li {
    font-size: var(--fs-xs); font-weight: 700; padding: 0.35rem 0.8rem; border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--accent) 11%, transparent); color: var(--accent-strong);
    border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  }
  .check { display: grid; gap: 0.65rem; }
  .check li { display: grid; grid-template-columns: 22px 1fr; gap: 0.7rem; align-items: start; font-size: var(--fs-sm); color: var(--text-2); }
  .check svg { width: 20px; height: 20px; color: var(--ok); margin-top: 2px; }
  .contact-list { display: grid; gap: 1rem; }
  .contact-list .row { gap: 0.9rem; }
  .quote { border-left: 3px solid var(--accent); padding-left: 1rem; font-style: italic; color: var(--text-2); font-size: var(--fs-sm); }
  .demo-box { min-height: 96px; border: 1px dashed var(--line); border-radius: var(--r-md); padding: 1rem; display: grid; align-content: center; gap: 0.55rem; }
  .demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-top: 1.2rem; }
  .num { font-family: var(--font-mono); color: var(--accent-strong); }

  /* Nav degrades by dropping the least critical control first:
     search hint -> CTA -> links (burger takes over). */
  @media (max-width: 1120px) { .nav-links { display: none; } }
  @media (min-width: 1121px) { .icon-btn.burger { display: none; } }
  @media (min-width: 1340px) { .kbd-hint { display: inline-flex; } }
  @media (max-width: 1260px) { .nav .btn { display: none; } }
  @media (max-width: 880px) { .nav .shell { gap: 0.5rem; } }
  @media (max-width: 520px) {
    :is(.hero-cta, form, .lab-foot) .btn { width: 100%; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .lab-foot { flex-direction: column; align-items: stretch; }
  }

  /* Container query: cards adapt to their own box, not the viewport */
  @container (min-width: 420px) {
    .card.flexy { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start; }
    .card.flexy .ico { margin-bottom: 0; }
  }

  @media print {
    .fx-canvas, .nav, .drawer, .scrim, .totop, .toasts, .progress, .marquee { display: none !important; }
    body { background: #fff; color: #000; }
    section { padding-block: 1.2rem; break-inside: avoid; }
    .card { box-shadow: none; border: 1px solid #ccc; }
  }
}