/* ============================================================
   AutoPMS 首页 · 深色未来科技视觉体系
   ------------------------------------------------------------
   只在首页加载（index.blade.php 的 @push('styles')）。
   其它 landing 页面保持原有浅色，避免整站风格改版带来的
   连带回归 —— 深色只改变「第一印象」，不改变信息架构。

   设计语言四条：
   1. 基底：深空底（#05070E）+ 双层径向光斑 + 40px 细网格
   2. 材质：磨砂玻璃（backdrop-filter + 1px 内高光）
   3. 金属：液态金属渐变只用于关键词与主 CTA，不滥用
   4. 荧光：青色只做边缘与状态，不做大面积填充

   所有卡片共用 --hx-* 变量与 .hx-card 基类，任何新增卡片
   只需要加 class="hx-card"，不需要重写质感。
   ============================================================ */

:root {
  --hx-bg: #05070E;
  --hx-bg-2: #070B14;
  --hx-panel: rgba(255, 255, 255, 0.035);
  --hx-panel-2: rgba(255, 255, 255, 0.06);
  --hx-line: rgba(146, 178, 216, 0.12);
  --hx-line-2: rgba(146, 178, 216, 0.22);
  --hx-text: #E9F1FB;
  --hx-text-2: #A6B8CE;
  /* 辅助色：卡片正文直接用它，所以必须过 4.5:1 对比度 ——
     深色界面上最容易犯的错就是把说明文字调到「有氛围但看不清」。 */
  --hx-text-3: #8496AD;
  --hx-cyan: #2AE7FF;
  --hx-cyan-2: #0FB6D6;
  --hx-blue: #2F6BFF;
  --hx-blue-2: #1B3FA8;
  --hx-violet: #7C5CFF;
  /* 液态金属：青蓝占比要高过纯白，否则截到哪一帧都像普通白字 */
  --hx-metal: linear-gradient(102deg, #5FD3F2 0%, #EAFBFF 11%, #45BEE6 25%, #22D9F5 39%, #CFF4FF 54%, #6E9EFF 70%, #35E2FF 85%, #A9EAFF 100%);
  --hx-glow-cyan: 0 0 0 1px rgba(42, 231, 255, .22), 0 18px 60px -28px rgba(42, 231, 255, .55);
  --hx-radius: 18px;
  --hx-radius-lg: 24px;
  --hx-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 基底 ---------- */

body.landing-layout {
  background: var(--hx-bg);
  color: var(--hx-text);
  -webkit-font-smoothing: antialiased;
}

/* 固定背景层：光斑 + 网格。挂 body::before 而不是容器，
   这样滚动时背景不动，卡片像浮在空间里。 */
body.landing-layout::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(680px 420px at 78% -6%, rgba(42, 231, 255, .13), transparent 68%),
    radial-gradient(720px 480px at 8% 8%, rgba(47, 107, 255, .12), transparent 70%),
    radial-gradient(900px 600px at 50% 108%, rgba(124, 92, 255, .09), transparent 72%);
}

body.landing-layout::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(146, 178, 216, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 178, 216, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 78%);
}

/* 各段要压住 body::after 那层网格（同 theme-dark.css 的打光层，z-index:0）。
   这里刻意不写 > nav：.landing-nav 自己是 position:fixed + z-index:100，
   本来就压在网格之上，position:relative 会把固定导航拽回文档流 ——
   深色下滚一屏首页顶栏就跟着滚走（2026-10-29 用户报「深色没固定、浅色会固定」）。 */
body.landing-layout > section,
body.landing-layout > footer,
body.landing-layout > .hx-modal {
  position: relative;
  z-index: 1;
}

/* ---------- 顶部导航（深色玻璃） ---------- */

body.landing-layout .landing-nav {
  background: rgba(5, 7, 14, .62);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--hx-line);
  height: 66px;
}

body.landing-layout .landing-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42, 231, 255, .45) 22%, rgba(47, 107, 255, .35) 58%, transparent);
  opacity: .55;
}

body.landing-layout .landing-nav.scrolled {
  background: rgba(5, 7, 14, .88);
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, .8), 0 1px 0 rgba(42, 231, 255, .12);
  border-bottom-color: transparent;
}

body.landing-layout .nav-brand img {
  height: 30px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(146, 178, 216, .18), 0 6px 20px -8px rgba(42, 231, 255, .5);
}

