/* ==========================================================================
   红杏云机场官网 - 原生极简高性能样式表
   HongXing Cloud Airport Official Stylesheet
   ========================================================================== */

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --bg-color: #030611;
  --surface-color: rgba(9, 14, 26, 0.85);
  --card-bg: rgba(13, 21, 39, 0.82);
  --card-border: rgba(33, 49, 78, 0.7);
  --primary: #f97316;
  --primary-hover: #ea580c;
  --primary-light: rgba(249, 115, 22, 0.12);
  --accent: #10b981;
  --accent-light: rgba(16, 185, 129, 0.12);
  --text-main: #ffffff;
  --text-muted: #e2e8f0;
  --text-dim: #cbd5e1;
  --border-color: rgba(28, 41, 65, 0.75);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7);
  --container-width: 1180px;
  --header-height: 72px;
}

/* 全局重置与无障碍基线 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: var(--font-family);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* 宇宙星空深邃底色与星云气晕 */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: #030611;
  background-image: 
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(35, 56, 110, 0.45) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 90% 30%, rgba(55, 30, 95, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 10% 70%, rgba(22, 48, 96, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 75% 85%, rgba(42, 28, 80, 0.25) 0%, transparent 55%);
  background-attachment: fixed;
  position: relative;
}

/* 满天星 Layer 1：密布微星与远空恒星 (固定背景层，多尺度平铺无缝覆盖) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* 密集微星群 1 (180px 循环网格) */
    radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
    radial-gradient(1px 1px at 70px 110px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.2px 1.2px at 130px 45px, rgba(210, 235, 255, 0.9), transparent),
    radial-gradient(1px 1px at 165px 150px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 45px 160px, rgba(255, 245, 215, 0.7), transparent),

    /* 中星群 2 (290px 循环网格) */
    radial-gradient(1.4px 1.4px at 40px 70px, #ffffff, transparent),
    radial-gradient(1px 1px at 100px 210px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 190px 90px, rgba(200, 230, 255, 0.95), transparent),
    radial-gradient(1.2px 1.2px at 240px 250px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 270px 140px, rgba(255, 240, 200, 0.65), transparent),
    radial-gradient(1.2px 1.2px at 140px 30px, rgba(255, 255, 255, 0.85), transparent),

    /* 繁星密布群 3 (430px 循环网格) */
    radial-gradient(1.5px 1.5px at 30px 160px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.2px 1.2px at 95px 380px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.8px 1.8px at 180px 260px, #ffffff, transparent),
    radial-gradient(1px 1px at 280px 120px, rgba(210, 235, 255, 0.7), transparent),
    radial-gradient(1.4px 1.4px at 350px 330px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.2px 1.2px at 410px 220px, rgba(255, 245, 220, 0.8), transparent),
    radial-gradient(1px 1px at 140px 80px, rgba(255, 255, 255, 0.7), transparent),

    /* 深空远星群 4 (590px 循环网格) */
    radial-gradient(1.2px 1.2px at 60px 280px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.8px 1.8px at 160px 140px, #ffffff, transparent),
    radial-gradient(1px 1px at 240px 480px, rgba(200, 230, 255, 0.7), transparent),
    radial-gradient(1.6px 1.6px at 340px 250px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.2px 1.2px at 440px 410px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.8px 1.8px at 520px 100px, rgba(255, 245, 210, 0.95), transparent);
  background-size: 
    180px 180px, 180px 180px, 180px 180px, 180px 180px, 180px 180px,
    290px 290px, 290px 290px, 290px 290px, 290px 290px, 290px 290px, 290px 290px,
    430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px,
    590px 590px, 590px 590px, 590px 590px, 590px 590px, 590px 590px, 590px 590px;
  background-repeat: repeat;
  opacity: 0.92;
}

/* 满天星 Layer 2：璀璨闪烁星芒 (带星辉光晕与渐变呼吸动效) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* 明亮光晕星 (360px 循环网格) */
    radial-gradient(2px 2px at 80px 130px, #ffffff, rgba(255, 255, 255, 0.3) 65%, transparent),
    radial-gradient(2.4px 2.4px at 250px 60px, #ffffff, rgba(190, 225, 255, 0.35) 65%, transparent),
    radial-gradient(2px 2px at 170px 290px, rgba(255, 248, 220, 1), rgba(255, 230, 180, 0.3) 60%, transparent),
    
    /* 璀璨星芒 (520px 循环网格) */
    radial-gradient(2.8px 2.8px at 130px 240px, #ffffff, rgba(255, 255, 255, 0.45) 55%, transparent),
    radial-gradient(2.5px 2.5px at 360px 160px, #ffffff, rgba(180, 220, 255, 0.4) 55%, transparent),
    radial-gradient(2.2px 2.2px at 430px 390px, #ffffff, rgba(255, 240, 200, 0.35) 55%, transparent),
    radial-gradient(2.6px 2.6px at 240px 450px, #ffffff, rgba(200, 235, 255, 0.4) 55%, transparent);
  background-size: 
    360px 360px, 360px 360px, 360px 360px,
    520px 520px, 520px 520px, 520px 520px, 520px 520px;
  background-repeat: repeat;
  animation: starryGlow 4.5s ease-in-out infinite alternate;
}

@keyframes starryGlow {
  0% {
    opacity: 0.5;
    transform: scale(0.995);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.65;
    transform: scale(1.003);
  }
}


/* ========================================================
   背景小星星落下与流星穿梭特效 (Starfall & Shooting Stars)
   ======================================================== */
.starfall-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  overflow: hidden;
}

/* 小星星自上而下缓缓飘落 (带微弱空间漂移与晶莹星芒) */
.star-drop {
  position: absolute;
  top: -24px;
  left: var(--left, 50%);
  width: var(--size, 2.5px);
  height: calc(var(--size, 2.5px) * 6);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.75) 30%, rgba(254, 240, 138, 0.4) 65%, transparent 100%);
  border-radius: 999px;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85));
  animation: starDropAnim var(--duration, 7s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

/* 小星星落下的星芒头部光核 */
.star-drop::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--size, 2.5px) * 1.8);
  height: calc(var(--size, 2.5px) * 1.8);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.95), 0 0 12px 3px rgba(251, 146, 60, 0.5);
}

