* { box-sizing: border-box; }

:root {
  --bg: #02020a;
  --text: rgba(255,255,255,0.82);
  --muted: rgba(255,255,255,0.56);
  --pink: rgba(255, 56, 214, 0.88);
  --pink-soft: rgba(255, 56, 214, 0.28);
  --blue-soft: rgba(58, 112, 255, 0.26);
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: white;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body { overflow-x: hidden; }

.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

.background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
  z-index: -4;
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 0, 204, 0.08), transparent 35%),
    radial-gradient(circle at 50% 42%, rgba(33, 108, 255, 0.08), transparent 44%),
    linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.42));
}

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.16) 0px,
      rgba(255,255,255,0.16) 1px,
      rgba(0,0,0,0.30) 2px,
      rgba(0,0,0,0.30) 4px
    );
  mix-blend-mode: overlay;
  animation: scanlineDrift 7s linear infinite;
}

.scanlines::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,0.12) 48%,
    transparent 100%
  );
  opacity: 0.22;
  animation: scanlineSweep 8s linear infinite;
}

.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 7px,
    rgba(80, 210, 255, 0.06) 8px,
    transparent 9px
  );
  opacity: 0.55;
}


.smoke {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: lighten;
  filter: blur(62px);
  opacity: 0.54;
  will-change: transform, opacity, filter;
}

.smoke-1 {
  left: -8%;
  bottom: 3%;
  width: 40vw;
  height: 15vw;
  min-width: 420px;
  min-height: 140px;
  background: radial-gradient(ellipse at center, rgba(176, 196, 255, 0.55) 0%, rgba(176, 196, 255, 0.28) 34%, rgba(176, 196, 255, 0.12) 56%, transparent 76%);
  animation: smokeDriftOne 8s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.smoke-2 {
  left: 20%;
  bottom: 4%;
  width: 44vw;
  height: 16vw;
  min-width: 440px;
  min-height: 150px;
  background: radial-gradient(ellipse at center, rgba(198, 140, 255, 0.50) 0%, rgba(198, 140, 255, 0.24) 36%, rgba(198, 140, 255, 0.10) 58%, transparent 78%);
  animation: smokeDriftTwo 9.5s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.smoke-3 {
  right: -6%;
  bottom: 2%;
  width: 38vw;
  height: 14vw;
  min-width: 390px;
  min-height: 130px;
  background: radial-gradient(ellipse at center, rgba(118, 170, 255, 0.56) 0%, rgba(118, 170, 255, 0.25) 36%, rgba(118, 170, 255, 0.10) 58%, transparent 78%);
  animation: smokeDriftThree 8.8s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.smoke-4 {
  left: 44%;
  bottom: 10%;
  width: 24vw;
  height: 10vw;
  min-width: 240px;
  min-height: 90px;
  background: radial-gradient(ellipse at center, rgba(144, 186, 255, 0.40) 0%, rgba(144, 186, 255, 0.18) 38%, transparent 76%);
  animation: smokeDriftFour 7.2s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.smoke-5 {
  left: 8%;
  top: 22%;
  width: 22vw;
  height: 9vw;
  min-width: 240px;
  min-height: 90px;
  background: radial-gradient(ellipse at center, rgba(120, 144, 255, 0.22) 0%, rgba(120, 144, 255, 0.10) 40%, transparent 76%);
  animation: smokeDriftFive 10s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  opacity: 0.22;
}

.site-header {
  position: absolute;
  top: 3.3rem;
  left: 3rem;
  right: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  z-index: 6;
}

.follow-us {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  color: rgba(255,255,255,0.84);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(0.72rem, 0.9vw, 0.88rem);
  text-shadow: 0 0 8px rgba(0,0,0,0.45);
}

.follow-label { white-space: nowrap; }

.instagram-icon {
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,0.92);
  filter: drop-shadow(0 0 8px rgba(255, 69, 210, 0.32));
}

.hero {
  position: relative;
  z-index: 4;
  width: min(92vw, 980px);
  padding: clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translateY(2vh);
}


.glitch-stack {
  position: relative;
  display: inline-block;
  will-change: transform, filter;
}

.glitch-stack .layer {
  display: block;
}

.glitch-stack .base {
  position: relative;
  z-index: 2;
}

.glitch-stack .glitch-a,
.glitch-stack .glitch-b {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: lighten;
  will-change: transform, clip-path, opacity, filter;
}

.logo-wrap {
  width: clamp(180px, 18vw, 290px);
  animation: wrapperGlitchSmall 3.6s infinite steps(1, end);
}

.site-logo {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(255, 47, 204, 0.22)) drop-shadow(0 0 12px rgba(66, 110, 255, 0.16));
}

.logo-wrap .base {
  animation: tinyFloat 5s ease-in-out infinite, logoFlicker 2.4s infinite steps(1, end);
}

.logo-wrap .glitch-a {
  filter: saturate(1.35) hue-rotate(-18deg) drop-shadow(-8px 0 14px rgba(255, 66, 180, 0.90));
  animation: logoGlitchA 2.8s infinite steps(1, end);
}

.logo-wrap .glitch-b {
  filter: saturate(1.45) hue-rotate(18deg) drop-shadow(8px 0 14px rgba(66, 140, 255, 0.85));
  animation: logoGlitchB 3.1s infinite steps(1, end);
}

.emblem-wrap {
  position: relative;
  z-index: 3;
  width: min(70vw, 760px);
  max-width: 100%;
  overflow: visible;
  animation: wrapperGlitchLarge 4.1s infinite steps(1, end);
}

.emblem {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(255, 50, 206, 0.18)) drop-shadow(0 0 18px rgba(66, 110, 255, 0.14));
}

.emblem-wrap .base {
  animation: emblemFloat 6.2s ease-in-out infinite, emblemFlicker 2.6s infinite steps(1, end);
}

.emblem-wrap .glitch-a {
  filter: saturate(1.3) hue-rotate(-18deg) drop-shadow(-12px 0 18px rgba(255, 58, 180, 0.75));
  animation: emblemGlitchA 2.5s infinite steps(1, end);
}

.emblem-wrap .glitch-b {
  filter: saturate(1.35) hue-rotate(20deg) drop-shadow(12px 0 18px rgba(70, 120, 255, 0.72));
  animation: emblemGlitchB 2.9s infinite steps(1, end);
}

.copy {
  margin-top: clamp(0.6rem, 1.5vw, 1rem);
  display: grid;
  gap: 0.45rem;
  color: var(--text);
  font-size: clamp(0.92rem, 1.14vw, 1.14rem);
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-shadow: 0 0 10px rgba(0,0,0,0.65);
}

.copy p { margin: 0; }

.signup {
  width: min(74vw, 640px);
  margin-top: clamp(1.4rem, 2.7vw, 1.9rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--pink);
  background: rgba(6, 6, 20, 0.58);
  box-shadow: 0 0 18px var(--pink-soft), 0 0 28px var(--blue-soft), inset 0 0 16px rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}

.field {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 0 1rem 0 1.1rem;
}

.mail-icon {
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.76);
}

.signup input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: white;
  font-size: clamp(0.96rem, 1vw, 1rem);
  padding: 1rem 0;
}

.signup input::placeholder { color: rgba(255,255,255,0.62); }

.signup button {
  border: 0;
  border-left: 1px solid var(--pink);
  background: linear-gradient(135deg, rgba(255, 56, 214, 0.14), rgba(58, 112, 255, 0.28));
  color: white;
  padding: 0 1.55rem;
  font-size: clamp(0.83rem, 0.92vw, 0.96rem);
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(255,255,255,0.22);
}

