/* BOSS NINJA STUDIO — styles.css (dark glass, Apple-style) */
/* Редизайн страницы About в стиле «стеклянных баблов» (glassmorphism).
   Тексты и разметка не менялись; только визуальные стили.

   ИСПРАВЛЕНИЕ ФОНА:
   — Градиент вынесен в body::before с position: fixed;
   — Убран background-image с body;
   — Фон один непрерывный слой без «квадратов» и швов при длинной прокрутке.
*/

/* === Тема и токены === */
:root{
  /* Базовые токены темы (тёмная сцена) */
  --bg:#0b0f14;                /* fallback цвет */
  --bg-grad: radial-gradient(1200px 900px at 80% 10%, rgba(64,122,255,.10), transparent 60%),
             radial-gradient(900px 700px at 10% 80%, rgba(255,96,122,.08), transparent 55%),
             linear-gradient(180deg, #0b0f14 0%, #0a0d12 100%);

  /* Стеклянные поверхности */
  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.06);
  --glass-3: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.18);   /* светлая кайма */
  --stroke-soft: rgba(255,255,255,.12);
  --highlight: rgba(255,255,255,.35); /* лёгкая внутренняя засветка */
  --backdrop-blur: 16px;
  --saturate: 1.25;

  /* Текст и акценты */
  --text:#edf3f9;
  --muted:#a8b5c1;
  --accent:#9fd2ff;

  /* Бренд/футер лёгкого оттенка тёмного синего */
  --brand:#141b24;
  --brand-2:#0f151d;

  /* Прочее */
  --divider:#2b2b2b;
  --radius:18px;
  --radius-lg:22px;
  --space:16px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 16px 48px rgba(0,0,0,.55);
  --trans-fast:.08s;
  --trans:.22s;

  /* Кнопки (переосмыслены как стеклянные пилюли) */
  --btn-accent-from: rgba(160,210,255,.22);
  --btn-accent-to: rgba(140,190,250,.10);
  --btn-accent-hover: rgba(180,225,255,.28);
  --btn-text:#eaf6ff;
  --btn-width:320px;      /* одинаковая ширина на широких экранах */
  --btn-min-h:46px;
  --btn-pad-y:12px;
  --btn-pad-x:18px;
  --btn-gap:12px;
  --btn-radius:12px;      /* меньшее скругление у кнопок */
}

/* === База/типографика === */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; padding:0;
  font-family: Helvetica, Arial, sans-serif;
  background:var(--bg);                  /* оставляем только базовый цвет */
  color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ЕДИНЫЙ ФОН-ГРАДИЕНТ НА ВСЮ СТРАНИЦУ (без швов) */
body::before{
  content:"";
  position:fixed;
  inset:0;                                /* на весь вьюпорт */
  z-index:0;                              /* ниже контента (контент > z-index) */
  pointer-events:none;
  /* единый сложный градиент */
  background-image: var(--bg-grad);
  background-repeat:no-repeat;            /* исключаем повтор */
  background-size:cover;                  /* заполняем вьюпорт */
  transform:translateZ(0);                /* устраняет артефакты композиции */
  will-change:transform;                  /* подсказка композитору */
}

/* ВАЖНО: Контент поверх фонового слоя */
header{ position:relative; z-index:2 }
main{ position:relative; z-index:1 }
footer{ position:relative; z-index:1 }

