/* Страница /flux: макеты экранов Flux (CSS вместо скриншотов), вкладки профилей и большая
   кнопка демо. Общие блоки (hero, тарифы, возможности, FAQ) - классы из styles.css. */
/* ── макеты экранов ── */
.fx-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.fx-shot { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--card-shadow); overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
.fx-shot:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); border-color: rgba(0,212,180,.22); }
.fx-shot-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--input-bg); }
.fx-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); display: inline-block; }
.fx-shot-bar i:first-child { background: rgba(255,95,87,.8); }
.fx-shot-bar i:nth-child(2) { background: rgba(255,189,46,.8); }
.fx-shot-bar i:nth-child(3) { background: rgba(40,200,64,.8); }
.fx-shot-url { margin-left: 8px; font-size: 11px; color: var(--text-dim); font-family: monospace; }
.fx-shot-body { padding: 16px; min-height: 250px; font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.fx-shot-cap { padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.fx-shot-cap b { display: block; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.fx-shot-cap span { font-size: 12.5px; color: var(--text-muted); }
.fx-step { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,var(--teal),var(--blue)); color: #fff; font-weight: 800; font-size: 13px; margin-right: 8px; }
.fx-time { font-size: 11px; color: var(--teal); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
/* элементы интерфейса внутри макета */
.fx-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.fx-chip { padding: 3px 10px; border-radius: 100px; background: var(--input-bg); border: 1px solid var(--border); font-size: 10.5px; }
.fx-chip.on { background: var(--teal); color: #041a16; border-color: transparent; font-weight: 700; }
.fx-cards { display: grid; gap: 8px; }
.fx-card { padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--input-bg); }
.fx-card b { display: block; color: var(--text); font-size: 11.5px; margin-bottom: 2px; }
.fx-card .soon { float: right; font-size: 9px; padding: 1px 6px; border-radius: 100px; background: var(--social-bg); color: var(--text-dim); }
.fx-input { margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; color: var(--text-dim); }
.fx-input .send { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); display: inline-block; }
.fx-doc { display: grid; grid-template-columns: 62px 1fr; gap: 12px; }
.fx-page { height: 84px; border-radius: 4px; background: #fff; border: 1px solid var(--border); position: relative; overflow: hidden; }
.fx-page::before { content: ''; position: absolute; left: 8px; right: 8px; top: 10px; height: 4px; background: #c9d2e0; box-shadow: 0 9px 0 #dfe5ee, 0 18px 0 #dfe5ee, 0 27px 0 #dfe5ee, 0 36px 0 #c9d2e0, 0 45px 0 #dfe5ee, 0 54px 0 #dfe5ee; }
.fx-page .hl { position: absolute; left: 14px; width: 24px; height: 6px; border-radius: 2px; }
.fx-page .hl.red { top: 36px; background: rgba(220,40,40,.25); border: 1px solid rgba(200,0,0,.8); }
.fx-page .hl.green { top: 54px; left: 30px; background: rgba(46,125,50,.25); border: 1px solid rgba(46,125,50,.9); }
.fx-rows { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; }
.fx-rows i { font-style: normal; color: var(--text-dim); }
.fx-rows b { color: var(--text); font-weight: 500; }
.fx-table { margin-top: 10px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.fx-table div { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.fx-table div:first-child { background: var(--input-bg); color: var(--text-dim); text-transform: uppercase; font-size: 9px; letter-spacing: .5px; }
.fx-table div:last-child { border-bottom: none; }
.fx-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fx-actions .l { color: var(--text-dim); }
.fx-btn { padding: 3px 9px; border-radius: 100px; border: 1px solid var(--border); font-size: 10px; }
.fx-btn.dark { background: var(--text); color: var(--bg); border-color: transparent; }
.fx-link { margin-left: auto; color: var(--teal); font-weight: 600; }
.fx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx-summary { border: 1px solid rgba(0,212,180,.25); background: rgba(0,212,180,.05); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.fx-summary b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--teal); margin-bottom: 4px; }
.fx-bubble { padding: 7px 10px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border); margin-bottom: 6px; }
.fx-bubble.user { background: rgba(26,108,246,.12); border-color: rgba(26,108,246,.25); }
.fx-modes { display: flex; gap: 4px; margin-top: 6px; }
.fx-modes span { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); font-size: 10px; }
.fx-modes span.on { background: var(--bg3); color: var(--text); font-weight: 600; }

/* ── профили ── */
.fx-roles .tabs { justify-content: center; }
.fx-role-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 22px; }
.fx-role-head h3 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.fx-role-time { padding: 6px 12px; border-radius: 100px; background: rgba(0,212,180,.08); border: 1px solid rgba(0,212,180,.22); color: var(--teal); font-size: 12px; font-weight: 600; }
.fx-role-next { margin-top: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.fx-role-next .fx-btn { font-size: 12px; padding: 5px 12px; }
.fx-role-next .fx-btn.soon { opacity: .6; }

/* ── демо ── */
.fx-demo { padding: 50px 0; }
.fx-demo-card { position: relative; overflow: hidden; text-align: center; padding: 64px 32px; border-radius: 24px; border: 1px solid rgba(0,212,180,.25); background: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(0,212,180,.14), transparent 60%), var(--card); box-shadow: var(--card-shadow); }
.fx-demo-card h2 { font-size: 34px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 12px; }
.fx-demo-card p { color: var(--text-muted); max-width: 640px; margin: 0 auto 28px; line-height: 1.65; }
.fx-demo-btn { display: inline-flex; align-items: center; gap: 12px; padding: 20px 44px; border-radius: 16px; font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(135deg,var(--teal),var(--blue)); text-decoration: none; box-shadow: 0 18px 44px -14px rgba(0,180,150,.55); transition: transform .2s, box-shadow .2s; }
.fx-demo-btn:hover { transform: translateY(-3px); box-shadow: 0 26px 56px -14px rgba(0,180,150,.65); }
.fx-demo-btn small { display: block; font-size: 12px; font-weight: 500; opacity: .85; }
.fx-demo-btn--tg { margin-left: 14px; background: linear-gradient(135deg, #29B6F6, #1a6cf6); box-shadow: 0 18px 44px -14px rgba(41,150,246,.55); }
.fx-demo-btn--tg:hover { box-shadow: 0 26px 56px -14px rgba(41,150,246,.65); }
.fx-video { max-width: 960px; margin: 8px auto 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow), 0 0 60px -20px rgba(0,212,180,.18); background: var(--card); }
.fx-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.fx-video-cap { padding: 10px 16px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); }
.fx-demo-note { margin-top: 18px; font-size: 12.5px; color: var(--text-dim); }
.fx-demo-note b { color: var(--text-muted); font-weight: 600; }

@media (max-width: 1100px) {
  .fx-shots { grid-template-columns: 1fr; }
  .fx-shot-body { min-height: 0; }
}
@media (max-width: 900px) {
  .fx-split { grid-template-columns: 1fr; }
  .fx-demo-card { padding: 44px 20px; }
  .fx-demo-card h2 { font-size: 26px; }
  .fx-demo-btn { padding: 16px 28px; font-size: 17px; width: 100%; justify-content: center; }
  .fx-demo-btn--tg { margin: 12px 0 0; }
}