/* ────── CONFIG ────── */
:root {
    --bg-primary: #31323b;
    --bg-secondary: #25262b;
    --text-main: #f4f4f5;
    --text-muted: #adb5bd;
    --accent-teal: #00f0ff;
    --accent-blue: #0072ff;
    --border-color: #495057;
}

/* ────── BASE STYLES ────── */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-primary); 
    color: var(--text-main); 
    margin: 0;
    padding: 0;
}

/* ────── INTERACTIVE ACCORDIONS ────── */
.accordion-content { 
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out; 
    overflow: hidden; 
    max-height: 0; 
    opacity: 0; 
}

.accordion-content.open { 
    max-height: 3000px; 
    opacity: 1; 
}

/* ────── TOOLTIP FRAMEWORKS ────── */
.status-bar-hover:hover .tooltip-data { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
}

/* ────── TAB NAVIGATION STREAMS ────── */
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease-in-out; }

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(5px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* ────── LOGO DIMENSIONS ────── */
.logo-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.brand-logo {
    width: 180px;
    height: auto;
    object-fit: contain;
}

/* ────── CUSTOM CURSOR MATRIX ────── */
* { 
    cursor: none !important; 
}

#cursor-dot, #cursor-outline {
    position: fixed; 
    top: 0; 
    left: 0; 
    transform: translate(-50%, -50%);
    border-radius: 50%; 
    z-index: 9999; 
    pointer-events: none;
}

#cursor-dot { 
    width: 8px; 
    height: 8px; 
    background-color: #ffffff; 
}

#cursor-outline {
    width: 30px; 
    height: 30px; 
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: width 0.2s, height 0.2s, background-color 0.2s, opacity 0.2s;
}

.cursor-hover #cursor-outline { 
    width: 16px; 
    height: 16px; 
    background-color: rgba(255, 255, 255, 0.15); 
    border-color: transparent; 
}