/* 领力非凡官网 - 全站公共样式
   设计令牌（紫调 #6C3B84）+ 通用组件 + 动效
   所有页面共用，改配色只需调整 :root 变量
*/
:root {
  --brand: #6C3B84;
  --brand-light: #8E5BA8;
  --brand-lighter: #A97FC0;
  --brand-dark: #4A2560;
  --brand-ink: #2E1342;
  --accent: #06B6D4;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
}
* { scroll-behavior: smooth; }
body {
  font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', -apple-system, sans-serif;
  color: var(--text-primary);
  background: #ffffff;
  overflow-x: hidden;
}

/* ============ 阅读进度条 ============ */
#progressBar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--brand), var(--brand-light) 55%, var(--accent));
  transition: width .1s linear;
}

/* ============ 滚动入场动效 ============ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; }
.d6 { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .001ms !important; }
}

/* ============ Hero ============ */
.hero-bg {
  background: linear-gradient(135deg, #F7F2FB 0%, #ffffff 48%, #EFF9FC 100%);
  position: relative;
  overflow: hidden;
}
.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none;
}
.hero-blob.b1 {
  top: -28%; right: -12%; width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(108,59,132,.13) 0%, transparent 68%);
  animation: float1 16s ease-in-out infinite;
}
.hero-blob.b2 {
  bottom: -26%; left: -10%; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(6,182,212,.10) 0%, transparent 68%);
  animation: float2 20s ease-in-out infinite;
}
.hero-blob.b3 {
  top: 26%; left: 42%; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(142,91,168,.10) 0%, transparent 70%);
  animation: float1 24s ease-in-out infinite reverse;
}
@keyframes float1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-28px, 34px) scale(1.06); }
}
@keyframes float2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(30px,-26px) scale(1.08); }
}
.grid-pattern {
  background-image:
    linear-gradient(rgba(108,59,132,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,59,132,.035) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ============ 区块标题范式 ============ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  color: var(--brand); text-transform: uppercase;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.section-title { position: relative; display: inline-block; }
.section-title::after {
  content: '';
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light) 60%, var(--accent));
}
.sec-head { margin-bottom: 3rem; }
@media (min-width: 768px) { .sec-head { margin-bottom: 4rem; } }

