body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:#020617;
    color:#e5e7eb;
    margin:0;
  }
  main{
    max-width:1100px;
    margin:0 auto 40px;
    padding:16px;
  }
  .front-hero{
    margin:10px 0 20px;
  }
  .front-hero h1{
    margin:0 0 4px;
    font-size:2rem;
  }
  .front-hero p{
    margin:0;
    color:#9ca3af;
    font-size:.95rem;
  }

  .headline-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:16px;
    margin-top:18px;
  }
  .headline-card{
    position:relative;
    border-radius:18px;
    padding:14px 16px 14px;
    background:radial-gradient(circle at top left,#1e293b,#020617);
    border:1px solid rgba(148,163,184,.7);
    box-shadow:0 18px 40px rgba(15,23,42,.8);
    overflow:hidden;
  }
  .headline-tag{
    display:inline-block;
    padding:3px 9px;
    border-radius:999px;
    font-size:.7rem;
    letter-spacing:.08em;
    background:rgba(56,189,248,.15);
    border:1px solid rgba(56,189,248,.7);
    color:#bae6fd;
    margin-bottom:6px;
  }
  .headline-title{
    margin:0 0 4px;
    font-size:1.3rem;
    font-weight:700;
  }
  .headline-meta{
    font-size:.8rem;
    color:#9ca3af;
    margin-bottom:8px;
  }
  .headline-meta strong{
    color:#e5e7eb;
  }
  .headline-intro{
    font-size:.9rem;
    color:#e5e7eb;
    margin-bottom:10px;
  }
  .headline-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    font-size:.8rem;
    color:#9ca3af;
  }
  .headline-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(129,140,248,.9);
    background:radial-gradient(circle at top,rgba(129,140,248,.25),rgba(15,23,42,1));
    color:#e5e7eb;
    text-decoration:none;
    font-size:.78rem;
    letter-spacing:.08em;
  }
  .headline-link:hover{
    background:radial-gradient(circle at top,rgba(129,140,248,.4),rgba(15,23,42,1));
  }
  .headline-link span.icon{
    font-size:.9rem;
  }
  @media(max-width:600px){
    main{padding:10px;}
  }

  .section-title{
  margin:24px 0 10px;
  font-size:1.35rem;
  font-weight:700;
}

.result-grid{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;
}

.result-card{
  border-radius:14px;
  padding:10px 12px;
  background:radial-gradient(circle at top left,#1e293b,#020617);
  border:1px solid rgba(148,163,184,.6);
  box-shadow:0 12px 30px rgba(15,23,42,.7);
}

.rc-fixture{
  font-size:.9rem;
  color:#e5e7eb;
  margin-bottom:4px;
  font-weight:600;
}

.rc-score{
  font-size:1.7rem;
  letter-spacing:.08em;
  font-weight:800;
}

.rc-meta{
  margin-top:2px;
  font-size:.75rem;
  color:#9ca3af;
}

/* kleur per uitslag op basis van wdl */
.result-card.win{
  border-color:rgba(34,197,94,.9);
}
.result-card.win .rc-score{
  color:#bbf7d0;
}

.result-card.draw{
  border-color:rgba(234,179,8,.9);
}
.result-card.draw .rc-score{
  color:#fef3c7;
}

.result-card.loss{
  border-color:rgba(239,68,68,.9);
}
.result-card.loss .rc-score{
  color:#fee2e2;
}
.result-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.result-link:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(15,23,42,.9);
}

  .stadion-cta{
  margin:24px 0 6px;
}

.stadion-cta-link{
  display:block;
  padding:14px 18px;
  border-radius:16px;
  text-decoration:none;
  color:#e5e7eb;
  background:radial-gradient(circle at top left,#1e293b,#020617);
  border:1px solid rgba(59,130,246,0.85);
  box-shadow:0 14px 32px rgba(15,23,42,0.85);
  transition:transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.stadion-cta-title{
  font-size:1.15rem;
  font-weight:700;
  margin-bottom:4px;
}

.stadion-cta-sub{
  font-size:0.88rem;
  color:#cbd5f5;
  margin-bottom:8px;
}

.stadion-cta-pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.78rem;
  letter-spacing:0.08em;
  border:1px solid rgba(129,140,248,0.9);
  background:rgba(15,23,42,0.9);
}

.stadion-cta-link:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(15,23,42,0.95);
  background:radial-gradient(circle at top left,#1d4ed8,#020617);
}

.stadium-cta a:hover {
  background: radial-gradient(circle at top, #60a5fa44, #020617);
  box-shadow: 0 0 25px rgba(59,130,246,0.45);
  transform: translateY(-2px);
}


.home-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:26px 0 8px;
}

@media (max-width:800px){
  .home-info-grid{
    grid-template-columns:1fr;
  }
}

/* algemene kaartstijl */
.home-card{
  background:radial-gradient(circle at top left,#1e293b,#020617);
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.45);
  box-shadow:0 12px 28px rgba(15,23,42,0.85);
  padding:16px 18px;
  color:#e5e7eb;
}

.home-card h3{
  margin:0 0 10px;
  font-size:1.05rem;
  color:#f9fafb;
}

.home-card p{
  font-size:0.9rem;
  line-height:1.55;
  margin:0 0 8px;
  color:#cbd5f5;
}

/* rechter link lijst */
.home-linklist{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.home-linklist li a{
  display:block;
  padding:7px 10px;
  border-radius:12px;
  background:rgba(15,23,42,0.7);
  border:1px solid rgba(59,130,246,0.6);
  color:#e5e7eb;
  text-decoration:none;
  font-size:0.85rem;

  transition:background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.home-linklist li a:hover{
  background:rgba(29,78,216,0.35);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(15,23,42,0.9);
}

.result-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
  transform: translateY(-2px);
  border-color: rgba(59,130,246,0.9);
}

.home-linklist a.active {
  background: rgba(34,197,94,0.35);
  border-color: #22c55e;
  color: #dcfce7;
}