@charset "utf-8";
/* ==========================================================================
   妙排网络 · 谷歌SEO服务页面样式（Google-SEO-services.html）
   主题：浅色 · 冷雾灰底 + 靛紫罗兰主色 + 琥珀点缀
   仅作用于 Google-SEO-services.html，自建组件统一前缀 gs- ，避免与其它页面冲突
   Contact: TG:@mspseo   Q/V:897569356
   ========================================================================== */

/* ---------- 0. 变量覆盖（覆盖 base.css 同名变量） ---------- */
:root{
  --brand:#4338CA;
  --brand-2:#7C3AED;
  --accent:#F59E0B;
  --ink:#141A33;
  --text:#2A3352;
  --muted:#5E6885;
  --bg:#F7F8FC;
  --bg-soft:#EEF0F9;
  --surface:#FFFFFF;
  --surface-2:#F4F5FC;
  --border:rgba(67,56,202,.14);
  --border-strong:rgba(67,56,202,.32);
  --head-bg:rgba(247,248,252,.94);
  --head-text:#141A33;
  --head-border:rgba(67,56,202,.12);
  --nav-hover-bg:rgba(67,56,202,.07);
  --foot-bg:#0D1030;
  --foot-text:#A7ADD0;
  --foot-head:#FFFFFF;
  --foot-border:rgba(255,255,255,.10);
  --shadow:0 22px 56px rgba(20,26,51,.12);
  --shadow-sm:0 10px 26px rgba(20,26,51,.08);
}
body{background:var(--bg);color:var(--text)}
::selection{background:var(--brand);color:#fff}

/* ---------- 1. 公共组件配色覆写 ---------- */
.btn-primary{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  box-shadow:0 10px 26px rgba(67,56,202,.28);
}
.btn-primary:hover{box-shadow:0 16px 34px rgba(67,56,202,.36)}
.cta-band{
  background-image:
    linear-gradient(135deg,rgba(10,6,40,.16),rgba(10,6,40,.32)),
    linear-gradient(135deg,#3B31B8 0%,#6D28D9 60%,#7C3AED 100%);
}
.num-list li::before{background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.card-ico{
  background:linear-gradient(135deg,rgba(67,56,202,.13),rgba(124,58,237,.09));
  border-color:var(--border);
}
.stats b small{font-size:.5em;font-weight:800;margin-left:2px}
.eyebrow{color:var(--brand)}
.crumb{background:var(--bg-soft)}

/* ---------- 2. 首屏：靛紫冷雾底 + 斜向细条纹 ---------- */
.gs-hero{
  position:relative;overflow:hidden;
  padding:clamp(42px,5.6vw,84px) 0 clamp(40px,5vw,70px);
  background-image:
    linear-gradient(135deg,rgba(67,56,202,.11) 0%,rgba(124,58,237,.04) 46%,rgba(245,158,11,.09) 100%),
    repeating-linear-gradient(135deg,rgba(67,56,202,.055) 0 1px,transparent 1px 13px),
    linear-gradient(180deg,#FCFCFE 0%,#F7F8FC 60%,#EEF0F9 100%);
}
.gs-hero .container{position:relative;z-index:1}
.gs-hero h1{max-width:660px}
.gs-hero .hero-lead{max-width:620px}
.gs-hero .eyebrow{background:rgba(67,56,202,.08);border-color:var(--border-strong);color:var(--brand)}
.gs-hero .hero-visual img{
  border:1px solid var(--border-strong);border-radius:22px;
  box-shadow:0 28px 60px rgba(20,26,51,.16);
}
.gs-cta{background:rgba(255,255,255,.96);border-color:var(--border-strong)}
.gs-cta .t{flex:1 1 100%}

/* ---------- 3. 常见困境（痛点）卡片 ---------- */
.gs-problems{gap:20px}
.gs-problem{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:26px 24px 24px;box-shadow:var(--shadow-sm);
  transition:transform .28s,box-shadow .28s,border-color .28s;
}
.gs-problem::after{
  content:"";position:absolute;right:-56px;top:-56px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(124,58,237,.22),rgba(67,56,202,.05) 66%,transparent 72%);
  opacity:0;transform:scale(.55);
  transition:opacity .4s ease,transform .4s ease;
}
.gs-problem:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.gs-problem:hover::after{opacity:1;transform:scale(1)}
.gs-problem>*{position:relative;z-index:1}
.gs-problem-no{
  display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  font-size:14px;font-weight:900;letter-spacing:.6px;
  color:var(--brand);background:rgba(67,56,202,.08);border:1px solid var(--border);
  transition:background .3s,color .3s,transform .3s,border-color .3s;
}
.gs-problem:hover .gs-problem-no{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;border-color:transparent;transform:rotate(-6deg) scale(1.07);
}
.gs-problem h3{margin:14px 0 9px;font-size:17.5px}
.gs-problem p{color:var(--muted);font-size:14.5px;margin:0}

/* ---------- 4. 六项服务卡片（整卡渐变描边渐显） ---------- */
.gs-services{gap:20px}
.gs-service{
  position:relative;border-radius:18px;padding:26px 24px 24px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:transform .28s,box-shadow .28s;
}
.gs-service::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 52%,var(--accent) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.gs-service:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(20,26,51,.14)}
.gs-service:hover::before{opacity:1}
.gs-service-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.gs-service-no{
  flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  font-size:15px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 12px 26px rgba(67,56,202,.26);
  transition:transform .3s;
}
.gs-service:hover .gs-service-no{transform:scale(1.08) rotate(4deg)}
.gs-service h3{font-size:17.5px}
.gs-service>b{
  display:block;margin:4px 0 15px;
  font-size:14.2px;font-weight:800;color:var(--brand);
}
.gs-service .checklist li{font-size:14.4px;line-height:1.7}

/* ---------- 5. 五步增长路径：竖向大号编号 + 竖线连接 ---------- */
.gs-flow{
  position:relative;max-width:920px;margin:0 auto;
  display:grid;gap:16px;counter-reset:gsn;
}
.gs-flow li{
  position:relative;padding:24px 28px 24px 112px;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow-sm);
  transition:transform .28s,border-color .28s,box-shadow .28s;
}
.gs-flow li:hover{transform:translateX(6px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.gs-flow li::before{
  counter-increment:gsn;content:counter(gsn,decimal-leading-zero);
  position:absolute;left:28px;top:50%;margin-top:-30px;
  width:60px;height:60px;border-radius:18px;
  display:grid;place-items:center;
  font-size:23px;font-weight:900;letter-spacing:-.5px;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 14px 30px rgba(67,56,202,.28);
  transition:transform .3s;
}
.gs-flow li:hover::before{transform:scale(1.06)}
.gs-flow li::after{
  content:"";position:absolute;left:57px;top:100%;width:2px;height:16px;
  background:var(--border-strong);
}
.gs-flow li:last-child::after{display:none}
.gs-flow h3{margin:0 0 8px;font-size:18px}
.gs-flow p{color:var(--muted);font-size:14.6px;margin:0}
.gs-flow-en{
  display:inline-block;margin-top:10px;
  font-size:11.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--brand-2);
}

/* ---------- 6. 国际化 SEO ---------- */
.gs-intl{gap:20px}
.gs-intl article{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:28px 22px 24px;box-shadow:var(--shadow-sm);
  transition:transform .28s,box-shadow .28s,border-color .28s;
}
.gs-intl article::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--accent));
  transform:scaleX(0);transform-origin:center;
  transition:transform .34s ease;
}
.gs-intl article:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.gs-intl article:hover::before{transform:scaleX(1)}
.gs-intl h3{margin:0 0 10px;font-size:17px}
.gs-intl p{color:var(--muted);font-size:14.4px;margin:0}
.gs-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.gs-mini-stats li{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px 20px;box-shadow:var(--shadow-sm);
}
.gs-mini-stats b{font-size:26px;font-weight:900;color:var(--brand);line-height:1}
.gs-mini-stats b small{font-size:13px;font-weight:900;margin-left:1px}
.gs-mini-stats span{font-size:13.5px;color:var(--muted)}

