:root { --pink: #ff2bd6; --pink2: #ff6ae6; --violet: #8a3dff; --fg: #f4eef7; --dim: #6d6474; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: #000; color: var(--fg); font-family: "Space Grotesk", system-ui, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; cursor: none; }
a, button { color: inherit; text-decoration: none; font: inherit; background: none; border: 0; cursor: none; }
.mono { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.dim { color: var(--dim); }

/* layers */
.halo { position: fixed; left: 50%; bottom: -10vh; width: 110vh; height: 110vh; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 43, 214, .22), rgba(138, 61, 255, .08) 38%, transparent 66%); filter: blur(20px); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .65; scale: .94; } }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }
.scan { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); }

/* giant word */
.giant { position: fixed; left: 0; right: 0; top: 50%; z-index: 1; translate: 0 -54%; pointer-events: none; will-change: transform; }
.g-row { display: flex; width: max-content; animation: marq 38s linear infinite; }
.g-row span { font-family: "Anton", Impact, sans-serif; font-size: 40vh; line-height: .9; letter-spacing: -.01em; white-space: nowrap; padding-right: .1em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .09);
  background: linear-gradient(100deg, #111 0 38%, rgba(255, 43, 214, .55) 46%, rgba(255, 170, 240, .8) 50%, rgba(138, 61, 255, .45) 54%, #111 62% 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; animation: sweep 6.5s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes marq { to { transform: translateX(-50%); } }
@keyframes sweep { 0% { background-position: 130% 0; } 70%, 100% { background-position: -30% 0; } }

/* top bar */
.top { position: fixed; z-index: 10; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 26px 32px; }
.top-l { display: flex; align-items: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 8px; border-radius: 14px; background: rgba(28, 26, 32, .75); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(12px); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.logo-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 43, 214, .5), 0 0 18px rgba(255, 43, 214, .35); }
.logo-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--pink2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.logo-ic circle { fill: var(--pink2); stroke: none; }
.sq { display: grid; place-content: center; gap: 4px; width: 46px; height: 46px; border-radius: 14px; background: rgba(28, 26, 32, .75); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(12px); transition: border-color .3s; }
.sq i { display: block; width: 16px; height: 1.6px; background: #ddd; border-radius: 2px; transition: width .3s; }
.sq i:nth-child(2) { width: 11px; }
.sq:hover { border-color: rgba(255, 43, 214, .6); } .sq:hover i { width: 16px; }
.back { margin-left: 10px; color: #8d8494; transition: color .3s; }
.back:hover { color: var(--pink2); }
.cta { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 24px; border-radius: 99px; background: #fff; color: #000; font-weight: 600; font-size: 15px;
  box-shadow: 0 0 0 0 rgba(255, 43, 214, 0); transition: box-shadow .4s, background .3s, transform .3s; }
.cta svg { width: 15px; height: 15px; fill: #000; }
.cta:hover { background: #ffe9fb; box-shadow: 0 0 40px 4px rgba(255, 43, 214, .55); transform: translateY(-1px); }

/* copy */
.copy { position: fixed; z-index: 4; left: 32px; bottom: 132px; max-width: 30vw; pointer-events: none; }
.kicker { display: flex; align-items: center; gap: 10px; color: var(--pink2); margin-bottom: 16px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.title { font-size: clamp(30px, 3.1vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; text-shadow: 0 4px 40px #000; }
.title em { font-style: normal; color: transparent; background: linear-gradient(90deg, var(--pink), #ffb3f1, var(--violet)); -webkit-background-clip: text; background-clip: text; }
.side { position: fixed; z-index: 4; left: 32px; top: 42%; display: grid; gap: 14px; line-height: 1.7; }
.side-r { position: fixed; z-index: 4; right: 32px; top: 42%; display: grid; gap: 14px; text-align: right; line-height: 1.7; }

/* bottom */
.bot { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; }
.caps { text-shadow: 0 1px 8px #000; display: flex; justify-content: space-between; padding: 0 32px 14px; color: #8d8494; }
.ticker { overflow: hidden; border-top: 1px solid rgba(255, 43, 214, .25); background: linear-gradient(90deg, rgba(255, 43, 214, .08), rgba(0, 0, 0, .6) 50%, rgba(138, 61, 255, .08)); backdrop-filter: blur(6px); }
.t-track { display: flex; align-items: center; gap: 26px; width: max-content; padding: 13px 0; animation: marq 30s linear infinite; color: #d7cfe0; }
.t-track b { color: var(--pink); font-weight: 400; text-shadow: 0 0 10px var(--pink); }

/* cursor */
.cursor { position: fixed; z-index: 50; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; pointer-events: none; will-change: transform; }
.cursor::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--pink); box-shadow: 0 0 14px rgba(255, 43, 214, .8), inset 0 0 10px rgba(255, 43, 214, .4); transition: scale .35s cubic-bezier(.2, .8, .2, 1), background .3s; }
.cursor i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--pink); }
.cursor.hot::before { scale: 1.7; background: rgba(255, 43, 214, .12); }
.cursor.down::before { scale: .7; }
@media (hover: none) { .cursor { display: none; } body, a, button { cursor: auto; } }

@media (max-width: 760px) {
  .top { padding: 16px; }
  .pill { height: 40px; font-size: 14px; padding-right: 14px; }
  .logo-ic { width: 28px; height: 28px; }
  .sq { width: 40px; height: 40px; }
  .back { position: fixed; right: 18px; top: 66px; margin: 0; font-size: 10px; }
  .cta { height: 40px; padding: 0 16px; font-size: 14px; }
  .g-row span { font-size: 26vh; }
  .giant { top: 40%; }
  .copy { left: 18px; right: 18px; max-width: none; bottom: auto; top: 84px; }
  .title { font-size: 30px; }
  .side, .side-r, .hide-m { display: none; }
  .caps { padding: 0 16px 10px; }
}