@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;800&family=Share+Tech+Mono&display=swap');

:root {
  --bg-color: #050505;
  --bg-surface: #111111;
  --text-main: #f0f0f0;
  --text-muted: #888888;
  --neon-cyan: #00f3ff;
  --neon-magenta: #ff00ff;
  --neon-yellow: #fcee0a;
  --container-width: 1000px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Share Tech Mono', monospace; text-transform: uppercase; letter-spacing: 2px; }
a { color: var(--neon-cyan); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: var(--neon-magenta); text-shadow: 0 0 10px var(--neon-magenta); }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
.text-cyan { color: var(--neon-cyan); }
.text-magenta { color: var(--neon-magenta); }

/* Glitch Effect */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color);
}
.glitch::before {
  left: 2px; text-shadow: -2px 0 var(--neon-magenta); clip: rect(24px, 550px, 90px, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
.glitch::after {
  left: -2px; text-shadow: -2px 0 var(--neon-cyan); clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim { 0% { clip: rect(4px, 9999px, 83px, 0); } 100% { clip: rect(100px, 9999px, 110px, 0); } }
@keyframes glitch-anim-2 { 0% { clip: rect(65px, 9999px, 100px, 0); } 100% { clip: rect(50px, 9999px, 2px, 0); } }

/* Neon Box */
.neon-box {
  background: var(--bg-surface);
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.2), inset 0 0 10px rgba(0, 243, 255, 0.1);
  padding: 2rem;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  transition: all 0.3s ease;
}
.neon-box:hover { box-shadow: 0 0 20px rgba(0, 243, 255, 0.4); transform: translateY(-3px); }
.neon-box.magenta { border-color: var(--neon-magenta); box-shadow: 0 0 10px rgba(255, 0, 255, 0.2); }

/* Post Card */
.post-card {
  display: block;
  background: rgba(17,17,17,0.8);
  border-left: 3px solid var(--neon-cyan);
  padding: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-main);
  transition: all 0.3s;
}
.post-card:hover { background: rgba(0, 243, 255, 0.1); border-left-width: 6px; }
.post-card h3 { color: var(--text-main); margin-bottom: 0.5rem; font-size: 1.2rem; }
.post-card .date { font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; color: var(--text-muted); }

/* Grid */
.cyber-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }