/* ============================================
   SERVICES PAGE STYLES
   ============================================ */

.services-page-body {
  background-blend-mode: overlay;
}

.services-hero-section {
  padding: var(--space-16) var(--space-4) var(--space-12);
  margin: var(--space-4) 0;
}

@media (min-width: 768px) {
  .services-hero-section {
    padding: var(--space-20) var(--space-6) var(--space-16);
    margin: var(--space-6) 0;
  }
}

@media (min-width: 1024px) {
  .services-hero-section {
    padding: var(--space-24) var(--space-8) var(--space-20);
    margin: var(--space-8) 0;
  }
}

.services-title {
  font-size: var(--text-6xl);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: var(--space-6);
  color: var(--white);
}

.services-description {
  font-size: var(--text-xl);
  color: var(--neutral-400);
  margin-bottom: var(--space-12);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.services-list {
  margin-top: var(--space-8);
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(160deg, rgba(var(--dark-800-rgb), 0.88), rgba(var(--dark-700-rgb), 0.72));
  box-shadow: 0 20px 42px rgba(6, 8, 20, 0.32);
}

@media (min-width: 768px) {
  .services-list {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .services-list {
    padding: var(--space-8);
  }
}

.main-service-item {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  margin-bottom: var(--space-8);
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}

.main-service-item.animate {
  opacity: 0;
  transform: translateY(20px);
}

.main-service-item.show {
  opacity: 1;
  transform: translateY(0);
}

.service-number {
  font-size: var(--text-2xl);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  opacity: 0.5;
  min-width: 2rem;
}

.service-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--white);
  margin-bottom: var(--space-2);
}

.service-content p {
  color: var(--neutral-400);
  margin-bottom: var(--space-4);
}

.service-details-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.service-detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--neutral-300);
}

.service-bullet {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.service-bullet-blue {
  background-color: var(--neon-blue);
}

.service-bullet-purple {
  background-color: var(--neon-purple);
}

.service-bullet-orange {
  background-color: var(--neon-orange);
}

.services-cta {
  text-align: center;
  margin-top: var(--space-16);
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .services-cta {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .services-cta {
    padding: var(--space-8);
  }
}

.services-cta-button {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: var(--white);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  transition: all 0.3s ease;
  transform: scale(1);
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(var(--neon-blue-rgb), 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.services-cta-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(var(--neon-blue-rgb), 0.4);
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: var(--white);
}

.services-cta-button svg {
  width: 1rem;
  height: 1rem;
  margin-left: var(--space-2);
  transition: transform 0.3s ease;
}

.services-cta-button:hover svg {
  transform: translateX(0.25rem);
}