/* Плашка «Хайрик PRO» в профиле (includes/profile_hairik_pro.html): фон и свечение — как у витрины Хайрика
   на «Кандидатам» (candidates/05_hairik_dark.css), тёмная в обеих темах; маскот, текст и белая кнопка в одну строку,
   в одной колонке (планшет, мобилка) маскот в правом верхнем углу, PRO над заголовком, текст и кнопка на всю ширину. */
.profile-hairik {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 20px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  background:
    radial-gradient(60% 180% at 100% 0%, rgba(255, 143, 74, 0.32) 0%, transparent 60%),
    radial-gradient(50% 160% at 0% 100%, rgba(73, 161, 130, 0.16) 0%, transparent 60%),
    #111214;
  color: #FFFFFF;
}
.profile-hairik::before { /* мягкий блик в цветах PRO медленно плывёт по плашке */
  position: absolute;
  z-index: -1;
  top: -120%;
  left: 35%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 143, 74, 0.24) 0%, rgba(255, 119, 51, 0.08) 40%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  content: "";
  animation: profile-hairik-drift 18s ease-in-out infinite alternate;
}
@keyframes profile-hairik-drift {
  to { transform: translate(-200px, 60px) scale(1.2); }
}
.profile-hairik-mascot {
  flex: none;
  width: 48px;
  height: 48px;
}
.profile-hairik-text {
  flex: 1;
  min-width: 0;
}
.profile-hairik-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-size: var(--fs-16);
  letter-spacing: var(--ls-16);
  line-height: var(--lh-16);
  font-weight: var(--fw-semibold);
}
.profile-hairik-lead {
  margin: 0;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-14);
  line-height: var(--lh-14);
  color: rgba(255, 255, 255, 0.64);
}
.profile-hairik-btn { /* размеры и шрифт — общий .btn, цвета — как .hairik-btn--primary на витрине «Кандидатам» */
  flex: none;
  background: #FFFFFF;
  color: #111214;
}
@media (max-width: 1279px) { /* профиль здесь одной колонкой до 600px (03_sub_segments) */
  .profile-hairik {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  .profile-hairik-mascot {
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .profile-hairik-text {
    flex: none;
  }
  .profile-hairik-title { /* заголовок не заходит под маскота */
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-bottom: 8px;
    padding-right: 64px;
  }
  .profile-hairik-lead br { /* текст одним абзацем, разрыв между фразами — только в строку на десктопе */
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-hairik::before {
    animation: none;
  }
}