/* ============================================================
   正和外贸云建 · 二级内容页设计系统 v3
   借鉴：阿里云 Token Plan（渐变大字/编号步骤/权益卡）· 千问（大数字/卡片矩阵）
        行业头部建站站点的实拍影像/语言胶囊/客户墙手法
   原则：真实照片优先 · 每页独立强调色 · 深浅节奏交替
   ============================================================ */
:root{--sv-acc:#2563eb;--sv-acc2:#5b8cff;--sv-ink:#16233f;--sv-mut:#5a6b8c}
.sv-hero .sv-btns .btn-o{background:var(--sv-acc);border-color:var(--sv-acc)}
.sv-hero .sv-btns .btn-o:hover{filter:brightness(1.08)}
.acc-blue{--sv-acc:#2563eb;--sv-acc2:#5b8cff}
.acc-teal{--sv-acc:#0d9488;--sv-acc2:#2dd4bf}
.acc-green{--sv-acc:#059669;--sv-acc2:#34d399}
.acc-purple{--sv-acc:#6d28d9;--sv-acc2:#a78bfa}
.acc-geo{--sv-acc:#4f46e5;--sv-acc2:#a78bfa}

/* ---------- GEO 案例示意九宫 ---------- */
.sv-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.sv-case{border:1px solid var(--bd,#e7ecf5);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(31,45,77,.06)}
.sv-case img{width:100%;height:200px;object-fit:cover;display:block;background:#eef2f9}
.sv-case figcaption{padding:14px 16px}
.sv-case figcaption b{display:block;font-size:15px;color:var(--sv-ink)}
.sv-case figcaption span{display:block;margin-top:4px;font-size:13px;color:#6b7a99}

/* ---------- Hero ---------- */
/* === 二级栏目 banner v4：云站页=Pixso式3D插画；其余页=栏目主题实拍图背景+蓝色蒙层 === */
.sv-hero{position:relative;overflow:hidden;padding:64px 0 84px;z-index:0;background:#e8eefc}
/* 各页主题背景图（按栏目内容选材） */
.sv-hero.acc-teal{background:url("../imgs/real/ml-hero.jpg") center/cover no-repeat}
.sv-hero.acc-green{background:url("../imgs/real/seo-hero.jpg") center/cover no-repeat}
.sv-hero.acc-purple{background:url("../imgs/real/b2b-hero.jpg") center/cover no-repeat}
.sv-hero.acc-geo{background:url("../imgs/real/port.jpg") center/cover no-repeat}
/* 蓝色蒙层：左侧浅蓝白雾承载文字 → 右侧透出照片并压蓝调；rev 页镜像 */
.sv-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg, rgba(243,248,255,.97) 0%, rgba(233,242,255,.9) 36%, rgba(216,231,255,.58) 62%, rgba(47,107,255,.34) 100%),
    linear-gradient(180deg, rgba(37,99,235,.06) 0%, rgba(16,54,148,.18) 100%)}
.sv-hero.rev::before{background:
    linear-gradient(270deg, rgba(243,248,255,.97) 0%, rgba(233,242,255,.9) 36%, rgba(216,231,255,.58) 62%, rgba(47,107,255,.34) 100%),
    linear-gradient(180deg, rgba(37,99,235,.06) 0%, rgba(16,54,148,.18) 100%)}
/* GEO 页港口图色彩较杂，蓝色蒙层加强压成蓝色调 */
.sv-hero.acc-geo::before{background:
    linear-gradient(90deg, rgba(243,248,255,.97) 0%, rgba(228,239,255,.92) 36%, rgba(188,213,255,.68) 62%, rgba(37,99,235,.52) 100%),
    linear-gradient(180deg, rgba(37,99,235,.1) 0%, rgba(16,54,148,.3) 100%)}
/* 云站页：Pixso 同款浅蓝紫渐变底 + 3D 方柱/浮动图标插画（内嵌SVG，无外链） */
.sv-hero.acc-blue{background:linear-gradient(115deg,#f5f9ff 0%,#ecf1ff 40%,#e9ecff 66%,#f1f5ff 100%)}
.sv-hero.acc-blue::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 420'><defs><linearGradient id='pa' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='1' stop-color='%23e4ebf8'/></linearGradient></defs><ellipse cx='290' cy='402' rx='250' ry='18' fill='%232f6bff' fill-opacity='.08'/><polygon points='120,200 148,181 236,181 208,200' fill='%23f8fbff'/><rect x='120' y='200' width='88' height='220' fill='url(%23pa)'/><polygon points='208,200 236,181 236,401 208,420' fill='%23dfe7f3'/><polygon points='252,112 281,91 380,91 351,112' fill='%23f6faff'/><rect x='252' y='112' width='99' height='308' fill='url(%23pa)'/><polygon points='351,112 380,91 380,399 351,420' fill='%23dce4f2'/><polygon points='404,252 433,231 524,231 495,252' fill='%23f8fbff'/><rect x='404' y='252' width='91' height='168' fill='url(%23pa)'/><polygon points='495,252 524,231 524,399 495,420' fill='%23dfe7f3'/></svg>") right -30px bottom -30px / 1000px 750px no-repeat}
/* 云站页：视觉卡收窄靠左 + 底部留白，露出 3D 方柱插画主体 */
@media(min-width:1021px){
  .sv-hero.acc-blue .wrap{grid-template-columns:1.08fr .92fr}
  .sv-hero.acc-blue .sv-vis{width:fit-content}
  .sv-hero.acc-blue .sv-shot{width:430px}
  .sv-hero.acc-blue{padding:64px 0 84px}
}
/* 底部蓝色压暗 + 细网格（统一蓝色层次） */
.sv-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg, transparent 52%, rgba(30,80,220,.22) 100%),
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px}
.sv-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.sv-hero.rev .wrap{grid-template-columns:.98fr 1.02fr}
.sv-hero.rev .sv-tx{order:2}.sv-hero.rev .sv-vis{order:1}
.sv-tx{max-width:560px}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--sv-acc) 9%,#fff);border:1px solid color-mix(in srgb,var(--sv-acc) 22%,#fff);
  color:var(--sv-acc);font-size:13px;font-weight:700;letter-spacing:.02em}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--sv-acc)}
.sv-tx h1{margin:20px 0 0;font-size:clamp(34px,4.4vw,52px);line-height:1.16;font-weight:800;color:var(--sv-ink);letter-spacing:.01em}
.sv-tx h1 em{font-style:normal;background:linear-gradient(92deg,var(--sv-acc),var(--sv-acc2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sv-tx .lead{margin:18px 0 0;font-size:16.5px;line-height:1.85;color:var(--sv-mut)}
.sv-btns{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.sv-btns .btn{border-radius:12px}
.sv-mk{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:26px;padding:0;list-style:none}
.sv-mk li{position:relative;padding-left:22px;font-size:13.5px;color:#3c4f75;font-weight:600}
.sv-mk li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;
  background:color-mix(in srgb,var(--sv-acc) 12%,#fff) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg>') center/9px no-repeat;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sv-acc) 26%,#fff)}

/* Hero 视觉：浏览器实景框 */
.sv-vis{position:relative;z-index:2}
.sv-shot{position:relative;border-radius:18px;background:#fff;overflow:hidden;
  box-shadow:0 30px 70px -22px rgba(23,43,99,.35),0 6px 18px rgba(23,43,99,.08),0 0 0 1px rgba(23,43,99,.06);
  transform:perspective(1400px) rotateY(-4deg) rotateX(1.4deg)}
.sv-hero.rev .sv-shot{transform:perspective(1400px) rotateY(4deg) rotateX(1.4deg)}
.sv-shot .bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#f2f6fd;border-bottom:1px solid #e3ebf7}
.sv-shot .bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.sv-shot .bar i:nth-child(2){background:#febc2e}.sv-shot .bar i:nth-child(3){background:#28c840}
.sv-shot .bar em{margin-left:8px;font-style:normal;font-size:12px;color:#8296b8;background:#fff;border:1px solid #e3ebf7;
  border-radius:6px;padding:3px 10px;letter-spacing:.03em}
.sv-shot img{display:block;width:100%;height:auto}
/* Hero 视觉：整图卡 */
.sv-plain{position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -22px rgba(23,43,99,.35),0 6px 18px rgba(23,43,99,.08),0 0 0 1px rgba(23,43,99,.06);
  transform:perspective(1400px) rotateY(-3deg)}
.sv-hero.rev .sv-plain{transform:perspective(1400px) rotateY(3deg)}
.sv-plain img{display:block;width:100%;height:auto}
.sv-badge{position:absolute;z-index:3;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:14px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  box-shadow:0 16px 34px -12px rgba(23,43,99,.35),0 0 0 1px rgba(255,255,255,.6)}
.sv-badge b{font-size:17px;font-weight:800;color:var(--sv-ink)}
.sv-badge span{font-size:12px;color:var(--sv-mut)}
.sv-badge.b1{left:-26px;bottom:38px}
.sv-badge.b2{right:-18px;top:34px}
.sv-badge.b1::before,.sv-badge.b2::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--sv-acc),var(--sv-acc2))}

/* ---------- 大数字带 ---------- */
.sv-num{background:#f5f8fc;padding:48px 0}
.sv-num .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sv-num .n{position:relative;text-align:center;padding:10px 8px}
.sv-num .n+.n::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:linear-gradient(#dfe9f8,transparent)}
.sv-num b{display:block;font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:.01em;
  background:linear-gradient(92deg,var(--sv-acc),var(--sv-acc2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sv-num span{display:block;margin-top:6px;font-size:13.5px;color:var(--sv-mut)}

/* ---------- 通用 section ---------- */
.sv-sec{padding:84px 0}
.sv-sec.alt{background:linear-gradient(180deg,#f6faff,#fbfdff);border-block:1px solid #e9f0fa}
.sv-sec .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sec-h{text-align:center;max-width:720px;margin:0 auto 52px}
.sec-h .kick{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--sv-acc);text-transform:uppercase}
.sec-h h2{margin:12px 0 0;font-size:clamp(26px,3vw,38px);font-weight:800;color:var(--sv-ink);line-height:1.25}
.sec-h h2 em{font-style:normal;color:var(--sv-acc)}
.sec-h p{margin:14px 0 0;font-size:15.5px;line-height:1.8;color:var(--sv-mut)}

/* ---------- 能力卡片 ---------- */
.sv-cards{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.sv-cards.g2{grid-template-columns:repeat(2,1fr)}
.sv-card{position:relative;background:#fff;border:1px solid #e9edf4;border-radius:18px;padding:32px 28px 28px;
  box-shadow:0 8px 26px -20px rgba(23,43,99,.16);transition:transform .28s,box-shadow .28s,border-color .28s;overflow:hidden}
.sv-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--sv-acc),var(--sv-acc2));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.sv-card:hover{transform:translateY(-6px);box-shadow:0 24px 46px -20px rgba(23,43,99,.26);border-color:color-mix(in srgb,var(--sv-acc) 26%,#fff)}
.sv-card:hover::before{transform:scaleX(1)}
.sv-card .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;margin-bottom:20px;
  background:color-mix(in srgb,var(--sv-acc) 7%,#fff);
  color:var(--sv-acc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sv-acc) 15%,#fff)}
.sv-card .ic svg{width:22px;height:22px}
.sv-card h3{margin:0 0 12px;font-size:18px;font-weight:800;color:var(--sv-ink);letter-spacing:.01em}
.sv-card p{margin:0;font-size:14px;line-height:1.8;color:var(--sv-mut)}
.sv-card ul{margin:12px 0 0;padding:0;list-style:none}
.sv-card ul li{position:relative;padding:5px 0 5px 20px;font-size:13.5px;line-height:1.65;color:#42547a}
.sv-card ul li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:2px;
  background:linear-gradient(135deg,var(--sv-acc),var(--sv-acc2));transform:rotate(45deg)}

/* ---------- 全幅真实影像带 ---------- */
.sv-photo{position:relative;padding:110px 0;color:#fff;isolation:isolate}
.sv-photo::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--ph,none);background-size:cover;background-position:center}
/* 各页 photo 段背景（url 相对本 CSS，规避自定义属性 url 解析差异） */
.sv-photo.ph-c2::before{background-image:url("../imgs/real/c2.jpg")}
.sv-photo.ph-geo-sec3::before{background-image:url("../imgs/geo/sec3-img.png")}
.sv-photo.ph-geo-chat::before{background-image:url("../imgs/geo/ai-chat.jpg")}
.sv-photo.ph-geo-server::before{background-image:url("../imgs/geo/server.jpg")}
.sv-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,18,44,.9) 8%,rgba(9,18,44,.55) 52%,rgba(9,18,44,.28))}
.sv-photo .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sv-photo h2{margin:0;font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.3;max-width:620px}
.sv-photo h2 em{font-style:normal;color:#7fb0ff}
.sv-photo .sub{margin:14px 0 0;max-width:560px;font-size:15.5px;line-height:1.85;color:#c9d8f2}
.sv-photo .ps{display:flex;gap:44px;margin-top:38px;flex-wrap:wrap}
.sv-photo .ps b{display:block;font-size:30px;font-weight:800;color:#fff}
.sv-photo .ps span{display:block;margin-top:4px;font-size:13px;color:#b7c9e8}

/* ---------- GEO 页：sec3(浅章) 与 chat(深章) 节奏分隔 ---------- */
/* sec3 改为浅色章节：白底 + 截图隐约肌理，深色文字，与深蓝 chat 形成清晰“浅→深”节奏 */
.sv-seam{height:7px;background:linear-gradient(90deg,#5b8cff 0%,#2563eb 50%,#5b8cff 100%);
  box-shadow:0 1px 0 rgba(13,24,48,.16),0 -1px 0 rgba(255,255,255,.28)}
.sv-photo.ph-geo-sec3{color:#15233f;padding-bottom:132px}
.sv-photo.ph-geo-sec3::before{opacity:.28}
.sv-photo.ph-geo-sec3::after{background:linear-gradient(100deg,rgba(255,255,255,.98) 6%,rgba(247,250,255,.94) 52%,rgba(255,255,255,.9) 100%)}
.sv-photo.ph-geo-sec3 h2{color:#15233f;max-width:660px}
.sv-photo.ph-geo-sec3 h2 em{color:#2563eb}
.sv-photo.ph-geo-sec3 .sub{color:#42567c;max-width:600px}
.sv-photo.ph-geo-sec3 .ps b{color:#16233f}
.sv-photo.ph-geo-sec3 .ps span{color:#5a6b8c}

/* ---------- 图文分栏 ---------- */
.sv-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sv-split.rev .sv-simg{order:2}
.sv-simg{position:relative}
/* 错位主题色块：图片右下（rev 页镜像左下）垫一块渐变色，增强编辑感构图 */
.sv-simg::before{content:"";position:absolute;right:-18px;bottom:-18px;width:62%;height:62%;border-radius:22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--sv-acc) 16%,#fff),color-mix(in srgb,var(--sv-acc2) 10%,#fff))}
.sv-split.rev .sv-simg::before{right:auto;left:-18px}
.sv-simg img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:16px;
  box-shadow:0 26px 60px -24px rgba(23,43,99,.35),0 0 0 1px rgba(23,43,99,.05)}
.sv-chip{position:absolute;right:-14px;bottom:-16px;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;
  background:#fff;box-shadow:0 18px 40px -14px rgba(23,43,99,.35),0 0 0 1px rgba(23,43,99,.06);z-index:2}
.sv-chip .dot{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--sv-acc),var(--sv-acc2))}
.sv-chip .dot svg{width:20px;height:20px}
.sv-chip b{display:block;font-size:15px;color:var(--sv-ink)}
.sv-chip span{display:block;font-size:12px;color:var(--sv-mut)}
.sv-stx .kick{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--sv-acc);text-transform:uppercase}
.sv-stx h2{margin:12px 0 0;font-size:clamp(24px,2.6vw,34px);font-weight:800;color:var(--sv-ink);line-height:1.3}
.sv-stx p{margin:14px 0 0;font-size:15px;line-height:1.9;color:var(--sv-mut)}
.sv-stx ul{margin:22px 0 0;padding:0;list-style:none;display:grid}
.sv-stx ul li{position:relative;padding:14px 4px 14px 38px;font-size:14.5px;line-height:1.75;color:#3d4f74;
  border-bottom:1px solid #edf1f7}
.sv-stx ul li:last-child{border-bottom:0}
.sv-stx ul li::before{content:"✓";position:absolute;left:2px;top:16px;width:21px;height:21px;border-radius:50%;font-size:11px;
  display:grid;place-items:center;color:var(--sv-acc);
  background:color-mix(in srgb,var(--sv-acc) 9%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sv-acc) 20%,#fff)}

/* ---------- 引擎 Tabs ---------- */
.sv-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.sv-tabs button{appearance:none;border:1px solid #dfe8f6;background:#fff;color:#48598200;color:#485982;
  padding:11px 26px;border-radius:999px;font-size:15px;font-weight:700;cursor:pointer;transition:all .22s}
.sv-tabs button:hover{border-color:var(--sv-acc);color:var(--sv-acc)}
.sv-tabs button.on{background:linear-gradient(92deg,var(--sv-acc),var(--sv-acc2));border-color:transparent;color:#fff;
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--sv-acc) 70%,transparent)}
.sv-panel{display:none}
.sv-panel.on{display:grid;grid-template-columns:1fr 1fr;gap:22px;animation:svIn .45s ease}
@keyframes svIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sv-panel .pv{background:#fff;border:1px solid #e7eef9;border-radius:16px;padding:26px;
  box-shadow:0 10px 30px -18px rgba(23,43,99,.18)}
.sv-panel .pv h4{margin:0 0 12px;font-size:17px;font-weight:800;color:var(--sv-ink);display:flex;align-items:center;gap:10px}
.sv-panel .pv h4 i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--sv-acc),var(--sv-acc2))}
.sv-panel .pv h4 i svg{width:16px;height:16px}
.sv-panel .pv ul{margin:0;padding:0;list-style:none}
.sv-panel .pv ul li{position:relative;padding:7px 0 7px 22px;font-size:14px;line-height:1.75;color:#42547a}
.sv-panel .pv ul li::before{content:"";position:absolute;left:3px;top:15px;width:6px;height:6px;border-radius:2px;
  background:linear-gradient(135deg,var(--sv-acc),var(--sv-acc2));transform:rotate(45deg)}

/* ---------- 编号步骤 ---------- */
.sv-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:st;position:relative}
.sv-steps.five{grid-template-columns:repeat(5,1fr)}
.sv-steps .stp{position:relative;background:#fff;border:1px solid #e9edf4;border-radius:18px;padding:30px 18px 26px;
  box-shadow:0 8px 26px -20px rgba(23,43,99,.14);transition:transform .25s,box-shadow .25s,border-color .25s}
.sv-steps .stp:hover{transform:translateY(-6px);box-shadow:0 22px 42px -20px rgba(23,43,99,.26);border-color:color-mix(in srgb,var(--sv-acc) 26%,#fff)}
.sv-steps .stp-badge{position:relative;z-index:3;width:60px;height:60px;margin:0 auto 18px;display:grid;place-items:center;
  border-radius:16px;background:#fff;color:var(--sv-acc);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sv-acc) 22%,#fff),0 10px 22px -12px color-mix(in srgb,var(--sv-acc) 55%,transparent)}
.sv-steps .stp-badge svg{width:28px;height:28px}
.sv-steps .stp-badge i{position:absolute;top:-9px;right:-9px;font-style:normal;font-size:11px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--sv-acc),var(--sv-acc2));min-width:22px;height:22px;padding:0 5px;
  border-radius:11px;display:grid;place-items:center;box-shadow:0 4px 10px -4px color-mix(in srgb,var(--sv-acc) 70%,transparent)}
.sv-steps .stp h4{margin:0 0 8px;font-size:16px;font-weight:800;color:var(--sv-ink);text-align:center}
.sv-steps .stp p{margin:0;font-size:13px;line-height:1.75;color:var(--sv-mut);text-align:center}
.sv-steps .stp::after{content:none}
.sv-steps .stp:last-child::after{display:none}
.sv-steps.five.flow .stp:not(:first-child)::before{content:"";position:absolute;z-index:2;top:59px;
  left:calc(-1 * (22px + 50%));width:calc(22px + 100%);height:3px;
  background:linear-gradient(90deg,var(--sv-acc),var(--sv-acc2));border-radius:3px;
  box-shadow:0 0 12px rgba(37,99,235,.22)}
.sv-steps .stp-deliv{margin-top:14px;display:inline-flex;align-items:center;padding:5px 13px;font-size:12px;font-weight:700;
  color:var(--sv-acc);background:color-mix(in srgb,var(--sv-acc) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--sv-acc) 20%,#fff);border-radius:999px}

/* ---------- 客户墙 ---------- */
.sv-logos{background:#fff;border:1px solid #e7eef9;border-radius:18px;padding:26px;
  box-shadow:0 16px 40px -22px rgba(23,43,99,.22)}
.sv-logos.dark{background:#0d1526;border-color:#0d1526;padding:10px}
.sv-logos img{display:block;width:100%;height:auto}

/* ---------- FAQ ---------- */
.sv-faq{max-width:820px;margin:0 auto;display:grid;gap:14px}
.sv-faq details{background:#fff;border:1px solid #e7eef9;border-radius:14px;padding:0 22px;
  box-shadow:0 8px 24px -18px rgba(23,43,99,.2)}
.sv-faq details[open]{box-shadow:0 16px 36px -18px rgba(23,43,99,.3)}
.sv-faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 0;font-size:15.5px;font-weight:700;color:var(--sv-ink)}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary::after{content:"+";font-size:22px;color:var(--sv-acc);font-weight:700;transition:transform .2s}
.sv-faq details[open] summary::after{transform:rotate(45deg)}
.sv-faq details p{margin:0 0 18px;font-size:14px;line-height:1.85;color:var(--sv-mut)}

/* ---------- CTA ---------- */
.sv-cta{position:relative;overflow:hidden;margin:0 24px 84px;border-radius:24px;color:#fff;isolation:isolate;
  background:linear-gradient(115deg,#0a1640 0%,#173a8f 55%,var(--sv-acc) 120%)}
.sv-cta::before{content:"";position:absolute;right:-90px;top:-110px;width:340px;height:340px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--sv-acc2) 45%,transparent),transparent 70%)}
.sv-cta::after{content:"";position:absolute;left:-60px;bottom:-120px;width:300px;height:300px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.sv-cta .wrap{max-width:1140px;margin:0 auto;padding:56px 48px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.sv-cta h2{margin:0;font-size:clamp(24px,2.6vw,32px);font-weight:800;line-height:1.35}
.sv-cta h2 em{font-style:normal;color:#ffd28a}
.sv-cta .lead{margin:12px 0 0;font-size:14.5px;line-height:1.8;color:#c9d8f2}
.sv-cta .tel{margin-top:20px;font-size:14px;color:#dceaff}
.sv-cta .tel b{font-size:22px;color:#fff;margin-left:8px;letter-spacing:.02em}
.sv-cta .frm .fg label{color:#cfe0ff}
.sv-cta .frm input,.sv-cta .frm select{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff}
.sv-cta .frm input::placeholder{color:#9fb6dd}
.sv-cta .frm select option{color:#16233f}
.sv-cta .cb-go{background:#fff;color:var(--sv-acc);border:0}
.sv-cta .cb-alt{color:#fff;border:1px solid rgba(255,255,255,.4)}

/* ---------- 响应式 ---------- */
@media(max-width:1020px){
  .sv-hero .wrap,.sv-hero.rev .wrap{grid-template-columns:1fr;gap:40px}
  .sv-hero.rev .sv-tx{order:1}.sv-hero.rev .sv-vis{order:2}
  .sv-cards{grid-template-columns:repeat(2,1fr)}
  .sv-steps,.sv-steps.five{grid-template-columns:repeat(2,1fr)}
  .sv-steps .stp::after{display:none}
  .sv-steps.five.flow .stp:not(:first-child)::before{display:none}
  .sv-split{grid-template-columns:1fr;gap:34px}
  .sv-split.rev .sv-simg{order:0}
  .sv-num .wrap{grid-template-columns:repeat(2,1fr)}
  .sv-num .n:nth-child(3)::before{display:none}
  .sv-panel.on{grid-template-columns:1fr}
  .sv-cta .wrap{grid-template-columns:1fr;padding:44px 32px}
}
@media(max-width:640px){
  .sv-hero{padding:44px 0 60px}
  /* 窄屏：照片页改竖向白雾蒙层保文字可读；插画页缩小并保留 */
  .sv-hero::before,.sv-hero.rev::before{background:linear-gradient(180deg,rgba(246,250,255,.96) 0%,rgba(238,245,255,.93) 55%,rgba(228,239,255,.9) 100%)}
  .sv-hero.acc-teal,.sv-hero.acc-green,.sv-hero.acc-purple,.sv-hero.acc-geo{background-position:center}
  .sv-hero.acc-blue{background:linear-gradient(170deg,#f5f9ff 0%,#eaefff 55%,#e6ecff 100%)}
  .sv-hero.acc-blue::before{background-size:560px 420px;background-position:right -40px bottom -20px;opacity:.6}
  .sv-sec{padding:64px 0}
  .sv-cards,.sv-cards.g2{grid-template-columns:1fr}
  .sv-steps,.sv-steps.five{grid-template-columns:1fr}
  .sv-steps.five.flow .stp:not(:first-child)::before{display:none}
  .sv-num .wrap{grid-template-columns:repeat(2,1fr);gap:10px}
  .sv-badge.b1{left:8px;bottom:14px}
  .sv-badge.b2{right:8px;top:12px}
  .sv-photo{padding:80px 0}
  .sv-photo .ps{gap:26px}
  .sv-cta{margin:0 14px 60px}
}

/* ==================== GEO 增强：渐变按钮 / 渐变CTA / 真实影像画廊 / 彩色版块 ==================== */
/* 居中蓝渐变按钮 + ↗ 箭头（参考截图2 风格） */
.sv-btn-grad{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:14px;text-decoration:none;
  background:linear-gradient(100deg,#2F6BFF 0%,#4C81FF 52%,#6E9BFF 100%);color:#fff;
  font-size:16px;font-weight:800;letter-spacing:.01em;box-shadow:0 14px 34px rgba(47,107,255,.42);
  transition:transform .2s ease,box-shadow .2s ease}
.sv-btn-grad:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(47,107,255,.54);color:#fff}
.sv-btn-grad .ar{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;
  background:rgba(255,255,255,.22);font-size:15px;font-weight:900}
.sv-btn-grad .ar svg{width:15px;height:15px}

/* 居中渐变 CTA 版块 */
.sv-grad-cta{position:relative;overflow:hidden;padding:78px 24px;text-align:center;color:#fff;isolation:isolate;
  background:linear-gradient(120deg,#1e1b4b 0%,#312e81 46%,#4f46e5 100%)}
.sv-grad-cta::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:22px 22px}
.sv-grad-cta .wrap{max-width:980px;margin:0 auto}
.sv-grad-cta h2{margin:0;font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.35}
.sv-grad-cta h2 em{font-style:normal;color:#c4b5fd}
.sv-grad-cta p{margin:14px auto 0;max-width:660px;font-size:15.5px;line-height:1.85;color:#d6dcf5}
.sv-grad-cta .act{margin-top:32px;display:flex;justify-content:center}

/* 真实影像画廊 */
.sv-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.sv-gallery figure{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#eef2f9;
  box-shadow:0 14px 36px -20px rgba(23,43,99,.3)}
.sv-gallery img{display:block;width:100%;height:248px;object-fit:cover;transition:transform .45s ease}
.sv-gallery figure:hover img{transform:scale(1.06)}
.sv-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;
  background:linear-gradient(0deg,rgba(9,18,44,.88),rgba(9,18,44,0));color:#fff}
.sv-gallery figcaption b{display:block;font-size:16px;font-weight:800}
.sv-gallery figcaption span{display:block;margin-top:3px;font-size:13px;color:#cdd9f0}

/* 彩色 tint 版块（增加页面色彩层次） */
.sv-sec.tint{background:linear-gradient(135deg,color-mix(in srgb,var(--sv-acc) 7%,#fff),color-mix(in srgb,var(--sv-acc2) 9%,#fff))}

/* 价值支柱：渐变卡片 */
.sv-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
.sv-pillar{position:relative;padding:30px 24px;border-radius:18px;color:#fff;overflow:hidden;isolation:isolate;
  box-shadow:0 18px 40px -22px rgba(23,43,99,.4)}
.sv-pillar::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;
  z-index:-1;background:rgba(255,255,255,.18)}
.sv-pillar.g1{background:linear-gradient(135deg,#4f46e5,#7c6cf6)}
.sv-pillar.g2{background:linear-gradient(135deg,#0d9488,#34d399)}
.sv-pillar.g3{background:linear-gradient(135deg,#2563eb,#5b8cff)}
.sv-pillar.g4{background:linear-gradient(135deg,#d97706,#f59e0b)}
.sv-pillar .ic{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;margin-bottom:16px;
  background:rgba(255,255,255,.2);color:#fff}
.sv-pillar .ic svg{width:26px;height:26px}
.sv-pillar b{display:block;font-size:19px;font-weight:800;line-height:1.4}
.sv-pillar span{display:block;margin-top:10px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.9)}
@media(max-width:900px){.sv-gallery{grid-template-columns:1fr 1fr}.sv-pillars{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.sv-gallery{grid-template-columns:1fr}.sv-pillars{grid-template-columns:1fr}}