:root{
  --bg:#ffffff;
  --muted:#6b7280;
  --brand:#2563eb;
  --brand-2:#1d4ed8;
  --surface:#ffffff;
  --card:#fbfdff;
  --ring: rgba(37,99,235,.18);
  --accent:#f6f9ff;
  --shadow: 0 12px 30px rgba(16,24,40,0.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#0b1020;background:var(--bg);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
img{max-width:100%;display:block;height:auto}
.container{width:min(1100px,94%);margin:0 auto}
a{color:inherit;text-decoration:none}

.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eef2f7;z-index:80;backdrop-filter: blur(4px)}
.nav-wrap{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:0.9rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:inherit;text-decoration:none}
.logo{width:44px;height:44px;border-radius:8px;object-fit:cover}
.logo.small{width:32px;height:32px}
.nav{position:relative}
.hamburger{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#111;margin:4px 0;border-radius:2px;transition:all .2s ease}
.nav-list{display:flex;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0}
.nav-list a{color:#111;text-decoration:none;font-weight:600;padding:.45rem .7rem;border-radius:.6rem}
.nav-list a:hover{background:#f8fafc}
.nav-list a.active{background:linear-gradient(90deg,var(--accent),#fff);box-shadow:0 6px 16px rgba(37,99,235,0.06)}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;border-radius:10px;padding:.6rem .95rem;font-weight:700;box-shadow:0 12px 30px rgba(37,99,235,0.08);transition:transform .14s ease,box-shadow .14s ease}
.btn:hover{transform:translateY(-3px)}
.btn-outline{background:#fff;color:#111;border:1px solid #e6eefc}
.btn-ghost{background:transparent;border:1px solid #e6eefc;color:#111;padding:.5rem .9rem;border-radius:10px}
.btn-sm{padding:.4rem .7rem;border-radius:8px}

.phone{display:none;font-weight:700;color:#111}

/* HERO */
.hero{color:#fff;min-height:64vh;display:grid;place-items:center;background-color:#0b1220;border-bottom-left-radius:24px;border-bottom-right-radius:24px;margin-bottom:1.2rem;position:relative}
.hero{background-image:linear-gradient(180deg,rgba(7,11,27,.38),rgba(7,11,27,.38)), var(--bg);background-size:cover;background-position:center}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center;min-height:420px}
.hero-copy h1{font-size:clamp(1.6rem,4.4vw,2.6rem);line-height:1.05;margin:0 0 .6rem}
.lead{font-size:1.05rem;color:#e6eefc;max-width:52ch;margin-bottom:1rem;opacity:.98}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}
.trust-row{display:flex;gap:.5rem;margin-top:1rem;list-style:none;padding:0}
.badge{background:rgba(255,255,255,0.06);color:#fff;padding:.4rem .6rem;border-radius:8px;font-weight:600;font-size:.92rem;border:1px solid rgba(255,255,255,0.04)}

.hero-card{background:linear-gradient(180deg,#ffffff,#f8fbff);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.hero-card img{height:220px;object-fit:cover}
.card-overlay{padding:1rem 1.1rem}
.card-overlay h4{margin:0 0 .25rem;font-size:1.05rem}
.card-overlay p{margin:0 0 .5rem;color:var(--muted)}
.link{font-weight:700;color:var(--brand)}

/* STATS */
.strip.stats{padding:1.4rem 0;margin:0 0 1.2rem;background:#f8fbff;border-radius:10px}
.stats-grid{display:flex;gap:1rem;align-items:center;justify-content:space-between}
.stat-block{display:flex;flex-direction:column;align-items:flex-start}
.stat{font-weight:800;font-size:1.6rem}
.label{color:var(--muted);font-weight:600}

/* CARDS */
.services-preview{padding:1rem 0 2rem}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--card);border-radius:12px;overflow:hidden;border:1px solid #eef6ff;box-shadow:0 8px 24px rgba(16,24,40,0.04)}
.card img{height:180px;object-fit:cover}
.card-body{padding:1rem}
.card h3{margin:0 0 .35rem}
.card p{color:var(--muted);margin:0 0 .6rem}
.card.lift{transition:transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s}
.card.lift:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(16,24,40,0.09)}

/* TESTIMONIALS */
.strip.testimonials{padding:1.6rem 0;margin-top:1rem}
.slider{position:relative;overflow:hidden;border-radius:12px;padding:1rem;background:#fff;border:1px solid #eef6ff;box-shadow:var(--shadow)}
.slide{display:none}
.slide.active{display:block}
.author{margin-top:.6rem;color:var(--muted);font-weight:700}

/* CTA */
.cta{padding:2rem 0;text-align:center;margin:1.2rem 0;background:linear-gradient(90deg,#eff6ff,#ffffff);border-radius:12px}
.cta-actions{display:flex;gap:.8rem;justify-content:center}

/* Floating CTA */
.floating-cta{position:fixed;right:20px;bottom:22px;background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;padding:.8rem 1rem;border-radius:999px;display:flex;gap:.6rem;align-items:center;box-shadow:0 14px 40px rgba(37,99,235,0.18);z-index:120;font-weight:700;text-decoration:none}
.floating-cta svg{opacity:.98}

/* FOOTER */
.site-footer{background:#0b1220;color:#cbd5e1;margin-top:2rem;padding:2rem;border-radius:10px}
.site-footer a{color:#e6eefc}

/* responsiveness */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr 320px}
  .cards{grid-template-columns:1fr 1fr}
  .stats-grid{gap:0.5rem}
}

@media (max-width: 720px){
  .nav-list{position:absolute;right:1rem;top:110%;background:#fff;border:1px solid #eef2f7;border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,0.06);padding:.5rem;display:none;flex-direction:column;min-width:220px}
  .nav-list.open{display:flex}
  .hamburger{display:block}
  .phone{display:none}
  .hero-grid{grid-template-columns:1fr;gap:1rem;padding:1.1rem}
  .hero{border-radius:0 0 0 0;min-height:58vh}
  .cards{grid-template-columns:1fr}
  .strip.stats{padding:1rem;display:block}
  .floating-cta{right:14px;bottom:16px;padding:.6rem .8rem}
}

/* reveal animation classes (JS will toggle .visible) */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.reveal.visible{opacity:1;transform:none}
/* Floating WhatsApp Button */
.floating-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: #fff;
  font-size: 26px;
  padding: 14px 18px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: transform 0.3s ease, background 0.3s ease;
  text-decoration: none;
}
.floating-whatsapp:hover {
  background: #1ebe5d;
  transform: scale(1.1);
}