/* ===================================================================
   Nexitally 奶昔机场 (nexitally.surf) - 纯原生 CSS 极速样式表
   零外部 JS 框架依赖 · 硬件加速流畅动画 · 秒开级性能 · 暗黑科技奶昔风
=================================================================== */

:root {
  --bg-main: #060913;
  --bg-card: rgba(15, 23, 42, 0.72);
  --bg-card-hover: rgba(30, 41, 59, 0.82);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(255, 92, 147, 0.45);
  --border-cyan: rgba(0, 242, 254, 0.45);
  
  --primary-pink: #ff5c93;
  --primary-rose: #ff758c;
  --primary-cyan: #00f2fe;
  --primary-blue: #38bdf8;
  --primary-purple: #7928ca;
  --accent-gold: #fbbf24;
  --accent-green: #10b981;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-highlight: #ffffff;

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

  --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, "Liberation Mono", "Courier New", monospace;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--text-primary);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* 容器定义 */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================================================================
   动态背景系统 (Dynamic Milkshake & Aurora Canvas) - 纯 CSS 硬件加速
=================================================================== */
.dynamic-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 10%, #151a30 0%, #070a13 70%, #03050a 100%);
}

.cyber-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 30%, transparent 85%);
}

/* 极光发光光团 */
.aurora-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  will-change: transform;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.orb-1 {
  width: 550px;
  height: 550px;
  top: -100px;
  left: -100px;
  background: radial-gradient(circle, rgba(255, 92, 147, 0.4) 0%, rgba(121, 40, 202, 0.25) 60%, transparent 80%);
  animation: orbDrift1 22s infinite alternate;
}

.orb-2 {
  width: 600px;
  height: 600px;
  top: 20%;
  right: -150px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.35) 0%, rgba(56, 189, 248, 0.2) 60%, transparent 80%);
  animation: orbDrift2 26s infinite alternate-reverse;
}

.orb-3 {
  width: 650px;
  height: 650px;
  bottom: 5%;
  left: 20%;
  background: radial-gradient(circle, rgba(121, 40, 202, 0.3) 0%, rgba(255, 117, 140, 0.2) 60%, transparent 80%);
  animation: orbDrift3 28s infinite alternate;
}

@keyframes orbDrift1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(120px, 160px, 0) scale(1.15); }
  100% { transform: translate3d(60px, 80px, 0) scale(0.95); }
}

@keyframes orbDrift2 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-140px, 120px, 0) scale(1.1); }
  100% { transform: translate3d(-80px, 200px, 0) scale(1.05); }
}

@keyframes orbDrift3 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(100px, -140px, 0) scale(1.2); }
  100% { transform: translate3d(-100px, -60px, 0) scale(0.9); }
}


