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

body{
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #2b1a07 0%, #050308 55%, #000 100%);
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Background glow like your current design */
body::before,
body::after{
  content:"";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,210,80,.14) 0, transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(255,149,0,.17) 0, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(255,190,120,.11) 0, transparent 50%);
  mix-blend-mode: screen;
  opacity: .8;
  z-index: -2;
  animation: bgFloat 18s linear infinite alternate;
}

body::after{
  opacity: .5;
  animation-duration: 26s;
}

@keyframes bgFloat{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-12px,8px,0) scale(1.05); }
  100%{ transform: translate3d(10px,-10px,0) scale(1.02); }
}

.wrapper{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 18px 40px;
}

.card{
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 22px;
  border-radius: 24px;
  background: radial-gradient(circle at top, rgba(255,181,80,.24), rgba(10,6,0,.98));
  box-shadow: 0 0 40px rgba(255,182,73,.30), 0 0 120px rgba(0,0,0,.85);
  border: 1px solid rgba(255,206,115,.40);
}

.logo-wrap{
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.logo{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px rgba(0,0,0,.65), 0 0 35px rgba(255,204,102,.7);
}

.title{
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #ffe6a0;
  text-transform: uppercase;
}

.subtitle{
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #f3e0c2;
  line-height: 1.5;
}

/* Manual-style: REAL LINK button (no JS) */
.btn-telegram{
  margin-top: 18px;
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;

  border: none;
  border-radius: 999px;
  padding: 14px 12px;
  font-size: 16px;
  font-weight: 800;

  background: linear-gradient(90deg, #ffd36a, #ff9f1a);
  color: #241200;

  box-shadow: 0 0 22px rgba(255,201,92,.55);
  transition: transform .15s ease, filter .15s ease;
}

.btn-telegram:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.btn-telegram:active{
  transform: translateY(0px);
}

.divider{
  margin: 18px 0;
  height: 1px;
  width: 100%;
  background: rgba(255,207,138,.25);
}

.benefits{
  margin-top: 6px;
}

.benefits-title{
  text-align: center;
  font-size: 14px;
  color: #f9d79d;
  letter-spacing: .2px;
  margin-bottom: 10px;
}

.benefits-list{
  list-style: none;
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.benefits-list li{
  font-size: 13px;
  color: #fbe1b2;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,207,138,.18);
  border-radius: 12px;
  padding: 10px 12px;
}

.footer{
  text-align: center;
  font-size: 11px;
  color: #c19c63;
  margin-top: 16px;
}