/* Retro 80s Cyber Theme for Lackadaisical Image Secure Converter */

/* Base styling and variables */
:root {
  --bg-dark: #0b0614;
  --bg-panel: #12051a;
  --text-primary: #f2f2ff;
  --text-secondary: #b4a0ff;
  --neon-magenta: #ff0099;
  --neon-blue: #00c3ff;
  --neon-purple: #d417ff;
  --neon-cyan: #00ffdb;
  --neon-yellow: #ffdf22;
  --accent: #ff2975;
  --border: #2d4263;
  --shadow: rgba(255, 0, 153, 0.4);
  --grid-color: rgba(255, 0, 255, 0.2);
}

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

@font-face {
  font-family: 'Lazer84';
  src: url('../fonts/Lazer84.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'VCR OSD Mono';
  src: url('../fonts/VCROSDMono.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'VCR OSD Mono', 'Rajdhani', monospace;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  letter-spacing: 1px;
}

/* CRT and Scanline effects */
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 3px;
  opacity: 0.7;
  animation: scanlines 8s linear infinite;
}

.crt-flicker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.05;
  animation: flicker 8s infinite ease-in-out;
}

/* Enhanced Animated background elements */
.cyber-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #1b0a2a 0%, #090613 100%);
}

.grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.25;
  animation: gridMove 30s infinite linear;
  transform-origin: center;
  transform: perspective(1000px) rotateX(60deg) scale(2, 1.5) translateY(10%);
  transform-style: preserve-3d;
}

.circuit-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 50%, rgba(255, 0, 195, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 20%, rgba(0, 255, 255, 0.2) 0%, transparent 50%);
  animation: colorPulse 8s infinite alternate;
}

.glow-orbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glow-orbs::before, .glow-orbs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.1; /* Reduced opacity from 0.5 */
  animation: float 20s infinite alternate ease-in-out, colorChange 15s infinite ease-in-out;
}

.glow-orbs::before {
  width: 100px; /* Reduced size from 300px */
  height: 100px; /* Reduced size from 300px */
  background-color: var(--neon-magenta, #ff00aa); /* Add fallback color */
  top: 10%;
  left: 15%;
}

.glow-orbs::after {
  width: 80px; /* Reduced size from 250px */
  height: 80px; /* Reduced size from 250px */
  background-color: var(--neon-cyan, #00ffff); /* Add fallback color */
  bottom: 15%;
  right: 10%;
  animation: float 25s infinite alternate ease-in-out, colorChange 18s infinite ease-in-out reverse;
}

.sunset-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(0deg, #ff2285 0%, transparent 100%);
  opacity: 0.3;
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.star {
  position: absolute;
  background-color: #fff;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 3s infinite alternate ease-in-out;
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Main container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  z-index: 1;
  color: var(--light-text, #e2fcff); /* Ensure base text is visible */
}

/* Additional animations for cyber theme consistency */
@keyframes gridMove {
  0% { transform: perspective(1000px) rotateX(60deg) scale(2, 1.5) translateY(10%) translateZ(0); }
  100% { transform: perspective(1000px) rotateX(60deg) scale(2, 1.5) translateY(10%) translateZ(-50px); }
}

@keyframes colorPulse {
  0% { opacity: 0.15; }
  50% { opacity: 0.25; }
  100% { opacity: 0.15; }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

@keyframes colorChange {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Particle animations */
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: var(--neon-cyan, #00ffff);
  border-radius: 50%;
  opacity: 0.7;
  box-shadow: 0 0 8px var(--neon-cyan, #00ffff);
  animation: floatParticle 20s infinite ease-in-out;
  z-index: -1;
}

@keyframes floatParticle {
  0% { transform: translate(0, 0); }
  25% { transform: translate(20px, 10px); }
  50% { transform: translate(10px, 30px); }
  75% { transform: translate(-10px, 20px); }
  100% { transform: translate(0, 0); }
}

/* Data stream animation */
.stream {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, 
      rgba(0, 195, 255, 0), 
      rgba(0, 195, 255, 0.7), 
      rgba(0, 195, 255, 0));
  animation: streamFlow 25s linear infinite;
  opacity: 0.4;
}

@keyframes streamFlow {
  from { transform: translateY(-100%); }
  to { transform: translateY(100vh); }
}

/* Glitch effect for headings */
.glitching {
  animation: textGlitch 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  position: relative;
}

@keyframes textGlitch {
  0% { 
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
                0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
                -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                0.05em 0 0 rgba(0, 255, 0, 0.75),
                0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
                -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
                -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

/* Header section */
.cyber-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 1.5rem 0;
  border-bottom: 2px solid var(--neon-magenta);
  position: relative;
  text-transform: uppercase;
}

.cyber-header::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-magenta), var(--neon-cyan), transparent);
  animation: neonPulse 3s infinite;
}

.cyber-header h1 {
  font-family: 'Lazer84', sans-serif;
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: 4px;
  text-shadow: 
    0 0 5px var(--neon-magenta),
    0 0 10px var(--neon-magenta),
    0 0 20px var(--neon-blue),
    0 0 40px var(--neon-blue);
  color: #fff;
  transform: skew(-5deg);
  animation: bigGlow 3s ease-in-out infinite alternate;
}

.cyber-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* Text effects */
.glitch-text {
  position: relative;
  animation: textGlitch 3s infinite;
}

.neon-text {
  color: var(--neon-cyan);
  text-shadow: 
    0 0 5px var(--neon-cyan), 
    0 0 10px var(--neon-cyan), 
    0 0 20px var(--neon-cyan);
  animation: neonFlicker 3s infinite alternate;
}

.pulse-text {
  animation: pulse 1.5s infinite;
}

/* Panel styling */
.cyber-panel {
  background-color: var(--bg-panel);
  border: 2px solid var(--neon-magenta);
  border-radius: 0px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 
    0 0 15px var(--neon-magenta), 
    inset 0 0 15px rgba(255, 0, 153, 0.1);
  position: relative;
  overflow: hidden;
}

.cyber-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan));
  animation: gradientShift 3s infinite linear;
}

.cyber-panel::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 15px;
  width: 10px;
  height: 10px;
  background: var(--neon-magenta);
  border-radius: 50%;
  box-shadow: 0 0 10px 2px var(--neon-magenta);
  animation: blink 2s infinite;
}

