/* СтальПром - Компонентные классы */

/* ===== КАРТОЧКИ ===== */

/* Стеклянная карточка */
.glass-card {
  @apply bg-white/5 border border-white/10 backdrop-blur-sm;
}

/* Карточка категории оборудования */
.equipment-card {
  @apply glass-card p-6 rounded-xl text-center shadow hover:shadow-xl transition-transform hover:-translate-y-1;
}

/* Карточка логистики */
.logistics-card {
  @apply glass-card p-6 rounded-xl text-center shadow-lg hover:shadow-xl hover:-translate-y-1 transition-transform;
}

/* Карточка металлопроката */
.metal-card {
  @apply relative glass-card p-6 rounded-xl shadow-xl hover:-translate-y-2 transition-transform duration-500 group overflow-hidden;
}

/* Карточка преимуществ Hero */
.hero-benefit-card {
  @apply flex items-center gap-3 glass-card p-4 rounded-lg hover:scale-105 transition-transform duration-300;
}

/* Бейдж услуги */
.service-badge {
  @apply glass-card text-white px-6 py-3 rounded-md flex items-center gap-2 hover:bg-brand transition;
}

/* Бейдж преимущества */
.advantage-badge {
  @apply glass-card text-text-card px-5 py-3 rounded-md flex items-center gap-2 hover:bg-brand transition;
}

/* ===== КНОПКИ ===== */

/* Основная кнопка бренда */
.btn-brand {
  @apply bg-brand hover:bg-brand-hover text-white px-6 py-3 rounded-md font-medium transition;
}

/* Кнопка с градиентом */
.btn-gradient {
  @apply gradient-button text-white px-8 py-4 text-lg rounded-xl font-semibold shadow-lg transition-all;
}

/* Кнопка Hero с эффектами */
.btn-hero {
  @apply relative z-10 bg-brand hover:bg-brand-hover text-white font-semibold px-6 py-3 rounded-full overflow-hidden transition;
}

/* ===== ИКОНКИ ===== */

/* Иконка категории */
.category-icon {
  @apply text-[30px] text-danger mb-3;
}

/* Иконка логистики */
.logistics-icon {
  @apply text-2xl mb-3 text-danger animate-bounce-slow;
}

/* Иконка бренда */
.brand-icon {
  @apply text-brand text-xl;
}

/* Иконка опасности */
.danger-icon {
  @apply text-danger text-lg;
}

/* ===== ЗАГОЛОВКИ ===== */

/* Основной заголовок секции */
.section-title {
  @apply text-3xl md:text-4xl font-bold text-center mb-4 animate-up;
}

/* Подзаголовок секции */
.section-subtitle {
  @apply text-2xl md:text-3xl font-bold text-center mb-6 animate-up;
}

/* Описание секции */
.section-description {
  @apply text-center text-text-muted max-w-3xl mx-auto mb-12 text-base md:text-lg animate-up;
}

/* ===== КОНТЕЙНЕРЫ ===== */

/* Контейнер секции */
.section-container {
  @apply container mx-auto px-4 relative z-10;
}

/* Сетка карточек */
.cards-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16 animate-up;
}

/* Сетка преимуществ */
.benefits-grid {
  @apply grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-4xl mx-auto px-4;
}

/* Группа кнопок */
.buttons-group {
  @apply flex flex-wrap justify-center gap-4 animate-up;
}

/* Группа бейджей */
.badges-group {
  @apply flex flex-wrap justify-center gap-4 mb-10 animate-up;
}

/* ===== ТЕКСТ ===== */

/* Приглушенный текст */
.text-muted-brand {
  @apply text-text-muted;
}

/* Светлый текст */
.text-light-brand {
  @apply text-text-light;
}

/* Серый текст */
.text-gray-brand {
  @apply text-text-gray;
}

/* Текст таблицы */
.text-table-brand {
  @apply text-text-table;
}

/* ===== АНИМАЦИИ ===== */

/* Анимация появления снизу */
.animate-up-brand {
  @apply animate-up;
}

/* Медленное подпрыгивание */
.animate-bounce-brand {
  @apply animate-bounce-slow;
}

/* Пульсирующий градиент */
.animate-pulse-brand {
  @apply animate-gradientPulse;
}