:root{
  --bg:#F7F9FC;--white:#fff;--dark:#0f222f;--primary:#009f93;--grey:#5c6f84;
  --ftr-bg:#0a0a0a;--ftr-grey:#9aa1ab;--blue:#4ca1ff;--divider:#1a1a1a;
  --radius:12px;--tr:.35s cubic-bezier(.25,.8,.25,1)
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--dark);line-height:1.55}
a{text-decoration:none;color:inherit}
img,svg{max-width:100%;display:block}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--delay,0s),transform .8s var(--delay,0s)}
.reveal.visible{opacity:1;transform:none}

/* ===== HEADER ===== */
header{background:var(--dark);color:#fff;position:sticky;top:0;z-index:1000}
.navbar{max-width:1260px;margin:auto;padding:1rem;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.6rem;font-weight:700}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{font-weight:500;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--primary);transition:var(--tr)}
.nav-links a:hover::after{width:100%}

/* mega-menu (desktop) */
.nav-links>li{position:relative}
.mega-menu{display:none;position:absolute;left:0;top:100%;width:740px;padding:2rem;background:var(--white);color:var(--dark);
           border-radius:var(--radius);box-shadow:0 20px 40px rgba(0,0,0,.15);grid-template-columns:repeat(2,1fr);gap:2.4rem}
@media(min-width:769px){.nav-links>li.mega:hover .mega-menu{display:grid}}
.mega-column h4{font-size:1.15rem;font-weight:700;margin-bottom:1.2rem;border-bottom:1px solid #e3e7ef;padding-bottom:.6rem}
.mega-column ul{list-style:none;display:grid;gap:1rem;font-weight:500}
.mega-column a:hover{color:var(--primary)}

/* ===== burger + mobile nav ===== */
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;
        position:fixed;top:1rem;right:1rem;z-index:1101;padding:.5rem}
