/* ==========================================================================
   Riolu 精灵学院机场网 - 现代极速纯原生 CSS 样式系统 (零外部框架，秒开体验)
   域名: riolu443.cfd | 专线网络与安全加速落地页
   ========================================================================== */

:root {
  --bg-primary: #080c16;
  --bg-secondary: #0e1526;
  --bg-card: rgba(18, 26, 47, 0.75);
  --bg-card-hover: rgba(25, 37, 66, 0.88);
  --bg-card-alt: rgba(14, 21, 38, 0.6);
  --border-color: rgba(56, 189, 248, 0.15);
  --border-glow: rgba(56, 189, 248, 0.45);
  --border-active: #00f2fe;

  --text-main: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --accent-cyan: #00f2fe;
  --accent-blue: #38bdf8;
  --accent-indigo: #4facfe;
  --accent-gold: #fbbf24;
  --accent-emerald: #10b981;
  --accent-purple: #818cf8;
  --accent-icered: #ff0844;
  --accent-icered-light: #ff4d6d;

  --grad-primary: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  --grad-gold: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
  --grad-card-border: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(129, 140, 248, 0.1));
  --grad-icered: linear-gradient(135deg, #ff4d6d 0%, #ff0844 52%, #d90429 100%);
  --grad-icered-hover: linear-gradient(135deg, #ff6685 0%, #ff265c 52%, #e60033 100%);
  --grad-icered-text: linear-gradient(135deg, #ff758c 0%, #ff1e56 45%, #ff0844 100%);
  --shadow-icered: 0 4px 22px rgba(255, 8, 68, 0.45);
  --shadow-icered-hover: 0 6px 30px rgba(255, 8, 68, 0.7);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 35px rgba(0, 242, 254, 0.25);
  --shadow-featured: 0 10px 40px rgba(0, 242, 254, 0.35);

  --transition-fast: 0.18s ease;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 基础重置 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body { position: relative; min-height: 100vh; overflow-x: hidden; background-color: transparent;
}

/* ==========================================================================
   动态背景系统 (纯 CSS GPU 硬件加速，零 JS 依赖，超低能耗 60FPS)
   ========================================================================== */

/* ==========================================================================
   梦幻动态背景系统：璀璨星空、唯美明月、流星与绚丽星云 (纯原生 CSS 60FPS)
   ========================================================================== */
.dynamic-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0; overflow: hidden; pointer-events: none;
}

/* 1. 梦幻星空星尘层 */
.stars-field {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
}

.stars-small {
  width: 1.5px;
  height: 1.5px;
  box-shadow: 
    1948px 1226px rgba(255, 255, 255, 0.68),
    1693px 842px rgba(255, 255, 255, 0.57),
    1311px 80px rgba(255, 255, 255, 0.57),
    1717px 1065px rgba(255, 255, 255, 0.39),
    1630px 1421px rgba(255, 255, 255, 0.70),
    1966px 273px rgba(255, 255, 255, 0.31),
    1440px 1248px rgba(255, 255, 255, 0.32),
    971px 468px rgba(255, 255, 255, 0.47),
    1475px 60px rgba(255, 255, 255, 0.50),
    1668px 649px rgba(255, 255, 255, 0.58),
    266px 1359px rgba(255, 255, 255, 0.46),
    388px 1316px rgba(255, 255, 255, 0.33),
    749px 1144px rgba(255, 255, 255, 0.38),
    66px 1469px rgba(255, 255, 255, 0.33),
    1456px 1415px rgba(255, 255, 255, 0.39),
    1435px 108px rgba(255, 255, 255, 0.28),
    920px 1173px rgba(255, 255, 255, 0.64),
    827px 733px rgba(255, 255, 255, 0.32),
    2074px 916px rgba(255, 255, 255, 0.39),
    1177px 845px rgba(255, 255, 255, 0.61),
    1253px 1145px rgba(255, 255, 255, 0.69),
    1018px 942px rgba(255, 255, 255, 0.39),
    1389px 861px rgba(255, 255, 255, 0.34),
    1083px 26px rgba(255, 255, 255, 0.27),
    1016px 563px rgba(255, 255, 255, 0.37),
    2105px 96px rgba(255, 255, 255, 0.39),
    867px 750px rgba(255, 255, 255, 0.51),
    418px 151px rgba(255, 255, 255, 0.46),
    1676px 424px rgba(255, 255, 255, 0.44),
    1155px 693px rgba(255, 255, 255, 0.63),
    1975px 84px rgba(255, 255, 255, 0.32),
    650px 721px rgba(255, 255, 255, 0.59),
    298px 230px rgba(255, 255, 255, 0.29),
    1835px 736px rgba(255, 255, 255, 0.50),
    1779px 1362px rgba(255, 255, 255, 0.51),
    1045px 1236px rgba(255, 255, 255, 0.50),
    550px 981px rgba(255, 255, 255, 0.67),
    1211px 1222px rgba(255, 255, 255, 0.30),
    1745px 1085px rgba(255, 255, 255, 0.48),
    869px 1195px rgba(255, 255, 255, 0.50),
    1698px 676px rgba(255, 255, 255, 0.54),
    750px 153px rgba(255, 255, 255, 0.34),
    1142px 252px rgba(255, 255, 255, 0.54),
    1589px 98px rgba(255, 255, 255, 0.42),
    810px 315px rgba(255, 255, 255, 0.63),
    1919px 29px rgba(255, 255, 255, 0.46),
    1435px 1364px rgba(255, 255, 255, 0.53),
    273px 446px rgba(255, 255, 255, 0.59),
    1551px 899px rgba(255, 255, 255, 0.37),
    1784px 349px rgba(255, 255, 255, 0.51),
    1890px 920px rgba(255, 255, 255, 0.30),
    586px 238px rgba(255, 255, 255, 0.38),
    988px 427px rgba(255, 255, 255, 0.48),
    1812px 613px rgba(255, 255, 255, 0.35),
    1776px 1421px rgba(255, 255, 255, 0.61),
    1796px 475px rgba(255, 255, 255, 0.56),
    588px 1400px rgba(255, 255, 255, 0.38),
    1270px 322px rgba(255, 255, 255, 0.27),
    357px 866px rgba(255, 255, 255, 0.40),
    968px 656px rgba(255, 255, 255, 0.52),
    1818px 317px rgba(255, 255, 255, 0.36),
    1624px 475px rgba(255, 255, 255, 0.57),
    1302px 255px rgba(255, 255, 255, 0.42),
    1770px 281px rgba(255, 255, 255, 0.56),
    1744px 1179px rgba(255, 255, 255, 0.28),
    2140px 573px rgba(255, 255, 255, 0.65),
    1676px 589px rgba(255, 255, 255, 0.53),
    1268px 351px rgba(255, 255, 255, 0.54),
    1833px 485px rgba(255, 255, 255, 0.43),
    2087px 115px rgba(255, 255, 255, 0.37);
  animation: starsTwinkle1 5s infinite ease-in-out alternate;
}

.stars-medium {
  width: 2.2px;
  height: 2.2px;
  box-shadow: 
    1948px 1226px rgba(255, 255, 255, 0.83),
    1693px 842px rgba(255, 255, 255, 0.74),
    1311px 80px rgba(255, 255, 255, 0.73),
    1717px 1065px rgba(255, 255, 255, 0.58),
    1630px 1421px rgba(255, 255, 255, 0.85),
    1966px 273px rgba(255, 255, 255, 0.50),
    1440px 1248px rgba(255, 255, 255, 0.52),
    971px 468px rgba(255, 255, 255, 0.65),
    1475px 60px rgba(255, 255, 255, 0.67),
    1668px 649px rgba(255, 255, 255, 0.74),
    266px 1359px rgba(255, 255, 255, 0.64),
    388px 1316px rgba(255, 255, 255, 0.52),
    749px 1144px rgba(255, 255, 255, 0.56),
    66px 1469px rgba(255, 255, 255, 0.52),
    1456px 1415px rgba(255, 255, 255, 0.57),
    1435px 108px rgba(255, 255, 255, 0.48),
    920px 1173px rgba(255, 255, 255, 0.80),
    827px 733px rgba(255, 255, 255, 0.51),
    2074px 916px rgba(255, 255, 255, 0.58),
    1177px 845px rgba(255, 255, 255, 0.77),
    1253px 1145px rgba(255, 255, 255, 0.84),
    1018px 942px rgba(255, 255, 255, 0.57),
    1389px 861px rgba(255, 255, 255, 0.53),
    1083px 26px rgba(255, 255, 255, 0.47),
    1016px 563px rgba(255, 255, 255, 0.56),
    2105px 96px rgba(255, 255, 255, 0.58),
    867px 750px rgba(255, 255, 255, 0.68),
    418px 151px rgba(255, 255, 255, 0.64),
    1676px 424px rgba(255, 255, 255, 0.62),
    1155px 693px rgba(255, 255, 255, 0.79),
    1975px 84px rgba(255, 255, 255, 0.51),
    650px 721px rgba(255, 255, 255, 0.75),
    298px 230px rgba(255, 255, 255, 0.48),
    1835px 736px rgba(255, 255, 255, 0.67),
    1779px 1362px rgba(255, 255, 255, 0.68),
    1045px 1236px rgba(255, 255, 255, 0.67),
    550px 981px rgba(255, 255, 255, 0.82),
    1211px 1222px rgba(255, 255, 255, 0.50),
    1745px 1085px rgba(255, 255, 255, 0.65),
    869px 1195px rgba(255, 255, 255, 0.67);
  animation: starsTwinkle2 7s infinite ease-in-out alternate 1.5s;
}

.stars-large {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  box-shadow: 
    1948px 1226px rgba(255, 255, 255, 0.94),
    1693px 842px rgba(255, 255, 255, 0.87),
    1311px 80px rgba(255, 255, 255, 0.86),
    1717px 1065px rgba(255, 255, 255, 0.75),
    1630px 1421px rgba(255, 255, 255, 0.95),
    1966px 273px rgba(255, 255, 255, 0.69),
    1440px 1248px rgba(255, 255, 255, 0.70),
    971px 468px rgba(255, 255, 255, 0.80),
    1475px 60px rgba(255, 255, 255, 0.81),
    1668px 649px rgba(255, 255, 255, 0.87),
    266px 1359px rgba(255, 255, 255, 0.79),
    388px 1316px rgba(255, 255, 255, 0.71),
    749px 1144px rgba(255, 255, 255, 0.74),
    66px 1469px rgba(255, 255, 255, 0.71),
    1456px 1415px rgba(255, 255, 255, 0.74),
    1435px 108px rgba(255, 255, 255, 0.67),
    920px 1173px rgba(255, 255, 255, 0.91),
    827px 733px rgba(255, 255, 255, 0.70);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85));
  animation: starsTwinkle3 6s infinite ease-in-out alternate 3s;
}

