/* ========== Physiotherapy Playful Design ========== */
/* Бирюзово-мятная палитра — восстановление, свежесть, здоровье */

:root {
  --p-teal: #00897B;
  --p-teal-dark: #00695C;
  --p-teal-light: #26A69A;
  --p-mint: #4DB6AC;
  --p-mint-light: #80CBC4;
  --p-mint-pale: #B2DFDB;
  --p-coral: #FF7043;
}

.specialty-hero { position: relative; }

.why-section { position: relative; overflow: hidden; }
.why-section::after {
  content: ''; position: absolute; top: 10%; right: -2%;
  width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(0, 137, 123, 0.08) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
  animation: float-bg-phys 7s ease-in-out infinite;
}

.services-section { position: relative; overflow: hidden; }
.services-section::after {
  content: ''; position: absolute; bottom: 5%; left: -2%;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(38, 166, 154, 0.08) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
  animation: float-bg-phys 8s ease-in-out infinite reverse;
}

.kegel-featured { position: relative; overflow: hidden; }
.kegel-featured .container { position: relative; }
.kegel-featured .container::after {
  content: ''; position: absolute; top: 25%; right: -4%;
  width: 90px; height: 90px;
  background: radial-gradient(circle, rgba(77, 182, 172, 0.1) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
  animation: float-bg-phys 6s ease-in-out infinite;
}

@keyframes float-bg-phys {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50% { transform: translateY(-20px) scale(1.1); opacity: 0.8; }
}

.specialty-hero__title .highlight-physiotherapy {
  color: var(--p-teal) !important; font-weight: 900 !important; position: relative;
}
.specialty-hero__title .highlight-physiotherapy::after {
  content: ' ⚡'; font-size: 0.5em; display: inline-block;
  animation: bolt-zap 2s ease-in-out infinite;
}
@keyframes bolt-zap {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(10deg); }
}
.specialty-hero__title::before {
  content: '💪'; position: absolute; top: -25px; left: -35px; font-size: 22px;
  animation: symbol-float-phys 3s ease-in-out infinite;
}
.specialty-hero__title::after {
  content: '✨'; position: absolute; bottom: -20px; right: -25px; font-size: 18px;
  animation: symbol-float-phys 3.5s ease-in-out infinite 0.8s;
}
@keyframes symbol-float-phys {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
  50% { transform: translateY(-10px) rotate(10deg); opacity: 1; }
}

.specialty-hero__feature:nth-child(1) .specialty-hero__feature-icon {
  background: linear-gradient(135deg, #00897B, #00695C) !important;
}
.specialty-hero__feature:nth-child(2) .specialty-hero__feature-icon {
  background: linear-gradient(135deg, #26A69A, #00897B) !important;
}
.specialty-hero__feature:nth-child(3) .specialty-hero__feature-icon {
  background: linear-gradient(135deg, #4DB6AC, #26A69A) !important;
}
.specialty-hero__feature:nth-child(4) .specialty-hero__feature-icon {
  background: linear-gradient(135deg, #FF7043, #E64A19) !important;
}

.section-title { position: relative; display: inline-block; }
.section-title::after {
  content: ''; display: block; width: 80px; height: 5px; margin: 12px auto 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #00897B, #26A69A, #4DB6AC, #80CBC4);
  animation: gradient-shift-phys 3s ease-in-out infinite;
  background-size: 200% 100%;
}
@keyframes gradient-shift-phys {
  0%, 100% { background-position: 0% 50%; width: 80px; }
  50% { background-position: 100% 50%; width: 120px; }
}

.why-section__card:nth-child(1) .why-section__card-icon {
  background: linear-gradient(135deg, #00897B, #00695C) !important;
}
.why-section__card:nth-child(2) .why-section__card-icon {
  background: linear-gradient(135deg, #26A69A, #00897B) !important;
}
.why-section__card:nth-child(3) .why-section__card-icon {
  background: linear-gradient(135deg, #4DB6AC, #26A69A) !important;
}
.why-section__card:nth-child(4) .why-section__card-icon {
  background: linear-gradient(135deg, #80CBC4, #4DB6AC) !important;
}
.why-section__card:nth-child(5) .why-section__card-icon {
  background: linear-gradient(135deg, #00897B, #26A69A) !important;
}
.why-section__card:nth-child(6) .why-section__card-icon {
  background: linear-gradient(135deg, #FF7043, #E64A19) !important;
}
.why-section__card:hover { transform: translateY(-10px) scale(1.03) !important; }
.why-section__card:hover .why-section__card-icon {
  animation: icon-wiggle-phys 0.5s ease-in-out !important;
}
@keyframes icon-wiggle-phys {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg) scale(1.1); }
  50% { transform: rotate(8deg) scale(1.15); }
  75% { transform: rotate(-5deg) scale(1.1); }
}

.services-section__item:nth-child(1) .services-section__header-icon { color: #00897B !important; }
.services-section__item:nth-child(2) .services-section__header-icon { color: #26A69A !important; }
.services-section__item:nth-child(3) .services-section__header-icon { color: #4DB6AC !important; }
.services-section__item:nth-child(4) .services-section__header-icon { color: #80CBC4 !important; }
.services-section__item:nth-child(5) .services-section__header-icon { color: #00897B !important; }
.services-section__item:nth-child(6) .services-section__header-icon { color: #26A69A !important; }
.services-section__item:nth-child(7) .services-section__header-icon { color: #4DB6AC !important; }
.services-section__item:nth-child(8) .services-section__header-icon { color: #80CBC4 !important; }
.services-section__item--active .services-section__header-icon {
  color: white !important; animation: icon-pop-phys 0.4s ease-out !important;
}
@keyframes icon-pop-phys {
  0% { transform: scale(0.8); } 50% { transform: scale(1.2); } 100% { transform: scale(1.1); }
}
.services-section__includes li i { background: #00897B !important; color: white !important; }
.services-section__btn {
  background: linear-gradient(135deg, #00897B, #26A69A) !important;
  box-shadow: 0 4px 20px rgba(0, 137, 123, 0.3) !important;
}
.services-section__btn:hover { box-shadow: 0 8px 30px rgba(0, 137, 123, 0.5) !important; }

@media (max-width: 768px) {
  .specialty-hero__title::before, .specialty-hero__title::after { display: none; }
}