/* Base */
:root{
  --brand:#0f172a; /* slate-900 */
  --brand-2:#0b5ed7; /* bootstrap primary */
}
body{font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;}
.topbar{background:linear-gradient(90deg,#0b5ed7,#0a58ca)}
.hero{background:linear-gradient(120deg,#00172e 0%,#003a6b 50%,#005c8f 100%); color:#fff;}
.hero-card{border:1px solid #e9ecef}
.brand{max-height:90px; opacity:.8}
.footer{background:#0b0f19}
.wa-float{position:fixed;right:18px;bottom:18px;background:#25D366;color:#fff;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 10px 20px rgba(0,0,0,.2);z-index:999}
.step .display-6{font-weight:800;color:#0b5ed7}

/* Utilities */
.card .stretched-link{font-weight:600}

/* Forms */
input.form-control, select.form-select, textarea.form-control{border-radius:.7rem}
.btn{border-radius:.7rem}

/* Responsive tweaks */
@media (max-width: 576px){
  .hero{padding: 2.5rem 0}
}

/* Footer links hover */
.footer a:hover{color:#fff!important}

/* Simple include placeholders for nav/footer (progressive enhancement) */
[data-include="nav"], [data-include="footer"]{display:block}

/* Project cards */
.project img{aspect-ratio: 16/9; object-fit: cover}


#business {
  background: #f8f9fa;
}

.business-box img {
  height: 240px;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.4s ease;
  border-bottom: 3px solid #f4c10f;
}

.business-box:hover img {
  transform: scale(1.05);
  filter: brightness(0.9);
}

.business-box .card-body {
  padding: 20px 18px 30px;
  transition: all 0.3s ease;
}

.business-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}