:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e8eef7;
  background: #080e18;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 80% 0, #17345c 0, transparent 30%), #080e18; }
a { color: #87bfff; text-decoration: none; }
a:hover { color: #fff; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.nav, main, footer { max-width: 1180px; margin-inline: auto; }
.nav { padding: 24px; display: flex; align-items: center; justify-content: space-between; }
.nav nav { display: flex; gap: 24px; }
.wordmark { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; }
.wordmark svg { width: 40px; fill: #1677ff; }
.wordmark svg path + path { fill: #fff; }
main { padding: 0 24px; }

.hero { padding: 100px 0 64px; max-width: 900px; }
.eyebrow { color: #65a9ff; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 800; }
h1 { font-size: clamp(48px, 8vw, 92px); line-height: .98; letter-spacing: -.055em; margin: 18px 0; }
h2 { font-size: clamp(32px, 5vw, 56px); letter-spacing: -.035em; margin: 0 0 24px; }
.lead { font-size: clamp(19px, 2.5vw, 27px); line-height: 1.5; color: #a9bad0; max-width: 840px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0; }
.actions a, .migration > a { border: 1px solid #35506e; border-radius: 10px; padding: 12px 17px; font-weight: 750; }
.primary { background: #1677ff; border-color: #1677ff !important; color: #fff; }
.status { color: #8798ae; }

.product-shot { margin: 0 0 78px; }
.product-shot img { display: block; width: 100%; height: auto; border: 1px solid #29425f; border-radius: 18px; box-shadow: 0 28px 80px #0008; }
.product-shot figcaption { padding: 12px 4px; color: #8798ae; font-size: 14px; }
.statement { display: grid; grid-template-columns: 1fr 1fr; padding: 38px; border: 1px solid #29425f; border-radius: 18px; background: #101a29; font-size: clamp(20px, 3vw, 34px); }
.statement span { color: #65a9ff; }
section:not(.hero, .statement) { padding: 84px 0; }
.workflow { text-align: center; max-width: 900px; margin-inline: auto; }
.workflow p:last-child, .grid p, #security p, .migration p, .telemetry p, .start > p { color: #9db0c8; line-height: 1.65; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid article { padding: 26px; border: 1px solid #22334a; border-radius: 14px; background: #101a29; }
.grid article > span { color: #52708f; font: 700 12px ui-monospace, monospace; }
.grid h3 { font-size: 22px; margin: 12px 0; }
.migration, .telemetry { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; border-top: 1px solid #22334a; }
.migration h2, .telemetry h2 { margin-bottom: 0; }
.migration > a { justify-self: end; }
#security { max-width: 900px; border-top: 1px solid #22334a; }
.start { border-top: 1px solid #22334a; }
.start pre { padding: 22px; overflow: auto; background: #101a29; border: 1px solid #22334a; border-radius: 14px; margin: 0 0 24px; line-height: 1.6; }
footer { padding: 35px 24px; border-top: 1px solid #22334a; color: #71849e; display: flex; justify-content: space-between; gap: 20px; }

@media (max-width: 800px) {
  .nav nav { display: none; }
  .hero { padding-top: 64px; }
  .statement, .grid, .migration, .telemetry { grid-template-columns: 1fr; }
  .statement { gap: 10px; }
  .migration, .telemetry { align-items: start; }
  .migration > a { justify-self: start; }
  footer { flex-direction: column; }
}