body.landing-layout .nav-links a {
  color: var(--hx-text-2);
  font-size: 13.5px;
  letter-spacing: .01em;
}

body.landing-layout .nav-links a:hover {
  color: var(--hx-cyan);
  text-shadow: 0 0 14px rgba(42, 231, 255, .55);
}

body.landing-layout .nav-links {
  gap: 30px;
}

body.landing-layout .btn-ghost {
  border: 1px solid var(--hx-line-2);
  color: var(--hx-text);
  background: rgba(255, 255, 255, .03);
  border-radius: 10px;
  padding: 8px 18px;
}

body.landing-layout .btn-ghost:hover {
  border-color: rgba(42, 231, 255, .5);
  color: var(--hx-cyan);
  background: rgba(42, 231, 255, .07);
  box-shadow: 0 0 20px -6px rgba(42, 231, 255, .5);
}

body.landing-layout .btn-primary {
  background: linear-gradient(135deg, #2AE7FF 0%, #2F8BFF 52%, #2F6BFF 100%);
  color: #041018;
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 20px;
  box-shadow: 0 0 0 1px rgba(42, 231, 255, .35), 0 10px 28px -12px rgba(42, 231, 255, .8);
}

body.landing-layout .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(42, 231, 255, .6), 0 16px 36px -12px rgba(42, 231, 255, .95);
}

body.landing-layout .nav-toggle span {
  background: var(--hx-text-2);
}

/* ---------- 通用容器 ---------- */

.hx-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

.hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(42, 231, 255, .22);
  background: rgba(42, 231, 255, .05);
  color: #A9E9F7;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.hx-eyebrow i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hx-cyan);
  box-shadow: 0 0 10px 2px rgba(42, 231, 255, .75);
  animation: hx-pulse 2.4s ease-in-out infinite;
}

@keyframes hx-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}

/* 液态金属文字：多段冷色渐变 + 缓慢位移，模拟金属反光掠过 */
.hx-metal-text {
  background: var(--hx-metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hx-metal 9s linear infinite;
  filter: drop-shadow(0 2px 26px rgba(42, 231, 255, .22));
}

@keyframes hx-metal {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---------- 统一卡片材质 ---------- */

.hx-card {
  position: relative;
  border-radius: var(--hx-radius);
  border: 1px solid var(--hx-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .058) 0%, rgba(255, 255, 255, .014) 58%, rgba(255, 255, 255, .028) 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 24px 48px -32px rgba(0, 0, 0, .9);
  transition: border-color .35s var(--hx-ease), box-shadow .35s var(--hx-ease), transform .35s var(--hx-ease), background .35s var(--hx-ease);
}

/* 顶部边缘高光：玻璃厚度的来源，1px 就够，粗了就变成描边卡片 */
.hx-card::before {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 235, 255, .55), transparent);
  opacity: .8;
  pointer-events: none;
}

.hx-card:hover {
  border-color: rgba(42, 231, 255, .34);
  box-shadow: var(--hx-glow-cyan), inset 0 1px 0 rgba(255, 255, 255, .14);
  transform: translateY(-3px);
}

/* ---------- 入场动画（IntersectionObserver 打 .is-in） ---------- */

.hx-rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--hx-ease), transform .7s var(--hx-ease);
  transition-delay: var(--d, 0ms);
}

.hx-rise.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   HERO
   ============================================================ */

.hx-hero {
  position: relative;
  padding: 132px 0 84px;
  overflow: hidden;
}

/* 顶部锥形光：让 hero 有「从上方打光」的舞台感。
   两盏灯而不是一盏——单盏会只照亮中间，两侧掉进纯黑里。 */
.hx-hero::before {
  content: '';
  position: absolute;
  top: -360px;
  left: 50%;
  width: 1320px;
  height: 900px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 46% 52% at 30% 44%, rgba(42, 231, 255, .26), transparent 66%),
    radial-gradient(ellipse 42% 50% at 62% 38%, rgba(47, 107, 255, .22), transparent 68%),
    radial-gradient(ellipse 70% 40% at 50% 30%, rgba(124, 92, 255, .14), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

.hx-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px;
  align-items: center;
}

.hx-hero-title {
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 22px 0 20px;
  color: #F2F7FF;
}

