*{box-sizing:border-box}
:root{
  --bg:#ffffff;
  --bg-2:#0b7d2b;
  --radius:14px;
  --max-width:980px;
  font-family:system-ui,Arial,sans-serif;
}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--bg-2));
}

.site-header{
  position:relative;
  min-height:380px;
  background-image:url('header-bg.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:75% center;
  background-color:#0b7d2b;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  image-rendering:auto;
}

.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,.15),
    rgba(0,0,0,0)
  );
}

.header-content{position:relative;z-index:2}

.brand{
  font-size:46px;
  font-weight:900;
  background:linear-gradient(90deg,#fff,#f5d23b,#fff);
  -webkit-background-clip:text;
  color:transparent;
  text-shadow:0 4px 14px rgba(0,0,0,.55);
}

.container{max-width:var(--max-width);margin:auto;padding:22px}
.lead{text-align:center;margin:26px 0;font-size:18px}

.links-grid{display:grid;gap:20px}

.link-card{
  background:#fff;
  padding:24px;
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:.25s;
}
.link-card:hover{transform:translateY(-6px)}

.link-anchor{
  display:block;
  color:inherit;
  text-decoration:underline;
  text-decoration-color:#000;
  text-underline-offset:6px;
}

.link-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
}

.link-icon{
  width:28px;
  transition:.25s;
}
.link-card:hover .link-icon{transform:scale(1.2)}

.site-footer{text-align:center;padding:22px;color:#666}

@media(max-width:768px){
  .site-header{
    background-position:center left;
    min-height:300px;
  }
  .brand{font-size:34px}
}

@media(min-width:720px){
  .links-grid{grid-template-columns:repeat(2,1fr)}
}