:root {
    color-scheme: dark;
    --bg: #090b16;
    --panel: rgba(16, 19, 35, .78);
    --text: #f4f5ff;
    --muted: #9399b5;
    --cyan: #65e8ff;
    --pink: #ff7edb;
    --line: rgba(157, 184, 222, .16);
}

* { box-sizing: border-box; }

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 18% 12%, rgba(50, 121, 190, .22), transparent 30rem),
        radial-gradient(circle at 86% 74%, rgba(185, 53, 156, .16), transparent 34rem),
        var(--bg);
    font-family: Inter, system-ui, sans-serif;
}

body::before,
body::after {
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    content: "";
}

body::before {
    opacity: .3;
    background:
        radial-gradient(circle at 50% 45%, transparent 0 18rem, rgba(0,0,0,.22) 48rem),
        linear-gradient(110deg, transparent 0 46%, rgba(101,232,255,.05) 46.05% 46.1%, transparent 46.15% 100%);
    animation: ambient-shift 18s ease-in-out infinite alternate;
}

body::after {
    z-index: 4;
    opacity: .05;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 5px,
        rgba(255,255,255,.13) 6px,
        transparent 7px
    );
    mix-blend-mode: screen;
    animation: screen-scan 11s linear infinite;
}

.grid {
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
    animation: grid-drift 28s linear infinite;
}

/* Snow canvas */
#snow-canvas {
    position: fixed;
    z-index: 0;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    will-change: contents;
    transform: translateZ(0);
}

.hub {
    position: relative;
    z-index: 1;
    width: min(100% - 48px, 940px);
    margin: 0 auto;
    padding: clamp(72px, 13vh, 150px) 0 34px;
}

.eyebrow {
    margin: 0 0 24px;
    color: var(--cyan);
    font: 600 12px/1 Chakra Petch, monospace;
    letter-spacing: .24em;
}

.eyebrow span { color: #65708d; }

h1 {
    max-width: 760px;
    margin: 0;
    font: 700 clamp(58px, 10vw, 116px)/.84 Chakra Petch, sans-serif;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

h1 strong {
    color: transparent;
    -webkit-text-stroke: 1px rgba(244, 245, 255, .9);
}

.intro {
    max-width: 430px;
    margin: 30px 0 58px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.hub-signal,
.profile-list-head {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #7f8aa7;
    font: 600 10px/1 Chakra Petch, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hub-signal {
    margin: -30px 0 28px;
}

.signal-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cyan);
    white-space: nowrap;
}

.signal-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 4px rgba(101,232,255,.08), 0 0 14px var(--cyan);
    animation: signal-pulse 1.8s ease-in-out infinite;
}

.signal-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
}

.signal-detail { color: #59647f; }
.signal-detail b { margin: 0 5px; color: var(--pink); font-weight: 400; }

.profile-list-head {
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 3px;
    color: #626d89;
}

.profile-list-head span:first-child { color: #aeb9d3; }

.profile-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.profile-card {
    position: relative;
    display: flex;
    min-height: 300px;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.13);
    background:
        linear-gradient(120deg, rgba(255,255,255,.035), transparent 35%),
        linear-gradient(145deg, var(--panel), rgba(11, 13, 26, .92));
    color: var(--text);
    text-decoration: none;
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
    transition: transform .28s cubic-bezier(.2,.75,.25,1), border-color .25s ease, box-shadow .25s ease, background .25s ease;
    animation: card-in .7s both;
}

.profile-card:nth-child(2n) { animation-delay: .08s; }
.profile-card:nth-child(3n) { animation-delay: .16s; }

.profile-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    content: "";
    box-shadow: 0 0 24px var(--accent);
}

.profile-card::after {
    position: absolute;
    right: -40px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    opacity: .22;
    content: "";
}

.profile-card::before {
    transition: height .25s ease, box-shadow .25s ease;
}

.profile-card > * { position: relative; z-index: 1; }