@keyframes starDropAnim {
  0% {
    transform: translate(0, -20px) scaleY(0.7);
    opacity: 0;
  }
  6% {
    opacity: 0.95;
    transform: translate(calc(var(--drift, 15px) * 0.1), 5vh) scaleY(1);
  }
  85% {
    opacity: 0.85;
    transform: translate(calc(var(--drift, 15px) * 0.9), 92vh) scaleY(1.1);
  }
  100% {
    transform: translate(var(--drift, 15px), 106vh) scaleY(1.2);
    opacity: 0;
  }
}

/* 划过深空的超音速流星 */
.shooting-star {
  position: absolute;
  top: var(--top, 20%);
  left: var(--left, 50%);
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, #ffffff 0%, rgba(254, 240, 138, 0.9) 15%, rgba(249, 115, 22, 0.4) 55%, transparent 100%);
  border-radius: 999px;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
  animation: shootingStarAnim var(--duration, 3s) ease-in infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

.shooting-star::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px 3px #ffffff, 0 0 16px 5px rgba(249, 115, 22, 0.85);
}

@keyframes shootingStarAnim {
  0% {
    transform: rotate(-35deg) translateX(0) scale(0.3);
    opacity: 0;
  }
  8% {
    opacity: 1;
    transform: rotate(-35deg) translateX(50px) scale(1);
  }
  30% {
    opacity: 0.9;
    transform: rotate(-35deg) translateX(260px) scale(1.1);
  }
  48% {
    opacity: 0;
    transform: rotate(-35deg) translateX(440px) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: rotate(-35deg) translateX(440px) scale(0);
  }
}

