:root {
  --orange: #ff651f;
  --orange-soft: #ff7b35;
  --white: #f8fafc;
  --muted: #b8c2cf;
  --dim: #7f8a98;
  --navy: #07111c;
  --panel: rgba(7, 17, 28, 0.91);
  --line: rgba(197, 215, 233, 0.36);
  font-family: "Inter", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--navy); scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--navy);
  color: var(--white);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .65rem 1rem;
  background: #fff;
  color: #07111c;
  font-weight: 700;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: var(--navy);
}

.scene,
.scene-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.scene {
  object-fit: cover;
  object-position: center top;
  filter: saturate(.92) contrast(1.04);
}

.scene-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 12, 21, .98) 0%, rgba(4, 12, 21, .85) 25%, rgba(4, 12, 21, .25) 46%, rgba(4, 12, 21, .08) 63%, rgba(4, 12, 21, .46) 100%),
    linear-gradient(180deg, rgba(4, 12, 21, .34), transparent 48%, rgba(4, 12, 21, .75) 100%);
}

.header,
.hero,
.build-board,
footer {
  width: min(100% - clamp(2rem, 5vw, 6rem), 1480px);
  margin-inline: auto;
}

.header {
  display: flex;
  height: clamp(6rem, 10vw, 8.2rem);
  align-items: flex-start;
  justify-content: space-between;
  padding-top: clamp(1.45rem, 3vw, 2.25rem);
}

