/* ================================================================
   VERITAS · 全站科技风精修层（美观 + 克制科技感）
   跟随 themes.css 配色变量，兼容 12 套模板
   加载于 service-cards 之后、theme-contrast 之前
   ================================================================ */

/* ── 设计 token（随配色变化）────────────────────────────────── */
html[data-template] {
  --tech-glass: color-mix(in srgb, var(--d1) 78%, transparent);
  --tech-glass-bd: color-mix(in srgb, var(--g) 22%, var(--ln));
  --tech-glow: 0 0 40px color-mix(in srgb, var(--g) 28%, transparent);
  --tech-glow-sm: 0 0 20px color-mix(in srgb, var(--g) 18%, transparent);
  --tech-mesh: radial-gradient(ellipse 80% 50% at 20% -10%, var(--g10), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 20%, color-mix(in srgb, var(--seo-bg) 80%, transparent), transparent 50%);
}

/* ── 导航：毛玻璃 + 细线光晕 ─────────────────────────────────── */
html[data-template] .navbar.scrolled,
html[data-template] .navbar.light-nav,
html[data-template] .navbar:not(.transparent) {
  background: color-mix(in srgb, var(--d1) 82%, transparent) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
  border-bottom: 1px solid var(--tech-glass-bd) !important;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--g10) 50%, transparent) !important;
}
html[data-template] .navbar.transparent .nav-link {
  transition: color .2s, opacity .2s;
}
html[data-template] .nav-cta {
  background: var(--grad-brand) !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--g) 35%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--gl) 40%, transparent) !important;
}
html[data-template] .nav-cta:hover {
  box-shadow: 0 6px 28px color-mix(in srgb, var(--g) 45%, transparent), var(--tech-glow-sm) !important;
}

/* ── Hero：科技氛围（轻量，不抢模板身份）────────────────────── */
html[data-template] .hero {
  isolation: isolate;
}
html[data-template] .hero::after {
  content: '' !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--black) 30%, transparent) 0%, transparent 35%, transparent 70%, color-mix(in srgb, var(--black) 40%, transparent) 100%),
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--g10) 90%, transparent), transparent 60%) !important;
  opacity: 1 !important;
}
html[data-template="classic-iris"] .hero-orb,
html[data-template="ocean-teal"] .hero-orb,
html[data-template="rose-blush"] .hero-orb {
  opacity: 0.55 !important;
  filter: blur(64px) !important;
}
html[data-template] .hero-badge {
  background: var(--tech-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--tech-glass-bd) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--d1) 60%, white) !important;
}
html[data-template] .hero-badge-dot {
  box-shadow: 0 0 10px var(--g), 0 0 20px color-mix(in srgb, var(--g) 50%, transparent) !important;
  animation: tech-pulse 2.4s ease-in-out infinite !important;
}
@keyframes tech-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}
html[data-template] .hero-title-en {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.24em !important;
  opacity: 0.65 !important;
}
html[data-template] .hero-chip {
  background: var(--tech-glass) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--tech-glass-bd) !important;
  transition: transform .2s, border-color .2s, box-shadow .2s !important;
}
html[data-template] .hero-chip:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--g) 45%, var(--ln)) !important;
  box-shadow: var(--tech-glow-sm) !important;
}
html[data-template] .hero-stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 按钮 ─────────────────────────────────────────────────────── */
html[data-template] .btn--primary {
  background: var(--grad-brand) !important;
  border: 1px solid color-mix(in srgb, var(--gl) 35%, transparent) !important;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--g) 32%, transparent) !important;
  transition: transform .2s, box-shadow .2s, filter .2s !important;
}
html[data-template] .btn--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--g) 42%, transparent), var(--tech-glow-sm) !important;
  filter: brightness(1.05) !important;
}
html[data-template] .btn--outline {
  background: color-mix(in srgb, var(--d1) 60%, transparent) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--tech-glass-bd) !important;
  transition: border-color .2s, box-shadow .2s, transform .2s !important;
}
html[data-template] .btn--outline:hover {
  border-color: color-mix(in srgb, var(--g) 50%, var(--ln)) !important;
  box-shadow: var(--tech-glow-sm) !important;
  transform: translateY(-1px) !important;
}

