/* ============================================================
   万域智瞰 · 深圳站主题 ——「湾区」
   深空蓝 × 霓虹青 × 冷白 | 硬朗科技、天际线、玻璃拟态
   ============================================================ */

:root{
  /* 冷白纸色体系 */
  --paper:      #f2f6f9;
  --paper-2:    #e6edf3;
  --card:       #ffffff;
  --line:       #d8e2ea;

  /* 海湾蓝主色 + 霓虹青点缀（替代暖金） */
  --accent:     #1282b8;
  --accent-deep:#0b5f8c;
  --accent-soft:rgba(18,130,184,.10);
  --gold:       #0ea8c6;
  --gold-2:     #4fc6da;

  /* 冷墨文字 */
  --ink:        #0d2436;
  --ink-2:      #3b5468;
  --ink-3:      #71879a;

  --radius:3px;
  --shadow:0 20px 50px -18px rgba(11,74,110,.28);
  --shadow-gold:0 16px 44px -12px rgba(14,168,198,.38);
}

/* ---------- 电路网格底（极浅） ---------- */
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 12% -4%, rgba(14,168,198,.08), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%231282b8' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M0 28h56M28 0v56'/%3E%3Ccircle cx='28' cy='28' r='2.4'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='56' cy='56' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- HERO：冷蓝辉光 + 天际线剪影 ---------- */
.hero,.page-hero{isolation:isolate}
.hero::before,.page-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(56% 66% at 24% 24%, rgba(14,168,198,.26), transparent 60%),
    linear-gradient(180deg, rgba(9,32,50,.42), transparent 46%, rgba(9,32,50,.55));
}
/* 深圳天际线剪影（平安中心 / 春笋 / 湾区天际线抽象） */
.hero::after,.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:150px;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cg fill='%23f2f6f9'%3E%3Cpath d='M0 150 V96 h60 v-18 h26 v18 h34 V70 h30 v26 h20 V56 h18 v40 h40 V88 h56 v-30 h24 v30 h30 V64 h28 v32 h22 v-14 h40 v20 h36 V78 h30 v24 h24 V60 h20 v-28 h10 l8 -14 8 14 h10 v44 h34 v26 h40 V92 h52 v-22 h26 v22 h30 V74 h32 v28 h24 v-12 h44 v20 h38 V84 h30 v18 h28 V66 h22 v36 h36 v48 Z'/%3E%3Crect y='118' width='1440' height='32'/%3E%3C/g%3E%3Cpath d='M0 118 H1440' stroke='%230ea8c6' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
/* 右上数据流光柱 */
.hero .wrap::after{
  content:"";position:absolute;right:2%;top:0;width:200px;height:100%;z-index:1;pointer-events:none;opacity:.28;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'%3E%3Cg stroke='%234fc6da' stroke-width='1.4' fill='none'%3E%3Cpath d='M40 0 v120 l20 20 v80 M100 0 v60 l-24 24 v140 M160 0 v180 l-18 18 v90' stroke-dasharray='5 7'/%3E%3C/g%3E%3Cg fill='%234fc6da'%3E%3Ccircle cx='40' cy='120' r='3'/%3E%3Ccircle cx='100' cy='60' r='3'/%3E%3Ccircle cx='160' cy='180' r='3'/%3E%3Ccircle cx='60' cy='220' r='2.4'/%3E%3Ccircle cx='76' cy='224' r='2.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

.hero-badge{
  background:rgba(14,168,198,.14);border:1px solid rgba(79,198,218,.55);
  backdrop-filter:blur(8px);border-radius:3px;letter-spacing:.12em;
}
.hero-side-card .hsc,.hero .hsc{
  background:rgba(13,36,54,.55);border:1px solid rgba(79,198,218,.4);
  border-radius:4px;backdrop-filter:blur(14px);color:#eaf6fa;
  box-shadow:0 24px 56px -20px rgba(6,30,46,.6);
}
.hero .hsc b,.hero .hsc .hsc-num{color:var(--gold-2)}

/* ---------- 标题与科技细节 ---------- */
.sec-title,.hero h1,.ph-title{letter-spacing:.01em}
.sec-title em,.hero h1 em,.ph-title em{color:var(--gold);font-style:normal}
.eyebrow{color:var(--accent);letter-spacing:.38em;font-weight:600}
.eyebrow::before{content:"/";color:var(--gold);margin-right:10px;font-weight:700}
.divider-gold{background:linear-gradient(90deg,var(--gold),transparent);height:2px}

/* ---------- 卡片：锐角切角 + 玻璃拟态 ---------- */
.card,.sol-card,.case-card,.news-item,.faq-item,.stat,.feature-card,
.value-card,.contact-form,.ci-card,.article-body,.tl-card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:0 6px 22px -10px rgba(11,74,110,.12);
  position:relative;
}
.card::before,.sol-card::before,.feature-card::before{
  content:"";position:absolute;left:0;top:0;width:34%;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.card:hover,.sol-card:hover,.case-card:hover,.feature-card:hover{
  box-shadow:var(--shadow);transform:translateY(-4px);
  border-color:rgba(14,168,198,.45);
}
.sol-card .sc-icon,.fc-icon{
  border-radius:3px;background:linear-gradient(135deg,rgba(18,130,184,.12),rgba(14,168,198,.16));
  color:var(--accent);
}

/* ---------- 按钮：锐角霓虹 ---------- */
.btn{border-radius:3px;letter-spacing:.1em;font-weight:600}
.btn-gold{
  background:linear-gradient(120deg,#12b0cc,#0b7fa0 65%,#0a6d8a);
  box-shadow:var(--shadow-gold);color:#f2fbfd;
}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 20px 50px -12px rgba(14,168,198,.5)}
.btn-primary{background:var(--accent-deep);border-radius:3px}
.btn-primary:hover{background:var(--accent)}
.btn-light{border-radius:3px}

/* ---------- 深色带：深空蓝 + 青辉光 ---------- */
.cap-band,.cta-band,.footer{
  background:
    radial-gradient(55% 85% at 88% 8%, rgba(14,168,198,.20), transparent 62%),
    linear-gradient(155deg,#0d2436,#081a29 72%);
}
.footer a:hover{color:var(--gold-2)}

/* ---------- 顶部导航（底色统一由 common.css 管理：半透明白+毛玻璃） ---------- */
.main-nav .nav-link{letter-spacing:.04em}
.main-nav .nav-link:hover,.main-nav .nav-link.active{color:var(--accent)}

/* ---------- FAQ / 表单等细节 ---------- */
.faq-item summary::after{color:var(--gold)}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,168,198,.16);
}
::selection{background:var(--accent);color:#fff}

/* ---------- 时间轴 ---------- */
.timeline::before{background:linear-gradient(180deg,var(--gold),var(--accent))}
.tl-item .tl-dot{border-color:var(--gold);background:var(--paper);border-radius:3px}

/* ---------- 其他强调 ---------- */
.ai-platforms span{border-color:rgba(14,168,198,.4);color:var(--ink-2);border-radius:3px}
.trust-bar{border-block:1px solid var(--line);background:var(--paper-2)}
.crumb a:hover{color:var(--accent)}