/* ================= HEADER / NAVBAR ================= */
.contact-header{
  background:linear-gradient(160deg, #6D28D9 0%, #7C3AED 35%, #A855F7 65%, #F3E8FF 100%);
  padding:3rem 0;
}

/* ================= HERO ================= */
.hero{ padding-top:2rem; padding-bottom:2rem; color:#fff; }

.badge-pill-light{
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.15);
  color:#fff;
  padding:.4rem 1rem;
  border-radius:50px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
}
.dot-live{ color:#4ADE80; font-size:.5rem; }

.hero-title{
  font-size:3.2rem;
  font-weight:800;
  line-height:1.1;
  color:#fff;
}
.hero-desc{
  font-size:1.05rem;
  color:rgba(255,255,255,.85);
  max-width:520px;
  margin-top:1.2rem;
}
.hero-features{
  font-size:.85rem;
  color:rgba(255,255,255,.85);
  font-weight:500;
}
.hero-features i{ color:#4ADE80; }

.btn-light-pill{
  background:#fff;
  color:var(--primary-dark);
  border-radius:50px;
  padding:.75rem 1.6rem;
  font-weight:600;
  font-size:.92rem;
}
.btn-light-pill:hover{ background:#f4f4f4; color:var(--primary-dark); }

.btn-outline-pill{
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  border-radius:50px;
  padding:.75rem 1.6rem;
  font-weight:600;
  font-size:.92rem;
}


/* ================= RESPONSIVE ================= */
@media (max-width: 991px){
  .hero-title{ font-size:2.4rem; }
  .section-title{ font-size:1.9rem; }
  .dashboard-card{ margin:0 auto; }
}
@media (max-width: 576px){
  .hero-title{ font-size:2rem; }
  .section-title{ font-size:1.6rem; }
  .compare-table td, .compare-table th{ padding:.7rem .8rem; font-size:.8rem; }
}