@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Sora:wght@400;600&display=swap');
:root{--ink:#101418;--paper:#f3f6f4;--canal:#0f5c5a;--mute:#5d6b6a}
*{box-sizing:border-box}body{margin:0;font-family:Sora,sans-serif;background:var(--paper);color:var(--ink)}
a{color:inherit;text-decoration:none}
.wrap{width:min(1100px,92vw);margin:0 auto}
.nav{display:flex;justify-content:space-between;padding:1.2rem 0}
.nav strong{font-family:"Space Grotesk",sans-serif;font-size:1.3rem}
.nav a{margin-left:1rem;color:var(--mute);font-weight:600}
.hero{padding:12vh 0 8vh;background:linear-gradient(90deg,rgba(15,92,90,.08) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(rgba(15,92,90,.08) 1px,transparent 1px) 0 0/40px 40px,radial-gradient(ellipse at 80% 0%,rgba(15,92,90,.2),transparent 50%),var(--paper)}
.hero h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(2.7rem,7vw,4.5rem);margin:0;max-width:13ch;letter-spacing:-.03em;animation:in .7s ease both}
.btn{display:inline-block;margin-top:1.25rem;background:var(--canal);color:#fff;padding:.85rem 1.15rem;font-weight:700;border-radius:10px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:2rem 0 4rem}
.grid article{background:#fff;border:1px solid #d5e0dc;padding:1.2rem;border-radius:14px;transition:transform .3s}
.grid article:hover{transform:translateY(-4px)}
.sec{padding:2rem 0 4rem}.sec h2{font-family:"Space Grotesk",sans-serif}
.foot{border-top:1px solid #d5e0dc;padding:1.4rem 0 2rem;color:var(--mute);font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:800px){.nav div{display:none}.grid{grid-template-columns:1fr}}