@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root { color-scheme: dark; --accent: #22d3ee; --text: #f5f5f5; --muted: #98a2a8; --faint: #5e686f; --border: rgba(255,255,255,.105); }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { min-height: 100dvh; background: #0c0e10; color: var(--text); font-family: "Space Grotesk", sans-serif; -webkit-font-smoothing: antialiased; }
body::before { position: fixed; inset: 0; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 72px 72px; content: ""; mask-image: linear-gradient(90deg,#000,transparent 74%); pointer-events: none; }
a { color: inherit; text-decoration: none; }
.hub-shell { position: relative; display: grid; min-height: 100dvh; grid-template-columns: minmax(280px,.85fr) minmax(480px,1.15fr); grid-template-rows: auto 1fr auto; gap: 48px clamp(56px,8vw,140px); max-width: 1480px; margin: 0 auto; padding: 32px clamp(28px,5vw,76px) 28px; }
.hub-header, .hub-footer { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; }
.hub-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.hub-brand svg { width: 35px; height: 28px; }
.hub-status { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font: 500 10px "JetBrains Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.hub-status i { width: 6px; height: 6px; border-radius: 50%; background: #44e38f; animation: pulse 2.4s ease-in-out infinite; }
.hub-intro { align-self: center; padding-bottom: 8vh; }
.eyebrow { color: var(--accent); font: 500 10px "JetBrains Mono", monospace; letter-spacing: .16em; }
.hub-intro h1 { max-width: 610px; margin: 22px 0 24px; font-size: clamp(45px,5.4vw,78px); font-weight: 400; line-height: .98; letter-spacing: -.058em; }
.hub-intro h1 span { color: var(--accent); }
.hub-intro p { max-width: 43ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.hub-options { align-self: center; border-top: 1px solid var(--border); }
.hub-option { display: grid; grid-template-columns: 44px minmax(0,1fr) 48px; align-items: center; gap: 22px; min-height: 164px; padding: 28px 10px 28px 4px; border-bottom: 1px solid var(--border); transition: background-color .24s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1); }
.hub-option:hover { background: rgba(255,255,255,.025); transform: translateX(7px); }
.hub-option:active { transform: translateX(7px) scale(.985); }
.hub-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.option-number { align-self: start; padding-top: 8px; color: var(--faint); font: 500 10px "JetBrains Mono", monospace; }
.option-copy { display: grid; gap: 8px; }
.option-copy strong { font-size: clamp(32px,3.6vw,54px); font-weight: 500; letter-spacing: -.05em; }
.option-copy small { color: var(--muted); font-size: 13px; line-height: 1.5; }
.option-arrow { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: #c1c7ca; transition: border-color .24s, color .24s, transform .24s; }
.option-arrow svg { width: 20px; height: 20px; }
.hub-option:hover .option-arrow { border-color: var(--accent); color: var(--accent); transform: rotate(-35deg); }
.hub-footer { color: var(--faint); font: 500 10px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
@keyframes pulse { 0%,100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 900px) { .hub-shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; gap: 44px; padding: 24px 20px; } .hub-intro { align-self: end; padding: 44px 0 0; } .hub-options { align-self: start; } .hub-option { min-height: 132px; } }
@media (max-width: 560px) { .hub-status { overflow: hidden; width: 6px; white-space: nowrap; } .hub-intro h1 { font-size: clamp(40px,13vw,58px); } .hub-option { grid-template-columns: 28px minmax(0,1fr) 40px; gap: 12px; min-height: 122px; } .option-arrow { width: 38px; height: 38px; } .hub-footer span:last-child { display: none; } }