:root {
  --bg: #0e0f12;
  --panel: #171922;
  --text: #f4f6fb;
  --muted: #a8b0c3;
  --accent: #7c5cff;
  --accent-2: #45d0ff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: linear-gradient(180deg, var(--bg), #0b0c10);
  color: var(--text);
}
.container { width: min(1100px, 92%); margin: 0 auto; }
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
}
.brand { font-weight: 700; letter-spacing: 0.2px; }
.hero { padding: 4rem 0 2rem; }
h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; margin: 0 0 1rem; }
p { color: var(--muted); }
.btn {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: white; text-decoration: none;
  border-radius: 10px; padding: 0.75rem 1rem; font-weight: 600;
}
.btn.ghost { background: transparent; border: 1px solid #30364a; }
.cta-row { display: flex; gap: 0.75rem; margin-top: 1rem; }
.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  padding: 2rem 0;
}
.card {
  background: var(--panel); border: 1px solid #262c3d; border-radius: 14px;
  padding: 1rem;
}
.contact { padding: 2rem 0 4rem; }
.footer { padding: 1rem 0 2rem; color: #818aa3; }
@media (max-width: 900px){ .cards{ grid-template-columns: 1fr; } }