* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: 'Montserrat', sans-serif;
  background: #000;
  color: #fff;
  line-height: 1.4;
}

.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url('mainbg.webp');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

.neon-swoosh {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 78%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 0 6px #2ecc71) drop-shadow(0 0 16px #2ecc71);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 760px) {
  .page {
    background-image: url('mainbg_mobile.webp');
    background-position: left top;
  }
  .neon-swoosh { display: block; }
}

.content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 20px 40px;
  max-width: 640px;
  margin: 0 auto;
}

.check-badge {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #2ecc71;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  box-shadow: 0 0 40px rgba(46,204,113,.55);
}
.check-badge img { width: 58px; height: auto; }

h1.headline {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 26px;
}
h1.headline .accent { color: #d65d1b; }

.progress-bar {
  position: relative;
  width: 100%;
  max-width: 390px;
  height: 50px;
  border-radius: 25px;
  background: #1d9d00;
  border: 1px solid rgb(240,243,245);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  box-shadow: 0 4px 14px rgba(29,157,0,.4);
}
.progress-bar .progress-knob {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #1d9d00;
  border: 1px solid rgb(240,243,245);
  box-shadow: 0 4px 14px rgba(29,157,0,.4);
  z-index: 0;
}
@keyframes progress-pulse {
  0%   { opacity: 0; }
  60%  { opacity: .6; }
  100% { opacity: .6; }
}
.progress-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.55);
  animation: progress-pulse 1.45s ease-in-out infinite;
  z-index: 0;
}
.progress-bar span {
  position: relative;
  z-index: 1;
  font-size: 25px;
  font-weight: 800;
  color: #fff;
}

.lead {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  max-width: 520px;
  margin-bottom: 26px;
}
.lead .accent { color: #d65d1b; font-weight: 700; }

.notice-box {
  border: 1px solid rgba(214,93,27,.45);
  background: rgba(0,4,10,.55);
  border-radius: 16px;
  padding: 22px 28px;
  max-width: 520px;
  font-size: 18px;
  color: #fff;
  margin-bottom: 32px;
}
.notice-box .accent { color: #d65d1b; font-weight: 700; }

@keyframes neon-glow {
  0%   { box-shadow: 0 0 3px #2ecc71, 0 0 6px #2ecc71, 0 0 9px #2ecc71, 0 0 12px #2ecc71; }
  50%  { box-shadow: 0 0 8px #2ecc71, 0 0 16px #2ecc71, 0 0 24px #2ecc71, 0 0 32px #2ecc71; }
  100% { box-shadow: 0 0 3px #2ecc71, 0 0 6px #2ecc71, 0 0 9px #2ecc71, 0 0 12px #2ecc71; }
}

.btn-cta {
  display: inline-block;
  text-decoration: none;
  background: #134000;
  border: 2px solid #22b100;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 17px 36px;
  border-radius: 14px;
  animation: neon-glow 1.8s ease-in-out infinite;
}
.btn-cta:hover { background: #17550a; }

footer {
  padding: 18px 20px;
  text-align: center;
  color: #91999d;
  font-size: 16px;
  background: rgba(0,0,0,.35);
}

@media (max-width: 760px) {
  h1.headline { font-size: 28px; }
  .check-badge { width: 110px; height: 110px; }
  .check-badge img { width: 48px; }
  .lead, .notice-box { font-size: 16px; }
}