:root{
  --bg: #ffffff;
  --card: #f6f9ff;
  --text: #0b1b33;
  --muted: #4b5b73;
  --brand: #0b6ef3;
  --brand2:#18b7ff;
  --border: rgba(11,27,51,.12);
  --shadow: 0 10px 30px rgba(11,27,51,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(11,110,243,.18), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(24,183,255,.16), transparent 55%), #ffffff;
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%; height:auto; display:block}
.container{width:min(1140px, calc(100% - 40px)); margin:0 auto}
.muted{color:var(--muted)}
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.2rem .6rem; border:1px solid var(--border);
  border-radius:999px; background:#ffffff;
}
.sr-only{position:absolute; left:-9999px}
.skip-link{position:absolute; left:-9999px; top:10px; background:#fff; color:#000; padding:8px 10px; border-radius:10px}
.skip-link:focus{left:10px; z-index:9999}

.topbar{border-bottom:0; background:linear-gradient(90deg, var(--brand), var(--brand2)); color:#fff}
.topbar a{color:#fff; text-decoration:none}
.topbar .muted{color:rgba(255,255,255,.88)}
.topbar .badge{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.22)}
.topbar .phone-ico{display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center}
.topbar .phone-ico svg{display:block; width:18px; height:18px}

.topbar-inner{display:flex; justify-content:space-between; align-items:center; padding:10px 0; gap:12px; flex-wrap:wrap}
.topbar-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.topbar-phone{display:inline-flex; align-items:center; gap:.5rem; padding:.48rem .9rem; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:linear-gradient(180deg, #22c55e, #16a34a); color:#fff; font-weight:700; box-shadow:0 10px 22px rgba(0,0,0,.18)}
.topbar-phone:hover{filter:brightness(.98); transform:translateY(-1px)}
.topbar-phone:active{transform:translateY(0)}
.phone-ico{opacity:.9}

.navwrap{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.72); backdrop-filter: blur(14px); border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.logo{display:flex; align-items:center; gap:10px}
.logo-mark{font-size:26px}
.logo-text{display:flex; flex-direction:column; line-height:1.1}
.logo-sub{font-size:12px; color:var(--muted)}
.site-nav{display:flex; align-items:center; gap:12px}
.site-nav a{padding:8px 10px; border-radius:12px; color:rgba(11,27,51,.92)}
.site-nav a:hover{background:rgba(11,110,243,.08)}
.site-nav a.cta{
  padding:10px 14px;
  border:1px solid rgba(24,183,255,.22);
  background:linear-gradient(90deg, rgba(11,110,243,.14), rgba(24,183,255,.10));
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.nav-toggle{display:none; border:1px solid var(--border); background:rgba(255,255,255,.9); border-radius:14px; padding:10px 12px}
.burger{display:block; width:20px; height:2px; background:rgba(11,27,51,.92); position:relative}
.burger:before,.burger:after{content:""; position:absolute; left:0; width:20px; height:2px; background:rgba(11,27,51,.92)}
.burger:before{top:-6px}
.burger:after{top:6px}

.hero{padding:56px 0 28px;}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:stretch}
.hero-card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9));
  border-radius:24px;
  padding:26px;
  box-shadow:var(--shadow);
}
.hero h1{font-size:42px; line-height:1.05; margin:10px 0 12px}
.hero p{margin:0 0 16px; color:rgba(11,27,51,.86); font-size:16px}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.82);
}
.btn.primary{
  border:1px solid rgba(11,110,243,.22);
  background:linear-gradient(90deg, rgba(55,189,248,.24), rgba(24,183,255,.10));
}
.kpis{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
.kpi{
  border:1px solid var(--border);
  background:rgba(11,110,243,.06);
  border-radius:18px;
  padding:14px;
}
.kpi strong{display:block; font-size:18px}
.kpi span{color:var(--muted); font-size:13px}

.section{padding:28px 0}
.section h2{margin:0 0 14px; font-size:24px}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:12px}
.section-head p{margin:0; max-width:68ch}
.grid{display:grid; gap:14px}
.grid.cards{grid-template-columns: repeat(3, 1fr)}
.card{
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  border-radius:22px;
  padding:18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.card .icon{font-size:22px; opacity:.95}
.card h3{margin:10px 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted)}
.card .card-link{margin-top:12px; display:inline-flex; gap:.4rem; color:rgba(11,27,51,.95)}