.profile-card {
    isolation: isolate;
}

.profile-card .card-hint {
    position: absolute;
    top: 23px;
    right: 24px;
    color: var(--accent);
    font: 600 10px/1 Chakra Petch, monospace;
    letter-spacing: .14em;
    opacity: .5;
    transform: translateX(5px);
    transition: opacity .25s ease, transform .25s ease;
}

.profile-card .card-hint b {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 400;
}

.profile-card::marker { color: transparent; }

.profile-card:hover::before,
.profile-card:focus-visible::before {
    height: 5px;
    box-shadow: 0 0 32px var(--accent);
}

.profile-card:hover,
.profile-card:focus-visible {
    transform: perspective(900px) translateY(-7px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent), 0 18px 50px rgba(0,0,0,.3), 0 0 34px color-mix(in srgb, var(--accent) 12%, transparent);
    outline: none;
}

.profile-card:active { transform: perspective(900px) translateY(-2px) scale(.995); }

.profile-card:hover .card-hint,
.profile-card:focus-visible .card-hint {
    opacity: 1;
    transform: translateX(0);
}

.profile-card::after {
    background: radial-gradient(circle at var(--pointer-x, 100%) var(--pointer-y, 100%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%);
    transition: opacity .25s ease, background .15s ease;
}

@keyframes card-in {
    from { opacity: 0; transform: perspective(900px) translateY(16px) scale(.98); }
    to { opacity: 1; transform: perspective(900px) translateY(0) scale(1); }
}

.profile-card--cyan { --accent: var(--cyan); }
.profile-card--pink { --accent: var(--pink); }
.card-index, .card-route, .card-label, .card-status, footer {
    font: 600 11px/1 Chakra Petch, monospace;
    letter-spacing: .14em;
}

.card-index { color: var(--accent); }
.card-status { margin-top: 18px; color: #9ba4bd; }
.card-status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
}
.card-label { margin-top: auto; color: #737b97; }
.card-name {
    margin-top: 9px;
    font: 600 clamp(23px, 3vw, 34px)/1.1 Chakra Petch, sans-serif;
}
.card-route { margin-top: 13px; color: var(--accent); }
.card-arrow {
    position: absolute;
    right: 23px;
    bottom: 19px;
    color: var(--accent);
    font-size: 25px;
}

.profile-message {
    grid-column: 1 / -1;
    margin: 0;
    padding: 36px 24px;
    border: 1px solid rgba(255,255,255,.1);
    color: #79829e;
    font: 600 12px/1 Chakra Petch, monospace;
    letter-spacing: .16em;
    text-align: center;
}

.profile-message--error { color: #ff9fcf; }

.hub-loader {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #080b13;
    transition: opacity .55s ease, visibility .55s ease;
}

.hub-loader.is-hidden { opacity: 0; visibility: hidden; }
.loader-grid, .loader-scanline { position: absolute; inset: 0; pointer-events: none; }
.loader-grid {
    opacity: .25;
    background-image:
        linear-gradient(rgba(101,232,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(101,232,255,.08) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle, black, transparent 72%);
    animation: loader-grid-drift 16s linear infinite;
}
.loader-scanline {
    height: 1px;
    inset: auto 0 20%;
    background: var(--cyan);
    box-shadow: 0 0 24px 2px var(--cyan);
    opacity: .42;
    animation: scan 2.2s ease-in-out infinite;
}
.loader-content {
    position: relative;
    width: min(360px, calc(100% - 48px));
    text-align: center;
    animation: loader-fade-in .8s ease both;
}
.loader-hex {
    position: relative;
    display: flex;
    width: 108px;
    height: 108px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}
.loader-hex svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: loader-hex-spin 6s linear infinite;
    filter: drop-shadow(0 0 6px rgba(101,232,255,.35));
}
.loader-hex polygon { fill: none; stroke-width: 2; }
.loader-hex-track { stroke: rgba(255,255,255,.08); }
.loader-hex-fill {
    stroke: var(--cyan);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 336;
    stroke-dashoffset: 336;
    filter: drop-shadow(0 0 5px var(--cyan));
    transition: stroke-dashoffset .35s ease;
}
.loader-hex span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font: 700 1.05rem Chakra Petch, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(0,240,255,.6);
}
.loader-title {
    margin: 0 0 14px;
    text-align: center;
}
.loader-title-main {
    display: block;
    color: transparent;
    background: linear-gradient(90deg, #dce6f6 0%, var(--cyan) 42%, #ffffff 58%, #dce6f6 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    font: 700 16px/1 Chakra Petch, monospace;
    letter-spacing: .2em;
    text-shadow: 0 0 18px rgba(101,232,255,.16);
    animation: loader-title-flow 4s linear infinite;
}
.loader-title-tagline {
    display: block;
    margin-top: 8px;
    color: rgba(210, 224, 245, .48);
    font: 500 8px/1 Chakra Petch, monospace;
    letter-spacing: .28em;
    text-transform: uppercase;
}
.loader-label {
    margin: 0 0 18px;
    color: #67738e;
    font: 11px/1 Chakra Petch, monospace;
    letter-spacing: .16em;
}
.loader-label span { color: var(--cyan); }
.loader-label b { color: #9da9c1; font-weight: 400; }
.loader-label i { font-style: normal; animation: dots 1s steps(3, end) infinite; }
.loader-bar { height: 3px; background: rgba(255,255,255,.09); }
.loader-bar span {
    display: block;
    width: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--cyan), #d9fbff, var(--cyan));
    background-size: 220% 100%;
    box-shadow: 0 0 14px var(--cyan);
    transition: width .1s linear;
    animation: loader-bar-shimmer 1.8s linear infinite;
}

@keyframes loader-grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 46px 46px, 46px 46px; } }
@keyframes loader-fade-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes loader-hex-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes loader-title-flow { from { background-position: 0% center; } to { background-position: 220% center; } }
@keyframes loader-bar-shimmer { from { background-position: 0% center; } to { background-position: 220% center; } }
@keyframes scan { 0%, 100% { transform: translateY(-30vh); opacity: 0; } 35%, 65% { opacity: .45; } 50% { transform: translateY(30vh); } }
@keyframes dots { 0% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .2; } }
@keyframes grid-drift { from { background-position: 0 0; } to { background-position: 46px 46px; } }
@keyframes ambient-shift { from { transform: translate3d(-1%, -1%, 0) scale(1); } to { transform: translate3d(1%, 1%, 0) scale(1.04); } }
@keyframes screen-scan { from { transform: translateY(-12px); } to { transform: translateY(12px); } }
@keyframes signal-pulse { 0%, 100% { opacity: .6; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }

.low-performance .loader-grid,
.low-performance .loader-hex svg,
.low-performance .loader-title-main,
.low-performance .loader-bar span {
    animation: none;
}

.low-performance .loader-grid {
    opacity: .12;
    mask-image: none;
}

.low-performance .loader-scanline {
    animation: none;
    opacity: .2;
}

.low-performance body::before,
.low-performance body::after,
.low-performance .grid,
.low-performance .signal-status i {
    animation: none;
}

.low-performance body::after { opacity: .025; }

.low-performance .loader-hex svg,
.low-performance .loader-hex-fill,
.low-performance .loader-bar span {
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .loader-grid,
    .loader-scanline,
    .loader-content,
    .loader-hex svg,
    .loader-title-main,
    .loader-title-tagline,
    .loader-label i,
    .loader-bar span,
    .profile-card,
    body::before,
    body::after,
    .grid,
    .signal-status i {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    .profile-card { transform: none !important; }
}

footer {
    display: flex;
    justify-content: space-between;
    margin-top: 62px;
    color: #59617c;
}

@media (max-width: 650px) {
    .hub { width: min(100% - 32px, 940px); padding-top: 64px; }
    .intro { margin: 26px 0 38px; }
    .hub-signal { margin-top: -14px; }
    .signal-detail { display: none; }
    .profile-list { grid-template-columns: 1fr; }
    .profile-card { min-height: 235px; }
    footer { gap: 12px; flex-direction: column; }
}

/* Home refresh: match the profile terminal language without coupling to it. */
:root {
    --bg: #0a0a0f;
    --panel: rgba(16, 16, 26, .86);
    --text: #fff;
    --muted: rgba(255, 255, 255, .48);
    --cyan: #00f0ff;
    --purple: #7f00ff;
    --line: rgba(255, 255, 255, .13);
}

body {
    background:
        radial-gradient(ellipse 65% 55% at 50% 0%, rgba(0, 240, 255, .08), transparent 72%),
        radial-gradient(ellipse 45% 45% at 85% 88%, rgba(127, 0, 255, .12), transparent 70%),
        #0a0a0f;
}

body::before {
    opacity: .42;
    background:
        radial-gradient(ellipse 52% 48% at 50% 44%, transparent 0 26%, rgba(0, 0, 0, .45) 82%),
        linear-gradient(115deg, transparent 0 46%, rgba(0, 240, 255, .06) 46.08% 46.14%, transparent 46.2% 100%);
}

.grid {
    opacity: .28;
    background-image:
        linear-gradient(rgba(0, 240, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, .05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 70% 62% at 50% 42%, black, transparent 86%);
}

.grid::before,
.grid::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
}

.grid::before {
    inset: 8% 13%;
    border: 1px solid rgba(0, 240, 255, .09);
    border-radius: 50%;
    opacity: .65;
    mask-image: linear-gradient(to bottom, transparent, black 30%, black 68%, transparent);
    animation: radar-orbit 18s linear infinite;
}

.grid::after {
    top: 26%;
    bottom: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, .38), rgba(127, 0, 255, .3), transparent);
    box-shadow: 0 0 20px rgba(0, 240, 255, .16);
    opacity: 0;
    animation: signal-sweep 8s ease-in-out infinite;
}

