.city-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);gap:28px;align-items:center;overflow:hidden;min-height:340px;margin:12px 0 18px;padding:clamp(24px,5vw,54px);border:1px solid #294264;border-radius:16px;background:radial-gradient(circle at 82% 12%,#35649758,transparent 38%),linear-gradient(118deg,#071321,#102846 62%,#0a1625)}
.city-hero:after{position:absolute;inset:0;content:"";pointer-events:none;background:linear-gradient(110deg,transparent 40%,#7d9db50a 40.1%,transparent 70%)}
.city-hero-copy{position:relative;z-index:1;max-width:730px}.city-eyebrow{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid #7695bd60;border-radius:99px;background:#07142175;color:#b8d0ee;font-size:9px;font-weight:900;letter-spacing:.12em}
.city-hero h2{margin:16px 0 8px;font-size:clamp(42px,7vw,72px);line-height:.98;letter-spacing:-.055em}.city-hero h2 em{color:#8eb8eb;font-style:normal}.city-hero-copy>p{max-width:560px;margin:0;color:#c0ccdc;font-size:14px}
.city-hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.city-button{display:inline-flex;min-height:40px;align-items:center;justify-content:center;padding:0 15px;border:1px solid #526986;border-radius:8px;text-decoration:none;font-size:10px;font-weight:900;transition:transform .15s,border-color .15s}.city-button:hover{transform:translateY(-2px);border-color:#9dbde4}.city-button-primary{border-color:#4b76a6;background:linear-gradient(130deg,#365d89,#24466d);color:#fff}.city-button-outline{background:#091727aa;color:#dbe8f8}
.city-hero-art{position:relative;display:flex;min-height:230px;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid #6882a04a;border-radius:15px;background:radial-gradient(circle at center,#2e50723b,transparent 60%),#08142199;color:#ecf4ff}.city-art-orbit{position:absolute;width:185px;height:185px;border:1px solid #89a9cc35;border-radius:50%;box-shadow:0 0 0 24px #89a9cc0a,0 0 0 48px #89a9cc07}.city-hero-art b,.city-hero-art small,.city-hero-art i{position:relative}.city-hero-art b{font-size:clamp(28px,4vw,42px);letter-spacing:.18em;text-shadow:0 4px 24px #6ea2dc66}.city-hero-art small{margin-top:4px;color:#a6bad2;font-size:8px;font-weight:900;letter-spacing:.22em}.city-hero-art i{margin-top:16px;color:#7196c2;font-size:10px;font-style:normal;font-weight:900;letter-spacing:.34em}
.city-connect{display:grid;grid-template-columns:.85fr 1.4fr;gap:18px;align-items:center;margin:14px 0 30px;padding:clamp(18px,3vw,26px);background:linear-gradient(130deg,var(--s),#101d2c)}.city-connect-intro h2{margin:5px 0;font-size:21px}.city-connect-intro p,.city-section-head p{margin:0;color:var(--muted);font-size:10px}.city-server{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#080f18aa}.city-server-copy{display:grid;flex:1;gap:3px;min-width:190px}.city-server-copy>small{color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.12em}.city-server-copy code{color:#e5edf8;font-size:clamp(15px,2vw,19px);font-weight:850;letter-spacing:.03em}.city-status{color:#aab8ca;font-size:8px}.city-status i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#50c78c;box-shadow:0 0 8px #50c78c88}.city-connect-link{white-space:nowrap}
.city-section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:12px}.city-section-head h2{margin:4px 0;font-size:clamp(23px,3vw,32px)}.city-section-note{padding:6px 9px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:8px}.city-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.city-info-card{position:relative;display:flex;min-height:222px;flex-direction:column;align-items:flex-start;padding:19px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,var(--s),var(--s2));color:var(--text);text-decoration:none;transition:transform .18s,border-color .18s,background .18s}.city-info-card:hover{transform:translateY(-3px);border-color:#5577a2;background:linear-gradient(145deg,#162335,#202a39)}.city-info-icon{display:grid;width:37px;height:37px;place-items:center;margin-bottom:13px;border:1px solid #5c7fa744;border-radius:10px;background:#3459872b;color:#a6c6ee;font-size:17px}.city-info-card>small{color:#91afd3;font-size:8px;font-weight:900;letter-spacing:.13em}.city-info-card h3{margin:5px 0;font-size:16px}.city-info-card p{margin:0;color:var(--muted);font-size:10px;line-height:1.6}.city-info-card>b{margin-top:auto;padding-top:15px;color:#a9c8ef;font-size:9px}.city-disclaimer{margin-top:16px}
@media(max-width:800px){.city-hero{grid-template-columns:minmax(0,1fr) 220px;gap:16px}.city-connect{grid-template-columns:1fr}.city-info-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.city-hero{grid-template-columns:1fr;min-height:unset;padding:22px}.city-hero h2{font-size:45px}.city-hero-art{min-height:160px}.city-art-orbit{width:135px;height:135px}.city-server{align-items:stretch}.city-server-copy{flex-basis:100%}.city-server button,.city-connect-link{flex:1}.city-info-grid{grid-template-columns:1fr}.city-info-card{min-height:185px}.city-section-head{align-items:flex-start;flex-direction:column}}