@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@400;700&display=swap');

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

:root{
  --green:#4ade80;
  --green-dim:#166534;
  --red:#ef4444;
  --amber:#f59e0b;
  --bg:#0a0a0a;
  --card:#111111;
  --border:#222222;
  --text:#e4e4e7;
  --text-dim:#71717a;
}

html{font-size:16px}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);
  pointer-events:none;
  z-index:1000;
}

#particles{position:fixed;inset:0;z-index:0}

.container{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
  gap:3rem;
}

/* Logo */

.logo-wrap{text-align:center;position:relative}

.glitch{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(1.4rem,5vw,2.8rem);
  color:var(--green);
  letter-spacing:.05em;
  position:relative;
  display:inline-block;
  text-shadow:0 0 10px rgba(74,222,128,.5),0 0 40px rgba(74,222,128,.2);
  animation:glitchMain 6s infinite;
}

.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
}

.glitch::before{
  left:2px;
  text-shadow:-2px 0 #ef4444;
  clip:rect(44px,9999px,56px,0);
  animation:glitchTop 8s infinite linear alternate-reverse,glitchBurst1 6s infinite;
}

.glitch::after{
  left:-2px;
  text-shadow:2px 0 #3b82f6;
  clip:rect(12px,9999px,24px,0);
  animation:glitchBottom 7s infinite linear alternate-reverse,glitchBurst2 6s infinite;
}

@keyframes glitchTop{
  0%  {clip:rect(2px,9999px,16px,0);transform:skew(.4deg)}
  5%  {clip:rect(28px,9999px,42px,0);transform:skew(.8deg)}
  10% {clip:rect(8px,9999px,20px,0);transform:skew(-.3deg)}
  15% {clip:rect(36px,9999px,52px,0);transform:skew(.5deg)}
  20% {clip:rect(4px,9999px,14px,0);transform:skew(-.7deg)}
  25% {clip:rect(22px,9999px,38px,0);transform:skew(.2deg)}
  30% {clip:rect(44px,9999px,56px,0);transform:skew(.9deg)}
  35% {clip:rect(10px,9999px,26px,0);transform:skew(-.4deg)}
  40% {clip:rect(32px,9999px,48px,0);transform:skew(.6deg)}
  45% {clip:rect(0px,9999px,12px,0);transform:skew(-.2deg)}
  50% {clip:rect(18px,9999px,34px,0);transform:skew(.3deg)}
  55% {clip:rect(40px,9999px,54px,0);transform:skew(-.8deg)}
  60% {clip:rect(6px,9999px,22px,0);transform:skew(.1deg)}
  65% {clip:rect(26px,9999px,40px,0);transform:skew(.7deg)}
  70% {clip:rect(14px,9999px,28px,0);transform:skew(-.5deg)}
  75% {clip:rect(38px,9999px,50px,0);transform:skew(.4deg)}
  80% {clip:rect(2px,9999px,18px,0);transform:skew(-.6deg)}
  85% {clip:rect(30px,9999px,44px,0);transform:skew(.3deg)}
  90% {clip:rect(12px,9999px,24px,0);transform:skew(-.1deg)}
  95% {clip:rect(42px,9999px,56px,0);transform:skew(.5deg)}
  100%{clip:rect(20px,9999px,36px,0);transform:skew(-.3deg)}
}

@keyframes glitchBottom{
  0%  {clip:rect(24px,9999px,36px,0);transform:skew(-.5deg)}
  5%  {clip:rect(4px,9999px,18px,0);transform:skew(.3deg)}
  10% {clip:rect(38px,9999px,52px,0);transform:skew(.7deg)}
  15% {clip:rect(14px,9999px,28px,0);transform:skew(-.4deg)}
  20% {clip:rect(42px,9999px,56px,0);transform:skew(.2deg)}
  25% {clip:rect(8px,9999px,22px,0);transform:skew(-.8deg)}
  30% {clip:rect(30px,9999px,46px,0);transform:skew(.6deg)}
  35% {clip:rect(0px,9999px,14px,0);transform:skew(-.2deg)}
  40% {clip:rect(34px,9999px,48px,0);transform:skew(.4deg)}
  45% {clip:rect(16px,9999px,30px,0);transform:skew(-.6deg)}
  50% {clip:rect(44px,9999px,56px,0);transform:skew(.1deg)}
  55% {clip:rect(6px,9999px,20px,0);transform:skew(.9deg)}
  60% {clip:rect(26px,9999px,42px,0);transform:skew(-.3deg)}
  65% {clip:rect(10px,9999px,24px,0);transform:skew(.5deg)}
  70% {clip:rect(36px,9999px,50px,0);transform:skew(-.7deg)}
  75% {clip:rect(2px,9999px,16px,0);transform:skew(.8deg)}
  80% {clip:rect(40px,9999px,54px,0);transform:skew(-.1deg)}
  85% {clip:rect(20px,9999px,34px,0);transform:skew(.3deg)}
  90% {clip:rect(32px,9999px,46px,0);transform:skew(-.4deg)}
  95% {clip:rect(12px,9999px,26px,0);transform:skew(.6deg)}
  100%{clip:rect(22px,9999px,38px,0);transform:skew(-.5deg)}
}

