/* ============================================================
   今测 JINCE 官网 · 主题层 v2.0
   High-tech Glassmorphism：霓虹青柠 × 深曜石 × 建筑网格 × 有机光晕
   ------------------------------------------------------------
   加载顺序在 site.css 之后，只做「表面与形态」覆写：
   结构类名、交互钩子（[data-sr] / .charline / .rv-img / .spot 等）全部沿用，
   不改任何行为。
   ============================================================ */

/* ============================================================
   1 · 浮动壳层：整页像一块悬浮的应用面板
   ============================================================ */

.shell {
  position: relative;
  z-index: 1;
  width: min(1920px, 100% - 28px);
  margin: 94px auto 20px;
  border-radius: var(--shell-r);
  border: 1px solid var(--glass-line);
  background: linear-gradient(
    180deg,
    rgba(13, 16, 20, 0.86) 0%,
    rgba(9, 11, 14, 0.9) 46%,
    rgba(8, 10, 13, 0.94) 100%
  );
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* 壳层顶部一道青柠发丝光 */
.shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--lime) 30%,
    var(--neon-3) 70%,
    transparent
  );
  opacity: 0.5;
  pointer-events: none;
  z-index: 3;
}

/* 壳层内部再压一层细网格（透过半透明底可见，强化建筑感） */
.shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: linear-gradient(180deg, #000, transparent 42%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 42%);
}

.shell > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   2 · 顶栏 → 悬浮胶囊玻璃条
   ============================================================ */

.nav {
  border-bottom: 0;
  padding-top: 18px;
}

.nav::before,
.nav::after {
  display: none;
}

