/* ============================================================
   css/fsi-pages.css — оформление внутренних страниц в стиле главной.
   Работает поверх собственных стилей страницы: разметку не меняем,
   подтягиваем панели, заголовки, кнопки, свечения и появление блоков.
   Подключать ПОСЛЕ собственного <style> страницы.
   ============================================================ */

/* ---------- боковое свечение секций, как на главной ---------- */
.site-content, main {
  overflow-x: clip; position: relative; }
.site-content::before, .site-content::after,
main::before, main::after {
  content: '';
  position: absolute; top: 8vh; width: min(46vw, 620px); aspect-ratio: 1;
  pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(142, 83, 225, .16), transparent 72%);
  filter: blur(10px);
}
.site-content::before, main::before { left: -22vw; }
.site-content::after, main::after { right: -22vw; top: 52vh; }
.content-inner { position: relative; z-index: 1; }

/* ---------- заголовки ---------- */
.site-content h1, main h1 {
  font-family: 'Wix Madefor Display', 'Geologica', system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.02em; line-height: 1.06;
}
.site-content h2, main h2,
.site-content h3, main h3 {
  font-family: 'Wix Madefor Display', 'Geologica', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.01em;
}
/* акцентная черта под заголовком раздела */
/* Черту ставим только там, где скрипт подтвердил: это заголовок раздела
   с текстом, а не декоративный блок. Выравнивание берётся от самого
   заголовка (класс проставляет js/fsi-ui.js) — псевдоэлемент-блок сам
   выравнивание текста не наследует, отсюда и был съезд влево. */
body:not([data-accent]) h2.fsi-bar::after {
  content: ''; display: block; width: 54px; height: 3px;
  margin: 14px auto 0 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #8E53E1, #B892EC, transparent);
}

/* ---------- панели и карточки ---------- */
.glass-panel,
.doc-card,
.contacts-grid > *,
.social-grid > *,
.portfolio-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(142, 83, 225, .045)) !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  transition: transform .5s cubic-bezier(.32, .72, 0, 1),
              border-color .4s ease,
              box-shadow .5s cubic-bezier(.32, .72, 0, 1),
              background .4s ease;
}
/* верхняя акцентная нить — проявляется при наведении */
.glass-panel::before,
.doc-card::before,
.social-grid > *::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 2px;
  border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #8E53E1, #B892EC, #8E53E1, transparent);
  transition: opacity .45s ease;
}
.glass-panel:hover,
.doc-card:hover,
.social-grid > *:hover,
.contacts-grid > *:hover,
.portfolio-card:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 146, 236, .34) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .44), 0 0 0 1px rgba(142, 83, 225, .16),
              0 0 42px rgba(142, 83, 225, .18);
}
.glass-panel:hover::before,
.doc-card:hover::before,
.social-grid > *:hover::before { opacity: 1; }

/* ---------- кнопки и ссылки-действия ---------- */
.contact-card-actions a,
.contact-card-actions button,
.doc-card-actions a,
.portfolio-cta a,
.tech-info a.btn,
.social-content a.btn,
.site-content a.btn,
.site-content button.btn {
  position: relative; overflow: hidden;
  border-radius: 12px;
  font-family: 'Onest', system-ui, sans-serif; font-weight: 600;
  transition: background .34s ease, color .34s ease, transform .3s cubic-bezier(.32, .72, 0, 1),
              box-shadow .34s ease, border-color .34s ease;
}
.contact-card-actions a:hover,
.doc-card-actions a:hover,
.portfolio-cta a:hover,
.social-content a.btn:hover,
.site-content a.btn:hover,
.site-content button.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(142, 83, 225, .3);
}
.contact-card-actions a:active,
.doc-card-actions a:active,
.site-content a.btn:active { transform: translateY(0) scale(.985); }

/* вспышка акцентом на всю кнопку — как в навигации на главной */
.contact-card-actions a::after,
.doc-card-actions a::after,
.site-content a.btn::after {
  content: ''; position: absolute; inset: 0; width: 300%; left: -100%;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(184, 146, 236, .5), transparent);
}
.contact-card-actions a:active::after,
.doc-card-actions a:active::after,
.site-content a.btn:active::after {
  opacity: 1; animation: fsiPageFlash .5s ease;
}
@keyframes fsiPageFlash {
  from { transform: translateX(-30%); }
  to   { transform: translateX(30%); opacity: 0; }
}