@keyframes glitchBurst1{
  0%,100%{transform:translate(0)}
  42%{transform:translate(0)}
  43%{transform:translate(-4px,0)}
  44%{transform:translate(3px,0)}
  45%{transform:translate(-2px,0)}
  46%{transform:translate(0)}
  80%{transform:translate(0)}
  81%{transform:translate(5px,0)}
  82%{transform:translate(-3px,0)}
  83%{transform:translate(2px,0)}
  84%{transform:translate(0)}
}

@keyframes glitchBurst2{
  0%,100%{transform:translate(0)}
  44%{transform:translate(0)}
  45%{transform:translate(4px,0)}
  46%{transform:translate(-5px,0)}
  47%{transform:translate(2px,0)}
  48%{transform:translate(0)}
  82%{transform:translate(0)}
  83%{transform:translate(-4px,0)}
  84%{transform:translate(3px,0)}
  85%{transform:translate(0)}
}

@keyframes glitchMain{
  0%,100%{transform:translate(0);text-shadow:0 0 10px rgba(74,222,128,.5),0 0 40px rgba(74,222,128,.2)}
  43%{transform:translate(0);text-shadow:0 0 10px rgba(74,222,128,.5),0 0 40px rgba(74,222,128,.2)}
  43.5%{transform:translate(2px,0);text-shadow:-2px 0 var(--red),2px 0 #3b82f6,0 0 10px rgba(74,222,128,.5)}
  44.5%{transform:translate(-1px,0);text-shadow:1px 0 var(--red),-1px 0 #3b82f6,0 0 10px rgba(74,222,128,.5)}
  45.5%{transform:translate(0);text-shadow:0 0 10px rgba(74,222,128,.5),0 0 40px rgba(74,222,128,.2)}
  81%{transform:translate(0);text-shadow:0 0 10px rgba(74,222,128,.5),0 0 40px rgba(74,222,128,.2)}
  81.5%{transform:translate(-2px,0);text-shadow:2px 0 var(--red),-2px 0 #3b82f6,0 0 10px rgba(74,222,128,.5)}
  82.5%{transform:translate(1px,0);text-shadow:-1px 0 var(--red),1px 0 #3b82f6,0 0 10px rgba(74,222,128,.5)}
  83.5%{transform:translate(0);text-shadow:0 0 10px rgba(74,222,128,.5),0 0 40px rgba(74,222,128,.2)}
}

/* Cards */

.cards{
  display:flex;
  gap:1.5rem;
  flex-wrap:nowrap;
  justify-content:center;
  max-width:1200px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:2.5rem 2.2rem;
  width:340px;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  transition:border-color .3s,transform .3s;
}

.card:hover{
  border-color:var(--green-dim);
  transform:translateY(-4px);
}

.card--dim{
  opacity:.6;
}

.card--dim:hover{
  opacity:.8;
}

.card-header{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.card-icon{
  font-size:2rem;
}

.card-title{
  font-family:'Press Start 2P',monospace;
  font-size:1rem;
  color:var(--green);
  flex:1;
}

.status-dot{
  width:10px;height:10px;
  border-radius:50%;
  flex-shrink:0;
}

.status-dot.online{
  background:var(--green);
  box-shadow:0 0 6px var(--green);
  animation:pulse 2s infinite;
}

.status-dot.wip{
  background:var(--amber);
  animation:pulse 2s infinite;
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.card-desc{
  font-size:.9rem;
  color:var(--text-dim);
  line-height:1.6;
  flex:1;
}

.btn{
  display:inline-block;
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:.85rem;
  font-weight:700;
  color:var(--bg);
  background:var(--green);
  border:none;
  border-radius:6px;
  padding:.85rem 1.4rem;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .2s,transform .2s;
}

.btn:hover{
  opacity:.85;
  transform:translateY(-1px);
}

.btn--outline{
  background:transparent;
  color:var(--green);
  border:1px solid var(--green);
}

.card-buttons{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.card-buttons-row{
  display:flex;
  gap:.6rem;
}

.card-buttons-row .btn{
  flex:1;
}

.btn--disabled{
  background:var(--border);
  color:var(--text-dim);
  cursor:default;
  pointer-events:none;
}

/* Footer */

.footer{font-size:.65rem;color:var(--text-dim);text-align:center;letter-spacing:.1em}

.footer a{color:var(--green);text-decoration:none;transition:opacity .2s}

.footer a:hover{opacity:.7}

@media(max-width:768px){
  .cards{flex-direction:column;align-items:center;flex-wrap:wrap}
  .card{width:100%;max-width:340px}
}