/* ============================================================
   ГДЕ БУДЕТ ВАШ БОТ (30.09.2026)
   Слева выбранная площадка: что умеет бот (двойные галочки «прочитано»)
   и условие площадки сноской. Справа экран телефона с «приложениями»;
   под сеткой — открытое приложение выбранной площадки (мини-чат в её
   цвете), оно выезжает заново при каждом выборе.
   ============================================================ */
.ba__box{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .9fr);
  gap:clamp(28px, 5vw, 96px); align-items:center;
}
.ba__side{ display:grid; gap:clamp(18px, 1.8vw, 26px); align-content:center; }
.ba__side .section__sub{ margin:0; max-width:44ch; }
.ba__panes{ display:grid; padding-top:clamp(8px, 1vw, 14px); border-top:1px solid var(--line); }
.ba__pane{
  grid-area:1 / 1;
  opacity:0; visibility:hidden;
  transition:opacity .2s cubic-bezier(.2,.8,.2,1), visibility 0s linear .2s;
}
.ba__pane.is-on{ opacity:1; visibility:visible; transition:opacity .25s cubic-bezier(.2,.8,.2,1) .08s, visibility 0s; }
.ba__count{ margin:10px 0 0; font:500 12px/1 var(--font-mono); letter-spacing:.08em; color:var(--fg-mute); }
.ba__name{
  display:flex; align-items:center; gap:14px;
  margin:12px 0 0;
  font:600 clamp(30px, 3vw, 48px)/1.05 var(--font-display); letter-spacing:-.03em; color:var(--fg);
}
.ba__chip{ flex:none; width:clamp(26px, 2.2vw, 34px); aspect-ratio:1; border-radius:9px; }
.ba__can{ list-style:none; margin:clamp(16px, 1.6vw, 22px) 0 0; padding:0; display:grid; gap:10px; }
.ba__can li{ position:relative; padding-left:28px; font-size:clamp(15px, 1.08vw, 17.5px); line-height:1.45; color:var(--fg); }
.ba__can li::before, .ba__can li::after{
  content:""; position:absolute; top:.36em; width:9px; height:5px;
  border:solid var(--accent-1); border-width:0 0 2px 2px; transform:rotate(-45deg);
}
.ba__can li::before{ left:0; }
.ba__can li::after{ left:6px; }
.ba__cond{
  margin:clamp(16px, 1.6vw, 22px) 0 0; max-width:48ch;
  padding:12px 14px; border-left:2px solid var(--accent-1); background:var(--accent-wash);
  font-size:14.5px; line-height:1.5; color:var(--fg-lead);
}
.ba__cond b{ color:var(--fg); }
.ba__btn{ justify-self:start; }

/* ---------- телефон с приложениями ---------- */
.ba__device{
  justify-self:center; width:min(340px, 88vw); aspect-ratio:9 / 17.5;
  padding:11px; border-radius:48px; background:#11161c;
  box-shadow:0 1px 0 1px #2a323c inset, 0 50px 90px -40px rgba(13,30,40,.5);
  rotate:2deg;
}
.ba__screen{
  position:relative; height:100%; overflow:hidden; border-radius:38px;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 60% at 20% 0%, rgba(var(--accent-rgb), .35), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(80,120,255,.25), transparent 60%),
    linear-gradient(180deg, #e9f3f2, #dfe8f1);
}
.ba__status{ display:flex; justify-content:space-between; align-items:center; padding:16px 26px 4px; font:600 13px/1 var(--font); color:#16202a; }
.ba__status span{ display:flex; gap:3px; }
.ba__status i{ width:4px; height:10px; border-radius:1px; background:#16202a; }
.ba__status i:nth-child(1){ height:6px; } .ba__status i:nth-child(2){ height:8px; }
.ba__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px 6px;
  padding:22px 18px 10px;
}
.ba__app{
  display:grid; justify-items:center; gap:7px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; color:#16202a;
}
.ba__icon{
  display:grid; place-items:center; width:58px; height:58px; border-radius:15px;
  color:#fff; box-shadow:0 6px 14px rgba(20,30,50,.18);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.ba__icon b{ font:800 19px/1 var(--font); letter-spacing:-.02em; }
.ba__icon--site b{ font-size:15px; font-family:var(--font-mono); }
.ba__icon--x b{ font-size:24px; font-weight:900; }
.ba__icon svg{ width:30px; height:30px; }
.ba__label{ font:500 11.5px/1.1 var(--font); color:#2a3440; max-width:70px; text-align:center; }
.ba__app:hover .ba__icon{ transform:translateY(-2px); }
.ba__app.is-on .ba__icon{ box-shadow:0 0 0 3px #fff, 0 0 0 5px #16202a, 0 8px 18px rgba(20,30,50,.25); }
.ba__app.is-on .ba__label{ font-weight:700; }
.ba__app:focus-visible .ba__icon{ outline:2px solid #16202a; outline-offset:4px; }

/* открытое приложение — снизу экрана, выезжает при каждом выборе */
.ba__open{
  margin:auto 12px 10px; padding-bottom:12px;
  border-radius:22px; overflow:hidden; background:#f4f6f5;
  box-shadow:0 -8px 30px rgba(20,30,50,.12);
}
.ba__open.is-swap{ animation:ba-up .38s cubic-bezier(.2,.8,.2,1); }
@keyframes ba-up{ from{ transform:translateY(40%); opacity:0; } }
.ba__bar{ display:flex; align-items:center; gap:9px; padding:12px 14px; color:#fff; transition:background .3s; }
.ba__bar b{ font:600 13px/1 var(--font); }
.ba__net{ margin-left:auto; font:500 11px/1 var(--font); font-style:normal; opacity:.85; }
.ba__ava{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.25); font:700 12px/1 var(--font); }
.ba__hi{ margin:12px 12px 8px; padding:9px 12px; max-width:80%; border-radius:14px; border-bottom-left-radius:5px; background:#fff; font-size:13px; color:#16202a; }
.ba__keys{ margin:0 12px; display:flex; flex-wrap:wrap; gap:6px; }
.ba__keys span{ padding:6px 9px; border-radius:4px; background:#fff; border:1px solid rgba(20,40,60,.12); font:600 11.5px/1 var(--font); color:#1b2733; }
.ba__home{ align-self:center; width:120px; height:5px; margin:0 0 9px; border-radius:3px; background:rgba(22,32,42,.55); }

@media (max-width: 900px){
  .ba__box{ grid-template-columns:1fr; }
  .ba__device{ order:-1; rotate:0deg; width:min(360px, 92vw); }
  .ba__icon{ width:52px; height:52px; border-radius:13px; }
}
@media (prefers-reduced-motion: reduce){ .ba__open.is-swap{ animation:none; } }

/* 30.09.2026 (2): блок на мятной подложке во всю ширину с узором точек — страница
   перестаёт быть одинаково белой; картинка-предмет у заголовка (apps_art) */
.ba{
  position:relative; isolation:isolate;
  background:
    radial-gradient(rgba(var(--accent-rgb), .16) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--accent-wash), #eef7f6);
  border-block:1px solid rgba(var(--accent-rgb), .12);
}
.ba__art{ position:absolute; z-index:-1; left:clamp(180px, 22vw, 360px); top:clamp(40px, 5vw, 80px); width:clamp(120px, 11vw, 180px); mix-blend-mode:multiply; pointer-events:none; animation:bh-float2 8s ease-in-out infinite; }
@keyframes bh-float2{ 0%,100%{ translate:0 0; rotate:0deg; } 50%{ translate:0 -8px; rotate:-3deg; } }
.ba__side{ position:relative; }
.ba__device{ background:#11161c; }