/* interplanetary.biz */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #050510; color: #d1d5db; font-family: 'Inter', sans-serif; line-height: 1.6; }
.hero { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; position: relative; }
.radar { position: relative; width: 160px; height: 160px; margin-bottom: 2rem; }
.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(34,211,238,0.2); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.r1 { width: 60px; height: 60px; } .r2 { width: 110px; height: 110px; } .r3 { width: 160px; height: 160px; }
.scan-line { position: absolute; width: 50%; height: 2px; background: linear-gradient(to right, transparent, #22d3ee); top: 50%; left: 50%; transform-origin: left center; animation: scan 3s linear infinite; }
@keyframes scan { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.brand { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); color: #22d3ee; }
.tagline { font-size: 0.85rem; color: #d1d5db; opacity: 0.6; margin-top: 0.3rem; }
.routes { max-width: 550px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.route-panel { background: #0a0a1a; border: 1px solid rgba(34,211,238,0.3); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.route-label { font-family: 'Fira Code', monospace; font-size: 0.6rem; color: #22d3ee; opacity: 0.5; min-width: 60px; }
.route-info { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.origin, .dest { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.9rem; color: #d1d5db; }
.arrow { color: #f59e0b; font-size: 0.8rem; }
.distance { font-family: 'Fira Code', monospace; font-size: 0.7rem; color: #4ade80; }
.orbit { padding: 3rem; display: flex; justify-content: center; }
.orbit-diagram { position: relative; width: 200px; height: 200px; }
.orbit-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(59,130,246,0.2); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.or1 { width: 80px; height: 80px; } .or2 { width: 140px; height: 140px; } .or3 { width: 200px; height: 200px; }
.planet { position: absolute; border-radius: 50%; } .p1 { width: 8px; height: 8px; background: #3b82f6; top: 0; left: 50%; transform: translateX(-50%); } .p2 { width: 6px; height: 6px; background: #f59e0b; top: 0; left: 50%; transform: translateX(-50%); } .p3 { width: 10px; height: 10px; background: #22d3ee; top: 0; left: 50%; transform: translateX(-50%); }
.dock { text-align: center; padding: 4rem 2rem; }
.dock-status { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; } .status-dot.green { background: #4ade80; }
.dock-label { font-family: 'Fira Code', monospace; font-size: 0.7rem; color: #4ade80; }
.coord { font-family: 'Fira Code', monospace; font-size: 0.6rem; color: #d1d5db; opacity: 0.4; display: block; }
.dock-brand { font-size: 0.65rem; color: #111128; display: block; margin-top: 1rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }