:root{
  --bg:#f7fcff;
  --blue:#6fb8ff;
  --deep:#0b3a66;
  --accent:#ffd66b;
  --muted:#6c7a89;
  --card:#ffffff;
}

*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:var(--deep); background:var(--bg); -webkit-font-smoothing:antialiased}
.container{max-width:1000px; margin:0 auto; padding:24px}

/* header */
.site-header{background:linear-gradient(90deg, rgba(143,211,255,0.12), rgba(255,214,107,0.05)); position:sticky; top:0; z-index:40; backdrop-filter: blur(6px)}
.header-inner{display:flex; align-items:center; justify-content:space-between}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--deep)}
.logo-text{font-weight:700; font-size:16px}
.nav a{margin-left:14px; text-decoration:none; color:var(--deep); font-weight:600}

/* hero */
.hero{position:relative; padding:12px 0 36px}
.hero-img{width:100%; height:260px; object-fit:cover; border-radius:12px; box-shadow:0 6px 20px rgba(30,60,100,0.06)}
.hero-text{position:relative; margin-top:-80px; background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85)); padding:20px; border-radius:10px; box-shadow:0 8px 30px rgba(20,40,80,0.05)}
.hero h1{margin:0 0 6px; font-size:22px; color:var(--deep)}
.lead{margin:0 0 12px; color:var(--muted)}

.cta{display:inline-block; padding:10px 14px; background:var(--blue); color:white; border-radius:8px; text-decoration:none; font-weight:700}

/* services */
.services h2, .packages h2, .fleet h2, .gallery h2, .contact h2{margin-top:36px; margin-bottom:12px; font-size:20px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.card{background:var(--card); padding:14px; border-radius:10px; box-shadow:0 6px 18px rgba(12,40,80,0.04)}

/* packages */
.package-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.package{background:var(--card); border-radius:10px; overflow:hidden; box-shadow:0 6px 20px rgba(20,40,80,0.04); padding-bottom:12px}
.package img{width:100%; height:130px; object-fit:cover}
.package h4{margin:12px 12px 6px}

/* fleet */
.fleet ul{padding-left:18px}

/* gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px}
.gallery-grid img{width:100%; height:110px; object-fit:cover; border-radius:8px; box-shadow:0 6px 16px rgba(10,30,60,0.04)}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.contact-card{background:var(--card); padding:14px; border-radius:10px; box-shadow:0 6px 18px rgba(12,40,80,0.04)}

/* footer */
.site-footer{padding:20px 0; text-align:center; color:var(--muted)}

/* floating whatsapp */
.whatsapp-fab{position:fixed; right:18px; bottom:18px; background:linear-gradient(180deg,#25d366,#1da851); color:white; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:28px; box-shadow:0 8px 30px rgba(0,0,0,0.15); text-decoration:none}

/* responsive */
@media (max-width:720px){
  .hero-img{height:220px}
  .hero-text{margin-top:-64px; padding:12px}
  .contact-grid{grid-template-columns:1fr}
}