.cyber-border {
  border: 2px solid var(--neon-cyan);
  position: relative;
  transition: all 0.3s ease;
  background: 
    linear-gradient(45deg, var(--neon-cyan) 0%, transparent 2px) 0 0,
    linear-gradient(-45deg, var(--neon-cyan) 0%, transparent 2px) 100% 0,
    linear-gradient(135deg, var(--neon-cyan) 0%, transparent 2px) 0 100%,
    linear-gradient(-135deg, var(--neon-cyan) 0%, transparent 2px) 100% 100%;
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

.cyber-border:hover {
  border-color: var(--neon-magenta);
  box-shadow: 0 0 20px rgba(255, 0, 153, 0.5);
  background: 
    linear-gradient(45deg, var(--neon-magenta) 0%, transparent 2px) 0 0,
    linear-gradient(-45deg, var(--neon-magenta) 0%, transparent 2px) 100% 0,
    linear-gradient(135deg, var(--neon-magenta) 0%, transparent 2px) 0 100%,
    linear-gradient(-135deg, var(--neon-magenta) 0%, transparent 2px) 100% 100%;
  background-size: 20px 20px;
  background-repeat: no-repeat;
}

/* Form elements */
.cyber-button {
  background: linear-gradient(135deg, #2b013a, #5e0058);
  color: var(--text-primary);
  border: 2px solid var(--neon-magenta);
  border-radius: 0;
  padding: 0.75rem 1.5rem;
  font-family: 'VCR OSD Mono', monospace;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  box-shadow: 0 0 15px rgba(255, 0, 153, 0.3);
  letter-spacing: 2px;
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
}

.cyber-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.2), transparent);
  transition: all 0.8s ease;
}

.cyber-button:hover {
  box-shadow: 
    0 0 20px rgba(255, 0, 153, 0.5),
    inset 0 0 10px rgba(255, 0, 153, 0.2);
  transform: translateY(-2px) scale(1.02);
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px var(--neon-magenta);
}

.cyber-button:hover::before {
  left: 100%;
}

.cyber-button.pulse-effect {
  animation: buttonPulse 2s infinite;
}

/* Navigation */
.cyber-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 2px solid var(--neon-magenta);
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.nav-logo {
  font-family: 'Lazer84', sans-serif;
  letter-spacing: 2px;
  transform: skew(-5deg);
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.5rem 0;
  position: relative;
  letter-spacing: 2px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--neon-magenta);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--neon-magenta);
  text-shadow: 0 0 5px var(--neon-magenta);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active {
  color: var(--neon-cyan);
  text-shadow: 0 0 5px var(--neon-cyan);
}

