/* ═══════════════════════════════════════════════════════
   SPARK4AI — GLOBAL FUTURISTIC DESIGN SYSTEM v2.0
   Applied globally via header.php
   ═══════════════════════════════════════════════════════ */

/* ── Service / Industry Hero: Enhanced ── */
.service-hero, .industry-hero {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(78,205,196,0.12) 0%, transparent 60%),
                linear-gradient(160deg, #040c1a 0%, #06111f 35%, #0a1628 70%, #040d1c 100%) !important;
}

.service-hero h1, .industry-hero h1 {
    background: linear-gradient(135deg, #fff 0%, #a8f0ec 35%, #4ecdc4 55%, #c4b5fd 85%, #fff 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 7s ease infinite;
}

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

.service-hero h1 i, .industry-hero h1 i {
    -webkit-text-fill-color: initial;
    background: none;
    color: #4ecdc4 !important;
    background: rgba(78,205,196,0.1) !important;
    border: 1px solid rgba(78,205,196,0.25) !important;
    box-shadow: 0 0 30px rgba(78,205,196,0.2), inset 0 0 20px rgba(78,205,196,0.05) !important;
}

.service-hero .hero-subtitle, .industry-hero .hero-subtitle {
    color: rgba(200,230,240,0.75) !important;
}

/* About hero gradient text */
.about-hero h1 {
    text-shadow: none !important;
}

/* ── Service / Industry Intro: Dark ── */
.service-intro, .industry-intro {
    background: linear-gradient(180deg, #070f1d 0%, #0a1628 100%) !important;
}

.service-intro .intro-content h2,
.industry-intro .intro-content h2 {
    color: #ffffff !important;
}

.service-intro .intro-content p,
.industry-intro .intro-content p {
    color: rgba(200,225,235,0.65) !important;
}

.intro-image img {
    border-radius: 24px !important;
    box-shadow: 0 0 60px rgba(78,205,196,0.15), 0 30px 60px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(78,205,196,0.15) !important;
}

.intro-image::before {
    border-color: rgba(78,205,196,0.2) !important;
}

/* ── Features Section: Dark Glassmorphism ── */
.features-section {
    background: linear-gradient(180deg, #060e1a 0%, #09131f 100%) !important;
}

.features-section .section-title {
    color: #ffffff !important;
}

.feature-card {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(78,205,196,0.12) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) !important;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease !important;
    will-change: transform;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 15%; right: 15% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(78,205,196,0.5), transparent) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.4s ease !important;
}

.feature-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(78,205,196,0.35) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 30px rgba(78,205,196,0.1) !important;
}

.feature-card:hover::before { transform: scaleX(1) !important; }

.feature-card h3 { color: #ffffff !important; }
.feature-card p  { color: rgba(180,220,230,0.58) !important; }

.feature-icon {
    background: rgba(78,205,196,0.08) !important;
    border: 1px solid rgba(78,205,196,0.2) !important;
    transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275) !important;
}

.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, #4ecdc4, #06b6d4) !important;
    border-color: transparent !important;
    box-shadow: 0 0 30px rgba(78,205,196,0.4) !important;
    transform: scale(1.1) rotate(-5deg) !important;
}

