@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --blue: #0878d1;
  --dark-blue: #061d3a;
  --ink: #101820;
  --light: #f4f8fc;
  --gray: #637083;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Montserrat', Arial, sans-serif; color: var(--ink); background: #fff; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid #e7edf4; }
.nav { min-height: 78px; display: flex; align-items: center; gap: 28px; }
.brand img { width: 150px; display: block; }
nav { display: flex; gap: 24px; margin-left: auto; font-size: 14px; font-weight: 600; }
nav a:hover { color: var(--blue); }
.nav-whatsapp { background: var(--blue); color: white; padding: 11px 17px; border-radius: 999px; font-weight: 700; font-size: 14px; }

.hero { position: relative; min-height: 650px; display: flex; align-items: center; background: linear-gradient(110deg, #061d3a 0%, #075eac 55%, #0a83df 100%); overflow: hidden; }
.hero:after { content:""; position:absolute; inset:auto -100px -180px auto; width:500px; height:500px; border:90px solid rgba(255,255,255,.08); border-radius:50%; }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(90deg, rgba(3,19,38,.25), transparent); }
.hero-content { position: relative; z-index: 1; display:grid; grid-template-columns: 1.5fr .7fr; gap: 60px; align-items:center; }
.hero-text { color: white; max-width: 750px; }
.eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:2px; font-size:12px; font-weight:800; color: var(--blue); margin-bottom: 10px; }
.hero .eyebrow { color: #cbe8ff; }
h1 { font-size: clamp(42px, 6vw, 72px); line-height: 1.04; margin: 0 0 22px; letter-spacing:-2px; }
.hero p { font-size: 19px; max-width: 650px; color: #e9f5ff; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:14px 20px; border-radius:10px; font-weight:800; transition:.2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--blue); color:#fff; box-shadow: 0 10px 25px rgba(0,80,160,.2); }
.hero .btn-primary { background:#fff; color:var(--dark-blue); }
.btn-light { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); }
.hero-card { background: rgba(255,255,255,.97); padding: 24px; border-radius: 24px; box-shadow: 0 25px 60px rgba(0,0,0,.18); text-align:center; transform: rotate(2deg); }
.hero-card img { width:100%; max-width:280px; }
.hero-card strong { display:block; font-size:34px; color:var(--dark-blue); }
.hero-card span { color:var(--gray); font-weight:600; }

.section { padding: 95px 0; }
.section-heading { max-width: 700px; margin-bottom: 42px; }
h2 { font-size: clamp(32px, 4vw, 48px); line-height:1.1; margin: 0 0 14px; letter-spacing:-1px; }
.section-heading p { color: var(--gray); margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { padding:32px; border:1px solid #e4ebf3; border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(8,45,80,.06); }
.card .icon { font-size:36px; margin-bottom:12px; }
.card h3 { margin:0 0 10px; font-size:20px; }
.card p { margin:0; color:var(--gray); }

.gallery-section { background:var(--light); }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery figure { margin:0; overflow:hidden; border-radius:16px; aspect-ratio: 4/3; background:#ddd; }
.gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s; }
.gallery figure:hover img { transform:scale(1.05); }

.about { background:#fff; }
.about-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:center; }
.about p { color:var(--gray); font-size:17px; }
.about-box { background:var(--dark-blue); color:white; padding:40px; border-radius:24px; display:grid; gap:15px; box-shadow:0 25px 50px rgba(6,29,58,.18); }
.about-number { font-size:64px; font-weight:800; line-height:1; color:#fff; }
.about-label { color:#b9dcfa; font-weight:700; }
.about-line { height:1px; background:rgba(255,255,255,.2); margin:8px 0; }

.contact { background:linear-gradient(120deg,#061d3a,#075eac); color:white; padding:80px 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.contact .eyebrow { color:#bfe5ff; }
.contact h2 { margin-bottom:15px; }
.contact p { color:#d7eafb; }
.contact-actions { display:grid; gap:12px; }
.contact-item { display:flex; align-items:center; gap:15px; padding:18px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:14px; }
.contact-item > span { font-size:28px; }
.contact-item small { display:block; color:#bfe5ff; }
.contact-item strong { display:block; font-size:17px; }

.floating-whatsapp { position:fixed; right:22px; bottom:22px; width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:#18b957; color:white; border-radius:50%; font-size:29px; z-index:30; box-shadow:0 12px 30px rgba(0,0,0,.25); }
footer { background:#031326; color:#9bb0c6; padding:22px 0; font-size:13px; }
.footer-content { display:flex; justify-content:space-between; gap:20px; }

@media (max-width: 850px) {
  nav { display:none; }
  .nav { justify-content:space-between; }
  .hero { min-height: auto; padding:75px 0; }
  .hero-content, .about-grid, .contact-grid { grid-template-columns:1fr; }
  .hero-card { max-width:320px; margin:0 auto; }
  .cards, .gallery { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
  .container { width:min(100% - 28px,1120px); }
  .brand img { width:125px; }
  .nav-whatsapp { padding:9px 13px; font-size:12px; }
  h1 { letter-spacing:-1px; }
  .hero p { font-size:16px; }
  .section { padding:65px 0; }
  .cards, .gallery { grid-template-columns:1fr; }
  .footer-content { flex-direction:column; }
}