.hub {
    width: min(100% - 48px, 980px);
    padding: clamp(54px, 9vh, 104px) 0 36px;
}

.hub::before,
.hub::after {
    position: absolute;
    width: 42px;
    height: 42px;
    border-color: rgba(0, 240, 255, .42);
    content: "";
    pointer-events: none;
}

.hub::before {
    top: 34px;
    left: -18px;
    border-top: 1px solid;
    border-left: 1px solid;
}

.hub::after {
    right: -18px;
    bottom: 26px;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

.eyebrow {
    margin-bottom: 18px;
    color: var(--cyan);
    font-size: 11px;
    letter-spacing: .3em;
}

.eyebrow span { color: rgba(255, 255, 255, .34); }

h1 {
    max-width: 700px;
    font-size: clamp(54px, 8.3vw, 102px);
    line-height: .88;
    letter-spacing: -.04em;
}

h1 strong {
    background: linear-gradient(90deg, #fff 0%, var(--cyan) 35%, var(--purple) 72%, #fff 100%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0;
    animation: home-title-flow 7s linear infinite;
}

.intro {
    max-width: 390px;
    margin: 26px 0 46px;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    line-height: 1.75;
}

.hub-signal,
.profile-list-head {
    gap: 13px;
    color: rgba(255, 255, 255, .36);
    font-size: 10px;
    letter-spacing: .2em;
}

.hub-signal {
    margin: -18px 0 42px;
}

.signal-status { color: var(--cyan); }
.signal-status i {
    background: var(--cyan);
    box-shadow: 0 0 0 4px rgba(0, 240, 255, .08), 0 0 14px var(--cyan);
}
.signal-rule { background: linear-gradient(90deg, rgba(0, 240, 255, .22), transparent); }
.signal-detail b { color: var(--purple); }

.profile-list-head {
    margin-bottom: 14px;
    padding: 0 6px;
}

.profile-list-head span:first-child { color: rgba(255, 255, 255, .66); }

.profile-list {
    gap: 14px;
}

.profile-card {
    min-height: 290px;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 3px;
    background:
        linear-gradient(145deg, rgba(0, 240, 255, .05), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(12, 12, 19, .94));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 14px 45px rgba(0, 0, 0, .18);
}

.profile-card::before {
    height: 2px;
    background: linear-gradient(90deg, var(--accent), rgba(255, 255, 255, .08));
    box-shadow: 0 0 18px var(--accent);
    animation: accent-breathe 3.8s ease-in-out infinite;
}

.profile-card::after {
    right: -68px;
    bottom: -92px;
    width: 260px;
    height: 260px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    opacity: .18;
    animation: card-orbit 9s ease-in-out infinite;
}

.profile-card--cyan { --accent: var(--cyan); }
.profile-card--pink { --accent: var(--purple); }

.profile-card:hover,
.profile-card:focus-visible {
    border-color: var(--accent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
        0 20px 55px rgba(0, 0, 0, .38),
        0 0 34px color-mix(in srgb, var(--accent) 14%, transparent);
}

.card-index,
.card-route,
.card-label,
.card-status,
footer { letter-spacing: .18em; }

.card-index { color: var(--accent); }
.card-status { color: rgba(255, 255, 255, .48); }
.card-status i { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.card-label { color: rgba(255, 255, 255, .38); }
.card-name {
    font-size: clamp(25px, 3vw, 36px);
    letter-spacing: .015em;
}
.card-route { color: var(--accent); }
.card-hint { letter-spacing: .16em; }

.profile-message {
    border-color: rgba(0, 240, 255, .18);
    border-radius: 3px;
    background: rgba(0, 240, 255, .025);
}

footer {
    margin-top: 50px;
    color: rgba(255, 255, 255, .28);
}

@keyframes home-title-flow {
    from { background-position: 0% center; }
    to { background-position: 240% center; }
}

@keyframes radar-orbit {
    from { transform: rotate(0deg) scale(.94); }
    50% { transform: rotate(180deg) scale(1.04); }
    to { transform: rotate(360deg) scale(.94); }
}

@keyframes signal-sweep {
    0%, 12% { transform: translateY(-20vh); opacity: 0; }
    28%, 72% { opacity: .8; }
    88%, 100% { transform: translateY(75vh); opacity: 0; }
}

@keyframes accent-breathe {
    0%, 100% { opacity: .72; }
    50% { opacity: 1; }
}

@keyframes card-orbit {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(5deg) translate(-8px, -5px); }
}

.hub-loader {
    background: #0a0a0f;
}

.loader-grid {
    background-image:
        linear-gradient(rgba(0, 240, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 0, 255, .06) 1px, transparent 1px);
}

.loader-scanline {
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, .75), rgba(127, 0, 255, .75), transparent);
}

.loader-hex svg {
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, .32)) drop-shadow(0 0 12px rgba(127, 0, 255, .16));
}

.loader-hex-fill {
    stroke: #00f0ff;
}

.loader-bar span {
    background: linear-gradient(90deg, var(--cyan), #fff, var(--purple), var(--cyan));
    background-size: 260% 100%;
}

@media (max-width: 650px) {
    .hub {
        width: min(100% - 32px, 980px);
        padding-top: 54px;
    }

    .hub::before { top: 22px; left: -8px; }
    .hub::after { right: -8px; bottom: 20px; }
    .hub-signal { margin-top: -8px; margin-bottom: 34px; }
    .profile-card { min-height: 238px; }
}

@media (prefers-reduced-motion: reduce) {
    .grid::before,
    .grid::after,
    .profile-card::before,
    .profile-card::after {
        animation: none !important;
    }
}