/* Accordion компонент та дочірні компоненти
 * BEM методологія: .accordion, .accordion__header, .accordion__content, тощо
 * 
 * ПРАВИЛА:
 * - НЕ використовувати !important
 * - НЕ дублювати правила з normalize.css
 * - Використовувати CSS variables з base.css
 */

/* ============================================================================ */

/* СТОРІНКА "ПРО НАС" - ЧОРНИЙ ФОН ТА ВІДСТУПИ                                  */

/* ============================================================================ */


/* Відступи для акордеонів */
.about-accordions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding-top: 100px;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
  padding-bottom: var(--spacing-xxl);
}

/* Для дуже маленьких екранів - адаптивні відступи */
@media (height <= 600px) {
  .about-accordions {
    padding-top: calc(5vh + 120px + 2rem);
  }
}

/* Мобільні пристрої - зменшені відступи */
@media (width <= 767px) {
  .about-accordions {
    padding-top: calc(10vh + 120px);
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
  
  @media (height <= 600px) {
    .about-accordions {
      padding-top: calc(5vh + 120px + 1.5rem);
    }
  }
}

.accordion {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  overflow: hidden;
  background-color: transparent;

  /* Згорнутий стан - фіксована висота 23vh */
  height: 23vh;
  height: 23dvh; /* для сучасних браузерів з підтримкою dvh */
}

/* Розгорнутий стан - автоматична висота під контент */
.accordion[aria-expanded="true"] {
  height: auto;
  min-height: 23vh;
  min-height: 23dvh; /* для сучасних браузерів */
}

.accordion__header {
  padding: var(--spacing-lg);
  background-color: transparent;
  transition: opacity var(--transition-speed);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  color: var(--color-text-light);

  /* Header завжди має мінімальну висоту 23vh */

  /* Текст зверху, не центрований, щоб не стрибав при розгортанні */
  min-height: 23vh;
  min-height: 23dvh; /* для сучасних браузерів */
  justify-content: flex-start;
  align-items: flex-start;
}

/* Кастомний курсор тільки для згорнутих акордеонів */
.accordion:not([aria-expanded="true"]) .accordion__header {
  cursor: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2270%22 height=%2235%22%3E%3Cpath d=%22M23 12 L35 22 L47 12%22 fill=%22none%22 stroke=%22white%22 stroke-width=%222%22/%3E%3Ctext x=%2235%22 y=%2227%22 font-size=%227%22 fill=%22white%22 text-anchor=%22middle%22 dominant-baseline=%22hanging%22 font-family=%22Arial, sans-serif%22%3E%D0%94%D0%95%D0%A2%D0%90%D0%9B%D0%AC%D0%9D%D0%86%D0%A8%D0%95%3C/text%3E%3C/svg%3E') 35 22, auto;

  /* В згорнутому стані header займає всю висоту акордеона (23vh) */
  height: 23vh;
  height: 23dvh;
}

/* На розгорнутих акордеонах - стандартний курсор */
.accordion[aria-expanded="true"] .accordion__header {
  cursor: default;
}

.accordion__title {
  font-size: var(--font-size-xl);
  font-weight: bold;
  margin: 0;
  color: var(--color-text-light);
}

.accordion__subtitle {
  font-size: var(--font-size-base);
  margin: 0;
  color: var(--color-text-light);
  opacity: 0.9;
}

/* Базові стилі контенту */
.accordion__content {
  display: block;
  height: 0;
  max-height: 0;
  padding: 0 var(--spacing-xl);
  overflow: hidden;
  opacity: 0;
  transform: scaleY(0.95);
  transform-origin: top center;
  
  /* GPU оптимізація для iOS */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  
  /* Без transition у згорнутому стані */
  transition: none;
}

/* Анімація відкриття (desktop: 450ms - швидше) */
.accordion--opening .accordion__content {
  height: var(--content-height);
  max-height: var(--content-height);
  padding: var(--spacing-xl);
  opacity: 1;
  transform: scaleY(1);
  
  /* Оптимізована анімація - використовуємо clip-path та transform для кращої продуктивності */
  transition:
    clip-path 450ms cubic-bezier(0.34, 1.1, 0.64, 1),
    opacity 300ms ease-out 50ms,
    transform 450ms cubic-bezier(0.34, 1.1, 0.64, 1);
  
  /* Підказка браузеру для GPU - тільки під час анімації */
  will-change: clip-path, opacity, transform;
}

/* Розгорнутий стан */
.accordion[aria-expanded="true"] .accordion__content {
  height: auto;
  max-height: none;
  padding: var(--spacing-xl);
  opacity: 1;
  transform: scaleY(1);
}

/* Анімація закриття (швидша за відкриття) */
.accordion--closing .accordion__content {
  height: 0;
  max-height: 0;
  padding: 0 var(--spacing-xl);
  opacity: 0;
  transform: scaleY(0.95);
  clip-path: inset(0 0 100% 0);
  
  /* Оптимізована анімація - використовуємо clip-path та transform */
  transition:
    clip-path 350ms cubic-bezier(0.4, 0, 0.6, 1),
    opacity 200ms ease-in,
    transform 350ms cubic-bezier(0.4, 0, 0.6, 1);
  will-change: clip-path, opacity, transform;
}

/* Fade-in для внутрішнього контенту */
.accordion__content > * {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 300ms ease-out 200ms, 
              transform 300ms ease-out 200ms;
}

.accordion--opening .accordion__content > *,
.accordion[aria-expanded="true"] .accordion__content > * {
  opacity: 1;
  transform: translateY(0);
}

.accordion__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: var(--spacing-xl);
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  contain: layout style paint;
  content-visibility: auto;
}

