:root {
  --bg: #081018;
  --panel: #101a24;
  --text: #e8f0f7;
  --muted: #96a7b8;
  --accent: #49d0c5;
  --accent2: #6f7cff;
  --border: rgba(255,255,255,.08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: radial-gradient(circle at top, #10263b 0%, var(--bg) 45%);
  color: var(--text);
}
.wrap {
  width: min(960px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 72px;
}
.hero {
  padding: 32px 0 18px;
}
.eyebrow {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}
h1 { font-size: clamp(36px, 7vw, 64px); line-height: 1.02; margin: 12px 0 16px; }
h2 { margin-top: 0; font-size: 28px; }
h3 { margin-top: 0; font-size: 20px; }
.lead, p, li { font-size: 18px; line-height: 1.6; }
.meta, .small, .muted { color: var(--muted); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 12px; }
.btn {
  display: inline-block;
  padding: 14px 18px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
}
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #071018; }
.btn.secondary { border: 1px solid var(--border); color: var(--text); }
.card {
  background: rgba(16,26,36,.86);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  margin-top: 18px;
  backdrop-filter: blur(10px);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.price { font-size: 22px; }
ul { padding-left: 22px; }
@media (max-width: 640px) {
  .lead, p, li { font-size: 16px; }
}