:root { --ink:#111213; --paper:#f5f2ef; --brown:#65483a; --green:#4e9b55; } * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; } .landing { position:relative; display:grid; min-height:100vh; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); padding:clamp(24px,5vw,72px); overflow:hidden; background:radial-gradient(circle at 80% 18%,#ddff73 0 2%,transparent 18%),radial-gradient(circle at 82% 68%,#c7bcff 0 6%,transparent 27%),var(--paper); }.brand { position:absolute; left:clamp(24px,5vw,72px); top:clamp(24px,5vw,58px); display:grid; width:54px; height:54px; place-items:center; border-radius:17px; background:var(--brown); color:var(--green); font-size:37px; font-weight:800; text-decoration:none; }.intro { align-self:center; max-width:650px; padding-top:72px; }.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.eyebrow span { width:9px; height:9px; border-radius:50%; background:var(--green); } h1 { margin:0 0 30px; font-size:clamp(72px,9.4vw,145px); letter-spacing:-.09em; line-height:.78; } h1 em,.path-card em { color:var(--green); font-style:normal; }.intro > p:last-child { max-width:420px; margin:0; color:#625c57; font-size:clamp(17px,2vw,23px); line-height:1.35; }.paths { display:grid; align-content:center; gap:14px; padding:80px 0 20px; }.path-card { position:relative; display:flex; min-height:220px; flex-direction:column; justify-content:space-between; padding:24px; overflow:hidden; border-radius:27px; color:var(--ink); text-decoration:none; transition:transform .22s ease; }.path-card:hover { transform:translateY(-5px); }.poor { background:var(--ink); color:#fff; }.donor { border:1px solid var(--ink); background:linear-gradient(145deg,#fff 0%,#ebe6e0 100%); }.path-number { color:#a9a5a0; font-size:11px; font-weight:800; letter-spacing:.1em; }.path-card strong { margin-top:18px; font-size:clamp(37px,4.2vw,64px); letter-spacing:-.075em; line-height:.8; }.path-card small { max-width:255px; color:inherit; font-size:14px; line-height:1.3; }.path-card i { position:absolute; right:24px; bottom:23px; display:grid; width:39px; height:39px; place-items:center; border-radius:50%; background:var(--green); color:#111; font-size:22px; font-style:normal; font-weight:800; }.donor i { background:var(--ink); color:#b8ff51; } @media (max-width:760px) { .landing { grid-template-columns:1fr; min-height:100svh; padding:24px; }.brand { left:24px; top:24px; }.intro { padding:115px 0 46px; }.paths { padding:0; gap:11px; }.path-card { min-height:178px; border-radius:22px; padding:21px; }.path-card strong { font-size:44px; }.intro > p:last-child { font-size:17px; } }
.path-card.poor { align-items:center; justify-content:center; min-height:340px; background:var(--ink); box-shadow:32px 42px 0 var(--brown); color:#f5f2ef; text-align:center; }.path-card.poor strong { margin:0; font-size:clamp(58px,8vw,116px); letter-spacing:-.07em; line-height:.9; }.path-card.poor small { margin-top:32px; color:#c9c4bf; font-family:monospace; font-size:clamp(13px,1.35vw,20px); letter-spacing:.14em; }.path-card.poor:hover { background:var(--ink); box-shadow:25px 35px 0 var(--brown); }@media (max-width:760px) { .path-card.poor { min-height:280px; box-shadow:18px 25px 0 var(--brown); }.path-card.poor strong { font-size:clamp(56px,15vw,84px); } }
.path-card.poor { min-height:220px; box-shadow:14px 14px 0 var(--brown); animation:poor-float 2.8s ease-in-out infinite; }.path-card.poor strong { font-size:clamp(46px,5.6vw,82px); }.path-card.poor small { margin-top:20px; font-size:clamp(12px,1vw,15px); }.path-card.poor:hover { box-shadow:10px 10px 0 var(--brown); }.path-card.poor:active { animation:none; transform:translate(5px,5px); box-shadow:3px 3px 0 var(--brown); }@keyframes poor-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }@media (max-width:760px) { .path-card.poor { min-height:178px; box-shadow:12px 14px 0 var(--brown); }.path-card.poor strong { font-size:clamp(46px,13vw,68px); }.path-card.poor small { margin-top:15px; } }
.paths { gap:42px; }@media (min-width:761px) { .paths { grid-column:1 / -1; width:min(100%,1004px); justify-self:center; } }@media (max-width:760px) { .paths { gap:30px; } }