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

/* Focus-visible outlines */
:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.nav-link:focus-visible,
.cta-button:focus-visible,
.cta-btn-header:focus-visible,
.submit-btn:focus-visible,
.pricing-btn:focus-visible,
.lang-toggle:focus-visible,
.mobile-menu-toggle:focus-visible,
.back-to-top:focus-visible,
.footer-links a:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: high) {
    :root {
        --border-color: #000;
        --text-secondary: #333;
    }

    .section-title {
        -webkit-text-fill-color: initial;
        background: none;
        color: var(--text-primary);
    }

    .section-header.light .section-title {
        -webkit-text-fill-color: initial;
        background: none;
        color: white;
    }

    .accent-card::before,
    .accent-card::after {
        --corner-thickness: 3px;
    }

    :focus-visible {
        outline-width: 4px;
    }
}

/* Print Styles */
@media print {

    .header,
    .back-to-top,
    .loading-screen,
    .hero-cta,
    .contact-form-container {
        display: none !important;
    }

    .hero-section {
        min-height: auto;
        padding: var(--spacing-xl) 0;
        background: white;
        color: black;
    }

    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
}

/* ====================================
   ENHANCED ANIMATIONS & EFFECTS
   ==================================== */

/* Animated Gradient Background for Hero */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
            var(--secondary-color) 0%,
            var(--primary-color) 25%,
            var(--secondary-color) 50%,
            var(--primary-color) 75%,
            var(--secondary-color) 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    z-index: 0;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Floating Particles Effect */
.hero-section .hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(3px 3px at 200px 50px, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(2px 2px at 250px 140px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 300px 30px, rgba(255, 255, 255, 0.2), transparent);
    background-repeat: repeat;
    background-size: 350px 200px;
    animation: particleFloat 20s linear infinite;
    opacity: 0.6;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-30px) translateX(15px);
    }

    100% {
        transform: translateY(0) translateX(0);
    }
}

/* Animated Rings */
.hero-section .hero-background::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: ringPulse 4s ease-in-out infinite;
}

@keyframes ringPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.1;
    }
}

/* Glowing Text Effect for Hero Title */
.hero-title {
    text-shadow:
        0 0 40px rgba(255, 255, 255, 0.3),
        0 0 80px rgba(0, 153, 204, 0.2);
}

/* Gradient Text Animation */
.gradient-text {
    background: linear-gradient(90deg,
            #ffffff 0%,
            var(--accent-color) 25%,
            #ffffff 50%,
            var(--accent-color) 75%,
            #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 3s linear infinite;
}

@keyframes textShine {
    to {
        background-position: 200% center;
    }
}

/* Icon Hover Transition (replaces perpetual float) */
.about-icon,
.service-icon,
.industry-icon {
    transition: transform var(--transition-smooth), background 0.4s ease;
}

.about-card:hover .about-icon,
.service-card:hover .service-icon,
.industry-card:hover .industry-icon {
    transform: scale(1.05);
}

/* Bottom Accent Line on Cards (non-accent-card only) */
.about-card,
.service-card,
.industry-card {
    position: relative;
    overflow: hidden;
}

.about-card::after,
.industry-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--corner-accent-1), var(--corner-accent-2));
    border-radius: 3px 3px 0 0;
    transition: width var(--transition-smooth);
}

.about-card:hover::after,
.industry-card:hover::after {
    width: 100%;
}

/* Service cards use accent-card corners instead of bottom line */
.service-card.accent-card {
    overflow: visible;
}

/* Process Step Animations */
.step-number {
    position: relative;
    overflow: hidden;
}

.step-number::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 70%);
    animation: stepShine 4s ease-in-out 1;
}

@keyframes stepShine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* Animated Connecting Lines */
.process-arrow {
    position: relative;
}

.process-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            var(--primary-color),
            transparent);
    animation: lineFlow 1.5s ease-in-out infinite;
}

@keyframes lineFlow {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleX(0.5);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Stat Counter Glow */
.stat-number {
    position: relative;
}

.stat-item:hover .stat-number {
    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.8),
        0 0 40px rgba(0, 153, 204, 0.6),
        0 0 60px rgba(0, 153, 204, 0.4);
    transition: text-shadow var(--transition-normal);
}

/* Ripple Button Effect */
.cta-button,
.submit-btn,
.pricing-btn {
    position: relative;
    overflow: hidden;
}

