:root{
  --bg: #0b0f14;
  --bgSoft: #101722;
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.12);

  --accent: #7cf7ff;
  --accentSoft: rgba(124,247,255,.16);

  --danger: #ff4d6d;
  --radius: 22px;

  --tg: #229ED9;
  --tgHover: #1b8abf;

  --kick: #55ff00;
  --kickDark: #17380a;
  --kickBorder: rgba(85,255,0,.45);
}

*{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(124,247,255,.10), transparent 60%),
    radial-gradient(900px 600px at 10% 40%, rgba(255,77,109,.08), transparent 55%),
    radial-gradient(700px 500px at 90% 20%, rgba(85,255,0,.06), transparent 50%),
    var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.app{
  width: min(1000px, 100%);
}

.hero{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.cardInner{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 18px;
}

/* ===== neon ===== */
.neonHeader{
  display: flex;
  justify-content: center;
  margin: 6px 0 2px;
}

.neonSign{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  border-radius: 24px;
  border: 4px solid rgba(124,247,255,.85);
  background: #070b10;
  box-shadow:
    0 0 6px rgba(124,247,255,.35),
    0 0 18px rgba(124,247,255,.30),
    0 0 42px rgba(124,247,255,.22),
    inset 0 0 18px rgba(124,247,255,.20);
  animation: neonFlicker 6.2s infinite;
  user-select: none;
}

.neonText{
  font-size: clamp(22px, 4.2vw, 54px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 1px;
  text-align: center;
  color: #eaffff;
  text-shadow:
    0 0 6px rgba(124,247,255,.55),
    0 0 18px rgba(124,247,255,.42),
    0 0 40px rgba(124,247,255,.28);
  -webkit-text-stroke: 1px rgba(124,247,255,.35);
}

@keyframes neonFlicker{
  0%, 100% { opacity: 1; filter: saturate(1.08); }
  6% { opacity: .95; }
  7% { opacity: .60; }
  8% { opacity: 1; }
  54% { opacity: .92; }
  55% { opacity: .70; }
  56% { opacity: 1; }
}

/* ===== intro ===== */
.intro{
  padding: 24px;
}

.eyebrow{
  margin: 0 0 16px;
  text-align: center;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(255,255,255,.12);
}

.countdown{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.timerGrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.timeCell{
  position: relative;
  overflow: hidden;
  min-height: 140px;
  border-radius: 20px;
  border: 1px solid rgba(124,247,255,.14);
  background:
    linear-gradient(180deg, rgba(124,247,255,.10), rgba(255,255,255,.03)),
    rgba(9,13,19,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 22px rgba(124,247,255,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.timeCell::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(124,247,255,.18), transparent 45%);
  pointer-events: none;
}

.timeValue{
  position: relative;
  z-index: 1;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  font-weight: 900;
  color: #eaffff;
  text-shadow:
    0 0 6px rgba(124,247,255,.35),
    0 0 16px rgba(124,247,255,.22);
}

.timeLabel{
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.timerMeta{
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* ===== progress section ===== */
.progressSection{
  padding: 24px;
}

.progressTitle{
  margin: 0 0 18px;
  text-align: center;
  color: var(--text);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 900;
  letter-spacing: .5px;
  text-shadow: 0 0 16px rgba(124,247,255,.10);
}

.progressBanner{
  position: relative;
  min-height: 280px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    url("images/5000.webp") center center / cover no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 30px rgba(0,0,0,.30);
}

.progressOverlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,8,12,.28), rgba(5,8,12,.55)),
    linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,.10));
}

.progressContent{
  position: relative;
  z-index: 1;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 24px;
}

.progressPercent{
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 10px rgba(0,0,0,.45),
    0 0 24px rgba(124,247,255,.18);
}

.progressBar{
  width: 100%;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.25),
    0 0 18px rgba(124,247,255,.08);
}

.progressBarFill{
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #55ff00 0%, #7cf7ff 100%);
  box-shadow:
    0 0 18px rgba(124,247,255,.25),
    inset 0 -2px 6px rgba(0,0,0,.12);
  transition: width .8s ease;
}

.progressMeta{
  color: rgba(255,255,255,.88);
  font-size: 14px;
  line-height: 1.45;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* ===== follow ===== */
.follow{
  padding: 24px;
}

.followTitle{
  margin: 0 0 18px;
  text-align: center;
  color: var(--text);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
}

.followButtons{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ===== buttons ===== */
.btn{
  position: relative;
  isolation: isolate;
  min-width: 180px;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    transform .12s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    filter .18s ease;
}

.btn:hover{
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(1px);
}

.btnText{
  position: relative;
  z-index: 1;
  font-size: 18px;
}

.btnGlow{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

/* Kick */
.kickBtn{
  color: #081103;
  background: linear-gradient(180deg, #74ff2a, #55ff00);
  border-color: var(--kickBorder);
  box-shadow:
    0 0 20px rgba(85,255,0,.18),
    inset 0 -4px 10px rgba(0,0,0,.12);
}
.kickBtn .btnGlow{
  background: radial-gradient(circle at top, rgba(255,255,255,.55), transparent 42%);
}
.kickBtn:hover{
  filter: brightness(1.03);
  box-shadow:
    0 0 24px rgba(85,255,0,.26),
    inset 0 -4px 10px rgba(0,0,0,.12);
}

/* Telegram */
.tgBtn{
  color: #fff;
  background: linear-gradient(180deg, #28a9e3, #1d92c8);
  border-color: rgba(34,158,217,.55);
  box-shadow:
    0 0 20px rgba(34,158,217,.20),
    inset 0 -4px 10px rgba(0,0,0,.10);
}
.tgBtn:hover{
  background: linear-gradient(180deg, #2db3ee, var(--tgHover));
}
.tgIcon{
  width: 20px;
  height: 20px;
  fill: #fff;
  position: relative;
  z-index: 1;
}

/* ===== responsive ===== */
@media (max-width: 900px){
  .timerGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  body{
    padding: 16px;
  }

  .intro,
  .progressSection,
  .follow{
    padding: 18px;
  }

  .neonSign{
    width: 100%;
    padding: 18px 16px;
  }

  .neonText{
    font-size: clamp(20px, 7vw, 34px);
  }

  .timerGrid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .timeCell{
    min-height: 112px;
  }

  .timeValue{
    font-size: clamp(32px, 10vw, 52px);
  }

  .progressBanner{
    min-height: 240px;
  }

  .progressContent{
    min-height: 240px;
    padding: 18px;
  }

  .progressBar{
    height: 20px;
  }

  .btn{
    width: 100%;
  }
}

@media (max-width: 420px){
  .timerGrid{
    grid-template-columns: 1fr;
  }
}