/* ===================================
   SUPPORT PAGE CSS - DARK THEME
   NTL TECHNOLOGIES, LLC
   ================================= */

/* ===== SUPPORT HERO SECTION ===== */

.support-hero {
  padding: var(--spacing-32) 0 var(--spacing-20);
  margin-top: 80px;
  background: var(--color-background);
  position: relative;
  overflow: hidden;
}

.support-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 10%, rgba(14, 165, 233, 0.04) 0%, transparent 50%),
              radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.support-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.support-hero__icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: var(--border-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-6);
  border: 2px solid rgba(59, 130, 246, 0.3);
  transition: all var(--duration-300) var(--ease-out);
  box-shadow: var(--shadow-lg);
}

.support-hero__icon i {
  font-size: var(--font-size-2xl);
  color: var(--color-light-100);
}

.support-hero__icon svg {
  font-size: var(--font-size-4xl);
}

.support-hero__icon:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow: var(--glow-primary);
}

.support-hero__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-4);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

.support-hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 600px;
  margin: 0 auto var(--spacing-8);
}

.support-hero__badges {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
  margin: var(--spacing-8) 0;
  flex-wrap: wrap;
}

.support-hero__badge {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-primary-300);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  transition: all var(--duration-300) var(--ease-out);
  backdrop-filter: var(--backdrop-blur-md);
}

.support-hero__badge:hover {
  transform: translateY(-2px);
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: var(--shadow-md);
}

.support-hero__badge i {
  font-size: var(--font-size-sm);
}

/* ===== SUPPORT NAVIGATION SECTION ===== */

.support-nav {
  padding: var(--spacing-20) 0;
  background: var(--color-background-secondary);
  position: relative;
}

.support-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
              radial-gradient(circle at 30% 70%, rgba(14, 165, 233, 0.02) 0%, transparent 50%);
  pointer-events: none;
}

.support-nav__card {
  background: var(--gradient-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2xl);
  box-shadow: var(--shadow-lg);
  transition: all var(--duration-300) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.support-nav__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-glass);
  opacity: 0;
  transition: opacity var(--duration-300) var(--ease-out);
  pointer-events: none;
}

.support-nav__card:hover::before {
  opacity: 1;
}

.support-nav__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary-500);
}

.support-nav__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-6);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.support-nav__title i {
  color: var(--color-primary-400);
  font-size: var(--font-size-xl);
}

.support-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.support-nav__list li {
  margin-bottom: var(--spacing-3);
}

.support-nav__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  transition: all var(--duration-200) var(--ease-out);
  display: flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius-lg);
  position: relative;
  overflow: hidden;
}

.support-nav__link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left var(--duration-300) var(--ease-out);
}

.support-nav__link:hover::before {
  left: 100%;
}

.support-nav__link:hover {
  color: var(--color-primary-400);
  background: rgba(59, 130, 246, 0.08);
  transform: translateX(8px);
  text-decoration: none;
}

/* ===== SUPPORT CONTENT SECTION ===== */

.support-content {
  padding: var(--spacing-20) 0;
  background: var(--color-background);
  position: relative;
}

.support-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.02) 0%, transparent 50%);
  pointer-events: none;
}

.support-content__section {
  margin-bottom: var(--spacing-20);
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--duration-500) var(--ease-out);
  position: relative;
  z-index: 2;
}

.support-content__section.animate-fade-in {
  opacity: 1;
  transform: translateY(0);
}

.support-content__header {
  margin-bottom: var(--spacing-6);
}

.support-content__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-4);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  position: relative;
  padding-bottom: var(--spacing-3);
}

.support-content__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: var(--border-radius-full);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
  transition: transform var(--duration-300) var(--ease-out), box-shadow var(--duration-300) var(--ease-out);
}

.support-content__title i {
  color: var(--color-primary-400);
  font-size: var(--font-size-2xl);
  transition: transform var(--duration-300) var(--ease-out);
}

.support-content__section:hover .support-content__title i {
  transform: scale(1.1) rotate(5deg);
}

.support-content__section:hover .support-content__title::after {
  transform: scaleX(1.01);
  box-shadow: 0 3px 6px rgba(59, 130, 246, 0.3);
}

.support-content__card {
  background: var(--gradient-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2xl);
  box-shadow: var(--shadow-md);
  transition: all var(--duration-300) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.support-content__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-glass);
  opacity: 0;
  transition: opacity var(--duration-300) var(--ease-out);
  pointer-events: none;
}