.hx-hero-title em {
  font-style: normal;
  display: inline-block;
}

.hx-hero-sub {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--hx-text-2);
  max-width: 520px;
  margin: 0 0 32px;
}

.hx-hero-sub b {
  color: #CFE6FF;
  font-weight: 600;
}

.hx-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

/* 主 CTA：液态金属底 + 深色字，比纯青底更有「金属感」 */
.hx-btn-main {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #031018;
  cursor: pointer;
  background: linear-gradient(135deg, #7FF0FF 0%, #2AE7FF 38%, #46B4FF 74%, #2F6BFF 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 0 rgba(4, 16, 24, .25), 0 14px 40px -14px rgba(42, 231, 255, .85);
  transition: transform .3s var(--hx-ease), box-shadow .3s var(--hx-ease);
  overflow: hidden;
}

/* 掠光：hover 时一条白色高光从左扫到右 */
.hx-btn-main::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  transition: left .65s var(--hx-ease);
}

.hx-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 20px 50px -14px rgba(42, 231, 255, 1);
}

.hx-btn-main:hover::after {
  left: 118%;
}

.hx-btn-main svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.hx-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 12px;
  border: 1px solid var(--hx-line-2);
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #D6E4F5;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s var(--hx-ease);
}

.hx-btn-ghost:hover {
  border-color: rgba(42, 231, 255, .45);
  color: var(--hx-cyan);
  background: rgba(42, 231, 255, .06);
  box-shadow: 0 0 26px -10px rgba(42, 231, 255, .7);
}

/* Hero 统计条 */
.hx-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--hx-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--hx-line);
}

.hx-stat {
  padding: 16px 14px;
  background: rgba(8, 12, 22, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hx-stat b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #EAF7FF, #7FE0F5 60%, #4CA8FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.hx-stat span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--hx-text-3);
  line-height: 1.45;
}

/* ---------- Hero 右侧：仪表盘预览 ---------- */

.hx-preview {
  position: relative;
  perspective: 1400px;
}

/* 面板外发光：模拟屏幕从内部照亮空气 */
.hx-preview::before {
  content: '';
  position: absolute;
  inset: 6% 4%;
  border-radius: 40px;
  background: radial-gradient(ellipse at 50% 50%, rgba(42, 231, 255, .30), transparent 68%);
  filter: blur(46px);
  z-index: -1;
}

.hx-screen {
  border-radius: var(--hx-radius-lg);
  border: 1px solid rgba(146, 178, 216, .2);
  background: linear-gradient(165deg, rgba(16, 24, 40, .92), rgba(8, 12, 22, .96));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 90px -40px rgba(0, 0, 0, 1);
  overflow: hidden;
  transform: rotateY(-7deg) rotateX(3deg);
  transition: transform .6s var(--hx-ease), box-shadow .6s var(--hx-ease);
  cursor: pointer;
}

.hx-screen:hover {
  transform: rotateY(-2deg) rotateX(1deg) translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 50px 110px -40px rgba(0, 0, 0, 1), 0 0 0 1px rgba(42, 231, 255, .28);
}

.hx-screen-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(146, 178, 216, .12);
  background: rgba(255, 255, 255, .025);
}

.hx-dots {
  display: flex;
  gap: 5px;
}

.hx-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2B3B52;
}

.hx-dots i:nth-child(1) { background: #FF5F57; }
.hx-dots i:nth-child(2) { background: #FEBC2E; }
.hx-dots i:nth-child(3) { background: #28C840; }

.hx-screen-bar span {
  margin-left: 6px;
  font-size: 11px;
  color: var(--hx-text-3);
  letter-spacing: .02em;
}

.hx-screen-bar em {
  margin-left: auto;
  font-style: normal;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #8FE9FF;
  background: rgba(42, 231, 255, .1);
  border: 1px solid rgba(42, 231, 255, .22);
}

.hx-screen-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hx-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hx-metric {
  padding: 10px 11px;
  border-radius: 11px;
  border: 1px solid rgba(146, 178, 216, .1);
  background: rgba(255, 255, 255, .03);
}

.hx-metric label {
  display: block;
  font-size: 10px;
  color: var(--hx-text-3);
  margin-bottom: 5px;
}

.hx-metric b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #EAF6FF;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.hx-metric b.cy { color: var(--hx-cyan); }
.hx-metric b.gn { color: #4ADE9B; }

.hx-metric i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  color: var(--hx-text-3);
  margin-top: 3px;
}

.hx-chart {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(146, 178, 216, .1);
  background: rgba(255, 255, 255, .025);
}

.hx-chart-head {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--hx-text-3);
  margin-bottom: 10px;
}

.hx-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 58px;
}

.hx-bars i {
  flex: 1;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, rgba(42, 231, 255, .75), rgba(47, 107, 255, .28));
  box-shadow: 0 0 12px -4px rgba(42, 231, 255, .8);
}

