/* ===================================================================
   02 光速隧道 · WARP TUNNEL 视觉风格与增量样式表
   配色：背景 #04061A ｜ 主色 #7DD3FC ｜ 点缀 #22D3EE
   硬性约束：不改动任何布局栅格、边距、尺寸，仅注入光速隧道视觉与背景
   =================================================================== */

:root {
  --bg-dark: #04061A;
  --primary-light: #7DD3FC;
  --accent-cyan: #22D3EE;
  --border-glow: rgba(34, 211, 238, 0.45);
}

/* 视口全屏光速隧道独立 Canvas 图层（置于最底、无指针交互、绝不挤占排版） */
.warp-tunnel-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background-color: #04061A;
}

/* 页面根底色保持 #04061A，内容背景透明以穿透光速隧道流光 */
html {
  background-color: #04061A !important;
}

body {
  background-color: transparent !important;
}

/* 顶栏半透明毛玻璃，透出顶部光速粒子 */
.navbar {
  background: rgba(4, 6, 26, 0.82) !important;
  border-bottom: 1px solid rgba(125, 211, 252, 0.12) !important;
}

/* 核心标题与微光调整为光速隧道主色与点缀色 */
.gradient-title {
  background: linear-gradient(135deg, #ffffff 25%, #7DD3FC 70%, #22D3EE 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-glow {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.22) 0%, rgba(125, 211, 252, 0.1) 50%, transparent 70%) !important;
}

.hero-badge {
  background: rgba(34, 211, 238, 0.12) !important;
  border-color: rgba(34, 211, 238, 0.3) !important;
  color: #7DD3FC !important;
}

.hero-badge .pulse-dot {
  background-color: #22D3EE !important;
  box-shadow: 0 0 10px #22D3EE !important;
}

.brand-logo .logo-icon {
  background: linear-gradient(135deg, #0284c7 0%, #22D3EE 100%) !important;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.6) !important;
}

.brand-logo span.gradient-text {
  background: linear-gradient(120deg, #ffffff, #7DD3FC) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* CTA 按钮微光配色匹配光速隧道主色调 */
.btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #22D3EE 100%) !important;
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.45) !important;
}

.btn-primary:hover {
  box-shadow: 0 8px 25px rgba(34, 211, 238, 0.65) !important;
}

/* 卡片半透明毛玻璃衬底，让光速隧道动效若隐若现穿透，极大增强纵深速度感 */
.adv-card,
.support-card,
.pricing-card,
.review-card,
.hero-stats {
  background: rgba(7, 13, 31, 0.72) !important;
  border-color: rgba(125, 211, 252, 0.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.adv-card:hover,
.support-card:hover,
.pricing-card:hover,
.review-card:hover {
  border-color: rgba(34, 211, 238, 0.5) !important;
  box-shadow: 0 16px 36px rgba(4, 6, 26, 0.7), 0 0 20px rgba(34, 211, 238, 0.22) !important;
}

.pricing-card.featured {
  background: linear-gradient(180deg, rgba(14, 28, 58, 0.82) 0%, rgba(8, 16, 36, 0.88) 100%) !important;
  border-color: #22D3EE !important;
  box-shadow: 0 0 35px rgba(34, 211, 238, 0.28) !important;
}

.pricing-ribbon {
  background: linear-gradient(135deg, #0284c7 0%, #22D3EE 100%) !important;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.4) !important;
}

.adv-icon-box {
  background: rgba(34, 211, 238, 0.12) !important;
  border-color: rgba(34, 211, 238, 0.25) !important;
  color: #7DD3FC !important;
}

.faq-item {
  background: rgba(7, 13, 31, 0.72) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.faq-item[open] {
  border-color: rgba(34, 211, 238, 0.45) !important;
  background: rgba(12, 22, 48, 0.78) !important;
}

.bottom-cta {
  background: linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, 0.12) 100%) !important;
  border-top: 1px solid rgba(125, 211, 252, 0.12) !important;
}

.footer {
  background: rgba(4, 6, 26, 0.95) !important;
  border-top: 1px solid rgba(125, 211, 252, 0.1) !important;
}

/* ===================================================================
   【标题右侧动画】旋转虚线圆环 + 环顶白色发光小圆点
   规格：直径约 4.6cqw，虚线描边同主色 #7DD3FC，环顶白色发光小圆点约 1cqw
   3.2s/圈 匀速旋转，行内追加，不换行，尺寸不超过标题字高 1.6 倍
   =================================================================== */

.warp-title-badge {
  display: inline-block;
  vertical-align: middle;
  width: 4.6cqw;
  height: 4.6cqw;
  min-width: 32px;
  min-height: 32px;
  max-width: 1.35em;
  max-height: 1.35em;
  margin-left: 0.32em;
  position: relative;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.warp-ring-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  animation: warpRingSpin 3.2s linear infinite;
  transform-origin: 23px 23px;
}

/* 虚线圆环：主色 #7DD3FC，虚线描边 */
.warp-ring-dashed {
  fill: none;
  stroke: #7DD3FC;
  stroke-width: 2.2;
  stroke-dasharray: 5 4;
  filter: drop-shadow(0 0 5px rgba(125, 211, 252, 0.75));
}

/* 环顶白色发光小圆点（约 1cqw） */
.warp-ring-dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 8px #7DD3FC) drop-shadow(0 0 12px #22D3EE);
}

/* 3.2s/圈 匀速旋转动画 */
@keyframes warpRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 减弱动效偏好：停止旋转，退化为静态 */
@media (prefers-reduced-motion: reduce) {
  .warp-ring-svg {
    animation: none;
  }
}