/* niche.css — страницы ниш лендинга (68B). Только токены ds.css; шапка, меню, футер, телефон, кнопки — из landing*.css.
   Десктоп: hero в две колонки, вопросы и диалог рядом. Телефон (≤767px): как макет docs/design-68/niche-*.jpg. */
.nx-eye{margin:0;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.nx-sub{margin:0;font-size:20px;line-height:30px;color:var(--text-muted);max-width:560px;text-wrap:balance}

/* hero */
.nx-hero{position:relative;overflow:hidden}
.nx-hero__drop{position:absolute;right:-240px;top:-120px;max-width:none;pointer-events:none}
.nx-hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding-block:72px 88px}
.nx-hero__txt{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.nx-hero h1{margin:0;font-size:60px;line-height:62px;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
.nx-hero h1 span{display:block;color:var(--text-muted)}
.nx-cta-btn{box-sizing:border-box;text-decoration:none}
.nx-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.nx-lnk{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:500;color:var(--link);text-decoration:none}
.nx-lnk:hover{color:var(--accent-hover)}
.nx-note{margin:0;font-size:14px;line-height:20px;color:var(--text-faint)}
.nx-stage{position:relative;display:flex;justify-content:center}
.nx-stage .phone{position:relative;left:auto;top:auto;transform:none;width:300px;margin:0 auto}
.nx-stage .phone__scr{height:480px}
.nx-stage .chat-live{justify-content:flex-start;padding-top:12px}
.nx-stage .phone__hd b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-stage .phone__hd>div{min-width:0}
.nx-stage .phone__hd .suv-pill{flex:none}

/* «О чём чаще всего спрашивают» */
.nx-ask{padding-block:96px}
.nx-ask__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.nx-ask__l{display:flex;flex-direction:column;gap:16px}
.nx-ask .nx-sub{font-size:18px;line-height:27px}
.nx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.nx-chips button{max-width:100%;min-height:44px;padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font:500 15px/20px var(--font-sans);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background 160ms var(--ease-out),color 160ms var(--ease-out),border-color 160ms var(--ease-out),transform 160ms var(--ease-out)}
@media (hover:hover){.nx-chips button:hover{border-color:var(--border-strong)}}
.nx-chips button:active{transform:scale(.97)}
.nx-chips button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.nx-chips button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--text-on-accent)}
.nx-dlgs{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--hdr) + 24px)}
.nx-dlg{overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--surface-sunken)}
.nx-dlg[hidden]{display:none}
.nx-dlg__hd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
.nx-dlg__hd>div{min-width:0}
.nx-dlg__hd b{display:block;font-size:15px;line-height:20px}
.nx-dlg__hd small{display:block;font-size:12px;line-height:16px;color:var(--text-muted)}
.nx-dlg__hd .suv-pill{margin-left:auto;flex:none}
.nx-dlg__body{display:flex;flex-direction:column;gap:8px;padding:14px}
.nx-dlg .suv-msg{max-width:88%}
.nx-qb{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;align-self:flex-end;max-width:92%}
.nx-qb span{padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);font:500 13px/16px var(--font-sans);color:var(--text)}
.nx-eg{margin:2px 2px 0;font-size:12px;line-height:17px;color:var(--text-faint)}
/* появление пузырей: только после первого тапа и только если движение не отключено */
@keyframes nx-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nx-anim .nx-dlg:not([hidden]) .suv-msg--in{animation:nx-pop 220ms var(--ease-out) both}
.nx-anim .nx-dlg:not([hidden]) .suv-msg--out{animation:nx-pop 260ms var(--ease-out) 140ms both}
.nx-anim .nx-dlg:not([hidden]) .nx-qb{animation:nx-pop 240ms var(--ease-out) 300ms both}
@media (prefers-reduced-motion:reduce){
  .nx-anim .nx-dlg .suv-msg,.nx-anim .nx-dlg .nx-qb{animation:none!important}
  .nx-chips button{transition:none}
}

/* что умеет бот */
.nx-can{padding-block:72px 24px}
.nx-h3{margin:0 0 24px;font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.03em}
.nx-can__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.nx-can__list li{display:flex;gap:12px;align-items:flex-start;padding:20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);font-size:16px;line-height:24px}
.nx-can__list svg{margin-top:3px;color:var(--success)}
.nx-can__list li:nth-child(4):last-child{grid-column:1/-1}

/* CTA ниши и другие сферы */
.nx-end{padding-block:48px 96px}
.nx-cta{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:40px;border-radius:var(--radius-xl);background:var(--text);color:var(--text-on-accent)}
.nx-cta h2{margin:0;font-size:36px;line-height:42px;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.nx-cta p{margin:0 0 8px;font-size:17px;line-height:26px;color:var(--on-dark-text)}
.nx-oth{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-top:20px;font-size:15px;color:var(--text-muted)}
.nx-oth a{display:inline-flex;align-items:center;min-height:44px;color:var(--link);text-decoration:none}
.nx-oth a:hover{color:var(--accent-hover)}
.ftr a[aria-current="page"]{color:var(--text);font-weight:600}

@media (max-width:960px){
  .nx-hero__in{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:48px 56px}
  .nx-ask__in{grid-template-columns:minmax(0,1fr);gap:24px}
  .nx-dlgs{position:static}
  .nx-can__list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .nx-hero__in{justify-items:center;padding-block:24px 28px;gap:24px}
  .nx-hero__drop{left:50%;right:auto;top:auto;bottom:40px;width:380px;height:auto;transform:translateX(-50%)}
  .nx-hero__txt{align-items:center;width:100%;gap:0;text-align:center}
  .nx-eye{margin:0 0 10px;font-size:13px;line-height:18px}
  .nx-hero h1{font-size:36px;line-height:38px;letter-spacing:-.04em}
  .nx-hero h1 span{display:inline}
  .nx-hero .nx-sub{margin:16px auto 0;max-width:330px;font-size:18px;line-height:25px}
  .nx-ctas{flex-direction:column;gap:6px;width:100%;margin-top:24px}
  .nx-cta-btn{max-width:100%;height:52px;padding:0 28px;border-radius:var(--radius-pill);font-size:17px;text-decoration:none;text-align:center}
  .nx-hero .nx-cta-btn{margin-bottom:8px}
  .nx-note{margin-top:20px;font-size:13px;line-height:18px}
  .nx-stage .phone{width:250px;padding:8px;border-radius:36px;box-shadow:0 30px 60px -20px rgba(28,25,23,.35)}
  .nx-stage .phone__scr{height:400px;border-radius:28px}
  .nx-stage .phone__hd{gap:8px;padding-inline:12px}
  .nx-stage .phone__hd b{font-size:14px}
  .nx-stage .phone__hd .suv-pill{height:24px;padding:0 8px;font-size:12px}
  .nx-ask{padding-block:56px 40px}
  .nx-ask .h-sec{font-size:28px;line-height:31px;letter-spacing:-.03em}
  .nx-ask .nx-sub{font-size:16px;line-height:23px}
  .nx-chips button{padding:10px 13px;font-size:14px;line-height:18px}
  .nx-can{padding-block:48px 8px}
  .nx-h3{font-size:24px;line-height:29px;margin-bottom:16px}
  .nx-can__list li{padding:16px;font-size:15px;line-height:22px}
  .nx-end{padding-block:32px 56px}
  .nx-cta{padding:22px 20px;border-radius:20px}
  .nx-cta h2{font-size:22px;line-height:25px;letter-spacing:-.025em}
  .nx-cta p{margin-bottom:8px;font-size:15px;line-height:22px}
  .nx-cta .nx-cta-btn{width:100%}
  .nx-oth{gap:0 16px;font-size:14px}
}