/* ---------- 7. 案例数据（左右双栏 + 大号百分比卡） ---------- */
.gs-cases{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,46px);align-items:start}
.gs-case-visual{display:grid;gap:18px}
.gs-case-visual figure{
  margin:0;border-radius:20px;overflow:hidden;
  border:1px solid var(--border-strong);background:var(--surface);
  box-shadow:0 24px 54px rgba(20,26,51,.14);
}
.gs-case-visual img{width:100%}
.gs-case-data{display:grid;gap:18px}
.gs-case{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:26px 26px 24px;box-shadow:var(--shadow-sm);
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.gs-case::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .36s;
}
.gs-case:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.gs-case:hover::after{transform:scaleX(1)}
.gs-case-num{
  display:block;font-size:clamp(44px,5.6vw,68px);font-weight:900;line-height:1;letter-spacing:-1.4px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand);
}
.gs-case-num small{font-size:.42em;font-weight:900;margin-left:2px}
.gs-case h3{margin:14px 0 8px;font-size:18px}
.gs-case p{color:var(--muted);font-size:14.4px;margin:0 0 14px}
.gs-case-tags .tag{font-size:12px}
.gs-case-note{margin-top:26px}

/* ---------- 8. 为什么选择我们 ---------- */
.gs-why{gap:20px}
.gs-why article{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:26px 22px;box-shadow:var(--shadow-sm);
  transition:transform .28s,border-color .28s,box-shadow .28s;
}
.gs-why article::after{
  content:"";position:absolute;left:-44px;bottom:-44px;width:124px;height:124px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.22),transparent 68%);
  opacity:0;transform:scale(.5);
  transition:opacity .35s,transform .35s;
}
.gs-why article:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.gs-why article:hover::after{opacity:1;transform:scale(1)}
.gs-why article>*{position:relative;z-index:1}
.gs-why h3{margin:0 0 9px;font-size:17px}
.gs-why p{color:var(--muted);font-size:14.4px;margin:0}

