/* 赛博朋克首页专用美化 */
/* 调亮背景主色，减少黑色感 */
body {
  background: linear-gradient(135deg, #232946 0%, #3a4a6b 60%, #e6f0fa 100%) !important;
  color: #fff !important;
  position: relative;
  overflow-x: hidden;
}
body::before, body::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(32px) brightness(1.1);
  opacity: 0.13;
}
body::before {
  left: 8vw; top: 8vh;
  width: 420px; height: 420px;
  background: radial-gradient(circle, #00eaff 0%, transparent 80%);
  animation: cyber-bg-move 28s infinite alternate;
}
body::after {
  right: 10vw; bottom: 12vh;
  width: 320px; height: 320px;
  background: radial-gradient(circle, #ff3ec9 0%, transparent 80%);
  animation: cyber-bg-move 33s infinite alternate-reverse;
}
@keyframes cyber-bg-move {
  0% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.08) translateY(-30px); }
  100% { transform: scale(1) translateY(0); }
}

/* 卡片、区块底色更亮更通透 */
.cyber-card, section, .modal-content {
  background: rgba(230, 240, 250, 0.72) !important;
  border: 2.5px solid #00eaff !important;
  box-shadow: 0 0 32px 0 #00eaff, 0 0 64px 0 #ff3ec9 !important;
  border-radius: 24px !important;
  position: relative;
  overflow: visible;
  transition: box-shadow 0.5s, border-color 0.5s, background 0.5s;
  color: #232946 !important;
}
.cyber-card:hover, section:hover {
  box-shadow: 0 0 64px 0 #ff3ec9, 0 0 96px 0 #00eaff !important;
  border-color: #ff3ec9 !important;
  background: linear-gradient(120deg, rgba(230,240,250,0.85) 60%, #00eaff22 100%) !important;
  filter: brightness(1.08) saturate(1.12);
  z-index: 5;
}

.cyber-title, h2.section-header, .section-header h2 {
  font-family: 'Orbitron', 'ZCOOL KuaiLe', 'Noto Serif SC', serif !important;
  font-size: 2.8rem !important;
  letter-spacing: 2px;
  color: #00eaff !important;
  text-shadow: 0 0 16px #ff3ec9, 0 0 32px #a259ff !important;
  text-align: center;
  margin-bottom: 2rem;
}

.cyber-btn, .btn-primary, .btn {
  border: 2.5px solid #00eaff !important;
  border-radius: 32px !important;
  background: linear-gradient(90deg, #00eaff 0%, #a259ff 50%, #ff3ec9 100%) !important;
  color: #181c2f !important;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 2px 18px 0 #00eaff, 0 0 0 8px #ff3ec9 !important;
  text-shadow: 0 0 8px #00eaff, 0 0 2px #ff3ec9 !important;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.cyber-btn:hover, .btn-primary:hover, .btn:hover {
  background: linear-gradient(90deg, #ff3ec9 0%, #00eaff 100%) !important;
  color: #fff !important;
  border-color: #ff3ec9 !important;
  box-shadow: 0 0 32px 0 #ff3ec9, 0 0 0 12px #00eaff !important;
}

.cyber-divider, .section-header::after {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #00eaff 0%, #a259ff 50%, #ff3ec9 100%) !important;
  border-radius: 3px;
  margin: 2.5rem 0;
  box-shadow: 0 0 24px #ff3ec9, 0 0 48px #a259ff !important;
  animation: cyber-divider-glow 2.5s infinite alternate;
}
@keyframes cyber-divider-glow {
  0% { filter: blur(1px); }
  50% { filter: blur(4px); }
  100% { filter: blur(1px); }
}

.cyber-glow-dot {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(90deg, #00eaff 0%, #ff3ec9 100%);
  opacity: 0.18;
  filter: blur(8px);
  animation: cyber-dot-float 12s infinite alternate;
  z-index: 2;
}
@keyframes cyber-dot-float {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-32px) scale(1.2); }
  100% { transform: translateY(0) scale(1); }
}

.cyber-grid-bg {
  position: fixed;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(120deg, #00eaff22 0 2px, transparent 2px 40px),
              repeating-linear-gradient(-120deg, #ff3ec922 0 2px, transparent 2px 40px);
  animation: cyber-grid-move 16s linear infinite;
}
@keyframes cyber-grid-move {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 200px 200px, -200px -200px; }
}

.cyber-lights {
  position: fixed;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  z-index: 1;
  pointer-events: none;
}
.cyber-light {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.18;
  animation: cyber-light-move 12s infinite alternate;
}
.cyber-light.blue {
  background: #00eaff;
  width: 220px; height: 220px;
  left: 10vw; top: 10vh;
}
.cyber-light.pink {
  background: #ff3ec9;
  width: 180px; height: 180px;
  right: 8vw; bottom: 8vh;
}
@keyframes cyber-light-move {
  0% { transform: scale(1) translateY(0);}
  50% { transform: scale(1.08) translateY(-30px);}
  100% { transform: scale(1) translateY(0);}
}

::-webkit-scrollbar {
  width: 10px;
  background: rgba(30, 34, 54, 0.45);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #00eaff 0%, #ff3ec9 100%);
  border-radius: 8px;
  box-shadow: 0 0 8px #ff3ec9;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #ff3ec9 0%, #00eaff 100%);
}

input, textarea, select {
  background: rgba(30, 34, 54, 0.45) !important;
  border: 2px solid #a259ff !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 0.6em 1em;
  font-family: 'Orbitron', 'Noto Serif SC', '思源宋体', serif;
  box-shadow: 0 0 8px #ff3ec9 !important;
  transition: border 0.3s, box-shadow 0.3s;
}
input:focus, textarea:focus, select:focus {
  border-color: #ff3ec9 !important;
  box-shadow: 0 0 16px #ff3ec9 !important;
  outline: none;
}

/* 未来感字体 */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

.sci-fi-datastream {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 60px;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    #00eaff 0 2px, transparent 2px 40px
  ), repeating-linear-gradient(
    90deg,
    #ff3ec9 0 1px, transparent 1px 20px
  );
  opacity: 0.18;
  animation: datastream-move 8s linear infinite;
}
@keyframes datastream-move {
  0% { background-position: 0 0, 0 0;}
  100% { background-position: 400px 0, -200px 0;}
}
.sci-fi-grid {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 300px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
  animation: grid-fadein 2s;
}
.sci-fi-grid-svg {
  width: 100vw;
  height: 300px;
  display: block;
}
@keyframes grid-fadein {
  from { opacity: 0; transform: translateY(100px);}
  to { opacity: 0.45; transform: translateY(0);}
}