/* Zorix VPN — Pixel Art Style */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --bg-dark: #0a0a1a;
  --neon-cyan: #00ffcc;
  --neon-purple: #9945ff;
  --pixel-green: #39ff14;
  --neon-red: #ff3355;
  --text-muted: #6b6b8a;
  --card-bg: #12122a;
  --shadow-offset: 4px;
}

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding: 0;
  overflow-y: scroll;
}

body {
  font-family: 'Press Start 2P', cursive;
  background: var(--bg-dark);
  color: var(--neon-cyan);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.8;
}

/* Pixel art: no border-radius */
* {
  border-radius: 0 !important;
}

/* Scanline overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.03),
    rgba(0, 0, 0, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Animated pixel background — falling stars */
.pixel-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.pixel-bg .pixel {
  position: absolute;
  width: 3px;
  height: 3px;
  left: var(--x, 50%);
  top: -10px;
  background: var(--color, var(--neon-cyan));
  animation: pixelFall 12s linear infinite;
  animation-delay: var(--delay, 0s);
  box-shadow: 0 0 6px var(--color);
}

@keyframes pixelFall {
  0% { transform: translateY(0); opacity: 0; }
  5% { opacity: 0.9; }
  95% { opacity: 0.9; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Pixel button — retro bevel + outline */
.btn-pixel {
  display: inline-block;
  font-family: 'Press Start 2P', cursive;
  font-size: 11px;
  padding: 16px 26px;
  background: linear-gradient(180deg, #00e6b8 0%, #00ccaa 50%, #00b894 100%);
  color: var(--bg-dark);
  border: 2px solid #00ffcc;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.4),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    4px 4px 0 rgba(0,0,0,0.5),
    5px 5px 0 var(--neon-purple);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
}

.btn-pixel:hover {
  transform: translate(2px, 2px);
  filter: brightness(1.1);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.3),
    inset -2px -2px 0 rgba(0,0,0,0.25),
    2px 2px 0 rgba(0,0,0,0.4),
    3px 3px 0 var(--neon-purple),
    0 0 20px rgba(0,255,204,0.5);
}

.btn-pixel.btn-glow {
  position: relative;
  animation: btnGlow 2s ease-in-out infinite;
}

@keyframes btnGlow {
  0%, 100% { box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--neon-purple); }
  50% { box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--neon-purple), 0 0 20px var(--neon-cyan); }
}

/* Blinking cursor on CTA */
.btn-pixel.cursor-blink::after {
  content: '|';
  animation: blink 1s step-end infinite;
  margin-left: 4px;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Cards with neon border & CRT glow */
.card-pixel {
  background: var(--card-bg);
  border: 3px solid var(--neon-cyan);
  padding: 24px;
  position: relative;
  transition: box-shadow 0.3s, border-color 0.3s;
}

.card-pixel:hover {
  border-color: var(--neon-purple);
  box-shadow: 0 0 20px rgba(153, 69, 255, 0.4), inset 0 0 20px rgba(0, 255, 204, 0.05);
}

/* Pixel glitch animation */
.glitch {
  position: relative;
  animation: glitch 3s infinite;
}

@keyframes glitch {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-2px, 2px); }
  94% { transform: translate(2px, -2px); }
  96% { transform: translate(-2px, -2px); }
  98% { transform: translate(2px, 2px); }
}

/* Typewriter container */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--neon-cyan);
  animation: typing 3s steps(30) 1s forwards, blinkCursor 0.7s step-end infinite;
  width: 0;
  margin: 0 auto;
}

@keyframes typing {
  to { width: 100%; }
}

@keyframes blinkCursor {
  50% { border-color: transparent; }
}

/* Section spacing */
section {
  padding: 60px 20px;
  max-width: 1100px;
  margin: 0 auto;
  scroll-margin: 0;
}

h1, h2, h3 {
  text-transform: uppercase;
  margin-bottom: 20px;
}

h1 { font-size: 20px; }
h2 { font-size: 14px; color: var(--neon-purple); }
h3 { font-size: 10px; }

/* Responsive */
@media (max-width: 768px) {
  h1 { font-size: 12px; }
  h2 { font-size: 10px; }
  .btn-pixel { font-size: 9px; padding: 14px 20px; }
}