body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #111827;
  background: #f3f4f6;
}
a { color: #1b59ff; text-decoration: none; }
a:hover { text-decoration: underline; }
header {
  background: #020617;
  color: white;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .logo {
  display:flex;
  align-items:center;
  gap:12px;
}
header img { height: 42px; border-radius: 8px; }
nav a {
  margin-left: 18px;
  font-weight: 500;
}
.hero {
  padding: 72px 32px 64px;
  background: radial-gradient(circle at top left, #1b59ff 0, #020617 50%, #020617 100%);
  color: white;
}
.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  align-items:center;
}
.hero h1 {
  font-size: 2.6rem;
  margin-bottom: 12px;
}
.hero p {
  font-size: 1.05rem;
  max-width: 550px;
}
.hero .cta-buttons {
  margin-top: 20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.btn-primary, .btn-secondary {
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 600;
  border: 2px solid transparent;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-primary {
  background:#1b59ff;
  color:white;
}
.btn-primary:hover { background:#2563eb; }
.btn-secondary {
  background:transparent;
  color:white;
  border-color:#4b5563;
}
.btn-secondary:hover { background:#111827; }
.hero-metric-card {
  background:#020617;
  border-radius:16px;
  padding:18px 20px;
  border:1px solid #1f2937;
  max-width:320px;
}
.hero-metric-card h3 {
  margin:0 0 8px;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9ca3af;
}
.hero-metric-card .big {
  font-size:1.8rem;
  font-weight:700;
}
.hero-metric-card p {
  font-size:.9rem;
  color:#e5e7eb;
}
.section {
  padding: 56px 32px;
}
.section-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.section h2 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.section p.lead {
  color:#4b5563;
  max-width:640px;
}
.grid-3 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
  margin-top:28px;
}
.card {
  background:white;
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 10px 30px rgba(15,23,42,0.06);
  border:1px solid #e5e7eb;
}
.card h3 {
  font-size:1.05rem;
  margin-top:0;
}
.badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  padding:4px 10px;
  border-radius:999px;
  background:#e0f2fe;
  color:#0369a1;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.pricing-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
  margin-top:28px;
}
.price {
  font-size:1.7rem;
  font-weight:700;
  margin:8px 0;
}
.tagline {
  font-size:.9rem;
  color:#6b7280;
}
ul.feature-list {
  list-style:none;
  padding-left:0;
}
ul.feature-list li::before {
  content:"•";
  color:#1b59ff;
  margin-right:6px;
}
.footer {
  padding:22px 32px;
  background:#020617;
  color:#9ca3af;
  font-size:.85rem;
  margin-top:40px;
}
.footer-inner {
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
}
@media (max-width:768px){
  .hero { padding:48px 20px 40px; }
  header { padding:14px 20px; }
}