:root {
  color-scheme:dark;
  --bg:#111318;
  --panel:#191c23;
  --panel-2:#222631;
  --ink:#f5f4ef;
  --muted:#b6bac3;
  --line:#343945;
  --blue:#a9bcff;
  --blue-strong:#7693ff;
  --light:#e9e9e4;
  --dark:#15171d
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit
}

a:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:5px
}

.skip-link {
  position:absolute;
  left:1rem;
  top:-5rem;
  z-index:20;
  padding:.75rem 1rem;
  background:var(--ink);
  color:var(--dark)
}

.skip-link:focus {
  top:1rem
}

.shell {
  width:min(calc(100% - 3rem),1240px);
  margin-inline:auto
}

.site-header {
  position:relative;
  z-index:2;
  border-bottom:1px solid var(--line)
}

.header-inner {
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}

.brand {
  font-size:2rem;
  font-weight:750;
  letter-spacing:-.105em;
  line-height:1;
  text-decoration:none;
  white-space:nowrap
}

.brand span {
  font-weight:400;
  color:var(--blue);
  margin-left:.1em
}

.brand-small {
  font-size:1.5rem
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:2.25rem
}

.site-header nav a,.footer-inner a:not(.brand) {
  font-size:.92rem;
  text-decoration:none;
  color:var(--muted);
  transition:color .2s ease
}

.site-header nav a:hover,.site-header nav a[aria-current],.footer-inner a:hover {
  color:var(--ink)
}

.eyebrow {
  font-size:.69rem;
  font-weight:750;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--blue)
}

.eyebrow-line {
  display:inline-block;
  width:22px;
  height:1px;
  background:currentColor;
  vertical-align:middle;
  margin-right:.6rem
}

.hero {
  min-height:750px;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);
  align-items:center;
  gap:clamp(2rem,6vw,7rem);
  padding-block:6.75rem 8rem
}

.hero h1,.page-hero h1 {
  font-size:clamp(4.25rem,7.8vw,7.5rem);
  font-weight:650;
  letter-spacing:-.065em;
  line-height:.97;
  margin:1.5rem 0 2rem;
  max-width:850px
}

.hero h1 em,.page-hero h1 em,.statement h2 em {
  font-style:normal;
  color:var(--blue)
}

.hero-lead {
  font-size:clamp(1.1rem,1.65vw,1.35rem);
  line-height:1.55;
  color:var(--muted);
  max-width:35rem;
  margin:0 0 2.25rem
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2.6rem;
  min-height:54px;
  padding:.85rem 1.15rem;
  background:var(--blue);
  border:1px solid var(--blue);
  color:var(--dark);
  font-weight:700;
  text-decoration:none;
  transition:background .2s ease,transform .2s ease
}

.button:hover {
  background:#d1dbff;
  transform:translateY(-2px)
}

.button span,.text-link span {
  font-size:1.15em;
  line-height:1
}

.hero-footnote {
  font-size:.85rem;
  color:#969ba8;
  margin:1rem 0 0
}

.system-visual {
  position:relative;
  min-height:540px;
  padding:1.35rem;
  background:radial-gradient(circle at 48% 40%,#26304d 0,#191d29 42%,#161a22 75%);
  border:1px solid #3e4556;
  overflow:hidden;
  box-shadow:0 30px 80px #07090d66
}

.system-visual::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);
  background-size:43px 43px;
  mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent)
}

.visual-top,.visual-bottom {
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#aab1c5
}

.visual-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 12px var(--blue)
}

.visual-core {
  position:relative;
  z-index:1;
  margin:7rem auto 0;
  width:210px;
  height:210px;
  border:1px solid #a9bcff99;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:radial-gradient(circle,#35436899,#1a1f2d 67%);
  box-shadow:0 0 0 18px #a9bcff08,0 0 0 43px #a9bcff08,0 0 70px #a9bcff1f
}

.core-orbit {
  position:absolute;
  inset:-44px;
  border:1px dashed #a9bcff45;
  border-radius:50%;
  animation:orbit 4.8s ease-out 1 both
}

.core-wordmark {
  font-weight:760;
  font-size:3.1rem;
  letter-spacing:-.12em;
  line-height:1
}

.core-wordmark span {
  color:var(--blue);
  font-weight:400
}

.core-caption {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#c4cae0;
  margin-top:.65rem
}

.visual-rail {
  position:relative;
  z-index:1;
  width:1px;
  height:75px;
  margin:16px auto 0;
  background:linear-gradient(var(--blue),transparent)
}