.nav-link.active::after {
  width: 100%;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
}

/* Add retro grid elements */
.retro-sun {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  background: radial-gradient(ellipse at center, #bc13fe 0%, transparent 70%);
  opacity: 0.2;
  z-index: -1;
}

/* Enhanced brand styling */
.lackadaisical-text {
  font-family: 'Lazer84', sans-serif;
  font-size: 1.8rem;
  color: var(--neon-magenta);
  letter-spacing: 3px;
  text-shadow: 0 0 10px var(--neon-magenta);
  transform: skew(-5deg);
  display: inline-block;
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  animation: textColorChange 8s infinite alternate;
  margin-right: 5px;
}

.sec-text {
  font-family: 'Lazer84', sans-serif;
  font-size: 1.8rem;
  color: var(--neon-cyan);
  letter-spacing: 3px;
  text-shadow: 0 0 10px var(--neon-cyan);
  transform: skew(-5deg);
}

/* Enhanced animations */
@keyframes scanlines {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

@keyframes flicker {
  0%, 100% { opacity: 0.05; }
  5% { opacity: 0.06; }
  10% { opacity: 0.05; }
  15% { opacity: 0.06; }
  20% { opacity: 0.05; }
  50% { opacity: 0.057; }
  60% { opacity: 0.05; }
  70% { opacity: 0.058; }
  80% { opacity: 0.05; }
}

@keyframes gridMove {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
  75% { transform: translateY(-10px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes colorChange {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes neonPulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.7; }
}

@keyframes textGlitch {
  0%, 85%, 95%, 100% { 
    text-shadow: 
      0 0 5px var(--neon-magenta),
      0 0 10px var(--neon-magenta),
      0 0 20px var(--neon-blue),
      0 0 40px var(--neon-blue);
    transform: skew(0); 
  }
  90% { 
    text-shadow: none;
    transform: skew(-2deg); 
  }
}

/* Add these new animations */
@keyframes textColorChange {
  0%, 100% { 
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  50% { 
    background-position: 100% 50%; 
    filter: hue-rotate(30deg);
  }
}

/* Retro horizontal line decoration */
.retro-line {
  height: 2px;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--neon-magenta),
    var(--neon-cyan) 20px,
    var(--neon-magenta) 40px
  );
  margin: 1.5rem 0;
  opacity: 0.7;
  animation: lineShift 10s infinite linear;
}

@keyframes lineShift {
  0% { background-position: 0 0; }
  100% { background-position: 100px 0; }
}

/* Cool heading underline effect */
.cyber-heading {
  position: relative;
  margin-bottom: 1.5rem;
  display: inline-block;
  margin-right: 15px;
  padding: 0 5px;
}

.cyber-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan));
  opacity: 0.8;
  animation: neonPulse 3s infinite;
}

/* Blog-specific styles for retro cyber theme */

/* Stars animation */
.star {
    position: absolute;
    background-color: var(--secondary);
    border-radius: 50%;
    opacity: 0.7;
    animation: star-twinkle 3s infinite alternate;
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Circuit animation */
.circuit-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.circuit-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--secondary), transparent);
    opacity: 0;
    animation: circuit-pulse 8s infinite;
}

@keyframes circuit-pulse {
    0% { opacity: 0; }
    50% { opacity: 0.3; }
    100% { opacity: 0; }
}

/* CRT flicker effect */
.crt-flicker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: crt-flicker 8s infinite;
}

@keyframes crt-flicker {
    0%, 100% { opacity: 0; }
    92% { opacity: 0; }
    93% { opacity: 0.15; }
    94% { opacity: 0; }
    96% { opacity: 0.15; }
    98% { opacity: 0; }
}

/* Enhanced animation for cyber particles */
.cyber-particle {
    position: absolute;
    background-color: var(--secondary);
    opacity: 0.3;
    pointer-events: none;
    animation: float-particle 20s linear infinite;
}

.square-particle {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.circle-particle {
    border-radius: 50%;
}

.triangle-particle {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

@keyframes float-particle {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    100% {
        transform: translateY(-100vh) translateX(20vw) rotate(360deg);
    }
}

/* Glow orb styling */
.glow-orb {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: pulse-glow 8s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.1); opacity: 0.8; }
}

