/* ============================================
   Trust3 AI — Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300;1,400;1,500;1,600;1,700;1,900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ Trust3 brand palette (May 2026) ============
     Per brand style sheet — NO Signal Lime (#d9ff45). */
  --brand-indigo: #285ef9;       /* Foundation Indigo — PRIMARY */
  --brand-indigo-deep: #1f299c;  /* Electric Indigo */
  --brand-navy: #0d2645;         /* Deep Core Navy */
  --brand-violet: #7174eb;       /* Network Violet */
  --brand-cyan: #30d1ff;         /* Pulse Cyan */
  --brand-lavender: #a3a9f5;     /* Soft Signal Lavender */
  --brand-gray: #f3f3f3;         /* Cloud Gray */

  /* Default dark theme — Deep Core Navy foundation */
  --bg: #060914;            /* near-black tinted toward navy */
  --bg-soft: #0a1024;       /* subtle lift toward Deep Core Navy */
  --bg-elev: #0d2645;       /* card surface = Deep Core Navy */
  --fg: #FAFAFA;            /* primary text */
  --fg-dim: #A3A9C5;         /* mid-tone with cool/lavender bias */
  --fg-faint: #5C6080;       /* dim labels */
  --accent: #285ef9;         /* Foundation Indigo */
  --accent-deep: #1f299c;    /* Electric Indigo (hover/active) */
  --accent-soft: rgba(40, 94, 249, 0.06);  /* pale brand tint */
  --em-color: var(--fg);                   /* emphasis text — uses fg, not blue */
  --accent-warm: #7174eb;    /* Network Violet — secondary brand accent */
  /* Surface overlay base — used in rgba(var(--on-surface), X)
     for borders, surfaces, dividers. Flips for light theme. */
  --on-surface: 255, 255, 255;
  --bg-rgb: 6, 9, 20;
  --bg-elev-rgb: 13, 38, 69;
  --color-scheme: dark;

  /* ===== Theme-agnostic structural tokens =====
     These MUST live in :root, not inside a theme block, or they
     vanish whenever the theme block doesn't match. */
  --line: rgba(var(--on-surface), 0.13);
  --line-strong: rgba(var(--on-surface), 0.24);

  --serif: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --max: 1280px;
  --gut: clamp(1.25rem, 4vw, 3rem);
}

/* ============ LIGHT THEME ============ */
html[data-theme="light"] {
  --bg: #f3f3f3;            /* Cloud Gray */
  --bg-soft: #e8e8eb;       /* slightly darker neutral */
  --bg-elev: #ffffff;       /* card surface, white */
  --fg: #0d2645;            /* Deep Core Navy as primary text */
  --fg-dim: #4a5570;        /* cool mid-gray */
  --fg-faint: #9099b0;      /* light cool gray */
  --accent: #285ef9;        /* Foundation Indigo */
  --accent-deep: #1f299c;   /* Electric Indigo, used for hover */
  --accent-soft: rgba(40, 94, 249, 0.06);
  --em-color: var(--fg);
  --accent-warm: #7174eb;   /* Network Violet */
  /* Inverted overlay base */
  --on-surface: 13, 38, 69;
  --bg-rgb: 243, 243, 243;
  --bg-elev-rgb: 255, 255, 255;
  --color-scheme: light;
  --line: rgba(var(--on-surface), 0.10);
  --line-strong: rgba(var(--on-surface), 0.20);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--sans);
  font-weight: 400;            /* Inter Regular default; .lede + p use 300 (Light) per brand */
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  font-size: 16px;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
  transition: background-color 0.35s ease, color 0.35s ease;
  color-scheme: var(--color-scheme);
}

/* Smooth theme-switch transitions on major surfaces */
.site-header,
.dropdown-panel,
.t3-chat-panel,
.t3-chat-trigger,
.score-badge,
.btn,
.btn-primary,
.btn-ghost,
.pillar,
.story-card,
.case-card,
.case-feature,
.capability-card,
.feat,
.agent-section,
.faq-item,
.q-options .option {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* Background grid texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  opacity: 0.28;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.92 0 0 0 0 0.89 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.25;
  mix-blend-mode: overlay;
}

main, header, footer, section { position: relative; z-index: 1; }

/* ============ Typography ============ */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;            /* Inter Semibold default for H2/H3 per brand */
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.display {
  font-family: var(--sans);
  font-weight: 800;            /* Inter ExtraBold */
  font-size: clamp(20px, 2.5vw, 36px);  /* px cap immune to WP root-font overrides; sized to fit narrow WP content containers */
  letter-spacing: -0.035em;
  line-height: 1.15;
  white-space: nowrap;          /* force single line on desktop */
}

/* Mobile / narrow viewports — let the headline wrap so it's readable on phones.
   !important is required here so this rule beats inline styles on the H1. */
@media (max-width: 900px) {
  .display {
    white-space: normal !important;
    font-size: clamp(22px, 6.5vw, 34px) !important;
    line-height: 1.15 !important;
    padding: 0 0.5rem !important;
  }
}

.display em {
  font-style: italic;
  color: var(--accent);        /* Foundation Indigo emphasis */
  font-weight: 700;
}

/* ============ Rainbow word — letter-by-letter brand gradient ============
   Sample-inspired focal-word treatment. Uses ONLY Trust3 brand palette:
   Pulse Cyan → Soft Signal Lavender → Network Violet → Foundation Indigo
   → Electric Indigo. Applied to key words in the H1 to draw the eye
   without italics. Cool-to-deep gradient mirrors the visual energy of the
   reference layout while staying 100% on brand (no orange, no teal, no lime). */
.rainbow-word {
  background: linear-gradient(
    90deg,
    var(--brand-cyan) 0%,
    var(--brand-lavender) 28%,
    var(--brand-violet) 56%,
    var(--brand-indigo) 82%,
    var(--brand-indigo-deep) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: normal;
  font-weight: inherit;        /* match parent display weight */
  white-space: nowrap;         /* keep multi-word phrases like "data source" on one line */
}

/* Safari fallback — if background-clip:text fails, use Foundation Indigo */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .rainbow-word {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
  }
}

/* ============ Marquee-style animated gradient on key phrase ============
   Used in the hero H1 to give "agents and data" a professional motion
   treatment — a continuously flowing brand-color gradient. Reads as
   marquee/motion without scrolling text or breaking line flow. */
.marquee-words {
  display: inline-block;
  position: relative;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* Brand-palette gradient sweep — Foundation Indigo → Network Violet
     → Pulse Cyan → Soft Signal Lavender → loop back. NO Signal Lime, NO Vector Teal. */
  background-image: linear-gradient(
    90deg,
    var(--brand-indigo) 0%,
    var(--brand-violet) 25%,
    var(--brand-cyan) 50%,
    var(--brand-lavender) 75%,
    var(--brand-indigo) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: marquee-gradient-flow 6s linear infinite;
  /* keep underline area free in case browser tries to render text-decoration */
  text-decoration: none;
}

@keyframes marquee-gradient-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-words {
    animation: none;
    background-position: 0% 50%;
  }
}

/* Inner span lets us add subtle micro-tracking without affecting outer flow */
.marquee-words-inner {
  display: inline-block;
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 700;            /* Inter Bold for H2 */
  letter-spacing: -0.025em;
}

h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h4 {
  font-size: 1.25rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

p { color: var(--fg); max-width: 65ch; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.tag-mono {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

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

.dim { color: var(--fg-dim); }

/* ============ Layout ============ */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* Tighter vertical rhythm — less wasted whitespace between sections */
section { padding: clamp(2rem, 4vw, 4rem) 0; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 760px;
}

@media (min-width: 900px) {
  .section-head {
    gap: 1.25rem;
  }
}

/* ============ Header / Nav ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--bg-rgb), 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gut);
  max-width: var(--max);
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* New logo image — replaces dot-grid SVG mark + text */
.brand-logo {
  display: block !important;
  height: 22px !important;
  width: auto !important;
  max-width: 130px !important;
  max-height: 22px !important;
  object-fit: contain;
  /* Dark mode: invert dark text to light; the blue dots become a gold tone
     that aligns with the accent palette. */
  transition: filter 0.35s ease;
}
html:not([data-theme="light"]) .brand-logo {
  filter: invert(1) hue-rotate(180deg) saturate(1.1);
}
.site-footer .brand-logo {
  height: 26px !important;
  max-height: 26px !important;
  max-width: 150px !important;
}

/* Legacy brand-mark — kept for backwards compatibility, no longer used */
.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  position: relative;
}

.brand-mark svg { width: 100%; height: 100%; }

.brand sup {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-left: 0.15rem;
  vertical-align: super;
}

.nav-links {
  display: none;
  gap: 1.7rem;
  align-items: center;
  list-style: none;
}

.nav-links a {
  font-size: 0.9rem;
  color: var(--fg);
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--accent); }

@media (min-width: 980px) {
  .nav-links { display: flex; }
}

/* Dropdown menu */
.nav-links .has-dropdown { position: relative; }

.nav-links .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Hover bridge: invisible strip below the toggle that keeps hover continuous
   while the cursor crosses the gap between toggle and dropdown panel.
   Anchored to the toggle (not the panel) so it stays within the toggle's
   width and doesn't overlap sibling nav links. */
.nav-links .dropdown-toggle::before {
  content: "";
  position: absolute;
  top: 100%;
  left: -0.4rem;
  right: -0.4rem;
  height: 1.4rem;
}

.nav-links .dropdown-toggle .caret {
  width: 10px;
  height: 10px;
  transition: transform 0.25s ease;
  opacity: 0.6;
}

.nav-links .has-dropdown:hover .dropdown-toggle .caret,
.nav-links .has-dropdown.is-open .dropdown-toggle .caret { transform: rotate(180deg); opacity: 1; }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 1rem);
  left: -1rem;
  background: rgba(var(--bg-rgb), 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0.6rem;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 100;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.5);
}

.dropdown-panel::before {
  display: none;
}

.nav-links .has-dropdown:hover .dropdown-panel,
.nav-links .has-dropdown:focus-within .dropdown-panel,
.nav-links .has-dropdown.is-open .dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-item {
  display: flex !important;
  gap: 1rem;
  padding: 0.85rem 1rem !important;
  border-radius: 4px;
  text-decoration: none;
  align-items: flex-start;
  transition: background 0.18s, color 0.18s;
}

