/* =========================================
   Design tokens
========================================= */
:root{
  --bg:#0b0c10; --card:#11131a; --muted:#8b93a7; --text:#e8ecf1;
  --acc:#6ee7b7; --acc2:#60a5fa; --warn:#f59e0b; --ok:#22c55e;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25); --maxw:1120px;
  --hdr-top: 20px;        /* тот самый top у header */
  --hdr-height: 64px;     /* реальная высота шапки (36px логотип + 14+14 паддинги) */
  --hdr-safe-gap: 8px;    /* небольшой запас, чтобы контент не прилипал */
}

/* =========================================
   Base
========================================= */
html,body{height:100%}
/* Смещение для встроенной прокрутки по якорям (работает в современных браузерах) */
html{
  scroll-behavior: smooth; /* опционально: плавная прокрутка */
  scroll-padding-top: calc(var(--hdr-top) + var(--hdr-height) + var(--hdr-safe-gap));
}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 20% -10%, #394348 0%, #000 60%);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background-attachment: fixed;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.container.pay {
  margin: 20px auto;
  justify-content: center;
  text-align: center;
}
.payFoot {
  width: 130px;
}
/* cookie-баннер показываем классом, без inline display */
.cookie.is-open{ display:block; }

/* блокируем прокрутку страницы при открытом мобильном меню — без inline overflow */
html.no-scroll{ overflow:hidden; }

/* noscript-пиксель Метрики (вместо style="left:-9999px") */
.ymns{ position:absolute; left:-9999px; }

/* картинка в модалке (вместо style на теге) */
.modal-img{ max-width:100%; height:auto; display:block; }

/* =========================================
   Header
========================================= */
header{
  position: fixed;
  top: var(--hdr-top);
  left: 0; right: 0;              /* центруем фиксированный блок */
  width: 95%;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 15px;
  backdrop-filter: blur(8px);
  background: rgba(11,12,16,.31);
  /* border: 1px solid rgba(133,138,145,.35); */
  z-index: 40;
  box-shadow: 0 0 0 1px rgba(133,138,145,.35), 0 8px 24px rgba(96,165,250,.18), 0 4px 48px rgba(110,231,183,.12);
}

.hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;             /* твои 14px по вертикали + немного по горизонтали */
  min-height: var(--hdr-height);  /* фиксируем высоту для предсказуемого отступа */
}
/* отступ для контента под фиксированной шапкой */
main{
  padding-top: calc(var(--hdr-top) + var(--hdr-height) + var(--hdr-safe-gap));
}
.logo{display:flex;margin-left:10px;gap:16px;align-items:center;font-weight:700}
.logo-badge{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;box-shadow:var(--shadow)}
.logo-badge img{width:36px;height:36px;display:block}
nav{display:flex;gap:24px;align-items:center}
#cta-top{margin-left:50px}

.btn{
  display:inline-flex;gap:10px;align-items:center;padding:12px 16px;border-radius:12px;
  background:var(--acc);color:#0a0f0d;font-weight:700;box-shadow:var(--shadow);
  transition:transform .15s ease,box-shadow .15s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.14)}
/* merged base + hover-underline behavior */
.btn-ghost{
  background:transparent;color:var(--muted);
  position:relative;
  transition:color .2s ease, opacity .2s ease;
}
.btn-ghost::after{
  content:""; position:absolute; left:14%; right:14%; bottom:-6px; height:2px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
  border-radius:2px; opacity:.9;
}
.btn-ghost:hover{color:#fff;opacity:1}
.btn-ghost:hover::after{transform:scaleX(1)}

/* noscript-пиксель Метрики (вместо inline-style) */
.ymns{ position:absolute; left:-9999px; }

/* изображение в модалке (вместо inline-style) */
.modal-img{ max-width:100%; height:auto; display:block; }

/* =========================================
   Burger (improved)
========================================= */
.burger{
  display:none; align-items:center; margin-right: 10px; justify-content:center; width:44px; height:44px;
  border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.02);
  cursor:pointer; position:relative
}
.burger .bar{
  display:block;margin: auto;width:22px; height:2px; background:var(--text); border-radius:2px;
  box-shadow:0 0 1px rgba(0,0,0,.4)
}
.burger .bar + .bar{margin-top:5px}
@media (max-width:900px){ nav{display:none} .burger{display:block} }

