:root {
  --font-geist-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'JetBrains Mono', monospace;
}

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-geist-sans);
}

.page {
  --night: #0d2a47;
  --night-2: #163b63;
  --paper: #edf6fb;
  --ink: #102c45;
  --lime: #b9f4ff;
  --blue: #2859ff;
  --muted: #5a6f7f;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-geist-sans);
}

.page * { box-sizing: border-box; }
.page a { color: inherit; text-decoration: none; }
.page button { font-family: inherit; }
.skipLink { position: fixed; z-index: 100; left: 16px; top: 12px; padding: 11px 15px; transform: translateY(-150%); background: #fff; color: var(--night); font-size: 14px; font-weight: 750; box-shadow: 0 8px 25px rgba(0,0,0,.25); }
.skipLink:focus { transform: translateY(0); }

.header {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  height: 76px;
  padding: 0 clamp(22px, 5vw, 76px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(16, 44, 69, .13);
  color: var(--ink);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
}

.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; font-size: 19px; font-weight: 720; letter-spacing: -.035em; }
.brandMark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; font-weight: 850; }
.nav { display: flex; gap: 30px; color: #5b7183; font-size: 14px; }
.nav a { transition: color .2s ease; }
.nav a:hover { color: var(--ink); }
.headerButton {
  justify-self: end;
  min-height: 41px;
  padding: 0 17px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.hero {
  min-height: 800px;
  padding: 130px clamp(22px, 5vw, 76px) 64px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: clamp(42px, 6vw, 100px);
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(40,89,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,89,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 75% 40%, rgba(185,244,255,.7), transparent 32%),
    #f7fbfd;
  background-size: 62px 62px, 62px 62px, auto, auto;
  color: var(--ink);
}

.heroCopy { position: relative; z-index: 2; max-width: 650px; }
.eyebrow, .kicker, .kickerLight { margin: 0 0 20px; font-size: 13px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { color: var(--blue); }
.eyebrow span { width: 7px; height: 7px; margin-right: 8px; display: inline-block; border-radius: 50%; background: var(--blue); box-shadow: 0 0 15px rgba(40,89,255,.45); }
.hero h1 { max-width: 640px; margin: 0; font-size: clamp(45px, 5.35vw, 76px); font-weight: 640; line-height: .99; letter-spacing: -.058em; }
.hero h1 em { color: var(--blue); font-style: normal; }
.lede { max-width: 590px; margin: 26px 0 0; color: var(--muted); font-size: 19px; line-height: 1.55; }
.heroActions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 11px; }
.primaryAction, .secondaryAction, .darkAction {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.page .primaryAction { gap: 28px; background: var(--blue); color: #fff; }
.secondaryAction { border-color: rgba(16,44,69,.34); background: #fff; color: var(--ink); }
.primaryAction:hover, .secondaryAction:hover, .darkAction:hover { transform: translateY(-2px); }
.heritage { max-width: 480px; margin-top: 38px; padding-top: 24px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; border-top: 1px solid rgba(16,44,69,.16); }
.heritage strong { color: var(--blue); font-size: 25px; letter-spacing: -.04em; }
.heritage span { color: var(--muted); font-size: 14px; line-height: 1.45; }

.photoStage { position: relative; width: min(50vw, 680px); min-height: 590px; margin: 0; justify-self: center; }
.photoStage > img { width: 100%; height: 510px; display: block; object-fit: cover; object-position: center; border-radius: 34px; box-shadow: 0 35px 80px rgba(28,75,111,.2); }
.photoStage figcaption { position: absolute; left: 24px; top: 24px; max-width: 280px; padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; border-radius: 16px; background: rgba(255,255,255,.9); color: var(--ink); backdrop-filter: blur(12px); }
.photoStage figcaption span { color: var(--blue); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.photoStage figcaption strong { font-size: 15px; line-height: 1.35; }
.photoServices { position: absolute; inset: auto 22px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.photoServices div { min-height: 132px; padding: 16px; display: flex; flex-direction: column; border-radius: 17px; background: #fff; box-shadow: 0 16px 40px rgba(28,75,111,.14); }
.photoServices div:nth-child(2) { background: var(--blue); color: #fff; }
.photoServices div:nth-child(3) { background: var(--lime); }
.photoServices span { color: #6c7f8c; font-size: 12px; }
.photoServices div:nth-child(2) span { color: #cdd7ff; }
.photoServices strong { margin-top: auto; font-size: 14px; line-height: 1.2; }
.photoServices small { margin-top: 5px; color: #657987; font-size: 12px; }
.photoServices div:nth-child(2) small { color: #dce3ff; }

.signalPanel { position: relative; width: min(48vw, 610px); aspect-ratio: 1.1; justify-self: center; border: 1px solid rgba(255,255,255,.13); background: rgba(10,12,11,.55); box-shadow: 0 32px 80px rgba(0,0,0,.35); }
.panelHeader { height: 43px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.68); font-family: var(--font-geist-mono), monospace; font-size: 12px; letter-spacing: .06em; }
.live { color: var(--lime); }
.live i { width: 6px; height: 6px; margin-right: 6px; display: inline-block; border-radius: 50%; background: var(--lime); }
.projectCore { position: absolute; z-index: 3; left: 50%; top: 48%; width: 146px; height: 146px; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--lime); color: var(--night); box-shadow: 0 0 0 13px rgba(217,255,67,.06), 0 20px 45px rgba(0,0,0,.32); }
.projectCore span { font-family: var(--font-geist-mono), monospace; font-size: 12px; letter-spacing: .12em; }
.projectCore strong { margin-top: 3px; font-size: 22px; letter-spacing: -.04em; }
.projectCore small { margin-top: 9px; color: rgba(17,20,18,.72); font-size: 12px; }
.signalNode { position: absolute; z-index: 4; width: 158px; padding: 15px; display: flex; flex-direction: column; border: 1px solid rgba(141,136,255,.8); background: #191d1b; box-shadow: 0 14px 32px rgba(0,0,0,.3); }
.signalNode > span { color: var(--lime); font-family: var(--font-geist-mono), monospace; font-size: 12px; letter-spacing: .05em; }
.signalNode strong { margin-top: 7px; font-size: 16px; }
.signalNode small { margin-top: 4px; color: rgba(255,255,255,.7); font-size: 12px; }
.nodeOne { left: 50%; top: 10%; transform: translateX(-50%); }
.nodeTwo { left: 5%; bottom: 7%; }
.nodeThree { right: 5%; bottom: 7%; }
.connections { position: absolute; inset: 43px 0 0; width: 100%; height: calc(100% - 43px); }
.connections path { fill: none; stroke: rgba(151,146,255,.65); stroke-width: 1.3; stroke-dasharray: 5 5; }
.connections circle { fill: var(--lime); filter: drop-shadow(0 0 7px var(--lime)); }

.models { padding: 96px clamp(22px, 5vw, 76px) 106px; }
.sectionHeading { margin-bottom: 44px; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(34px, 7vw, 110px); align-items: end; }
.kicker { color: #686e69; }
.sectionHeading h2, .recruiting h2, .finalCta h2 { margin: 0; font-size: clamp(35px, 4vw, 54px); font-weight: 620; line-height: 1.08; letter-spacing: -.045em; }
.sectionHeading > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.modelGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.modelCard { min-height: 440px; padding: 27px; display: flex; flex-direction: column; border: 1px solid rgba(16,44,69,.12); border-radius: 22px; background: #fff; }
.modelCard:nth-child(2) { background: #dfe7ff; }
.modelCard:nth-child(3) { background: #dff7fb; }
.cardLabel { display: flex; justify-content: space-between; align-items: center; color: #767b77; font-family: var(--font-geist-mono), monospace; font-size: 12px; }
.cardLabel strong { padding: 7px 10px; border-radius: 20px; background: var(--ink); color: #fff; font-family: var(--font-geist-sans), Arial, sans-serif; font-size: 12px; }
.modelCard h3 { max-width: 260px; margin: 40px 0 14px; font-size: 28px; line-height: 1.08; letter-spacing: -.04em; }
.modelCard > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.58; }
.modelCard ul { margin: 25px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.modelCard li { padding: 7px 9px; border: 1px solid rgba(23,26,24,.14); border-radius: 20px; font-size: 12px; }
.outcome { margin-top: auto; padding-top: 19px; display: flex; flex-direction: column; gap: 7px; border-top: 1px solid rgba(23,26,24,.13); }
.outcome span { color: #777c78; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.outcome strong { font-size: 15px; line-height: 1.45; }

.recruiting { padding: 100px clamp(22px, 5vw, 76px); display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(50px, 8vw, 125px); background: var(--night); color: #fff; }
.kickerLight { color: var(--lime); }
.recruitingIntro > p:not(.kickerLight) { max-width: 550px; margin: 25px 0 0; color: rgba(255,255,255,.62); font-size: 17px; line-height: 1.6; }
.timeline { margin-top: 43px; border-top: 1px solid rgba(255,255,255,.16); }
.timeline div { padding: 19px 0; display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.16); }
.timeline strong { color: var(--lime); font-family: var(--font-geist-mono), monospace; font-size: 18px; }
.timeline span { color: rgba(255,255,255,.72); font-size: 14px; }
.recruitingDetails { min-width: 0; }
.verifyCard { border: 1px solid rgba(255,255,255,.16); background: var(--night-2); }
.detailHeader { min-height: 47px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.7); font-family: var(--font-geist-mono), monospace; font-size: 12px; letter-spacing: .05em; }
.detailHeader strong { color: var(--lime); }
.verifyCard ul { margin: 0; padding: 0; list-style: none; }
.verifyCard li { min-height: 53px; padding: 0 17px; display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.verifyCard li:last-child { border-bottom: 0; }
.verifyCard li > span { color: rgba(255,255,255,.62); font-family: var(--font-geist-mono), monospace; font-size: 12px; }
.verifyCard li i { color: var(--lime); font-style: normal; }
.commercialGrid { margin-top: 13px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.15); }
.commercialGrid div { min-height: 144px; padding: 16px; display: flex; flex-direction: column; background: #163b63; }
.commercialGrid strong { color: var(--lime); font-size: 22px; letter-spacing: -.04em; }
.commercialGrid span { margin-top: 7px; font-size: 13px; line-height: 1.4; }
.commercialGrid small { margin-top: auto; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.4; }
.supportNote { margin: 19px 0 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.55; }

.finalCta { padding: 78px clamp(22px, 5vw, 76px); display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; background: #ccefff; }
.finalCta .kicker { margin-bottom: 15px; color: rgba(23,26,24,.6); }
.finalCta h2 { max-width: 780px; }
.finalActions { min-width: 260px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.darkAction { background: var(--night); color: #fff; }
.finalActions > a { padding-bottom: 5px; border-bottom: 1px solid rgba(23,26,24,.55); text-align: center; font-size: 14px; }
.footer { min-height: 112px; padding: 28px clamp(22px, 5vw, 76px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; background: var(--night); color: #fff; font-size: 13px; }
.footer > span:nth-child(2) { color: rgba(255,255,255,.64); }
.footer > span:last-child { justify-self: end; color: rgba(255,255,255,.68); }

.page a:focus-visible, .page button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; }
  .heroCopy { max-width: 760px; }
  .photoStage { width: min(88vw, 680px); }
  .modelGrid { grid-template-columns: 1fr; }
  .modelCard { min-height: 330px; }
  .recruiting { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .header { height: 68px; padding: 0 18px; grid-template-columns: 1fr auto; }
  .header .brand > span:last-child, .nav { display: none; }
  .headerButton { min-height: 44px; padding: 0 12px; font-size: 12px; }
  .hero { min-height: 0; padding: 108px 18px 54px; gap: 47px; }
  .hero h1 { font-size: clamp(40px, 12vw, 53px); }
  .lede { font-size: 17px; }
  .heroActions { flex-direction: column; align-items: stretch; }
  .heritage { grid-template-columns: 1fr; gap: 4px; }
  .photoStage { width: 100%; min-height: 570px; }
  .photoStage > img { height: 430px; border-radius: 24px; }
  .photoStage figcaption { left: 14px; top: 14px; right: 14px; }
  .photoServices { inset: auto 10px 0; grid-template-columns: 1fr; }
  .photoServices div { min-height: 88px; }
  .projectCore { width: 112px; height: 112px; top: 44%; }
  .projectCore strong { font-size: 18px; }
  .signalNode { width: 135px; padding: 12px; }
  .signalNode strong { font-size: 14px; }
  .nodeOne { top: 12%; }
  .nodeTwo { left: 3%; bottom: 6%; }
  .nodeThree { right: 3%; bottom: 6%; }
  .connections { display: none; }
  .models, .recruiting { padding: 72px 18px; }
  .sectionHeading { grid-template-columns: 1fr; gap: 20px; }
  .modelCard { min-height: 360px; padding: 23px; }
  .sectionHeading h2, .recruiting h2, .finalCta h2 { font-size: 35px; }
  .timeline div { grid-template-columns: 95px 1fr; }
  .commercialGrid { grid-template-columns: 1fr; }
  .commercialGrid div { min-height: 112px; }
  .finalCta { padding: 62px 18px; grid-template-columns: 1fr; gap: 35px; }
  .finalActions { min-width: 0; }
  .footer { padding: 28px 18px; grid-template-columns: 1fr; gap: 17px; }
  .footer > span:last-child { justify-self: start; }
}

@media (max-width: 379px) {
  .photoStage { min-height: 590px; }
}

@media (prefers-reduced-motion: reduce) {
  .page * { scroll-behavior: auto !important; transition: none !important; }
}