.fine-print {
  margin: 0.95rem 0 0;
  color: var(--muted);
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  text-shadow: 0 0 8px rgba(0,0,0,0.65);
}

@keyframes tinyFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-3px,0); }
}

@keyframes emblemFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-6px,0); }
}

@keyframes logoFlicker {
  0%, 81%, 84%, 87%, 100% { opacity: 1; }
  82%, 86% { opacity: .78; }
  83%, 88% { opacity: .92; }
}

@keyframes emblemFlicker {
  0%, 76%, 80%, 85%, 100% { opacity: 1; }
  77%, 81%, 86% { opacity: .84; }
  78%, 82%, 87% { opacity: .94; }
}

@keyframes wrapperGlitchSmall {
  0%, 78%, 100% { transform: translate3d(0,0,0) skewX(0deg); }
  79% { transform: translate3d(-5px,0,0) skewX(-6deg); }
  80% { transform: translate3d(7px,0,0) skewX(5deg); }
  81% { transform: translate3d(-3px,1px,0) skewX(-3deg); }
  82% { transform: translate3d(0,0,0) skewX(0deg); }
}

@keyframes wrapperGlitchLarge {
  0%, 72%, 100% { transform: translate3d(0,0,0) skewX(0deg) scale(1); }
  73% { transform: translate3d(-10px,0,0) skewX(-7deg) scale(1.004); }
  74% { transform: translate3d(14px,-1px,0) skewX(6deg) scale(0.998); }
  75% { transform: translate3d(-6px,2px,0) skewX(-4deg) scale(1.003); }
  76% { transform: translate3d(3px,-1px,0) skewX(2deg) scale(0.999); }
  77% { transform: translate3d(0,0,0) skewX(0deg) scale(1); }
}

@keyframes logoGlitchA {
  0%, 70%, 100% { opacity: 0; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
  71% { opacity: .34; transform: translate3d(-10px, 0, 0); clip-path: inset(0 0 76% 0); }
  72% { opacity: .62; transform: translate3d(12px, -1px, 0); clip-path: inset(18% 0 48% 0); }
  73% { opacity: .40; transform: translate3d(-7px, 2px, 0); clip-path: inset(48% 0 18% 0); }
  74% { opacity: .24; transform: translate3d(5px, -2px, 0); clip-path: inset(78% 0 0 0); }
  75%, 100% { opacity: 0; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
}

@keyframes logoGlitchB {
  0%, 78%, 100% { opacity: 0; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
  79% { opacity: .28; transform: translate3d(11px, 0, 0); clip-path: inset(8% 0 66% 0); }
  80% { opacity: .54; transform: translate3d(-14px, 1px, 0); clip-path: inset(35% 0 27% 0); }
  81% { opacity: .34; transform: translate3d(8px, -2px, 0); clip-path: inset(72% 0 2% 0); }
  82%, 100% { opacity: 0; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
}

@keyframes emblemGlitchA {
  0%, 66%, 100% { opacity: 0; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
  67% { opacity: .28; transform: translate3d(-16px, 0, 0); clip-path: inset(0 0 78% 0); }
  68% { opacity: .58; transform: translate3d(20px, -2px, 0); clip-path: inset(12% 0 56% 0); }
  69% { opacity: .48; transform: translate3d(-14px, 3px, 0); clip-path: inset(28% 0 36% 0); }
  70% { opacity: .36; transform: translate3d(12px, -3px, 0); clip-path: inset(52% 0 18% 0); }
  71% { opacity: .24; transform: translate3d(-8px, 2px, 0); clip-path: inset(80% 0 0 0); }
  72%, 100% { opacity: 0; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
}

@keyframes emblemGlitchB {
  0%, 74%, 100% { opacity: 0; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
  75% { opacity: .26; transform: translate3d(14px, 0, 0); clip-path: inset(4% 0 74% 0); }
  76% { opacity: .54; transform: translate3d(-20px, 2px, 0); clip-path: inset(20% 0 48% 0); }
  77% { opacity: .42; transform: translate3d(16px, -3px, 0); clip-path: inset(44% 0 24% 0); }
  78% { opacity: .28; transform: translate3d(-10px, 3px, 0); clip-path: inset(76% 0 0 0); }
  79%, 100% { opacity: 0; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); }
}

@keyframes smokeDriftOne {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.34; }
  20%  { transform: translate3d(34px, -14px, 0) scale(1.08) rotate(1.5deg); opacity: 0.54; }
  40%  { transform: translate3d(92px, -34px, 0) scale(1.16) rotate(-1.2deg); opacity: 0.60; }
  58%  { transform: translate3d(138px, -8px, 0) scale(1.22) rotate(2.1deg); opacity: 0.44; }
  78%  { transform: translate3d(188px, 18px, 0) scale(1.15) rotate(-1.8deg); opacity: 0.30; }
  100% { transform: translate3d(234px, -6px, 0) scale(1.08) rotate(0.8deg); opacity: 0.22; }
}

@keyframes smokeDriftTwo {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.30; }
  18%  { transform: translate3d(-28px, -12px, 0) scale(1.06) rotate(-1.2deg); opacity: 0.42; }
  34%  { transform: translate3d(-82px, -38px, 0) scale(1.12) rotate(1.8deg); opacity: 0.56; }
  52%  { transform: translate3d(-34px, -54px, 0) scale(1.21) rotate(-2.6deg); opacity: 0.48; }
  70%  { transform: translate3d(38px, -28px, 0) scale(1.26) rotate(2.2deg); opacity: 0.34; }
  100% { transform: translate3d(84px, -10px, 0) scale(1.18) rotate(-0.8deg); opacity: 0.24; }
}

@keyframes smokeDriftThree {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.32; }
  22%  { transform: translate3d(-42px, -10px, 0) scale(1.05) rotate(1.4deg); opacity: 0.48; }
  44%  { transform: translate3d(-104px, -28px, 0) scale(1.14) rotate(-1.7deg); opacity: 0.58; }
  64%  { transform: translate3d(-154px, 2px, 0) scale(1.22) rotate(2.5deg); opacity: 0.40; }
  82%  { transform: translate3d(-214px, 20px, 0) scale(1.18) rotate(-2deg); opacity: 0.28; }
  100% { transform: translate3d(-244px, 4px, 0) scale(1.10) rotate(0.6deg); opacity: 0.22; }
}

@keyframes smokeDriftFour {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.22; }
  30%  { transform: translate3d(24px, -18px, 0) scale(1.12) rotate(1.5deg); opacity: 0.38; }
  58%  { transform: translate3d(58px, -36px, 0) scale(1.22) rotate(-1.4deg); opacity: 0.44; }
  80%  { transform: translate3d(76px, -12px, 0) scale(1.16) rotate(2deg); opacity: 0.30; }
  100% { transform: translate3d(92px, 6px, 0) scale(1.08) rotate(-0.6deg); opacity: 0.12; }
}

@keyframes smokeDriftFive {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.14; }
  28%  { transform: translate3d(16px, 8px, 0) scale(1.06) rotate(1deg); opacity: 0.20; }
  56%  { transform: translate3d(44px, 18px, 0) scale(1.12) rotate(-1.6deg); opacity: 0.26; }
  82%  { transform: translate3d(70px, 6px, 0) scale(1.08) rotate(1.2deg); opacity: 0.18; }
  100% { transform: translate3d(92px, 16px, 0) scale(1.03) rotate(-0.5deg); opacity: 0.12; }
}

@keyframes scanlineDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(8px); }
}