.dropdown-item::after { display: none !important; }
.dropdown-item:hover { background: rgba(40, 94, 249, 0.06); color: var(--fg) !important; }

.dropdown-num {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-top: 0.18rem;
  min-width: 1.6rem;
}

.dropdown-item > div { display: flex; flex-direction: column; gap: 0.2rem; }

.dropdown-title {
  font-size: 0.95rem;
  font-family: var(--serif);
  letter-spacing: -0.01em;
  color: var(--fg);
}

.dropdown-desc {
  font-size: 0.78rem;
  color: var(--fg-dim);
  line-height: 1.4;
}

.dropdown-item:hover .dropdown-title { color: var(--accent); }

.dropdown-foot {
  margin-top: 0.4rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-foot a { color: var(--accent) !important; padding: 0 !important; }
.dropdown-foot a::after { display: none !important; }

/* Mobile sub-list */
.mobile-menu .submenu {
  list-style: none;
  margin: 0.6rem 0 0.8rem 1.2rem;
  padding: 0 0 0 1rem;
  border-left: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mobile-menu .submenu a {
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  color: var(--fg-dim);
  padding: 0.5rem 0;
}

.mobile-menu .submenu a:hover { color: var(--accent); }

.mobile-menu .submenu a .num {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-right: 0.6rem;
}

.nav-cta-mobile {
  display: inline-flex;
}

@media (min-width: 980px) {
  .nav-cta-mobile { display: none; }
  .nav-cta-desktop { display: inline-flex; }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  background: transparent;
  color: var(--fg);
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -10px rgba(40, 94, 249, 0.4);
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--fg);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-arrow {
  width: 18px; height: 18px;
  transition: transform 0.25s;
}
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn-sm {
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
}

/* ============ Hero ============ */
.hero {
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}

/* Hero needs a wider container than other sections so the long single-line
   headline fits without forcing a tiny font on widescreens.
   !important defeats common WordPress theme overrides that constrain .container. */
.hero > .container {
  max-width: 1400px !important;
}

.hero-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 60vw;
  max-width: 1100px;
  max-height: 800px;
  background: radial-gradient(ellipse, rgba(40, 94, 249, 0.18), rgba(113, 116, 235, 0.08) 40%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 2.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.hero-meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(40, 94, 249, 0.6); }

/* Centered single-column hero — customer panel removed */
.hero-grid {
  display: block;
  text-align: center;
  position: relative;
  max-width: 1400px;             /* widened to accommodate the 47-char single-line headline */
  margin: 0 auto;
}

.hero-grid .display {
  margin-left: auto;
  margin-right: auto;
  /* Explicit <br> tags control line breaks — no width constraint needed */
  line-height: 1.0;
}

.hero-grid .display em {
  display: inline-block;       /* clean italic ascender rendering */
}

.hero p.lede {
  font-size: clamp(13px, 1.05vw, 16px);   /* px cap immune to WP root-font overrides */
  font-weight: 400;
  color: var(--fg-dim);
  max-width: none;                              /* removed 64ch cap so it can run wide */
  margin: 2rem auto 0;
  line-height: 1.55;
  white-space: nowrap;                          /* one line on desktop */
}

@media (max-width: 900px) {
  .hero p.lede {
    white-space: normal !important;                 /* allow wrap on mobile — !important beats inline */
    max-width: 60ch !important;
    text-wrap: pretty !important;
    font-size: 14px !important;
    padding: 0 0.5rem !important;
  }
}

.hero p.lede em.brand-emphasis {
  color: var(--brand-violet);
  font-style: italic;
  font-weight: 500;
}

.hero-cta {
  display: flex;
  gap: 0.8rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============ Customer credibility panel (hero right side) ============ */
.customer-panel {
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(var(--bg-elev-rgb), 0.6), rgba(var(--bg-rgb), 0.3));
  padding: 1.6rem 1.5rem 1.8rem;
  border-radius: 4px;
  position: relative;
  font-family: var(--mono);
  overflow: hidden;
}

/* Subtle saffron scan line — preserves the "live system" feel */
.customer-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: scan 4s ease-in-out infinite;
}
@keyframes scan {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}

.customer-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.4rem;
  color: var(--fg-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.66rem;
}

/* 3×3 grid of customer-name tiles */
.customer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.customer-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--fg);
  background: rgba(var(--on-surface), 0.02);
  text-align: center;
  line-height: 1.1;
  letter-spacing: -0.005em;
  transition: border-color 0.25s ease, background 0.25s ease;
  text-decoration: none;
  min-height: 46px;
}
.customer-tile:hover {
  border-color: var(--accent);
  background: rgba(40, 94, 249, 0.04);
}

.customer-tile-more {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.06em;
}

/* Pull-quote at the bottom of the panel */
.customer-panel-quote {
  margin: 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
}
.customer-panel-quote p {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--fg);
  margin: 0 0 0.7rem;
  font-weight: 300;
}
.customer-panel-quote p em {
  font-style: italic;
  color: var(--em-color);
  font-weight: 400;
}
.customer-panel-quote cite {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-style: normal;
}

/* On narrow viewports, drop to 2 columns to keep names readable */
@media (max-width: 540px) {
  .customer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Logo Strip ============ */
.logos {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 0;
  overflow: hidden;
}

.logos-label {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  margin-bottom: 2rem;
}

.logos-track {
  display: flex;
  gap: 4rem;
  animation: marquee 40s linear infinite;
  width: max-content;
  align-items: center;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.logo-item {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--fg-dim);
  white-space: nowrap;
  letter-spacing: -0.02em;
  opacity: 0.85;
  transition: color 0.3s, opacity 0.3s;
}
.logo-item:hover { color: var(--fg); opacity: 1; }

/* ============ Partner / Integration Logo Marquee ============ */
.partners {
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(var(--on-surface), 0.015);
  overflow: hidden;
}
.partners-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
  margin-bottom: 1.6rem;
}

/* Marquee viewport — clips the scrolling track and applies edge fades */
.partners-marquee {
  position: relative;
  display: flex;
  gap: 0;
  overflow: hidden;
  /* Edge fade-out via CSS mask. Bg shows through the soft edges. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* Each track is a single row containing the full set of items.
   Two tracks side-by-side, both translating left at the same rate, give a
   seamless infinite loop: when track 1 leaves the viewport, track 2 is
   already filling the gap. */
.partners-track {
  display: flex;
  flex: none;
  gap: 0;
  padding: 0.5rem 0;
  animation: partners-marquee-scroll 50s linear infinite;
  will-change: transform;
}
@keyframes partners-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Pause when the user hovers — they can read names */
.partners-marquee:hover .partners-track {
  animation-play-state: paused;
}

/* Respect reduced-motion preference: stop the scroll. The duplicate track
   becomes hidden via overflow on .partners-marquee so users see one full set. */
@media (prefers-reduced-motion: reduce) {
  .partners-track {
    animation: none;
  }
}

/* Each chip: logo on the left, name on the right, all inline */
.partner-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.5rem;
  flex-shrink: 0;
  color: var(--fg-dim);
  white-space: nowrap;
  transition: color 0.25s ease;
  border-right: 1px solid rgba(var(--on-surface), 0.06);
}
.partner-chip:last-child {
  border-right: 1px solid rgba(var(--on-surface), 0.06);
  /* Keep separator so the loop seam is invisible */
}
.partner-chip:hover {
  color: var(--fg);
}

/* Logo marks — same sizing as before, just smaller for the row */
.partners-marquee .partner-mark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}
.partners-marquee .partner-text-mark {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1;
  border: 1px solid currentColor;
  border-radius: 4px;
  flex-shrink: 0;
  background: transparent;
}

/* Name label — inline, single line */
.partner-chip-name {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}

/* On narrow viewports, keep the row tight and slightly faster */
@media (max-width: 700px) {
  .partner-chip { padding: 0.5rem 1rem; gap: 0.55rem; }
  .partner-chip-name { font-size: 0.72rem; }
  .partners-track { animation-duration: 35s; }
}

/* ============ Three Pillars (Discover / Observe / Authorize) ============ */
.pillars {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

.pillar {
  background: var(--bg);
  padding: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  position: relative;
  transition: background 0.4s;
}
.pillar:hover { background: var(--bg-soft); }

.pillar-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--fg-dim);
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  display: block;
}

.pillar h3 {
  margin-bottom: 0.9rem;
}
.pillar h3 em { font-style: italic; color: var(--em-color); }

.pillar p {
  color: var(--fg-dim);
  font-size: 0.96rem;
  line-height: 1.55;
  margin-bottom: 1.6rem;
}

.pillar-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 1rem;
  color: var(--accent);
}

.pillar ul {
  list-style: none;
  padding: 1.1rem 0 0;
  margin: 0;
  border-top: 1px dashed var(--line-strong);
}

.pillar ul li {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fg-dim);
  padding: 0.4rem 0;
  display: flex;
  gap: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.pillar ul li::before {
  content: "→";
  color: var(--accent);
  flex-shrink: 0;
}

/* ============ Feature Block ============ */
.feature {
  display: grid;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1.1fr; }
  .feature.reverse > :first-child { order: 2; }
}

.feature h2 em { font-style: italic; color: var(--em-color); }

.feature p {
  font-size: 1.05rem;
  color: var(--fg-dim);
  margin: 1.5rem 0;
  line-height: 1.65;
}

.feature-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.stat-num {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
}

.stat-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  margin-top: 0.5rem;
}

.feature-visual {
  border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, rgba(var(--bg-elev-rgb), 0.7), rgba(var(--bg-rgb), 0.4));
  padding: 2rem;
  border-radius: 6px;
  position: relative;
  min-height: 380px;
}

/* ============ ROI / Responsible AI ============ */
.roi-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 3rem;
}

@media (min-width: 700px) {
  .roi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .roi-grid { grid-template-columns: repeat(4, 1fr); }
}

.roi-cell {
  padding: 2rem;
  background: var(--bg);
  position: relative;
}