/* ============ 卡片 ============ */
.card-hover { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .35s; }
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(74, 37, 96, .22);
  border-color: rgba(108,59,132,.28);
}
.icon-chip {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(108,59,132,.55);
}
.icon-chip.sm { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.icon-chip.outline {
  background: rgba(108,59,132,.08); color: var(--brand); box-shadow: none;
}

/* ============ 核心业务卡（编号水印 + 右上角图标） ============ */
.num-watermark {
  font-size: 56px; font-weight: 800; line-height: 1;
  color: #E9DFF2;               /* 淡紫水印数字 */
  letter-spacing: .02em;
  user-select: none;
}
.card-icon { font-size: 36px; color: var(--brand); line-height: 1; }

/* ============ 导航 ============ */
.nav-link { position: relative; transition: color .2s; color: #475569; }
.nav-link::after {
  content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: 2px;
  transition: width .3s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover { color: var(--brand); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--brand); font-weight: 600; }

/* ============ 交付流程 ============ */
.step-line::before {
  content: '';
  position: absolute; top: 32px;
  left: calc(100% / 12);                  /* 第 1 列圆心 */
  width: calc(100% - 100% / 6);           /* 到第 6 列圆心 */
  height: 2px;
  background: linear-gradient(90deg, var(--brand-light), var(--accent));
  opacity: .35; z-index: 0;
}
@media (max-width: 768px) { .step-line::before { display: none; } }
.step-dot {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; margin: 0 auto 1rem;
  box-shadow: 0 12px 24px -10px rgba(74,37,96,.55);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.step-col:hover .step-dot { transform: translateY(-4px) scale(1.06); }

/* ============ 标签 ============ */
.tag {
  display: inline-block; font-size: 12px; padding: 4px 10px;
  border-radius: 6px; background: rgba(108,59,132,.07);
  color: var(--brand-dark); font-weight: 500;
  transition: background .2s, color .2s;
  text-decoration: none; cursor: pointer;
}
.tag:hover { background: rgba(108,59,132,.14); }
.tech-tag {
  display: inline-flex; align-items: center;
  padding: 6px 14px; background: rgba(108,59,132,.06);
  color: var(--brand-dark); border-radius: 8px;
  font-size: 14px; font-weight: 500; margin: 4px;
  border: 1px solid rgba(108,59,132,.10);
  transition: all .25s;
}
.tech-tag:hover {
  background: var(--brand); color: #fff; border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(108,59,132,.5);
}

/* ============ 软著证书卡 ============ */
.cert-card {
  border: 1px solid #ece8f1; border-radius: 12px;
  background: #fff; transition: all .3s cubic-bezier(.2,.8,.2,1);
  position: relative; overflow: hidden;
}
.cert-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand-lighter));
  transform: scaleY(0); transform-origin: top; transition: transform .3s;
}
.cert-card:hover::before { transform: scaleY(1); }
.cert-card:hover {
  border-color: rgba(108,59,132,.3);
  background: linear-gradient(135deg, #FBF8FD 0%, #ffffff 100%);
  box-shadow: 0 18px 36px -18px rgba(74,37,96,.28);
  transform: translateY(-3px);
}
.cert-no {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .06em; color: var(--brand-light); font-weight: 700;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
}
.status-done { background: rgba(108,59,132,.10); color: var(--brand-dark); }
.status-review { background: rgba(6,182,212,.10); color: #0e7490; }
.status-pending { background: #f1f5f9; color: #475569; }
.status-mini { font-size: 11px !important; padding: 3px 10px !important; }
.eyebrow.on-dark { color: #C9A6DE; }

/* 深色底表单 */
.form-input.dark {
  background-color: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  color: #fff;
}
.form-input.dark::placeholder { color: rgba(255,255,255,.40); }
.form-input.dark:focus {
  background: rgba(255,255,255,.15);
  border-color: var(--brand-lighter);
  box-shadow: 0 0 0 3px rgba(169,127,192,.30);
}
.form-input.dark option { color: #1e293b; }

/* ============ 按钮 ============ */
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  color: #fff; padding: 12px 28px; border-radius: 10px; font-weight: 500;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 22px -12px rgba(74,37,96,.7);
}
/* 页脚深底 logo：紫色过滤为纯白，保证暗底可读 */
.logo-footer { filter: brightness(0) invert(1); opacity: .95; }

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(74,37,96,.55);
}
.btn-primary.sm { padding: 10px 20px; font-size: 14px; }
.btn-primary.lg { padding: 14px 28px; font-size: 16px; }
.btn-secondary {
  border: 1.5px solid var(--brand); color: var(--brand);
  padding: 12px 28px; border-radius: 10px; font-weight: 500;
  transition: all .3s; display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
}
.btn-secondary:hover { background: rgba(108,59,132,.06); transform: translateY(-2px); }

/* ============ 表单 ============ */
.form-input {
  width: 100%; padding: 12px 16px;
  border: 1px solid #e2e8f0; border-radius: 10px;
  font-size: 15px; transition: all .2s; background: #ffffff;
}
.form-input:focus {
  outline: none; border-color: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(108,59,132,.14);
}
select.form-input {
  padding-right: 40px;            /* 文字区右留白，避免被箭头遮挡 */
  -webkit-appearance: none; appearance: none;
}
/* 箭头画在外层容器上：不随 select 打开/聚焦而消失或移动，始终固定 */
.select-wrap { position: relative; }
.select-wrap::after {
  content: ''; position: absolute; right: 14px; top: 50%;
  width: 16px; height: 16px; transform: translateY(-50%);
  pointer-events: none; background-repeat: no-repeat; background-position: center;
  /* 箭头颜色与常规文字一致（#475569） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475469' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}
/* 深色表单：外层箭头改成浅色，与白色文字一致 */
.select-wrap.dark::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}

/* 图标库全部 CDN 不可用时的兜底：芯片内显示一个占位符号 */
body.no-icons .icon-chip::after { content: '\2726'; opacity: .9; }
body.no-icons .icon-chip i::before { content: none !important; }

/* ============ Hero 产品窗口轮播（旋转正方体） ============ */
/* 正方体四个面 = 四个产品；切换即整立方体绕 Y 轴转正 90°，动画被 overflow 限制在窗口内 */
.flip-book {
  position: relative; height: 420px;
  perspective: 1400px;
  overflow: hidden;            /* 旋转过程不外溢到其它区域 */
  display: flex; align-items: center; justify-content: center;
  --face-w: 550px;             /* 面的宽，由 JS 按窗口动态设置 */
  --face-h: 360px;             /* 面的高（固定，四个面一致，非正方形） */
  --cube-half: 275px;          /* 半宽 = 旋转轴到面的深度 */
}
.cube {
  position: relative;
  width: var(--face-w); height: var(--face-h);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.45,.05,.2,1);
  transform: translateZ(calc(var(--cube-half) * -1)) rotateY(0deg);
}
.cube-face {
  position: absolute; inset: 0;
  width: var(--face-w); height: var(--face-h);
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 10px 30px -22px rgba(74,37,96,.25);
  padding: 22px;
  overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip-dots {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
}
.flip-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(108,59,132,.25);
  border: none; cursor: pointer; padding: 0;
  transition: all .3s;
}
.flip-dot.active { width: 22px; background: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .cube { transition: none; }
}

/* ============ 回到顶部 ============ */
#backTop {
  position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  box-shadow: 0 12px 26px -10px rgba(74,37,96,.65);
  transition: opacity .3s, transform .3s; z-index: 55;
}
#backTop.show { opacity: 1; pointer-events: auto; }
#backTop:hover { transform: translateY(-4px); }

/* ============ 移动端菜单 ============ */
.mobile-menu { transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.mobile-menu.open { transform: translateX(0); }
@media (min-width: 768px) {
  .mobile-menu, #menuOverlay { display: none !important; }
}

.animate-fade-in { animation: fadeInUp .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.quote-line {
  border-left: 4px solid var(--brand);
  background: linear-gradient(90deg, rgba(108,59,132,.06) 0%, transparent 100%);
}
.grad-bar-1 { background: linear-gradient(90deg, #6C3B84, #A97FC0); }
.grad-bar-2 { background: linear-gradient(90deg, #8E5BA8, #06B6D4); }
.grad-bar-3 { background: linear-gradient(90deg, #4A2560, #8E5BA8); }
.grad-bar-4 { background: linear-gradient(90deg, #6C3B84, #06B6D4); }