/* =========================================
   Mobile menu
========================================= */
.mobile-menu{position:fixed;inset:0;display:none;z-index:80;background:rgba(0,0,0,.5)}
.mobile-menu.open{display:block}
.mobile-panel{
  position:absolute; top:0; right:0; bottom:0; left: 0; background:#0f1218;
  border-left:1px solid rgba(255,255,255,.08); padding:20px; display:flex; flex-direction:column; gap:12px
}
/* merged base + hover decoration */
.mobile-link{
  padding:12px 0; color:var(--text); border-bottom:1px solid rgba(255,255,255,.06);
  position:relative; text-decoration:none;
  transition:color .2s ease, padding-left .2s ease, background-color .2s ease;
}
.mobile-link::before{
  content:""; position:absolute; left:-8px; top:50%; width:4px; height:4px; border-radius:999px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  transform:translateY(-50%) scale(0); transition:transform .2s ease;
}
.mobile-link:hover{color:#fff; padding-left:4px; background-color:rgba(255,255,255,.02)}
.mobile-link:hover::before{transform:translateY(-50%) scale(1)}

.close-x{align-self:flex-end;background:transparent;border:0;color:var(--muted);font-size:22px;cursor:pointer}

/* =========================================
   Hero
========================================= */
.hero{padding:64px 0 32px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.kicker{
  display:inline-flex;align-items:center;gap:10px;background:rgba(110,231,183,.12);color:#bfffe6;
  border:1px solid rgba(110,231,183,.35);padding:8px 12px;border-radius:999px;font-weight:700
}
h1{font-size:clamp(26px,4.2vw,34px);line-height:1.15;margin:16px 0 10px;max-width:44ch}
.lead{color:var(--muted);font-size:clamp(16px,2.2vw,20px)}

/* image left + text right */
.hero-row{display:grid;gap:16px;margin-top:10px}
.hero-media{display:block;margin:auto}
.hero-img{
  display:block;width:95%;max-width:560px;height:auto;border-radius:18px;
  background:linear-gradient(180deg,#121623,#0c0f17);border:1px solid rgba(255,255,255,.06);padding:6px;box-shadow:var(--shadow)
}
.hero-desc{display:block}
@media (min-width:980px){
  .hero-row{grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
}

/* CTA + points */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-points{margin-top:18px;display:grid;gap:10px}
.point{display:block;color:var(--muted)}
.point svg{flex:0 0 auto;margin-top:2px}
.bonus{
  display:inline-flex;gap:8px;align-items:center;color:#111;background:var(--warn);
  padding:6px 10px;border-radius:10px;font-weight:800
}

/* =========================================
   Sections
========================================= */
.section{padding:48px 0}
.section h2{font-size:clamp(22px,4vw,28px);line-height:1.2;margin:0 0 16px}
.muted{color:var(--muted)}
.mt-10{margin-top:10px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin:10px 0 6px;font-size:18px}
.badge{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:#0b0c10;background:var(--acc);padding:6px 10px;border-radius:999px}
.badge-ok{background:var(--ok)}
.badge-accent2{background:var(--acc2)}
.badge-warn{background:var(--warn)}
.hero,
.section,
section[id],
h1[id], h2[id], h3[id]{
  scroll-margin-top: calc(var(--hdr-top) + var(--hdr-height) + var(--hdr-safe-gap));
}
/* =========================================
   Steps
========================================= */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.step{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px}
.step-num{font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#a6adbb}
.step h3{margin:6px 0 8px}

/* =========================================
   Pricing
========================================= */
.pricing-cards{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){ .pricing-cards{grid-template-columns:1fr} }

/* =========================================
   FAQ / Modals
========================================= */
details{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px}
details+details{margin-top:12px}
summary{cursor:pointer;font-weight:700}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:16px;z-index:70}
.modal.open{display:flex}
.modal-card{
    max-width:900px;max-height:80vh;overflow:auto;background:#171717;
    border-radius:16px;padding:0 20px 20px 20px;
    box-shadow: 0 0 0 1px rgba(133,138,145,.35), 0 8px 24px rgba(96,165,250,.18), 0 4px 48px rgba(110,231,183,.12);
    position: relative;                 /* чтобы sticky корректно слоями перекрывал контент */
    -webkit-overflow-scrolling: touch;  /* плавный скролл на iOS */
    }
    .modal-card h3{margin:0 0 8px}

    /* было: .modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px} */
    /* стало — добавили закреп сверху и фон/границу, остальное оставили как есть */
    .modal-head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    height: 50px;
    margin: 10px 0;
    position: sticky; top: 0; z-index: 2;
    background:#171717;                               /* тот же фон, чтобы не «просвечивало» при скролле */
    border-bottom: 1px solid rgba(255,255,255,.08);   /* деликатное разделение от текста */
    box-shadow: 0 6px 12px rgba(0,0,0,.25);           /* мягкий «ореол» при прокрутке */
    }

.prewrap{white-space:pre-wrap}
.close{cursor:pointer;color:var(--muted)}

/* =========================================
   Footer
========================================= */
footer{padding:36px 0;border-top:1px solid rgba(255,255,255,.06);color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.legal{display:flex;gap:14px;flex-wrap:wrap}
/* merged legal links base + animated underline */
.legal a{
  position:relative;
  text-decoration:none;
  color:var(--muted);
  transition:color .2s ease;
}
.legal a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .22s ease; opacity:.55;
}
.legal a:hover{color:#fff}
.legal a:hover::after{transform:scaleX(1)}

/* =========================================
   Cookie banner
========================================= */
.cookie{
  position:fixed; left:16px; right:16px; bottom:16px; display:none; z-index:60; background:#0f121a;
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px; box-shadow:var(--shadow)
}
.cookie .row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie .actions{display:flex;gap:8px}

/* =========================================
   Animated background (3 blobs, layered)
   — два старых + третий фиолетовый с отдельной анимацией
========================================= */
.bg-anim{
  position: fixed; inset: -20% -10% -20% -10%;
  z-index: -1; pointer-events: none;
  filter: blur(40px); opacity: .35;
  overflow: hidden;
}

/* 1-й засвет (как был) */
.bg-anim::before{
  content: "";
  position: absolute; left: 40px; top: 75px; width: 80vw; height: 80vw;
  background: radial-gradient(closest-side at 30% 30%, var(--acc2), transparent 60%);
  animation: float1 18s ease-in-out infinite alternate;
  z-index: 0; will-change: transform;
}

/* 2-й засвет (как был) */
.bg-anim::after{
  content: "";
  position: absolute; left: 39%; top: 16%; width: 60vw; height: 60vw;
  background: radial-gradient(closest-side at 70% 70%, var(--acc), transparent 60%);
  animation: float2 22s ease-in-out infinite alternate;
  z-index: 1; will-change: transform;
}

/* 3-й засвет: тёмно-сиреневый, левый-низ, своя анимация */
.bg-anim .bg-blob3{
  position: absolute;
  left: 11%;
  bottom: 19%;
  width: 20vw;
  height: 20vw;
  background: radial-gradient(closest-side at 20% 80%, rgb(232, 18, 148), #ff89e77d 65%);
  animation: float3 30s ease-in-out infinite alternate;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  border-radius: 50%;
}

/* Анимации (первые два — без изменений) */
@keyframes float1{
  0%   { transform: translate3d(-10%,-5%,0) rotate(0); }
  100% { transform: translate3d( 10%, 5%,0) rotate(20deg); }
}
@keyframes float2{
  0%   { transform: translate3d( 5%,-10%,0) rotate(0); }
  100% { transform: translate3d(-10%, 10%,0) rotate(-20deg); }
}
@keyframes float3{
  0%   { transform: translate3d(-8%, 8%,0) rotate(0); }
  100% { transform: translate3d( 6%, 4%,0) rotate(15deg); }
}

/* =========================================
   Responsive
========================================= */
@media (max-width:980px){
  .hero-row{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
}
@media (max-width:540px){
  .cards{grid-template-columns:1fr}
  .btn{width:80%;justify-content:center;margin: auto;}
}

/* =========================================
   Link polish (text content)
========================================= */
.section p a,
.section .muted a,
.section li a{
  color:var(--text);
  text-decoration:none;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .25s ease, color .25s ease, text-shadow .25s ease, opacity .25s ease;
  opacity:.95;
}
.section p a:hover,
.section .muted a:hover,
.section li a:hover{
  background-size:100% 1px;
  color:#fff;
  text-shadow:0 0 10px rgba(110,231,183,.35);
  opacity:1;
}
/* focus-visible for accessibility */
a:focus-visible{outline:2px dashed var(--acc); outline-offset:2px}

/*=====================================================
    Mobile adaptation
=======================================================*/
@media (max-width:980px){ 
    :root{ --hdr-height: 56px; }
    h1 {
        font-size: 20px;
    }
    header {
        width: 95%;
    }
    .section h2 {
        font-size: 20px;
    }
    .kicker {
        font-size: 12px;
    } 
    .point.gift {
        margin: 20px auto auto auto;
    }
}
.gdz-feature {
  display: grid;
  grid-template-columns: minmax(240px, 420px) 1fr;
  gap: 24px;
  align-items: start;
}
.gdz-feature .hero-media img { width: 100%; height: auto; border-radius: 16px; display: block; width: 60%;
  height: 60%;
  border: 0;
  background: transparent;}
.kicker.free {
  margin: 0 0 0 auto;
}
.btn.free {
  margin: 0 0 0 auto;
}
@media (max-width: 768px) { 
    .gdz-feature { grid-template-columns: 1fr; } 
    .gdz-feature .hero-media img {
        margin: auto;
    }
    .kicker.free {
        margin: auto;
    }
    .btn.free {
        margin: auto;
    }
}
/* Pagination: always visible + mobile-friendly */
nav.pagination{
  display:flex !important;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:24px;
  margin-bottom:8px;
}
nav.pagination .btn{ white-space:nowrap; }
nav.pagination .page-status{ /* <span class="page-status">Стр. X из Y</span> */
  color:var(--muted, inherit);
}

@media (max-width: 640px){
  nav.pagination{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  nav.pagination .btn{
    width:80%;
    text-align:center;
  }
  nav.pagination .page-status{
    display:block !important;
    text-align:center;
    order:2;
  }
  nav.pagination .prev{ order:1; }
  nav.pagination .next{ order:3; }
}

/* На случай, если где-то .muted скрывают на мобилке */
@media (max-width: 640px){
  nav.pagination .muted{ display:block !important; }
}
/* Telegram News Promo */
.section-news { padding-top: 48px; padding-bottom: 8px; }

.tg-promo{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-areas: "copy visual";
  gap: 32px;
  align-items: center;
  background: linear-gradient(180deg, rgba(34,158,217,0.10), rgba(34,158,217,0.04));
  border: 1px solid rgba(34,158,217,0.25);
  border-radius: 20px;
  padding: 28px;
}
.tg-copy   { grid-area: copy; }
.tg-visual { grid-area: visual; display:flex; justify-content:center; }

.tg-copy h2 { margin: 8px 0 10px; }
.tg-bullets { display:flex; flex-wrap:wrap; gap:10px 14px; padding:0; margin:14px 0 16px; list-style:none; }
.tg-bullets li {
  font-size: 14px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(34,158,217,0.45);
}
.tg-handle { margin-top: 8px; font-size: 14px; }
.btn-tg { background: #229ED9; color: #0b0c10; border-color: transparent; }
.btn-tg:hover { filter: brightness(1.05); }

.tg-card {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 18px;
  border-radius: 16px;
  background: #fff;
  color: #229ED9;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  min-height: 180px;
}
.tg-card .tg-text { color: #0b0c10; font-size: 14px; opacity: 0.85; max-width: 280px; }
.tg-card .tg-qr { width: 220px; height: 220px; object-fit: contain; image-rendering: crisp-edges; }
.tg-qr-link { display: inline-block; line-height: 0; }

@media (max-width: 960px){
  .tg-promo{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual";
    padding: 22px;
  }
  /* подстраховка, если где-то flex/order наследуются */
  .tg-copy   { order: 1; }
  .tg-visual { order: 2; margin-top: 12px; display: none; }
  .hero-cta.subscribe {
    margin-top: 40px;
    }
}
@media (max-width: 480px){
  .tg-card .tg-qr { width: 180px; height: 180px; }
}
/* ====== pay: инпуты/чипы/отступы ====== */
.input{
  width: 100%;
  background: #0f1218;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  box-shadow: var(--shadow);
}
.input:focus{ outline-offset: 2px; }

.amounts{ display:flex; gap:10px; flex-wrap:wrap; }

.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }

.mt-6{ margin-top: 6px; }
.mt-8{ margin-top: 8px; }
.mt-12{ margin-top: 12px; }
.mt-16{ margin-top: 16px; }

/* полноразмерная картинка в модалке, если вдруг понадобится */
.modal-img{ max-width:100%; height:auto; display:block; }
/* ===== PAY PAGE: layout helpers & header offset ===== */
.page-pay main {
  /* компенсируем фикс-хедер */
  padding-top: calc(var(--hdr-top, 20px) + var(--hdr-height, 72px) + var(--hdr-safe-gap, 14px));
}

/* мелкие отступы, т.к. inline style запрещён CSP */
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-12{ margin-top: 12px; }
.mt-16{ margin-top: 16px; }

/* сетка для пресетов сумм */
.amounts { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02); color:var(--text); cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.chip:hover { transform:translateY(-1px); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.22); }

/* базовые инпуты (если ещё не были описаны) */
.input {
  width:100%; box-sizing:border-box;
  padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#0f1218; color:var(--text);
  outline: none;
}
.input:focus { 
  border-color: rgba(110,231,183,.5);
  box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.04);
 }
.container.pays {
    margin-top: 30px;
}
.page-pay main {
  padding-top: calc(var(--hdr-top, 20px) + var(--hdr-height, 72px) + var(--hdr-safe-gap, 14px));
}
.section-pay-cta .pay-banner{
  display:flex; align-items:center; gap:24px;
  padding:24px 20px; border-radius:16px;
  background: rgba(11,12,16,.35);
  border:1px solid rgba(133,138,145,.35);
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(133,138,145,.18),
    0 8px 24px rgba(96,165,250,.18),
    0 4px 48px rgba(110,231,183,.12);
}
.section-pay-cta .pay-icon{
  color: var(--acc, #60a5fa);
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
}
.section-pay-cta .pay-text{ flex:1 1 auto; }
.section-pay-cta .pay-text h2{ margin:0 0 6px; }
.section-pay-cta .pay-chips{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.section-pay-cta .chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(133,138,145,.35);
  background: rgba(17,24,39,.35);
  font-size:.9rem;
}

.section-pay-cta .pay-action{
  display: flex;
  flex-wrap: wrap;              /* переносим САМИ элементы, а не текст */
  justify-content: center;
  gap: 10px 12px;
}
@media (max-width: 820px){
  .section-pay-cta .pay-banner{ flex-direction:column; align-items:stretch; }
  .section-pay-cta .pay-action{ width:100%; }
  .section-pay-cta .pay-action .btn{ flex:1 1 auto; width:100%; }
}
/* --- Pay CTA: базовые мелкие доработки --- */
.section-pay-cta .pay-banner .pay-icon svg { display:block; }

/* --- Мобильная адаптация --- */
@media (max-width: 820px){
  .section-pay-cta .pay-banner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 18px 14px;
  }
  .section-pay-cta .pay-icon svg{ width:38px; height:38px; }
  .section-pay-cta .pay-chips{ justify-content: center; }
  .section-pay-cta .pay-text h2{ margin-bottom: 4px; }
}

/* Мобилки: кнопки в два столбца с переносом, без налезаний */
@media (max-width: 600px){
  .section-pay-cta .pay-action{
    display: flex;
    flex-wrap: wrap;            /* <-- ключ! перенос строк */
    justify-content: center;
    align-items: stretch;
    gap: 10px 12px;
    width: 100%;
  }
  .section-pay-cta .pay-action .btn,
  .section-pay-cta .pay-action .btn-outline{
    flex: 1 1 42%;              /* ~2 колонки */
    min-width: 140px;           /* не ужимать слишком */
    max-width: 240px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: .95rem;
    white-space: normal;        /* текст может переноситься */
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap; 
  }
}

/* Очень узкие экраны — можно в один столбец */
@media (max-width: 360px){
  .section-pay-cta .pay-action .btn,
  .section-pay-cta .pay-action .btn-outline{
    flex-basis: 100%;
  }
}
/* ==== PAY: desktop align left + cleaner buttons ==== */

/* 1) Десктоп — всё влево */
@media (min-width: 768px){
  .page-pay .amounts{ justify-content:flex-start; }
  .page-pay .hero-cta{ justify-content:flex-start; }
}

/* 2) Чипы сумм — авто-ширина, тонкий вид без жирной рамки */
.page-pay .chip{
  appearance:none;
  padding: 9px 12px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 0 0 1px rgba(133,138,145,.22) inset; /* тонкая внутренняя линия вместо бордюра */
  background: rgba(255,255,255,.04);
  color: var(--txt, #e5e7eb);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;            /* не переносим текст на две строки */
  min-width: max-content;         /* ширина по содержимому */
  cursor: pointer;
  transition: box-shadow .15s ease, transform .12s ease, background .15s ease;
}
.page-pay .chip:hover{
  box-shadow: 0 0 0 1px var(--acc, #60a5fa) inset;
  transform: translateY(-1px);
}
.page-pay .chip:active{ transform: translateY(0); }
.page-pay .chip.is-active{
  background: rgba(96,165,250,.14);
  box-shadow:
    0 0 0 1px var(--acc, #60a5fa) inset,
    0 0 0 3px color-mix(in srgb, var(--acc, #60a5fa) 22%, transparent);
}

/* 3) CTA — не растягиваем на десктопе; на мобиле — по одной в строку */
.page-pay .hero-cta .btn,
.page-pay .hero-cta .btn-outline{
  flex: 0 0 auto;                 /* больше не «резиновые» */
  padding-inline: 16px;
  border-radius: 12px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 15px;
}
@media (max-width: 480px){
  .page-pay .hero-cta .btn,
  .page-pay .hero-cta .btn-outline{
    width: 100%;                  /* на узких — каждая с новой строки */
  }
}

/* 4) Сетка чипов — перенос без налезаний, центр только на мобиле */
.page-pay .amounts{
  display:flex; flex-wrap:wrap;
  gap: 10px 12px;
  justify-content:center;         /* мобилы по центру… */
}
@media (min-width: 768px){
  .page-pay .amounts{ justify-content:flex-start; } /* …десктоп влево */
}

/* 5) На всякий — контент не подлезает под фикс-хедер */
.page-pay main.section{
  padding-top: calc(var(--hdr-top, 20px) + var(--hdr-height, 64px) + var(--hdr-safe-gap, 10px));
}

/* Tracking pixels (CSP-safe, no inline styles) */
.trk{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}