/* ===================================================================
   高密度星空星海系统 (Starfield Galaxy System) - 纯 CSS 硬件加速秒开
=================================================================== */
.stars-css-layer {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* 1. 微光密集繁星群 (180+ 颗微型恒星，遍布整个视口) */
.stars-sm {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    1632px 970px rgba(255, 255, 255, 0.58),
    1587px 1526px rgba(224, 242, 254, 0.69),
    1650px 521px rgba(224, 242, 254, 0.90),
    665px 2072px rgba(0, 242, 254, 0.71),
    796px 1572px rgba(224, 242, 254, 0.69),
    1076px 440px rgba(0, 242, 254, 0.59),
    69px 2036px rgba(255, 255, 255, 0.92),
    2318px 1413px rgba(255, 255, 255, 0.51),
    1326px 1591px rgba(255, 255, 255, 0.86),
    1669px 512px rgba(255, 255, 255, 0.72),
    1357px 1868px rgba(0, 242, 254, 0.72),
    2253px 506px rgba(255, 255, 255, 0.91),
    151px 1933px rgba(0, 242, 254, 0.92),
    1019px 574px rgba(255, 255, 255, 0.70),
    2417px 645px rgba(0, 242, 254, 0.71),
    1657px 1151px rgba(255, 255, 255, 0.58),
    1173px 1953px rgba(255, 255, 255, 0.57),
    2555px 1301px rgba(0, 242, 254, 0.80),
    2175px 138px rgba(255, 255, 255, 0.78),
    2147px 1249px rgba(224, 242, 254, 0.81),
    1145px 1880px rgba(224, 242, 254, 0.42),
    2185px 133px rgba(255, 255, 255, 0.42),
    2052px 1394px rgba(224, 242, 254, 0.68),
    22px 253px rgba(255, 255, 255, 0.51),
    196px 217px rgba(0, 242, 254, 0.84),
    1213px 192px rgba(224, 242, 254, 0.69),
    140px 154px rgba(224, 242, 254, 0.83),
    778px 1193px rgba(255, 255, 255, 0.57),
    1969px 1853px rgba(0, 242, 254, 0.91),
    317px 2185px rgba(255, 255, 255, 0.47),
    388px 1114px rgba(255, 255, 255, 0.57),
    540px 1710px rgba(255, 255, 255, 0.46),
    1122px 1743px rgba(0, 242, 254, 0.50),
    921px 1607px rgba(224, 242, 254, 0.68),
    1681px 2161px rgba(0, 242, 254, 0.71),
    1146px 1135px rgba(255, 255, 255, 0.49),
    1878px 275px rgba(0, 242, 254, 0.72),
    1575px 1948px rgba(224, 242, 254, 0.88),
    862px 972px rgba(0, 242, 254, 0.89),
    2524px 338px rgba(255, 255, 255, 0.62),
    1504px 352px rgba(0, 242, 254, 0.72),
    136px 328px rgba(255, 255, 255, 0.86),
    628px 77px rgba(224, 242, 254, 0.44),
    64px 1900px rgba(0, 242, 254, 0.50),
    1945px 2073px rgba(255, 255, 255, 0.77),
    504px 1341px rgba(0, 242, 254, 0.76),
    285px 560px rgba(255, 255, 255, 0.91),
    1725px 1515px rgba(224, 242, 254, 0.44),
    991px 1027px rgba(255, 255, 255, 0.64),
    1005px 381px rgba(0, 242, 254, 0.49),
    239px 1293px rgba(224, 242, 254, 0.85),
    1012px 680px rgba(0, 242, 254, 0.76),
    2499px 1037px rgba(224, 242, 254, 0.58),
    1978px 1297px rgba(255, 255, 255, 0.87),
    328px 1390px rgba(0, 242, 254, 0.53),
    1905px 163px rgba(255, 255, 255, 0.49),
    577px 1729px rgba(224, 242, 254, 0.92),
    56px 861px rgba(255, 255, 255, 0.59),
    392px 700px rgba(224, 242, 254, 0.42),
    1021px 867px rgba(255, 255, 255, 0.67),
    1088px 737px rgba(255, 255, 255, 0.43),
    1772px 1402px rgba(224, 242, 254, 0.71),
    1209px 232px rgba(224, 242, 254, 0.84),
    401px 798px rgba(224, 242, 254, 0.82),
    711px 1731px rgba(255, 255, 255, 0.60),
    1440px 610px rgba(224, 242, 254, 0.74),
    1560px 1455px rgba(255, 255, 255, 0.87),
    2077px 1319px rgba(255, 255, 255, 0.48),
    1785px 209px rgba(0, 242, 254, 0.64),
    1750px 57px rgba(0, 242, 254, 0.58),
    751px 274px rgba(224, 242, 254, 0.88),
    1475px 795px rgba(255, 255, 255, 0.78),
    1692px 1925px rgba(255, 255, 255, 0.53),
    1878px 301px rgba(0, 242, 254, 0.69),
    1499px 1992px rgba(224, 242, 254, 0.87),
    1807px 1102px rgba(255, 255, 255, 0.91),
    151px 1316px rgba(0, 242, 254, 0.62),
    2038px 1122px rgba(255, 255, 255, 0.52),
    2226px 652px rgba(0, 242, 254, 0.58),
    199px 1717px rgba(224, 242, 254, 0.75),
    1706px 2092px rgba(0, 242, 254, 0.87),
    1340px 2125px rgba(224, 242, 254, 0.87),
    229px 1119px rgba(0, 242, 254, 0.63),
    2359px 878px rgba(255, 255, 255, 0.54),
    1697px 1604px rgba(255, 255, 255, 0.73),
    1132px 1158px rgba(0, 242, 254, 0.41),
    2146px 285px rgba(0, 242, 254, 0.43),
    135px 936px rgba(0, 242, 254, 0.85),
    960px 1730px rgba(255, 255, 255, 0.89),
    1113px 1471px rgba(224, 242, 254, 0.83),
    1983px 1816px rgba(255, 255, 255, 0.86),
    130px 1041px rgba(255, 255, 255, 0.87),
    1310px 1036px rgba(224, 242, 254, 0.55),
    980px 105px rgba(224, 242, 254, 0.85),
    1027px 1133px rgba(224, 242, 254, 0.49),
    2012px 957px rgba(255, 255, 255, 0.40),
    1030px 2154px rgba(0, 242, 254, 0.68),
    943px 1013px rgba(255, 255, 255, 0.53),
    2473px 1994px rgba(255, 255, 255, 0.58),
    577px 328px rgba(224, 242, 254, 0.78),
    2477px 1094px rgba(0, 242, 254, 0.80),
    1469px 542px rgba(255, 255, 255, 0.71),
    373px 377px rgba(255, 255, 255, 0.55),
    541px 1073px rgba(224, 242, 254, 0.93),
    2357px 1419px rgba(255, 255, 255, 0.68),
    1320px 269px rgba(224, 242, 254, 0.66),
    284px 2096px rgba(255, 255, 255, 0.41),
    801px 881px rgba(255, 255, 255, 0.40),
    34px 918px rgba(224, 242, 254, 0.58),
    2026px 1743px rgba(0, 242, 254, 0.90),
    1382px 1058px rgba(0, 242, 254, 0.42),
    1540px 295px rgba(224, 242, 254, 0.54),
    685px 699px rgba(255, 255, 255, 0.88),
    2219px 851px rgba(255, 255, 255, 0.91),
    2432px 1075px rgba(255, 255, 255, 0.79),
    416px 469px rgba(255, 255, 255, 0.58),
    354px 1345px rgba(255, 255, 255, 0.65),
    2519px 547px rgba(0, 242, 254, 0.68),
    2110px 2108px rgba(255, 255, 255, 0.78),
    202px 1427px rgba(255, 255, 255, 0.88),
    700px 1551px rgba(255, 255, 255, 0.53),
    347px 1610px rgba(224, 242, 254, 0.86),
    2553px 1021px rgba(0, 242, 254, 0.72),
    1210px 1931px rgba(255, 255, 255, 0.42),
    1868px 1003px rgba(255, 255, 255, 0.90),
    2256px 1559px rgba(224, 242, 254, 0.80),
    905px 2158px rgba(224, 242, 254, 0.92),
    1369px 1456px rgba(255, 255, 255, 0.41),
    2295px 388px rgba(255, 255, 255, 0.73),
    1001px 758px rgba(255, 255, 255, 0.66),
    627px 784px rgba(224, 242, 254, 0.86),
    311px 1792px rgba(255, 255, 255, 0.70),
    748px 744px rgba(224, 242, 254, 0.65),
    2068px 1498px rgba(255, 255, 255, 0.45),
    214px 1993px rgba(255, 255, 255, 0.44),
    2297px 727px rgba(255, 255, 255, 0.47),
    2126px 1402px rgba(0, 242, 254, 0.74),
    1816px 385px rgba(255, 255, 255, 0.71),
    2488px 440px rgba(224, 242, 254, 0.43),
    351px 1964px rgba(0, 242, 254, 0.73),
    389px 830px rgba(224, 242, 254, 0.44),
    374px 1355px rgba(255, 255, 255, 0.62),
    1668px 689px rgba(255, 255, 255, 0.65),
    610px 551px rgba(255, 255, 255, 0.54),
    950px 1584px rgba(0, 242, 254, 0.46),
    1159px 122px rgba(255, 255, 255, 0.51),
    150px 1314px rgba(255, 255, 255, 0.52),
    2368px 2009px rgba(224, 242, 254, 0.52),
    804px 1253px rgba(0, 242, 254, 0.52),
    1134px 344px rgba(224, 242, 254, 0.91),
    741px 245px rgba(255, 255, 255, 0.54),
    1831px 722px rgba(224, 242, 254, 0.70),
    1072px 764px rgba(255, 255, 255, 0.69),
    1785px 479px rgba(255, 255, 255, 0.52),
    1665px 1215px rgba(0, 242, 254, 0.58),
    2047px 24px rgba(255, 255, 255, 0.88),
    2102px 62px rgba(0, 242, 254, 0.79),
    292px 1594px rgba(255, 255, 255, 0.65),
    974px 892px rgba(255, 255, 255, 0.78),
    1851px 851px rgba(224, 242, 254, 0.66),
    776px 1133px rgba(0, 242, 254, 0.45),
    2417px 543px rgba(224, 242, 254, 0.82),
    639px 1682px rgba(0, 242, 254, 0.47),
    2425px 1422px rgba(0, 242, 254, 0.88),
    204px 347px rgba(255, 255, 255, 0.77),
    2215px 2120px rgba(224, 242, 254, 0.52),
    1653px 700px rgba(255, 255, 255, 0.73),
    2250px 1821px rgba(224, 242, 254, 0.43),
    822px 2081px rgba(0, 242, 254, 0.80),
    1940px 1712px rgba(255, 255, 255, 0.58),
    2189px 533px rgba(255, 255, 255, 0.71),
    542px 2188px rgba(255, 255, 255, 0.87),
    1459px 1812px rgba(255, 255, 255, 0.90),
    1806px 613px rgba(255, 255, 255, 0.70),
    1902px 1792px rgba(255, 255, 255, 0.48),
    2398px 1450px rgba(255, 255, 255, 0.88),
    328px 610px rgba(255, 255, 255, 0.92),
    1193px 1711px rgba(255, 255, 255, 0.95),
    2209px 99px rgba(224, 242, 254, 0.47),
    1212px 821px rgba(224, 242, 254, 0.45);
  animation: starsTwinkleSm 4.5s ease-in-out infinite alternate;
}

/* 2. 中等明亮光晕恒星群 (80+ 颗彩光恒星，带有呼吸式闪烁) */
.stars-md {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    2488px 855px rgba(255, 255, 255, 0.59),
    2123px 869px rgba(0, 242, 254, 0.85),
    1832px 5px rgba(0, 242, 254, 0.74),
    1669px 1855px rgba(255, 255, 255, 0.59),
    2401px 2037px rgba(255, 215, 0, 0.93),
    1443px 27px rgba(0, 242, 254, 0.95),
    260px 1372px rgba(255, 117, 140, 0.66),
    1641px 534px rgba(255, 117, 140, 0.44),
    1802px 1364px rgba(56, 189, 248, 0.92),
    2092px 1819px rgba(255, 117, 140, 0.88),
    511px 98px rgba(0, 242, 254, 0.56),
    2533px 464px rgba(255, 255, 255, 0.76),
    1519px 1216px rgba(56, 189, 248, 0.73),
    965px 1828px rgba(255, 215, 0, 0.72),
    1099px 1986px rgba(0, 242, 254, 0.42),
    683px 1177px rgba(0, 242, 254, 0.60),
    1328px 1704px rgba(0, 242, 254, 0.59),
    481px 26px rgba(255, 215, 0, 0.77),
    33px 2002px rgba(255, 117, 140, 0.58),
    1588px 1641px rgba(255, 255, 255, 0.92),
    13px 853px rgba(56, 189, 248, 0.80),
    2257px 845px rgba(56, 189, 248, 0.65),
    1113px 1970px rgba(56, 189, 248, 0.60),
    459px 2017px rgba(0, 242, 254, 0.46),
    2306px 602px rgba(255, 255, 255, 0.42),
    2094px 2021px rgba(255, 215, 0, 0.76),
    860px 1269px rgba(56, 189, 248, 0.79),
    1791px 870px rgba(255, 215, 0, 0.92),
    1743px 46px rgba(255, 255, 255, 0.71),
    1390px 660px rgba(255, 117, 140, 0.81),
    984px 909px rgba(0, 242, 254, 0.63),
    789px 966px rgba(0, 242, 254, 0.43),
    501px 1750px rgba(255, 215, 0, 0.54),
    2101px 769px rgba(255, 117, 140, 0.72),
    1407px 1687px rgba(255, 117, 140, 0.56),
    1256px 2003px rgba(255, 215, 0, 0.88),
    2485px 1816px rgba(255, 117, 140, 0.84),
    912px 1912px rgba(0, 242, 254, 0.51),
    1110px 1875px rgba(255, 117, 140, 0.46),
    1616px 966px rgba(255, 255, 255, 0.55),
    1484px 1775px rgba(0, 242, 254, 0.57),
    2453px 1463px rgba(255, 255, 255, 0.74),
    1853px 960px rgba(56, 189, 248, 0.94),
    250px 930px rgba(56, 189, 248, 0.43),
    711px 555px rgba(0, 242, 254, 0.56),
    1139px 917px rgba(255, 255, 255, 0.90),
    675px 554px rgba(255, 215, 0, 0.76),
    1964px 2033px rgba(255, 117, 140, 0.65),
    521px 207px rgba(255, 215, 0, 0.45),
    728px 852px rgba(255, 117, 140, 0.59),
    1082px 1865px rgba(255, 255, 255, 0.49),
    1259px 1142px rgba(255, 255, 255, 0.45),
    1416px 1974px rgba(255, 215, 0, 0.51),
    860px 1165px rgba(255, 215, 0, 0.87),
    735px 1597px rgba(255, 255, 255, 0.74),
    2251px 96px rgba(56, 189, 248, 0.63),
    2272px 439px rgba(255, 215, 0, 0.57),
    2308px 725px rgba(255, 255, 255, 0.42),
    996px 946px rgba(255, 215, 0, 0.89),
    861px 1386px rgba(255, 117, 140, 0.52),
    1298px 784px rgba(255, 215, 0, 0.86),
    1848px 1529px rgba(255, 255, 255, 0.48),
    1936px 250px rgba(0, 242, 254, 0.49),
    939px 2032px rgba(255, 255, 255, 0.93),
    263px 329px rgba(0, 242, 254, 0.56),
    539px 1059px rgba(255, 215, 0, 0.57),
    2160px 364px rgba(56, 189, 248, 0.54),
    947px 320px rgba(56, 189, 248, 0.84),
    1828px 332px rgba(0, 242, 254, 0.82),
    1145px 1834px rgba(255, 255, 255, 0.91),
    1345px 1579px rgba(255, 117, 140, 0.44),
    2212px 1039px rgba(255, 117, 140, 0.62),
    870px 1837px rgba(255, 117, 140, 0.68),
    1454px 220px rgba(255, 215, 0, 0.63),
    2150px 169px rgba(56, 189, 248, 0.84),
    530px 2140px rgba(255, 255, 255, 0.50),
    1541px 11px rgba(255, 255, 255, 0.61),
    1812px 902px rgba(255, 117, 140, 0.61),
    186px 9px rgba(255, 215, 0, 0.76),
    377px 1205px rgba(255, 117, 140, 0.72);
  animation: starsTwinkleMd 6s ease-in-out infinite alternate-reverse;
}

/* 3. 璀璨明耀巨恒星群 (30+ 颗大号恒星，深邃星云焦点) */
.stars-lg {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    82px 489px rgba(0, 242, 254, 0.70),
    795px 682px rgba(192, 132, 252, 0.92),
    2208px 1725px rgba(255, 215, 0, 0.83),
    2047px 1374px rgba(0, 242, 254, 0.50),
    367px 185px rgba(0, 242, 254, 0.91),
    1369px 1394px rgba(0, 242, 254, 0.55),
    284px 1127px rgba(192, 132, 252, 0.83),
    1482px 1011px rgba(255, 255, 255, 0.54),
    574px 2069px rgba(255, 215, 0, 0.91),
    271px 797px rgba(255, 215, 0, 0.91),
    1033px 1361px rgba(0, 242, 254, 0.88),
    54px 2064px rgba(255, 255, 255, 0.80),
    1926px 1978px rgba(255, 117, 140, 0.52),
    1199px 1600px rgba(255, 255, 255, 0.90),
    250px 1013px rgba(255, 215, 0, 0.86),
    1922px 1412px rgba(192, 132, 252, 0.45),
    47px 1527px rgba(0, 242, 254, 0.43),
    1595px 374px rgba(192, 132, 252, 0.54),
    191px 965px rgba(255, 117, 140, 0.67),
    287px 360px rgba(255, 255, 255, 0.46),
    870px 474px rgba(255, 117, 140, 0.59),
    1963px 1813px rgba(0, 242, 254, 0.89),
    2285px 1144px rgba(255, 117, 140, 0.58),
    2239px 13px rgba(0, 242, 254, 0.71),
    397px 577px rgba(192, 132, 252, 0.77),
    2099px 121px rgba(255, 215, 0, 0.92),
    908px 2107px rgba(255, 117, 140, 0.84),
    1023px 1039px rgba(0, 242, 254, 0.86),
    452px 161px rgba(0, 242, 254, 0.52),
    1453px 56px rgba(255, 215, 0, 0.78);
  animation: starsTwinkleLg 5s ease-in-out infinite alternate;
}

@keyframes starsTwinkleSm {
  0% { opacity: 0.45; }
  50% { opacity: 0.95; }
  100% { opacity: 0.6; }
}

@keyframes starsTwinkleMd {
  0% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
  100% { opacity: 0.95; transform: scale(1.15); }
}

@keyframes starsTwinkleLg {
  0% { opacity: 0.4; filter: drop-shadow(0 0 3px rgba(0, 242, 254, 0.4)); }
  50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 117, 140, 0.8)); }
  100% { opacity: 0.55; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)); }
}

