/* mang.quest */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #2563eb; color: #ffffff; font-family: 'Inter', sans-serif; line-height: 1.7; }
.blue-section { background: #2563eb; color: #ffffff; }
.white-section { background: #ffffff; color: #2563eb; }
.hero { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; position: relative; overflow: hidden; }
.mesh-grid { position: absolute; inset: 0; background: repeating-linear-gradient(rgba(255,255,255,0.08) 0px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0px, transparent 1px, transparent 40px); }
.brand { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(2.5rem, 7vw, 3.5rem); position: relative; z-index: 1; }
.tagline { font-size: 0.9rem; opacity: 0.8; position: relative; z-index: 1; }
.content { padding: 3rem 1.5rem; max-width: 650px; margin: 0 auto; }
.heading-blue { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.5rem; color: #2563eb; margin-bottom: 0.75rem; }
.heading-white { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.5rem; color: #ffffff; margin-bottom: 0.75rem; }
.body-blue { font-size: 0.85rem; color: #1d4ed8; margin-bottom: 1rem; }
.body-white { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin-bottom: 1rem; }
.ip { font-family: 'Fira Code', monospace; font-size: 0.7rem; color: #93c5fd; display: block; margin-bottom: 1rem; }
.ip-light { font-family: 'Fira Code', monospace; font-size: 0.7rem; color: rgba(255,255,255,0.3); display: block; margin-bottom: 1rem; }
.node-divider { display: flex; align-items: center; justify-content: center; }
.node-dot { width: 8px; height: 8px; border-radius: 50%; }
.blue-dot { background: #2563eb; }
.node-line { width: 40px; height: 1px; }
.blue-line { background: #dbeafe; }
.mesh-nodes { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 1rem; }
.node { width: 24px; height: 24px; border-radius: 50%; }
.white-node { background: #ffffff; }
.blue-node { background: #2563eb; }
.conn { width: 30px; height: 2px; }
.blue-conn { background: #93c5fd; }
.conn { background: rgba(255,255,255,0.3); }
.signal-footer { text-align: center; padding: 3rem 2rem; }
.signal { display: flex; flex-direction: column; align-items: center; margin-bottom: 1rem; }
.arc { border: 2px solid #ffffff; border-bottom: none; border-radius: 50% 50% 0 0; }
.a1 { width: 20px; height: 10px; }
.a2 { width: 36px; height: 18px; opacity: 0.6; }
.a3 { width: 52px; height: 26px; opacity: 0.3; }
.footer-brand { font-size: 0.6rem; color: rgba(255,255,255,0.4); display: block; margin-top: 0.5rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }