:root { --ink: #102033; --muted: #68778a; --gold: #f1bd4a; --orange: #ff781f; --teal: #22a98a; --violet: #7b61ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: radial-gradient(circle at 5% 0%, rgba(255,177,59,.45), transparent 30rem), radial-gradient(circle at 100% 15%, rgba(100,105,255,.28), transparent 34rem), linear-gradient(145deg, #07111f, #11283d 48%, #173f4b); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.hub { position: relative; z-index: 1; width: min(100%, 980px); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px 32px; }
.hub-hero { max-width: 760px; padding: 28px 24px; border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 28px 80px rgba(0,0,0,.23); }
.hub-kicker { color: #ffd28b; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.hub h1 { margin: 13px 0 12px; font-size: clamp(34px, 9vw, 64px); line-height: 1.04; letter-spacing: -.055em; }
.hub h1 span { color: #ffd18a; }
.hub-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.8; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.hub-card { position: relative; overflow: hidden; display: block; min-height: 250px; padding: 22px 20px; color: white; text-decoration: none; border-radius: 24px; border: 1px solid rgba(255,255,255,.13); background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); box-shadow: 0 18px 48px rgba(0,0,0,.17); transition: transform .2s ease, box-shadow .2s ease; }
.hub-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.hub-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -55px; bottom: -72px; border-radius: 50%; opacity: .72; }
.hub-card.debt::after { background: radial-gradient(circle, #ffd28b, var(--orange) 58%, transparent 72%); }
.hub-card.lowpoint::after { background: radial-gradient(circle, #b9f4e2, var(--teal) 58%, transparent 72%); }
.hub-card.earnings::after { background: radial-gradient(circle, #ffe9a7, var(--violet) 58%, transparent 72%); }
.hub-number { color: rgba(255,255,255,.35); font-size: 13px; font-weight: 900; letter-spacing: .14em; }
.hub-card h2 { position: relative; margin: 48px 0 12px; font-size: 24px; line-height: 1.22; letter-spacing: -.03em; }
.hub-card p { position: relative; margin: 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.7; }
.hub-link { position: absolute; left: 20px; bottom: 20px; z-index: 1; color: #ffe0a0; font-size: 13px; font-weight: 900; }
.hub-note { margin: 16px 5px 0; color: rgba(255,255,255,.43); font-size: 11px; line-height: 1.7; text-align: center; }
@media (max-width: 760px) { .hub-grid { grid-template-columns: 1fr; } .hub-card { min-height: 190px; } .hub-card h2 { margin-top: 34px; } }
@media (max-width: 420px) { .hub { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .hub-hero { padding: 22px 17px; border-radius: 24px; } .hub h1 { font-size: 31px; } .hub-card { min-height: 178px; padding: 18px 16px; border-radius: 20px; } .hub-card h2 { margin-top: 28px; font-size: 21px; } .hub-link { left: 16px; bottom: 16px; } }