/* =========================
   BRAND VARIABLES
========================= */
:root {
  --brand-primary: #b91d57;
  --brand-primary-dark: #9f174a;
  --brand-black: #000000;
  --brand-white: #ffffff;
  --brand-muted: #666666;
  --brand-light: #f8f9fa;
}

/* =========================
   GLOBAL STYLES
========================= */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--brand-light);
  color: #222;
  line-height: 1.7;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
}

a:hover {
  color: var(--brand-primary-dark);
}

/* =========================
   HEADINGS
========================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--brand-black);
}

/* =========================
   HERO SECTIONS
========================= */
.section-hero,
.bg-primary {
  background: linear-gradient(
    135deg,
    var(--brand-primary),
    var(--brand-primary-dark)
  );
  color: var(--brand-white);
}

.section-hero h1,
.section-hero h2,
.bg-primary h1,
.bg-primary h2 {
  color: var(--brand-white);
}

/* =========================
   BUTTONS
========================= */
.btn,
.btn-primary,
.btn-brand {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-white);
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 4px;
}

.btn:hover,
.btn-primary:hover,
.btn-brand:hover {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: var(--brand-white);
}

/* =========================
   NAVBAR
========================= */
.navbar {
  background-color: var(--brand-white);
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: #222;
  padding: 0.75rem 1rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--brand-primary);
}

/* =========================
   TOP BAR
========================= */
.top-bar {
  background-color: var(--brand-primary);
  color: var(--brand-white);
  font-size: 13px;
}

.top-bar span {
  opacity: 0.95;
}

/* =========================
   CARDS
========================= */
.card {
  border: none;
  border-radius: 10px;
  background-color: var(--brand-white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.card-title {
  font-weight: 600;
}

/* =========================
   TABLES (ADMIN / DASHBOARD)
========================= */
table.table {
  background-color: var(--brand-white);
  border-radius: 10px;
  overflow: hidden;
}

table.table th {
  font-weight: 600;
  background-color: var(--brand-light);
}

table.table th,
table.table td {
  vertical-align: middle;
}

/* =========================
   SIDEBAR (ADMIN)
========================= */
.sidebar {
  background-color: #111;
  min-height: 100vh;
  color: var(--brand-white);
  padding-top: 20px;
}

.sidebar a {
  color: var(--brand-white);
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  font-weight: 500;
}

.sidebar a:hover {
  background-color: var(--brand-primary);
  border-radius: 5px;
}

/* =========================
   FOOTER
========================= */
footer {
  background-color: #111;
  color: var(--brand-white);
}

footer a {
  color: var(--brand-white);
}

footer a:hover {
  color: var(--brand-primary);
}

/* =========================
   UTILITIES
========================= */
.text-brand {
  color: var(--brand-primary);
}

.bg-brand {
  background-color: var(--brand-primary);
  color: var(--brand-white);
}

.section-light {
  background-color: var(--brand-light);
}
.hero { padding: 80px 0; background-size: cover; }
.stats div { font-size: 1.25rem; font-weight: 600; }
.featured .card { border: none; }
.why-us, .how-it-works { text-align: center; }