.roi-cell .num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 300;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -0.04em;
}

.roi-cell h4 { margin-bottom: 0.6rem; }
.roi-cell p {
  font-size: 0.9rem;
  color: var(--fg-dim);
  line-height: 1.55;
}

/* ============ Quote ============ */
.quote-block {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.75rem, 3.5vw, 3rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  max-width: 820px;
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  position: relative;
}

.quote-block .quote-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.quote-block p {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-weight: 300;
  margin: 0 0 1.4rem;
  max-width: 60ch;
  color: var(--fg);
}

.quote-block cite {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  font-style: normal;
  text-transform: uppercase;
  display: block;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}

.quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 300;
  max-width: 38ch;
  margin: 0 auto;
}

.quote::before {
  content: "“";
  font-family: var(--serif);
  font-size: 4rem;
  color: var(--accent);
  display: block;
  line-height: 0.4;
  margin-bottom: 1.2rem;
}

.quote-attr {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ============ CTA Banner ============ */
.cta-banner {
  background: var(--accent);
  color: var(--bg);
  padding: clamp(3rem, 6vw, 5rem) var(--gut);
  position: relative;
  overflow: hidden;
}

.cta-banner h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  max-width: 18ch;
  letter-spacing: -0.025em;
}

.cta-banner h2 em { font-style: italic; }

.cta-banner-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  align-items: end;
}

@media (min-width: 800px) {
  .cta-banner-grid {
    grid-template-columns: 1.5fr 1fr;
  }
}

.cta-banner .btn {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--bg);
}
.cta-banner .btn:hover {
  background: var(--bg-elev);
  border-color: #1a1c19;
}

/* Decorative pattern in CTA */
.cta-banner::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    rgba(var(--bg-rgb), 0.06) 20px,
    rgba(var(--bg-rgb), 0.06) 40px
  );
  pointer-events: none;
}

/* ============ Newsletter ============ */
.newsletter {
  border: 1px solid var(--line-strong);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(var(--bg-elev-rgb), 0.6), transparent);
  display: grid;
  gap: 2rem;
}

@media (min-width: 800px) {
  .newsletter { grid-template-columns: 1fr 1fr; align-items: center; }
}

.newsletter h3 { font-size: 2rem; margin-bottom: 0.6rem; }
.newsletter h3 em { font-style: italic; color: var(--em-color); }
.newsletter p { color: var(--fg-dim); }

.newsletter-form {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

@media (min-width: 500px) {
  .newsletter-form { flex-direction: row; }
}

.newsletter-form input {
  flex: 1;
  background: rgba(var(--bg-rgb), 0.6);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 0.25s;
}
.newsletter-form input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ============ Footer ============ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  background: var(--bg);
}

.footer-grid {
  display: grid;
  gap: 3rem;
  margin-bottom: 3rem;
}

@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.footer-brand p {
  color: var(--fg-dim);
  font-size: 0.92rem;
  max-width: 30ch;
  margin: 1rem 0 1.5rem;
}

.footer-col h5 {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  margin-bottom: 1.2rem;
}

.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 0.7rem; }
.footer-col ul a {
  color: var(--fg);
  font-size: 0.92rem;
  transition: color 0.2s;
}
.footer-col ul a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--fg-dim);
  letter-spacing: 0.05em;
}
.footer-bottom-link {
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-bottom-link:hover {
  color: var(--accent);
}

.social-icons {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
}
.social-icons a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: all 0.25s;
}
.social-icons a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ============ Page Header (Internal) ============ */
.page-hero {
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.page-hero .glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(40, 94, 249, 0.044), transparent 60%);
  filter: blur(50px);
  pointer-events: none;
}

.page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -0.035em;
  font-weight: 300;
  max-width: 18ch;
  margin-bottom: 1.5rem;
}
.page-hero h1 em { font-style: italic; color: var(--em-color); }

.page-hero p {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--fg-dim);
  max-width: 60ch;
}

/* ============ Blog/News Cards ============ */
.posts-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 700px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  background: var(--bg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background 0.3s;
  min-height: 280px;
  position: relative;
}
.post-card:hover { background: var(--bg-soft); }

/* Featured image (only present on dynamic cards from WP posts that have one set) */
.post-card-image {
  margin: -2rem -2rem 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-elev);
}
.post-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.post-card:hover .post-card-image img { transform: scale(1.03); }

.post-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.post-meta .cat { color: var(--accent); }

.post-card h3 {
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  flex: 1;
}

.post-card .read-more {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  transition: gap 0.25s;
}
.post-card:hover .read-more { gap: 0.8rem; }

/* News list (more text-driven) */
.news-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.news-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s;
  margin: 0 calc(-1 * var(--gut));
  padding-left: var(--gut);
  padding-right: var(--gut);
}

@media (min-width: 800px) {
  .news-item {
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 3rem;
  }
}

.news-item:hover { background: var(--bg-soft); }

.news-date {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}

.news-title {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.news-arrow { color: var(--accent); font-size: 1.2rem; }

/* ============ FAQ ============ */
.faq-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3rem;
  flex-wrap: wrap;
  padding-bottom: 0;
}

.faq-tab {
  padding: 0.8rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  margin-bottom: -1px;
}
.faq-tab:hover { color: var(--fg); }
.faq-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.faq-group { display: none; }
.faq-group.active { display: block; animation: fadeIn 0.4s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
}

.faq-q {
  width: 100%;
  background: none;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--fg);
  padding: 0.5rem 0;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--accent); }

.faq-q .toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.25s;
  font-family: var(--mono);
  color: var(--fg);
  font-size: 1rem;
}

.faq-item.open .faq-q .toggle {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.open .faq-a {
  max-height: 1200px;
  padding: 1.2rem 0 0.5rem;
}

.faq-a p, .faq-a li {
  color: var(--fg-dim);
  font-size: 0.96rem;
  line-height: 1.65;
}
.faq-a p + p { margin-top: 1rem; }
.faq-a ul { padding-left: 1.2rem; margin-top: 0.8rem; }
.faq-a li { margin-bottom: 0.4rem; }
.faq-a strong { color: var(--fg); font-weight: 500; }

/* ============ Demo Form ============ */
.demo-grid {
  display: grid;
  gap: 4rem;
}

@media (min-width: 950px) {
  .demo-grid { grid-template-columns: 1fr 1.1fr; gap: 5rem; }
}

.demo-info h2 em { font-style: italic; color: var(--em-color); }

.demo-info ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  border-top: 1px solid var(--line);
}

.demo-info ul li {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.demo-info ul li .num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  min-width: 36px;
}

.demo-info ul li h4 { margin-bottom: 0.3rem; }
.demo-info ul li p { font-size: 0.92rem; color: var(--fg-dim); }

.demo-form {
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(var(--bg-elev-rgb), 0.7), rgba(var(--bg-rgb), 0.3));
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 6px;
}

.form-row {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 600px) { .form-row.two { grid-template-columns: 1fr 1fr; } }

.form-field { display: flex; flex-direction: column; gap: 0.5rem; }

.form-field label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}

.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(var(--bg-rgb), 0.6);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-field textarea { min-height: 120px; resize: vertical; }
.form-field select { cursor: pointer; }

/* ============ About Page ============ */
.timeline {
  position: relative;
  padding-left: 3rem;
  margin-top: 3rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-strong);
}

.timeline-item {
  position: relative;
  padding-bottom: 3rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 0.4rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
}

.timeline-item.current::before {
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}

.timeline-year {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
}

.timeline-item h4 { margin-bottom: 0.4rem; font-size: 1.2rem; }
.timeline-item p { color: var(--fg-dim); font-size: 0.95rem; }

.advisors-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 2rem;
}

@media (min-width: 700px) { .advisors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .advisors-grid { grid-template-columns: repeat(4, 1fr); } }

.advisor {
  background: var(--bg);
  padding: 2rem;
  text-align: left;
}

.advisor-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--bg);
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.advisor h4 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.advisor p { font-family: var(--mono); font-size: 0.75rem; color: var(--fg-dim); letter-spacing: 0.04em; }
.advisor a { color: var(--accent); font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 1rem; display: inline-block; }

/* Mission cards */
.mission-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 2rem;
}
@media (min-width: 700px) { .mission-grid { grid-template-columns: repeat(2, 1fr); } }

.mission-card {
  background: var(--bg);
  padding: 2.5rem;
}
.mission-card h4 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin-bottom: 1rem; }
.mission-card h4 em { font-style: italic; color: var(--em-color); }
.mission-card p { color: var(--fg-dim); }

/* ============ Customer Stories Placeholder ============ */
.coming-soon {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  margin: 3rem 0;
}

.coming-soon .badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 2rem;
}

.coming-soon h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 1rem; }
.coming-soon p { color: var(--fg-dim); max-width: 50ch; margin: 0 auto; }

/* Customer story preview cards (shown on home) */
.stories-preview {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (min-width: 700px) { .stories-preview { grid-template-columns: repeat(3, 1fr); } }

.story-card {
  border: 1px solid var(--line-strong);
  padding: 2rem;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(var(--bg-elev-rgb), 0.4), transparent);
  transition: all 0.3s;
}
.story-card:hover { border-color: var(--accent); transform: translateY(-3px); }

.story-card .industry {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.story-card h4 { font-size: 1.3rem; margin-bottom: 1rem; font-family: var(--serif); font-weight: 400; }
.story-card p { color: var(--fg-dim); font-size: 0.92rem; }

/* ============ Platform Page ============ */
.marketecture {
  margin-top: 4rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--bg-elev-rgb), 0.5), rgba(var(--bg-rgb), 0.2)),
    radial-gradient(circle at 20% 0%, rgba(40, 94, 249, 0.039), transparent 60%);
  position: relative;
  overflow: hidden;
}

.marketecture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.3;
  pointer-events: none;
}

.marketecture-grid {
  display: grid;
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  position: relative;
}

@media (min-width: 800px) {
  .marketecture-grid { grid-template-columns: repeat(4, 1fr); }
}

.marketecture-cell {
  background: rgba(var(--bg-rgb), 0.92);
  padding: 1.4rem 1.2rem;
  text-align: center;
}

