:root{
  --bg:#0e0f13;
  --bg2:#0b0c10;
  --text:#f5f6f7;
  --muted:#c8cbd3;
  --accent:#2aa6f8; /* колір Telegram */
  --accent-2:#1f8ee0;
  --btn-text:#0b1220;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% 0%, #151821 0%, rgba(21,24,33,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 16px;
}

.card{
  text-align:center;
  max-width:980px;
  width:100%;
}

.title{
  font-weight:800;
  line-height:1.25;
  letter-spacing:.2px;
  font-size:clamp(28px, 3.2vw + 10px, 48px);
  margin:0 0 28px;
}

.subtitle{
  font-weight:700;
  font-size:clamp(18px, 1.2vw + 10px, 26px);
  line-height:1.45;
  margin:0 0 26px;
  color:var(--text);
}

.tg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:min(640px, 92vw);
  height:64px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  color:#fff;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: var(--shadow);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  margin:6px 0 22px;
}
.tg-btn:hover{ transform: translateY(-1px); filter:brightness(1.05) }
.tg-btn:active{ transform: translateY(0); filter:brightness(.98) }
.tg-btn:focus-visible{
  outline:2px solid #81d0ff;
  outline-offset:3px;
}

.tg-ico svg{ fill:#fff; display:block }

.hint{
  margin:6px 0 20px;
  color:var(--muted);
  font-weight:500;
  line-height:1.5;
  font-size:clamp(14px, .6vw + 10px, 18px);
}

.handle{
  font-weight:800;
  font-size:clamp(28px, 2.6vw + 10px, 44px);
  letter-spacing:.3px;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}

/* невелике згасання донизу, як на скріні */
.card::after{
  content:"";
  display:block;
  height:20vh;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
  margin-top:8vh;
}

/* дрібні правки для малих екранів */
@media (max-width: 420px){
  .tg-btn{ height:56px; font-size:16px }
}