:root {
    --bg: #0b0706;
    --rust: #ff5533;
    --titanium: #e2e8f0;
    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--titanium); font-family: var(--font-body); overflow: hidden; height: 100vh; }

.nav { padding: 3rem 5rem; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,85,51,0.2); }
.logo { font-family: var(--font-head); font-size: 1.4rem; color: var(--rust); }
.colony { font-size: 0.8rem; letter-spacing: 2px; color: #888; }

.hero { height: calc(100vh - 100px); display: flex; align-items: center; justify-content: center; gap: 5rem; padding: 0 5rem; }

.dome-container { perspective: 800px; width: 220px; height: 220px; }
.dome { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: spinDome 10s linear infinite; }
.ring { position: absolute; width: 100%; height: 100%; border: 2px dashed var(--rust); border-radius: 50%; }
.r2 { transform: rotateX(70deg); border-color: var(--titanium); }
@keyframes spinDome { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }

.content h1 { font-family: var(--font-head); font-size: 3.2rem; color: var(--rust); line-height: 1.1; margin-bottom: 1.5rem; }
.content p { font-size: 1.1rem; color: #94a3b8; max-width: 500px; font-weight: 300; }