.hub-page {
    max-width: 1180px;
    display: grid;
    gap: clamp(4.5rem, 9vw, 8.5rem);
    padding-block: clamp(3.5rem, 7vw, 6.75rem) 5.5rem;
}

.hub-hero {
    position: relative;
    min-height: 430px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .68fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 7rem);
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4.25rem);
    border: 1px solid #293246;
    border-radius: 30px;
    color: #f6f4ff;
    background:
        radial-gradient(circle at 84% 22%, rgba(215, 255, 106, .18), transparent 20%),
        linear-gradient(128deg, #151927 0%, #20253a 58%, #151927 100%);
    box-shadow: 0 28px 70px rgba(15, 23, 42, .18);
}

.hub-hero::before { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 32px 32px; content: ""; pointer-events: none; }
.hub-hero-copy { position: relative; z-index: 1; }
.hub-kicker, .hub-section-heading > p, .hub-principles-heading > p { margin-bottom: .8rem; color: #b5c3fb; font-size: .69rem; font-weight: 850; letter-spacing: .16em; }
.hub-hero h1 { max-width: 700px; font-size: clamp(2.9rem, 6vw, 5.9rem); font-weight: 900; letter-spacing: -.085em; line-height: .95; text-wrap: balance; word-break: keep-all; }
.hub-hero h1 em { color: #e0ff6a; font-style: normal; }
.hub-hero-copy > p:not(.hub-kicker) { max-width: 540px; margin-top: 1.5rem; color: rgba(245, 247, 255, .74); font-size: clamp(.98rem, 1.8vw, 1.1rem); line-height: 1.75; word-break: keep-all; }
.hub-hero-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; }
.hub-hero-meta span { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .4rem .65rem; color: #e6e8f2; background: rgba(255,255,255,.07); font-size: .68rem; font-weight: 800; }

.hub-orbit { position: relative; width: min(100%, 330px); aspect-ratio: 1; justify-self: center; }
.hub-orbit-ring { position: absolute; inset: 50% auto auto 50%; display: block; border: 1px solid rgba(224,255,106,.5); border-radius: 50%; transform: translate(-50%, -50%); }
.ring-one { width: 38%; height: 38%; background: rgba(224,255,106,.08); }.ring-two { width: 67%; height: 67%; transform: translate(-50%, -50%) rotate(54deg) scaleY(.54); }.ring-three { width: 96%; height: 96%; border-color: rgba(181,195,251,.46); transform: translate(-50%, -50%) rotate(-30deg) scaleY(.54); }
.hub-orbit-core, .hub-orbit-node { position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 50%; font-weight: 900; line-height: 1; box-shadow: 0 10px 24px rgba(0,0,0,.23); }
.hub-orbit-core { inset: 50% auto auto 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); color: #182039; background: #e0ff6a; font-size: 1.75rem; }
.hub-orbit-node { width: 42px; height: 42px; color: #fff; border: 1px solid rgba(255,255,255,.18); background: #323a58; font-size: .78rem; }.node-one { top: 5%; right: 20%; }.node-two { top: 45%; right: -2%; }.node-three { bottom: 4%; left: 18%; }.node-four { top: 28%; left: 0; color: #182039; background: #f4c4fa; }

.hub-section-heading { max-width: 720px; }.hub-section-heading h2, .hub-principles-heading h2 { font-size: clamp(1.75rem, 3.7vw, 2.6rem); font-weight: 880; letter-spacing: -.06em; line-height: 1.16; word-break: keep-all; }
.hub-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-top: 1.65rem; }
.hub-service-card { position: relative; min-width: 0; min-height: 365px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: 1.35rem; border: 1px solid var(--border); border-radius: 22px; color: var(--text-main); background: var(--surface); box-shadow: 0 8px 24px rgba(15,23,42,.04); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hub-service-card::after { position: absolute; right: -45px; bottom: -72px; width: 150px; height: 150px; border-radius: 50%; content: ""; transition: transform .2s ease; }.hub-service-card:hover { z-index: 1; transform: translateY(-7px); border-color: transparent; box-shadow: 0 24px 44px rgba(15,23,42,.14); }.hub-service-card:hover::after { transform: scale(1.15); }.hub-service-card:focus-visible { outline: 4px solid var(--primary); outline-offset: 3px; }
.hub-card-no, .hub-service-type { position: relative; z-index: 1; font-size: .67rem; font-weight: 900; letter-spacing: .12em; }.hub-card-no { color: var(--text-muted); }.hub-service-type { margin-top: .55rem; }
.hub-service-icon { position: relative; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; margin-top: 1.6rem; border-radius: 13px; font-size: 1.45rem; font-weight: 500; }
.hub-service-card h3 { position: relative; z-index: 1; margin-top: 1.1rem; font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 880; letter-spacing: -.055em; line-height: 1.16; word-break: keep-all; }.hub-service-desc { position: relative; z-index: 1; margin-top: .75rem; color: var(--text-sub); font-size: .81rem; line-height: 1.65; word-break: keep-all; }.hub-service-action { position: relative; z-index: 1; margin-top: auto; padding-top: 1.5rem; font-size: .76rem; font-weight: 850; }.hub-service-action b { margin-left: .22rem; }
.portfolio-card { background: #e9f2ff; }.portfolio-card .hub-service-type, .portfolio-card .hub-service-icon { color: #1748b6; }.portfolio-card .hub-service-icon { background: #cbdcff; }.portfolio-card::after { background: #8bb5ff; }.salary-card { background: #e9fbf2; }.salary-card .hub-service-type, .salary-card .hub-service-icon { color: #087758; }.salary-card .hub-service-icon { background: #b8eed4; }.salary-card::after { background: #83ddb9; }.tools-card { background: #f7efff; }.tools-card .hub-service-type, .tools-card .hub-service-icon { color: #6532bd; }.tools-card .hub-service-icon { background: #e4d0ff; }.tools-card::after { background: #c69dff; }.wealth-card { color: #f5f7ff; border-color: #2d3450; background: #20263d; }.wealth-card .hub-card-no { color: #b6c5f4; }.wealth-card .hub-service-type { color: #e0ff6a; }.wealth-card .hub-service-icon { color: #20263d; background: #e0ff6a; }.wealth-card h3, .wealth-card .hub-service-action { color: #f8f9ff; }.wealth-card .hub-service-desc { color: rgba(245,247,255,.84); }.wealth-card::after { background: #46557b; }

.hub-principles { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--border); border-radius: 24px; background: rgba(255,255,255,.72); }.hub-principles > ul { display: grid; gap: 0; border-top: 1px solid var(--border); }.hub-principles li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .25rem .7rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }.hub-principles i { grid-row: span 2; color: var(--primary); font-size: .68rem; font-style: normal; font-weight: 900; }.hub-principles strong { font-size: .9rem; font-weight: 850; }.hub-principles span { color: var(--text-sub); font-size: .78rem; line-height: 1.6; word-break: keep-all; }

@media (max-width: 980px) { .hub-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.hub-service-card { min-height: 300px; }.hub-hero { grid-template-columns: minmax(0, 1fr) 270px; gap: 1.5rem; }.hub-orbit { width: 260px; }.hub-principles { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 650px) { .hub-page { gap: 4rem; padding-block: 2rem 3.5rem; }.hub-hero { grid-template-columns: 1fr; min-height: 0; padding: 2rem 1.3rem; border-radius: 22px; }.hub-hero h1 { font-size: clamp(2.85rem, 14vw, 4.25rem); }.hub-orbit { width: 210px; margin: .5rem auto 0; }.hub-service-grid { grid-template-columns: 1fr; }.hub-service-card { min-height: 250px; }.hub-principles { padding: 1.3rem; border-radius: 18px; } }