@keyframes scanlineSweep {
  0% { transform: translateY(-100%); opacity: 0.08; }
  45% { opacity: 0.18; }
  100% { transform: translateY(100%); opacity: 0.08; }
}


.matrix-status {
  position: relative;
}

.matrix-thankyou {
  margin-top: 0.7rem;
  color: rgba(255,255,255,0.92);
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
  text-shadow:
    0 0 12px rgba(82, 220, 255, 0.34),
    0 0 18px rgba(255, 56, 214, 0.2);
}

.matrix-overlay.show-thankyou .matrix-thankyou {
  opacity: 1;
  transform: translateY(0);
}

.matrix-overlay.hide-status .matrix-status {
  opacity: 0;
  transform: scale(1);
  transition: opacity 260ms ease;
}

.page.matrix-active > *:not(.matrix-overlay):not(.scanlines) {
  animation: pageSystemGlitch 340ms steps(2, end) infinite;
  filter: brightness(0.56) saturate(0.9) blur(0.2px);
}

.page.matrix-active .scanlines {
  opacity: 0.58;
  animation-duration: 1.8s;
}

.matrix-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.matrix-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.matrix-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.78;
  filter: contrast(1.1) saturate(0.95);
  mix-blend-mode: normal;
}

.matrix-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(18,18,20,0.24) 0 1px, transparent 1px 4px),
    radial-gradient(circle at center, rgba(54, 18, 34, 0.08), transparent 34%),
    radial-gradient(circle at center, rgba(18, 28, 56, 0.08), transparent 48%);
  mix-blend-mode: multiply;
  opacity: 0.62;
  animation: matrixFlash 180ms steps(2, end) 0s 9;
}

.matrix-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(70, 16, 24, 0.05), rgba(20, 28, 50, 0.05));
  mix-blend-mode: multiply;
  opacity: 0.10;
  animation: matrixSliceFlicker 280ms steps(2,end) 0s 10;
}

.matrix-overlay-copy {
  position: absolute;
  z-index: 2;
  max-width: 28rem;
  color: rgba(205, 244, 255, 0.52);
  font-size: 0.64rem;
  line-height: 1.55;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(88, 232, 255, 0.18);
  mix-blend-mode: screen;
}

.matrix-overlay-copy-left { left: 3.2rem; bottom: 3rem; }
.matrix-overlay-copy-right { right: 3.2rem; top: 8.5rem; text-align: right; }

.matrix-status {
  position: relative;
  z-index: 3;
  padding: 1.45rem 1.8rem;
  min-width: min(82vw, 560px);
  border: 1px solid rgba(120, 140, 180, 0.34);
  background: rgba(0, 0, 0, 0.70);
  box-shadow:
    0 0 24px rgba(82, 220, 255, 0.16),
    0 0 34px rgba(255, 56, 214, 0.10),
    inset 0 0 18px rgba(255,255,255,0.025);
  text-align: center;
  transform: scale(1);
  opacity: 0;
  transition: opacity 320ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.matrix-overlay.show-status .matrix-status {
  opacity: 1;
  transform: scale(1);
  animation: none;
}

.matrix-status.is-complete {
  border-color: rgba(255, 56, 214, 0.58);
  box-shadow:
    0 0 30px rgba(255, 56, 214, 0.22),
    0 0 46px rgba(82, 220, 255, 0.16),
    inset 0 0 20px rgba(255,255,255,0.035);
}

.matrix-kicker {
  color: rgba(82, 220, 255, 0.82);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: 0.72rem;
}

.matrix-title {
  color: white;
  font-size: clamp(1.7rem, 4vw, 3.8rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(82, 220, 255, 0.62),
    0 0 22px rgba(255, 56, 214, 0.34);
  animation: matrixTitleGlitch 420ms steps(2, end) 0s 6, matrixTitlePulse 1.4s ease-in-out infinite;
}

.matrix-subtitle {
  margin-top: 0.8rem;
  color: rgba(255,255,255,0.72);
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

@keyframes pageSystemGlitch {
  0%, 100% { transform: translate3d(0,0,0); }
  20% { transform: translate3d(2px,0,0); }
  40% { transform: translate3d(-2px,1px,0); }
  60% { transform: translate3d(3px,-1px,0); }
  80% { transform: translate3d(-1px,0,0); }
}

@keyframes matrixFlash {
  0%, 100% { opacity: 0.64; }
  50% { opacity: 0.98; }
}

@keyframes matrixSliceFlicker {
  0%, 100% { clip-path: inset(0 0 0 0); opacity: 0.18; }
  35% { clip-path: inset(8% 0 72% 0); opacity: 0.24; }
  55% { clip-path: inset(42% 0 28% 0); opacity: 0.18; }
  80% { clip-path: inset(76% 0 8% 0); opacity: 0.14; }
}

@keyframes matrixStatusIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes matrixStatusGlitch {
  0%, 100% { transform: translate3d(0,0,0); }
}

@keyframes matrixTitleGlitch {
  0%, 100% { transform: translate3d(0,0,0); filter: none; }
  18% { transform: translate3d(-6px,1px,0); filter: hue-rotate(-20deg); }
  34% { transform: translate3d(8px,-1px,0); filter: hue-rotate(18deg); }
  56% { transform: translate3d(-3px,0,0); filter: contrast(1.55); }
  74% { transform: translate3d(5px,1px,0); filter: saturate(1.35); }
}

@keyframes matrixTitlePulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}
  50% { opacity: 1; }
}


@media (max-width: 900px) {
  .matrix-thankyou { font-size: clamp(0.96rem, 1.8vw, 1.22rem); }

  .matrix-overlay-copy-left { left: 1.4rem; bottom: 1.4rem; max-width: 18rem; }
  .matrix-overlay-copy-right { right: 1.4rem; top: 6.5rem; max-width: 18rem; }
  .matrix-status { min-width: min(88vw, 500px); }

  .site-header {
    top: 2.8rem;
    left: 1.4rem;
    right: 1.4rem;
  }

  .logo-wrap { width: clamp(150px, 26vw, 250px); }

  .follow-us {
    letter-spacing: 0.12em;
    font-size: 0.75rem;
  }

  .hero {
    width: min(94vw, 820px);
    transform: translateY(1vh);
  }

  .emblem-wrap { width: min(79vw, 680px); }

  .copy {
    font-size: clamp(0.86rem, 1.8vw, 1rem);
    letter-spacing: 0.16em;
  }

  .signup { width: min(82vw, 620px); }
}

@media (max-width: 640px) {
  .matrix-thankyou { font-size: 0.92rem; letter-spacing: 0.16em; }

  .matrix-overlay-copy { display: none; }
  .matrix-overlay::before { background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.08) 0 1px, rgba(0,0,0,0.20) 1px 4px); opacity: 0.74; }
  .matrix-status { min-width: min(90vw, 420px); padding: 1.1rem 1rem; }
  .matrix-kicker { font-size: 0.58rem; letter-spacing: 0.24em; }
  .matrix-subtitle { font-size: 0.68rem; letter-spacing: 0.16em; }

  .scanlines { opacity: 0.28; }

  .site-header {
    top: 2.1rem;
    left: 1rem;
    right: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .logo-wrap { width: min(72vw, 240px); }

  .follow-us {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }

  .instagram-icon {
    width: 20px;
    height: 20px;
  }

  .hero {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 5rem;
    transform: none;
  }

  .emblem-wrap { width: min(96vw, 620px); }

  .copy {
    margin-top: 0.65rem;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    line-height: 1.55;
  }

  .signup {
    width: min(92vw, 430px);
    margin-top: calc(1.35rem + 20px);
    grid-template-columns: 1fr;
  }

  .signup button {
    min-height: 52px;
    border-left: 0;
    border-top: 1px solid var(--pink);
  }

  .fine-print { font-size: 0.74rem; }

  .smoke-1, .smoke-2, .smoke-3 {
    min-width: 260px;
    min-height: 100px;
  }

  .smoke-4, .smoke-5 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page.matrix-active > *:not(.matrix-overlay):not(.scanlines),
  .matrix-overlay::before,
  .matrix-overlay::after,
  .matrix-status,
  .matrix-title,
  .scanlines,
  .scanlines::before,
  .smoke,
  .logo-wrap,
  .emblem-wrap,
  .logo-wrap .base,
  .emblem-wrap .base,
  .logo-wrap .glitch-a,
  .logo-wrap .glitch-b,
  .emblem-wrap .glitch-a,
  .emblem-wrap .glitch-b {
    animation: none !important;
  }
}

