:root{
  --primary:#007E84;
  --accent:#00C8D6;
  --dark:#003E46;
  --bg:#F7F9FA;
  --text:#1f2937;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:Inter,system-ui,'Segoe UI',Roboto,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--container);margin:0 auto;padding:20px;}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:transparent;position:relative;z-index:10;}
.brand img{height:56px;}
nav a{margin:0 12px;color:var(--dark);text-decoration:none;font-weight:600;}
.cta-btn{background:var(--primary);color:#fff;padding:12px 18px;border-radius:8px;font-weight:700;border:none;cursor:pointer;box-shadow:0 6px 18px rgba(0,126,132,0.12);transition:all .22s ease;}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,126,132,0.18);}

/* Hero */
.hero{position:relative;overflow:hidden;border-radius:10px;margin:28px 0;padding:90px 24px;min-height:480px;display:flex;align-items:center}
.hero .content{max-width:720px;z-index:6}
.hero h1{font-size:44px;margin:0 0 14px;color:#eafdfd;line-height:1.02}
.hero p{color:rgba(234,253,253,0.95);font-size:18px;margin:0 0 18px}

/* background layers */
.bg-grid{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.layer{position:absolute;inset:0;background-repeat:no-repeat;background-position:center center;opacity:0.9;will-change:transform}
.layer.layer1{background-image:url('assets/hero-bg.jpg');background-size:cover;filter:brightness(0.6) saturate(110%);}
.layer.layer2{background:linear-gradient(120deg, rgba(0,126,132,0.35), rgba(0,200,214,0.15));mix-blend-mode:screen;opacity:0.8}

/* sections */
section{padding:56px 0;border-top:1px solid rgba(0,0,0,0.04)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 10px 30px rgba(2,6,23,0.04);}
.card img{width:100%;height:160px;object-fit:cover;border-radius:8px}

/* reveal animations */
.reveal{opacity:0;transform:translateY(20px);transition:all .7s cubic-bezier(.2,.9,.25,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}

/* footer */
footer{padding:40px 0;background:transparent;color:#6b7280}

/* responsive */
@media (max-width:980px){
  .grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  nav a{display:none}
  .hero{padding:48px 18px;min-height:360px}
}