/* ---------- иконки соцсетей ----------
   Без рамки и подложки: раньше картинка росла внутри своей рамки и та её
   обрезала. Теперь увеличивается сама картинка, ничем не ограниченная. */
.social-icon {
  display: grid; place-items: center;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
.social-icon svg,
.social-icon img { transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
.social-grid > *:hover .social-icon svg,
.social-grid > *:hover .social-icon img { transform: scale(1.18); }

/* ---------- появление блоков при прокрутке ---------- */
.fsi-pv {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.32, .72, 0, 1),
              transform .7s cubic-bezier(.32, .72, 0, 1);
  will-change: opacity, transform;
}
.fsi-pv.in { opacity: 1; transform: none; }
.fsi-pv.done { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .fsi-pv { opacity: 1; transform: none; transition: none; }
  .glass-panel, .doc-card, .social-grid > * { transition: none; }
}

/* ---------- мобильные ---------- */
@media (max-width: 760px) {
  .site-content::before,
  .site-content::after { width: 88vw; left: -30vw; right: auto; filter: blur(6px); }
  .site-content::after { top: 60vh; left: auto; right: -30vw; }
  .glass-panel, .doc-card, .social-grid > * { border-radius: 15px; }
  .site-content h2::after { width: 42px; margin-top: 11px; }
}

/* ---------- портфолио: превью оживает ---------- */
.portfolio-image { overflow: hidden; border-radius: 14px; }
.portfolio-image img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .75s cubic-bezier(.32, .72, 0, 1), filter .5s ease;
}
.portfolio-card:hover .portfolio-image img { transform: scale(1.06); filter: saturate(1.08); }

.tech-image-container { overflow: hidden; }
.tech-image-container img {
  display: block; width: 100%; height: auto;
  transition: transform .8s cubic-bezier(.32, .72, 0, 1);
}
.tech-section:hover .tech-image-container img { transform: scale(1.04); }

@media (max-width: 760px) {
  .portfolio-card { border-radius: 15px; }
}

/* ============================================================
   Магазин и iCPU. Фон карточек не трогаем — у них своя вёрстка
   с медиа-блоками; подтягиваем поведение при наведении,
   типографику и появление, чтобы страницы читались как одна семья.
   ============================================================ */

/* ---------- карточки товаров и блоки iCPU ---------- */
.product-card,
.stat-card,
.hero-card,
.svc-row,
.sidebar-block {
  transition: transform .5s cubic-bezier(.32, .72, 0, 1),
              border-color .4s ease,
              box-shadow .5s cubic-bezier(.32, .72, 0, 1);
}
.product-card:hover,
.stat-card:hover,
.svc-row:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 146, 236, .34);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .42), 0 0 38px rgba(142, 83, 225, .16);
}

/* превью товара оживает, рамка его не режет */
.card-media { overflow: hidden; }
.card-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .75s cubic-bezier(.32, .72, 0, 1), filter .5s ease;
}
.product-card:hover .card-media img { transform: scale(1.06); filter: saturate(1.08); }

/* иконка карточки чуть подрастает вместе с ней */
.card-icon img,
.card-icon svg,
.svc-ico img,
.svc-ico svg { transition: transform .5s cubic-bezier(.32, .72, 0, 1); }
.product-card:hover .card-icon img,
.product-card:hover .card-icon svg,
.svc-row:hover .svc-ico img,
.svc-row:hover .svc-ico svg { transform: scale(1.1); }

/* ---------- типографика заголовков вне main/.site-content ---------- */
.hero-wrap h1,
.stats h2, .psec-inner h2, .service-rows h2,
.shop-main h1, .shop-main h2 {
  font-family: 'Wix Madefor Display', 'Geologica', system-ui, sans-serif;
  letter-spacing: -.015em;
}

/* ---------- кнопки ---------- */
.hero-btns a,
.banner-btn,
.card-main a.btn {
  position: relative; overflow: hidden;
  transition: background .34s ease, color .34s ease, box-shadow .34s ease,
              transform .3s cubic-bezier(.32, .72, 0, 1), border-color .34s ease;
}
.hero-btns a:hover,
.banner-btn:hover,
.card-main a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(142, 83, 225, .3);
}
.hero-btns a:active,
.banner-btn:active { transform: translateY(0) scale(.985); }