/* HUD / micro UI elements */
.hud-topbar {
  position: absolute;
  top: 0.95rem;
  left: 1.15rem;
  right: 1.15rem;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(190, 208, 255, 0.28);
  text-shadow: 0 0 6px rgba(13, 16, 26, 0.75);
}

.hud-topbar-left,
.hud-topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.hud-topbar strong {
  color: rgba(110, 210, 255, 0.72);
  font-weight: 600;
}

.hud-rec-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(255, 40, 108, 0.85);
  box-shadow: 0 0 10px rgba(255, 40, 108, 0.7);
  display: inline-block;
  margin-right: -0.35rem;
}

.hud-corner {
  position: absolute;
  width: 1.05rem;
  height: 1.05rem;
  z-index: 7;
  opacity: 0.8;
  pointer-events: none;
}

.hud-corner::before,
.hud-corner::after {
  content: "";
  position: absolute;
  background: rgba(154, 200, 255, 0.55);
  box-shadow: 0 0 8px rgba(70, 160, 255, 0.28);
}

.hud-corner::before { width: 100%; height: 1px; }
.hud-corner::after { width: 1px; height: 100%; }

.hud-corner-tl { top: 0.7rem; left: 0.7rem; }
.hud-corner-tl::before, .hud-corner-tl::after { top: 0; left: 0; }
.hud-corner-tr { top: 0.7rem; right: 0.7rem; }
.hud-corner-tr::before, .hud-corner-tr::after { top: 0; right: 0; }
.hud-corner-bl { bottom: 0.7rem; left: 0.7rem; }
.hud-corner-bl::before, .hud-corner-bl::after { bottom: 0; left: 0; }
.hud-corner-br { bottom: 0.7rem; right: 0.7rem; }
.hud-corner-br::before, .hud-corner-br::after { bottom: 0; right: 0; }


.form-kicker {
  width: min(74vw, 640px);
  margin-top: 1.15rem;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  justify-content: center;
  pointer-events: none;
}

.form-kicker .line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(70, 190, 255, 0.34), transparent);
}

.form-kicker .text {
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(98, 220, 255, 0.82);
  text-shadow: 0 0 8px rgba(50, 200, 255, 0.22);
  white-space: nowrap;
}


.hud-bottom-strip {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 0.75rem;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
  font-size: 0.56rem;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(176, 194, 255, 0.24);
  text-shadow: 0 0 6px rgba(13, 16, 26, 0.75);
}

@media (max-width: 900px) {
  .hud-topbar { top: 0.75rem; left: 0.9rem; right: 0.9rem; font-size: 0.5rem; }
  .hud-topbar-left, .hud-topbar-right { gap: 0.65rem; }
  .form-kicker, .form-meta { width: min(82vw, 620px); }
  .hud-bottom-strip { left: 0.9rem; right: 0.9rem; font-size: 0.5rem; }
}

@media (max-width: 640px) {
  .hud-topbar,
  .hud-bottom-strip { display: none; }

  .hud-corner { width: 0.9rem; height: 0.9rem; }

  .form-kicker {
    width: min(92vw, 430px);
    margin-top: 1.15rem;
    gap: 0.55rem;
  }

  .form-kicker .text {
    font-size: 0.54rem;
    letter-spacing: 0.18em;
  }
}


/* Popup restyle to better match homepage */
.matrix-status {
  overflow: hidden;
  isolation: isolate;
  min-width: min(84vw, 600px);
  padding: 1.55rem 1.9rem 1.35rem;
  border: 1px solid rgba(83, 148, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(6, 10, 18, 0.92) 0%, rgba(2, 4, 9, 0.88) 100%),
    radial-gradient(circle at 50% 0%, rgba(255, 28, 182, 0.08), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(48, 108, 255, 0.10), transparent 44%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255, 32, 144, 0.05),
    0 0 22px rgba(255, 26, 140, 0.18),
    0 0 34px rgba(66, 122, 255, 0.14),
    inset 0 0 46px rgba(0, 0, 0, 0.52);
}

.matrix-status::before,
.matrix-status::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.matrix-status::before {
  inset: 10px;
  border: 1px solid rgba(132, 184, 255, 0.14);
  box-shadow: inset 0 0 18px rgba(67, 125, 255, 0.08);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  opacity: 0.95;
}

.matrix-status::after {
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent 0, rgba(255, 24, 130, 0.06) 8%, transparent 16%, transparent 82%, rgba(72, 132, 255, 0.06) 92%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.42;
}

.matrix-overlay.show-status .matrix-status {
  opacity: 1;
  transform: scale(1);
  animation: popupShellGlitch 900ms steps(2, end) 0.05s 1, popupGlowPulse 2.2s ease-in-out infinite;
}

.matrix-status.is-complete {
  border-color: rgba(255, 64, 166, 0.34);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255, 32, 144, 0.06),
    0 0 28px rgba(255, 24, 120, 0.22),
    0 0 42px rgba(66, 122, 255, 0.18),
    inset 0 0 54px rgba(0, 0, 0, 0.56);
}

.matrix-kicker {
  position: relative;
  display: inline-block;
  padding: 0.15rem 0.35rem;
  color: rgba(126, 202, 255, 0.92);
  font-size: 0.67rem;
  letter-spacing: 0.36em;
  text-shadow: 0 0 10px rgba(74, 156, 255, 0.3);
}

.matrix-kicker::before,
.matrix-kicker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.8rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 168, 255, 0.55), transparent);
}
.matrix-kicker::before { right: calc(100% + 0.35rem); }
.matrix-kicker::after { left: calc(100% + 0.35rem); }

.matrix-title {
  position: relative;
  display: inline-block;
  color: rgba(245, 250, 255, 0.97);
  font-size: clamp(1.8rem, 4vw, 3.9rem);
  letter-spacing: 0.16em;
  text-shadow:
    0 0 8px rgba(255,255,255,0.12),
    0 0 16px rgba(64, 140, 255, 0.42),
    0 0 24px rgba(255, 18, 132, 0.28);
  animation: matrixTitleGlitch 420ms steps(2, end) 0s 6, matrixTitlePulse 1.8s ease-in-out infinite;
}

