.hub-body { overflow-x: clip; }
.hero-line { display: block; }
.hub-hero h1 em.hero-line { margin-left: clamp(0rem, 3vw, 3rem); font-style: italic; }
.hub-orbit { perspective: 900px; contain: layout paint; }
.topographic-map { position: absolute; inset: -5%; z-index: -1; width: 110%; height: 110%; overflow: visible; pointer-events: none; fill: none; animation: topo-breathe 8s ease-in-out infinite; }
.topographic-lines path { stroke: rgba(17, 24, 69, .2); stroke-width: 1.15; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; animation: topo-drift 16s linear infinite; }
.topographic-lines path:nth-child(even) { animation-direction: reverse; animation-duration: 20s; }
.topographic-lines .topo-accent { stroke: rgba(255, 91, 85, .42); stroke-width: 1.5; }
.orbit-ring { opacity: .68; }
.hub-orbit.motion-paused *, .hub-orbit.motion-paused::before { animation-play-state: paused !important; }
[data-scroll-depth] { --scroll-shift: 0px; translate: 0 var(--scroll-shift); }
:where(a, button):focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; border-radius: 8px; }
.scroll-progress { position: fixed; inset: 0 auto auto 0; z-index: 40; width: 100%; height: 3px; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; background: var(--coral); pointer-events: none; }
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 30; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0); transition: opacity .18s ease; }
.cursor-dot { width: 6px; height: 6px; background: var(--coral); }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(17, 24, 69, .58); transition: width .18s ease, height .18s ease, border-color .18s ease, opacity .18s ease; }
.cursor-ready .cursor-dot, .cursor-ready .cursor-ring { opacity: 1; }
.cursor-ready.cursor-hover .cursor-ring { width: 54px; height: 54px; border-color: var(--coral); }
@keyframes topo-drift { to { stroke-dashoffset: -96; } }
@keyframes topo-breathe { 0%, 100% { transform: scale(.985) rotate(-.4deg); opacity: .72; } 50% { transform: scale(1.025) rotate(.4deg); opacity: 1; } }
@media (max-width: 900px) { [data-scroll-depth] { translate: none; } .hub-hero h1 em.hero-line { margin-left: 0; } }
@media (max-width: 680px) { .topographic-map { inset: 0; width: 100%; height: 100%; opacity: .72; } }
@media (prefers-reduced-motion: reduce) { [data-scroll-depth] { translate: none; } .scroll-progress, .cursor-dot, .cursor-ring { display: none; } .topographic-map, .topographic-lines path { animation: none; } }