:root{
  --ink:#0F3D2E; --ocean:#1D5B79; --sun:#F9C80E;
  --paper:#FAFAF5; --card:#FFFFFF; --muted:#4a665c; --outline:rgba(15,61,46,.12);
  --header:#FAFAF5;
}
:root[data-theme="dark"]{
  --ink:#E6F0EC; --ocean:#7EC6E1; --sun:#DCC76A;
  --paper:#0B241C; --card:#0F2E24; --muted:#9DB6AE; --outline:rgba(230,240,236,.14);
  --header:#0B241C;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:var(--ocean);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
header.site{
  background:var(--header);
  border-bottom:1px solid var(--outline);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 20px; position:sticky; top:0; z-index:10;
}
.brand img{height:92px;width:auto;display:block}
nav a{padding:8px 10px;border-radius:10px;font-weight:700;color:var(--ink)}
nav a.cta{background:var(--ink);color:var(--paper)}
nav a.cta:hover{opacity:.92;text-decoration:none}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--outline);
  border-radius:999px;padding:6px 10px;background:var(--card);cursor:pointer}
@media (max-width:640px){ nav{display:none} }

/* Sections */
.section{padding:22px 0}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--outline);
  padding:8px 12px;border-radius:999px;font-weight:700}
.card{background:var(--card);border:1px solid var(--outline);border-radius:14px;padding:16px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.button{display:inline-block;padding:12px 16px;border-radius:12px;border:2px solid var(--ink);color:var(--ink);font-weight:800}
.button:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.button.sun{border-color:var(--sun)}

/* Footer */
footer{margin-top:28px;padding:18px 0;border-top:1px solid var(--outline);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted)}

/* About hero */
.hero-about{
  background:radial-gradient(1200px 420px at 50% -20%, rgba(57,119,98,.10), transparent 60%), var(--paper);
  border-bottom:1px solid var(--outline);
  text-align:center; padding:36px 0 18px;
}
.hero-about h1{margin:10px 0 6px; font-size:clamp(28px,4vw,44px)}
.hero-about p{margin:0 auto; max-width:780px; color:var(--muted)}