.marketecture-cell .label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.marketecture-cell .name {
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--fg);
}

.marketecture-cell .sub {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  margin-top: 0.4rem;
}

.marketecture-row {
  margin: 1px 0;
}

.marketecture-band {
  background: rgba(40, 94, 249, 0.04);
  border: 1px dashed rgba(40, 94, 249, 0.3);
  padding: 1.2rem;
  text-align: center;
  border-radius: 4px;
  margin: 1rem 0;
}

.marketecture-band .label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}

/* Capability cards (six-up grid) */
.capabilities-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 3rem;
}

@media (min-width: 700px) { .capabilities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .capabilities-grid { grid-template-columns: repeat(3, 1fr); } }

.capability-card {
  background: var(--bg);
  padding: 2.5rem 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

.capability-card .icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
  background: rgba(40, 94, 249, 0.04);
  color: var(--accent);
}

.capability-card .cap-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.capability-card h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.capability-card h4 em { font-style: italic; color: var(--em-color); }
.capability-card p { color: var(--fg-dim); font-size: 0.95rem; line-height: 1.6; }

.capability-card .cap-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--em-color);
  margin: 0 0 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px dashed var(--line);
}

.capability-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.capability-card ul li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fg);
}
.capability-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}

/* When user navigates from dropdown to a specific card, highlight it briefly */
.capability-card:target {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.capability-card:target .icon {
  background: rgba(40, 94, 249, 0.12);
}

/* Specialist agents (deep section) */
.agent-section {
  display: grid;
  gap: 2.5rem;
  padding: 3.5rem 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .agent-section { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: start; }
}

.agent-section .agent-meta {
  position: sticky;
  top: 6rem;
}

.agent-section .agent-id {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.agent-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.agent-section h2 em { font-style: italic; color: var(--em-color); }
.agent-section .agent-meta > p { color: var(--fg-dim); max-width: 38ch; margin-bottom: 2rem; }

.agent-meta .meta-stat {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}

.agent-meta .meta-stat strong { color: var(--fg); font-weight: 500; }

.agent-detail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.agent-detail .feat {
  border: 1px solid var(--line);
  padding: 1.8rem;
  border-radius: 6px;
  transition: border-color 0.3s, transform 0.3s;
}

.agent-detail .feat:hover { border-color: var(--line-strong); transform: translateX(2px); }

.agent-detail .feat .feat-num {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.agent-detail .feat h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
  letter-spacing: -0.01em;
}

.agent-detail .feat p { color: var(--fg-dim); font-size: 0.92rem; line-height: 1.6; }

.agent-detail .feat ul {
  list-style: none;
  margin-top: 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.agent-detail .feat ul li {
  font-size: 0.88rem;
  color: var(--fg-dim);
  padding-left: 1.4rem;
  position: relative;
}

.agent-detail .feat ul li::before {
  content: "◉";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.7rem;
}

/* ========================================================================
   PLATFORM SECTIONS — Light pattern (hero + subhead + diagram + bullets)
   ======================================================================== */
.platform-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 4rem 0;
}
@media (min-width: 900px) {
  .platform-section { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: start; }
}

.platform-section .ps-meta { display: flex; flex-direction: column; }
.platform-section .ps-id {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.platform-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  max-width: 18ch;
}
.platform-section h2 em { font-style: italic; color: var(--em-color); }
.platform-section .ps-sub {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--fg-dim);
  margin: 0 0 2rem;
  max-width: 32ch;
}
.platform-section .ps-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.platform-section .ps-bullets li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: baseline;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--fg);
}
.platform-section .ps-bullets li::before {
  content: counter(ps-bullet, decimal-leading-zero);
  counter-increment: ps-bullet;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 0.15rem;
}
.platform-section .ps-bullets { counter-reset: ps-bullet; }

.platform-section .ps-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--line);
  margin-top: auto;
}
.platform-section .ps-stat { display: flex; flex-direction: column; gap: 0.3rem; }
.platform-section .ps-stat span {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.platform-section .ps-stat strong { font-size: 0.95rem; font-weight: 500; color: var(--fg); }

/* The diagram column */
.ps-diagram {
  background: var(--accent-soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-diagram svg { width: 100%; height: auto; max-width: 480px; display: block; }
.ps-diagram-label {
  position: absolute;
  top: 0.9rem;
  left: 1.1rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

/* Diagram primitive: nodes, lanes, arrows */
.psd-node {
  fill: var(--bg-elev);
  stroke: var(--line);
  stroke-width: 1;
}
.psd-node-accent { fill: var(--accent-soft); stroke: var(--accent); }
.psd-line { stroke: var(--line); stroke-width: 1; fill: none; }
.psd-line-accent { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.psd-line-dashed { stroke: var(--line); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.psd-text {
  font-family: var(--sans);
  font-size: 11px;
  fill: var(--fg);
}
.psd-text-mono {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  fill: var(--fg-dim);
  text-transform: uppercase;
}
.psd-text-em { fill: var(--accent); font-weight: 500; }

/* Lifecycle — five solid HTML cards (no SVG circles) */
.lifecycle-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  background: var(--accent-soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.lifecycle-step {
  flex: 1;
  min-width: 168px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 1.5rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.lifecycle-step.is-anchor {
  border-color: var(--accent);
  background: var(--bg-elev);
  position: relative;
}
.lifecycle-step.is-anchor::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(40, 94, 249, 0.06), transparent);
  pointer-events: none;
}

.ls-num {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1rem;
  opacity: 0.85;
}

.ls-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(40, 94, 249, 0.06);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.lifecycle-step.is-anchor .ls-icon {
  background: rgba(40, 94, 249, 0.14);
  border-color: var(--accent);
}

.lifecycle-step h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
  color: var(--fg);
}

.lifecycle-step .ls-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.35;
  color: var(--em-color);
  margin: 0 0 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed var(--line);
}

.lifecycle-step .ls-detail {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--fg-dim);
  margin: 0;
}

.lifecycle-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  color: var(--accent);
  opacity: 0.6;
}

/* Foundation → In production axis indicator */
.lifecycle-axis {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
  padding: 0 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.lifecycle-axis .axis-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent 30%, transparent 70%, var(--accent));
  opacity: 0.4;
}

/* Mobile: stack cards vertically with arrows pointing down */
@media (max-width: 800px) {
  .lifecycle-grid {
    flex-direction: column;
    padding: 1.5rem 1rem;
  }
  .lifecycle-step { min-width: auto; width: 100%; }
  .lifecycle-arrow { transform: rotate(90deg); padding: 0.4rem 0; }
}

/* Before/After table */
.compare-table {
  margin-top: 3rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
}

.compare-table table {
  width: 100%;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: 1.2rem 1.4rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  vertical-align: top;
}

.compare-table th {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
  background: rgba(var(--bg-elev-rgb), 0.4);
}

.compare-table th:last-child { color: var(--accent); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table td:first-child { color: var(--fg-dim); }
.compare-table td:last-child { color: var(--fg); }

/* Compare-table animation — rows slide in from sides on scroll */
.compare-table tbody td {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-table tbody td:first-child {
  transform: translateX(-24px);
}
.compare-table tbody td:last-child {
  transform: translateX(24px);
}

.compare-table.is-animated tbody td {
  opacity: 1;
  transform: translateX(0);
}

/* Per-row staggered delay — each row 90ms after the previous */
.compare-table.is-animated tbody tr:nth-child(1) td { transition-delay: 0.05s; }
.compare-table.is-animated tbody tr:nth-child(2) td { transition-delay: 0.14s; }
.compare-table.is-animated tbody tr:nth-child(3) td { transition-delay: 0.23s; }
.compare-table.is-animated tbody tr:nth-child(4) td { transition-delay: 0.32s; }
.compare-table.is-animated tbody tr:nth-child(5) td { transition-delay: 0.41s; }
.compare-table.is-animated tbody tr:nth-child(6) td { transition-delay: 0.50s; }
.compare-table.is-animated tbody tr:nth-child(7) td { transition-delay: 0.59s; }
.compare-table.is-animated tbody tr:nth-child(8) td { transition-delay: 0.68s; }

/* Header animation — fade in slightly before rows */
.compare-table thead th {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.compare-table.is-animated thead th { opacity: 1; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .compare-table tbody td,
  .compare-table thead th {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .compare-table { font-size: 0.85rem; }
  .compare-table th, .compare-table td { padding: 0.9rem 1rem; }
}

/* Key features list (two-column) */
.kf-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 700px) { .kf-grid { grid-template-columns: repeat(2, 1fr); } }

.kf-grid .kf-item {
  display: flex;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color 0.2s;
}

.kf-grid .kf-item:hover { border-color: var(--accent); }

.kf-grid .kf-item .kf-mark {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.16em;
  min-width: 2.4rem;
}

.kf-grid .kf-item h5 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}

.kf-grid .kf-item p { color: var(--fg-dim); font-size: 0.88rem; line-height: 1.5; }

/* Recognition / report card */
.report-card {
  display: grid;
  gap: 2.5rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--bg-elev-rgb), 0.6), rgba(var(--bg-rgb), 0.2));
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}

@media (min-width: 800px) { .report-card { grid-template-columns: 1.4fr 1fr; align-items: center; } }

.report-card .report-stamp {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.report-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.report-card h3 em { font-style: italic; color: var(--em-color); }
.report-card > div > p { color: var(--fg-dim); margin-bottom: 1.5rem; max-width: 50ch; }

.report-findings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-finding {
  border: 1px solid var(--line);
  padding: 1.2rem 1.4rem;
  border-radius: 4px;
  background: rgba(var(--bg-rgb), 0.4);
}

.report-finding .label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.report-finding .title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.report-finding p { color: var(--fg-dim); font-size: 0.85rem; line-height: 1.5; }

/* Section anchor scroll offset */
[id="data-access"],
[id="agent-governance"],
[id="agent-observability"],
[id="authorization"],
[id="mcp-security"],
[id="a2a-security"] {
  scroll-margin-top: 5rem;
}

/* Stats strip */
.stats-strip {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 4rem;
}

@media (min-width: 700px) { .stats-strip { grid-template-columns: repeat(4, 1fr); } }

.stats-strip .stat {
  background: var(--bg);
  padding: 2rem 1.6rem;
  text-align: center;
}

.stats-strip .stat .num {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-style: italic;
  color: var(--accent);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.5rem;
}

.stats-strip .stat .lbl {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

/* ============ Three Teams — editorial story layout ============ */
.story-three-teams {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) 0;
}
.story-three-teams header h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}

