:root {
    --topo-bg: #f8fafc;
    --topo-node: #ffffff;
    --topo-line: #cbd5e1;
    --topo-text: #334155;
    --topo-accent: #3b82f6;
    --topo-accent-light: #eff6ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--topo-bg); color: var(--topo-text);
    font-family: system-ui, -apple-system, sans-serif;
    background-image: 
        radial-gradient(var(--topo-line) 1px, transparent 1px),
        radial-gradient(var(--topo-line) 1px, transparent 1px);
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }

/* Network Map Container */
.net-map {
    max-width: 1200px; margin: 40px auto; position: relative; padding: 20px;
}

/* Floating Navigation Node */
.nav-node {
    background: var(--topo-node); padding: 15px 30px; border-radius: 40px;
    display: inline-flex; gap: 30px; align-items: center; justify-content: space-between;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); border: 2px solid var(--topo-line);
    position: relative; z-index: 10; width: 100%;
}
.nav-brand { font-weight: 800; font-size: 20px; color: var(--topo-accent); }
.nav-links { display: flex; gap: 20px; font-weight: 500;}
.nav-links a:hover { color: var(--topo-accent); }
.nav-action { background: var(--topo-accent); color: white; padding: 8px 24px; border-radius: 20px; font-weight: bold;}

/* Hero Cluster */
.cluster-hero {
    display: flex; margin-top: 60px; gap: 40px; position: relative;
}
/* Connecting Lines */
.cluster-hero::before {
    content: ''; position: absolute; top: -60px; left: 10%; width: 2px; height: 60px; background: var(--topo-line); z-index: 0;
}
.cluster-hero::after {
    content: ''; position: absolute; top: -60px; right: 10%; width: 2px; height: 60px; background: var(--topo-line); z-index: 0;
}

.c-main {
    flex: 2; background: var(--topo-node); padding: 50px; border-radius: 24px;
    box-shadow: 0 15px 35px rgba(59,130,246,0.1); border: 2px solid var(--topo-accent);
    position: relative; z-index: 5;
}
.c-main h1 { font-size: 48px; line-height: 1.1; margin-bottom: 20px; letter-spacing: -1px;}
.c-main p { font-size: 18px; line-height: 1.6; margin-bottom: 30px; color: #64748b;}
.c-actions { display: flex; gap: 15px; }
.btn-primary { background: var(--topo-accent); color: white; padding: 15px 30px; border-radius: 12px; font-weight: 600; font-size: 16px;}
.btn-secondary { background: var(--topo-accent-light); color: var(--topo-accent); padding: 15px 30px; border-radius: 12px; font-weight: 600; font-size: 16px;}

.c-side { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.s-node {
    background: var(--topo-node); padding: 25px; border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); border: 1px solid var(--topo-line);
    position: relative;
}
.s-node::before {
    content: ''; position: absolute; top: 50%; left: -40px; width: 40px; height: 2px; background: var(--topo-line); z-index: 0;
}
.s-val { font-size: 32px; font-weight: 800; color: var(--topo-accent); margin-bottom: 5px;}
.s-lbl { font-size: 14px; color: #64748b; font-weight: 500;}

/* Feature Mesh */
.mesh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; position: relative;}
.mesh-grid::before {
    content: ''; position: absolute; top: -30px; left: 50%; width: 2px; height: 30px; background: var(--topo-line); z-index: 0;
}
.m-node {
    background: var(--topo-node); padding: 30px; border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); border: 1px solid var(--topo-line);
    position: relative; z-index: 5;
}
.m-node::before { content: ''; position: absolute; top: -15px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--topo-accent); transform: translateX(-50%);}
.m-node h3 { font-size: 20px; margin-bottom: 15px;}
.m-node p { font-size: 15px; color: #64748b; line-height: 1.5;}

/* Route Paths */
.route-path {
    background: var(--topo-node); margin-top: 60px; padding: 40px; border-radius: 24px;
    border: 1px dashed var(--topo-line); display: flex; justify-content: space-between; align-items: center;
}
.route { text-align: center; }
.r-dot { width: 16px; height: 16px; background: var(--topo-accent); border-radius: 50%; margin: 0 auto 10px auto; position: relative;}
.r-dot::after { content: ''; position: absolute; top: 50%; left: 16px; width: 150px; height: 2px; background: var(--topo-line); z-index: 0; transform: translateY(-50%);}
.route:last-child .r-dot::after { display: none; }
.r-city { font-weight: 600; font-size: 16px; margin-bottom: 5px;}
.r-ping { font-size: 12px; color: #10b981; font-weight: bold;}

/* FAQ Hub */
.faq-hub { margin-top: 60px; background: white; border-radius: 24px; padding: 40px; border: 1px solid var(--topo-line);}
.faq-q { cursor: pointer; font-size: 18px; font-weight: 600; padding: 15px 0; border-bottom: 1px solid var(--topo-bg); display: flex; justify-content: space-between;}
.faq-q::after { content: '↓'; font-size: 14px; color: var(--topo-accent); }
.faq-a { font-size: 15px; color: #64748b; line-height: 1.6; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-hub > div.open .faq-a { max-height: 200px; padding: 15px 0;}
.faq-hub > div.open .faq-q::after { content: '↑'; }

@media (max-width: 900px) {
    .nav-node { flex-direction: column; border-radius: 20px; gap: 15px;}
    .cluster-hero { flex-direction: column; gap: 20px;}
    .c-side { flex-direction: row; flex-wrap: wrap;}
    .s-node::before { display: none; }
    .s-node { flex: 1; min-width: 150px;}
    .mesh-grid { grid-template-columns: 1fr;}
    .route-path { flex-wrap: wrap; gap: 20px;}
    .r-dot::after { display: none; }
}