/* Phoenix Agents — site-extra.css (аддитивные стили, только новые правила) */
/* Палитра сайта: --bg #0b1721, --panel #122637, --line #1c3a50, --accent #37d0c8, --accent2 #0e7d9c, --gold #ffb454 */

/* CTA-плашка */
.xbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;
  background:linear-gradient(135deg,rgba(55,208,200,.14),rgba(14,125,156,.08));
  border:1px solid rgba(55,208,200,.3);border-radius:18px;padding:22px 26px;margin-top:26px}
.xbar>b{display:block;font-size:19px;color:var(--text);margin-bottom:4px}
.xbar span{color:var(--muted);font-size:15px}
.xbar .xbtns{display:flex;gap:12px;flex-wrap:wrap}

/* Схема «боль → агент → результат» */
.xfunnel{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.xfnode{flex:1 1 210px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.xfnode .xh{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:9px}
.xfnode b{display:block;color:var(--text);font-size:17px;margin-bottom:7px}
.xfnode p{color:var(--muted);font-size:14.5px}
.xfnode.pain{border-color:rgba(255,180,84,.35)}
.xfnode.pain .xh{color:var(--gold)}
.xfnode.agent{border-color:rgba(55,208,200,.45);background:linear-gradient(135deg,rgba(55,208,200,.1),rgba(14,125,156,.05))}
.xfnode.agent .xh{color:var(--accent)}
.xfarrow{align-self:center;color:var(--accent);font-size:22px;font-weight:900;flex:0 0 auto}
@media (max-width:720px){.xfarrow{transform:rotate(90deg);margin:0 auto}}

/* Схема «как начать» */
.xsteps{display:flex;flex-wrap:wrap;gap:26px}
.xstep{flex:1 1 200px;min-width:0;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.xstep .xn{width:34px;height:34px;border-radius:10px;background:rgba(55,208,200,.12);border:1px solid rgba(55,208,200,.3);
  color:var(--accent);font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.xstep b{display:block;color:var(--text);font-size:16px;margin-bottom:6px}
.xstep p{color:var(--muted);font-size:14.5px}
.xstep::after{content:"\2192";position:absolute;right:-19px;top:50%;transform:translateY(-50%);color:var(--accent);font-weight:900;font-size:17px}
.xstep:last-child::after{content:none}
@media (max-width:760px){.xsteps{gap:16px}.xstep::after{content:none}}

/* Сравнение «человек против агента» */
.xvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px}
.xvs .xcol{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}
.xvs .xcol.win{border-color:rgba(55,208,200,.5);background:linear-gradient(135deg,rgba(55,208,200,.1),rgba(14,125,156,.05))}
.xvs .xcol h4{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.xvs .xcol.win h4{color:var(--accent)}
.xrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:9px 0;border-top:1px solid rgba(28,58,80,.6);font-size:14.5px}
.xrow:first-of-type{border-top:none}
.xrow span{color:var(--muted);min-width:0}
.xrow b{color:var(--text);text-align:right}

/* Мини-иконки «что входит» */
.xinc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:16px}
.xinc .xi{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.xinc .xic{width:44px;height:44px;border-radius:12px;background:rgba(55,208,200,.12);border:1px solid rgba(55,208,200,.3);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--accent)}
.xinc b{display:block;color:var(--text);font-size:16px;margin-bottom:6px}
.xinc p{color:var(--muted);font-size:14.5px}

/* Лестница уровней */
.xladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px}
.xl{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.xl .xp{font-size:26px;font-weight:900;color:var(--accent);line-height:1}
.xl b{display:block;color:var(--text);font-size:15px;margin:8px 0 4px}
.xl p{color:var(--muted);font-size:14px}
.xl .xlbar{height:8px;border-radius:999px;background:rgba(55,208,200,.15);margin-top:12px;overflow:hidden}
.xl .xlbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}


/* ==== этап 3: крупная кнопка-плашка, схема «как начать», полосы сравнения, иконки ==== */
.btn-lg{padding:17px 34px;font-size:17px;border-radius:14px;box-shadow:0 12px 30px rgba(55,208,200,.26)}
.btn-lg:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(55,208,200,.34)}

.xflow{position:relative}
.xflow-line{position:absolute;left:0;right:0;top:14px;width:100%;height:60px;display:none;z-index:0}
.xflow-in{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:20px}
.xhn{flex:1 1 220px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.xhbadge{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;background:linear-gradient(135deg,rgba(55,208,200,.2),rgba(14,125,156,.08));border:1px solid rgba(55,208,200,.45);color:var(--accent);font-weight:900;font-size:19px;display:flex;align-items:center;justify-content:center}
.xhn b{display:block;color:var(--text);font-size:16.5px;margin-bottom:6px}
.xhn p{color:var(--muted);font-size:14.5px}
@media (min-width:761px){.xflow-line{display:block}}

.xbars{display:grid;gap:16px;margin-bottom:26px}
.xbrow{display:grid;gap:7px}
.xbrow .xbl{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14.5px;color:var(--muted)}
.xbrow .xbl b{color:var(--text)}
.xbrow .xbt{height:14px;border-radius:999px;background:rgba(28,58,80,.55);overflow:hidden}
.xbrow .xbt i{display:block;height:100%;border-radius:999px}
.xbrow.human .xbt i{background:linear-gradient(90deg,rgba(255,180,84,.5),rgba(255,180,84,.9))}
.xbrow.agent .xbt i{background:linear-gradient(90deg,var(--accent2),var(--accent))}

.icon{color:var(--accent)}
.icon svg{display:block;width:24px;height:24px}

/* сравнение по стоимости на существующих .xbar */
.xbar .xbt{height:14px;border-radius:999px;background:rgba(28,58,80,.55);overflow:hidden;flex:1 1 150px;align-self:center}
.xbar .xbt i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.xbar.human .xbt i{background:linear-gradient(90deg,rgba(255,180,84,.5),rgba(255,180,84,.9))}