.story-quotes {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.story-quote {
  margin: 0;
  text-align: center;
  position: relative;
  padding: 0 clamp(0.5rem, 3vw, 2rem);
}

.story-quote p {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 300;
  color: var(--fg);
  margin: 0;
}
.story-quote p em {
  font-style: italic;
  color: var(--em-color);
}

.story-quote cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-style: normal;
}

/* Subtle separator dot between quotes — feels like editorial pacing */
.story-quote + .story-quote::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  position: absolute;
  top: calc(-1 * clamp(2rem, 4vw, 3rem) / 2 - 2px);
  left: 50%;
  transform: translateX(-50%);
}

/* ============ Customer case studies (Comcast / Intuit / CVS / Optum) ============ */
.case-feature {
  padding: 3rem 2.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(40, 94, 249, 0.025) 0%, rgba(var(--on-surface), 0.012) 100%);
  position: relative;
  overflow: hidden;
}
.case-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--accent);
  opacity: 0.5;
}
.case-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.case-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  color: var(--fg);
}
.case-pull {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  color: var(--fg);
  margin: 0 0 0.8rem;
  max-width: 56ch;
  font-style: normal;
}
.case-pull em {
  font-style: italic;
  color: var(--em-color);
}
.case-attr {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}
.case-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 800px) {
  .case-grid { grid-template-columns: repeat(3, 1fr); }
}
.case-block .case-label,
.case-mini .case-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.case-block ul,
.case-mini ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.case-block li,
.case-mini li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg);
}
.case-block li::before,
.case-mini li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 600;
}

.cases-grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cases-grid { grid-template-columns: repeat(3, 1fr); }
}
.case-card {
  padding: 2rem 1.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--on-surface), 0.012);
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.case-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.case-card .case-name {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg);
}
.case-card .case-summary {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-style: italic;
}

/* ============ Floating Assessment Badge ============ */
.score-badge {
  position: fixed;
  bottom: 1.6rem;
  left: 1.6rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.3rem 0.85rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 999px;
  text-decoration: none;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(40, 94, 249, 0.1), 0 0 24px rgba(40, 94, 249, 0.099);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, opacity 0.3s;
  opacity: 0;
  transform: translateY(20px);
  animation: badgeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}
@keyframes badgeIn {
  to { opacity: 1; transform: translateY(0); }
}
.score-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent), 0 0 32px rgba(40, 94, 249, 0.32);
}
.score-badge .badge-pulse {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.score-badge .badge-pulse::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
.score-badge .badge-pulse svg {
  width: 14px; height: 14px; color: var(--bg);
}
.score-badge .badge-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
}
.score-badge .badge-line1 {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}
.score-badge .badge-line2 {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}
@media (max-width: 640px) {
  .score-badge {
    bottom: 1rem;
    left: 1rem;
    padding: 0.7rem 1rem 0.7rem 0.7rem;
  }
  .score-badge .badge-text { display: none; }
  .score-badge::after {
    content: 'Score me';
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fg);
  }
}

/* ============ AI Chat Widget — Claude-style ============ */

/* Trigger button (bottom-right) */
.t3-chat-trigger {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.4rem 0.85rem 0.95rem;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 24px rgba(40, 94, 249, 0.088);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, opacity 0.3s;
  opacity: 0;
  transform: translateY(20px);
  animation: t3ChatIn 0.6s cubic-bezier(0.16,1,0.3,1) 1.8s forwards;
}
@keyframes t3ChatIn { to { opacity: 1; transform: translateY(0); } }
.t3-chat-trigger:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 32px rgba(40, 94, 249,0.32);
}
.t3-chat-trigger.hidden {
  opacity: 0; pointer-events: none; transform: translateY(20px);
}
.t3-chat-trigger .pulse-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.t3-chat-trigger .pulse-dot::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: t3Pulse 2.4s ease-out infinite;
}
@keyframes t3Pulse {
  0%   { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
.t3-chat-trigger .pulse-dot svg { width: 13px; height: 13px; color: var(--bg); }
.t3-chat-trigger .label { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; line-height: 1.1; }
.t3-chat-trigger .label .l1 {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
}
.t3-chat-trigger .label .l2 {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}
@media (max-width: 640px) {
  .t3-chat-trigger {
    bottom: 1rem; right: 1rem;
    padding: 0.7rem 0.95rem 0.7rem 0.7rem;
  }
  .t3-chat-trigger .label .l2 { display: none; }
}

/* Chat panel (slide-in from the right) */
.t3-chat-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 460px;
  background: var(--bg-elev);
  border-left: 1px solid var(--line-strong);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  box-shadow: -24px 0 64px rgba(0,0,0,0.5);
}
.t3-chat-panel.open { transform: translateX(0); }

.t3-chat-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.t3-chat-backdrop.open { opacity: 1; pointer-events: auto; }

/* Header */
.t3-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--on-surface), 0.012);
  flex-shrink: 0;
}
.t3-chat-head-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.t3-chat-head-mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(40, 94, 249,0.1);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.t3-chat-head-mark::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: t3Breathing 2.6s ease-in-out infinite;
}
@keyframes t3Breathing { 0%,100% { opacity:0.55; } 50% { opacity:1; } }
.t3-chat-head-text { display: flex; flex-direction: column; line-height: 1.15; }
.t3-chat-head-text .name {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.t3-chat-head-text .status {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}
.t3-chat-close {
  background: none;
  border: 1px solid var(--line);
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--fg-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.t3-chat-close:hover { border-color: var(--fg); color: var(--fg); }
.t3-chat-close svg { width: 14px; height: 14px; }

/* Messages area */
.t3-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  scroll-behavior: smooth;
}
.t3-chat-body::-webkit-scrollbar { width: 6px; }
.t3-chat-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.t3-msg {
  display: flex;
  gap: 0.8rem;
  animation: t3MsgIn 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes t3MsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.t3-msg.user { flex-direction: row-reverse; }
.t3-msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.t3-msg.ai .t3-msg-avatar {
  background: rgba(40, 94, 249,0.1);
  border: 1px solid var(--accent);
  color: var(--accent);
}
.t3-msg.user .t3-msg-avatar {
  background: rgba(var(--on-surface), 0.05);
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
}
.t3-msg-bubble {
  max-width: 85%;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--fg);
}
.t3-msg.ai .t3-msg-bubble {
  background: rgba(var(--on-surface), 0.025);
  border: 1px solid var(--line);
  border-top-left-radius: 4px;
}
.t3-msg.user .t3-msg-bubble {
  background: rgba(40, 94, 249, 0.044);
  border: 1px solid rgba(40, 94, 249,0.25);
  border-top-right-radius: 4px;
}
.t3-msg-bubble p { margin: 0 0 0.7rem; }
.t3-msg-bubble p:last-child { margin-bottom: 0; }
.t3-msg-bubble strong { color: var(--accent); font-weight: 500; }
.t3-msg-bubble em { font-style: italic; }
.t3-msg-bubble a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}
.t3-msg-bubble a:hover { opacity: 0.75; }
.t3-msg-bubble ul {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
  list-style: none;
}
.t3-msg-bubble li {
  position: relative;
  padding-left: 0.4rem;
  margin-bottom: 0.4rem;
}
.t3-msg-bubble li::before {
  content: '·';
  position: absolute;
  left: -0.7rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1;
}
.t3-msg-bubble code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.1rem 0.35rem;
  background: rgba(var(--on-surface), 0.05);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--accent);
}

/* Streaming cursor */
.t3-cursor {
  display: inline-block;
  width: 7px; height: 1em;
  background: var(--accent);
  vertical-align: -0.15em;
  margin-left: 1px;
  animation: t3Blink 1s steps(1) infinite;
}
@keyframes t3Blink { 50% { opacity: 0; } }

/* Typing indicator (3 dots) */
.t3-typing {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.2rem 0;
}
.t3-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: t3TypingBounce 1.2s ease-in-out infinite;
}
.t3-typing span:nth-child(2) { animation-delay: 0.15s; }
.t3-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes t3TypingBounce {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* Suggested prompt chips */
.t3-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.t3-suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.95rem;
  background: rgba(var(--on-surface), 0.018);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  width: fit-content;
  max-width: 100%;
}
.t3-suggestion-chip::before {
  content: '→';
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.t3-suggestion-chip:hover {
  border-color: var(--accent);
  background: rgba(40, 94, 249,0.05);
  transform: translateX(2px);
}
.t3-suggestion-chip span { line-height: 1.3; }

/* Input area */
.t3-chat-input-wrap {
  flex-shrink: 0;
  padding: 1rem 1.3rem 1.3rem;
  border-top: 1px solid var(--line);
  background: rgba(var(--on-surface), 0.012);
}
.t3-chat-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  background: rgba(var(--on-surface), 0.025);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 0.65rem 0.65rem 0.65rem 1rem;
  transition: border-color 0.2s;
}
.t3-chat-input-row:focus-within {
  border-color: var(--accent);
  background: rgba(40, 94, 249,0.025);
}
.t3-chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--fg);
  line-height: 1.5;
  max-height: 120px;
  padding: 0.35rem 0;
  min-height: 22px;
}
.t3-chat-input::placeholder { color: var(--fg-faint); }
.t3-chat-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, opacity 0.2s;
}
.t3-chat-send:hover { transform: scale(1.05); }
.t3-chat-send:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
.t3-chat-send svg { width: 16px; height: 16px; }

