*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:#16202a;
  background:#ffffff;
}
a{text-decoration:none}
.container{
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
}
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #e8edf3;
}
.topbar-content{
  min-height:78px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.brand{
  font-size:1.15rem;
  font-weight:700;
}
.whatsapp-btn,.primary-btn,.secondary-btn,.floating-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:15px 22px;
  font-weight:700;
  transition:.25s ease;
}
.whatsapp-btn,.primary-btn,.floating-btn{
  background:#0f766e;
  color:#fff;
  box-shadow:0 14px 30px rgba(15,118,110,.18);
}
.secondary-btn{
  background:#fff;
  color:#0f766e;
  border:1px solid #cfe4e0;
}
.whatsapp-btn:hover,.primary-btn:hover,.secondary-btn:hover,.floating-btn:hover{
  transform:translateY(-2px);
}
.hero{
  padding:72px 0 40px;
  background:
    radial-gradient(circle at top right, rgba(15,118,110,.08), transparent 22%),
    radial-gradient(circle at bottom left, rgba(15,118,110,.05), transparent 24%),
    #fff;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:26px;
  align-items:center;
}
.tag{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  background:#eaf7f5;
  color:#0b5d57;
  font-size:.9rem;
  font-weight:700;
}
h1{
  margin:18px 0 12px;
  font-size:clamp(2.5rem, 5vw, 4.8rem);
  line-height:.95;
}
.lead{
  margin:0 0 10px;
  font-size:1.2rem;
  font-weight:600;
}
.subtext{
  margin:0;
  color:#54606d;
  line-height:1.7;
}
.hero-actions{margin-top:28px}
.panel,.card,.small-card,.highlight,.contact-card{
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:24px;
  box-shadow:0 18px 40px rgba(15,23,42,.06);
}
.panel{padding:28px}
.panel h2{margin:0 0 18px}
.info-item{margin:0 0 12px;color:#54606d}
.info-item strong{color:#16202a}
.section{padding:36px 0}
.section-soft{
  background:linear-gradient(180deg, rgba(246,249,252,.9), rgba(255,255,255,1));
  border-top:1px solid #eef2f6;
  border-bottom:1px solid #eef2f6;
}
.section-heading{margin-bottom:24px}
.section-heading h2{
  margin:14px 0 0;
  font-size:clamp(1.7rem, 3vw, 2.6rem);
}
.card{padding:30px}
.card p,.highlight p{
  margin:0;
  color:#54606d;
  line-height:1.85;
  font-size:1.05rem;
}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.small-card{
  padding:24px;
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.small-card span{
  font-weight:700;
  color:#7aa9a3;
}
.small-card h3{
  margin:0;
  font-size:1.45rem;
}
.highlight{
  padding:34px;
  position:relative;
  overflow:hidden;
}
.highlight:after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  right:-90px;
  top:-90px;
  background:radial-gradient(circle, rgba(15,118,110,.12), transparent 70%);
}
.highlight h2{
  margin:16px 0 12px;
  font-size:clamp(1.8rem, 3vw, 2.5rem);
}
.highlight .secondary-btn{margin-top:24px}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.contact-card{padding:26px}
.contact-card h3{
  margin:0 0 10px;
  color:#54606d;
  font-size:1rem;
}
.contact-card p{
  margin:0;
  font-size:1.3rem;
  font-weight:700;
}
.center-action{
  margin-top:26px;
}
.footer{
  padding:30px 0 100px;
  border-top:1px solid #e8edf3;
  background:#fff;
}
.footer-content{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}
.footer h3{margin:0 0 8px}
.footer p{margin:0;color:#54606d}
.footer-right{
  display:grid;
  gap:6px;
  text-align:right;
}
.floating-btn{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:60;
}
.hidden-on-load{
  opacity:0;
  transform:translateY(18px);
}
.visible{
  opacity:1;
  transform:none;
  transition:opacity .6s ease, transform .6s ease;
}
@media (max-width:920px){
  .hero-grid,.cards-grid,.contact-grid,.footer-content{
    grid-template-columns:1fr;
    display:grid;
  }
  .footer-right{text-align:left}
}
@media (max-width:640px){
  .topbar-content{
    min-height:auto;
    padding:14px 0;
    flex-direction:column;
    align-items:stretch;
  }
  .brand{text-align:center}
  .whatsapp-btn,.primary-btn,.secondary-btn,.floating-btn{
    width:100%;
  }
  .floating-btn{
    right:14px;
    left:14px;
    bottom:14px;
  }
}