*{
  margin:0;padding:0;box-sizing:border-box;
  font-family:Inter, Poppins, sans-serif
}

html{scroll-behavior:smooth}
body{color:#0B1C2D;background:#fff}

/* HEADER */
.header{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;
  align-items:center;
  padding:18px 40px;
  background:#0B1C2D
}
.logo{color:#fff;font-size:24px;font-weight:700}
.logo span{color:#FDB813}
nav a{color:#fff;margin-left:20px;text-decoration:none}

/* BUTTONS */
.btn{
  padding:12px 22px;border-radius:24px;
  border:1px solid #FDB813;color:#FDB813
}
.primary{background:#FDB813;color:#000}
.outline{background:transparent}

/* LAYOUT */
.section{padding:100px 40px}
.alt{background:#F4F6F8}
.container{max-width:1200px;margin:auto}

.hero{
  background:#0B1C2D;color:#fff;
  padding:120px 40px
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center
}
.hero-text h1{font-size:48px;line-height:1.2}
.hero-text p{margin-top:20px;max-width:520px;color:#dce4ec}
.actions{margin-top:30px}

.hero-image img{
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:28px
}

/* SECTIONS */
.section-head{text-align:center;max-width:600px;margin:0 auto 60px}
.section-head h2{font-size:36px}
.section-head p{margin-top:12px;color:#555}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px
}
.card{
  background:#fff;
  border-radius:24px;
  padding:24px;
  transition:.3s
}
.card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:16px
}
.card:hover{transform:translateY(-8px)}

/* SPLIT */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center
}
.why-image img{
  width:100%;
  height:360px;
  object-fit:cover;
  border-radius:28px
}
ul{margin-top:20px}
li{margin-bottom:10px}

/* CONTACT */
.contact-form{
  display:flex;flex-direction:column;gap:14px
}
input,textarea{
  padding:14px;border-radius:14px;
  border:1px solid #ddd
}

/* FOOTER */
footer{text-align:center;padding:30px;color:#666}

/* ANIMATION */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:1s
}
.reveal.active{
  opacity:1;
  transform:none
}

@media(max-width:900px){
  .hero-grid,.split{grid-template-columns:1fr}
  .hero-text h1{font-size:36px}
}
*{
  margin:0;padding:0;box-sizing:border-box;
  font-family:Inter, Poppins, sans-serif
}

html{scroll-behavior:smooth}
body{color:#0B1C2D;background:#fff}

/* HEADER */
.header{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;
  align-items:center;
  padding:18px 40px;
  background:#0B1C2D
}
.logo{color:#fff;font-size:24px;font-weight:700}
.logo span{color:#FDB813}
nav a{color:#fff;margin-left:20px;text-decoration:none}

/* BUTTONS */
.btn{
  padding:12px 22px;border-radius:24px;
  border:1px solid #FDB813;color:#FDB813;
  display:inline-block
}
.primary{background:#FDB813;color:#000}
.outline{background:transparent}

/* LAYOUT */
.section{padding:100px 40px}
.alt{background:#F4F6F8}
.container{max-width:1200px;margin:auto}

/* HERO */
.hero{
  background:#0B1C2D;
  color:#fff;
  padding:120px 40px
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center
}
.hero-text h1{font-size:48px;line-height:1.2}
.hero-text p{
  margin-top:20px;
  max-width:520px;
  color:#dce4ec
}
.actions{margin-top:30px}

/* IMAGES */
.hero-image img,
.why-image img{
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:28px
}

/* SECTION HEAD */
.section-head{
  text-align:center;
  max-width:600px;
  margin:0 auto 60px
}
.section-head h2{font-size:36px}
.section-head p{margin-top:12px;color:#555}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px
}
.card{
  background:#fff;
  border-radius:24px;
  padding:24px;
  transition:.3s
}
.card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:16px
}
.card:hover{transform:translateY(-8px)}

/* SPLIT */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center
}
.points{margin-top:20px}
.points li{margin-bottom:10px}

/* CONTACT */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:14px
}
input,textarea{
  padding:14px;
  border-radius:14px;
  border:1px solid #ddd
}

/* FOOTER */
footer{
  text-align:center;
  padding:30px;
  color:#666
}

/* SCROLL ANIMATION */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:1s
}
.reveal.active{
  opacity:1;
  transform:none
}

/* WHATSAPP FLOAT */
.whatsapp-float{
  position:fixed;
  bottom:24px;
  right:24px;
  width:56px;
  height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:100;
}
.whatsapp-float img{
  width:28px;
  height:28px;
}
.whatsapp-float::after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  background:rgba(37,211,102,.4);
  animation:pulse 2.5s infinite;
  z-index:-1
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.6);opacity:0}
}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-grid,.split{grid-template-columns:1fr}
  .hero-text h1{font-size:36px}
}
