:root{
  --blue:#0a1f44;
  --blue-2:#0f2a5a;
  --green:#22c55e;
  --light:#f6f8fb;
  --text:#111827;
  --muted:#6b7280;
  --white:#fff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--light);scroll-behavior:smooth}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

.topbar{background:linear-gradient(90deg,var(--blue),var(--blue-2));color:#dbeafe;font-size:14px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:8px 24px}
.topbar .tb-left{display:flex;gap:14px;align-items:center}
.topbar .tb-right{display:flex;gap:12px;align-items:center}
.topbar .btn-xs{padding:6px 10px;border-radius:999px;background:var(--green);color:#fff;font-weight:700}
.topbar .link{opacity:.9}
.topbar i{width:16px;height:16px;vertical-align:-2px;margin-right:6px}
.sep{opacity:.4}

header{position:sticky;top:0;z-index:1000;background:rgba(6,18,38,.45);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{display:flex;align-items:center;gap:10px;color:#fff}
.logo img{height:48px;filter: drop-shadow(0 6px 16px rgba(0,0,0,.2));}
.brand{font-family:Poppins,Inter,sans-serif;font-weight:700;letter-spacing:.5px}
nav ul{list-style:none;display:flex;gap:26px;align-items:center;margin:0;padding:0}
nav a{color:#fff;opacity:.95}
.btn{display:inline-flex;gap:8px;align-items:center;background:var(--green);color:#fff;padding:14px 20px;border-radius:999px;font-weight:700;box-shadow:0 10px 20px rgba(34,197,94,.28);transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:10px 14px}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.75);color:#fff}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:12px;padding:8px}
@media (max-width:960px){
  nav ul{position:absolute;left:24px;right:24px;top:110px;background:linear-gradient(180deg,rgba(10,31,68,.98),rgba(15,42,90,.98));padding:18px;border-radius:16px;display:none;flex-direction:column;gap:16px}
  nav ul.open{display:flex}
  .burger{display:inline-flex}
}

.hero{position:relative;height:80vh;min-height:560px;overflow:hidden;color:#fff;display:grid;align-items:end}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.slide.active{opacity:1}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(1200px 400px at 20% 20%,rgba(34,197,94,.35),transparent),linear-gradient(180deg,rgba(3,7,18,.2),rgba(3,7,18,.7))}
.hero-content{position:relative;z-index:2;padding:0 0 80px;max-width:900px}
.kicker{display:inline-block;background:rgba(255,255,255,.14);padding:8px 12px;border-radius:999px;font-weight:700;backdrop-filter:blur(6px)}
.hero h1{font-family:Poppins,Inter,sans-serif;font-size:clamp(32px,5vw,56px);line-height:1.1;margin:14px 0}
.hero p{font-size:clamp(16px,2.2vw,20px);opacity:.95;margin:0 0 24px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

.wave{position:absolute;bottom:-1px;left:0;right:0}
.wave svg{width:100%;height:150px}
.wave svg path{fill:rgba(10,31,68,1)}

.section{padding:90px 0}
.section.alt{background:#fff}
.section .lead{color:var(--muted);max-width:800px}
.section-head{text-align:center;margin-bottom:26px}

.grid{display:grid;gap:22px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){
  .grid.two,.grid.three,.grid.four{grid-template-columns:1fr}
}

.card{background:#fff;border-radius:18px;padding:20px;border:1px solid #eef1f4;box-shadow:0 10px 30px rgba(2,8,20,.05)}
.card.mini i{width:22px;height:22px;margin-right:8px}
.card.mini{display:flex;gap:10px;align-items:flex-start}
.card.service i{width:24px;height:24px}
.card.service{transition:.2s}
.card.service:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(2,8,20,.08)}

.photo-stack{position:relative}
.photo-stack img{border-radius:16px;box-shadow:0 20px 40px rgba(2,8,20,.15);border:1px solid #eef1f4}
.photo-stack .float{position:absolute;right:-20px;bottom:-20px;width:60%;}

.metrics{background:radial-gradient(1200px 400px at 15% 20%,rgba(34,197,94,.15),transparent)}
.metric{background:#fff;border:1px solid #eef1f4;border-radius:18px;padding:26px;text-align:center;box-shadow:0 10px 30px rgba(2,8,20,.05)}
.metric .num{font-family:Poppins,Inter,sans-serif;font-size:38px;font-weight:800;color:var(--blue)}
.metric .label{display:block;margin-top:6px;color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{display:inline-flex;gap:8px;align-items:center;background:#eef6ff;color:#0b2a4a;border:1px solid #dbeafe;border-radius:999px;padding:10px 14px;font-weight:700}
.chip i{width:18px;height:18px}

.testimonial-slider{display:grid;gap:14px;max-width:800px;margin:0 auto}
.t-card{background:#fff;border:1px solid #eef1f4;border-radius:16px;padding:22px;box-shadow:0 10px 30px rgba(2,8,20,.05);display:none}
.t-card.active{display:block}
.t-card p{font-style:italic;color:#374151;margin:0 0 8px}

.cta{background:linear-gradient(90deg,var(--blue),var(--blue-2));color:#dbeafe}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta h3{color:#fff;margin:0 0 6px}
.cta p{margin:0 0 10px;color:#cde1ff}

.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.input{width:100%;padding:16px 14px;border-radius:14px;border:1px solid #e5e7eb;background:#fff;font-size:16px}
textarea.input{min-height:140px;resize:vertical}
.contact .contact-extras{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.link{display:inline-flex;gap:8px;align-items:center;color:var(--blue)}
.muted{color:#6b7280}
.rounded{border-radius:16px}
.contact-side .note{display:flex;gap:10px;align-items:flex-start;margin-top:12px}

footer{background:linear-gradient(180deg,var(--blue-2),#020617);color:#c7d2fe}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px;padding:44px 0}
.footer-inner .f-logo{height:56px}
footer h4{margin:0 0 6px;color:#fff}
footer p a{color:#cde1ff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);text-align:center;padding:16px 0;color:#93a2b8;font-size:14px}

.float-wa{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;box-shadow:0 14px 28px rgba(34,197,94,.35);z-index:1200}

.mt-16{margin-top:16px}

/* Section anchor offset */
section{scroll-margin-top:120px}