:root{
  --brand-blue:#336699;
  --accent-orange:#ff8c00;
  --text:#000;
  --bg:#fff;
}

html,body{ background:var(--bg); color:var(--text); }
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

h1{ color:var(--brand-blue); }
h2,h3{ color:var(--accent-orange); }
p,li{ color:var(--text); }

.section-pad{ padding:20px 0; }

.navbar-brand strong{ color:var(--brand-blue); }
.navbar .nav-link{ font-weight:600; }
.navbar .nav-link.active{ color:var(--brand-blue) !important; }

.hero{
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(51,102,153,.06), rgba(255,255,255,1));
}
.hero-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  overflow:hidden;
}
.hero-graphic{
  background: radial-gradient(circle at 20% 20%, rgba(255,140,0,.18), transparent 55%),
              radial-gradient(circle at 70% 30%, rgba(51,102,153,.18), transparent 55%),
              #fff;
  border-left:1px solid rgba(0,0,0,.06);
  min-height: 240px;
}

.badge-soft{
  background: rgba(51,102,153,.10);
  color: var(--brand-blue);
  border:1px solid rgba(51,102,153,.20);
}

.card{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
}
.card .card-title{ color:var(--brand-blue); }

.free-audit-cta{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1050;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.footer{
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Desktop (>=1200px) */
@media (min-width:1200px){
  .hero-graphic{ min-height: 320px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199.98px){
  .hero-graphic{ min-height: 280px; }
}

/* Mobile (under 350px) */
@media (max-width:349.98px){
  .navbar-brand{ font-size: 0.95rem; }
  h1{ font-size: 1.55rem; }
  .btn{ padding: .5rem .75rem; }
  .free-audit-cta{
    right: 10px;
    bottom: 10px;
  }
}