/* Theme and shared primitives */
:root {
  color-scheme:dark;
  --bg:#050b0b;
  --lime:#cbfa32;
  --text:#f6f6f7;
  --muted:#b9c9d2;
  --line:#293b36;
  font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  padding:8px 8px 0;
  background:#111b1b;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
}

svg {
  width:32px;
  height:32px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.panel {
  position:relative;
  overflow:hidden;
  border-radius:13px;
  background-color:var(--bg);
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:10;
  transform:translateY(-160%);
  padding:12px;
  background:var(--lime);
  color:#050b0b;
}

.skip-link:focus {
  transform:none;
}

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

.accent {
  color:var(--lime);
}

.hero {
  min-height:570px;
  background-image:linear-gradient(90deg,rgba(1,6,6,.35),transparent 70%),url('assets/planet.webp');
  background-position:center 85px;
  background-repeat:no-repeat;
  background-size:100% auto;
  padding:0 4.2% 20px;
}

.masthead {
  min-height:99px;
  display:flex;
  align-items:center;
  gap:34px;
}

.brand {
  text-decoration:none;
  font-size:32px;
  font-weight:500;
  letter-spacing:.18em;
  line-height:1;
}

.header-discipline {
  font-size:11px;
  letter-spacing:.22em;
  margin-left:auto;
}

.brand-promise {
  border-left:1px solid #4b605b;
  padding-left:28px;
  font-size:9px;
  line-height:1.9;
  letter-spacing:.2em;
  color:var(--muted);
}

.header-status {
  border:1px solid var(--lime);
  border-radius:30px;
  padding:15px 25px;
  color:var(--lime);
  font-size:12px;
  letter-spacing:.13em;
  white-space:nowrap;
}

.header-status span {
  margin-left:12px;
}

.hero-copy {
  margin-top:27px;
  animation:enter .9s ease-out both;
}

.eyebrow {
  font-size:10px;
  font-weight:500;
  letter-spacing:.25em;
  line-height:1.8;
  margin:0 0 19px;
}

.hero-copy .eyebrow {
  font-size:15px;
  letter-spacing:.32em;
  margin-bottom:13px;
}

h1 {
  font-size:clamp(46px,4.65vw,72px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:500;
  margin:0 0 16px;
}

.intro {
  font-size:clamp(18px,1.45vw,23px);
  line-height:1.45;
  color:var(--muted);
  margin:0;
}

.hero-aside {
  position:absolute;
  right:4.3%;
  top:157px;
  padding-left:16px;
  border-left:1px solid var(--lime);
  font-size:10px;
  letter-spacing:.2em;
  line-height:2.1;
  color:var(--muted);
}

.golden-path {
  max-width:930px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  list-style:none;
  padding:0;
  margin:18px auto 25px;
  text-align:center;
}

.golden-path li {
  position:relative;
  min-width:0;
}

.icon-box {
  display:grid;
  place-items:center;
  position:relative;
  z-index:1;
  width:54px;
  height:54px;
  margin:auto;
  border:1px solid #789d23;
  border-radius:11px;
  color:var(--lime);
  background:rgba(3,10,7,.92);
  box-shadow:inset 0 0 16px #8bab0710,0 0 15px #cbfa3210;
  animation:glow 6s ease-in-out infinite;
}

.golden-path li:not(:last-child):after {
  content:"";
  position:absolute;
  left:calc(50% + 28px);
  right:calc(-50% + 28px);
  top:26px;
  height:1px;
  background:linear-gradient(90deg,#688d19,#b5d822,#526c13);
}

.golden-path li:not(:last-child):before {
  content:"";
  position:absolute;
  left:calc(100% - 4px);
  top:22px;
  width:7px;
  height:7px;
  border-top:1px solid var(--lime);
  border-right:1px solid var(--lime);
  transform:rotate(45deg);
  z-index:1;
  background:#06100b;
}

.golden-path h2 {
  font-size:16px;
  font-weight:500;
  margin:7px 0 1px;
}

.golden-path p {
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  margin:0;
}

.coming-soon {
  width:295px;
  max-width:100%;
  border-top:1px solid #485522;
  text-align:center;
  color:var(--lime);
  font-size:15px;
  letter-spacing:.42em;
  padding-top:17px;
  margin:0 auto;
  line-height:1.5;
}

.lower-panels {
  display:grid;
  grid-template-columns:1.13fr 1fr;
  gap:8px;
  margin-top:8px;
}

.foundation {
  min-height:350px;
  padding:34px 7.5%;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  column-gap:24px;
  align-content:start;
}

.foundation-copy {
  position:relative;
  z-index:1;
}

.foundation .eyebrow {
  white-space:nowrap;
  font-size:9px;
}

.foundation h2 {
  font-size:clamp(30px,2.65vw,42px);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.035em;
  margin:0 0 14px;
}

.description {
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
  max-width:365px;
  margin:0;
}

.architecture {
  position:relative;
  grid-column:2;
  grid-row:1 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:900px;
  padding-top:28px;
}

.architecture-caption {
  position:absolute;
  right:-18px;
  top:-22px;
  text-align:right;
  font-size:9px;
  line-height:1.6;
  letter-spacing:.22em;
  color:var(--muted);
}

.architecture-caption:after {
  content:"";
  display:block;
  width:20px;
  height:1px;
  background:var(--lime);
  margin-top:5px;
}

.stack {
  list-style:none;
  padding:0;
  margin:0 20px 0 0;
  width:88%;
  transform:rotate(-1deg);
}

.stack li {
  position:relative;
  display:grid;
  place-items:center;
  height:47px;
  margin-top:0;
  border:1px solid #47625a;
  border-radius:3px;
  color:#c4d9e1;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  white-space:nowrap;
  background:linear-gradient(125deg,#29423855,#071213 40%,#1a353566);
  transform:skewY(13deg);
  box-shadow:inset 0 -9px 20px #4a767018,0 10px 16px #0006;
}

.stack li:before {
  content:"";
  position:absolute;
  height:24px;
  left:-1px;
  right:-1px;
  top:-25px;
  transform:skewX(-65deg);
  transform-origin:bottom;
  border:1px solid #3b514766;
  background:linear-gradient(130deg,#15242233,#08121388);
  pointer-events:none;
}

.stack li:first-child {
  margin-bottom:15px;
}

.stack .highlight {
  color:white;
  font-weight:600;
  font-size:10px;
  letter-spacing:.07em;
  border-color:var(--lime);
  background:linear-gradient(90deg,#668a1c66,#142007 40%,#293808);
  box-shadow:inset 0 0 20px #b5ec1a25,0 0 22px #a9e21938;
  margin-bottom:15px;
  z-index:2;
}

.stack .highlight:before {
  border-color:#9ccd2580;
  background:linear-gradient(120deg,#aad72922,#172507aa);
}

.stack li:last-child {
  margin-top:15px;
}

.outcomes {
  grid-column:1;
  list-style:none;
  display:flex;
  gap:20px;
  padding:0;
  margin:31px 0 0;
  width:max-content;
  position:relative;
  z-index:2;
}

.outcomes li {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.outcomes svg {
  color:var(--lime);
  width:23px;
  height:23px;
}

.outcomes span {
  font-size:10px;
  white-space:nowrap;
}

.direction {
  min-height:350px;
  padding:25px 5.5%;
  background-image:linear-gradient(180deg,#02090955,transparent 45%,#02070733),url('assets/mountains.webp');
  background-size:cover;
  background-position:center;
}

.direction .eyebrow {
  color:#c1d5df;
  line-height:1.9;
}

.direction h2 {
  position:absolute;
  right:8%;
  bottom:19%;
  text-align:right;
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  letter-spacing:.28em;
  margin:0;
  text-shadow:0 2px 15px #000;
}

.direction h2:after {
  content:"";
  display:block;
  width:33px;
  height:1px;
  background:var(--lime);
  margin:12px 0 0 auto;
}

footer {
  display:flex;
  align-items:center;
  gap:26px;
  padding:26px 4%;
  min-height:78px;
  background:linear-gradient(90deg,#071111,#070d0d);
  margin:8px -8px 0;
}

footer .brand {
  font-size:16px;
}

.footer-discipline {
  border-left:1px solid #40524e;
  padding:8px 0 8px 26px;
  font-size:9px;
  letter-spacing:.3em;
  color:var(--muted);
}

footer a {
  margin-left:auto;
  font-size:9px;
  letter-spacing:.22em;
  text-decoration:none;
  color:var(--muted);
}

@keyframes glow {
  50% {
    box-shadow:inset 0 0 15px #a8ce101c,0 0 18px #cbfa3225;
  }
}

@keyframes enter {
  from {
    opacity:0;
    transform:translateY(8px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1600px) {
  body {
    max-width:1920px;
    margin:auto;
  }
  .hero {
    min-height:650px;
  }
  .hero-copy {
    margin-top:50px;
  }
  .golden-path {
    margin-top:35px;
  }
  .foundation,.direction {
    min-height:390px;
  }
}

@media(max-width:1100px) {
  .brand-promise {
    display:none;
  }
  .header-discipline {
    font-size:9px;
  }
  .masthead {
    gap:20px;
  }
  .hero {
    min-height:570px;
  }
  .hero-copy {
    margin-top:45px;
  }
  .hero-aside {
    display:none;
  }
  .golden-path {
    margin-top:35px;
  }
  .lower-panels {
    grid-template-columns:1fr 1fr;
  }
  .foundation {
    padding:30px 7%;
    grid-template-columns:1fr;
  }
  .foundation .eyebrow {
    white-space:normal;
  }
  .architecture {
    grid-column:1;
    grid-row:auto;
    width:240px;
    min-height:285px;
    margin:25px auto 0;
  }
  .architecture-caption {
    top:-10px;
    right:-30px;
  }
  .outcomes {
    grid-column:1;
    grid-row:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    gap:20px;
    margin-top:23px;
  }
  .outcomes span {
    font-size:12px;
  }
  .direction {
    background-position:55% center;
  }
  .direction h2 {
    font-size:15px;
    right:9%;
    bottom:12%;
  }
}

@media(max-width:650px) {
  body {
    padding:6px 6px 0;
  }
  .panel {
    border-radius:10px;
  }
  .hero {
    padding:0 6% 28px;
    background-image:linear-gradient(180deg,transparent 250px,var(--bg) 560px),url('assets/planet.webp');
    background-position:59% top;
    background-size:auto 560px;
    background-repeat:no-repeat;
  }
  .masthead {
    min-height:83px;
    justify-content:space-between;
    gap:12px;
  }
  .brand {
    font-size:25px;
  }
  .header-discipline {
    display:none;
  }
  .header-status {
    font-size:8px;
    padding:10px 12px;
    letter-spacing:.08em;
  }
  .header-status span {
    margin-left:3px;
  }
  .hero-copy {
    margin-top:32px;
  }
  .hero-copy .eyebrow {
    font-size:10px;
    letter-spacing:.25em;
    margin-bottom:19px;
  }
  h1 {
    font-size:clamp(35px,8.7vw,55px);
    line-height:1.07;
    margin-bottom:19px;
  }
  .intro {
    font-size:16px;
    line-height:1.65;
    max-width:390px;
  }
  .desktop-break {
    display:none;
  }
  .golden-path {
    display:flex;
    flex-direction:column;
    gap:25px;
    text-align:left;
    margin:35px auto 32px;
    max-width:290px;
  }
  .golden-path li {
    display:grid;
    grid-template-columns:54px 1fr;
    grid-template-rows:auto auto;
    column-gap:20px;
  }
  .icon-box {
    grid-row:1 / 3;
  }
  .golden-path h2 {
    font-size:17px;
    align-self:end;
    margin:0 0 3px;
  }
  .golden-path p {
    font-size:13px;
  }
  .golden-path li:not(:last-child):after {
    left:26px;
    right:auto;
    top:54px;
    width:1px;
    height:25px;
  }
  .golden-path li:not(:last-child):before {
    left:23px;
    top:62px;
    transform:rotate(135deg);
    width:6px;
    height:6px;
  }
  .coming-soon {
    font-size:13px;
    max-width:250px;
  }
  .lower-panels {
    grid-template-columns:1fr;
    gap:6px;
    margin-top:6px;
  }
  .foundation {
    padding:32px 7% 37px;
  }
  .eyebrow {
    font-size:10px;
  }
  .foundation h2 {
    font-size:36px;
  }
  .description {
    font-size:15px;
  }
  .foundation .eyebrow {
    font-size:9px;
  }
  .outcomes {
    gap:23px;
  }
  .outcomes span {
    font-size:12px;
  }
  .architecture {
    margin-top:36px;
    min-height:285px;
    width:230px;
  }
  .architecture-caption {
    right:-20px;
  }
  .direction {
    min-height:345px;
    padding:25px 7%;
    background-position:center;
  }
  .direction h2 {
    font-size:14px;
    bottom:15%;
    right:7%;
  }
  footer {
    margin:6px -6px 0;
    flex-wrap:wrap;
    gap:17px;
    padding:26px 7%;
  }
  footer .brand {
    font-size:16px;
  }
  .footer-discipline {
    font-size:8px;
    letter-spacing:.17em;
    padding-left:17px;
  }
  footer a {
    width:100%;
    margin:3px 0 0;
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    scroll-behavior:auto!important;
  }
}