:root {
      color-scheme: light;
      --ink: #101828;
      --ink-strong: #0b1220;
      --body: #475467;
      --muted: #667085;
      --blue: #175cd3;
      --blue-dark: #1849a9;
      --blue-soft: #eff8ff;
      --green: #067647;
      --green-soft: #ecfdf3;
      --amber: #b54708;
      --amber-soft: #fffaeb;
      --border: #e4e7ec;
      --border-strong: #d0d5dd;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --surface-blue: #f5f8ff;
      --navy: #101828;
      --wrap: min(1180px, calc(100% - 48px));
      --radius: 12px;
      --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
      --shadow-lg: 0 20px 50px rgba(16, 24, 40, .12);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 84px; }
    body {
      margin: 0;
      min-width: 320px;
      background: var(--surface);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button { color: inherit; font: inherit; }
    img, svg { display: block; max-width: 100%; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { color: var(--ink-strong); line-height: 1.2; }
    ::selection { background: #d1e9ff; color: var(--ink); }
    :focus-visible { outline: 3px solid #84caff; outline-offset: 3px; }

    .wrap { width: var(--wrap); margin-inline: auto; }
    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 300;
      padding: 10px 14px;
      border-radius: 6px;
      background: var(--navy);
      color: #fff;
      font-weight: 700;
      transform: translateY(-150%);
      transition: transform .18s ease;
    }
    .skip-link:focus { transform: translateY(0); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid var(--border);
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(10px);
    }
    .nav {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      flex: 0 0 auto;
      color: var(--ink-strong);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .16em;
    }
    .brand-mark { width: 34px; height: 28px; }
    .nav-links { display: flex; align-items: center; gap: 30px; }
    .nav-links a { color: #344054; font-size: 14px; font-weight: 600; }
    .nav-links a:hover { color: var(--blue); }
    .nav-actions { display: flex; align-items: center; gap: 10px; }
    .text-link { color: #344054; font-size: 14px; font-weight: 650; }
    .text-link:hover { color: var(--blue); }
    .menu-button {
      display: none;
      width: 42px;
      height: 42px;
      padding: 10px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
    }
    .menu-button span,
    .menu-button::before,
    .menu-button::after {
      width: 20px;
      height: 2px;
      display: block;
      content: "";
      background: var(--ink);
      transition: transform .18s ease, opacity .18s ease;
    }
    .menu-button span { margin: 5px 0; }
    .menu-button[aria-expanded="true"] span { opacity: 0; }
    .menu-button[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
    .menu-button[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }

    .button {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 18px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: #fff;
      color: #344054;
      font-size: 14px;
      font-weight: 700;
      box-shadow: var(--shadow-sm);
      transition: background .16s ease, border-color .16s ease, transform .16s ease;
    }
    .button:hover { border-color: #98a2b3; background: var(--surface-soft); transform: translateY(-1px); }
    .button.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
    .button.primary:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
    .button.dark { border-color: var(--navy); background: var(--navy); color: #fff; }
    .button.dark:hover { background: #1d2939; }
    .button.small { min-height: 40px; padding-inline: 15px; }

    .announcement { border-bottom: 1px solid #b2ddff; background: var(--blue-soft); }
    .announcement .wrap {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      color: #1849a9;
      font-size: 13px;
      text-align: center;
    }
    .announcement strong { font-weight: 700; }
    .announcement a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

    .hero {
      padding: 88px 0 74px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr);
      align-items: center;
      gap: clamp(52px, 7vw, 92px);
    }
    .eyebrow,
    .section-label {
      display: block;
      margin-bottom: 14px;
      color: var(--blue);
      font-size: 13px;
      font-weight: 750;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    h1 {
      max-width: 610px;
      margin-bottom: 24px;
      font-size: clamp(42px, 4.2vw, 62px);
      line-height: 1.08;
      letter-spacing: -.035em;
    }
    .hero-copy > p {
      max-width: 590px;
      margin-bottom: 30px;
      color: var(--body);
      font-size: 18px;
      line-height: 1.65;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero-note { margin-top: 22px; color: var(--muted); font-size: 13px; }
    .hero-note strong { color: #344054; }

    .product-window {
      overflow: hidden;
      border: 1px solid #cbd5e1;
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow-lg);
    }
    .window-bar {
      height: 42px;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 14px;
      border-bottom: 1px solid var(--border);
      background: #f8fafc;
    }
    .window-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
    .window-title { margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 650; }
    .workspace-ui { min-height: 432px; display: grid; grid-template-columns: 144px 1fr; }
    .workspace-sidebar { padding: 18px 12px; background: #111827; color: #d1d5db; }
    .mini-brand { margin-bottom: 24px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
    .mini-nav { display: grid; gap: 7px; }
    .mini-nav span { padding: 8px 9px; border-radius: 6px; font-size: 10px; }
    .mini-nav span.active { background: #1f2937; color: #fff; }
    .sidebar-label { margin: 24px 9px 8px; color: #6b7280; font-size: 8px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
    .workspace-main { padding: 24px; background: #f8fafc; }
    .workspace-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .workspace-top small { color: var(--blue); font-size: 9px; font-weight: 750; text-transform: uppercase; }
    .workspace-top h2 { margin: 5px 0 20px; font-size: 20px; letter-spacing: -.02em; }
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      border: 1px solid #abefc6;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      font-size: 9px;
      font-weight: 750;
    }
    .status-badge::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: #17b26a; }
    .question-card { padding: 16px; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
    .question-card label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
    .question-card p { margin: 0; color: #344054; font-size: 12px; font-weight: 600; line-height: 1.5; }
    .answer-card { margin-top: 12px; padding: 16px; border: 1px solid #abefc6; border-radius: 9px; background: #f6fef9; }
    .answer-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--green); font-size: 9px; font-weight: 750; text-transform: uppercase; }
    .answer-card p { margin-bottom: 12px; color: #344054; font-size: 11px; line-height: 1.55; }
    .evidence-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid #d1fadf; }
    .evidence-row b { color: #344054; font-size: 10px; }
    .evidence-row small { color: var(--muted); font-size: 8px; }
    .evidence-number { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; background: #dcfae6; color: var(--green); font-size: 8px; font-weight: 800; }
    .evidence-state { color: var(--green); font-size: 8px; font-weight: 750; }

    .platform-strip { padding: 24px 0; border-bottom: 1px solid var(--border); background: #fff; }
    .platform-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .platform-strip p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
    .surface-names { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 28px; }
    .surface-names span { color: #344054; font-size: 13px; font-weight: 750; }

    section { padding: 92px 0; }
    .section-head { max-width: 720px; margin-bottom: 44px; }
    .section-head.centered { margin-inline: auto; text-align: center; }
    .section-head h2,
    .split-copy h2,
    .trust-intro h2,
    .developer-copy h2,
    .faq-intro h2,
    .cta-copy h2 {
      margin-bottom: 18px;
      font-size: clamp(32px, 3vw, 44px);
      letter-spacing: -.03em;
    }
    .section-head p,
    .split-copy > p,
    .trust-intro > p,
    .developer-copy > p,
    .faq-intro > p,
    .cta-copy > p { color: var(--body); font-size: 17px; }

    .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .value-card { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
    .icon-box { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); }
    .icon-box svg { width: 21px; height: 21px; }
    .value-card h3 { margin-bottom: 10px; font-size: 19px; }
    .value-card p { margin: 0; color: var(--body); font-size: 14px; }

    .products { background: var(--surface-soft); }
    .product-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 24px;
      padding: 5px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
    }
    .product-tab {
      flex: 1;
      min-height: 48px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .product-tab:hover { color: var(--ink); background: #f9fafb; }
    .product-tab[aria-selected="true"] { background: var(--navy); color: #fff; }
    .product-panel {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 58px;
      align-items: center;
      min-height: 440px;
      padding: 48px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow-sm);
    }
    .product-panel[hidden] { display: none; }
    .product-name { display: block; margin-bottom: 12px; color: var(--blue); font-size: 12px; font-weight: 750; text-transform: uppercase; }
    .product-copy h3 { margin-bottom: 14px; font-size: 30px; letter-spacing: -.025em; }
    .product-copy > p { margin-bottom: 22px; color: var(--body); }
    .check-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
    .check-list li { position: relative; padding-left: 26px; color: #344054; font-size: 14px; }
    .check-list li::before { position: absolute; left: 0; top: 2px; color: var(--green); content: "✓"; font-weight: 800; }
    .panel-preview { overflow: hidden; border: 1px solid var(--border-strong); border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(16,24,40,.09); }
    .preview-toolbar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--border); background: #f9fafb; }
    .preview-toolbar i { width: 7px; height: 7px; border-radius: 50%; background: #d0d5dd; }
    .preview-body { min-height: 286px; display: grid; grid-template-columns: 112px 1fr; }
    .preview-side { padding: 16px 11px; border-right: 1px solid var(--border); background: #fcfcfd; }
    .preview-side b { display: block; margin-bottom: 18px; color: var(--ink); font-size: 9px; letter-spacing: .08em; }
    .preview-side span { display: block; margin-bottom: 7px; padding: 6px 7px; border-radius: 5px; color: var(--muted); font-size: 8px; }
    .preview-side span.active { background: var(--blue-soft); color: var(--blue); font-weight: 700; }
    .preview-content { padding: 20px; background: #fff; }
    .preview-title { width: 48%; height: 12px; margin-bottom: 17px; border-radius: 3px; background: #d0d5dd; }
    .preview-line { height: 7px; margin-bottom: 8px; border-radius: 3px; background: #eaecf0; }
    .preview-line.short { width: 68%; }
    .preview-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
    .preview-card { min-height: 86px; padding: 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-soft); }
    .preview-card strong { display: block; margin-bottom: 8px; color: #344054; font-size: 9px; }
    .preview-card span { display: block; height: 6px; margin-bottom: 6px; border-radius: 3px; background: #e4e7ec; }
    .preview-card span:last-child { width: 68%; }

    .capabilities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--border); }
    .capability { min-height: 220px; padding: 28px; background: #fff; }
    .capability .number { display: block; margin-bottom: 34px; color: var(--blue); font-size: 12px; font-weight: 750; }
    .capability h3 { margin-bottom: 10px; font-size: 18px; }
    .capability p { margin: 0; color: var(--body); font-size: 14px; }

    .architecture { background: var(--navy); color: #fff; }
    .architecture h2, .architecture h3 { color: #fff; }
    .architecture .section-label { color: #84caff; }
    .architecture .section-head p { color: #d0d5dd; }
    .architecture-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
    .architecture-step { position: relative; min-height: 170px; padding: 22px; border: 1px solid #344054; border-radius: 10px; background: #1d2939; }
    .architecture-step:not(:last-child)::after { position: absolute; top: 50%; right: -13px; z-index: 2; color: #98a2b3; content: "→"; transform: translateY(-50%); }
    .architecture-step small { display: block; margin-bottom: 18px; color: #84caff; font-size: 10px; font-weight: 750; text-transform: uppercase; }
    .architecture-step h3 { margin-bottom: 8px; font-size: 16px; }
    .architecture-step p { margin: 0; color: #d0d5dd; font-size: 12px; }

    .trial { background: var(--surface-blue); }
    .trial-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 72px; }
    .trial-points { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
    .trial-point { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 24px; border-bottom: 1px solid var(--border); }
    .trial-point:last-child { border-bottom: 0; }
    .trial-time { color: var(--blue); font-size: 12px; font-weight: 800; }
    .trial-point h3 { margin-bottom: 5px; font-size: 16px; }
    .trial-point p { margin: 0; color: var(--body); font-size: 13px; }
    .trial-note { margin-top: 20px; color: var(--muted); font-size: 12px; }

    .trust-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
    .trust-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 34px; }
    .trust-item { padding: 22px 0; border-top: 1px solid var(--border); }
    .trust-item h3 { margin-bottom: 7px; font-size: 16px; }
    .trust-item p { margin: 0; color: var(--body); font-size: 13px; }
    .trust-item strong { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-bottom: 12px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 12px; }

    .developer { background: var(--surface-soft); }
    .developer-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .tool-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
    .tool-tags span { padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: #344054; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
    .code-panel { overflow: auto; border-radius: 10px; background: #111827; box-shadow: var(--shadow-lg); }
    .code-bar { padding: 12px 16px; border-bottom: 1px solid #344054; color: #98a2b3; font-size: 11px; }
    .code-panel pre { margin: 0; padding: 24px; color: #d1d5db; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
    .code-blue { color: #84caff; }
    .code-green { color: #75e0a7; }

    .audiences { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .audience { padding: 24px; border: 1px solid var(--border); border-radius: 10px; }
    .audience > span { display: block; margin-bottom: 32px; color: var(--blue); font-size: 11px; font-weight: 750; text-transform: uppercase; }
    .audience h3 { margin-bottom: 8px; font-size: 17px; }
    .audience p { margin: 0; color: var(--body); font-size: 13px; }

    .faq { background: var(--surface-soft); }
    .faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; align-items: start; }
    .faq-list { border-top: 1px solid var(--border-strong); }
    details { border-bottom: 1px solid var(--border-strong); }
    summary { position: relative; padding: 21px 36px 21px 0; color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    summary::after { position: absolute; top: 21px; right: 4px; color: var(--blue); content: "+"; font-size: 22px; font-weight: 400; line-height: 1; }
    details[open] summary::after { content: "−"; }
    details p { max-width: 700px; padding: 0 36px 20px 0; margin: 0; color: var(--body); font-size: 14px; }

    .final-cta { padding: 80px 0; background: #fff; }
    .cta-shell { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 52px; border-radius: 14px; background: var(--blue); }
    .cta-copy { max-width: 720px; }
    .cta-copy h2 { margin-bottom: 12px; color: #fff; }
    .cta-copy p { margin: 0; color: #d1e9ff; }
    .cta-actions { display: flex; flex: 0 0 auto; gap: 10px; }
    .cta-actions .button { border-color: #fff; }
    .cta-actions .button.primary { background: #fff; color: var(--blue); }
    .cta-actions .button.primary:hover { background: #eff8ff; }
    .cta-actions .button.secondary { border-color: #84caff; background: transparent; color: #fff; }
    .cta-actions .button.secondary:hover { background: rgba(255,255,255,.08); }

    footer { padding: 64px 0 28px; border-top: 1px solid var(--border); background: var(--surface-soft); }
    .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 54px; }
    .footer-brand p { max-width: 350px; margin: 18px 0 0; color: var(--muted); font-size: 13px; }
    .footer-column h3 { margin-bottom: 16px; color: #344054; font-size: 13px; }
    .footer-column a { display: block; margin-bottom: 11px; color: var(--muted); font-size: 13px; }
    .footer-column a:hover { color: var(--blue); }
    .footer-bottom { display: flex; justify-content: space-between; gap: 30px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
    .truth-note { max-width: 650px; text-align: right; }
    .resource-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    .resource-actions .button { background: #fff; color: #344054; }
    .resource-actions .button.primary { background: var(--blue); color: #fff; }
    .company-section { background: var(--surface-soft); }
    .company-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 52px; align-items: start; }
    .company-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .company-link { min-height: 148px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
    .company-link small { display: block; margin-bottom: 9px; color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
    .company-link strong { display: block; margin-bottom: 7px; color: var(--ink-strong); font-size: 18px; }
    .company-link span { color: var(--body); font-size: 14px; }
    .company-link:hover { border-color: #84adff; box-shadow: 0 8px 24px rgba(16, 24, 40, .08); }

    .reveal { opacity: 1; transform: none; }

    @media (max-width: 1020px) {
      .nav-links { gap: 18px; }
      .hero-grid { grid-template-columns: 1fr; }
      .hero-copy { max-width: 760px; }
      .product-window { max-width: 760px; }
      .product-panel { grid-template-columns: 1fr; }
      .panel-preview { max-width: 700px; }
      .architecture-flow { grid-template-columns: repeat(3, 1fr); }
      .architecture-step:not(:last-child)::after { display: none; }
      .trial-grid, .trust-grid, .faq-grid { grid-template-columns: 1fr; gap: 46px; }
      .developer-shell { gap: 40px; }
      .audiences { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 820px) {
      :root { --wrap: min(calc(100% - 32px), 1180px); }
      .nav-links {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        display: none;
        align-items: stretch;
        padding: 16px;
        border-bottom: 1px solid var(--border);
        background: #fff;
        box-shadow: 0 10px 24px rgba(16,24,40,.08);
      }
      .nav-links.open { display: grid; }
      .nav-links a { padding: 10px; }
      .menu-button { display: block; }
      .nav-actions .text-link { display: none; }
      .hero { padding-top: 64px; }
      .platform-strip .wrap { align-items: flex-start; flex-direction: column; }
      .surface-names { justify-content: flex-start; }
      section { padding: 72px 0; }
      .value-grid, .capabilities-grid { grid-template-columns: 1fr; }
      .product-tabs { overflow-x: auto; justify-content: flex-start; }
      .product-tab { min-width: 122px; }
      .product-panel { min-height: 0; padding: 28px; }
      .architecture-flow { grid-template-columns: repeat(2, 1fr); }
      .developer-shell { grid-template-columns: 1fr; }
      .cta-shell { align-items: flex-start; flex-direction: column; padding: 38px; }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 560px) {
      :root { --wrap: min(calc(100% - 24px), 1180px); }
      .announcement .wrap { padding: 8px 0; }
      .announcement .wrap > span { display: none; }
      .nav-actions .button { display: none; }
      .hero { padding: 50px 0; }
      h1 { font-size: 40px; }
      .hero-actions .button { width: 100%; }
      .workspace-ui { min-height: 390px; grid-template-columns: 86px 1fr; }
      .workspace-sidebar { padding-inline: 7px; }
      .workspace-main { padding: 14px; }
      .workspace-top h2 { font-size: 16px; }
      .status-badge { display: none; }
      .evidence-row { grid-template-columns: 22px 1fr; }
      .evidence-state { grid-column: 2; }
      .surface-names { gap: 14px 22px; }
      .product-panel { padding: 20px; }
      .product-copy h3 { font-size: 25px; }
      .preview-body { grid-template-columns: 78px 1fr; }
      .preview-content { padding: 14px; }
      .preview-cards { grid-template-columns: 1fr; }
      .architecture-flow, .trust-list, .audiences { grid-template-columns: 1fr; }
      .company-grid, .company-links { grid-template-columns: 1fr; }
      .trial-point { grid-template-columns: 1fr; gap: 6px; }
      .cta-actions { width: 100%; flex-direction: column; }
      .cta-actions .button { width: 100%; }
      .footer-top { grid-template-columns: 1fr; }
      .footer-brand { grid-column: auto; }
      .footer-bottom { flex-direction: column; }
      .truth-note { text-align: left; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

/* Compatibility layer for the established Eventium and TitanVX content pages.
   It intentionally removes the prior dark animated treatment while preserving
   the pages' semantic content and purpose-built diagrams. */
body.eventium-ai,
body.titan-site {
  background: #fff !important;
  color: var(--ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body.eventium-ai::before,
body.eventium-ai::after,
body.titan-site::before,
body.titan-site::after,
.eventium-world-bg,
.world-model-bg,
.wm-layer { display: none !important; }
body.eventium-ai *,
body.titan-site * { animation: none !important; }

body.eventium-ai .topbar,
body.titan-site .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(255,255,255,.97) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
}
body.eventium-ai .nav,
body.titan-site .nav {
  min-height: 72px !important;
  padding: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
}
body.eventium-ai .brand img,
body.titan-site .brand img { width: auto !important; height: 42px !important; max-height: 42px !important; }
body.eventium-ai .navlinks,
body.titan-site .navlinks { gap: 28px !important; color: #344054 !important; font-size: 14px !important; }
body.eventium-ai .navlinks a,
body.titan-site .navlinks a,
body.eventium-ai .nav-dropdown > summary,
body.titan-site .nav-dropdown > summary { padding: 25px 0 23px !important; color: #344054 !important; font-weight: 650 !important; }
body.eventium-ai .navlinks a::after,
body.titan-site .navlinks a::after { bottom: 17px !important; height: 2px !important; background: var(--blue) !important; }
body.eventium-ai .navlinks a:hover,
body.eventium-ai .navlinks a[aria-current="page"],
body.titan-site .navlinks a:hover,
body.titan-site .navlinks a[aria-current="page"] { color: var(--blue) !important; }
body.eventium-ai .nav-dropdown-menu,
body.titan-site .nav-dropdown-menu { border: 1px solid var(--border) !important; background: #fff !important; box-shadow: var(--shadow-lg) !important; }

body.eventium-ai main,
body.titan-site main { position: relative !important; z-index: 1 !important; }
body.eventium-ai section,
body.titan-site section {
  padding: 76px 0 !important;
  border-top: 1px solid var(--border) !important;
  background: #fff !important;
}
body.eventium-ai main > section:nth-of-type(even),
body.titan-site main > section:nth-of-type(even) { background: var(--surface-soft) !important; }
body.eventium-ai main > section:first-child,
body.titan-site main > section:first-child {
  min-height: 0 !important;
  padding: 86px 0 72px !important;
  border-top: 0 !important;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%) !important;
}
body.eventium-ai .subnav {
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
}
body.eventium-ai .subnav .wrap {
  padding: 10px 0 !important;
  color: var(--muted) !important;
}
body.eventium-ai .subnav a:hover { color: var(--blue) !important; }
body.eventium-ai h1,
body.titan-site h1 { max-width: 760px !important; color: var(--ink-strong) !important; font-size: clamp(42px, 5vw, 62px) !important; line-height: 1.08 !important; letter-spacing: -.035em !important; }
body.eventium-ai h2,
body.titan-site h2 { color: var(--ink-strong) !important; font-size: clamp(30px, 3.4vw, 44px) !important; line-height: 1.15 !important; letter-spacing: -.025em !important; }
body.eventium-ai h3,
body.titan-site h3 { color: var(--ink-strong) !important; }
body.eventium-ai p,
body.eventium-ai li,
body.eventium-ai .lead,
body.titan-site p,
body.titan-site li,
body.titan-site .lead { color: var(--body) !important; }
body.eventium-ai .eyebrow,
body.eventium-ai .label,
body.titan-site .eyebrow,
body.titan-site .label {
  display: block !important;
  margin-bottom: 14px !important;
  background: none !important;
  color: var(--blue) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: .08em !important;
  -webkit-text-fill-color: currentColor !important;
  text-transform: uppercase !important;
}

body.eventium-ai .card,
body.eventium-ai .hero-card,
body.eventium-ai .evidence,
body.eventium-ai .step,
body.eventium-ai .guardrail,
body.eventium-ai .persona,
body.eventium-ai .visual,
body.eventium-ai .explainer,
body.eventium-ai .world,
body.eventium-ai .flow,
body.eventium-ai .ops,
body.eventium-ai .pipeline,
body.eventium-ai .tree,
body.eventium-ai .chat,
body.eventium-ai .table,
body.eventium-ai .callout,
body.titan-site .card,
body.titan-site .visual,
body.titan-site .explainer,
body.titan-site .world,
body.titan-site .flow,
body.titan-site .ops,
body.titan-site .pipeline,
body.titan-site .tree,
body.titan-site .chat,
body.titan-site .table,
body.titan-site .callout {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}
body.eventium-ai .card:hover,
body.titan-site .card:hover { transform: none !important; border-color: #98a2b3 !important; box-shadow: 0 8px 24px rgba(16,24,40,.08) !important; }
body.eventium-ai .btn,
body.eventium-ai .button,
body.titan-site .btn,
body.titan-site .button {
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #344054 !important;
  box-shadow: var(--shadow-sm) !important;
}
body.eventium-ai .btn.primary,
body.eventium-ai .button.primary,
body.titan-site .btn.primary,
body.titan-site .button.primary { border-color: var(--blue) !important; background: var(--blue) !important; color: #fff !important; }
body.eventium-ai .btn:hover,
body.eventium-ai .button:hover,
body.titan-site .btn:hover,
body.titan-site .button:hover { transform: none !important; border-color: #98a2b3 !important; }
body.eventium-ai input,
body.eventium-ai select,
body.eventium-ai textarea,
body.titan-site input,
body.titan-site select,
body.titan-site textarea { border: 1px solid var(--border-strong) !important; border-radius: 8px !important; background: #fff !important; color: var(--ink) !important; }
body.eventium-ai pre,
body.titan-site pre { border-color: var(--border) !important; }
body.eventium-ai .footer,
body.titan-site .footer { padding: 52px 0 28px !important; border-top: 1px solid var(--border) !important; background: var(--surface-soft) !important; }
body.eventium-ai .footer h3,
body.eventium-ai .footer p,
body.eventium-ai .footer a,
body.eventium-ai .footer div,
body.eventium-ai .copyright,
body.titan-site .footer h3,
body.titan-site .footer p,
body.titan-site .footer a,
body.titan-site .footer div,
body.titan-site .copyright { color: var(--muted) !important; }
body.eventium-ai .footer h3,
body.titan-site .footer h3 { color: #344054 !important; }
body.eventium-ai .footer a:hover,
body.titan-site .footer a:hover { color: var(--blue) !important; }

body.titan-site .static-world-map {
  position: absolute;
  inset: 76px 24px 24px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
body.titan-site .map-core {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 180px;
  padding: 15px 24px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-weight: 750;
}
body.titan-site .map-node {
  padding: 12px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  color: #344054;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
}
body.titan-site .live-stream div { min-height: 34px !important; }
body.titan-site .live-stream div::after { display: none !important; }

/* The technical architecture is an interactive document, but it uses the same
   restrained company system rather than the retired dark presentation theme. */
body.titan-site .app { background: var(--surface-soft) !important; }
body.titan-site .sidebar {
  width: auto !important;
  border-right: 1px solid var(--border) !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.titan-site .logo-box {
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: #fff !important;
  padding: 4px 4px 18px !important;
}
body.titan-site .logo-box img { width: 220px !important; background: transparent !important; }
body.titan-site .nav-item {
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #475467 !important;
}
body.titan-site .nav-item span { color: #98a2b3 !important; }
body.titan-site .nav-item:hover {
  border-color: var(--border) !important;
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
}
body.titan-site .nav-item.active {
  border-color: #b2ddff !important;
  background: var(--blue-soft) !important;
  color: var(--blue-dark) !important;
}
body.titan-site .nav-item.active span { color: var(--blue) !important; }
body.titan-site .nav-menu { overflow-y: auto !important; padding-right: 4px !important; }
body.titan-site .main { background: var(--surface-soft) !important; }
body.titan-site .stage {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}
body.titan-site .stage::before { display: none !important; }
body.titan-site .panel-section {
  padding: 44px 48px !important;
  border: 0 !important;
  background: #fff !important;
}
body.titan-site .card span { color: var(--blue) !important; }
body.titan-site .flowline div,
body.titan-site .pathline div,
body.titan-site .deep-list div,
body.titan-site .sequence .seq,
body.titan-site .concept-row,
body.titan-site .steps li,
body.titan-site .mini-note,
body.titan-site table {
  border-color: var(--border) !important;
  background: var(--surface-soft) !important;
  color: #344054 !important;
}
body.titan-site .flowline div::after { color: var(--blue) !important; }
body.titan-site th { border-color: var(--border) !important; background: #f2f4f7 !important; color: var(--ink) !important; }
body.titan-site td,
body.titan-site td:first-child,
body.titan-site .concept-row strong,
body.titan-site .sequence strong,
body.titan-site .steps strong { color: #344054 !important; }
body.titan-site .quote,
body.titan-site .flow-panel {
  border-color: #b2ddff !important;
  background: var(--blue-soft) !important;
  color: var(--ink) !important;
}

@media (max-width: 900px) {
  body.eventium-ai .nav,
  body.titan-site .nav { min-height: auto !important; padding: 14px 0 !important; align-items: flex-start !important; flex-direction: column !important; }
  body.eventium-ai .navlinks,
  body.titan-site .navlinks { gap: 8px 18px !important; flex-wrap: wrap !important; }
  body.eventium-ai .navlinks a,
  body.titan-site .navlinks a,
  body.eventium-ai .nav-dropdown > summary,
  body.titan-site .nav-dropdown > summary { padding: 7px 0 !important; }
  body.eventium-ai .hero-grid,
  body.eventium-ai .split,
  body.eventium-ai .grid3,
  body.eventium-ai .grid2,
  body.eventium-ai .footer-grid,
  body.titan-site .hero-grid,
  body.titan-site .split,
  body.titan-site .grid3,
  body.titan-site .grid2,
  body.titan-site .footer-grid { grid-template-columns: 1fr !important; }
  body.eventium-ai .hero-grid,
  body.titan-site .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body.titan-site .static-world-map { position: relative; inset: auto; min-height: 420px; }
  body.titan-site .sidebar { position: relative !important; padding: 16px !important; }
  body.titan-site .logo-box { justify-content: flex-start !important; }
  body.titan-site .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 8px !important;
  }
  body.titan-site .nav-item { width: auto !important; flex: 0 0 auto !important; }
  body.titan-site .main { padding: 12px !important; }
  body.titan-site .panel-section { padding: 30px 22px !important; }
}

/* The homepage graphic is an editorial relationship flow. It keeps the
   connected-memory idea visible without presenting a dense engineering map. */
body.titan-site .live-graph { min-height: 560px !important; }
body.titan-site .live-graph canvas {
  display: none !important;
}
body.titan-site .live-graph > .panel-tag { z-index: 4 !important; }
body.titan-site .system-graph-svg {
  position: absolute;
  inset: 38px 14px 10px;
  z-index: 2;
  width: calc(100% - 28px);
  height: calc(100% - 48px);
  max-width: none;
  overflow: hidden;
}
body.titan-site .system-graph-svg .graph-heading {
  fill: #101828;
  font: 800 18px Inter, "Segoe UI", Arial, sans-serif;
  text-anchor: middle;
}
body.titan-site .system-graph-svg .graph-subheading {
  fill: #667085;
  font: 500 12px Inter, "Segoe UI", Arial, sans-serif;
  text-anchor: middle;
}
body.titan-site .system-graph-svg .graph-zone > rect {
  fill: #f8fafc;
  stroke: #d0d5dd;
  stroke-width: 1.2;
}
body.titan-site .system-graph-svg .zone-label {
  fill: #667085;
  font: 800 10px Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 1.2px;
}
body.titan-site .system-graph-svg .edge {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  marker-end: url(#graphArrow);
  opacity: .72;
}
body.titan-site .system-graph-svg .edge.blue { stroke: #0ea5e9; }
body.titan-site .system-graph-svg .edge.purple { stroke: #8b5cf6; }
body.titan-site .system-graph-svg .edge.green { stroke: #16a34a; }
body.titan-site .system-graph-svg .edge.orange { stroke: #ea580c; }
body.titan-site .system-graph-svg .edge.dark { stroke: #344054; }
body.titan-site .system-graph-svg .zone-node rect { fill: #fff; stroke: #d0d5dd; stroke-width: 1.1; }
body.titan-site .system-graph-svg .zone-node circle { fill: currentColor; }
body.titan-site .system-graph-svg .zone-node .node-title { fill: #101828; font: 750 13px Inter, "Segoe UI", Arial, sans-serif; }
body.titan-site .system-graph-svg .zone-node .node-meta { fill: #667085; font: 500 11px Inter, "Segoe UI", Arial, sans-serif; }
body.titan-site .system-graph-svg .zone-node.blue { color: #0ea5e9; }
body.titan-site .system-graph-svg .zone-node.purple { color: #8b5cf6; }
body.titan-site .system-graph-svg .zone-node.green { color: #16a34a; }
body.titan-site .system-graph-svg .zone-node.orange { color: #ea580c; }
body.titan-site .system-graph-svg .zone-node.dark { color: #344054; }
body.titan-site .system-graph-svg .graph-node.blue { color: #0ea5e9; }
body.titan-site .system-graph-svg .graph-node.purple { color: #8b5cf6; }
body.titan-site .system-graph-svg .graph-node.green { color: #16a34a; }
body.titan-site .system-graph-svg .graph-node.orange { color: #ea580c; }
body.titan-site .system-graph-svg .graph-node.dark { color: #344054; }
body.titan-site .system-graph-svg .graph-node.atlas rect { fill: #101828; stroke: #101828; }
body.titan-site .system-graph-svg .graph-node.atlas text { fill: #fff; text-anchor: middle; }
body.titan-site .system-graph-svg .graph-node.atlas line { stroke: #344054; stroke-width: 1; }
body.titan-site .system-graph-svg .graph-node.atlas .atlas-kicker { fill: #98a2b3; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
body.titan-site .system-graph-svg .graph-node.atlas .atlas-name { font-size: 18px; font-weight: 800; }
body.titan-site .system-graph-svg .graph-node.atlas .atlas-meta { fill: #d0d5dd; font-size: 9.5px; font-weight: 600; }
body.titan-site .system-graph-svg .graph-caption rect { fill: #f2f4f7; stroke: #d0d5dd; }
body.titan-site .system-graph-svg .graph-caption text { fill: #475467; font: 750 10px Inter, "Segoe UI", Arial, sans-serif; text-anchor: middle; letter-spacing: .8px; }
@media (max-width: 1150px) {
  body.titan-site .live-graph { min-height: 540px !important; }
}