.accordion[id="service-1"] .accordion__stats {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  gap: 1.5rem;
}

.accordion[id="service-1"] .accordion__stat-item {
  padding: 2.5rem 1.5rem;
}

.accordion__stat-item {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 2px solid #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.15);
  contain: layout style paint;
}

.accordion__stat-number {
  display: block;
  font-family: var(--font-family-display-bold);
  font-size: var(--font-size-6xl);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-md);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.4);
}

.accordion__stat-label {
  display: block;
  font-family: var(--font-family-display);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.accordion__section-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--color-text-light);
  letter-spacing: -0.01em;
}

.accordion__section-description {
  font-family: var(--font-family-base);
  margin-bottom: var(--spacing-lg);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.125rem;
}

.accordion__services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: var(--spacing-xl);
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding: 0;
  contain: layout style paint;
  content-visibility: auto;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: #FFFFFF;
  border: 3px solid #000000;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  min-height: 450px;
  position: relative;
  contain: layout style paint;
}

.service-card:hover {
  transform: translateY(-12px) scale(1.01);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.12);
  border-width: 4px;
  z-index: 10;
}

.service-card:not(:hover) {
  will-change: auto;
}

/* Чорна картка - акцентна */
.service-card--dark {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2),
              inset 0 0 60px rgba(255, 255, 255, 0.05),
              0 0 20px rgba(255, 255, 255, 0.1);
  min-height: 450px;
}

.service-card--dark:hover {
  transform: translateY(-12px) scale(1.01);
  box-shadow: 0 20px 48px rgba(255, 255, 255, 0.35),
              inset 0 0 70px rgba(255, 255, 255, 0.08),
              0 6px 24px rgba(255, 255, 255, 0.15);
  border-width: 4px;
  z-index: 10;
}



.service-card__icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
}

.service-card__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: #000000;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.service-card--dark .service-card__title {
  color: #FFFFFF;
}

.service-card__price {
  font-family: var(--font-family-display-bold);
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: #000000;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.service-card--dark .service-card__price {
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3);
}

.service-card__discount {
  font-family: var(--font-family-base);
  font-size: 0.875rem;
  color: #666666;
  margin-bottom: var(--spacing-md);
  font-weight: 500;
}

.service-card__features {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 var(--spacing-md) 0;
  flex-grow: 1;
}

.service-card__features li {
  padding: 0.35rem 0;
  padding-left: var(--spacing-lg);
  position: relative;
  font-family: var(--font-family-base);
  font-size: 0.95rem;
  color: #666666;
}

.service-card--dark .service-card__features li {
  color: rgba(255, 255, 255, 0.8);
}

.service-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #000000;
  font-weight: bold;
}

.service-card--dark .service-card__features li::before {
  color: #FFFFFF;
}

