:root {
  --primary: #0E141B;
  --accent: #F97316;
  --light: #F4F6F8;
  --text: #1F2937;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: 'Segoe UI', Roboto, Arial, sans-serif; color: var(--text); background: var(--light); }
a { color: inherit; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.header { background: var(--primary); color:#fff; position: sticky; top: 0; z-index: 50; }
.nav { display:flex; align-items:center; justify-content: space-between; gap: 24px; padding:14px 0; }
.nav .links a { color:#fff; text-decoration:none; margin-left:18px; font-weight:600; opacity:.95; }
.nav .links a:hover { color: var(--accent); }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { height:48px; }
.brand .title { font-weight:800; letter-spacing:.5px; }
.hero { background: linear-gradient(rgba(14,20,27,.75), rgba(14,20,27,.75)), url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat; color:#fff; padding: 120px 0; text-align:center; }
.hero h1 { font-size: 44px; margin:0 0 10px; }
.hero p { font-size: 18px; opacity:.95; }
.cta-row { margin-top:22px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn { background: var(--accent); color:#fff; padding:12px 20px; border-radius: 8px; text-decoration:none; font-weight:700; display:inline-block; }
.btn.outline { background: transparent; border:2px solid #fff; }
.section { padding: 64px 0; }
.card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:18px; }
.card { background:#fff; border-radius: var(--radius); padding:22px; box-shadow: 0 8px 24px rgba(16,24,40,.06); }
.card h3 { margin-top:0; }
.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.step { background:#fff; border-radius: var(--radius); padding:18px; box-shadow: 0 6px 18px rgba(16,24,40,.06); }
.badge { display:inline-block; background: rgba(249,115,22,.12); color: var(--accent); font-weight:700; padding:6px 10px; border-radius: 999px; font-size:12px; }
.footer { background: var(--primary); color:#cbd5e1; }
.footer .inner { padding: 32px 0; }
.footer a { color:#e2e8f0; text-decoration:none; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--accent); font-size: 12px; }
.lead { font-size: 18px; color: #475569; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid #e5e7eb; padding: 12px; text-align:left; }
.filter-row { display:flex; gap:12px; flex-wrap:wrap; margin: 10px 0 20px; }
.filter-btn { background:#fff; border:1px solid #e5e7eb; padding:8px 14px; border-radius:999px; cursor:pointer; }
.filter-btn.active { background: var(--accent); color:#fff; border-color: var(--accent); }
.form { background:#fff; padding:22px; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16,24,40,.06); max-width: 720px; }
.form label { display:block; font-weight:600; margin:12px 0 6px; }
.form input, .form textarea, .form select { width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:8px; font-size: 16px; }
.form button { margin-top:14px; }
.small { font-size: 12px; color:#64748b; }

/* --- Responsive Enhancements --- */
@media (max-width: 1024px) {
  .nav .links a {
    margin-left: 12px;
    font-size: 15px;
  }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 16px; }
}

@media (max-width: 768px) {
  .nav { flex-wrap: wrap; justify-content: center; text-align: center; }
  .brand img { height: 60px !important; }
  .brand .title { font-size: 18px; }
  .links { display: none; width: 100%; }
  .links.show { display: block; }
  .nav-toggle {
    display: block;
    cursor: pointer;
    font-size: 24px;
    color: #fff;
    background: none;
    border: none;
  }
  .card-grid, .steps {
    grid-template-columns: 1fr;
  }
  .hero { padding: 80px 20px; }
  .footer .inner {
    flex-direction: column;
    text-align: center;
  }
  .btn { display: inline-block; width: auto; padding: 12px 18px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 30px; }
  .hero p { font-size: 15px; }
  .card, .step { padding: 16px; }
  .btn { font-size: 14px; padding: 10px 16px; }
}