:root {
  --gateway-black: #030609;
  --gateway-basalt: #071016;
  --gateway-panel: rgba(10, 17, 23, .92);
  --gateway-platinum: #eaf0f4;
  --gateway-steel: #91a0aa;
  --gateway-line: rgba(205, 220, 230, .18);
  --gateway-orange: #f7931a;
  --gateway-blue: #52b8e8;
}

body.gateway-body {
  min-height: 100vh;
  color: var(--gateway-platinum);
  background:
    radial-gradient(circle at 78% 12%, rgba(64, 154, 205, .13), transparent 31rem),
    radial-gradient(circle at 15% 50%, rgba(247, 147, 26, .075), transparent 29rem),
    linear-gradient(145deg, var(--gateway-black), var(--gateway-basalt) 52%, #03070b);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.gateway-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: .15;
  background: url("/assets/sascosm-phoenix-field.jpg") center / cover no-repeat;
  filter: saturate(.35) contrast(1.12);
}

.gateway-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.gateway-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}
.gateway-atmosphere i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gateway-orange);
  box-shadow: 0 0 22px 7px rgba(247,147,26,.34);
  animation: gateway-drift 12s ease-in-out infinite alternate;
}
.gateway-atmosphere i:nth-child(1) { left: 12%; top: 27%; }
.gateway-atmosphere i:nth-child(2) { right: 17%; top: 42%; animation-delay: -4s; background: var(--gateway-blue); }
.gateway-atmosphere i:nth-child(3) { left: 54%; bottom: 18%; animation-delay: -8s; }