/* цифры статистики — моно, как технические данные на главной */
.stat-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .product-card, .stat-card, .svc-row, .card-media img { transition: none !important; }
}

/* ============================================================
   Личный кабинет. Логику авторизации не касаемся — только вид:
   панели, вкладки, поля и кнопки в стиле главной.
   ============================================================ */

/* ---------- панели кабинета ---------- */
.acc-card,
.acc-shell,
.lic-grid > * {
  transition: transform .45s cubic-bezier(.32, .72, 0, 1),
              border-color .4s ease,
              box-shadow .5s cubic-bezier(.32, .72, 0, 1);
}
.acc-card:hover,
.lic-grid > *:hover {
  border-color: rgba(184, 146, 236, .3);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .4), 0 0 32px rgba(142, 83, 225, .13);
}

/* ---------- вкладки: подчёркивание переезжает, а не мигает ---------- */
.acc-tab-btn {
  position: relative;
  transition: color .34s ease, background .34s ease;
}
body .acc-tab-btn::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, #8E53E1, #B892EC) !important;
  transform: scaleX(0) !important; transform-origin: center;
  transition: transform .42s cubic-bezier(.32, .72, 0, 1);
}
body .acc-tab-btn:hover::after { transform: scaleX(.55) !important; }
body .acc-tab-btn.active::after,
body .acc-tab-btn[aria-selected="true"]::after { transform: scaleX(1) !important; }

/* ---------- поля ввода ---------- */
.acc-field input,
.acc-field select,
.acc-field textarea,
.acc-row input {
  transition: border-color .32s ease, box-shadow .32s ease, background .32s ease;
}
.acc-field input:focus,
.acc-field select:focus,
.acc-field textarea:focus,
.acc-row input:focus {
  outline: none;
  border-color: rgba(184, 146, 236, .5);
  box-shadow: 0 0 0 3px rgba(142, 83, 225, .16);
}

/* ---------- кнопки кабинета ---------- */
.acc-btn,
.po-btn {
  position: relative; overflow: hidden;
  transition: background .34s ease, color .34s ease, box-shadow .34s ease,
              transform .3s cubic-bezier(.32, .72, 0, 1), border-color .34s ease;
}
.acc-btn:hover,
.po-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(142, 83, 225, .28); }
.acc-btn:active,
.po-btn:active { transform: translateY(0) scale(.985); }

/* ---------- аватары: выбор заметен сразу ---------- */
.av-grid > * {
  transition: transform .4s cubic-bezier(.32, .72, 0, 1),
              box-shadow .4s ease, border-color .35s ease;
}
.av-grid > *:hover { transform: scale(1.07); }
.av-grid > *[aria-checked="true"],
.av-grid > *.active {
  border-color: rgba(184, 146, 236, .65);
  box-shadow: 0 0 0 3px rgba(142, 83, 225, .22);
}

/* ---------- технические значения — моно ---------- */
body .au-id, body .support-id, body .sid-l, body .lr-val, body .acc-msg code {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* ---------- история и ссылки ---------- */
.hist-list > *,
.link-row {
  transition: background .32s ease, border-color .32s ease;
}
.hist-list > *:hover,
.link-row:hover { background: rgba(255, 255, 255, .045); }

@media (prefers-reduced-motion: reduce) {
  .acc-card, .acc-tab-btn::after, .av-grid > *, .acc-btn { transition: none !important; }
}

/* ============================================================
   Психологический тест. Логику вопросов и подсчёта не касаемся —
   только вид: карточки, варианты ответа, шкалы результатов.
   ============================================================ */
.glass-card,
.dcard-head,
.dim-ctx,
.disclaimer-box {
  transition: border-color .4s ease, box-shadow .5s cubic-bezier(.32, .72, 0, 1),
              transform .45s cubic-bezier(.32, .72, 0, 1);
}
.glass-card:hover {
  border-color: rgba(184, 146, 236, .28);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .4), 0 0 32px rgba(142, 83, 225, .12);
}