.hx-bars i.dim {
  background: linear-gradient(180deg, rgba(146, 178, 216, .3), rgba(146, 178, 216, .08));
  box-shadow: none;
}

.hx-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(146, 178, 216, .08);
}

.hx-row:last-child {
  border-bottom: none;
}

.hx-row-name {
  font-size: 11.5px;
  color: #D9E6F5;
  font-weight: 500;
}

.hx-row-sub {
  font-size: 10px;
  color: var(--hx-text-3);
  margin-top: 2px;
}

.hx-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hx-tag {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.hx-tag.on {
  color: #7DF3D0;
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .28);
}

.hx-tag.warn {
  color: #FFCF7A;
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .3);
}

.hx-tag.done {
  color: #9EC5FF;
  background: rgba(47, 107, 255, .14);
  border-color: rgba(47, 107, 255, .3);
}

.hx-prog {
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: rgba(146, 178, 216, .16);
  overflow: hidden;
}

.hx-prog i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #2AE7FF, #2F6BFF);
  box-shadow: 0 0 8px rgba(42, 231, 255, .7);
}

.hx-pct {
  font-size: 9.5px;
  color: var(--hx-text-3);
  font-variant-numeric: tabular-nums;
  width: 26px;
  text-align: right;
}

/* ============================================================
   质量工具链 Pipeline
   ============================================================ */

.hx-chain {
  padding: 20px 0 76px;
}

.hx-chain-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.hx-chain-head h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  color: #EDF5FF;
}

.hx-chain-head p {
  margin: 0;
  font-size: 13.5px;
  color: var(--hx-text-3);
  line-height: 1.7;
  max-width: 640px;
}

.hx-chain-head a {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--hx-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 231, 255, .3);
  padding-bottom: 2px;
}

.hx-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.hx-node {
  position: relative;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--hx-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: all .35s var(--hx-ease);
}

.hx-node:hover {
  border-color: rgba(42, 231, 255, .4);
  box-shadow: var(--hx-glow-cyan), inset 0 1px 0 rgba(255, 255, 255, .14);
  transform: translateY(-3px);
}

/* 节点之间的连线 + 光点。只画「向右」的线，第 5 列不画，
   避免在行尾多出一条悬空的线。2px 高 + 外发光是为了在 1x 屏上
   也看得见——1px 暗线在半透明卡片之间几乎等于没有。 */
.hx-node:not(:nth-child(5n))::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, rgba(42, 231, 255, .8), rgba(42, 231, 255, .18));
  box-shadow: 0 0 8px rgba(42, 231, 255, .55);
  border-radius: 1px;
}

.hx-node-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.hx-node-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: rgba(42, 231, 255, .08);
  border: 1px solid rgba(42, 231, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  flex-shrink: 0;
}

.hx-node-step {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(42, 231, 255, .72);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.hx-node b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #E4EFFC;
  line-height: 1.35;
  margin-bottom: 5px;
}

.hx-node span {
  display: block;
  font-size: 11.5px;
  color: var(--hx-text-3);
  line-height: 1.55;
}

/* ============================================================
   Features
   ============================================================ */

.hx-features {
  padding: 76px 0;
  border-top: 1px solid rgba(146, 178, 216, .08);
}

.hx-sec-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 52px;
}

.hx-sec-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 18px 0 14px;
  color: #F0F6FF;
}

.hx-sec-head p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--hx-text-2);
  margin: 0;
}

.hx-group {
  margin-bottom: 34px;
}

.hx-group-label {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #BFD6EE;
}

.hx-group-label i {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--hx-cyan), rgba(47, 107, 255, .2));
  box-shadow: 0 0 12px rgba(42, 231, 255, .8);
}

