:root{
  --brand:#10b981;
  --brand-2:#0ea5e9;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#f8fafc;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --radius: 18px;
}
*{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{color:var(--ink); background:var(--bg)}
a{color:inherit}
a:hover{color:var(--brand)}
.topbar{background:linear-gradient(90deg, rgba(16,185,129,.10), rgba(14,165,233,.08))}
.topbar-link{color:var(--ink); text-decoration:none}
.topbar-link:hover{color:var(--brand)}
.brand-logo{height:34px; width:auto}
.brand-name{font-weight:700; letter-spacing:-.02em}
.navbar .nav-link{font-weight:500}
.btn-primary{background:var(--brand); border-color:var(--brand)}
.btn-primary:hover{background:#0a9a6d; border-color:#0a9a6d}
.btn-outline-primary{border-color:rgba(16,185,129,.45); color:var(--ink)}
.btn-outline-primary:hover{background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.55); color:var(--ink)}

.cta-link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.65rem .95rem;
  border-radius:999px;
  border:1px solid rgba(16,185,129,.25);
  background:rgba(16,185,129,.08);
  color:var(--ink);
  text-decoration:none;
}
.cta-link:hover{
  background:rgba(16,185,129,.14);
  border-color:rgba(16,185,129,.35);
  color:var(--ink);
}

.hero{
  position:relative;
  padding:72px 0 38px;
  overflow:hidden;
  background: radial-gradient(1200px 480px at 10% 0%, rgba(16,185,129,.20), transparent 60%),
              radial-gradient(900px 420px at 95% 10%, rgba(14,165,233,.18), transparent 55%),
              linear-gradient(180deg, #ffffff, var(--bg));
}
.hero .card-hero{
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  backdrop-filter: blur(8px);
}
.badge-soft{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px;
  background:rgba(16,185,129,.10);
  border:1px solid rgba(16,185,129,.22);
  color:var(--ink);
  font-weight:600; font-size:.82rem;
}
.kpi{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:var(--card);
  padding:16px;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.kpi .label{color:var(--muted); font-size:.85rem}
.section{padding:56px 0}
.section-title{letter-spacing:-.03em}
.card-soft{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.icon-pill{
  height:44px; width:44px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(14,165,233,.10);
  border:1px solid rgba(14,165,233,.18);
}
.card-soft:hover{transform: translateY(-2px); transition: .18s ease; box-shadow: var(--shadow)}
.bg-image{
  border-radius: calc(var(--radius) + 10px);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  overflow:hidden;
  aspect-ratio: 16/10;
  max-height: 520px;
}
.bg-image.media-lg{aspect-ratio: 16/10; max-height: 540px;}
.bg-image.media-md{aspect-ratio: 4/3; max-height: 440px;}
.bg-image.media-sm{aspect-ratio: 4/3; max-height: 360px;}
.bg-image img{width:100%; height:100%; object-fit:cover; display:block}
.alert-soft{
  background:rgba(2,132,199,.08);
  border:1px solid rgba(2,132,199,.18);
  border-radius: var(--radius);
}
.cta{
  border-radius: calc(var(--radius) + 14px);
  border:1px solid rgba(16,185,129,.22);
  background: radial-gradient(600px 260px at 10% 0%, rgba(16,185,129,.20), transparent 60%),
              radial-gradient(600px 240px at 90% 20%, rgba(14,165,233,.16), transparent 55%),
              #ffffff;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.cta .mini{
  border:1px dashed rgba(100,116,139,.4);
  border-radius: 14px;
  padding:10px 12px;
  background:rgba(255,255,255,.65);
}
.page-hero{
  padding:52px 0 18px;
  background: linear-gradient(180deg,#ffffff,var(--bg));
  border-bottom:1px solid var(--border);
}
.breadcrumb a{text-decoration:none; color:var(--muted)}
.breadcrumb a:hover{color:var(--brand)}
.step{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px; border:1px solid var(--border); border-radius: var(--radius);
  background:var(--card);
}
.step .num{
  height:36px; width:36px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.22);
  font-weight:800;
}
.form-control, .form-select{
  border-radius: 14px;
  border-color: var(--border);
  padding: .75rem .9rem;
}
.site-footer a{text-decoration:none; color:var(--muted)}
.site-footer a:hover{color:var(--brand)}
.img-float{
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-8px)}
}

/* Fixed call consultation widget */
.call-widget{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:99999;
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
  padding:14px 16px;
  max-width:220px;
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:callWidgetFadeIn 0.5s ease;
}
.call-widget-text{
  font-size:14px;
  font-weight:600;
  color:#0f172a;
  line-height:1.3;
}
.call-widget-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#10b981;
  color:#ffffff;
  font-size:14px;
  font-weight:600;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  transition:background 0.2s ease, transform 0.2s ease;
}
.call-widget-button::before{
  content:"☎";
  font-size:14px;
}
.call-widget-button:hover{
  background:#059669;
  transform:translateY(-1px);
}
@keyframes callWidgetFadeIn{
  from{opacity:0; transform:translateY(15px);}
  to{opacity:1; transform:translateY(0);}
}
@media (max-width:480px){
  .call-widget{ right:12px; bottom:12px; max-width:180px; }
}


/* --- Responsive refinements (mobile + tablet) --- */
@media (max-width: 992px){
  .page-hero{padding: 56px 0 18px;}
  .section{padding: 56px 0;}
  .bg-image{max-height: 420px;}
}

@media (max-width: 768px){
  .navbar .nav-link{padding: .5rem .6rem;}
  .section{padding: 48px 0;}
  .display-6{font-size: 1.9rem;}
  .lead{font-size: 1rem;}
  .bg-image{aspect-ratio: 4/3; max-height: 360px;}
  .call-widget{right: 12px; bottom: 12px; max-width: 190px;}
}

@media (max-width: 480px){
  .page-hero h1{font-size: 1.6rem;}
  .page-hero .breadcrumb{display:none;}
  .bg-image{aspect-ratio: 1/1; max-height: 320px;}
  .btn{width:100%;}
}


/* --- Mobile horizontal overflow fix --- */
html, body{
  width: 100%;
  overflow-x: hidden;
}
body{
  position: relative;
}
img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}
.call-widget{
  max-width: min(240px, calc(100vw - 24px));
}
.container, .container-fluid{
  overflow-x: clip;
}