* { box-sizing: border-box; }

:root {
  --blue100: rgb(0,90,140);
  --blue60: rgb(102,156,186);
  --blue25: rgb(191,214,226);
  --blue10: rgb(229,238,243);
  --orange100: rgb(239,130,0);
  --orange60: rgb(245,180,102);
  --green100: rgb(90,142,34);
  --grey10: rgb(241,240,239);
  --ink: rgb(18,42,62);
  --muted: rgb(94,111,130);
}

html { scroll-behavior: smooth; }
body { margin: 0; font-family: Manrope, Arial, sans-serif; color: var(--ink); background: #eef4f7; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.topbar {
  position: fixed; z-index: 20; inset: 0 0 auto; height: 78px;
  padding: 0 4vw; display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,90,140,.10);
}
.signature { display: flex; align-items: baseline; gap: 12px; color: var(--blue100); }
.signature span { font-weight: 700; letter-spacing: .24em; }
.signature small { color: var(--orange100); font-size: .62rem; font-weight: 800; letter-spacing: .18em; }
nav { display: flex; gap: 24px; font-size: .88rem; font-weight: 650; }
nav a { opacity: .72; }

.intro { max-width: 1280px; margin: auto; padding: 148px 5vw 78px; }
.eyebrow { margin: 0 0 18px; color: var(--blue100); font-size: .74rem; font-weight: 800; letter-spacing: .22em; }
.intro h1 {
  margin: 0; color: var(--blue100); font-size: clamp(3.8rem, 8vw, 8rem);
  line-height: .95; letter-spacing: -.065em; font-weight: 600;
}
.intro > p:last-child { max-width: 850px; margin-top: 30px; color: var(--muted); line-height: 1.75; font-size: 1.08rem; }

.environment-grid {
  max-width: 1500px; margin: 0 auto; padding: 0 34px 90px;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px;
}
.environment {
  overflow: hidden; border-radius: 26px; background: #fff;
  border: 1px solid rgba(0,90,140,.14); box-shadow: 0 20px 58px rgba(0,61,96,.10);
}
.label {
  padding: 20px 24px; display: flex; gap: 16px; align-items: center;
  background: #fff; border-bottom: 1px solid rgba(0,90,140,.12);
}
.label > span {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; background: var(--blue100); font-weight: 800;
}
.label h2 { margin: 0 0 3px; color: var(--blue100); font-size: 1.05rem; }
.label p { margin: 0; color: var(--muted); font-size: .78rem; }

.stage {
  min-height: 570px; padding: 55px 38px; display: grid; align-content: center; justify-items: center; text-align: center;
}
.stage img { width: min(250px, 52%); border-radius: 48px; margin-bottom: 42px; box-shadow: 0 26px 60px rgba(0,0,0,.16); }
.wordmark { display: grid; justify-items: center; }
.wordmark strong {
  font-size: clamp(3rem, 5vw, 5.7rem); font-weight: 600; line-height: 1;
  letter-spacing: .22em; text-indent: .22em; white-space: nowrap;
}
.wordmark small {
  margin-top: 21px; color: var(--orange100); font-size: .78rem; font-weight: 800;
  letter-spacing: .42em; text-indent: .42em;
}

.env-a .stage { background: #fff; }
.env-a .wordmark strong { color: var(--blue100); }

.env-b .stage { background: var(--blue100); }
.env-b .wordmark strong { color: #fff; }

.env-c .stage { background: var(--blue60); }
.env-c .wordmark strong { color: #fff; }

.env-d .stage { background: var(--green100); }
.env-d .wordmark strong { color: #fff; }
.env-d .wordmark small { color: rgb(255,226,183); }

.env-e .stage { background: var(--orange100); }
.env-e .wordmark strong { color: #fff; }
.env-e .wordmark small { color: var(--ink); }

.env-f .stage { background: rgb(17,24,31); }
.env-f .wordmark strong { color: #fff; }

.env-g .stage { background: var(--grey10); }
.env-g .wordmark strong { color: var(--blue100); }

.env-h .stage { background: linear-gradient(135deg, var(--blue100), rgb(72,145,220)); }
.env-h .wordmark strong { color: #fff; }

.comparison {
  max-width: 1280px; margin: 0 auto 90px; padding: 70px 5vw;
  text-align: center; border-radius: 28px; background: #fff;
  border: 1px solid rgba(0,90,140,.14); box-shadow: 0 20px 58px rgba(0,61,96,.09);
}
.comparison h2 {
  margin: 0; color: var(--blue100); font-size: clamp(2.5rem, 5vw, 5.2rem);
  line-height: 1; letter-spacing: -.05em;
}
.icon-row { margin-top: 48px; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.mini { min-height: 240px; display: grid; place-items: center; border-radius: 20px; border: 1px solid rgba(0,90,140,.12); }
.mini img { width: 118px; border-radius: 24px; box-shadow: 0 16px 34px rgba(0,0,0,.14); }
.m-a { background: #fff; }
.m-b { background: var(--blue100); }
.m-f { background: rgb(17,24,31); }
.m-g { background: var(--grey10); }
.note { max-width: 800px; margin: 32px auto 0; color: var(--muted); line-height: 1.7; }

.final-test {
  min-height: 90vh; padding: 100px 5vw; display: grid; align-content: center; justify-items: center;
  text-align: center; color: #fff; background: var(--ink);
}
.final-test .eyebrow { color: var(--orange60); }
.final-test strong {
  font-size: clamp(4rem, 10vw, 10rem); font-weight: 600; line-height: 1;
  letter-spacing: .24em; text-indent: .24em;
}
.final-test small {
  margin-top: 28px; color: var(--orange100); font-weight: 800;
  letter-spacing: .48em; text-indent: .48em;
}
.final-test > p:last-child { margin-top: 52px; color: rgba(255,255,255,.68); font-size: 1.15rem; }

@media (max-width: 980px) {
  .environment-grid { grid-template-columns: 1fr; }
  .icon-row { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 650px) {
  .topbar { padding: 0 20px; }
  .signature small, nav a:not(:first-child) { display: none; }
  .intro { padding: 125px 22px 58px; }
  .environment-grid { padding-left: 0; padding-right: 0; }
  .environment { border-radius: 0; }
  .stage { min-height: 470px; }
  .wordmark strong, .final-test strong { font-size: 2.7rem; letter-spacing: .14em; text-indent: .14em; }
  .wordmark small, .final-test small { letter-spacing: .28em; text-indent: .28em; }
}