/* ============================================================
   云真科技企业官网 — style.css
   基于 yunzhen-website-spec.md v1.3
   ============================================================ */

/* ── 1. CSS Variables (§4.1 配色方案) ── */
:root {
  /* 背景（暗色系） */
  --bg-deepest: #02040a;
  --bg-darker: #030510;
  --bg-dark: #080c1c;
  --bg-card: rgba(255,255,255, 0.015);
  --bg-card-hover: rgba(255,255,255, 0.028);
  /* 文字颜色 */
  --text-white: #ffffff;
  --text-light: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --text-footer: #334155;
  /* 强调色 */
  --accent-blue: #60a5fa;
  --accent-blue-bright: #93c5fd;
  --gradient-primary: linear-gradient(135deg, #3b82f6, #6366f1);
  /* 边框 */
  --border-default: rgba(255,255,255, 0.06);
  --border-hover: rgba(255,255,255, 0.14);
  --border-accent: rgba(96,165,250, 0.25);
}

/* ── 2. CSS Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
@media(prefers-reduced-motion:reduce){ html{scroll-beh:auto;} }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", sans-serif;
  background-color: var(--bg-darker); color: var(--text-muted);
  line-height: 1.7; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
ul { list-style: none; }
a { text-decoration: none; color: inherit; transition: color .25s; }
img { max-width: 100%; display: block; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
input, textarea { font-family: inherit; font-size: inherit; }

/* ── 3. 全局容器 (§4.3) ── */
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ── 4. Section 通用样式 ── */
.section { padding: 100px 0; position: relative; }
.section-label {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-blue); margin-bottom: 10px;
}
.section-title { font-size: 36px; font-weight: 700; color: var(--text-white); line-height: 1.25; margin-bottom: 18px; }
.section-desc { font-size: 17px; color: var(--text-muted); max-width: 600px; line-height: 1.7; }

/* ── 5. 按钮 ── */
.btn {
  display: inline-block; padding: 13px 30px; border-radius: 9px;
  font-size: 15px; font-weight: 600; transition: all .3s ease;
  cursor: pointer; border: none; line-height: 1.4;
}
.btn-primary {
  background: var(--gradient-primary); color: #fff;
  box-shadow: 0 4px 24px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(59,130,246,.4), 0 0 60px rgba(99,102,241,.15);
}
.btn-secondary {
  background: transparent; color: var(--text-light);
  border: 1px solid var(--border-hover);
}
.btn-secondary:hover {
  border-color: var(--accent-blue); color: var(--accent-blue-bright); transform: translateY(-2px);
}

/* ============================================================
  [1] 导航栏 (§三[1])
  ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  /* 渐进增强写法 (§十二降级策略) */
  background: rgba(10,14,23,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-default);
  transition: background .3s;
  /* 防止初始化闪烁 */
  will-change: background;
}
.nav-container {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; height: 66px;
}
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 700;
  background: linear-gradient(135deg, var(--accent-blue), #a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-size: 14px; color: var(--text-muted); font-weight: 400;
  position: relative; padding: 4px 0;
  transition: color .25s;
}
.nav-links a:hover { color: var(--text-white); }
/* Scroll-Spy 高亮 (§16.5) — active类由JS添加 */
.nav-links a.active {
  color: var(--text-white);
}
.nav-links a.active::after {
  content:''; position:absolute; bottom:-22px; left:0; right:0;
  height: 2px; background: var(--accent-blue);
  border-radius: 1px;
}

/* 汉堡菜单按钮 */
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 26px; z-index: 1001; }
.hamburger span { display:block; width:100%; height:2px; background:var(--text-light); border-radius:2px; transition: all .3s ease; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(7px,-6px); }

/* 移动端侧滑导航面板 */
.nav-panel-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:998;
}
.nav-panel-overlay.show { display:block; }

/* Layer 2: 银河带 — 斜向椭圆径向渐变（§五 星空8层叠） */
.galaxy-band {
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;
}
.galaxy-band::before,
.galaxy-band::after {
  content:''; position:absolute;
  border-radius:50%; opacity:.12; filter:blur(60px);
}
.galaxy-band::before {
  width:600px; height:200px;
  background:radial-gradient(ellipse, rgba(147,197,253,.2), transparent 70%);
  top:25%; left:-100px;
  transform:rotate(-20deg);
}
.galaxy-band::after {
  width:500px; height:180px;
  background:radial-gradient(ellipse, rgba(167,139,250,.15), transparent 70%);
  top:40%; right:-80px;
  transform:rotate(15deg);
}