@keyframes starsTwinkle1 {
  0% { opacity: 0.45; }
  50% { opacity: 0.85; }
  100% { opacity: 0.55; }
}

@keyframes starsTwinkle2 {
  0% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 0.95; transform: scale(1.1); }
  100% { opacity: 0.4; transform: scale(0.95); }
}

@keyframes starsTwinkle3 {
  0% { opacity: 0.5; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); }
  50% { opacity: 1; filter: drop-shadow(0 0 7px rgba(255, 255, 255, 1)); }
  100% { opacity: 0.6; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)); }
}

/* 2. 划过夜空的高画质七彩梦幻流星系统 */
.shooting-star {
  position: absolute;
  height: 3px;
  border-radius: var(--radius-full);
  pointer-events: none;
  opacity: 0;
  transform-origin: left center;
  z-index: 10;
}

/* 流星璀璨头部星核 (Comet Nucleus) */
.shooting-star::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
}

/* 流星头部钻石星芒与发光辉晕 (Diamond Cross Flare) */
.shooting-star::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.9) 35%, transparent 75%);
}

/* ① 冰红流星 (Ice Red / Crimson) */
.meteor-icered {
  width: 250px;
  background: linear-gradient(270deg, #ffffff 0%, #ff4d6d 15%, #ff0844 45%, #d90429 70%, transparent 100%);
  filter: drop-shadow(0 0 8px #ff0844) drop-shadow(0 0 20px rgba(255, 8, 68, 0.9));
}
.meteor-icered::before {
  box-shadow: 0 0 12px #ffffff, 0 0 24px #ff0844, 0 0 40px #ff4d6d;
}
.meteor-icered::after {
  box-shadow: 0 0 10px #ff4d6d;
}

/* ② 极光青流星 (Aurora Cyan / Emerald) */
.meteor-cyan {
  width: 260px;
  background: linear-gradient(270deg, #ffffff 0%, #00f2fe 15%, #38bdf8 45%, #10b981 75%, transparent 100%);
  filter: drop-shadow(0 0 8px #00f2fe) drop-shadow(0 0 20px rgba(0, 242, 254, 0.9));
}
.meteor-cyan::before {
  box-shadow: 0 0 12px #ffffff, 0 0 24px #00f2fe, 0 0 40px #10b981;
}
.meteor-cyan::after {
  box-shadow: 0 0 10px #00f2fe;
}

/* ③ 琉璃金流星 (Solar Amber Gold) */
.meteor-gold {
  width: 240px;
  background: linear-gradient(270deg, #ffffff 0%, #fde047 15%, #f59e0b 45%, #d97706 75%, transparent 100%);
  filter: drop-shadow(0 0 8px #fde047) drop-shadow(0 0 20px rgba(245, 158, 11, 0.9));
}
.meteor-gold::before {
  box-shadow: 0 0 12px #ffffff, 0 0 24px #f59e0b, 0 0 40px #fde047;
}
.meteor-gold::after {
  box-shadow: 0 0 10px #fde047;
}

/* ④ 魅影紫流星 (Cosmic Violet / Amethyst) */
.meteor-purple {
  width: 240px;
  background: linear-gradient(270deg, #ffffff 0%, #e879f9 15%, #c084fc 45%, #818cf8 75%, transparent 100%);
  filter: drop-shadow(0 0 8px #e879f9) drop-shadow(0 0 20px rgba(192, 132, 252, 0.9));
}
.meteor-purple::before {
  box-shadow: 0 0 12px #ffffff, 0 0 24px #c084fc, 0 0 40px #e879f9;
}
.meteor-purple::after {
  box-shadow: 0 0 10px #e879f9;
}

/* ⑤ 钻石冰蓝流星 (Diamond Ice Blue) */
.meteor-blue {
  width: 260px;
  background: linear-gradient(270deg, #ffffff 0%, #bae6fd 15%, #7dd3fc 45%, #38bdf8 75%, transparent 100%);
  filter: drop-shadow(0 0 8px #bae6fd) drop-shadow(0 0 20px rgba(56, 189, 248, 0.9));
}
.meteor-blue::before {
  box-shadow: 0 0 12px #ffffff, 0 0 24px #38bdf8, 0 0 40px #bae6fd;
}
.meteor-blue::after {
  box-shadow: 0 0 10px #bae6fd;
}

/* ⑥ 珊瑚粉流星 (Fairy Coral Rose) */
.meteor-coral {
  width: 230px;
  background: linear-gradient(270deg, #ffffff 0%, #fda4af 15%, #fb7185 45%, #f43f5e 75%, transparent 100%);
  filter: drop-shadow(0 0 8px #fda4af) drop-shadow(0 0 20px rgba(251, 113, 133, 0.9));
}
.meteor-coral::before {
  box-shadow: 0 0 12px #ffffff, 0 0 24px #fb7185, 0 0 40px #fda4af;
}
.meteor-coral::after {
  box-shadow: 0 0 10px #fda4af;
}

/* ==========================================================================
   流星高频开阔空域轨迹（高频出现、顺滑长拖尾、醒目无遮挡）
   ========================================================================== */
/* 1. 冰红流星：左上方开阔夜空飞越 */
.meteor-pos-1 {
  top: 5%;
  left: 12%;
  animation: meteorFly1 4.5s infinite linear 0s;
}

/* 2. 极光青流星：划过明月右下方中央开阔深空 */
.meteor-pos-2 {
  top: 15%;
  left: 36%;
  animation: meteorFly2 5.2s infinite linear 0.8s;
}

/* 3. 琉璃金流星：高空俯冲，横贯上空 */
.meteor-pos-3 {
  top: 2%;
  left: 45%;
  animation: meteorFly3 4.8s infinite linear 1.6s;
}

/* 4. 魅影紫流星：右侧控制台右侧深空掠过 */
.meteor-pos-4 {
  top: 12%;
  right: 4%;
  animation: meteorFly4 5.5s infinite linear 2.4s;
}

/* 5. 钻石冰蓝流星：左侧大标题上方夜幕划过 */
.meteor-pos-5 {
  top: 18%;
  left: 5%;
  animation: meteorFly5 4.2s infinite linear 3.2s;
}

/* 6. 珊瑚粉流星：首屏下方开阔空域掠过 */
.meteor-pos-6 {
  top: 52%;
  left: 20%;
  animation: meteorFly6 5.8s infinite linear 4.0s;
}

@keyframes meteorFly1 {
  0% {
    opacity: 0;
    transform: rotate(35deg) translateX(-150px) scaleX(0.2);
  }
  10% {
    opacity: 1;
    transform: rotate(35deg) translateX(50px) scaleX(1);
  }
  32% {
    opacity: 0;
    transform: rotate(35deg) translateX(450px) scaleX(0.6);
  }
  100% {
    opacity: 0;
    transform: rotate(35deg) translateX(450px);
  }
}

@keyframes meteorFly2 {
  0% {
    opacity: 0;
    transform: rotate(38deg) translateX(-140px) scaleX(0.2);
  }
  10% {
    opacity: 1;
    transform: rotate(38deg) translateX(60px) scaleX(1);
  }
  30% {
    opacity: 0;
    transform: rotate(38deg) translateX(480px) scaleX(0.6);
  }
  100% {
    opacity: 0;
    transform: rotate(38deg) translateX(480px);
  }
}

@keyframes meteorFly3 {
  0% {
    opacity: 0;
    transform: rotate(33deg) translateX(-150px) scaleX(0.2);
  }
  10% {
    opacity: 1;
    transform: rotate(33deg) translateX(50px) scaleX(1);
  }
  32% {
    opacity: 0;
    transform: rotate(33deg) translateX(460px) scaleX(0.6);
  }
  100% {
    opacity: 0;
    transform: rotate(33deg) translateX(460px);
  }
}

@keyframes meteorFly4 {
  0% {
    opacity: 0;
    transform: rotate(36deg) translateX(-140px) scaleX(0.2);
  }
  10% {
    opacity: 1;
    transform: rotate(36deg) translateX(50px) scaleX(1);
  }
  30% {
    opacity: 0;
    transform: rotate(36deg) translateX(440px) scaleX(0.6);
  }
  100% {
    opacity: 0;
    transform: rotate(36deg) translateX(440px);
  }
}

@keyframes meteorFly5 {
  0% {
    opacity: 0;
    transform: rotate(34deg) translateX(-130px) scaleX(0.2);
  }
  10% {
    opacity: 1;
    transform: rotate(34deg) translateX(40px) scaleX(1);
  }
  32% {
    opacity: 0;
    transform: rotate(34deg) translateX(420px) scaleX(0.6);
  }
  100% {
    opacity: 0;
    transform: rotate(34deg) translateX(420px);
  }
}

@keyframes meteorFly6 {
  0% {
    opacity: 0;
    transform: rotate(32deg) translateX(-140px) scaleX(0.2);
  }
  10% {
    opacity: 1;
    transform: rotate(32deg) translateX(50px) scaleX(1);
  }
  30% {
    opacity: 0;
    transform: rotate(32deg) translateX(450px) scaleX(0.6);
  }
  100% {
    opacity: 0;
    transform: rotate(32deg) translateX(450px);
  }
}

/* 3. 梦幻皎洁明月系统 */
.dreamy-moon-wrapper { position: absolute; top: 65px; left: 46%; width: 140px; height: 140px; z-index: 1; pointer-events: none; animation: moonLevitate 20s infinite ease-in-out alternate; }

.moon-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 480px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(224, 242, 254, 0.18) 0%, rgba(186, 230, 253, 0.08) 40%, rgba(147, 197, 253, 0.03) 65%, transparent 75%);
  filter: blur(50px);
  border-radius: 50%;
  pointer-events: none;
  animation: moonGlowBreath 10s infinite ease-in-out alternate;
}

.moon-halo-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(186, 230, 253, 0.15) 50%, transparent 70%);
  filter: blur(20px);
  border-radius: 50%;
  pointer-events: none;
}

.dreamy-moon-svg {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 60px rgba(186, 230, 253, 0.35));
  animation: moonLuster 12s infinite ease-in-out alternate;
}

@keyframes moonLevitate {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-10px, 12px, 0); }
  100% { transform: translate3d(8px, -8px, 0); }
}

@keyframes moonGlowBreath {
  0% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.98); }
}

@keyframes moonLuster {
  0% { filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 50px rgba(186, 230, 253, 0.3)); }
  50% { filter: drop-shadow(0 0 35px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 80px rgba(186, 230, 253, 0.5)); }
  100% { filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 55px rgba(186, 230, 253, 0.35)); }
}

/* 拂过明月的轻纱缥缈流云 */
.moon-cloud {
  position: absolute;
  border-radius: var(--radius-full);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.22) 0%, rgba(186, 230, 253, 0.1) 50%, transparent 75%);
  filter: blur(14px);
  pointer-events: none;
}

