/* ===================== RESET / BASE ===================== */
/* ==== Мобильные тап-эффекты, выделение, долгий тап ==== */

/* убрать синий highlight на iOS/Android */
* { -webkit-tap-highlight-color: transparent; }

/* запретить системное меню по длинному тапу */
a, button, img, svg {
  -webkit-touch-callout: none;   /* iOS Safari */
}

/* запретить перетаскивание/драг картинок */
img, svg {
  -webkit-user-drag: none;
  user-drag: none;
}

/* запретить выделение текста на всём сайте… */
html, body, * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* …кроме полей ввода (нужно для «Своя сумма») */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
  color:#1e2a3a;
  line-height:1.5;

  /* Фон на всю страницу + белая вуаль, чтобы не отвлекал */
  background:
    linear-gradient(0deg, rgba(255,255,255,.86), rgba(255,255,255,.86)),
    url("../img/bg-hero.jpg") center/cover fixed no-repeat;

  /* Прижатый футер + возможность центрировать контент по высоте */
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
img, svg { display:block; max-width:100%; height:auto; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; cursor:pointer; }

/* ===================== THEME ===================== */
:root{
  --brand:#5a86c9;
  --brand-2:#6aa2ff;
  --accent:#3f70b7;
  --surface:#ffffff;
  --muted:#8aa0ba;
  --shadow:0 10px 28px rgba(24,39,75,.16), 0 3px 10px rgba(24,39,75,.10);
  --radius:16px;
  --radius-sm:12px;
  --gap:clamp(14px,2vw,22px);
  --container:min(1200px,92vw);
}

/* ===================== HEADER (анимированная, непрозрачная) ===================== */
.site-header{
  position:relative; z-index:1;
  background:linear-gradient(115deg,#0a1530 0%,#163257 28%,#1e4a88 50%,#163257 72%,#0a1530 100%);
  background-size:280% 280%;
  animation:headerShift 12s ease-in-out infinite;
  border-bottom:1px solid rgba(229,236,255,.45);
  box-shadow:0 6px 18px rgba(10,20,40,.28);
}
@keyframes headerShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.header-inner{
  width:var(--container);
  margin:0 auto;
  padding:clamp(16px,2vw,22px) 0;
  display:flex; align-items:center; gap:14px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#eaf1ff; }
.brand__text{ font-weight:800; letter-spacing:.3px; }
.brand__title{ font-size:clamp(18px,3vw,28px); color:#fff; text-transform:uppercase; }
.brand__sub{ font-size:clamp(11px,1.6vw,12px); color:#c4d4ef; display:block; margin-top:2px; margin-top:-4px; }
/* Логотип — заметный блик */
.brand__logo{
  width:52px; height:52px; border-radius:12px;
  object-fit:cover; display:block; position:relative; overflow:hidden;
}
.brand__logo::after{
  content:"";
  position:absolute; inset:-10% -60% -10% -60%;
  background:linear-gradient(75deg, transparent 32%, rgba(255,255,255,.95) 50%, transparent 68%);
  transform:translateX(-55%);
  animation:logoShine 2.2s ease-in-out infinite .4s;
  mix-blend-mode:screen; pointer-events:none;
}
@keyframes logoShine{
  0%{transform:translateX(-55%); opacity:.0}
  20%{opacity:.9}
  55%{transform:translateX(55%); opacity:.0}
  100%{transform:translateX(55%); opacity:.0}
}

/* ===================== HERO (не громоздкий) ===================== */
.hero{
  width: var(--container);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px) 0;
  text-align: center;
  color: #24324d;
}
.hero h1{
  font-size: clamp(20px, 3.5vw, 32px);
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--brand);
}

/* ===================== MAIN / ВЕРТИКАЛЬНОЕ ЦЕНТРИРОВАНИЕ ===================== */
.catalog{
  width:var(--container);
  margin:0 auto;
  padding: clamp(16px,4vh,28px) 0;
  flex:1 0 auto;

  /* Делаем контейнер флексовым и центрируем грид по вертикали */
  display:flex; align-items:stretch;
}
.grid{
  width:100%;
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr;          /* мобилка */
  margin: auto 0;                      /* центр по вертикали в пределах .catalog */
}
@media (min-width:600px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1280px){ .grid{ grid-template-columns:repeat(6,1fr); } }  /* 6 карточек в ряд */

/* ===================== CARD ===================== */
.card{
  display:flex; flex-direction:column; min-height:100%;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .2s ease, box-shadow .22s ease;
}
.card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 20px 40px rgba(10,20,40,.28), 0 0 0 1px rgba(90,134,201,.22);
}

/* ===== ЕДИНАЯ «РАМКА» ПОД РАЗНЫЕ КАРТИНКИ ===== */
.card__media{
  position:relative;
  display:block;
  height: 190px;                 /* единая высота окна */
  background:#ffffff;            /* белая подложка у всех */
  border-bottom: 1px solid #eef3ff;
  overflow:hidden;
}
.card__media::before{
  /* лёгкое отделение (еле заметная «внутренняя тень») */
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 42% at 50% 15%, rgba(90,134,201,.08), transparent 70%);
  pointer-events:none;
}
.card__media img{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  max-height:160px; max-width:90%;
  width:auto; height:auto; object-fit:contain;
  filter: brightness(.95) saturate(.96);                 /* чуть темнее/менее насыщено */
  transition: transform .25s ease, filter .25s ease;
}
.card:hover .card__media img{
  transform: translate(-50%,-52%) scale(1.04);
  filter: brightness(1) saturate(1);
}

