/* Блоки версии «упор на ИИ-монтажёра»: до/после, горизонталь, аудитории, программа, доказательства.
   Палитра и карточки те же, что у остальных секций (фиолетовый #9759ff / #c7a7ff на #0b0716). */

/* ---------- до / после (общий компонент) ---------- */
.ba{position:relative;width:100%}
.ba-frame{position:relative;overflow:hidden;border-radius:26px;background:#0b0716;border:1px solid #c7a7ff33;
 box-shadow:0 40px 90px -40px #9759ffb3,inset 0 1px 0 #ffffff14;aspect-ratio:9/16}
.ba[data-orient="h"] .ba-frame{aspect-ratio:16/9}
.ba-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-after{clip-path:inset(0 0 0 var(--ba-x,100%))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--ba-x,100%);width:2px;margin-left:-1px;background:linear-gradient(#fff0,#fff 20%,#fff 80%,#fff0);
 box-shadow:0 0 18px #c7a7ff;pointer-events:none}
.ba-line::after{content:'⇆';position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;
 font:700 15px/1 Manrope,sans-serif;color:#1b0f33;background:#fff;box-shadow:0 6px 18px #0008}
.ba-tag{position:absolute;top:14px;padding:6px 11px;border-radius:99px;font:800 11px/1 Manrope,sans-serif;letter-spacing:.14em;transition:opacity .3s}
.ba-tag-b{left:14px;color:#fff;background:#0b0716cc;border:1px solid #ffffff33}
.ba-tag-a{right:14px;color:#fff;background:linear-gradient(120deg,#a466f7,#6b31c6)}
.ba-hint{margin:10px 0 0;text-align:center;font:600 12.5px/1.3 Manrope,sans-serif;color:#9d8fb6}

/* первый экран: до/после вместо VSL */
.ba-hero{width:min(360px,100%);margin:0 auto}
.ba-hero .ba-frame{border-radius:30px}

/* галерея пар */
.bag-head{max-width:760px;margin:0 auto 34px;text-align:center}
.bag-head .eyebrow{justify-content:center}
.bag-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:center;max-width:980px;margin:0 auto}
.bag-grid.is-h{grid-template-columns:minmax(0,1fr)}
.bag-tabs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.bag-tab{width:100%;display:flex;gap:14px;align-items:center;text-align:left;padding:14px 16px;border-radius:18px;cursor:pointer;
 background:linear-gradient(180deg,#160e2a,#100a1e);border:1px solid #ffffff12;color:#f5f0ff;transition:border-color .4s,box-shadow .4s,transform .4s}
.bag-tab b{flex:none;min-width:34px;height:26px;border-radius:99px;display:inline-grid;place-items:center;font:700 12px/1 Manrope,sans-serif;color:#9d8fb6;background:#0f0a1c;border:1px solid #ffffff1f}
.bag-tab strong{display:block;font:700 15px/1.25 Manrope,sans-serif}
.bag-tab span{display:block;font:500 13px/1.35 Manrope,sans-serif;color:#a99cc4}
.bag-tab[aria-selected="true"]{border-color:#c7a7ff66;transform:translateX(4px);box-shadow:0 20px 44px -24px #9759ffb3}
.bag-tab[aria-selected="true"] b{color:#fff;background:linear-gradient(120deg,#a466f7,#6b31c6);border-color:#d9c2ff66}
.bag-stage{width:100%;max-width:340px;justify-self:center}
.bag-stage.is-h{max-width:100%}

/* ---------- откуда видео (в «Как это работает») ---------- */
.src-row{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.src-row li{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:#ffffff08;border:1px solid #ffffff14;
 font:600 14px/1.3 Manrope,sans-serif;color:#efe8ff}
.src-row li i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:17px;background:#9759ff26}
.src-k{margin:0 0 12px!important;font:700 12px/1 Manrope,sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:#c7a7ff!important}

/* ---------- горизонталь: YouTube, вебинары, уроки ---------- */
.yt-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:center}
.yt-chips{list-style:none;margin:22px 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.yt-chips li{padding:9px 14px;border-radius:12px;font:700 14px/1.2 Manrope,sans-serif;color:#fff;background:#ffffff0d;border:1px solid #c7a7ff33}
.yt-frame{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:#0b0716;border:1px solid #c7a7ff33;box-shadow:0 40px 100px -40px #9759ffb3}
.yt-frame video{width:100%;height:100%;object-fit:cover;display:block}
.yt-frame .yt-badge{position:absolute;left:14px;top:14px;padding:6px 11px;border-radius:99px;font:800 11px/1 Manrope,sans-serif;letter-spacing:.12em;color:#fff;background:#ff0033}
.yt-sub{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.yt-sub .yt-frame{border-radius:16px}

/* ---------- кому подходит ---------- */
.aud-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.aud-card{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#160e2a,#100a1e);border:1px solid #ffffff12;
 transition:border-color .4s,transform .4s,box-shadow .4s}
.aud-card:hover{border-color:#c7a7ff52;transform:translateY(-4px);box-shadow:0 26px 60px -26px #9759ffa6}
.aud-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#1a0f33}
.aud-body{padding:18px 18px 22px}
.aud-tag{display:inline-block;margin:0 0 10px!important;font:700 11px/1 Manrope,sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:#c7a7ff!important}
.aud-card h3{font:700 18px/1.25 Manrope,sans-serif!important;letter-spacing:-.01em!important;margin:0 0 8px!important;color:#fff}
.aud-pain{font-size:14px!important;line-height:1.45!important;color:#a99cc4!important;margin:0 0 12px!important}
.aud-gain{font-size:14px!important;line-height:1.45!important;color:#efe8ff!important;margin:0!important;padding-top:12px;border-top:1px solid #ffffff14}
.aud-gain b{color:#8ef0b0}

/* ---------- программа ---------- */
.prog-head{max-width:780px;margin:0 auto 38px;text-align:center}
.prog-head .eyebrow{justify-content:center}
.prog-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.prog-mod{padding:20px 22px;border-radius:24px;background:linear-gradient(180deg,#140c26,#0e0919);border:1px solid #ffffff12}
.prog-mod.is-new{border-color:#c7a7ff59;background:radial-gradient(90% 140% at 0% 0%,#34186a,#150b2a 60%,#0e0919);box-shadow:0 30px 80px -40px #9759ffcc}
.prog-top{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:14px}
.prog-n{font:800 13px/1 Manrope,sans-serif;letter-spacing:.12em;color:#c7a7ff}
.prog-top h3{font:700 19px/1.2 Manrope,sans-serif!important;margin:0!important;color:#fff}
.prog-top p{margin:0!important;font-size:14px!important;color:#a99cc4!important;flex-basis:100%}
.prog-new{font:800 10.5px/1 Manrope,sans-serif;letter-spacing:.14em;padding:6px 9px;border-radius:99px;color:#fff;background:linear-gradient(120deg,#a466f7,#6b31c6)}
.prog-les{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.prog-les li{flex:none;width:220px;scroll-snap-align:start}
.prog-les img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid #ffffff17}
.prog-les span{display:block;margin-top:8px;font:600 13px/1.35 Manrope,sans-serif;color:#dcd2f2}

/* ---------- бонус: конвейер (переделка sec-agt) ---------- */
.agt-bonus .agt-grid{grid-template-columns:1fr}
.agt-bonus .agt-nodes{grid-template-columns:repeat(3,minmax(0,1fr))}
.agt-bonus .agt-node::after{display:none}

/* ---------- доказательства ---------- */
.prf-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:26px}
.prf-num{padding:22px 20px;border-radius:20px;background:linear-gradient(180deg,#160e2a,#100a1e);border:1px solid #ffffff12;text-align:center}
.prf-num strong{display:block;font:800 clamp(30px,3vw,42px)/1 Syne,sans-serif;letter-spacing:-.03em;color:#fff;margin-bottom:8px}
.prf-num span{font:600 13px/1.35 Manrope,sans-serif;color:#a99cc4}
.prf-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.prf-q{margin:0;padding:22px;border-radius:20px;background:#ffffff08;border:1px solid #ffffff14;display:flex;flex-direction:column;gap:14px}
.prf-q img{width:100%;height:auto;border-radius:12px;border:1px solid #ffffff14}
.prf-q blockquote{margin:0;font:500 15px/1.55 Manrope,sans-serif;color:#efe8ff}
.prf-q figcaption{font:700 13px/1.3 Manrope,sans-serif;color:#c7a7ff}

@media (max-width:900px){
 .bag-grid{grid-template-columns:1fr;gap:20px}
 .bag-tabs{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
 .bag-tabs li{flex:none;width:72%;scroll-snap-align:start}
 .bag-tab[aria-selected="true"]{transform:none}
 .bag-stage{order:-1}
 .src-row{grid-template-columns:1fr 1fr}
 .yt-grid{grid-template-columns:1fr;gap:26px}
 .aud-grid{grid-template-columns:1fr 1fr}
 .agt-bonus .agt-nodes{grid-template-columns:1fr 1fr}
 .prf-nums{grid-template-columns:1fr 1fr}
 .prf-quotes{grid-template-columns:1fr}
}
@media (max-width:560px){
 .src-row{grid-template-columns:1fr}
 .aud-grid{grid-template-columns:1fr}
 .agt-bonus .agt-nodes{grid-template-columns:1fr}
 .prog-les li{width:72%}
}

/* карта конвейера с практикума: картинка оранжевая, поворачиваем оттенок в фиолетовый */
.agt-pic{margin:0 0 26px;border-radius:24px;overflow:hidden;border:1px solid #c7a7ff33;box-shadow:0 40px 100px -50px #9759ffcc}
.agt-pic img{display:block;width:100%;height:auto;filter:hue-rotate(235deg) saturate(1.05)}
/* плашка видна только у той стороны, которая сейчас на экране */
.ba .ba-tag-a{opacity:0}
.ba.is-after .ba-tag-a{opacity:1}
.ba.is-after .ba-tag-b{opacity:0}

/* подвал: ссылки со старой страницы */
.lgl-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font:600 13px/1.4 Manrope,sans-serif}
.lgl-links a{color:#a99cc4;text-decoration:none}
.lgl-links a:hover{color:#c7a7ff}