/* 4. Canvas 星河画布层 */
.starfield-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 5. 纯 CSS 动态流星雨 (多轨道高速划过夜空) */
.meteor {
  position: absolute;
  width: 130px;
  height: 2px;
  transform: rotate(-38deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 242, 254, 0.5) 40%, rgba(255, 255, 255, 0.95) 100%);
  filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.85));
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}

.meteor::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 14px 4px rgba(0, 242, 254, 0.9), 0 0 22px 7px rgba(255, 117, 140, 0.7);
}

.meteor-1 {
  top: -60px;
  right: 18%;
  animation: meteorTrack1 8.5s ease-in 1s infinite;
}

.meteor-2 {
  top: 8%;
  right: -90px;
  animation: meteorTrack2 12.5s ease-in 4.2s infinite;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 117, 140, 0.6) 40%, rgba(255, 255, 255, 0.95) 100%);
}

.meteor-3 {
  top: -50px;
  right: 48%;
  animation: meteorTrack3 10.5s ease-in 7.5s infinite;
}

.meteor-4 {
  top: 22%;
  right: -80px;
  animation: meteorTrack4 14.5s ease-in 11s infinite;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 215, 0, 0.6) 40%, rgba(255, 255, 255, 0.95) 100%);
}

@keyframes meteorTrack1 {
  0% { transform: rotate(-38deg) translateX(0); opacity: 0; }
  4% { opacity: 1; }
  14% { transform: rotate(-38deg) translateX(-1200px); opacity: 0; }
  100% { transform: rotate(-38deg) translateX(-1200px); opacity: 0; }
}