.feature-card:hover .feature-icon i { color: #040c1a !important; }

/* ── Process Section: Dark ── */
.process-section {
    background: linear-gradient(180deg, #09131f 0%, #070f1d 100%) !important;
}

.process-section .section-title { color: #ffffff !important; }

.process-step {
    background: rgba(255,255,255,0.022) !important;
    border: 1px solid rgba(78,205,196,0.1) !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.35s cubic-bezier(0.165,0.84,0.44,1) !important;
    position: relative;
    overflow: hidden;
}

.process-step::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(78,205,196,0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.process-step:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(78,205,196,0.3) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 25px rgba(78,205,196,0.08) !important;
}

.process-step:hover::before { opacity: 1; }

.process-step h3 { color: #ffffff !important; }
.process-step p  { color: rgba(180,220,230,0.55) !important; }

.step-number {
    background: linear-gradient(135deg, #4ecdc4, #06b6d4) !important;
    box-shadow: 0 0 25px rgba(78,205,196,0.35) !important;
}

/* ── Tech Stack Section: Dark ── */
.tech-stack {
    padding: 80px 0 !important;
    background: linear-gradient(180deg, #070f1d 0%, #060e1a 100%) !important;
    position: relative;
}

.tech-stack .section-title { color: #ffffff !important; }

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px;
}

.tech-item {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(78,205,196,0.1) !important;
    border-radius: 16px !important;
    padding: 24px 16px !important;
    text-align: center !important;
    transition: all 0.35s ease !important;
    color: rgba(180,220,230,0.6) !important;
}

.tech-item:hover {
    border-color: rgba(78,205,196,0.35) !important;
    background: rgba(78,205,196,0.05) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3), 0 0 20px rgba(78,205,196,0.1) !important;
    color: #4ecdc4 !important;
}

.tech-item img {
    height: 48px !important;
    width: auto !important;
    filter: grayscale(30%) brightness(0.9) !important;
    transition: all 0.35s ease !important;
    margin-bottom: 10px !important;
}

.tech-item:hover img { filter: none !important; }

.tech-item span { color: rgba(180,220,230,0.55) !important; font-size: 0.82rem !important; }
.tech-item:hover span { color: #4ecdc4 !important; }

/* ── Service CTA Section: Neon ── */
.cta-section {
    background: linear-gradient(135deg, #040c1a 0%, #0a1628 50%, #060e1a 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center;
    padding: 80px 0 !important;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -150px; left: 50%;
    transform: translateX(-50%);
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(78,205,196,0.07), transparent 65%);
    pointer-events: none;
}

.cta-section h2 {
    background: linear-gradient(135deg, #fff 0%, #a8f0ec 60%, #4ecdc4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.4rem !important;
    margin-bottom: 16px !important;
}

.cta-section p {
    color: rgba(200,225,235,0.6) !important;
    font-size: 1.05rem !important;
    margin-bottom: 32px !important;
}

.cta-section .btn, .cta-section .btn-large {
    background: linear-gradient(135deg, #4ecdc4, #06b6d4) !important;
    color: #040c1a !important;
    font-weight: 700 !important;
    padding: 16px 40px !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 0 30px rgba(78,205,196,0.4) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.cta-section .btn:hover, .cta-section .btn-large:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 0 55px rgba(78,205,196,0.6), 0 12px 35px rgba(0,0,0,0.4) !important;
}

/* ── Solutions Section: Dark ── */
.solutions-section {
    background: linear-gradient(180deg, #060e1a 0%, #09131f 100%) !important;
}

.solutions-section .section-title { color: #ffffff !important; }

.solution-card {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(78,205,196,0.1) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.35s cubic-bezier(0.165,0.84,0.44,1) !important;
}

.solution-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(78,205,196,0.35) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 25px rgba(78,205,196,0.1) !important;
}

.solution-card h3 { color: #ffffff !important; }
.solution-card p  { color: rgba(180,220,230,0.55) !important; }

/* ── Benefits Section: Enhanced ── */
.benefits-section {
    background: linear-gradient(135deg, #040c1a 0%, #0a1628 60%, #040d1c 100%) !important;
}

.benefit-stat {
    text-shadow: 0 0 30px rgba(78,205,196,0.5) !important;
}

/* ── Contact / Form Section: Dark ── */
.contact-section, .contact-form-section {
    background: linear-gradient(180deg, #070f1d 0%, #060e1a 100%) !important;
}

/* ── General Section Title ── */
.section-title {
    position: relative;
}

/* ── About Page Sections ── */
.vision-mission-section {
    background: linear-gradient(180deg, #070f1d 0%, #09131f 100%) !important;
}

.vm-card {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(78,205,196,0.12) !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.35s ease !important;
}

.vm-card:hover {
    border-color: rgba(78,205,196,0.3) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 25px rgba(78,205,196,0.08) !important;
}

/* ── Stats / Numbers ── */
.stat-item .stat-number,
.benefit-stat {
    color: #4ecdc4 !important;
}

/* ── Global Back-to-Top ── */
.back-to-top {
    background: linear-gradient(135deg, #4ecdc4, #06b6d4) !important;
    color: #040c1a !important;
    box-shadow: 0 0 20px rgba(78,205,196,0.4) !important;
}

.back-to-top:hover {
    box-shadow: 0 0 35px rgba(78,205,196,0.6) !important;
}

/* ── Section Badge Colors ── */
.section-badge {
    background: rgba(78,205,196,0.08) !important;
    border: 1px solid rgba(78,205,196,0.2) !important;
    color: #4ecdc4 !important;
}

/* ── Particle Canvas (injected by JS) ── */
.hero-particle-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ── Footer links stay consistent ── */
footer { background: #020810 !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .service-hero h1, .industry-hero h1 { font-size: 2.2rem !important; }
    .cta-section h2 { font-size: 1.9rem !important; }
    .features-grid { grid-template-columns: 1fr !important; }
    .process-timeline { grid-template-columns: 1fr !important; }
}