.moon-cloud-1 {
  width: 220px;
  height: 44px;
  top: 48%;
  left: -40px;
  animation: cloudDrift1 22s infinite alternate ease-in-out;
}

.moon-cloud-2 {
  width: 170px;
  height: 36px;
  top: 68%;
  left: 20px;
  animation: cloudDrift2 26s infinite alternate ease-in-out;
}

@keyframes cloudDrift1 {
  0% { transform: translate3d(0, 0, 0) scaleX(1); opacity: 0.65; }
  50% { transform: translate3d(30px, -6px, 0) scaleX(1.15); opacity: 0.85; }
  100% { transform: translate3d(-20px, 8px, 0) scaleX(0.9); opacity: 0.6; }
}

@keyframes cloudDrift2 {
  0% { transform: translate3d(0, 0, 0) scaleX(1); opacity: 0.55; }
  50% { transform: translate3d(-25px, 6px, 0) scaleX(1.1); opacity: 0.8; }
  100% { transform: translate3d(25px, -5px, 0) scaleX(0.95); opacity: 0.5; }
}

/* 4. 梦幻星云光斑系统 (玫瑰冰红、神秘紫罗兰与波导极光蓝) */
.nebula-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

/* 左上方玫瑰冰红星云 (与冰红标题/按钮交相辉映) */
.nebula-rose {
  top: -12%;
  left: 5%;
  width: 55vw;
  height: 55vw;
  max-width: 750px;
  max-height: 750px;
  background: radial-gradient(circle, rgba(255, 77, 109, 0.15) 0%, rgba(225, 29, 72, 0.06) 45%, transparent 72%);
  filter: blur(70px);
  animation: nebulaFloatRose 24s infinite alternate ease-in-out;
}

