/* Base */
:root{
  --bg:#0f172a;          /* navy-900 */
  --bg-soft:#111827;     /* gray-900 */
  --card:#0b1224;        /* dark */
  --text:#0b1224;
  --muted:#6b7280;
  --primary:#ef4444;     /* red-500 */
  --primary-600:#dc2626;
  --surface:#ffffff;
  --accent:#0ea5e9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{width:min(1120px,92%);margin:0 auto}
.grid{display:grid;gap:24px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.flex{display:flex;gap:16px}
.between{justify-content:space-between}
.center-y{align-items:center}

/* Topbar / Nav */
.topbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #e5e7eb}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:#0f172a;letter-spacing:.2px}
.brand .logo{height:40px;width:auto}
.nav{position:relative}
.nav-toggle{display:none;background:none;border:0;font-size:28px}
.nav-list{display:flex;gap:24px;list-style:none;margin:0;padding:18px 0}
.nav-list a{font-weight:600;color:#0f172a}
.nav-list .btn{padding:10px 14px}
.has-dropdown{position:relative}
.dropdown{position:absolute;display:none;top:56px;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;min-width:240px;list-style:none;padding:8px 0;box-shadow:0 12px 24px rgba(2,6,23,.12)}
.has-dropdown:hover .dropdown{display:block}
.dropdown li a{display:block;padding:10px 14px;color:#0f172a}
.dropdown li a:hover{background:#f3f4f6}

/* Buttons */
.btn{display:inline-block;border:1px solid #e5e7eb;border-radius:10px;padding:12px 18px;font-weight:700}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600);border-color:var(--primary-600)}
.btn-outline{background:#fff;color:#0f172a}

/* Hero */
.hero{padding:40px 0 24px}
.hero .grid{align-items:center}
.eyebrow{font-weight:700;color:var(--primary);letter-spacing:.4px;margin:0 0 8px}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 12px;color:#0f172a}
.hero p{font-size:18px;color:#374151;max-width:60ch}
.tick-list{margin:16px 0 0 0;padding:0 0 0 18px}
.tick-list li{margin:6px 0}
.cta-row{margin-top:18px;display:flex;gap:12px}
.hero-media img{border-radius:14px}

/* Sections */
.section{padding:64px 0}
.section-alt{background:#f8fafc}
.section-title{font-size:36px;margin:0 0 18px;color:#0f172a}

/* Cards */
.cards{margin-top:8px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(2,6,23,.12)}
.card img{aspect-ratio:16/9;object-fit:cover}
.card-body{padding:14px}
.card-body h3{margin:0 0 6px}
.card-body p{margin:0;color:#4b5563}

/* Split section */
.benefits{margin:0;padding-left:18px}
.benefits li{margin:8px 0}

/* Footer */
.footer{background:#0b1224;color:#d1d5db;margin-top:48px}
.footer a{color:#d1d5db}
.footer .footer-brand{font-weight:800;font-size:18px;margin-bottom:8px;color:#fff}
.footer .list-plain{list-style:none;margin:0;padding:0}
.footer .list-plain li{margin:8px 0}
.footer .list-plain.small li{font-size:14px;color:#9ca3af}
.social{display:flex;gap:12px;margin-top:10px}
.copyright{border-top:1px solid #1f2937;margin-top:18px;padding:14px 0;font-size:14px;color:#9ca3af}

/* Generic page layout */
.page-hero{padding:48px 0;background:#f8fafc;border-bottom:1px solid #e5e7eb}
.page-hero h1{margin:0;font-size:36px}
.prose{color:#111827;line-height:1.7}
.prose h2{margin-top:28px;margin-bottom:10px}
.prose h3{margin-top:22px;margin-bottom:8px}
.prose p{margin:10px 0}
.stack{display:grid;gap:14px}

/* Contact */
form.stack input,form.stack textarea{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:10px;font:inherit}
form.stack button{justify-self:start}

/* Responsive */
@media (max-width: 960px){
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr 1fr}
  .grid.four{grid-template-columns:1fr 1fr}
  .hero h1{font-size:34px}
}
@media (max-width: 700px){
  .grid.three{grid-template-columns:1fr}
  .grid.four{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-list{display:none;position:absolute;right:0;top:56px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;flex-direction:column;min-width:260px;padding:8px}
  .nav.open .nav-list{display:flex}
  .has-dropdown:hover .dropdown{position:static;border:none;box-shadow:none}
}