/* --- LOCKED DESIGN VARIABLES --- */
:root {
    --bg-deep: #0a001a;
    --brand-primary: #5A189A;
    --brand-light: #9D4EDD;
    --accent: #E0AAFF;
}

/* --- 1. CUSTOM SCROLLBAR (New Feature) --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #3c096c; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }

/* Default Cursor Handling */
@media (pointer: fine) { * { cursor: none !important; } }

body, html { font-family: 'Plus Jakarta Sans', sans-serif; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background-color: var(--bg-deep); color: #ffffff; overflow-x: hidden; }

/* --- Cinematic Grain & Vignette --- */
.noise-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 9900;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.07;
}
.vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 9901;
    background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.6) 100%);
}

/* --- Custom Glowing Cursor --- */
#cursor {
    width: 20px; height: 20px; background: var(--accent); border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: screen;
    box-shadow: 0 0 25px var(--brand-light); will-change: transform;
    transition: width 0.3s, height 0.3s, background-color 0.3s, border 0.3s;
    display: none; opacity: 0; /* Hidden initially, revealed on mousemove */
}
@media (pointer: fine) { #cursor { display: block; } }

/* --- Neural Network Canvas --- */
#neural-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.4; pointer-events: none; }

/* --- Background Grid --- */
.grid-bg {
    position: fixed; inset: 0;
    background-image: linear-gradient(to right, rgba(224, 170, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(224, 170, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px; z-index: -1;
    mask-image: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), black, transparent 80%);
}

/* --- Reveal Animation --- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* --- Sticky Scroll Journey --- */
.journey-wrapper { height: 250vh; position: relative; }
.journey-content { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.journey-step {
    position: absolute; width: 100%; text-align: center; opacity: 0;
    transform: scale(0.9) translateY(30px);
    transition: all 0.5s ease-out; padding: 0 1.5rem; z-index: 10;
}
.journey-step.active { opacity: 1; transform: scale(1) translateY(0); }

/* --- 2. INFINITE MARQUEE (New Feature) --- */
.marquee-container {
    position: relative; overflow: hidden; 
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
    display: flex; width: max-content;
    animation: scroll 30s linear infinite;
}
.marquee-group {
    display: flex; gap: 4rem; padding-right: 4rem; /* Match gap to seamlessly loop */
    align-items: center; flex-shrink: 0;
}
.marquee-item {
    color: rgba(255, 255, 255, 0.3); transition: color 0.3s;
}
.marquee-item:hover { color: var(--accent); }
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Interactive Cards --- */
.card-container { perspective: 1200px; }
.interactive-card {
    background: rgba(36, 0, 70, 0.2); border: 1px solid rgba(224, 170, 255, 0.05);
    backdrop-filter: blur(10px); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s ease;
    transform-style: preserve-3d; position: relative;
}
@media (hover: hover) { .interactive-card:hover { border-color: var(--accent); } }

/* --- Typography & Elements --- */
.text-gradient {
    background: linear-gradient(to right, #E0AAFF, #9D4EDD, #C77DFF);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- Magnetic Buttons --- */
.btn-glow {
    background: linear-gradient(135deg, #7B2CBF, #5A189A);
    transition: all 0.2s ease-out; border: 1px solid rgba(224, 170, 255, 0.3);
    box-shadow: 0 0 20px rgba(123, 44, 191, 0.2); position: relative; overflow: hidden;
}
.btn-glow::after {
    content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.3s; transform: scale(2); pointer-events: none;
}
.btn-glow:hover::after { opacity: 0.2; }

.icon-box {
    width: 70px; height: 70px; margin: 0 auto 1.5rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(157, 78, 221, 0.1); border-radius: 16px; border: 1px solid rgba(224, 170, 255, 0.2);
    box-shadow: 0 0 30px rgba(90, 24, 154, 0.3);
}

/* --- Cards --- */
.who-card {
    background: rgba(90, 24, 154, 0.1); border: 1px solid rgba(224, 170, 255, 0.1);
    backdrop-filter: blur(5px); transition: all 0.4s ease; display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: 1rem; height: 100%;
}
.who-card:hover { background: rgba(90, 24, 154, 0.2); border-color: var(--accent); transform: translateX(5px); }
.who-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(224, 170, 255, 0.1); border-radius: 0.75rem; color: var(--accent); flex-shrink: 0; }
.who-card span { flex: 1; min-width: 0; line-height: 1.3; }

.why-card {
    background: linear-gradient(145deg, rgba(58, 12, 163, 0.2), rgba(10, 0, 26, 0.5));
    border: 1px solid rgba(224, 170, 255, 0.05); backdrop-filter: blur(10px);
    transition: all 0.4s ease; padding: 1.5rem; border-radius: 1.5rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
}
.why-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(90, 24, 154, 0.3); }

.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px;
    background: var(--accent); transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }

/* --- FAQ --- */
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 1rem; }
.faq-button { width: 100%; text-align: left; padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1rem; }
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; color: rgba(255, 255, 255, 0.6); line-height: 1.6; font-size: 0.95rem; }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-item.active .faq-content { max-height: 300px; padding-bottom: 1.5rem; }

/* --- Mobile Menu --- */
#mobile-menu { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(-100%); }
#mobile-menu.open { transform: translateY(0); }