/* 右下方神秘紫罗兰星云 */
.nebula-purple {
  top: 35%;
  right: -8%;
  width: 60vw;
  height: 60vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.14) 0%, rgba(99, 102, 241, 0.05) 50%, transparent 75%);
  filter: blur(75px);
  animation: nebulaFloatPurple 30s infinite alternate ease-in-out;
}

/* 底部中央极光波导蓝 */
.nebula-cyan {
  bottom: -20%;
  left: 22%;
  width: 50vw;
  height: 50vw;
  max-width: 680px;
  max-height: 680px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.11) 0%, rgba(0, 242, 254, 0.03) 55%, transparent 78%);
  filter: blur(65px);
  animation: nebulaFloatCyan 26s infinite alternate ease-in-out;
}

/* 月亮辐射至全屏的柔和月华漫射 */
.nebula-moonlight {
  top: -5%;
  right: 5%;
  width: 70vw;
  height: 70vw;
  max-width: 950px;
  max-height: 950px;
  background: radial-gradient(circle, rgba(224, 242, 254, 0.12) 0%, rgba(186, 230, 253, 0.05) 35%, rgba(147, 197, 253, 0.02) 60%, transparent 75%);
  filter: blur(80px);
  animation: nebulaFloatMoonlight 28s infinite alternate ease-in-out;
}