.matrix-subtitle {
  margin-top: 0.85rem;
  color: rgba(194, 212, 228, 0.78);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.matrix-thankyou {
  margin-top: 0.82rem;
  color: rgba(255, 236, 245, 0.94);
  text-shadow:
    0 0 14px rgba(255, 36, 164, 0.22),
    0 0 14px rgba(70, 130, 255, 0.18);
}

.matrix-overlay-copy {
  color: rgba(130, 162, 190, 0.38);
  text-shadow: 0 0 8px rgba(28, 52, 92, 0.22);
}

@keyframes popupShellGlitch {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate3d(0,0,0) scale(1); }
  12% { clip-path: inset(0 0 68% 0); transform: translate3d(-3px,0,0) scale(1.002); }
  16% { clip-path: inset(22% 0 36% 0); transform: translate3d(4px,0,0) scale(1.001); }
  21% { clip-path: inset(72% 0 0 0); transform: translate3d(-2px,0,0) scale(0.999); }
  24% { clip-path: inset(0 0 0 0); transform: translate3d(0,0,0) scale(1); }
  58% { clip-path: inset(0 0 76% 0); transform: translate3d(3px,-1px,0) scale(1.002); }
  62% { clip-path: inset(36% 0 20% 0); transform: translate3d(-4px,1px,0) scale(0.999); }
  66% { clip-path: inset(80% 0 0 0); transform: translate3d(2px,0,0) scale(1.001); }
}

@keyframes popupGlowPulse {
  0%, 100% { box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255, 32, 144, 0.05),
    0 0 22px rgba(255, 26, 140, 0.18),
    0 0 34px rgba(66, 122, 255, 0.14),
    inset 0 0 46px rgba(0, 0, 0, 0.52); }
  50% { box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255, 32, 144, 0.07),
    0 0 28px rgba(255, 26, 140, 0.24),
    0 0 42px rgba(66, 122, 255, 0.18),
    inset 0 0 50px rgba(0, 0, 0, 0.56); }
}

@media (max-width: 900px) {
  .matrix-status { min-width: min(88vw, 520px); }
}

@media (max-width: 640px) {
  .matrix-status {
    min-width: min(90vw, 420px);
    padding: 1.1rem 0.95rem;
  }
  .matrix-kicker::before,
  .matrix-kicker::after { display: none; }
}


/* Stronger cyberpunk popup typography + distress */
.matrix-status {
  border: 1px solid rgba(77, 136, 255, 0.30);
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0.94) 0%, rgba(0, 0, 0, 0.92) 100%),
    radial-gradient(circle at 50% 12%, rgba(255, 0, 133, 0.09), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(54, 105, 255, 0.10), transparent 48%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255, 33, 115, 0.05),
    0 0 28px rgba(255, 0, 128, 0.22),
    0 0 44px rgba(44, 104, 255, 0.18),
    inset 0 0 58px rgba(0,0,0,0.62);
}

.matrix-status::before {
  inset: 8px;
  border: 1px solid rgba(146, 186, 255, 0.13);
  box-shadow:
    inset 0 0 18px rgba(58, 122, 255, 0.10),
    0 0 10px rgba(255, 26, 140, 0.06);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.matrix-status::after {
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.06) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent 0, rgba(255, 15, 115, 0.08) 10%, transparent 18%, transparent 82%, rgba(78, 140, 255, 0.08) 90%, transparent 100%),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,0.018) 14px 15px, transparent 15px 32px);
  mix-blend-mode: screen;
  opacity: 0.58;
  animation: popupPanelScan 4.6s linear infinite, popupPanelFlicker 1.2s steps(2, end) infinite;
}

.matrix-overlay.show-status .matrix-status {
  animation: popupShellGlitch 1100ms steps(2, end) 0.05s 1, popupGlowPulse 2.2s ease-in-out infinite;
}

.matrix-kicker,
.matrix-title,
.matrix-thankyou {
  position: relative;
  display: inline-block;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.matrix-kicker {
  padding: 0.16rem 0.45rem;
  color: rgba(214, 234, 255, 0.94);
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-shadow:
    0 0 8px rgba(72, 132, 255, 0.30),
    0 0 12px rgba(255, 12, 122, 0.18);
  transform: skewX(-10deg);
  animation: popupMicroGlitch 2.2s steps(2, end) infinite;
}

.matrix-kicker::before,
.matrix-kicker::after,
.matrix-title::before,
.matrix-title::after,
.matrix-thankyou::before,
.matrix-thankyou::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.matrix-kicker::before,
.matrix-title::before,
.matrix-thankyou::before {
  color: rgba(70, 160, 255, 0.95);
  transform: translate3d(2px, 0, 0);
  text-shadow: 0 0 10px rgba(70, 160, 255, 0.30);
}

.matrix-kicker::after,
.matrix-title::after,
.matrix-thankyou::after {
  color: rgba(255, 16, 128, 0.86);
  transform: translate3d(-2px, 0, 0);
  text-shadow: 0 0 10px rgba(255, 16, 128, 0.24);
}

.matrix-title {
  color: rgba(245, 251, 255, 0.98);
  font-size: clamp(1.9rem, 4vw, 4.1rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 0.94;
  text-transform: uppercase;
  transform: skewX(-9deg);
  text-shadow:
    0 0 10px rgba(255,255,255,0.10),
    0 0 18px rgba(73, 146, 255, 0.42),
    0 0 28px rgba(255, 7, 122, 0.28);
  animation: popupTitleFlicker 1.8s steps(2, end) infinite, matrixTitlePulse 2s ease-in-out infinite;
}

.matrix-title::before {
  animation: popupTextSliceA 2.2s steps(2, end) infinite;
}

.matrix-title::after {
  animation: popupTextSliceB 2.6s steps(2, end) infinite;
}

.matrix-subtitle {
  margin-top: 0.95rem;
  color: rgba(190, 206, 222, 0.74);
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(84, 130, 190, 0.14);
}

.matrix-thankyou {
  margin-top: 0.9rem;
  color: rgba(255, 242, 248, 0.96);
  font-size: clamp(1.1rem, 2.1vw, 1.56rem);
  letter-spacing: 0.20em;
  transform: skewX(-8deg);
  text-shadow:
    0 0 14px rgba(255, 20, 120, 0.26),
    0 0 16px rgba(60, 132, 255, 0.20);
}

.matrix-overlay.show-thankyou .matrix-thankyou {
  animation: popupThankYouGlitch 900ms steps(2, end) 1, popupGlowPulse 2.2s ease-in-out infinite;
}

.matrix-thankyou::before {
  animation: popupTextSliceA 2.8s steps(2, end) infinite;
}

.matrix-thankyou::after {
  animation: popupTextSliceB 3.1s steps(2, end) infinite;
}

.matrix-overlay-copy {
  color: rgba(138, 162, 184, 0.26);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.22em;
}

@keyframes popupPanelScan {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 10px, 0 0, 32px 0; }
}

@keyframes popupPanelFlicker {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 0.68; }
}

@keyframes popupMicroGlitch {
  0%, 100% { transform: skewX(-10deg) translate3d(0,0,0); }
  12% { transform: skewX(-10deg) translate3d(-1px,0,0); }
  14% { transform: skewX(-10deg) translate3d(1px,0,0); }
  16% { transform: skewX(-10deg) translate3d(0,0,0); }
  68% { transform: skewX(-10deg) translate3d(1px,0,0); }
  70% { transform: skewX(-10deg) translate3d(-1px,0,0); }
}

@keyframes popupTitleFlicker {
  0%, 100% { filter: none; }
  24% { filter: contrast(1.2); }
  25% { filter: brightness(1.12) contrast(1.34); }
  26% { filter: none; }
  74% { filter: brightness(1.08) saturate(1.2); }
  75% { filter: none; }
}

