:root {
    --void: #000000;
    --carbon: #0e0e0e;
    --hazard: #dd3400;
    --hazard-muted: #661800;
    --stark: #ffffff;
    --slate: #747575;
    --font-head: 'Anton', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --transition-fast: 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

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

body {
    background-color: var(--void);
    color: var(--stark);
    font-family: var(--font-mono);
    overflow-x: hidden;
    line-height: 1.4;
}

/* Ambient Canvas & Noise */
.noise-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.05;
    pointer-events: none;
    z-index: 9999;
}

.breathing-canvas {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 150vw; height: 150vh;
    background: radial-gradient(circle, var(--hazard-muted) 0%, rgba(0,0,0,0) 70%);
    opacity: 0.15;
    z-index: -1;
    animation: breath 4s infinite ease-in-out;
}

@keyframes breath {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.1; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }
}

/* Grid & Layout Structure */
.viewport-container {
    padding: 0 40px;
}

.section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0;
    border-bottom: 1px solid #222;
}

.grid-line {
    position: absolute;
    background-color: var(--hazard);
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.grid-line.horizontal { height: 1px; width: 100%; left: 0; transform: scaleX(0); transform-origin: left; }
.grid-line.vertical { width: 1px; height: 100%; top: 0; transform: scaleY(0); transform-origin: top; }
.section.is-visible .grid-line { transform: scale(1); }

/* Navigation */
.header-nav {
    position: fixed;
    top: 0; width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    z-index: 1000;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #222;
}

.logo { font-family: var(--font-head); font-size: 1.5rem; color: var(--hazard); letter-spacing: 2px; }
.nav-links a { color: var(--stark); text-decoration: none; font-size: 0.8rem; margin-left: 30px; }
.status-dot { height: 8px; width: 8px; background: #00ff41; display: inline-block; margin-right: 5px; }

/* Hero Section */
.hero-viewport h1 {
    font-family: var(--font-head);
    font-size: clamp(4rem, 10vw, 12rem);
    line-height: 0.9;
    letter-spacing: -2px;
    margin-bottom: 20px;
    transition: letter-spacing 0.5s ease;
}

.subheadline { max-width: 600px; font-size: 1.1rem; color: var(--slate); }

/* Buttons & Magnetic Fields */
.cta-wrapper { margin-top: 40px; }
.magnetic-btn {
    position: relative;
    background: none;
    border: 1px solid var(--stark);
    padding: 20px 40px;
    color: var(--stark);
    font-family: var(--font-mono);
    font-weight: 800;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.magnetic-btn:hover { border-color: var(--hazard); }
.btn-glow {
    position: absolute;
    width: 100px; height: 100px;
    background: radial-gradient(circle, var(--hazard) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
}
.magnetic-btn:hover .btn-glow { opacity: 0.6; }

/* Performance Showcase */
.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1px;
    background: #222;
    border: 1px solid #222;
}

.metric-card {
    background: var(--carbon);
    padding: 40px;
}

.metric-card.highlight { background: var(--void); border: 1px solid var(--hazard); }
.metric-value { font-family: var(--font-head); font-size: 4rem; color: var(--stark); }
.metric-bar { height: 4px; background: #222; margin-top: 10px; }
.metric-bar .fill { height: 100%; background: var(--hazard); }

/* Split Viewport */
.split-viewport { flex-direction: row; padding: 0; border: none; }
.split-side { 
    flex: 1; padding: 80px; 
    display: flex; flex-direction: column; justify-content: center;
    border: 1px solid #222;
}

.split-side h2 { font-family: var(--font-head); font-size: 5rem; }
.allies { background: var(--carbon); }
.allies h2 { color: var(--hazard); }
.casualties { filter: grayscale(1); opacity: 0.4; }

/* Form */
.terminal-container { max-width: 800px; width: 100%; border: 1px solid #222; padding: 40px; background: var(--carbon); }
.terminal-header { font-size: 0.7rem; color: var(--slate); margin-bottom: 30px; border-bottom: 1px solid #222; padding-bottom: 10px; }
.input-group { margin-bottom: 25px; }
.input-group label { display: block; font-size: 0.7rem; color: var(--hazard); margin-bottom: 10px; }
.input-group input, .input-group textarea {
    width: 100%; background: transparent; border: 1px solid #333; padding: 15px;
    color: var(--stark); font-family: var(--font-mono); outline: none;
}
.input-group input:focus { border-color: var(--hazard); }

.submit-btn { width: 100%; cursor: pointer; position: relative; }
.warning-stripes {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--hazard), var(--hazard) 10px, transparent 10px, transparent 20px);
    opacity: 0; transition: opacity 0.2s; z-index: -1;
}
.submit-btn:hover .warning-stripes { opacity: 0.2; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--hazard); }