@keyframes nebulaFloatRose {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(80px, 60px, 0) scale(1.12); }
  100% { transform: translate3d(-50px, 110px, 0) scale(0.96); }
}

@keyframes nebulaFloatPurple {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-110px, -70px, 0) scale(1.15); }
  100% { transform: translate3d(60px, -100px, 0) scale(0.92); }
}

@keyframes nebulaFloatCyan {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(70px, -50px, 0) scale(1.1); }
  100% { transform: translate3d(-80px, 40px, 0) scale(0.95); }
}

@keyframes nebulaFloatMoonlight {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate3d(-60px, 40px, 0) scale(1.08); opacity: 1; }
  100% { transform: translate3d(40px, -30px, 0) scale(0.94); opacity: 0.75; }
}

@media (max-width: 991px) {
  .dreamy-moon-wrapper { position: absolute; top: 65px; left: 46%; width: 140px; height: 140px; z-index: 1; pointer-events: none; animation: moonLevitate 20s infinite ease-in-out alternate; }
}

@media (max-width: 576px) {
  .dreamy-moon-wrapper { position: absolute; top: 65px; left: 46%; width: 140px; height: 140px; z-index: 1; pointer-events: none; animation: moonLevitate 20s infinite ease-in-out alternate; }
}

/* 细微科技星空织网 */
.cyber-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, transparent 85%);
  pointer-events: none;
}

