/* 日进欢迎页 — 深色工业科技风
   单一强调色：青色钢蓝（#4fd1c5 系）。全页一致，不混暖灰。 */

:root {
  --bg: #0b1117;
  --bg-deep: #070c11;
  --text: #e9f0f2;
  --text-dim: #8b9aa4;
  --accent: #4fd1c5;
  --accent-soft: #7de3da;
  --accent-glow: rgba(79, 209, 197, .28);
  --radius: 16px;
  --font: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- 粒子画布 ---- */
#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ---- 背景图层（外部图片） ---- */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .14;
  filter: saturate(.6) contrast(1.1);
  transform: scale(1.06);
  animation: bg-drift 46s ease-in-out infinite alternate;
}

.bg-img--b { animation-delay: -23s; opacity: .10; }

@keyframes bg-drift {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.12) translate(1.5%, -1.5%); }
}

/* ---- 顶部光晕 ---- */
.glow {
  position: fixed;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(79, 209, 197, .18), transparent 52%),
    radial-gradient(circle at 82% 78%, rgba(79, 209, 197, .10), transparent 46%);
  pointer-events: none;
}

/* ---- 主视觉 ---- */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .18em;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: clamp(28px, 6vh, 64px);
  text-transform: uppercase;
}

.brand-mark {
  color: var(--accent);
  font-size: 18px;
}

.hero-copy { max-width: 720px; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid rgba(79, 209, 197, .28);
  border-radius: 999px;
}

.hero-title {
  font-size: clamp(44px, 8vw, 104px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.06;
  background: linear-gradient(110deg, #ffffff 20%, var(--accent-soft) 60%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin: 26px auto 0;
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.9;
  color: var(--text-dim);
  font-weight: 300;
}

.hero-cta {
  margin-top: 40px;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer;
}

.cta--primary {
  background: var(--accent);
  color: #06231f;
  box-shadow: 0 8px 30px var(--accent-glow);
}
.cta--primary:active { transform: translateY(-1px) scale(.98); }

.cta--ghost {
  color: var(--text);
  border: 1px solid rgba(231, 240, 242, .22);
  background: rgba(231, 240, 242, .04);
}
.cta--ghost:hover {
  background: rgba(79, 209, 197, .12);
  border-color: rgba(79, 209, 197, .5);
}
.cta--ghost:active { transform: scale(.98); }

/* ---- 能力板块 ---- */
.capabilities {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

.cap {
  padding: 34px 30px;
  border-radius: var(--radius);
  border: 1px solid rgba(231, 240, 242, .10);
  background: linear-gradient(160deg, rgba(231, 240, 242, .06), rgba(231, 240, 242, .015));
  backdrop-filter: blur(8px);
  text-align: left;
}

.cap-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(79, 209, 197, .14);
  color: var(--accent);
  font-size: 20px;
  margin-bottom: 20px;
}

.cap-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: 12px;
}

.cap-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-dim);
  font-weight: 300;
}

/* ---- 页脚 ---- */
.foot {
  position: relative;
  z-index: 2;
  padding: 28px 24px 40px;
  text-align: center;
}

.foot-line {
  display: block;
  width: 64px;
  height: 2px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.icp-info {
  text-align: center;
  padding: 12px 0 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 8px;
}
.icp-info a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.3s ease;
}
/* 鼠标悬停时稍微变亮，但仍然保持低调 */
.icp-info a:hover {
  color: rgba(255, 255, 255, 0.75);
}

/* 公司名称 - 更淡一些 */
.icp-info .icp-company {
  margin-left: 12px;
  color: rgba(255, 255, 255, 0.75);
}
.foot-text {
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--text-dim);
}

/* ---- 可访问性：减少动态 ---- */
@media (prefers-reduced-motion: reduce) {
  .bg-img { animation: none; }
  .hero-title { animation: none; }
}

/* ---- 移动端 ---- */
@media (max-width: 640px) {
  .hero { padding-top: 72px; }
  .hero-cta { flex-direction: column; width: min(100%, 320px); margin-inline: auto; }
  .capabilities { padding-bottom: 40px; }
}