:root {
  --bg-void: #07060f;
  --neon-pink: #ff4fa3;
  --neon-cyan: #22e4ff;
  --neon-violet: #8b5cf6;
  --glass-bg: rgba(255, 255, 255, 0.04);
  --text-main: #f3f1ff;
  --text-muted: #b8b3d6;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-color: var(--bg-void);
  color: var(--text-main);
  font-family: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--bg-void);
  color: var(--text-main);
  position: relative;
}

.font-display {
  font-family: "Orbitron", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.font-mono-num {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Perspective Cyberpunk Grid Floor + Scanlines */
.cyber-grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.cyber-grid-bg::before {
  content: "";
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -15%;
  height: 70vh;
  background-image:
    linear-gradient(to right, rgba(34, 228, 255, 0.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 79, 163, 0.11) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(560px) rotateX(62deg);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 90%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 90%);
}

.cyber-grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0px,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.55;
}

/* Mouse Radial Glow */
#cursor-glow {
  position: fixed;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 79, 163, 0.16) 0%,
    rgba(139, 92, 246, 0.1) 35%,
    rgba(34, 228, 255, 0.05) 60%,
    transparent 75%
  );
  transition: opacity 0.3s ease;
  will-change: left, top;
}

/* Dark Glass Cards with 1px Neon Gradient Border */
.neon-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 79, 163, 0.25);
  transition: transform 0.22s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  transform-style: preserve-3d;
}

.neon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 79, 163, 0.65), rgba(139, 92, 246, 0.45), rgba(34, 228, 255, 0.65));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.neon-card:hover {
  box-shadow:
    0 0 28px rgba(255, 79, 163, 0.18),
    0 0 42px rgba(34, 228, 255, 0.12);
}

.neon-card-featured {
  background: linear-gradient(160deg, rgba(255, 79, 163, 0.12), rgba(139, 92, 246, 0.1), rgba(34, 228, 255, 0.06));
  box-shadow:
    0 0 36px rgba(255, 79, 163, 0.24),
    0 0 60px rgba(139, 92, 246, 0.16);
}

/* Neon Sweep Buttons */
.btn-neon {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-neon::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent,
    rgba(255, 255, 255, 0.42),
    transparent
  );
  transition: left 0.55s ease;
  pointer-events: none;
}

.btn-neon:hover::after {
  left: 140%;
}

.btn-neon:hover {
  transform: translateY(-2px);
}

.btn-neon-primary {
  background: linear-gradient(90deg, #ff4fa3, #8b5cf6, #22e4ff);
  background-size: 200% 100%;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 22px rgba(255, 79, 163, 0.35);
}

.btn-neon-primary:hover {
  box-shadow: 0 0 32px rgba(255, 79, 163, 0.55), 0 0 18px rgba(34, 228, 255, 0.35);
}

.btn-neon-cyan {
  background: rgba(34, 228, 255, 0.08);
  border: 1px solid rgba(34, 228, 255, 0.65);
  color: #8cf3ff;
  font-weight: 600;
  box-shadow: 0 0 16px rgba(34, 228, 255, 0.15);
}

.btn-neon-cyan:hover {
  background: rgba(34, 228, 255, 0.16);
  color: #ffffff;
  box-shadow: 0 0 24px rgba(34, 228, 255, 0.35);
}

/* Logo Flicker Once */
@keyframes neonFlickerOnce {
  0% { opacity: 0.25; filter: drop-shadow(0 0 2px #ff4fa3); }
  18% { opacity: 1; filter: drop-shadow(0 0 12px #ff4fa3); }
  28% { opacity: 0.35; }
  45% { opacity: 1; filter: drop-shadow(0 0 16px #22e4ff); }
  62% { opacity: 0.7; }
  100% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 79, 163, 0.75)); }
}

.logo-flicker {
  animation: neonFlickerOnce 1.4s ease-out 1 forwards;
}

/* Hero H1 Glitch Reveal */
@keyframes glitchReveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    text-shadow: 4px 0 #22e4ff, -4px 0 #ff4fa3;
  }
  45% {
    opacity: 1;
    clip-path: inset(0 28% 0 0);
    text-shadow: -3px 0 #22e4ff, 3px 0 #ff4fa3;
  }
  70% {
    clip-path: inset(0 0 0 0);
    text-shadow: 2px 0 #ff4fa3, -2px 0 #22e4ff;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    text-shadow: 0 0 24px rgba(255, 79, 163, 0.35);
  }
}

.h1-glitch-reveal {
  animation: glitchReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Animated Packet Lines on SVG Map */
@keyframes packetFlow {
  to {
    stroke-dashoffset: -48;
  }
}

.packet-line {
  stroke-dasharray: 6 6;
  animation: packetFlow 1.8s linear infinite;
}

@keyframes nodePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.45);
    opacity: 0.35;
  }
}

.node-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 2.4s ease-in-out infinite;
}

/* Scroll Reveal */
.reveal-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* FAQ Smooth Accordion */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s ease;
}

.faq-item[data-open="true"] .faq-content {
  grid-template-rows: 1fr;
}

.faq-inner {
  overflow: hidden;
}

.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item[data-open="true"] .faq-icon {
  transform: rotate(45deg);
}

/* Mobile Nav Drawer */
@media (max-width: 1023px) {
  .desktop-nav {
    display: none;
  }
}

/* Focus Accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #22e4ff;
  outline-offset: 2px;
}

/* Reduced Motion Respect */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  #cursor-glow {
    display: none !important;
  }
  .logo-flicker,
  .h1-glitch-reveal,
  .packet-line,
  .node-ring {
    animation: none !important;
  }
  .reveal-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .neon-card,
  .btn-neon,
  .faq-content,
  .faq-icon {
    transition: none !important;
  }
  .neon-card:hover {
    transform: none !important;
  }
}