.visual-rail::before {
  content:"";
  position:absolute;
  left:-2px;
  top:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--blue);
  animation:travel 3.4s ease-in-out 1 both
}

.visual-departments {
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:.3rem;
  border-top:1px solid #a9bcff77;
  padding-top:1.2rem
}

.visual-departments span {
  flex:1;
  text-align:center;
  font-size:.72rem;
  color:#dce1ef;
  white-space:nowrap
}

.visual-bottom {
  margin-top:3.4rem;
  letter-spacing:.03em;
  text-transform:none;
  font-size:.72rem;
  color:#a5acc0
}

.band {
  background:#1a1d24;
  border-block:1px solid var(--line)
}

.statement {
  padding-block:7rem
}

.statement-grid {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:2rem
}

.statement h2,.section h2,.closing h2,.page-section h2 {
  font-weight:630;
  font-size:clamp(2.65rem,5.1vw,5rem);
  letter-spacing:-.04em;
  line-height:1.06;
  margin:.3rem 0 1.6rem
}

.statement p:not(.eyebrow) {
  font-size:1.16rem;
  color:var(--muted);
  max-width:46rem
}

.section {
  padding-block:8rem
}

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:3rem;
  align-items:end;
  margin-bottom:4rem
}

.section-heading p:last-child {
  max-width:22rem;
  color:var(--muted)
}

.department-list {
  border-top:1px solid var(--line)
}

.department {
  color:inherit;
  text-decoration:none;
  display:grid;
  grid-template-columns:90px minmax(180px,.7fr) minmax(0,1.2fr) 40px;
  align-items:center;
  gap:1rem;
  min-height:116px;
  border-bottom:1px solid var(--line);
  transition:padding .25s ease,background .25s ease
}

.department:hover {
  padding-inline:1rem;
  background:#ffffff08
}

.department-number {
  font-size:.77rem;
  color:var(--blue);
  font-variant-numeric:tabular-nums
}

.department h3 {
  font-size:1.55rem;
  font-weight:600;
  letter-spacing:-.04em;
  margin:0
}

.department p {
  margin:0;
  color:var(--muted);
  max-width:34rem
}

.department-mark {
  font-size:1.25rem;
  color:var(--blue);
  text-align:right
}

.text-link {
  display:inline-flex;
  gap:1rem;
  align-items:center;
  margin-top:2.4rem;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--blue);
  text-decoration:none;
  font-weight:650
}

.text-link:hover {
  color:var(--blue)
}

.rollout {
  background:var(--light);
  color:var(--dark)
}

.rollout .eyebrow {
  color:#445ca9
}

.rollout-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(3rem,9vw,10rem)
}

.rollout-grid>div>p:not(.eyebrow) {
  max-width:28rem;
  color:#555b66;
  font-size:1.1rem
}

.rollout .text-link {
  border-color:#445ca9
}

.rollout .text-link:hover,
.rollout .text-link:focus-visible {
  color:#445ca9;
  outline-color:#445ca9
}

.steps {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid #afb4be
}

.steps li {
  display:grid;
  grid-template-columns:70px 1fr;
  gap:1rem;
  padding:1.55rem 0;
  border-bottom:1px solid #afb4be
}

.steps li>span {
  font-size:.78rem;
  color:#445ca9;
  font-weight:700;
  padding-top:.3rem
}

.steps h3 {
  margin:0 0 .35rem;
  font-size:1.35rem;
  letter-spacing:-.035em
}

.steps p {
  margin:0;
  color:#555b66
}

.closing {
  padding-block:10rem 11rem;
  text-align:center
}

.closing h2 {
  max-width:900px;
  margin:1rem auto
}

.closing>p:not(.eyebrow) {
  color:var(--muted);
  font-size:1.2rem;
  margin:0 auto 2rem;
  max-width:41rem
}

.button-light {
  background:var(--ink);
  border-color:var(--ink)
}

.site-footer {
  border-top:1px solid var(--line);
  padding:2.2rem 0;
  color:var(--muted)
}

.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}

.footer-inner>div {
  display:flex;
  gap:1.5rem
}

.footer-inner p {
  font-size:.8rem;
  margin:0
}

.page-hero {
  padding-block:7rem 5rem
}

.page-hero h1 {
  max-width:1000px
}

.page-hero .lead {
  max-width:48rem;
  color:var(--muted);
  font-size:1.3rem
}

.page-section {
  padding-block:4rem 8rem
}

.page-section h2 {
  font-size:clamp(2.2rem,4vw,3.8rem)
}

.prose {
  max-width:48rem
}