/* Typing text animation */
.type-text {
    overflow: hidden;
    border-right: 2px solid var(--secondary);
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
    display: inline-block;
    max-width: 100%;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--secondary) }
}

/* Pulse text animation */
.pulse-text {
    animation: pulse-text 2s infinite alternate;
}

@keyframes pulse-text {
    0%, 100% { text-shadow: 0 0 5px var(--secondary), 0 0 10px var(--secondary); }
    50% { text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary); }
}

/* Enhanced cyber-frame with scanline effect */
.cyber-frame {
    position: relative;
    padding: 2px;
    background: linear-gradient(135deg, var(--secondary) 0%, transparent 50%, var(--secondary) 100%);
    margin: 2rem 0;
}

.cyber-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 50%);
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.2;
    z-index: 2;
}

.cyber-glow {
    width: 100%;
    height: auto;
    display: block;
    filter: contrast(120%) brightness(110%) saturate(130%) drop-shadow(0 0 10px var(--secondary));
}

/* Terminal text effect */
.terminal-text {
  font-family: 'VCR OSD Mono', 'Courier New', monospace;
  color: var(--secondary);
  background-color: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  line-height: 1.6;
}

/* Grid background */
.grid-background {
  position: relative;
}

.grid-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* Holo card effect */
.holo-card {
  background: linear-gradient(
    135deg, 
    rgba(26, 10, 64, 0.7) 0%, 
    rgba(26, 10, 64, 0.8) 50%,
    rgba(26, 10, 64, 0.7) 100%
  );
  position: relative;
  overflow: hidden;
}

.holo-card::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.03) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  animation: holo-shine 5s linear infinite;
}

@keyframes holo-shine {
  0% { transform: translateY(100%) rotate(45deg); }
  100% { transform: translateY(-100%) rotate(45deg); }
}

/* Digital tag effect */
.digital-tag {
  display: inline-block;
  padding: 0.25rem 1rem;
  margin: 0.25rem;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--secondary);
  position: relative;
}

.digital-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right, 
    rgba(0, 255, 255, 0.1) 0%, 
    transparent 30%, 
    transparent 70%, 
    rgba(0, 255, 255, 0.1) 100%
  );
  animation: tag-pulse 3s infinite alternate;
}

@keyframes tag-pulse {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}

/* Fix for layout issues */
@media (max-width: 768px) {
  .steps {
    grid-template-columns: 1fr;
  }
  
  .security-levels {
    grid-template-columns: 1fr;
  }
  
  .feature-highlight {
    flex-direction: column;
  }
  
  .feature-icon {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  .blog-nav {
    flex-direction: column;
    gap: 1rem;
  }
  
  .blog-nav a {
    text-align: center;
  }
  
  .blog-meta-info {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  /* Adjust background elements for mobile */
  .grid {
    height: 30%;
  }
  
  .sunset-bg {
    height: 30%;
  }
}

/* Core theme styling for Lackadaisical Security blog */

/* Base styles for background elements */
.sunset-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(0deg, #ff2285 0%, transparent 100%);
  opacity: 0.3;
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.star {
  position: absolute;
  background-color: #fff;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 3s infinite alternate ease-in-out;
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

.grid {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 255, 255, 0.1) 0%, transparent 100%);
  transform: perspective(500px) rotateX(60deg);
  transform-origin: bottom;
  background-size: 50px 50px;
  background-image: 
      linear-gradient(rgba(0, 255, 255, 0.2) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, 0.2) 1px, transparent 1px);
  z-index: -1;
}

.circuit-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/circuit-pattern.svg');
  background-size: 1500px;
  opacity: 0.03;
  z-index: -1;
}

.retro-sun {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  background: radial-gradient(ellipse at center, #bc13fe 0%, transparent 70%);
  opacity: 0.2;
  z-index: -1;
}

.data-stream {
  display: flex;
  justify-content: space-around;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.stream {
  width: 1px;
  background: linear-gradient(to bottom, transparent, #00ffff 20%, #00ffff 80%, transparent);
  height: 50vh;
  opacity: 0.3;
  animation: data-stream 8s linear infinite;
}

@keyframes data-stream {
  0% { transform: translateY(-50vh); }
  100% { transform: translateY(100vh); }
}

.particle {
  position: absolute;
  background-color: #ff00aa;
  border-radius: 50%;
  opacity: 0.7;
  width: 2px;
  height: 2px;
  animation: floatParticle 20s infinite ease-in-out;
  z-index: -1;
}

@keyframes floatParticle {
  0% { transform: translate(0, 0); }
  25% { transform: translate(20px, 10px); }
  50% { transform: translate(10px, 30px); }
  75% { transform: translate(-10px, 20px); }
  100% { transform: translate(0, 0); }
}

/* CRT and scanline effects */
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, 
                rgba(10, 10, 15, 0) 0%, 
                rgba(10, 10, 15, 0.2) 80%, 
                rgba(10, 10, 15, 0.5) 100%);
  pointer-events: none;
  z-index: 1001;
}

.crt-flicker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(10, 10, 15, 0.2) 1px, transparent 1px);
  background-size: 100% 2px;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.2;
  animation: flicker 0.15s infinite;
}