.cta-button::after,
.submit-btn::after,
.pricing-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.cta-button:active::after,
.submit-btn:active::after,
.pricing-btn:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Magnetic Hover Effect on Buttons */
.cta-button.primary:hover {
    box-shadow:
        0 10px 30px rgba(0, 153, 204, 0.4),
        0 0 0 2px rgba(0, 153, 204, 0.2);
}

/* Feature Category positioning */
.feature-category {
    position: relative;
}

/* Typing Cursor Effect */
.typing-cursor::after {
    content: '|';
    animation: blink 0.7s infinite;
    margin-left: 2px;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* Pricing Card Spotlight Effect */
.pricing-card.featured::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg,
            transparent,
            var(--primary-color),
            transparent 30%);
    animation: spotlightRotate 4s linear infinite;
    opacity: 0.1;
}

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

/* Code Block Syntax Highlighting Animation */
.code-preview code {
    position: relative;
}

.code-preview:hover code {
    text-shadow: 0 0 10px rgba(0, 153, 204, 0.3);
}

/* Form Input Focus Animation */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    animation: inputGlow 0.5s ease;
}

@keyframes inputGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(11, 75, 163, 0.4);
    }

    100% {
        box-shadow: 0 0 0 3px rgba(11, 75, 163, 0.1);
    }
}

/* Trust Badge Hover Effects */
.trust-label {
    transition: all var(--transition-normal);
}

.trust-label:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Hero Badge Shimmer */
.hero-badge {
    position: relative;
    overflow: hidden;
}

.hero-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    animation: badgeShimmer 2s ease-in-out infinite;
}

@keyframes badgeShimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Scroll Indicator Enhanced */
.scroll-indicator i {
    animation: scrollBounce 1.5s ease-in-out infinite;
}

@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* Back to Top Pulse */
.back-to-top.visible {
    animation: backToTopPulse 2s ease-in-out infinite;
}

@keyframes backToTopPulse {

    0%,
    100% {
        box-shadow: 0 4px 15px rgba(11, 75, 163, 0.4);
    }

    50% {
        box-shadow: 0 4px 25px rgba(11, 75, 163, 0.6);
    }
}

/* Dev Feature Icon Bounce */
.dev-feature i {
    display: inline-block;
}

.dev-feature:hover i {
    animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(-5px);
    }

    75% {
        transform: translateY(-8px);
    }
}

/* Section Title Underline Animation */
.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

.section-header:hover .section-title::after {
    width: 100px;
}

.section-header.light .section-title::after {
    background: linear-gradient(90deg, white, var(--accent-color));
}

/* Footer Link Arrow Animation */
.footer-links a {
    position: relative;
    padding-left: 0;
    transition: all var(--transition-normal);
}

.footer-links a::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.6rem;
    position: absolute;
    left: -15px;
    opacity: 0;
    transition: all var(--transition-normal);
}

.footer-links a:hover {
    padding-left: 15px;
}

.footer-links a:hover::before {
    opacity: 1;
    left: 0;
}

/* Loading Screen Enhanced */
.loading-logo {
    animation: logoBreath 2s ease-in-out infinite;
}

