:root { --bg: #050308; --panel: rgba(14, 10, 21, .72); --line: rgba(210, 170, 255, .19); --text: #f7f2ff; --muted: #aaa2b8; --violet: #a95cff; --violet-light: #dbb8ff; --cyan: #75d7ff; }
* { box-sizing: border-box; } html { overflow-x: clip; scroll-behavior: smooth; } body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--text); background: var(--bg); font-family: Inter, sans-serif; } a { color: inherit; text-decoration: none; } .noise { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); }
.preloader { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; color: #ecd9ff; background: radial-gradient(circle at 50% 45%, #29104d, #08030f 42%, #030205 80%); transition: opacity .55s ease, visibility .55s ease; }.preloader::before { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(229,184,255,.05) 1px, transparent 1px), linear-gradient(rgba(229,184,255,.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at center, #000, transparent 68%); }.preloader.complete { opacity: 0; visibility: hidden; }.loader-core { position: relative; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 34% 27%, #cc94ff, #5b229b 42%, #16072e 68%, #050207); box-shadow: inset 0 0 22px rgba(255,255,255,.3), 0 0 32px #9d3dff, 0 0 90px rgba(141,48,255,.7); animation: loaderPulse 1.7s ease-in-out infinite; }.loader-core span { position: relative; z-index: 1; font: 600 21px "DM Mono", monospace; letter-spacing: .08em; }.loader-ring { position: absolute; inset: -21px; border: 1px solid rgba(220,171,255,.74); border-radius: 50%; }.loader-ring.ring-one { transform: rotateX(65deg) rotateZ(28deg); animation: loaderSpin 1.8s linear infinite; }.loader-ring.ring-two { inset: -34px; border-color: rgba(113,189,255,.5); transform: rotateX(-70deg) rotateZ(60deg); animation: loaderSpin 2.4s linear infinite reverse; }.preloader p { position: relative; margin: 0; font: 500 10px "DM Mono", monospace; letter-spacing: .2em; }.loader-progress { position: relative; width: 160px; height: 2px; overflow: hidden; background: rgba(235,206,255,.18); }.loader-progress i { display: block; width: 46%; height: 100%; background: linear-gradient(90deg, #8f37f1, #f0c3ff, #8acbff); box-shadow: 0 0 12px #d184ff; animation: loaderProgress 1.2s ease-in-out infinite; } @keyframes loaderSpin { to { transform: rotateX(65deg) rotateZ(388deg); } } @keyframes loaderPulse { 50% { transform: scale(1.08); filter: brightness(1.25); } } @keyframes loaderProgress { from { transform: translateX(-115%); } to { transform: translateX(250%); } }
.site-header { position: fixed; z-index: 12; top: 0; left: 0; display: flex; align-items: center; width: 100%; height: 76px; padding: 0 clamp(20px, 5vw, 78px); border-bottom: 1px solid rgba(215, 189, 255, .1); background: linear-gradient(180deg, rgba(5, 3, 8, .88), rgba(5, 3, 8, .3)); backdrop-filter: blur(16px); }.brand { display: block; }.brand img { display: block; width: 106px; height: auto; filter: drop-shadow(0 0 10px rgba(213, 185, 255, .2)); }.site-header nav { display: flex; gap: clamp(18px, 2.4vw, 38px); margin: 0 auto; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .04em; color: #c4b8cf; }.site-header nav a:hover { color: #fff; }.header-cta, .primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 18px; border-radius: 8px; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .02em; transition: transform .2s, box-shadow .2s, background .2s; }.header-cta { color: #160825; background: linear-gradient(135deg, #f6ebff, #bc81ff); box-shadow: 0 0 24px rgba(175, 91, 255, .28); }.primary-button { color: #160825; background: linear-gradient(135deg, #f7efff, #b46aff); box-shadow: 0 9px 34px rgba(170, 79, 255, .24); }.secondary-button { color: #e7d9f7; border: 1px solid var(--line); background: rgba(22, 12, 34, .52); }.header-cta:hover, .primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }.menu-toggle { display: none; }
.hero { position: relative; display: grid; place-items: center; min-height: min(930px, 100vh); overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 54%, rgba(49, 16, 95, .55), transparent 34%), radial-gradient(ellipse at 50% -5%, rgba(132, 52, 224, .22), transparent 42%), #06030a; }.hero::before { position: absolute; inset: 0; z-index: -4; content: ""; opacity: .6; background: linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle, #000, transparent 74%); }.hero::after { position: absolute; z-index: -1; bottom: -32%; width: min(650px, 96vw); height: 440px; content: ""; border-radius: 50%; background: radial-gradient(ellipse, rgba(52, 125, 255, .34), rgba(34, 16, 77, .52) 42%, transparent 70%); filter: blur(14px); } #energy-field { position: absolute; inset: 0; z-index: -3; width: 100%; opacity: .75; }.energy-network { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; overflow: visible; }.energy-main, .energy-branch { fill: none; stroke: #c372ff; stroke-linecap: round; }.energy-main { stroke-width: 2.1; filter: drop-shadow(0 0 6px #b132ff) drop-shadow(0 0 12px #b132ff); stroke-dasharray: 9 10 3 18; animation: surge 4s linear infinite; }.energy-branch { stroke-width: 1.5; opacity: .68; stroke-dasharray: 3 10 8 7; filter: drop-shadow(0 0 5px #a436ff); animation: surge 6s linear infinite reverse; }.energy-blur { fill: none; stroke: #9f3dff; stroke-width: 14; opacity: .65; filter: url(#energy-blur); }.delay { animation-delay: -2.2s; } @keyframes surge { to { stroke-dashoffset: -155; } }
.hero-content { position: relative; z-index: 2; width: min(710px, calc(100% - 40px)); padding-top: 62px; text-align: center; }.eyebrow, .mini-label { margin: 0 0 18px; color: #ceb3ed; font: 500 10px/1.4 "DM Mono", monospace; letter-spacing: .12em; }.eyebrow i { display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--violet-light); box-shadow: 0 0 10px var(--violet); }.hero h1 { margin: 0; font: 600 clamp(70px, 12vw, 176px)/.78 "Space Grotesk", sans-serif; letter-spacing: -.09em; background: linear-gradient(175deg, #fff 16%, #d2b5ff 55%, #7630be); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 55px rgba(180, 103, 255, .22); }.hero h2, .section-heading h2 { margin: 20px 0 0; font: 500 clamp(29px, 3.6vw, 50px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.06em; }.hero h2 em, .section-heading em { color: #c779ff; font-style: normal; }.hero-copy { max-width: 580px; margin: 20px auto 0; color: #b7aaba; font-size: 14px; line-height: 1.8; }.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }.hero-meta { display: flex; justify-content: center; gap: 28px; margin-top: 28px; color: #a796b5; font: 10px/1 "DM Mono", monospace; }.hero-meta b { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #84f0ce; box-shadow: 0 0 8px #84f0ce; }.orbital-core { position: absolute; z-index: -1; bottom: -92px; left: 50%; width: 300px; height: 300px; transform: translateX(-50%); }.core-orb { display: grid; place-items: center; position: absolute; inset: 56px; border-radius: 50%; color: #eadcff; background: radial-gradient(circle at 35% 25%, #b99bf0, #241050 49%, #07030e 72%); box-shadow: inset 0 0 48px rgba(255,255,255,.25), 0 0 85px rgba(118, 45, 255, .45); font: 600 24px "DM Mono", monospace; letter-spacing: .08em; }.orbital-ring { position: absolute; inset: 12px; border: 1px solid rgba(203, 154, 255, .42); border-radius: 50%; transform: rotateX(62deg) rotateZ(-20deg); }.ring-b { inset: 28px -2px; transform: rotateX(-65deg) rotateZ(45deg); border-color: rgba(95, 194, 255, .36); }
.section { position: relative; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 130px 0; }.section-heading { max-width: 510px; }.section-heading h2 { font-size: clamp(35px, 4vw, 57px); }.section-heading > p:last-child { margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }.centered { margin-inline: auto; text-align: center; }.ecosystem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 55px; }.feature-card { min-height: 198px; padding: 25px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(34,20,49,.72), rgba(10,7,16,.62)); transition: transform .25s, border-color .25s, box-shadow .25s; }.feature-card:hover, .trust-card:hover { transform: translateY(-5px); border-color: rgba(211, 165, 255, .5); box-shadow: 0 15px 45px rgba(101, 37, 167, .16); }.feature-wide { grid-column: span 2; }.card-icon { color: var(--violet-light); font: 23px/1 "Space Grotesk", sans-serif; }.feature-card h3, .trust-card h3 { margin: 32px 0 9px; font: 600 16px "Space Grotesk", sans-serif; }.feature-card p, .trust-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.feature-card a { display: block; margin-top: 22px; color: #e8d6ff; font: 10px "DM Mono", monospace; }.feature-card a b { margin-left: 8px; color: #c775ff; }
.earn-section { overflow: hidden; padding-bottom: 110px; }.earn-glow { position: absolute; z-index: -1; top: 23%; left: 50%; width: 900px; height: 470px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(114, 38, 201, .22), transparent 67%); filter: blur(18px); }.plan-tabs { display: flex; width: max-content; margin: 48px auto 18px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: rgba(16, 8, 27, .75); }.plan-tab { border: 0; border-radius: 6px; padding: 12px 28px; color: #aea0ba; background: transparent; cursor: pointer; font: 500 10px "DM Mono", monospace; }.plan-tab.active { color: #19062a; background: #e6d2fb; }.plan-stage { display: grid; grid-template-columns: .92fr 1.08fr; gap: 18px; padding: clamp(26px, 4vw, 55px); border: 1px solid rgba(210, 166, 255, .28); border-radius: 15px; background: linear-gradient(130deg, rgba(35,18,55,.78), rgba(9,7,15,.83)); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 28px 90px rgba(50, 13, 95, .19); }.plan-copy { align-self: center; }.plan-copy h3 { margin: 0; font: 500 clamp(31px, 3.4vw, 49px)/1.07 "Space Grotesk", sans-serif; letter-spacing: -.06em; }.plan-copy h3 strong { color: #c87cff; }.plan-copy > p { max-width: 410px; margin: 20px 0 28px; color: #b9aabd; font-size: 13px; line-height: 1.75; }.rate-display { display: grid; gap: 8px; }.rate-row, .orx-rate { display: grid; grid-template-columns: 1fr auto 1.25fr; align-items: center; gap: 15px; min-height: 90px; padding: 18px 20px; border: 1px solid rgba(213, 175, 255, .14); border-radius: 9px; background: rgba(8, 5, 13, .46); }.rate-row.featured { border-color: rgba(211, 141, 255, .56); background: linear-gradient(90deg, rgba(136, 57, 210, .26), rgba(15,7,24,.46)); }.rate-row span, .orx-rate span, .orx-rate i { color: #c4b2d4; font: 10px "DM Mono", monospace; }.rate-row b, .orx-rate b { color: #f1ddff; font: 600 38px/.85 "Space Grotesk", sans-serif; }.rate-row small, .orx-rate small { font-size: 17px; }.rate-row em, .orx-rate em { color: #a99aaf; font: 11px/1.4 "DM Mono", monospace; font-style: normal; }.orx-rate { grid-template-columns: 1fr auto; min-height: 286px; align-content: center; background: radial-gradient(circle at 81% 38%, rgba(146, 73, 227, .3), transparent 28%), rgba(8,5,13,.45); }.orx-rate b { font-size: 94px; }.orx-rate em, .orx-rate i { grid-column: 1 / -1; }.orx-rate i { color: #c77bff; }.disclosure { margin: 20px 0 0; color: #82768d; text-align: center; font: 10px/1.6 "DM Mono", monospace; }
.performance { width: 100%; padding-inline: max(20px, calc((100% - 1180px) / 2)); border-block: 1px solid rgba(217, 185, 255, .1); background: radial-gradient(ellipse at 50% 56%, rgba(71, 28, 125, .17), transparent 50%), #08050d; }.roadmap { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 75px; }.roadmap-line { position: absolute; top: 14px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, #d99bff, #7540ad 57%, rgba(165,103,236,.15)); }.roadmap-item { position: relative; padding: 40px 24px 0; }.roadmap-item::before { position: absolute; z-index: 1; top: 7px; left: 24px; width: 15px; height: 15px; content: ""; border: 3px solid #4b2b66; border-radius: 50%; background: #0a0710; }.roadmap-item.complete::before { border-color: #e3bcff; background: #a54ff5; box-shadow: 0 0 18px #a54ff5; }.roadmap-item span { color: #ad6bde; font: 11px "DM Mono", monospace; }.roadmap-item h3 { margin: 13px 0 8px; font: 600 17px "Space Grotesk", sans-serif; }.roadmap-item p { min-height: 58px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }.roadmap-item b { display: inline-block; margin-top: 18px; color: #c7a0e8; font: 10px "DM Mono", monospace; }
.innovators { overflow: hidden; text-align: center; }.innovator-orb { position: absolute; z-index: -1; top: 90px; left: 50%; width: 370px; height: 370px; transform: translateX(-50%); border: 1px solid rgba(208,160,255,.17); border-radius: 50%; background: radial-gradient(circle at 38% 35%, rgba(191, 101, 255, .22), rgba(21, 10, 39, .18) 45%, transparent 68%); box-shadow: 0 0 90px rgba(129, 44, 220, .13); }.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 58px; text-align: left; }.trust-card { min-height: 188px; padding: 27px; border: 1px solid var(--line); border-radius: 10px; background: rgba(17, 10, 27, .54); transition: transform .25s, border-color .25s, box-shadow .25s; }.trust-card > span { color: #c27cff; font: 10px "DM Mono", monospace; }.trust-card h3 { margin-top: 41px; }
.site-footer { display: grid; grid-template-columns: .8fr 1fr 1.25fr; align-items: center; gap: 35px; padding: 34px max(20px, calc((100% - 1180px) / 2)); border-top: 1px solid rgba(217, 185, 255, .12); background: #09070d; }.site-footer div { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; color: #b6a8c2; font: 10px "DM Mono", monospace; }.site-footer p { margin: 0; color: #766a7e; text-align: right; font: 9px/1.7 "DM Mono", monospace; }.reveal { opacity: 1; transform: none; }
@media (max-width: 760px) { .site-header { height: 65px; padding: 0 18px; }.brand img { width: 88px; }.menu-toggle { display: block; margin-left: auto; border: 0; padding: 10px; color: #dac3ed; background: transparent; font: 10px "DM Mono", monospace; }.site-header nav { display: none; position: absolute; top: 65px; left: 12px; right: 12px; flex-direction: column; gap: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(13,7,20,.96); }.site-header nav.open { display: flex; }.site-header nav a { padding: 13px; }.header-cta { display: inline-flex; padding: 11px 12px; font-size: 9px; }.hero { min-height: 760px; }.hero-content { padding-top: 56px; }.hero h1 { font-size: clamp(75px, 24vw, 118px); }.hero h2 { margin-top: 18px; font-size: 32px; }.hero-copy { font-size: 13px; }.hero-actions { flex-direction: column; align-items: center; }.hero-actions a { width: min(260px, 100%); }.hero-meta { flex-direction: column; gap: 10px; }.energy-network { width: 220%; left: -60%; }.section { width: min(100% - 32px, 580px); padding: 84px 0; }.ecosystem-grid { grid-template-columns: 1fr; margin-top: 38px; }.feature-wide { grid-column: auto; }.feature-card { min-height: 170px; }.plan-stage { grid-template-columns: 1fr; padding: 24px 18px; }.rate-row { grid-template-columns: 1fr auto; }.rate-row em { grid-column: 1 / -1; }.roadmap { grid-template-columns: 1fr; gap: 0; margin-top: 43px; }.roadmap-line { top: 0; bottom: 0; left: 31px; right: auto; width: 1px; height: auto; }.roadmap-item { padding: 0 0 35px 57px; }.roadmap-item::before { top: 1px; left: 24px; }.roadmap-item p { min-height: 0; }.trust-grid { grid-template-columns: 1fr; margin-top: 38px; }.site-footer { grid-template-columns: 1fr; padding: 30px 20px; text-align: center; }.site-footer .brand { margin: auto; }.site-footer p { text-align: center; }.orx-rate b { font-size: 76px; } }

/* Luminous polish: layered light preserves Orion's dark visual contrast. */
body { background: radial-gradient(ellipse at 50% 18%, #17082d 0%, #07030d 37%, #030207 76%); }
.site-header { border-bottom-color: rgba(221, 185, 255, .2); box-shadow: 0 10px 38px rgba(0, 0, 0, .22); }
.hero { background: radial-gradient(ellipse at 50% 52%, rgba(80, 24, 159, .62), transparent 34%), radial-gradient(ellipse at 8% 26%, rgba(58, 51, 173, .25), transparent 32%), radial-gradient(ellipse at 94% 70%, rgba(183, 62, 255, .2), transparent 31%), #06030a; }
.hero::after { opacity: .95; background: radial-gradient(ellipse, rgba(79, 138, 255, .42), rgba(101, 29, 211, .44) 42%, transparent 71%); box-shadow: 0 0 130px rgba(134, 60, 255, .38); }
.energy-main { stroke: #d28aff; stroke-width: 2.6; filter: drop-shadow(0 0 5px #f0b8ff) drop-shadow(0 0 15px #b132ff) drop-shadow(0 0 30px #7426cb); }
.energy-branch { stroke: #ba78ff; filter: drop-shadow(0 0 8px #aa44ff); }
.energy-blur { stroke: #bb54ff; stroke-width: 20; opacity: .8; }
.hero h1 { text-shadow: 0 0 24px rgba(238, 190, 255, .22), 0 0 78px rgba(180, 80, 255, .3); }
.orbital-core { filter: drop-shadow(0 0 24px rgba(148, 71, 255, .55)); animation: coreFloat 5s ease-in-out infinite; }
.core-orb { box-shadow: inset 10px 11px 28px rgba(255,255,255,.32), inset -13px -18px 48px rgba(7, 1, 24, .75), 0 0 52px rgba(152, 72, 255, .7), 0 0 118px rgba(83, 95, 255, .32); }
.primary-button, .header-cta { position: relative; overflow: hidden; box-shadow: 0 9px 34px rgba(170, 79, 255, .42), inset 0 1px rgba(255,255,255,.7); }
.primary-button::before, .header-cta::before { position: absolute; top: -60%; left: -34%; width: 30%; height: 220%; content: ""; transform: rotate(25deg); background: rgba(255,255,255,.56); filter: blur(8px); animation: buttonShine 4.5s ease-in-out infinite; }
.primary-button span, .header-cta span { position: relative; z-index: 1; }
.ecosystem::before, .earn-section::before { position: absolute; z-index: -1; content: ""; pointer-events: none; border-radius: 50%; filter: blur(28px); }
.ecosystem::before { top: 50px; left: -280px; width: 550px; height: 550px; background: radial-gradient(circle, rgba(106, 39, 200, .16), transparent 65%); }
.earn-section::before { right: -260px; bottom: 0; width: 600px; height: 500px; background: radial-gradient(circle, rgba(62, 126, 255, .14), transparent 66%); }
.feature-card, .trust-card, .plan-stage { position: relative; overflow: hidden; border-color: rgba(210, 170, 255, .26); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 16px 45px rgba(0,0,0,.14); }
.feature-card::before, .trust-card::before, .plan-stage::before { position: absolute; top: -120%; left: -25%; width: 35%; height: 320%; content: ""; transform: rotate(24deg); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(239, 213, 255, .13), transparent); transition: transform .75s ease; }
.feature-card:hover::before, .trust-card:hover::before, .plan-stage:hover::before { transform: translateX(520%) rotate(24deg); }
.feature-card:hover { box-shadow: inset 0 1px rgba(255,255,255,.14), 0 20px 58px rgba(126, 39, 221, .23), 0 0 0 1px rgba(225, 182, 255, .13); }
.plan-stage { background: linear-gradient(130deg, rgba(53,25,85,.9), rgba(13,8,25,.9) 57%, rgba(26,11,48,.84)); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 26px 96px rgba(82, 19, 158, .25); }
.rate-row { background: linear-gradient(105deg, rgba(47, 19, 74, .66), rgba(8, 5, 13, .55)); }.rate-row.featured { box-shadow: 0 0 25px rgba(173, 83, 255, .17), inset 0 1px rgba(255,255,255,.08); }
.performance { background: radial-gradient(ellipse at 50% 50%, rgba(103, 38, 180, .24), transparent 53%), radial-gradient(ellipse at 10% 100%, rgba(64, 94, 220, .12), transparent 42%), #08050d; }
.roadmap-line { height: 2px; box-shadow: 0 0 12px rgba(207, 126, 255, .62); }.roadmap-item.complete::before { box-shadow: 0 0 10px #fff, 0 0 25px #a54ff5; }
.innovator-orb { box-shadow: inset 0 0 60px rgba(187, 94, 255, .16), 0 0 100px rgba(129, 44, 220, .24); animation: orbPulse 4s ease-in-out infinite; }
@keyframes coreFloat { 50% { transform: translateX(-50%) translateY(-14px) scale(1.035); } }
@keyframes buttonShine { 0%, 55% { transform: translateX(-140%) rotate(25deg); } 78%, 100% { transform: translateX(520%) rotate(25deg); } }
@keyframes orbPulse { 50% { transform: translateX(-50%) scale(1.08); opacity: .92; } }
@media (prefers-reduced-motion: reduce) { .orbital-core, .innovator-orb, .primary-button::before, .header-cta::before { animation: none; } }

/* Site-wide motion system. */
.hero-content .eyebrow, .hero-content h1, .hero-content h2, .hero-copy, .hero-actions, .hero-meta { animation: heroRise .9s both cubic-bezier(.2,.75,.2,1); }
.hero-content h1 { animation-delay: 100ms; }.hero-content h2 { animation-delay: 180ms; }.hero-copy { animation-delay: 280ms; }.hero-actions { animation-delay: 370ms; }.hero-meta { animation-delay: 460ms; }
.hero::before { animation: gridDrift 20s linear infinite; }.hero::after { animation: horizonPulse 5s ease-in-out infinite; }.energy-network { animation: networkFloat 9s ease-in-out infinite; }
.feature-card, .trust-card, .rate-row { transform: perspective(900px) translateY(0) rotateX(var(--tilt-x, 0)) rotateY(var(--tilt-y, 0)); transition: transform .24s ease, border-color .25s, box-shadow .25s, background .25s; will-change: transform; }
.feature-card:hover, .trust-card:hover { transform: perspective(900px) translateY(-9px) rotateX(var(--tilt-x, 0)) rotateY(var(--tilt-y, 0)); }
.rate-row:hover { transform: perspective(900px) translateY(-4px) rotateX(var(--tilt-x, 0)) rotateY(var(--tilt-y, 0)); border-color: rgba(226, 182, 255, .58); box-shadow: 0 12px 30px rgba(100, 34, 170, .2); }
.roadmap-item { transition: transform .28s ease; }.roadmap-item:hover { transform: translateY(-7px); }.roadmap-item::after { position: absolute; top: 10px; left: 27px; width: 9px; height: 9px; content: ""; border-radius: 50%; background: #ead2ff; box-shadow: 0 0 14px #d688ff; opacity: 0; transition: opacity .25s; }.roadmap-item:hover::after { opacity: 1; }
.animate-in { animation: sectionRise .78s var(--motion-delay, 0ms) cubic-bezier(.2,.75,.2,1); }
.ecosystem-grid .feature-card:nth-child(2n) { animation-delay: calc(var(--motion-delay, 0ms) + 85ms); }.trust-grid .trust-card:nth-child(2) { animation-delay: 110ms; }.trust-grid .trust-card:nth-child(3) { animation-delay: 220ms; }
.plan-stage::after { position: absolute; top: -130%; left: -35%; width: 26%; height: 320%; content: ""; transform: rotate(25deg); background: linear-gradient(90deg, transparent, rgba(229, 194, 255, .13), transparent); animation: panelSweep 7s ease-in-out infinite; pointer-events: none; }.orx-rate { animation: breathe 3.4s ease-in-out infinite; }.rate-row.featured { animation: featuredPulse 3s ease-in-out infinite; }
.section-heading h2 em { display: inline-block; animation: wordGlow 3.7s ease-in-out infinite; }.card-icon { display: inline-block; animation: iconFloat 3.1s ease-in-out infinite; }.feature-card:nth-child(2n) .card-icon { animation-delay: -1.4s; }.roadmap-item.complete b { animation: statusBlink 2s ease-in-out infinite; }
@keyframes heroRise { from { opacity: 0; transform: translateY(24px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes sectionRise { from { opacity: .15; transform: translateY(36px) scale(.975); filter: blur(5px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes gridDrift { to { background-position: 64px 64px; } }
@keyframes horizonPulse { 50% { transform: scale(1.12); opacity: .73; } }
@keyframes networkFloat { 50% { transform: translateY(-15px) scale(1.025); } }
@keyframes panelSweep { 0%, 55% { transform: translateX(-120%) rotate(25deg); } 75%, 100% { transform: translateX(590%) rotate(25deg); } }
@keyframes breathe { 50% { border-color: rgba(226, 178, 255, .62); box-shadow: inset 0 0 45px rgba(183, 80, 255, .12), 0 0 30px rgba(151, 58, 255, .16); } }
@keyframes featuredPulse { 50% { box-shadow: 0 0 33px rgba(180, 83, 255, .3), inset 0 1px rgba(255,255,255,.12); } }
@keyframes wordGlow { 50% { color: #e0acff; text-shadow: 0 0 18px rgba(196, 107, 255, .48); } }
@keyframes iconFloat { 50% { transform: translateY(-6px) rotate(10deg); color: #f0ceff; text-shadow: 0 0 15px rgba(204, 115, 255, .64); } }
@keyframes statusBlink { 50% { color: #f2d6ff; text-shadow: 0 0 12px rgba(214, 122, 255, .7); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Global 3D environment, visible through every Orion section. */
#ambient-field { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .75; mix-blend-mode: screen; }
body::before { position: fixed; z-index: -1; inset: -30%; content: ""; pointer-events: none; background: conic-gradient(from 210deg at 50% 50%, transparent 0deg, rgba(80, 35, 191, .13) 52deg, transparent 104deg, rgba(38, 130, 255, .1) 164deg, transparent 224deg, rgba(180, 62, 255, .12) 288deg, transparent 360deg); filter: blur(55px); animation: globalAurora 18s linear infinite; }
body::after { position: fixed; z-index: 0; inset: 0; content: ""; pointer-events: none; opacity: .35; background: linear-gradient(90deg, rgba(202, 157, 255, .045) 1px, transparent 1px), linear-gradient(rgba(202, 157, 255, .045) 1px, transparent 1px); background-size: 86px 86px; mask-image: radial-gradient(ellipse at center, #000, transparent 72%); animation: globalGrid 24s linear infinite; }
main, .site-footer { position: relative; z-index: 1; } main { overflow-x: clip; }.hero { z-index: 1; }.section { perspective: 1200px; }.section::after { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(82vw, 960px); height: 1px; content: ""; transform: translateX(-50%) rotateX(64deg); transform-origin: center; background: linear-gradient(90deg, transparent, rgba(194, 120, 255, .32), transparent); box-shadow: 0 0 38px rgba(167, 82, 255, .27); animation: sectionBeam 6s ease-in-out infinite; }
.ecosystem-grid, .plan-stage, .roadmap, .trust-grid { position: relative; transform-style: preserve-3d; }.ecosystem-grid::before, .trust-grid::before { position: absolute; z-index: -1; inset: -26px; content: ""; border: 1px solid rgba(199, 140, 255, .11); border-radius: 18px; transform: translateZ(-45px) scale(.97); box-shadow: 0 0 70px rgba(104, 46, 180, .15); animation: framePulse 5s ease-in-out infinite; }.plan-stage { transform: translateZ(22px); }.plan-stage:hover { transform: translateZ(34px) rotateX(1deg); }.performance::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .55; background: linear-gradient(90deg, transparent 0 49.85%, rgba(211, 151, 255, .12) 50%, transparent 50.15%); animation: performanceScan 8s ease-in-out infinite; }
@keyframes globalAurora { to { transform: rotate(360deg) scale(1.14); } }
@keyframes globalGrid { to { background-position: 86px 86px; } }
@keyframes sectionBeam { 50% { opacity: .25; transform: translateX(-50%) rotateX(64deg) translateY(18px) scaleX(.75); } }
@keyframes framePulse { 50% { opacity: .45; transform: translateZ(-55px) scale(1.01); } }
@keyframes performanceScan { 0%, 100% { transform: translateX(-18%); opacity: .1; } 50% { transform: translateX(18%); opacity: .65; } }
@media (max-width: 760px) { #ambient-field { opacity: .48; }.section::after { width: 130vw; }.ecosystem-grid::before, .trust-grid::before { inset: -12px; }.plan-stage:hover { transform: translateZ(0); } }

/* Orion's Reown-inspired visual direction: graphite canvas, rounded dark surfaces, and crisp blue actions. */
:root { --bg: #a9a9a9; --panel: #1d1d1d; --line: rgba(255,255,255,.16); --text: #f5f5f5; --muted: #b6b6b6; --violet: #2f9bea; --violet-light: #93cdf7; --cyan: #48a8eb; }
body { background: #a9a9a9; color: var(--text); }.noise { opacity: .07; mix-blend-mode: soft-light; }.site-header { height: 72px; border: 0; background: #a9a9a9; box-shadow: none; backdrop-filter: none; }.site-header nav { color: #222; }.site-header nav a:hover { color: #000; }.header-cta, .primary-button { color: #071827; background: #42a4ed; box-shadow: none; border-radius: 15px; }.header-cta:hover, .primary-button:hover { background: #76bdf1; box-shadow: none; }.secondary-button { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.04); border-radius: 15px; }
#ambient-field { opacity: .28; mix-blend-mode: multiply; }.hero { min-height: 760px; width: calc(100% - 16px); margin: 72px 8px 18px; border-radius: min(29vw, 420px); background: radial-gradient(circle at 28% 50%, rgba(45, 151, 234, .17), transparent 32%), radial-gradient(circle at 82% 80%, rgba(55, 118, 180, .12), transparent 30%), #1d1d1d; box-shadow: inset 0 1px rgba(255,255,255,.06); }.hero::before { opacity: .35; background-size: 80px 80px; }.hero::after { bottom: -42%; left: 28%; width: 580px; height: 430px; opacity: .66; background: radial-gradient(ellipse, rgba(41, 139, 223, .36), rgba(30, 85, 138, .22) 44%, transparent 70%); }.energy-main { stroke: #56b8f5; filter: drop-shadow(0 0 7px #47aae9) drop-shadow(0 0 18px rgba(67,158,227,.72)); }.energy-branch { stroke: #71c5fa; filter: drop-shadow(0 0 7px #4baee9); }.energy-blur { stroke: #2b9be4; opacity: .58; }.hero-content { width: min(500px, 37vw); margin: 0 12% 0 auto; padding: 0; text-align: left; }.hero h1 { font-size: clamp(68px, 9vw, 132px); line-height: .82; background: linear-gradient(175deg, #fff, #d7d7d7 62%, #888); background-clip: text; -webkit-background-clip: text; text-shadow: none; }.hero h2 { max-width: 440px; font-size: clamp(30px, 3.3vw, 48px); }.hero h2 em, .section-heading em { color: #71c2f5; }.hero-copy { margin-inline: 0; color: #d2d2d2; }.hero-actions, .hero-meta { justify-content: flex-start; }.hero-meta { color: #b9b9b9; }.hero-meta b { background: #61c7ee; box-shadow: 0 0 8px #61c7ee; }.orbital-core { bottom: 48px; left: 31%; width: 440px; height: 440px; }.core-orb { inset: 72px; background: radial-gradient(circle at 34% 25%, #a5d9fa, #1676b4 42%, #102a3b 66%, #080c0f); box-shadow: inset 10px 11px 28px rgba(255,255,255,.34), inset -13px -18px 48px rgba(3,12,20,.72), 0 0 55px rgba(53,166,239,.55), 0 0 118px rgba(44,138,216,.25); }.orbital-ring { border-color: rgba(123,205,250,.54); }.ring-b { border-color: rgba(224,246,255,.42); }
.section { width: min(1180px, calc(100% - 40px)); margin: 18px auto; padding: 110px clamp(22px, 5vw, 70px); border-radius: 36px; background: #1d1d1d; box-shadow: inset 0 1px rgba(255,255,255,.07); }.section-heading > p:last-child { color: #bababa; }.eyebrow, .mini-label { color: #8cccf5; }.eyebrow i { background: #5bbcf1; box-shadow: 0 0 10px #4baee9; }.ecosystem-grid { margin-top: 48px; }.feature-card, .trust-card { border-radius: 16px; background: linear-gradient(145deg, #292929, #161616); border-color: rgba(255,255,255,.11); box-shadow: inset 0 1px rgba(255,255,255,.05); }.feature-card:hover, .trust-card:hover { border-color: rgba(100,196,247,.62); box-shadow: inset 0 1px rgba(255,255,255,.09), 0 18px 45px rgba(34,151,230,.18); }.card-icon { color: #7ac7f3; }.feature-card a { color: #a9d9f7; }.feature-card a b { color: #58b7ee; }
.earn-section { background: radial-gradient(circle at 80% 30%, rgba(43,150,229,.15), transparent 30%), #1d1d1d; }.earn-glow { background: radial-gradient(ellipse, rgba(39,144,224,.2), transparent 67%); }.plan-tabs { border-color: rgba(255,255,255,.18); background: #101010; }.plan-tab.active { color: #061a29; background: #79c5f2; }.plan-stage { border-color: rgba(129,208,251,.28); background: linear-gradient(130deg, #2b2b2b, #151515 58%, #202020); box-shadow: inset 0 1px rgba(255,255,255,.09), 0 26px 72px rgba(0,0,0,.22); }.plan-copy h3 strong { color: #77c6f4; }.rate-row, .orx-rate { background: rgba(6,6,6,.46); border-color: rgba(255,255,255,.12); }.rate-row.featured { border-color: rgba(104,196,247,.58); background: linear-gradient(90deg, rgba(34,146,223,.25), rgba(15,15,15,.46)); }.orx-rate { background: radial-gradient(circle at 81% 38%, rgba(42,152,232,.27), transparent 28%), rgba(8,8,8,.48); }.performance { width: min(1180px, calc(100% - 40px)); padding-inline: clamp(22px, 5vw, 70px); border: 0; border-radius: 36px; background: radial-gradient(ellipse at 50% 55%, rgba(47,147,225,.2), transparent 52%), #1d1d1d; }.roadmap-line { background: linear-gradient(90deg, #8ed0f7, #378cc7 57%, rgba(91,174,228,.15)); box-shadow: 0 0 12px rgba(95,188,242,.5); }.roadmap-item.complete::before { border-color: #d0efff; background: #48ade9; box-shadow: 0 0 18px #48ade9; }.roadmap-item span, .roadmap-item b, .trust-card > span { color: #81c9f2; }.innovators { background: radial-gradient(circle at 50% 40%, rgba(39,149,231,.13), transparent 36%), #1d1d1d; }.innovator-orb { border-color: rgba(128,203,247,.2); background: radial-gradient(circle at 38% 35%, rgba(70,167,234,.2), rgba(20,38,51,.18) 45%, transparent 68%); box-shadow: inset 0 0 60px rgba(75,168,230,.13), 0 0 100px rgba(51,148,218,.16); }.site-footer { border: 0; background: #1d1d1d; }.site-footer div { color: #c6c6c6; }
@media (max-width: 760px) { .site-header { background: #a9a9a9; }.site-header nav { background: #202020; }.site-header nav a, .menu-toggle { color: #f0f0f0; }.header-cta { padding: 11px 12px; }.hero { min-height: 760px; width: calc(100% - 16px); margin: 65px 8px 14px; border-radius: 56px; }.hero-content { width: min(100% - 42px, 420px); margin: 0 auto; padding-top: 42px; text-align: center; align-self: start; }.hero h1 { font-size: clamp(75px, 24vw, 118px); }.hero h2 { margin-inline: auto; }.hero-copy { margin-inline: auto; }.hero-actions, .hero-meta { justify-content: center; }.orbital-core { bottom: -6px; left: 50%; width: 330px; height: 330px; }.section, .performance { width: min(100% - 24px, 580px); margin: 14px auto; padding: 74px 20px; border-radius: 26px; }.performance { padding-inline: 20px; } }
@keyframes wordGlow { 50% { color: #9bd7fa; text-shadow: 0 0 18px rgba(87, 183, 238, .52); } }
@keyframes featuredPulse { 50% { box-shadow: 0 0 33px rgba(70, 172, 232, .3), inset 0 1px rgba(255,255,255,.12); } }

/* Hero focal-point refinement. */
.brand img { width: 88px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.3)); }.hero { overflow: hidden; }.hero-content { width: min(470px, 36vw); margin-right: 11%; }.hero h1 { font-size: clamp(68px, 8.5vw, 124px); letter-spacing: -.1em; text-transform: uppercase; }.hero h2 { margin-top: 24px; font-size: clamp(31px, 3.2vw, 46px); }.hero-copy { max-width: 430px; font-size: 14px; }.hero-actions { margin-top: 33px; }.hero-meta { margin-top: 31px; }
.orbital-core { bottom: 72px; left: 30%; width: 470px; height: 470px; }.orbital-core::before, .orbital-core::after { position: absolute; z-index: 3; padding: 9px 11px; border: 1px solid rgba(147, 217, 255, .36); border-radius: 9px; color: #cceeff; background: rgba(8, 31, 47, .62); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.2); backdrop-filter: blur(10px); font: 500 9px/1.45 "DM Mono", monospace; letter-spacing: .08em; }.orbital-core::before { top: 78px; left: -12px; content: "ORION NETWORK\A ASSET LAYER · ACTIVE"; white-space: pre; animation: tagFloat 4.2s ease-in-out infinite; }.orbital-core::after { right: -22px; bottom: 98px; content: "ORX\A DIGITAL UTILITY"; white-space: pre; text-align: right; animation: tagFloat 4.2s ease-in-out -2s infinite; }.core-orb { inset: 78px; font-size: 27px; letter-spacing: .12em; }.orbital-ring { border-width: 1.5px; }.ring-b { inset: 35px -8px; }.hero::after { bottom: -38%; left: 29%; width: 690px; height: 480px; }.energy-network { opacity: .82; }
@keyframes tagFloat { 50% { transform: translateY(-10px); border-color: rgba(178, 232, 255, .74); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 12px 30px rgba(23,132,206,.23); } }
@media (max-width: 760px) { .brand img { width: 74px; }.hero-content { width: min(100% - 42px, 420px); margin: 0 auto; }.hero h1 { font-size: clamp(70px, 22vw, 106px); }.orbital-core { bottom: 2px; left: 50%; width: 330px; height: 330px; }.core-orb { inset: 56px; font-size: 20px; }.orbital-core::before { top: 46px; left: -2px; padding: 7px 8px; font-size: 7px; }.orbital-core::after { right: -4px; bottom: 53px; padding: 7px 8px; font-size: 7px; }.hero::after { left: 50%; width: 440px; height: 360px; } }
.hero { width: min(1180px, calc(100% - 40px)); min-height: 680px; margin: 18px auto; border-radius: 36px; } @media (max-width: 760px) { .hero { width: min(100% - 24px, 580px); min-height: 760px; margin: 14px auto; border-radius: 26px; } }

/* Clean navigation and an orbital-free hero. */
.site-header { padding-inline: max(24px, calc((100% - 1180px) / 2)); }.site-header .brand img { width: 124px; height: 54px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); }.site-header nav { gap: 4px; padding: 5px; border: 1px solid rgba(0,0,0,.13); border-radius: 14px; background: rgba(255,255,255,.22); color: #181818; font: 600 11px/1 "Space Grotesk", sans-serif; letter-spacing: .01em; }.site-header nav a { padding: 9px 12px; border-radius: 9px; transition: color .2s, background .2s; }.site-header nav a:hover { color: #111; background: rgba(255,255,255,.72); }
.hero { margin-top: 92px; }.hero::after, .orbital-core { display: none; }.hero-content { width: min(620px, calc(100% - 48px)); margin: 0 auto; text-align: center; }.hero h2 { margin-inline: auto; }.hero-copy { margin-inline: auto; }.hero-actions, .hero-meta { justify-content: center; }
@media (max-width: 760px) { .site-header { padding-inline: 18px; }.site-header .brand img { width: 94px; height: 43px; }.site-header nav { border-color: rgba(255,255,255,.16); }.site-header nav a { padding: 13px; }.hero { margin-top: 92px; }.hero-content { width: min(100% - 38px, 420px); } }

.site-header .brand { display: grid; place-items: center; padding: 4px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #151515; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.12); }

/* Full dark header keeps the transparent mark visible without boxing it in. */
.site-header { background: #111; border-bottom: 1px solid rgba(255,255,255,.1); }.site-header .brand { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.site-header nav { border-color: rgba(255,255,255,.14); background: #272727; color: #f3f3f3; }.site-header nav a:hover { color: #fff; background: #3a3a3a; } @media (max-width: 760px) { .site-header { background: #111; } }

.site-footer { grid-template-columns: 1fr 1fr; }.site-footer p { grid-column: 2; } @media (max-width: 760px) { .site-footer { grid-template-columns: 1fr; }.site-footer p { grid-column: auto; } }