/* Тело карточки растягиваем — кнопка уезжает в самый низ */
.card__body{
  display:flex; flex-direction:column; gap:10px;
  padding: 12px 18px 0;
  flex:1 1 auto;
}
.card__title{ font-size:18px; font-weight:900; color:#1f2b3b; }
.card__desc{ color:var(--muted); font-size:14px; min-height:38px; flex:1 1 auto; }

/* Кнопка — цельная нижняя планка карточки */
.card__cta{
  display:block; width:calc(100% + 36px);
  margin:12px -18px 0;
  border:0; border-radius:0 0 var(--radius) var(--radius);
  background:linear-gradient(180deg, #6aa2ff, #4d82ff);
  color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:.6px;
  padding:14px 16px;
  position:relative;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(0,0,0,.04);
  transition:transform .05s linear, filter .2s ease, box-shadow .2s ease;
}
.card__cta::after{
  content:""; position:absolute; inset:0 0 auto 0; height:40%;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
.card__cta:hover{ filter:brightness(1.08); box-shadow:inset 0 -1px 0 rgba(255,255,255,.5), 0 10px 22px rgba(77,130,255,.38); }
.card__cta:active{ transform:translateY(1px); }

/* ------- поле «Своя сумма» ------- */
.amount { display:block; margin: 6px 0 4px; }
.amount__label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.amount__field {
  position: relative;
  display: flex;
  align-items: center;
  background: #f6f8ff;
  border: 1px solid #e4ebff;
  border-radius: 10px;
  padding: 8px 12px;
}
.amount__input{
  width:100%;
  border:0;
  background:transparent;
  outline:none;
  font-weight:700;
  font-size:16px;
  padding-right:28px;
}
.amount__input::placeholder{ color:#b6c3da; }
.amount__suffix{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  color:#7d93b6; font-weight:700;
}
.amount__hint{ display:block; margin-top:6px; font-size:12px; color:#9aabc6; }

/* ------- ценник-бейдж для фиксированных пакетов ------- */
.card__price{
  margin-top:2px;
  align-self:flex-start;
  background: #edf3ff;
  color:#2c4b86;
  font-weight:800;
  font-size:14px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid #dbe6ff;
}

/* ===================== FOOTER (прижат к низу) ===================== */
.site-footer{
  border-top:1px solid rgba(231,236,247,.8);
  background:#ffffff;
  box-shadow:0 -4px 14px rgba(10,20,40,.06);
  flex-shrink:0;
}
.footer-inner{
  width: var(--container);
  margin: 0 auto;
  padding: 22px 0;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;

  align-items: center;       /* <<< добавляем выравнивание по центру */
  color: var(--muted); 
  font-size: 14px;
}
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-links a{ color:inherit; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }

/* ===================== PRELOADER ===================== */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:#0b152b;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .35s ease, visibility .35s ease;
}
.preloader__spinner{
  width:64px; height:64px; border-radius:50%;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:#6aa2ff;
  animation: spin 1s linear infinite, glow 1.6s ease-in-out infinite;
}
@keyframes spin{ to { transform: rotate(360deg);} }
@keyframes glow{
  0%,100%{ box-shadow: 0 0 0 rgba(106,162,255,0); }
  50%{ box-shadow: 0 0 26px rgba(106,162,255,.65); }
}
.preloader--hidden{ opacity:0; visibility:hidden; }

/* ===================== A11Y ===================== */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

.footer-contacts{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  line-height:1.4;
}
.footer-contacts a{ color:inherit; text-decoration:none; }
.footer-contacts a:hover{ text-decoration:underline; }

/* ====== Кнопка Telegram в шапке ====== */
.header-inner{
  justify-content: space-between;   /* бренд слева, действия справа */
}

.header-actions{
  display:flex;
  align-items:center;
}

.tg-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  transition: background .2s ease;
}
.tg-link:hover{
  background:rgba(255,255,255,.25);
}

.tg-icon{
  width:22px;
  height:22px;
  display:block;
}

/* ==== Текстовые страницы (оферта/политика) ==== */
.page{
  width: var(--container);
  margin: clamp(16px, 4vh, 32px) auto;
  padding: 0;                 /* внешние поля задаём контейнеру */
  flex: 1 0 auto;             /* чтобы футер оставался внизу */
}
.page__inner{
  background: rgba(255,255,255, .92);  /* белый, чуть прозрачный */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 28px);
  backdrop-filter: saturate(1.05) blur(2px); /* лёгкая «вуаль» */
}

/* типографика внутри белого блока */
.page__inner h1{
  font-size: clamp(22px, 3.8vw, 32px);
  margin: 0 0 16px;
  color: var(--brand);
  text-transform: none;
}
.page__inner h2{
  font-size: clamp(18px, 2.6vw, 22px);
  margin: 18px 0 8px;
}
.page__inner p, .page__inner li{ color:#2a3a52; }
.page__inner ul{ padding-left: 18px; }
.page__inner p + p{ margin-top: 6px; }

/* центрируем и оформляем кнопку «Назад» */
.back-wrap{ display:flex; justify-content:center; margin-top: 22px; }
.back-button{
  display:inline-block;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #6aa2ff, #4d82ff);
  color:#fff; font-weight:900; letter-spacing:.4px; text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(77,130,255,.25), inset 0 -1px 0 rgba(255,255,255,.45);
  cursor:pointer;
  transition: transform .05s linear, filter .18s ease, box-shadow .18s ease;
}
.back-button:hover{ filter: brightness(1.07); box-shadow: 0 12px 26px rgba(77,130,255,.35), inset 0 -1px 0 rgba(255,255,255,.55); }
.back-button:active{ transform: translateY(1px); }

/* ===== РИББОНЫ как в твоём примере (rotate, фикс-смещения) ===== */
/* Общие настройки текста/вида */
.ribbon-1, .ribbon-2, .ribbon-3, .ribbon-4{
  width: 200px;               /* длина ленты */
  padding: 5px 3px;         /* толщина ленты за счёт padding */
  position: absolute;
  text-align: center;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .3px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  pointer-events: none;       /* не мешает кликам */
  z-index: 5;
}

.ribbon-1{
  width: 200px;
  padding: 3px 3px;
  position: absolute;
  text-align: center;
  color: #fff;
  top: 18px;
  left: -58px;
  transform: rotate(-45deg);
  background-color: #e43;
  opacity:0.9;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.2;  /* <<< добавь это */
}

/* Если пригодятся ещё стороны — оставляю как в примере */
.ribbon-2{ top: 18px; right:-58px; transform: rotate(45deg);  background:#39d; }
.ribbon-3{ bottom:18px; right:-58px; transform: rotate(-45deg); background:#2c7; }
.ribbon-4{ bottom:18px; left: -58px; transform: rotate(45deg);  background:#e82; }

/* Чуть крупнее на экранах пошире */
@media (min-width: 480px){
  .ribbon-1, .ribbon-2, .ribbon-3, .ribbon-4{
    width: 220px; padding: 5px 5px; font-size: 13px;
  }
  .ribbon-1{ left:-62px; top:20px; }
  .ribbon-2{ right:-62px; top:20px; }
  .ribbon-3{ right:-62px; bottom:20px; }
  .ribbon-4{ left:-62px; bottom:20px; }
}

/* ВАЖНО: у карточки должен быть position:relative и overflow:hidden (у тебя уже так) */
.card{ position: relative; /* уже есть */ }

/* ==== Bonus modal ==== */
#bonusModal[hidden]{display:none}
#bonusModal{position:fixed; inset:0; z-index:9998; display:grid; place-items:center}
#bonusModal .modal__backdrop{position:absolute; inset:0; background:#0008; backdrop-filter: blur(2px)}
#bonusModal .modal__card{
  position:relative; background:#111; border:1px solid #2b2b2b; border-radius:14px;
  padding:18px 18px 16px; width:min(420px,92vw); color:#fff; box-shadow:0 18px 60px rgba(0,0,0,.45);
}
#bonusModal h3{margin:0 0 6px; font-size:18px; font-weight:800}
#bonusModal .modal__hint{margin:0 0 10px; color:#bfc7d6; font-size:14px}
#bonusModal .bonus-list{list-style:none; padding:0; margin:6px 0 12px; display:grid; gap:6px}
#bonusModal .bonus-list li{
  background:#1a1f2a; border:1px solid #283248; border-radius:10px; padding:10px 12px;
  display:flex; justify-content:space-between; gap:10px; font-size:14px;
}
#bonusModal .bonus-list b{color:#66d17a}
#bonusModal .modal__actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px}
#bonusModal .modal__actions .btn-primary{
  background: linear-gradient(180deg, #6aa2ff, #4d82ff); border:0; color:#fff; font-weight:900;
}
#bonusModal .modal__actions button{
  padding:10px 14px; border-radius:10px; border:1px solid #394357; background:#1c2230; color:#e6eefc; cursor:pointer
}
#bonusModal .modal__x{
  position:absolute; top:8px; right:10px; width:28px; height:28px; border-radius:6px;
  border:1px solid #2b364b; background:#1a2230; color:#cfd9ef; font-weight:900; cursor:pointer
}