.hx-group-label em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--hx-text-3);
  letter-spacing: 0;
}

.hx-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(146, 178, 216, .18), transparent);
}

.hx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hx-feat {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 168px;
}

.hx-feat-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: linear-gradient(160deg, rgba(42, 231, 255, .14), rgba(47, 107, 255, .07));
  border: 1px solid rgba(146, 178, 216, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px -10px rgba(42, 231, 255, .7);
}

.hx-feat h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: #E8F2FE;
  margin: 2px 0 0;
  letter-spacing: -.01em;
  line-height: 1.4;
}

.hx-feat p {
  font-size: 12.5px;
  line-height: 1.72;
  color: var(--hx-text-3);
  margin: 0;
}

/* ============================================================
   岗位入口
   ============================================================ */

.hx-roles {
  padding: 0 0 76px;
}

.hx-role-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.hx-role {
  padding: 18px 14px;
  border-radius: 14px;
  border: 1px solid var(--hx-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  text-align: center;
  text-decoration: none;
  transition: all .35s var(--hx-ease);
  display: block;
}

.hx-role:hover {
  border-color: rgba(42, 231, 255, .38);
  background: linear-gradient(180deg, rgba(42, 231, 255, .08), rgba(255, 255, 255, .015));
  box-shadow: var(--hx-glow-cyan);
  transform: translateY(-3px);
  text-decoration: none;
}

.hx-role i {
  display: block;
  font-size: 20px;
  font-style: normal;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 12px rgba(42, 231, 255, .45));
}

.hx-role b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #DCE9F8;
  line-height: 1.4;
}

.hx-role span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--hx-text-3);
  letter-spacing: .02em;
}

/* ============================================================
   Pricing
   ============================================================ */

.hx-pricing {
  padding: 76px 0;
  border-top: 1px solid rgba(146, 178, 216, .08);
  position: relative;
}

.hx-pricing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 260px;
  background: radial-gradient(ellipse at 50% 0%, rgba(47, 107, 255, .14), transparent 70%);
  pointer-events: none;
}

.hx-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.hx-price {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  border-radius: var(--hx-radius-lg);
}

.hx-price.hot {
  border-color: rgba(42, 231, 255, .42);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(42, 231, 255, .12), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(42, 231, 255, .18), 0 30px 80px -40px rgba(42, 231, 255, .8);
}

.hx-price.hot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42, 231, 255, .95), transparent);
  box-shadow: 0 0 18px rgba(42, 231, 255, .9);
}

.hx-hot-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #041018;
  background: linear-gradient(100deg, #7FF0FF, #2AE7FF 50%, #46B4FF);
  box-shadow: 0 8px 24px -8px rgba(42, 231, 255, .9);
  white-space: nowrap;
}

.hx-plan {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #B9CFE8;
  margin-bottom: 14px;
}

.hx-plan i {
  font-style: normal;
  font-size: 15px;
}

.hx-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #F2F9FF;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.hx-amount u {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #8FA8C4;
  align-self: flex-start;
  margin-top: 8px;
}

.hx-amount b {
  font-size: 40px;
  line-height: 1;
  background: linear-gradient(160deg, #FFFFFF 20%, #9FD8FF 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hx-amount em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hx-text-3);
  letter-spacing: 0;
  margin-left: 2px;
}

.hx-price-sub {
  font-size: 12px;
  color: var(--hx-text-3);
  line-height: 1.6;
  margin-bottom: 18px;
  min-height: 19px;
}

.hx-divider {
  height: 1px;
  border: 0;
  margin: 0 0 16px;
  background: linear-gradient(90deg, rgba(146, 178, 216, .22), transparent);
}

.hx-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.hx-list li {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #C2D4E8;
}

.hx-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--hx-cyan);
  border-bottom: 1.6px solid var(--hx-cyan);
  transform: rotate(-45deg);
  border-radius: 1px;
  filter: drop-shadow(0 0 5px rgba(42, 231, 255, .8));
}

.hx-list li.no {
  color: var(--hx-text-3);
}

.hx-list li.no::before {
  width: 8px;
  height: 1.6px;
  border: none;
  background: rgba(146, 178, 216, .45);
  transform: rotate(0);
  top: 10px;
  filter: none;
}

.hx-list li b {
  color: #E4F1FF;
  font-weight: 700;
}