@keyframes meteorTrack2 {
  0% { transform: rotate(-38deg) translateX(0); opacity: 0; }
  4% { opacity: 1; }
  14% { transform: rotate(-38deg) translateX(-1300px); opacity: 0; }
  100% { transform: rotate(-38deg) translateX(-1300px); opacity: 0; }
}

@keyframes meteorTrack3 {
  0% { transform: rotate(-38deg) translateX(0); opacity: 0; }
  4% { opacity: 1; }
  14% { transform: rotate(-38deg) translateX(-1250px); opacity: 0; }
  100% { transform: rotate(-38deg) translateX(-1250px); opacity: 0; }
}

@keyframes meteorTrack4 {
  0% { transform: rotate(-38deg) translateX(0); opacity: 0; }
  4% { opacity: 1; }
  14% { transform: rotate(-38deg) translateX(-1350px); opacity: 0; }
  100% { transform: rotate(-38deg) translateX(-1350px); opacity: 0; }
}

/* 6. 闪耀四角十字星芒 (Sparkle Cross Stars，璀璨点缀) */
.sparkle-cross-star {
  position: absolute;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0 10px #00f2fe, 0 0 20px rgba(0, 242, 254, 0.8);
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
  animation: sparkleCrossPulse 5.5s ease-in-out infinite alternate;
  will-change: transform, opacity;
  user-select: none;
}