.t3-chat-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.t3-chat-foot a {
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.t3-chat-foot a:hover { color: var(--accent); }

/* Reveal animation */
/* ============ Dark theme — surface adjustments (default) ============ */
/* These give the dark mode the same kind of polish that the light theme
   already enjoyed in `html[data-theme="light"]` block below.        */
html:not([data-theme="light"]) .customer-panel {
  background: linear-gradient(180deg, rgba(31, 27, 18, 0.85), rgba(20, 17, 11, 0.6));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 60px -25px rgba(0, 0, 0, 0.7);
}
html:not([data-theme="light"]) .customer-tile {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.1);
}
html:not([data-theme="light"]) .customer-tile:hover {
  background: rgba(40, 94, 249, 0.044);
  border-color: var(--accent);
}
html:not([data-theme="light"]) .dropdown-panel {
  background: rgba(20, 17, 11, 0.96);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 60px -10px rgba(0, 0, 0, 0.7);
}
html:not([data-theme="light"]) .site-header {
  background: rgba(6, 9, 20, 0.78);
}
html:not([data-theme="light"]) .site-header.scrolled {
  background: rgba(6, 9, 20, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.13);
}
html:not([data-theme="light"]) .pillar,
html:not([data-theme="light"]) .story-card,
html:not([data-theme="light"]) .case-card,
html:not([data-theme="light"]) .capability-card,
html:not([data-theme="light"]) .faq-item {
  background: linear-gradient(180deg, rgba(31, 27, 18, 0.55), rgba(20, 17, 11, 0.25));
}
html:not([data-theme="light"]) .pillar:hover,
html:not([data-theme="light"]) .story-card:hover,
html:not([data-theme="light"]) .case-card:hover,
html:not([data-theme="light"]) .capability-card:hover {
  background: linear-gradient(180deg, rgba(40, 35, 22, 0.7), rgba(28, 24, 16, 0.4));
}
/* Card screenshots / browser-frame surfaces — make them lift visibly on dark */
html:not([data-theme="light"]) article[style*="bg-elev"] {
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
/* Score badge / chat bubble — dark mode glow */
html:not([data-theme="light"]) .score-badge,
html:not([data-theme="light"]) .t3-chat-trigger {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(40, 94, 249, 0.25),
    0 0 24px rgba(40, 94, 249, 0.099);
}
/* Hero glow — slightly more visible on the deeper bg */
html:not([data-theme="light"]) .hero-glow {
  background: radial-gradient(circle, rgba(40, 94, 249, 0.099), transparent 65%);
}

/* ============ Light theme — surface adjustments ============ */
html[data-theme="light"] body {
  background-image: none;
}
html[data-theme="light"] body::before {
  opacity: 0.5;
}
html[data-theme="light"] .customer-panel {
  box-shadow: 0 24px 48px -12px rgba(13, 38, 69, 0.12);
}
html[data-theme="light"] .dropdown-panel {
  box-shadow: 0 16px 40px -10px rgba(13, 38, 69, 0.18);
}
html[data-theme="light"] .site-header {
  /* Cream backdrop needs higher alpha for legibility */
  background: rgba(243, 243, 243, 0.92);
  backdrop-filter: blur(12px);
}
html[data-theme="light"] .site-header.scrolled {
  background: rgba(243, 243, 243, 0.96);
  border-bottom-color: rgba(13, 38, 69, 0.12);
}
html[data-theme="light"] .score-badge,
html[data-theme="light"] .t3-chat-trigger {
  box-shadow:
    0 8px 24px rgba(13, 38, 69, 0.12),
    0 0 0 1px rgba(40, 94, 249, 0.083),
    0 0 18px rgba(40, 94, 249, 0.099);
}
html[data-theme="light"] .score-badge:hover,
html[data-theme="light"] .t3-chat-trigger:hover {
  box-shadow:
    0 12px 32px rgba(13, 38, 69, 0.15),
    0 0 0 1px var(--accent),
    0 0 24px rgba(40, 94, 249, 0.28);
}
html[data-theme="light"] .t3-chat-panel {
  box-shadow: -24px 0 64px rgba(13, 38, 69, 0.18);
}
html[data-theme="light"] .t3-chat-backdrop {
  background: rgba(13, 38, 69, 0.3);
}
/* Hero radial accent glow — much softer on light */
html[data-theme="light"] .hero::before,
html[data-theme="light"] .glow {
  opacity: 0.35;
}
/* Pillar icon, accent-bg fills — keep saturated but accept the lighter accent */
html[data-theme="light"] .pillar svg {
  color: var(--accent);
}
/* The customer logo strip — flatten contrast in light */
html[data-theme="light"] .logos {
  border-color: rgba(13, 38, 69, 0.08);
}
/* Mono labels — slightly more saturated dim in light */
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .pillar-num,
html[data-theme="light"] .feat-num,
html[data-theme="light"] .agent-id,
html[data-theme="light"] .industry,
html[data-theme="light"] .case-tag {
  color: var(--accent-deep);
}

/* ============ Theme toggle button ============ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
  flex-shrink: 0;
  position: relative;
}
.theme-toggle:hover {
  border-color: var(--line-strong);
  color: var(--fg);
  background: rgba(var(--on-surface), 0.04);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
  transition: opacity 0.2s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Default (dark) — show sun, hide moon */
.theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(45deg) scale(0.5); }
/* Light theme active — show moon, hide sun */
html[data-theme="light"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(-45deg) scale(0.5); }
html[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* Mobile menu has its own toggle row */
.mobile-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  margin-top: 0.5rem;
}
.mobile-theme-row .label {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

/* ============ Reveal animation (DISABLED) ============ */
/* The fade-in scroll animation has been disabled because it was causing
   sections to appear empty during scroll on cached environments. The CSS
   is kept as a no-op so any leftover [data-reveal] attribute is harmless.
   To re-enable, restore the opt-in `html.reveal-ready [data-reveal]` rules. */
[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* Mobile nav */
.menu-toggle {
  display: inline-flex;
  background: none;
  border: 1px solid var(--line-strong);
  width: 40px; height: 40px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg);
}
@media (min-width: 980px) { .menu-toggle { display: none; } }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  padding: 5rem 2rem 2rem;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu ul { list-style: none; padding: 0; }
.mobile-menu ul li { border-bottom: 1px solid var(--line); }
.mobile-menu ul a {
  display: block;
  padding: 1.2rem 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
}
.mobile-menu .close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: none;
  border: 1px solid var(--line-strong);
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--fg);
  cursor: pointer;
  font-size: 1.2rem;
}

/* ============ Zoomable images + lightbox ============ */
.zoomable {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  /* Reset button defaults so contained <img> renders identically to before */
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
}
.zoomable img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.zoomable:hover img {
  transform: scale(1.015);
}
.zoomable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Hover hint that telegraphs "click to expand" */
.zoom-hint {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.95rem;
  background: rgba(14, 12, 7, 0.85);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.zoomable:hover .zoom-hint,
.zoomable:focus-visible .zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

/* Light theme: hint backdrop flips to light cream */
html[data-theme="light"] .zoom-hint {
  background: rgba(255, 253, 247, 0.92);
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* ============ Lightbox modal ============ */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 7, 5, 0.92);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.img-lightbox[hidden] {
  /* Override [hidden] when JS adds .open */
  display: none !important;
}
.img-lightbox.open {
  opacity: 1;
}

.img-lightbox-close {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.5rem);
  right: clamp(1rem, 2.5vw, 1.5rem);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  z-index: 2;
}
.img-lightbox-close:hover {
  background: rgba(40, 94, 249, 0.083);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.05);
}

.img-lightbox-figure {
  margin: 0;
  max-width: min(96vw, 1600px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-lightbox.open .img-lightbox-figure {
  transform: scale(1);
}

.img-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  background: #1a1810;
}

.img-lightbox-caption {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  max-width: 80ch;
  line-height: 1.5;
}

/* Keep zoomable cursor sensible if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .zoomable img,
  .img-lightbox,
  .img-lightbox-figure {
    transition: none !important;
  }
  .zoomable:hover img {
    transform: none;
  }
}

/* Body scroll lock applied via JS adds this class */
body.lightbox-open {
  overflow: hidden;
}

/* Transition kickers — italic serif single line between beats */
.beat-kicker {
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  text-align: center;
}
.beat-kicker p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--fg-dim);
  margin: 0;
  letter-spacing: -0.01em;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

.beat-kicker[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ============ Rich customer story cards (Monte-Carlo-pattern) ============ */
/* Each card: gradient saffron bg block on top + content panel below
   structured Challenge/Solution + read more link. */

.story-card-rich {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  background: var(--bg-elev);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
  position: relative;
  /* Reset inherited .story-card defaults */
  padding: 0;
}
.story-card-rich:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.25);
}

/* Saffron gradient header block — abstract, no real photos needed.
   Each data-bg variant tints differently to give visual variety */
.story-card-bg {
  position: relative;
  height: 140px;
  background:
    radial-gradient(circle at 20% 30%, rgba(40, 94, 249, 0.45) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(40, 94, 249, 0.25) 0%, transparent 60%),
    linear-gradient(135deg, rgba(40, 94, 249, 0.044), rgba(31, 27, 18, 0.6));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.story-card-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.7;
}
.story-card-bg::after {
  /* Subtle accent stripe */
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--accent);
  opacity: 0.7;
}

/* Differentiate each card subtly by tinting the gradient */
.story-card-rich[data-bg="financial"] .story-card-bg {
  background:
    radial-gradient(circle at 20% 30%, rgba(40, 94, 249, 0.50) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(180, 140, 60, 0.30) 0%, transparent 60%),
    linear-gradient(135deg, rgba(40, 94, 249, 0.055), rgba(31, 27, 18, 0.7));
}
.story-card-rich[data-bg="fintech"] .story-card-bg {
  background:
    radial-gradient(circle at 70% 40%, rgba(40, 94, 249, 0.40) 0%, transparent 55%),
    radial-gradient(circle at 25% 75%, rgba(40, 94, 249, 0.20) 0%, transparent 50%),
    linear-gradient(125deg, rgba(40, 94, 249, 0.06), rgba(20, 17, 11, 0.8));
}
.story-card-rich[data-bg="health"] .story-card-bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(40, 94, 249, 0.35) 0%, transparent 65%),
    radial-gradient(circle at 90% 20%, rgba(40, 94, 249, 0.20) 0%, transparent 50%),
    linear-gradient(145deg, rgba(40, 94, 249, 0.05), rgba(28, 24, 16, 0.7));
}