.hx-price-btn {
  width: 100%;
  padding: 12px;
  border-radius: 11px;
  border: 1px solid var(--hx-line-2);
  background: rgba(255, 255, 255, .04);
  color: #D9E7F7;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s var(--hx-ease);
}

.hx-price-btn:hover {
  border-color: rgba(42, 231, 255, .45);
  color: var(--hx-cyan);
  box-shadow: 0 0 24px -10px rgba(42, 231, 255, .8);
}

.hx-price.hot .hx-price-btn {
  border: none;
  background: linear-gradient(135deg, #7FF0FF, #2AE7FF 45%, #2F6BFF);
  color: #041018;
  font-weight: 700;
  box-shadow: 0 12px 34px -14px rgba(42, 231, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.hx-price.hot .hx-price-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px -14px rgba(42, 231, 255, 1);
  color: #041018;
}

.hx-note {
  text-align: center;
  font-size: 12px;
  line-height: 1.75;
  color: var(--hx-text-3);
  max-width: 880px;
  margin: 20px auto 0;
}

.hx-note a {
  color: #8FE9FF;
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 231, 255, .3);
}

/* 企业方案：渐变描边 + 内部玻璃 */
.hx-ent {
  margin-top: 30px;
  border-radius: var(--hx-radius-lg);
  padding: 1px;
  background: linear-gradient(115deg, rgba(42, 231, 255, .55), rgba(47, 107, 255, .35) 45%, rgba(124, 92, 255, .4) 78%, rgba(42, 231, 255, .25));
  box-shadow: 0 30px 80px -50px rgba(42, 231, 255, .9);
}

.hx-ent-in {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  border-radius: 23px;
  background: linear-gradient(120deg, rgba(10, 16, 28, .96), rgba(8, 12, 22, .98));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hx-ent-ico {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--hx-cyan);
  background: rgba(42, 231, 255, .09);
  border: 1px solid rgba(42, 231, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 24px -8px rgba(42, 231, 255, .8);
}

.hx-ent-body {
  flex: 1;
  min-width: 0;
}

.hx-ent-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.hx-ent-head b {
  font-size: 15px;
  font-weight: 700;
  color: #EDF5FF;
}

.hx-ent-head em {
  font-style: normal;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 5px;
  color: #B6A6FF;
  background: rgba(124, 92, 255, .14);
  border: 1px solid rgba(124, 92, 255, .32);
}

.hx-ent-body p {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--hx-text-3);
  line-height: 1.65;
}

.hx-ent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.hx-ent-tags span {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 6px;
  color: #A9C2DC;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(146, 178, 216, .16);
}

.hx-ent-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: 11px;
  border: 1px solid rgba(42, 231, 255, .35);
  background: rgba(42, 231, 255, .07);
  color: #8FE9FF;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s var(--hx-ease);
}

.hx-ent-btn:hover {
  background: rgba(42, 231, 255, .13);
  box-shadow: 0 0 30px -10px rgba(42, 231, 255, .9);
  color: #C9F4FF;
}

/* ============================================================
   底部 CTA
   ============================================================ */

.hx-cta {
  padding: 96px 0 104px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(146, 178, 216, .08);
}

