@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

html { 
    scroll-behavior: smooth; 
}
body {
    font-family: 'Noto Sans SC', sans-serif;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* --- Theme Specific Base Styles --- */
.light body { 
    background-color: #F7F9FC; 
    /* DELETED: The 'color' property has been removed to avoid conflicts. */
    /* Let Tailwind utility classes in HTML handle all text colors. */
}
.dark body { 
    background-color: #0c0a18; 
    /* DELETED: The 'color' property has been removed. */
}
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

/* --- Glassmorphism Effect --- */
.glassmorphism { 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px); 
    transition: background-color 0.5s ease, border-color 0.5s ease;
}
.light .glassmorphism { 
    background: rgba(255, 255, 255, 0.7); 
    border: 1px solid rgba(0, 0, 0, 0.08); 
}
.dark .glassmorphism { 
    background: rgba(18, 16, 38, 0.7); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

/* --- Text & Headers --- */
h1, h2, h3 { 
    letter-spacing: 0.02em; 
}
.gradient-text { 
    background: linear-gradient(135deg, #a778ff, #7dffed); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent; 
}
.light .gradient-text { 
    background: linear-gradient(135deg, #6d28d9, #0d9488); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Interactive Effects --- */
.btn-glow-primary:hover { 
    box-shadow: 0 0 12px #a778ff, 0 0 25px #a778ff; 
}
.light .btn-glow-primary:hover { 
    box-shadow: 0 0 12px #8A2BE2, 0 0 25px #8A2BE2; 
}
.fade-in-section { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
}
.fade-in-section.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}
.card-hover-effect { 
    transform: perspective(1000px); 
    transition: transform 0.5s ease, box-shadow 0.5s ease; 
    display: flex; 
    flex-direction: column; 
}
.dark .card-hover-effect:hover { 
    transform: translateY(-8px) scale(1.03); 
    box-shadow: 0 0 25px rgba(167, 120, 255, 0.3); 
}
.light .card-hover-effect:hover { 
    transform: translateY(-8px) scale(1.03); 
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); 
}

/* --- Tab Buttons --- */
.tab-btn { 
    padding: 0.5rem 1rem; 
    border-radius: 9999px; 
    border: 1px solid transparent;
    transition: all 0.3s ease; 
    
    /* ADDED: Define default text colors directly here using Tailwind's theme function */
    color: #4B5563; /* text-gray-600 */
}
.dark .tab-btn { 
    border-color: #4a5568; 
    color: #D1D5DB; /* text-gray-300 */
} 
.light .tab-btn { 
    border-color: #D1D5DB; 
}
.dark .tab-btn.active { 
    color: white; 
    background-color: rgba(167, 120, 255, 0.3); 
    border-color: #a778ff; 
}
.light .tab-btn.active { 
    color: #4B0082; 
    background-color: rgba(138, 43, 226, 0.1); 
    border-color: #8A2BE2; 
}

/* --- Testimonial Card Quote Effect --- */
.testimonial-card::before { 
    content: '“'; 
    position: absolute; 
    top: 0.5rem; 
    left: 1rem; 
    font-size: 4rem; 
    font-weight: 900;
    z-index: 0;
    color: rgba(167, 120, 255, 0.2); 
    line-height: 1;
    transition: color 0.5s ease;
}
.light .testimonial-card::before { 
    color: rgba(138, 43, 226, 0.1); 
}

/* --- Final & Perfected A.I. Neural Network Animation --- */
.links path {
    stroke: #a778ff;
    stroke-opacity: 0.15;
    stroke-width: 0.5px;
    fill: none;
}
.neuron {
    fill: #a778ff;
    transform-origin: center center;
    filter: drop-shadow(0 0 3px #a778ff);
}
.pulse-line {
    stroke: white;
    stroke-width: 1.5px;
    stroke-linecap: round;
    fill: none;
    filter: drop-shadow(0 0 2px white) drop-shadow(0 0 5px #7dffed);
}
@keyframes pulse-neuron {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
}
@keyframes flow-pulse {
    0% { stroke-dashoffset: var(--line-length); }
    100% { stroke-dashoffset: calc(-1 * var(--line-length)); }
}
.neuron {
    animation: pulse-neuron 4s ease-in-out infinite;
}
.pulse-line {
    stroke-dasharray: var(--line-length);
    stroke-dashoffset: var(--line-length);
    animation: flow-pulse 5s linear infinite;
}