/* ============================================
   Service Page Body Theming System
   ============================================
   Extends hero color themes into body content
   to differentiate service pages from each other.
   ============================================ */

/* ============================================
   CSS Custom Properties per Service
   ============================================ */

/* AI / Machine Learning - Purple/Violet */
.service-ai {
  --service-primary: #a78bfa;
  --service-primary-rgb: 167, 139, 250;
  --service-secondary: #8b5cf6;
  --service-secondary-rgb: 139, 92, 246;
  --service-glow: rgba(167, 139, 250, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(167, 139, 250, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%);
}

/* Blockchain - Blue/Purple */
.service-blockchain {
  --service-primary: #60a5fa;
  --service-primary-rgb: 96, 165, 250;
  --service-secondary: #a78bfa;
  --service-secondary-rgb: 167, 139, 250;
  --service-glow: rgba(96, 165, 250, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(167, 139, 250, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%);
}

/* CyberSecurity - Red/Orange */
.service-security {
  --service-primary: #f87171;
  --service-primary-rgb: 248, 113, 113;
  --service-secondary: #fb923c;
  --service-secondary-rgb: 251, 146, 60;
  --service-glow: rgba(248, 113, 113, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(251, 146, 60, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(251, 146, 60, 0.1) 100%);
}

/* Cloud Computing - Sky/Blue */
.service-cloud {
  --service-primary: #38bdf8;
  --service-primary-rgb: 56, 189, 248;
  --service-secondary: #3b82f6;
  --service-secondary-rgb: 59, 130, 246;
  --service-glow: rgba(56, 189, 248, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
}

/* DevOps - Indigo/Cyan */
.service-devops {
  --service-primary: #818cf8;
  --service-primary-rgb: 129, 140, 248;
  --service-secondary: #22d3ee;
  --service-secondary-rgb: 34, 211, 238;
  --service-glow: rgba(129, 140, 248, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(34, 211, 238, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(34, 211, 238, 0.1) 100%);
}

/* SaaS Development - Emerald/Teal */
.service-saas {
  --service-primary: #34d399;
  --service-primary-rgb: 52, 211, 153;
  --service-secondary: #2dd4bf;
  --service-secondary-rgb: 45, 212, 191;
  --service-glow: rgba(52, 211, 153, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(45, 212, 191, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(45, 212, 191, 0.1) 100%);
}

/* Enterprise Solutions - Amber/Yellow */
.service-enterprise {
  --service-primary: #fbbf24;
  --service-primary-rgb: 251, 191, 36;
  --service-secondary: #facc15;
  --service-secondary-rgb: 250, 204, 21;
  --service-glow: rgba(251, 191, 36, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(250, 204, 21, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(250, 204, 21, 0.1) 100%);
}

/* Custom Software - Blue/Indigo */
.service-custom {
  --service-primary: #3b82f6;
  --service-primary-rgb: 59, 130, 246;
  --service-secondary: #6366f1;
  --service-secondary-rgb: 99, 102, 241;
  --service-glow: rgba(59, 130, 246, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
}

/* Mobile Development - Pink/Rose */
.service-mobile {
  --service-primary: #f472b6;
  --service-primary-rgb: 244, 114, 182;
  --service-secondary: #fb7185;
  --service-secondary-rgb: 251, 113, 133;
  --service-glow: rgba(244, 114, 182, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(251, 113, 133, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(251, 113, 133, 0.1) 100%);
}

/* Web Development - Cyan/Blue */
.service-web {
  --service-primary: #22d3ee;
  --service-primary-rgb: 34, 211, 238;
  --service-secondary: #3b82f6;
  --service-secondary-rgb: 59, 130, 246;
  --service-glow: rgba(34, 211, 238, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
}

/* Data Analysis - Green/Emerald */
.service-data {
  --service-primary: #4ade80;
  --service-primary-rgb: 74, 222, 128;
  --service-secondary: #34d399;
  --service-secondary-rgb: 52, 211, 153;
  --service-glow: rgba(74, 222, 128, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(52, 211, 153, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
}

/* E-commerce - Orange/Amber */
.service-ecommerce {
  --service-primary: #fb923c;
  --service-primary-rgb: 251, 146, 60;
  --service-secondary: #fbbf24;
  --service-secondary-rgb: 251, 191, 36;
  --service-glow: rgba(251, 146, 60, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(251, 191, 36, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
}

/* Game Development - Fuchsia/Purple */
.service-game {
  --service-primary: #e879f9;
  --service-primary-rgb: 232, 121, 249;
  --service-secondary: #a855f7;
  --service-secondary-rgb: 168, 85, 247;
  --service-glow: rgba(232, 121, 249, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(217, 70, 239, 0.08) 0%, rgba(168, 85, 247, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(217, 70, 239, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
}

/* Virtual Reality - Violet/Indigo */
.service-vr {
  --service-primary: #a78bfa;
  --service-primary-rgb: 167, 139, 250;
  --service-secondary: #818cf8;
  --service-secondary-rgb: 129, 140, 248;
  --service-glow: rgba(167, 139, 250, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(129, 140, 248, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(129, 140, 248, 0.1) 100%);
}

/* Digital Innovation - Lime/Green */
.service-innovation {
  --service-primary: #a3e635;
  --service-primary-rgb: 163, 230, 53;
  --service-secondary: #4ade80;
  --service-secondary-rgb: 74, 222, 128;
  --service-glow: rgba(163, 230, 53, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(132, 204, 22, 0.08) 0%, rgba(74, 222, 128, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(132, 204, 22, 0.15) 0%, rgba(74, 222, 128, 0.1) 100%);
}

/* Product Management - Slate/Blue */
.service-product {
  --service-primary: #94a3b8;
  --service-primary-rgb: 148, 163, 184;
  --service-secondary: #60a5fa;
  --service-secondary-rgb: 96, 165, 250;
  --service-glow: rgba(148, 163, 184, 0.3);
  --service-gradient: linear-gradient(135deg, rgba(100, 116, 139, 0.08) 0%, rgba(96, 165, 250, 0.05) 100%);
  --service-gradient-strong: linear-gradient(135deg, rgba(100, 116, 139, 0.15) 0%, rgba(96, 165, 250, 0.1) 100%);
}

/* ============================================
   Themed Section Backgrounds
   ============================================ */

/* Services/Features sections with subtle themed gradient */
[class*="service-"] main section:not(.hero-section) {
  position: relative;
}

[class*="service-"] main section:not(.hero-section)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--service-gradient);
  pointer-events: none;
  z-index: 0;
}

[class*="service-"] main section:not(.hero-section) > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   Themed Card Styles
   ============================================ */

/* Enhanced card hover states with service accent */
[class*="service-"] .bg-gray-900\/50,
[class*="service-"] .bg-gray-800 {
  transition: all 0.3s ease;
  border-color: rgba(255, 255, 255, 0.1);
}

[class*="service-"] .bg-gray-900\/50:hover,
[class*="service-"] .bg-gray-800:hover {
  border-color: var(--service-primary) !important;
  box-shadow: 0 0 30px var(--service-glow);
}

/* Themed card accent stripe */
[class*="service-"] .rounded-xl.bg-gray-900\/50::after,
[class*="service-"] .rounded-xl.bg-gray-800::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--service-primary), var(--service-secondary));
  border-radius: 1rem 1rem 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

[class*="service-"] .rounded-xl.bg-gray-900\/50:hover::after,
[class*="service-"] .rounded-xl.bg-gray-800:hover::after {
  opacity: 1;
}

/* ============================================
   Themed Icon Containers
   ============================================ */

/* Service-themed icon backgrounds */
[class*="service-"] .w-14.h-14,
[class*="service-"] .w-12.h-12 {
  background: rgba(var(--service-primary-rgb), 0.15) !important;
  border: 1px solid rgba(var(--service-primary-rgb), 0.3);
}

[class*="service-"] .w-14.h-14 svg,
[class*="service-"] .w-12.h-12 svg {
  color: var(--service-primary) !important;
}

/* ============================================
   Themed Checkmarks & List Markers
   ============================================ */

/* Override checkmark colors with service accent */
[class*="service-"] .text-purple-400.mr-2,
[class*="service-"] .text-blue-400.mr-2,
[class*="service-"] .text-red-400.mr-2,
[class*="service-"] .text-green-400.mr-2,
[class*="service-"] .text-yellow-400.mr-2,
[class*="service-"] .text-orange-400.mr-2,
[class*="service-"] .text-violet-400.mr-2 {
  color: var(--service-primary) !important;
}

/* List item checkmark icons */
[class*="service-"] ul li svg.text-purple-400,
[class*="service-"] ul li svg.text-blue-400,
[class*="service-"] ul li svg.text-red-400 {
  color: var(--service-primary) !important;
}

/* ============================================
   Themed Section Headers
   ============================================ */

/* Section titles with themed underline accent */
[class*="service-"] section h2 {
  position: relative;
  display: inline-block;
}

[class*="service-"] section .text-center h2::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--service-primary), var(--service-secondary));
  border-radius: 2px;
}

/* ============================================
   Themed CTA Sections
   ============================================ */

/* Override CTA button backgrounds */
[class*="service-"] section a[href*="contact"].bg-purple-600,
[class*="service-"] section a[href*="contact"].bg-blue-600,
[class*="service-"] section a[href*="contact"].bg-red-600,
[class*="service-"] section a[href*="contact"].bg-green-600 {
  background: linear-gradient(135deg, var(--service-secondary), var(--service-primary)) !important;
  box-shadow: 0 4px 20px var(--service-glow);
}

[class*="service-"] section a[href*="contact"].bg-purple-600:hover,
[class*="service-"] section a[href*="contact"].bg-blue-600:hover,
[class*="service-"] section a[href*="contact"].bg-red-600:hover,
[class*="service-"] section a[href*="contact"].bg-green-600:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--service-glow);
}

/* Outline button theming */
[class*="service-"] section a.border-purple-400,
[class*="service-"] section a.border-blue-400,
[class*="service-"] section a.border-red-400 {
  border-color: var(--service-primary) !important;
}

[class*="service-"] section a.border-purple-400:hover,
[class*="service-"] section a.border-blue-400:hover,
[class*="service-"] section a.border-red-400:hover {
  background: rgba(var(--service-primary-rgb), 0.2) !important;
}

/* ============================================
   Themed Case Study Cards
   ============================================ */

/* Case study accent badges */
[class*="service-"] .bg-purple-500\/20,
[class*="service-"] .bg-blue-500\/20,
[class*="service-"] .bg-yellow-500\/20 {
  background: rgba(var(--service-primary-rgb), 0.2) !important;
}

[class*="service-"] .text-purple-400.text-xs,
[class*="service-"] .text-blue-400.text-xs {
  color: var(--service-primary) !important;
}

/* Case study "Read More" links */
[class*="service-"] a.text-purple-400.flex,
[class*="service-"] a.text-blue-400.flex {
  color: var(--service-primary) !important;
}

[class*="service-"] a.text-purple-400.flex:hover,
[class*="service-"] a.text-blue-400.flex:hover {
  color: var(--service-secondary) !important;
}

/* ============================================
   Themed Gradient CTA Banners
   ============================================ */

/* Full-width CTA sections */
[class*="service-"] section.bg-gradient-to-r.from-orange-600,
[class*="service-"] section.bg-gradient-to-r.from-purple-600,
[class*="service-"] section.bg-gradient-to-r.from-blue-600 {
  background: linear-gradient(135deg, 
    rgba(var(--service-secondary-rgb), 0.9), 
    rgba(var(--service-primary-rgb), 0.9)
  ) !important;
}

/* ============================================
   Themed Process/Step Indicators
   ============================================ */

/* Numbered step circles */
[class*="service-"] .bg-orange-600\/20,
[class*="service-"] .bg-purple-600\/20,
[class*="service-"] .bg-blue-600\/20 {
  background: rgba(var(--service-primary-rgb), 0.2) !important;
}

[class*="service-"] .text-orange-400.text-2xl,
[class*="service-"] .text-purple-400.text-2xl,
[class*="service-"] .text-blue-400.text-2xl {
  color: var(--service-primary) !important;
}

/* ============================================
   Compliance/Badge Sections
   ============================================ */

/* Compliance badge containers */
[class*="service-"] .w-24.h-24.bg-gray-900 {
  border: 1px solid rgba(var(--service-primary-rgb), 0.3);
  transition: all 0.3s ease;
}

[class*="service-"] .w-24.h-24.bg-gray-900:hover {
  border-color: var(--service-primary);
  box-shadow: 0 0 20px var(--service-glow);
}

/* ============================================
   Floating Accent Orbs (Subtle Background)
   ============================================ */

/* Add subtle floating orb effect to main content area */
[class*="service-"] main::before {
  content: "";
  position: fixed;
  top: 30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--service-glow) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  animation: floatOrb 20s ease-in-out infinite;
}

[class*="service-"] main::after {
  content: "";
  position: fixed;
  bottom: 20%;
  right: -10%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(var(--service-secondary-rgb), 0.2) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  animation: floatOrb 25s ease-in-out infinite reverse;
}

@keyframes floatOrb {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(30px, -20px);
  }
  50% {
    transform: translate(-20px, 30px);
  }
  75% {
    transform: translate(20px, 20px);
  }
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
  [class*="service-"] main::before,
  [class*="service-"] main::after {
    display: none; /* Hide floating orbs on mobile for performance */
  }
  
  [class*="service-"] section .text-center h2::after {
    width: 40px;
  }
}