:root {
  --green: #20f000;
  --black: #070a08;
  --panel: #101612;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--black);
  color: #fff;
  font-family: Arial, sans-serif;
}
body.locked {
  overflow: hidden;
}
header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100% - 1240px) / 2));
  border-bottom: 1px solid #ffffff18;
  position: sticky;
  top: 0;
  background: #070a08f2;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}
.brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.brand span,
.green,
.kicker {
  color: var(--green);
}
nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
nav a {
  color: #ffffffa0;
  text-decoration: none;
  font-weight: bold;
}
.button {
  display: inline-block;
  background: var(--green);
  color: #000 !important;
  padding: 17px 24px;
  border: 0;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
}
.button.small {
  padding: 12px 18px;
}
.hero {
  min-height: 610px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 40px;
  padding: 70px max(24px, calc((100% - 1240px) / 2));
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #ffffff18;
}
.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#20f0000d 1px, transparent 1px),
    linear-gradient(90deg, #20f0000d 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, #000, transparent);
}
.hero > *:not(.grid) {
  position: relative;
}
.pill {
  display: inline-block;
  border: 1px solid #20f00050;
  background: #20f00012;
  color: #66ff50;
  padding: 8px 12px;
  border-radius: 30px;
  font-weight: bold;
}
.hero h1 {
  font-size: clamp(54px, 7vw, 94px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin: 22px 0;
}
.hero h1 em {
  font-style: normal;
  color: var(--green);
}
.hero-copy > p:not(.pill) {
  max-width: 670px;
  color: #ffffff99;
  font-size: 19px;
  line-height: 1.7;
}
.hero-copy .button {
  margin-top: 14px;
}
.hero-logo {
  width: 100%;
  max-width: 430px;
  filter: drop-shadow(0 0 30px #20f00028);
}
.section {
  max-width: 1280px;
  margin: auto;
  padding: 70px 20px;
}
.kicker {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2em;
  margin: 0 0 10px;
}
.section h2,
.notice h2 {
  font-size: 38px;
  margin: 0 0 30px;
}
.games {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.games article {
  background: var(--panel);
  border: 1px solid #ffffff18;
  border-radius: 18px;
  padding: 20px;
}
.game-head {
  display: flex;
  gap: 16px;
}
.date {
  width: 66px;
  text-align: center;
  border: 1px solid #ffffff20;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}
.date > * {
  display: block;
}
.date > b {
  background: var(--green);
  color: #000;
  font-size: 12px;
  padding: 5px;
}
.date strong {
  font-size: 25px;
  padding-top: 8px;
}
.date small {
  padding: 2px 0 9px;
  color: #ffffff70;
}
.game-head span {
  color: var(--green);
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.game-head h3 {
  font-size: 20px;
  margin: 7px 0;
}
.game-head p {
  color: #ffffff70;
  font-size: 14px;
}
.prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: 1px solid #ffffff14;
  margin: 22px 0;
  padding: 15px 0;
}
.prices > div:last-child {
  text-align: right;
}
.prices small,
.prices b {
  display: block;
}
.prices small {
  color: #ffffff60;
  font-size: 10px;
}
.prices b {
  margin-top: 5px;
}
.choose {
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: 11px;
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}
.choose:hover {
  background: var(--green);
}
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  background: #ffffff08;
  border-block: 1px solid #ffffff18;
  padding: 50px max(24px, calc((100% - 1240px) / 2));
}
.features p,
.notice p {
  color: #ffffff80;
  line-height: 1.6;
}
.notice {
  border: 1px solid #20f00045;
  background: #20f0000f;
  border-radius: 25px;
  padding: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.notice h2 {
  margin-bottom: 10px;
}
footer {
  border-top: 1px solid #ffffff18;
  max-width: 1280px;
  margin: auto;
  padding: 35px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff70;
}
footer small {
  font-weight: normal;
  color: #ffffff70;
}
.modal {
  position: fixed;
  inset: 0;
  background: #000c;
  z-index: 50;
  padding: 20px;
  place-items: center;
}
.modal:not([hidden]) {
  display: grid;
}
.modal form {
  width: min(540px, 100%);
  max-height: 95vh;
  overflow: auto;
  background: #111713;
  border: 1px solid #ffffff20;
  border-radius: 24px;
  padding: 28px;
  position: relative;
}
.close {
  position: absolute;
  right: 20px;
  top: 16px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 32px;
}
.ticket-count {
  display: grid;
  gap: 10px;
}
.ticket-count label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ffffff20;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0;
}
.ticket-count span {
  display: flex;
  flex-direction: column;
}
.ticket-count small {
  margin-top: 4px;
  color: #ffffff70;
  font-weight: normal;
}
.ticket-count input {
  width: 76px;
  margin: 0;
  text-align: center;
}
.modal label {
  display: block;
  margin-top: 18px;
  font-weight: bold;
}
.modal input {
  width: 100%;
  padding: 14px;
  margin-top: 7px;
  border-radius: 10px;
  border: 1px solid #ffffff25;
  background: #ffffff0c;
  color: #fff;
  font-size: 16px;
}
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ffffff20;
  margin-top: 24px;
  padding-top: 22px;
}
.total span b {
  display: block;
  font-size: 25px;
}
.fine {
  font-size: 12px;
  color: #ffffff60;
  text-align: center;
}
@media (max-width: 800px) {
  nav a:not(.button) {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 45px;
  }
  .hero-logo {
    max-width: 300px;
    grid-row: 1;
  }
  .games,
  .features {
    grid-template-columns: 1fr;
  }
  .notice {
    display: block;
  }
  .notice .button {
    margin-top: 18px;
  }
  .fields {
    grid-template-columns: 1fr;
  }
  .total {
    align-items: flex-end;
    gap: 15px;
  }
  .total .button {
    padding: 14px;
    font-size: 12px;
  }
  footer {
    flex-direction: column;
    gap: 20px;
  }
}