/* 保证主要内容容器位于星空图层上方 */
main, .site-header, .site-footer {
  position: relative;
  z-index: 1;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* 键盘无障碍焦点及跳过链接 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  background: var(--primary);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

/* 容器与网格 */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.section {
  padding: 80px 0;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

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

.section-tag {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section-title {
  font-size: 2.15rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.3;
  margin-bottom: 14px;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* 按钮与 CTA 规范 (触摸区至少 44x44px) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 44px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: all 0.25s ease;
  user-select: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #ea580c 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(249, 115, 22, 0.4);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #fb923c 0%, var(--primary) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.55);
}

.btn-secondary {
  background: var(--surface-color);
  color: var(--text-main);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background: var(--card-bg);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

.btn-block {
  width: 100%;
}

/* 顶部导航栏 */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: rgba(4, 7, 17, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  user-select: none;
}

.site-brand:hover {
  transform: translateY(-1px);
}

.brand-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fb923c 0%, #f97316 55%, #ea580c 100%);
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.site-brand:hover .brand-logo-mark {
  transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 6px 22px rgba(249, 115, 22, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.brand-logo-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-text {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.brand-highlight {
  font-weight: 900;
  color: #fb923c;
  background: linear-gradient(135deg, #fff7ed 0%, #fb923c 45%, #ea580c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(249, 115, 22, 0.3));
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav a {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--primary);
}

.nav-cta-btn {
  margin-left: 12px;
}

/* 主视觉区 (Hero Section) */
.hero-section {
  padding: 96px 0 72px;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
  font-weight: 600;
}

.hero-title {
  font-size: 3.1rem;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.hero-title .highlight {
  background: linear-gradient(135deg, #f97316 20%, #facc15 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 780px;
  margin: 0 auto 36px;
  line-height: 1.68;
}

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

.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: var(--text-dim);
  font-size: 0.88rem;
  flex-wrap: wrap;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* 核心优势介绍 (3个图文卡片) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-card {
  background: var(--surface-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: var(--shadow-md);
}

.feature-icon-box {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--primary);
}

.feature-icon-box svg {
  width: 28px;
  height: 28px;
}

.feature-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-main);
}

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

/* 套餐价格对比表 */
.pricing-wrapper {
  background: var(--surface-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.pricing-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}

.pricing-table caption {
  padding: 16px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  background: rgba(13, 21, 39, 0.7);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.pricing-table th,
.pricing-table td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.pricing-table th {
  background: #0b1222;
  color: var(--text-main);
  font-weight: 700;
  white-space: nowrap;
}

.pricing-table tbody tr:hover {
  background: rgba(249, 115, 22, 0.04);
}

.pricing-table tbody tr.featured-row {
  background: rgba(249, 115, 22, 0.08);
}

.plan-badge-rec {
  display: inline-block;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-left: 8px;
  vertical-align: middle;
}

.price-text {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--primary);
}

.price-unit {
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--text-muted);
}

/* 流媒体与 AI 支持图卡 */
.support-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.support-card {
  background: var(--surface-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}

.support-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.support-header svg {
  width: 32px;
  height: 32px;
  color: var(--primary);
}

.support-header h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
}

.support-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 500;
}

.tag-pill svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

/* 用户评价 */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.review-card {
  background: var(--surface-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-stars {
  color: #facc15;
  font-size: 1rem;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.review-quote {
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.65;
  margin-bottom: 20px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.author-info h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.author-info p {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* 常见问题解答 (FAQ 默认原生展开) */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 860px;
  margin: 0 auto;
}

.faq-item {
  background: var(--surface-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item:hover {
  border-color: rgba(249, 115, 22, 0.4);
}

.faq-item summary {
  list-style: none;
  padding: 22px 24px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
  min-height: 44px;
}

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

.faq-toggle-icon {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

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

.faq-answer {
  padding: 0 24px 22px;
  font-size: 0.96rem;
  color: var(--text-muted);
  line-height: 1.7;
  border-top: 1px dashed var(--border-color);
  padding-top: 16px;
}

.faq-answer a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 知识科普专栏与文章网格 */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.article-summary-card {
  background: var(--surface-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.article-summary-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.article-card-tag {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: 12px;
  align-self: flex-start;
}

.article-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 12px;
  color: var(--text-main);
}

.article-card-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.article-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.article-card-footer a {
  color: var(--primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 深度文章阅读页面专用样式 */
.article-page-wrap {
  padding: 56px 0 80px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-dim);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--primary);
}

.article-main-content {
  background: var(--surface-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 48px;
  max-width: 860px;
  margin: 0 auto;
}

.article-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 28px;
  margin-bottom: 36px;
}

.article-header h1 {
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-main);
  margin-bottom: 16px;
}

.article-meta-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.88rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}

.article-body h2 {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 36px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.article-body h3 {
  font-size: 1.18rem;
  font-weight: 700;
  color: #fdba74;
  margin: 24px 0 12px;
}

.article-body p {
  font-size: 1rem;
  color: #cbd5e1;
  line-height: 1.8;
  margin-bottom: 20px;
}

.article-body ul,
.article-body ol {
  margin: 0 0 24px 24px;
  color: #cbd5e1;
  line-height: 1.8;
}

.article-body li {
  margin-bottom: 8px;
}

.article-body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.article-body .callout-box {
  background: rgba(249, 115, 22, 0.08);
  border-left: 4px solid var(--primary);
  padding: 18px 20px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 28px 0;
  color: #e2e8f0;
  font-size: 0.95rem;
}

.article-cta-box {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(20, 29, 47, 0.9) 100%);
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  text-align: center;
  margin: 48px 0 36px;
}

.article-cta-box h3 {
  font-size: 1.35rem;
  color: var(--text-main);
  margin-bottom: 10px;
}

.article-cta-box p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* 网站地图与合规政策页面排版 */
.policy-page-content {
  background: var(--surface-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 48px;
  max-width: 860px;
  margin: 0 auto;
}

.policy-page-content h1 {
  font-size: 2.1rem;
  font-weight: 800;
  margin-bottom: 24px;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

.policy-page-content h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 28px 0 14px;
}

.policy-page-content p {
  font-size: 0.98rem;
  color: #cbd5e1;
  line-height: 1.8;
  margin-bottom: 18px;
}

.sitemap-group {
  margin-bottom: 32px;
}

.sitemap-group h2 {
  font-size: 1.25rem;
  color: var(--primary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.sitemap-links-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.sitemap-links-list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.92rem;
  transition: border-color 0.2s ease;
}

.sitemap-links-list li a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* 页脚：严格只保留 4 个标题，并在新标签中打开 */
.site-footer {
  margin-top: auto;
  background: #020409;
  border-top: 1px solid var(--border-color);
  padding: 48px 0 36px;
  text-align: center;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.footer-nav a {
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
}

.footer-nav a:hover {
  color: var(--primary);
}

.footer-copyright {
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* 响应式媒体查询适配 (@media) */
@media (max-width: 1024px) {
  .features-grid,
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .section {
    padding: 56px 0;
  }
  .hero-title {
    font-size: 2.2rem;
  }
  .hero-subtitle {
    font-size: 1.05rem;
  }
  .features-grid,
  .support-cards-grid,
  .articles-grid,
  .reviews-grid,
  .sitemap-links-list {
    grid-template-columns: 1fr;
  }
  .site-nav {
    display: none; /* 简化移动端单栏聚焦 */
  }
  .article-main-content,
  .policy-page-content {
    padding: 28px 20px;
  }
  .footer-nav {
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .brand-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .brand-text {
    font-size: 1.15rem;
  }
  .hero-title {
    font-size: 1.85rem;
  }
  .btn {
    width: 100%;
  }
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  .pricing-table th,
  .pricing-table td {
    padding: 14px 16px;
  }
}

/* 动作降低偏好 */
@media (prefers-reduced-motion: reduce) {
  .starfall-canvas { display: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}