:root {
    --bg-color: #030303;
    --text-main: #f0f0f0;
    --text-dim: #666;
    --accent-blue: #0044cc;
    /* Adjust to match logo blue */
    --accent-highlight: #0088ff;
    --alert-red: #ff3333;
    --font-mono: 'JetBrains Mono', monospace;
    --font-heading: 'Oswald', sans-serif;
    --grid-color: rgba(255, 255, 255, 0.03);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-mono);
    height: 100vh;
    overflow: hidden;
    /* Hide scrollbars for splash */
    display: flex;
    flex-direction: column;
    position: relative;
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center;
}

/* Scanline Effect */
.scanline {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2));
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 10;
    animation: scanani 10s linear infinite;
    opacity: 0.3;
}

@keyframes scanani {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100%;
    }
}

/* Vignette Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
    z-index: 5;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header / Status Bar */
header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #222;
    padding-bottom: 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.status-bar {
    display: flex;
    gap: 2rem;
    width: 100%;
}

.status-item {
    color: var(--text-dim);
    text-transform: uppercase;
}

.blink {
    animation: blinker 1.5s linear infinite;
    color: var(--accent-highlight);
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.id-code {
    margin-left: auto;
}

/* Main Content */
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}

.logo-container {
    margin-bottom: 2rem;
    position: relative;
}

.main-logo {
    width: 450px;
    /* 150% of previous 300px */
    max-width: 90vw;
    height: auto;
    /* Removed drop-shadow per request */
    transition: transform 0.3s ease;
}

.main-logo:hover {
    transform: scale(1.05);
    /* slightly bigger hover */
    /* Removed hover glow per request */
}

/* Success Animation State */
body.access-granted::after {
    content: 'ACCESS GRANTED';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5vw;
    color: #00ff88;
    background: rgba(0, 0, 0, 0.9);
    padding: 2rem 4rem;
    border: 2px solid #00ff88;
    z-index: 100;
    font-family: var(--font-heading);
    letter-spacing: 1rem;
    animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    box-shadow: 0 0 50px rgba(0, 255, 136, 0.5);
}

body.access-granted #network-canvas {
    opacity: 0.2;
}

@keyframes successPop {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

h1 {
    font-family: var(--font-heading);
    font-size: 4rem;
    text-transform: uppercase;
    letter-spacing: 12px;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    opacity: 0;
    /* Hidden initially for animation */
    animation: fadeIn 2s ease-out forwards 0.5s;
    display: block;
    /* Show enabled */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0.05;
    /* Verify low opacity watermark */
    font-size: 8rem;
    white-space: nowrap;
    pointer-events: none;
}

/* Let's show the H1 but make it super subtle behind the logo or descriptive? 
   Actually, let's keep it but maybe remove if the logo contains text. 
   I'll assume the logo is the main title carrier and this H1 is visually decorative or screen-reader only for now.
   Wait, user said "based on our logo". */

.mission-statement {
    font-size: 1rem;
    letter-spacing: 4px;
    color: var(--text-dim);
    max-width: 600px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
    /* Removed border-left for center alignment */
    /* Removed padding-left */
    text-align: center;
    /* Centered per request */
    opacity: 0;
    animation: slideIn 1s ease-out forwards 1s;
}

/* Buttons */
.access-control {
    display: flex;
    gap: 1.5rem;
    opacity: 0;
    animation: slideIn 1s ease-out forwards 1.5s;
}

button {
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-main);
    padding: 1rem 2rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    border-color: var(--accent-blue);
    background: rgba(0, 68, 204, 0.1);
}

.btn-primary:hover {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 0 30px rgba(0, 68, 204, 0.6);
    text-shadow: 2px 0 rgba(255, 0, 0, 0.5), -2px 0 rgba(0, 255, 255, 0.5);
}

.btn-secondary:hover {
    border-color: var(--text-main);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Corner decor */
.container::before,
.container::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-dim);
    transition: all 0.5s ease;
}

.container::before {
    top: 2rem;
    left: 2rem;
    border-right: none;
    border-bottom: none;
}

.container::after {
    bottom: 2rem;
    right: 2rem;
    border-left: none;
    border-top: none;
}

/* Footer */
footer {
    border-top: 1px solid #222;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ticker-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.ticker {
    display: inline-block;
    animation: ticker 20s linear infinite;
    font-size: 0.75rem;
    color: var(--text-dim);
}

@keyframes ticker {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.ticker-item {
    display: inline-block;
    padding: 0 1rem;
}

.legal {
    font-size: 0.7rem;
    color: #444;
    text-align: right;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Network Background */
#network-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Behind everything */
    opacity: 0.6;
}

/* Layout Grid */
/* Layout Grid - Refactored for Absolute Centering */
.layout-grid {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Main Content - Dead Center */
main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Horizontally center */
    justify-content: center;
    /* Vertically center */
    padding-top: 0;
    /* Remove offset */
    z-index: 5;
    /* Above background, below overlay UI */
}

/* Data Stream Sidebar - Floating Overlay */
.data-stream-container {
    position: absolute;
    right: 0;
    top: 50%;
    /* Center vertically relative to screen side */
    transform: translateY(-50%);
    width: 250px;
    /* Slightly narrower */
    height: 60vh;
    /* Don't take full height */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    z-index: 10;
    border-radius: 10px 0 0 10px;
    /* Rounded left corners */
}

.stream-header {
    background: #111;
    color: var(--text-dim);
    padding: 0.5rem;
    text-align: center;
    border-bottom: 1px solid #333;
    font-weight: bold;
    letter-spacing: 1px;
}

.hash-column {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: #444;
    overflow-y: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.hash-item {
    white-space: nowrap;
    opacity: 0.7;
    transition: color 0.2s;
}

.hash-item.flagged {
    color: var(--alert-red);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

.hash-item.analyzing {
    color: var(--accent-highlight);
}

/* Terminal Login */
.terminal-login {
    margin-top: 3rem;
    width: 100%;
    max-width: 500px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #333;
    padding: 1.5rem;
    position: relative;
    opacity: 0;
    animation: slideIn 1s ease-out forwards 1.5s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.terminal-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    opacity: 0.5;
}

.terminal-prefix {
    color: var(--accent-highlight);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

#access-code {
    background: transparent;
    border: none;
    border-bottom: 2px solid #333;
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 1.2rem;
    width: 100%;
    padding: 0.5rem 0;
    outline: none;
    transition: border-color 0.3s;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#access-code:focus {
    border-color: var(--accent-highlight);
}

#access-code::placeholder {
    color: #333;
    font-size: 1rem;
}

.terminal-status {
    height: 1.2rem;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: var(--alert-red);
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

.terminal-status.success {
    color: #00ff88;
    text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
}

/* Animations update */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Adjustments */
@media (max-width: 900px) {
    .layout-grid {
        grid-template-columns: 1fr;
    }

    .data-stream-container {
        display: none;
        /* Hide complex data on mobile for simple splash */
    }
}