@keyframes popupTextSliceA {
  0%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
  18% { opacity: 0.74; clip-path: inset(0 0 74% 0); }
  19% { opacity: 0.92; clip-path: inset(34% 0 38% 0); }
  20% { opacity: 0.48; clip-path: inset(78% 0 0 0); }
  21% { opacity: 0; clip-path: inset(0 0 0 0); }
  62% { opacity: 0.62; clip-path: inset(10% 0 58% 0); }
  63% { opacity: 0.40; clip-path: inset(62% 0 8% 0); }
  64% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@keyframes popupTextSliceB {
  0%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
  30% { opacity: 0.60; clip-path: inset(0 0 78% 0); }
  31% { opacity: 0.86; clip-path: inset(26% 0 42% 0); }
  32% { opacity: 0.38; clip-path: inset(74% 0 0 0); }
  33% { opacity: 0; clip-path: inset(0 0 0 0); }
  82% { opacity: 0.44; clip-path: inset(14% 0 56% 0); }
  83% { opacity: 0.30; clip-path: inset(58% 0 14% 0); }
  84% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@keyframes popupThankYouGlitch {
  0%, 100% { transform: skewX(-8deg) translate3d(0,0,0); }
  18% { transform: skewX(-8deg) translate3d(-3px,0,0); }
  21% { transform: skewX(-8deg) translate3d(4px,0,0); }
  25% { transform: skewX(-8deg) translate3d(0,0,0); }
  72% { transform: skewX(-8deg) translate3d(2px,0,0); }
  75% { transform: skewX(-8deg) translate3d(-2px,0,0); }
}

@media (max-width: 640px) {
  .matrix-title { font-size: clamp(1.5rem, 8vw, 2.5rem); }
  .matrix-subtitle { letter-spacing: 0.18em; }
  .matrix-thankyou { font-size: 0.98rem; }
}


/* Popup v30: thicker glow, stacked distressed type */
.matrix-status {
  overflow: visible;
  border: 1px solid rgba(89, 146, 255, 0.34);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255, 36, 130, 0.07),
    0 0 36px rgba(255, 20, 128, 0.28),
    0 0 62px rgba(64, 120, 255, 0.24),
    0 0 92px rgba(24, 62, 170, 0.16),
    inset 0 0 58px rgba(0,0,0,0.62);
}

.matrix-status::before {
  opacity: 0.96;
}

.matrix-status::after {
  opacity: 0.64;
}

.matrix-overlay.show-status .matrix-status {
  animation: popupShellGlitch 1100ms steps(2, end) 0.05s 1, popupGlowPulseHeavy 2.4s ease-in-out infinite;
}

.matrix-status.is-complete {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255, 36, 130, 0.09),
    0 0 42px rgba(255, 20, 128, 0.34),
    0 0 76px rgba(64, 120, 255, 0.28),
    0 0 110px rgba(24, 62, 170, 0.18),
    inset 0 0 64px rgba(0,0,0,0.66);
}

.matrix-title,
.matrix-thankyou {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  width: 100%;
  transform: none;
}

.matrix-title-line,
.matrix-thankyou-line {
  position: relative;
  display: block;
  line-height: 0.88;
  text-transform: uppercase;
  background-image:
    linear-gradient(180deg, rgba(250,252,255,0.98) 0%, rgba(215,226,255,0.96) 34%, rgba(255,255,255,0.72) 35%, rgba(175,192,228,0.88) 36%, rgba(238,242,255,0.98) 64%, rgba(173,194,255,0.82) 65%, rgba(240,248,255,0.98) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.20) 0 1px, rgba(124,153,214,0.06) 1px 3px, rgba(0,0,0,0.16) 3px 4px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(78, 144, 255, 0.34)) drop-shadow(0 0 14px rgba(255, 24, 134, 0.22));
}

.matrix-title {
  gap: 0.02rem;
}

.matrix-title-line {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: clamp(1.95rem, 4vw, 4.15rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  transform: skewX(-10deg);
}

.matrix-title-line:nth-child(2) {
  margin-left: 0.16em;
}

.matrix-title::before,
.matrix-title::after,
.matrix-thankyou::before,
.matrix-thankyou::after {
  content: none;
}

.matrix-title-line::before,
.matrix-title-line::after,
.matrix-thankyou-line::before,
.matrix-thankyou-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.matrix-title-line::before,
.matrix-thankyou-line::before {
  color: rgba(75, 162, 255, 0.82);
  text-shadow: 0 0 12px rgba(75, 162, 255, 0.32);
  clip-path: inset(0 0 58% 0);
  transform: translate3d(2px, 0, 0);
  animation: popupBandSliceA 2.2s steps(2, end) infinite;
}

.matrix-title-line::after,
.matrix-thankyou-line::after {
  color: rgba(255, 18, 124, 0.72);
  text-shadow: 0 0 12px rgba(255, 18, 124, 0.24);
  clip-path: inset(62% 0 0 0);
  transform: translate3d(-2px, 0, 0);
  animation: popupBandSliceB 2.8s steps(2, end) infinite;
}

.matrix-title-line:nth-child(2)::before,
.matrix-title-line:nth-child(2)::after {
  animation-delay: .15s;
}

.matrix-subtitle {
  max-width: 24rem;
  margin: 1rem auto 0;
  line-height: 1.5;
}

.matrix-thankyou {
  margin-top: 0.95rem;
  gap: 0.02rem;
}

.matrix-thankyou-line {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: clamp(1.0rem, 2vw, 1.42rem);
  letter-spacing: 0.24em;
  transform: skewX(-9deg);
  background-image:
    linear-gradient(180deg, rgba(255,248,251,0.98) 0%, rgba(255,215,235,0.92) 34%, rgba(255,255,255,0.68) 35%, rgba(196,185,230,0.80) 36%, rgba(255,242,248,0.98) 64%, rgba(198,214,255,0.78) 65%, rgba(255,248,251,0.98) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.18) 0 1px, rgba(116,136,205,0.06) 1px 3px, rgba(0,0,0,0.14) 3px 4px);
}

.matrix-thankyou-line:nth-child(2) {
  margin-left: 0.12em;
}

.matrix-overlay.show-thankyou .matrix-thankyou {
  animation: none;
}

.matrix-overlay.show-thankyou .matrix-thankyou-line {
  animation: popupThankYouGlitch 900ms steps(2, end) 1, popupTitleFlicker 1.8s steps(2, end) infinite;
}

.matrix-kicker {
  margin-bottom: 0.38rem;
}

@keyframes popupGlowPulseHeavy {
  0%, 100% { box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255, 36, 130, 0.07),
    0 0 36px rgba(255, 20, 128, 0.28),
    0 0 62px rgba(64, 120, 255, 0.24),
    0 0 92px rgba(24, 62, 170, 0.16),
    inset 0 0 58px rgba(0,0,0,0.62); }
  50% { box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255, 36, 130, 0.10),
    0 0 48px rgba(255, 20, 128, 0.36),
    0 0 78px rgba(64, 120, 255, 0.31),
    0 0 116px rgba(24, 62, 170, 0.22),
    inset 0 0 64px rgba(0,0,0,0.68); }
}

@keyframes popupBandSliceA {
  0%, 100% { opacity: 0; clip-path: inset(0 0 58% 0); transform: translate3d(2px,0,0); }
  16% { opacity: 0.64; clip-path: inset(0 0 74% 0); transform: translate3d(3px,-1px,0); }
  18% { opacity: 0.88; clip-path: inset(26% 0 48% 0); transform: translate3d(1px,0,0); }
  20% { opacity: 0.34; clip-path: inset(66% 0 16% 0); transform: translate3d(2px,1px,0); }
  21% { opacity: 0; clip-path: inset(0 0 58% 0); }
  63% { opacity: 0.56; clip-path: inset(12% 0 60% 0); }
  65% { opacity: 0.28; clip-path: inset(68% 0 10% 0); }
  66% { opacity: 0; clip-path: inset(0 0 58% 0); }
}