.scs-1 { animation-delay: 0.2s; color: #e0f2fe; }
.scs-2 { animation-delay: 1.4s; font-size: 24px; color: #ff758c; text-shadow: 0 0 12px #ff2d87, 0 0 24px rgba(255, 45, 135, 0.7); }
.scs-3 { animation-delay: 2.6s; font-size: 16px; color: #ffd700; text-shadow: 0 0 10px #ffd700, 0 0 20px rgba(255, 215, 0, 0.6); }
.scs-4 { animation-delay: 0.8s; font-size: 22px; color: #00f2fe; text-shadow: 0 0 14px #00f2fe; }
.scs-5 { animation-delay: 3.2s; font-size: 17px; color: #c084fc; text-shadow: 0 0 12px #a855f7; }
.scs-6 { animation-delay: 1.9s; font-size: 26px; color: #ffffff; text-shadow: 0 0 16px #00f2fe, 0 0 30px rgba(0, 242, 254, 0.9); }
.scs-7 { animation-delay: 3.9s; font-size: 19px; color: #ff758c; text-shadow: 0 0 12px #ff758c; }

@keyframes sparkleCrossPulse {
  0% { transform: scale(0.7) rotate(0deg); opacity: 0.3; }
  50% { transform: scale(1.3) rotate(45deg); opacity: 1; }
  100% { transform: scale(0.8) rotate(90deg); opacity: 0.4; }
}

/* 主内容包裹层 */
.page-wrapper {
  position: relative;
  z-index: 1;
}

/* ===================================================================
   顶部导航栏 (Header & Navigation)
=================================================================== */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(6, 9, 19, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 1000;
  transition: all var(--transition-fast);
}

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

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

.header-logo-img {
  height: 46px;
  width: auto;
  transition: transform var(--transition-normal);
}

.brand-logo-wrap:hover .header-logo-img {
  transform: scale(1.04);
}

.brand-domain-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 92, 147, 0.12);
  border: 1px solid rgba(255, 92, 147, 0.35);
  color: #ff85af;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
}

.brand-domain-pill .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
}

.main-nav {
  display: flex;
  align-items: center;
}

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

.nav-link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 8px 0;
  transition: color var(--transition-fast);
}

.nav-link:hover, .nav-link.active {
  color: var(--text-highlight);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-pink), var(--primary-cyan));
  border-radius: 2px;
  transition: width var(--transition-normal);
}

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

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

/* 按钮通用样式 (严格规范 rel="nofollow" target="_blank") */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #ff5c93 0%, #ff758c 45%, #7928ca 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(255, 92, 147, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255, 92, 147, 0.55);
  filter: brightness(1.08);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(8px);
}

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

