:root{
  --blue-600: #0b74da;
  --blue-700: #085ab3;
  --electric: #00a3ff;
  --muted: #666f7a;
  --container: 1100px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);color:#111}
.wrap{max-width:var(--container);margin:24px auto;padding:20px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo-img{height:60px}
nav a{margin-left:18px;text-decoration:none;color:var(--blue-700);font-weight:600}
.hero{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:center;margin-top:20px}
.hero-card{padding:28px;border-radius:12px;background:rgba(11,116,218,0.06);box-shadow:0 6px 20px rgba(11,116,218,0.04)}
h1{margin:0;font-size:34px;color:var(--blue-700)}
p.lead{color:var(--muted);margin-top:12px;line-height:1.5}
.cta{display:inline-block;margin-top:18px;padding:10px 16px;border-radius:10px;background:var(--blue-600);color:#fff;text-decoration:none;font-weight:700}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.card{background:white;border-radius:10px;padding:16px;box-shadow:0 6px 18px rgba(16,24,40,0.04)}
.icon{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--blue-600),var(--blue-700));display:flex;align-items:center;justify-content:center;color:white;font-weight:700}
footer{margin-top:32px;padding:18px 0;border-top:1px solid #eef3fb;color:var(--muted)}

/* loading bar */
#loading-bar{position:fixed;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--electric),transparent);transform-origin:left;transform:scaleX(0);transition:transform .25s ease;z-index:9999;margin-top:72px}

/* scroll-to-top */
#scrollTopBtn{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:22px;background:var(--electric);color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.12);opacity:0;visibility:hidden;transition:opacity .25s, visibility .25s;z-index:9999}

/* WhatsApp floater */
.wh-widget{position:fixed;right:18px;bottom:86px;z-index:9998}
.wh-widget a{display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:12px 14px;border-radius:30px;text-decoration:none;box-shadow:0 10px 30px rgba(37,211,102,0.14);font-weight:700}

/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2,1fr)}
  nav{display:none}
}
@media (max-width:520px){
  .services{grid-template-columns:1fr}
  h1{font-size:26px}
}