:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:#0b1020;
  color:#e8edf7;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 10%, #172442 0, transparent 34rem),
    #0b1020;
}

a {
  color:inherit;
  text-decoration:none;
}

.nav {
  height:72px;
  max-width:1180px;
  margin:auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand,
.auth-brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:650;
  letter-spacing:.2px;
}

.brand img,
.auth-brand img {
  width:30px;
  height:30px;
}

nav {
  display:flex;
  align-items:center;
  gap:24px;
  color:#adb8ca;
  font-size:14px;
}

main {
  max-width:1180px;
  margin:auto;
  padding:70px 28px;
}

.hero {
  min-height:580px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  align-items:center;
  gap:90px;
}

.hero h1 {
  font-size:62px;
  line-height:1.03;
  letter-spacing:-2.7px;
  margin:14px 0 25px;
}

.hero-copy > p {
  max-width:590px;
  color:#aeb9cc;
  font-size:19px;
  line-height:1.7;
}

.eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  color:#7ea4ff;
}

.actions {
  display:flex;
  gap:12px;
  margin-top:34px;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border:0;
  border-radius:8px;
  padding:12px 18px;
  min-height:44px;
  background:#e9eef9;
  color:#101728;
  font-weight:650;
  cursor:pointer;
}

.button.secondary {
  color:#dce5f5;
  background:#192238;
  border:1px solid #29334a;
}

.button.small {
  min-height:36px;
  padding:8px 14px;
}

.button.full {
  width:100%;
  margin-top:8px;
}

.panel {
  padding:26px;
  border:1px solid #263149;
  border-radius:15px;
  background:#11182a;
  box-shadow:0 30px 80px rgba(0,0,0,.22);
}

.panel-title {
  color:#8896ad;
  font-size:13px;
  margin-bottom:17px;
}

.metric {
  padding:17px 0;
  display:flex;
  justify-content:space-between;
  border-top:1px solid #202a3e;
}

.metric span {
  color:#909db2;
}

.metric strong {
  font-size:14px;
}

.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:50px 0;
}

.features article {
  background:#101728;
  border:1px solid #202b41;
  padding:26px;
  border-radius:12px;
}

.features h2 {
  font-size:17px;
  margin-top:0;
}

.features p,
.docs p {
  color:#9da9bd;
  line-height:1.7;
}

footer {
  max-width:1180px;
  margin:auto;
  padding:26px 28px 45px;
  border-top:1px solid #182238;
  color:#76849a;
  display:flex;
  justify-content:space-between;
  font-size:13px;
}

footer div {
  display:flex;
  gap:20px;
}

.page {
  max-width:850px;
}

.page h1 {
  font-size:46px;
  letter-spacing:-1.5px;
}

.status-ok {
  margin:35px 0;
  display:flex;
  align-items:center;
  gap:11px;
  padding:18px;
  border:1px solid #24324a;
  border-radius:10px;
  background:#101829;
}

.dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#51c98e;
}

.service-list {
  border:1px solid #222d43;
  border-radius:12px;
  overflow:hidden;
}

.service-list div {
  display:flex;
  justify-content:space-between;
  padding:19px 21px;
  border-bottom:1px solid #202a3d;
}

.service-list div:last-child {
  border-bottom:0;
}

.service-list strong {
  color:#66d39c;
  font-size:14px;
}

.docs {
  margin-top:40px;
}

.docs h2 {
  margin-top:35px;
}

.muted {
  color:#8694a9;
}

.auth-page {
  display:flex;
  justify-content:center;
  align-items:center;
}

.auth-shell {
  width:100%;
  max-width:430px;
  padding:28px;
}

.auth-brand {
  justify-content:center;
  margin-bottom:25px;
}

.auth-card {
  background:#11182a;
  border:1px solid #273149;
  border-radius:14px;
  padding:31px;
}

.auth-card h1 {
  margin:0 0 8px;
}

label {
  display:block;
  margin-top:20px;
  color:#aeb8c9;
  font-size:13px;
}

input {
  margin-top:8px;
  width:100%;
  height:45px;
  border:1px solid #303a50;
  border-radius:7px;
  background:#0c1220;
  color:white;
  padding:0 13px;
  outline:none;
}

input:focus {
  border-color:#617ebd;
}

.error {
  color:#ff9e9e;
  margin-top:17px;
  font-size:13px;
}

.hidden {
  display:none;
}

.auth-footer {
  border-top:1px solid #242e42;
  margin-top:27px;
  padding-top:19px;
  display:flex;
  justify-content:space-between;
  color:#78869b;
  font-size:12px;
}

@media (max-width:800px) {
  .hero {
    grid-template-columns:1fr;
    gap:40px;
  }

  .hero h1 {
    font-size:45px;
  }

  .features {
    grid-template-columns:1fr;
  }

  nav > a:not(.button) {
    display:none;
  }
}