/* =============================================================
   SupportHub — сквозная полировка (подключается последней).
   Единые плавные ховеры, акценты, аккуратные переходы по всем секциям.
   Только transform/opacity/border/shadow — без layout-shift.
   ============================================================= */

/* ---- единый плавный ховер интерактивных карточек ---- */
.control-card, .keep-stack-card, .market-pill, .seg-card, .step-card,
.more-card, .app-bullet, .api-card, .control-board__main, .integration-point {
  transition:
    transform 0.24s var(--ease-out),
    border-color 0.24s var(--ease),
    box-shadow 0.3s var(--ease),
    background 0.24s var(--ease);
}
.control-card:hover, .keep-stack-card:hover, .market-pill:hover,
.seg-card:hover, .step-card:hover, .more-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow:
    inset 0 1px 0 var(--hairline-top),
    0 0 0 1px rgba(82, 119, 226, 0.22),
    0 22px 48px -26px rgba(82, 119, 226, 0.55);
}

/* акцентная подсветка иконок карточек на ховере */
.control-card:hover > span svg,
.keep-stack-card:hover > span svg,
.market-pill:hover .market-pill__icon svg,
.step-card:hover .step-card__icon svg { color: var(--brand-bright); }

/* иконочные плитки — единый стиль «акцентного квадрата» */
.control-card > span, .keep-stack-card > span, .market-pill__icon,
.app-bullet__icon, .integration-point > svg {
  transition: transform 0.24s var(--ease-out), background 0.24s var(--ease), color 0.24s var(--ease);
}
.control-card:hover > span,
.keep-stack-card:hover > span,
.market-pill:hover .market-pill__icon { transform: scale(1.06); }

/* ---- навигация: плавное подчёркивание ---- */
.site-nav a { position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--brand-bright);
  transition: right 0.25s var(--ease-out);
}
.site-nav a:hover::after { right: 0; }

/* ---- первичная кнопка: мягкий блик ---- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg); opacity: 0; transition: none;
}
.btn--primary:hover::after { animation: btn-shine 0.7s var(--ease-out); }
@keyframes btn-shine { 0% { left: -60%; opacity: 0; } 30% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

/* ---- секции: единый ритм отступов между заголовком и контентом ---- */
.section-head + .integration-layout,
.section-head + .market-layout,
.section-head + .control-board,
.section-head + .keep-stack { margin-top: clamp(36px, 5vw, 56px); }

/* ---- мягкое появление парящих плиток hero (доводка) ---- */
.hero-chip { transition: transform 0.3s var(--ease-out), opacity 0.5s var(--ease); }
.hero-chip__tile { transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease); }
.hero-chip:hover .hero-chip__tile { transform: scale(1.08) translateY(-2px); }

/* ---- аккуратные ссылки-якоря фич ---- */
.feature__anchor { transition: gap 0.2s var(--ease-out), color 0.2s var(--ease); }
.feature__anchor:hover { gap: 12px; color: var(--brand-bright); }

@media (prefers-reduced-motion: reduce) {
  .control-card, .keep-stack-card, .market-pill, .seg-card, .step-card, .more-card,
  .hero-chip, .hero-chip__tile { transition: none !important; }
  .btn--primary:hover::after { animation: none; }
  .site-nav a::after { display: none; }
}