/* =====================================================================
   ОБЩИЕ СТИЛИ СТРАНИЦ УСЛУГ (редизайн)
   Подключается через head-common.php. Все правила привязаны к .eo-page —
   срабатывают только на страницах, где у <main> есть класс eo-page.
   Чтобы применить на новой странице услуги: добавь class="eo-page" на <main>
   и используй классы .eo-* (eo-tabs, eo-stepper, eo-risks, eo-cards, eo-stats,
   eo-features, eo-docs, eo-roles-tabs, eo-checklist, faq и т.д.).
   ===================================================================== */

/* ===== Табы ===== */
.eo-tabs .nav{ border:none; gap:8px; flex-wrap:wrap; margin:0 0 22px; }
.eo-tabs .nav-link{
  border:1px solid #E4E4E4; border-radius:999px; color:#4744AB;
  background:#fff; padding:9px 18px; font-weight:600; font-size:15px; line-height:1.2;
  transition:all .18s ease;
}
.eo-tabs .nav-link:hover{ border-color:#4744AB; }
.eo-tabs .nav-link.active{ background:#4744AB; border-color:#4744AB; color:#fff; }
.eo-tabs .tab-pane{ animation:eoFade .25s ease; }
.eo-tabs .tab-pane > h3:first-child,
.eo-tabs .tab-pane > h4:first-child{ margin-top:0; }
@keyframes eoFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
@media (max-width:576px){
  .eo-tabs .nav-link{ font-size:14px; padding:8px 14px; }
}

/* Stepper (7 шагов) */
.eo-stepper{ list-style:none; counter-reset:eo; padding:0; margin:0; display:grid; gap:14px; }
.eo-stepper li{ counter-increment:eo; position:relative; padding:16px 18px 16px 64px;
  background:#F8F8F8; border:1px solid #ECE8F3; border-radius:14px; }
.eo-stepper li::before{ content:counter(eo); position:absolute; left:14px; top:14px;
  width:36px; height:36px; border-radius:50%; background:#4744AB; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }
.eo-stepper li b{ color:#2E2A77; }
/* Вложенные подсписки внутри stepper — тире, без карточек и нумерации */
.eo-page .eo-stepper ul{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.eo-page .eo-stepper ul li{ counter-increment:none; position:relative; background:none; border:none;
  border-radius:0; padding:0 0 0 18px; font-size:15px; line-height:1.5; }
.eo-page .eo-stepper ul li::before{ content:"\2013"; position:absolute; left:2px; top:0; transform:none;
  width:auto; height:auto; background:none; color:#4744AB; font-weight:700; display:block; border-radius:0; }
/* Хвостовая приписка после подсписка в шаге — как подпись, не крупнее списка */
.eo-page .eo-stepper .eo-step-note{ display:block; margin-top:8px; font-size:14px; line-height:1.5; color:#6b6585; }

/* Risk cards */
.eo-risks{ list-style:none; padding:0; margin:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.eo-risks li{ position:relative; background:#fff; border:1px solid #ECE8F3;
  border-radius:12px; padding:16px 18px 16px 24px; box-shadow:0 2px 10px rgba(40,30,80,.04); }
.eo-risks li::before{ content:""; position:absolute; left:0; top:12px; bottom:12px;
  width:6px; background:#4744AB; }
.eo-risks li b{ color:#2E2A77; }

/* Format cards */
.eo-formats{ list-style:none; padding:0; margin:0; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.eo-formats li{ background:#F4F2F9; color:#3a3550; border:1px solid #E7E2F0;
  border-radius:16px; padding:22px 20px; }
.eo-formats li b{ display:block; font-size:17px; margin-bottom:8px; color:#2E2A77; }
.eo-formats li p{ margin:0; font-size:14px; line-height:1.5; color:#6b6585; }
/* Кликабельные карточки-форматы */
/* Заголовок карточки — не жирный, чтобы «Подробнее» не сливалась (по правке заказчика) */
.eo-page .article .eo-formats--links li b{ font-weight:300; }
.eo-page .article .eo-formats--links li{ padding:0; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.eo-page .article .eo-formats--links li:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(40,30,80,.1); border-color:#C9C2E6; }
.eo-page .article .eo-formats--links a,
.eo-page .article .eo-formats--links a:hover{ display:flex; flex-direction:column; height:100%;
  padding:22px 20px 20px; border-bottom:none; color:inherit; }
.eo-formats--links .eo-format-go{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:#4744AB; }
.eo-formats--links .eo-format-go svg{ transition:transform .25s ease; }
.eo-page .article .eo-formats--links li:hover .eo-format-go svg{ transform:translateX(4px); }

/* Tables */
.eo-table{ border-collapse:separate; border-spacing:0; width:100%; overflow:hidden;
  border-radius:12px; border:1px solid #ECE8F3; }
.eo-table thead th{ background:#4744AB; color:#fff; border:none; font-weight:600; padding:12px 14px; }
.eo-table td{ padding:12px 14px; vertical-align:top; border-color:#ECE8F3; }
.eo-table tbody tr:nth-child(odd){ background:#F8F7FB; }

/* CTA buttons = .btn-white component (Figma: white pill + arrow) */
.eo-page .btn-white-link{ text-decoration:none; display:inline-block; }
.eo-page .order-call-btn{ text-decoration:none; cursor:pointer; display:inline-block; }
.eo-page .order-call-btn .btn-white-title{ margin:0; }
.eo-page .btn-white-link:hover .btn-white,
.eo-page .order-call-btn:hover .btn-white{ background:#4744AB; color:#fff; transition:all .3s; }
.eo-page .btn-white-link:hover .btn-arrow svg,
.eo-page .order-call-btn:hover .btn-arrow svg{ transform:rotate(0deg); }

/* Case cards (Figma: photo + label bottom-left) */
.eo-cards{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.eo-cards li{ margin:0; }
.eo-cards a{ position:relative; display:block; border-radius:18px; overflow:hidden;
  text-decoration:none; aspect-ratio:3/4; }
.eo-cards img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.eo-cards a:hover img{ transform:scale(1.06); }
.eo-cards a::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,16,40,0) 45%,rgba(20,16,40,.78)); }
.eo-cards .eo-card-label{ position:absolute; left:18px; bottom:16px; z-index:2;
  color:#fff; font-weight:700; font-size:20px; }

/* ====== Figma polish: Inter + выравнивание ====== */
@font-face{ font-family:'Inter'; src:url("/fonts/Inter-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:'Inter'; src:url("/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:'Inter'; src:url("/fonts/Inter-Medium.woff2") format("woff2"); font-weight:700; font-display:swap; }

.eo-page, .eo-page h1, .eo-page h2, .eo-page h3, .eo-page h4, .eo-page h5,
.eo-page p, .eo-page li, .eo-page a, .eo-page b, .eo-page strong,
.eo-page td, .eo-page th, .eo-page .btn-white-title, .eo-page .nav-link{
  font-family:'Inter', sans-serif !important;
}

/* Выравнивание по левому краю (убираем justify "по ширине") */
.eo-page .article,
.eo-page .article p, .eo-page .article li,
.eo-page p, .eo-page li, .eo-page td, .eo-page th{ text-align:left !important; }

/* Единый стиль ссылок в тексте (без случайных подчёркиваний) */
.eo-page .article a{ color:#4744AB; text-decoration:none; border-bottom:1px solid rgba(71,68,171,.35); }
.eo-page .article a:hover{ border-bottom-color:#4744AB; }
/* ...но не у кнопок-ссылок и карточек */
.eo-page .article a.btn-white-link,
.eo-page .article a.btn-white-link:hover,
.eo-page .article .eo-cards a,
.eo-page .article .eo-cards a:hover{ border-bottom:none; }

/* Команда и подрядчики: карточки */
.eo-pool{ list-style:none; padding:0; margin:18px 0 4px; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.eo-pool li{ position:relative; background:#F8F8FB; border:1px solid #ECE8F3; border-radius:14px;
  padding:16px 18px 16px 48px; }
.eo-pool li::before{ content:"\2713"; position:absolute; left:16px; top:16px; width:20px; height:20px;
  border-radius:50%; background:#4744AB; color:#fff; font-size:11px; display:flex;
  align-items:center; justify-content:center; }
.eo-pool b{ display:block; color:#2E2A77; }
.eo-pool span{ display:block; color:#737373; font-size:14px; margin-top:2px; }

/* Команда: интерактивный блок (как на главной), адаптирован под узкую колонку */
.eo-features{ display:flex; gap:28px; padding:0; margin:20px 0 4px; align-items:stretch; }
.eo-features .features__left{ width:54%; }
.eo-features .features__right{ width:46%; border-radius:15px; position:relative; overflow:hidden; }
.eo-features .features__right img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.eo-features .features__right .tooltip-text-new{ z-index:2; }
.eo-features .features__list{ list-style:none; padding:0; margin:0; }
.eo-features .features__list li{ margin-bottom:12px; }
.eo-features .features__list li:last-child{ margin-bottom:0; }
.eo-features .tooltip-title{ font-size:clamp(1.05rem, 0.92rem + 0.5vw, 1.3rem); line-height:1.3; }
.eo-features .features__list li.active, .eo-features .features__list li:hover{ color:#4744AB; }
@media(max-width:900px){
  .eo-features{ flex-direction:column; gap:18px; }
  .eo-features .features__left, .eo-features .features__right{ width:100%; }
  .eo-features .features__right{ height:260px; min-height:0; }
}

/* Документы: список слева + фото справа (как в Figma) */
.eo-docs{ display:flex; gap:28px; align-items:stretch; margin:8px 0 4px; }
.eo-docs__list{ width:52%; margin:0; padding-left:20px; }
.eo-docs__list li{ margin-bottom:12px; }
.eo-docs__list li:last-child{ margin-bottom:0; }
.eo-docs__img{ width:48%; border-radius:16px; overflow:hidden; position:relative; min-height:240px; }
.eo-docs__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media(max-width:900px){
  .eo-docs{ flex-direction:column; gap:18px; }
  .eo-docs__list, .eo-docs__img{ width:100%; }
  .eo-docs__img{ height:240px; }
}

/* Роли: чек-лист внутри вкладок */
.eo-roles-tabs{ margin-top:18px; }
.eo-roles-tabs .tab-content{ background:#FAFAFC; border:1px solid #ECE8F3; border-radius:14px; padding:20px 22px; }
.eo-checklist{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.eo-checklist li{ position:relative; padding-left:30px; font-size:15px; line-height:1.5; }
.eo-checklist li::before{ content:"\2713"; position:absolute; left:0; top:1px; width:20px; height:20px;
  border-radius:50%; background:#4744AB; color:#fff; font-size:11px;
  display:flex; align-items:center; justify-content:center; }
/* Вложенные подсписки внутри чек-листа — простые тире, без галочек */
.eo-page .eo-checklist ul{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.eo-page .eo-checklist ul li{ padding-left:18px; font-size:15px; line-height:1.5; }
.eo-page .eo-checklist ul li::before{ content:"\2013"; left:2px; top:0; width:auto; height:auto;
  background:none; color:#4744AB; border-radius:0; font-weight:700; }
/* Воздух на стыке списков/таблиц/табов с соседними абзацами */
.eo-page .box-text > .eo-checklist + p,
.eo-page .box-text > .eo-stepper + p,
.eo-page .box-text > .eo-tabs + p,
.eo-page .box-text > .table-responsive + p,
.eo-page .box-text > .table-responsive + .eo-linklist{ margin-top:18px; }
.eo-page .box-text > p + .eo-checklist,
.eo-page .box-text > p + .eo-stepper{ margin-top:10px; }
.eo-page .box-text > p:not(.eo-linklist-label) + .eo-linklist{ margin-top:18px; }
/* Тот же воздух внутри табов (элементы лежат в .tab-pane, а не в .box-text напрямую) */
.eo-page .tab-pane > .eo-checklist + p,
.eo-page .tab-pane > .eo-stepper + p,
.eo-page .tab-pane > .table-responsive + p{ margin-top:18px; }
.eo-page .tab-pane > p + .eo-checklist,
.eo-page .tab-pane > p + .eo-stepper{ margin-top:10px; }
.eo-page .tab-pane > * + h3{ margin-top:26px; }

/* Степпер: номер по центру плашки по вертикали (блок, чтобы текст не ломался) */
.eo-stepper li{ display:block; position:relative; padding:16px 18px 16px 66px; }
.eo-stepper li::before{ position:absolute; left:14px; top:50%; transform:translateY(-50%); }

/* Единые жирные акценты */
.eo-stepper li b, .eo-risks li b{ color:#2E2A77; font-weight:600; }

/* Таблицы: вертикальный центр, аккуратный первый столбец, без justify */
.eo-table td, .eo-table th{ vertical-align:middle; }
.eo-table td:first-child{ font-weight:600; color:#2E2A77; }

/* Кнопки CTA: компактные, по левому краю, без смещений (герой не трогаем) */
.eo-page .box-text{ text-align:left; }
.eo-page .order-call-btn, .eo-page .btn-white-link{ display:inline-flex; vertical-align:top; margin:18px 0 0; }
.eo-page .order-call-btn .btn-white,
.eo-page .btn-white-link .btn-white,
.eo-page .order-call-none .btn-white{ display:inline-flex; width:auto; gap:14px; margin:0; align-items:center; }
.eo-page .order-call-btn .btn-white-title,
.eo-page .btn-white-link .btn-white-title,
.eo-page .order-call-none .btn-white-title{ white-space:nowrap; }
.eo-page .order-call-btn .btn-arrow,
.eo-page .btn-white-link .btn-arrow,
.eo-page .order-call-none .btn-arrow{ flex-shrink:0; }
/* Герой-кнопка: слева в flex-колонке героя, стрелка ближе к тексту */
.eo-page .internal-hero .order-call-btn{ align-self:flex-start; margin-left:0 !important; }
.eo-page .internal-hero .order-call-btn .btn-white-title{ padding-right:6px; }

/* Единый размер шрифта кнопок на всех страницах + выравнивание контентных кнопок слева */
.eo-page .btn-white-title{ font-size:16px; }
.eo-page .order-call-btn{ margin-left:0 !important; }
/* Фото героя — единая пропорция (как на первой странице, ratio ~1.72) */
.eo-page .internal-hero .internal-image{ display:block; width:100%; aspect-ratio:1.72; }

/* ====== Интерактивный список преимуществ в героe ====== */
.eo-page .hero-content > ul{ list-style:none; margin:6px 0 22px; padding:0; display:grid; gap:4px; }
.eo-page .hero-content > ul li{ position:relative; margin:0; padding:9px 14px 9px 38px;
  border-radius:12px; font-size:15px; line-height:1.4; color:#3a3550; cursor:default;
  transition:transform .3s ease, background .3s ease, color .3s ease, opacity .3s ease, box-shadow .3s ease; }
.eo-page .hero-content > ul li::before{ content:""; position:absolute; left:15px; top:50%;
  transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:#4744AB;
  transition:width .3s ease, height .3s ease, left .3s ease, box-shadow .3s ease; }
/* Наведение на список: все пункты притухают и чуть уменьшаются */
.eo-page .hero-content > ul:hover li{ opacity:.4; transform:scale(.97); }
/* Активный (наведённый) пункт — крупнее, с заливкой и «пульсирующей» точкой */
.eo-page .hero-content > ul li:hover{ opacity:1; transform:scale(1.03); background:#F1EEF7;
  color:#2E2A77; font-weight:600; box-shadow:0 10px 26px rgba(40,30,80,.12); }
.eo-page .hero-content > ul li:hover::before{ width:14px; height:14px; left:13px;
  box-shadow:0 0 0 5px rgba(71,68,171,.16); }
@media(prefers-reduced-motion:reduce){
  .eo-page .hero-content > ul:hover li{ opacity:1; transform:none; }
  .eo-page .hero-content > ul li:hover{ transform:none; }
}

/* Герой на десктопе: заголовок по верху картинки, кнопка по низу */
@media(min-width:768px){
  .eo-page .internal-hero{ align-items:stretch !important; }
  .eo-page .internal-hero > .col-md-6:first-child{ display:flex; flex-direction:column; padding-right:48px !important; }
  .eo-page .internal-hero .hero-content{ flex:1 1 auto; }
  .eo-page .internal-hero .hero-content .order-call-btn{ margin-top:auto; display:flex; width:fit-content; }
}

/* Убираем огромные пустоты вокруг героя и крошек */
.eo-page .internal-hero{ margin-bottom:28px !important; }
.eo-page .internal-breadcrumb{ margin-bottom:20px !important; }

/* Хлебные крошки */
.eo-page .internal-breadcrumb{ padding:8px 0; }
.eo-page .breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; font-size:14px; list-style:none; }
.eo-page .breadcrumb-item{ display:flex; align-items:center; padding:0 !important; }
.eo-page .breadcrumb-item + .breadcrumb-item::before{ content:"\203A"; color:#C2BDD2; padding:0 !important; margin:0 12px; font-size:17px; line-height:1; float:none; }
.eo-page .breadcrumb-item a{ color:#4744AB; text-decoration:none; border-bottom:none; transition:color .15s; }
.eo-page .breadcrumb-item a:hover{ color:#2E2A77; text-decoration:underline; }
.eo-page .breadcrumb-item.active{ color:#8A8699; }

/* ====== Ховер-анимации ====== */
/* Кнопки: лёгкий подлёт + тень */
.eo-page .btn-white{ transition:background .25s ease, transform .2s ease, box-shadow .25s ease; }
.eo-page .order-call-btn:hover .btn-white,
.eo-page .btn-white-link:hover .btn-white{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(71,68,171,.28); }

/* Фото-карточки (кейсы, опыт): подъём + зум картинки */
.eo-cards a, .eo-stats li{ transition:transform .3s ease, box-shadow .3s ease; }
.eo-cards a:hover, .eo-stats li:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(40,30,80,.18); }
.eo-stats img{ transition:transform .5s ease; }
.eo-stats li:hover img{ transform:scale(1.07); }

/* Риски: подъём + тень */
.eo-risks li{ transition:transform .25s ease, box-shadow .25s ease, border-left-color .25s ease; }
.eo-risks li:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(40,30,80,.12); }

/* Форматы: подъём + акцентная рамка */
.eo-formats li{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.eo-formats li:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(40,30,80,.1); border-color:#C9C2E6; }

/* Степпер: акцент + цифра чуть растёт */
.eo-stepper li{ transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.eo-stepper li:hover{ border-color:#4744AB; box-shadow:0 6px 18px rgba(71,68,171,.1); background:#fff; }
.eo-stepper li::before{ transition:transform .2s ease; }
.eo-stepper li:hover::before{ transform:translateY(-50%) scale(1.1); }

/* Документы: зум фото */
.eo-docs__img img{ transition:transform .5s ease; }
.eo-docs__img:hover img{ transform:scale(1.05); }

/* Чек-лист в табах: пункт сдвигается, маркер подсвечивается */
.eo-checklist li, .eo-checklist li::before{ transition:transform .3s ease; }
.eo-checklist li:hover{ transform:translateX(2px); }
.eo-checklist li:hover::before{ transform:scale(1.12); }

/* Команда: пункт сдвигается при наведении */
.eo-features .features__list li{ transition:color .3s ease, transform .2s ease; }
.eo-features .features__list li:hover{ transform:translateX(4px); }

/* Табы: лёгкий подлёт неактивной вкладки */
.eo-tabs .nav-link{ transition:all .18s ease; }
.eo-tabs .nav-link:hover{ transform:translateY(-2px); }

/* ====== FAQ: чище и контрастнее ====== */
.eo-page .faq{ display:flex; flex-direction:column; gap:4px; }
.eo-page .faq .accordion-item{ background:#fff; border:1px solid #E7E2F0; border-radius:12px;
  overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; }
.eo-page .faq .accordion-item:hover{ border-color:#C9C2E6; box-shadow:0 4px 14px rgba(40,30,80,.06); }
.eo-page .faq .accordion-button{ background:#fff; color:#212529; font-weight:600; font-size:16px;
  padding:18px 20px; box-shadow:none !important; }
.eo-page .faq .accordion-button:not(.collapsed){ background:#fff; color:#212529; }
.eo-page .faq .accordion-button:focus{ box-shadow:none !important; border-color:transparent; }
.eo-page .faq .accordion-button::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%234744AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-size:16px 16px; width:16px; height:16px; transition:transform .2s ease; }
.eo-page .faq .accordion-button:not(.collapsed)::after{ transform:rotate(180deg); }
.eo-page .faq .accordion-body{ padding:4px 20px 20px; color:#4a4a55; font-size:15px; line-height:1.6; }

/* Выноска <mark>: приглушённо-фиолетовая (вместо жёлтой), прямая акцентная линия слева */
.eo-page mark{ position:relative; display:block; background:#F1EEF7; color:#3a3550;
  border-radius:10px; padding:14px 18px 14px 24px; margin:18px 0; font-size:15px; line-height:1.55; }
.eo-page mark::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:5px; background:#4744AB; }

/* Единые интервалы: блоки разделяет верхний padding, хвостовые margin гасим */
.eo-page .basic-instrument-item{ margin:0 !important; padding-top:48px !important; padding-bottom:0 !important; }
.eo-page #anchor-1{ padding-top:0 !important; }
/* Первый блок контента не нуждается в верхнем padding — выравниваем по верху сайдбара */
.eo-page .main-content .basic-instrument-item:first-child{ padding-top:0 !important; }
.eo-page .basic-instrument-item *:last-child{ margin-bottom:0 !important; }
.eo-page .basic-instrument-item .box-icon-h-txt{ margin-top:0 !important; }
.eo-page .basic-instrument-item .box-text{ margin-top:0 !important; }
.eo-page .box-text > h2{ margin:0 0 16px; }
.eo-page .box-text > h3{ margin:22px 0 10px; }
.eo-page .box-text > p{ margin:0 0 14px; }
.eo-page .box-text > p:last-child{ margin-bottom:0; }
.eo-page .eo-tabs, .eo-page .eo-stepper, .eo-page .eo-risks, .eo-page .eo-formats,
.eo-page .eo-cards, .eo-page .eo-casegrid, .eo-page .eo-roles, .eo-page .eo-stats,
.eo-page .table-responsive{ margin-top:18px; margin-bottom:4px; }
/* Воздух между фильтрами-пилюлями и сеткой кейс-карточек */
.eo-page .box-text > .eo-linklist + .eo-casegrid{ margin-top:22px; }
.eo-page .eo-formats{ margin-bottom:28px; }
/* Воздух между кнопкой и фото в герое на мобиле */
@media(max-width:767px){ .eo-page .internal-hero .hero-content{ margin-bottom:26px; } }

/* Опыт в цифрах: статичная сетка из 4 карточек (фото + число) */
.eo-stats{ list-style:none; padding:0; margin:0; display:grid; gap:18px; grid-template-columns:repeat(4,1fr); }
.eo-stats li{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:3/4; margin:0; }
.eo-stats img{ width:100%; height:100%; object-fit:cover; display:block; }
.eo-stats li::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,16,40,.05) 40%,rgba(20,16,40,.8)); }
.eo-stats .eo-stat-num{ position:absolute; left:16px; bottom:34px; z-index:2; color:#fff;
  font-weight:700; font-size:30px; line-height:1; }
.eo-stats .eo-stat-label{ position:absolute; left:16px; right:14px; bottom:14px; z-index:2;
  color:#fff; font-size:14px; opacity:.92; line-height:1.2; }
@media(max-width:768px){ .eo-stats{ grid-template-columns:repeat(2,1fr); } }

/* Роли: 3 карточки-колонки */
.eo-roles{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin:8px 0 4px; }
.eo-role-card{ border:1px solid #ECE8F3; border-radius:16px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; box-shadow:0 2px 12px rgba(40,30,80,.05); }
.eo-role-card__head{ padding:15px 18px; font-weight:700; font-size:16px; color:#fff;
  background:linear-gradient(135deg,#4744AB,#4744AB); }
.eo-role-card--soft .eo-role-card__head{ background:#F1EEF7; color:#2E2A77; }
.eo-role-card ul{ list-style:none; padding:16px 18px; margin:0; display:grid; gap:12px; }
.eo-role-card li{ position:relative; padding-left:28px; font-size:15px; line-height:1.45; }
.eo-role-card li::before{ content:"\2713"; position:absolute; left:0; top:1px; width:18px; height:18px;
  border-radius:50%; background:#4744AB; color:#fff; font-size:11px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.eo-role-card--soft li::before{ background:#9591cf; }
/* Ховер карточек-ролей */
.eo-page .eo-roles .eo-role-card{ transition:box-shadow .25s ease, border-color .25s ease; }
.eo-page .eo-roles .eo-role-card:hover{ box-shadow:0 16px 34px rgba(40,30,80,.14); border-color:#C9C2E6; }

/* Появление при прокрутке (fade in/out) убрано по просьбе заказчика — вызывало дискомфорт. */

/* ==========================================================================
   Блог / лонгрид (без «коммерческих» блоков: текст ведут заголовки)
   ========================================================================== */
.eo-page .blog-meta{ color:#8A8699; font-size:13px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.05em; }
.eo-page .blog-lead{ font-size:19px; line-height:1.6; color:#3a3550; margin:0 0 22px; }
.eo-page .article .blog-lead{ font-size:19px; }
/* Крупные подзаголовки как «якоря чтения» */
.eo-page .article h2{ margin-top:6px; }
/* Картинка на всю ширину, строго 4:3 (padding-hack — работает во всех браузерах) */
.eo-page .eo-figure{ margin:30px 0 28px; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(40,30,80,.08); }
.eo-page .eo-figure img{ display:block; width:100%; height:auto; }
.eo-page .eo-figure--43,
.eo-page .eo-figure--169{ position:relative; }
.eo-page .eo-figure--43::before{ content:""; display:block; padding-top:75%; }      /* 4:3 */
.eo-page .eo-figure--169::before{ content:""; display:block; padding-top:56.25%; }   /* 16:9 */
.eo-page .eo-figure--43 img,
.eo-page .eo-figure--169 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.eo-page .eo-figure figcaption{ font-size:13px; color:#8A8699; padding:10px 4px 0; text-align:left; }
/* Три картинки в ряд, каждая строго 4:3 */
.eo-page .eo-figures-3{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0 28px; padding:0; }
.eo-page .eo-figures-3 li{ margin:0; }
.eo-page .eo-figures-3 figure{ position:relative; margin:0; border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(40,30,80,.08); }
.eo-page .eo-figures-3 figure::before{ content:""; display:block; padding-top:75%; }
.eo-page .eo-figures-3 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:640px){ .eo-page .eo-figures-3{ grid-template-columns:1fr; } }
/* Блог: чуть мягче цвет основного текста */
.eo-page.blog-page .article p,
.eo-page.blog-page .article li,
.eo-page.blog-page .article td{ color:#111; }
/* Лёгкий зум фото на наведении */
.eo-page .eo-figure img,
.eo-page .eo-figures-3 img{ transition:transform .6s ease; }
.eo-page .eo-figure:hover img,
.eo-page .eo-figures-3 figure:hover img{ transform:scale(1.05); }

/* ==========================================================================
   Страницы кейсов (те же .eo-* токены, что и услуги)
   ========================================================================== */

/* Герой кейса: компактнее сверху и между заголовком и лидом */
.eo-page .case-page{ padding-top:32px !important; }
.eo-page .case-hero > h1{ margin-bottom:14px; }
.eo-page .case-hero > p{ margin-bottom:18px; }
.eo-page .case-hero .internal-breadcrumb{ margin-bottom:16px !important; }

/* Боковая навигация «Навигация по кейсу» */
.eo-page .aside-case .footer-menu-header{
  margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid #ECE8F3;
  color:#2E2A77; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.eo-page .aside-case .article-nav li a,
.eo-page .aside-case .footer-menu.fix_navigation a{
  color:#3a3550; font-size:15px; font-weight:500; border:none; }
.eo-page .aside-case .article-nav li a:hover,
.eo-page .aside-case .footer-menu.fix_navigation a:hover,
.eo-page .aside-case .article-nav li.active a{ color:#4744AB; }
/* Перекрашиваем «оранжевый» индикатор активного пункта в бренд-фиолетовый */
.eo-page .aside-case .article-nav li:before{ border-color:#4744AB; }
.eo-page .aside-case .article-nav li.active:after{ background:#4744AB; }

/* Ссылка внутри выноски-mark (См. также) */
.eo-page mark b{ color:#2E2A77; }
.eo-page .article mark a{ color:#4744AB; font-weight:600; border-bottom:1px solid rgba(71,68,171,.4);
  transition:color .2s ease, border-color .2s ease; }
.eo-page .article mark a:hover{ color:#2E2A77; border-bottom-color:#2E2A77; }

/* «Полезные ссылки» — набор ссылок-пилюль со стрелкой */
.eo-page .eo-linklist-label{ margin:2px 0 12px; }
.eo-page .eo-linklist{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.eo-page .eo-linklist li{ margin:0; }
.eo-page .article .eo-linklist a{ display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px; background:#F4F2F9; border:1px solid #E7E2F0;
  color:#4744AB; font-weight:600; font-size:14px; line-height:1; text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.eo-page .article .eo-linklist a::before{ content:"\2192"; font-weight:700; transition:transform .2s ease; }
.eo-page .article .eo-linklist a:hover{ background:#4744AB; color:#fff; border-color:#4744AB; transform:translateY(-2px); }
.eo-page .article .eo-linklist a:hover::before{ transform:translateX(3px); }

/* Галерея кейса (fotorama): сцена — карточка, превью — отдельная строка */
.eo-page .fotorama__stage{ border-radius:18px; overflow:hidden;
  background:#14101f; box-shadow:0 14px 34px rgba(40,30,80,.16); }
/* Превью отделяем от сцены и разносим между собой */
.eo-page .fotorama__nav--thumbs{ margin-top:16px; }
.eo-page .fotorama__nav__frame--thumb{ border-radius:12px; overflow:hidden;
  opacity:.6; transition:opacity .2s ease, transform .2s ease; }
.eo-page .fotorama__nav__frame--thumb:hover{ opacity:1; transform:translateY(-2px); }
.eo-page .fotorama__nav__frame--thumb.fotorama__active{ opacity:1; }
.eo-page .fotorama__thumb{ border-radius:12px; background:#F1EEF7; }
.eo-page .fotorama__thumb-border{ border-color:#4744AB; border-width:2px; border-radius:12px; }
/* Штатную кнопку фуллскрина убираем в обычном режиме (открытие — по клику),
   в фуллскрине она остаётся как «закрыть» */
.eo-page .fotorama:not(.fotorama--fullscreen) .fotorama__fullscreen-icon{ opacity:0 !important; pointer-events:none !important; }
.eo-page .fotorama--fullscreen .fotorama__fullscreen-icon{ background-color:rgba(20,18,28,.55); border-radius:10px; }

/* Стрелки: нейтральная тёмная подложка (спрайт-иконка сохраняется),
   выезжают только со стороны, к которой ведёшь курсор */
.eo-page .fotorama__arr{ background-color:rgba(20,18,28,.5); border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  opacity:0 !important;
  transition:opacity .25s ease, transform .25s ease, background-color .2s ease !important; }
.eo-page .fotorama__arr:hover{ background-color:rgba(20,18,28,.78); }
.eo-page .fotorama__arr--prev{ transform:translateX(-14px) !important; }
.eo-page .fotorama__arr--next{ transform:translateX(14px) !important; }
.eo-page .fotorama__wrap.eo-arr-left  .fotorama__arr--prev{ opacity:1 !important; transform:translateX(0) !important; }
.eo-page .fotorama__wrap.eo-arr-right .fotorama__arr--next{ opacity:1 !important; transform:translateX(0) !important; }

/* ====== Кейс-карточки с фото и ховер-раскрытием (примеры проектов) ====== */
.eo-page .eo-casegrid{ list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:16px; }
.eo-page .eo-casegrid > li{ margin:0; }
.eo-page .article .eo-case{ position:relative; display:block; aspect-ratio:4/3;
  border-radius:14px; overflow:hidden; background:#2E2A77; color:#fff; text-decoration:none;
  box-shadow:0 6px 18px rgba(40,30,80,.10);
  transition:transform .25s ease, box-shadow .25s ease; }
.eo-page .article .eo-case:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(40,30,80,.18); }
.eo-case__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease; }
.eo-page .article .eo-case:hover .eo-case__img{ transform:scale(1.06); }
/* Состояние по умолчанию: заголовок снизу на градиенте */
.eo-case__title{ position:absolute; left:0; right:0; bottom:0; z-index:2; margin:0;
  padding:48px 18px 18px; font-size:18px; font-weight:600; line-height:1.3; color:#fff;
  background:linear-gradient(to top, rgba(28,24,64,.92) 0%, rgba(28,24,64,.5) 55%, transparent 100%);
  transition:opacity .3s ease; }
/* Состояние ховера: полное покрытие с описанием */
.eo-case__desc{ position:absolute; inset:0; z-index:3; margin:0;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  padding:22px; background:rgba(46,42,119,.94);
  opacity:0; transition:opacity .3s ease; }
.eo-case__desc .eo-case__text{ display:block; font-size:14px; line-height:1.5; color:#EAE7F5; }
.eo-case__desc .eo-case__go{ display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:#fff; }
.eo-case__desc .eo-case__go svg{ transition:transform .25s ease; }
.eo-page .article .eo-case:hover .eo-case__go svg{ transform:translateX(4px); }
.eo-page .article .eo-case:hover .eo-case__title{ opacity:0; }
.eo-page .article .eo-case:hover .eo-case__desc{ opacity:1; }
/* NDA-бейдж */
.eo-case__badge{ position:absolute; top:12px; left:12px; z-index:4;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:4px 9px; border-radius:6px; background:rgba(255,255,255,.92); color:#2E2A77; }
@media(max-width:991px){ .eo-page .eo-casegrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:575px){ .eo-page .eo-casegrid{ grid-template-columns:1fr; } }
/* Тач-устройства (нет ховера): показываем описание сразу, заголовок убираем */
@media(hover:none){
  .eo-case__desc{ opacity:1; background:linear-gradient(to top, rgba(28,24,64,.94) 0%, rgba(28,24,64,.75) 60%, rgba(28,24,64,.35) 100%); justify-content:flex-end; }
  .eo-case__title{ display:none; }
}