/* варианты ответа: выбор виден сразу, наведение не дёргает раскладку */
.ans-btn {
  position: relative; overflow: hidden;
  transition: background .3s ease, border-color .3s ease, color .3s ease,
              transform .28s cubic-bezier(.32, .72, 0, 1), box-shadow .32s ease;
}
.ans-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 146, 236, .4);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.ans-btn:active { transform: translateY(0) scale(.98); }
.ans-btn.selected,
.ans-btn[aria-pressed="true"] {
  border-color: rgba(184, 146, 236, .6);
  box-shadow: 0 0 0 3px rgba(142, 83, 225, .2);
}

/* шкалы результатов наливаются, а не появляются рывком */
.bar-fill, .dcard-bar-fill {
  transition: width 1.05s cubic-bezier(.32, .72, 0, 1);
}
.bar-track, .dcard-bar-track { overflow: hidden; border-radius: 999px; }

/* проценты и числовые метки — моно, чтобы не «плясали» по ширине */
.bar-item-pct, .dcard-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* предупреждение о том, что тест не диагноз — должно читаться, а не тонуть */
.disclaimer-box {
  border-left: 2px solid rgba(184, 146, 236, .4);
}

.detail-section-title,
.dcard-name {
  font-family: 'Wix Madefor Display', 'Geologica', system-ui, sans-serif;
  letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
  .ans-btn, .bar-fill, .dcard-bar-fill, .glass-card { transition: none !important; }
}

/* ============================================================
   ЕДИНАЯ АНИМАЦИЯ НАЖАТИЯ — как у «Ознакомиться» на главной.
   Свечение пробегает по кнопке слева направо. Сила зависит от роли:
   у главных кнопок ярче, у второстепенных приглушённее, чтобы
   страница не мигала на каждый клик.
   Навигацию не трогаем — у неё своя механика.
   ============================================================ */
.fsi-btn, .btn, .er-acts a, .rs-btn,
a[class*="btn"], button[class*="btn"], a[class*="cta"], .buy-btn, .pa-btn,
.contact-card-actions a, .doc-card-actions a,
.portfolio-cta a, .hero-btns a, .banner-btn,
.acc-btn, .po-btn, .card-main a, .ans-btn,
button.primary, a.primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* сам пробег */
.fsi-btn::after, .btn::after, .er-acts a::after, .rs-btn::after,
a[class*="btn"]::after, button[class*="btn"]::after, a[class*="cta"]::after,
.buy-btn::after, .pa-btn::after,
.contact-card-actions a::after, .doc-card-actions a::after,
.portfolio-cta a::after, .hero-btns a::after, .banner-btn::after,
.acc-btn::after, .po-btn::after, .card-main a::after, .ans-btn::after,
button.primary::after, a.primary::after {
  content: '';
  position: absolute; top: -60%; bottom: -60%;
  left: -70%; width: 55%;
  pointer-events: none; z-index: 1;
  transform: skewX(-16deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(216,188,255,.55) 45%,
    rgba(255,255,255,.75) 55%,
    rgba(216,188,255,.35) 70%,
    rgba(255,255,255,0) 100%);
  opacity: 0;
}
.fsi-btn:active::after, .btn:active::after, .er-acts a:active::after,
a[class*="btn"]:active::after, button[class*="btn"]:active::after,
a[class*="cta"]:active::after, .buy-btn:active::after, .pa-btn:active::after,
.rs-btn:active::after, .contact-card-actions a:active::after,
.doc-card-actions a:active::after, .portfolio-cta a:active::after,
.hero-btns a:active::after, .banner-btn:active::after,
.acc-btn:active::after, .po-btn:active::after, .card-main a:active::after,
.ans-btn:active::after, button.primary:active::after, a.primary:active::after {
  animation: fsiPressSweep .62s cubic-bezier(.3,.7,.25,1);
}
@keyframes fsiPressSweep {
  0%   { left: -70%; opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { left: 118%; opacity: 0; }
}

/* Второстепенные кнопки — то же движение, но вполсилы:
   на них жмут часто, яркая вспышка каждый раз утомляет. */
.doc-card-actions a::after,
.contact-card-actions a::after,
.ans-btn::after,
.po-btn::after,
.er-acts a:not(.main)::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(216,188,255,.28) 50%,
    rgba(255,255,255,0) 100%);
}

/* Вкладки страниц товаров: у них своя механика — подчёркивание
   переезжает, поэтому пробег там был бы лишним. */
