/* MilGenX. Layout: the statement first, then the building rising under it; below, one working model of the company
   (pick a problem, see which parts of MilGenX combine to solve it), the six steps, the comparison, the way in.
   One accent (the mint of the X). Outfit for the large lines (it shares the wordmark's geometry), Inter for reading. */
:root {
  --ink: #050706;      /* page ground */
  --deep: #031311;     /* the green-black behind the building */
  --panel: #071a16;    /* raised surfaces */
  --paper: #f7f9f8;    /* text */
  --steel: #b8c0bf;    /* quiet text */
  --mint: #17bc98;     /* the X: actions and what is switched on */
  --teal: #075e49;     /* hover and pressed fills */
  --line: rgba(184, 192, 191, 0.16);
  --display: Outfit, Inter, "Helvetica Neue", Arial, sans-serif;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --gutter: max(24px, 4.5vw);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { color: #052015; background: #b4efd3; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
h2 { font-family: var(--display); font-weight: 300; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.label { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); }
.side { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

.pill { display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 56px; padding: 14px 28px; border: 1px solid var(--mint); border-radius: 100px; background: #05070688; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 17px; cursor: pointer; transition: background 0.3s, transform 0.3s, box-shadow 0.3s; }
.pill:hover { background: var(--teal); transform: translateY(-2px); box-shadow: 0 0 30px #7aefba14; }
.pill svg { color: var(--mint); transition: transform 0.3s; }
.pill:hover svg { transform: translate(2px, -2px); }
.pill.solid { background: var(--mint); color: #03130f; font-weight: 600; }
.pill.solid svg { color: #03130f; }
.pill.solid:hover { background: #3fd3b0; }
.text-link { color: var(--steel); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: color 0.25s, border-color 0.25s; }
.text-link:hover { color: var(--paper); border-color: var(--mint); }

/* ---------- the opening ---------- */
.hero { position: relative; background: var(--deep); overflow: hidden; }
.top { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 28px; }
.brand img { display: block; width: 150px; height: auto; }
.nav { display: flex; align-items: center; gap: 32px; font-size: 15px; color: var(--steel); }
.nav a { padding: 8px 0; transition: color 0.25s; }
.nav a:hover { color: var(--paper); }
.nav .cta { padding: 10px 20px; border: 1px solid var(--line); border-radius: 100px; color: var(--paper); }
.nav .cta:hover { border-color: var(--mint); }

.lede { position: relative; z-index: 3; display: grid; justify-items: center; gap: 26px; padding-top: clamp(36px, 7vh, 84px); text-align: center; }
.lede h1 { font-family: var(--display); font-weight: 300; font-size: clamp(40px, 6.6vw, 92px); line-height: 1.02; letter-spacing: -0.025em; }
.lede h1 span { display: block; }
.lede h1 .strong { font-weight: 500; }
.lede p { max-width: 58ch; color: var(--steel); font-size: clamp(16px, 1.35vw, 19px); text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 30px; margin-top: 6px; }

.stage-box { position: relative; z-index: 1; margin-top: clamp(-190px, -11vw, -60px); pointer-events: none; }
.stage { --mx: 0px; --my: 0px; position: relative; left: 50%; width: max(118vw, 640px); max-width: 1680px; aspect-ratio: 1536 / 1024; transform: translateX(-50%) translate(var(--mx), var(--my)); transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 80%, transparent 99%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 80%, transparent 99%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; }
.stage img, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage canvas { mix-blend-mode: screen; }
.hero-foot { position: absolute; z-index: 4; bottom: 16px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--steel); }
.motion-control { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px; border: 0; background: none; color: inherit; cursor: pointer; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(#0000, var(--ink)); pointer-events: none; z-index: 2; }

/* ---------- sections ---------- */
.band { padding-block: clamp(76px, 10vw, 136px); border-top: 1px solid var(--line); }
.hero + .band { border-top: 0; }
.wrap { max-width: 1160px; margin: 0 auto; display: grid; gap: clamp(36px, 5vw, 64px); }
.head { display: grid; gap: 18px; max-width: 780px; }
.head p:not(.label) { color: var(--steel); max-width: 60ch; }

/* the working model: a problem on the left, the nine parts of MilGenX on the right */
.system { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.7fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.problems { display: grid; gap: 8px; }
.problems .label { color: var(--steel); margin-bottom: 8px; }
.problem { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: none; text-align: left; font-size: 16px; line-height: 1.35; cursor: pointer; transition: border-color 0.25s, background 0.25s; }
.problem:hover { border-color: rgba(23, 188, 152, 0.6); }
.problem[aria-pressed="true"] { border-color: var(--mint); background: var(--panel); }
.problem i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--steel); }
.problem[aria-pressed="true"] i { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 12px rgba(23, 188, 152, 0.8); }
.map { display: grid; gap: 22px; min-width: 0; }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.area { display: grid; gap: 8px; align-content: start; padding: 18px 18px 20px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; transition: opacity 0.35s, border-color 0.35s, background 0.35s; }
.area h3 { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.2; }
.area h3::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.35s, box-shadow 0.35s; }
.area p { color: var(--steel); font-size: 14px; line-height: 1.5; }
.area.on { border-color: rgba(23, 188, 152, 0.75); background: var(--panel); }
.area.on h3::before { background: var(--mint); box-shadow: 0 0 12px rgba(23, 188, 152, 0.9); }
.areas.picked .area:not(.on) { opacity: 0.42; }
.verdict { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 28px; padding: 22px 24px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.verdict p { flex: 1 1 320px; min-width: 0; font-family: var(--display); font-weight: 300; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.3; }
.verdict .pill { min-height: 50px; padding: 11px 22px; font-size: 16px; }

/* six steps, in order, on the building's line */
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding: 36px 20px 0 0; border-top: 1px solid rgba(23, 188, 152, 0.45); counter-increment: step; }
.steps li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px rgba(23, 188, 152, 0.7); }
.steps li::after { content: "0" counter(step); position: absolute; top: 12px; left: 0; font-size: 12px; letter-spacing: 0.14em; color: var(--steel); font-variant-numeric: tabular-nums; }
.steps h3 { margin-top: 12px; font-family: var(--display); font-weight: 400; font-size: 21px; }
.steps p { margin-top: 10px; color: var(--steel); font-size: 14.5px; line-height: 1.55; }

/* one partner instead of five vendors */
.compare { display: grid; border-top: 1px solid var(--line); }
.compare .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px 32px; padding-block: 20px; border-bottom: 1px solid var(--line); align-items: baseline; }
.compare .row.titles { padding-block: 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.compare .row.titles span:last-child { color: var(--mint); }
.compare .who { font-family: var(--display); font-size: 20px; font-weight: 400; }
.compare .gives { color: var(--steel); }
.principles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.principles div { display: grid; gap: 8px; align-content: start; min-width: 0; }
.principles h3 { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--mint); }
.principles p { color: var(--steel); font-size: 14.5px; line-height: 1.5; }

/* the way in */
.close { text-align: center; background: radial-gradient(ellipse 70% 90% at 50% 110%, rgba(7, 94, 73, 0.5), transparent 70%); }
.close .wrap { justify-items: center; gap: 30px; }
.close h2 { max-width: 16ch; }
.close p { color: var(--steel); max-width: 52ch; }
.address { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: var(--steel); }
.address span { user-select: all; color: var(--paper); }
.copy { padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px; background: none; font-size: 13px; color: var(--steel); cursor: pointer; }
.copy:hover { color: var(--paper); border-color: var(--steel); }

.foot { padding-block: 40px; border-top: 1px solid var(--line); }
.foot .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; font-size: 14px; color: var(--steel); }
.foot img { display: block; width: 120px; height: auto; margin-bottom: 14px; }
.foot .right { text-align: right; display: grid; gap: 4px; }

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 0; }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .system { grid-template-columns: minmax(0, 1fr); }
  .nav .wide { display: none; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .top { padding-block: 22px; }
  .brand img { width: 118px; }
  .nav { gap: 16px; font-size: 14px; }
  .nav .cta { padding: 8px 14px; }
  .stage-box { margin-top: -40px; }
  .stage { left: 46%; }
  .areas { grid-template-columns: minmax(0, 1fr); }
  .areas.picked .area:not(.on) { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps li { padding: 0 0 28px 26px; border-top: 0; border-left: 1px solid rgba(23, 188, 152, 0.45); }
  .steps li::before { top: 0; left: -5px; }
  .steps li::after { position: static; display: block; }
  .steps h3 { margin-top: 4px; }
  .compare .row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .compare .row.titles { display: none; }
  .compare .mgx::before { content: "With MilGenX: "; color: var(--mint); }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .foot .wrap { grid-template-columns: minmax(0, 1fr); }
  .foot .right { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .stage { transform: translateX(-50%) !important; }
}