:root { 
  --a7-blue: #2563eb; 
  --a7-blue-dark: #1e3a8a; 
  --a7-blue-light: #3b82f6;
  --a7-dark: #0f172a; 
}

body { 
  background: #ffffff; 
}

.navbar { 
  background: rgba(15,23,42,.95); 
  backdrop-filter: blur(8px); 
}

.hero {
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  color: #fff;
  background: #0f172a;
  overflow: hidden;
}

.hero::before{
  content:"";
  position:absolute; 
  inset:0;
  /* Replace hero-banner.png with your banner file (recommended 1920x800) */
  background-image: url("../images/hero-banner.png");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.03);
  z-index:0;
}

.hero::after{
  content:"";
  position:absolute; 
  inset:0;
  background: linear-gradient(90deg, rgba(15,23,42,.88) 0%, rgba(30,58,138,.55) 55%, rgba(37,99,235,.25) 100%);
  z-index:0;
}

.hero .content { 
  position: relative; 
  z-index: 1; 
}

.badge-a7 { 
  background: rgba(37,99,235,.18); 
  border: 1px solid rgba(37,99,235,.35); 
  color: #fff; 
}

.btn-a7 { 
  background: var(--a7-blue); 
  border-color: var(--a7-blue); 
}

.btn-a7:hover { 
  background: var(--a7-blue-dark); 
  border-color: var(--a7-blue-dark); 
  filter: brightness(1.05); 
}

.section-title { 
  letter-spacing: .02em; 
}

.card { 
  border: 1px solid rgba(15,23,42,.08); 
  box-shadow: 0 10px 25px rgba(15,23,42,.06); 
}

.icon-pill{
  width: 44px; 
  height: 44px;
  display:inline-grid; 
  place-items:center;
  border-radius: 14px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--a7-blue);
}

.stat{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 10px 25px rgba(15,23,42,.05);
}

.soft-bg { 
  background: linear-gradient(180deg, rgba(37,99,235,.03), rgba(37,99,235,0)); 
}

.footer { 
  background: #0f172a; 
  color: rgba(255,255,255,.85); 
}

.footer a { 
  color: rgba(255,255,255,.85); 
}

.footer a:hover { 
  color: #fff; 
}

.form-control, .form-select { 
  border-radius: 12px; 
}

.navbar-brand { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
}