@keyframes logoBreath {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Nav Link Active State */
.nav-link.active {
    color: var(--primary-color);
}

.nav-link.active::after {
    width: 100%;
}

/* ====================================
   MOBILE-SPECIFIC OPTIMIZATIONS
   ==================================== */

/* Touch-friendly tap targets (minimum 44x44px) */
@media (max-width: 768px) {

    /* Ensure minimum touch target sizes */
    .nav-link,
    .footer-links a,
    .cta-button,
    .submit-btn,
    .pricing-btn,
    .back-to-top,
    .mobile-menu-toggle {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Larger touch targets for form elements */
    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 48px;
        font-size: 16px;
        /* Prevents iOS zoom on focus */
    }

    /* Improve mobile menu touch area */
    .mobile-menu-toggle {
        padding: 12px;
        margin: -12px;
        margin-right: 0;
    }

    /* Larger nav links in mobile menu */
    .navbar-nav .nav-link {
        padding: var(--spacing-md) var(--spacing-lg);
        min-height: 56px;
    }

    /* Better spacing for mobile cards */
    .about-card,
    .service-card,
    .industry-card,
    .pricing-card {
        padding: var(--spacing-xl);
    }

    /* Disable hover-dependent animations on touch */
    .about-card::after,
    .industry-card::after {
        display: none;
    }

    .accent-card::before,
    .accent-card::after {
        display: none;
    }

    /* Simplify card transforms for touch */
    .about-card:hover,
    .service-card:hover,
    .industry-card:hover,
    .pricing-card:hover {
        transform: none;
    }

    /* Active state for touch feedback */
    .about-card:active,
    .service-card:active,
    .industry-card:active,
    .pricing-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* Button active states for touch */
    .cta-button:active,
    .submit-btn:active,
    .pricing-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    /* Disable parallax on mobile for performance */
    .hero-background,
    .hero-content {
        transform: none !important;
    }

    /* Reduce animation complexity */
    .hero-section::before {
        animation: none;
        background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    }

    .hero-section .hero-background::before,
    .hero-section .hero-background::after {
        display: none;
    }

    /* Simplify floating icons */
    .about-icon,
    .service-icon,
    .industry-icon {
        animation: none;
    }

    /* Disable cursor glow on touch devices */
    .cursor-glow {
        display: none !important;
    }

    /* Improve scroll indicator visibility */
    .scroll-indicator {
        bottom: var(--spacing-lg);
    }

    /* Better code preview on mobile */
    .code-preview {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .code-preview pre {
        min-width: 500px;
    }

    /* Stack contact items better */
    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .contact-item i {
        margin: 0 auto;
    }

    /* Improve footer on mobile */
    .footer-links,
    .footer-contact {
        align-items: center;
    }

    .footer-links a::before {
        display: none;
    }

    .footer-links a:hover {
        padding-left: 0;
    }
}

/* Small phones */
@media (max-width: 480px) {

    /* Even larger touch targets */
    .cta-button {
        padding: var(--spacing-md) var(--spacing-xl);
        font-size: 1rem;
    }

    /* Stack trust badges */
    .trust-badges {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    /* Full-width pricing cards */
    .pricing-card {
        margin: 0 calc(-1 * var(--spacing-md));
        border-radius: 0;
    }

    /* Smaller section padding */
    .about-section,
    .services-section,
    .features-section,
    .industries-section,
    .pricing-section,
    .developers-section,
    .contact-section {
        padding: var(--spacing-3xl) 0;
    }

    /* Improve hero stats layout */
    .stat-item {
        width: 100%;
        padding: var(--spacing-md);
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-md);
    }
}

/* Touch device detection via hover capability */
@media (hover: none) and (pointer: coarse) {

    /* Disable all hover-only effects */
    .about-card:hover,
    .service-card:hover,
    .industry-card:hover,
    .feature-category:hover,
    .pricing-card:hover,
    .dev-feature:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    /* Disable tilt effect */
    .about-card,
    .service-card,
    .industry-card,
    .pricing-card,
    .feature-category {
        transform: none !important;
    }

    /* Disable magnetic button effect */
    .cta-button,
    .cta-btn-header,
    .submit-btn,
    .pricing-btn {
        transform: none !important;
    }

    /* Disable shimmer and accent effects */
    .hero-badge::before {
        display: none;
    }

    .accent-card::before,
    .accent-card::after {
        display: none;
    }

    /* Show underline always for clarity */
    .section-title::after {
        width: 80px;
    }

    /* Disable floating animations */
    .about-icon,
    .service-icon,
    .industry-icon,
    .dev-feature i {
        animation: none;
    }
}

/* Landscape phone optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: var(--spacing-4xl) 0 var(--spacing-2xl);
    }

    .hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .stat-item {
        width: auto;
        min-width: 100px;
    }

    .scroll-indicator {
        display: none;
    }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    .header {
        padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
        padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    }

    .footer {
        padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
    }

    .navbar-container {
        padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
        padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    }
}

/* ====================================
   SKELETON LOADING STATES
   ==================================== */
.loading-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-card .skeleton-logo {
    height: 140px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-card .skeleton-content {
    padding: var(--spacing-lg);
}

.skeleton-card .skeleton-title {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
    width: 70%;
}

.skeleton-card .skeleton-text {
    height: 14px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
}

.skeleton-card .skeleton-text:last-child {
    width: 50%;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes skeleton-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* High DPI / Retina display optimizations */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper borders */
    .about-card,
    .service-card,
    .industry-card,
    .pricing-card,
    .contact-form-container {
        border-width: 0.5px;
    }
}