.support-content__card:hover::before {
  opacity: 1;
}

.support-content__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary-500);
}

.support-content__intro {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-6);
}

.support-content__features {
  margin: var(--spacing-6) 0;
}

.support-content__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-5);
  padding: var(--spacing-4);
  border-radius: var(--border-radius-lg);
  transition: all var(--duration-300) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.support-content__feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
  transition: left var(--duration-400) var(--ease-out);
}

.support-content__feature:hover::before {
  left: 100%;
}

.support-content__feature:hover {
  background: rgba(59, 130, 246, 0.03);
  transform: translateX(8px);
}

.support-content__feature > i {
  color: var(--color-primary-400);
  font-size: var(--font-size-xl);
  margin-top: var(--spacing-1);
  flex-shrink: 0;
  transition: transform var(--duration-300) var(--ease-out);
}

.support-content__feature:hover > i {
  transform: scale(1.1) rotate(10deg);
}

.support-content__feature-content {
  flex: 1;
}

.support-content__feature-content h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
  line-height: var(--line-height-tight);
}

.support-content__feature-content p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.support-content__footer {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

/* ===== CONTACT SECTION ===== */

.support-content__contact {
  margin: var(--spacing-6) 0;
}

.support-content__contact-card {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-6);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  transition: all var(--duration-300) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.support-content__contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.08), transparent);
  transition: left var(--duration-500) var(--ease-out);
}

.support-content__contact-card:hover::before {
  left: 100%;
}

.support-content__contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-md);
}

.support-content__contact-icon {
  width: 50px;
  height: 50px;
  background: var(--gradient-primary);
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--duration-300) var(--ease-out);
}

.support-content__contact-card:hover .support-content__contact-icon {
  transform: scale(1.1) rotate(5deg);
}

.support-content__contact-icon i {
  color: var(--color-light-100);
  font-size: var(--font-size-lg);
}

.support-content__contact-info h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}

.support-content__contact-link {
  color: var(--color-primary-400);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--duration-200) var(--ease-out);
}

.support-content__contact-link:hover {
  color: var(--color-primary-300);
  text-decoration: underline;
}

.support-content__contact-note {
  margin-top: var(--spacing-4);
}

.support-content__contact-highlight {
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-4);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.support-content__contact-highlight i {
  color: var(--color-accent-400);
  font-size: var(--font-size-base);
  margin-top: var(--spacing-1);
  flex-shrink: 0;
}

.support-content__contact-highlight h5 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-1);
}

.support-content__contact-highlight p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ===== SUPPORT SUMMARY SECTION ===== */

.support-summary {
  padding: var(--spacing-20) 0;
  background: var(--color-background-secondary);
  position: relative;
}

.support-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 60% 40%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 40% 60%, rgba(14, 165, 233, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.support-summary__card {
  background: var(--gradient-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-2xl);
  box-shadow: var(--shadow-lg);
  transition: all var(--duration-300) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.support-summary__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
  opacity: 0;
  transition: opacity var(--duration-300) var(--ease-out);
  pointer-events: none;
}

.support-summary__card:hover::before {
  opacity: 1;
}

.support-summary__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary-500);
}

.support-summary__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-4);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.support-summary__title i {
  color: var(--color-primary-400);
  font-size: var(--font-size-xl);
}

.support-summary__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-5);
}

.support-summary__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--duration-200) var(--ease-out);
}

.badge--success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success-300);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge--primary {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-primary-300);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge--info {
  background: rgba(14, 165, 233, 0.15);
  color: var(--color-accent-300);
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.badge--warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning-300);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.support-summary__score {
  text-align: center;
  position: relative;
}

.support-summary__score-circle {
  width: 120px;
  height: 120px;
  background: var(--gradient-primary);
  border: 3px solid var(--color-primary-400);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-4);
  position: relative;
  transition: all var(--duration-300) var(--ease-out);
  box-shadow: var(--shadow-lg);
}

.support-summary__score-circle:hover {
  transform: scale(1.05);
  box-shadow: var(--glow-primary);
}

.support-summary__score-number {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-light-100);
  line-height: 1;
}

.support-summary__score-label {
  font-size: var(--font-size-xs);
  color: var(--color-light-200);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-weight: var(--font-weight-medium);
}