/* Лёгкая текстура/пленка поверх сцены (без блокировки взаимодействия) */
/* Доп. плёнка не используется, чтобы не создавать горизонтальные «швы» */
h1,h2,h3,h4{ color:var(--muted); font-weight:600; margin:0 0 .6rem }
p{ margin:0 0 .6rem }
strong{ color:var(--muted); font-weight:700 }
a{
  color:var(--accent); text-decoration:none;
  transition:color var(--trans) ease;
}
a:hover, a:focus-visible{ color:#fff; outline:none }
:focus-visible{ outline:2px solid #6aa8ff; outline-offset:2px }

/* === Шапка === */
header{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  background-color: var(--glass);
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(var(--backdrop-blur));
  backdrop-filter: saturate(var(--saturate)) blur(var(--backdrop-blur));
  padding:10px 0 6px;
  margin:0 0 12px;
  border-bottom:1px solid var(--stroke-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,.05), var(--shadow);
}
.header-flex-container{
  width:100%; max-width:800px;
  margin:0 auto 10px; padding:0 var(--space);
}
.header-container{
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap;
}
.header-container .image-container{ width:48px; height:48px; flex:0 0 48px }
.header-container .image-container img{
  width:100%; height:100%; display:block; border-radius:50%; object-fit:cover
}
.header-container .text-container{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; margin:4px 0 2px }
.title-row{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; min-width:0 }
.title-spacer{ flex:1 1 auto }
.header-title{ font-size:22px; line-height:1.15; color:#d9e6f2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.header-subtitle{ font-size:15px; line-height:1.3; color:#a9bdcb; margin-top:4px }

/* === Language switcher (compact chips) === */
.lang-switcher{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; margin-top:0 }
.lang-switcher input{ position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; pointer-events:none }
.lang-switcher label{
  color:#b8cbe0; font-size:12px; line-height:1; padding:4px 8px; border-radius:999px;
  border:1px solid var(--stroke-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  cursor:pointer; user-select:none; -webkit-user-select:none;
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(10px);
  backdrop-filter: saturate(var(--saturate)) blur(10px);
  -webkit-tap-highlight-color: rgba(255,255,255,.12); touch-action: manipulation;
}
.lang-switcher label:hover, .lang-switcher label:focus-visible{ color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.10) }
.lang-switcher input:checked + label, .lang-switcher label.active{ color:#0d1117; background:#d8e9f7; border-color:#d8e9f7; font-weight:700 }

/* === Секции === */
main{ padding:10px 12px }
section{
  width:100%; max-width:800px; margin:0 auto 28px;
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
  padding:26px 24px;
  border-radius:var(--radius);
  border:1px solid var(--stroke-soft);
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(var(--backdrop-blur));
  backdrop-filter: saturate(var(--saturate)) blur(var(--backdrop-blur));
  box-shadow: var(--shadow);
  position:relative;
}
.section h3, section h3{ margin:20px 0 12px; color:#d7e1e8 }
.price-grid{ margin:0 0 8px }
.section::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.20), transparent 25%);
  mix-blend-mode:screen; opacity:.4;
}
.section-header{
  color:#eaf2ff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  padding:18px 25px;
  margin:-6px -24px 20px -24px;
  border-bottom:1px solid var(--stroke-soft);
  display:flex; align-items:center; justify-content:space-between;
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(10px);
  backdrop-filter: saturate(var(--saturate)) blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
}
.section-header-left-text{ font-size:22px; line-height:1.35; font-weight:600 }

/* === Видео === */
.video-container{
  position:relative; width:100%; padding-bottom:56.25%;
  border-radius:var(--radius);
  background: linear-gradient(180deg, var(--glass-2), var(--glass-3));
  border:1px solid var(--stroke-soft);
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(12px);
  backdrop-filter: saturate(var(--saturate)) blur(12px);
  box-shadow:var(--shadow); overflow:hidden; margin:24px 0 12px;
}
.video-container iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* === Кнопки (исправлено) === */
.button-container{
  display:flex; justify-content:center; align-items:stretch;
  flex-wrap:wrap; gap:var(--btn-gap); margin:18px 0 8px; width:100%;
}
.link-button,
.round-button{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--btn-width); min-height:var(--btn-min-h);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  white-space:nowrap; text-align:center;
  color:var(--btn-text);
  background: linear-gradient(180deg, var(--btn-accent-from), var(--btn-accent-to));
  border:1px solid var(--stroke);
  border-radius:var(--btn-radius);
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(10px);
  backdrop-filter: saturate(var(--saturate)) blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), var(--shadow);
  transition: background var(--trans) ease, transform var(--trans-fast) ease, box-shadow var(--trans) ease, border-color var(--trans) ease;
}
.link-button:hover, .round-button:hover,
.link-button:focus-visible, .round-button:focus-visible{
  background: linear-gradient(180deg, var(--btn-accent-hover), var(--btn-accent-from));
  transform:translateY(-1px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(255,255,255,.24);
}

/* Call button accent (coral) */
.link-button.btn-call{
  background: linear-gradient(180deg, rgba(255,127,102,.85), rgba(255,99,71,.70));
  border-color: rgba(255,255,255,.28);
  color:#fff;
}
.link-button.btn-call:hover,
.link-button.btn-call:focus-visible{
  background: linear-gradient(180deg, rgba(255,147,122,.95), rgba(255,99,71,.82));
  border-color: rgba(255,255,255,.36);
}

/* === Карточки статей === */
.article{
  cursor:pointer; margin:0 0 16px; padding:12px 16px;
  background: linear-gradient(180deg, var(--glass-2), var(--glass-3));
  border:1px solid var(--stroke-soft);
  border-radius:var(--radius); box-shadow:var(--shadow);
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(10px);
  backdrop-filter: saturate(var(--saturate)) blur(10px);
  transition:transform var(--trans-fast) ease, box-shadow var(--trans) ease, border-color var(--trans) ease;
}
.article:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--stroke) }
.article h4{ color:#c7d1d8; margin:0 0 6px; font-weight:600 }
.article p{ color:#aab8c2; margin:0; word-break:break-word }

/* === Изображения в блоках === */
.image-box{
  margin:14px 0 22px;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:none;       /* убрали фон */
  border:none;           /* убрали рамку */
  box-shadow:none;       /* убрали тень */
}
.image-box img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border-radius:var(--radius-lg);
  object-fit:contain;
}

/* Адаптивные отступы вокруг split-screen картинки */
.split-screen-img{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:var(--radius-lg);
  object-fit:contain;
  padding-left:8px;
  padding-right:8px;
}
@media (min-width:1024px){
  .split-screen-img{
    padding-left:16px;
    padding-right:16px;
  }
}
@media (max-width:640px){
  .split-screen-img{
    padding-left:4px;
    padding-right:4px;
  }
}

/* === Сетка приложений/игр === */
.apps{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:14px; margin:8px 0 6px }
.app{
  cursor:pointer; width:118px; min-height:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
  border:1px solid var(--stroke-soft);
  border-radius:var(--radius); padding:8px 8px 10px;
  box-shadow:var(--shadow);
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(10px);
  backdrop-filter: saturate(var(--saturate)) blur(10px);
  transition:transform var(--trans-fast) ease, box-shadow var(--trans) ease, border-color var(--trans) ease;
}
.app:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--stroke) }
.app img{
  width:78px; height:78px; margin:6px auto; display:block;
  border-radius:14px; object-fit:cover; box-shadow:0 0 10px rgba(0,0,0,.25);
}
.app h4{ color:#cfdae1; font-size:14px; margin:2px 0 0; font-weight:600 }
.app p{ color:#9fb0ba; font-size:12px; margin:4px 0 0; line-height:1.3 }

/* === Workflow emojis === */
.app .emoji{
  font-size:44px;
  line-height:1;
  margin:8px auto 6px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
@media (max-width:640px){
  .app{ width:calc(50% - 7px); min-height:auto; padding:10px 8px }
  .app .emoji{ font-size:36px; margin:6px auto 4px }
}
@media (max-width:420px){
  .app{ width:100% }
}

/* === Таблицы === */
table{ width:100%; border-collapse:collapse }
th,td{ border:1px solid var(--stroke-soft); padding:10px; text-align:center; vertical-align:middle }
th{
  background: linear-gradient(180deg, var(--glass-2), var(--glass-3));
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(8px);
  backdrop-filter: saturate(var(--saturate)) blur(8px);
  color:#d7e1e8; font-weight:600
}
td{ color:#b8c4cc }
table a{ color:#cfe6ff }
table a:hover{ color:#fff }

/* === Навигация/футер === */
nav{ color:var(--muted); text-align:center; margin:20px 0 0 }
nav ul{ list-style:none; margin:0; padding:0 }
nav li{ display:inline-block; margin:0 10px 8px }
footer{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  background-color: var(--brand);
  color:#eaf2ff;
  padding:14px 18px; text-align:center;
  border-top:1px solid rgba(255,255,255,.06);
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(8px);
  backdrop-filter: saturate(var(--saturate)) blur(8px);
}
/* Перенос на новых строках и корректное поведение на iPhone */
footer .footer-line{
  display:block;
  margin:4px 0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
footer a{ color:#fff; text-decoration:underline dotted rgba(255,255,255,.35) }
footer a:hover{ color:#e6f4ff; text-decoration-color:rgba(230,244,255,.7) }
/* Разнести в две строки: название и ссылки */
.footer-game-title{ display:block; margin:0 0 4px }
.footer-game-links{ display:block; margin:0 }

/* === Примечание об оффлайн-версии === */
.note-offline{
  display:block;
  margin:12px auto 0; padding:10px 12px;
  font-size:12px; line-height:1.35; text-align:center;
  color:#ffe8b7; background: linear-gradient(180deg, rgba(255,210,127,.14), rgba(255,210,127,.08));
  border:1px dashed rgba(255,210,127,.35);
  border-radius:12px; max-width:720px;
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(6px);
  backdrop-filter: saturate(var(--saturate)) blur(6px);
}

/* === Контакты === */
#contacts p{ margin:0 }
#contacts .section-header{ margin-bottom:16px }
#contacts .row{ display:flex; flex-direction:row }
#contacts .label{ flex:1; padding-right:12px; color:#9fb0ba }
#contacts .value{ flex:2; padding-left:12px }
#contacts a{
  color:#e6f4ff; font-weight:600; text-decoration:none;
  border-bottom:1px dashed rgba(230,244,255,.25);
}
#contacts a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.5) }
#contacts a[href^="tel:"]{ color:#b8ffec }
#contacts a[href^="tel:"]:hover{ color:#eafff8 }

/* === Код/преформат === */
pre, code, kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
pre{
  background: linear-gradient(180deg, var(--glass-2), var(--glass-3)); color:#d2b48c;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--stroke-soft); overflow:auto; box-shadow:var(--shadow);
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(10px);
  backdrop-filter: saturate(var(--saturate)) blur(10px);
}
code{ color:#e9f0ff }
kbd{
  display:inline-block; background: linear-gradient(180deg, rgba(38,55,71,.65), rgba(30,44,59,.55)); color:#e9f0ff;
  padding:3px 8px; border-radius:8px;
  border:1px solid rgba(255,255,255,.18); line-height:1.45; margin:3px 0;
}

/* === Сравнение (чипы вместо таблицы) === */
.compare-legend{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px }
.feature-compare{ display:flex; flex-direction:column; gap:10px }
.feature-row{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 12px;
  background: linear-gradient(180deg, var(--glass-2), var(--glass-3));
  border:1px solid var(--stroke-soft); border-radius:var(--radius); box-shadow:var(--shadow);
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(10px);
  backdrop-filter: saturate(var(--saturate)) blur(10px);
}
.feature-title{ font-weight:600; color:#d7e1e8 }
.feature-support{ display:flex; flex-wrap:wrap; gap:8px }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; white-space:nowrap; border-radius:999px;
  border:1px solid var(--stroke-soft); background: linear-gradient(180deg, var(--glass), var(--glass-2)); color:#cfe6ff;
  font-size:13px; line-height:1;
}
.badge.product{ opacity:.95 }
.badge.autocoder{ background: linear-gradient(180deg, rgba(33,50,70,.65), rgba(33,50,70,.45)); border-color:#2d4764 }

/* === Work gallery === */
.work-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:760px){ .work-grid{ grid-template-columns:1fr } }
.work-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--stroke-soft);
  background:linear-gradient(180deg, var(--glass-2), var(--glass-3));
  box-shadow:var(--shadow);
}
.work-card img{ width:100%; height:auto; display:block }
.work-card .caption{
  position:absolute; left:10px; bottom:10px;
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25));
  color:#eaf2ff; font-size:13px; border:1px solid rgba(255,255,255,.18);
}
.work-card:hover{ transform:translateY(-2px); transition:transform var(--trans-fast) ease }

/* === Calculator === */
.calc{
  display:flex; flex-direction:column; gap:14px;
}
.calc-note{ color:#a9bdcb; font-size:13px }
.calc-sections{ display:flex; flex-direction:column; gap:12px }
.calc-section{
  border:1px solid var(--stroke-soft);
  border-radius:12px;
  padding:10px 12px;
  background:linear-gradient(180deg, var(--glass-2), var(--glass-3));
}
.calc-section h4{ margin:0 0 8px; color:#d7e1e8 }
.calc-grid{ display:grid; grid-template-columns:1fr 120px 160px; gap:8px 10px; align-items:center }
@media (max-width:640px){ .calc-grid{ grid-template-columns:1fr 160px } }
.calc-item{ display:contents }
.calc-label{ color:#c7d1d8; font-size:14px }
.calc-price{ color:#9fc6ff; font-size:13px; text-align:right }
@media (max-width:640px){ .calc-price{ display:none } }
.calc-input{ display:flex; gap:6px; align-items:center; justify-content:flex-end }
.calc-input input[type="number"]{
  width:110px; padding:8px 10px; border-radius:10px; border:1px solid var(--stroke-soft);
  background:rgba(255,255,255,.06); color:#eaf2ff;
}
.calc-input .unit{ color:#9fb0ba; font-size:12px; min-width:36px; text-align:left }
.calc-total{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border:1px solid var(--stroke-soft);
  border-radius:12px; background:linear-gradient(180deg, var(--glass), var(--glass-2));
  font-weight:700; color:#eaf2ff;
}
.calc-actions{ display:flex; flex-direction:column; gap:10px }
.calc-row{ display:flex; gap:12px; flex-wrap:wrap }
.calc-row input[type="text"], .calc-row input[type="tel"], .calc-row textarea{
  flex:1 1 260px; min-width:220px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--stroke-soft);
  background:rgba(255,255,255,.06); color:#eaf2ff;
}
.calc-row textarea{ min-height:80px; resize:vertical }
.calc-submit{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:linear-gradient(180deg, rgba(160,210,255,.22), rgba(140,190,250,.10)); color:#eaf6ff; text-decoration:none; cursor:pointer }
.calc-submit:hover{ background:linear-gradient(180deg, rgba(180,225,255,.28), rgba(160,210,255,.22)) }
.calc-status{ font-size:13px; color:#bfe3ff }
.badge.canvas{ background: linear-gradient(180deg, rgba(43,43,43,.65), rgba(43,43,43,.45)); border-color:#3a3a3a }
.badge.copilot{ background: linear-gradient(180deg, rgba(32,47,47,.65), rgba(32,47,47,.45)); border-color:#2f4949 }
.badge.giga{ background: linear-gradient(180deg, rgba(46,38,56,.65), rgba(46,38,56,.45)); border-color:#433358 }
.badge.ok.autocoder{ background: linear-gradient(180deg, rgba(39,71,98,.70), rgba(39,71,98,.48)); border-color:#396183 }
.badge.ok.canvas{ background: linear-gradient(180deg, rgba(52,52,52,.70), rgba(52,52,52,.48)); border-color:#4a4a4a }
.badge.ok.copilot{ background: linear-gradient(180deg, rgba(39,66,66,.70), rgba(39,66,66,.48)); border-color:#3f6666 }
.badge.ok.giga{ background: linear-gradient(180deg, rgba(58,46,75,.70), rgba(58,46,75,.48)); border-color:#54416d }

/* === Медиа === */
@media (max-width:640px){
  .header-flex-container{ padding:0 14px }
  .header-container{ gap:10px }
  .header-container .image-container{ width:40px; height:40px; flex-basis:40px }
  .header-title{ font-size:17px }
  .header-subtitle{ font-size:13px }
  .title-row{ gap:8px }

  section{ padding:18px 14px }
  .section-header{ padding:14px 18px; margin:-6px -14px 14px -14px } /* подгонка по бордеру */
  .section-header-left-text{ font-size:18px }

  .image-box img{ width:calc(100% - 8px); margin:4px; border-radius:10px }

  .apps{ gap:12px }
  .app{ width:46%; min-width:140px }
  .app img{ width:82px; height:82px }

  #contacts .row{ flex-direction:column }
  #contacts .label, #contacts .value{ padding:0 }

  .feature-row{ padding:10px }
  .badge{ font-size:12px; padding:6px 9px }

  /* Кнопки: в столбик и по центру */
  .button-container{ justify-content:center }
  .link-button, .round-button{ width:100% }
}
@media (max-width:420px){
  .app{ width:100% }
}

/* === Доступность анимаций === */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important }
}

/* === Промо-блоки банковских продуктов === */
.promo{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.promo-item{
  background: linear-gradient(180deg, var(--glass-2), var(--glass-3));
  border:1px solid var(--stroke-soft);
  border-radius:var(--radius);
  padding:14px 16px;
  -webkit-backdrop-filter: saturate(var(--saturate)) blur(10px);
  backdrop-filter: saturate(var(--saturate)) blur(10px);
  box-shadow:var(--shadow);
}
.promo-item.live{ border-color:var(--stroke) }
.promo-item.planned{ border-color:#5a4930 }
.promo-item.vision{ border-color:#2e4a5a }
.promo-title{
  margin:0 0 8px;
  font-weight:700; letter-spacing:.15px;
  color:var(--accent); /* аккуратный акцент без подложки */
}
.promo-text{ color:#c9d4db }

@media (max-width:760px){
  .promo{ grid-template-columns:1fr }
}