@import url('https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --bg: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.12), transparent 25%), radial-gradient(circle at 80% 0%, rgba(236, 72, 153, 0.12), transparent 28%), #0b1220;
    --glass: rgba(255, 255, 255, 0.08);
    --shadow-neon: 0 10px 50px rgba(124, 58, 237, 0.25);
}

body {
    font-family: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    min-height: 100vh;
}

.light, .light body, body.light {
    background: #f6f8fb;
}

.glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-neon);
}

.neon-border {
    box-shadow: 0 0 1px rgba(167, 139, 250, 0.4), 0 5px 35px rgba(79, 70, 229, 0.35);
}

.shine {
    position: relative;
    overflow: hidden;
}

.shine::after {
    content: '';
    position: absolute;
    top: -120%;
    left: -20%;
    width: 60%;
    height: 300%;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.08) 45%, transparent 70%);
    transform: rotate(20deg);
    transition: all 0.6s ease;
}

.shine:hover::after {
    left: 120%;
}

.gradient-text {
    background: linear-gradient(120deg, #a855f7, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta {
    position: relative;
}

.cta::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(120deg, rgba(124, 58, 237, 0.8), rgba(56, 189, 248, 0.8));
    filter: blur(18px);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.cta:hover::before {
    opacity: 1;
}

.section-pad {
    padding: 5rem 0;
}

.bg-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
}

.dark .bg-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

.card-hover {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.card-hover:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 60px rgba(88, 28, 135, 0.3);
}

/* Improve contrast in dark mode for muted text */
.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-slate-400 {
    color: #dbeafe !important; /* light slate/blue for readability */
}
.dark .text-slate-700,
.dark .text-slate-800,
.dark .text-slate-900 {
    color: #e5e7eb !important;
}
.dark p {
    color: #e2e8f0;
}
.dark a {
    color: #bae6fd;
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #f8fafc;
}

/* Improve contrast in light mode when muted text is placed on light cards */
.light .text-slate-400,
.light .text-slate-300 {
    color: #334155 !important;
}
.light p {
    color: #1f2937;
}