:root {
  color-scheme: dark;
  --bg: #070918;
  --text: #f7f8ff;
  --muted: #9fa9c8;
  --cyan: #00ead9;
  --blue: #2cbcff;
  --violet: #af3fff;
}
*,*::before,*::after {box-sizing: border-box}
html {min-height:100%; background:var(--bg)}
body {margin:0; min-width:320px; min-height:100vh; color:var(--text); font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden}
.backdrop {inset:0; position:fixed; z-index:-1; pointer-events:none; overflow:hidden; background:radial-gradient(ellipse 90% 90% at 50% 100%,#11102a 0%,var(--bg) 73%)}
.backdrop-grid {position:absolute; inset:0; opacity:.21; background-image:linear-gradient(rgba(102,123,201,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(102,123,201,.18) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,transparent 8%,black 60%,transparent 100%)}
.glow {position:absolute; width:760px; aspect-ratio:1; border-radius:50%; filter:blur(100px); opacity:.28; will-change:transform}
.glow-cyan {background:radial-gradient(circle,rgba(0,221,223,.37),transparent 67%); top:-350px; left:-300px; animation:drift 19s ease-in-out infinite alternate}
.glow-violet {background:radial-gradient(circle,rgba(143,58,245,.55),transparent 67%); bottom:-470px; right:-240px; animation:drift 24s ease-in-out infinite alternate-reverse}
.grain {position:absolute; inset:0; opacity:.15; 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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E")}
.particles {position:absolute; inset:0}
.particle {position:absolute; left:var(--x); top:var(--y); width:var(--sz); height:var(--sz); background:var(--color); border-radius:50%; box-shadow:0 0 12px var(--color); opacity:0; animation:twinkle var(--time) ease-in-out var(--delay) infinite}
.page {min-height:100vh; min-height:100svh; display:grid; place-items:center; padding:clamp(32px,5vw,74px) clamp(24px,6vw,100px)}
.hero {width:min(1320px,100%); display:grid; grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr); align-items:center; gap:clamp(24px,3.2vw,64px)}
.hero-content {position:relative; z-index:1}
.wordmark {width:clamp(190px,20vw,266px); margin-bottom:clamp(42px,6.3vh,72px)}
.wordmark img {display:block; width:100%; height:auto; filter:drop-shadow(0 0 24px rgba(8,176,241,.18))}
.hero-copy {max-width:740px; animation:appear .85s both}
.accent-line {width:60px; height:3px; margin-bottom:21px; border-radius:5px; background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:0 0 20px rgba(0,231,218,.35)}
h1,h2,p {margin:0}
h1 {font-size:clamp(47px,6.3vw,94px); font-weight:800; letter-spacing:-.075em; line-height:1.05; margin-left:-.04em; margin-bottom:25px; background:linear-gradient(125deg,#fff 12%,#ecf2ff 62%,#b8b5e9 100%); background-clip:text; -webkit-background-clip:text; color:transparent; text-wrap:balance}
h2 {font-size:clamp(25px,2.95vw,44px); font-weight:750; letter-spacing:-.04em; line-height:1.22; max-width:780px; text-wrap:pretty}
.gradient-text {background:linear-gradient(110deg,#00e8d9 4%,#45c8ff 44%,#c75bff 96%); color:transparent; background-clip:text; -webkit-background-clip:text}
.tagline {font-size:clamp(17px,1.55vw,22px); font-weight:550; line-height:1.55; color:#dfe7fa; max-width:650px; margin-top:23px; text-wrap:pretty}
.description {font-size:clamp(15px,1.17vw,17px); line-height:1.85; font-weight:400; color:var(--muted); max-width:595px; margin-top:20px; text-wrap:pretty}
.visual {isolation:isolate; position:relative; width:100%; max-width:570px; aspect-ratio:1/1; justify-self:center; display:grid; place-items:center; animation:appear 1.2s .2s both; transform-style:preserve-3d}
.halo {position:absolute; border:1px solid rgba(155,156,248,.12); border-radius:50%; box-shadow:inset 0 0 60px rgba(60,56,120,.09)}
.halo-outer {inset:1%; background:radial-gradient(circle,rgba(11,14,39,.1) 40%,rgba(122,57,223,.08)); animation:halo-spin 55s linear infinite}
.halo-outer::before {content:""; position:absolute; inset:-1px; border-radius:50%; border:1px dashed rgba(95,124,222,.19)}
.halo-middle {inset:11%; border-color:rgba(79,160,244,.17); animation:halo-spin 38s linear infinite reverse}
.halo-middle::after {content:""; position:absolute; width:9px; height:9px; top:11%; left:11%; background:var(--cyan); border-radius:50%; box-shadow:0 0 14px var(--cyan)}
.halo-inner {inset:21%; border-color:rgba(159,64,255,.15); background:radial-gradient(circle,rgba(18,19,46,.5),transparent 65%)}
.halo-gradient {inset:6%; position:absolute; border-radius:50%; background:conic-gradient(from 40deg,transparent 0deg,rgba(159,43,247,.19) 62deg,transparent 130deg,rgba(0,218,227,.16) 240deg,transparent 300deg); filter:blur(22px); animation:halo-spin 30s linear infinite}
.logo-glow {position:absolute; width:67%; aspect-ratio:1; border-radius:50%; background:conic-gradient(from 220deg,rgba(0,251,219,.22),rgba(68,113,255,.16),rgba(177,39,252,.29),rgba(0,251,219,.22)); filter:blur(60px)}
.symbol-holder {position:relative; z-index:2; width:77%; animation:float 6.7s ease-in-out infinite; filter:drop-shadow(0 28px 50px rgba(0,0,0,.35)) drop-shadow(0 0 32px rgba(65,59,238,.15))}
.symbol-holder img {display:block; width:100%; height:auto}
.visual-star {position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; box-shadow:0 0 14px 3px #58eaff; opacity:.7; animation:star-pulse 3s ease-in-out infinite alternate}
.star-a {top:23%; right:12%}.star-b {top:71%; left:7%; animation-delay:1.4s; box-shadow:0 0 14px 3px #ab6dff}.star-c {bottom:14%; right:26%; animation-delay:2.4s; width:3px; height:3px}
@keyframes appear {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes float {0%,100%{transform:translateY(-8px)}50%{transform:translateY(12px)}}
@keyframes halo-spin {to{transform:rotate(360deg)}}
@keyframes star-pulse {to{opacity:.22;scale:.65}}
@keyframes twinkle {0%,100%{opacity:0;transform:translateY(0)}50%{opacity:.6;transform:translateY(-10px)}}
@keyframes drift {to{transform:translate(110px,65px)}}
@media (min-width:1440px) {h1{font-size:94px}}
@media (max-width:1080px) {.hero{grid-template-columns:minmax(0,1fr) minmax(295px,.78fr);gap:15px}.page{padding:44px 38px}.wordmark{margin-bottom:38px}}
@media (max-width:760px) {
  .page {padding:38px 24px 28px;place-items:start center}
  .hero {display:flex;flex-direction:column;gap:4px;max-width:560px}
  .hero-content{width:100%}
  .wordmark {width:clamp(175px,54vw,238px);margin:0 0 42px}
  .accent-line{margin-bottom:16px}
  h1{font-size:clamp(48px,11.2vw,72px);margin-bottom:22px}
  h2{font-size:clamp(27px,6vw,38px)}
  .tagline{margin-top:21px;font-size:clamp(17px,4.1vw,20px)}
  .description{margin-top:15px;line-height:1.72;font-size:15px}
  .visual{width:min(88%,370px);margin:10px auto 0}
}
@media (max-width:420px) {.page{padding:27px 22px 22px}.wordmark{margin-bottom:32px}.visual{width:90%;margin-top:4px}.description{font-size:14.5px}}
@media (max-height:650px) and (min-width:761px) {.page{padding-top:24px;padding-bottom:24px}.wordmark{margin-bottom:28px}h1{font-size:clamp(45px,5vw,73px);margin-bottom:15px}h2{font-size:clamp(24px,2.5vw,36px)}.tagline{margin-top:15px}.description{margin-top:13px}}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}