@keyframes popupBandSliceB {
  0%, 100% { opacity: 0; clip-path: inset(62% 0 0 0); transform: translate3d(-2px,0,0); }
  28% { opacity: 0.48; clip-path: inset(72% 0 0 0); transform: translate3d(-3px,0,0); }
  30% { opacity: 0.78; clip-path: inset(40% 0 24% 0); transform: translate3d(-1px,1px,0); }
  32% { opacity: 0.30; clip-path: inset(10% 0 68% 0); transform: translate3d(-2px,-1px,0); }
  33% { opacity: 0; clip-path: inset(62% 0 0 0); }
  80% { opacity: 0.42; clip-path: inset(58% 0 10% 0); }
  82% { opacity: 0.24; clip-path: inset(18% 0 56% 0); }
  83% { opacity: 0; clip-path: inset(62% 0 0 0); }
}

@media (max-width: 640px) {
  .matrix-title-line { font-size: clamp(1.5rem, 8vw, 2.55rem); }
  .matrix-thankyou-line { font-size: 0.96rem; }
}


/* v31: popup typography closer to logo feel, non-italic, less heavy */
.matrix-kicker,
.matrix-title,
.matrix-title-line,
.matrix-thankyou,
.matrix-thankyou-line,
.matrix-subtitle {
  font-style: normal;
}

.matrix-kicker,
.matrix-title-line,
.matrix-thankyou-line {
  font-family: "Arial Narrow", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

.matrix-kicker {
  padding: 0;
  margin-bottom: 0.45rem;
  color: rgba(202, 225, 255, 0.90);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  transform: none;
  text-shadow:
    0 0 8px rgba(72, 132, 255, 0.22),
    0 0 10px rgba(255, 12, 122, 0.10);
}

.matrix-kicker::before,
.matrix-kicker::after {
  opacity: 0.55;
}

.matrix-title {
  gap: 0.08rem;
}

.matrix-title-line {
  font-size: clamp(1.68rem, 3.55vw, 3.34rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 0.90;
  transform: none;
  font-stretch: condensed;
  background-image:
    linear-gradient(180deg, rgba(242,246,255,0.98) 0%, rgba(210,224,255,0.96) 42%, rgba(255,255,255,0.68) 43%, rgba(168,187,224,0.82) 45%, rgba(238,244,255,0.98) 68%, rgba(168,188,248,0.82) 70%, rgba(245,249,255,0.98) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.17) 0 1px, rgba(118,143,210,0.04) 1px 2px, rgba(0,0,0,0.18) 2px 3px, rgba(0,0,0,0.05) 3px 4px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 7px rgba(78, 144, 255, 0.28)) drop-shadow(0 0 12px rgba(255, 24, 134, 0.16));
}

.matrix-title-line:nth-child(2) {
  margin-left: 0;
}

.matrix-title-line::before,
.matrix-title-line::after {
  font-style: normal;
}

.matrix-title-line::before {
  color: rgba(76, 161, 255, 0.78);
  text-shadow: 0 0 9px rgba(76, 161, 255, 0.22);
  transform: translate3d(1px, 0, 0);
}

.matrix-title-line::after {
  color: rgba(255, 18, 124, 0.64);
  text-shadow: 0 0 9px rgba(255, 18, 124, 0.16);
  transform: translate3d(-1px, 0, 0);
}

.matrix-subtitle {
  max-width: 26rem;
  margin: 0.95rem auto 0;
  color: rgba(186, 202, 222, 0.70);
  font-family: "Arial Narrow", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1.55;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(84, 130, 190, 0.12);
}

.matrix-thankyou {
  margin-top: 0.88rem;
  gap: 0.04rem;
}

.matrix-thankyou-line {
  font-size: clamp(0.92rem, 1.75vw, 1.20rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 0.94;
  transform: none;
  background-image:
    linear-gradient(180deg, rgba(255,248,251,0.98) 0%, rgba(250,228,239,0.94) 42%, rgba(255,255,255,0.66) 43%, rgba(194,189,226,0.76) 45%, rgba(255,242,248,0.98) 68%, rgba(194,210,251,0.76) 70%, rgba(255,248,251,0.98) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.16) 0 1px, rgba(116,136,205,0.04) 1px 2px, rgba(0,0,0,0.16) 2px 3px, rgba(0,0,0,0.05) 3px 4px);
}

.matrix-thankyou-line:nth-child(2) {
  margin-left: 0;
}

.matrix-thankyou-line::before {
  color: rgba(72, 154, 255, 0.72);
  transform: translate3d(1px, 0, 0);
}

.matrix-thankyou-line::after {
  color: rgba(255, 18, 124, 0.58);
  transform: translate3d(-1px, 0, 0);
}

@media (max-width: 640px) {
  .matrix-title-line {
    font-size: clamp(1.34rem, 7vw, 2.16rem);
    letter-spacing: 0.18em;
  }
  .matrix-subtitle {
    font-size: 0.64rem;
    letter-spacing: 0.18em;
  }
  .matrix-thankyou-line {
    font-size: 0.88rem;
  }
}


/* v32: thank you on one line, main type greener old-computer look */
.matrix-title {
  gap: 0.10rem;
}

.matrix-title-line,
.matrix-thankyou-line,
.matrix-subtitle,
.matrix-kicker {
  font-family: "Lucida Console", Monaco, "Courier New", monospace;
  font-style: normal;
}

.matrix-title-line {
  font-size: clamp(1.56rem, 3.2vw, 2.95rem);
  font-weight: 700;
  letter-spacing: 0.20em;
  line-height: 0.92;
  text-transform: uppercase;
  background-image:
    linear-gradient(180deg, rgba(227,255,235,0.98) 0%, rgba(162,255,189,0.96) 34%, rgba(255,255,255,0.56) 35%, rgba(112,214,137,0.92) 37%, rgba(228,255,236,0.98) 64%, rgba(78,174,104,0.90) 66%, rgba(218,255,228,0.96) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.10) 0 1px, rgba(109, 255, 150, 0.06) 1px 2px, rgba(0,0,0,0.20) 2px 3px, rgba(0,0,0,0.08) 3px 4px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(112,255,144,0.24)) drop-shadow(0 0 12px rgba(34, 132, 78, 0.24));
}

.matrix-title-line::before,
.matrix-thankyou-line::before {
  color: rgba(146,255,170,0.72);
  text-shadow: 0 0 8px rgba(146,255,170,0.16);
  transform: translate3d(1px, 0, 0);
}

.matrix-title-line::after,
.matrix-thankyou-line::after {
  color: rgba(34, 110, 58, 0.78);
  text-shadow: 0 0 8px rgba(34,110,58,0.16);
  transform: translate3d(-1px, 0, 0);
}

.matrix-title-line:nth-child(2) {
  margin-left: 0;
}

.matrix-subtitle {
  color: rgba(151, 193, 160, 0.76);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-shadow: 0 0 6px rgba(112, 170, 130, 0.14);
}

.matrix-kicker {
  color: rgba(177, 220, 189, 0.84);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-shadow: 0 0 6px rgba(122, 188, 143, 0.16);
}

.matrix-kicker::before,
.matrix-kicker::after {
  background: linear-gradient(90deg, transparent, rgba(121, 191, 143, 0.42), transparent);
}

.matrix-thankyou {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  margin-top: 0.95rem;
  width: auto;
}