/* Light theme — softer gradients */
html[data-theme="light"] .story-card-bg {
  background:
    radial-gradient(circle at 20% 30%, rgba(40, 94, 249, 0.099) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(40, 94, 249, 0.055) 0%, transparent 60%),
    linear-gradient(135deg, rgba(40, 94, 249, 0.04), rgba(243, 243, 243, 1));
}
html[data-theme="light"] .story-card-bg::before {
  background-image:
    linear-gradient(rgba(13, 38, 69, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 38, 69, 0.04) 1px, transparent 1px);
}
html[data-theme="light"] .story-card-rich[data-bg="financial"] .story-card-bg,
html[data-theme="light"] .story-card-rich[data-bg="fintech"] .story-card-bg,
html[data-theme="light"] .story-card-rich[data-bg="health"] .story-card-bg {
  background:
    radial-gradient(circle at 30% 40%, rgba(40, 94, 249, 0.11) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(40, 94, 249, 0.055) 0%, transparent 60%),
    linear-gradient(135deg, rgba(40, 94, 249, 0.04), rgba(243, 243, 243, 1));
}

.story-card-content {
  padding: 1.6rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.story-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.story-card-logo {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
html[data-theme="light"] .story-card-logo {
  color: var(--accent-deep);
}

.story-card-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.story-card-rich h4 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg);
}

.story-card-cs {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.2rem;
}

.cs-block {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cs-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
}

.cs-block p {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fg-dim);
  margin: 0;
}

.story-card-read {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  transition: gap 0.25s ease;
}
html[data-theme="light"] .story-card-read {
  color: var(--accent-deep);
}
.story-card-rich:hover .story-card-read {
  gap: 0.7rem;
}

/* Scroll offset for beat circle navigation — prevents the sticky header
   from covering the section heading when a circle ring is clicked */
#why,
#pillars,
#trust-layer,
#gallery {
  scroll-margin-top: 5rem;
}

/* ============ Sinek beat headers — Why, How, What ============ */
/* Each section's framework label takes the place of the old eyebrow.
   Three different visual treatments so the beats feel distinct:
     WHY   — austere thin full-width line   (problem mood)
     HOW   — focused short bar + dot motif  (solving energy)
     WHAT  — full saffron bar               (arrival, decisive)
   All share the same WHY/HOW/WHAT mark + italic serif descriptor. */

.beat-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0;
}

/* The mark — large mono caps, saffron */
.beat-mark {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: 0.32em;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  /* Slight saffron glow on dark — gives it weight without being garish */
  text-shadow: 0 0 32px rgba(40, 94, 249, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  line-height: 1;
}
html[data-theme="light"] .beat-mark {
  color: var(--accent-deep);
  text-shadow: none;
}

/* Optional dot motif (used on HOW only) */
.beat-dots {
  font-size: 0.6em;
  letter-spacing: 0.4em;
  color: var(--accent);
  opacity: 0.65;
  display: inline-block;
  transform: translateY(-0.1em);
}
html[data-theme="light"] .beat-dots {
  color: var(--accent-deep);
}

/* The italic descriptor below the mark */
.beat-tagline {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.beat-tagline em {
  font-style: italic;
  color: var(--em-color);
  font-weight: 400;
}
html[data-theme="light"] .beat-tagline em {
  color: var(--accent-deep);
}

/* === Distinct stripe treatments per beat === */

/* WHY — thin, austere, full-width, fades at edges */
.beat-stripe-why {
  width: 100%;
  max-width: 720px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
  opacity: 0.55;
  margin-bottom: 1.2rem;
}

/* HOW — focused short bar, more saturated. Like a confident underline waiting to happen */
.beat-stripe-how {
  width: 80px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: 1.2rem;
  /* Subtle pulse-glow on dark */
  box-shadow: 0 0 24px rgba(40, 94, 249, 0.5);
}
html[data-theme="light"] .beat-stripe-how {
  background: var(--accent-deep);
  box-shadow: 0 0 16px rgba(40, 94, 249, 0.35);
}

/* WHAT — full saffron bar with subtle gradient. The arrival, the brand reveal */
.beat-stripe-what {
  width: 100%;
  max-width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(40, 94, 249, 0.083) 0%,
    var(--accent) 30%,
    var(--accent) 70%,
    rgba(40, 94, 249, 0.083) 100%
  );
  margin-bottom: 1.4rem;
  position: relative;
}
/* Plus a small pip on each end of the WHAT stripe — bookend feel */
.beat-stripe-what::before,
.beat-stripe-what::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
}
.beat-stripe-what::before { left: 30%; }
.beat-stripe-what::after  { right: 30%; }
html[data-theme="light"] .beat-stripe-what {
  background: linear-gradient(90deg,
    rgba(40, 94, 249, 0.083) 0%,
    var(--accent-deep) 30%,
    var(--accent-deep) 70%,
    rgba(40, 94, 249, 0.083) 100%
  );
}
html[data-theme="light"] .beat-stripe-what::before,
html[data-theme="light"] .beat-stripe-what::after {
  background: var(--accent-deep);
}

/* WHAT-specific tweak: the descriptor mentions Trust3 AI by name */
.beat-brand-dot {
  color: var(--accent);
  margin-left: 0.05em;
}
html[data-theme="light"] .beat-brand-dot {
  color: var(--accent-deep);
}

/* === Layout / spacing per section === */

/* WHY beat sits inside the centered editorial story header */
.beat-header-why {
  margin-bottom: 0.5rem;
}

/* HOW beat sits in the centered narrow column above the pillars */
.beat-header-how {
  margin-bottom: 0;
}

/* WHAT beat takes up the full container width as the arrival announcement */
.beat-header-what {
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .beat-stripe-how {
    box-shadow: none !important;
  }
  .beat-mark {
    text-shadow: none !important;
  }
}

/* ============ Trust Layer architectural diagram ============ */
/* Three rows of nodes (top: agents/users/apps; center: trust3 core; bottom: data sources)
   connected by vertical flow lines. Renders inline with no images, scales responsively. */

.trust-diagram {
  max-width: 880px;
  margin: 3rem auto 0;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.td-row {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: 100%;
  flex-wrap: wrap;
}

.td-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-elev);
  min-width: 110px;
  transition: border-color 0.3s, transform 0.3s;
}
.td-node:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.td-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  width: 32px;
  height: 32px;
}
.td-node:hover .td-icon {
  color: var(--accent);
}

.td-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.td-node:hover .td-label {
  color: var(--fg);
}

/* Vertical flow lines between rows — three little dots that animate */
.td-flow {
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 0.4rem;
  padding: 0.7rem 0;
}
.td-flow span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
}
.td-flow span:nth-child(1) { animation: tdFlow 1.6s ease-in-out infinite; animation-delay: 0s; }
.td-flow span:nth-child(2) { animation: tdFlow 1.6s ease-in-out infinite; animation-delay: 0.2s; }
.td-flow span:nth-child(3) { animation: tdFlow 1.6s ease-in-out infinite; animation-delay: 0.4s; }
@keyframes tdFlow {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* The center: Trust3 AI core block */
.td-core {
  width: 100%;
  max-width: 560px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(40, 94, 249, 0.044), rgba(40, 94, 249, 0.02));
  padding: 1.6rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 0 60px -10px rgba(40, 94, 249, 0.25);
  position: relative;
  overflow: hidden;
}
.td-core::before {
  /* Subtle saffron scan line at top, like the customer panel */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}

.td-core-eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
}
.td-core-title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 400;
  font-style: italic;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.td-core-pillars {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--fg);
  text-transform: uppercase;
  font-weight: 500;
}
.td-dot {
  color: var(--accent);
  font-weight: 700;
}

/* Light theme tuning */
html[data-theme="light"] .td-core {
  border-color: var(--accent-deep);
  background: linear-gradient(180deg, rgba(40, 94, 249, 0.06), rgba(40, 94, 249, 0.01));
  box-shadow: 0 0 40px -10px rgba(40, 94, 249, 0.099);
}
html[data-theme="light"] .td-core::before {
  background: linear-gradient(90deg, transparent, var(--accent-deep), transparent);
}
html[data-theme="light"] .td-core-eyebrow,
html[data-theme="light"] .td-dot {
  color: var(--accent-deep);
}
html[data-theme="light"] .td-flow span {
  background: var(--accent-deep);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .td-flow span {
    animation: none !important;
    opacity: 0.55;
  }
  .td-node {
    transition: none !important;
  }
}

/* Mobile: stack everything vertically with tighter gaps */
@media (max-width: 600px) {
  .trust-diagram {
    padding: 1.5rem 0.5rem;
  }
  .td-row {
    gap: 0.8rem;
  }
  .td-node {
    min-width: 90px;
    padding: 0.7rem 0.9rem;
  }
  .td-label {
    font-size: 0.66rem;
  }
  .td-core {
    padding: 1.2rem 1.4rem;
  }
}

/* ============ WHY beat — 3-column quote grid ============ */
/* Replaces the old vertical .story-quotes stack with a compact 3-column grid */

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 3rem auto 0;
  max-width: 1100px;
}

@media (min-width: 720px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
  }
}

.why-cell {
  margin: 0;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.3s, transform 0.3s;
}
.why-cell:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.why-cell p {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.45;
  font-style: italic;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.005em;
}
.why-cell p em {
  font-style: italic;
  color: var(--em-color);
  font-weight: 400;
}

.why-cell cite {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-style: normal;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line);
}

/* Light theme nudge — slightly stronger surface */
html[data-theme="light"] .why-cell {
  background: var(--bg-elev);
  box-shadow: 0 12px 28px -16px rgba(13, 38, 69, 0.12);
}

/* ============ HOW beat — 3-column education grid (numbered sequence) ============ */
/* Rhymes visually with .why-grid: same shape, same border treatment, same gap.
   Numbered 01/02/03 to signal "in this order" — these are sequential steps,
   not parallel features. */

.how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 3rem auto 0;
  max-width: 1100px;
}

@media (min-width: 720px) {
  .how-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
  }
}

