:root{
  --brand-900:#0a3f91;--brand-800:#0b4fb3;--brand-700:#0d6efd;--brand-600:#2d82ff;--brand-100:#e8f1ff
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;line-height:1.55}

.object-fit-cover{object-fit:cover}
.soft{background:rgba(13,110,253,.12);color:#0d6efd}
.bg-brand{background:var(--brand-700)!important}
.text-brand{color:var(--brand-700)!important}

.navbar .nav-link{color:#fff!important;opacity:.92}
.navbar .nav-link.active{opacity:1;font-weight:600;text-decoration:underline}
.btn-primary{background:var(--brand-700);border-color:var(--brand-700)}
.btn-primary:hover{background:var(--brand-800);border-color:var(--brand-800)}
.card{border-radius:1rem}
.btn-lg{padding:.7rem 1.25rem;border-radius:.8rem}
.lift{transition:.2s transform,.2s box-shadow}
.lift:hover{transform:translateY(-3px);box-shadow:0 .75rem 1.25rem rgba(0,0,0,.12)}

.hero-home,.hero-about,.hero-services{
  position:relative;
  color:#fff;
  background:linear-gradient(160deg,var(--brand-700) 0%,var(--brand-800) 58%,#0b1b33 100%);
}
.hero-home .badge,.hero-about .badge,.hero-services .badge{background:rgba(255,255,255,.15);color:#fff}
.hero-home .lead,.hero-about .lead,.hero-services .lead{color:rgba(255,255,255,.9)}
.shape-bottom{
  position:absolute;left:0;right:0;bottom:-1px;height:220px;
  background:linear-gradient(180deg,rgba(13,110,253,.35),rgba(255,255,255,0));
  pointer-events:none
}

.home-chip,.about-chip{
  display:inline-block;margin:.25rem .5rem .25rem 0;padding:.35rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.18);color:#fff;font-weight:600;font-size:.85rem;border:1px solid rgba(255,255,255,.25)
}

/* services cards: dark overlay already in inline style; keep text legible */
.ratio-cover{position:relative}
.ratio-cover .card-cover{position:absolute;inset:0;background-size:cover;background-position:center}
.ratio-cover .overlay::after{content:"";position:absolute;inset:0}

.stat-num{font-size:2rem;font-weight:800;color:#0a3f91}
.stat-sub{color:#6c757d}

/* roadmap */
.roadmap{position:relative}
.roadmap-line{
  position:absolute;left:8px;top:56px;bottom:16px;width:3px;
  background:linear-gradient(#cfe2ff,#0d6efd);
  mask:linear-gradient(#000 0 var(--roadPct,0%),transparent var(--roadPct,0%))
}
.step{position:relative;padding-left:26px}
.step .dot{position:absolute;left:0;top:18px;width:12px;height:12px;border-radius:50%;background:#0d6efd;box-shadow:0 0 0 4px #e8f1ff}

/* WhatsApp floating button */
.wa-float{position:fixed;right:18px;bottom:18px;background:#25D366;color:#fff;display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.2);text-decoration:none;z-index:1030}
.wa-float .wa-icon{display:inline-flex}
.wa-float .wa-text{font-weight:600}

/* contact helpers */
.contact-hero{background:linear-gradient(160deg,var(--brand-700) 0%,var(--brand-800) 60%,#0b1b33 100%);color:#fff}
.glass{background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.4);border-radius:1rem}
.icon-circle{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-100);color:var(--brand-700)}
.hours li{display:flex;justify-content:space-between;border-bottom:1px dashed #e9ecef;padding:.35rem 0;margin:0}
.mini-note{font-size:.9rem;color:#e6e6e6}
/* Roadmap mask: grow/shrink with --roadPct; include webkit for mobile */
.roadmap-line{
  background:linear-gradient(#cfe2ff,#0d6efd);
  -webkit-mask-image: linear-gradient(to bottom,#000 0 var(--roadPct,0%),transparent var(--roadPct,0%));
  mask-image: linear-gradient(to bottom,#000 0 var(--roadPct,0%),transparent var(--roadPct,0%));
  will-change: transform;
}
/* Roadmap mask (mobile-safe) */
.roadmap-line{
  -webkit-mask-image: linear-gradient(to bottom,#000 0 var(--roadPct,0%),transparent var(--roadPct,0%));
  mask-image: linear-gradient(to bottom,#000 0 var(--roadPct,0%),transparent var(--roadPct,0%));
}