.brand {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(3, auto) 1fr;
  align-items: start;
  color: inherit;
  font-size: clamp(2.5rem, 4.4vw, 4.4rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.075em;
  text-decoration: none;
}

.brand-id,
.brand-t { color: #fff; }
.brand-ten { color: var(--orange); }

.brand sup {
  margin: -.18rem 0 0 .2rem;
  font: 700 .55rem/1 "DM Mono", monospace;
  letter-spacing: 0;
}

.brand small {
  grid-column: 1 / -1;
  margin-top: .75rem;
  color: #d3dae3;
  font: 400 clamp(.62rem, .9vw, .82rem)/1 "DM Mono", monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.header nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: .5rem;
  color: #f2f5f8;
  font: 500 .65rem/1 "DM Mono", monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.header nav i {
  display: block;
  width: 1px;
  height: .7rem;
  background: rgba(255,255,255,.55);
}

.header nav b {
  width: 4.25rem;
  height: 2px;
  margin-left: .7rem;
  background: var(--orange);
}

.hero {
  display: grid;
  min-height: clamp(520px, 61vh, 670px);
  grid-template-columns: minmax(28rem, .83fr) minmax(18rem, .9fr) minmax(18rem, .57fr);
  gap: 1rem;
  align-items: center;
  padding-bottom: 1.5rem;
}

.message {
  align-self: start;
  padding-top: clamp(1rem, 4.5vh, 3.75rem);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 1rem;
  color: var(--orange-soft);
  font: 500 .85rem/1 "DM Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow span {
  display: block;
  width: 6.2rem;
  height: 2px;
  background: var(--orange);
}

h1 {
  max-width: 9.8ch;
  margin: 0 0 1.2rem;
  font-size: clamp(3.2rem, 5.15vw, 5.6rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.065em;
  text-wrap: balance;
}

h1 em {
  color: var(--orange);
  font-style: normal;
}

.lead,
.support {
  max-width: 42rem;
  margin: 0;
  font-family: "DM Mono", monospace;
}

.lead {
  color: #f3f6f9;
  font-size: clamp(.95rem, 1.18vw, 1.16rem);
  line-height: 1.55;
}

.support {
  margin-top: .7rem;
  color: var(--muted);
  font-size: clamp(.76rem, .9vw, .9rem);
  line-height: 1.65;
}

.audiences {
  display: grid;
  max-width: 31rem;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  margin-top: clamp(1.3rem, 3vh, 2.5rem);
}

.audiences article {
  padding-right: 1.4rem;
}

.audiences article + article {
  padding-left: 2.5rem;
  border-left: 1px solid var(--orange);
}

.audiences svg,
.track-row svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.audiences svg {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .55rem;
}

.audiences h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.18;
}

.audiences p {
  margin: .9rem 0 0;
  color: var(--muted);
  font: 400 .74rem/1.55 "DM Mono", monospace;
}

.curriculum-stack {
  grid-column: 3;
  align-self: end;
  margin-bottom: 1.2rem;
}

.curriculum-stack > p {
  margin: 0 0 .55rem;
  color: var(--orange-soft);
  font: 500 .68rem/1 "DM Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.curriculum-stack ul {
  margin: 0;
  padding: 0;
  list-style: none;
  filter: drop-shadow(0 .8rem 1rem rgba(0,0,0,.38));
}

.curriculum-stack li {
  display: flex;
  min-height: 1.85rem;
  align-items: center;
  padding: .25rem .85rem;
  border: 1px solid rgba(188, 207, 225, .32);
  border-radius: 2px;
  background: linear-gradient(100deg, rgba(3, 10, 18, .96), rgba(9, 19, 31, .91));
  color: #e8edf2;
  font: 400 clamp(.64rem, .76vw, .78rem)/1 "DM Mono", monospace;
  letter-spacing: .035em;
  text-transform: uppercase;
  transform: translateX(calc(var(--step, 0) * .2rem));
}

.curriculum-stack li + li { margin-top: -1px; }
.curriculum-stack li:nth-child(2n) { margin-left: .35rem; }
.curriculum-stack li:last-child { color: #8d98a5; }

.curriculum-stack blockquote {
  margin: 1rem 0 0 auto;
  padding-left: 1rem;
  border-left: 2px solid var(--orange);
  color: #c2cbd5;
  font: 400 .72rem/1.65 "DM Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.build-board {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr minmax(24rem, .38fr);
  gap: 2rem;
  padding: 1.45rem 1.75rem 1.25rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(110deg, rgba(9, 22, 36, .96), rgba(6, 14, 24, .91)),
    rgba(5, 13, 22, .92);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.26);
  backdrop-filter: blur(18px);
  clip-path: polygon(.7rem 0, 100% 0, 100% calc(100% - .7rem), calc(100% - .7rem) 100%, 0 100%, 0 .7rem);
}

.tracks h2,
.status h2 {
  margin: 0;
  font: 500 .73rem/1 "DM Mono", monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.tracks h2 { color: #d8dfe7; }

.track-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 1.3rem;
}

.track-row article {
  display: grid;
  min-height: 4.8rem;
  place-items: center;
  padding: 0 .45rem;
  border-right: 1px solid rgba(255, 101, 31, .57);
  text-align: center;
}

.track-row article:last-child { border-right: 0; }

.track-row svg {
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: .45rem;
  color: #fff;
}

.track-row span {
  min-height: 2.1rem;
  font-size: .72rem;
  line-height: 1.28;
}

.status {
  padding-left: 2.15rem;
  border-left: 2px solid var(--orange);
}

.status h2 { margin-bottom: 1.2rem; }

.status-row {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr .72fr;
  gap: .7rem;
  align-items: center;
  margin-top: .6rem;
  font: 400 .62rem/1 "DM Mono", monospace;
}

.status-row > span { color: #d7dee6; }

.status-row i {
  display: block;
  overflow: hidden;
  height: .42rem;
  border-radius: 99px;
  background: #2a3745;
}

.status-row i b {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
  box-shadow: 0 0 .7rem rgba(255,101,31,.5);
}

.status-row small {
  color: var(--dim);
  font-size: inherit;
}

footer {
  display: flex;
  min-height: 5.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.mini-brand {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -.07em;
}

.mini-brand b { color: var(--orange); }

.mini-brand i {
  width: 1px;
  height: 1.4rem;
  margin: 0 1.4rem;
  background: var(--orange);
}

.mini-brand small,
.footer-note {
  color: #9ba7b4;
  font: 400 .57rem/1.2 "DM Mono", monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.footer-note {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-note b {
  width: 2.8rem;
  height: 2px;
  background: var(--orange);
}

@media (max-width: 1180px) {
  .page { overflow: visible; }
  .hero { grid-template-columns: minmax(25rem, .9fr) 1fr minmax(16rem, .55fr); }
  .header nav span:nth-of-type(2),
  .header nav span:nth-of-type(3),
  .header nav i:nth-of-type(2),
  .header nav i:nth-of-type(3) { display: none; }
  .build-board { grid-template-columns: 1fr; }
  .status {
    padding: 1.35rem 0 0;
    border-top: 1px solid rgba(255,101,31,.5);
    border-left: 0;
  }
}

@media (max-width: 860px) {
  .scene {
    position: absolute;
    height: 48rem;
    object-position: 57% top;
  }

  .scene-shade {
    height: 48rem;
    background:
      linear-gradient(90deg, rgba(4,12,21,.95), rgba(4,12,21,.36) 58%, rgba(4,12,21,.5)),
      linear-gradient(180deg, rgba(4,12,21,.2), rgba(4,12,21,.12) 58%, #07111c 100%);
  }

  .header nav { display: none; }

  .hero {
    display: block;
    min-height: auto;
    padding: 2rem 0 3.5rem;
  }

  .message { max-width: 34rem; padding-top: 0; }
  h1 { font-size: clamp(3rem, 10vw, 4.8rem); }
  .lead, .support { max-width: 29rem; }

  .curriculum-stack {
    width: min(100%, 34rem);
    margin-top: 8rem;
    margin-left: auto;
  }

  .curriculum-stack blockquote { display: none; }

  .build-board {
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }

  .track-row { grid-template-columns: repeat(4, 1fr); row-gap: 1.25rem; }
  .track-row article:nth-child(4) { border-right: 0; }
  .status-row { grid-template-columns: 1.1fr 1fr .7fr; }
}

@media (max-width: 580px) {
  .header,
  .hero,
  .build-board,
  footer { width: min(100% - 1.5rem, 1480px); }

  .header { height: 7rem; }
  .brand { font-size: 2.65rem; }
  .brand small { font-size: .55rem; letter-spacing: .14em; }

  .scene { height: 43rem; object-position: 53% top; opacity: .76; }
  .scene-shade { height: 43rem; }

  .eyebrow { font-size: .68rem; gap: .7rem; }
  .eyebrow span { width: 2.6rem; }
  h1 { font-size: clamp(2.9rem, 14vw, 4rem); }

  .lead { font-size: .9rem; }
  .support { font-size: .74rem; }

  .audiences { margin-top: 1.7rem; }
  .audiences article + article { padding-left: 1.25rem; }
  .audiences p { font-size: .66rem; }

  .curriculum-stack { margin-top: 9rem; }
  .curriculum-stack > p { font-size: .62rem; }
  .curriculum-stack li { min-height: 2.15rem; font-size: .68rem; }

  .build-board { padding: 1.2rem 1rem; clip-path: none; }
  .track-row { grid-template-columns: repeat(2, 1fr); }
  .track-row article,
  .track-row article:nth-child(4) { border-right: 1px solid rgba(255,101,31,.45); }
  .track-row article:nth-child(2n) { border-right: 0; }

  .status-row { grid-template-columns: 1fr; gap: .35rem; margin-top: 1rem; }
  .status-row small { display: none; }

  footer { align-items: flex-start; flex-direction: column; padding: 1.75rem 0; }
  .mini-brand small { display: none; }
  .footer-note { font-size: .53rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}