.how-cell {
  margin: 0;
  padding: 1.8rem 1.6rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
}
.how-cell:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Big numbered label — establishes sequence */
.how-cell-num {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 0.2rem;
  /* Slight glow on dark — gives it weight */
  text-shadow: 0 0 24px rgba(40, 94, 249, 0.25);
}
html[data-theme="light"] .how-cell-num {
  text-shadow: none;
}

.how-cell-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0;
}
.how-cell-title em {
  font-style: italic;
  color: var(--em-color);
}

.how-cell-body {
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--fg-dim);
  margin: 0;
  flex: 1;
}

/* The mono caps tag — labels what this step IS in the buyer's journey */
.how-cell-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
}

/* Light theme nudge — subtle drop-shadow for elevation */
html[data-theme="light"] .how-cell {
  box-shadow: 0 12px 28px -16px rgba(13, 38, 69, 0.12);
}

/* ============ Trust Layer diagram — framework-first redesign ============ */
/* Repositioned diagram: agentic frameworks (top) → Trust3 AI gate (center)
   → data + apps + APIs (bottom). Strategic message: framework-neutral,
   data-platform-neutral, cloud-neutral. Animated particle streams between
   layers convey "data flowing through the trust layer right now." */

/* Section labels above each row of nodes */
.td-section-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 1.2rem;
  opacity: 0.8;
}

/* Framework tiles at the top — slightly different from generic .td-node */
.td-fw {
  min-width: 110px;
  padding: 1rem 0.9rem;
}
.td-fw .td-icon {
  color: var(--fg);
  width: 28px;
  height: 28px;
  font-size: 1.4rem;
  font-weight: 600;
}
.td-fw .td-label {
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.2;
}

/* "and more" tile — visually distinct, hints at extensibility */
.td-fw-more {
  border-style: dashed !important;
  opacity: 0.7;
}
.td-fw-more .td-icon {
  color: var(--accent);
  font-size: 1.5rem;
}

/* Subtle pulse on each framework tile so they feel "alive, integrated".
   Staggered delays prevent synchronized blinking. */
.td-fw[data-fw] {
  animation: tdNodePulse 4s ease-in-out infinite;
}
.td-fw[data-fw="copilot"]      { animation-delay: 0s; }
.td-fw[data-fw="cursor"]       { animation-delay: 0.7s; }
.td-fw[data-fw="bedrock"]      { animation-delay: 1.4s; }
.td-fw[data-fw="crewai"]       { animation-delay: 2.1s; }
.td-fw[data-fw="agentbricks"]  { animation-delay: 2.8s; }
@keyframes tdNodePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(40, 94, 249, 0); }
  50%      { box-shadow: 0 0 24px 0 rgba(40, 94, 249, 0.099); }
}

/* ── Particle stream between rows ──
   Continuous blue flow downward — the visual signal that data is moving
   through the trust layer right now. Five particles staggered so the
   eye reads it as a stream, not blinking dots. */
.td-stream {
  position: relative;
  width: 2px;
  height: 80px;
  margin: 1.2rem 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(40, 94, 249, 0.099) 20%,
    rgba(40, 94, 249, 0.099) 80%,
    transparent 100%);
  overflow: visible;
}
.td-particle {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(40, 94, 249, 0.7);
  animation: tdParticleFlow 2s linear infinite;
  opacity: 0;
}
.td-particle-1 { animation-delay: 0s;    }
.td-particle-2 { animation-delay: 0.4s;  }
.td-particle-3 { animation-delay: 0.8s;  }
.td-particle-4 { animation-delay: 1.2s;  }
.td-particle-5 { animation-delay: 1.6s;  }
@keyframes tdParticleFlow {
  0%   { top: -6px;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 86px;  opacity: 0; }
}

/* Light theme — softer particles, deeper accent */
html[data-theme="light"] .td-stream {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(40, 94, 249, 0.099) 20%,
    rgba(40, 94, 249, 0.099) 80%,
    transparent 100%);
}
html[data-theme="light"] .td-particle {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(40, 94, 249, 0.55);
}

/* ── Trust3 AI core — branded enhancement ── */
.td-core-branded {
  /* Override base .td-core padding to give the logo room */
  padding: 1.8rem 2.2rem 1.8rem;
  position: relative;
  /* Subtle breathing glow behind the box */
}
.td-core-branded .td-brand-mark {
  width: 48px;
  height: 48px;
  margin-bottom: 0.4rem;
  /* Gentle drop shadow on the dot mark to lift it off the gradient bg */
  filter: drop-shadow(0 4px 12px rgba(40, 94, 249, 0.35));
  animation: tdMarkPulse 4s ease-in-out infinite;
}
@keyframes tdMarkPulse {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(40, 94, 249, 0.25)); }
  50%      { filter: drop-shadow(0 4px 20px rgba(40, 94, 249, 0.55)); }
}
.td-core-brand-name {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 400;
  font-style: normal;
  color: var(--fg);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-top: 0.2rem;
}

/* Breathing aura behind the core — soft blue cloud that gently expands/contracts.
   Uses pseudo-element on a wrapper div so it doesn't interfere with the core's content. */
.td-core-aura {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(40, 94, 249, 0.077) 0%,
    rgba(40, 94, 249, 0.04) 40%,
    transparent 70%);
  z-index: -1;
  animation: tdAuraBreathe 5s ease-in-out infinite;
  border-radius: 50%;
}
@keyframes tdAuraBreathe {
  0%, 100% { transform: scale(0.95); opacity: 0.7; }
  50%      { transform: scale(1.08); opacity: 1;   }
}
html[data-theme="light"] .td-core-aura {
  background: radial-gradient(ellipse at center,
    rgba(40, 94, 249, 0.055) 0%,
    rgba(40, 94, 249, 0.03) 40%,
    transparent 70%);
}

/* ── Bottom row: 3 categories instead of 3 nodes ── */
.td-row-categories {
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: stretch;
}

.td-category {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  padding: 1rem 1.2rem 1.1rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 0 0 6px 6px;
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color 0.3s, transform 0.3s;
}
.td-category:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.td-category-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.td-category-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
}
.td-category-items span {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--fg);
  letter-spacing: -0.005em;
  position: relative;
}
.td-category-items span:not(:last-child)::after {
  content: "·";
  margin-left: 0.6rem;
  color: var(--fg-faint);
  font-weight: 600;
}

html[data-theme="light"] .td-category {
  box-shadow: 0 8px 20px -12px rgba(13, 38, 69, 0.1);
}

/* ── Mobile responsive ── */
@media (max-width: 760px) {
  .td-row-top {
    /* Frameworks wrap to multiple rows — make them tighter */
    gap: 0.8rem 0.6rem;
  }
  .td-fw {
    min-width: 90px;
    padding: 0.8rem 0.6rem;
  }
  .td-fw .td-label {
    font-size: 0.62rem;
  }
  .td-row-categories {
    flex-direction: column;
    gap: 0.8rem;
  }
  .td-category {
    max-width: none;
  }
}

/* ── Reduced motion: disable all the lively animations ── */
@media (prefers-reduced-motion: reduce) {
  .td-fw,
  .td-particle,
  .td-brand-mark,
  .td-core-aura {
    animation: none !important;
  }
  .td-particle {
    /* Show as static dots distributed along the stream so the visual "stream" is preserved without motion */
    opacity: 0.6;
    top: 40px;
  }
  .td-particle-1 { top: 0;    }
  .td-particle-2 { top: 20px; }
  .td-particle-3 { top: 40px; }
  .td-particle-4 { top: 60px; }
  .td-particle-5 { top: 80px; }
}

/* ============================================
   Hero rotating words — "Agent Observability" ⇄ "Agent Authorization"
   Horizontal cross-slide: as one word fades out left, the other fades in
   from the right. Both words occupy the same grid cell so the container
   width is stable and the line never reflows.
   ============================================ */
.rotate-words {
  display: inline-grid;
  grid-template-areas: "stack";
  vertical-align: baseline;
  /* Optional clip in case Safari paints overshoot during the slide. */
  overflow: hidden;
  /* Tiny horizontal padding so the slide-out tail doesn't get clipped
     prematurely while still partially visible. */
  padding: 0 0.1em;
  margin: 0 -0.1em;
}
.rotate-words > span {
  grid-area: stack;
  white-space: nowrap;
  color: var(--accent);
  animation: rwCrossSlide 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
  will-change: transform, opacity;
}
.rotate-words > span:nth-child(2) {
  /* Negative delay seeds word 2 into its hidden state at t=0,
     so on first paint only word 1 is visible — no "broken" double-render. */
  animation-delay: -1.5s;
}
@keyframes rwCrossSlide {
  /* visible at center, holds */
  0%,  42% { opacity: 1; transform: translateX(0); }
  /* slide out to the left, fade */
  50%      { opacity: 0; transform: translateX(-0.55em); }
  /* invisible — jump to the right side, ready to enter */
  92%      { opacity: 0; transform: translateX(0.55em); }
  /* slide in from the right, fade up */
  100%     { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rotate-words > span { animation: none; opacity: 1; transform: none; }
  .rotate-words > span:nth-child(2) { display: none; }
}

/* ============================================
   Section-scoped light theme
   ----
   Lets a single section render in the warm-cream light palette while
   the rest of the page stays dark. Used on the screenshot gallery so
   light product UIs sit on a tonally-matched background instead of
   the high-contrast dark page.
   Mirrors the html[data-theme="light"] block — same variables, but
   scoped via a class so the section can opt in independently.
   ============================================ */
section.theme-light-band,
.theme-light-band {
  --bg: #f3f3f3;
  --bg-soft: #e8e8eb;
  --bg-elev: #ffffff;
  --fg: #0d2645;
  --fg-dim: #4a5570;
  --fg-faint: #9099b0;
  --accent: #285ef9;
  --accent-deep: #1f299c;
  --accent-soft: rgba(40, 94, 249, 0.06);
  --em-color: var(--fg);
  --accent-warm: #7174eb;
  --on-surface: 13, 38, 69;
  --bg-rgb: 243, 243, 243;
  --bg-elev-rgb: 255, 255, 255;
  --line: rgba(var(--on-surface), 0.10);
  --line-strong: rgba(var(--on-surface), 0.20);

  background: var(--bg);
  color: var(--fg);
}