:root {
  --navy: #07111F;
  --blue: #168FFF;
  --silver: #93A5B8;
  --white: #F5F8FB;
  --slate: #536579;
  --ink: #132236;
  --surface: #DCE1E7;
  --line: #C6D0DA;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--surface);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--surface); line-height: 1.6; }
img { display: block; max-width: 100%; }

main { overflow: hidden; }
.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 88px 28px 84px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: 48px;
  align-items: center;
}

.environment-badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 10px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  color: var(--navy);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .14em;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--slate);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2, h3 { color: var(--navy); line-height: 1.08; margin-top: 0; }
h1 { max-width: 680px; margin-bottom: 20px; font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: -.05em; }
h1 span { color: var(--blue); }
h2 { margin-bottom: 14px; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.035em; }
h3 { margin-bottom: 12px; font-size: clamp(1.7rem, 3vw, 2.4rem); }

.lead { max-width: 640px; margin: 0; color: #3B4D60; font-size: clamp(1.08rem, 2vw, 1.3rem); }

.hero-mark { justify-self: end; width: min(460px, 100%); filter: drop-shadow(0 18px 30px rgba(7,17,31,.12)); }

.apps {
  background: var(--navy);
  color: var(--white);
  padding: 72px max(28px, calc((100vw - 1124px) / 2));
}
.apps .eyebrow { color: var(--silver); }
.apps h2 { color: var(--white); }
.section-heading { max-width: 980px; margin-bottom: 34px; }
.section-heading > p:last-child { color: #C6D1DC; margin-bottom: 0; font-size: 1.08rem; }

.project-list {
  max-width: 980px;
  padding-left: 24px;
}
.project-card {
  padding: 28px 0 6px;
  border-top: 1px solid #314256;
}
.project-card h3 { color: var(--white); margin-bottom: 6px; }
.project-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.project-details > p { max-width: 700px; margin: 10px 0 0; color: #C6D1DC; }
.project-status { display: inline-flex; align-items: center; gap: 8px; color: #D7E0E8; font-size: .8rem; font-weight: 750; line-height: 1.1; letter-spacing: .03em; }
.status-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.status-development .status-dot { background: var(--silver); border: 2px solid var(--blue); box-shadow: 0 0 0 1px rgba(22,143,255,.18); }
.status-live .status-dot { background: var(--blue); box-shadow: 0 0 0 2px rgba(22,143,255,.2); }
.meta-separator { color: var(--silver); font-size: .8rem; line-height: 1; }
.project-version, .private-note { color: var(--silver); font-size: .8rem; }
.project-link { display: inline-block; margin-top: 14px; color: var(--white); font-size: .9rem; font-weight: 750; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.project-link:hover, .project-link:focus-visible { color: var(--blue); }

footer { max-width: 1180px; margin: 0 auto; padding: 26px 28px 30px; color: var(--slate); font-size: .9rem; }
footer p { margin: 0; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 58px 20px 56px; }
  .hero-mark { width: min(360px, 100%); justify-self: center; order: -1; }
  .apps { padding: 58px 20px; }
  .project-list { padding-left: 16px; }
}