.burger span{width:26px;height:3px;background:#fff;border-radius:3px;transition:var(--tr)}
body.nav-open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media(max-width:768px){
  .burger{display:flex}
  .nav-links{position:fixed;inset:0 0 0 40%;background:var(--dark);
             flex-direction:column;align-items:flex-start;padding:6rem 2rem;
             transform:translateX(100%);transition:var(--tr);overflow-y:auto;z-index:1100}
  body.nav-open .nav-links{transform:translateX(0)}

  .mega-menu{position:static;width:100%;padding:1rem 0;background:none;color:#fff;box-shadow:none;border-radius:0;grid-template-columns:1fr}
  .mega-column h4{border:none;margin:1rem 0 .3rem;color:#fff}
  .mega-column a{color:#dfe8f2}
  .nav-links>li.mega.open .mega-menu{display:block}
}

/* ===== HERO ===== */
.hero{max-width:1260px;margin:auto;padding:5rem 1rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:300}
.hero h1 span{color:var(--primary);font-weight:700}
.hero p{margin:1.6rem 0;color:var(--grey)}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:1rem 2.4rem;border-radius:var(--radius);font-weight:600;transition:var(--tr)}
.btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 22px rgba(0,159,147,.35)}

/* ===== BENEFITS ===== */
.benefits{background:var(--dark);color:#fff;padding:5rem 1rem}
.benefits .wrap{max-width:1260px;margin:auto}
.benefits-header{text-align:center;margin-bottom:3.5rem}
.benefits-header h2{font-size:3rem;font-weight:700;margin-bottom:.6rem}
.benefits-header p{font-size:1.35rem;color:#c7d2de}
.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3.2rem}
@media(max-width:700px){.benefits-grid{grid-template-columns:1fr}}
.benefit-card{display:flex;gap:1.2rem}
.benefit-card svg{flex-shrink:0;width:40px;height:40px;stroke:var(--primary);stroke-width:2.5px;fill:none}
.benefit-card h3{font-size:1.6rem;font-weight:700;margin-bottom:.4rem}
.benefit-card p{font-size:1.1rem;color:#c7d2de}

/* ===== SERVICES ===== */
.services{padding:5rem 1rem}
.services .wrap{max-width:1260px;margin:auto;display:grid;grid-template-columns:1fr 520px;gap:5rem;align-items:center}
@media(max-width:1100px){.services .wrap{grid-template-columns:1fr}}
.services-header h2{font-size:2.8rem;font-weight:300;margin-bottom:.8rem}
.services-header h2 span{color:var(--primary);font-weight:700}
.services-header p{font-size:1.05rem;color:var(--grey)}
.cards{display:grid;gap:1.4rem;margin-top:2.4rem}
.card{background:var(--white);border:1px solid #e3e7ef;border-radius:var(--radius);
      padding:1.5rem 1.7rem;display:flex;gap:1.3rem;align-items:flex-start;
      transition:var(--tr);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.1);border-color:#cfd5e3}
.icon-wrap{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
           background:linear-gradient(135deg,#685ff0 0%,#7c7bff 50%,#9595ff 100%)}
.icon-wrap svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none}
.card h3{font-size:1.28rem;font-weight:700;margin-bottom:.3rem}
.card p{font-size:.97rem;color:var(--grey)}
.services-illustr{position:relative;border-radius:var(--radius);overflow:hidden;min-height:440px;
                  box-shadow:0 12px 30px rgba(0,0,0,.1);animation:breath 12s ease-in-out infinite}
@keyframes breath{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(30deg)}}
.services-illustr svg{width:100%;height:100%}
.services-illustr svg rect{animation:slide 30s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}

/* ===== ORIGINAL CONTACT SECTION ===== */
.contact{padding:5rem 1rem;background:linear-gradient(135deg,#009f93,#00bba6);color:#fff;text-align:center}
.contact .wrap{max-width:620px;margin:auto}
.contact form{margin-top:2rem;display:grid;gap:1rem}
.contact input,.contact textarea{padding:1rem;border:none;border-radius:var(--radius);background:#fff;color:#0f222f;resize:none}

/* ===== FOOTER (new) ===== */
#footer{background:var(--ftr-bg);color:#fff;padding:5rem 1rem 3rem}
#footer .wrap{max-width:1260px;margin:auto}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr;gap:3rem}}
.footer-grid h3{font-size:1.15rem;font-weight:700;margin-bottom:1.2rem}
.quick-links ul{list-style:none;display:grid;gap:.7rem;font-size:.95rem}
.quick-links li{position:relative;padding-left:14px;color:var(--ftr-grey)}
.quick-links li::before{content:"•";position:absolute;left:0;top:-1px;color:var(--ftr-grey);font-size:1.2rem}
.find-us .item{display:flex;gap:1rem;align-items:center;margin-bottom:1.4rem}
.find-us .icon{flex-shrink:0;width:40px;height:40px;border:1px solid #fff;border-radius:50%;
               display:flex;align-items:center;justify-content:center}
.find-us .icon svg{stroke:#fff;width:20px;height:20px;fill:none;stroke-width:2}
.find-us .text{font-size:.95rem;color:var(--ftr-grey);line-height:1.45}
.contact-form form{display:grid;gap:1rem}
.contact-form input,
.contact-form textarea{width:100%;padding:1rem;border:1px solid var(--divider);border-radius:6px;
                       background:#111;color:#fff;font-family:inherit;font-size:.95rem;resize:vertical}
.contact-form button{justify-self:flex-start;background:none;border:1px solid #fff;padding:.8rem 1.8rem;
                     color:#fff;font-weight:600;border-radius:6px;cursor:pointer;transition:background .25s}
.contact-form button:hover{background:#fff;color:#000}
.small-note{font-size:.8rem;color:var(--ftr-grey);margin-top:.7rem}

/* Add this to your CSS */
.form-response {
  margin-top: 1rem;
  padding: 0.8rem;
  border-radius: 6px;
  font-size: 0.95rem;
  text-align: center;
  display: none;
}

.form-response.success {
  display: block;
  background: rgba(0, 159, 147, 0.2);
  color: #fff;
}

.form-response.error {
  display: block;
  background: rgba(255, 80, 80, 0.2);
  color: #fff;
}

.copyright{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--divider);font-size:.85rem;color:var(--ftr-grey);text-align:center}