:root{
  --bg:#050b22;
  --bg2:#071a4a;
  --red:#ff174d;
  --blue:#1c55ff;
  --white:#fff;
  --muted:#aab5d6;
  --gold:#d79b16;
  --silver:#9aa6b8;
  --green:#06b51f;
  --line:rgba(255,255,255,.15);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,23,77,.75), transparent 22%),
    radial-gradient(circle at 90% 20%, rgba(28,85,255,.65), transparent 24%),
    linear-gradient(135deg,var(--bg),var(--bg2) 55%,#070014);
  color:var(--white);
}
a{color:inherit;text-decoration:none}
.hero{min-height:720px;padding:32px 7vw;position:relative;overflow:hidden}
.hero:before{
  content:"";position:absolute;inset:auto -15% -35% -10%;height:420px;
  background:radial-gradient(circle, rgba(255,23,77,.85), transparent 62%);
  filter:blur(18px);z-index:-1;
}
.nav{display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:14px;font-weight:900;font-size:28px;letter-spacing:2px}
.brand-mark{
  width:62px;height:62px;display:grid;place-items:center;
  font-weight:900;font-size:38px;background:white;color:#07113a;
  clip-path:polygon(50% 0,100% 100%,55% 78%,42% 100%,0 100%);
}
.nav-links{display:flex;gap:26px;color:var(--muted);font-weight:700}
.hero-content{max-width:760px;margin-top:150px}
.eyebrow,.tag{color:#3ef7ff;text-transform:uppercase;letter-spacing:4px;font-weight:800}
h1{font-size:96px;line-height:.9;margin:18px 0;text-transform:uppercase}
.subtitle{font-size:24px;color:var(--muted);line-height:1.45}
.btn{display:inline-block;margin-right:14px;margin-top:28px;padding:16px 24px;border-radius:14px;font-weight:900}
.primary{background:var(--red)}
.ghost{border:1px solid var(--line)}
.section{padding:70px 7vw}
.section-head h2{font-size:52px;margin:12px 0}
.section-head p{color:var(--muted);font-size:18px}
.standings-card{
  margin-top:28px;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);background:rgba(2,8,28,.68)
}
.table-row{display:grid;grid-template-columns:80px 1fr 90px 90px 90px 130px;align-items:center}
.table-row span{padding:17px 22px;border-bottom:1px solid var(--line);font-size:22px;font-weight:800}
.table-head{background:rgba(255,255,255,.08);text-transform:uppercase}
.table-head span{font-size:18px;color:#eaf0ff}
.row.gold{background:linear-gradient(90deg,rgba(215,155,22,.95),rgba(215,155,22,.42))}
.row.silver{background:linear-gradient(90deg,rgba(154,166,184,.82),rgba(154,166,184,.34))}
.row.dark{background:rgba(4,20,60,.55)}
.row .points{background:var(--green);text-align:center;color:white;font-size:28px}
.cups-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.cup{min-height:220px;border-radius:24px;padding:28px;border:1px solid var(--line);background:rgba(255,255,255,.06)}
.cup h3{font-size:34px;margin:0 0 16px}
.winter{box-shadow:inset 0 0 0 2px rgba(62,247,255,.25)}
.autumn{box-shadow:inset 0 0 0 2px rgba(255,121,0,.35)}
.major{background:linear-gradient(135deg,#f7f7f7,#ddd);color:#15172b}
.bracket{display:flex;gap:70px;align-items:center;margin-top:38px;overflow:auto;padding-bottom:20px}
.round{min-width:270px;display:flex;flex-direction:column;gap:34px}
.round h3{text-transform:uppercase;color:#3ef7ff}
.match{
  display:grid;grid-template-columns:1fr 46px;gap:0;
  background:white;color:#07113a;border:2px solid #07113a;
  box-shadow:16px 18px 0 rgba(255,23,77,.16)
}
.match span,.match b{padding:13px 16px;border-bottom:1px solid #07113a;font-size:18px;font-weight:900}
.match b{background:var(--red);color:white;text-align:center}
.match span:nth-last-child(-n+2),.match b:nth-last-child(-n+1){border-bottom:0}
.rules{display:flex;justify-content:space-between;gap:30px;align-items:center}
.points-grid{display:grid;grid-template-columns:repeat(4,150px);gap:14px}
.points-grid div{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:18px;padding:20px;text-align:center}
.points-grid b{display:block;color:var(--muted)}
.points-grid span{display:block;font-size:38px;font-weight:900;color:#3ef7ff;margin-top:8px}
footer{padding:34px 7vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted)}
@media(max-width:850px){
  .nav,.rules,footer{flex-direction:column;align-items:flex-start}
  .nav-links{flex-wrap:wrap}
  h1{font-size:56px}
  .table-row{grid-template-columns:54px 1fr 52px 52px 52px 72px}
  .table-row span{font-size:15px;padding:12px 8px}
  .cups-grid{grid-template-columns:1fr}
  .points-grid{grid-template-columns:repeat(2,1fr)}
}