.btn-cyan {
  background: linear-gradient(135deg, #00f2fe 0%, #0284c7 100%);
  color: #04101e;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.3);
}

.btn-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 242, 254, 0.5);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 13.5px;
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 16px 36px;
  font-size: 16px;
  border-radius: var(--radius-md);
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--text-primary);
  transition: all var(--transition-fast);
}

/* ===================================================================
   Hero 头部首屏区
=================================================================== */
.hero-section {
  position: relative;
  padding: 80px 0 60px;
  text-align: center;
}

.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 92, 147, 0.1);
  border: 1px solid rgba(255, 92, 147, 0.3);
  padding: 6px 18px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  color: #ff94ba;
  margin-bottom: 26px;
  box-shadow: 0 4px 14px rgba(255, 92, 147, 0.15);
}

.hero-pill-badge .sparkle {
  color: var(--accent-gold);
}

.hero-title {
  font-size: clamp(34px, 5.2vw, 62px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  color: #ffffff;
}

.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #ff7eb3 40%, #00f2fe 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-subtitle {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--text-secondary);
  max-width: 860px;
  margin: 0 auto 36px;
  font-weight: 400;
  line-height: 1.65;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.hero-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 60px;
}

.hero-guarantee span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-guarantee .check-icon {
  color: var(--accent-green);
}

