:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #06162d; color: #f5f7f4; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 70% 38%, #10365b 0, #071a34 38%, #041127 75%); }
main { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); grid-template-areas: "copy figure" "roles roles"; align-content: center; align-items: center; column-gap: 5vw; row-gap: clamp(32px, 5vh, 56px); padding: clamp(32px, 6vw, 92px); position: relative; overflow: hidden; }
.copy { grid-area: copy; max-width: 720px; position: relative; z-index: 1; }
.brand { margin: 0 0 42px; color: #77e6d4; font-weight: 800; letter-spacing: .2em; font-size: 14px; }
.eyebrow { color: #8fa8c5; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
h1 { margin: 18px 0 24px; font-size: clamp(48px, 6.2vw, 92px); line-height: .91; letter-spacing: -.055em; max-width: 850px; text-transform: uppercase; }
h1 span { display: block; }
.headline-accent { color: #77e6d4; }
.lede { max-width: 660px; color: #bdcad8; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.55; }
.status { margin-top: 36px; display: flex; align-items: center; gap: 12px; color: #77e6d4; font-weight: 700; }
.status span:first-child { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 20px currentColor; }
nav { margin-top: 36px; display: flex; gap: 10px; color: #6e87a5; font-size: 13px; letter-spacing: .1em; }
nav a { color: #9eb0c5; text-decoration: none; }
nav a:hover, nav a:focus { color: #fff; }
nav a:focus-visible { outline: 2px solid #77e6d4; outline-offset: 5px; }
figure { grid-area: figure; margin: 0; position: relative; }
figure::before { content: ""; position: absolute; inset: 8%; background: #77e6d4; filter: blur(90px); opacity: .18; }
figure img { display: block; width: min(700px, 48vw); max-height: 62vh; object-fit: contain; position: relative; filter: drop-shadow(0 30px 55px rgba(0,0,0,.35)); }
.roles { grid-area: roles; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid rgba(143,168,197,.24); position: relative; z-index: 1; }
.role { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 22px 28px; }
.role + .role { border-left: 1px solid rgba(143,168,197,.24); }
.role-number { margin: 1px 0 0; color: #77e6d4; font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.role h2 { margin: 0; color: #f5f7f4; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.role div > p { margin: 10px 0 0; color: #9eb0c5; font-size: 14px; line-height: 1.55; }
@media (max-width: 800px) {
  main { grid-template-columns: 1fr; grid-template-areas: "copy" "roles"; padding: 32px 24px 48px; align-content: center; }
  .brand { margin-bottom: 42px; }
  figure { position: absolute; right: -35%; bottom: -8%; opacity: .18; }
  figure img { width: 95vw; }
  .copy { max-width: 620px; }
  .roles { grid-template-columns: 1fr; }
  .role { padding: 20px 0; }
  .role + .role { border-left: 0; border-top: 1px solid rgba(143,168,197,.24); }
}