.gateway-body .site-header {
  position: relative;
  border: 0;
  background: transparent;
  color: white;
  backdrop-filter: none;
}
.gateway-body .nav {
  width: min(calc(100% - 40px), 1320px);
  min-height: 96px;
}
.brand-lockup { gap: 10px; }
.brand-lockup .brand-shield {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(205,220,230,.18));
}
.brand-lockup > span { display: grid; gap: 2px; }
.brand-lockup .brand-wordmark {
  width: clamp(148px, 15vw, 190px);
  height: auto;
  display: block;
}
.brand-lockup small {
  color: var(--gateway-steel);
  font-size: .56rem;
  letter-spacing: .24em;
}
.gateway-body .nav-links a:not(.button) {
  color: rgba(234,240,244,.8);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gateway-body .form-shell {
  position: relative;
  width: min(calc(100% - 40px), 1080px);
  margin: 54px auto 110px;
}
.gateway-body .form-heading { max-width: 930px; margin-bottom: 34px; }
.gateway-body .eyebrow {
  color: var(--gateway-orange);
  font-size: .7rem;
  letter-spacing: .22em;
}
.gateway-body h1,
.gateway-body h2,
.gateway-body h3 {
  color: var(--gateway-platinum);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.gateway-body .form-heading h1 {
  max-width: 900px;
  margin-bottom: 18px;
  color: #fff;
  font-size: clamp(2.7rem, 7vw, 5.8rem);
  font-weight: 560;
  letter-spacing: -.055em;
  line-height: .98;
}
.gateway-body .form-heading > p:not(.eyebrow) {
  max-width: 790px;
  color: #aebbc4;
  font-size: clamp(1rem, 2vw, 1.16rem);
}
.journey-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 26px 0;
  color: #bac5cc;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.journey-trust span::before { content: "◆"; margin-right: 8px; color: var(--gateway-orange); font-size: .66em; }

.gateway-body .notice {
  border: 1px solid rgba(205,220,230,.14);
  border-left: 2px solid var(--gateway-orange);
  border-radius: 0 12px 12px 0;
  color: #bdc8cf;
  background: rgba(10,17,23,.76);
}
.gateway-body .notice strong { color: #fff; }
.gateway-body .boundary-notice { margin-top: 20px; }

.gateway-body .progress {
  counter-reset: gateway-step;
  gap: 10px;
  margin: 30px 0 0;
}
.gateway-body .progress span {
  counter-increment: gateway-step;
  height: auto;
  border-top: 1px solid var(--gateway-line);
  border-radius: 0;
  padding-top: 10px;
  color: #63727c;
  background: transparent;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.gateway-body .progress span::before { content: "0" counter(gateway-step) "  "; }
.gateway-body .progress span.active { border-color: var(--gateway-orange); color: var(--gateway-platinum); background: transparent; }

.gateway-body .form-card {
  border: 1px solid var(--gateway-line);
  border-radius: 18px;
  color: var(--gateway-platinum);
  background: linear-gradient(155deg, rgba(13,22,29,.96), rgba(5,10,15,.98));
  box-shadow: 0 35px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035);
}
.gateway-body .form-step h2 { margin-bottom: 28px; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 520; letter-spacing: -.035em; }
.gateway-body .field label,
.gateway-body fieldset legend { color: #dce4e9; font-size: .82rem; font-weight: 620; }
.gateway-body .field small,
.gateway-body .choice small { color: var(--gateway-steel); }
.gateway-body input,
.gateway-body select,
.gateway-body textarea {
  border: 1px solid rgba(205,220,230,.22);
  border-radius: 8px;
  color: #fff;
  background: rgba(1,5,8,.78);
  color-scheme: dark;
}
.gateway-body input:focus,
.gateway-body select:focus,
.gateway-body textarea:focus { border-color: var(--gateway-orange); outline: 1px solid rgba(247,147,26,.45); }
.gateway-body .choice {
  border-color: rgba(205,220,230,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.gateway-body .choice:has(input:checked) {
  border-color: var(--gateway-orange);
  box-shadow: inset 0 0 0 1px rgba(247,147,26,.28), 0 0 24px rgba(247,147,26,.08);
}
.gateway-body .button,
.gateway-body button {
  border-radius: 4px;
  color: #090b0c;
  background: linear-gradient(135deg, #ffb049, var(--gateway-orange));
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gateway-body .button.secondary,
.gateway-body button.secondary,
.gateway-body .button.ghost {
  border: 1px solid rgba(205,220,230,.3);
  color: var(--gateway-platinum);
  background: rgba(255,255,255,.025);
}
.gateway-body footer { border-top: 1px solid var(--gateway-line); color: var(--gateway-steel); background: transparent; }

.gateway-overview .hero {
  min-height: 680px;
  background: radial-gradient(circle at 70% 30%, rgba(82,184,232,.12), transparent 28rem), linear-gradient(110deg, rgba(3,6,9,.98), rgba(7,16,22,.88));
}
.gateway-overview .hero h1 { font-family: inherit; font-weight: 540; }
.gateway-overview .section { color: var(--gateway-platinum); }
.gateway-overview .section-intro,
.gateway-overview .card p { color: var(--gateway-steel); }
.gateway-overview .card { border-color: var(--gateway-line); background: var(--gateway-panel); box-shadow: 0 18px 44px rgba(0,0,0,.22); }
.gateway-overview .dark-band { border-block: 1px solid var(--gateway-line); background: rgba(5,11,16,.72); }
.gateway-overview .path article { background: rgba(255,255,255,.035); }

.gateway-body[data-journey="si0s"] {
  --gateway-orange: #f7931a;
  --gateway-blue: #78cffa;
}
.gateway-body[data-journey="si0s"]::after {
  content: "SI0S";
  position: fixed;
  right: -1vw;
  bottom: -6vw;
  z-index: -1;
  color: rgba(234,240,244,.025);
  font-size: clamp(9rem, 25vw, 25rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  pointer-events: none;
}
.gateway-body[data-journey="si0s"] .form-card { box-shadow: 0 35px 100px rgba(0,0,0,.4), 0 0 70px rgba(82,184,232,.055); }

@keyframes gateway-drift { to { transform: translate3d(18px,-24px,0); opacity: .4; } }

@media (max-width: 720px) {
  .gateway-body .nav { width: min(calc(100% - 28px), 1320px); min-height: 78px; }
  .brand-lockup .brand-shield { width: 32px; height: 32px; }
  .brand-lockup .brand-wordmark { width: 154px; }
  .gateway-body .nav-links { display: none; }
  .gateway-body .form-shell { width: min(calc(100% - 28px), 1080px); margin-top: 30px; }
  .gateway-body .form-heading h1 { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .gateway-body .form-card { padding: 22px 18px; }
  .gateway-body .field-grid,
  .gateway-body .choice-grid { grid-template-columns: 1fr; }
  .journey-trust { gap: 8px 14px; }
  .gateway-body .progress span { font-size: .58rem; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .gateway-atmosphere i { animation: none; }
  .gateway-body { scroll-behavior: auto; }
}