/* Snaiotech - Image 2 Theme: Dark Blue/Purple, Glowing Networks */

:root {
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #1d4ed8 100%);
    --gradient-dark: linear-gradient(180deg, #0f172a 0%, #1e1b4b 30%, #312e81 60%, #1e3a8a 100%);
    --gradient-hero: linear-gradient(135deg, #0c1929 0%, #1a1a3e 25%, #2d2a5e 50%, #1e3a5f 75%, #0f172a 100%);
    --glow-cyan: rgba(34, 211, 238, 0.4);
    --glow-magenta: rgba(236, 72, 153, 0.3);
    --glow-blue: rgba(59, 130, 246, 0.5);
}

/* Theme: Dark gradient backgrounds matching image 2 */
.theme-snaiotech {
    background: var(--gradient-dark);
    color: #e2e8f0;
}

/* Hero gradient overlay - dark blue to purple */
.hero-theme-bg {
    background: linear-gradient(135deg, #0c1929 0%, #1a1a3e 20%, #2d2a5e 40%, #1e3a5f 60%, #1e1b4b 80%, #0f172a 100%);
}

/* Glowing network pattern */
.bg-network-pattern {
    background-image: 
        radial-gradient(circle at 20% 50%, var(--glow-cyan) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--glow-magenta) 0%, transparent 40%),
        radial-gradient(circle at 60% 80%, var(--glow-blue) 0%, transparent 45%),
        linear-gradient(180deg, transparent 0%, rgba(30, 58, 95, 0.1) 100%);
}

/* Section backgrounds - alternating dark tones */
.section-dark {
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
}

.section-medium {
    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
}

/* Glow effects on cards/buttons */
.glow-card {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.15), 0 0 60px rgba(124, 58, 237, 0.1);
}

.glow-card:hover {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.25), 0 0 80px rgba(124, 58, 237, 0.15);
}

/* CTA Button glow */
.btn-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(124, 58, 237, 0.2);
}

.btn-glow:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(124, 58, 237, 0.3);
}

/* Text on dark - white/light for contrast */
.text-theme-light { color: #f1f5f9; }
.text-theme-muted { color: #94a3b8; }
.text-theme-accent { 
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient text - cyan to magenta like image 2 */
.gradient-text {
    background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 25%, #a78bfa 50%, #c084fc 75%, #38bdf8 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease infinite;
}

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

/* Service card - dark with glow border */
.card-theme {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.3);
    backdrop-filter: blur(10px);
}

.card-theme:hover {
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.2);
}

/* Utility for screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Card hover lift effect */
.card-hover {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s;
}

.card-hover:hover {
    transform: translateY(-8px);
}

/* Focus visible for accessibility - high contrast */
*:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* Reduced motion - respect user preference */
[data-a11y-reduce-motion="true"] .gradient-text {
    animation: none;
}

/* High contrast mode (accessibility) */
[data-a11y-high-contrast="true"] {
    --glow-cyan: transparent;
    --glow-magenta: transparent;
}

[data-a11y-high-contrast="true"] .card-theme {
    border: 2px solid #fff;
    background: #1e293b;
}

[data-a11y-high-contrast="true"] *:focus-visible {
    outline: 3px solid #fff;
}

/* SNAIO-WEB style animations */
@keyframes fade-in-up {
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 1s ease-out forwards; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Team flip card */
.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }
.flip-card-inner { transition: transform 0.7s; transform-style: preserve-3d; }
.group:hover .flip-card-inner { transform: rotateY(180deg); }

/* Line clamp fallback */
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }