:root{
  --bg:#0f3f35;      /* deep green */
  --fg:#ffffff;
  --muted:#cfe5de;
  --accent:#b9f5e6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
}

/* Top Nav */
.topbar{position:sticky;top:0;background:rgba(15,63,53,.9);backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{font-weight:800;letter-spacing:.04em;color:var(--fg);text-decoration:none}
.menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.menu a{color:var(--muted);text-decoration:none;font-weight:600}
.menu a:hover,.menu a.active{color:var(--fg)}

/* Hero */
.hero{min-height:62vh;display:grid;place-content:center;text-align:center;padding:40px 20px}
.title{font-size:72px;line-height:1.05;margin:0 0 12px}
.tagline{font-size:20px;color:var(--muted)}

/* Pages */
.page{max-width:840px;margin:64px auto;padding:0 22px}
.page h1{font-size:40px;margin:0 0 16px}
.page p{line-height:1.7;color:#e8f0ec}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.08);text-align:center;color:var(--muted);padding:22px}
@media (max-width:640px){
  .title{font-size:48px}
}