/* 核心指标统计网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 10px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  backdrop-filter: blur(12px);
  text-align: center;
  transition: all var(--transition-normal);
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-active);
  box-shadow: 0 12px 30px rgba(255, 92, 147, 0.15);
}

.stat-value {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #ffffff 10%, #ff85af 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.stat-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ===================================================================
   实测终端状态监控卡 (Live Speed & Unlock Monitor)
=================================================================== */
.live-monitor-wrap {
  margin: 50px auto 0;
  max-width: 960px;
  background: rgba(11, 16, 29, 0.85);
  border: 1px solid rgba(255, 92, 147, 0.3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 92, 147, 0.12);
  backdrop-filter: blur(16px);
}

.monitor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(18, 26, 46, 0.9);
  border-bottom: 1px solid var(--border-subtle);
}

.mac-dots {
  display: flex;
  gap: 8px;
}

.mac-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.dot-red { background-color: #ff5f56; }
.dot-yellow { background-color: #ffbd2e; }
.dot-green { background-color: #27c93f; }

.monitor-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.monitor-status-pill {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.monitor-body {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}

.monitor-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.monitor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
}

.monitor-item .item-tag {
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-green {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #10b981;
  font-weight: 700;
}

/* ===================================================================
   板块通用头部 (Section Headers)
=================================================================== */
.section-pad {
  padding: 90px 0;
  position: relative;
}

.section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}

.section-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary-pink);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 16px;
  color: #ffffff;
}

.section-desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ===================================================================
   套餐价格专区 (所有价格同排展示 · 响应式对齐)
=================================================================== */
.pricing-section {
  position: relative;
}

.pricing-cycle-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.cycle-btn {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.cycle-btn.active, .cycle-btn:hover {
  background: rgba(255, 92, 147, 0.15);
  color: #ffffff;
  border-color: var(--primary-pink);
}

.save-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #ff5c93, #7928ca);
  color: #ffffff;
  margin-left: 4px;
}

/* 核心：同排价格卡片网格 (Desktop 4列同排，等高对齐) */
.pricing-grid-same-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

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

.pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 92, 147, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 92, 147, 0.2);
}

/* 推荐主打卡片高亮 */
.pricing-card.featured {
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1.5px solid var(--primary-pink);
  box-shadow: 0 12px 35px rgba(255, 92, 147, 0.22);
}

.popular-ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff5c93, #7928ca);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(255, 92, 147, 0.4);
  white-space: nowrap;
}

.plan-head {
  margin-bottom: 24px;
}

.plan-name {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.plan-badge {
  display: inline-block;
  font-size: 11.5px;
  color: var(--primary-cyan);
  background: rgba(0, 242, 254, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.plan-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  min-height: 40px;
}

.plan-price-box {
  margin: 18px 0 24px;
  padding: 16px 0;
  border-top: 1px dashed var(--border-subtle);
  border-bottom: 1px dashed var(--border-subtle);
}

.price-currency {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  vertical-align: super;
  margin-right: 2px;
}

.price-number {
  font-size: 42px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -1px;
}

.price-period {
  font-size: 13.5px;
  color: var(--text-muted);
}

.price-discount-sub {
  font-size: 12px;
  color: var(--primary-pink);
  margin-top: 4px;
  font-weight: 600;
}

/* 权益清单 */
.plan-features {
  margin-bottom: 28px;
  flex-grow: 1;
}

.plan-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 11px;
  line-height: 1.45;
}

.plan-feature-item .icon-check {
  color: #10b981;
  flex-shrink: 0;
  margin-top: 2px;
}

.plan-feature-item strong {
  color: var(--text-primary);
}

.plan-cta-btn {
  width: 100%;
}

.pricing-note-banner {
  margin-top: 36px;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

.pricing-note-banner a {
  color: var(--primary-cyan);
  text-decoration: underline;
}

/* ===================================================================
   核心优势专区 (Features Grid)
=================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

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

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-pink), var(--primary-cyan));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 92, 147, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(255, 92, 147, 0.1);
  border: 1px solid rgba(255, 92, 147, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--primary-pink);
}

.feature-card:nth-child(even) .feature-icon-wrap {
  background: rgba(0, 242, 254, 0.1);
  border-color: rgba(0, 242, 254, 0.25);
  color: var(--primary-cyan);
}

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

.feature-desc {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ===================================================================
   全球节点加速与测速模拟 (Nodes Network)
=================================================================== */
.nodes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.node-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition-fast);
}

