:root {
  --navy: #061321;
  --navy-2: #0a1d31;
  --navy-3: #102942;
  --blue: #65b9ed;
  --white: #f7fbff;
  --muted: #93a8ba;
  --line: rgba(247, 251, 255, .17);
  --page: min(1280px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 116px; }
body { margin: 0; color: var(--white); background: var(--navy); font-family: "Aptos", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.5; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: 20px; padding: 12px 16px; color: var(--navy); background: var(--blue); font-weight: 800; }
.skip-link:focus { top: 20px; }

.site-header { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 116px; display: flex; align-items: center; justify-content: space-between; padding-inline: max(32px, calc((100vw - 1280px) / 2)); border-bottom: 1px solid rgba(247,251,255,.2); background: rgba(6,19,33,.92); box-shadow: 0 12px 38px rgba(0,0,0,.14); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; }
.brand-icon { width: 66px; height: 66px; object-fit: contain; filter: brightness(0) invert(1); }
.wordmark { width: 174px; display: flex; flex-direction: column; line-height: .82; }
.wordmark strong, .wordmark small { display: flex; justify-content: space-between; width: 100%; }
.wordmark strong { font-family: Didot, "Bodoni MT", "Times New Roman", serif; font-size: 2.25rem; font-weight: 500; letter-spacing: 0; }
.wordmark small { margin-top: 12px; font-size: .61rem; font-weight: 750; line-height: 1; }
.wordmark strong span, .wordmark small span { display: block; }
.site-nav { display: flex; gap: 38px; align-items: center; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; }
.site-nav a:hover, .site-nav a:focus-visible { color: white; }
.menu-button { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.menu-button span { display: block; height: 2px; margin: 5px 0; background: white; }

.hero { position: relative; min-height: 760px; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .85fr); gap: clamp(60px, 8vw, 130px); align-items: center; width: var(--page); margin-inline: auto; padding-top: 116px; }
.hero-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(101,185,237,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(101,185,237,.1) 1px, transparent 1px); background-size: 86px 86px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
.eyebrow { margin: 0 0 27px; color: var(--blue); font-size: .72rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(4.2rem, 7.2vw, 7.6rem); line-height: .86; letter-spacing: -.064em; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1.5px rgba(247,251,255,.78); }
.hero-copy { max-width: 660px; margin: 34px 0; color: #c1cfda; font-size: clamp(1.05rem, 1.55vw, 1.25rem); }
.primary-link { display: inline-flex; gap: 55px; align-items: center; padding: 15px 19px; color: var(--navy); background: var(--blue); text-decoration: none; font-size: .82rem; font-weight: 850; }
.primary-link:hover, .primary-link:focus-visible { background: white; }

.capability-reel { position: relative; min-width: 0; border: 1px solid rgba(101,185,237,.38); background: rgba(6,19,33,.82); box-shadow: 0 35px 90px rgba(0,0,0,.35); }
.reel-topbar, .reel-footer { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 18px; color: #8fa7ba; font: 700 .62rem/1 Consolas, monospace; letter-spacing: .12em; }
.reel-topbar { border-bottom: 1px solid var(--line); }
.reel-topbar i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 18px var(--blue); }
.reel-footer { border-top: 1px solid var(--line); }
.reel-window { height: 430px; overflow: hidden; }
.reel-track { height: 300%; animation: reel 12s steps(1, end) infinite; }
.reel-slide { position: relative; height: 33.3333%; padding: 26px; overflow: hidden; background: linear-gradient(145deg, rgba(101,185,237,.06), transparent 55%); }
.slide-label { display: flex; gap: 14px; align-items: center; color: white; font: 800 .72rem/1 Consolas, monospace; letter-spacing: .13em; }
.slide-label span { color: var(--blue); }
.decision-map { position: relative; height: 250px; margin-top: 28px; border: 1px solid rgba(255,255,255,.08); background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 38px 38px; }
.node { position: absolute; width: 17px; height: 17px; border: 3px solid var(--navy-2); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 0 20px rgba(101,185,237,.5); }
.n1 { left: 12%; top: 58%; } .n2 { left: 34%; top: 24%; } .n3 { left: 54%; top: 61%; } .n4 { left: 73%; top: 31%; } .n5 { right: 8%; top: 67%; background: white; }
.link { position: absolute; height: 1px; background: rgba(101,185,237,.75); transform-origin: left center; }
.l1 { width: 30%; left: 14%; top: 59%; transform: rotate(-30deg); } .l2 { width: 29%; left: 36%; top: 27%; transform: rotate(40deg); } .l3 { width: 26%; left: 56%; top: 63%; transform: rotate(-34deg); } .l4 { width: 22%; left: 75%; top: 34%; transform: rotate(49deg); }
.metric-row { display: grid; grid-template-columns: 1fr 1.7fr .65fr; gap: 9px; margin-top: 17px; }
.metric-row span { height: 5px; background: var(--blue); } .metric-row span:nth-child(2) { opacity: .42; } .metric-row span:nth-child(3) { background: white; }
.pipeline { height: 200px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.pipeline div { height: 104px; display: grid; place-items: center; border: 1px solid rgba(101,185,237,.35); background: rgba(101,185,237,.06); }
.pipeline b { font: 750 .62rem Consolas, monospace; letter-spacing: .08em; }
.pipeline i { width: 18px; height: 18px; border: 1px solid var(--blue); transform: rotate(45deg); }
.pipeline em { color: var(--blue); font-style: normal; }
.signal-lines { display: grid; gap: 11px; }
.signal-lines span { display: block; height: 5px; background: linear-gradient(90deg, var(--blue) 0 68%, rgba(101,185,237,.1) 68%); }
.signal-lines span:nth-child(2) { background: linear-gradient(90deg, white 0 44%, rgba(255,255,255,.08) 44%); }
.signal-lines span:nth-child(3) { background: linear-gradient(90deg, var(--blue) 0 81%, rgba(101,185,237,.1) 81%); }
.signal-lines span:nth-child(4) { background: linear-gradient(90deg, var(--blue) 0 55%, rgba(101,185,237,.1) 55%); }
.prototype-ui { height: 268px; display: grid; grid-template-columns: 70px 1fr; margin-top: 28px; border: 1px solid rgba(255,255,255,.1); }
.prototype-ui aside { padding: 16px; border-right: 1px solid rgba(255,255,255,.1); }
.prototype-ui aside i { display: block; width: 28px; height: 5px; margin-bottom: 17px; background: rgba(101,185,237,.55); }
.prototype-ui section { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; padding: 18px; }
.prototype-ui section span { min-height: 90px; border: 1px solid rgba(101,185,237,.25); background: linear-gradient(145deg, rgba(101,185,237,.19), rgba(101,185,237,.02)); }
.prototype-ui section span:first-child { grid-row: span 2; }
.build-status { margin-top: 16px; color: #aec2d2; font: 700 .62rem Consolas, monospace; letter-spacing: .08em; }
.build-status i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--blue); }
@keyframes reel { 0%, 31% { transform: translateY(0); } 33%, 64% { transform: translateY(-33.3333%); } 66%, 97% { transform: translateY(-66.6666%); } 100% { transform: translateY(0); } }
.capability-reel:hover .reel-track { animation-play-state: paused; }

.paths { padding: 80px max(32px, calc((100vw - 1280px) / 2)); border-top: 1px solid var(--line); background: var(--navy-2); }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.path-card { position: relative; min-height: 490px; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; border: 1px solid rgba(247,251,255,.2); background: linear-gradient(150deg, rgba(25,59,88,.92), rgba(11,30,49,.98)); box-shadow: 0 22px 60px rgba(0,0,0,.18); text-decoration: none; overflow: hidden; transition: transform .2s, background .2s, color .2s; }
.path-card::before { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.path-card:hover, .path-card:focus-visible { color: var(--navy); background: var(--blue); transform: translateY(-7px); }
.path-card:hover::before, .path-card:focus-visible::before { transform: scaleX(1); }
.path-number { color: var(--blue); font: 700 .73rem Consolas, monospace; }
.path-card:hover .path-number, .path-card:focus-visible .path-number { color: var(--navy); }
.path-card p { max-width: 285px; margin: 24px 0 0; color: #afc2d1; font-size: 1rem; font-weight: 550; line-height: 1.45; }
.path-card:hover p, .path-card:focus-visible p { color: rgba(6,19,33,.68); }
.path-card h3 { max-width: 370px; margin: 0; font-size: clamp(2.55rem, 3.25vw, 3.8rem); line-height: .96; letter-spacing: -.05em; }
.path-arrow { position: absolute; right: 28px; top: 26px; font-size: 1.4rem; }

.contact { width: var(--page); margin-inline: auto; padding: 135px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(70px, 9vw, 140px); align-items: start; }
.contact h2 { margin: 0; font-size: clamp(3.5rem, 6vw, 6.8rem); line-height: .88; letter-spacing: -.065em; }
.contact-lines { margin-top: 60px; border-top: 1px solid var(--line); }
.contact-lines > * { display: block; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.contact-lines span, .contact-lines strong { display: block; }
.contact-lines span { margin-bottom: 7px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.contact-lines strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.contact-lines a:hover strong, .contact-lines a:focus-visible strong { color: var(--blue); }
.message-form { display: grid; gap: 27px; padding: 38px; border: 1px solid rgba(247,251,255,.2); background: var(--navy-2); box-shadow: 0 28px 70px rgba(0,0,0,.17); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.message-form label, .message-form label > span { display: block; }
.message-form label > span { margin-bottom: 9px; color: #afc2d1; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.message-form label i { color: #70879a; font-style: normal; }
.message-form input, .message-form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(247,251,255,.25); border-radius: 0; padding: 12px 0; color: white; background: transparent; font: inherit; outline: 0; }
.message-form textarea { min-height: 145px; resize: vertical; }
.message-form input:focus, .message-form textarea:focus { border-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.form-action { display: flex; align-items: center; gap: 24px; }
.form-action button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 32px; padding: 16px 20px; border: 0; color: var(--navy); background: var(--blue); font-family: inherit; font-size: .78rem; font-weight: 850; line-height: 1; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.form-action button:hover, .form-action button:focus-visible { background: white; }
.form-action p { margin: 0; color: var(--muted); font-size: .72rem; }

.agent { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(70px, 9vw, 140px); align-items: center; padding: 130px max(32px, calc((100vw - 1280px) / 2)); border-top: 1px solid var(--line); background: var(--navy-2); }
.agent h2 { margin: 0; font-size: clamp(3.5rem, 6vw, 6.8rem); line-height: .88; letter-spacing: -.065em; }
.agent-copy > p:last-child { max-width: 510px; margin: 32px 0 0; color: #b7c8d5; font-size: 1.08rem; }
.agent-console { border: 1px solid rgba(101,185,237,.38); background: rgba(6,19,33,.82); box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.agent-bar { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); color: #8fa7ba; font: 700 .65rem/1 Consolas, monospace; letter-spacing: .13em; }
.agent-bar i, .agent-status i { width: 7px; height: 7px; border-radius: 50%; background: #f0b962; }
.agent-thread { min-height: 305px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 34px; }
.agent-thread p { margin: 0 0 22px; color: #d7e2ea; }
.agent-thread p span { margin-right: 14px; color: var(--blue); font: 750 .67rem Consolas, monospace; letter-spacing: .1em; }
.agent-thread button { padding: 12px 15px; border: 1px solid rgba(101,185,237,.25); color: #93a8ba; background: rgba(101,185,237,.05); font: inherit; font-size: .84rem; text-align: left; opacity: 1; }
.agent-input { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--line); }
.agent-input input { min-width: 0; padding: 21px; border: 0; color: white; background: transparent; font: inherit; }
.agent-input button { width: 86px; border: 0; color: #62798b; background: rgba(101,185,237,.08); font-family: inherit; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.agent-status { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); color: #8096a8; font: 700 .63rem/1.4 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.agent-status i { display: inline-block; flex: 0 0 auto; }

.site-footer { min-height: 150px; width: var(--page); margin-inline: auto; display: grid; grid-template-columns: 1fr auto auto; gap: 48px; align-items: center; border-top: 1px solid var(--line); }
.site-footer .brand-icon { width: 44px; height: 44px; }
.site-footer .wordmark { width: 125px; }
.site-footer .wordmark strong { font-size: 1.58rem; }
.site-footer .wordmark small { margin-top: 9px; font-size: .45rem; }
.site-footer p, .site-footer > a:last-child { color: var(--muted); font-size: .72rem; }
.site-footer > a:last-child { text-decoration: none; }
:focus-visible { outline: 3px solid white; outline-offset: 4px; }

@media (max-width: 960px) {
  :root { --page: min(100% - 36px, 740px); }
  .hero { height: auto; min-height: 0; grid-template-columns: 1fr; gap: 70px; padding: 180px 0 100px; }
  .capability-reel { max-width: 680px; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card { min-height: 330px; }
  .contact { min-height: 0; grid-template-columns: 1fr; gap: 70px; }
  .agent { grid-template-columns: 1fr; gap: 70px; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 94px; }
  :root { --page: calc(100% - 32px); }
  .site-header { height: 94px; padding-inline: 16px; }
  .brand-icon { width: 48px; height: 48px; }
  .wordmark { width: 125px; }
  .wordmark strong { font-size: 1.6rem; }
  .wordmark small { margin-top: 9px; font-size: .46rem; }
  .menu-button { display: block; }
  .site-nav { position: absolute; top: 94px; left: 0; right: 0; display: none; padding: 18px; border: 1px solid var(--line); background: var(--navy); }
  .site-nav.is-open { display: grid; gap: 18px; }
  .hero { padding-top: 150px; }
  .hero h1 { font-size: clamp(3.6rem, 17vw, 5rem); }
  .reel-window { height: 340px; }
  .decision-map { height: 185px; }
  .pipeline { height: 160px; gap: 6px; }
  .pipeline div { height: 88px; }
  .prototype-ui { height: 195px; grid-template-columns: 52px 1fr; }
  .prototype-ui section { gap: 8px; padding: 10px; }
  .prototype-ui section span { min-height: 68px; }
  .reel-footer span:nth-child(2) { display: none; }
  .paths { padding: 90px 16px; }
  .path-card { min-height: 360px; padding: 24px; }
  .path-card h3 { font-size: 2.65rem; }
  .contact { padding: 100px 0; }
  .contact h2 { font-size: 4rem; }
  .message-form { padding: 25px 20px; }
  .field-pair { grid-template-columns: 1fr; }
  .form-action { align-items: flex-start; flex-direction: column; }
  .agent { padding: 100px 16px; }
  .agent h2 { font-size: 4rem; }
  .agent-thread { padding: 26px 20px; }
  .site-footer { min-height: 230px; grid-template-columns: 1fr; gap: 18px; padding: 45px 0; }
}

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