/* =========================================================
   核心优势 页面（复用 theme.css 设计系统：亮蓝科技感）
   仅补充本页特有样式，配色统一用 --blue / --cyan
   ========================================================= */

/* ---------- 区块标题（统一风格） ---------- */
.ys-head{text-align:center;max-width:780px;margin:0 auto 52px}
.ys-head__k{display:inline-block;font-size:12px;letter-spacing:3px;font-weight:700;color:var(--blue);margin-bottom:14px}
.ys-head h2{font-size:clamp(26px,3.2vw,38px);color:var(--ink);font-weight:800;letter-spacing:-.5px}
.ys-head p{margin-top:16px;font-size:16px;line-height:1.8;color:var(--muted)}
.ys-head--light .ys-head__k{color:#9DC2FF}
.ys-head--light h2,.ys-head--light p{color:#fff}

.ys-block{background:#fff}
.ys-block--alt{background:var(--bg)}

/* =========================================================
   Hero（复用首页科技感）
   ========================================================= */
.ys-hero{position:relative;overflow:hidden;padding:100px 0 80px;background:
  radial-gradient(700px 500px at 88% 10%,rgba(0,166,232,.18),transparent 60%),
  radial-gradient(600px 480px at 8% 90%,rgba(0,102,255,.16),transparent 60%),
  linear-gradient(180deg,#fff,#F2F8FF)}
.ys-hero__bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,102,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,102,255,.05) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%)}
.ys-hero__inner{position:relative;text-align:center}
.ys-hero__badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--blue);
  background:var(--glass-strong);border:1px solid var(--line);padding:8px 18px;border-radius:30px;margin-bottom:24px;
  box-shadow:var(--shadow-sm)}
.ys-hero__badge .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(0,102,255,.18)}
.ys-hero h1{font-size:clamp(32px,4.6vw,56px);line-height:1.12;font-weight:800;color:var(--ink);letter-spacing:-1px}
.ys-hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ys-hero__lead{margin:22px auto 0;max-width:760px;font-size:17px;line-height:1.9;color:var(--muted)}
.ys-hero__stats{margin:46px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:880px}
.ys-hero__stats .s{background:var(--glass-strong);border:1px solid var(--line);border-radius:var(--r-sm);padding:24px 16px;box-shadow:var(--shadow-sm)}
.ys-hero__stats b{display:block;font-size:34px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ys-hero__stats span{display:block;font-size:13.5px;color:var(--muted);margin-top:6px}

/* =========================================================
   语言 / 能力卡（前端、后端共用）
   ========================================================= */
.ys-lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ys-lang-card{padding:30px 26px;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:.28s}
.ys-lang-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(0,102,255,.35)}
.ys-lang-card h3{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.ys-lang-card h3::before{content:"";width:6px;height:20px;border-radius:4px;background:var(--grad)}
.ys-lang-card p{font-size:14.5px;line-height:1.8;color:var(--muted)}

/* =========================================================
   能开发什么（8 宫格）
   ========================================================= */
.ys-scope-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ys-scope-card{padding:28px 24px;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:.28s}
.ys-scope-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(0,102,255,.35)}
.ys-scope-card__ico{width:46px;height:46px;border-radius:12px;background:var(--grad-soft);color:var(--blue);
  display:grid;place-items:center;margin-bottom:14px}
.ys-scope-card__ico svg{width:26px;height:26px}
.ys-scope-card h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:8px}
.ys-scope-card p{font-size:13.5px;line-height:1.7;color:var(--muted)}

/* =========================================================
   代码硬实力（深色块）
   ========================================================= */
.ys-block--dark{background:linear-gradient(135deg,#0A1F3C,#0E2A4F 60%,#0A3A4A)}
.ys-code-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ys-code-card{position:relative;padding:32px 28px 28px;border-radius:var(--r);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);transition:.28s}
.ys-code-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.09);border-color:rgba(0,166,232,.5)}
.ys-code-card__num{font-size:22px;font-weight:800;color:var(--cyan);opacity:.9;margin-bottom:12px}
.ys-code-card h3{font-size:18px;font-weight:800;color:#fff;margin-bottom:10px}
.ys-code-card p{font-size:14px;line-height:1.8;color:rgba(255,255,255,.78)}

/* =========================================================
   全流程服务
   ========================================================= */
.ys-service-track{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.ys-service-track::before{content:"";position:absolute;top:34px;left:12%;right:12%;height:2px;
  background:repeating-linear-gradient(90deg,var(--blue) 0 10px,transparent 10px 20px);opacity:.4}
.ys-service-step{position:relative;text-align:center;padding:0 8px}
.ys-service-step__no{display:inline-grid;place-items:center;width:68px;height:68px;border-radius:50%;
  background:#fff;border:2px solid var(--blue);color:var(--blue);font-size:20px;font-weight:800;
  margin-bottom:18px;position:relative;z-index:2;box-shadow:0 12px 28px -14px rgba(0,102,255,.5)}
.ys-service-step h3{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:8px}
.ys-service-step p{font-size:14px;line-height:1.8;color:var(--muted)}

/* =========================================================
   资质 / 信任
   ========================================================= */
.ys-credit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ys-credit-card{padding:32px 26px;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  text-align:center;box-shadow:var(--shadow-sm);transition:.28s}
.ys-credit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(0,102,255,.35)}
.ys-credit-card b{display:block;font-size:22px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.ys-credit-card p{font-size:13.5px;line-height:1.7;color:var(--muted)}

/* =========================================================
   CTA（真通栏）
   ========================================================= */
.ys-cta{background:transparent;padding:0 !important;margin-top:-60px;margin-bottom:30px}
.ys-cta__box{position:relative;text-align:center;padding:34px 24px;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#0A1F3C,#0E2A4F 60%,#0A3A4A)}
.ys-cta__box h2{font-size:clamp(26px,3vw,38px);font-weight:800;color:#fff}
.ys-cta__box p{margin-top:14px;font-size:16px;opacity:.9;color:#fff}
.ys-cta__btns{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ys-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;border-radius:30px;font-size:16px;font-weight:700;text-decoration:none;transition:.25s;cursor:pointer}
.ys-btn--primary{background:#fff;color:var(--blue);box-shadow:0 16px 34px -14px rgba(0,0,0,.4)}
.ys-btn--primary:hover{transform:translateY(-2px);background:#E6F0FF}
.ys-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.ys-btn--ghost:hover{background:rgba(255,255,255,.1)}

/* =========================================================
   响应式
   ========================================================= */
@media(max-width:980px){
  .ys-hero__stats{grid-template-columns:repeat(2,1fr);gap:14px}
  .ys-lang-grid{grid-template-columns:repeat(2,1fr)}
  .ys-scope-grid{grid-template-columns:repeat(2,1fr)}
  .ys-code-grid{grid-template-columns:repeat(2,1fr)}
  .ys-service-track{grid-template-columns:repeat(2,1fr);gap:28px}
  .ys-service-track::before{display:none}
  .ys-credit-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .ys-hero__stats{grid-template-columns:1fr}
  .ys-lang-grid{grid-template-columns:1fr}
  .ys-scope-grid{grid-template-columns:1fr}
  .ys-code-grid{grid-template-columns:1fr}
  .ys-service-track{grid-template-columns:1fr}
  .ys-credit-grid{grid-template-columns:1fr}
}