.hx-cta::before {
  content: '';
  position: absolute;
  bottom: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 1040px;
  height: 520px;
  background:
    radial-gradient(ellipse 50% 55% at 50% 70%, rgba(42, 231, 255, .28), transparent 68%),
    radial-gradient(ellipse 60% 40% at 50% 85%, rgba(47, 107, 255, .20), transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}

.hx-cta h2 {
  position: relative;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.28;
  margin: 0 0 16px;
  color: #F2F8FF;
}

.hx-cta p {
  position: relative;
  font-size: 14.5px;
  color: var(--hx-text-2);
  margin: 0 0 34px;
  line-height: 1.8;
}

.hx-cta .hx-actions {
  justify-content: center;
  margin-bottom: 0;
}

/* ============================================================
   Footer 微调
   ============================================================ */

body.landing-layout footer {
  background: linear-gradient(180deg, #06090F 0%, #04060B 100%);
  border-top: 1px solid rgba(146, 178, 216, .08);
}

body.landing-layout footer::before {
  background: linear-gradient(90deg, transparent, rgba(42, 231, 255, .4) 30%, rgba(47, 107, 255, .28) 70%, transparent);
}

body.landing-layout .footer-copy,
body.landing-layout .footer-links a,
body.landing-layout .footer-compliance {
  color: var(--hx-text-3);
}

body.landing-layout .footer-links a:hover {
  color: var(--hx-cyan);
}

body.landing-layout footer img {
  border-radius: 5px;
}

/* ============================================================
   登录 / 注册弹窗（深色）
   ============================================================ */

body.landing-layout .modal-overlay {
  background: rgba(3, 6, 12, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.landing-layout .modal {
  background: linear-gradient(170deg, rgba(14, 21, 36, .98), rgba(8, 12, 22, 1));
  border: 1px solid rgba(146, 178, 216, .2);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(42, 231, 255, .1), 0 40px 100px -40px rgba(0, 0, 0, 1), 0 0 80px -40px rgba(42, 231, 255, .7);
}

body.landing-layout .modal-title {
  color: #F0F7FF;
}

body.landing-layout .modal-sub,
body.landing-layout .modal-switch {
  color: var(--hx-text-3);
}

body.landing-layout .modal-switch a {
  color: var(--hx-cyan);
}

body.landing-layout .modal-close {
  color: var(--hx-text-2);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(146, 178, 216, .18);
  transition: all .25s var(--hx-ease);
}

body.landing-layout .modal-close:hover {
  color: var(--hx-cyan);
  background: rgba(42, 231, 255, .12);
  border-color: rgba(42, 231, 255, .45);
}

body.landing-layout .tabs {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(146, 178, 216, .14);
  border-radius: 11px;
}

body.landing-layout .tab-btn {
  color: var(--hx-text-2);
  border-radius: 9px;
}

body.landing-layout .tab-btn.active {
  background: rgba(42, 231, 255, .12);
  color: var(--hx-cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

body.landing-layout .form-label {
  color: var(--hx-text-2);
}

body.landing-layout .form-input {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(146, 178, 216, .18);
  color: #E9F1FB;
  border-radius: 10px;
}

body.landing-layout .form-input::placeholder {
  color: #55677D;
}

body.landing-layout .form-input:focus {
  border-color: rgba(42, 231, 255, .55);
  box-shadow: 0 0 0 3px rgba(42, 231, 255, .12);
  background: rgba(42, 231, 255, .04);
}

body.landing-layout .form-submit {
  background: linear-gradient(135deg, #7FF0FF, #2AE7FF 45%, #2F6BFF);
  color: #041018;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  box-shadow: 0 12px 32px -14px rgba(42, 231, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .55);
}

body.landing-layout .modal label {
  color: var(--hx-text-3) !important;
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 1100px) {
  .hx-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hx-preview {
    max-width: 560px;
  }

  .hx-screen {
    transform: none;
  }

  .hx-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hx-node:not(:nth-child(5n))::after {
    display: none;
  }

  .hx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-role-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hx-price-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (max-width: 720px) {
  .hx-wrap {
    padding: 0 20px;
  }

  .hx-hero {
    padding: 104px 0 56px;
  }

  /* 移动端光斑收窄并压暗：1280px 的宽光在 390 视口上会铺满整屏，
     看起来像一层灰雾而不是「打光」。 */
  .hx-hero::before {
    width: 700px;
    height: 430px;
    top: -250px;
    opacity: .62;
    filter: blur(34px);
  }

  .hx-hero-title {
    font-size: 32px;
  }

  .hx-hero-sub {
    font-size: 14.5px;
  }

  .hx-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-flow,
  .hx-grid {
    grid-template-columns: 1fr;
  }

  .hx-role-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-chain-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hx-ent-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hx-ent-btn {
    width: 100%;
    justify-content: center;
  }

  .hx-section,
  .hx-features,
  .hx-pricing {
    padding: 56px 0;
  }

  .hx-cta {
    padding: 64px 0 72px;
  }

  body.landing-layout .landing-nav {
    padding: 0 20px;
  }
}

/* 尊重系统的「减少动态效果」偏好：动画全部关掉，只留静态质感 */
@media (prefers-reduced-motion: reduce) {
  .hx-metal-text,
  .hx-eyebrow i {
    animation: none;
  }

  .hx-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hx-card:hover,
  .hx-node:hover,
  .hx-role:hover,
  .hx-screen:hover {
    transform: none;
  }
}