/* ===== t.me style — фиксированный фон (в т.ч. iOS), блеск, мобильный тюнинг ===== */

:root{
  /* Основной фон (темный, почти без синего) */
  --bg: #0b1416;
  /* Цвет «подсветки» паттерна — мягкий зелёный телеграм */
  --pattern-tint: 168 200 173; /* r g b */
  --pattern-opacity: .17;

  /* узор — плотнее/заметнее */
  --pattern-size:520px;
  --pattern-opacity:.24;
  --pattern-blend:overlay;

  /* карточка */
  --card: #10161a;
  --card-border: rgba(255,255,255,.08);
  --text: #e6eef2;
  --muted:#a9b8c0;

  /* текст */
  --text:#e6eef2;
  --muted:#a9b8c0;
  --handle:#7B8A90;
  --subtle:#90A3AA; /* подпись под кнопкой — мягче */

  /* кнопки — более синие */
  --btn-blue-1:#2E8CF5;
  --btn-blue-2:#1C6FDB;

  /* верхняя полоса */
  --bar-bg:rgba(255,255,255,.96);
  --bar-border:rgba(0,0,0,.06);
}

/* базовые */
*{box-sizing:border-box}
html,body{height:100%}
body{
 margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--text);
  background: var(--bg);
  /* Легкая виньетка, как у Telegram */
  background-image:
    radial-gradient(80% 120% at 50% -20%, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
    radial-gradient(70% 120% at 100% 0%, rgba(255,255,255,.03), rgba(255,255,255,0) 60%),
    radial-gradient(60% 120% at 0% 0%, rgba(255,255,255,.03), rgba(255,255,255,0) 60%);
  background-attachment: fixed,fixed,fixed;
}

