/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',sans-serif;
  background:#000;
  color:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block;max-width:100%}

/* ============ TOKENS ============ */
:root{
  --neon-green:#7fff3c;
  --neon-lime:#c8ff3c;
  --neon-yellow:#dfff35;
  --neon-blue:#5cd9ff;
  --neon-purple:#b96eff;
  --neon-pink:#ff5ed4;
  --ink:#000;
  --paper:#fff;
  --grid:#101010;
  --muted:#7a7a7a;
  --display:'Archivo Black','Space Grotesk',sans-serif;
  --pixel:'Press Start 2P',monospace;
  --mono:'VT323',monospace;
}

/* ============ STARS BG ============ */
.stars,.stars-2{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 60%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 78%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 33%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 88%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 75%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 38%, #fff 50%, transparent 51%);
  background-size:100% 100%;
  animation:twinkle 6s linear infinite;
  opacity:.85;
}
.stars-2{
  background-image:
    radial-gradient(1px 1px at 15% 88%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 5%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 45%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 18%, #fff 50%, transparent 51%);
  animation:twinkle 4s linear infinite reverse;
  opacity:.6;
}
@keyframes twinkle{
  0%,100%{opacity:.85}
  50%{opacity:.3}
}

/* ============ NAVBAR ============ */
.navbar{
  position:fixed;top:0;left:0;right:0;
  z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-left{display:flex;align-items:center;gap:18px}
.nav-brand{display:inline-flex;align-items:center;gap:10px;transition:transform .2s}
.nav-brand:hover{transform:translateY(-1px)}
.nav-logo-img{
  width:32px;height:32px;
  image-rendering:pixelated;
  display:block;
}
.nav-logo{
  font-family:var(--display);
  letter-spacing:.04em;
  font-size:18px;
  background:linear-gradient(90deg,var(--neon-green),var(--neon-blue),var(--neon-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav-tag{
  font-family:var(--pixel);
  font-size:8px;
  letter-spacing:.1em;
  color:var(--neon-green);
  padding:6px 10px;
  border:1px solid var(--neon-green);
  border-radius:2px;
}
.nav-menu{display:flex;gap:28px}
.nav-menu a{
  font-family:var(--mono);
  font-size:18px;
  color:#dcdcdc;
  letter-spacing:.06em;
  position:relative;
  transition:color .2s;
}
.nav-menu a:hover{color:var(--neon-green)}
.nav-menu a::after{
  content:"";position:absolute;left:0;bottom:-6px;
  width:0;height:2px;background:var(--neon-green);transition:width .25s ease;
}
.nav-menu a:hover::after{width:100%}
.nav-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);
  font-size:12px;letter-spacing:.1em;
  padding:10px 16px;
  color:#000;background:var(--neon-green);
  border-radius:2px;
  transition:transform .2s, background .2s;
}
.nav-cta:hover{transform:translate(-2px,-2px);background:var(--neon-lime)}
.nav-cta .arrow{font-size:14px}

/* ============ HERO ============ */
.hero{
  position:relative;z-index:1;
  min-height:100vh;
  padding:120px 60px 60px;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  gap:24px;
}

.hero-top{display:flex;justify-content:space-between;align-items:flex-start}
.hero-eyebrow p{
  font-family:var(--display);
  font-size:13px;letter-spacing:.06em;line-height:1.4;
  color:#fff;text-transform:uppercase;
}
.hero-brand-mark{
  font-family:var(--display);
  font-size:26px;letter-spacing:.05em;
  display:flex;align-items:center;gap:6px;
}
.hero-brand-mark .x{color:var(--neon-green)}

/* PLANETS */
.planets{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:-30px;
  margin-top:10px;
}
.planet{
  position:relative;
  width:min(820px,90vw);
  height:200px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 80px rgba(127,255,60,.15);
  margin-top:-30px;
  transform-style:preserve-3d;
}
.planet svg{width:100%;height:100%}
.planet::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.18) 1px,transparent 1px);
  background-size:24px 14px;
  pointer-events:none;mix-blend-mode:overlay;
}
.planet-green{
  background:radial-gradient(circle at 30% 30%,#a6ff5e,#5fd028);
  z-index:3;
  animation:planetBounce 2.8s cubic-bezier(.45,0,.55,1) infinite;
  animation-delay:0s;
}
.planet-blue{
  background:radial-gradient(circle at 30% 30%,#8be7ff,#3fb6e0);
  z-index:2;
  animation:planetBounce 2.8s cubic-bezier(.45,0,.55,1) infinite;
  animation-delay:.25s;
}
.planet-purple{
  background:radial-gradient(circle at 30% 30%,#d7a7ff,#9650dd);
  z-index:1;
  animation:planetBounce 2.8s cubic-bezier(.45,0,.55,1) infinite;
  animation-delay:.5s;
}

@keyframes planetBounce{
  0%, 100% {
    transform:translateY(0) scaleY(1);
  }
  20% {
    transform:translateY(-14px) scaleY(1.02);
  }
  40% {
    transform:translateY(0) scaleY(.98);
  }
  55% {
    transform:translateY(-6px) scaleY(1.01);
  }
  70% {
    transform:translateY(0) scaleY(1);
  }
}

/* pixel text inside planets */
.planet svg text{
  paint-order:stroke;
  text-rendering:geometricPrecision;
}

/* HERO TITLE */
.hero-title-block{
  position:relative;
  text-align:center;
  margin-top:10px;
}
.hero-title{
  font-family:var(--display);
  font-size:clamp(72px,12vw,180px);
  letter-spacing:-.02em;
  line-height:.9;
  background:linear-gradient(
    90deg,
    var(--neon-green) 0%,
    #ffffff 12%,
    var(--neon-blue) 28%,
    var(--neon-purple) 44%,
    #ffffff 56%,
    var(--neon-pink) 72%,
    var(--neon-blue) 86%,
    var(--neon-green) 100%
  );
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 40px rgba(127,255,60,.15));
  animation:rainbowFlow 18s ease-in-out infinite;
}

@keyframes rainbowFlow{
  0%   { background-position:   0% 50%; }
  50%  { background-position: 150% 50%; }
  100% { background-position: 300% 50%; }
}
.hero-subtitle{
  display:inline-flex;gap:18px;
  font-family:var(--mono);font-size:22px;
  letter-spacing:.4em;color:#bdbdbd;
  margin-top:6px;
}
.hero-subtitle .dot{color:var(--neon-green)}
.hero-cross{
  position:absolute;left:50%;top:120%;
  width:140px;height:140px;
  transform:translateX(-50%);
  background:
    linear-gradient(transparent calc(50% - 1px),rgba(255,255,255,.25) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.25) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px));
  background-image:
    repeating-linear-gradient(90deg,#fff 0 4px,transparent 4px 12px);
  -webkit-mask:
    linear-gradient(#000 0 100%) center/2px 100% no-repeat,
    linear-gradient(#000 0 100%) center/100% 2px no-repeat;
          mask:
    linear-gradient(#000 0 100%) center/2px 100% no-repeat,
    linear-gradient(#000 0 100%) center/100% 2px no-repeat;
  opacity:.5;
}

/* HERO BOTTOM */
.hero-bottom{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:40px;
  align-items:start;
  margin-top:60px;
}
.hero-left-info p,
.hero-right-info p{
  font-size:13px;line-height:1.5;color:#cfcfcf;
  margin-bottom:14px;letter-spacing:.02em;
}
.hero-left-info strong,
.hero-right-info strong{
  color:#fff;font-family:var(--display);font-size:14px;letter-spacing:.05em;
}
.hero-right-info{text-align:right}
.hero-disclaimer{color:var(--muted) !important;font-size:11px !important;font-style:italic}

.hero-tag-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px}
.tag-small{
  font-family:var(--pixel);font-size:9px;letter-spacing:.15em;
  padding:8px 14px;border:1px solid var(--neon-green);color:var(--neon-green);
  border-radius:2px;
}
.tag-small.alt{border-color:var(--neon-purple);color:var(--neon-purple)}

/* ============ SECTION 2 : LABS ============ */
.labs-section{
  position:relative;z-index:1;
  padding:140px 60px 100px;
  min-height:100vh;
}
.labs-letters{
  position:absolute;inset:60px 60px auto 60px;
  display:flex;justify-content:space-between;align-items:flex-start;
  pointer-events:none;
  font-family:var(--display);
  color:#fff;
}
.labs-letters .letter{
  font-size:clamp(80px,10vw,160px);
  line-height:1;
  text-shadow:4px 4px 0 #000, 0 0 30px rgba(127,255,60,.12);
}
.labs-letters .letter:nth-child(1){transform:translate(-10px,-20px)}
.labs-letters .letter:nth-child(2){transform:translate(-10px,40px)}
.labs-letters .letter:nth-child(3){transform:translate(40px,-30px)}
.labs-letters .letter:nth-child(4){transform:translate(30px,30px)}

.pixel-confetti{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.pixel-confetti span{
  position:absolute;
  left:var(--x);top:var(--y);
  width:22px;height:22px;
  background:var(--neon-green);
  box-shadow:
    -22px 0 0 var(--neon-green),
    0 -22px 0 var(--neon-green),
    22px 22px 0 var(--neon-green);
  animation:floaty 4s ease-in-out infinite;
  animation-delay:var(--d);
  opacity:.85;
}
.pixel-confetti span:nth-child(odd){background:var(--neon-blue);box-shadow:22px 0 0 var(--neon-blue), 0 22px 0 var(--neon-blue)}
.pixel-confetti span:nth-child(3n){background:var(--neon-purple);box-shadow:-22px 22px 0 var(--neon-purple)}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-12px) rotate(8deg)}
}

.lab-cards{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px;
  max-width:1200px;margin:120px auto 0;
}
.lab-card{
  position:relative;
  border:1.5px solid rgba(255,255,255,.4);
  border-radius:6px;
  overflow:hidden;
  background:#0a0a0a;
  transition:transform .3s ease;
}
.lab-card:hover{transform:translateY(-8px)}
.lc-image{
  position:relative;
  height:280px;background:#2a2a2a;
  overflow:hidden;
}
.lc-image svg{width:100%;height:100%;object-fit:cover}
.lc-image img{
  width:100%;height:100%;
  object-fit:cover;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  display:block;
}
.lc-img-label{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  font-family:var(--pixel);font-size:9px;letter-spacing:.15em;
  background:rgba(0,0,0,.75);padding:5px 10px;border-radius:2px;
  pointer-events:none;white-space:nowrap;
}
.lc-body{padding:22px 22px 28px}
.lc-meta{
  display:flex;justify-content:space-between;
  font-family:var(--pixel);font-size:8px;letter-spacing:.1em;
  padding:6px 10px;border:1px solid currentColor;margin-bottom:14px;width:fit-content;
}
.lc-body h3{
  font-family:var(--display);font-size:32px;letter-spacing:.02em;
  line-height:1;margin-bottom:14px;color:#000;
}
.lc-body p{
  font-family:var(--pixel);font-size:8px;line-height:1.7;
  color:#000;letter-spacing:.05em;
}
.lc-yellow .lc-body{background:var(--neon-yellow)}
.lc-purple .lc-body{background:var(--neon-purple);color:#000}
.lc-blue   .lc-body{background:var(--neon-blue)}

.lc-stack{
  display:flex;justify-content:space-between;align-items:center;
  margin:14px 0 12px;gap:8px;
}
.lc-badge{
  font-family:var(--pixel);font-size:7px;letter-spacing:.1em;
  background:#000;color:#fff;padding:6px 8px;border-radius:2px;
  flex:1;text-align:center;
}
.lc-stars{
  font-family:var(--display);font-size:11px;letter-spacing:.05em;
  color:#000;border:1.5px solid #000;padding:5px 8px;border-radius:2px;
  white-space:nowrap;
}
.lc-foot{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1.5px dashed #000;padding-top:12px;margin-top:4px;
  gap:8px;
}
.lc-tech{
  font-family:var(--pixel);font-size:6.5px;letter-spacing:.1em;
  color:#000;line-height:1.4;
}
.lc-link{
  font-family:var(--display);font-size:11px;letter-spacing:.08em;
  background:#000;color:var(--neon-green);
  padding:8px 12px;border-radius:3px;
  transition:transform .2s, background .2s, color .2s;
  white-space:nowrap;
}
.lc-yellow .lc-link{color:var(--neon-yellow)}
.lc-purple .lc-link{color:var(--neon-purple)}
.lc-blue   .lc-link{color:var(--neon-blue)}
.lc-link:hover{transform:translate(-2px,-2px);background:#fff;color:#000}

.labs-corner-tag{
  position:absolute;left:60px;bottom:30px;
  font-family:var(--pixel);font-size:9px;
  color:var(--neon-green);letter-spacing:.12em;
}

/* ============ POWERED BY OPEN SOURCE STRIP ============ */
.powered-strip{
  position:relative;z-index:1;
  padding:80px 60px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#000 0%,#080808 50%,#000 100%);
}
.ps-heading{
  max-width:780px;margin:0 auto 50px;text-align:center;
}
.ps-label{
  display:inline-block;
  font-family:var(--pixel);font-size:9px;letter-spacing:.2em;
  color:var(--neon-green);
  border:1px solid var(--neon-green);padding:6px 12px;border-radius:2px;
  margin-bottom:20px;
}
.ps-title{
  font-family:var(--display);
  font-size:clamp(32px,5vw,56px);
  line-height:1;letter-spacing:-.02em;
  color:#fff;margin-bottom:18px;
}
.ps-title span{
  background:linear-gradient(90deg,var(--neon-yellow),var(--neon-purple),var(--neon-blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ps-sub{
  font-size:14px;color:#bdbdbd;line-height:1.6;max-width:560px;margin:0 auto;
}

.ps-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:1200px;margin:0 auto 40px;
}
.ps-card{
  display:flex;flex-direction:column;
  padding:24px;border-radius:8px;
  background:#0d0d0d;
  border:1.5px solid rgba(255,255,255,.1);
  color:#fff;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  min-height:260px;
}
.ps-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
}
.ps-card-yellow:hover{border-color:var(--neon-yellow);box-shadow:0 20px 50px rgba(223,255,53,.12)}
.ps-card-purple:hover{border-color:var(--neon-purple);box-shadow:0 20px 50px rgba(185,110,255,.15)}
.ps-card-blue:hover  {border-color:var(--neon-blue);  box-shadow:0 20px 50px rgba(92,217,255,.15)}

.ps-top{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
}
.ps-num{
  font-family:var(--display);font-size:32px;letter-spacing:-.02em;
  color:#fff;line-height:1;
}
.ps-card-yellow .ps-num{color:var(--neon-yellow)}
.ps-card-purple .ps-num{color:var(--neon-purple)}
.ps-card-blue .ps-num{color:var(--neon-blue)}
.ps-star{
  font-family:var(--pixel);font-size:8px;letter-spacing:.1em;
  border:1px solid #555;padding:5px 8px;border-radius:2px;color:#cfcfcf;
}
.ps-card h4{
  font-family:var(--display);font-size:26px;letter-spacing:.02em;
  margin-bottom:12px;color:#fff;
}
.ps-card p{
  font-size:13px;line-height:1.6;color:#a8a8a8;flex:1;margin-bottom:18px;
}
.ps-bottom{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px dashed #2a2a2a;padding-top:14px;gap:10px;
}
.ps-stack{
  font-family:var(--pixel);font-size:7px;letter-spacing:.1em;color:#777;
}
.ps-cta{
  font-family:var(--display);font-size:11px;letter-spacing:.08em;color:#fff;
  white-space:nowrap;
}
.ps-card-yellow .ps-cta{color:var(--neon-yellow)}
.ps-card-purple .ps-cta{color:var(--neon-purple)}
.ps-card-blue .ps-cta{color:var(--neon-blue)}

.ps-marquee{
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;padding:12px 0;
  background:#050505;
  margin:0 -60px;
}
.ps-marquee-track{
  display:flex;gap:40px;white-space:nowrap;
  animation:marquee 25s linear infinite;
  font-family:var(--pixel);font-size:10px;letter-spacing:.18em;color:#666;
}

/* ============ SECTION 3 : DO PIXELS ============ */
.challenges{
  position:relative;z-index:1;
  padding:120px 60px 100px;
}
.challenges-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:24px;
}
.challenges-eyebrow p{
  font-family:var(--display);font-size:12px;line-height:1.5;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;margin-bottom:14px;
}
.challenges-eyebrow .prize{
  color:#bcbcbc;font-family:'Space Grotesk',sans-serif;
  text-transform:none;font-size:12px;letter-spacing:0;
}
.challenges-title{
  font-family:var(--display);
  font-size:clamp(70px,11vw,160px);
  letter-spacing:-.02em;line-height:.9;text-align:center;
  background:linear-gradient(180deg,#fff,#cfcfcf);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ch-sub{
  display:block;text-align:center;margin-top:8px;
  font-family:var(--mono);font-size:22px;color:#bababa;letter-spacing:.5em;
}
.challenges-brand{
  font-family:var(--display);font-size:24px;
  display:flex;justify-content:flex-end;gap:6px;
}
.challenges-brand .x{color:var(--neon-green)}

.challenges-cross{
  width:140px;height:140px;margin:30px auto;
  background:
    repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 14px) center/100% 1.5px no-repeat,
    repeating-linear-gradient(0deg,#fff 0 6px,transparent 6px 14px) center/1.5px 100% no-repeat;
  opacity:.5;
}

.challenges-collab{
  display:flex;align-items:center;justify-content:center;gap:18px;
  font-family:var(--display);font-size:18px;letter-spacing:.05em;color:#fff;
  margin-bottom:50px;
}
.challenges-collab .cx{color:var(--neon-green);font-size:22px}
.challenges-collab .ybm{
  background:var(--neon-purple);color:#000;padding:2px 10px;border-radius:3px;
}
.qr-mock{
  font-family:var(--mono);font-size:14px;line-height:1;
  border:1px solid #fff;padding:8px;color:#fff;
}
.qr-mock.small{font-size:10px;padding:4px;width:fit-content;margin-top:auto}

.challenge-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1200px;margin:0 auto;
}
.ch-card{
  position:relative;
  padding:24px 22px 22px;
  border-radius:14px;
  display:flex;flex-direction:column;
  min-height:580px;
  color:#000;
  transition:transform .3s ease;
}
.ch-card:hover{transform:translateY(-8px)}
.ch-green{background:var(--neon-green)}
.ch-blue{background:var(--neon-blue)}
.ch-purple{background:var(--neon-purple)}
.ch-card header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;
}
.ch-num{
  font-family:var(--pixel);font-size:9px;letter-spacing:.1em;
  border:1.5px solid #000;padding:6px 10px;border-radius:3px;
}
.ch-asterisk{font-size:20px}
.ch-card h3{
  font-family:var(--display);font-size:24px;letter-spacing:.02em;
  border-bottom:2px solid #000;padding-bottom:10px;margin-bottom:14px;
}
.ch-art{
  height:220px;margin:8px 0 18px;
  display:flex;align-items:center;justify-content:center;
}
.ch-art svg{width:80%;height:100%}
.ch-card p{
  font-size:13px;line-height:1.55;margin-bottom:14px;font-weight:500;
}
.ch-card .qr-mock{
  margin-top:auto;align-self:flex-end;
  border-color:#000;color:#000;
}
.ch-tool-tag{
  font-family:var(--pixel);font-size:7.5px;letter-spacing:.1em;
  background:#000;color:#fff;padding:8px 10px;border-radius:3px;
  margin-top:auto;margin-bottom:10px;align-self:flex-start;
}
.ch-green .ch-tool-tag{color:var(--neon-green)}
.ch-blue  .ch-tool-tag{color:var(--neon-blue)}
.ch-purple .ch-tool-tag{color:var(--neon-purple)}

/* ============ SECTION 4 : STUDIO ============ */
.studio{
  position:relative;z-index:1;
  padding:80px 60px 100px;
  background:#000;
}
.pixel-corner{
  position:absolute;width:340px;height:240px;
  pointer-events:none;
}
.pixel-corner-tl{
  top:0;left:0;
  background:
    linear-gradient(#000 0 0) 0 0/100% 60% no-repeat,
    linear-gradient(#000 0 0) 0 100%/40% 30% no-repeat,
    linear-gradient(#000 0 0) 100% 100%/30% 40% no-repeat,
    var(--neon-yellow);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0/100% 100% no-repeat;
  /* big pixel-stair */
  background:
    conic-gradient(from 0deg,
      var(--neon-yellow) 0deg,var(--neon-yellow) 360deg);
}
/* simpler approach: use clip-path pixel stair */
.pixel-corner-tl{
  background:var(--neon-yellow);
  clip-path: polygon(
    0 0, 100% 0, 100% 30%,
    85% 30%, 85% 45%,
    70% 45%, 70% 60%,
    50% 60%, 50% 75%,
    30% 75%, 30% 90%,
    0 90%
  );
}
.pixel-corner-tr{
  top:0;right:0;width:280px;height:200px;
  background:var(--neon-yellow);
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    75% 100%, 75% 85%,
    55% 85%, 55% 70%,
    35% 70%, 35% 55%,
    15% 55%, 15% 30%,
    0 30%
  );
  opacity:.85;
}

.studio-grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:24px;
  margin-top:260px;
  max-width:1280px;margin-left:auto;margin-right:auto;
}
.studio-cell{position:relative;padding:24px;border-radius:6px}
.studio-intro{
  grid-column:1/2;grid-row:1/2;
  text-align:right;
}
.studio-tag{
  font-family:var(--display);font-size:14px;letter-spacing:.1em;
  color:#fff;margin-bottom:6px;
}
.studio-section-num{
  font-family:var(--mono);font-size:18px;color:var(--neon-yellow);
  margin-bottom:18px;
}
.studio-intro p{
  font-size:15px;line-height:1.6;color:#dcdcdc;max-width:480px;margin-left:auto;
}
.sparks{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.sparks .spark{
  width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle,#000 30%,var(--neon-yellow) 31%);
  display:inline-block;
}
.sparks .spark::after{
  content:"✺";display:block;text-align:center;line-height:24px;
  color:var(--neon-yellow);font-size:16px;
}

.studio-founder{
  grid-column:1/2;grid-row:2/3;
  background:var(--neon-yellow);color:#000;
  padding:30px;
  overflow:hidden;
  min-height:380px;
  position:relative;
}
.founder-text{
  display:flex;flex-direction:column;
  font-family:var(--display);font-size:54px;line-height:.95;
  letter-spacing:-.02em;
  -webkit-text-stroke:1.5px #000;color:transparent;
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,.6) 0 2px,
      transparent 2px 6px);
  -webkit-background-clip:text;background-clip:text;
}
.founder-text span{display:block}
.founder-chip{
  position:absolute;left:30px;top:46%;
  background:#000;color:#fff;
  font-family:var(--pixel);font-size:10px;letter-spacing:.08em;line-height:1.6;
  padding:10px 14px;border-radius:3px;
}
.founder-foot{
  position:absolute;left:30px;right:30px;bottom:24px;
  font-size:11px;color:#000;font-weight:600;line-height:1.6;text-align:center;
  border-top:1px solid #000;padding-top:10px;
}

.studio-phone{
  grid-column:2/3;grid-row:1/3;
  background:#1a1a1a;
  min-height:520px;
  border:1.5px solid var(--neon-yellow);
  overflow:hidden;
  position:relative;
}
.phones-arena{
  position:absolute;inset:0;
  overflow:hidden;
}
.arena-tag{
  position:absolute;left:14px;top:14px;
  font-family:var(--pixel);font-size:8px;letter-spacing:.15em;
  color:var(--neon-yellow);
  padding:5px 8px;border:1px solid var(--neon-yellow);border-radius:2px;
  background:rgba(0,0,0,.6);
  z-index:10;pointer-events:none;
}
.phone-mock{
  position:absolute;
  top:0;left:0;
  width:140px;height:260px;
  background:#0a0a0a;
  border:1px solid #444;border-radius:22px;
  padding:10px;
  box-shadow:0 14px 30px rgba(0,0,0,.6);
  will-change:transform;
  transform-origin:center;
}
.phone-screen{
  height:100%;background:var(--neon-yellow);border-radius:16px;
  padding:14px 12px;display:flex;flex-direction:column;
  color:#000;
}
.phone-eyebrow{
  font-family:var(--pixel);font-size:6px;letter-spacing:.1em;margin-bottom:8px;
}
.phone-screen h4{
  font-family:var(--display);font-size:11px;line-height:1.3;letter-spacing:.02em;
  margin-bottom:auto;
}
.phone-btn{
  background:#000;color:var(--neon-yellow);
  border:none;padding:8px;border-radius:14px;
  font-family:var(--display);font-size:9px;letter-spacing:.08em;cursor:pointer;
}
/* color variants */
.phone-yellow .phone-screen{background:var(--neon-yellow)}
.phone-yellow .phone-btn  {color:var(--neon-yellow)}
.phone-green  .phone-screen{background:var(--neon-green)}
.phone-green  .phone-btn  {color:var(--neon-green)}
.phone-purple .phone-screen{background:var(--neon-purple)}
.phone-purple .phone-btn  {color:var(--neon-purple)}

.studio-people{
  grid-column:2/3;
  background:transparent;
  padding-top:12px;
  text-align:right;
}
.studio-people p{
  font-family:var(--display);font-size:13px;letter-spacing:.06em;color:#fff;line-height:1.6;
  max-width:380px;margin-left:auto;text-transform:uppercase;
}

.studio-banner{
  margin-top:30px;
  background:var(--neon-yellow);color:#000;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;border-radius:3px;
  font-family:var(--display);font-size:14px;letter-spacing:.04em;
}
.banner-left{display:flex;align-items:center;gap:10px}
.banner-sub{
  font-family:'Space Grotesk',sans-serif;font-weight:500;
  font-size:12px;letter-spacing:0;margin-left:12px;text-transform:none;
}
.banner-right{display:flex;align-items:center;gap:14px;font-size:12px}
.barcode{font-family:var(--mono);font-size:18px;letter-spacing:-2px}

.studio-stickers{
  position:relative;height:120px;margin-top:30px;
}
.sticker{
  position:absolute;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;font-family:var(--display);font-size:10px;letter-spacing:.05em;
}
.sticker-rainbow{
  left:15%;top:30px;width:60px;height:60px;
  background:conic-gradient(#ff5ed4,#dfff35,#5cd9ff,#b96eff,#ff5ed4);
  color:#000;font-size:22px;
}
.sticker-yellow{
  left:42%;top:10px;width:120px;height:120px;
  background:var(--neon-yellow);color:#000;
  text-align:center;line-height:1.2;padding:14px;
  font-size:9px;
  animation:spin 14s linear infinite;
}
.sticker-portrait{
  right:24%;top:30px;width:60px;height:60px;
  background:
    radial-gradient(circle at 50% 40%,#fff 0 4px,transparent 5px) ,
    conic-gradient(#5cd9ff,#dfff35,#b96eff,#5cd9ff);
}
.sticker-circle{
  right:8%;top:60px;width:140px;height:50px;border-radius:30px;
  background:#0d0d0d;border:1px solid var(--neon-yellow);color:var(--neon-yellow);
  font-size:9px;text-align:center;padding:0 12px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ FOOTER ============ */
.footer{
  position:relative;z-index:1;
  background:#050505;
  border-top:1px solid rgba(255,255,255,.1);
  padding:80px 60px 30px;
}
.footer-top{
  display:grid;grid-template-columns:1.2fr 2fr;gap:60px;
  max-width:1280px;margin:0 auto 50px;
}
.footer-brand-row{
  display:flex;align-items:center;gap:16px;margin-bottom:14px;
}
.footer-logo-img{
  width:60px;height:60px;
  image-rendering:pixelated;
  flex-shrink:0;
}
.footer-logo{
  font-family:var(--display);font-size:48px;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--neon-green),var(--neon-blue),var(--neon-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.footer-tag{
  font-family:var(--pixel);font-size:9px;letter-spacing:.1em;
  color:#9a9a9a;line-height:1.6;
  margin-bottom:22px;
}
.footer-socials{
  display:flex;gap:10px;
}
.footer-social{
  width:42px;height:42px;border-radius:8px;
  background:#0a0a0a;border:1px solid #1f1f1f;
  display:inline-flex;align-items:center;justify-content:center;
  color:#cfcfcf;
  transition:transform .2s, background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.footer-social svg{width:18px;height:18px}
.footer-social:hover{
  transform:translate(-2px,-2px);
  background:#fff;color:#000;border-color:#fff;
  box-shadow:0 8px 20px rgba(127,255,60,.15);
}
.footer-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.fc h5{
  font-family:var(--pixel);font-size:9px;letter-spacing:.15em;
  color:var(--neon-green);margin-bottom:14px;
}
.fc a{
  display:block;font-family:var(--mono);font-size:18px;color:#cfcfcf;
  margin-bottom:6px;transition:color .2s;
}
.fc a:hover{color:var(--neon-green)}

.footer-marquee{
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  background:#0a0a0a;padding:14px 0;overflow:hidden;
  margin:30px -60px;
}
.marquee-track{
  display:flex;gap:50px;white-space:nowrap;
  animation:marquee 30s linear infinite;
  font-family:var(--display);font-size:18px;letter-spacing:.05em;
  color:var(--neon-green);
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.footer-bottom{
  max-width:1280px;margin:30px auto 0;
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:16px;color:#777;letter-spacing:.05em;
}
.ft-mid{color:var(--neon-green)}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .nav-menu{display:none}
  .navbar{padding:14px 18px}
  .hero{padding:100px 20px 40px}
  .hero-top{flex-direction:column;gap:16px}
  .planet{height:140px;margin-top:-20px}
  .hero-bottom{grid-template-columns:1fr;gap:24px}
  .hero-right-info{text-align:left}
  .labs-section,.challenges,.studio{padding:80px 20px}
  .labs-letters{position:relative;inset:auto;justify-content:space-around;margin-bottom:30px}
  .lab-cards,.challenge-cards,.ps-grid{grid-template-columns:1fr;gap:24px}
  .powered-strip{padding:60px 20px}
  .ps-marquee{margin:0 -20px}
  .challenges-top{grid-template-columns:1fr;text-align:center}
  .challenges-eyebrow{text-align:center}
  .studio-grid{grid-template-columns:1fr;margin-top:120px}
  .studio-cell{grid-column:1 !important;grid-row:auto !important}
  .studio-intro,.studio-people{text-align:left}
  .studio-banner{flex-direction:column;gap:10px;text-align:center}
  .footer-top{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .footer-socials{justify-content:flex-start}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
  .pixel-corner{width:160px;height:120px}
  .phone-mock{transform:rotate(0)}
}

/* ============ TOKENOMICS · COMPACT BAR ============ */
.tk-bar-wrap{
  position:relative;z-index:2;
  padding:24px 60px 36px;
  background:#000;
}
.tk-bar{
  display:grid;
  grid-template-columns:auto 1.6fr 1.4fr auto;
  gap:14px;
  align-items:stretch;
  max-width:1200px;margin:0 auto;
  background:#0a0a0a;
  border:1px solid #1f1f1f;
  border-radius:10px;
  padding:14px;
}
.tk-bar-cell{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:6px 14px;
  border-right:1px dashed #1f1f1f;
}
.tk-bar-cell:last-of-type{border-right:none}
.tk-bar-lbl{
  font-family:var(--pixel);font-size:7.5px;letter-spacing:.15em;color:var(--muted);
}
.tk-bar-val{
  font-family:var(--display);font-size:24px;letter-spacing:-.01em;
  background:linear-gradient(90deg,var(--neon-green),var(--neon-yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}

.tk-bar-ca-row{
  display:flex;gap:8px;align-items:center;
}
.tk-bar-ca-row code{
  font-family:var(--mono);font-size:18px;color:var(--neon-blue);
  background:#000;border:1px solid #222;border-radius:4px;
  padding:4px 10px;flex:1;letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tk-bar-copy{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--display);font-size:10px;letter-spacing:.08em;
  background:var(--neon-green);color:#000;
  padding:6px 10px;border-radius:4px;
  cursor:pointer;white-space:nowrap;
  transition:transform .15s, background .15s;
}
.tk-bar-copy:hover{transform:translate(-1px,-1px)}
.tk-bar-copy.copied{background:#fff}

.tk-bar-cd-row{
  display:flex;gap:10px;
  font-family:var(--mono);font-size:14px;color:#bbb;
  align-items:baseline;
}
.tk-bar-cd-row b{
  font-family:var(--display);font-size:20px;color:#fff;font-weight:900;
  font-variant-numeric:tabular-nums;margin-right:2px;
}

.tk-bar-buy{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:13px;letter-spacing:.06em;
  background:var(--neon-yellow);color:#000;
  padding:0 22px;border-radius:8px;
  transition:transform .15s, background .15s;
  white-space:nowrap;
}
.tk-bar-buy:hover{transform:translate(-2px,-2px);background:#fff}
.tk-bar-arrow{font-size:16px}

.tk-bar-status{
  display:block;text-align:center;
  margin-top:10px;
  font-family:var(--pixel);font-size:8px;letter-spacing:.18em;
  color:var(--neon-green);
}

@media (max-width: 900px){
  .tk-bar-wrap{padding:20px}
  .tk-bar{
    grid-template-columns:1fr;gap:8px;
  }
  .tk-bar-cell{border-right:none;border-bottom:1px dashed #1f1f1f;padding:8px}
  .tk-bar-buy{padding:14px}
}

/* ============ TOKENOMICS ============ */
.tokenomics{
  position:relative;z-index:1;
  padding:120px 60px 100px;
  background:
    radial-gradient(circle at 30% 20%, rgba(127,255,60,.07), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(185,110,255,.07), transparent 60%),
    #000;
  overflow:hidden;
}
.tk-bg-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(127,255,60,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(127,255,60,.04) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 70%);
}

.tk-header{
  position:relative;z-index:2;
  text-align:center;max-width:800px;margin:0 auto 60px;
}
.tk-eyebrow{
  display:inline-block;
  font-family:var(--pixel);font-size:9px;letter-spacing:.2em;
  color:var(--neon-green);
  border:1px solid var(--neon-green);padding:6px 12px;border-radius:2px;
  margin-bottom:22px;
}
.tk-title{
  font-family:var(--display);
  font-size:clamp(70px,12vw,160px);
  letter-spacing:-.02em;line-height:.9;
  background:linear-gradient(180deg,#fff 40%,var(--neon-green) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(127,255,60,.15);
}
.tk-title-sub{
  display:block;
  font-size:.18em;
  letter-spacing:.4em;
  color:var(--muted);
  -webkit-text-fill-color:var(--muted);
  margin-top:8px;font-weight:400;
}
.tk-desc{
  font-size:14px;color:#bdbdbd;line-height:1.6;
  max-width:520px;margin:18px auto 0;
}

.tk-grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  gap:18px;
  max-width:1200px;margin:0 auto 50px;
}
.tk-card{
  position:relative;
  background:#0a0a0a;
  border:1.5px solid #1f1f1f;
  border-radius:12px;
  padding:24px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:240px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tk-card:hover{transform:translateY(-4px)}
.tk-card-ticker:hover{border-color:var(--neon-green);box-shadow:0 16px 40px rgba(127,255,60,.1)}
.tk-card-ca:hover    {border-color:#5cd9ff;box-shadow:0 16px 40px rgba(92,217,255,.1)}
.tk-card-buy:hover   {border-color:var(--neon-yellow);box-shadow:0 16px 40px rgba(223,255,53,.12)}

.tk-card-top{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
}
.tk-card-num{
  font-family:var(--display);font-size:24px;color:#fff;letter-spacing:-.02em;
  opacity:.4;
}
.tk-card-pill{
  font-family:var(--pixel);font-size:8px;letter-spacing:.15em;
  background:#1a1a1a;border:1px solid #2a2a2a;color:#cfcfcf;
  padding:6px 10px;border-radius:3px;
}

.tk-ticker-mark{
  font-family:var(--display);font-size:54px;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--neon-green),var(--neon-yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}

.tk-card-foot{
  display:flex;align-items:center;gap:8px;
  font-family:var(--pixel);font-size:8px;letter-spacing:.1em;
  color:#888;border-top:1px dashed #1f1f1f;padding-top:14px;margin-top:14px;
}
.tk-tag-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
}
.tk-tag-on{background:var(--neon-green);box-shadow:0 0 8px var(--neon-green)}
.tk-tag-warn{background:var(--neon-yellow);box-shadow:0 0 8px var(--neon-yellow)}

.tk-ca-row{
  display:flex;gap:8px;align-items:stretch;
  background:#000;border:1px solid #222;border-radius:8px;
  padding:8px;
}
.tk-ca-text{
  flex:1;
  font-family:var(--mono);font-size:22px;letter-spacing:.05em;
  color:#5cd9ff;
  padding:10px 12px;
  background:transparent;
  display:flex;align-items:center;
  user-select:all;-webkit-user-select:all;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tk-copy-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:11px;letter-spacing:.08em;
  background:var(--neon-green);color:#000;
  padding:10px 16px;border-radius:6px;
  cursor:pointer;
  transition:transform .15s, background .15s;
  white-space:nowrap;
}
.tk-copy-btn:hover{transform:translate(-2px,-2px)}
.tk-copy-btn.copied{background:#fff}
.tk-copy-icon{font-size:14px}

.tk-buy-btn{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--display);font-size:18px;letter-spacing:.04em;
  background:var(--neon-yellow);color:#000;
  padding:18px 20px;border-radius:8px;
  transition:transform .15s, background .15s;
}
.tk-buy-btn:hover{transform:translate(-3px,-3px);background:#fff}
.tk-buy-arrow{font-size:22px}

/* ===== COUNTDOWN ===== */
.tk-countdown{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;
  background:linear-gradient(180deg,#0a0a0a,#000);
  border:1.5px solid #1f1f1f;
  border-radius:14px;
  padding:36px 30px;
  text-align:center;
}
.tk-cd-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:28px;flex-wrap:wrap;gap:12px;
}
.tk-cd-label{
  font-family:var(--pixel);font-size:9px;letter-spacing:.2em;
  color:var(--neon-green);
}
.tk-cd-date{
  font-family:var(--display);font-size:14px;letter-spacing:.06em;
  color:#fff;
  background:#1a1a1a;border:1px solid #2a2a2a;
  padding:6px 12px;border-radius:3px;
}

.tk-cd-grid{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:24px;
}
.tk-cd-cell{
  background:#000;border:1.5px solid #222;border-radius:10px;
  padding:18px 24px;min-width:130px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.tk-cd-num{
  font-family:var(--display);font-size:64px;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(180deg,#fff,var(--neon-green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.tk-cd-lbl{
  font-family:var(--pixel);font-size:8px;letter-spacing:.15em;color:var(--muted);
}
.tk-cd-sep{
  font-family:var(--display);font-size:48px;color:var(--neon-green);
  opacity:.5;line-height:1;
}

.tk-cd-foot{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px dashed #1f1f1f;padding-top:18px;
  font-family:var(--mono);font-size:14px;color:#888;letter-spacing:.05em;
  flex-wrap:wrap;gap:10px;
}
.tk-cd-status{color:var(--neon-green)}

@media (max-width: 900px){
  .tokenomics{padding:80px 20px}
  .tk-grid{grid-template-columns:1fr}
  .tk-ca-row{flex-direction:column}
  .tk-ca-text{font-size:18px}
  .tk-cd-grid{flex-wrap:wrap;gap:8px}
  .tk-cd-cell{padding:14px 16px;min-width:110px}
  .tk-cd-num{font-size:44px}
  .tk-cd-sep{display:none}
  .tk-cd-head,.tk-cd-foot{flex-direction:column;text-align:center}
}

/* ============ PLANET ANIMATIONS ============ */
/* All SVG groups use transform — work fine inside the bouncing planet wrapper. */

/* ---------- GREEN: Muncher chomp + move + pellets eaten ---------- */
.anim-green .muncher{
  animation: muncherMove 7s linear infinite;
  transform-box: fill-box;
}
@keyframes muncherMove{
  0%   { transform: translate(120px, 95px); }
  100% { transform: translate(810px, 95px); }
}
.anim-green .mouth-open{
  animation: chompA 0.32s steps(1) infinite;
}
.anim-green .mouth-closed{
  animation: chompB 0.32s steps(1) infinite;
}
@keyframes chompA{
  0%, 49%  { opacity: 1; }
  50%, 100%{ opacity: 0; }
}
@keyframes chompB{
  0%, 49%  { opacity: 0; }
  50%, 100%{ opacity: 1; }
}
/* pellets disappear in sequence as muncher passes (7s loop) */
.anim-green .pl{ transform-box: fill-box; }
.anim-green .pg1{ animation: eat1 7s linear infinite; }
.anim-green .pg2{ animation: eat2 7s linear infinite; }
.anim-green .pg3{ animation: eat3 7s linear infinite; }
.anim-green .pg4{ animation: eat4 7s linear infinite; }
.anim-green .pg5{ animation: eat5 7s linear infinite; }
.anim-green .pg6{ animation: eat6 7s linear infinite; }
.anim-green .pg7{ animation: eat7 7s linear infinite; }
.anim-green .pg8{ animation: eat8 7s linear infinite; }
@keyframes eat1{ 0%,11%{opacity:1} 13%,100%{opacity:0} }
@keyframes eat2{ 0%,24%{opacity:1} 26%,100%{opacity:0} }
@keyframes eat3{ 0%,37%{opacity:1} 39%,100%{opacity:0} }
@keyframes eat4{ 0%,50%{opacity:1} 52%,100%{opacity:0} }
@keyframes eat5{ 0%,63%{opacity:1} 65%,100%{opacity:0} }
@keyframes eat6{ 0%,76%{opacity:1} 78%,100%{opacity:0} }
@keyframes eat7{ 0%,89%{opacity:1} 91%,100%{opacity:0} }
@keyframes eat8{ 0%,96%{opacity:1} 98%,100%{opacity:0} }

/* ---------- BLUE: Tank fires bullets + target explodes ---------- */
.anim-blue .tank{
  transform: translate(40px, 130px);
  animation: tankBob 0.5s ease-in-out infinite alternate;
  transform-box: fill-box;
}
@keyframes tankBob{
  0%   { transform: translate(40px, 130px); }
  100% { transform: translate(40px, 132px); }
}
/* muzzle flash near cannon tip — sync with bullet spawn */
.anim-blue .muzzle{
  transform: translate(40px, 138px);
  opacity: 0;
  animation: muzzleFlash 1.4s steps(1) infinite;
}
@keyframes muzzleFlash{
  0%   { opacity: 1; }
  10%  { opacity: 0; }
  100% { opacity: 0; }
}
/* 3 bullets staggered, fly right from cannon to target */
.anim-blue .bullet{
  transform-box: fill-box;
  opacity: 0;
}
.anim-blue .b1{ animation: bullet 1.4s linear infinite; animation-delay: 0s; }
.anim-blue .b2{ animation: bullet 1.4s linear infinite; animation-delay: .47s; }
.anim-blue .b3{ animation: bullet 1.4s linear infinite; animation-delay: .93s; }
@keyframes bullet{
  0%   { transform: translate(230px, 146px); opacity: 1; }
  85%  { transform: translate(800px, 146px); opacity: 1; }
  86%, 100% { opacity: 0; }
}
/* target on right (stays in place, gets hit) */
.anim-blue .target{
  transform: translate(820px, 116px);
  animation: targetShake 1.4s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes targetShake{
  0%, 84%  { transform: translate(820px, 116px); }
  85%      { transform: translate(823px, 116px); }
  88%      { transform: translate(817px, 116px); }
  92%      { transform: translate(821px, 116px); }
  100%     { transform: translate(820px, 116px); }
}
/* explosion appears briefly when bullet hits */
.anim-blue .boom{
  transform: translate(805px, 110px);
  opacity: 0;
  animation: boomFlash 1.4s steps(1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes boomFlash{
  0%, 84% { opacity: 0; }
  85%, 92%{ opacity: 1; }
  93%, 100%{ opacity: 0; }
}

/* ---------- PURPLE: UFO + beam + meteors + twinkling + rocket ---------- */
.anim-purple .ufo{
  animation: ufoFloat 9s ease-in-out infinite alternate;
  transform-box: fill-box;
}
@keyframes ufoFloat{
  0%   { transform: translate(60px, 30px); }
  25%  { transform: translate(280px, 50px); }
  50%  { transform: translate(450px, 28px); }
  75%  { transform: translate(640px, 52px); }
  100% { transform: translate(800px, 32px); }
}
.anim-purple .beam{
  animation: ufoFloat 9s ease-in-out infinite alternate, beamPulse 1.6s ease-in-out infinite;
  transform-box: fill-box;
}
@keyframes beamPulse{
  0%, 100% { opacity: .9; }
  50%      { opacity: .4; }
}
/* meteors falling diagonally */
.anim-purple .meteor{
  transform-box: fill-box;
  opacity: 0;
}
.anim-purple .m1{ animation: meteor1 3s linear infinite; animation-delay: 0s; }
.anim-purple .m2{ animation: meteor2 3s linear infinite; animation-delay: 1s; }
.anim-purple .m3{ animation: meteor3 3s linear infinite; animation-delay: 2s; }
@keyframes meteor1{
  0%   { transform: translate(140px, -30px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(60px, 240px); opacity: 0; }
}
@keyframes meteor2{
  0%   { transform: translate(440px, -30px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(360px, 240px); opacity: 0; }
}
@keyframes meteor3{
  0%   { transform: translate(720px, -30px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(640px, 240px); opacity: 0; }
}
/* twinkling stars: positioned + pulsing */
.anim-purple .tw{ transform-box: fill-box; opacity: .25; }
.anim-purple .tw1{ transform: translate(80px, 60px);  animation: tw 1.4s ease-in-out infinite; }
.anim-purple .tw2{ transform: translate(220px, 200px); animation: tw 1.7s ease-in-out infinite; animation-delay: .3s; }
.anim-purple .tw3{ transform: translate(380px, 80px);  animation: tw 1.2s ease-in-out infinite; animation-delay: .6s; }
.anim-purple .tw4{ transform: translate(560px, 210px); animation: tw 1.8s ease-in-out infinite; animation-delay: .9s; }
.anim-purple .tw5{ transform: translate(700px, 70px);  animation: tw 1.5s ease-in-out infinite; animation-delay: 1.1s; }
.anim-purple .tw6{ transform: translate(840px, 180px); animation: tw 1.3s ease-in-out infinite; animation-delay: .4s; }
@keyframes tw{
  0%, 100% { opacity: .2; transform-origin: center; }
  50%      { opacity: 1; }
}
/* rocket launching upward, loops */
.anim-purple .rocket{
  transform-box: fill-box;
  animation: rocketLaunch 4s ease-in infinite;
}
@keyframes rocketLaunch{
  0%   { transform: translate(120px, 250px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; transform: translate(140px, -50px); }
  100% { opacity: 0; transform: translate(140px, -80px); }
}
.anim-purple .flame{
  animation: flame 0.15s steps(1) infinite alternate;
  transform-box: fill-box;
}
@keyframes flame{
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: .6; transform: translate(0, 2px); }
}

/* ============ NAV $TRIX ============ */
.nav-trix{
  display:inline-flex;align-items:center;gap:7px;
}
.trix-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--neon-pink);
  box-shadow:0 0 8px var(--neon-pink);
  animation:liveDot 1.1s ease-in-out infinite;
}
@keyframes liveDot{
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* ============ MODAL SYSTEM ============ */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:fadeIn .25s ease-out;
}
.modal-overlay[hidden]{display:none}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
.modal{
  position:relative;
  background:linear-gradient(160deg,#0a0a0a,#050505);
  border:1.5px solid #2a2a2a;
  border-radius:14px;
  width:100%;max-width:780px;
  padding:40px 36px 32px;
  max-height:90vh;overflow-y:auto;
  animation:modalIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn{
  from{opacity:0;transform:translateY(20px) scale(.96)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
.modal-x{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:6px;
  background:transparent;color:#888;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s, color .15s;
}
.modal-x:hover{background:#1a1a1a;color:#fff}
.modal-logo{
  width:56px;height:56px;
  image-rendering:pixelated;
  display:block;margin-bottom:14px;
}
.modal-tag{
  display:inline-block;
  font-family:var(--pixel);font-size:8px;letter-spacing:.18em;
  color:var(--neon-green);
  border:1px solid var(--neon-green);padding:5px 10px;border-radius:2px;
  margin-bottom:18px;
}
.modal-title{
  font-family:var(--display);font-size:30px;letter-spacing:-.01em;
  background:linear-gradient(90deg,#fff,var(--neon-green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:8px;
}
.modal-sub{color:#bdbdbd;font-size:14px;margin-bottom:28px}

/* dash options */
.dash-options{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
}
.dash-opt{
  background:#0d0d0d;border:1.5px solid #1f1f1f;
  border-radius:10px;padding:0;overflow:hidden;
  text-align:left;cursor:pointer;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.dash-opt:hover{transform:translateY(-4px)}
.opt-pixelorama:hover{border-color:var(--neon-green); box-shadow:0 14px 32px rgba(127,255,60,.14)}
.opt-studio:hover    {border-color:var(--neon-purple);box-shadow:0 14px 32px rgba(185,110,255,.14)}
.opt-pyxelate:hover  {border-color:var(--neon-blue);  box-shadow:0 14px 32px rgba(92,217,255,.14)}

.opt-preview{
  height:90px;display:flex;flex-direction:column;justify-content:space-between;
  padding:12px;position:relative;overflow:hidden;
}
/* Pixelorama editor preview (canvas + tools) */
.prev-pixelorama{background:linear-gradient(135deg,#0a1a0d,#1a2a1a)}
.prev-pixelorama .prev-bar{height:5px;background:var(--neon-green);border-radius:2px;width:60%;box-shadow:0 0 8px var(--neon-green)}
.prev-pixelorama .prev-grid{display:flex;gap:4px}
.prev-pixelorama .prev-grid span{flex:1;height:30px;background:#0d0d0d;border:1px solid #1f3a1f;border-radius:2px}
.prev-pixelorama .prev-grid span:nth-child(2){background:repeating-linear-gradient(45deg,#1a3a1a 0 3px,#0d2a0d 3px 6px);border-color:var(--neon-green)}

/* Pixel Studio agent preview (chat bubbles) */
.prev-studio{background:linear-gradient(135deg,#1a0d2a,#2a1a4a)}
.prev-studio .prev-bar{height:5px;background:var(--neon-purple);border-radius:2px;width:75%;box-shadow:0 0 8px var(--neon-purple)}
.prev-studio .prev-grid{display:flex;gap:4px;flex-direction:column}
.prev-studio .prev-grid span{height:7px;background:#2a1a3a;border-radius:14px}
.prev-studio .prev-grid span:nth-child(1){background:var(--neon-purple);width:55%;align-self:flex-start}
.prev-studio .prev-grid span:nth-child(2){width:75%;align-self:flex-end;background:#3a2a4a}
.prev-studio .prev-grid span:nth-child(3){background:var(--neon-purple);width:40%;align-self:flex-start;opacity:.6}

/* Pyxelate converter preview (image before/after) */
.prev-pyxelate{background:linear-gradient(135deg,#0a1a2a,#1a2a3a)}
.prev-pyxelate .prev-bar{height:5px;background:var(--neon-blue);border-radius:2px;width:50%;box-shadow:0 0 8px var(--neon-blue)}
.prev-pyxelate .prev-grid{display:flex;gap:4px}
.prev-pyxelate .prev-grid span{flex:1;height:30px;border-radius:2px}
.prev-pyxelate .prev-grid span:nth-child(1){background:linear-gradient(135deg,#3aaadd,#2a8acc)}
.prev-pyxelate .prev-grid span:nth-child(2){
  background:
    linear-gradient(45deg,var(--neon-blue) 25%,transparent 25%) 0 0/8px 8px,
    linear-gradient(-45deg,var(--neon-blue) 25%,transparent 25%) 0 0/8px 8px,
    #1a2a3a;
}
.prev-pyxelate .prev-grid span:nth-child(3){background:#1a2a3a;border:1px solid var(--neon-blue)}

.opt-info{padding:14px 14px 16px;display:flex;flex-direction:column;gap:4px;position:relative}
.opt-num{
  font-family:var(--pixel);font-size:8px;letter-spacing:.15em;color:var(--muted);
}
.opt-info h3{
  font-family:var(--display);font-size:18px;letter-spacing:.02em;margin:2px 0 0;color:#fff;
}
.opt-stars{
  position:absolute;right:14px;top:14px;
  font-family:var(--pixel);font-size:7px;letter-spacing:.1em;
  border:1px solid #2a2a2a;padding:4px 6px;border-radius:2px;color:#cfcfcf;
}
.opt-pixelorama .opt-stars{color:var(--neon-green);border-color:rgba(127,255,60,.4)}
.opt-studio .opt-stars    {color:var(--neon-purple);border-color:rgba(185,110,255,.4)}
.opt-pyxelate .opt-stars  {color:var(--neon-blue);border-color:rgba(92,217,255,.4)}
.opt-info p{font-size:11px;color:#aaa;margin:4px 0 6px;line-height:1.5}
.opt-meta{
  font-family:var(--pixel);font-size:7px;letter-spacing:.1em;color:var(--muted);
  margin-bottom:8px;
}
.opt-cta{
  font-family:var(--display);font-size:10px;letter-spacing:.08em;
  color:var(--neon-green);margin-top:auto;
}
.opt-studio .opt-cta   {color:var(--neon-purple)}
.opt-pyxelate .opt-cta {color:var(--neon-blue)}

/* login modal */
.modal-login{max-width:440px}
.login-form{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.login-row{display:flex;flex-direction:column;gap:6px}
.login-lbl{
  font-family:var(--pixel);font-size:8px;letter-spacing:.15em;color:var(--muted);
}
.login-row input{
  background:#0a0a0a;border:1px solid #2a2a2a;
  padding:12px 14px;border-radius:6px;
  font-family:'Space Grotesk',sans-serif;font-size:14px;color:#fff;
  outline:none;transition:border-color .15s;
}
.login-row input:focus{border-color:var(--neon-green)}
.login-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-size:13px;letter-spacing:.06em;
  background:var(--neon-green);color:#000;
  padding:14px;border-radius:6px;cursor:pointer;
  transition:transform .15s, background .15s;
  margin-top:4px;
}
.login-btn:hover{transform:translate(-2px,-2px);background:#fff}
.login-note{
  font-size:12px;color:var(--muted);text-align:center;
  padding:4px 8px;margin:2px 0;line-height:1.5;
}
.form-error{
  display:none;
  background:rgba(255,80,80,.08);
  border:1px solid rgba(255,80,80,.3);
  color:#ff7070;
  padding:10px 14px;border-radius:6px;
  font-size:12.5px;line-height:1.4;
  margin-bottom:14px;
  font-family:'Space Grotesk',sans-serif;
}
.login-foot{
  text-align:center;font-size:12px;color:#aaa;margin-bottom:18px;
}
.login-foot a{color:var(--neon-green)}
.login-foot a:hover{text-decoration:underline}
.login-sep{margin:0 8px;color:#444}

.login-divider{
  display:flex;align-items:center;gap:10px;
  font-family:var(--pixel);font-size:8px;letter-spacing:.2em;color:var(--muted);
  margin:16px 0;
}
.login-divider::before, .login-divider::after{
  content:"";flex:1;height:1px;background:#222;
}

.login-social{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  background:#0a0a0a;border:1px solid #2a2a2a;color:#cfcfcf;
  padding:11px;border-radius:6px;font-size:13px;
  margin-bottom:8px;
  transition:background .15s, border-color .15s, color .15s;
}
.login-social:hover{background:#141414;border-color:var(--neon-green);color:#fff}
.login-social span{font-size:16px;color:var(--neon-green)}

/* ===== OTP MODAL ===== */
.modal-otp{max-width:480px}
.otp-form{margin-bottom:18px}
.otp-inputs{
  display:flex;align-items:center;justify-content:center;
  gap:8px;margin:20px 0 8px;
}
.otp-input{
  width:48px;height:58px;
  text-align:center;
  font-family:var(--display);font-size:26px;
  background:#0a0a0a;border:1.5px solid #2a2a2a;
  border-radius:8px;color:#fff;outline:none;
  transition:border-color .15s, background .15s, transform .1s;
}
.otp-input:focus{
  border-color:var(--neon-green);background:#101410;
  transform:translateY(-2px);
}
.otp-input:valid{border-color:rgba(127,255,60,.4)}
.otp-sep{color:#444;font-size:18px;padding:0 2px}
.otp-hint{
  text-align:center;font-family:var(--pixel);font-size:8px;
  letter-spacing:.15em;color:var(--muted);margin:10px 0 18px;
  transition:color .2s;
}
.otp-timer{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-top:14px;
  font-family:var(--pixel);font-size:8px;letter-spacing:.15em;color:var(--muted);
  padding-top:14px;border-top:1px dashed #1f1f1f;
}
.otp-timer-v{
  color:var(--neon-yellow);font-family:var(--mono);font-size:16px;letter-spacing:.05em;
}

@media (max-width:780px){
  .dash-options{grid-template-columns:1fr}
  .modal{padding:30px 22px 24px}
  .modal-title{font-size:24px}
}