.node-card:hover {
  border-color: var(--primary-cyan);
  background: var(--bg-card-hover);
}

.node-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.node-flag {
  font-size: 24px;
}

.node-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.node-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.node-metric {
  text-align: right;
}

.ping-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: #10b981;
}

.node-type {
  font-size: 11px;
  color: var(--primary-pink);
  font-weight: 600;
}

/* ===================================================================
   客户端一键导入配置 (Client Tutorials)
=================================================================== */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.client-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px 20px;
  text-align: center;
  transition: all var(--transition-normal);
}

.client-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 92, 147, 0.4);
}

.client-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
}

.client-name {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.client-platforms {
  font-size: 12px;
  color: var(--primary-cyan);
  margin-bottom: 14px;
}

.client-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 18px;
}

.client-links {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ===================================================================
   精选文章专栏 (Articles Grid & Internal Linking)
=================================================================== */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

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

.article-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-active);
  box-shadow: 0 16px 36px rgba(255, 92, 147, 0.18);
}

.article-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary-pink);
  background: rgba(255, 92, 147, 0.12);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
  width: fit-content;
}

.article-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  margin-bottom: 12px;
  transition: color var(--transition-fast);
}

.article-card:hover .article-card-title {
  color: #ff85af;
}

.article-excerpt {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.article-more-arrow {
  color: var(--primary-cyan);
  font-weight: 600;
}

.articles-view-all-wrap {
  text-align: center;
  margin-top: 45px;
}

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

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  backdrop-filter: blur(12px);
  transition: all var(--transition-normal);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 92, 147, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

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

.test-content {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.65;
  margin-bottom: 20px;
}

.test-author-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.test-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-pink), var(--primary-purple));
  flex-shrink: 0;
}

.test-meta h5 {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.test-meta p {
  font-size: 12px;
  color: var(--text-muted);
}

.verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--accent-green);
  margin-left: 6px;
}

/* ===================================================================
   常见问题 FAQ (Accordion Native)
=================================================================== */
.faq-wrap {
  max-width: 900px;
  margin: 0 auto;
}

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

.faq-item:hover {
  border-color: rgba(255, 92, 147, 0.3);
}

.faq-summary {
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-icon-arrow {
  font-size: 18px;
  color: var(--primary-pink);
  transition: transform var(--transition-normal);
}

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

.faq-content {
  padding: 0 24px 22px;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.7;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
  margin-top: 4px;
  padding-top: 16px;
}

.faq-content a {
  color: var(--primary-cyan);
  text-decoration: underline;
}

/* ===================================================================
   转化行动横幅 (Bottom High-Converting CTA Box)
=================================================================== */
.cta-banner-wrap {
  margin: 60px auto 30px;
  max-width: 1100px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.5px solid rgba(255, 92, 147, 0.5);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 92, 147, 0.2);
}

.cta-banner-wrap .cta-title {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 16px;
}

.cta-banner-wrap .cta-sub {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 auto 32px;
}

.cta-buttons-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ===================================================================
   页脚 (Footer)
=================================================================== */
.site-footer {
  background: #04060c;
  border-top: 1px solid var(--border-subtle);
  padding: 70px 0 35px;
  font-size: 14px;
  color: var(--text-secondary);
}

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

.footer-brand p {
  margin: 16px 0 20px;
  line-height: 1.6;
  max-width: 320px;
}

.footer-col h4 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
  position: relative;
}

.footer-links li {
  margin-bottom: 11px;
}

.footer-links a:hover {
  color: var(--primary-pink);
  padding-left: 3px;
}

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

.footer-bottom a {
  color: var(--text-secondary);
}

.footer-bottom a:hover {
  color: #ffffff;
}

/* ===================================================================
   响应式断点适配 (Responsive Breakpoints)
=================================================================== */
@media (max-width: 1080px) {
  .pricing-grid-same-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nodes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .header-actions .btn-sm {
    display: none;
  }
  .mobile-toggle {
    display: flex;
  }
  .main-nav {
    position: absolute;
    top: 74px;
    left: 0;
    width: 100%;
    background: rgba(6, 9, 19, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 20px 24px;
    display: none;
  }
  .main-nav.active {
    display: block;
  }
  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .pricing-grid-same-row {
    grid-template-columns: 1fr;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .articles-grid {
    grid-template-columns: 1fr;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .nodes-grid {
    grid-template-columns: 1fr;
  }
  .clients-grid {
    grid-template-columns: 1fr;
  }
  .monitor-body {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .cta-banner-wrap {
    padding: 36px 20px;
  }
}