@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #090313;
  --panel: rgba(29, 13, 48, .88);
  --purple: #922cff;
  --purple-light: #c18aff;
  --text: #fff;
  --muted: #d0c0df;
  --gold: #ffd66b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: Poppins, sans-serif;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(111, 26, 190, .28), transparent 38%),
    radial-gradient(ellipse at 85% 70%, rgba(150, 35, 255, .22), transparent 40%),
    linear-gradient(145deg, #090313, #160927 55%, #090313);
}
.ambient {
  position: fixed;
  width: 35rem;
  height: 35rem;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .2;
  z-index: -2;
  pointer-events: none;
  animation: floatGlow 14s ease-in-out infinite alternate;
}
.ambient-one { background: #8c25ff; top: -18rem; left: -12rem; }
.ambient-two { background: #bd5bff; bottom: -20rem; right: -12rem; animation-delay: -5s; }
.light-beam {
  position: fixed;
  z-index: -1;
  top: -20%;
  left: -80%;
  width: 180%;
  height: 3px;
  opacity: .45;
  pointer-events: none;
  transform: rotate(-18deg);
  background: linear-gradient(90deg, transparent, #8e31ff, #f0d7ff, #8e31ff, transparent);
  box-shadow: 0 0 18px #a238ff, 0 0 50px #a238ff;
  animation: beamMove 9s linear infinite;
}
@keyframes beamMove {
  from { top: 110%; left: -100%; }
  to { top: -20%; left: 100%; }
}
@keyframes floatGlow {
  from { transform: translate3d(-2rem, 0, 0) scale(.9); }
  to { transform: translate3d(2rem, 2rem, 0) scale(1.12); }
}
.container { width: min(1100px, calc(100% - 36px)); margin-inline: auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(12, 4, 25, .88);
  border-bottom: 1px solid rgba(174, 91, 255, .28);
  backdrop-filter: blur(16px);
}
.navbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { color: #fff; text-decoration: none; font-size: 22px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 0 16px #a34aff; }
.logo span { color: var(--purple-light); }
.nav-actions { display: flex; gap: 10px; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 20px; border-radius: 8px;
  text-decoration: none; font-size: 12px; font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 0 22px #a238ff88; }
.button-outline { color: white; border: 1px solid #bd7aff; }
.button-primary { color: white; background: linear-gradient(120deg, #7112db, #b14bff); }
.hero { padding: 88px 12px 54px; text-align: center; }
.eyebrow {
  display: inline-block; padding: 8px 18px; border: 1px solid #b86aff;
  border-radius: 50px; background: #8c27ff22; color: #e4c5ff;
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
}
.hero h1 {
  margin: 24px 0 16px; font-size: clamp(34px, 6vw, 64px);
  line-height: 1.13; font-weight: 900; letter-spacing: -.8px;
  color: #e8caff;
  background: linear-gradient(180deg, #fff 5%, #d9aaff 48%, #8d35ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 16px #912dff55);
}
.hero-copy { max-width: 740px; margin: auto; color: var(--muted); font-size: 14px; line-height: 1.9; }
.highlight { color: var(--gold); font-weight: 800; }
.panel {
  margin-bottom: 28px; padding: 30px; border-radius: 20px;
  background: linear-gradient(145deg, rgba(38, 17, 61, .96), rgba(16, 8, 29, .96));
  border: 1px solid rgba(155, 69, 232, .4);
  box-shadow: 0 0 35px rgba(140, 40, 255, .12);
}
.section-title { margin: 0 0 24px; text-align: center; color: #e6c9ff; font-size: 24px; text-shadow: 0 0 15px #9e42ff55; }
.prize-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prize-card {
  padding: 26px 14px; text-align: center; border-radius: 15px;
  background: linear-gradient(145deg, #351454, #160b25);
  border: 1px solid rgba(165, 75, 255, .42);
  transition: transform .25s ease, box-shadow .25s ease;
}
.prize-card:hover { transform: translateY(-7px); box-shadow: 0 0 28px #9c36ff55; }
.prize-medal { font-size: 34px; }
.prize-card h3 { margin: 9px 0; color: #e5c6ff; font-size: 16px; }
.prize-amount { color: var(--gold); font-size: clamp(20px, 3vw, 27px); font-weight: 900; }
.period-banner {
  margin: 0 0 28px; padding: 24px; border-radius: 15px; text-align: center;
  display: grid; gap: 7px; background: linear-gradient(100deg, #5512a4, #9a35e8, #5512a4);
  box-shadow: 0 0 30px #8d27ff33;
}
.period-banner span { color: #ead5ff; font-size: 11px; font-weight: 700; letter-spacing: 3px; }
.period-banner strong { font-size: clamp(20px, 4vw, 29px); }
.steps-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; counter-reset: steps; }
.steps-grid li {
  display: flex; align-items: flex-start; gap: 14px; padding: 17px;
  border-radius: 12px; background: #ffffff08; border: 1px solid #a64cff33;
  color: var(--muted); font-size: 13px; line-height: 1.8;
}
.steps-grid li::before {
  counter-increment: steps; content: counter(steps, decimal-leading-zero);
  flex: 0 0 35px; height: 35px; display: grid; place-items: center;
  border-radius: 10px; background: linear-gradient(135deg, #7817dc, #bb61ff);
  color: white; font-weight: 900; box-shadow: 0 0 15px #9b3bff55;
}
.example-box {
  padding: 22px; border: 1px dashed #b65bff; border-radius: 13px;
  background: #8c27ff12; color: var(--muted); font-size: 13px; line-height: 2;
}
.example-box strong { color: var(--gold); }
.example-box .match { color: #c18aff; font-weight: 800; }
.example-note { margin-top: 14px; font-style: italic; }
.terms-list { list-style: none; margin: 0; padding: 0; }
.terms-list li { padding: 11px 0; border-bottom: 1px solid #ffffff12; color: var(--muted); font-size: 13px; line-height: 1.8; }
.terms-list li::before { content: "✦"; color: #bd78ff; margin-right: 12px; }
.contact-panel {
  padding: 32px 20px; text-align: center; border-radius: 18px;
  background: #ffffff08; border: 1px solid #9d49e855;
}
.contact-panel h2 { margin: 0 0 10px; color: #e2c1ff; }
.contact-panel p { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.9; }
.contact-panel .responsible-note { margin-top: 18px; color: #bba9ca; font-size: 11px; }
.site-footer { margin-top: 48px; padding: 28px 16px; border-top: 1px solid #9b45e833; text-align: center; color: #9e8eaf; font-size: 11px; line-height: 2; }
.site-footer strong { color: #c58aff; font-size: 14px; }
.site-footer p { margin: 2px 0 8px; }

@media (max-width: 650px) {
  .container { width: min(100% - 26px, 1100px); }
  .navbar { min-height: 64px; }
  .logo { font-size: 17px; }
  .button { min-height: 36px; padding: 0 12px; font-size: 10px; }
  .hero { padding: 66px 4px 42px; }
  .panel { padding: 21px 15px; }
  .section-title { font-size: 20px; }
  .prize-grid, .steps-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}