.service-card__button {
  display: inline-block;
  margin: auto 0 0;
  padding: 1rem 2rem;
  font-family: var(--font-family-display);
  font-size: 1rem;
  font-weight: 600;
  background-color: #000000;
  color: #FFFFFF;
  border: 2px solid #000000;
  border-radius: 8px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.service-card__button:hover {
  background-color: #FFFFFF;
  color: #000000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.service-card--dark .service-card__button {
  background-color: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
}

.service-card--dark .service-card__button:hover {
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.4);
}

/* ============================================================================ */

/* БАЗОВІ КЛАСИ КАРТОК (DRY)                                                   */

/* ============================================================================ */

/* Базовий клас для всіх карток */
.card-base {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border-radius: 16px;
  position: relative;
}

/* Білі картки */
.card-white {
  background: #FFFFFF;
  border: 3px solid #000000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Чорні картки */
.card-dark {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2),
              inset 0 0 60px rgba(255, 255, 255, 0.05),
              0 0 20px rgba(255, 255, 255, 0.1);
}

/* Переваги - адаптивна сітка (3×2 або 2×3 залежно від контенту) */
.accordion__advantages-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  contain: layout style paint;
  content-visibility: auto;
}

/* Чергування білих/чорних карток */
.advantage-card:nth-child(odd) {
  background: #FFFFFF;
  border: 3px solid #000000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  position: relative;
  min-height: 200px;
  text-align: center;
  contain: layout style paint;
}

.advantage-card:nth-child(even) {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2),
              inset 0 0 60px rgba(255, 255, 255, 0.05),
              0 0 20px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  position: relative;
  min-height: 200px;
  text-align: center;
  contain: layout style paint;
}

.advantage-card__icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}

.advantage-card__title {
  font-family: var(--font-family-display-bold);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-sm);
  color: #000000;
  flex-grow: 0;
}

.advantage-card:nth-child(even) .advantage-card__title {
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.advantage-card__text {
  font-size: 0.95rem;
  color: #666666;
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.advantage-card:nth-child(even) .advantage-card__text {
  color: rgba(255, 255, 255, 0.8);
}

/* Hero секції */
.accordion__hero {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2),
              inset 0 0 60px rgba(255, 255, 255, 0.05),
              0 0 20px rgba(255, 255, 255, 0.1);
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding: 3rem 2rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.accordion__hero-image {
  width: 30%;
  margin: 0 auto var(--spacing-md);
  display: block;
  height: auto;
  border-radius: 8px;
}

.accordion__hero-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
  align-self: center;
}

.accordion__hero-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin-bottom: var(--spacing-xs);
  color: #FFFFFF;
}

.accordion__hero-name {
  font-family: var(--font-family-display-bold);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-md);
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3);
}

.accordion__hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.9);
}

.accordion__hero-description {
  font-size: 1.125rem;
  max-width: 800px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.8);
}

/* Освіта - сітка 2×2 */
.accordion__education-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto var(--spacing-xl);
  contain: layout style paint;
  content-visibility: auto;
}

.education-item {
  min-height: 320px;
}

/* Чергування білих/чорних карток */
.education-item:nth-child(odd) {
  background: #FFFFFF;
  border: 3px solid #000000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border-radius: 16px;
  position: relative;
  contain: layout style paint;
}

.education-item:nth-child(even) {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2),
              inset 0 0 60px rgba(255, 255, 255, 0.05),
              0 0 20px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border-radius: 16px;
  position: relative;
  contain: layout style paint;
}

.education-item__year {
  font-size: 0.875rem;
  opacity: 0.7;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
}

.education-item__institution {
  font-family: var(--font-family-display-bold);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-sm);
  color: #000000;
}

.education-item:nth-child(even) .education-item__institution {
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.education-item__program {
  font-size: 1rem;
  margin-bottom: var(--spacing-sm);
  color: #666666;
  flex-grow: 1;
}

.education-item:nth-child(even) .education-item__program {
  color: rgba(255, 255, 255, 0.8);
}

.education-item__degree {
  font-size: 0.95rem;
  font-weight: 600;
  color: #000000;
  margin: 0;
}

.education-item:nth-child(even) .education-item__degree {
  color: #FFFFFF;
}

/* Процес перевірки - сітка 2×2 */
.accordion__process-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto var(--spacing-xl);
  contain: layout style paint;
  content-visibility: auto;
}

.process-step {
  min-height: 280px;
}

