:root {
  --bg: #06070f;
  --ink: #d8eeff;
  --ink-soft: #9cb6d4;
  --cyan: #00e5ff;
  --magenta: #cc00ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse 900px 500px at -5% -8%, rgba(0, 229, 255, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 700px 600px at 108% 95%, rgba(204, 0, 255, 0.08) 0%, transparent 60%),
    var(--bg);
}

.promo {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.banner-wrap {
  position: relative;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-composite: intersect;
}

.banner {
  display: block;
  width: 100%;
  height: auto;
}

.event-copy {
  margin-top: 26px;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.event-copy > div:first-child {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--ink);
}

.event-copy > div:last-child {
  margin-top: 6px;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-weight: 500;
  color: var(--ink-soft);
}

.site-footer {
  margin-top: 48px;
  padding: 16px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  opacity: 0.6;
}

.site-footer p {
  margin: 0;
}

@media (max-width: 640px) {
  .promo {
    padding: 16px 12px 28px;
  }

  .event-copy {
    margin-top: 18px;
  }
}