/* ── 区块标题 ─────────────────────────────────────────────────── */
html[data-template] .section-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 10px !important;
  background: color-mix(in srgb, var(--g10) 70%, var(--d1)) !important;
  border: 1px solid var(--tech-glass-bd) !important;
  border-radius: 999px !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.16em !important;
}
html[data-template] .section-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g);
  box-shadow: 0 0 8px var(--g);
  flex-shrink: 0;
}
html[data-template] .section-title {
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}
html[data-template] .section-sub {
  line-height: 1.75 !important;
  opacity: 0.92;
}

/* ── 服务卡 / 价值卡：玻璃效果仅用于 SaaS 风布局，避免 12 套趋同 ── */
html[data-layout-ref="stripe"] .service-card,
html[data-layout-ref="stripe"] .value-card,
html[data-layout-ref="stripe"] .client-card,
html[data-layout-ref="stripe"] .news-card,
html[data-layout-ref="linear"] .service-card,
html[data-layout-ref="linear"] .value-card,
html[data-layout-ref="datadog"] .service-card,
html[data-layout-ref="datadog"] .value-card,
html[data-layout-ref="datadog"] .client-card,
html[data-layout-ref="glossier"] .service-card,
html[data-layout-ref="glossier"] .client-card,
html[data-layout-ref="notion"] .service-card,
html[data-layout-ref="notion"] .value-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--d1), color-mix(in srgb, var(--d2) 85%, var(--d1))) !important;
  border: 1px solid var(--tech-glass-bd) !important;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--g10) 35%, transparent) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
html[data-layout-ref="stripe"] .service-card::after,
html[data-layout-ref="stripe"] .value-card::after,
html[data-layout-ref="stripe"] .client-card::after,
html[data-layout-ref="datadog"] .service-card::after,
html[data-layout-ref="datadog"] .value-card::after,
html[data-layout-ref="glossier"] .client-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g10) 40%, transparent), transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
html[data-layout-ref="stripe"] .service-card:hover,
html[data-layout-ref="stripe"] .value-card:hover,
html[data-layout-ref="stripe"] .client-card:hover,
html[data-layout-ref="stripe"] .news-card:hover,
html[data-layout-ref="linear"] .service-card:hover,
html[data-layout-ref="datadog"] .service-card:hover,
html[data-layout-ref="datadog"] .value-card:hover,
html[data-layout-ref="glossier"] .service-card:hover,
html[data-layout-ref="glossier"] .client-card:hover,
html[data-layout-ref="notion"] .service-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--g) 38%, var(--ln)) !important;
  box-shadow: 0 16px 48px color-mix(in srgb, var(--g10) 65%, transparent), var(--tech-glow-sm) !important;
}
html[data-layout-ref="stripe"] .service-card:hover::after,
html[data-layout-ref="stripe"] .value-card:hover::after,
html[data-layout-ref="stripe"] .client-card:hover::after,
html[data-layout-ref="datadog"] .service-card:hover::after,
html[data-layout-ref="glossier"] .client-card:hover::after {
  opacity: 1;
}
html[data-template] .service-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--g10) 80%, var(--d1));
  border: 1px solid var(--tech-glass-bd);
  font-size: 1.1rem !important;
}
html[data-template] .service-metric {
  background: color-mix(in srgb, var(--d2) 90%, var(--d1)) !important;
  border: 1px solid var(--tech-glass-bd) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
html[data-template] .service-card:hover .service-metric {
  border-color: color-mix(in srgb, var(--g) 30%, var(--ln)) !important;
}
html[data-template] .service-metric-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
html[data-template] .service-platforms .service-platforms__tag {
  background: color-mix(in srgb, var(--d2) 85%, var(--d1)) !important;
  border: 1px solid var(--tech-glass-bd) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.06em !important;
  transition: border-color .2s, color .2s !important;
}
html[data-template] .service-card:hover .service-platforms__tag {
  border-color: color-mix(in srgb, var(--g) 35%, var(--ln)) !important;
}

/* ── 数据统计（Linear / Stripe / Datadog 保留玻璃条，其余由 layout 层接管）── */
html[data-layout-ref="stripe"] .stats-grid,
html[data-layout-ref="datadog"] .stats-grid {
  background: var(--tech-glass) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--tech-glass-bd) !important;
  box-shadow: 0 8px 40px color-mix(in srgb, var(--g10) 40%, transparent) !important;
}
html[data-template] .stat-item {
  background: transparent !important;
  position: relative;
}
html[data-template] .stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--ln);
}
html[data-template] .stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--g) 25%, transparent));
}

