:root{
  --brand:#0b5ed7;
  --brand2:#0f172a;
  --wa:#25D366;
  --text:#0b1220;
  --muted:#6b7280;
  --card:#ffffff;
}

html { scroll-behavior: smooth; }
body{
  padding-top: 58px;
  color: var(--text);
  background: #fff;
}

.topbar{
  background:#0f172a;
  color:#cbd5e1;
  padding:8px 0;
}
.topbar-link{
  color:#cbd5e1;
  text-decoration:none;
}
.topbar-link:hover{ color:#fff; text-decoration:none; }

.brand-mark{
  background: linear-gradient(90deg, var(--brand), #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero{
  position: relative;
}
.hero-slide{
  min-height: 78vh;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(2,6,23,.75), rgba(2,6,23,.35));
}
.hero-content{
  position: relative;
  padding: 64px 0;
  color: #fff;
}
.hero-badges .badge{
  margin-right:8px;
  margin-bottom:8px;
  padding:.55rem .8rem;
}

.quick-quote{
  border-radius: 14px;
}
.quick-quote .card-body{
  padding: 1.25rem 1.25rem;
}

.feature-card{
  background: var(--card);
  border-radius: 14px;
  padding: 24px 18px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  height:100%;
}
.feature-icon{
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background: rgba(11,94,215,.12);
  color: var(--brand);
  font-size: 22px;
  margin: 0 auto;
}

.steps .step{
  display:flex;
  gap:14px;
  margin: 14px 0;
}
.step-num{
  width:40px;height:40px;
  border-radius: 12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(11,94,215,.10);
  color: var(--brand);
  font-weight: 800;
}
.step-body p{ margin:0; }

.fleet-card{
  border:0;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.fleet-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(2,6,23,.10);
}
.fleet-badge{
  position:absolute;
  top:12px; left:12px;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size: 12px;
  font-weight:700;
  background: rgba(255,255,255,.92);
}
.fleet-img{
  height: 210px;
  object-fit: cover;
  width: 100%;
}
.fleet-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.meta-pill{
  font-size: 12px;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
}
.fleet-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
}

.testimonial{
  border-radius: 14px;
}
.avatar{
  width:42px;height:42px;
  border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(11,94,215,.12);
  color: var(--brand);
  font-weight: 800;
}

.social-row a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius: 12px;
  background: rgba(2,6,23,.06);
  color: #0f172a;
  margin-right: 8px;
  text-decoration:none;
}
.social-row a:hover{
  background: rgba(2,6,23,.10);
  text-decoration:none;
}

.footer{
  background:#0b1220;
  color:#cbd5e1;
}
.footer-title{
  font-weight:800;
  margin-bottom: 10px;
}
.footer-links a{
  color:#cbd5e1;
  text-decoration:none;
}
.footer-links a:hover{ color:#fff; text-decoration:none; }

.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--wa);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  text-decoration:none;
  font-size: 28px;
}
.wa-float:hover{ color:#fff; text-decoration:none; filter: brightness(1.03); }

@media (max-width: 991px){
  .hero-slide{ min-height: 84vh; }
}