/* МЕДИА.СТРАЖ PRO — единое окно выбора направления. */
.pro-gateway-overlay[hidden] { display: none !important; }
.pro-gateway-overlay {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 20px; overflow-y: auto; background: rgba(1, 5, 12, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pro-gateway-dialog, .pro-gateway-dialog * { box-sizing: border-box; }
.pro-gateway-dialog {
  position: relative; width: min(100%, 920px); max-height: calc(100dvh - 40px);
  overflow-y: auto; border: 1px solid #345b76; border-radius: 18px;
  background: radial-gradient(ellipse at 17% 8%,rgba(21,176,226,.17),transparent 44%),
              radial-gradient(ellipse at 85% 92%,rgba(251,172,58,.11),transparent 48%),#08121e;
  color: #f0f6fb; padding: 36px;
  box-shadow: 0 32px 90px rgba(0,0,0,.69),inset 0 1px 0 rgba(126,209,235,.08);
  font-family: Inter, Arial, sans-serif; line-height: 1.65;
}
.pro-gateway-dialog :focus-visible { outline: 2px solid #f2c66d; outline-offset: 4px; }
.pro-gateway-close {
  position: absolute; right: 18px; top: 17px; width: 37px; height: 37px;
  border: 1px solid #354557; border-radius: 8px; color: #c6d4e0;
  background: #121b27; cursor: pointer; font: 500 24px/1 Inter, sans-serif;
}
.pro-gateway-close:hover { color: #fff; border-color: #7e93a6; }
.pro-gateway-title {
  margin: 0 0 28px;
  color: #f8fbff;
  font: 800 clamp(27px, 3.7vw, 39px)/1.18 Montserrat, Inter, sans-serif;
  letter-spacing: -.03em;
  text-align: center;
}
.pro-gateway-title-line { display: block; }
.pro-gateway-title-pro { color: #ffc768; white-space: nowrap; }
.pro-gateway-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pro-gateway-option {
  display: flex; flex-direction: column; min-width: 0; gap: 14px;
  padding: 25px; text-decoration: none !important; border: 1px solid #334657;
  border-radius: 12px; background: #102233; color: #f0f7fa !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pro-gateway-option:hover { transform: translateY(-2px); background: #173045; }
.pro-gateway-option--research {
  border-color: #329cb7;
  background: linear-gradient(160deg,rgba(25,92,126,.24),rgba(9,28,44,.96) 68%);
  box-shadow: inset 0 1px 0 rgba(71,221,250,.06);
}
.pro-gateway-option--research:hover { border-color: #48def7; box-shadow:0 0 28px rgba(27,183,222,.11); }
.pro-gateway-option--business {
  border-color: #c28a44;
  background: linear-gradient(160deg,rgba(104,72,34,.28),rgba(32,25,23,.97) 70%);
  box-shadow: inset 0 1px 0 rgba(255,207,122,.07);
}
.pro-gateway-option--business:hover { border-color: #ffc36c; background: #2e271f; box-shadow:0 0 28px rgba(234,166,73,.10); }
.pro-gateway-option h3 { margin: 0; color: #f2f6fb; font: 800 22px/1.3 Montserrat, Inter, sans-serif; }
.pro-gateway-audience {
  margin: 9px 0 0; color: #5ce4f5; font: 700 12px/1.5 Inter, sans-serif;
  letter-spacing: .025em; text-transform: uppercase;
}
.pro-gateway-option--business .pro-gateway-audience { color: #ffd184; }
.pro-gateway-benefits {
  margin: 0; padding-left: 21px; color: #e0e9f2; font-size: 15px; line-height: 1.7;
  text-align: left;
}
.pro-gateway-benefits li + li { margin-top: 10px; }
.pro-gateway-cta {
  display: flex; align-items: center; justify-content: center; min-height: 49px;
  width: 100%; padding: 12px 16px; margin-top: auto; border-radius: 11px;
  font-size: 14px; line-height: 1.35; font-weight: 800; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px rgba(0,0,0,.23);
}
.pro-gateway-option--research .pro-gateway-cta {
  color: #052a39; border: 1px solid #5ee5f6;
  background: linear-gradient(125deg, #4bddf5, #1fa7d0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 7px 22px rgba(21,178,217,.22);
}
.pro-gateway-option--business .pro-gateway-cta {
  color: #3d2308; border: 1px solid #ffd586;
  background: linear-gradient(125deg, #ffd184, #eea93c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 7px 22px rgba(226,150,47,.19);
}
.pro-gateway-cta:hover { filter:brightness(1.07); }
.pro-gateway-cta:focus-visible { outline:3px solid #f7f9ff; outline-offset:3px; }
/* Mobile dialog: compact, bounded to the viewport, with internal scrolling.
   Preserve desktop proportions and the cyan/amber research/business distinction. */
@media (max-width: 640px) {
  .pro-gateway-overlay {
    padding: 8px;
    align-items: center;
    justify-items: stretch;
    overflow: hidden;
  }
  .pro-gateway-dialog {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    min-height: 0;
    margin: 0 auto;
    padding: 22px 14px 14px;
    border-radius: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .pro-gateway-close {
    right: 9px;
    top: 9px;
    width: 31px;
    height: 31px;
    border-radius: 7px;
    font-size: 21px;
  }
  .pro-gateway-title {
    margin: 8px auto 16px;
    padding: 0 17px;
    max-width: 100%;
    font-size: clamp(18px, 4.9vw, 23px);
    line-height: 1.22;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .pro-gateway-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
  }
  .pro-gateway-option {
    min-width: 0;
    padding: 14px;
    gap: 10px;
    border-radius: 11px;
  }
  .pro-gateway-option h3 { font-size: 19px; line-height: 1.2; }
  .pro-gateway-audience {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .pro-gateway-benefits {
    padding-left: 17px;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .pro-gateway-benefits li + li { margin-top: 6px; }
  .pro-gateway-cta {
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.35;
  }
}
@media (max-width: 360px) {
  .pro-gateway-dialog { padding: 19px 11px 12px; }
  .pro-gateway-title { padding: 0 19px; font-size: 18px; }
  .pro-gateway-option { padding: 12px; }
  .pro-gateway-option h3 { font-size: 18px; }
  .pro-gateway-audience { font-size: 10.5px; }
  .pro-gateway-benefits { font-size: 12px; }
}
@media (max-width: 640px) and (max-height: 560px) {
  .pro-gateway-dialog { max-height: calc(100dvh - 12px); padding-top: 17px; }
  .pro-gateway-title { margin-bottom: 12px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pro-gateway-option { transition: none; }
  .pro-gateway-option:hover { transform: none; }
}