.process-step:nth-child(odd) {
  background: #FFFFFF;
  border: 3px solid #000000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border-radius: 16px;
  position: relative;
  contain: layout style paint;
}

.process-step:nth-child(even) {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2),
              inset 0 0 60px rgba(255, 255, 255, 0.05),
              0 0 20px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border-radius: 16px;
  position: relative;
  contain: layout style paint;
}

.process-step__number {
  font-family: var(--font-family-display-bold);
  font-size: 4rem;
  font-weight: 700;
  opacity: 0.15;
  line-height: 1;
  margin-bottom: var(--spacing-sm);
  color: #000000;
}

.process-step:nth-child(even) .process-step__number {
  color: #FFFFFF;
  opacity: 0.2;
}

.process-step__title {
  font-family: var(--font-family-display-bold);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-sm);
  color: #000000;
}

.process-step:nth-child(even) .process-step__title {
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.process-step__description {
  font-size: 1rem;
  color: #666666;
  margin: 0;
}

.process-step:nth-child(even) .process-step__description {
  color: rgba(255, 255, 255, 0.8);
}

/* Принципи - сітка 3×1 */
.accordion__principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto var(--spacing-xl);
  contain: layout style paint;
  content-visibility: auto;
}

.principle-card {
  background: #FFFFFF;
  border: 3px solid #000000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border-radius: 16px;
  position: relative;
  min-height: 240px;
  text-align: center;
  contain: layout style paint;
}

.principle-card__title {
  font-family: var(--font-family-display-bold);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-sm);
  color: #000000;
}

.principle-card__description {
  font-size: 1rem;
  color: #666666;
  margin: 0;
}

/* Порівняння - сітка 2×2 */
.accordion__comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto var(--spacing-xl);
  contain: layout style paint;
  content-visibility: auto;
}

.comparison-card {
  background: #FFFFFF;
  border: 3px solid #000000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border-radius: 16px;
  position: relative;
  min-height: 280px;
  text-align: center;
  contain: layout style paint;
}

.comparison-card--dark {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2),
              inset 0 0 60px rgba(255, 255, 255, 0.05),
              0 0 20px rgba(255, 255, 255, 0.1);
}


.comparison-card__characteristic {
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
  color: #666666;
  opacity: 0.8;
}

.comparison-card--dark .comparison-card__characteristic {
  color: rgba(255, 255, 255, 0.7);
}

.comparison-card__rubicon {
  font-family: var(--font-family-display-bold);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-sm);
  color: #000000;
}

.comparison-card--dark .comparison-card__rubicon {
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3);
}

.comparison-card__others {
  font-size: 1rem;
  color: #666666;
  margin: 0;
  opacity: 0.7;
}

.comparison-card--dark .comparison-card__others {
  color: rgba(255, 255, 255, 0.6);
}

/* Сертифікація - сітка 2×2 */
.accordion__certification-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto var(--spacing-xl);
  contain: layout style paint;
  content-visibility: auto;
}

.certification-card {
  min-height: 200px;
  text-align: center;
}

.certification-card:nth-child(odd) {
  background: #FFFFFF;
  border: 3px solid #000000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  position: relative;
  contain: layout style paint;
}

.certification-card:nth-child(even) {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.2),
              inset 0 0 60px rgba(255, 255, 255, 0.05),
              0 0 20px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  position: relative;
  contain: layout style paint;
}

.certification-card__title {
  font-family: var(--font-family-display-bold);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-sm);
  color: #000000;
}