.matrix-thankyou-line {
  font-size: clamp(0.92rem, 1.55vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  background-image:
    linear-gradient(180deg, rgba(227,255,235,0.98) 0%, rgba(174,255,198,0.94) 34%, rgba(255,255,255,0.54) 35%, rgba(116,212,139,0.86) 37%, rgba(231,255,238,0.98) 64%, rgba(70,166,94,0.82) 66%, rgba(222,255,231,0.96) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.08) 0 1px, rgba(109,255,150,0.05) 1px 2px, rgba(0,0,0,0.18) 2px 3px, rgba(0,0,0,0.08) 3px 4px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(112,255,144,0.18));
}

.matrix-thankyou-line:nth-child(2) {
  margin-left: 0;
}

@media (max-width: 640px) {
  .matrix-title-line {
    font-size: clamp(1.24rem, 6.4vw, 2.06rem);
    letter-spacing: 0.15em;
  }
  .matrix-thankyou {
    gap: 0.28rem;
    flex-wrap: nowrap;
  }
  .matrix-thankyou-line {
    font-size: 0.82rem;
    letter-spacing: 0.14em;
  }
}


/* v33: green title + popup outline matching email box */
.matrix-status {
  border: 1px solid var(--pink);
  background: rgba(6, 6, 20, 0.70);
  box-shadow:
    0 0 26px var(--pink-soft),
    0 0 42px var(--blue-soft),
    inset 0 0 16px rgba(255,255,255,0.03),
    inset 0 0 48px rgba(0,0,0,0.58);
}

.matrix-status::before {
  border: 1px solid rgba(255, 72, 214, 0.16);
  box-shadow: inset 0 0 16px rgba(58, 112, 255, 0.10);
}

.matrix-status::after {
  opacity: 0.56;
}

.matrix-overlay.show-status .matrix-status {
  animation: popupShellGlitch 1100ms steps(2, end) 0.05s 1, popupGlowPulseEmailBox 2.3s ease-in-out infinite;
}

.matrix-status.is-complete {
  border-color: var(--pink);
  box-shadow:
    0 0 30px var(--pink-soft),
    0 0 48px var(--blue-soft),
    inset 0 0 16px rgba(255,255,255,0.03),
    inset 0 0 54px rgba(0,0,0,0.60);
}

.matrix-title-line {
  background-image:
    linear-gradient(180deg, rgba(238,255,242,0.98) 0%, rgba(178,255,198,0.98) 28%, rgba(255,255,255,0.62) 29%, rgba(118,240,140,0.95) 31%, rgba(226,255,232,0.98) 58%, rgba(84,202,108,0.94) 60%, rgba(210,255,222,0.98) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.14) 0 1px, rgba(122,255,158,0.08) 1px 2px, rgba(0,0,0,0.24) 2px 3px, rgba(0,0,0,0.10) 3px 4px);
  filter: drop-shadow(0 0 8px rgba(120,255,150,0.30)) drop-shadow(0 0 14px rgba(42, 148, 76, 0.26));
}

.matrix-title-line::before {
  color: rgba(172,255,190,0.82);
  text-shadow: 0 0 10px rgba(172,255,190,0.24);
}

.matrix-title-line::after {
  color: rgba(40, 112, 62, 0.84);
  text-shadow: 0 0 10px rgba(40,112,62,0.20);
}

@keyframes popupGlowPulseEmailBox {
  0%, 100% {
    box-shadow:
      0 0 26px var(--pink-soft),
      0 0 42px var(--blue-soft),
      inset 0 0 16px rgba(255,255,255,0.03),
      inset 0 0 48px rgba(0,0,0,0.58);
  }
  50% {
    box-shadow:
      0 0 34px var(--pink-soft),
      0 0 58px var(--blue-soft),
      inset 0 0 16px rgba(255,255,255,0.03),
      inset 0 0 52px rgba(0,0,0,0.60);
  }
}


/* v34: make UPLINK CONFIRMED read as true green CRT */
.matrix-title {
  gap: 0.08rem;
}

.matrix-title-line {
  font-family: "Lucida Console", Monaco, "Courier New", monospace;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 0.92;
  background-image:
    linear-gradient(180deg,
      rgba(235,255,239,0.98) 0%,
      rgba(176,255,190,0.98) 18%,
      rgba(92,240,118,0.98) 44%,
      rgba(212,255,220,0.98) 48%,
      rgba(62,212,92,0.98) 70%,
      rgba(176,255,190,0.98) 100%),
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,0.08) 0 1px,
      rgba(120,255,144,0.10) 1px 2px,
      rgba(0,0,0,0.22) 2px 3px,
      rgba(0,0,0,0.08) 3px 4px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 4px rgba(110,255,138,0.36)) drop-shadow(0 0 10px rgba(72,216,104,0.28));
  text-shadow: none;
}

.matrix-title-line::before,
.matrix-title-line::after {
  font-family: "Lucida Console", Monaco, "Courier New", monospace;
}

.matrix-title-line::before {
  color: rgba(165,255,182,0.82);
  text-shadow: 0 0 6px rgba(165,255,182,0.22);
  transform: translate3d(1px, 0, 0);
}

.matrix-title-line::after {
  color: rgba(34,112,48,0.88);
  text-shadow: 0 0 6px rgba(34,112,48,0.16);
  transform: translate3d(-1px, 0, 0);
}

.matrix-title-line:nth-child(2)::before,
.matrix-title-line:nth-child(2)::after {
  animation-delay: .12s;
}

@media (max-width: 640px) {
  .matrix-title-line {
    letter-spacing: 0.14em;
  }
}


/* v35: darken the green CRT popup overall */
.matrix-title-line {
  background-image:
    linear-gradient(180deg,
      rgba(196,236,204,0.94) 0%,
      rgba(112,196,128,0.92) 18%,
      rgba(52,156,76,0.96) 44%,
      rgba(168,222,180,0.92) 48%,
      rgba(38,126,58,0.96) 70%,
      rgba(112,196,128,0.92) 100%),
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,0.04) 0 1px,
      rgba(92,190,116,0.06) 1px 2px,
      rgba(0,0,0,0.28) 2px 3px,
      rgba(0,0,0,0.12) 3px 4px);
  filter: drop-shadow(0 0 3px rgba(92,190,116,0.22)) drop-shadow(0 0 8px rgba(42,118,64,0.20));
}

.matrix-title-line::before {
  color: rgba(124,210,142,0.58);
  text-shadow: 0 0 4px rgba(124,210,142,0.16);
}

.matrix-title-line::after {
  color: rgba(18,74,32,0.88);
  text-shadow: 0 0 4px rgba(18,74,32,0.14);
}

.matrix-kicker {
  color: rgba(146, 182, 154, 0.72);
  text-shadow: 0 0 4px rgba(90, 132, 102, 0.12);
}

.matrix-subtitle {
  color: rgba(126, 154, 132, 0.70);
  text-shadow: 0 0 4px rgba(72, 108, 82, 0.10);
}

.matrix-thankyou-line {
  background-image:
    linear-gradient(180deg, rgba(212,236,218,0.94) 0%, rgba(132,206,148,0.90) 34%, rgba(255,255,255,0.40) 35%, rgba(86,168,104,0.80) 37%, rgba(214,240,222,0.94) 64%, rgba(56,136,72,0.82) 66%, rgba(208,236,216,0.92) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, rgba(92,190,116,0.04) 1px 2px, rgba(0,0,0,0.24) 2px 3px, rgba(0,0,0,0.10) 3px 4px);
  filter: drop-shadow(0 0 4px rgba(92,190,116,0.14));
}

.matrix-status {
  background: rgba(3, 4, 10, 0.78);
}