:root{
  --bg:#FAFAFA;
  --card:#fff;
  --text:#111;
  --muted:#8A8F98;
  --border:#E6E6E6;

  --radius:14px;
  --shadow:0 6px 18px rgba(0,0,0,.06);

  --green:#2FA66F;
  --green-strong:#22c55e;
  --danger:#ef4444;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container{
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}

.hero{
  padding: 10px 2px 14px;
}

h1{
  margin: 6px 0 6px;
  font-size: 30px;
  letter-spacing: .2px;
  color: var(--green);
}

.muted{ color: var(--muted); }

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.btn{
  display: inline-block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--green);
  color: white;
  text-decoration: none;
  font-weight: 700;
}
.btn:active{ transform: translateY(1px); }