/* ============================================================
 * 易云城 IT 服务 · 科技视觉层 tech-layer.css  v1.0
 * 加载顺序：inline.css → ... → design-system.css → tech-layer.css
 * 定位：纯增强层。只做「科技感」视觉语言与微交互，不改动既有布局。
 * 依赖：tech-fx.js（滚动进度 / 进场动画 / 光晕跟随 / 数字滚动）
 * ============================================================ */

/* ========== 0. 滚动进度条（顶部 2px 青蓝渐变） ========== */
#techProgress{
  position:fixed;top:0;left:0;height:2px;width:0;
  z-index:2147483000;
  background:linear-gradient(90deg,#22d3ff 0%,#0b63f6 55%,#7c3aed 100%);
  box-shadow:0 0 10px rgba(34,211,255,.75);
  transition:width .08s linear;
  pointer-events:none;
}

/* ========== 1. 全局精密网格底纹（体层面的技术秩序感） ========== */
body{
  background-color:var(--bg-light);
  background-image:
    linear-gradient(rgba(11,99,246,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,99,246,.028) 1px,transparent 1px);
  background-size:48px 48px;
  background-position:-1px -1px;
}
/* 深色区块 / 页脚：网格提亮 + 顶部一条发光分割线 */
.section--dark,.footer-main{
  position:relative;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
}
.section--dark::after,.footer-main::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(34,211,255,.55),transparent);
}
/* 浅灰区块（.section-bg = --bg-gray）：改用极淡蓝网格 + 青色顶线，避免白线不可见 */
.section-bg{
  position:relative;
  background-image:
    linear-gradient(rgba(11,99,246,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,99,246,.055) 1px,transparent 1px);
  background-size:56px 56px;
}
.section-bg::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(34,211,255,.45),transparent);
}
.section--dark > .container,.section-bg > .container,.footer-main > .container{position:relative;z-index:1}

/* ========== 2. HERO：鼠标跟随光晕 + 扫描线 ========== */
.hero{isolation:isolate;overflow:hidden}
.hero__glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(600px circle at var(--mx,50%) var(--my,38%),rgba(34,211,255,.18),transparent 62%),
    radial-gradient(900px circle at 88% 12%,rgba(11,99,246,.20),transparent 60%);
  transition:background .18s linear;
  mix-blend-mode:screen;
}
/* 缓慢移动的扫描线（极淡，仅在 hero） */
.hero::after{
  animation:techScan 9s linear infinite;
}
@keyframes techScan{
  0%{transform:translateY(-2%)}
  50%{transform:translateY(2%)}
  100%{transform:translateY(-2%)}
}
.hero-inner,.hero .container{position:relative;z-index:2}

/* 在线状态灯 */
.tech-live{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 9px;margin-right:8px;
  border-radius:var(--radius-full);
  background:rgba(34,211,255,.12);
  border:1px solid rgba(34,211,255,.35);
  color:#8fe8ff;
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.12em;font-weight:600;
  text-transform:uppercase;
  vertical-align:middle;
}
.pulse-dot{
  width:6px;height:6px;border-radius:50%;
  background:#22d3ff;
  box-shadow:0 0 0 0 rgba(34,211,255,.7);
  animation:techPulse 1.8s ease-out infinite;
  flex:0 0 auto;
}
@keyframes techPulse{
  0%{box-shadow:0 0 0 0 rgba(34,211,255,.65)}
  70%{box-shadow:0 0 0 8px rgba(34,211,255,0)}
  100%{box-shadow:0 0 0 0 rgba(34,211,255,0)}
}

/* ========== 3. 渐变描边卡片（现代科技标配） ========== */
.tech-frame{
  border:1px solid transparent;
  background:
    linear-gradient(var(--bg-white),var(--bg-white)) padding-box,
    linear-gradient(135deg,rgba(34,211,255,.55),rgba(11,99,246,.35) 45%,rgba(226,232,240,.7)) border-box;
}
.section--dark .tech-frame{
  background:
    linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg,rgba(34,211,255,.5),rgba(11,99,246,.3) 45%,rgba(255,255,255,.12)) border-box;
}

/* ========== 4. 卡片 / 按钮 微交互 ========== */
/* 主要卡片：hover 青色辉光 + 上浮，并出现跟随鼠标的高光 */
.svc-card,.plan-card,.qe-card,.why-item{
  position:relative;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),
             box-shadow .28s cubic-bezier(.22,.61,.36,1),
             border-color .28s;
  will-change:transform;
}
.svc-card:hover,.plan-card:hover{
  border-color:rgba(34,211,255,.45);
  box-shadow:0 0 0 1px rgba(34,211,255,.28),
             0 20px 44px -16px rgba(11,99,246,.32);
  transform:translateY(-6px);
}
.qe-card:hover{
  border-color:rgba(34,211,255,.45);
  box-shadow:0 0 0 1px rgba(34,211,255,.22),
             0 12px 28px -12px rgba(11,99,246,.28);
  transform:translateY(-4px);
}
/* 鼠标跟随高光（::after 未被占用） */
.svc-card::after,.plan-card::after,.qe-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(34,211,255,.10),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.svc-card:hover::after,.plan-card:hover::after,.qe-card:hover::after{opacity:1}

/* 按钮：扫光 + 发光 */
.btn{position:relative;overflow:hidden}
.btn-accent{
  background:linear-gradient(135deg,#22d3ff 0%,#0b8fe8 100%);
  color:#04101f;
  box-shadow:0 6px 20px -6px rgba(34,211,255,.55);
}
.btn-accent:hover{
  box-shadow:0 10px 30px -8px rgba(34,211,255,.75);
  transform:translateY(-2px);
}
.btn-accent::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
  transition:none;
}
.btn-accent:hover::after{animation:techSweep .7s ease}
@keyframes techSweep{to{left:140%}}