.support-summary__score-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 991px) {
  .support-hero {
    margin-top: 70px;
    padding: var(--spacing-24) 0 var(--spacing-16);
  }
  
  .support-hero__title {
    font-size: var(--font-size-4xl);
  }
  
  .support-hero__subtitle {
    font-size: var(--font-size-base);
  }
  
  .support-hero__badges {
    gap: var(--spacing-3);
  }
  
  .support-nav,
  .support-content,
  .support-summary {
    padding: var(--spacing-16) 0;
  }
  
  .support-content__title {
    font-size: var(--font-size-2xl);
  }
  
  .support-content__section {
    margin-bottom: var(--spacing-16);
  }
  
  .support-summary__score-circle {
    width: 100px;
    height: 100px;
  }
  
  .support-summary__score-number {
    font-size: var(--font-size-2xl);
  }
}

@media (max-width: 767px) {
  .support-hero {
    margin-top: 60px;
    padding: var(--spacing-20) 0 var(--spacing-12);
  }
  
  .support-hero__title {
    font-size: var(--font-size-3xl);
  }
  
  .support-hero__subtitle {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-6);
  }
  
  .support-hero__badges {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
  }
  
  .support-hero__badge {
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }
  
  .support-hero__icon {
    width: 60px;
    height: 60px;
    margin-bottom: var(--spacing-4);
  }
  
  .support-hero__icon i {
    font-size: var(--font-size-xl);
  }
  
  .support-nav,
  .support-content,
  .support-summary {
    padding: var(--spacing-12) 0;
  }
  
  .support-nav__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-4);
  }
  
  .support-content__title {
    font-size: var(--font-size-xl);
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-2);
  }
  
  .support-content__title::after {
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
  }
  
  .support-content__section {
    margin-bottom: var(--spacing-12);
  }
  
  .support-content__intro {
    font-size: var(--font-size-base);
  }
  
  .support-content__feature {
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-4);
  }
  
  .support-content__feature-content h4 {
    font-size: var(--font-size-base);
  }
  
  .support-content__feature-content p {
    font-size: var(--font-size-sm);
  }
  
  .support-content__contact-card {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-3);
  }
  
  .support-summary__title {
    font-size: var(--font-size-xl);
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-2);
  }
  
  .support-summary__text {
    font-size: var(--font-size-sm);
  }
  
  .support-summary__badges {
    justify-content: center;
    gap: var(--spacing-2);
  }
  
  .support-summary__score-circle {
    width: 80px;
    height: 80px;
  }
  
  .support-summary__score-number {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 575px) {
  .support-hero__title {
    font-size: var(--font-size-2xl);
  }
  
  .support-hero__subtitle {
    font-size: var(--font-size-xs);
  }
  
  .support-hero__icon {
    width: 50px;
    height: 50px;
  }
  
  .support-hero__icon i {
    font-size: var(--font-size-lg);
  }
  
  .support-nav__title {
    font-size: var(--font-size-lg);
  }
  
  .support-content__title {
    font-size: var(--font-size-lg);
  }
  
  .support-content__feature {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-2);
  }
  
  .support-content__feature > i {
    margin-top: 0;
  }
  
  .support-summary__score-circle {
    width: 70px;
    height: 70px;
  }
  
  .support-summary__score-number {
    font-size: var(--font-size-lg);
  }
  
  .support-summary__score-label {
    font-size: 0.6rem;
  }
}

/* ===== ANIMATION DELAYS ===== */

.support-content__section:nth-child(1) {
  animation-delay: 0.1s;
}

.support-content__section:nth-child(2) {
  animation-delay: 0.2s;
}

.support-content__section:nth-child(3) {
  animation-delay: 0.3s;
}

.support-content__section:nth-child(4) {
  animation-delay: 0.4s;
}

.support-content__section:nth-child(5) {
  animation-delay: 0.5s;
}

.support-content__section:nth-child(6) {
  animation-delay: 0.6s;
}

.support-content__section:nth-child(7) {
  animation-delay: 0.7s;
}

.support-content__section:nth-child(8) {
  animation-delay: 0.8s;
}

.support-content__section:nth-child(9) {
  animation-delay: 0.9s;
}

.support-content__section:nth-child(10) {
  animation-delay: 1.0s;
}

