* {
  box-sizing: border-box;
  }

body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(circle at 70% 0%, rgba(37,99,235,.22), transparent 34%),
radial-gradient(circle at 15% 25%, rgba(14,165,233,.10), transparent 28%),
linear-gradient(180deg, #020617 0%, #07111f 100%);
color: #e5e7eb;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page {
max-width: 1400px;
margin: 0 auto;
padding: 24px;
}

.hero {
  padding: 26px 34px 34px;
  border: 1px solid #2563eb;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.94), rgba(2,6,23,.80)),
    radial-gradient(circle at 85% 50%, rgba(59,130,246,.24), transparent 32%);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}

.topnav {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-bottom: 26px;
}

.hero-content {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 38px;
}

.hero-logo {
  width: 220px;
  height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(37,99,235,.45));
}

.topnav a {
color: #e5e7eb;
text-decoration: none;
font-weight: 700;
padding: 11px 16px;
border: 1px solid #334155;
border-radius: 999px;
background: rgba(2,6,23,.72);
}

.topnav a:hover {
color: #93c5fd;
border-color: #3b82f6;
}

h1 {
  margin: 0;
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  line-height: .92;
  letter-spacing: .025em;
  font-weight: 950;
  color: #f8fafc;
  overflow-wrap: normal;
}

h1 span {
  color: #3b82f6;
}

.tagline {
  max-width: 760px;
  margin: 24px 0 0;
  color: #cbd5e1;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  line-height: 1.5;
}

.eyebrow {
margin: 0 0 16px;
color: #93c5fd;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}

h1 span {
color: #3b82f6;
}

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

.button {
display: inline-block;
padding: 15px 22px;
border-radius: 14px;
text-decoration: none;
font-weight: 800;
}

.button.primary {
background: #2563eb;
color: #f8fafc;
box-shadow: 0 12px 30px rgba(37,99,235,.35);
}

.button.primary:hover {
background: #3b82f6;
}

.button.secondary {
color: #e5e7eb;
border: 1px solid #334155;
background: rgba(2,6,23,.72);
}

.button.secondary:hover {
color: #93c5fd;
border-color: #3b82f6;
}

.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 24px;
}

.card,
.status-panel {
background: rgba(15,23,42,.88);
border: 1px solid #334155;
border-radius: 18px;
box-shadow: 0 20px 70px rgba(0,0,0,.28);
}

.card {
padding: 26px;
}

.card h2,
.status-panel h2 {
margin: 0 0 12px;
color: #f8fafc;
font-size: 1.55rem;
}

.card p,
.status-panel p {
color: #94a3b8;
line-height: 1.55;
}

.card a,
.card span {
display: inline-block;
margin-top: 12px;
color: #60a5fa;
font-weight: 800;
text-decoration: none;
}

.card a:hover {
color: #bfdbfe;
text-decoration: underline;
}

.status-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 28px;
align-items: center;
margin-top: 24px;
padding: 28px;
}

.status-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px 20px;
padding: 18px;
border: 1px solid #334155;
border-radius: 14px;
background: rgba(2,6,23,.70);
}

.status-grid span {
color: #94a3b8;
}

.status-grid strong {
color: #93c5fd;
}

.footer {
display: flex;
align-items: center;
gap: 24px;
margin: 28px 0 0;
color: #64748b;
text-align: center;
font-size: 1rem;
}

.footer p {
margin: 0;
white-space: nowrap;
}

.footer-line {
height: 1px;
flex: 1;
background: linear-gradient(90deg, transparent, #2563eb, transparent);
}

@media (max-width: 950px) {
  .hero-content,
  .cards,
  .status-panel {
    grid-template-columns: 1fr;
  }

  .hero-logo {
    width: 175px;
    height: 175px;
  }

  .topnav {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 28px;
  }

  h1 {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
}

@media (max-width: 600px) {
  .page {
    padding: 14px;
  }

  .hero {
    padding: 22px;
  }

  .hero-logo {
    width: 135px;
    height: 135px;
  }

  h1 {
    font-size: 2.55rem;
    line-height: .95;
  }

  .tagline {
    font-size: 1rem;
  }

  .actions {
    margin-top: 24px;
  }

  .footer {
    gap: 12px;
    font-size: .85rem;
  }
}