/* Layer 3: 星云团 — 彩色椭圆径向渐变 */
.nebula-layer {
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;
}
.nebula-cloud {
  position:absolute; border-radius:50%; filter:blur(80px);
}

/* Layer 4: 暗角遮盖 — 向下渐变遮盖底部 */
.vignette-overlay {
  position:absolute; bottom:0; left:0; right:0; height:35%;
  background:linear-gradient(to top, var(--bg-deepest), transparent);
  pointer-events:none; z-index:2;
}
.nav-panel {
  position: fixed; top:0; right:-280px; width:280px; height:100vh;
  background:#0a0e17; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  z-index:999; transition:right .3s ease; padding-top:80px;
  border-left:1px solid var(--border-default);
}
.nav-panel.open { right:0; }
.nav-panel-links li { border-bottom:1px solid var(--border-default); }
.nav-panel-links a {
  display:block; padding:18px 28px; font-size:16px; color:var(--text-muted);
  transition:color .2s, background .2s;
}
.nav-panel-links a:hover { color:var(--text-white); background:rgba(255,255,255,.03); }

/* ============================================================
   [2] Hero 首屏区 (§二[2] + §五)
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden;
  /* Layer 1: 基底渐变 */
  background:
    linear-gradient(180deg,
      #02040a 0%, #05081a 25%, #080c1c 50%,
      #060a18 75%, #030510 100%);
}
/* 星空层由JS动态生成，这里只定义星点动画关键帧 */
.star-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; opacity:0; transition:opacity .8s ease; }
.star-layer.ready { opacity:1; }
.star { position:absolute; border-radius:50%; }
@keyframes twinkle {
  0%, 100% { opacity: var(--op-min, .2); }
  50% { opacity: var(--op-max, .6); }
}
.meteor { pointer-events:none; z-index:2; }
@keyframes meteor-fall {
  0% { opacity:0; transform:translate(0,0) rotate(-35deg); }
  5% { opacity:1; }
  70% { opacity:.8; }
  100% { opacity:0; transform:translate(-300px,200px) rotate(-35deg); }
}
.orb { position:absolute; border-radius:50%; filter:blur(40px); pointer-events:none; z-index:0; }
@keyframes orb-pulse {
  0%, 100% { opacity:.4; transform:scale(1); }
  50% { opacity:.7; transform:scale(1.15); }
}

/* 弹窗打开时暂停所有星空动画，减少 GPU 负载 */
.modal-open .star, .modal-open .meteor, .modal-open .orb {
  animation-play-state: paused !important;
}
/* 弹窗打开时禁用全局 smooth scroll，防止 body fixed 时浏览器仍做滚动插值 */
.modal-open { scroll-behavior: auto !important; }

/* Hero 内容层 */
.hero-content {
  position:relative; z-index:10; text-align:center;
  padding: 0 24px; max-width: 800px;
}
.hero-title {
  font-size:52px; font-weight:800; color:var(--text-white);
  line-height:1.2; margin-bottom:22px; letter-spacing:-0.5px;
}
.hero-subtitle {
  font-size:18px; color:var(--text-muted); line-height:1.8;
  max-width:600px; margin:0 auto 32px;
}
.hero-tags { display:flex; gap:12px; justify-content:center; margin-bottom:42px; flex-wrap:wrap; }
.hero-tag {
  padding:6px 18px; border-radius:999px; font-size:13px;
  border:1px solid var(--border-accent); color:var(--accent-blue-bright);
  backdrop-filter:blur(4px); background:rgba(96,165,250,.05);
}
.hero-ctas { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* SCROLL 提示 */
.scroll-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:10; text-align:center; cursor:pointer; animation:bounce 2s infinite;
}
.scroll-hint span {
  display:block; font-size:11px; letter-spacing:3px; color:var(--text-dim);
  margin-bottom:8px;
}
.scroll-arrow {
  width:16px; height:16px; border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim);
  transform:rotate(45deg); margin:0 auto; animation:arrow-pulse 2s infinite;
}
@keyframes bounce { 0%,100%{transform:translateX(-50%)translateY(0);} 50%{transform:translateX(-50%)translateY(8px);} }
@keyframes arrow-pulse { 0%,100%{opacity:.4;} 50%{opacity:1;} }

/* ============================================================
   [3] 关于我们 (§三[3])
   ============================================================ */
