:root { 
    --bg: #050505; 
    --fg: #E0E0E0; 
    --accent: #3B82F6; 
    --grid: rgba(255,255,255,0.03);
    --border: rgba(255,255,255,0.08);
}

body { 
    background: var(--bg); 
    color: var(--fg); 
    font-family: 'Manrope', sans-serif; 
    overflow-x: hidden; 
    margin: 0;
    cursor: none;
}

.font-serif { font-family: 'Playfair Display', serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* --- Infrastructure --- */
.noise-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 900; opacity: 0.03;
    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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.grid-lines {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 25% 100%;
}

.v-line { position: fixed; top: 0; height: 100%; width: 1px; background: rgba(255,255,255,0.04); z-index: -1; }
.l1 { left: 5vw; } .l2 { left: 50vw; } .l3 { right: 5vw; }

/* --- Cursor --- */
#cursor {
    position: fixed; top: 0; left: 0; width: 12px; height: 12px; 
    background: #fff; border-radius: 50%; pointer-events: none; z-index: 3000;
    mix-blend-mode: difference; transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
#cursor.active { transform: scale(4); background: var(--accent); mix-blend-mode: normal; opacity: 0.5; }

/* --- Loader & Transition --- */
#loader {
    position: fixed; inset: 0; background: #000; z-index: 2000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.loader-bar { width: 0%; height: 1px; background: var(--accent); transition: width 0.1s linear; }

/* --- Typography --- */
section { min-height: 100vh; position: relative; padding: 10vh 5vw; display: flex; flex-direction: column; justify-content: center; }

.h-mega { 
    font-size: clamp(3rem, 13vw, 11rem); 
    line-height: 0.85; 
    font-weight: 800; 
    letter-spacing: -0.04em; 
    text-transform: uppercase;
    color: #fff;
}

.editorial-grid { 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    gap: 2rem; 
    width: 100%;
    max-width: 90vw;
    margin: 0 auto;
}

/* --- Components --- */
.glass-panel {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 1.5rem;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.glass-panel:hover { border-color: var(--accent); background: rgba(59,130,246,0.05); transform: translateY(-5px); }

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

/* --- Reveal Logic --- */
.reveal { visibility: hidden; }
.char-line { overflow: hidden; display: block; } /* For text split animation */
.char-reveal { display: inline-block; transform: translateY(100%); }

/* --- Overlay --- */
.overlay { 
    position: fixed; inset: 0; background: rgba(5,5,5,0.98); z-index: 1000; 
    display: none; padding: 0;
    backdrop-filter: blur(20px);
}
.overlay-content-wrapper {
    height: 100%; width: 100%; overflow-y: auto; padding: 10vh 5vw;
}
.close-btn { 
    position: absolute; top: 3rem; right: 3rem; 
    width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,0.2); rounded-full; 
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.3s ease; z-index: 1010;
}
.close-btn:hover { border-color: #fff; transform: rotate(90deg); background: #fff; color: #000; }

/* --- Card Styles --- */
.protocol-card {
    border-top: 1px solid var(--border);
    padding: 3rem 0;
    transition: all 0.5s ease;
    cursor: pointer;
}
.protocol-card:hover {
    border-top-color: var(--accent);
    padding-left: 2rem;
    background: linear-gradient(90deg, rgba(59,130,246,0.05), transparent);
}