/* === Кнопка-акцент как у тебя была === */
.btn-accent{
  --bs-btn-color:#fff; --bs-btn-bg:#FF00A8; --bs-btn-border-color:#FF00A8;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#C80084; --bs-btn-hover-border-color:#C80084;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#C80084; --bs-btn-active-border-color:#C80084;
  --bs-btn-active-shadow:inset 0 3px 5px rgba(0,0,0,.125);
}
.img_32{height:32px}

html,body{height:100%; margin:0; padding:0;}

/* ===== Вся страница (1 экран, общий лимит ширины) ===== */
.page-wrap{
  /* базовые отступы/размеры */
  --pad-v: clamp(12px, 2.5dvh, 22px);
  --pad-h: 12px;
  --gap:    clamp(10px, 1.6dvh, 16px);
  --row-gap:clamp(10px, 1.4dvh, 14px);
  --btn-h:  clamp(48px, 6dvh, 60px);

  /* общий лимит ширины для КАРТИНКИ и ДВУХ КОЛОНОК КНОПОК */
  /* ↑ поменяй 730px при желании (это «потолок») */
  --content-w: clamp(300px, 90vw, 730px);

  height: 100dvh;                    /* корректная высота на мобилках */
  display: flex; flex-direction: column;
  box-sizing: border-box;
  padding: var(--pad-v) var(--pad-h);
  gap: var(--gap);
  overflow: hidden;                  /* чтобы ничего не вылезало */
  min-height: 0;
}

/* ===== Верхняя картинка (всегда целиком, ширина = --content-w) ===== */
.matrix-area{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex; justify-content: center; align-items: center;
}
.matrix-area img{
  width: 100%;
  max-width: var(--content-w);       /* 👈 тот же лимит, что у кнопок */
  height: auto;
  max-height: 100%;
  object-fit: contain;               /* целиком, без обрезки */
  display: block;
}

/* ===== Нижний блок (2×3) — ширина = --content-w ===== */
.controls-area{
  flex: 0 0 auto;
  width: 100%;
  display: grid; place-items: center;
}

.cta-grid-2x3{
  width: 100%;
  max-width: var(--content-w);       /* 👈 тот же лимит, что у картинки */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* ровно 2 колонки */
  gap: var(--row-gap) var(--gap);
  justify-content: center;
  align-items: stretch;
}

/* ===== Унифицированные кнопки ===== */
.cta-btn, .linkcard{
  min-height: var(--btn-h);
  border-radius: 10px;
  transition: .18s box-shadow, .18s transform, .1s background;
  width: 100%;                       /* каждая занимает свою колонку */
  justify-self: stretch;
  text-decoration: none;
}
.cta-btn:hover, .linkcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(20,35,69,.08);
}
.cta-btn:active, .linkcard:active{
  transform: scale(.97);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.15);
}
.cta-btn:focus{
  outline: 2px solid rgba(20,35,69,.5);
  outline-offset: 2px;
}

/* верхние 2 кнопки (bootstrap) — аккуратный контент */
.cta-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14px; padding:6px 12px;
}
.cta-btn-ico{ width:16px; height:16px; }

/* карточки ссылок (боты/соцсети) — светло-розовые, без подложек у иконок */
.linkcard{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  background:#FFE6F3; color:#142345;
  box-sizing:border-box;
}
.linkcard-pic{
  width:36px; height:36px;
  object-fit: contain;
  background:none; border-radius:0; box-shadow:none;
}
.linkcard-copy{ display:flex; flex-direction:column; text-align:left; }
.linkcard-title{ font-weight:700; font-size:13.5px; line-height:1.15; }
.linkcard-desc{ font-size:11.5px; opacity:.9; line-height:1.25; margin-top:1px; }

/* ===== Адаптивные подстройки ===== */
@media (max-width: 768px){
  .page-wrap{ --pad-v: 14px; --btn-h: 50px; }
  .linkcard-pic{ width:32px; height:32px; }
  .linkcard-title{ font-size:13px; }
}
@media (max-height: 680px){
  .page-wrap{ --pad-v: 10px; --btn-h: 44px; --row-gap: 10px; }
}

/* 📱 Мобилка: убираем "дыру" и центруем всё */
@media (max-width: 768px) {
  .page-wrap{
    /* вертикально центрируем общий стек вместо "прижать вниз" */
    justify-content: center;
    /* чуть компактнее отступы между блоками */
    --gap: 8px;
    --row-gap: 8px;
  }

  .matrix-area{
    /* картинка больше не растягивает страницу лишним пустым местом */
    flex: 0 1 auto;
  }
  .matrix-area img{
    /* мягкий потолок высоты, чтобы оставалось место под кнопки */
    max-height: 48dvh; /* можешь поставить 45–52dvh по вкусу */
  }

  .controls-area{
    /* небольшой отступ сверху вместо огромного «провала» */
    margin-top: 6px;
  }
}

/* Очень низкие экраны по высоте: ещё компактнее */
@media (max-height: 640px) {
  .matrix-area img { max-height: 44dvh; }
  .page-wrap { --gap: 6px; --row-gap: 6px; }
}