.certification-card:nth-child(even) .certification-card__title {
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.certification-card__description {
  font-size: 1rem;
  color: #666666;
  margin: 0;
}

.certification-card:nth-child(even) .certification-card__description {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================================ */

/* RESPONSIVE ANIMATION TIMINGS                                               */

/* ============================================================================ */

/* Tablet - трохи швидше (400ms) */
@media (width <= 1024px) {
  .accordion--opening .accordion__content {
    transition-duration: 400ms, 400ms, 250ms, 400ms;
  }
  
  .accordion--closing .accordion__content {
    transition-duration: 300ms, 300ms, 180ms, 300ms;
  }
}

/* Mobile - ще швидше для touch UX (350ms) */
@media (width <= 767px) {
  .accordion--opening .accordion__content {
    transition-duration: 350ms, 350ms, 220ms, 350ms;
  }
  
  .accordion--closing .accordion__content {
    transition-duration: 280ms, 280ms, 160ms, 280ms;
  }
}

/* ============================================================================ */

/* RESPONSIVE ДИЗАЙН - СІТКА КАРТОК І СТАТИСТИКА                               */

/* ============================================================================ */

/* Tablet: 1200px -> 2 колонки для карток */
@media (width <= 1200px) {
  .accordion__services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .accordion__advantages-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .accordion[id="service-1"] .accordion__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .accordion__certification-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 768px -> 1 колонка для карток */
@media (width <= 768px) {
  .accordion__services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .accordion__stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .accordion[id="service-1"] .accordion__stats {
    grid-template-columns: 1fr;
  }
  
  .accordion__stat-number {
    font-size: 4rem; /* 64px на мобільних */
  }
  
  .service-card__price {
    font-size: 2.5rem; /* 40px на мобільних */
  }
  
  .service-card {
    padding: 2rem 1.5rem;
  }
  
  .accordion__stat-item {
    padding: 2rem 1.5rem;
  }
  
  /* ДОДАНО: Responsive для нових сіток */
  .accordion__education-list,
  .accordion__process-list,
  .accordion__comparison-grid,
  .accordion__certification-grid,
  .accordion__principles-grid,
  .accordion__advantages-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .education-item,
  .process-step,
  .comparison-card,
  .certification-card,
  .principle-card,
  .advantage-card {
    min-height: auto;
    padding: 1.5rem 1.25rem;
  }
  
  .education-item__institution,
  .process-step__title,
  .principle-card__title,
  .certification-card__title,
  .advantage-card__title {
    font-size: 1.25rem;
  }
  
  .process-step__number {
    font-size: 3rem;
  }
  
  .comparison-card__rubicon {
    font-size: 2rem;
  }
  
  .accordion__hero-name {
    font-size: 2rem;
  }
}

/* Дуже маленькі екрани */
@media (width <= 480px) {
  .accordion__stat-number {
    font-size: 3rem; /* 48px на дуже маленьких */
  }
  
  .service-card__price {
    font-size: 2rem; /* 32px на дуже маленьких */
  }
  
  .service-card__title {
    font-size: 1.25rem;
  }
  
  .accordion__section-title {
    font-size: 1.875rem; /* 30px */
  }
  
  /* ДОДАНО: Responsive для дуже маленьких екранів */
  .education-item__institution,
  .process-step__title,
  .principle-card__title,
  .certification-card__title,
  .advantage-card__title {
    font-size: 1.125rem;
  }
  
  .process-step__number {
    font-size: 2.5rem;
  }
  
  .comparison-card__rubicon {
    font-size: 1.75rem;
  }
  
  .accordion__hero-name {
    font-size: 1.75rem;
  }
}

/* ============================================================================ */

/* iOS SAFARI SPECIFIC OPTIMIZATION                                           */

/* ============================================================================ */

/* iOS Safari detection */
@supports (-webkit-touch-callout: none) {
  .accordion {
    /* Ізоляція layout для performance */
    contain: layout style;
    
    /* Smooth scrolling на iOS */
    -webkit-overflow-scrolling: touch;
  }
  
  .accordion__content {
    /* Subpixel rendering для чіткості */
    -webkit-font-smoothing: subpixel-antialiased;
    
    /* Запобігання flickering */
    transform: translateZ(0);
  }
  
  /* ProMotion 120Hz підтримка (iOS 13.3+) */
  @media (prefers-reduced-motion: no-preference) {
    .accordion--opening .accordion__content {
      /* Більш плавна крива для 120fps */
      transition-timing-function: cubic-bezier(0.34, 1.15, 0.64, 1);
    }
  }
}

/* ============================================================================ */

/* ACCESSIBILITY: PREFERS-REDUCED-MOTION                                      */

/* ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .accordion__content,
  .accordion--opening .accordion__content,
  .accordion--closing .accordion__content {
    transition-duration: 0.15s;
    transition-timing-function: linear;
    will-change: auto;
  }
  
  .accordion__content > * {
    transition-duration: 0.1s;
    will-change: auto;
  }
  
  /* Вимикаємо transform анімації */
  .accordion__content {
    transform: none;
  }
  
  .accordion--opening .accordion__content {
    transform: none;
  }
}