body { font-family: 'Inter', -apple-system, sans-serif; background-color: #030303; color: #ededed; margin: 0; padding: 0; border-top: 4px solid #1a1a1a; overflow-x: hidden; }
canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.3; }
.nav { padding: 25px 50px; font-family: monospace; font-size: 0.85rem; color: #555; border-bottom: 1px solid #111; letter-spacing: 2px; text-transform: uppercase; position: relative; z-index: 1; display: flex; justify-content: space-between;}
.nav-links a { color: #888; text-decoration: none; margin-left: 30px; transition: color 0.2s; }
.nav-links a:hover { color: #fff; }
.hero { padding: 120px 50px 80px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
h1 { font-size: 4.5rem; margin-bottom: 20px; color: #ffffff; letter-spacing: -2px; font-weight: 700; line-height: 1.1; }
.subtitle { font-size: 1.4rem; color: #888; max-width: 800px; margin-bottom: 60px; line-height: 1.6; font-weight: 300; }
.section-header { font-size: 2.5rem; color: #fff; margin: 80px 0 40px; font-weight: 600; letter-spacing: -1px; border-bottom: 1px solid #222; padding-bottom: 20px;}
.grid { display: flex; flex-wrap: wrap; gap: 50px; margin-top: 40px; }
.column { flex: 1; min-width: 300px; border-top: 1px solid #333; padding-top: 25px; transition: border-color 0.3s ease; background: rgba(3,3,3,0.5); backdrop-filter: blur(5px); }
.column:hover { border-top: 1px solid #ffffff; }
h3 { color: #fff; font-size: 1.1rem; letter-spacing: 1px; margin-bottom: 15px; font-weight: 500; text-transform: uppercase; }
p { line-height: 1.7; color: #999; font-size: 0.95rem; font-weight: 300; }
.feature-box { background: #0a0a0a; border: 1px solid #222; padding: 40px; margin-top: 60px; border-left: 4px solid #fff; transition: transform 0.2s ease; }
.feature-box:hover { transform: translateX(5px); border-color: #444; }
.feature-box h3 { color: #fff; margin-top: 0; display: flex; justify-content: space-between; align-items: center; }
.feature-box .badge { font-size: 0.7rem; font-family: monospace; background: #222; padding: 4px 8px; border-radius: 2px; color: #aaa; }
.contact-grid { display: flex; gap: 40px; margin-bottom: 60px; }
.contact-card { flex: 1; background: #0a0a0a; border: 1px solid #1a1a1a; padding: 30px; transition: border-color 0.2s; }
.contact-card:hover { border-color: #444; }
.contact-card h4 { margin: 0 0 10px 0; color: #fff; font-size: 1.2rem; }
.contact-card p { margin: 0 0 20px 0; font-size: 0.9rem; color: #777; }
.contact-card a { color: #fff; text-decoration: none; font-family: monospace; font-size: 0.9rem; border-bottom: 1px solid #333; padding-bottom: 2px; }
.contact-card a:hover { border-bottom-color: #fff; }
.locations-grid { display: flex; gap: 80px; margin-bottom: 100px; }
.region h4 { color: #555; font-family: monospace; letter-spacing: 1px; margin-bottom: 20px; text-transform: uppercase; }
.city-block { margin-bottom: 20px; }
.city-block strong { color: #ddd; display: block; font-size: 1.1rem; }
.city-block span { color: #777; font-size: 0.9rem; }
.architecture-diagram { width: 100%; height: 2px; background: linear-gradient(90deg, #030303, #333, #fff, #333, #030303); margin: 60px 0; opacity: 0.5; }
.mega-footer { background-color: #050505; border-top: 1px solid #111; padding: 80px 50px; font-size: 0.85rem; color: #666; position: relative; z-index: 1; margin-top: 100px;}
.footer-grid { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; }
.footer-col h5 { color: #fff; font-size: 1rem; margin: 0 0 20px 0; font-weight: 500; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #777; text-decoration: none; transition: color 0.2s; }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom { max-width: 1200px; margin: 60px auto 0; padding-top: 20px; border-top: 1px solid #111; display: flex; justify-content: space-between; font-family: monospace; font-size: 0.75rem; }
/* TokenWall Specific Overrides */
.content-layer { filter: blur(8px); opacity: 0.4; pointer-events: none; height: 100vh; overflow: hidden; }
.token-wall { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 5, 5, 0.85); backdrop-filter: blur(12px); z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.terminal-box { border: 1px solid #333; background: #000; padding: 40px; width: 100%; max-width: 600px; box-shadow: 0 0 30px rgba(0,0,0,0.8); position: relative; }
.terminal-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #ff3333; }
.sys-header { font-family: monospace; color: #ff3333; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 30px; display: flex; justify-content: space-between; border-bottom: 1px dotted #333; padding-bottom: 10px; }
.sys-header span.blink { animation: blinker 1.5s linear infinite; }
.directive { font-family: monospace; color: #fff; font-size: 1.2rem; margin-bottom: 20px; line-height: 1.5; }
.sub-directive { font-family: monospace; color: #666; font-size: 0.85rem; margin-bottom: 40px; line-height: 1.4; }
.auth-input-group { display: flex; align-items: center; border: 1px solid #444; background: #0a0a0a; padding: 10px 15px; transition: border-color 0.3s ease; }
.auth-input-group:focus-within { border-color: #fff; }
.auth-prompt { color: #888; font-family: monospace; margin-right: 15px; font-size: 0.9rem; }
.auth-input-group input[type="password"] { background: transparent; border: none; color: #fff; font-family: monospace; font-size: 1rem; letter-spacing: 4px; outline: none; width: 100%; }
.telemetry-warning { margin-top: 30px; font-family: monospace; font-size: 0.7rem; color: #444; text-align: center; text-transform: uppercase; }
@keyframes blinker { 50% { opacity: 0; } }