body::after{
  content:"";
  position:fixed; inset:0;
  background: url(https://telegram.org/img/tgme/pattern.svg?1) center/420px auto repeat;
  opacity: var(--pattern-opacity);
  /* Перекрашиваем чёрный stroke в светлый зеленоватый */
  filter:
    invert(1)
    sepia(1)
    saturate(250%)
    hue-rotate(80deg)
    brightness(.9)
    contrast(.9);
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:0;
}

/* фиксированный градиент */
.bg-fixed{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(80% 120% at 50% -20%, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
    radial-gradient(70% 120% at 100% 0%, rgba(255,255,255,.03), rgba(255,255,255,0) 60%),
    radial-gradient(60% 120% at 0% 0%, rgba(255,255,255,.03), rgba(255,255,255,0) 60%);
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
}

/* фиксированный узор */
.pattern{
  position:fixed; inset:64px 0 0 0; z-index:-1; pointer-events:none;
  background-image:url("https://telegram.org/img/tgme/pattern.svg?4");
  background-repeat:repeat; background-position:center top;
  background-size:var(--pattern-size) auto;
  opacity:var(--pattern-opacity);
  mix-blend-mode:var(--pattern-blend);
  filter:contrast(1.06) saturate(1.04);
  will-change:transform; transform:translateZ(0);
}

/* top bar */
.tg-topbar{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:10px 16px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tg-brand{display:flex; align-items:center; gap:10px}
.tg-word{font-weight:600; font-size:20px; color:#fff}
.tg-icon{display:block; width:26px; height:26px}
.btn.dl{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px;
  background:#3DB2FF; color:#fff; text-decoration:none; font-weight:600;
  box-shadow: 0 6px 18px rgba(61,178,255,.25);
}

/* layout — карточка выше */
.wrap{
  position:relative; z-index:1; min-height:calc(100dvh - 64px);
  display:grid; place-items:start center;
  padding:clamp(10px,2.2vh,16px) 16px calc(84px + env(safe-area-inset-bottom));
}
.card{
  margin-top: clamp(6px, 2.6vh, 14px);
  width: min(560px, 92vw);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02) inset;
  padding: 28px 28px 32px;
  text-align:center;
}

/* avatar + заголовок */
.avatar{
  width:120px; height:120px; border-radius:50%;
  display:block; margin:6px auto 18px; object-fit:cover;
  border:3px solid rgba(255,255,255,.95);
  box-shadow:0 10px 24px rgba(0,0,0,.10), 0 0 0 10px rgba(255,255,255,.45);
}
.title{
  margin:6px 0 6px;
  font-size:clamp(24px,3vw,28px); /* десктоп/планшет */
  font-weight:800; color:#ffffff;
}
.handle{margin:0 0 16px; font-size:13px; color:var(--handle)}

/* офферы */
.desc{list-style:none; padding:0; margin:0 0 18px; color:var(--muted)}
.desc li{display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; margin:12px 0; text-align:left}
.desc .e{display:block; width:28px; text-align:center; font-size:22px; line-height:1.1}
.desc .t{display:block; line-height:1.55}
.desc li::marker{content:''}

/* кнопка + блеск */
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 26px; border-radius:999px;
  background:linear-gradient(180deg,var(--btn-blue-1) 0%,var(--btn-blue-2) 100%);
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.4px;
  box-shadow:0 12px 26px rgba(28,111,219,.34), inset 0 2px 0 rgba(255,255,255,.32);
  text-transform:uppercase; transition:transform .12s ease, filter .12s ease;
}
.cta:hover{transform:translateY(-1px); filter:brightness(1.06)}
.cta:active{transform:translateY(0) scale(.99)}
.cta.shimmer{ position:relative; overflow:hidden }
.cta.shimmer::after{
  content:""; position:absolute; top:-150%; left:-60%;
  width:40%; height:400%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%,
                                      rgba(255,255,255,.42) 50%,
                                      rgba(255,255,255,0) 100%);
  transform:rotate(20deg);
  animation:shine 5s linear infinite; /* ~5 сек */
  pointer-events:none;
}
@keyframes shine{ 0%{left:-60%} 12%{left:120%} 100%{left:120%} }

/* подпись — менее контрастная */
.subtext{
  margin:16px auto 0; max-width:30ch; text-align:center;
  font-size:14px; line-height:1.45; color:var(--subtle);
}
.subtext strong{font-weight:700; color:#2a2f33}

/* ===== MOBILE XS/MAX TUNING — выравнивание по центру ===== */
@media (max-width:480px){
  /* безопасные отступы по бокам (для iOS) */
  .wrap{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* карточка строго внутри контейнера, центр и одинаковые поля слева/справа */
  .card{
    width:100%;              /* вместо 96vw */
    max-width:420px;         /* ограничитель как раньше */
    margin: clamp(6px, 2vh, 12px) auto 22px;  /* auto — ровно по центру */
    padding:20px 20px 22px;
  }

  /* компактнее аватар/заголовок, как договаривались */
  .avatar{ width:108px; height:108px; margin:4px auto 14px; }
  .title{
    white-space:nowrap;
    font-size:clamp(20px, 6vw, 26px);
  }
  .handle{ font-size:13px; margin-bottom:14px; }

  /* офферы чуть мельче и плотнее */
  .desc{ font-size:16px; }
  .desc li{ grid-template-columns:24px 1fr; gap:10px; margin:10px 0; }
  .desc .e{ width:24px; font-size:20px; }

  /* кнопка и узор — без изменений по стилю */
  .cta{
    height:46px; padding:0 22px;
    box-shadow:0 10px 22px rgba(28,111,219,.32), inset 0 2px 0 rgba(255,255,255,.30);
  }
  .pattern{ background-size:460px auto; opacity:.26 }

  /* DOWNLOAD — та же более синяя */
  .btn.dl{
    min-height:30px; padding:6px 12px; font-size:12px;
    background:linear-gradient(180deg,var(--btn-blue-1) 0%,var(--btn-blue-2) 100%);
  }
}

/* очень узкие экраны */
@media (max-width:360px){
  .tg-word{display:none}
  .tg-icon{width:22px; height:22px}
  .btn.dl{padding:6px 10px; font-size:12px}
}