:root { --cu-red: #d61f43; --cu-wine: #5d1022; --cu-orange: #ff7d4a; --cu-ink: #08060a; }
body { background: radial-gradient(90% 60% at 84% 0%, #211025 0%, transparent 55%), radial-gradient(70% 45% at 0% 58%, #3b0d1d 0%, transparent 60%), var(--cu-ink); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .42; background-image: linear-gradient(120deg, transparent 0 48%, rgba(214,31,67,.065) 49% 50%, transparent 51% 100%), radial-gradient(circle at 16% 21%, rgba(255,125,74,.14), transparent 22%); background-size: 36px 36px, auto; }
.nav { border-color: rgba(255,255,255,.16); }.brand i,.live-dot { background: var(--cu-orange); box-shadow: 0 0 20px var(--cu-orange); }.button.primary { background: linear-gradient(100deg, var(--cu-red), var(--cu-orange)); color: #fff; }.button.primary:hover { background: linear-gradient(100deg, #ed3157, #ff9367); }.eyebrow { color: #ff8b5b; }.hero-scene { min-height: 660px; isolation: isolate; }.hero-scene::before { content: ''; position: absolute; z-index: -1; inset: 30px -120px 0 25%; background: linear-gradient(90deg, var(--cu-ink) 0%, rgba(8,6,10,.30) 38%, rgba(8,6,10,.05) 100%), url('assets/cu-orbit-hero-v1.png') right center / cover no-repeat; opacity: .94; mask-image: linear-gradient(90deg, transparent 0%, black 25%); }.hero-copy { position: relative; z-index: 1; }.hero h1 em { color: #f4b5c2; }.token-atmosphere { display: flex; gap: 8px; margin: 18px 0 -2px; }.token-atmosphere span,.rail-tokens span { border: 1px solid rgba(255,125,74,.42); background: rgba(93,16,34,.24); padding: 5px 7px; color: #ffb18e; font: 10px 'DM Mono'; letter-spacing: .6px; }
.orbital-card { background: linear-gradient(145deg, rgba(214,31,67,.18), rgba(8,6,10,.35)); border-color: rgba(255,125,74,.25); }.planet { background: radial-gradient(circle at 30% 30%, #ffdcc2, #ff7d4a 30%, #9d1431 70%); box-shadow: 0 0 50px #d61f4388; }.orbit-ring { border-color: rgba(255,125,74,.48); }.ring-b { border-color: rgba(222,81,145,.40); }.status,.arrow { color: #ff9d70; }
.scene { position: relative; scroll-margin-top: 50px; transition: opacity .55s ease, transform .65s cubic-bezier(.2,.7,.2,1), filter .55s ease; }.scene:not(.scene-active) { opacity: .62; transform: scale(.975) translateY(18px); filter: saturate(.74); }.scene.scene-active { opacity: 1; transform: scale(1) translateY(0); filter: saturate(1); }.scene::after { content: ''; position: absolute; pointer-events: none; inset: -18px -36px; opacity: 0; background-image: linear-gradient(90deg, transparent 0 48%, rgba(255,125,74,.35) 49% 51%, transparent 52%), linear-gradient(0deg, transparent 0 48%, rgba(214,31,67,.30) 49% 51%, transparent 52%); background-size: 14px 14px; mix-blend-mode: screen; transform: scale(.94); transition: opacity .35s ease, transform .55s ease; }.scene.scene-active::after { opacity: .18; transform: scale(1); animation: pixel-assemble .8s ease both; } @keyframes pixel-assemble { from { clip-path: inset(48% 0 48% 0); } to { clip-path: inset(0); } }
.section-rail { position: fixed; z-index: 7; right: 25px; top: 50%; transform: translateY(-50%); width: 138px; padding: 10px; border: 1px solid rgba(255,255,255,.13); background: rgba(10,6,10,.68); backdrop-filter: blur(13px); box-shadow: 0 20px 60px rgba(0,0,0,.24); }.rail-preview { position: relative; min-height: 88px; overflow: hidden; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, rgba(214,31,67,.32), rgba(255,125,74,.10)); }.rail-preview::after { content: ''; position: absolute; width: 80px; height: 80px; right: -30px; top: 15px; border: 1px solid rgba(255,125,74,.6); transform: rotate(45deg); }.rail-preview b { display: block; max-width: 86px; margin-top: 7px; font-size: 14px; line-height: 1.05; }.rail-preview i { position: absolute; right: 8px; bottom: 8px; color: #ffb18e; font: 10px 'DM Mono'; }.rail-links { padding: 8px 0; }.rail-link { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 2px; color: #9e95a0; border: 0; background: transparent; cursor: pointer; text-align: left; font: 10px 'DM Mono'; }.rail-link span { width: 6px; height: 6px; background: #6f3949; transform: rotate(45deg); }.rail-link:hover,.rail-link.active { color: #fff3ef; }.rail-link.active span { background: var(--cu-orange); box-shadow: 0 0 10px var(--cu-orange); }.rail-tokens { display: flex; gap: 5px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 9px; }.rail-tokens span { padding: 3px 4px; font-size: 8px; }
.section-heading h2,.starter-detail-head h3 { text-shadow: 3px 3px 0 rgba(214,31,67,.22); }.category,.overview-card,.top-group { background: linear-gradient(145deg, rgba(93,16,34,.19), rgba(255,255,255,.015)); }.category.featured,.top-group.active { border-color: var(--cu-orange); background: linear-gradient(145deg, rgba(214,31,67,.27), rgba(255,125,74,.06)); }.prototype-banner { border-color: var(--cu-orange); background: rgba(214,31,67,.12); }.overview-key,.top-group li i,.action.funding,.action.claim_fees { color: #ff9d70; }.top-group.active { border-color: var(--cu-orange); }.all-transactions-link { color: #ff9d70; }
@media (max-width: 1180px) { .section-rail { right: 10px; width: 112px; }.shell { width: min(1100px, calc(100% - 180px)); }.hero-scene::before { inset-right: -70px; } }
@media (max-width: 750px) { .section-rail { right: 12px; top: auto; bottom: 12px; transform: none; width: auto; display: flex; align-items: center; padding: 7px; }.rail-preview,.rail-tokens { display: none; }.rail-links { display: flex; gap: 3px; padding: 0; }.rail-link { width: auto; padding: 7px; font-size: 0; }.rail-link span { width: 8px; height: 8px; }.shell { width: min(100% - 32px, 1160px); }.hero-scene { min-height: 600px; }.hero-scene::before { inset: 270px -16px 0 5%; mask-image: linear-gradient(180deg, transparent, black 40%); }.scene:not(.scene-active) { opacity: .78; transform: none; } }