/* ============================================================
   Pinpole — landing page
   Clean white, Linear/Vercel-inspired, animation-forward
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --ink: #09090b;
  --ink-2: #3f3f46;
  --muted: #71717a;
  --faint: #a1a1aa;
  --border: #e8e8ec;
  --border-soft: #f1f1f4;

  --accent: #5b5bf0;
  --accent-ink: #4646d8;
  --violet: #7c6cf5;
  --blue: #3b82f6;
  --green: #10b981;
  --orange: #f59e0b;
  --pink: #ec4899;
  --red: #ef4444;

  --radius: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(9,9,11,.05), 0 1px 6px rgba(9,9,11,.04);
  --shadow-md: 0 2px 6px rgba(9,9,11,.05), 0 10px 30px rgba(9,9,11,.07);
  --shadow-lg: 0 4px 12px rgba(9,9,11,.05), 0 24px 70px rgba(9,9,11,.11);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --ease: cubic-bezier(.22,.9,.28,1);
  --ease-spring: cubic-bezier(.34,1.45,.5,1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

::selection { background: rgba(91,91,240,.18); }

/* ============ reveal-on-scroll primitives ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].reveal-scale { transform: translateY(30px) scale(.97); }
[data-reveal].in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

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

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-weight: 550; font-size: 14px;
  padding: 9px 18px; border-radius: 10px; cursor: pointer;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--ink); color: #fff;
  box-shadow: 0 1px 2px rgba(9,9,11,.2), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover { background: #26262b; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(9,9,11,.22); }

.btn-ghost {
  background: var(--bg); color: var(--ink); border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: #d4d4d8; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-invert { background: #fff; color: var(--ink); }
.btn-invert:hover { transform: translateY(-1px); box-shadow: 0 10px 34px rgba(0,0,0,.35); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn-outline-light:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); }

.btn-lg { padding: 13px 26px; font-size: 15.5px; border-radius: 12px; }
.btn-sm { padding: 7px 14px; font-size: 13.5px; }
.btn-xs { padding: 5px 12px; font-size: 12.5px; border-radius: 8px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
  background: rgba(255,255,255,.92);
}
.nav.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom-color: var(--border-soft);
}
.nav-inner {
  position: relative;
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  height: 66px; display: flex; align-items: center; gap: 20px;
}
.logo-img { display: block; height: 30px; width: auto; }

.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.logo-mark { display: inline-flex; width: 27px; height: 27px; color: var(--ink); }
.logo-mark svg { width: 100%; height: 100%; }
.logo-word { font-weight: 700; font-size: 17.5px; letter-spacing: -.02em; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--ink-2);
  background: none; border: none; cursor: pointer;
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--ink); background: var(--bg-soft); }
.chev { transition: transform .2s var(--ease); opacity: .55; }
.nav-item:hover .chev { transform: rotate(180deg); }

/* dropdowns */
.menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.98);
  opacity: 0; pointer-events: none; visibility: hidden;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 8px; z-index: 60;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item:hover .menu, .nav-item:focus-within .menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.menu-grid { display: grid; grid-template-columns: repeat(2, 264px); gap: 2px; }
.menu-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 12px; border-radius: 10px; text-decoration: none;
  transition: background .15s;
}
.menu-card:hover { background: var(--bg-soft); }
.menu-card b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.menu-card small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 1px; }
.menu-ico {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s var(--ease-spring);
}
.menu-card:hover .menu-ico { transform: scale(1.1) rotate(-4deg); }

.ico-violet { background: #efedfe; color: var(--violet); }
.ico-blue   { background: #e9f2fe; color: var(--blue); }
.ico-green  { background: #e6f8f1; color: #0da678; }
.ico-orange { background: #fef3e2; color: #dd8a06; }
.ico-pink   { background: #fdeaf3; color: var(--pink); }
.ico-gray   { background: #f2f2f4; color: #52525b; }

.menu-cols { display: flex; gap: 8px; padding: 12px; }
.menu-col { min-width: 150px; display: flex; flex-direction: column; }
.menu-col a {
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  padding: 7px 10px; border-radius: 8px; transition: background .15s, color .15s;
}
.menu-col a:hover { background: var(--bg-soft); color: var(--ink); }
.menu-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); font-weight: 600; padding: 4px 10px 6px;
}

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.signin { color: var(--ink-2); }
.github-btn { gap: 7px; }
.gh-stars { font-weight: 600; font-size: 13px; }

.nav-burger { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; padding: 92px 0 40px; overflow: clip;
  /* isolate creates a stacking context so .hero-bg (z-index:-1) paints
     above this background instead of disappearing behind it */
  isolation: isolate;
  background:
    radial-gradient(1000px 560px at 12% -10%, rgba(192,132,252,.12), transparent 62%),
    radial-gradient(880px 520px at 88% -6%, rgba(96,165,250,.10), transparent 60%),
    radial-gradient(720px 480px at 55% 108%, rgba(251,146,60,.07), transparent 62%),
    linear-gradient(180deg, #faf9fe 0%, #fff 58%);
}

.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(9,9,11,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(9,9,11,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 95% 75% at 50% 0%, black 38%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 0%, black 38%, transparent 82%);
}
/* Cursor-following hover layers (driven by --hx/--hy set in app.js) */
.hero-grid-hover {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(124,108,245,.38) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124,108,245,.38) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(220px circle at var(--hx, 50%) var(--hy, 0%), black, transparent 72%);
  -webkit-mask-image: radial-gradient(220px circle at var(--hx, 50%) var(--hy, 0%), black, transparent 72%);
  opacity: 0; transition: opacity .45s var(--ease, ease);
}
.hero-spotlight {
  position: absolute; inset: 0;
  background: radial-gradient(
    380px circle at var(--hx, 50%) var(--hy, 0%),
    rgba(124,108,245,.13),
    rgba(96,165,250,.07) 45%,
    transparent 72%
  );
  opacity: 0; transition: opacity .45s var(--ease, ease);
}
.hero.spot-on .hero-grid-hover,
.hero.spot-on .hero-spotlight { opacity: 1; }

.hero-glow {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  animation: glow-drift 14s ease-in-out infinite alternate;
}
.hero-glow-1 { width: 560px; height: 380px; background: rgba(124,108,245,.14); top: -80px; left: 8%; }
.hero-glow-2 { width: 480px; height: 340px; background: rgba(59,130,246,.11); top: -40px; right: 6%; animation-delay: -7s; }
.hero-glow-3 { width: 520px; height: 360px; background: rgba(251,146,60,.12); bottom: -120px; left: 42%; animation-delay: -3.5s; }
@keyframes glow-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(40px, 26px) scale(1.12); }
}

.hero-copy { text-align: center; position: relative; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 550; color: var(--ink-2);
  background: #fff; border: 1px solid var(--border);
  padding: 6px 14px 6px 10px; border-radius: 100px;
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
  position: relative; overflow: hidden;
}
.badge::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(124,108,245,.14) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: badge-shine 4.5s var(--ease) infinite;
}
@keyframes badge-shine { 0%, 60% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }
.badge:hover { border-color: #d4d4d8; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--violet);
  box-shadow: 0 0 0 0 rgba(124,108,245,.5); animation: pulse-ring 2.2s infinite;
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(124,108,245,.45); }
  70% { box-shadow: 0 0 0 7px rgba(124,108,245,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,108,245,0); }
}