@keyframes flicker {
  0% { opacity: 0.17; }
  50% { opacity: 0.14; }
  100% { opacity: 0.2; }
}

/* Main container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.cyber-container {
  background: rgba(11, 6, 20, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(255, 0, 153, 0.3);
  border: 1px solid rgba(255, 0, 153, 0.2);
}

/* Navigation */
.cyber-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: #e0e0ff;
  text-decoration: none;
  font-family: 'VCR OSD Mono', 'Courier New', monospace;
  letter-spacing: 1px;
  position: relative;
  transition: all 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: #00ffff;
  transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Header */
.cyber-header {
  text-align: center;
  padding: 3rem 0;
  position: relative;
}

.header-glitch-container {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.glitch-text {
  font-family: 'Lazer84', sans-serif;
  font-size: 3rem;
  color: #fff;
  text-shadow: 0 0 10px #ff00aa, 0 0 20px #ff00aa;
  position: relative;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 5px #ff00aa, 0 0 10px #ff00aa; }
  to { text-shadow: 0 0 10px #ff00aa, 0 0 20px #ff00aa, 0 0 30px #ff00aa; }
}

.glitching {
  animation: textGlitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes textGlitch {
  0% { transform: translate(0); text-shadow: 0 0 #ff00aa; }
  25% { transform: translate(-5px, 0); text-shadow: -2px 0 #00ffff; }
  50% { transform: translate(5px, 0); text-shadow: 2px 0 #ff00aa; }
  75% { transform: translate(-2px, 0); text-shadow: -5px 0 #00ffff; }
  100% { transform: translate(0); text-shadow: 0 0 #ff00aa; }
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, 
                transparent, rgba(0, 255, 255, 0.2) 50%, transparent);
  animation: scanline 3s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.cyber-subtitle {
  font-family: 'VCR OSD Mono', 'Courier New', monospace;
  color: #e0e0ff;
  font-size: 1.2rem;
  margin-top: 1rem;
}

/* Neon text */
.neon-text {
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
}

.lackadaisical-text {
  font-family: 'Lazer84', sans-serif;
  color: #fff;
  text-shadow: 0 0 5px #ff00aa, 0 0 10px #ff00aa;
  font-size: 1.8rem;
}

.sec-text {
  font-family: 'VCR OSD Mono', 'Courier New', monospace;
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff;
  font-size: 1.8rem;
}

/* Blog content */
.blog-content {
  background: rgba(18, 11, 30, 0.7);
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 255, 0.2);
  margin-bottom: 2rem;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  font-family: 'VCR OSD Mono', 'Courier New', monospace;
}

.post-date, .post-version {
  font-weight: bold;
}

.post-header {
  margin-bottom: 2rem;
}

.post-header h2 {
  font-family: 'Lazer84', sans-serif;
  color: #fff;
  font-size: 2rem;
  text-shadow: 0 0 5px #ff00aa;
  margin-bottom: 1rem;
}

.post-image {
  margin-bottom: 2rem;
  position: relative;
}

.cyber-border {
  border: 1px solid #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  padding: 1rem;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.cyber-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  animation: borderGlow 2s linear infinite;
}

@keyframes borderGlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Footer */
.cyber-footer {
  text-align: center;
  padding: 2rem 0;
  border-top: 1px solid rgba(0, 255, 255, 0.2);
  margin-top: 2rem;
  font-family: 'VCR OSD Mono', 'Courier New', monospace;
}

.cyber-footer a {
  color: #00ffff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cyber-footer a:hover {
  text-shadow: 0 0 5px #00ffff;
}

.security-statement {
  margin-bottom: 1.5rem;
}

.security-statement h4 {
  color: #ff00aa;
  margin-bottom: 0.5rem;
}

/* Buttons */
.cyber-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: #00ffff;
  border: 1px solid #00ffff;
  font-family: 'VCR OSD Mono', 'Courier New', monospace;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.cyber-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(0, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.cyber-button:hover {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  transform: translateY(-3px);
}

.cyber-button:hover::before {
  left: 100%;
}

.pulse-effect {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(0, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
}

/* Responsive styles */
@media (max-width: 768px) {
  .cyber-nav {
    flex-direction: column;
    gap: 1rem;
  }
  
  .nav-links {
    flex-direction: column;
    text-align: center;
  }
  
  .glitch-text {
    font-size: 2rem;
  }
  
  .cyber-subtitle {
    font-size: 1rem;
  }
}

/* placeholder image styling */
.placeholder-image {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  background: rgba(18, 11, 30, 0.5);
  border-radius: 4px;
}

.cyber-shield-icon {
  position: relative;
  width: 120px;
  height: 140px;
}

.shield-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 153, 0.2));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 2px solid rgba(0, 255, 255, 0.5);
  animation: shieldPulse 3s infinite alternate;
}

.shield-inner {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 153, 0.1));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 2px solid rgba(0, 255, 255, 0.3);
  animation: shieldPulse 3s infinite alternate 0.5s;
}

@keyframes shieldPulse {
  0% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
  100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); }
}

/* Table styling to match index.html */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background-color: rgba(12, 3, 32, 0.3);
  border: 1px solid var(--secondary, #00ffff);
}

th {
  background-color: rgba(26, 10, 64, 0.9);
  color: var(--secondary, #00ffff);
  text-align: left;
  padding: 1rem;
  border-bottom: 1px solid var(--secondary, #00ffff);
}

td {
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

tr:nth-child(odd) {
  background-color: rgba(26, 10, 64, 0.5);
}

tr:last-child td {
  border-bottom: none;
}

/* Fix code block styling */
pre, code {
  background-color: rgba(12, 3, 32, 0.7);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 4px;
  padding: 1rem;
  font-family: 'Courier New', monospace;
  overflow-x: auto;
  color: var(--neon-green, #39ff14);
}

code {
  padding: 0.2rem 0.4rem;
}

/* Fix image styling */
.blog-image {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--secondary, #00ffff);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
  margin: 2rem 0;
}

.image-caption {
  text-align: center;
  color: var(--text-medium, #b0c4ff);
  font-size: 0.9rem;
  margin-top: -1.5rem;
  margin-bottom: 2rem;
}

/* Improve heading visibility */
h1, h2, h3, h4, h5, h6 {
  color: var(--light, #ffffff);
  text-shadow: 0 0 10px var(--secondary, #00ffff);
  margin-bottom: 1rem;
}

/* Improve link visibility */
a {
  color: var(--secondary, #00ffff);
  text-decoration: none;
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
  transition: all 0.3s ease;
}

a:hover {
  color: var(--light, #ffffff);
  text-shadow: 0 0 8px var(--secondary, #00ffff);
}

/* Fix glitch text animation which was incomplete */
@keyframes textGlitch {
  0% { 
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
                0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% { 
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
                -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                0.05em 0 0 rgba(0, 255, 0, 0.75),
                0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
                -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
                -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

/* Fix for scanlines animation which was missing */
@keyframes scanlines {
  0% { 
    transform: translateY(0);
  }
  100% { 
    transform: translateY(3px);
  }
}

/* Fix for flicker animation which was missing */
@keyframes flicker {
  0% { opacity: 0.93; }
  5% { opacity: 0.95; }
  10% { opacity: 0.94; }
  15% { opacity: 0.98; }
  20% { opacity: 0.92; }
  25% { opacity: 0.95; }
  30% { opacity: 0.98; }
  35% { opacity: 0.93; }
  40% { opacity: 0.97; }
  45% { opacity: 0.95; }
  50% { opacity: 0.98; }
  55% { opacity: 0.93; }
  60% { opacity: 0.95; }
  65% { opacity: 0.97; }
  70% { opacity: 0.93; }
  75% { opacity: 0.94; }
  80% { opacity: 0.98; }
  85% { opacity: 0.92; }
  90% { opacity: 0.96; }
  95% { opacity: 0.93; }
  100% { opacity: 0.98; }
}

/* Blog Page Styles */

/* Japanese title styling from main site */
.japanese-title {
    font-size: 0.8rem;
    color: var(--secondary-color, #00ffff);
    margin-top: -5px;
    font-family: 'VCR OSD Mono', monospace;
    letter-spacing: 1px;
    text-align: center;
}

/* Blog Navigation */
.blog-nav-section {
    margin: 1rem 0 2rem;
}

.blog-nav {
    border-bottom: 1px solid var(--neon-cyan);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.blog-nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-nav ul li {
    margin: 0;
    padding: 0;
}

.blog-nav ul li a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--light-text);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    font-family: 'VCR OSD Mono', monospace;
    transition: all 0.3s ease;
}

.blog-nav ul li.active a {
    color: var(--neon-cyan);
    border-bottom-color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan);
}

.blog-nav ul li a:hover {
    background-color: rgba(0, 255, 255, 0.1);
}

/* Code Blocks - restrict typewriter effect to code blocks only */
.typewriter-code {
    overflow: hidden;
    border: 1px solid var(--neon-cyan);
    background-color: rgba(12, 3, 32, 0.7);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
    white-space: pre;
    animation: typing 3s steps(40, end);
    max-width: 100%;
    overflow-x: auto;
    font-family: 'VCR OSD Mono', monospace;
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

@keyframes typing {
    from { height: 0; }
    to { height: 100%; }
}

/* Feature Highlights */
.feature-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.feature-highlight-card {
    background-color: rgba(18, 5, 26, 0.7);
    border: 2px solid var(--neon-magenta);
    border-radius: 4px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.4);
}

.highlight-icon {
    font-size: 2rem;
    color: var(--neon-cyan);
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.highlight-icon i {
    text-shadow: 0 0 10px var(--neon-cyan);
}

.highlight-content {
    flex-grow: 1;
}

.highlight-content h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* Tech controllers and elements from main site */
.tech-controller {
    position: absolute;
    width: 120px;
    height: 120px;
    background: url('../images/controller-outline.svg') no-repeat center/contain;
    opacity: 0.6;
    animation: float 6s ease-in-out infinite;
    top: 15%;
    right: 10%;
}

.cyber-keyboard {
    position: absolute;
    width: 150px;
    height: 80px;
    background: url('../images/keyboard-outline.svg') no-repeat center/contain;
    opacity: 0.5;
    animation: float 8s ease-in-out infinite;
    bottom: 20%;
    left: 15%;
}

.tech-headset {
    position: absolute;
    width: 100px;
    height: 100px;
    background: url('../images/headset-outline.svg') no-repeat center/contain;
    opacity: 0.6;
    animation: float 7s ease-in-out infinite, pulse 4s ease-in-out infinite;
    top: 30%;
    left: 8%;
}

.cyber-server {
    position: absolute;
    width: 130px;
    height: 130px;
    background: url('../images/server-outline.svg') no-repeat center/contain;
    opacity: 0.5;
    animation: float 9s ease-in-out infinite;
    bottom: 25%;
    right: 12%;
}

@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulse {
    0% { opacity: 0.3; }
    50% { opacity: 0.7; }
    100% { opacity: 0.3; }
}

/* Section Styling */
.section-heading {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    font-family: 'Orbitron', sans-serif;
}

.neon-text {
    color: var(--neon-magenta);
    text-shadow: 0 0 10px var(--neon-magenta);
}

.neon-cyan {
    color: var(--neon-cyan);
    text-shadow: 0 0 10px var(--neon-cyan);
}

/* Blog post navigation */
.blog-post-nav {
    display: flex;
    justify-content: space-between;
    margin: 3rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--neon-cyan);
}

.blog-post-nav a {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: var(--neon-cyan);
    text-decoration: none;
    border: 1px solid var(--neon-cyan);
    transition: all 0.3s ease;
}

.blog-post-nav a:hover {
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 10px var(--neon-cyan);
}

/* Responsive Design */
@media (max-width: 768px) {
    .feature-highlights {
        grid-template-columns: 1fr;
    }
    
    .architecture-diagram,
    .typewriter-code {
        font-size: 0.7rem;
    }
    
    .table-responsive {
        overflow-x: auto;
    }
    
    .blog-post-nav {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .tech-controller, .cyber-keyboard, .tech-headset, .cyber-server {
        opacity: 0.3; /* Reduce opacity on mobile for better readability */
    }
}

/* Animations */
.slide-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-up.animated {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

.delay-3 {
    transition-delay: 0.6s;
}

/* Grid pattern from main site */
.grid-pattern {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(transparent 0%, rgba(255, 0, 153, 0.2) 100%);
    transform: perspective(500px) rotateX(60deg);
    transform-origin: bottom;
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(255, 0, 153, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 0, 153, 0.3) 1px, transparent 1px);
    z-index: -1;
}

/* Accessibility Improvements */
.cyber-button, a {
    position: relative;
    z-index: 2;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Nav logo styling consistent with main site */
.nav-logo a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lackadaisical-text {
    color: var(--neon-magenta, #ff00aa);
    text-shadow: 0 0 10px var(--neon-magenta, #ff00aa);
    font-family: 'Orbitron', sans-serif;
}

.sec-text {
    color: var(--neon-cyan, #00ffff);
    text-shadow: 0 0 10px var(--neon-cyan, #00ffff);
    font-family: 'Orbitron', sans-serif;
}

/* Additional styling for new elements */

/* Case studies */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.case-study-card {
    background-color: rgba(18, 5, 26, 0.7);
    border: 2px solid var(--neon-cyan);
    border-radius: 4px;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-study-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.case-study-icon {
    font-size: 2.5rem;
    color: var(--neon-cyan);
    margin-bottom: 1rem;
    text-align: center;
}

.case-study-icon i {
    text-shadow: 0 0 10px var(--neon-cyan);
}

/* Timeline styling */
.timeline {
    list-style: none;
    padding-left: 0;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.75rem;
    height: 100%;
    width: 2px;
    background: var(--neon-cyan);
    opacity: 0.5;
}

.timeline li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline li::before {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
}

.timeline li .date {
    display: inline-block;
    font-weight: bold;
    color: var(--neon-cyan);
    margin-right: 0.5rem;
}

/* Compatibility notice */
.compatibility-notice {
    background-color: rgba(18, 5, 26, 0.8);
    border: 2px solid var(--neon-cyan);
    border-radius: 4px;
    padding: 1.5rem;
    margin: 2rem 0;
    position: relative;
}

.compatibility-notice h3 {
    margin-top: 0;
}

.compatibility-notice i {
    margin-right: 0.5rem;
}

/* Info box */
.info-box {
    background-color: rgba(18, 5, 26, 0.7);
    border: 2px solid var(--neon-magenta);
    border-radius: 4px;
    padding: 1.5rem;
    margin: 2rem 0;
    position: relative;
}

.info-box h4 {
    margin-top: 0;
}

/* Timeline grid */
.timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.timeline-card {
    background-color: rgba(18, 5, 26, 0.7);
    border: 2px solid var(--neon-cyan);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.timeline-header {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--neon-cyan);
}

.timeline-header h4 {
    margin: 0;
    color: var(--neon-cyan);
    font-size: 1.25rem;
}

.timeline-header p {
    margin: 0.25rem 0 0 0;
    opacity: 0.8;
    font-size: 0.9rem;
}

.timeline-header.small {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(18, 5, 26, 0) 100%);
}

.timeline-header.medium {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.1) 0%, rgba(18, 5, 26, 0) 100%);
}

.timeline-header.large {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.1) 0%, rgba(18, 5, 26, 0) 100%);
}

.timeline-body {
    padding: 1rem;
}

.timeline-step {
    display: flex;
    margin-bottom: 1rem;
    align-items: flex-start;
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--neon-cyan);
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
}

.step-content {
    flex-grow: 1;
}

.step-content h5 {
    margin: 0 0 0.25rem 0;
}

.step-content p {
    margin: 0;
}

.timeline-total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 255, 255, 0.3);
    text-align: right;
}

/* Guideline grid */
.guideline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.guideline-card {
    background-color: rgba(18, 5, 26, 0.7);
    border: 2px solid var(--neon-magenta);
    border-radius: 4px;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.guideline-number {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    background-color: var(--neon-magenta);
    color: var(--dark);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.6);
}

.guideline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.4);
}

.guideline-card h4 {
    margin-top: 0;
    color: var(--neon-cyan);
    margin-bottom: 1rem;
}

/* Responsive design improvements */
@media (max-width: 768px) {
    .case-study-grid,
    .timeline-grid,
    .guideline-grid {
        grid-template-columns: 1fr;
    }
    
    .timeline li {
        padding-left: 1.5rem;
    }
    
    .timeline li::before {
        width: 0.6rem;
        height: 0.6rem;
    }
}