.prose p,.prose li {
  color:var(--muted);
  font-size:1.1rem
}

.prose a {
  color:var(--blue)
}

.fact-list {
  border-top:1px solid var(--line);
  max-width:950px
}

.fact-row {
  display:grid;
  grid-template-columns:200px 1fr;
  gap:2rem;
  border-bottom:1px solid var(--line);
  padding:1.25rem 0
}

.fact-row dt {
  font-weight:650
}

.fact-row dd {
  margin:0;
  color:var(--muted)
}

.status-note {
  border-left:2px solid var(--blue);
  padding:1rem 1.4rem;
  background:#a9bcff0d;
  color:var(--muted);
  max-width:52rem
}

.status-note strong {
  color:var(--ink)
}

.agent-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line)
}

.agent-card {
  background:var(--bg);
  padding:2rem;
  min-height:230px
}

.agent-card span {
  font-size:.72rem;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.12em
}

.agent-card h2 {
  font-size:2rem;
  margin:.9rem 0
}

.agent-card p {
  color:var(--muted);
  margin:0
}

.plain-steps {
  counter-reset:step;
  list-style:none;
  margin:0;
  padding:0;
  max-width:850px
}

.plain-steps li {
  counter-increment:step;
  border-top:1px solid var(--line);
  padding:1.8rem 0;
  display:grid;
  grid-template-columns:80px 1fr;
  gap:1rem
}

.plain-steps li::before {
  content:counter(step,decimal-leading-zero);
  color:var(--blue);
  font-size:.78rem
}

.plain-steps h2 {
  font-size:1.8rem;
  margin:0 0 .45rem
}

.plain-steps p {
  color:var(--muted);
  margin:0
}

@keyframes orbit {
  to {
    transform:rotate(360deg)
  }
}

@keyframes travel {
  0% {
    transform:translateY(0);
    opacity:0
  }
  25% {
    opacity:1
  }
  75% {
    opacity:1
  }
  100% {
    transform:translateY(75px);
    opacity:0
  }
}

@media(max-width:950px) {
  .hero {
    grid-template-columns:1fr;
    min-height:auto;
    padding-block:5rem
  }
  .hero h1 {
    max-width:700px
  }
  .system-visual {
    min-height:510px
  }
  .statement-grid {
    grid-template-columns:1fr
  }
  .section-heading {
    align-items:start;
    flex-direction:column;
    gap:0
  }
  .rollout-grid {
    grid-template-columns:1fr;
    gap:3rem
  }
}

@media(max-width:640px) {
  .shell {
    width:min(calc(100% - 2rem),1240px)
  }
  .header-inner {
    min-height:72px
  }
  .brand {
    font-size:1.75rem
  }
  .site-header nav {
    gap:1rem
  }
  .site-header nav a {
    font-size:.76rem
  }
  .hero {
    padding-block:4.5rem 5rem;
    gap:4rem
  }
  .hero h1,.page-hero h1 {
    font-size:clamp(3.3rem,11vw,5rem);
    letter-spacing:-.035em
  }
  .system-visual {
    min-height:450px
  }
  .visual-core {
    margin-top:6rem;
    width:170px;
    height:170px
  }
  .core-wordmark {
    font-size:2.6rem
  }
  .visual-rail {
    height:62px
  }
  .visual-departments span {
    font-size:.69rem
  }
  .visual-bottom {
    margin-top:2.5rem
  }
  .statement {
    padding-block:5rem
  }
  .section {
    padding-block:5rem
  }
  .department {
    grid-template-columns:42px 1fr 24px;
    gap:.65rem;
    padding-block:1.25rem
  }
  .department p {
    grid-column:2;
    grid-row:2;
    font-size:.93rem
  }
  .department-mark {
    grid-column:3;
    grid-row:1
  }
  .department h3 {
    font-size:1.3rem
  }
  .rollout-grid {
    gap:2rem
  }
  .closing {
    padding-block:6rem
  }
  .footer-inner {
    align-items:start;
    flex-direction:column;
    gap:1rem
  }
  .page-hero {
    padding-block:5rem 3rem
  }
  .fact-row {
    grid-template-columns:1fr;
    gap:.25rem
  }
  .agent-grid {
    grid-template-columns:1fr
  }
  .agent-card {
    min-height:auto
  }
}

@media(max-width:390px) {
  .site-header nav {
    gap:.7rem
  }
  .site-header nav a {
    font-size:.75rem
  }
  .visual-departments span {
    font-size:.69rem
  }
  .visual-bottom {
    font-size:.68rem
  }
}

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