/* ==========================================================================
   排版与基础组件
   ========================================================================== */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

img, svg {
  display: block;
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.text-gradient,
.text-gradient-cyan {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 冰红色渐变文字 */
.text-gradient-icered,
.hero-title .text-gradient {
  background: var(--grad-icered-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(255, 8, 68, 0.35));
}

.text-gradient-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255, 8, 68, 0.12);
  color: #ff4d6d;
  border: 1px solid rgba(255, 8, 68, 0.35);
  transition: all var(--transition-fast);
}

.badge-tag:hover {
  background: rgba(255, 8, 68, 0.22);
  color: #ff2a5f;
  border-color: rgba(255, 8, 68, 0.6);
}

.badge-gold {
  background: rgba(251, 191, 36, 0.12);
  color: var(--accent-gold);
  border-color: rgba(251, 191, 36, 0.3);
}

.section {
  padding: 80px 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 52px;
}

.section-badge {
  display: inline-block;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ff4d6d;
  background: rgba(255, 8, 68, 0.1);
  border: 1px solid rgba(255, 8, 68, 0.28);
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 16px;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ==========================================================================
   按钮规范 (严格执行 CTA 规则)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  outline: none;
  transition: all var(--transition-normal);
  white-space: nowrap;
  font-family: inherit;
  text-align: center;
}

.btn-primary {
  background: var(--grad-icered);
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: var(--shadow-icered);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--grad-icered-hover);
  box-shadow: var(--shadow-icered-hover);
  color: #ffffff;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 14px rgba(255, 8, 68, 0.5);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 242, 254, 0.35);
}

.btn-outline:hover {
  background: rgba(0, 242, 254, 0.12);
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.88rem;
}

.btn-md {
  padding: 12px 24px;
  font-size: 0.98rem;
}

.btn-lg {
  padding: 15px 32px;
  font-size: 1.08rem;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-glow {
  position: relative;
}

.btn-glow::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--grad-icered);
  opacity: 0.45;
  filter: blur(14px);
  z-index: -1;
  transition: opacity var(--transition-normal);
}

.btn-glow:hover::after {
  opacity: 0.85;
}

