:root {
  --bg: #020308;
  --fg: #f5f5f5;
  --accent: #5cf7ff;
  --accent-soft: rgba(92, 247, 255, 0.2);
  --accent-red: #ff2b6e;
  --muted: #8c8f98;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: radial-gradient(circle at top, #0a0d16 0, #020308 55%, #000 100%);
  color: var(--fg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  overflow-x: hidden;
}

/* Noise overlay */
.noise-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='noStitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: noiseShift 8s linear infinite;
}

@keyframes noiseShift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-40px, 20px, 0); }
}

/* Orb on landing page */
.orb {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #5cf7ff, transparent 60%),
              radial-gradient(circle at 70% 80%, #ff2b6e, transparent 55%);
  filter: blur(6px);
  opacity: 0.4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 200ms ease-out;
}

.orb-click-zone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
}

/* General styles */
.frame {
  position: relative;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--muted);
}

.badge {
  border: 1px solid var(--accent-soft);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2, 3, 8, 0.8);
  backdrop-filter: blur(10px);
}

.glitch {
  position: relative;
  font-size: clamp(2.3rem, 4vw, 3.2rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.3;
  color: var(--fg);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.8;
}

.glitch::before {
  color: #5cf7ff;
  transform: translate3px;
  clip-path: polygon(0 0, 100% 3%, 100% 35%, 0 38%);
  animation: glitchTop 3s infinite linear alternate-reverse;
}

.glitch::after {
  color: #ff2b6e;
  transform: translate(-2px, 0);
  clip-path: polygon(0 60%, 100% 58%, 100% 100%, 0 100%);
  animation: glitchBottom 2.4s infinite linear alternate-reverse;
}

@keyframes glitchTop { 0% { transform: translate(2px, -1px); } 50% { transform: translate(-3px, 1px); } 100% { transform: translate(1px, 0); } }
@keyframes glitchBottom { 0% { transform: translate(-2px, 1px); } 50% { transform: translate(3px, 0); } 100% { transform: translate(-1px, -1px); } }