:root {
  --reflex-purple: #8b2cff;
  --reflex-violet: #bd4dff;
  --reflex-green: #b7ff00;
  --reflex-black: #030006;
}

body.reflex-page {
  background: var(--reflex-black) url("reflex-fractal-hero.png") center top / cover fixed no-repeat;
  background-blend-mode: screen;
}

body.reflex-page::before {
  background: radial-gradient(circle at 76% 24%, rgba(139, 44, 255, .2), transparent 28%), linear-gradient(180deg, rgba(3, 0, 6, .12), rgba(3, 0, 6, .92) 74%);
}

.reflex-page .wrap {
  max-width: 1080px;
  background: linear-gradient(180deg, rgba(4, 0, 12, .35), rgba(4, 0, 12, .78) 30%, rgba(4, 0, 12, .94));
  border-left: 1px solid rgba(189, 77, 255, .22);
  border-right: 1px solid rgba(183, 255, 0, .12);
}

.reflex-hero {
  position: relative;
  min-height: 310px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid rgba(189, 77, 255, .35);
  border-radius: 18px;
  padding: 2.5rem clamp(1.25rem, 5vw, 4rem);
  background: linear-gradient(90deg, rgba(5, 0, 14, .95), rgba(12, 0, 30, .58)), url("reflex-fractal-hero.png") center / cover;
  box-shadow: 0 0 70px rgba(93, 0, 255, .2), inset 0 0 45px rgba(166, 0, 255, .12);
}

.reflex-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(183,255,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(183,255,0,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, transparent, black 35%, black 78%, transparent);
}

.reflex-hero-copy { position: relative; z-index: 1; }
.reflex-eyebrow { color: var(--reflex-green); font: 700 .7rem/1.2 monospace; letter-spacing: .22em; text-shadow: 0 0 14px rgba(183,255,0,.8); }
.reflex-hero h1 { margin: .65rem 0 .25rem; color: #f4ddff; font-size: clamp(3.5rem, 10vw, 7rem); line-height: .88; letter-spacing: -.06em; text-shadow: 0 0 22px rgba(189,77,255,.8), 4px 4px 0 rgba(45,0,80,.8); }
.reflex-hero .sub { color: #dcb8ff; margin: 0; font-size: clamp(1rem, 2vw, 1.3rem); }
.reflex-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.reflex-tags span { border: 1px solid rgba(183,255,0,.55); border-radius: 999px; color: var(--reflex-green); padding: .38rem .65rem; font: 700 .65rem/1 monospace; letter-spacing: .12em; background: rgba(30, 45, 0, .26); box-shadow: 0 0 15px rgba(183,255,0,.12); }
.reflex-orbit { position: relative; z-index: 1; width: 220px; height: 220px; justify-self: end; border: 1px solid rgba(189,77,255,.7); border-radius: 50%; box-shadow: 0 0 22px rgba(189,77,255,.85), inset 0 0 40px rgba(112,0,255,.75); animation: reflex-pulse 5s ease-in-out infinite; }
.reflex-orbit::before, .reflex-orbit::after, .reflex-orbit span { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(183,255,0,.5); border-radius: 44% 56% 52% 48%; transform: rotate(32deg); }
.reflex-orbit::after { inset: 23%; border-color: rgba(189,77,255,.8); transform: rotate(-28deg) scaleX(.7); }
.reflex-orbit span { inset: 40%; background: var(--reflex-green); box-shadow: 0 0 28px 8px rgba(183,255,0,.6); border: 0; }

.reflex-page .badge { border-color: var(--reflex-green); color: var(--reflex-green); box-shadow: 0 0 12px rgba(183,255,0,.25); }
.reflex-page .panel, .reflex-page .player-module, .reflex-page .link-module, .reflex-page .intake-module { border-color: rgba(189,77,255,.24); background: rgba(8, 1, 18, .78); box-shadow: inset 0 0 30px rgba(97,0,155,.08); }
.reflex-page h2 { color: #eac7ff; text-shadow: 0 0 14px rgba(189,77,255,.6); }
.reflex-page .chip:hover, .reflex-page button:hover { border-color: var(--reflex-green); color: var(--reflex-green); }

@keyframes reflex-pulse { 0%, 100% { transform: rotate(-5deg) scale(.98); filter: hue-rotate(0deg); } 50% { transform: rotate(5deg) scale(1.04); filter: hue-rotate(18deg); } }

@media (max-width: 700px) {
  .reflex-hero { min-height: 390px; grid-template-columns: 1fr; padding: 2rem 1.2rem; }
  .reflex-orbit { width: 150px; height: 150px; justify-self: center; margin-top: -1rem; }
  body.reflex-page { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) { .reflex-orbit { animation: none; } }