/* ==========================================================================
   顶部导航栏 (Navbar)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(8, 12, 22, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(56, 189, 248, 0.12);
  transition: all var(--transition-fast);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand-logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-logo-img {
  height: 46px;
  width: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: #cbd5e1;
  position: relative;
  padding: 6px 0;
}

.nav-link:hover {
  color: var(--accent-cyan);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--grad-primary);
  transition: width var(--transition-fast);
}

.nav-link:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ==========================================================================
   Hero 主视觉板块
   ========================================================================== */
.hero-section {
  padding: 90px 0 60px;
  position: relative;
  overflow: hidden;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.hero-announcement {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(0, 242, 254, 0.08);
  border: 1px solid rgba(0, 242, 254, 0.28);
  border-radius: var(--radius-full);
  margin-bottom: 22px;
  font-size: 0.88rem;
  color: #e2e8f0;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-cyan);
  animation: pulseLight 1.8s infinite;
}

@keyframes pulseLight {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(0, 242, 254, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0); }
}

.hero-title {
  font-size: 3.1rem;
  font-weight: 900;
  line-height: 1.18;
  color: #ffffff;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 34px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.hero-trust-list {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #94a3b8;
}

.hero-trust-item svg {
  color: var(--accent-cyan);
}

/* Hero 右侧拟态控制台卡片 */
.hero-card-preview {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
  position: relative;
}

.hero-card-preview::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--grad-card-border);
  z-index: -1;
  opacity: 0.6;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.preview-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--accent-emerald);
}

.speed-meter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.meter-box {
  background: rgba(14, 21, 38, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.meter-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.meter-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-mono);
}

.meter-unit {
  font-size: 0.8rem;
  color: var(--accent-cyan);
  margin-left: 2px;
}

.progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: var(--grad-primary);
  border-radius: var(--radius-full);
}

.preview-nodes-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mini-node-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.mini-node-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.mini-node-ping {
  color: var(--accent-emerald);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* ==========================================================================
   核心数据统计条 (Stats Bar)
   ========================================================================== */
.stats-bar-section {
  padding: 30px 0;
  position: relative;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  backdrop-filter: blur(14px);
}

.stat-item {
  text-align: center;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 0;
  height: 60%;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.stat-value {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffffff;
  font-family: var(--font-mono);
  margin-bottom: 6px;
}

.stat-label {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   实时节点表格板块 (Live Nodes)
   ========================================================================== */
.nodes-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
}

.nodes-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-color);
}

.nodes-live-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--accent-emerald);
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.nodes-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.nodes-table th {
  padding: 14px 20px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nodes-table td {
  padding: 16px 20px;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
}

.nodes-table tr:hover td {
  background: rgba(56, 189, 248, 0.04);
}

.node-flag {
  font-size: 1.25rem;
  margin-right: 8px;
  vertical-align: middle;
}

.node-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.node-tag-iepl {
  background: rgba(0, 242, 254, 0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 242, 254, 0.25);
}

.node-tag-isp {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.ping-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-emerald);
}

/* ==========================================================================
   核心优势卡片网格 (Features Grid)
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-glow);
  background: var(--bg-card-hover);
}

.feature-icon-wrapper {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  margin-bottom: 22px;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

.feature-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ==========================================================================
   出海应用场景 (Scenarios)
   ========================================================================== */
.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.scenario-card {
  background: var(--bg-card-alt);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: left;
  transition: all var(--transition-normal);
}

.scenario-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(18, 26, 47, 0.85);
  transform: translateY(-3px);
}

.scenario-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  display: block;
}

.scenario-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.scenario-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   价格方案板块：严格执行“所有价格要同排”要求！
   在桌面端 (>=992px) 纯 CSS 4 列单排布局，卡片高度完全等高对其！
   ========================================================================== */
.pricing-section {
  position: relative;
}

.pricing-grid-same-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all var(--transition-normal);
  backdrop-filter: blur(12px);
}

.pricing-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-glow);
}

/* 热门推荐卡片高亮 (Copper 畅享版 - 冰红专属高光) */
.pricing-card-featured {
  background: linear-gradient(180deg, rgba(28, 16, 26, 0.95) 0%, rgba(14, 10, 20, 0.9) 100%);
  border: 2px solid #ff0844;
  box-shadow: 0 10px 40px rgba(255, 8, 68, 0.38);
}

.pricing-card-featured .pricing-currency {
  color: #ff4d6d;
}

.pricing-card-featured .pricing-feature-item svg {
  color: #ff4d6d;
}

.pricing-badge-popular {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-icered);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(255, 8, 68, 0.55);
  white-space: nowrap;
}

.pricing-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.pricing-tier-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.pricing-tier-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  min-height: 38px;
}

.pricing-price-box {
  margin-bottom: 22px;
}