.about { background: var(--bg-dark); }
.about-grid { display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:start; }
.about-text p { font-size:16px; color:var(--text-muted); line-height:1.85; margin-bottom:18px; }
.about-highlight { color:var(--accent-blue) !important; font-style:italic; }
.about-cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.advantage-card {
  background:var(--bg-card); border:1px solid var(--border-default);
  border-radius:14px; padding:24px 20px; transition:all .3s ease;
}
.advantage-card:hover {
  border-color:var(--border-accent); transform:translateY(-2px);
  background:var(--bg-card-hover);
}
.advantage-icon {
  width:40px; height:40px; border-radius:10px; background:rgba(96,165,250,.08);
  display:flex; align-items:center; justify-content:center; color:var(--accent-blue);
  margin-bottom:14px;
}
.advantage-card h3 { font-size:16px; font-weight:700; color:var(--text-white); margin-bottom:8px; }
.advantage-card p { font-size:13px; color:var(--text-dim); line-height:1.65; }

/* ============================================================
   [4] 核心产品 (§三[4])
   ============================================================ */
.products { background: var(--bg-darker); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }

.product-card {
  background:var(--bg-card); border:1px solid var(--border-default);
  border-radius:16px; padding:30px 26px; position:relative;
  overflow:hidden; transition:all .35s ease;
}
.product-card:hover {
  border-color:var(--border-hover); transform:translateY(-5px);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
/* 产品卡片顶部渐变条 */
.product-gradient-bar { position:absolute; top:0; left:0; right:0; height:3px;
  opacity:0; transition:opacity .35s; }
.product-card:hover .product-gradient-bar { opacity:1; }
.product-bar-blue-cyan { background:linear-gradient(90deg,#3b82f6,#06b6d4); }
.product-bar-purple-pink { background:linear-gradient(90deg,#8b5cf6,#ec4899); }
.product-bar-orange-red { background:linear-gradient(90deg,#f59e0b,#ef4444); }

.product-icon { color:var(--accent-blue); margin-bottom:18px; }
.product-name { font-size:19px; font-weight:700; color:var(--text-white); margin-bottom:4px; }
.product-name-en { font-size:12px; color:var(--text-dim); margin-bottom:14px; letter-spacing:.5px; }
.product-desc { font-size:14px; color:var(--text-light); line-height:1.6; margin-bottom:18px; }
.product-features { list-style:none; margin-bottom:22px; }
.product-features li {
  font-size:13px; color:var(--text-muted); line-height:1.75; padding:4px 0;
  padding-left:4px;
}
.product-tags { display:flex; gap:8px; flex-wrap:wrap; }
.pill {
  padding:4px 12px; border-radius:999px; font-size:12px;
  border:1px solid rgba(147,197,253,.2); color:var(--accent-blue-bright);
}

/* ============================================================
   [5] 为什么选择云真 (§三[5])
   ============================================================ */
.why-us { background: var(--bg-dark); }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:48px; }
.why-card {
  background:var(--bg-card); border:1px solid var(--border-default);
  border-radius:14px; padding:28px 22px; transition:all .3s ease;
}
.why-card:hover {
  border-color:var(--border-accent); background:var(--bg-card-hover);
}
.why-icon {
  width:46px; height:46px; border-radius:12px;
  background:rgba(96,165,250,.08); display:flex; align-items:center;
  justify-content:center; color:var(--accent-blue); margin-bottom:18px;
}
.why-card h3 { font-size:17px; font-weight:700; color:var(--text-white); margin-bottom:10px; }
.why-card p { font-size:13px; color:var(--text-dim); line-height:1.7; }

/* ============================================================
   [6] 联系我们 (§三[6])
   ============================================================ */
.contact { background: var(--bg-darker); }
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:64px; margin-top:48px; align-items:start; }

/* 左侧联系信息卡片 */
.contact-info {
  display:flex; flex-direction:column; gap:28px;
  padding:28px 24px; border-radius:14px;
  background:rgba(13,18,36,.6); border:1px solid rgba(96,165,250,.15);
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.contact-item { display:flex; gap:16px; align-items:flex-start; }
.contact-item-icon {
  width:40px; height:40px; min-width:40px; border-radius:10px;
  background:rgba(96,165,250,.07); display:flex; align-items:center;
  justify-content:center; color:var(--accent-blue);
}
.contact-label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px; }
.contact-value { font-size:14px; color:var(--text-light); line-height:1.6; }
/* 联系邮箱 — 可点击整行复制 */
#contact-email {
  cursor:pointer; transition:opacity .2s;
}
#contact-email:hover { opacity:.85; }
#contact-email:focus {
  outline:2px solid var(--accent-blue); outline-offset:4px; border-radius:4px;
}
.email-addr {
  font-size:16px; font-weight:600; color:var(--accent-blue); word-break:break-all;
}

/* "已复制 ✓" 浮层提示 */
.copy-toast {
  display:inline-block; font-size:13px; color:#4ade80; font-weight:600;
  margin-left:10px; opacity:0; transform:translateY(6px);
  transition:all .25s ease; vertical-align:middle; pointer-events:none;
}
.copy-toast.show { opacity:1; transform:translateY(0); }

/* 右侧表单 */
/* 联系指引卡片（替代原表单） */
.contact-guide {
  width:100%; padding:36px 28px; border-radius:16px;
  background:rgba(255,255,255,.02); border:1px solid var(--border-default);
  text-align:center;
}
.contact-guide-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:14px;
  background:rgba(96,165,250,.1); color:var(--accent-blue);
  margin-bottom:20px;
}
.contact-guide h3 {
  font-size:18px; color:var(--text-white); margin-bottom:8px;
}
.contact-guide-desc {
  font-size:13px; color:var(--text-dim); margin-bottom:24px; line-height:1.6;
}
.contact-guide-tips {
  text-align:left; padding:18px 20px; border-radius:10px;
  background:rgba(255,255,255,.015); border:1px dashed var(--border-default);
}
.contact-guide-tips p { font-size:13px; color:var(--text-light); margin:0 0 8px; }
.contact-guide-tips strong { color:var(--text-white); }
.contact-guide-tips ul {
  margin:8px 0; padding-left:18px; list-style:disc;
}
.contact-guide-tips li {
  font-size:13px; color:var(--text-muted); line-height:1.7;
}
.contact-guide-note {
  margin-top:12px !important; padding-top:12px;
  border-top:1px solid var(--border-default);
  font-size:12px !important; color:var(--text-dim) !important;
}

/* ============================================================
   [7] 页脚 (§三[7])
   ============================================================ */
.footer {
  background:var(--bg-deepest); border-top:1px solid var(--border-default);
  padding:48px 0 36px; text-align:center;
}
.footer p { font-size:13px; color:var(--text-footer); line-height:2.2; }
.footer-icp { margin-top:4px; }
.footer-links { margin-top:16px; }
.footer-links a {
  font-size:13px; color:var(--text-dim); transition:color .2s;
}
.footer-links a:hover { color:var(--accent-blue); }

/* ============================================================
   隐私政策模态框 (§15.7)
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0;
  z-index:2000; display:none; align-items:center; justify-content:center;
  /* 用纯色半透明替代 backdrop-filter blur，避免滚动时逐帧重绘 */
  background:rgba(6,8,20,.85);
  opacity: 0; transition: opacity 0.25s ease;
}
.modal-overlay.open { opacity: 1; }
.modal-content {
  background:#0d1224; border:1px solid var(--border-default);
  border-radius:16px; max-width:520px; width:92%;
  max-height:85vh; overflow-y:auto; padding:36px 30px; position:relative;
  overscroll-behavior: contain;
  /* 提升到独立 GPU 合成层，隔离滚动重绘 */
  transform: translateZ(0);
}
.modal-close {
  position:absolute; top:14px; right:18px; font-size:28px; color:var(--text-dim);
  background:none; border:none; cursor:pointer; transition:color .2s;
  line-height:1;
}
.modal-close:hover { color:var(--text-white); }
.modal-content h3 { font-size:20px; color:var(--text-white); margin-bottom:20px; padding-right:30px; }
.modal-body h4 { font-size:14px; color:var(--text-light); margin:18px 0 8px; }
.modal-body p, .modal-body li {
  font-size:13px; color:var(--text-muted); line-height:1.75;
}
.modal-body ul { padding-left:18px; list-style:disc; }
.modal-body ol { padding-left:18px; list-style-type:decimal; }

/* ============================================================
   响应式适配 (§七 + §十六)
   ============================================================ */

/* Tablet ≤900px */
@media(max-width:900px){
  .section { padding:72px 0; }
  .section-title { font-size:28px; }
  .hero-title { font-size:36px; }
  .about-grid { grid-template-columns:1fr; gap:36px; }
  .about-cards { grid-template-columns:1fr 1fr; }
  .product-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; gap:44px; }

  /* 导航 → 汉堡菜单 */
  .nav-links { display:none; }
  .hamburger { display:flex; }
}

/* Mobile ≤600px */
@media(max-width:600px){
  .section { padding:56px 0; }
  .section-title { font-size:24px; }
  .hero-title { font-size:28px; }
  .hero-subtitle { font-size:15px; }
  .hero-ctas { flex-direction:column; align-items:center; }
  .btn { width:100%; max-width:280px; text-align:center; }
  .container { padding:0 18px; }
  .nav-container { height:58px; }
  .about-cards { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .modal-content { padding:24px 20px; width:95%; }
}