*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
body{color:#222;background:#fff}

/* TOP BAR */
.topbar{background:#111;color:#fff;text-align:center;padding:8px;font-size:14px}
.topbar a{color:#00ff88;text-decoration:none}

/* HEADER */
header{position:sticky;top:0;z-index:10;background:#fff;
display:flex;justify-content:space-between;align-items:center;
padding:14px 26px;border-bottom:1px solid #eee}
.logo{font-size:22px;font-weight:bold}
header nav a{margin-left:18px;text-decoration:none;color:#333;font-weight:500}

/* HERO */
.hero{min-height:92vh;background-size:cover;background-position:center;position:relative;display:flex;align-items:center}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero-content{position:relative;color:#fff;max-width:720px;padding:40px}
.hero h1{font-size:44px;line-height:1.2}
.hero h3{margin:14px 0;font-weight:400}
.hero p{margin-top:10px;line-height:1.6}
.roman{color:#ddd;font-size:14px}

/* BUTTONS */
.buttons{margin-top:24px}
.btn{display:inline-block;padding:14px 22px;border-radius:6px;text-decoration:none;margin-right:10px}
.primary{background:#00c853;color:#fff}
.outline{border:2px solid #fff;color:#fff}

/* SECTIONS */
.section{padding:60px 20px;text-align:center}
.section h2{font-size:32px;margin-bottom:14px}
.sub{color:#555}
.gray{background:#f6f6f6}

/* SERVICES SLIDER (FIXED) */
.slider-wrap{overflow:hidden;width:100%}
.slider{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.slider::-webkit-scrollbar{display:none}
.card{
  flex:0 0 260px;
  background:#fff;
  padding:22px;
  border-radius:10px;
  box-shadow:0 8px 22px rgba(0,0,0,.1);
  font-weight:600;
}

/* WHY */
.why{list-style:none;max-width:720px;margin:0 auto}
.why li{margin:10px 0}

/* CONTACT */
.contact{background:#111;color:#fff}

/* FLOATING CTA */
.float{position:fixed;right:20px;padding:14px 18px;border-radius:50px;color:#fff;text-decoration:none;font-weight:bold;z-index:999}
.whatsapp{bottom:80px;background:#25D366}
.call{bottom:20px;background:#000}

/* REVEAL */
.reveal{opacity:0;transform:translateY(20px);transition:.7s}
.reveal.active{opacity:1;transform:none}

/* MOBILE */
@media(max-width:768px){
  .hero h1{font-size:32px}
}