:root {
  --fg: #7fd3e6;
  --bg: #0f1724;
  --card: radial-gradient(circle at 20% 20%, #fff600 0%, #fff600 30%, #f2d489 70%, #7fd3e6 85%, #004e7a 100%);
  --accent: #004e7a;
  --muted: #444;
  --ocean-blue: #15648b;
  --maxw: 720px;
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
 }

html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--font);
}

body {
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(110, 231, 183, 0.06), transparent 8%),
    radial-gradient(1000px 500px at 90% 90%, rgba(99, 102, 241, 0.04), transparent 8%),
    var(--bg);
  color: var(--fg);
}

.card {
  width: calc(100% - 48px);
  max-width: var(--maxw);
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
}

.heading { color: var(--ocean-blue); }

.accentHeading { color: var(--accent); }

header {
  gap: 16px;
}

.highlight { margin-top: 8px; font-weight: 600; color: var(--accent); }

.logo {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--ocean-blue), #60a5da);
  border-radius: 10px;
}

.brand { font-weight: 700; font-size: 20px; letter-spacing: 0.2px; }

.tag { color: var(--muted); font-size: 14px; margin-top: 4px; }

p.lead {
  color: #000;
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.info {
  display: flex;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
  color: var(--muted);
}

.col {
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
  border-radius: 10px;
  flex: 1 1 180px;
  min-width: 160px;
}

.muted { color: var(--muted); font-size: 13px }

footer {
  display: flex;
  gap: 16px;
  align-items: right;
  justify-content: flex-end;
}

a.cta {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  color: #06202a;
  text-decoration: none;
  font-weight: 600;
}

@media (max-width:420px) {
  .card { padding: 20px }

  .brand { font-size: 18px }

  .logo { width: 56px; height: 56px }
}