:root{
  --blue-dark:#0A1533;
  --blue-mid:#1C3F7A;
  --blue-light:#50A1D8;
  --white:#fff;
  --glass:rgba(255,255,255,.78);
  --stroke:rgba(255,255,255,.35);
  --ink:#0b1a3a;
  --radius:18px;
  --shadow:0 12px 34px rgba(10,21,51,.28);
}
*{box-sizing:border-box}
html,body{height:100%;scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;color:var(--white);
  background:linear-gradient(140deg,#0A1533,#0E234F 60%,#1C3F7A);overflow-x:hidden;}

body::before{content:"";position:fixed;inset:0;background:url('img/bg.webp') center/cover no-repeat;opacity:.10;z-index:-1}

.navbar{position:sticky;top:0;z-index:1000;backdrop-filter:blur(14px) saturate(1.4);
  background:linear-gradient(180deg,rgba(6,15,34,.72),rgba(6,15,34,.52));border-bottom:1px solid rgba(255,255,255,.06)}
.container{max-width:1180px;margin:0 auto;padding:0 22px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:36px;width:auto;display:block}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.nav-links button{border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  padding:10px 14px;border-radius:14px;color:#eaf2ff;font-weight:800;letter-spacing:.3px;transition:.2s}
.nav-links button.active,.nav-links button:hover{border-color:rgba(80,161,216,.7);box-shadow:0 6px 22px rgba(80,161,216,.28),inset 0 0 18px rgba(80,161,216,.18)}

#preloader{position:fixed;inset:0;display:grid;place-items:center;gap:16px;background:#0A1533;z-index:9999}
.loader{width:82px;height:82px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:#50A1D8;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

section{display:none;min-height:calc(100dvh - 78px);padding:70px 0}
section.active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:.35;transform:translateY(8px)}}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.title{font-family:'Poppins',system-ui,sans-serif;font-size:clamp(40px,6.4vw,76px);line-height:1.02;margin:0 0 10px;
  background:linear-gradient(90deg,#fff,#BDE0FF 40%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{color:#BFE0FF;font-weight:900;letter-spacing:3px;text-transform:uppercase}
.card{background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);padding:26px}

.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{border-radius:14px;padding:14px 18px;font-weight:900;letter-spacing:.3px;border:1px solid rgba(80,161,216,.6);cursor:pointer;transition:.2s}
.btn-primary{background:linear-gradient(180deg,#8CC7FF,#1E4A86);color:#04122d;box-shadow:0 12px 28px rgba(140,199,255,.45)}
.btn-secondary{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.75));color:#08204b}
.btn:hover{transform:translateY(-2px)}

.columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.service{padding:16px 18px;border-radius:14px;border:1px dashed rgba(80,161,216,.6);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));font-weight:900;color:#0b1a3a}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(255,255,255,.25);box-shadow:var(--shadow)}
.lightbox{position:fixed;inset:0;background:rgba(0,10,20,.9);display:none;align-items:center;justify-content:center;z-index:2000}
.lightbox.active{display:flex}
.lightbox img{max-width:92vw;max-height:90vh;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.65)}
.lightbox .close{position:fixed;top:18px;right:18px;background:#fff;border:none;padding:10px 12px;border-radius:12px;font-weight:900}

.info-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.info-list li{padding:12px 14px;border-radius:12px;background:var(--glass);border:1px solid var(--stroke);color:#0b1a3a;font-weight:700}

footer{padding:30px 0 44px;color:#bcd6ff;text-align:center}
#whats{position:fixed;bottom:18px;right:18px;z-index:1200;width:62px;height:62px;border-radius:18px;background:linear-gradient(180deg,#25D366,#128C7E);
  display:grid;place-items:center;color:#fff;font-size:30px;text-decoration:none;box-shadow:0 16px 34px rgba(18,140,126,.5)}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;text-align:center}
  .columns{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .grid{grid-template-columns:1fr}
}