:root {
  --ink: #eaf3ff;
  --muted: #8fa6c3;
  --navy: #020c1d;
  --panel: #071a34;
  --line: rgba(126, 185, 236, 0.16);
  --cyan: #11bffc;
  --blue: #087fe8;
  --font-geist-sans: "Aptos", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-geist-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--navy);
  font-family: var(--font-geist-sans);
  overflow-x: hidden;
}
body::before { display: none; }
.vexa-showcase { min-width: 320px; }
.vexa-showcase section[id] { scroll-margin-top: 92px; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: 92px;
  padding: 0 clamp(20px, 4vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(1,10,26,.9);
  backdrop-filter: blur(18px);
}
.brand {
  display: grid;
  place-items: center;
  width: 220px;
  height: 72px;
  padding: 3px 10px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
}
.brand img { display: block; width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
.nav a { color: #aebcd0; font-size: 13px; font-weight: 700; transition: color .2s ease; }
.nav a:hover, .nav a:focus-visible { color: #fff; }
.nav .nav-cta {
  padding: 10px 17px;
  color: #fff;
  border: 1px solid rgba(29,185,249,.55);
  border-radius: 999px;
  background: rgba(5,126,199,.13);
}
.menu-button { display: none; }
.admin-bar .site-header { top: 32px; }

.hero {
  position: relative;
  min-height: 900px;
  padding: 170px clamp(24px, 5vw, 96px) 48px;
  display: grid;
  grid-template-columns: minmax(380px, .82fr) minmax(550px, 1.18fr);
  grid-template-rows: 1fr auto;
  gap: 48px;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 60%, rgba(6,111,188,.24), transparent 31%),
    linear-gradient(125deg, #020b1b 0%, #04142d 52%, #031027 100%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: -3;
  opacity: .32;
  background-image:
    linear-gradient(rgba(87,160,222,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,160,222,.09) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
}
.hero-grid::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy) 2%, transparent 35%, transparent 80%, var(--navy));
}
.hero-glow { position: absolute; z-index: -2; border-radius: 50%; filter: blur(4px); }
.hero-glow-one { right: -8%; top: 15%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(9,151,232,.13), transparent 67%); }
.hero-glow-two { left: 28%; bottom: -35%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(28,58,151,.16), transparent 66%); }
.hero-content { position: relative; z-index: 3; max-width: 690px; }
.eyebrow {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 29px;
  color: #4bd0ff; font-size: 11px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase;
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #0dd3ff; box-shadow: 0 0 0 7px rgba(13,211,255,.1), 0 0 20px #0dd3ff; }
h1 { margin: 0; max-width: 710px; color: #f6f9ff; font-size: clamp(54px, 5.7vw, 94px); line-height: .96; letter-spacing: -.055em; font-weight: 790; }
h1 span { display: block; color: transparent; background: linear-gradient(100deg, #f5fbff 4%, #70dfff 50%, #078bea 92%); -webkit-background-clip: text; background-clip: text; }
.hero-copy { max-width: 625px; margin: 31px 0 0; color: #9eb2cc; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.62; }
.hero-actions { display: flex; gap: 13px; margin-top: 35px; }
.button { min-height: 52px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; border: 1px solid rgba(255,255,255,.17); border-radius: 8px; color: #eef7ff; font-size: 14px; font-weight: 800; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { border-color: transparent; background: linear-gradient(110deg, #0797e8, #086fd2); box-shadow: 0 15px 50px rgba(0,119,221,.22); }
.button-quiet { background: rgba(9,31,59,.5); }
.button-quiet:hover { border-color: rgba(85,197,255,.48); }
.hero-proof { list-style: none; padding: 0; margin: 45px 0 0; display: flex; gap: 0; }
.hero-proof li { min-width: 155px; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-left: 1px solid var(--line); }
.hero-proof li:first-child { padding-left: 0; border-left: 0; }
.hero-proof b { color: #18bdf7; font: 700 10px/1 var(--font-geist-mono), monospace; }
.hero-proof span { color: #b5c5d9; font-size: 12px; line-height: 1.35; font-weight: 700; }

.hero-visual { position: relative; z-index: 2; height: 610px; perspective: 1800px; }
.screen { position: absolute; overflow: hidden; border: 1px solid rgba(109,195,255,.25); border-radius: 13px; background: #eef5fb; box-shadow: 0 38px 85px rgba(0,0,0,.5), 0 0 80px rgba(7,135,226,.08); }
.screen img { display: block; width: 100%; height: auto; }
.screen-bar { height: 31px; padding: 0 11px; display: flex; align-items: center; gap: 6px; color: #6e829b; background: #fff; border-bottom: 1px solid #dbe6ef; font-size: 9px; font-weight: 700; }
.screen-bar i { width: 6px; height: 6px; border-radius: 50%; background: #c5d3de; }
.screen-bar i:first-child { background: #f38a8a; }
.screen-bar span { margin-left: 7px; }
.screen-main { top: 60px; left: 0; width: 95%; transform: rotateY(-7deg) rotateX(2deg); animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.screen-detail { right: -8%; bottom: 9px; width: 58%; transform: rotateY(-5deg) translateZ(45px); animation: rise .9s .14s cubic-bezier(.2,.8,.2,1) both; }
.floating-chip { position: absolute; z-index: 5; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid rgba(90,188,255,.25); border-radius: 8px; color: #d8eaff; background: rgba(4,22,47,.88); box-shadow: 0 18px 40px rgba(0,0,0,.35); backdrop-filter: blur(12px); font-size: 11px; font-weight: 750; }
.floating-chip i { width: 6px; height: 6px; border-radius: 50%; background: #10c9ff; box-shadow: 0 0 12px #10c9ff; }
.chip-one { top: 22px; right: 8%; }
.chip-two { bottom: 7%; left: 29%; }
.hero-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; color: #607895; font: 650 9px/1 var(--font-geist-mono), monospace; letter-spacing: .14em; text-transform: uppercase; }
.hero-rule { width: 64px; height: 1px; background: var(--line); }
@keyframes rise { from { opacity: 0; transform: translateY(26px) rotateY(-7deg); } to { opacity: 1; } }

@media (max-width: 1050px) {
  .hero { min-height: 1080px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding-top: 150px; }
  .hero-content { max-width: 780px; }
  .hero-visual { width: min(900px, 94vw); height: 540px; }
  .screen-main { width: 85%; }
  .screen-detail { right: 0; }
  .hero-foot { grid-column: auto; }
}
@media (max-width: 760px) {
  .site-header { height: 78px; padding: 0 16px; }
  .brand { width: 170px; height: 58px; padding: 3px 8px; }
  .menu-button { display: flex; align-items: center; gap: 10px; padding: 10px 13px; color: #dceafa; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(10,29,55,.8); font-size: 12px; font-weight: 800; }
  .menu-button i { width: 14px; height: 8px; border-top: 1px solid; border-bottom: 1px solid; }
  .nav { display: none; position: absolute; top: 70px; left: 16px; right: 16px; padding: 16px; flex-direction: column; align-items: stretch; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3,16,37,.98); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
  .nav.nav-open { display: flex; }
  .nav a { padding: 11px 9px; }
  .nav .nav-cta { text-align: center; }
  .hero { min-height: 980px; padding: 130px 18px 36px; gap: 38px; }
  h1 { font-size: clamp(48px, 14.6vw, 69px); }
  .hero-copy { font-size: 17px; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); }
  .hero-proof li { min-width: 0; padding: 0 8px; gap: 6px; flex-direction: column; align-items: flex-start; }
  .hero-proof span { font-size: 10px; }
  .hero-visual { width: 100%; height: 315px; }
  .screen-bar { height: 20px; }
  .screen-main { top: 20px; left: -1%; width: 98%; transform: none; }
  .screen-detail { width: 62%; right: -8%; bottom: 0; transform: translateZ(20px); }
  .floating-chip { display: none; }
  .hero-foot { gap: 12px; flex-wrap: wrap; line-height: 1.4; }
  .hero-rule { width: 24px; }
}
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Full product story */
.section { position: relative; padding: 130px clamp(24px, 6vw, 118px); overflow: hidden; }
.section-kicker { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; color: #4abfe9; font: 800 10px/1 var(--font-geist-mono), monospace; letter-spacing: .18em; text-transform: uppercase; }
.section-kicker span { color: #7892ae; }
.section-heading { margin-bottom: 72px; }
.split-heading { display: grid; grid-template-columns: 1.1fr .66fr; gap: 8vw; align-items: end; }
.section h2 { margin: 0; color: #edf6ff; font-size: clamp(42px, 4.5vw, 72px); line-height: 1.02; letter-spacing: -.048em; }
.section h2 em { color: #22aff0; font-style: normal; }
.section-heading > p, .workflow-copy > p, .accountability-copy > p, .architecture-grid > div:first-child > p { margin: 0; color: #91a8c2; font-size: 17px; line-height: 1.75; }

.problem { color: #06152b; background: #f3f7fb; }
.problem::before { content: ""; position: absolute; top: -240px; right: -220px; width: 640px; height: 640px; border: 1px solid rgba(4,130,206,.1); border-radius: 50%; box-shadow: 0 0 0 80px rgba(4,130,206,.025), 0 0 0 160px rgba(4,130,206,.018); }
.problem .section-kicker { color: #087bb9; }
.problem .section-kicker span { color: #8090a3; }
.problem h2 { color: #06152b; }
.problem h2 em { color: #0788d0; }
.problem .section-heading > p { color: #556a82; }
.governance-map { position: relative; min-height: 650px; max-width: 1180px; margin: 0 auto; }
.source-card { position: absolute; z-index: 3; width: 235px; min-height: 84px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 18px 20px; border: 1px solid #d5e3ee; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 16px 45px rgba(20,48,77,.08); }
.source-card span { color: #0c2037; font-size: 14px; font-weight: 800; }
.source-card small { color: #8495a6; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.source-card-1 { top: 4%; left: 1%; }.source-card-2 { top: 0; left: 50%; transform: translateX(-50%); }.source-card-3 { top: 4%; right: 1%; }
.source-card-4 { right: 1%; bottom: 4%; }.source-card-5 { bottom: 0; left: 50%; transform: translateX(-50%); }.source-card-6 { bottom: 4%; left: 1%; }
.governance-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.governance-lines > path { fill: none; stroke: #73bddd; stroke-width: 1.4; stroke-dasharray: 5 6; marker-end: url(#vexa-arrow); }
.governance-lines marker path { fill: #0b9ed9; stroke: none; }
.vexa-core { position: absolute; z-index: 2; top: 50%; left: 50%; width: 330px; aspect-ratio: 1; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #cfe2ef; border-radius: 50%; background: radial-gradient(circle, #fff 38%, #edf7fc 70%); box-shadow: 0 30px 80px rgba(18,111,172,.2); transform: translate(-50%, -50%); }
.vexa-core img { width: 190px; padding: 7px 10px; border-radius: 8px; background: #fff; }
.vexa-core strong { margin-top: 22px; color: #071a32; font-size: 17px; }
.vexa-core p { margin: 9px 0 0; color: #637b91; font-size: 11px; line-height: 1.7; text-align: center; }
.core-orbit { position: absolute; inset: 26px; border: 1px solid rgba(3,157,224,.17); border-radius: 50%; }
.orbit-two { inset: 57px; border-style: dashed; }
.separation-note { margin: 40px auto 0; display: flex; align-items: center; justify-content: center; gap: 23px; color: #526a81; font-size: 13px; font-weight: 750; }
.separation-note b { color: #0b91d2; font-size: 24px; }

.lifecycle { background: radial-gradient(circle at 80% 0%, rgba(8,112,194,.13), transparent 32%), #030d1f; }
.lifecycle-track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding-top: 16px; }
.lifecycle-track::before { content: ""; position: absolute; top: 50px; left: 4%; right: 4%; height: 2px; background: linear-gradient(90deg, #149ddc, #f1a422 32%, #7d68d4 53%, #36b378 70%, #e95d61 86%, #8190a1); opacity: .7; }
.life-state { position: relative; z-index: 2; min-height: 210px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.life-state > span { color: #6e829b; font: 700 9px var(--font-geist-mono), monospace; }
.life-state > i { width: 20px; height: 20px; margin: 22px 0 29px; border: 6px solid #071a31; border-radius: 50%; background: #1fb5f1; box-shadow: 0 0 0 1px rgba(86,190,237,.4), 0 0 25px rgba(22,170,236,.35); }
.life-state strong { color: #edf6ff; font-size: 15px; }
.life-state small { max-width: 130px; margin-top: 9px; color: #71879f; font-size: 10px; line-height: 1.45; }
.state-2 > i { background: #e79b2a; }.state-3 > i { background: #816bd2; }.state-4 > i { background: #31a96d; }.state-5 > i { background: #e6545b; }.state-6 > i { background: #8290a2; }
.outcomes { width: min(720px, 100%); margin: 24px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.outcomes > div { display: flex; align-items: center; gap: 16px; padding: 16px 19px; border: 1px solid var(--line); border-radius: 9px; background: rgba(10,30,57,.55); }
.outcomes b { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #9b3569; font: 800 11px var(--font-geist-mono), monospace; }
.outcomes > div:last-child b { background: #6758ba; }
.outcomes span { display: flex; flex-direction: column; gap: 4px; }
.outcomes strong { font-size: 13px; }.outcomes small { color: #71879d; font-size: 10px; }

.workflow { background: linear-gradient(140deg, #06172f, #061329 55%, #071d37); }
.workflow-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; align-items: start; }
.workflow-copy { position: sticky; top: 40px; }
.workflow-copy > p { margin-top: 31px; }
.workflow-route { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #a8bed3; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.workflow-route span { padding: 9px 11px; border: 1px solid var(--line); border-radius: 5px; background: rgba(9,33,63,.65); }
.workflow-route i { color: #13baf1; font-style: normal; }
.workflow-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.workflow-bento article { min-height: 240px; padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(15,42,74,.84), rgba(6,25,52,.74)); }
.workflow-bento article > span { color: #4abbe8; font: 750 9px var(--font-geist-mono), monospace; letter-spacing: .12em; text-transform: uppercase; }
.workflow-bento h3 { margin: 25px 0 12px; color: #f1f7ff; font-size: 23px; line-height: 1.12; letter-spacing: -.025em; }
.workflow-bento p { margin: 0; color: #8098b2; font-size: 13px; line-height: 1.65; }
.workflow-bento .bento-wide { grid-column: 1 / -1; min-height: 270px; background: linear-gradient(125deg, rgba(14,72,116,.72), rgba(8,30,60,.72)); }
.workflow-bento .bento-wide h3 { font-size: 34px; }
.workflow-bento .bento-accent { grid-column: 1 / -1; min-height: 210px; border-color: rgba(39,178,235,.35); }
.mini-steps { display: flex; gap: 7px; margin-top: 30px; }
.mini-steps i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); }
.mini-steps i.on { background: #19b7ee; box-shadow: 0 0 14px rgba(25,183,238,.5); }

.access { color: #07182d; background: #f5f8fb; }
.access h2 { color: #07182d; }.access .section-heading > p { color: #587088; }.access .section-kicker { color: #0879b4; }
.access-chain { display: grid; grid-template-columns: repeat(5, 1fr); padding: 36px; border: 1px solid #dce7f0; border-radius: 16px; background: #fff; box-shadow: 0 24px 65px rgba(13,42,72,.06); }
.access-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.access-node b { width: 54px; height: 54px; display: grid; place-items: center; color: #078acb; border: 1px solid #b9def0; border-radius: 50%; background: #eef9fd; font: 800 15px var(--font-geist-mono), monospace; }
.access-node span { color: #142941; font-size: 13px; font-weight: 800; }
.access-node i { position: absolute; right: -7px; top: 18px; color: #9fb1c1; font-style: normal; }
.role-cloud { margin-top: 17px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.role-cloud span { min-height: 70px; padding: 16px; display: flex; align-items: center; justify-content: center; color: #21374f; border: 1px solid #dce6ef; border-radius: 9px; background: #fff; font-size: 12px; font-weight: 800; text-align: center; }
.role-cloud b { color: #91a5b6; font: 700 8px var(--font-geist-mono), monospace; }

.accountability { background: #031023; }
.accountability-grid { display: grid; grid-template-columns: 1.15fr .75fr; gap: 7vw; align-items: center; }
.image-frame { overflow: hidden; border: 1px solid rgba(114,184,233,.22); border-radius: 14px; background: #eff5fa; box-shadow: 0 35px 95px rgba(0,0,0,.4); }
.image-frame img { display: block; width: 100%; }
.frame-label { height: 42px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: #5b6f83; background: #fff; border-bottom: 1px solid #dce6ee; font-size: 11px; font-weight: 800; }
.frame-label i { color: #8798a9; font-style: normal; font-weight: 500; }
.accountability-copy > p { margin-top: 28px; }
.signal-list { list-style: none; padding: 0; margin: 34px 0 0; }
.signal-list li { display: grid; grid-template-columns: 33px 1fr; gap: 13px; padding: 15px 0; border-top: 1px solid var(--line); }
.signal-list b { color: #24b5ed; font: 700 9px var(--font-geist-mono), monospace; }
.signal-list span { display: flex; flex-direction: column; gap: 4px; color: #728aa3; font-size: 11px; }
.signal-list strong { color: #e3effa; font-size: 13px; }

.product { color: #07162a; background: #f4f7fa; }
.product h2 { color: #07162a; }.product .section-heading > p { color: #566b82; }.product .section-kicker { color: #0a7fb7; }
.product-viewer { display: grid; grid-template-columns: 230px 1fr; gap: 14px; }
.product-tabs { display: flex; flex-direction: column; gap: 6px; }
.product-tabs button { min-height: 51px; padding: 0 15px; display: flex; align-items: center; gap: 12px; color: #61778c; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; text-align: left; transition: .2s ease; }
.product-tabs button b { color: #9babb9; font: 700 8px var(--font-geist-mono), monospace; }
.product-tabs button:hover, .product-tabs button.active { color: #07203a; border-color: #cfe1ed; background: #fff; box-shadow: 0 12px 35px rgba(20,51,81,.07); transform: translateX(3px); }
.product-tabs button.active b { color: #008fd5; }
.product-screen { overflow: hidden; border: 1px solid #ccdce8; border-radius: 13px; background: #fff; box-shadow: 0 35px 90px rgba(18,49,80,.14); }
.product-screen img { display: block; width: 100%; aspect-ratio: 1903 / 901; object-fit: cover; object-position: top left; }
.export-note { margin: 34px 0 0 244px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #667c90; font-size: 11px; }
.export-note > span { font-weight: 800; }.export-note div { display: flex; gap: 7px; }
.export-note b { padding: 7px 10px; color: #176a98; border: 1px solid #cee2ee; border-radius: 5px; background: #fff; font-size: 9px; }
.export-note small { color: #8798a8; }

.health { background: radial-gradient(circle at 50% 50%, rgba(5,115,187,.13), transparent 31%), #020c1d; }
.health-console { max-width: 1260px; min-height: 600px; margin: 0 auto; display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; border: 1px solid rgba(101,177,230,.16); border-radius: 18px; background: linear-gradient(140deg, rgba(8,31,61,.76), rgba(4,18,40,.7)); overflow: hidden; }
.health-center { min-height: 100%; display: grid; place-items: center; border-right: 1px solid var(--line); background-image: radial-gradient(circle, rgba(40,164,226,.05) 1px, transparent 1px); background-size: 22px 22px; }
.health-ring { position: relative; width: 290px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(46,177,234,.3); border-radius: 50%; box-shadow: inset 0 0 80px rgba(9,134,200,.08), 0 0 0 30px rgba(18,130,197,.025), 0 0 0 60px rgba(18,130,197,.018); }
.health-ring::before { content: ""; position: absolute; inset: 20px; border: 1px dashed rgba(68,188,237,.22); border-radius: 50%; animation: rotate 22s linear infinite; }
.health-ring > span { display: flex; align-items: center; gap: 8px; color: #38c8fb; font: 800 10px var(--font-geist-mono), monospace; letter-spacing: .16em; }
.health-ring > span i { width: 7px; height: 7px; border-radius: 50%; background: #29d18b; box-shadow: 0 0 15px #29d18b; }
.health-ring strong { margin-top: 10px; font-size: 43px; letter-spacing: -.05em; }.health-ring small { margin-top: 8px; color: #6e87a1; font-size: 10px; }
@keyframes rotate { to { transform: rotate(360deg); } }
.health-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 34px; }
.health-metrics > div { min-height: 105px; display: grid; grid-template-columns: 1fr 10px; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.health-metrics > div:nth-child(odd) { border-right: 1px solid var(--line); }
.health-metrics > div:nth-last-child(-n+2) { border-bottom: 0; }
.health-metrics b { color: #58728e; font: 700 9px var(--font-geist-mono), monospace; }
.health-metrics span { display: flex; flex-direction: column; gap: 6px; }.health-metrics strong { font-size: 13px; }.health-metrics small { color: #68819a; font-size: 9px; }
.health-metrics > div > i { width: 7px; height: 7px; border-radius: 50%; background: #2bc48a; box-shadow: 0 0 13px rgba(43,196,138,.7); }

.architecture { color: #07162a; background: #f4f7fa; }
.architecture .section-kicker { color: #087bad; }.architecture h2 { color: #07162a; }.architecture-grid > div:first-child > p { margin-top: 27px; color: #576e85; }
.architecture-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; }
.architecture-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.architecture-cards article { min-height: 180px; padding: 27px; border: 1px solid #d9e4ed; border-radius: 11px; background: #fff; }
.architecture-cards h3 { margin: 0 0 12px; color: #102942; font-size: 19px; }.architecture-cards p { margin: 0; color: #718497; font-size: 11px; line-height: 1.6; }
.deployment-strip { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #d9e5ee; border-radius: 10px; overflow: hidden; background: #fff; }
.deployment-strip span { min-height: 72px; padding: 18px; display: flex; align-items: center; gap: 10px; color: #31485f; border-right: 1px solid #e1eaf1; border-bottom: 1px solid #e1eaf1; font-size: 10px; font-weight: 750; }
.deployment-strip i { width: 6px; height: 6px; border-radius: 50%; background: #0a9ed8; }

.clarification { text-align: center; background: #031022; }
.clarification .section-kicker { justify-content: center; }.clarification > h2 { max-width: 1040px; margin: 0 auto 70px; }
.clarification-grid { max-width: 1110px; margin: auto; display: grid; grid-template-columns: 1fr 90px 1fr; align-items: stretch; }
.clarification-grid article { padding: 43px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(10,34,63,.82), rgba(5,20,44,.65)); }
.clarification-grid article > span { color: #6e87a0; font: 750 9px var(--font-geist-mono), monospace; letter-spacing: .12em; text-transform: uppercase; }
.clarification-grid strong { display: block; margin: 28px 0 14px; color: #edf5ff; font-size: 24px; line-height: 1.2; }.clarification-grid p { margin: 0; color: #7d95ad; font-size: 12px; line-height: 1.7; }
.clarification-grid .clarification-vexa { border-color: rgba(37,180,236,.36); background: linear-gradient(145deg, rgba(7,64,99,.82), rgba(6,26,53,.72)); }
.clarification-mark { display: grid; place-items: center; }.clarification-mark i { width: 42px; height: 42px; display: grid; place-items: center; color: #41c2f3; border: 1px solid rgba(60,186,235,.35); border-radius: 50%; font-style: normal; font-size: 20px; }
.partner-note { margin: 30px 0 0; color: #526b83; font-size: 10px; }

.cta { min-height: 650px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; isolation: isolate; background: radial-gradient(circle at 50% 30%, rgba(11,126,206,.23), transparent 34%), #020c1d; }
.cta-grid { position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(rgba(60,148,207,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(60,148,207,.07) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(circle, #000, transparent 72%); }
.cta .section-kicker { margin-bottom: 30px; }.cta h2 { font-size: clamp(52px, 6vw, 92px); }.cta > p { margin: 27px 0 32px; color: #8ca2b9; font-size: 16px; }.cta > small { margin-top: 20px; color: #526b82; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.cta .button { min-width: 250px; }
.vexa-contact { color: #07162a; background: radial-gradient(circle at 12% 10%, rgba(14,151,219,.09), transparent 28%), #eef4f8; }
.vexa-contact-grid { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(45px, 7vw, 100px); align-items: start; }
.vexa-contact .section-kicker { color: #087caf; }.vexa-contact h2 { color: #07162a; }.vexa-contact h2 em { color: #078bd0; }
.vexa-contact-copy > p { max-width: 520px; margin: 28px 0 0; color: #586f86; font-size: 16px; line-height: 1.75; }
.vexa-contact-form { padding: clamp(25px, 4vw, 43px); border: 1px solid rgba(75,165,221,.22); border-radius: 18px; background: linear-gradient(145deg, #071c37, #041329); box-shadow: 0 35px 90px rgba(18,49,80,.18); }
.vexa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field-full { grid-column: 1 / -1; }
.vexa-contact-form label { margin-bottom: 7px; color: #dceafb; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.vexa-contact-form input, .vexa-contact-form textarea, .vexa-contact-form select { width: 100%; padding: 13px 14px; color: #eef7ff; border: 1px solid #274766; border-radius: 9px; background: #06152a; font: inherit; }
.vexa-contact-form textarea { min-height: 145px; resize: vertical; }.vexa-contact-form option { color: #07162a; background: #fff; }
.vexa-contact-form small { display: block; margin-top: 7px; color: #8095ad; font-size: 10px; line-height: 1.5; }
.vexa-contact-form .button { width: 100%; border: 0; }
.vexa-contact-form .form-status { margin-bottom: 20px; padding: 13px 15px; color: #fff; border-radius: 9px; font-size: 13px; }.vexa-contact-form .form-status.success { background: #0d684f; }.vexa-contact-form .form-status.error { background: #7d2d40; }
.site-footer { min-height: 145px; padding: 30px clamp(24px, 6vw, 118px); display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #5f7891; border-top: 1px solid var(--line); background: #020b1b; font-size: 10px; }
.site-footer img { width: 170px; filter: brightness(0) invert(1); opacity: .84; }.site-footer a { color: #32b4ec; font-weight: 750; }

@media (max-width: 1050px) {
  .split-heading, .workflow-grid, .accountability-grid, .architecture-grid { grid-template-columns: 1fr; gap: 36px; }
  .section-heading { margin-bottom: 54px; }.section-heading > p { max-width: 700px; }
  .workflow-copy { position: static; }.workflow-bento { margin-top: 20px; }
  .accountability-copy { max-width: 780px; }.audit-preview { order: 2; }
  .product-viewer { grid-template-columns: 1fr; }.product-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 8px; }.product-tabs button { flex: 0 0 auto; }.export-note { margin-left: 0; }
  .health-console { grid-template-columns: 1fr; }.health-center { min-height: 430px; border-right: 0; border-bottom: 1px solid var(--line); }
  .architecture-cards { margin-top: 20px; }.vexa-contact-grid { grid-template-columns: 1fr; }.vexa-contact-copy { max-width: 760px; }
}

@media (max-width: 900px) {
  .site-header { height: 78px; padding: 0 16px; }.brand { width: 170px; height: 58px; padding: 3px 8px; }
  .menu-button { display: flex; align-items: center; gap: 10px; padding: 10px 13px; color: #dceafa; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(10,29,55,.8); font-size: 12px; font-weight: 800; }
  .menu-button i { width: 14px; height: 8px; border-top: 1px solid; border-bottom: 1px solid; }
  .nav { display: none; position: absolute; top: 70px; left: 16px; right: 16px; padding: 16px; flex-direction: column; align-items: stretch; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3,16,37,.98); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
  .nav.nav-open { display: flex; }.nav a { padding: 11px 9px; }.nav .nav-cta { text-align: center; }
  .governance-map { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .governance-lines { display: none; }.source-card { position: static; width: auto; min-height: 78px; transform: none; }
  .vexa-core { position: relative; top: auto; left: auto; grid-column: 1 / -1; grid-row: 1; width: 300px; margin: 10px auto 35px; transform: none; }
}

@media (max-width: 760px) {
  .section { padding: 88px 18px; }.section-kicker { margin-bottom: 25px; }.section h2 { font-size: 41px; }
  .section-heading { margin-bottom: 42px; }.split-heading { gap: 24px; }.section-heading > p, .workflow-copy > p, .accountability-copy > p, .architecture-grid > div:first-child > p { font-size: 15px; }
  .governance-map { grid-template-columns: 1fr; }.vexa-core { grid-column: 1; width: 270px; }.source-card { min-height: 72px; }.separation-note { gap: 11px; font-size: 10px; }
  .lifecycle-track { grid-template-columns: 1fr 1fr; gap: 24px 8px; }.lifecycle-track::before { display: none; }.life-state { min-height: 150px; padding: 20px 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(9,29,55,.5); }.life-state > i { margin: 13px 0 16px; }.outcomes { grid-template-columns: 1fr; }
  .workflow-bento { grid-template-columns: 1fr; }.workflow-bento article, .workflow-bento .bento-wide, .workflow-bento .bento-accent { grid-column: auto; min-height: 220px; padding: 24px; }.workflow-bento .bento-wide h3 { font-size: 27px; }.workflow-route { gap: 6px; }
  .access-chain { grid-template-columns: 1fr; gap: 18px; padding: 24px; }.access-node { flex-direction: row; }.access-node b { width: 42px; height: 42px; }.access-node i { right: 17px; top: 13px; transform: rotate(90deg); }.role-cloud { grid-template-columns: 1fr 1fr; }
  .frame-label i { display: none; }.audit-preview img { width: 170%; max-width: none; }
  .product-tabs { margin: 0 -18px; padding: 0 18px 10px; }.product-screen { margin: 0 -10px; border-radius: 8px; }.product-screen img { min-height: 310px; width: auto; max-width: none; }.export-note { align-items: flex-start; flex-direction: column; }.export-note div { flex-wrap: wrap; }
  .health-console { min-height: 0; }.health-center { min-height: 370px; }.health-ring { width: 230px; }.health-metrics { grid-template-columns: 1fr; padding: 18px; }.health-metrics > div, .health-metrics > div:nth-child(odd), .health-metrics > div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line); }.health-metrics > div:last-child { border-bottom: 0; }
  .architecture-cards { grid-template-columns: 1fr; }.deployment-strip { grid-template-columns: 1fr; margin-top: 45px; }.deployment-strip span { border-right: 0; }
  .clarification-grid { grid-template-columns: 1fr; gap: 15px; }.clarification-grid article { padding: 29px; }.clarification-mark { height: 60px; }.clarification > h2 { margin-bottom: 45px; }
  .cta { min-height: 600px; }.cta h2 { font-size: 50px; }.vexa-form-grid { grid-template-columns: 1fr; }.vexa-contact-form { padding: 24px 18px; }.site-footer { padding: 35px 18px; flex-direction: column; text-align: center; }.site-footer img { width: 150px; }
}