:root {
  color-scheme: dark;
  --bg-main: #050607;
  --bg-panel: rgba(11, 12, 15, 0.8);
  --bg-card-top: rgba(52, 55, 61, 0.9);
  --bg-card-bottom: rgba(10, 11, 14, 0.98);
  --text-main: #fbfbfd;
  --purple: #be7dff;
  --green: #d7ff21;
  --white: rgba(255, 255, 255, 0.92);
  --outline: rgba(255, 255, 255, 0.12);
  --shadow: rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 2rem;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at top left, rgba(190, 125, 255, 0.14), transparent 32%),
    radial-gradient(circle at bottom right, rgba(215, 255, 33, 0.1), transparent 34%),
    linear-gradient(155deg, #030404 0%, #090b0d 48%, #020203 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
  pointer-events: none;
}

.background-arrows {
  --arrow-gap: clamp(0.75rem, 1.8vw, 1.5rem);
  --arrow-white-width: min(24vw, 260px);
  --arrow-white-height: min(66vh, 600px);
  --arrow-purple-width: min(22vw, 235px);
  --arrow-purple-height: min(62vh, 560px);
  --arrow-green-width: min(25vw, 275px);
  --arrow-green-height: min(70vh, 640px);
  --arrow-end: calc((var(--arrow-green-height) * 0.56) - (var(--arrow-green-width) * 0.5) + 1.5rem);
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.background-arrows::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 2, 2, 0.2), rgba(2, 2, 2, 0.5)),
    radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.3) 100%);
}

.background-arrow {
  position: fixed;
  bottom: -10vh;
  width: var(--arrow-white-width);
  height: var(--arrow-white-height);
  clip-path: polygon(50% 0, 100% 22%, 76% 22%, 76% 100%, 24% 100%, 24% 22%, 0 22%);
  opacity: 0.16;
  filter:
    drop-shadow(0 0 28px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 42px rgba(255, 255, 255, 0.08));
  pointer-events: none;
  animation: arrowDrift 9s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

.background-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}

.background-arrow--white {
  right: calc(
    var(--arrow-end) + var(--arrow-green-width) + var(--arrow-purple-width) + (var(--arrow-gap) * 2)
  );
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(208, 214, 222, 0.72));
  animation-delay: 0.3s;
}

.background-arrow--purple {
  right: calc(var(--arrow-end) + var(--arrow-green-width) + var(--arrow-gap));
  width: var(--arrow-purple-width);
  height: var(--arrow-purple-height);
  background: linear-gradient(180deg, rgba(190, 125, 255, 0.94), rgba(128, 70, 224, 0.8));
  animation-delay: 1s;
}

.background-arrow--green {
  right: var(--arrow-end);
  width: var(--arrow-green-width);
  height: var(--arrow-green-height);
  background: linear-gradient(180deg, rgba(215, 255, 33, 0.97), rgba(180, 235, 24, 0.84));
  animation-delay: 1.8s;
}

.hero {
  position: relative;
  width: min(100%, 980px);
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    var(--bg-panel);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
  backdrop-filter: blur(14px);
  animation: reveal 0.8s ease-out both;
}

.hero__logo {
  display: block;
  width: min(72vw, 420px);
  margin: 0 auto 2rem;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 32px rgba(190, 125, 255, 0.2))
    drop-shadow(0 0 22px rgba(215, 255, 33, 0.08))
    drop-shadow(0 0 16px rgba(0, 0, 0, 0.5));
}

.hero__message {
  max-width: 760px;
  margin: 0 auto 2rem;
  font-size: clamp(1.2rem, 2.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.hero__message-line {
  display: block;
}

.hero__message-line--white {
  color: var(--text-main);
}

.hero__message-line--purple {
  color: var(--purple);
}

.hero__message-line--green {
  color: var(--green);
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
}

.counter-card {
  --card-accent: rgba(255, 255, 255, 0.65);
  position: relative;
  min-height: 250px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 1.5rem 1rem 1.15rem;
  border-radius: 1.6rem;
  border: 1px solid var(--outline);
  background: linear-gradient(180deg, var(--bg-card-top) 0%, var(--bg-card-bottom) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -24px 40px rgba(0, 0, 0, 0.34),
    0 18px 28px var(--shadow),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  overflow: hidden;
  animation: reveal 0.75s ease-out both;
}

.counter-card--white {
  --card-accent: rgba(255, 255, 255, 0.9);
}

.counter-card--purple {
  --card-accent: rgba(190, 125, 255, 0.95);
}

.counter-card--green {
  --card-accent: rgba(215, 255, 33, 0.95);
}

.counter-card:nth-child(1) {
  animation-delay: 0.14s;
}

.counter-card:nth-child(2) {
  animation-delay: 0.22s;
}

.counter-card:nth-child(3) {
  animation-delay: 0.3s;
}

.counter-card:nth-child(4) {
  animation-delay: 0.38s;
}

.counter-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 36%),
    linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.34) 100%);
  pointer-events: none;
}

.counter-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--card-accent),
    transparent
  );
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.85);
  opacity: 0.5;
  transform: translateY(-1px);
}

.counter-card__value {
  position: relative;
  z-index: 1;
  font-family: "Bahnschrift SemiCondensed", "Franklin Gothic Demi Cond", sans-serif;
  font-size: clamp(4.8rem, 9vw, 6.7rem);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: 0.12rem;
  color: #f8f8fb;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.08),
    0 14px 24px rgba(0, 0, 0, 0.55);
}

.counter-card__label {
  position: relative;
  z-index: 1;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: var(--card-accent);
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes arrowDrift {
  from {
    transform: translateY(0) rotate(34deg);
  }

  to {
    transform: translateY(-22px) rotate(34deg);
  }
}

@media (max-width: 880px) {
  body {
    overflow: auto;
  }

  .background-arrows {
    --arrow-gap: clamp(0.45rem, 1.3vw, 0.9rem);
  }

  .countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .counter-card {
    min-height: 210px;
  }
}

@media (max-width: 520px) {
  body {
    padding: 1rem;
  }

  .hero {
    padding: 1.5rem 1rem;
    border-radius: 1.5rem;
  }

  .hero__message {
    margin-bottom: 1.5rem;
    font-size: 1.08rem;
  }

  .countdown {
    gap: 0.9rem;
  }

  .counter-card {
    min-height: 180px;
    border-radius: 1.25rem;
  }

  .counter-card__label {
    font-size: 0.78rem;
    letter-spacing: 0.14rem;
  }
}