
:root{
  --bg1:#0b0b10;
  --bg2:#1a1022;
  --bg3:#1b1228;
  --tg:#229ED9;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#fff;
  background:
    radial-gradient(40% 30% at 15% 15%, rgba(255,0,168,0.5), transparent 60%),
    radial-gradient(50% 40% at 80% 0%, rgba(0,148,255,0.4), transparent 60%),
    radial-gradient(50% 50% at 30% 90%, rgba(255,122,0,0.45), transparent 70%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 35%, var(--bg3) 100%);
}
.container{max-width:1100px;margin:0 auto;padding:24px 20px 40px;}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;}
.logo-wrap{display:flex;align-items:center;gap:10px;}
.logo-wrap img{width:150px;height:auto;display:block;}
.logo-title{font-weight:700;letter-spacing:0.08em;text-transform:uppercase;font-size:14px;}
.lang{display:flex;gap:8px;}
.lang a{text-decoration:none;color:#fff;font-size:13px;padding:6px 10px;border-radius:999px;background:rgba(12,8,20,0.4);border:1px solid transparent;}
.lang a.active{border-color:rgba(255,255,255,0.6);background:rgba(0,0,0,0.25);}
main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:center;}
@media(max-width:860px){main{grid-template-columns:1fr;gap:24px;}}
h1{font-size:40px;line-height:1.1;margin-bottom:12px;}
@media(max-width:600px){h1{font-size:32px;}}
.hero-sub{font-size:16px;color:rgba(255,255,255,0.9);max-width:420px;}
.hero-tag{margin-top:8px;font-size:14px;color:rgba(255,255,255,0.7);}
.hero-cta{margin-top:22px;}
.tg-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--tg);color:#fff;padding:14px 22px;font-size:17px;font-weight:600;border-radius:16px;box-shadow:0 8px 22px rgba(34,158,217,0.55);transition:0.18s ease;}
.tg-btn:hover{background:#2FB4F3;transform:translateY(-2px);box-shadow:0 12px 28px rgba(34,158,217,0.7);}
.tg-btn img{width:22px;height:22px;}
.tg-hint{margin-top:8px;font-size:13px;color:rgba(255,255,255,0.7);}
.badges{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px;}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.12);}
.right-card{position:relative;border-radius:24px;padding:18px 18px 20px;background:rgba(8,6,18,0.75);border:1px solid rgba(255,255,255,0.12);overflow:hidden;}
.right-bg{position:absolute;inset:-40%;background:
  radial-gradient(30% 30% at 20% 10%, rgba(255,0,168,0.45), transparent 60%),
  radial-gradient(35% 35% at 80% 20%, rgba(0,148,255,0.45), transparent 60%),
  radial-gradient(40% 40% at 50% 100%, rgba(255,122,0,0.5), transparent 70%);
opacity:0.9;filter:blur(18px);}
.right-inner{position:relative;}
.right-title{font-size:15px;font-weight:600;margin-bottom:8px;}
.right-grid{display:grid;gap:10px;margin-top:8px;}
.right-pill{font-size:13px;padding:8px 10px;border-radius:999px;background:rgba(6,4,14,0.7);border:1px solid rgba(255,255,255,0.18);}
.footer{margin-top:32px;font-size:12px;color:rgba(255,255,255,0.7);display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;}
.footer a{color:rgba(255,255,255,0.85);text-decoration:none;}
.footer a:hover{text-decoration:underline;}
.app-info {
    text-align: center;
    padding: 70px 20px;
    margin-top: 80px;
    margin-bottom: 60px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 22px;
    backdrop-filter: blur(8px);
}

.app-info h2 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #ffffff;
}

.app-info p {
    font-size: 20px;
    color: #e6e6e6;
    margin-bottom: 28px;
}

/* Кнопка Telegram */
.app-info .tg-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: #229ED9;
    color: #fff;
    font-size: 20px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s;
}

.app-info .tg-button img {
    width: 26px;
    height: 26px;
}

.app-info .tg-button:hover {
    background: #1d8cc2;
    transform: translateY(-2px);
}

/* Мелкая подпись */
.app-info .small-note {
    margin-top: 22px;
    font-size: 14px;
    opacity: 0.8;
    color: #cccccc;
}