.hero-title {
  margin: 26px 0 0;
  font-size: clamp(44px, 7.4vw, 88px);
  font-weight: 750; letter-spacing: -.045em; line-height: 1.04;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .28em;
}
.ht-word { display: inline-block; overflow: hidden; padding-bottom: .08em; }
.ht-word span {
  display: inline-block; transform: translateY(112%);
  animation: word-rise .9s var(--ease) forwards;
}
.ht-word:nth-child(1) span { animation-delay: .08s; }
.ht-word:nth-child(2) span { animation-delay: .19s; }
.ht-word:nth-child(3) span { animation-delay: .30s; }
.ht-word:nth-child(5) span { animation-delay: .41s; }
.ht-break { flex-basis: 100%; height: 0; }
@keyframes word-rise { to { transform: translateY(0); } }
.ht-accent span {
  background: linear-gradient(92deg, var(--accent), var(--violet) 55%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ht-typing::after {
  content: "";
  display: inline-block;
  width: .05em; height: .78em;
  margin-left: .07em;
  border-radius: 2px;
  background: var(--violet);
  vertical-align: baseline;
  transform: translateY(.06em);
  animation: caret-blink 1.05s steps(2, jump-none) infinite;
}
@keyframes caret-blink { 0% { opacity: 1; } 100% { opacity: 0; } }

.hero-sub {
  max-width: 680px; margin: 24px auto 0;
  font-size: clamp(16px, 2vw, 18.5px); line-height: 1.65; color: var(--muted);
  font-weight: 450;
}

.hero-ctas { margin-top: 34px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

.hero-proof {
  margin-top: 26px; display: flex; justify-content: center; align-items: center;
  gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-weight: 500;
}
.proof-item { display: inline-flex; align-items: center; gap: 6px; }
.stars { color: #f59e0b; letter-spacing: 1px; margin-right: 2px; }
.proof-dot { width: 3px; height: 3px; border-radius: 50%; background: #d4d4d8; }

.g2-mark { display: inline-flex; align-items: center; }
.g2-mark svg { display: block; border-radius: 50%; box-shadow: 0 1px 3px rgba(255,73,44,.3); }
.soc2-mark { display: inline-flex; align-items: center; color: #4f46e5; }
.soc2-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  color: #92400e; background: #fef3c7; border: 1px solid #fde68a;
  border-radius: 999px; padding: 1.5px 8px; margin-left: 2px; white-space: nowrap;
}

/* ============ HERO VISUAL ============ */
.hero-visual {
  max-width: 1240px; margin: 72px auto 0; padding: 0 24px;
  perspective: 1600px;
}
.hv-stage { position: relative; }

.app-window {
  background: #fff; border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg), 0 60px 140px -30px rgba(80,70,220,.14);
}
.app-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(#fdfdfd, #fafafa);
}
.app-dots { display: flex; gap: 6px; }
.app-dots i { width: 11px; height: 11px; border-radius: 50%; background: #e4e4e7; }
.app-dots i:nth-child(1) { background: #fca5a5; }
.app-dots i:nth-child(2) { background: #fcd34d; }
.app-dots i:nth-child(3) { background: #86efac; }
.app-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); font-weight: 500;
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 4px 12px;
}
.app-chrome-right { margin-left: auto; }
.live-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: #0da678;
  background: #e6f8f1; border-radius: 100px; padding: 3px 10px;
}
.live-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

.app-canvas {
  position: relative; height: 470px;
  background:
    radial-gradient(rgba(9,9,11,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}
.arch-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.edge { stroke-dasharray: 400; stroke-dashoffset: 400; }
.in-view .edge { animation: draw-edge 1.2s var(--ease) forwards; }
.in-view .edge:nth-child(2) { animation-delay: .15s; }
.in-view .edge:nth-child(3) { animation-delay: .3s; }
.in-view .edge:nth-child(4) { animation-delay: .45s; }
.in-view .edge:nth-child(5) { animation-delay: .6s; }
.in-view .edge:nth-child(6) { animation-delay: .75s; }
.in-view .edge:nth-child(7) { animation-delay: .9s; }
@keyframes draw-edge { to { stroke-dashoffset: 0; } }

.packet { opacity: 0; }
.in-view .packet { opacity: 1; transition: opacity .5s 1.2s; }
.pk-violet { fill: var(--violet); }
.pk-blue { fill: var(--blue); }
.pk-green { fill: var(--green); }

/* nodes */
.node {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(14px) scale(.94);
  transition: box-shadow .25s var(--ease), border-color .25s, transform .25s var(--ease);
  cursor: default;
}
.in-view .node {
  animation: node-in .7s var(--ease) forwards;
  animation-delay: calc(var(--d) * 130ms + 200ms);
}
@keyframes node-in { to { opacity: 1; transform: translateY(0) scale(1); } }
.node:hover { box-shadow: var(--shadow-md); border-color: #d4d4d8; transform: translateY(-2px) !important; }

.node-ico {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ni-violet { background: #efedfe; color: var(--violet); }
.ni-blue { background: #e9f2fe; color: var(--blue); }
.ni-green { background: #e6f8f1; color: #0da678; }
.ni-orange { background: #fef3e2; color: #dd8a06; }
.ni-pink { background: #fdeaf3; color: var(--pink); }

.node-meta b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.node-meta small { display: block; font-size: 11px; color: var(--faint); font-family: var(--mono); }
.node-status { width: 7px; height: 7px; border-radius: 50%; margin-left: 4px; align-self: flex-start; margin-top: 2px; }
.node-status.ok { background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }

/* node positions (relative to .app-canvas; svg coords match 920x470 viewbox %) */
.n-gw     { left: 3%;  top: 44%; }
.n-lambda { left: 32%; top: 25%; }
.n-sqs    { left: 32%; top: 61%; }
.n-s3     { left: 57.5%; top: 25%; }
.n-ddb    { left: 57.5%; top: 61%; }
.n-cdn    { left: 83%; top: 43%; }

/* floating cards */
.float-card {
  position: absolute; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 14px 16px;
  z-index: 5;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.float-card:hover { box-shadow: 0 8px 20px rgba(9,9,11,.08), 0 30px 80px rgba(9,9,11,.14); }

.fc-ai { left: -26px; top: -34px; width: 252px; animation: floaty 7s ease-in-out infinite; }
.fc-sim { right: -30px; top: 20%; width: 232px; animation: floaty 8s ease-in-out -2.5s infinite; }
.fc-conn { right: 4%; top: -26px; padding: 12px 14px; animation: floaty 9s ease-in-out -4s infinite; }
.fc-deploy {
  left: 50%; bottom: -24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; white-space: nowrap;
  animation: floaty-x 8s ease-in-out -1s infinite;
}
@keyframes floaty {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes floaty-x {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

.fc-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 650; letter-spacing: -.01em;
}
.fc-ico {
  width: 24px; height: 24px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fc-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: #0da678;
  background: #e6f8f1; padding: 2px 8px; border-radius: 100px;
}
.fc-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: blink 1.6s infinite; }

.fc-prompt {
  margin-top: 10px; font-size: 12.5px; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: 9px; padding: 8px 11px; line-height: 1.5;
}
.fc-gen { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--violet); font-weight: 600; }
.spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(124,108,245,.25); border-top-color: var(--violet);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ellipsis::after { content: ""; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.fc-steps { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.fc-step { font-size: 11.5px; font-family: var(--mono); color: var(--muted); }
.fc-step.done { color: #0da678; }
.fc-step.active { color: var(--violet); animation: blink 1.8s infinite; }

.sim-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sim-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--muted); }
.sim-row b { font-size: 15px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sim-spark { margin-top: 10px; height: 36px; }
.sim-spark svg { width: 100%; height: 100%; }
.spark-line { stroke-dasharray: 260; stroke-dashoffset: 260; }
.in .spark-line, .in-view .spark-line { animation: draw-edge 1.8s 1s var(--ease) forwards; }
.sim-ok { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: #0da678; }

.fc-conn-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; }
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block;
  box-shadow: 0 0 0 0 rgba(16,185,129,.5); animation: pulse-ring-g 2s infinite;
}
@keyframes pulse-ring-g {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
  70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.conn-chips { display: flex; gap: 6px; margin-top: 9px; }
.chip {
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  padding: 3px 9px; border-radius: 100px;
}

.dep-cloud { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; }
.dep-sep { width: 1px; height: 16px; background: var(--border); }
.dep-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #0da678; }
.dep-meta { font-size: 12px; color: var(--muted); font-weight: 500; }
.dep-meta b { color: var(--ink); font-weight: 650; }
.ok-text { color: #0da678; font-weight: 600; }

/* ============================================================
   TRUST / MARQUEE
   ============================================================ */
.trust { padding: 110px 0 90px; }
.trust-title {
  text-align: center; font-size: 14.5px; font-weight: 550; color: var(--muted);
  margin-bottom: 38px;
}
.marquee {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.marquee-track {
  display: flex; gap: 64px; width: max-content;
  animation: marquee 36s linear infinite;
  padding: 4px 32px;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.m-logo {
  font-size: 19px; font-weight: 650; letter-spacing: -.02em; color: #b8b8bf;
  white-space: nowrap; transition: color .25s;
  cursor: default;
}
.m-logo:hover { color: var(--ink); }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.section-head { margin-bottom: 64px; }
.section-head.center { text-align: center; }
.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 650;
  color: var(--accent-ink); text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: clamp(32px, 4.6vw, 52px); font-weight: 720;
  letter-spacing: -.035em; line-height: 1.08;
}
.text-muted { color: var(--faint); }
.section-sub { margin-top: 14px; font-size: 17px; color: var(--muted); }

/* ============================================================
   WORKFLOW
   ============================================================ */
.workflow { padding: 60px 0 40px; }

.wf-row {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px;
  align-items: center; padding: 56px 0;
  border-top: 1px solid var(--border-soft);
}
.wf-row:first-of-type { border-top: none; }
.wf-flip .wf-text { order: 2; }
.wf-flip .wf-visual { order: 1; }

.wf-num {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--accent-ink); background: #efedfe;
  padding: 4px 10px; border-radius: 7px; display: inline-block;
  margin-bottom: 18px;
}
.wf-text h3 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 14px; }
.wf-text p { color: var(--muted); font-size: 16px; max-width: 420px; }

.wf-quote {
  margin-top: 18px; font-family: var(--mono); font-size: 13.5px;
  color: var(--ink-2); background: var(--bg-soft);
  border: 1px solid var(--border-soft); border-left: 3px solid var(--violet);
  padding: 12px 16px; border-radius: 10px; max-width: 400px;
}
.wf-list { margin-top: 18px; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.wf-list li {
  position: relative; padding-left: 26px; font-size: 14.5px; color: var(--ink-2); font-weight: 500;
}
.wf-list li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #e6f8f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6 9l4-4.4' stroke='%230da678' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* mini windows */
.mini-window {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-md); overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.wf-visual:hover .mini-window { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mini-chrome {
  display: flex; gap: 6px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--border-soft); background: #fbfbfc;
}
.mini-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #e4e4e7; }
.mini-chrome.dark { background: #1c1c21; border-bottom-color: #2c2c33; }
.mini-chrome.dark i { background: #3f3f46; }
.term-title { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: #9d9da8; }

/* step 1 chat */
.chat-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; min-height: 230px; }
.chat-bubble {
  max-width: 85%; font-size: 13.5px; line-height: 1.55;
  padding: 11px 15px; border-radius: 14px;
}
.chat-bubble.user {
  align-self: flex-end; background: var(--ink); color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble.ai {
  align-self: flex-start; background: var(--bg-soft);
  border: 1px solid var(--border-soft); color: var(--ink-2);
  border-bottom-left-radius: 4px;
}
.ai-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; color: var(--violet);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 6px; width: 100%;
}
.ai-progress {
  margin-top: 10px; height: 5px; border-radius: 100px;
  background: #ebebef; overflow: hidden;
}
.ai-progress i {
  display: block; height: 100%; width: 40%; border-radius: 100px;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  animation: progress-slide 2.4s var(--ease) infinite;
}
@keyframes progress-slide {
  0% { transform: translateX(-110%); }
  60%, 100% { transform: translateX(260%); }
}

/* step 2 canvas */
.canvas-demo-body {
  position: relative; height: 250px;
  background: radial-gradient(rgba(9,9,11,.06) 1px, transparent 1px);
  background-size: 18px 18px;
}
.demo-node {
  position: absolute; font-size: 12.5px; font-weight: 600;
  background: #fff; border: 1px solid var(--border);
  padding: 9px 16px; border-radius: 10px; box-shadow: var(--shadow-sm);
}
.dn-1 { left: 8%; top: 18%; }
.dn-2 { left: 46%; top: 42%; }
.dn-3 { left: 72%; top: 64%; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,108,245,.15), var(--shadow-md); animation: drag-wiggle 3.4s ease-in-out infinite; }
@keyframes drag-wiggle {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  30% { transform: translate(-9px,-13px) rotate(-1.6deg); }
  65% { transform: translate(5px,-4px) rotate(1deg); }
}
.demo-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.wire { stroke: #c9c9d2; stroke-width: 1.6; fill: none; stroke-dasharray: 130; stroke-dashoffset: 130; }
.in .wire { animation: draw-edge 1.1s .3s var(--ease) forwards; }
.in .wire-2 { animation-delay: .7s; }

.cursor {
  position: absolute; display: flex; align-items: flex-start; gap: 2px;
  pointer-events: none;
}
.cursor span {
  font-size: 10px; font-weight: 650; color: #fff;
  padding: 2px 7px; border-radius: 100px; margin-top: 9px; margin-left: -3px;
}
.cursor-a { left: 30%; top: 55%; animation: cursor-a-move 9s ease-in-out infinite; }
.cursor-a span { background: var(--accent); }
.cursor-b { left: 66%; top: 22%; animation: cursor-b-move 11s ease-in-out infinite; }
.cursor-b span { background: var(--green); }
@keyframes cursor-a-move {
  0%,100% { translate: 0 0; } 30% { translate: 60px -30px; } 60% { translate: 22px 26px; }
}
@keyframes cursor-b-move {
  0%,100% { translate: 0 0; } 40% { translate: -70px 40px; } 75% { translate: -20px 8px; }
}

/* step 3 sim */
.sim-demo { padding: 20px 22px; }
.sim-demo-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 650; margin-bottom: 18px;
}
.bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; }
.bar {
  flex: 1; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(to top, #dcdcf8, #b9b4f7);
  height: var(--h); transform-origin: bottom; transform: scaleY(0);
  transition: transform .8s var(--ease);
}
.in .bar { transform: scaleY(1); }
.in .bar:nth-child(1) { transition-delay: .05s; } .in .bar:nth-child(2) { transition-delay: .1s; }
.in .bar:nth-child(3) { transition-delay: .15s; } .in .bar:nth-child(4) { transition-delay: .2s; }
.in .bar:nth-child(5) { transition-delay: .25s; } .in .bar:nth-child(6) { transition-delay: .3s; }
.in .bar:nth-child(7) { transition-delay: .35s; } .in .bar:nth-child(8) { transition-delay: .4s; }
.in .bar:nth-child(9) { transition-delay: .45s; } .in .bar:nth-child(10) { transition-delay: .5s; }
.in .bar:nth-child(11) { transition-delay: .55s; } .in .bar:nth-child(12) { transition-delay: .6s; }
.bar.warn { background: linear-gradient(to top, #fde4c0, #f8b95e); animation: warn-flash 2.2s 1.2s ease-in-out infinite; }
@keyframes warn-flash { 50% { filter: brightness(1.12); } }
.sim-demo-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.warn-pill {
  font-size: 11.5px; font-weight: 600; color: #b45309;
  background: #fef3e2; padding: 5px 11px; border-radius: 100px;
}
.cost-pill {
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  padding: 5px 11px; border-radius: 100px;
}

/* step 4 terminal */
.terminal { background: #131317; border-color: #26262d; }
.term-body {
  padding: 20px 22px; font-family: var(--mono); font-size: 12.5px;
  line-height: 2.1; color: #d6d6de; min-height: 230px;
}
.term-line { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.in .term-line { opacity: 1; transform: none; }
.in .term-line:nth-child(1) { transition-delay: .1s; }
.in .term-line:nth-child(2) { transition-delay: .55s; }
.in .term-line:nth-child(3) { transition-delay: 1s; }
.in .term-line:nth-child(4) { transition-delay: 1.45s; }
.in .term-line:nth-child(5) { transition-delay: 1.9s; }
.in .term-line:nth-child(6) { transition-delay: 2.4s; }
.in .term-line:nth-child(7) { transition-delay: 2.9s; }
.t-ok { color: #34d399; }
.t-dim { color: #6b6b76; }
.t-accent { color: #a78bfa; }
.term-line b { color: #fff; }
.term-caret {
  display: inline-block; width: 8px; height: 15px; background: #a78bfa;
  vertical-align: middle; animation: blink 1.1s steps(1) infinite;
}

/* ============================================================
   BENTO
   ============================================================ */
.features { padding: 120px 0 60px; }
.bento {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.bento-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px;
  position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
a.bento-card { display: block; text-decoration: none; color: inherit; }
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: #dcdce2;
}
.bento-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), rgba(99,102,241,.06), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.bento-card:hover::before { opacity: 1; }

.b-ai   { grid-column: span 3; }
.b-sim  { grid-column: span 3; }
.b-canvas { grid-column: span 2; }
.b-deploy { grid-column: span 2; }
.b-conn { grid-column: span 2; }

.bento-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.bento-card h3 { font-size: 19px; font-weight: 680; letter-spacing: -.02em; margin-bottom: 8px; }
.bento-card p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ai bento visual */
.ai-visual {
  margin-top: 24px; display: flex; align-items: center; gap: 14px;
}
.upload-zone {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 550; color: var(--muted); font-family: var(--mono);
  border: 1.5px dashed #d4d4d8; border-radius: 12px; padding: 22px 12px;
  transition: border-color .3s, color .3s;
}
.bento-card:hover .upload-zone { border-color: var(--violet); color: var(--violet); }
.morph-arrow { color: var(--faint); flex: none; animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.morph-result {
  flex: 1; position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 16px 14px 26px;
}
.mr-node {
  height: 15px; border-radius: 5px;
  background: linear-gradient(90deg, #e3e0fc, #d3cffa);
}
.mr-node.wide { grid-column: span 2; }
.mr-tag {
  position: absolute; right: 10px; bottom: 8px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #0da678;
}

/* sim bento visual */
.sim-visual { margin-top: 24px; }
.gauge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gauge {
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 12px 14px;
}
.g-label { display: block; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.gauge b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 3px 0 8px; font-variant-numeric: tabular-nums; }
.g-bar { display: block; height: 4px; border-radius: 100px; background: #ebebef; overflow: hidden; }
.g-bar i {
  display: block; height: 100%; width: 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  transition: width 1.3s var(--ease) .3s;
}
.g-bar.ok i { background: var(--green); }
.in .g-bar i { width: var(--w); }
.sim-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.sim-tags span {
  font-size: 11.5px; font-weight: 550; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  padding: 4px 11px; border-radius: 100px;
  transition: border-color .2s, color .2s, transform .2s var(--ease-spring);
}
.sim-tags span:hover { border-color: var(--green); color: #0da678; transform: translateY(-1px); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.tag-cloud span {
  font-size: 12px; font-weight: 550; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  padding: 4px 12px; border-radius: 100px;
  transition: border-color .2s, transform .2s var(--ease-spring);
}
.tag-cloud span:hover { border-color: #c9c9d2; transform: translateY(-1px); }
.tag-cloud .soon { color: var(--faint); border-style: dashed; }

/* deploy pipeline */
.deploy-pipeline { display: flex; align-items: center; gap: 5px; margin-top: 24px; }
.pipe-step {
  font-size: 11.5px; font-weight: 600; color: var(--faint);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  padding: 4px 10px; border-radius: 100px; transition: all .3s;
  white-space: nowrap;
}
.pipe-step.done { color: #0da678; background: #e6f8f1; border-color: transparent; }
.pipe-step.active {
  color: #fff; background: var(--ink); border-color: transparent;
  animation: pipe-pulse 2s infinite;
}
@keyframes pipe-pulse {
  0% { box-shadow: 0 0 0 0 rgba(9,9,11,.3); }
  70% { box-shadow: 0 0 0 7px rgba(9,9,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(9,9,11,0); }
}
.pipe-line { flex: 1; height: 1.5px; background: var(--border); min-width: 8px; }

/* ============================================================
   AI BUILD SECTION
   ============================================================ */
.ai-build { position: relative; padding: 130px 0; overflow: clip; }
.ai-build-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(124,108,245,.08), transparent 70%),
    radial-gradient(ellipse 45% 40% at 62% 50%, rgba(59,130,246,.05), transparent 70%);
}
.ai-build .section-head { margin-bottom: 42px; }

.prompt-box {
  max-width: 760px; margin: 0 auto;
  border-radius: 18px; padding: 2px;
  background: linear-gradient(120deg, rgba(91,91,240,.5), rgba(167,139,250,.5), rgba(59,130,246,.5), rgba(91,91,240,.5));
  background-size: 300% 300%;
  animation: border-flow 7s ease infinite;
  box-shadow: 0 20px 60px -18px rgba(91,91,240,.28);
}
@keyframes border-flow {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.prompt-inner {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 16px; padding: 14px 14px 14px 20px;
}
.prompt-spark { color: var(--violet); flex: none; display: inline-flex; animation: spark-spin 5s ease-in-out infinite; }
@keyframes spark-spin { 0%,100% { transform: rotate(0deg) scale(1);} 50% { transform: rotate(14deg) scale(1.12);} }
.prompt-field {
  flex: 1; font-size: 16px; color: var(--ink); min-height: 24px;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  cursor: text;
}
.typed { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.type-caret {
  display: inline-block; width: 2px; height: 20px; margin-left: 2px;
  background: var(--violet); animation: blink 1.05s steps(1) infinite; flex: none;
}

.prompt-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 720px; margin: 28px auto 0;
}
.p-chip {
  font-family: var(--font); font-size: 13.5px; font-weight: 550; color: var(--ink-2);
  background: #fff; border: 1px solid var(--border);
  padding: 8px 16px; border-radius: 100px; cursor: pointer;
  transition: all .22s var(--ease); box-shadow: var(--shadow-sm);
}
.p-chip:hover {
  border-color: var(--violet); color: var(--accent-ink);
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(91,91,240,.16);
}
.p-chip:active { transform: translateY(0) scale(.97); }

/* ============================================================
   WHY
   ============================================================ */
.why { padding: 60px 0 130px; }
.why .section-head { margin-bottom: 56px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-col {
  text-align: center; padding: 40px 30px;
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: transform .3s var(--ease), box-shadow .3s, background .3s;
}
.why-col:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--shadow-md); }
.why-ico {
  width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.why-col h3 { font-size: 19px; font-weight: 680; letter-spacing: -.02em; margin-bottom: 8px; }
.why-col p { font-size: 14.5px; color: var(--muted); max-width: 270px; margin: 0 auto; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta { padding: 0 24px 120px; }
.final-inner {
  position: relative; overflow: hidden;
  background: #0c0c10; border-radius: 28px;
  padding: 96px 40px; text-align: center; color: #fff;
}
.final-glow {
  position: absolute; left: 50%; top: -40%;
  width: 720px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(124,108,245,.35), rgba(91,91,240,.12) 55%, transparent);
  filter: blur(30px);
  animation: glow-breathe 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow-breathe { 50% { opacity: .65; transform: translateX(-50%) scale(1.1); } }
.final-inner h2 {
  position: relative; font-size: clamp(32px, 5vw, 56px);
  font-weight: 730; letter-spacing: -.035em; line-height: 1.1;
}
.final-btns {
  position: relative; margin-top: 38px;
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.final-note { position: relative; margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.45); }

/* ============================================================
   CLIENTS
   ============================================================ */
.clients { padding: 0 0 110px; }
.clients-title {
  text-align: center; font-size: 12.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .1em; color: var(--faint);
  margin-bottom: 36px;
}
.clients-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 28px 32px; align-items: center; justify-items: center;
  max-width: 880px; margin: 0 auto;
}
.client-logo {
  font-size: 19px; font-weight: 650; letter-spacing: -.02em; color: #b8b8bf;
  white-space: nowrap; text-decoration: none; transition: color .25s;
}
.client-logo:hover { color: var(--ink); }
@media (max-width: 640px) {
  .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 24px; }
  .client-logo { font-size: 16px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--border-soft); padding: 64px 0 36px; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px;
}
.footer-brand p { margin-top: 16px; font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.footer-label {
  display: block; font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); margin-bottom: 14px;
}
.footer-col { display: flex; flex-direction: column; gap: 2px; }
.footer-col a {
  font-size: 14px; color: var(--ink-2); text-decoration: none;
  padding: 5px 0; transition: color .15s;
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--faint);
}
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: var(--faint); text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .fc-ai { left: 8px; }
  .fc-sim { right: 8px; }
}

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-actions .signin, .nav-actions .github-btn { display: none; }
  .nav-burger {
    display: flex; flex-direction: column; gap: 4.5px;
    background: none; border: none; cursor: pointer; padding: 8px; margin-left: 4px;
  }
  .nav-burger span { width: 19px; height: 1.8px; background: var(--ink); border-radius: 2px; }

  .hero { padding-top: 72px; }
  .hero-visual { margin-top: 56px; }
  .app-canvas { height: 420px; }
  .fc-ai, .fc-sim { position: static; width: auto; margin: 12px 12px 0; animation: none; }
  .hv-stage { display: flex; flex-direction: column; }
  .fc-conn { display: none; }
  .fc-deploy {
    position: static; transform: none; margin: 12px 12px 0;
    flex-wrap: wrap; white-space: normal; animation: none; justify-content: center;
  }
  .node-meta small { display: none; }
  .node { padding: 8px 10px; gap: 8px; }

  .wf-row { grid-template-columns: 1fr; gap: 32px; padding: 44px 0; }
  .wf-flip .wf-text { order: 1; }
  .wf-flip .wf-visual { order: 2; }

  .bento { grid-template-columns: 1fr 1fr; }
  .b-ai, .b-sim { grid-column: span 2; }
  .b-canvas, .b-deploy, .b-conn { grid-column: span 2; }

  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
  .prompt-inner { flex-wrap: wrap; }
  .prompt-inner .btn { width: 100%; justify-content: center; }
}

@media (max-width: 700px) {
  /* the wired canvas can't scale down — switch to a clean grid of nodes */
  .arch-svg { display: none; }
  .app-canvas {
    height: auto; display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; padding: 18px;
  }
  .node { position: static; opacity: 1; transform: none; animation: none !important; }
  .app-chrome { flex-wrap: nowrap; }
  .app-tab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

@media (max-width: 560px) {
  .hero-title { font-size: clamp(38px, 11vw, 52px); }
  .dep-sep:nth-of-type(n+3) { display: none; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

/* ============================================================
   ANNOUNCEMENT BANNER
   ============================================================ */
.banner {
  position: relative; z-index: 101;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 11px 52px; overflow: hidden;
  background: #14123a; color: #cfcdf2;
  font-size: 13.5px; font-weight: 450;
  transition: height .4s var(--ease), padding .4s var(--ease), opacity .3s;
  box-sizing: border-box;
}
.banner-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(167,139,250,.28) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to right, black, transparent 30%, transparent 70%, black);
  -webkit-mask-image: linear-gradient(to right, black, transparent 30%, transparent 70%, black);
}
.banner p { position: relative; }
.banner p b { color: #fff; font-weight: 650; }
.banner-btn {
  position: relative; flex: none;
  font-size: 12.5px; font-weight: 600; color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.35); border-radius: 100px;
  padding: 5px 15px; transition: background .2s, border-color .2s;
}
.banner-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.banner-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.65); padding: 6px; border-radius: 6px;
  transition: color .2s, background .2s;
}
.banner-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.banner.closing { opacity: 0; padding-top: 0; padding-bottom: 0; }

/* ============================================================
   NAV — search + glow CTA
   ============================================================ */
.nav-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 7px 10px; background: #fff; color: var(--faint);
  transition: border-color .2s, box-shadow .2s;
}
.nav-search input {
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--ink); width: 96px;
}
.nav-search input::placeholder { color: var(--faint); }
.nav-search kbd {
  font-family: var(--mono); font-size: 10px; color: var(--faint);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 5px; background: var(--bg-soft);
}
.nav-search:focus-within { border-color: #c3c3f2; box-shadow: 0 0 0 3px rgba(91,91,240,.1); }

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn-glow { position: relative; z-index: 0; }
.btn-glow::before {
  content: ""; position: absolute; inset: -3px; z-index: -1;
  border-radius: 14px; filter: blur(7px); opacity: .55;
  background: conic-gradient(from var(--angle), #5b5bf0, #ec4899, #f59e0b, #7c6cf5, #5b5bf0);
  animation: angle-spin 4.5s linear infinite;
  transition: opacity .25s;
}
.btn-glow:hover::before { opacity: .85; }
@keyframes angle-spin { to { --angle: 360deg; } }

/* ============================================================
   MEGA MENUS
   ============================================================ */
.nav-item.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 8px 24px rgba(9,9,11,.06), 0 40px 90px rgba(9,9,11,.14);
  z-index: 70;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px) scale(.995);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
/* invisible bridge so the cursor can cross the gap between nav and panel */
.mega::before { content: ""; position: absolute; top: -26px; left: 0; right: 0; height: 26px; }
.nav-item:hover .mega, .nav-item.open .mega, .nav-item:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.mega-body { display: flex; gap: 14px; padding: 14px; }

/* left rail */
.mega-rail {
  width: 252px; flex: none;
  background: #faf9f7; border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.rail-feature { display: block; text-decoration: none; margin-bottom: 12px; }
.rail-art {
  display: block; height: 88px; border-radius: 10px; margin-bottom: 10px;
  background:
    radial-gradient(90px 60px at 78% 20%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(118deg, #b9a8f5 0%, #e8a8d8 48%, #f6c9a8 100%);
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease);
}
.rail-art::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 10px 10px; opacity: .35;
  mask-image: linear-gradient(115deg, transparent 45%, black);
  -webkit-mask-image: linear-gradient(115deg, transparent 45%, black);
}
.rail-feature:hover .rail-art { transform: scale(1.02); }
.rail-feature b { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.rail-feature small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.rail-link {
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: 8px 10px; border-radius: 8px;
  transition: background .15s, color .15s;
}
.rail-link svg { opacity: .6; flex: none; }
.rail-link:hover { background: #f1efe9; color: var(--ink); }

/* pillar columns */
.mega-cols { flex: 1; display: flex; gap: 10px; padding: 6px 4px; }
.mega-cols-4 { gap: 6px; }
.mega-cols-4 .mega-col { padding: 0 2px; }
.mega-cols-4 .mega-col + .mega-col { border-left: 1px solid var(--border-soft); padding-left: 8px; }
.mega-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mega-step {
  display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: 2px;
}
.mega-col-head {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 8px 10px 13px; border-bottom: 1px solid var(--border-soft);
  margin-bottom: 8px;
}
a.mega-col-head-link { text-decoration: none; color: inherit; border-radius: 10px; transition: background .15s; }
a.mega-col-head-link:hover { background: var(--bg-soft); }
.mega-ico {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.mega-col-head b { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.mega-col-head small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.mega-col > a {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  padding: 7px 10px; border-radius: 8px;
  transition: background .15s, color .15s, padding-left .2s var(--ease);
}
.mega-col > a:hover { background: var(--bg-soft); color: var(--ink); padding-left: 14px; }
.mega-col > a.sub { margin-left: 20px; font-size: 13px; color: var(--muted); border-left: 1px solid var(--border-soft); border-radius: 0 8px 8px 0; }
.mega-cols-solutions .mega-col > a {
  flex-direction: column; align-items: flex-start; gap: 1px;
  font-weight: 550; color: var(--ink);
}
.mega-hint {
  display: block; font-size: 11.5px; font-weight: 450; color: var(--faint);
  line-height: 1.35;
}
.mega-cols-solutions .mega-col > a:hover .mega-hint { color: var(--muted); }
.mega-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--faint);
  padding: 6px 10px 10px; border-bottom: 1px solid var(--border-soft);
  margin-bottom: 8px;
}
.tree-ico { width: 15px; opacity: .5; font-size: 12px; flex: none; text-align: center; }

/* bottom strip */
.mega-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-top: 1px solid var(--border-soft);
  background: #fbfaf8; font-size: 13.5px; font-weight: 550;
  color: var(--ink-2); text-decoration: none;
  border-radius: 0 0 17px 17px;
  transition: color .15s, background .15s;
}
.mega-strip svg:last-child { transition: transform .2s var(--ease); }
.mega-strip:hover { color: var(--ink); background: #f5f3ee; }
.mega-strip:hover svg:last-child { transform: translateX(3px); }

/* right feature card (solutions / resources) */
.mega-cols-solutions { padding: 10px 8px; }
.mega-feature {
  width: 272px; flex: none; align-self: stretch;
  background: var(--bg-soft); border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column;
}
.mf-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 650; color: var(--pink);
  margin-bottom: 12px;
}
.mf-tag-report { color: var(--accent-ink); }
.mega-feature b { font-size: 16.5px; font-weight: 680; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); margin-bottom: 8px; }
.mega-feature p { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.mf-link { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.mf-link:hover { text-decoration: underline; }

/* ============================================================
   CONNECTORS
   ============================================================ */
.connectors { padding: 90px 0 130px; }
.connectors .section-head { margin-bottom: 48px; }
.connectors .section-sub { max-width: 560px; margin-left: auto; margin-right: auto; }
.connector-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 1020px; margin: 0 auto;
}
.connector-tile {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 16px; text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.connector-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d8d8de; }
.ct-mono {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 600; font-size: 13px; color: #fff;
  transition: transform .25s var(--ease-spring);
}
.connector-tile:hover .ct-mono { transform: scale(1.08) rotate(-4deg); }
.cm-ink { background: #18181b; }
.cm-orange { background: #f0930f; }
.cm-blue { background: #3b82f6; }
.cm-violet { background: #7c6cf5; }
.cm-green { background: #10b981; }
.cm-pink { background: #ec4899; }
.ct-meta { min-width: 0; }
.ct-meta b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.ct-meta small { display: block; font-size: 12px; color: var(--muted); }
.connectors-cta { text-align: center; margin-top: 34px; }

/* ============================================================
   DEVELOPERS (dark)
   ============================================================ */
.dev { position: relative; background: #0b0b10; color: #fff; padding: 130px 0 90px; overflow: clip; }
.dev-glow {
  position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 940px; height: 520px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124,108,245,.17), transparent 72%);
  filter: blur(40px);
}
.eyebrow-light { color: #a5a0f8; }
.dev-h2 { color: #fff; }
.dev-muted { color: #54545e; }
.dev .section-head { margin-bottom: 30px; position: relative; }

.dev-row {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px;
  align-items: center; padding: 58px 0; position: relative;
  border-top: 1px solid rgba(255,255,255,.07);
}
.dev-flip .dev-text { order: 2; }
.dev-flip .dev-visual { order: 1; }

.dev-pill {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: #93c5fd; background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.28);
  padding: 4px 13px; border-radius: 100px; margin-bottom: 18px;
}
.dev-pill-violet { color: #c4b5fd; background: rgba(124,108,245,.12); border-color: rgba(124,108,245,.3); }
.dev-pill-green { color: #6ee7b7; background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.28); }

.dev-text h3 {
  font-size: clamp(24px, 2.6vw, 31px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.18; color: #fff; margin-bottom: 14px;
}
.dev-text > p { color: #9d9daa; font-size: 15.5px; line-height: 1.65; max-width: 430px; }
.dev-list { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.dev-list li { position: relative; padding-left: 26px; font-size: 14px; font-weight: 450; color: #c6c6d2; }
.dev-list li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(16,185,129,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6 9l4-4.4' stroke='%2334d399' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}
.dev-link {
  display: inline-block; margin-top: 20px;
  font-size: 14.5px; font-weight: 600; color: #a5a0f8; text-decoration: none;
  transition: color .2s;
}
.dev-link:hover { color: #c4b5fd; }

/* code window */
.code-window {
  background: #131318; border: 1px solid #26262e; border-radius: 14px;
  overflow: hidden; box-shadow: 0 30px 90px -20px rgba(0,0,0,.65);
  transition: transform .4s var(--ease), border-color .3s;
}
.dev-visual:hover .code-window { transform: translateY(-3px); border-color: #32323c; }
.code-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid #232329; background: #17171c; }
.code-tab {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: #8a8a96; background: none; border: none;
  padding: 6px 13px; border-radius: 7px; cursor: pointer;
  transition: background .18s, color .18s;
}
.code-tab:hover { color: #d6d6de; }
.code-tab.active { background: #26262e; color: #fff; }
.code-pane {
  display: none; margin: 0; padding: 20px 22px; min-height: 272px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.9;
  color: #c9c9d4; overflow-x: auto; box-sizing: border-box;
}
.code-pane.active { display: block; animation: pane-in .35s var(--ease); }
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.c-str { color: #7ee0a3; }
.c-key { color: #93c5fd; }
.c-num { color: #f6c177; }
.c-kw { color: #c4b5fd; }
.c-fn { color: #93c5fd; }
.c-dim { color: #5b5b66; }
.c-ok { color: #34d399; }
.c-user { color: #f6c177; }
.c-agent { color: #c4b5fd; }

/* mcp window */
.code-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid #232329; background: #17171c;
}
.cc-dots { display: flex; gap: 6px; }
.cc-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2e2e36; }
.cc-title { font-family: var(--mono); font-size: 11.5px; color: #8a8a96; }
.copy-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; color: #c9c9d4;
  background: #232329; border: 1px solid #2e2e36; border-radius: 7px;
  padding: 5px 11px; cursor: pointer;
  transition: background .18s, color .18s, transform .15s;
}
.copy-btn:hover { background: #2a2a31; color: #fff; }
.copy-btn:active { transform: scale(.96); }
.mcp-pane {
  margin: 0; padding: 20px 22px;
  font-family: var(--mono); font-size: 12.5px; line-height: 2;
  color: #c9c9d4; overflow-x: auto;
}
.mcp-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 430px; }
.mcp-tool {
  font-family: var(--mono); font-size: 11.5px; color: #c4b5fd;
  background: rgba(124,108,245,.1); border: 1px solid rgba(124,108,245,.26);
  padding: 4px 11px; border-radius: 7px;
  transition: border-color .2s, transform .2s var(--ease-spring);
}
.mcp-tool:hover { border-color: rgba(124,108,245,.55); transform: translateY(-1px); }

/* model hub */
.model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.model-card {
  position: relative; background: #131318; border: 1px solid #26262e;
  border-radius: 14px; padding: 20px 18px; cursor: pointer;
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.model-card:hover { transform: translateY(-3px); border-color: #3d3d48; }
.model-card b { display: block; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; color: #fff; margin-bottom: 2px; }
.model-card small { display: block; font-size: 12px; color: #8a8a96; }
.model-dot { display: block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: 16px; }
.model-card:nth-child(1) .model-dot { background: #d97757; }
.model-card:nth-child(2) .model-dot { background: #10b981; }
.model-card:nth-child(3) .model-dot { background: #3b82f6; }
.model-card:nth-child(4) .model-dot { background: #7c6cf5; }
.model-card:nth-child(5) .model-dot { background: #f6c177; }
.model-card.active {
  border-color: rgba(124,108,245,.55);
  background: linear-gradient(160deg, rgba(124,108,245,.14), #131318 60%);
}
.model-check {
  position: absolute; top: 13px; right: 13px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #7c6cf5; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.model-card.byok { border-style: dashed; display: flex; flex-direction: column; justify-content: center; }
.model-card.byok b { color: #9d9daa; }

/* ============================================================
   FOOTER (dark, Glean-style)
   ============================================================ */
.ft { background: #0b0b0f; color: #e6e6ee; padding: 96px 0 40px; }
.ft-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr .95fr .8fr; gap: 48px; }

.ft-logo {
  display: block; width: 128px; height: 44px; background: #fff;
  mask: url("/assets/images/pinepole_logo.svg") no-repeat left center / contain;
  -webkit-mask: url("/assets/images/pinepole_logo.svg") no-repeat left center / contain;
  margin-bottom: 30px;
}
.ft-ask { font-size: 14.5px; color: #d9d9e3; margin-bottom: 16px; }
.ft-ai-icons { display: flex; gap: 18px; color: #8b87d8; margin-bottom: 36px; }
.ft-ai-icons span { display: inline-flex; opacity: .9; transition: color .2s, transform .25s var(--ease-spring); }
.ft-ai-icons span:hover { color: #c4b5fd; transform: scale(1.15) rotate(-6deg); }
.ft-address { font-style: normal; font-size: 13.5px; line-height: 1.75; color: #9d9daa; margin-bottom: 26px; }
.ft-social { display: flex; gap: 20px; margin-bottom: 30px; }
.ft-social a { color: #c6c6d2; display: inline-flex; transition: color .2s, transform .2s var(--ease); }
.ft-social a:hover { color: #fff; transform: translateY(-2px); }
.ft-lang {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; cursor: pointer;
  color: #c6c6d2; font-family: var(--font); font-size: 13.5px; font-weight: 500;
  padding: 0; transition: color .2s;
}
.ft-lang:hover { color: #fff; }

.ft-col { display: flex; flex-direction: column; min-width: 0; }
.ft-label {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: #fff;
  padding-bottom: 12px; border-bottom: 1px solid #26262e; margin-bottom: 14px;
}
.ft-label-gap { margin-top: 30px; }
.ft-col a {
  font-size: 14px; color: #9d9daa; text-decoration: none;
  padding: 5.5px 0; transition: color .15s, padding-left .2s var(--ease);
}
.ft-col a:hover { color: #fff; }
.ft-col a.ft-strong { color: #e6e6ee; font-weight: 550; }
.ft-col a.ft-strong:hover { color: #fff; }
.ft-col a.ft-dim { color: #7c7c88; }
.ft-col a.ft-dim:hover { color: #fff; }
.ft-sublabel { font-size: 14px; font-weight: 550; color: #e6e6ee; padding: 12px 0 4px; }

.ft-bottom {
  margin-top: 76px; padding-top: 26px; border-top: 1px solid #1e1e26;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #6f6f7a;
}
.ft-bottom-links { display: flex; gap: 24px; }
.ft-bottom-links a { color: #6f6f7a; text-decoration: none; transition: color .15s; }
.ft-bottom-links a:hover { color: #fff; }

/* ============================================================
   RESPONSIVE — new sections
   ============================================================ */
@media (max-width: 1120px) {
  .nav-search input { width: 60px; }
  .mega-feature { width: 230px; }
}

@media (max-width: 920px) {
  .banner { padding: 10px 46px; font-size: 12.5px; gap: 10px; flex-wrap: wrap; text-align: center; }
  .nav-search { display: none; }

  .connector-grid { grid-template-columns: repeat(2, 1fr); }

  .dev { padding: 90px 0 60px; }
  .dev-row { grid-template-columns: 1fr; gap: 34px; padding: 44px 0; }
  .dev-flip .dev-text { order: 1; }
  .dev-flip .dev-visual { order: 2; }
  .model-grid { grid-template-columns: repeat(2, 1fr); }

  .ft-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ft-brand { grid-column: span 2; }
}

@media (max-width: 560px) {
  .banner p { font-size: 12px; }
  .connector-grid { grid-template-columns: 1fr; }
  .model-grid { grid-template-columns: 1fr 1fr; }
  .ft-grid { grid-template-columns: 1fr; }
  .ft-brand { grid-column: span 1; }
  .ft-bottom { flex-direction: column; gap: 14px; }
  .code-pane, .mcp-pane { font-size: 11.5px; padding: 16px; }
}

/* ============================================================
   REAL BRAND ICONS
   ============================================================ */
.ct-logo {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border-soft);
  transition: transform .25s var(--ease-spring);
}
.ct-logo img { width: 24px; height: 24px; object-fit: contain; display: block; }
.connector-tile:hover .ct-logo { transform: scale(1.1) rotate(-4deg); }

.model-logo {
  display: block; width: 22px; height: 22px; object-fit: contain;
  margin-bottom: 14px; opacity: .92;
}
.dev-link-center { display: block; text-align: center; margin-top: 18px; }

/* ============================================================
   SUBPAGES — hero, logo walls, catalogs
   ============================================================ */
.page-hero {
  position: relative; overflow: clip;
  padding: 90px 0 100px;
  background:
    radial-gradient(900px 500px at 82% 10%, rgba(124,108,245,.16), transparent 65%),
    radial-gradient(700px 460px at 12% 90%, rgba(236,72,153,.07), transparent 60%),
    radial-gradient(600px 400px at 50% 100%, rgba(251,191,36,.08), transparent 65%),
    linear-gradient(180deg, #f6f5fd 0%, #fbfaff 70%, #fff 100%);
}
.page-hero::before,
.page-hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px);
  pointer-events: none; z-index: 0;
}
.page-hero::before {
  width: 420px; height: 320px; background: rgba(192,132,252,.14);
  top: 10%; right: 8%; animation: glow-drift 16s ease-in-out infinite alternate;
}
.page-hero::after {
  width: 380px; height: 280px; background: rgba(251,146,60,.1);
  bottom: 5%; left: 6%; animation: glow-drift 18s ease-in-out infinite alternate-reverse;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero-inner {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center;
}
.page-eyebrow {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  letter-spacing: .02em; margin-bottom: 22px; display: inline-block;
}
.page-eyebrow .pe-a { color: #4838c9; }
.page-eyebrow .pe-b { color: #e05c3a; }
.page-hero h1 {
  font-size: clamp(38px, 4.6vw, 58px); font-weight: 730;
  letter-spacing: -.04em; line-height: 1.06; margin-bottom: 22px;
}
.page-hero .ph-sub {
  font-size: 17.5px; line-height: 1.65; color: var(--ink-2);
  max-width: 480px; margin-bottom: 32px; font-weight: 450;
}
.ph-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ph-link { font-size: 15px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.ph-link:hover { text-decoration: underline; }

/* floating logo wall (connectors hero) */
.logo-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.logo-cell {
  aspect-ratio: 1; background: #fff; border: 1px solid rgba(9,9,11,.05);
  border-radius: 16px; box-shadow: 0 2px 10px rgba(30,20,80,.05), 0 14px 34px rgba(30,20,80,.08);
  display: flex; align-items: center; justify-content: center;
  animation: floaty 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.9s);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.logo-cell:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 6px 16px rgba(30,20,80,.08), 0 26px 54px rgba(30,20,80,.13); }
.logo-cell img { width: 44%; height: 44%; object-fit: contain; }
.logo-cell.wide img { width: 62%; }

/* categorized connector catalog */
.catalog { padding: 90px 0 40px; }
.catalog-cat { margin-bottom: 56px; }
.catalog-cat-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
}
.catalog-cat-head h3 { font-size: 20px; font-weight: 680; letter-spacing: -.02em; }
.catalog-cat-head small { font-size: 13px; color: var(--faint); font-family: var(--mono); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.catalog-card {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.catalog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d8d8de; }
.catalog-card .ct-logo { width: 44px; height: 44px; }
.catalog-card .ct-logo img { width: 26px; height: 26px; }
.cc-meta b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.cc-meta small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.cc-pill {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #0da678; background: #e6f8f1; border-radius: 100px; padding: 3px 9px;
}
.cc-pill.soon { color: var(--faint); background: var(--bg-soft); }

/* API endpoint cards */
.api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.api-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 26px;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.api-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.api-card h3 { font-size: 17px; font-weight: 680; letter-spacing: -.02em; margin: 14px 0 6px; }
.api-card p { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.api-endpoints { display: flex; flex-direction: column; gap: 6px; }
.api-ep {
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 6px 11px; overflow-x: auto; white-space: nowrap;
}
.api-ep .verb { font-weight: 600; }
.api-ep .verb-get { color: #0da678; }
.api-ep .verb-post { color: #4838c9; }
.api-ep .verb-del { color: #dc2626; }

/* model hub hero cards */
.mh-stage { position: relative; padding: 20px 0; }
.mh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mh-card {
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(9,9,11,.06); border-radius: 16px; padding: 20px;
  box-shadow: 0 2px 10px rgba(30,20,80,.05), 0 16px 40px rgba(30,20,80,.09);
  animation: floaty 8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
.mh-card .mh-ico {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.mh-card b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.mh-card p { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 4px 0 14px; }
.mh-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mh-user { font-size: 11.5px; color: var(--faint); }
.mh-model {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  padding: 3px 9px; border-radius: 100px;
}
.mh-model img { width: 12px; height: 12px; object-fit: contain; }
.mh-float {
  position: absolute; width: 58px; height: 58px; border-radius: 15px;
  background: #fff; border: 1px solid rgba(9,9,11,.06);
  box-shadow: 0 10px 30px rgba(30,20,80,.12);
  display: flex; align-items: center; justify-content: center;
  animation: floaty 6.5s ease-in-out infinite; z-index: 2;
}
.mh-float img { width: 30px; height: 30px; object-fit: contain; }
.mh-f1 { top: -18px; left: -26px; animation-delay: -1s; }
.mh-f2 { top: 38%; right: -30px; animation-delay: -3s; }
.mh-f3 { bottom: -14px; left: 34%; animation-delay: -5s; }

/* model catalog */
.mh-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mhc-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.mhc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d8d8de; }
.mhc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mhc-head img { width: 30px; height: 30px; object-fit: contain; }
.mhc-head b { display: block; font-size: 16px; font-weight: 680; letter-spacing: -.01em; }
.mhc-head small { display: block; font-size: 12px; color: var(--muted); }
.mhc-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.mhc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mhc-tags span {
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  padding: 3px 9px; border-radius: 100px;
}

/* generic light section on subpages */
.page-section { padding: 100px 0; }
.page-section.tint { background: var(--bg-soft); }

@media (max-width: 920px) {
  .page-hero { padding: 60px 0 70px; }
  .page-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .catalog-grid { grid-template-columns: 1fr 1fr; }
  .api-grid { grid-template-columns: 1fr; }
  .mh-catalog { grid-template-columns: 1fr 1fr; }
  .mh-float { display: none; }
}
@media (max-width: 560px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .mh-catalog { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .mh-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LOGO ICON IN NAV
   ============================================================ */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-icon {
  display: none; width: 28px; height: 28px; border-radius: 7px;
  box-shadow: 0 1px 4px rgba(9,9,11,.12);
}
.nav.scrolled .logo-icon { display: block; }
.ft-logo-link { display: inline-block; text-decoration: none; }
.ft-trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.ft-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: #c6c6d0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 7px 12px;
}
.ft-badge svg { flex: 0 0 auto; }
.ft-badge svg circle + text { pointer-events: none; }
.ft-badge b { color: #fff; font-weight: 700; }
.ft-badge i { font-style: normal; color: #f59e0b; font-size: 11px; letter-spacing: 1px; }
.ft-badge small {
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  color: #fbbf24; background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.3); border-radius: 999px; padding: 1.5px 7px;
}
.ft-badge > svg[stroke] { color: #a5b4fc; }
.ft-tagline { font-size: 14px; color: #9d9daa; line-height: 1.6; margin-bottom: 24px; max-width: 280px; }
.ft-address a { color: #9d9daa; text-decoration: none; }
.ft-address a:hover { color: #fff; }

/* ============================================================
   CONTENT PAGES — legal, blog, case studies
   ============================================================ */
.page-content .nav { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); }
.page-content .nav.scrolled { box-shadow: var(--shadow-sm); }

.page-hero-compact { padding: 100px 0 60px; }
.page-hero-centered { grid-template-columns: 1fr; text-align: center; max-width: 760px; margin: 0 auto; }
.page-hero-centered .ph-sub { margin-left: auto; margin-right: auto; }
.page-hero-centered h1 em { font-style: normal; color: var(--accent-ink); }

.content-breadcrumb {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  margin-bottom: 20px;
}
.content-breadcrumb a { color: var(--accent-ink); text-decoration: none; }
.content-breadcrumb a:hover { text-decoration: underline; }

.content-hero { padding: 100px 0 60px; background: linear-gradient(180deg, #f6f5fd 0%, #fff 40%); }
.content-hero-case { background: linear-gradient(180deg, #f0fdf8 0%, #fff 40%); }

.legal-page { padding: 100px 0 80px; }
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.legal-sidebar {
  position: sticky; top: 88px;
  font-size: 13.5px;
}
.legal-sidebar a {
  display: block; color: var(--muted); text-decoration: none;
  padding: 6px 0; border-left: 2px solid transparent; padding-left: 14px;
  transition: color .15s, border-color .15s;
}
.legal-sidebar a:hover, .legal-sidebar a.active { color: var(--ink); border-color: var(--accent); }
.legal-doc { max-width: 720px; }
.legal-doc .legal-kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--accent-ink);
  margin-bottom: 12px;
}
.legal-doc h1 { font-size: clamp(32px, 4vw, 44px); font-weight: 720; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 16px; }
.legal-doc .legal-meta { font-size: 14px; color: var(--muted); margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.legal-doc h2 { font-size: 22px; font-weight: 680; letter-spacing: -.02em; margin: 40px 0 14px; scroll-margin-top: 96px; }
.legal-doc h3 { font-size: 17px; font-weight: 650; margin: 28px 0 10px; }
.legal-doc p, .legal-doc li { font-size: 15.5px; line-height: 1.72; color: var(--ink-2); }
.legal-doc p { margin-bottom: 14px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 18px 1.2em; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--accent-ink); }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; }
.legal-doc th, .legal-doc td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-doc th { background: var(--bg-soft); font-weight: 600; }
.legal-doc .legal-contact { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 24px; margin-top: 40px; }

.article-wrap { max-width: 760px; margin: 0 auto; }
.article-wrap article, .article-wrap .article-body {
  font-size: 16px; line-height: 1.75; color: var(--ink-2);
}
.article-wrap h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 720; letter-spacing: -.03em; line-height: 1.12; color: var(--ink); margin-bottom: 20px; }
.article-wrap h2 { font-size: 24px; font-weight: 680; margin: 36px 0 12px; color: var(--ink); }
.article-wrap h3 { font-size: 19px; font-weight: 650; margin: 28px 0 10px; color: var(--ink); }
.article-wrap p { margin-bottom: 16px; }
.article-wrap ul, .article-wrap ol { margin: 0 0 18px 1.3em; }
.article-wrap li { margin-bottom: 8px; }
.article-wrap a { color: var(--accent-ink); }
.article-wrap img { max-width: 100%; border-radius: 12px; margin: 20px 0; }
.article-wrap pre, .article-wrap code { font-family: var(--mono); font-size: 13px; }
.article-wrap pre { background: #0b0b0f; color: #e6e6ee; padding: 18px; border-radius: 12px; overflow-x: auto; margin: 20px 0; }
.article-wrap code { background: var(--bg-soft); padding: 2px 6px; border-radius: 5px; }

.blog-listing, .cs-listing { padding: 20px 0 80px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.blog-card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 26px; text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d8d8de; }
.blog-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-card-tags span {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-ink); background: #f0f0ff; padding: 3px 9px; border-radius: 100px;
}
.blog-card h2 { font-size: 18px; font-weight: 680; letter-spacing: -.02em; line-height: 1.35; color: var(--ink); }
.blog-card p { font-size: 14px; color: var(--muted); line-height: 1.55; flex: 1; }
.blog-card-meta { font-size: 13px; font-weight: 600; color: var(--accent-ink); }

.cs-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 40px; text-align: center;
}
.cs-metrics b { display: block; font-size: 28px; font-weight: 720; letter-spacing: -.03em; color: var(--ink); }
.cs-metrics small { font-size: 12.5px; color: var(--muted); }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cs-card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 28px; text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.cs-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cs-badge { font-size: 12px; font-weight: 600; color: var(--muted); }
.cs-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #0da678; background: #e6f8f1; padding: 3px 9px; border-radius: 100px; align-self: flex-start;
}
.cs-card h2 { font-size: 19px; font-weight: 680; letter-spacing: -.02em; line-height: 1.35; color: var(--ink); }
.cs-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; flex: 1; }
.cs-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-stats span {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  padding: 4px 10px; border-radius: 100px;
}
.cs-read { font-size: 13px; font-weight: 600; color: var(--accent-ink); }

.content-cta { padding: 80px 0; background: var(--bg-soft); }
.content-cta-inner { text-align: center; max-width: 560px; margin: 0 auto; }
.content-cta-inner h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.content-cta-inner p { font-size: 16px; color: var(--muted); margin-bottom: 24px; }
.content-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Case studies strip on homepage */
.proof-section { padding: 100px 0; background: var(--bg-soft); }
.proof-section .section-head { margin-bottom: 48px; }
.proof-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.proof-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 28px; text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.proof-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.proof-card .pc-stat { font-size: 32px; font-weight: 720; letter-spacing: -.03em; color: var(--accent-ink); margin-bottom: 8px; }
.proof-card h3 { font-size: 17px; font-weight: 650; line-height: 1.4; margin-bottom: 8px; }
.proof-card p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.proof-card .pc-link { font-size: 13px; font-weight: 600; color: var(--accent-ink); margin-top: 12px; display: inline-block; }

/* Video modal */
.video-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(9,9,11,.72); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.video-modal.open { opacity: 1; visibility: visible; }
.video-modal-inner {
  position: relative; width: min(900px, 100%);
  background: #0b0b0f; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  transform: scale(.96); transition: transform .3s var(--ease-spring);
}
.video-modal.open .video-modal-inner { transform: scale(1); }
.video-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none; cursor: pointer;
  color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.video-modal-close:hover { background: rgba(255,255,255,.28); }
.video-modal-ratio { position: relative; padding-bottom: 56.25%; height: 0; }
.video-modal-ratio iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

@media (max-width: 920px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-sidebar { position: static; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 32px; }
  .legal-sidebar a { border-left: none; padding-left: 0; }
  .blog-grid, .cs-grid, .proof-cards { grid-template-columns: 1fr; }
  .cs-metrics { grid-template-columns: repeat(2, 1fr); }
  .product-feature-grid, .pattern-grid, .deploy-steps { grid-template-columns: 1fr; }
  .product-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PRODUCT PAGES — canvas, simulation, deploy
   ============================================================ */
.page-hero-canvas { background: linear-gradient(180deg, #f0f4ff 0%, #fbfaff 70%, #fff 100%); }
.page-hero-sim { background: linear-gradient(180deg, #f0fdf8 0%, #fbfaff 70%, #fff 100%); }
.page-hero-deploy { background: linear-gradient(180deg, #fff8f0 0%, #fbfaff 70%, #fff 100%); }

.product-hero-visual { min-height: 280px; display: flex; align-items: center; }
.product-canvas-demo { width: 100%; }

.product-stats { padding: 0 0 60px; margin-top: -20px; }
.product-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 32px; box-shadow: var(--shadow-sm);
}
.product-stats-grid b { display: block; font-size: 28px; font-weight: 720; letter-spacing: -.03em; color: var(--ink); }
.product-stats-grid small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

.product-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-feature {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 26px; transition: transform .25s var(--ease), box-shadow .25s;
}
.product-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-feature h3 { font-size: 17px; font-weight: 650; margin: 14px 0 8px; letter-spacing: -.02em; }
.product-feature p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

.product-cloud-bar { padding: 60px 0 80px; background: var(--bg-soft); }
.product-cloud-label {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  text-align: center; margin-bottom: 20px;
}
.product-cloud-tags {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 900px; margin: 0 auto;
}
.product-cloud-tags span {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--border); padding: 6px 12px; border-radius: 100px;
}

.pattern-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pattern-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 24px; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.pattern-card:hover, .pattern-card.active { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #c8c8d0; }
.pattern-card.active { border-color: var(--accent); background: linear-gradient(180deg, #fafaff, #fff); }
.pattern-badge {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink);
  background: #f0f0ff; padding: 4px 10px; border-radius: 100px; display: inline-block; margin-bottom: 14px;
}
.pattern-card h3 { font-size: 17px; font-weight: 650; margin-bottom: 8px; }
.pattern-card p { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.pattern-use { font-size: 12px; font-weight: 600; color: var(--faint); font-family: var(--mono); }

.sim-metrics-panel {
  max-width: 560px; margin: 0 auto;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 8px; box-shadow: var(--shadow-md);
}
.sim-metric-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 16px; border-radius: 10px; font-size: 14px;
}
.sim-metric-row span { color: var(--ink-2); font-family: var(--mono); font-size: 12.5px; }
.sim-metric-row b { font-weight: 650; font-size: 13px; }
.sim-metric-row i { font-style: normal; width: 22px; text-align: center; }
.sim-metric-row.ok { background: #f0fdf8; }
.sim-metric-row.warn { background: #fffbeb; }
.sim-metric-row.err { background: #fef2f2; }
.sim-cost-breakdown {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; margin-top: 8px; border-top: 1px solid var(--border-soft);
  font-size: 13.5px; color: var(--muted);
}
.sim-cost-breakdown b { color: var(--ink); font-weight: 650; }
.sim-cost-total { font-weight: 600; color: var(--ink); padding-top: 8px; border-top: 1px dashed var(--border); }

.rec-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 720px; margin: 0 auto; }
.rec-card {
  border-radius: 14px; padding: 20px 22px; border: 1px solid var(--border);
}
.rec-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.rec-sev {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; display: inline-block; margin-bottom: 10px;
  padding: 3px 8px; border-radius: 6px;
}
.rec-warn { background: #fffbeb; border-color: #fde68a; }
.rec-warn .rec-sev { background: #fef3c7; color: #92400e; }
.rec-adv { background: #f0f9ff; border-color: #bae6fd; }
.rec-adv .rec-sev { background: #e0f2fe; color: #075985; }
.rec-info { background: var(--bg-soft); }
.rec-info .rec-sev { background: #e8e8ec; color: var(--muted); }

.product-note { font-size: 14.5px; color: var(--muted); margin-top: 32px; }
.product-note.center { text-align: center; }

.deploy-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.deploy-step {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px;
}
.deploy-step-num {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent-ink);
  display: block; margin-bottom: 12px;
}
.deploy-step h3 { font-size: 16px; font-weight: 650; margin-bottom: 8px; }
.deploy-step p { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ============================================================
   MESH GRADIENTS (Glean-style aurora)
   ============================================================ */
.mesh-bg {
  position: relative; overflow: clip;
  background: linear-gradient(180deg, #faf9fe 0%, #fdfcfa 55%, #fff 100%);
}
.mesh-blob {
  position: absolute; border-radius: 50%; filter: blur(100px);
  pointer-events: none; opacity: .55;
  animation: glow-drift 18s ease-in-out infinite alternate;
}
.mesh-blob-1 { width: 640px; height: 480px; background: rgba(192,132,252,.22); top: -10%; left: -8%; }
.mesh-blob-2 { width: 520px; height: 400px; background: rgba(251,146,60,.16); bottom: -15%; right: -5%; animation-delay: -6s; }
.mesh-blob-3 { width: 440px; height: 340px; background: rgba(163,230,53,.12); bottom: 10%; left: 35%; animation-delay: -12s; }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-hero {
  padding: 100px 0 48px; text-align: center;
}
.pricing-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.pricing-hero h1 {
  font-size: clamp(38px, 5vw, 56px); font-weight: 730;
  letter-spacing: -.04em; line-height: 1.08; margin-bottom: 20px;
}
.pricing-hero h1 em { font-style: normal; color: var(--accent); }
.pricing-lead {
  font-size: 17px; line-height: 1.65; color: var(--ink-2);
  margin-bottom: 24px; font-weight: 450;
}
.cloud-badges {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--muted); margin-bottom: 32px;
}
.cloud-badges .dot { color: var(--faint); }

.billing-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 4px; box-shadow: var(--shadow-sm);
}
.billing-opt {
  border: none; background: transparent; font: inherit;
  font-size: 13.5px; font-weight: 550; color: var(--muted);
  padding: 8px 16px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s, color .2s;
}
.billing-opt.active { background: var(--ink); color: #fff; }
.save-pill {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: rgba(34,197,94,.15); color: #15803d;
  padding: 2px 7px; border-radius: 6px;
}
.billing-opt.active .save-pill { background: rgba(255,255,255,.18); color: #fff; }

.pricing-cards-section { padding: 0 0 80px; margin-top: -8px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px; align-items: stretch;
}
.price-card {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 24px 20px; display: flex; flex-direction: column;
  box-shadow: 0 2px 8px rgba(9,9,11,.03);
  transition: box-shadow .25s, border-color .25s;
}
.price-card:hover { box-shadow: var(--shadow-md); border-color: #d8d8e4; }
.price-card-popular {
  border-color: #c4b5fd; box-shadow: 0 4px 24px rgba(124,108,245,.12);
  position: relative;
}
.popular-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  color: #fff; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.price-tier {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 12px;
}
.price-amount {
  display: flex; align-items: baseline; gap: 2px; margin-bottom: 6px;
}
.price-currency { font-size: 22px; font-weight: 600; color: var(--ink-2); }
.price-value { font-size: 42px; font-weight: 730; letter-spacing: -.04em; line-height: 1; }
.price-period { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.price-amount-custom .price-value { font-size: 32px; }
.price-meta { font-size: 12.5px; color: var(--faint); margin-bottom: 4px; }
.price-billed { font-size: 11.5px; color: var(--faint); margin-bottom: 0; }
.price-desc {
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
  margin: 16px 0 20px; flex: 1;
}
.price-features {
  list-style: none; margin: 20px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--border-soft);
}
.price-features li {
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
  padding: 5px 0 5px 18px; position: relative;
}
.price-features li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--violet));
}
.tag-upcoming {
  font-size: 10px; font-weight: 600; color: var(--accent-ink);
  background: #ede9fe; padding: 2px 6px; border-radius: 5px;
}
.btn-block { width: 100%; justify-content: center; }

.pricing-compare { padding: 80px 0; background: var(--bg-soft); }
.pricing-compare .section-head { text-align: center; margin-bottom: 36px; }
.pricing-compare .section-head h2 { font-size: 32px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 8px; }
.pricing-compare .section-head p { color: var(--muted); font-size: 15px; }
.compare-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: 16px;
  background: #fff; box-shadow: var(--shadow-sm);
}
.compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 900px; }
.compare-table th,
.compare-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.compare-table thead th {
  position: sticky; top: 0; background: #fafafa; z-index: 2;
  font-weight: 650; font-size: 13px; color: var(--ink);
}
.compare-table td:first-child { font-weight: 500; color: var(--ink-2); min-width: 220px; }
.compare-table td:not(:first-child) { text-align: center; color: var(--muted); font-size: 13px; }
.compare-section td {
  background: #f4f4f7; font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  padding: 10px 16px;
}

.pricing-faq { padding: 80px 0 40px; }
.pricing-faq h2 {
  font-size: 32px; font-weight: 700; letter-spacing: -.03em;
  text-align: center; margin-bottom: 32px;
}
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 10px; background: #fff; overflow: hidden;
}
.faq-item summary {
  padding: 18px 22px; font-weight: 600; font-size: 15px;
  cursor: pointer; list-style: none; display: flex;
  align-items: center; justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 20px; font-weight: 400; color: var(--faint);
  transition: transform .2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  padding: 0 22px 18px; font-size: 14.5px; line-height: 1.65;
  color: var(--muted); margin: 0;
}
.final-sub {
  font-size: 16px; color: rgba(255,255,255,.72); margin: 12px 0 28px;
  line-height: 1.6; max-width: 640px; margin-left: auto; margin-right: auto;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero { padding: 96px 0 72px; }
.about-hero-inner { position: relative; z-index: 1; }
.about-hero-copy { max-width: 760px; margin-bottom: 56px; }
.about-hero h1 {
  font-size: clamp(34px, 4.4vw, 52px); font-weight: 730;
  letter-spacing: -.04em; line-height: 1.12; margin: 14px 0 22px;
}
.about-hero h1 em { font-style: italic; color: var(--accent); }
.about-lead {
  font-size: 17.5px; line-height: 1.7; color: var(--ink-2);
  font-weight: 450; max-width: 680px;
}
.about-lead em { color: var(--ink); font-weight: 550; }

.postmortem-card {
  background: #131318; border: 1px solid #2a2a33; border-radius: 18px;
  overflow: hidden; box-shadow: 0 24px 64px rgba(9,9,11,.24);
  max-width: 980px;
}
.pm-chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid #26262e;
  font-family: var(--mono); font-size: 12px;
}
.pm-file { color: #8b8b98; }
.pm-badge {
  color: #fbbf24; font-weight: 700; letter-spacing: .06em; font-size: 11px;
  background: rgba(251,191,36,.1); padding: 4px 10px; border-radius: 6px;
}
.pm-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.pm-stat { padding: 24px 22px; border-right: 1px solid #26262e; }
.pm-stat:last-child { border-right: none; }
.pm-label {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: #8b8b98; margin-bottom: 10px;
}
.pm-value { display: block; font-size: 30px; font-weight: 730; letter-spacing: -.03em; color: #fff; margin-bottom: 12px; }
.pm-red { color: #f87171; }
.pm-amber { color: #fbbf24; }
.pm-stat p { font-size: 13px; line-height: 1.6; color: #9d9daa; margin: 0; }
.pm-root {
  padding: 16px 22px; border-top: 1px solid #26262e;
  font-size: 13px; line-height: 1.6; color: #9d9daa;
  background: rgba(248,113,113,.04);
}
.pm-root b { color: #f87171; font-weight: 650; }

.about-origin { padding: 96px 0 64px; }
.origin-body { max-width: 720px; }
.origin-body p {
  font-size: 16.5px; line-height: 1.75; color: var(--ink-2);
  margin-bottom: 22px;
}
.origin-body strong { color: var(--ink); font-weight: 630; }
.origin-body em { color: var(--ink); }

.about-timeline {
  padding: 80px 0 96px;
  background:
    radial-gradient(800px 460px at 88% 0%, rgba(192,132,252,.09), transparent 65%),
    radial-gradient(640px 400px at 5% 100%, rgba(251,146,60,.07), transparent 60%),
    var(--bg-soft);
}
.timeline { max-width: 780px; margin: 0 auto; position: relative; padding-left: 96px; }
.timeline::before {
  content: ""; position: absolute; left: 74px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(to bottom, #c4b5fd, #e8a8d8, #f6c9a8);
  border-radius: 2px;
}
.tl-item { position: relative; margin-bottom: 28px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-year {
  position: absolute; left: -96px; top: 22px; width: 62px; text-align: right;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent-ink);
}
.tl-item::before {
  content: ""; position: absolute; left: -26px; top: 26px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(124,108,245,.12);
}
.tl-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.tl-tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px; margin-bottom: 12px;
}
.tl-tag-red { background: #fef2f2; color: #b91c1c; }
.tl-tag-amber { background: #fffbeb; color: #92400e; }
.tl-tag-blue { background: #eff6ff; color: #1d4ed8; }
.tl-tag-violet { background: #f0eefe; color: #5b4bc4; }
.tl-tag-green { background: #f0fdf8; color: #047857; }
.tl-card h3 { font-size: 18px; font-weight: 680; letter-spacing: -.02em; margin-bottom: 10px; }
.tl-card p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; }
.tl-card em { color: var(--ink-2); }
.tl-card strong { color: var(--ink); font-weight: 630; }

.about-quote { padding: 96px 0 72px; }
.founding-quote {
  max-width: 760px; margin: 0 auto 64px; text-align: center;
}
.founding-quote p {
  font-size: clamp(19px, 2.4vw, 24px); font-weight: 550; letter-spacing: -.02em;
  line-height: 1.5; color: var(--ink); margin-bottom: 20px;
}
.founding-quote cite {
  font-style: normal; font-family: var(--mono); font-size: 13px;
  color: var(--muted);
}
.about-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 880px; margin: 0 auto;
}
.ab-stat {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 24px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.ab-stat b {
  display: block; font-size: 34px; font-weight: 730; letter-spacing: -.04em;
  background: linear-gradient(92deg, var(--accent), var(--violet) 60%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 8px;
}
.ab-stat span { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.ab-stat small { font-size: 12.5px; color: var(--faint); }

.about-principles { padding: 32px 0 96px; }
.principles-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.principle {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 26px 24px; transition: box-shadow .25s, border-color .25s;
}
.principle:hover { box-shadow: var(--shadow-md); border-color: #d8d8e4; }
.pr-num {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--accent-ink); margin-bottom: 14px;
}
.principle h3 { font-size: 16.5px; font-weight: 680; letter-spacing: -.02em; margin-bottom: 10px; }
.principle p { font-size: 14px; line-height: 1.62; color: var(--muted); margin: 0; }

@media (max-width: 900px) {
  .pm-grid { grid-template-columns: 1fr; }
  .pm-stat { border-right: none; border-bottom: 1px solid #26262e; }
  .pm-stat:last-child { border-bottom: none; }
  .principles-grid { grid-template-columns: 1fr 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .timeline { padding-left: 0; }
  .timeline::before { display: none; }
  .tl-item::before { display: none; }
  .tl-year { position: static; display: block; text-align: left; width: auto; margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .principles-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECURITY / POLICY PAGE
   ============================================================ */
.legal-page { --text-muted: var(--muted); --text-subtle: var(--faint); }

.page-header { padding: 24px 0 8px; }
.page-badge {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink);
  background: #f0eefe; padding: 4px 12px; border-radius: 999px; margin-bottom: 18px;
}
.page-header h1 {
  font-size: clamp(30px, 3.6vw, 42px); font-weight: 730; letter-spacing: -.03em;
  margin-bottom: 16px;
}
.page-header > p { font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 720px; margin-bottom: 10px; }
.last-updated { font-family: var(--mono); font-size: 12px !important; color: var(--faint) !important; }

.soc-banner {
  margin: 28px 0 8px; border: 1px solid #c7d2fe; border-radius: 16px;
  background: linear-gradient(135deg, #eef2ff, #faf5ff);
  padding: 24px;
}
.soc-banner-inner { display: flex; gap: 18px; align-items: flex-start; }
.soc-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  background: #fff; border: 1px solid #c7d2fe;
  display: flex; align-items: center; justify-content: center;
}
.soc-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.soc-tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #92400e;
  background: #fef3c7; padding: 3px 9px; border-radius: 6px; margin-bottom: 10px;
}
.soc-content h3 { font-size: 18px; font-weight: 680; margin-bottom: 8px; }
.soc-content > p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin-bottom: 16px; }
.soc-timeline { display: flex; flex-wrap: wrap; gap: 8px; }
.soc-timeline .timeline-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
}
.soc-timeline .timeline-item svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.soc-timeline .timeline-item.done { color: #047857; border-color: #a7f3d0; background: #f0fdf8; }
.soc-timeline .timeline-item.active { color: var(--accent-ink); border-color: #c7d2fe; background: #eef2ff; }
.soc-timeline .timeline-item.upcoming { color: var(--faint); }

.policy-section { padding: 36px 0 8px; }
.policy-heading {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 2px solid var(--border-soft);
}
.policy-section > p { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin-bottom: 16px; max-width: 760px; }
.policy-section h3 { font-size: 17px; font-weight: 680; margin: 26px 0 12px; }
.policy-section ul { margin: 0 0 18px 20px; }
.policy-section ul li { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 8px; }
.policy-section code {
  font-family: var(--mono); font-size: 12.5px; background: var(--bg-soft);
  border: 1px solid var(--border-soft); border-radius: 5px; padding: 1px 6px;
}
.section-divider { border: none; border-top: 1px solid var(--border-soft); margin: 32px 0 8px; }

.roadmap-table {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  margin: 20px 0; background: #fff;
}
.roadmap-row {
  display: grid; grid-template-columns: 1.1fr 1.6fr 0.6fr; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
.roadmap-row:last-child { border-bottom: none; }
.roadmap-cell { min-width: 0; font-size: 14px; color: var(--ink-2); }
.roadmap-row.header .roadmap-cell { font-size: 12px; }
.roadmap-row.header {
  background: var(--bg-soft); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--faint);
}
.cert-name { font-size: 14px; font-weight: 650; color: var(--ink); }
.cert-desc { font-size: 12px; color: var(--faint); margin-top: 3px; }
.status-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.status-badge.live { background: #f0fdf8; color: #047857; border: 1px solid #a7f3d0; }
.status-badge.progress { background: #eef2ff; color: var(--accent-ink); border: 1px solid #c7d2fe; }
.status-badge.planned { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.status-badge.future { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--border); }

.control-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0; }
.control-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px;
}
.control-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.control-card-header h4 { font-size: 14.5px; font-weight: 650; }
.control-card > p { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0; }
.control-icon {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.control-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.control-icon.blue { background: #eff6ff; color: #1d4ed8; }
.control-icon.green { background: #f0fdf8; color: #047857; }
.control-icon.purple { background: #f0eefe; color: #5b4bc4; }
.control-icon.amber { background: #fffbeb; color: #b45309; }

.highlight-box {
  border: 1px solid #c7d2fe; border-left: 4px solid var(--accent);
  background: #eef2ff; border-radius: 10px; padding: 16px 20px; margin: 22px 0;
}
.highlight-box p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.green-box {
  border: 1px solid #a7f3d0; border-left: 4px solid #10b981;
  background: #f0fdf8; border-radius: 10px; padding: 16px 20px; margin: 22px 0;
}
.green-box p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0; }

.iam-flow { margin: 22px 0; }
.iam-steps { display: flex; flex-direction: column; gap: 0; }
.iam-step { display: flex; gap: 16px; position: relative; padding-bottom: 22px; }
.iam-step:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 0;
  width: 2px; background: var(--border);
}
.step-num {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.step-body strong { display: block; font-size: 14.5px; font-weight: 650; margin-bottom: 5px; }
.step-body p { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0; }

.legal-page .faq-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; font: inherit; font-size: 14.5px; font-weight: 620; text-align: left;
  background: none; border: none; cursor: pointer; color: var(--ink);
}
.faq-q svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: var(--faint); stroke-width: 2; transition: transform .25s; }
.legal-page .faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 20px 18px; }
.legal-page .faq-item.open .faq-a { display: block; }
.faq-a p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-bottom: 10px; }
.faq-a ul { margin: 0 0 12px 20px; }
.faq-a ul li { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); margin-bottom: 6px; }

.company-details {
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft);
  padding: 18px 22px; margin: 18px 0;
}
.company-details p { font-size: 14px; line-height: 1.8; color: var(--ink-2); margin: 0; }

@media (max-width: 800px) {
  .control-grid { grid-template-columns: 1fr; }
  .roadmap-row { grid-template-columns: 1fr; gap: 8px; }
  .roadmap-row.header { display: none; }
  .soc-banner-inner { flex-direction: column; }
}

/* ============================================================
   FEATURE LIST COMPONENTS (product pages)
   ============================================================ */
.flist-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.flist-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.flist-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; transition: box-shadow .25s, border-color .25s;
}
.flist-card:hover { box-shadow: var(--shadow-sm); border-color: #d8d8e4; }
.flist-card b {
  display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
  margin-bottom: 6px; color: var(--ink);
}
.flist-card p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.flist-card .fl-tag {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink);
  background: #f0eefe; padding: 2px 7px; border-radius: 5px; margin-left: 6px;
  vertical-align: 2px;
}

.svc-strip {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 920px; margin: 0 auto;
}
.svc-strip span {
  font-family: var(--mono); font-size: 12px; font-weight: 550; color: var(--ink-2);
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px;
}
.svc-strip span.hl { border-color: #c4b5fd; background: #f7f5ff; color: var(--accent-ink); }

.tmpl-provider-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tmpl-provider {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px;
}
.tmpl-provider b { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 680; margin-bottom: 10px; }
.tmpl-provider b i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--accent-ink); background: #f0eefe; border-radius: 5px; padding: 1px 7px; }
.tmpl-provider p { font-size: 12.5px; line-height: 1.65; color: var(--muted); margin: 0; }

.pillar-band {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: center; margin: 0 auto 8px; max-width: 900px;
}
.pillar-band .pb-step {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px;
}
.pillar-band .pb-step.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pillar-band .pb-arrow { color: var(--faint); font-size: 14px; }

@media (max-width: 960px) {
  .flist-grid, .flist-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .tmpl-provider-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .flist-grid, .flist-grid.cols-2 { grid-template-columns: 1fr; }
  .tmpl-provider-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE PILLAR EXPLORER
   ============================================================ */
.pillars {
  padding: 96px 0;
  background:
    radial-gradient(800px 480px at 90% 0%, rgba(192,132,252,.08), transparent 62%),
    radial-gradient(640px 420px at 6% 100%, rgba(96,165,250,.06), transparent 60%),
    var(--bg-soft);
}
.pillar-tabs {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin: 8px 0 32px;
}
.pillar-tab {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted);
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 18px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.pillar-tab:hover { border-color: #d0d0de; box-shadow: var(--shadow-sm); }
.pillar-tab .pt-num {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--accent-ink); background: #f0eefe;
  border-radius: 6px; padding: 2px 7px;
}
.pillar-tab.active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.pillar-tab.active .pt-num { background: rgba(255,255,255,.16); color: #fff; }

.pillar-pane { display: none; }
.pillar-pane.active { display: block; animation: pane-in .3s var(--ease); }
@keyframes pane-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.pillar-lead {
  text-align: center; font-size: 15.5px; color: var(--ink-2);
  max-width: 620px; margin: 0 auto 28px; line-height: 1.6;
}
.pillar-more {
  display: block; text-align: center; margin-top: 26px;
  font-size: 14.5px; font-weight: 600; color: var(--accent-ink);
  text-decoration: none;
}
.pillar-more:hover { text-decoration: underline; }

.pillar-example {
  margin-top: 56px; background: #131318; border: 1px solid #2a2a33;
  border-radius: 18px; padding: 28px 30px;
}
.pillar-example .pe-label {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #8b8b98;
  margin-bottom: 20px;
}
.pe-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pe-step { display: flex; gap: 12px; align-items: flex-start; }
.pe-step i {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(124,108,245,.18); border: 1px solid rgba(124,108,245,.4);
  color: #b9a8f5; font-style: normal; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pe-step span { font-size: 13px; line-height: 1.55; color: #c6c6d0; }

@media (max-width: 960px) {
  .pe-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pe-steps { grid-template-columns: 1fr; }
  .pillar-tab { width: 100%; justify-content: center; }
}

@media (max-width: 1200px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .price-card-enterprise { grid-column: span 1; }
}
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .price-card-popular { grid-column: span 2; }
}
@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card-popular { grid-column: span 1; }
  .pricing-hero { padding-top: 72px; }
}

/* ============================================================
   MOBILE NAVIGATION DRAWER
   ============================================================ */
.nav-mobile {
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
}
.nav-mobile.open { pointer-events: auto; }
.nav-mobile-backdrop {
  position: absolute; inset: 0;
  background: rgba(9,9,11,.42);
  opacity: 0; transition: opacity .28s var(--ease);
}
.nav-mobile.open .nav-mobile-backdrop { opacity: 1; }
.nav-mobile-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 100vw);
  background: #fff;
  border-left: 1px solid var(--border-soft);
  box-shadow: -12px 0 48px rgba(9,9,11,.12);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s var(--ease);
}
.nav-mobile.open .nav-mobile-panel { transform: translateX(0); }
.nav-mobile-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border-soft);
}
.nav-mobile-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.nav-mobile-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  color: var(--ink-2); transition: background .15s, border-color .15s;
}
.nav-mobile-close:hover { background: var(--bg-soft); border-color: #d4d4d8; }
.nav-mobile-body {
  flex: 1; overflow-y: auto; padding: 12px 16px 24px;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile-group {
  border: 1px solid var(--border-soft); border-radius: 12px;
  margin-bottom: 8px; background: #fff; overflow: hidden;
}
.nav-mobile-group summary {
  list-style: none; cursor: pointer;
  padding: 13px 16px; font-size: 14.5px; font-weight: 620;
  color: var(--ink); display: flex; align-items: center; justify-content: space-between;
}
.nav-mobile-group summary::-webkit-details-marker { display: none; }
.nav-mobile-group summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.8px solid var(--faint); border-bottom: 1.8px solid var(--faint);
  transform: rotate(45deg); transition: transform .2s;
}
.nav-mobile-group[open] summary::after { transform: rotate(-135deg); }
.nav-mobile-links { padding: 0 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-mobile-links a {
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  padding: 9px 10px; border-radius: 8px; transition: background .15s, color .15s;
}
.nav-mobile-links a:hover { background: var(--bg-soft); color: var(--ink); }
.nav-mobile-top {
  display: block; font-size: 14.5px; font-weight: 620; color: var(--ink);
  text-decoration: none; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--border-soft); margin-bottom: 8px;
  transition: background .15s;
}
.nav-mobile-top:hover { background: var(--bg-soft); }
.nav-mobile-foot {
  padding: 16px 20px 24px; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 10px;
}
body.nav-open { overflow: hidden; }
.nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(6.3px) rotate(45deg); }
.nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6.3px) rotate(-45deg); }
.nav-burger span { transition: transform .22s var(--ease), opacity .18s; }

/* ============================================================
   ARTICLE / BLOG / CASE STUDY COMPONENTS
   ============================================================ */
.page-content {
  --text-muted: var(--muted);
  --text-subtle: var(--faint);
  --warn: #b45309;
  --success: #047857;
  --danger: #b91c1c;
}

.back-link {
  display: inline-block; font-size: 13.5px; font-weight: 600;
  color: var(--accent-ink); text-decoration: none; margin-bottom: 24px;
}
.back-link:hover { text-decoration: underline; }

.article-wrap h2[data-n] {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.article-wrap h2[data-n]::before {
  content: attr(data-n);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; color: var(--accent-ink);
  background: #f0eefe; padding: 4px 9px; border-radius: 7px; flex: none;
}

.callout {
  border-radius: 14px; padding: 18px 20px; margin: 24px 0;
  border: 1px solid var(--border);
}
.callout-head {
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  margin-bottom: 8px; color: var(--ink);
}
.callout p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.callout-red { background: #fef2f2; border-color: #fecaca; }
.callout-red .callout-head { color: #991b1b; }
.callout-amber { background: #fffbeb; border-color: #fde68a; }
.callout-amber .callout-head { color: #92400e; }
.callout-green { background: #f0fdf8; border-color: #a7f3d0; }
.callout-green .callout-head { color: #047857; }
.callout-accent { background: #f0eefe; border-color: #c7d2fe; }
.callout-accent .callout-head { color: var(--accent-ink); }

.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: 14px;
  margin: 22px 0; background: #fff;
}
.table-wrap table {
  width: 100%; min-width: 520px; border-collapse: collapse;
  font-size: 13.5px;
}
.table-wrap th, .table-wrap td {
  padding: 11px 14px; text-align: left;
  border-bottom: 1px solid var(--border-soft); vertical-align: top;
}
.table-wrap th {
  background: var(--bg-soft); font-weight: 650; color: var(--ink);
  font-size: 12.5px; white-space: nowrap;
}
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap .warn-cell { color: #b45309; font-weight: 600; }
.table-wrap .good, .table-wrap td.good { color: #047857; font-weight: 600; }
.table-wrap tr.winner td { background: #f0fdf8; font-weight: 650; }

.compare-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 24px 0;
}
.compare-grid:has(.compare-col) { grid-template-columns: 1fr 1fr; }
.compare-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px;
}
.compare-card h4 {
  font-size: 14.5px; font-weight: 650; margin-bottom: 8px; color: var(--ink);
}
.compare-card p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.compare-card.good { border-color: #a7f3d0; background: #f0fdf8; }
.compare-card.bad { border-color: #fecaca; background: #fef2f2; }
.compare-card.warn { border-color: #fde68a; background: #fffbeb; }

.compare-grid.compare-cols {
  grid-template-columns: 1fr 1fr;
}
.compare-col {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.compare-col-head {
  padding: 14px 18px; font-size: 14px; font-weight: 650;
  border-bottom: 1px solid var(--border-soft);
}
.compare-col.old .compare-col-head { background: #fef2f2; color: #991b1b; }
.compare-col.new .compare-col-head { background: #f0fdf8; color: #047857; }
.compare-col-body { padding: 12px 14px; }
.compare-item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
  padding: 8px 0; border-bottom: 1px solid var(--border-soft);
}
.compare-item:last-child { border-bottom: none; }
.compare-item-icon { flex: none; font-weight: 700; }

.workflow-steps { display: flex; flex-direction: column; gap: 0; margin: 24px 0; }
.workflow-step {
  display: flex; gap: 16px; position: relative; padding-bottom: 22px;
}
.workflow-step:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 0;
  width: 2px; background: var(--border);
}
.workflow-step .step-num {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.workflow-step .step-content strong {
  display: block; font-size: 14.5px; font-weight: 650; margin-bottom: 4px;
}
.workflow-step .step-content p {
  font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0;
}

.failure-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin: 24px 0;
}
.failure-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px;
}
.failure-card h4 { font-size: 14.5px; font-weight: 650; margin-bottom: 6px; }
.failure-card p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.failure-card.amber { border-color: #fde68a; background: #fffbeb; }
.failure-card.green { border-color: #a7f3d0; background: #f0fdf8; }

.canvas-placeholder {
  border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; margin: 28px 0; background: #fff;
  box-shadow: var(--shadow-sm);
}
.cp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #f8f8fa; border-bottom: 1px solid var(--border-soft);
}
.cp-dot-row { display: flex; gap: 6px; flex: none; }
.cp-dot { width: 10px; height: 10px; border-radius: 50%; }
.cp-title {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.cp-body { padding: 16px; }
.cp-body--shot { padding: 0; }
.cp-body--shot img { display: block; width: 100%; height: auto; }
.cp-label { font-size: 12px; font-weight: 650; color: var(--accent-ink); margin-bottom: 6px; }
.cp-desc { font-size: 13px; line-height: 1.6; color: var(--muted); margin-bottom: 8px; }
.cp-meta { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.canvas-placeholder-inner {
  padding: 28px 24px; text-align: center;
  background: linear-gradient(180deg, #faf9fe, #fff);
}
.canvas-placeholder-icon { font-size: 28px; margin-bottom: 10px; }
.canvas-placeholder-label, .canvas-placeholder-tag {
  font-size: 12px; font-weight: 650; color: var(--accent-ink);
  font-family: var(--mono); margin-bottom: 8px;
}
.canvas-placeholder-desc {
  font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 640px; margin: 0 auto;
}
.canvas-placeholder-bar {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  padding: 10px 14px; border-top: 1px solid var(--border-soft);
  background: #fafafa; font-size: 11.5px; color: var(--ink-2);
}
.canvas-bar-item { display: inline-flex; align-items: center; gap: 6px; }
.canvas-bar-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--faint);
}
.canvas-bar-dot.healthy { background: var(--green); }

.finding-list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.finding-card {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px;
}
.finding-badge {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; padding: 4px 8px; border-radius: 6px;
  align-self: start; white-space: nowrap;
}
.badge-warn { background: #fef3c7; color: #92400e; }
.badge-amber { background: #ffedd5; color: #c2410c; }
.badge-info { background: #eef2ff; color: var(--accent-ink); }
.badge-good { background: #dcfce7; color: #047857; }
.finding-content h4 { font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.finding-content p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 8px; }
.finding-impact { display: flex; flex-direction: column; gap: 4px; }
.finding-impact span { font-size: 12.5px; line-height: 1.45; }
.fi-red { color: #b91c1c; }
.fi-amber { color: #b45309; }
.fi-green { color: #047857; }

.sim-output {
  background: #0b0b0f; border: 1px solid #2a2a33; border-radius: 14px;
  overflow: hidden; margin: 24px 0; font-family: var(--mono); font-size: 12px;
}
.sim-header {
  padding: 10px 14px; border-bottom: 1px solid #26262e;
  color: #8b8b98; font-size: 11px; font-weight: 600;
}
.sim-line { padding: 8px 14px; color: #c6c6d0; line-height: 1.5; word-break: break-word; }
.sim-line + .sim-line { border-top: 1px solid #1e1e26; }
.sl-warn { color: #fbbf24; }
.sl-amber { color: #fb923c; }
.sl-info { color: #93c5fd; }
.sl-label { color: #9d9daa; }
.sl-val { color: #f87171; font-weight: 600; }
.sl-ok { color: #34d399; font-weight: 600; }

.metric-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 28px 0;
}
.metric-item {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; text-align: center;
}
.metric-num {
  font-size: clamp(22px, 4vw, 28px); font-weight: 720; letter-spacing: -.03em;
  margin-bottom: 6px;
}
.metric-num.warn { color: #b45309; }
.metric-num.good { color: #047857; }
.metric-num.accent { color: var(--accent-ink); }
.metric-label { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.arch-path {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; margin: 20px 0;
  overflow-x: auto;
}
.arch-path .dimmed { color: var(--faint); }

.img-placeholder {
  border: 1.5px dashed #d4d4d8; border-radius: 16px;
  padding: 28px 24px; text-align: center; margin: 24px 0;
  background: linear-gradient(180deg, #faf9fe, #fff);
}
.img-placeholder.wide { padding: 32px 20px; }
.img-placeholder-icon { font-size: 28px; margin-bottom: 10px; }
.img-placeholder-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--accent-ink); margin-bottom: 8px;
}
.img-placeholder-title { font-size: 15px; font-weight: 650; margin-bottom: 8px; }
.img-placeholder-desc {
  font-size: 13px; line-height: 1.6; color: var(--muted);
  max-width: 640px; margin: 0 auto;
}
.img-placeholder-caption {
  font-size: 12.5px; color: var(--faint); text-align: center; margin: -12px 0 24px;
}

.rec-panel {
  border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; margin: 24px 0; background: #fff;
}
.rec-panel-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 12px 16px; background: var(--bg-soft);
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px; font-weight: 600;
}
.rec-item { display: flex; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border-soft); }
.rec-item:last-child { border-bottom: none; }
.rec-severity {
  flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; height: fit-content;
}
.sev-warn { background: #fef3c7; color: #92400e; }
.sev-info { background: #eef2ff; color: var(--accent-ink); }
.rec-body h5 { font-size: 14.5px; font-weight: 650; margin-bottom: 6px; }
.rec-body p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0 0 8px; }
.rec-apply { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }

.cta-block {
  background: linear-gradient(135deg, #f0eefe, #faf5ff);
  border: 1px solid #c7d2fe; border-radius: 16px;
  padding: 28px 26px; margin: 36px 0; text-align: center;
}
.cta-block h3 {
  font-size: clamp(18px, 3vw, 22px); font-weight: 680;
  letter-spacing: -.02em; margin-bottom: 10px; line-height: 1.35;
}
.cta-block p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.cta-block a {
  display: inline-flex; font-size: 14px; font-weight: 650;
  color: var(--accent-ink); text-decoration: none;
}
.cta-block a:hover { text-decoration: underline; }

.related {
  margin: 36px 0 12px; padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}
.related h4 { font-size: 14px; font-weight: 650; margin-bottom: 10px; }
.related ul { margin: 0; padding-left: 1.2em; }
.related li { font-size: 14px; margin-bottom: 6px; }
.related a { color: var(--accent-ink); }

/* misc article widgets */
.scenario-grid, .decision-grid, .migration-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0;
}
.scenario-card, .decision-card, .migration-card, .roi-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; background: #fff;
}
.checklist { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.checklist .insight-item, .insight-list .insight-item {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.insight-num { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent-ink); flex: none; }
.cost-panel, .cost-snapshot {
  border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin: 24px 0;
}
.cost-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.sim-metrics-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.sim-metric {
  flex: 1 1 140px; background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 12px 14px;
}
.sim-metric-lbl { display: block; font-size: 11px; color: var(--faint); margin-bottom: 4px; }
.sim-metric-val { font-size: 16px; font-weight: 650; }

/* ============================================================
   GLOBAL RESPONSIVE REFINEMENTS
   ============================================================ */
@media (max-width: 920px) {
  .nav-actions .btn-glow .btn-sm,
  .nav-actions .btn-primary.btn-sm { padding: 7px 12px; font-size: 13px; }
  .nav-inner { padding: 0 16px; gap: 12px; }
  .container, .ft-container { padding-left: 16px; padding-right: 16px; }
  .hero-visual { padding: 0 16px; }
  .page-hero-compact, .content-hero, .legal-page { padding-top: 72px; }
  .page-section { padding: 72px 0; }
  .features, .proof-section, .pillars { padding: 72px 0; }
  .final-inner { padding: 64px 24px; }
  .pattern-grid { grid-template-columns: repeat(2, 1fr); }
  .deploy-steps { grid-template-columns: repeat(2, 1fr); }
  .product-stats-grid { padding: 20px; }
  .compare-grid:has(.compare-col) { grid-template-columns: 1fr; }
  .scenario-grid, .decision-grid, .migration-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container, .ft-container { padding-left: 14px; padding-right: 14px; }
  .hero { padding-top: 64px; }
  .hero-ctas .btn { flex: 1 1 100%; justify-content: center; min-width: 0; }
  .hero-ctas { gap: 10px; }
  .hero-proof { gap: 8px; font-size: 12px; }
  .ph-ctas { flex-direction: column; align-items: stretch; }
  .ph-ctas .btn { width: 100%; justify-content: center; }
  .content-hero, .content-hero-case { padding: 72px 0 40px; }
  .content-breadcrumb { font-size: 12px; word-break: break-word; }
  .article-wrap h2 { font-size: 21px; }
  .article-wrap h3 { font-size: 17px; }
  .compare-grid { grid-template-columns: 1fr; }
  .failure-grid { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: 1fr; }
  .finding-card { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .b-ai, .b-sim, .b-canvas, .b-deploy, .b-conn { grid-column: span 1; }
  .pattern-grid { grid-template-columns: 1fr; }
  .deploy-steps { grid-template-columns: 1fr; }
  .product-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
  .product-stats-grid b { font-size: 22px; }
  .cs-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cs-metrics b { font-size: 22px; }
  .banner { padding: 10px 40px 10px 14px; }
  .banner-btn { display: none; }
  .cloud-badges { flex-wrap: wrap; justify-content: center; }
  .billing-toggle { width: 100%; justify-content: center; }
  .billing-opt { flex: 1; justify-content: center; padding: 8px 10px; font-size: 12.5px; }
  .sim-metric-row { grid-template-columns: 1fr; gap: 4px; }
  .sim-metric-row b, .sim-metric-row i { justify-self: start; }
  .ai-visual { flex-direction: column; }
  .morph-arrow { transform: rotate(90deg); }
  .section-head h2 { font-size: clamp(26px, 7vw, 34px); }
  .pricing-compare .section-head h2, .pricing-faq h2 { font-size: 26px; }
  .cta-block { padding: 22px 18px; text-align: left; }
  .canvas-placeholder-bar { flex-direction: column; align-items: flex-start; }
  .cp-title { white-space: normal; }
  .table-wrap table { min-width: 480px; font-size: 12.5px; }
  .table-wrap th, .table-wrap td { padding: 9px 10px; }
  .postmortem-card { border-radius: 14px; }
  .pm-chrome { flex-wrap: wrap; padding: 10px 14px; font-size: 11px; }
  .about-stats { gap: 10px; }
  .ab-stat { padding: 20px 16px; }
  .ab-stat b { font-size: 28px; }
}

@media (max-width: 480px) {
  .nav-inner { height: 58px; }
  .logo-img { height: 26px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-primary.btn-sm { padding: 6px 10px; font-size: 12px; }
  .hero-title { font-size: clamp(34px, 10vw, 44px); }
  .hero-sub { font-size: 15px; }
  .btn { white-space: normal; }
  .btn-lg { padding: 12px 18px; font-size: 14.5px; }
  .app-canvas { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .product-stats-grid { grid-template-columns: 1fr; }
  .cs-metrics { grid-template-columns: 1fr; }
  .nav-mobile-panel { width: 100vw; border-left: none; }
  .content-cta-btns { flex-direction: column; align-items: stretch; }
  .content-cta-btns .btn { width: 100%; justify-content: center; }
  .final-btns { flex-direction: column; align-items: stretch; }
  .final-btns .btn { width: 100%; justify-content: center; }
  .pillar-band .pb-arrow { display: none; }
  .pillar-band .pb-step { flex: 1 1 calc(50% - 8px); text-align: center; justify-content: center; }
}