/* ── 暗色区块 / 流程 / 资讯 ───────────────────────────────────── */
html[data-template] .section--dark {
  background:
    var(--tech-mesh),
    color-mix(in srgb, var(--g10) 45%, var(--black)) !important;
}
html[data-template] .process-step,
html[data-template] .value-card {
  backdrop-filter: blur(6px);
}
html[data-template] .process-step-num {
  background: var(--grad-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--g) 35%, transparent) !important;
}
html[data-template] .ticker-wrap {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  border-block: 1px solid var(--tech-glass-bd) !important;
}
html[data-template] .news-card:hover {
  border-color: color-mix(in srgb, var(--g) 35%, var(--ln)) !important;
}

/* ── CTA：科技网格叠加 ────────────────────────────────────────── */
html[data-template] .cta-banner {
  position: relative;
  overflow: hidden;
  background: var(--grad-brand) !important;
}
html[data-template] .cta-banner::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  opacity: 0.35 !important;
  pointer-events: none;
}
html[data-template] .cta-banner::after {
  content: '' !important;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(255,255,255,.12), transparent 60%) !important;
  pointer-events: none;
}
html[data-template] .cta-banner .btn--outline {
  border-color: rgba(255,255,255,.65) !important;
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
html[data-template] .cta-banner .btn--primary {
  background: #fff !important;
  color: var(--gd) !important;
  -webkit-text-fill-color: var(--gd) !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.15) !important;
}

/* ── 页脚 ─────────────────────────────────────────────────────── */
html[data-template] .footer {
  background:
    linear-gradient(180deg, var(--d2), color-mix(in srgb, var(--black) 95%, var(--d2))) !important;
  border-top: 1px solid var(--tech-glass-bd) !important;
}
html[data-template] .footer-heading {
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  text-transform: uppercase;
  opacity: 0.85;
}
html[data-template] .footer-link:hover {
  color: var(--g) !important;
}

/* ── 返回顶部 ─────────────────────────────────────────────────── */
html[data-template] .back-top {
  background: var(--grad-brand) !important;
  border: 1px solid color-mix(in srgb, var(--gl) 40%, transparent) !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--g) 35%, transparent) !important;
}

/* ── 子页 Hero ────────────────────────────────────────────────── */
html[data-template] .page-hero {
  background:
    var(--tech-mesh),
    linear-gradient(180deg, var(--d1), var(--black)) !important;
  border-bottom: 1px solid var(--tech-glass-bd);
}

/* ── 模板特例：保留各自形状语言 ───────────────────────────────── */
html[data-template="ink-minimal"] .service-card,
html[data-template="ink-minimal"] .value-card,
html[data-template="ink-minimal"] .client-card,
html[data-template="ink-minimal"] .section-badge {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-template="ink-minimal"] .service-card::after,
html[data-template="ink-minimal"] .value-card::after { display: none; }
html[data-template="ink-minimal"] .section-badge::before { border-radius: 0; width: 8px; height: 8px; }

html[data-template="neon-cyber"] .service-card,
html[data-template="neon-cyber"] .stat-item {
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--g10) 50%, transparent) !important;
}
html[data-template="neon-cyber"] .section-badge {
  border-radius: 2px !important;
  font-family: ui-monospace, monospace;
}

html[data-template="mint-spring"] .service-card:hover {
  transform: translateY(-2px) rotate(-0.2deg) !important;
}

@media (max-width: 768px) {
  html[data-template] .stat-item:not(:last-child)::after { display: none; }
  html[data-template] .hero-chip { padding: 10px 12px !important; }
}