.nav__inner {
  height: 62px;
  width: min(1560px, 100% - 40px);
  margin-inline: auto;
  padding: 0 10px 0 24px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: rgba(11, 14, 18, 0.52);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: height 0.45s var(--ease), background 0.45s var(--ease),
    border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.nav.is-tight {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

.nav.is-tight .nav__inner {
  height: 54px;
  background: rgba(9, 11, 15, 0.82);
  border-color: var(--glass-line-2);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.98),
    0 0 0 1px rgba(204, 255, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav__zh {
  font-family: var(--font-display);
  font-weight: 700;
}

.nav__cta {
  border-color: var(--glass-line-2);
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.nav__cta:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: #0a0d05;
  box-shadow: 0 8px 30px -10px var(--lime-glow);
}

.nav__sheet {
  inset: 92px 16px 16px;
  border-radius: var(--r-l);
  border: 1px solid var(--glass-line);
  background: rgba(8, 10, 13, 0.94);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  overflow: auto;
}

/* ============================================================
   3 · 阅读进度条 / 章节轴
   ============================================================ */

.progress {
  height: 3px;
}

.progress__bar {
  background: linear-gradient(90deg, var(--neon-3), var(--lime) 60%, var(--lime-3));
  box-shadow: 0 0 14px -2px var(--lime-glow);
}

/* ============================================================
   4 · 首屏：建筑网格 + 有机光晕 + 悬浮玻璃指标台
   ============================================================ */

.hero {
  min-height: calc(100svh - 118px);
  padding: calc(var(--nav-h) + 22px) 0 clamp(64px, 9vh, 120px);
}

/* 光晕换成青柠主调（青绿 + 微紫做纵深），保留有机形态 */
.hero__nebula {
  background: radial-gradient(
      118% 92% at 50% 114%,
      rgba(204, 255, 0, 0.17) 0%,
      rgba(16, 185, 129, 0.1) 34%,
      rgba(96, 78, 190, 0.07) 62%,
      transparent 80%
    ),
    radial-gradient(
      70% 60% at 14% 4%,
      rgba(139, 124, 255, 0.09),
      transparent 70%
    ),
    #07080a;
}

.neb__rays {
  background: repeating-conic-gradient(
    from 176deg at 50% 50%,
    rgba(204, 255, 0, 0.1) 0deg 1deg,
    transparent 1deg 7deg
  );
  opacity: 0.62;
}

.neb__core {
  background: radial-gradient(
    closest-side,
    rgba(232, 255, 154, 0.3),
    rgba(204, 255, 0, 0.15) 46%,
    transparent 74%
  );
}

.neb__blob--a {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.22), transparent 68%);
}

.neb__blob--b {
  background: radial-gradient(circle, rgba(139, 124, 255, 0.18), transparent 68%);
}

/* 首屏内的建筑网格：与全局同格距，中心亮、四周淡 */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(120% 92% at 50% 18%, #000 6%, transparent 74%);
  -webkit-mask-image: radial-gradient(
    120% 92% at 50% 18%,
    #000 6%,
    transparent 74%
  );
}

/* 内容 + 指标台两栏 */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: end;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.hero__lead {
  max-width: 32em;
}

/* 悬浮玻璃指标台 */
.hero__panel {
  padding: 24px 24px 20px;
  border-radius: var(--r-l);
  border: 1px solid var(--glass-line);
  background: rgba(14, 17, 22, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translate3d(0, calc(var(--hp, 0) * -40px), 0);
  opacity: calc(1 - var(--hp, 0) * 1.15);
  will-change: transform, opacity;
}

.hero__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.hero__panel-head b {
  color: var(--lime);
  font-weight: 500;
}

.hero__panel-head i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px 0 var(--lime-glow);
  flex: none;
}

/* 指标台里的 KPI 改成纵向清单 */
.hero__kpis {
  display: block;
}

.hero__kpis .kpi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.hero__kpis .kpi__value {
  order: 2;
  flex: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.hero__kpis .kpi__label {
  order: 1;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--fg-3);
  text-align: left;
}

.hero__kpis .kpi:last-child {
  border-bottom: 0;
}

.hero__kpi-note {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

/* ============================================================
   5 · 关键词带 / 分区
   ============================================================ */

.marquee {
  border-block: 1px solid var(--glass-line);
  background: rgba(11, 14, 18, 0.66);
}

.marquee__item::after {
  background: var(--lime);
  box-shadow: 0 0 10px 0 var(--lime-glow);
}

.sec + .sec {
  border-top: 1px solid var(--line);
}

.spot::before {
  background: radial-gradient(
    340px 260px at var(--mx, 50%) var(--my, 50%),
    rgba(204, 255, 0, 0.11),
    transparent 68%
  );
}

/* ============================================================
   6 · 玻璃卡片：产品能力 / 解决方案 / 项目 / 联系
   ============================================================ */

.caps,
.sols,
.projs,
.contact__info,
.form {
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  background: linear-gradient(
    180deg,
    rgba(16, 20, 25, 0.82),
    rgba(11, 14, 18, 0.86)
  );
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.caps {
  gap: 1px;
  background: linear-gradient(
    180deg,
    rgba(13, 16, 21, 0.5),
    rgba(10, 12, 16, 0.5)
  );
}

.cap {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.022),
    rgba(255, 255, 255, 0)
  );
  border-radius: 0;
}

.cap:hover {
  background: linear-gradient(
    180deg,
    rgba(204, 255, 0, 0.055),
    rgba(255, 255, 255, 0.008)
  );
}

.cap__name,
.sol__name,
.proj__title,
.flow__name,
.form__title,
.contact__headline,
.foot__h,
.hero__title,
.sec-head__title {
  font-family: var(--font-display);
}

.cap__name {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.tag {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--glass-line-2);
  color: var(--fg-2);
}

.cap:hover .tag {
  border-color: rgba(204, 255, 0, 0.4);
  color: var(--lime-3);
}

.cap__metric,
.proj__data,
.sol__idx,
.cap__idx {
  font-family: var(--font-mono);
}

.sols,
.projs {
  overflow: hidden;
}

.sol,
.proj {
  border-radius: 0;
  background: transparent;
}

.sol:hover {
  background: rgba(204, 255, 0, 0.045);
}

.proj:hover {
  background: rgba(204, 255, 0, 0.03);
}

.rv-img {
  border-radius: var(--r-m);
  border: 1px solid var(--glass-line);
}

/* 交付流程：玻璃轨道 + 青柠节点 */
.flow__rail {
  background: rgba(255, 255, 255, 0.08);
}

.flow__rail span {
  background: linear-gradient(90deg, var(--neon-3), var(--lime));
  box-shadow: 0 0 14px -2px var(--lime-glow);
}

.flow__step.is-in .flow__dot {
  border-color: var(--lime);
  box-shadow: 0 0 0 4px rgba(204, 255, 0, 0.12);
}

.flow__idx {
  font-family: var(--font-mono);
  color: var(--lime);
}

/* ============================================================
   7 · 表单：玻璃输入框 + 青柠聚焦
   ============================================================ */

.form {
  padding: 30px;
}

.form::before {
  background: radial-gradient(
    420px 240px at 88% -10%,
    rgba(204, 255, 0, 0.12),
    transparent 70%
  );
}

.form__title {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.field input,
.field select,
.field textarea {
  background: rgba(8, 10, 14, 0.6);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-m);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--lime);
  background: rgba(10, 13, 17, 0.85);
  box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.12),
    0 0 30px -8px var(--lime-glow);
}

.contact__info {
  padding: 24px 26px;
}

.form-status.ok {
  border-color: rgba(204, 255, 0, 0.4);
  color: var(--lime);
}

/* ============================================================
   8 · 页脚
   ============================================================ */

.foot {
  border-top: 1px solid var(--glass-line);
  background: rgba(8, 10, 13, 0.85);
}

.foot__brand-zh {
  font-family: var(--font-display);
  font-weight: 700;
}

/* ============================================================
   9 · 响应式
   ============================================================ */

@media (max-width: 1180px) {
  .hero__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero__panel {
    max-width: 520px;
  }
}

@media (max-width: 960px) {
  .caps,
  .sols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .shell {
    width: calc(100% - 16px);
    margin: 82px auto 12px;
    border-radius: var(--r-l);
  }
  .nav {
    padding-top: 12px;
  }
  .nav__inner {
    width: calc(100% - 20px);
    padding: 0 8px 0 16px;
    height: 56px;
  }
  .nav.is-tight .nav__inner {
    height: 50px;
  }
  .hero {
    min-height: auto;
    padding-bottom: 56px;
  }
  .form {
    padding: 22px;
  }
}