.pillbar{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.pill{padding:8px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(11,110,243,.06); color:rgba(11,27,51,.9); font-size:13px}

.banner{
  border:1px solid rgba(55,189,248,.25);
  background:linear-gradient(90deg, rgba(55,189,248,.18), rgba(92,240,198,.14));
  border-radius:26px;
  padding:18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.banner strong{font-size:18px}
.banner .btn{background:rgba(255,255,255,.82)}
.site-footer{margin-top:30px; border-top:1px solid var(--border); background:rgba(255,255,255,.82)}
.footer-grid{display:grid; grid-template-columns: 1.4fr .8fr .8fr; gap:18px; padding:26px 0}
.footer-brand{display:flex; gap:10px; align-items:flex-start; margin-bottom:10px}
.footer-links{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px}
.footer-links a{color:rgba(11,27,51,.88)}
.footer-bottom{display:flex; justify-content:space-between; padding:14px 0; gap:10px; border-top:1px solid var(--border); flex-wrap:wrap}

.floating-actions{
  position:fixed; right:16px; bottom:16px;
  display:flex; flex-direction:column; gap:10px; z-index:60
}
.fab{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.8);
  box-shadow: 0 16px 34px rgba(0,0,0,.38);
}
.fab-text{font-weight:600}
.fab-whatsapp{border-color: rgba(37,211,102,.25); color:#25D366}
.fab-call{border-color: rgba(11,110,243,.22)}

.breadcrumbs{margin-top:18px; color:var(--muted); font-size:13px}
.breadcrumbs a{color:rgba(11,27,51,.84)}
.pagehead{padding:34px 0 14px}
.pagehead h1{margin:0 0 10px; font-size:34px; line-height:1.1}
.pagehead p{margin:0; color:rgba(11,27,51,.86)}
.list-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
.smallcard{border:1px solid var(--border); background:#ffffff; border-radius:18px; padding:14px}
a.smallcard{display:block; color:inherit; text-decoration:none}
a.smallcard:hover{box-shadow:0 14px 30px rgba(0,0,0,.10); transform:translateY(-2px)}
a.smallcard:focus{outline:3px solid rgba(11,110,243,.25); outline-offset:2px}

.smallcard strong{display:block; margin:6px 0 8px}
.smallcard .price{color:rgba(92,240,198,.9); font-weight:700}
.smallcard a{display:inline-flex; gap:.4rem; margin-top:10px; color:rgba(11,27,51,.95)}
.smallcard .link{display:inline-flex; gap:.4rem; margin-top:10px; color:rgba(11,27,51,.95); font-weight:600}
.notice{border:1px dashed rgba(11,27,51,.25); border-radius:18px; padding:14px; color:rgba(11,27,51,.86); background:rgba(11,110,243,.06)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid.cards{grid-template-columns: repeat(2, 1fr)}
  .list-grid{grid-template-columns: repeat(2, 1fr)}
  .footer-grid{grid-template-columns: 1fr}
}
@media (max-width: 720px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:absolute;
    right:20px;
    top:64px;
    width:min(340px, calc(100vw - 40px));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px;
    border-radius:18px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.92);
    box-shadow:var(--shadow);
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 12px}
  .grid.cards{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .fab-text{display:none}
}


/* Coverage / sectors */
.coverage{padding:48px 0 10px}
.coverage-lead{margin:0 0 18px;text-align:center;font-size:18px}
.coverage-lead .brand{color:var(--brand)}
.coverage-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:16px}
.coverage-card{background:linear-gradient(180deg, rgba(11,110,243,.06), rgba(24,183,255,.04));border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);padding:18px}
.coverage-title{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.coverage-title h3{margin:0;font-size:22px}
.badge-icon{width:44px;height:44px;border-radius:14px;background:rgba(11,110,243,.12);display:grid;place-items:center}
.badge-icon.alt{background:rgba(24,183,255,.14)}
.pill-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px}
.pill{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--border);font-weight:600;color:var(--text);font-size:14px}
.coverage-banner{margin:22px auto 0;max-width:980px;border-radius:22px;padding:22px 18px;background:linear-gradient(90deg, var(--brand), var(--brand2));color:#fff;box-shadow:var(--shadow);text-align:center}
.coverage-banner .muted{color:rgba(255,255,255,.9)}
.coverage-banner .banner-title{font-size:22px;margin-bottom:4px}
@media (max-width: 920px){
  .coverage-grid{grid-template-columns:1fr}
  .pill-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .pill-grid{grid-template-columns:1fr}
}


.smallcard{overflow:hidden}
.smallcard .thumb{height:170px;border-radius:14px;overflow:hidden;margin-bottom:12px;border:1px solid var(--border);background:var(--card)}
.smallcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.smallcard .icon{display:none}



/* Service gallery tiles */
.service-gallery{padding:34px 0}
.service-gallery h2{margin:0 0 6px}
.gallery-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:22px;margin-top:14px}
.tile{display:block;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow);text-decoration:none;color:var(--text)}
.tile-head{padding:14px 16px;background:linear-gradient(90deg, rgba(11,110,243,.12), rgba(24,183,255,.10));font-weight:800;text-align:center}
.tile img{width:100%;height:240px;object-fit:cover;display:block}
.tile:hover{transform:translateY(-2px)}
@media (max-width: 980px){.gallery-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 560px){.gallery-grid{grid-template-columns:1fr}.tile img{height:210px}}


