:root {
  --brand: #2a7ae2;
  --brand-dark: #1f5fb3;
  --ink: #111827;
  --muted: #6b7280;
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --shadow: 0 6px 16px rgba(17, 24, 39, 0.06);
}

body {
  color: var(--ink);
  background: var(--bg);
}

/* container is from Bootstrap; we just cap the width a bit */
.container {
  max-width: 1100px;
}

/* HERO */
header.text-center h1 {
  color: var(--brand);
  letter-spacing: 0.2px;
}

header.text-center p.lead {
  color: var(--muted);
}

/* Buttons */
.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Cards / value props */
.p-4.border.rounded-3 {
  background: var(--card-bg);
  box-shadow: var(--shadow);
  border-color: #eef2f7;
  transition: transform .15s ease, box-shadow .15s ease;
}
.p-4.border.rounded-3:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.08);
}
.p-4.border.rounded-3 h3 {
  margin-bottom: .35rem;
}
.p-4.border.rounded-3 p {
  color: var(--muted);
}

/* Section headings */
section > h2 {
  border-left: 4px solid var(--brand);
  padding-left: .6rem;
  margin-bottom: 1rem;
}

/* Trust & Safety two-up boxes */
section .row .col-md-6 .p-4.border.rounded-3 h3 {
  color: var(--brand);
  font-weight: 600;
}

/* Footer spacing */
footer {
  margin-top: 2rem;
}


.hero-banner {
  position: relative;
  min-height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background: url("/images/hero.jpg") center/cover no-repeat;
  box-shadow: var(--shadow);
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.38); /* dark overlay so white text pops */
}
.hero-banner .content {
  position: relative;          /* above overlay */
  padding: 4rem 1rem;
}