:root{
  --green:#8CD63E;
  --green-dark:#69BB2C;
  --teal:#0D7A84;
  --navy:#0C2D48;
  --white:#ffffff;
  --bg:#f7faf7;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:#0C2D48;
  background: radial-gradient(1000px 600px at 50% -10%, rgba(140,214,62,0.25), transparent), var(--bg);
}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1000px;margin:0 auto;padding:24px}
.header{
  display:flex;align-items:center;gap:18px;justify-content:center;
  padding:24px 16px 0 16px;
}
.badge{
  width:110px;height:110px;border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #a9e866 0%, var(--green) 55%, var(--green-dark) 100%);
  position:relative;flex:0 0 auto;
  box-shadow:0 10px 25px rgba(12,45,72,.15), inset 0 0 0 6px #fff, inset 0 0 0 12px var(--navy);
}
.badge::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:10px 10px;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.2), transparent 65%);
}
.logo{
  display:flex;flex-direction:column;align-items:flex-start;line-height:1;margin:0;
}
.logo .top{font-family:"Merienda", cursive;font-weight:800;font-size:clamp(28px,6vw,44px);letter-spacing:.3px}
.logo .sub{display:flex;align-items:center;gap:.35rem;font-size:clamp(20px,4.5vw,28px);font-weight:800}
.logo .in{font-weight:700;font-size:.7em;opacity:.9;margin-inline:6px}
.heart{
  display:inline-block;width:1em;height:1em;transform:translateY(.06em);position:relative;
}
.heart svg{display:block}
.tagline{
  margin-top:6px;color:#30506d;font-weight:600;opacity:.95
}
.hero{
  margin-top:16px;border-radius:20px;padding:28px;
  background: linear-gradient(135deg, rgba(13,122,132,.08), rgba(140,214,62,.10));
  box-shadow: 0 8px 24px rgba(12,45,72,.10);
}
.hero p{margin:0 0 10px 0;font-size:1.05rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;
  font-weight:800;border:2px solid var(--navy);background:#fff;
  box-shadow:0 8px 16px rgba(12,45,72,.10);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(12,45,72,.15)}
.btn.teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.section{margin-top:28px}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:12px}
.card{
  background:#fff;border:1px solid rgba(12,45,72,.08);border-radius:16px;padding:16px;
  box-shadow:0 6px 14px rgba(12,45,72,.06);
}
.card h4{margin:0 0 6px 0;font-size:1rem}
.footer{margin:26px 0 40px;text-align:center;font-size:.85rem;color:#4f6b82;opacity:.9}
.small{font-size:.9rem;color:#4f6b82}
hr{border:none;border-top:1px solid rgba(12,45,72,.12);margin:24px 0}
@media (max-width:520px){
  .header{justify-content:flex-start;padding-left:20px}
}