:root {
  --bg: #0d1b2a;
  --bg-soft: #1b263b;
  --text: #e0e1dd;
  --muted: #8fa4b8;
  --accent: #ffb703;
  --accent-dark: #fb8500;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 20% -20%, #244f7b 0%, transparent 70%),
    radial-gradient(800px 500px at 90% 0%, #7b3f00 0%, transparent 70%),
    var(--bg);
}

.page {
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 48px 20px 24px;
}

.hero {
  background: linear-gradient(130deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 28px;
}

.eyebrow { color: var(--muted); margin: 0 0 8px; }
h1 { font-size: clamp(32px, 6vw, 56px); margin: 0 0 10px; }
.lead { margin: 0; line-height: 1.5; max-width: 760px; }

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

.btn {
  text-decoration: none;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 12px;
  transition: transform .18s ease, opacity .18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #141414; }
.btn.ghost { background: rgba(255,255,255,0.08); color: var(--text); }

.grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.card {
  background: var(--bg-soft);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 16px;
}

.card h2 { margin: 0 0 8px; font-size: 20px; }
.card p { margin: 0; line-height: 1.5; color: #c8d0da; }

.footer {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  gap: 12px;
  flex-wrap: wrap;
}