/* ---------- 9. FAQ ---------- */
.gs-faq details[open]{border-color:var(--brand-2)}
.gs-faq summary{font-size:15.8px}
.gs-faq .faq-body a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.gs-faq .faq-body a:hover{color:var(--brand-2)}

/* ---------- 10. 响应式 ---------- */
@media (max-width:1080px){
  .gs-hero h1,.gs-hero .hero-lead{max-width:none}
  .gs-cases{grid-template-columns:1fr;gap:30px}
  .gs-case-visual{order:-1;grid-template-columns:1fr 1fr}
  .gs-mini-stats{grid-template-columns:1fr 1fr}
  .gs-flow li{padding:24px 22px 24px 100px}
  .gs-flow li::before{left:22px;width:56px;height:56px;margin-top:-28px;font-size:21px}
  .gs-flow li::after{left:49px}
}
@media (max-width:720px){
  .gs-problem,.gs-service,.gs-intl article,.gs-why article,.gs-case{padding:22px 18px 20px}
  .gs-case-visual{grid-template-columns:1fr}
  .gs-mini-stats{grid-template-columns:1fr}
  .gs-flow{gap:14px}
  .gs-flow li{padding:70px 18px 22px}
  .gs-flow li::before{
    left:18px;top:20px;margin-top:0;
    width:38px;height:38px;border-radius:12px;font-size:16px;
  }
  .gs-flow li::after{left:37px;top:auto;bottom:-14px;height:14px}
  .gs-flow li:hover{transform:translateY(-4px)}
  .gs-flow h3{font-size:17px}
  .gs-case-num{font-size:44px}
  .gs-hero .hero-visual img{border-radius:16px}
  .gs-cta .btn{flex:1 1 100%}
}