*{box-sizing:border-box}
:root{
  --ink:#0e2a21;
  --muted:#567268;
  --bg:#f6faf8;
  --panel:#ffffff;
  --brand:#145c45;
  --brand-ink:#0b3b2e;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:1.25rem}
.nav{position:sticky;top:0;background:rgba(246,250,248,.9);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e3ece8;z-index:20;gap:.75rem;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;min-width:0;flex:1 1 auto}
.brand img{height:36px;width:36px;border-radius:999px;object-fit:cover;border:1px solid #dbe7e3;flex:0 0 auto}
.wordmark{font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toplinks{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;white-space:nowrap}
.navlink{white-space:nowrap;flex:0 0 auto}
nav a{margin-left:0;text-decoration:none;color:#35584e}
nav a:hover{color:var(--brand)}
.btn{display:inline-block;padding:.6rem .9rem;border-radius:12px;border:1px solid #bcd7cf;background:#fff;color:var(--brand-ink);text-decoration:none;font-weight:700}
.btn.primary{background:linear-gradient(180deg,#1c8b6d,#145c45);color:#fff;border-color:#145c45}
.btn.big{padding:1rem 1.35rem;border-radius:14px;font-size:1.06rem}
.btn.small{padding:.45rem .7rem;border-radius:10px;font-weight:600}
.hero{padding:5rem 1.25rem 3.25rem}
.hero h1{font-size:2.8rem;margin:0 0 .6rem}
.hero .sub{max-width:720px;line-height:1.6;color:var(--muted);margin:0}
.actions{margin-top:1.2rem}
.steps h2{margin:0 0 .9rem}
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{background:var(--panel);border:1px solid #e3ece8;border-radius:16px;padding:1rem}
.num{height:30px;width:30px;border-radius:999px;background:#e6f2ef;color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:.6rem;border:1px solid #cfe1db}
.step h3{margin:.2rem 0 .35rem;font-size:1.05rem}
.step p{margin:0;color:var(--muted)}
.whycard{margin-top:1rem}
.support.refined{margin:.5rem 0;color:var(--muted);line-height:1.65;font-size:1.05rem}
.footer{padding:2.2rem 1.25rem;color:#5f7c72}

@media (max-width:640px){
  .brand img{height:28px;width:28px}
  .wordmark{font-size:clamp(.9rem,3.6vw,1.05rem)}
  .toplinks .navlink{font-size:clamp(.92rem,3.5vw,1rem)}
  .btn.small{padding:.38rem .6rem}
  .support.refined{font-size:1rem}
}

@media (max-width:360px){
  .wordmark{font-size:.9rem}
  .toplinks .navlink{font-size:.9rem}
}