:root{--hub-blue:#2f9cff;--hub-green:#3ed69d;--hub-purple:#8e7cff}
.hub-main{padding:52px 0 86px}
.breadcrumbs{margin-bottom:20px;color:var(--muted);font-size:13px}
.breadcrumbs a{color:#80bdff}
.hub-intro{max-width:820px;margin-bottom:34px}
.hub-kicker{display:inline-flex;padding:6px 12px;border:1px solid rgba(91,163,255,.28);border-radius:999px;background:rgba(26,100,200,.15);color:#a8d3ff;font-size:13px;font-weight:800}
.hub-intro h1{margin:16px 0 14px;font-size:clamp(36px,6vw,62px);line-height:1.14;letter-spacing:-.035em}
.hub-intro p{margin:0;color:#c3cfdd;font-size:17px}
.hub-section{margin-top:22px;padding:28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(9,25,47,.95),rgba(5,17,34,.95));box-shadow:var(--shadow)}
.hub-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.hub-section h2{margin:0;font-size:25px}
.hub-section-head p{margin:5px 0 0;color:var(--muted);font-size:14px}
.section-link{flex:0 0 auto;color:#65b5ff;font-size:14px;font-weight:800}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.article-card{display:flex;min-height:174px;flex-direction:column;padding:20px;border:1px solid rgba(140,180,230,.16);border-radius:16px;background:rgba(11,29,53,.78);transition:.2s ease}
.article-card:hover{transform:translateY(-4px);border-color:rgba(62,158,255,.55)}
.article-card .label{color:#74bfff;font-size:12px;font-weight:800}
.article-card h3{margin:8px 0 7px;font-size:17px;line-height:1.5}
.article-card p{margin:0;color:var(--muted);font-size:13px}
.article-card .read{margin-top:auto;padding-top:14px;color:#49a9ff;font-size:13px;font-weight:800}
.roadmap-list{display:grid;gap:12px;counter-reset:roadmap}
.roadmap-step{position:relative;display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:center;padding:18px;border:1px solid rgba(140,180,230,.16);border-radius:16px;background:rgba(11,29,53,.78);counter-increment:roadmap}
.roadmap-step:before{content:counter(roadmap);width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#188fff,#245aff);font-weight:900}
.roadmap-step h3{margin:0 0 3px;font-size:17px}
.roadmap-step p{margin:0;color:var(--muted);font-size:13px}
.roadmap-step .go{color:#63b7ff;font-size:13px;font-weight:800;white-space:nowrap}
.hub-note{margin-top:24px;padding:20px;border:1px solid rgba(62,214,157,.25);border-radius:16px;background:rgba(28,110,83,.11);color:#c5e8dc;font-size:14px}
.hub-note strong{color:#70e2b8}
@media(max-width:880px){.article-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hub-main{padding-top:34px}.hub-section{padding:20px}.hub-section-head{display:block}.section-link{display:inline-block;margin-top:10px}.article-grid{grid-template-columns:1fr}.article-card{min-height:158px}.roadmap-step{grid-template-columns:44px 1fr;padding:16px}.roadmap-step:before{width:38px;height:38px}.roadmap-step .go{grid-column:2}}