.tab-btn::after, .prod-tab::after, .po-switch .po-btn::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .fsi-btn::after, .btn::after, .er-acts a::after, .rs-btn::after,
  .acc-btn::after, .ans-btn::after { animation: none !important; }
}

/* ============================================================
   МАГАЗИН: компактный режим и реклама в потоке товаров.
   ============================================================ */

/* Компактный = сетка по структуре, список по плотности:
   маленькое превью слева, текст справа, две колонки на широком экране. */
.shop-grid.view-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 12px;
}
.shop-grid.view-compact .product-card {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  min-height: 0;
}
.shop-grid.view-compact .card-media {
  width: 92px; height: 64px; border-radius: 10px; margin: 0;
}
.shop-grid.view-compact .card-media img { width: 100%; height: 100%; object-fit: cover; }
.shop-grid.view-compact .card-content { padding: 0; }
.shop-grid.view-compact .card-icon { display: none; }
.shop-grid.view-compact .card-desc,
.shop-grid.view-compact .card-tags { display: none; }
.shop-grid.view-compact .card-title { font-size: .98rem; margin: 0 0 3px; }
.shop-grid.view-compact .card-main { display: contents; }
@media (max-width: 720px) {
  .shop-grid.view-compact { grid-template-columns: 1fr; }
  .shop-grid.view-compact .product-card { grid-template-columns: 72px 1fr; }
  .shop-grid.view-compact .card-media { width: 72px; height: 54px; }
}

/* ---------- рекламный блок в потоке товаров ----------
   Занимает место карточки и подстраивается под режим, поэтому не
   выбивается из сетки и не выглядит вставкой поверх каталога. */
.shop-grid .fsi-adcard {
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  grid-column: 1 / -1;
}
.shop-grid.view-grid .fsi-adcard .fsi-adcard-in { grid-template-columns: 148px 1fr auto; }
.shop-grid.view-compact .fsi-adcard .fsi-adcard-in {
  grid-template-columns: 92px 1fr auto; gap: 14px; padding: 10px 14px 10px 10px;
}
.shop-grid.view-compact .fsi-adcard .fsi-adcard-pic { width: 92px; height: 64px; }
.shop-grid.view-compact .fsi-adcard .fsi-adcard-d { display: none; }

/* Промо вне каталога: на широком экране растягивался во всю ширину
   и выглядел тяжелее самого контента — ограничиваем. */
/* Одна ширина рекламного места на всех страницах: сеть отдаёт баннер
   на 100% ширины контейнера, поэтому разнобой означал бы разные креативы
   под каждую страницу. */
.fsi-adcard { max-width: 970px !important; }
.fsi-adcard .fsi-adcard-in { grid-template-columns: 116px 1fr auto; gap: 16px; padding: 14px 16px; }
.fsi-adcard .fsi-adcard-pic { width: 116px; height: 74px; }
.fsi-adcard .fsi-adcard-t { font-size: 1rem; }
.fsi-adcard .fsi-adcard-d { font-size: .86rem; }
@media (max-width: 760px) {
  .fsi-adcard .fsi-adcard-in { grid-template-columns: 1fr; }
  .fsi-adcard .fsi-adcard-pic { width: 100%; height: 128px; }
}

/* выравнивание черты повторяет выравнивание заголовка */
h2.fsi-bar.bar-center::after { margin-left: auto !important; margin-right: auto !important; }
h2.fsi-bar.bar-right::after  { margin-left: auto !important; margin-right: 0 !important; }

/* Высота места — строго из форматов сети (90/120/180/200/250). */
.fsi-adcard[data-fmt] .fsi-adcard-in { align-content: center; }
.shop-grid .fsi-adcard[data-fmt] .fsi-adcard-in { min-height: 120px; }
@media (max-width: 760px) {
  .fsi-adcard[data-fmt="120"] .fsi-adcard-in,
  .shop-grid .fsi-adcard[data-fmt] .fsi-adcard-in { min-height: 250px; }
}

/* Служебные панели (фильтры магазина) не участвуют в появлении блоков:
   им нужен собственный сдвиг для выезда сбоку. */
.shop-sidebar.fsi-pv, .shop-backdrop.fsi-pv {
  opacity: 1 !important;
  transform: none;
}