/* Service pages */
.page-hero{padding:34px 0}
.page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
.page-hero h1{margin:10px 0 10px}
.page-hero p{color:var(--muted);font-size:18px;line-height:1.6;margin:0 0 16px}
.page-hero-media{border-radius:22px;overflow:hidden;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow)}
.page-hero-media img{width:100%;height:360px;object-fit:cover;display:block}
.content{padding:10px 0 30px}
.content h2{margin:18px 0 10px}
.content ul{margin:0 0 10px 18px;color:var(--muted);line-height:1.7}
.content .two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}
.note{padding:14px 14px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(11,110,243,.06), rgba(24,183,255,.04))}
.video-wrap{border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;box-shadow:var(--shadow)}
.video-wrap video{width:100%;display:block}
@media (max-width: 920px){.page-hero-grid{grid-template-columns:1fr}.page-hero-media img{height:300px}}



/* Floating buttons */
.fab-icon{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-right:8px}
.fab-icon img{width:20px; height:20px; display:block}
.fab-whatsapp{background:#eafff3; border-color:#bfead3}
.fab-whatsapp:hover{background:#d9ffe9}

/* Service gallery tiles: lighter, blue */
.tile{border:1px solid rgba(24,183,255,.18); background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 26px rgba(10,40,80,.06)}
.tile img{display:block; width:100%; height:220px; object-fit:cover}
.tile-head{background:linear-gradient(90deg,#0b73ff,#13b7ff); color:#fff; font-weight:800; padding:14px 16px; letter-spacing:.2px}

/* Benefits section */
.benefits{padding:54px 0; background:linear-gradient(180deg,#ffffff, #f3fbff)}
.benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.benefit{background:#fff; border:1px solid rgba(24,183,255,.14); border-radius:18px; padding:16px 16px 14px; box-shadow:0 10px 24px rgba(10,40,80,.05)}
.bicon{width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(19,183,255,.12); border:1px solid rgba(19,183,255,.18); margin-bottom:10px; font-size:20px}
@media (max-width: 900px){.benefit-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.benefit-grid{grid-template-columns:1fr}}


/* Media inside cards (homepage) */
.card .card-media{margin:-14px -14px 10px -14px;border-radius:16px 16px 14px 14px;overflow:hidden}
.card .card-media img{width:100%;height:170px;object-fit:cover;display:block}
@media (max-width: 720px){ .card .card-media img{height:160px} }


/* Mobile polish: topbar + floating actions */
@media (max-width: 600px){
  .topbar-inner{
    flex-direction:column;
    align-items:stretch;
    padding:8px 0;
    gap:8px;
  }
  .topbar-left{
    width:100%;
    justify-content:space-between;
    gap:8px;
  }
  .topbar-left .badge{
    padding:6px 10px;
    font-size:12px;
    border-radius:999px;
  }
  .topbar-left .muted{
    font-size:12px;
    opacity:.95;
    white-space:nowrap;
  }
  .topbar-right{width:100%}
  .topbar-phone{
    width:100%;
    justify-content:center;
    padding:10px 14px;
    font-size:15px;
  }

  /* Floating buttons: compact circles like native apps */
  .floating-actions{
    right:14px;
    bottom:92px;
    gap:10px;
  }
  .fab{
    width:56px;
    height:56px;
    padding:0;
    border-radius:50%;
    justify-content:center;
    gap:0;
    box-shadow:0 14px 30px rgba(0,0,0,.30);
  }
  .fab .fab-text{display:none}
  /* Make icons perfectly centered inside the circles */
  .fab .fab-icon{margin-right:0; width:24px; height:24px}
  .fab svg{width:24px;height:24px;display:block}
  .fab img{width:24px;height:24px;display:block}
  .fab-whatsapp img{filter:none}
  .fab-whatsapp{
    background:#25D366;
    border:none;
    color:#fff;
  }
  .fab-call{
    background: var(--brand);
    border:none;
    color:#fff;
  }
}