/* Cyber Neon — default cyberpunk */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #020408;
  --surface: #040d14;
  --surface2: #081820;
  --accent: #00f5ff;
  --accent2: #00ff88;
  --accent3: #ff6b2b;
  --danger: #ff2d55;
  --warning: #ffd000;
  --purple: #b44aff;
  --text: #c8e6f0;
  --dim: #4a7a8a;
  --border: rgba(0,245,255,0.15);
  --font-head: 'Orbitron', monospace;
  --font-body: 'Rajdhani', sans-serif;
  --font-code: 'Space Mono', monospace;
  --nav-bg: rgba(2,4,8,0.85);
  --shadow: 0 16px 50px rgba(0,245,255,0.12);
  --clip-btn: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  --scanline-opacity: 1;
}

.theme-cyber-neon .hero-name .glitch::before,
.theme-cyber-neon .hero-name .glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.theme-cyber-neon .hero-name .glitch::before {
  color: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: cn-g1 3s infinite;
}
.theme-cyber-neon .hero-name .glitch::after {
  color: var(--accent3); clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: cn-g2 3s infinite;
}
@keyframes cn-g1 {
  0%,90%,100% { transform: translate(0); }
  92% { transform: translate(-3px,-1px); }
  94% { transform: translate(3px,1px); }
}
@keyframes cn-g2 {
  0%,90%,100% { transform: translate(0); }
  93% { transform: translate(3px,1px); }
  95% { transform: translate(-3px,-1px); }
}

.theme-cyber-neon .service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(0); transform-origin: left; transition: .35s;
}
.theme-cyber-neon .service-card:hover::before { transform: scaleX(1); }