.btn-primary:hover{
  box-shadow:0 10px 26px -10px rgba(11,99,246,.6);
  transform:translateY(-2px);
}

/* ========== 5. 数据等宽化（技术指标感） ========== */
.stat-block__num,.speed-item__value,.plan-card__title,.svc-card__price{
  font-variant-numeric:tabular-nums;
}
.stat-block__num{
  font-family:var(--font-mono);
  letter-spacing:-.02em;
  text-shadow:0 0 24px rgba(34,211,255,.35);
}
.speed-item__value{
  font-family:var(--font-mono);
  letter-spacing:-.01em;
}
/* 小标签统一成等宽大写（技术规格贴纸） */
.tag{font-family:var(--font-mono);letter-spacing:.02em}

/* ========== 6. 章节标题：加一条渐变下划光带 ========== */
.section-header{position:relative}
.section-title{position:relative;display:inline-block}
.section-badge{
  font-family:var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ========== 7. 滚动进场动画 ========== */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ========== 8. 图标容器：hover 时轻微放大 + 发光 ========== */
.svc-card__icon,.plan-card__icon,.why-icon,.speed-item__icon,.qe-card__icon{
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,background .3s,color .3s;
}
.svc-card:hover .svc-card__icon,
.plan-card:hover .plan-card__icon,
.qe-card:hover .qe-card__icon{
  transform:scale(1.08) rotate(-3deg);
  box-shadow:0 8px 20px -8px rgba(11,99,246,.55);
}

/* ========== 9. 焦点可见性（无障碍 + 专业度） ========== */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* ========== 10. 降低动效偏好（尊重系统设置） ========== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none}
  .hero::after{animation:none}
}

/* ========== 11. 移动端收敛 ========== */
@media (max-width:768px){
  .section--dark,.section-bg,.footer-main{background-size:40px 40px}
  .hero__glow{background:radial-gradient(420px circle at 50% 25%,rgba(34,211,255,.20),transparent 65%)}
  [data-reveal]{transform:translateY(14px)}
}

/* ============================================================
 * 12. 专业度收敛：悬浮球 / 促销徽章 / 杂色统一
 *     原则：一屏只允许一个强调色（青），其余全部中性化
 * ============================================================ */

/* 12.1 右侧悬浮球：从 7 色彩虹收敛为「白底 + 单一青色 CTA」 */
.eycit-fab--wechat,.eycit-fab--ai,.eycit-fab--book,
.eycit-fab--urgent,.eycit-fab--more,.eycit-fab--top{
  background:#fff !important;
  color:var(--primary) !important;
  border:1px solid var(--border);
  box-shadow:0 4px 14px rgba(15,23,42,.14) !important;
  animation:none !important;
}
.eycit-fab--wechat:hover,.eycit-fab--ai:hover,.eycit-fab--book:hover,
.eycit-fab--urgent:hover,.eycit-fab--more:hover{
  background:var(--primary-light) !important;
  border-color:var(--primary) !important;
  box-shadow:0 6px 18px rgba(11,99,246,.28) !important;
}
.eycit-fab--top:hover{background:var(--bg-gray) !important;border-color:var(--border) !important}
/* 电话 = 次强调（深蓝实底，白图标） */
.eycit-fab--phone{
  background:var(--grad-primary) !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(11,99,246,.38) !important;
}
/* 报价 = 唯一强调 CTA（青色渐变） */
.eycit-fab--quote{
  background:var(--grad-accent) !important;
  color:#04101f !important;
  box-shadow:0 4px 16px rgba(34,211,255,.45) !important;
}
/* 悬浮球上的文字标签 */
.eycit-fab__label{letter-spacing:.02em}

/* 12.2 服务卡「热门」徽章：全员热门等于没有热门，整排去掉 */
.svc-card .card-badge,.svc-card__badge,
.service-icon .badge-hot,.service-card .hot-badge{display:none !important}

/* 12.3 顶部条「新客立减20元」：红色促销 → 青色克制提示 */
.meta-promo{
  background:rgba(34,211,255,.10) !important;
  color:#7fe0ff !important;
  border:1px solid rgba(34,211,255,.30) !important;
}
.meta-promo i{color:#22d3ff !important}

/* 12.4 黄色 VIP 促销条 / 金色升级链接 → 统一主蓝 */
a[style*="color:#d97706"],
a[style*="color: #d97706"]{color:var(--primary) !important;text-decoration:none !important}

/* 12.5 页面级杂色图标徽章（免费/精选推荐等绿色小标 → 中性灰蓝） */
.tag-free,.badge-free,.soft-tag--free{
  background:var(--bg-gray) !important;color:var(--text-gray) !important;
  border:1px solid var(--border) !important;
}

/* 12.6 栅格平衡：6 张优势卡在 4 列下会变成 4+2 留白，改 3×2 */
.why-grid{grid-template-columns:repeat(3,1fr) !important;gap:16px}
@media (max-width:992px){.why-grid{grid-template-columns:repeat(2,1fr) !important}}
@media (max-width:640px){.why-grid{grid-template-columns:1fr !important}}

/* 12.7 可读性兜底：10px / 11px 在中文站点不可读，统一抬到 12px */
[style*="font-size:10px"],[style*="font-size: 10px"],
[style*="font-size:11px"],[style*="font-size: 11px"]{font-size:12px !important}