:root { color-scheme: dark; font-family: 'DM Sans', system-ui, sans-serif; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #080713; }
body { margin: 0; min-width: 320px; }
.page { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; color: #f7f5ff; background: radial-gradient(circle at 70% 42%, #17102d 0%, #0c0a1b 38%, #080713 78%); }
.page::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(90deg, rgba(7,7,17,.84) 0%, rgba(7,7,17,.44) 45%, transparent 80%), linear-gradient(0deg, rgba(8,7,19,.58), transparent 30%); }
.atmosphere { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.nebula { position: absolute; border-radius: 50%; filter: blur(72px); mix-blend-mode: screen; }
.nebula-one { width: 68vw; height: 66vw; min-width: 700px; min-height: 700px; right: -10vw; top: -22vw; opacity: .72; background: radial-gradient(ellipse at 47% 51%, #8d46e2 0%, #5134a6 23%, #27204f 44%, transparent 68%); animation: breathe 18s ease-in-out infinite alternate; }
.nebula-two { width: 58vw; height: 48vw; min-width: 650px; min-height: 500px; right: 12vw; bottom: -34vw; opacity: .48; background: radial-gradient(ellipse at 50% 40%, #445cbd 0%, #243a83 23%, transparent 67%); animation: float 24s ease-in-out infinite alternate; }
.nebula-three { width: 42vw; height: 42vw; min-width: 440px; min-height: 440px; right: -6vw; top: 32%; opacity: .34; background: radial-gradient(circle, #c453ba 0%, #662a6e 32%, transparent 70%); }
.stars { position: absolute; inset: 0; opacity: .56; background-image: radial-gradient(1px 1px at 14% 24%, #fff 99%, transparent), radial-gradient(1px 1px at 31% 74%, #d8d0ff 99%, transparent), radial-gradient(2px 2px at 74% 18%, #fff 99%, transparent), radial-gradient(1px 1px at 88% 61%, #fff 99%, transparent), radial-gradient(1px 1px at 62% 82%, #c4b7ff 99%, transparent), radial-gradient(1px 1px at 7% 88%, #fff 99%, transparent), radial-gradient(1px 1px at 94% 31%, #d8d0ff 99%, transparent); background-size: 360px 290px; }
.light-trails { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .74; filter: drop-shadow(0 0 18px rgba(151,100,245,.46)); }
.light-trails path { fill: none; stroke: url(#trail); stroke-width: 1.4; }
.light-trails path:nth-of-type(2) { stroke-width: .8; opacity: .8; }
.light-trails path:nth-of-type(3) { stroke-width: .7; opacity: .54; }
.masthead, .footer { width: min(100% - 104px, 1500px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.masthead { padding-top: 40px; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: #faf8ff; text-decoration: none; font: 800 27px/1 'Manrope', system-ui, sans-serif; letter-spacing: .085em; }
.brand-mark { width: 58px; height: 58px; flex: none; }
.status { display: inline-flex; align-items: center; gap: 10px; color: #aaa2bc; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #b28bfa; box-shadow: 0 0 0 5px rgba(184,132,255,.1), 0 0 20px #b389ff; }
.hero { width: min(100% - 104px, 1500px); margin: auto; padding-block: 105px 125px; }
.eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 32px; color: #b5a0d7; font-size: 11px; font-weight: 700; letter-spacing: .29em; }
.eyebrow span { width: 38px; height: 1px; background: #71618d; }
h1 { max-width: 1200px; margin: 0; font: 600 clamp(5rem, 8vw, 8.8rem)/1.01 'Manrope', system-ui, sans-serif; letter-spacing: -.08em; text-wrap: balance; }
h1 em { display: inline-block; font-style: normal; background: linear-gradient(105deg, #fff 0%, #cfb3ff 35%, #9d88f3 70%, #8dbeed 100%); background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy { margin: 32px 0 0; color: #c4bed1; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; letter-spacing: -.02em; }
.footer { padding-bottom: 34px; color: #888198; font-size: 11px; text-transform: uppercase; letter-spacing: .15em; }
@keyframes breathe { to { transform: translate(-6%, 5%) scale(1.12); } }
@keyframes float { to { transform: translate(6%, -4%) scale(1.08); } }
@media (max-width: 700px) { .masthead, .footer, .hero { width: min(100% - 42px, 1500px); } .masthead { padding-top: 25px; } .brand { font-size: 21px; gap: 8px; letter-spacing: .05em; } .brand-mark { width: 44px; height: 44px; } .status { font-size: 0; letter-spacing: 0; } .status-dot { width: 7px; height: 7px; } .hero { padding-block: 85px 100px; } .eyebrow { font-size: 10px; gap: 10px; margin-bottom: 25px; letter-spacing: .2em; } .eyebrow span { width: 25px; } h1 { font-size: clamp(3.2rem, 13vw, 7rem); } .hero-copy { margin-top: 24px; font-size: 16px; } .footer { gap: 20px; padding-bottom: 24px; font-size: 9px; } .nebula-one { right: -430px; top: -230px; } .nebula-two { right: -250px; bottom: -200px; } .light-trails { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }