:root{
  /* Brand from logo */
  --brand: #332e81;          /* deep indigo (primary) */
  --brand-contrast: #ffffff; /* text on indigo */

  --accent: #f9b83f;         /* amber (secondary/accent) */
  --accent-contrast: #000000;/* text on amber */

  --ink: #0b0b0b;            /* body text */
  --bg: #e6e6e6;             /* page background from logo */
  --muted: #f4f5f7;          /* soft containers/cards */
}

/* Base */
html, body { background-color: var(--bg); color: var(--ink); }
a { color: var(--brand); }
a:hover { filter: brightness(1.1); }

/* Utility brand classes */
.bg-brand { background: var(--brand) !important; color: var(--brand-contrast) !important; }
.text-brand { color: var(--brand) !important; }

.btn-brand{
  background: var(--brand);
  color: var(--brand-contrast);
  border: none;
}
.btn-brand:hover{ filter: brightness(1.08); }

.btn-accent{
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
}
.btn-accent:hover{ filter: brightness(1.06); }

.badge-accent{
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: .5rem;
}

/* Cards/containers */
.card, .rounded-4.bg-light, .p-3.border.rounded-3.bg-white{
  background: #ffffff;
}

/* Hero */
.hero{
  background:
    linear-gradient(135deg, var(--brand) 0%, #1f1b5b 55%, #0a0a0a 100%);
  color: var(--brand-contrast);
}
.hero .btn-outline-light{
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.hero .btn-outline-light:hover{
  background: rgba(255,255,255,.12);
}

/* Service cards */
.card-service{
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-service:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.card-service .icon{
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: .75rem;
  background: linear-gradient(135deg, var(--accent), #ffd673);
  color: var(--accent-contrast);
}

/* Navbar recolor */
.navbar.bg-brand .nav-link{
  color: rgba(255,255,255,.9);
}
.navbar.bg-brand .nav-link:hover{
  color: #fff;
}

/* Footer on dark */
footer.bg-dark{
  background: #0f0f12 !important;
}
