/* Services Page Styles - Clean Design */

/* Reset and base styles */
:root {
    --primary-dark: #081B31;
    --primary-blue: #0a2a5a;
    --accent-gold: #AA8338;
    --accent-light-gold: #c9a455;
    --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Performance optimizations */
.services-hero-section,
.tech-card,
.business-model-card {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Hero Section - Matching About page */
.services-hero-section {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 50%, #f9fafb 100%);
    position: relative;
    overflow: hidden;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    align-items: center;
}

.hero-title-gradient {
    background-size: 200% auto;
    animation: gradientFlow 8s ease-in-out infinite;
    display: inline-block;
}

@keyframes gradientFlow {
    0%, 100% { 
        background-position: 0% center; 
    }
    50% { 
        background-position: 100% center; 
    }
}

.hero-badge {
    animation: badgeGlow 3s ease-in-out infinite alternate;
    transition: transform 0.3s var(--animation-timing);
}

.hero-badge:hover {
    transform: translateY(-2px);
}

@keyframes badgeGlow {
    from { 
        box-shadow: 0 0 10px rgba(170, 131, 56, 0.3); 
    }
    to { 
        box-shadow: 0 0 20px rgba(170, 131, 56, 0.6), 0 0 30px rgba(170, 131, 56, 0.3); 
    }
}

/* Floating stats - Hardware accelerated */

/* --- Floating Stat Card: FINAL OVERRIDE --- */
.floating-stat {
    border: 1.5px solid #D1D5DB !important; /* Tailwind gray-300 */
    border-radius: 0.75rem !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0.75rem 1.5rem !important;
    min-width: 120px !important;
    min-height: 60px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s;
    animation: floatStat 6s var(--animation-timing) infinite;
    transform: translateZ(0);
    z-index: 1;
}

.floating-stat:hover {
    transform: translateY(-5px) translateZ(0);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

@keyframes floatStat {
    0%, 100% { 
        transform: translateY(0) translateZ(0); 
    }
    50% { 
        transform: translateY(-10px) translateZ(0); 
    }
}

/* Technology Cards - Stats Counter Style */
.tech-card {
    transition: all 0.5s var(--animation-timing);
    height: 100%;
}

.tech-card > div {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tech-border-animation {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 24px;
    background: linear-gradient(45deg, 
        #081B31, 
        #AA8338, 
        #081B31, 
        #AA8338, 
        #081B31);
    background-size: 400% 400%;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
    animation: borderGlow 8s ease infinite;
}

@keyframes borderGlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.tech-card .tech-border-animation {
    opacity: 1;
}

.tech-card:hover > div {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(8, 27, 49, 0.2);
}

/* Business Model Cards - White Background */
.business-model-card {
    transition: all 0.5s var(--animation-timing);
    height: 100%;
}

.business-model-card > div {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.business-model-card:hover {
    transform: translateY(-8px) translateZ(0);
}


/* Loading states */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Responsive Design */
@media (max-width: 640px) {
    .hero-title-gradient {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }
    
    .floating-stat {
        padding: 0.5rem 1rem;
        min-width: 90px;
    }
    
    .tech-card > div,
    .business-model-card > div {
        padding: 1.5rem !important;
    }
}

@media (max-width: 767px) {
    .tech-card > div {
        padding: 1.5rem;
    }
}

/* Desktop enhancements */
@media (min-width: 768px) {
    .tech-card,
    .business-model-card {
        min-height: 280px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .business-model-card > div,
    .tech-card > div {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .floating-stat {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .tech-card > div {
        background: linear-gradient(to bottom right, rgba(8, 27, 49, 0.8), rgba(8, 27, 49, 0.9)) !important;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
    
    .floating-stat,
    .tech-border-animation {
        animation: none !important;
    }
    
    .tech-card:hover > div,
    .business-model-card:hover {
        transform: none;
    }
}

/* Print styles */
@media print {
    .tech-card,
    .business-model-card {
        break-inside: avoid;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        background: white !important;
        color: black !important;
    }
    
    .services-hero-section {
        background: white !important;
        color: black !important;
        min-height: auto;
    }
    
    .hero-title-gradient {
        background: none !important;
        color: black !important;
        -webkit-text-fill-color: black !important;
    }
    
    /* Hide decorative elements */
    .hero-badge,
    .floating-stat,
    .tech-border-animation {
        display: none !important;
    }
}

/* Accessibility improvements */
@media (hover: none) and (pointer: coarse) {
    .tech-card:hover > div,
    .business-model-card:hover {
        transform: none;
    }
}

/* Focus styles for accessibility */
a:focus,
button:focus,
.tech-card:focus,
.business-model-card:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Ensure proper stacking */
.relative.z-10 {
    z-index: 10;
}

.absolute.z-10 {
    z-index: 10;
}

/* Ensure text is visible */
.text-transparent {
    -webkit-text-fill-color: transparent;
}

/* AOS animation fallback */
[data-aos] {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-aos].aos-animate {
    opacity: 1;
}

/* Page load animation */
.page-loaded {
    opacity: 1 !important;
}

.services-page-loaded {
    opacity: 1;
}

/* Smooth transitions */
.transition-all {
    transition-property: all;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

/* Tech features tags */
.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1);
}

.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}

.text-white\/80 {
    color: rgba(255, 255, 255, 0.8);
}

/* Background patterns */
.bg-\[radial-gradient\(circle_at_1px_1px\2c \#AA8338_1px\2c transparent_0\)\] {
    background-image: radial-gradient(circle at 1px 1px, #AA8338 1px, transparent 0);
}

.bg-\[length\:40px_40px\] {
    background-size: 40px 40px;
}

/* Enhanced Progress Cards Animations */

/* Progress Ring Animation */
.progress-ring {
    animation: progressRotate 20s linear infinite;
    transform-origin: center;
}

@keyframes progressRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Progress Bar Glow Animation */
.animate-progress-glow {
    animation: progressGlow 3s ease-in-out infinite alternate;
    position: relative;
}

@keyframes progressGlow {
    0% {
        opacity: 1;
        box-shadow: 0 0 5px rgba(8, 27, 49, 0.3);
    }
    100% {
        opacity: 0.8;
        box-shadow: 0 0 10px rgba(8, 27, 49, 0.5), 0 0 20px rgba(8, 27, 49, 0.2);
    }
}

.animate-progress-glow.text-\[\#AA8338\] {
    animation: progressGlowGold 3s ease-in-out infinite alternate;
}

@keyframes progressGlowGold {
    0% {
        opacity: 1;
        box-shadow: 0 0 5px rgba(170, 131, 56, 0.3);
    }
    100% {
        opacity: 0.8;
        box-shadow: 0 0 10px rgba(170, 131, 56, 0.5), 0 0 20px rgba(170, 131, 56, 0.2);
    }
}

/* Text Glow Animation */
.animate-text-glow {
    animation: textGlow 4s ease-in-out infinite alternate;
}

@keyframes textGlow {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.9;
        text-shadow: 0 0 10px rgba(8, 27, 49, 0.2);
    }
    100% {
        opacity: 1;
    }
}

/* Text Slide Animation */
.animate-text-slide {
    animation: textSlideIn 1s ease-out forwards;
    opacity: 0;
    transform: translateY(10px);
}

@keyframes textSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Animation */
.animate-fade-in {
    animation: fadeIn 1.5s ease-out forwards;
    opacity: 0;
    animation-delay: 0.3s;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Feature Item Slide Animation */
.animate-feature-slide {
    opacity: 0;
    transform: translateX(-10px);
    animation: featureSlideIn 0.6s ease-out forwards;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

@keyframes featureSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Number Count Animation */
.animate-number {
    animation: numberPulse 2s ease-in-out infinite;
}

@keyframes numberPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Status Text Animation */
.animate-status-text {
    animation: statusBlink 3s ease-in-out infinite;
}

@keyframes statusBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Slow Pulse Animation */
.animate-pulse-slow {
    animation: pulseSlow 4s ease-in-out infinite;
}

@keyframes pulseSlow {
    0%, 100% {
        opacity: 0.05;
    }
    50% {
        opacity: 0.1;
    }
}

/* Floating Particles */
.animate-float-slow {
    animation: floatSlow 6s ease-in-out infinite;
}

.animate-float-slower {
    animation: floatSlower 8s ease-in-out infinite;
}

@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
    }
    33% {
        transform: translateY(-5px) translateX(2px);
        opacity: 0.5;
    }
    66% {
        transform: translateY(3px) translateX(-2px);
        opacity: 0.4;
    }
}

@keyframes floatSlower {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.2;
    }
    25% {
        transform: translateY(-4px) translateX(3px);
        opacity: 0.4;
    }
    50% {
        transform: translateY(2px) translateX(-3px);
        opacity: 0.3;
    }
    75% {
        transform: translateY(-2px) translateX(1px);
        opacity: 0.35;
    }
}

/* Card Hover Enhancement */
.progress-card:hover .animate-progress-glow {
    animation: progressGlowHover 1.5s ease-in-out infinite alternate;
}

@keyframes progressGlowHover {
    0% {
        opacity: 0.9;
        box-shadow: 0 0 8px rgba(8, 27, 49, 0.4);
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 15px rgba(8, 27, 49, 0.6), 0 0 25px rgba(8, 27, 49, 0.3);
    }
}

.progress-card:hover .progress-ring {
    animation-duration: 10s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .progress-ring {
        animation-duration: 30s;
    }
    
    .animate-progress-glow {
        animation-duration: 4s;
    }
    
    .animate-float-slow,
    .animate-float-slower {
        animation: none;
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .progress-ring,
    .animate-progress-glow,
    .animate-text-glow,
    .animate-text-slide,
    .animate-fade-in,
    .animate-feature-slide,
    .animate-number,
    .animate-status-text,
    .animate-pulse-slow,
    .animate-float-slow,
    .animate-float-slower {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}