@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
*{box-sizing:border-box}
body{margin:0;font-family:'Yomogi',sans-serif;background:#eef5f8}
.hero{min-height:100vh;background:url('../images/hero.jpg') center/cover no-repeat;position:relative;overflow:hidden}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(20,40,80,.3),rgba(20,40,80,.2))}
nav,.glass,.cards{position:relative;z-index:2}
nav{display:flex;justify-content:space-between;padding:20px 5%;color:#fff}
nav ul{display:flex;gap:24px;list-style:none}
nav a{color:#fff;text-decoration:none}
.glass{margin:12vh auto;width:min(760px,90%);padding:36px;background:rgba(255,255,255,.2);backdrop-filter:blur(12px);border-radius:24px;color:#fff;text-align:center}
.btn{display:inline-block;background:#2d8a55;color:#fff;text-decoration:none;padding:14px 26px;border-radius:999px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;padding:40px 5%}
.card{background:#fff;border-radius:20px;padding:28px;text-align:center;color:#333;text-decoration:none;transition:.35s;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.card:hover{transform:translateY(-8px) scale(1.08)}
.leaf{position:absolute;width:16px;height:16px;background:#8fd17d;border-radius:50% 0;opacity:.8}