:root {
  --court: #1FA463;
  --court-deep: #0E7A4B;
  --court-soft: #E4F6EC;
  --background: #F3FBF6;
  --ink: #153A2C;
  --ink-soft: #5C7568;
  --hairline: #DCEBE2;
}
* { box-sizing: border-box; }
html,body{height:100%;}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--background);
  color: var(--ink);
  line-height: 1.6;
}
.container { max-width: 980px; margin: 0 auto; padding: 48px 24px 80px; }
.header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; }
.badge { width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:26px; background:linear-gradient(135deg,#D7F25A,#B9DC33); box-shadow:0 8px 20px rgba(31,164,99,.15); }
.site-title { margin:0; font-size:20px; }
.nav { display:flex; gap:12px; align-items:center; }
.nav a { color:var(--court-deep); text-decoration:none; font-weight:700; }
.hero { margin:36px 0 18px; display:grid; grid-template-columns: 1fr; gap:24px; align-items:start; }
.hero .lead { background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:28px; box-shadow:0 6px 18px rgba(31,164,99,.06); }
.hero h1 { margin:0 0 8px; font-size:28px; }
.lead p { margin:10px 0; color:var(--ink-soft); }
.feature-list { list-style:none; padding:0; margin:18px 0 0; }
.feature-list li { margin:8px 0; }
.card { background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:20px; margin-bottom:16px; box-shadow:0 4px 16px rgba(31,164,99,0.06); }
.footer { text-align:center; color:var(--ink-soft); margin-top:48px; font-size:13px; }
.btn { display:inline-block; background:linear-gradient(135deg,var(--court),var(--court-deep)); color:#fff; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:700; }
@media (max-width:900px){
  .hero { grid-template-columns: 1fr; }
}