:root {
    /* From brand book */
    --navy-900: #07111F;
    --navy-800: #0A1220;
    --navy-700: #131D2E;
    --navy-600: #1A2A3F;
    --navy-500: #2A3B55;
    --cyan-400: #5EDCFF;
    --cyan-500: #2BC4F0;
    --cyan-600: #1A8FB8;
    --slate-400: #9AA6B8;
    --slate-500: #6B7888;
    --ink: #F3F5F7;
    --ok: #4ADE80;
    --warn: #F5C46B;

    --sans: 'Exo 2', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: auto; }
  body {
    background: var(--navy-900);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    overflow-x: hidden;
  }

  ::selection { background: var(--cyan-400); color: var(--navy-900); }

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

  /* ───────────── Layout primitives ───────────── */
  .container {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 64px;
  }

  .mono {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate-400);
  }

  /* ───────────── Nav ───────────── */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(7, 17, 31, 0.72);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
  }
  .brand {
    display: flex; align-items: center; gap: 12px;
    font-weight: 500; font-size: 18px; letter-spacing: -0.02em;
  }
  .brand .icon { width: 28px; height: 28px; }
  .brand .wm { display: flex; flex-direction: column; line-height: 0.92; }
  .brand .wm span:last-child { color: var(--slate-400); }

  .nav-links {
    display: flex; gap: 36px; align-items: center;
    font-size: 14px; color: var(--slate-400);
  }
  .nav-links a { transition: color .18s var(--ease); }
  .nav-links a:hover { color: var(--ink); }

  /* Three-dot menu trigger — hidden on desktop, shown on mobile */
  .nav-toggle {
    display: none;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: 44px; height: 44px; padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px; cursor: pointer;
    transition: border-color .18s var(--ease);
  }
  .nav-toggle span {
    display: block; width: 5px; height: 5px; border-radius: 999px;
    background: var(--ink);
    transition: background .18s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
  }
  .nav-toggle:hover { border-color: rgba(94, 220, 255, 0.4); }
  .nav-toggle:hover span { background: var(--cyan-400); }
  /* Open: light the dots cyan so the trigger reads as active */
  .nav-toggle.open { border-color: rgba(94, 220, 255, 0.4); }
  .nav-toggle.open span {
    background: var(--cyan-400);
    box-shadow: 0 0 8px rgba(94, 220, 255, 0.6);
  }
  /* CTA shown only inside the mobile dropdown (scoped to beat .btn's display) */
  .nav-links .nav-cta-mobile { display: none; }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 14px; font-weight: 500;
    padding: 11px 18px; border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer; transition: all .18s var(--ease);
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--cyan-400); color: var(--navy-900);
  }
  .btn-primary:hover { background: var(--cyan-500); transform: translateY(-1px); }
  .btn-primary:active { background: var(--cyan-600); transform: translateY(0); }
  .btn-ghost {
    color: var(--ink); border-color: rgba(255,255,255,0.14);
  }
  .btn-ghost:hover { border-color: var(--cyan-400); color: var(--cyan-400); }
  .btn .arrow { display: inline-block; transition: transform .18s var(--ease); }
  .btn:hover .arrow { transform: translateX(3px); }

  /* ───────────── Hero ───────────── */
  .hero {
    position: relative;
    padding: 96px 0 120px;
    overflow: hidden;
  }
  .hero::before {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(60% 50% at 80% 20%, rgba(94, 220, 255, 0.10), transparent 70%),
      radial-gradient(40% 40% at 20% 80%, rgba(94, 220, 255, 0.05), transparent 70%);
    pointer-events: none;
  }
  .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .hero .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(94, 220, 255, 0.08);
    border: 1px solid rgba(94, 220, 255, 0.20);
    color: var(--cyan-400);
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
    margin-bottom: 32px;
  }
  .hero .eyebrow .dot {
    width: 6px; height: 6px; border-radius: 999px; background: var(--cyan-400);
    box-shadow: 0 0 12px var(--cyan-400);
  }
  .hero h1 {
    font-size: clamp(48px, 6.6vw, 96px);
    font-weight: 300;
    line-height: 0.96;
    letter-spacing: -0.03em;
    margin: 0 0 28px;
  }
  .hero h1 em {
    font-style: normal;
    color: var(--cyan-400);
  }
  .hero p.lede {
    font-size: 20px; line-height: 1.55; color: var(--slate-400);
    max-width: 540px; margin: 0 0 40px;
  }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

  /* Operator console mock on the right */
  .console {
    background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
    border: 1px solid var(--navy-600);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow:
      0 0 0 1px rgba(94, 220, 255, 0.04),
      0 24px 60px -20px rgba(0, 0, 0, 0.6),
      0 0 80px -10px rgba(94, 220, 255, 0.08);
    position: relative;
  }
  .console-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 18px; border-bottom: 1px solid var(--navy-600);
    margin-bottom: 18px;
  }
  .console-head .title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
    color: var(--slate-400);
  }
  .console-head .title .live {
    width: 7px; height: 7px; border-radius: 999px; background: var(--ok);
    box-shadow: 0 0 8px var(--ok);
    animation: pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .console-head .status {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--cyan-400);
  }

  .step {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--navy-800);
    border: 1px solid var(--navy-600);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    transition: border-color .24s var(--ease);
  }
  .step:hover { border-color: rgba(94, 220, 255, 0.32); }
  .step .num {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--slate-500);
  }
  .step .body { display: flex; flex-direction: column; gap: 4px; }
  .step .body .label { font-size: 14px; font-weight: 500; }
  .step .body .meta {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--slate-400);
  }
  .step .ind {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  }
  .step .ind .d { width: 7px; height: 7px; border-radius: 999px; }
  .step .ind.ok .d { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
  .step .ind.run .d { background: var(--cyan-400); box-shadow: 0 0 6px var(--cyan-400); animation: pulse 1.8s ease-in-out infinite; }
  .step .ind.wait .d { background: var(--warn); }

  .console-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--navy-600);
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--slate-500);
  }
  .console-foot .nodes { color: var(--cyan-400); }

  /* ───────────── Trust strip / Marquee ───────────── */
  .trust {
    margin-top: 80px;
    border-top: 1px solid var(--navy-600);
    border-bottom: 1px solid var(--navy-600);
    padding: 22px 0;
    contain: content;
  }
  .trust .label {
    color: var(--slate-500);
    margin-bottom: 18px;
    display: block;
  }
  .marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 48s linear infinite;
    will-change: transform;
  }
  .marquee-track:hover { animation-play-state: paused; }
  .marquee-group {
    display: flex;
    gap: 14px;
    padding-right: 14px;
    flex-shrink: 0;
  }
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .logo-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--navy-800);
    border: 1px solid var(--navy-600);
    color: var(--slate-400);
    font-size: 14px; font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  }
  .logo-pill:hover {
    color: var(--ink);
    border-color: rgba(94, 220, 255, 0.32);
    background: var(--navy-700);
  }

  /* ───────────── Glyphs (used in marquee + stack) ───────────── */
  .glyph {
    width: 18px; height: 18px; flex-shrink: 0;
    display: inline-block;
    background-color: currentColor;
    color: var(--slate-400);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .logo-pill:hover .glyph, .pill:hover .glyph { color: var(--cyan-400); }
  /* Each glyph is rendered as a stylized geometric SVG mask — purely iconographic, brand-safe. */
  .glyph.oai { -webkit-mask-image: url("../icons/openai.svg"); mask-image: url("../icons/openai.svg"); }
  .glyph.anth { -webkit-mask-image: url("../icons/anthropic.svg"); mask-image: url("../icons/anthropic.svg"); }
  .glyph.claude { -webkit-mask-image: url("../icons/claude.svg"); mask-image: url("../icons/claude.svg"); }
  .glyph.google { -webkit-mask-image: url("../icons/googlegemini.svg"); mask-image: url("../icons/googlegemini.svg"); }
  .glyph.meta { -webkit-mask-image: url("../icons/ollama.svg"); mask-image: url("../icons/ollama.svg"); }
  .glyph.mistral { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><rect x='2' y='3' width='4' height='4'/><rect x='2' y='9' width='4' height='4'/><rect x='2' y='15' width='4' height='4'/><rect x='10' y='9' width='4' height='4'/><rect x='10' y='15' width='4' height='4'/><rect x='18' y='3' width='4' height='4'/><rect x='18' y='9' width='4' height='4'/><rect x='18' y='15' width='4' height='4'/></g></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><rect x='2' y='3' width='4' height='4'/><rect x='2' y='9' width='4' height='4'/><rect x='2' y='15' width='4' height='4'/><rect x='10' y='9' width='4' height='4'/><rect x='10' y='15' width='4' height='4'/><rect x='18' y='3' width='4' height='4'/><rect x='18' y='9' width='4' height='4'/><rect x='18' y='15' width='4' height='4'/></g></svg>"); }
  .glyph.hf { -webkit-mask-image: url("../icons/huggingface.svg"); mask-image: url("../icons/huggingface.svg"); }
  .glyph.lc, .glyph.lg { -webkit-mask-image: url("../icons/langchain.svg"); mask-image: url("../icons/langchain.svg"); }
  .glyph.vercel { -webkit-mask-image: url("../icons/vercel.svg"); mask-image: url("../icons/vercel.svg"); }
  .glyph.pinecone { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><path d='M12 2 L15 6 L9 6 Z'/><path d='M12 8 L16 13 L8 13 Z'/><path d='M12 15 L17 22 L7 22 Z'/></g></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><path d='M12 2 L15 6 L9 6 Z'/><path d='M12 8 L16 13 L8 13 Z'/><path d='M12 15 L17 22 L7 22 Z'/></g></svg>"); }
  .glyph.replicate { -webkit-mask-image: url("../icons/replicate.svg"); mask-image: url("../icons/replicate.svg"); }
  .glyph.n8n { -webkit-mask-image: url("../icons/n8n.svg"); mask-image: url("../icons/n8n.svg"); }
  .glyph.make   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><polygon points='3,3 7,3 5,21 1,21'/><polygon points='11,3 15,3 11,21 7,21'/><polygon points='19,3 23,3 17,21 13,21'/></g></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><polygon points='3,3 7,3 5,21 1,21'/><polygon points='11,3 15,3 11,21 7,21'/><polygon points='19,3 23,3 17,21 13,21'/></g></svg>"); }
  .glyph.mcp    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M3 12 L9 6 L15 12 L9 18 Z'/><path d='M9 12 L15 6 L21 12 L15 18 Z'/></g></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M3 12 L9 6 L15 12 L9 18 Z'/><path d='M9 12 L15 6 L21 12 L15 18 Z'/></g></svg>"); }
  .glyph.li     { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><rect x='3' y='5' width='4' height='14' rx='1'/><rect x='10' y='5' width='4' height='14' rx='1'/><rect x='17' y='5' width='4' height='14' rx='1'/></g></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><rect x='3' y='5' width='4' height='14' rx='1'/><rect x='10' y='5' width='4' height='14' rx='1'/><rect x='17' y='5' width='4' height='14' rx='1'/></g></svg>"); }
  .glyph.zap { -webkit-mask-image: url("../icons/zapier.svg"); mask-image: url("../icons/zapier.svg"); }
  .glyph.slack { -webkit-mask-image: url("../icons/slack.svg"); mask-image: url("../icons/slack.svg"); }
  .glyph.aws { -webkit-mask-image: url("../icons/amazonaws.svg"); mask-image: url("../icons/amazonaws.svg"); }
  .glyph.selfhost { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><rect x='4' y='2' width='16' height='6' rx='1'/><rect x='4' y='10' width='16' height='6' rx='1'/><rect x='4' y='18' width='16' height='4' rx='1'/><circle cx='7' cy='5' r='1.2'/><circle cx='7' cy='13' r='1.2'/><circle cx='7' cy='20' r='1.2'/></g></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><rect x='4' y='2' width='16' height='6' rx='1'/><rect x='4' y='10' width='16' height='6' rx='1'/><rect x='4' y='18' width='16' height='4' rx='1'/><circle cx='7' cy='5' r='1.2'/><circle cx='7' cy='13' r='1.2'/><circle cx='7' cy='20' r='1.2'/></g></svg>"); }
  .glyph.shield { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2L3 7v5c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5zm-1 15l-4-4 1.41-1.41L11 14.17l5.59-5.59L18 10l-7 7z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2L3 7v5c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5zm-1 15l-4-4 1.41-1.41L11 14.17l5.59-5.59L18 10l-7 7z'/></svg>"); }
  .glyph.iam { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><circle cx='12' cy='7' r='4'/><path d='M12 13c-4.42 0-8 1.79-8 4v2h16v-2c0-2.21-3.58-4-8-4z'/><path d='M19 8h-2v2h-2v2h2v2h2v-2h2v-2h-2z'/></g></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><circle cx='12' cy='7' r='4'/><path d='M12 13c-4.42 0-8 1.79-8 4v2h16v-2c0-2.21-3.58-4-8-4z'/><path d='M19 8h-2v2h-2v2h2v2h2v-2h2v-2h-2z'/></g></svg>"); }
  .glyph.lock { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z'/></svg>"); }
  .glyph.langfuse { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><path d='M4 4h4v16H4z'/><path d='M10 8h4v12h-4z'/><path d='M16 12h4v8h-4z'/></g></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='black'><path d='M4 4h4v16H4z'/><path d='M10 8h4v12h-4z'/><path d='M16 12h4v8h-4z'/></g></svg>"); }
  .glyph.datadog { -webkit-mask-image: url("../icons/datadog.svg"); mask-image: url("../icons/datadog.svg"); }
  .glyph.grafana { -webkit-mask-image: url("../icons/grafana.svg"); mask-image: url("../icons/grafana.svg"); }
  .glyph.prometheus { -webkit-mask-image: url("../icons/prometheus.svg"); mask-image: url("../icons/prometheus.svg"); }
  .glyph.azure { -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@13/icons/microsoftazure.svg"); mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@13/icons/microsoftazure.svg"); }
  .glyph.nvidia { -webkit-mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@13/icons/nvidia.svg"); mask-image: url("https://cdn.jsdelivr.net/npm/simple-icons@13/icons/nvidia.svg"); }

  /* ───────────── Service · Stack section ───────────── */
  .service .stack {
    margin: 0;
    padding: 22px;
    background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
    border: 1px solid var(--navy-600);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
    position: relative;
  }
  .service .stack-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px; border-bottom: 1px solid var(--navy-600);
    margin-bottom: 16px; gap: 12px;
  }
  .service .stack-head .mono {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
    color: var(--cyan-400); text-transform: uppercase;
  }
  .service .stack-head .stack-meta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
    color: var(--slate-500); text-transform: uppercase;
  }
  .service .stack-grid {
    display: flex; flex-direction: column; gap: 14px;
  }
  .service .stack-row {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: start;
    gap: 14px;
  }
  .service .stack-row .row-label {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
    color: var(--slate-500); text-transform: uppercase;
    padding-top: 8px;
  }
  .service .stack-row .row-pills {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .service .pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    background: var(--navy-700);
    border: 1px solid var(--navy-600);
    color: var(--slate-400);
    font-size: 12.5px; font-weight: 500;
    letter-spacing: -0.005em;
    transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  }
  .service .pill:hover {
    color: var(--ink);
    border-color: rgba(94, 220, 255, 0.32);
    background: var(--navy-800);
  }
  .service .pill .glyph { width: 14px; height: 14px; }

  /* ───────────── Section header pattern ───────────── */
  .section {
    padding: 120px 0;
    position: relative;
  }
  .section-head {
    margin-bottom: 64px;
  }
  .section-head .eyebrow {
    color: var(--cyan-400);
    margin-bottom: 18px;
    display: block;
  }
  .section-head h2 {
    font-size: clamp(40px, 4.4vw, 64px);
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1.02;
    margin: 0;
    max-width: 800px;
  }

  /* ───────────── Services ───────────── */
  #services { padding-top: 40px; }
  .services {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .service {
    position: relative;
    background: var(--navy-800);
    border: 1px solid var(--navy-600);
    border-radius: var(--radius-xl);
    padding: 52px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
    transition: border-color .24s var(--ease), transform .24s var(--ease);
  }
  .service:hover {
    border-color: rgba(94, 220, 255, 0.32);
    transform: translateY(-2px);
  }
  /* Zig-zag — consulting card flips the columns */
  .service.consulting .service-main { order: 2; }
  .service.consulting .service-visual { order: 1; }
  /* Bracket motif from the logo */
  .service::before, .service::after {
    content: '';
    position: absolute;
    width: 36px; height: 36px;
    border: 2px solid var(--cyan-400);
    opacity: 0.7;
    transition: opacity .24s var(--ease);
    pointer-events: none;
  }
  .service::before {
    top: 16px; right: 16px;
    border-left: none; border-bottom: none;
    border-top-right-radius: 4px;
  }
  .service::after {
    bottom: 16px; left: 16px;
    border-right: none; border-top: none;
    border-bottom-left-radius: 4px;
  }
  .service:hover::before, .service:hover::after { opacity: 1; }

  .service-main { min-width: 0; }
  .service .num {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.10em;
    color: var(--cyan-400); margin-bottom: 24px; display: block;
  }
  .service h3 {
    font-size: 42px; font-weight: 400; letter-spacing: -0.025em;
    line-height: 1.02; margin: 0 0 18px;
  }
  .service .summary {
    color: var(--slate-400); font-size: 17px; line-height: 1.55;
    margin: 0 0 28px; max-width: 520px;
  }
  .service ul {
    list-style: none; padding: 0; margin: 0 0 32px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .service li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 15px; color: var(--ink);
  }
  .service li::before {
    content: '';
    width: 8px; height: 8px;
    flex-shrink: 0;
    margin-top: 8px;
    background: var(--cyan-400);
    transform: rotate(45deg);
  }
  .service .footer-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid var(--navy-600);
  }
  .service .price-hint {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--slate-500);
  }

  /* Service visual panels */
  .service-visual { min-width: 0; }
  .service-visual .panel {
    background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
    border: 1px solid var(--navy-600);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
  }
  .panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px; border-bottom: 1px solid var(--navy-600); margin-bottom: 16px;
  }
  .panel-head .title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--slate-400);
  }
  .panel-head .title .live {
    width: 7px; height: 7px; border-radius: 999px; background: var(--ok);
    box-shadow: 0 0 8px var(--ok); animation: pulse 1.8s ease-in-out infinite;
  }
  .panel-head .status {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--cyan-400);
  }
  .lesson {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 14px; align-items: center;
    padding: 13px 16px;
    background: var(--navy-800); border: 1px solid var(--navy-600);
    border-radius: var(--radius-sm); margin-bottom: 8px;
    transition: border-color .24s var(--ease);
  }
  .lesson:hover { border-color: rgba(94,220,255,0.30); }
  .lesson .ln { font-family: var(--mono); font-size: 11px; color: var(--slate-500); }
  .lesson .lt { font-size: 14px; color: var(--ink); }
  .lesson .ls { font-family: var(--mono); font-size: 13px; color: var(--slate-500); }
  .lesson.done .ls { color: var(--ok); }
  .lesson.active { border-color: rgba(94,220,255,0.35); }
  .lesson.active .ls.run { color: var(--cyan-400); }
  .panel-foot { margin-top: 16px; }
  .progress {
    height: 6px; background: var(--navy-700); border: 1px solid var(--navy-600);
    border-radius: 999px; overflow: hidden;
  }
  .progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-600), var(--cyan-400)); }
  .progress-meta {
    margin-top: 8px; font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.1em; color: var(--slate-500);
  }

  /* ───────────── 3D tilt / floating panels ───────────── */
  .tilt-wrap {
    perspective: 1100px;
    animation: floaty 8s ease-in-out infinite;
  }
  @keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
  }
  .tilt {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(-5deg);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
    will-change: transform;
  }
  /* Cursor-following cyan glare */
  .tilt > .glare {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--gx, 70%) var(--gy, 20%), rgba(94,220,255,0.14), transparent 60%);
    opacity: 0; transition: opacity .4s var(--ease);
    pointer-events: none; z-index: 5;
    mix-blend-mode: screen;
  }
  .tilt:hover > .glare { opacity: 1; }
  /* Lift inner content in 3D space */
  .tilt .lift-1 { transform: translateZ(28px); }
  .tilt .lift-2 { transform: translateZ(48px); }
  @media (prefers-reduced-motion: reduce) {
    .tilt-wrap { animation: none; }
    .tilt { transform: none !important; transition: none; }
    .tilt > .glare { display: none; }
    .tilt .lift-1, .tilt .lift-2 { transform: none; }
  }


  /* ───────────── Journey Section (Vertical scroll, zig-zag, flow line) ───────────── */
  .journey-section { padding: 120px 0 60px; }

  .journey-steps {
    position: relative;
    display: flex; flex-direction: column; gap: 80px;
    padding-left: 48px;
  }

  /* Vertical flow line */
  .journey-line {
    position: absolute; left: 16px; top: 0; bottom: 0; width: 3px;
  }
  .journey-line-bg {
    position: absolute; inset: 0;
    background: var(--navy-600); border-radius: 2px;
  }
  .journey-line-glow {
    position: absolute; inset: 0; width: 3px;
    background: var(--cyan-400); opacity: 0.15;
    filter: blur(6px); border-radius: 2px;
  }
  .journey-line-trace {
    position: absolute; top: 0; left: 0; width: 3px;
    height: 0%; border-radius: 2px;
    background: linear-gradient(180deg, var(--cyan-400), var(--cyan-500));
    box-shadow: 0 0 12px rgba(94, 220, 255, 0.5), 0 0 4px rgba(94, 220, 255, 0.8);
    transition: height 0.05s linear;
  }
  .journey-node {
    position: absolute; left: -5px; width: 13px; height: 13px;
    border-radius: 999px;
    background: var(--navy-900); border: 2px solid var(--navy-600);
    transition: all 0.5s var(--ease);
  }
  .journey-node[data-step="0"] { top: 60px; }
  .journey-node[data-step="1"] { top: calc(50% - 6px); }
  .journey-node[data-step="2"] { top: calc(100% - 60px); }
  .journey-node.active {
    background: var(--cyan-400); border-color: var(--cyan-400);
    box-shadow: 0 0 14px rgba(94, 220, 255, 0.7);
  }

  /* Step layout: zig-zag grid */
  .journey-step {
    display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px;
    align-items: center;
    padding: 40px 0;
  }
  .journey-step--flip { direction: rtl; }
  .journey-step--flip > * { direction: ltr; }

  /* Journey content */
  .journey-label {
    font-size: 11px; letter-spacing: 0.12em; color: var(--cyan-400); text-transform: uppercase;
  }
  .journey-content h3 {
    font-size: 36px; font-weight: 500; line-height: 1.15;
    margin-top: 12px; color: var(--ink);
  }
  .journey-desc {
    font-size: 16px; line-height: 1.6; color: var(--slate-400);
    margin-top: 14px; max-width: 420px;
  }

  /* Journey visual panels — large, fill space */
  .journey-visual {
    padding: 36px;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
    border: 1px solid var(--navy-600);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
    min-height: 280px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .journey-visual .pill {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 22px; border-radius: var(--radius-md);
    background: var(--navy-800); border: 1px solid var(--navy-600);
    color: var(--slate-300); font-size: 15px; font-weight: 500;
    transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  }
  .journey-visual .pill:hover {
    color: var(--ink); border-color: rgba(94, 220, 255, 0.32);
    transform: translateY(-2px);
  }
  .journey-visual .pill .glyph { width: 20px; height: 20px; }

  /* Provider rack (Step 1) */
  .provider-rack { display: flex; flex-direction: column; gap: 24px; }
  .provider-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
  .provider-row.secondary {
    gap: 14px; justify-content: center;
  }
  .provider-row.secondary .pill {
    animation: stack-float 6s ease-in-out infinite;
  }
  .provider-row.secondary .pill:nth-child(2) { animation-delay: -1.2s; }
  .provider-row.secondary .pill:nth-child(3) { animation-delay: -2.4s; }
  .provider-row.secondary .pill:nth-child(4) { animation-delay: -3.6s; }
  .provider-row.secondary .pill:nth-child(5) { animation-delay: -4.8s; }
  .provider-card.featured {
    display: flex; align-items: center; gap: 16px;
    padding: 24px 32px; flex: 1;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-800));
    border: 1.5px solid var(--cyan-400);
    border-radius: var(--radius-lg);
    font-size: 17px; font-weight: 500; color: var(--ink);
    box-shadow: 0 0 48px -12px rgba(94, 220, 255, 0.25);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .provider-card.featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 60px -8px rgba(94, 220, 255, 0.35);
  }
  .provider-card .glyph { width: 24px; height: 24px; }
  .provider-card .badge {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    color: var(--cyan-400);
    border: 1px solid rgba(94, 220, 255, 0.3);
    padding: 4px 10px; border-radius: var(--radius-sm);
    margin-left: auto;
  }

  /* Security panel (Step 2) */
  .security-panel { display: flex; flex-direction: column; gap: 20px; }
  .sec-row { display: flex; flex-wrap: wrap; gap: 14px; }
  .sec-indicator {
    display: flex; align-items: center; gap: 12px;
    margin-top: 8px; padding: 20px 24px;
    background: var(--navy-800); border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: var(--radius-md);
  }
  .sec-indicator .mono { font-size: 13px; letter-spacing: 0.1em; color: var(--ok); }
  .live-dot {
    width: 10px; height: 10px; border-radius: 999px;
    background: var(--ok); box-shadow: 0 0 10px var(--ok);
    animation: pulse 1.8s ease-in-out infinite;
  }

  /* Monitoring panel (Step 3) */
  .monitoring-panel { display: flex; flex-direction: column; gap: 20px; }
  .mon-row { display: flex; flex-wrap: wrap; gap: 14px; }
  .mon-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-top: 8px;
  }
  .metric {
    display: flex; flex-direction: column; gap: 6px;
    padding: 22px; background: var(--navy-800);
    border: 1px solid var(--navy-600);
    border-radius: var(--radius-md); text-align: center;
  }
  .metric-val {
    font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--cyan-400);
  }
  .metric-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--slate-500);
  }

  /* Tech Stack standalone section — floating cloud */
  .stack-section { padding-bottom: 60px; }
  .stack-standalone {
    display: flex; flex-wrap: wrap; gap: 14px;
    justify-content: center; align-items: center;
    padding: 20px 0;
  }
  .stack-standalone .stack-grid {
    display: flex; flex-wrap: wrap; gap: 16px;
    justify-content: center;
  }
  .stack-standalone .stack-row {
    display: contents;
  }
  .stack-standalone .row-label { display: none; }
  .stack-standalone .row-pills {
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  }
  .stack-standalone .pill {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 22px; border-radius: var(--radius-md);
    background: var(--navy-700); border: 1px solid var(--navy-600);
    color: var(--slate-300); font-size: 15px; font-weight: 500;
    transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
    animation: stack-float 6s ease-in-out infinite;
  }
  .stack-standalone .pill:nth-child(odd) { animation-delay: -2s; }
  .stack-standalone .pill:nth-child(3n) { animation-delay: -4s; }
  .stack-standalone .pill:hover {
    color: var(--ink); border-color: rgba(94, 220, 255, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px -8px rgba(94, 220, 255, 0.15);
  }
  .stack-standalone .pill .glyph { width: 20px; height: 20px; }
  @keyframes stack-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  /* ───────────── Founders ───────────── */
  #who { background: var(--navy-800); border-top: 1px solid var(--navy-600); border-bottom: 1px solid var(--navy-600); }
  .founders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .founder { display: flex; flex-direction: column; gap: 28px; }

  .founder-photos {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Main portrait card — takes the figure's full height */
  .founder-photos .portrait-card {
    position: relative;
    width: 100%;
    height: 640px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--navy-600);
    overflow: hidden;
    background:
      radial-gradient(50% 55% at 50% 78%, rgba(94, 220, 255, 0.20), transparent 70%),
      linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 100%);
    transition: border-color .5s var(--ease);
  }
  .founder-photos .portrait-card::before {
    /* floor vignette — seats the figure */
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(70% 30% at 50% 100%, rgba(7, 17, 31, 0.7), transparent 70%);
    pointer-events: none; z-index: 1;
  }
  .founder-photos .portrait-card::after {
    /* faint inner ring — cyan signal on hover */
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px rgba(94, 220, 255, 0);
    pointer-events: none;
    transition: box-shadow .5s var(--ease);
  }
  .founder-photos .portrait-card img {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    max-width: 90%;
    object-fit: contain;
    object-position: bottom;
    z-index: 2;
    transition: transform .8s var(--ease);
    will-change: transform;
  }
  /* Floating mono caption on the portrait */
  .founder-photos .portrait-card .stamp {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 3;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--cyan-400);
    opacity: 0.85;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .founder-photos .portrait-card .stamp .dot {
    width: 6px; height: 6px; border-radius: 999px; background: var(--cyan-400);
    box-shadow: 0 0 8px var(--cyan-400);
  }
  .founder-photos .portrait-card .stamp-r {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 3;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--slate-500);
  }

  /* Filmstrip — horizontal row of thumbnails, hidden until hover */
  .founder-photos .filmstrip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow: hidden;
    transition: max-height .55s var(--ease), opacity .35s var(--ease), transform .55s var(--ease);
  }
  .founder-photos .filmstrip > div {
    position: relative;
    height: 140px;
    border-radius: var(--radius-md);
    border: 1px solid var(--navy-600);
    overflow: hidden;
    background: var(--navy-700);
    transform: translateY(8px);
    opacity: 0;
    transition: transform .5s var(--ease), opacity .5s var(--ease), border-color .35s var(--ease);
  }
  .founder-photos .filmstrip > div img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 1.2s var(--ease);
  }
  .founder-photos .filmstrip > div::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(7, 17, 31, 0.55));
    pointer-events: none;
  }
  /* Per-thumbnail crop offsets */
  .founder-photos .filmstrip .thumb-action img { object-position: 30% 38%; }
  .founder-photos .filmstrip .thumb-caster img { object-position: 50% 28%; }

  /* Hover reveal */
  .founder:hover .portrait-card {
    border-color: rgba(94, 220, 255, 0.35);
  }
  .founder:hover .portrait-card::after {
    box-shadow: inset 0 0 0 1px rgba(94, 220, 255, 0.25);
  }
  .founder:hover .portrait-card img {
    transform: translateX(-50%);
  }

  /* Founder 2 — photo with navy vignette fade at all edges */
  .founder-photos .portrait-card.portrait-vignette {
    background: var(--navy-800);
    overflow: hidden;
  }
  .founder-photos .portrait-card.portrait-vignette img {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 108%;
    object-fit: cover;
    object-position: 50% 8%;
    z-index: 2;
    transition: transform .8s var(--ease);
  }
  .founder:hover .portrait-card.portrait-vignette img {
    transform: translateX(-50%);
  }
  /* Vignette — fades studio grey into navy at all edges */
  .founder-photos .portrait-card.portrait-vignette::before {
    content: '';
    position: absolute; inset: 0; z-index: 3;
    background:
      radial-gradient(ellipse 80% 88% at 50% 40%, transparent 36%, rgba(7,17,31,0.96) 78%),
      linear-gradient(to bottom, rgba(7,17,31,0.6) 0%, transparent 18%, transparent 72%, rgba(7,17,31,0.9) 100%),
      linear-gradient(to right, rgba(7,17,31,0.65) 0%, transparent 16%, transparent 84%, rgba(7,17,31,0.65) 100%);
    pointer-events: none;
  }
  /* Cyan glow under the figure */
  .founder-photos .portrait-card.portrait-vignette::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(55% 50% at 50% 82%, rgba(94,220,255,0.20), transparent 70%);
    pointer-events: none;
  }
  /* image-slot version (founder 2) gets the same shell */
  .founder-photos image-slot.portrait-card {
    display: block;
  }
  /* Mirror Samuel's portrait horizontally so the two founders face inward */
  .founder-photos .portrait-card.portrait-flip img {
    transform: translateX(-50%) scaleX(-1);
  }
  .founder:hover .portrait-card.portrait-flip img {
    transform: translateX(-50%) scaleX(-1);
  }

  /* Scroll-reveal — staggered fade + lift */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal[data-delay="1"] { transition-delay: .08s; }
  .reveal[data-delay="2"] { transition-delay: .16s; }
  .reveal[data-delay="3"] { transition-delay: .24s; }
  .reveal[data-delay="4"] { transition-delay: .32s; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .founder-photos .photo img { transition: none; }
    .founder-photos .photo:hover img { transform: none; }
  }

  .founder-meta {
    display: flex; flex-direction: column; gap: 6px;
  }
  .founder-meta .role {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
    color: var(--cyan-400); text-transform: uppercase;
  }
  .founder-meta h3 {
    font-size: 34px; font-weight: 400; letter-spacing: -0.02em;
    margin: 0; line-height: 1.05;
  }
  .founder-bio {
    color: var(--slate-400); font-size: 16px; line-height: 1.6;
    margin: 0;
  }
  .founder-tags {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .tag {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    padding: 5px 10px; border-radius: var(--radius-sm);
    background: var(--navy-700); border: 1px solid var(--navy-600);
    color: var(--slate-400);
  }
  .founder-links {
    display: flex; gap: 20px; margin-top: 4px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
    color: var(--slate-400);
  }
  .founder-links a { transition: color .18s var(--ease); display: inline-flex; align-items: center; gap: 6px; }
  .founder-links a:hover { color: var(--cyan-400); }

  /* ───────────── CTA ───────────── */
  .cta {
    padding: 140px 0;
    position: relative;
    overflow: hidden;
  }
  .cta::before {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(60% 60% at 50% 50%, rgba(94, 220, 255, 0.12), transparent 70%);
    pointer-events: none;
  }
  .cta-inner {
    position: relative;
    text-align: center;
    max-width: 780px; margin: 0 auto;
  }
  .cta h2 {
    font-size: clamp(48px, 5.4vw, 80px);
    font-weight: 300; letter-spacing: -0.025em; line-height: 1.0;
    margin: 0 0 28px;
  }
  .cta h2 em { font-style: normal; color: var(--cyan-400); }
  .cta p {
    font-size: 19px; color: var(--slate-400); line-height: 1.55;
    margin: 0 0 40px;
  }
  .booking {
    padding: 120px 0;
    border-top: 1px solid var(--navy-600);
  }
  .booking-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
    gap: 48px;
    align-items: center;
  }
  .booking-copy {
    max-width: 560px;
  }
  .booking-kicker {
    color: var(--cyan-400);
    margin-bottom: 18px;
    display: block;
  }
  .booking h2 {
    font-size: clamp(46px, 4.8vw, 76px);
    text-align: left;
  }
  .booking p {
    text-align: left;
  }
  .booking-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -18px 0 30px;
  }
  .booking-notes span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--cyan-400);
    border: 1px solid rgba(94, 220, 255, 0.28);
    background: rgba(94, 220, 255, 0.07);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
  }
  .booking-panel {
    min-width: 0;
    border: 1px solid rgba(94, 220, 255, 0.28);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow:
      0 30px 80px -34px rgba(0, 0, 0, 0.72),
      0 0 72px -30px rgba(94, 220, 255, 0.42);
    overflow: hidden;
  }
  .booking-panel iframe {
    width: 100%;
    min-width: 320px;
    height: 720px;
    display: block;
  }

  /* ───────────── Footer ───────────── */
  footer {
    border-top: 1px solid var(--navy-600);
    padding: 48px 0 40px;
  }
  .foot {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 40px;
  }
  .foot .left {
    display: flex; align-items: center; gap: 12px;
    color: var(--slate-500); font-family: var(--mono);
    font-size: 12px; letter-spacing: 0.06em;
  }
  .foot .left img { width: 22px; height: 22px; opacity: 0.7; }
  .foot .links {
    display: flex; gap: 28px;
    font-size: 13px; color: var(--slate-400);
  }
  .foot .links a:hover { color: var(--cyan-400); }
  .foot .right {
    text-align: right;
    color: var(--slate-500); font-family: var(--mono);
    font-size: 12px; letter-spacing: 0.06em;
  }

  /* ───────────── Responsive ───────────── */
  @media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; gap: 60px; }
    .service { grid-template-columns: 1fr; gap: 36px; padding: 40px; }
    .service.consulting .service-main { order: 1; }
    .service.consulting .service-visual { order: 2; }
    .founders { grid-template-columns: 1fr; gap: 60px; }
    .booking-inner { grid-template-columns: 1fr; gap: 34px; }
    .booking-copy { max-width: 760px; }
    .booking h2, .booking p { text-align: center; }
    .booking-notes { justify-content: center; }
    .booking-copy .btn { margin: 0 auto; }
    /* Journey responsive */
    .journey-step { grid-template-columns: 1fr; gap: 32px; }
    .journey-step--flip { direction: ltr; }
    .journey-content h3 { font-size: 30px; }
    .journey-steps { padding-left: 36px; }
    .mon-metrics { grid-template-columns: 1fr 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .container { padding: 0 24px; }

    /* Mobile nav: brand + three-dot trigger; links become a dropdown panel */
    .nav-toggle { display: inline-flex; }
    .nav-inner > .btn-primary { display: none; }   /* hide the standalone CTA */
    .nav-links {
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      padding: 8px 24px 22px;
      background: rgba(7, 17, 31, 0.97);
      backdrop-filter: saturate(1.4) blur(14px);
      -webkit-backdrop-filter: saturate(1.4) blur(14px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.7);
      opacity: 0; transform: translateY(-8px); pointer-events: none;
      transition: opacity .2s var(--ease), transform .2s var(--ease);
      font-size: 16px;
    }
    .nav-links.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .nav-links a {
      padding: 15px 4px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .nav-links .nav-cta-mobile {
      display: inline-flex; justify-content: center;
      margin-top: 16px; padding: 13px 18px; border-bottom: 0;
    }

    .hero { padding: 56px 0 80px; }
    .section { padding: 80px 0; }
    .booking { padding: 86px 0; }
    .booking-panel { margin: 0 -8px; }
    .booking-panel iframe { height: 680px; min-height: 680px; }
    .service { padding: 32px 26px; gap: 28px; }
    .service h3 { font-size: 34px; }
    .service .stack-row { grid-template-columns: 1fr; gap: 8px; }
    .service .stack-row .row-label { padding-top: 0; }
    .founder-photos .portrait-card { height: 520px; }
    .founder-photos .filmstrip > div { height: 110px; }
    .trust { gap: 24px; }
    .foot { grid-template-columns: 1fr; text-align: center; gap: 24px; }
    .foot .right { text-align: center; }
    .foot .left { justify-content: center; }
    .foot .links { flex-wrap: wrap; justify-content: center; gap: 16px 20px; }

    /* Operator console — flatten the 3D and lay it out as a clean stacked card. */
    .tilt-wrap { perspective: none; animation: none; }
    .tilt { transform: none !important; transition: none; }
    .tilt > .glare { display: none; }
    .tilt .lift-1, .tilt .lift-2 { transform: none; }

    .console { padding: 18px; border-radius: var(--radius-lg); }
    .console-head { padding-bottom: 14px; margin-bottom: 14px; }
    .console-head .title { font-size: 11px; }
    .console-head .status { font-size: 10px; }

    .step {
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 13px 14px;
      margin-bottom: 8px;
    }
    .step .num { display: none; }
    .step .body .label { font-size: 13px; }
    .step .body .meta { font-size: 10px; }
    .step .ind { font-size: 10px; }
    .step--extra { display: none; }
    .console-foot { padding-top: 14px; font-size: 10px; }

    /* Journey mobile */
    .journey-steps { padding-left: 28px; gap: 48px; }
    .journey-line { left: 8px; }
    .journey-node { left: -5px; }
    .journey-step { padding: 24px 0; }
    .journey-content h3 { font-size: 26px; }
    .provider-card.featured { padding: 14px 16px; font-size: 13px; }
    .provider-row.primary { flex-direction: column; }
    .mon-metrics { grid-template-columns: 1fr; }
    .metric-val { font-size: 16px; }
    .stack-standalone .pill { padding: 12px 16px; font-size: 13px; }
    .stack-standalone .pill .glyph { width: 16px; height: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .journey-line-trace { transition: none; }
    .journey-node { transition: none; }
  }