.support-content__section:nth-child(11) {
  animation-delay: 1.1s;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

@media (prefers-reduced-motion: reduce) {
  .support-content__section,
  .support-hero__icon,
  .support-nav__card,
  .support-content__card,
  .support-summary__card,
  .support-content__feature,
  .support-content__contact-card {
    transition: none;
    animation: none;
  }
  
  .support-content__section.animate-fade-in {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .support-hero__badge,
  .support-content__contact-highlight,
  .badge {
    border-width: 2px;
  }
  
  .support-content__title::after,
  .support-nav__title i,
  .support-content__title i {
    filter: brightness(1.5);
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .support-hero,
  .support-nav,
  .support-content,
  .support-summary {
    background: white !important;
    color: black !important;
    padding: 1rem 0;
  }
  
  .support-hero::before,
  .support-nav::before,
  .support-content::before,
  .support-summary::before {
    display: none;
  }
  
  .support-content__card,
  .support-nav__card,
  .support-summary__card,
  .support-content__contact-card {
    background: white !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    break-inside: avoid;
    margin-bottom: 1rem;
  }
  
  .support-content__title,
  .support-nav__title,
  .support-summary__title {
    color: #333 !important;
    border-bottom: 2px solid #333 !important;
  }
  
  .support-content__feature > i,
  .support-content__contact-icon i,
  .support-summary__title i {
    color: #333 !important;
  }
  
  .support-hero__badge,
  .badge {
    border: 1px solid #333 !important;
    background: #f9f9f9 !important;
    color: #333 !important;
  }
  
  a {
    color: #333 !important;
    text-decoration: underline !important;
  }
}

/* ===== FOCUS STYLES FOR KEYBOARD NAVIGATION ===== */

.support-nav__link:focus,
.support-content__contact-link:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* ===== LOADING STATE ===== */

.support-content__section:not(.animate-fade-in) {
  opacity: 0;
  transform: translateY(30px);
}

/* ===== HOVER EFFECTS FOR INTERACTIVE ELEMENTS ===== */

.support-hero__badge:hover,
.support-nav__link:hover,
.support-content__feature:hover,
.support-content__contact-card:hover,
.badge:hover {
  cursor: pointer;
}

/* ===== SMOOTH SCROLLING ENHANCEMENT ===== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */

@media (forced-colors: active) {
  .support-hero__icon,
  .support-content__contact-icon,
  .support-summary__score-circle {
    forced-color-adjust: none;
  }
}

/* ===== LINK STYLES ===== */

.support-content a {
  color: var(--color-primary-400);
  text-decoration: none;
  transition: color var(--duration-200) var(--ease-out);
}

.support-content a:hover {
  color: var(--color-primary-300);
  text-decoration: underline;
}

/* ===== SECTION SPACING ADJUSTMENTS ===== */

.section {
  position: relative;
}

.section--hero {
  margin-bottom: 0;
}

/* ===== CARD COMMON STYLES ===== */

.card {
  border: none;
  background: transparent;
}

.card-body {
  padding: var(--spacing-8);
}

/* ===== UTILITY CLASSES ===== */

.text-center-container {
  text-align: center;
}

.title-wrapper {
  margin-bottom: var(--spacing-6);
}

/* ===== CUSTOM ANIMATIONS ===== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.support-content__section.animate-fade-in {
  animation: fadeInUp 0.6s var(--ease-out) forwards;
}

/* ===== FEATURE ICON SPECIFIC COLORS ===== */

.support-content__feature:nth-child(1) > i {
  color: var(--color-primary-400);
}

.support-content__feature:nth-child(2) > i {
  color: var(--color-accent-400);
}

.support-content__feature:nth-child(3) > i {
  color: var(--color-success-400);
}

.support-content__feature:nth-child(4) > i {
  color: var(--color-warning-400);
}

.support-content__feature:nth-child(5) > i {
  color: var(--color-primary-500);
}

.support-content__feature:nth-child(6) > i {
  color: var(--color-accent-500);
}

/* ===== ENHANCED VISUAL HIERARCHY ===== */

.support-content__intro strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.support-content__footer strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ===== MICRO-INTERACTIONS ===== */

.support-nav__link:active {
  transform: translateX(4px);
}

.support-content__feature:active {
  transform: translateX(4px);
}

.badge:active {
  transform: translateY(0);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

.support-hero__icon,
.support-content__contact-icon,
.support-summary__score-circle {
  will-change: transform;
}

.support-content__feature > i {
  will-change: transform;
}

.support-content__card,
.support-nav__card,
.support-summary__card {
  will-change: transform, box-shadow;
}