.pricing-currency {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.pricing-amount {
  font-size: 2.75rem;
  font-weight: 900;
  color: #ffffff;
  font-family: var(--font-mono);
  letter-spacing: -1px;
}

.pricing-period {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.pricing-monthly-calc {
  font-size: 0.82rem;
  color: var(--accent-emerald);
  font-weight: 600;
  margin-top: 4px;
}

.pricing-features-list {
  list-style: none;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.pricing-feature-item svg {
  flex-shrink: 0;
  color: var(--accent-cyan);
  margin-top: 2px;
}

.pricing-cta-wrap {
  margin-top: auto;
}

/* ==========================================================================
   主流客户端生态 (Clients Grid)
   ========================================================================== */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.client-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 20px 14px;
  text-align: center;
  transition: all var(--transition-fast);
}

.client-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-3px);
  background: rgba(18, 26, 47, 0.95);
}

.client-icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.client-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.client-os {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ==========================================================================
   知识库与文章预览板块 (Articles Preview Section)
   ========================================================================== */
.articles-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.article-preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-normal);
}

.article-preview-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 8, 68, 0.45);
  box-shadow: 0 8px 30px rgba(255, 8, 68, 0.22);
}

.article-meta-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.article-preview-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.45;
  color: #ffffff;
  margin-bottom: 12px;
}

.article-preview-title a:hover {
  color: #ff4d6d;
}

.article-preview-snippet {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.article-preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.article-readmore-link {
  color: #ff4d6d;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
}

.article-readmore-link:hover {
  color: #ff0844;
  text-decoration: underline;
  transform: translateX(3px);
}

/* ==========================================================================
   用户真实评价板块 (Testimonials)
   ========================================================================== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-normal);
}

.review-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-4px);
}

.review-stars {
  color: var(--accent-gold);
  font-size: 1.1rem;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

.review-content {
  font-size: 0.94rem;
  color: #cbd5e1;
  line-height: 1.65;
  margin-bottom: 20px;
  font-style: normal;
}

.review-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
}

.user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #04101e;
  font-size: 1rem;
}

.user-details h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.user-details p {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.user-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--accent-emerald);
  margin-left: auto;
}

/* ==========================================================================
   常见问题 FAQ 板块 (纯 CSS / 原生轻量实现)
   ========================================================================== */
.faq-accordion-wrap {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item:hover {
  border-color: rgba(255, 8, 68, 0.35);
}

.faq-item.active {
  border-color: rgba(255, 8, 68, 0.5);
}

.faq-question {
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  background: transparent;
  border: none;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: inherit;
}

.faq-icon-arrow {
  transition: transform var(--transition-fast), color var(--transition-fast);
  color: #ff4d6d;
}

.faq-item:hover .faq-icon-arrow,
.faq-item.active .faq-icon-arrow {
  color: #ff0844;
}

.faq-item.active .faq-icon-arrow {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, padding 0.3s ease;
  background: rgba(14, 21, 38, 0.5);
  padding: 0 24px;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.faq-answer p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ==========================================================================
   底部外链与权威参考链接 (External Authority Links)
   ========================================================================== */
.external-links-section {
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 15, 28, 0.6);
}

.external-links-title {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.external-links-grid {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ext-link-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: #94a3b8;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all var(--transition-fast);
}

.ext-link-item:hover {
  color: var(--accent-cyan);
  border-color: rgba(0, 242, 254, 0.3);
  background: rgba(0, 242, 254, 0.08);
}

/* ==========================================================================
   全站页脚 (Footer)
   ========================================================================== */
.site-footer {
  padding: 60px 0 30px;
  background: #060911;
  position: relative;
  font-size: 0.9rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-top: 16px;
  max-width: 320px;
}

.footer-heading {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-link {
  color: var(--text-secondary);
}

.footer-nav-link:hover {
  color: var(--accent-cyan);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 28px;
  color: var(--text-muted);
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 16px;
}

/* ==========================================================================
   响应式断点优化 (Mobile / Tablet Responsive)
   ========================================================================== */
@media (max-width: 1100px) {
  /* 价格同排在极窄屏幕允许横向滑动以保证同排展示效果 */
  .pricing-grid-same-row {
    gap: 14px;
  }
  .pricing-card {
    padding: 24px 16px;
  }
}

@media (max-width: 991px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-title {
    font-size: 2.5rem;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .scenarios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .articles-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .stat-item:nth-child(2)::after {
    display: none;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  /* 移动端/小平板保留同排滑动或 2x2 弹性布局 */
  .pricing-grid-same-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .site-header .nav-menu {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    background: #0a0f1d;
    flex-direction: column;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
  }
  .site-header .nav-menu.open {
    display: flex;
  }
  .mobile-toggle {
    display: block;
  }
  .hero-title {
    font-size: 2rem;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .scenarios-grid {
    grid-template-columns: 1fr;
  }
  .articles-preview-grid {
    grid-template-columns: 1fr;
  }
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-grid-same-row {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}