/* ============================================================
   leapdeck — solutions hub + solution detail pages
   builds on leapdeck.css tokens + inner.css
============================================================ */

/* ---------- step header (left-aligned, numbered) ---------- */
.step{max-width:760px;margin:0 0 36px}
.step .step-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.step .step-n{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.05rem;color:#fff;
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--grad);background-size:160% 160%;box-shadow:var(--shadow-brand)}
.step .step-k{font-size:.84rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)}
.step h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;line-height:1.14;margin-bottom:14px}
.step p{font-size:1.1rem;color:var(--ink-soft);line-height:1.7}

/* ---------- pain cards ("你是不是经常…") ---------- */
.pains{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:740px){.pains{grid-template-columns:1fr}}
.pain{position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:30px 28px 28px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pain:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.pain::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--pink),var(--lav))}
.pain .qm{position:absolute;top:14px;right:22px;font-family:"Bricolage Grotesque";font-weight:800;font-size:3.4rem;line-height:1;color:var(--pink-soft);opacity:.8}
.pain h4{font-size:1.16rem;font-weight:700;color:var(--ink);margin-bottom:9px;max-width:84%;line-height:1.35}
.pain p{color:var(--ink-soft);font-size:.98rem;line-height:1.65}

/* ---------- solution split (text + visual) ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.split.flip .split-text{order:2}
.split-visual{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow-lg);background:var(--surface)}
.split-visual img{width:100%;display:block}
.solve-list{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:16px}
.solve-list li{display:flex;gap:14px;align-items:flex-start}
.solve-list .ic{flex:none;width:30px;height:30px;border-radius:9px;background:var(--grad-soft);display:grid;place-items:center;margin-top:2px;box-shadow:var(--shadow-sm)}
.solve-list .ic svg{width:16px;height:16px;stroke:var(--blue-deep);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.solve-list .st{font-weight:700;color:var(--ink);display:block;margin-bottom:2px}
.solve-list .sd{color:var(--ink-soft);font-size:.97rem;line-height:1.6}
@media(max-width:840px){.split{grid-template-columns:1fr;gap:30px}.split.flip .split-text{order:0}}

/* ---------- case study ---------- */
.case-study{display:grid;grid-template-columns:1fr 1.1fr;gap:0;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.case-study .cs-visual{position:relative;background:var(--bg-2)}
.case-study .cs-visual img{width:100%;height:100%;object-fit:cover;object-position:top center}
.case-study .cs-body{padding:42px 40px}
.case-study .cs-tag{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--blue-deep);
  background:rgba(79,157,232,.1);border:1px solid rgba(79,157,232,.24);padding:.4em .9em;border-radius:999px;margin-bottom:16px}
.case-study h3{font-size:1.4rem;line-height:1.3;margin-bottom:12px}
.case-study .cs-body>p{color:var(--ink-soft);line-height:1.75;margin-bottom:22px}
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line);padding-top:22px}
.cs-metrics .m .v{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.7rem;line-height:1;
  background:var(--grad);background-size:160% 160%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cs-metrics .m .l{font-size:.84rem;color:var(--ink-soft);margin-top:6px;line-height:1.4}
@media(max-width:840px){.case-study{grid-template-columns:1fr}.case-study .cs-visual{min-height:240px}}

/* ---------- testimonial quote ---------- */
.quote-card{max-width:820px;margin:0 auto;text-align:center;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius-xl);padding:48px 46px;box-shadow:var(--shadow);position:relative}
.quote-card .stars{display:flex;gap:4px;justify-content:center;margin-bottom:18px}
.quote-card .stars svg{width:20px;height:20px;fill:var(--blue)}
.quote-card blockquote{font-family:"Bricolage Grotesque";font-weight:700;font-size:clamp(1.3rem,2.5vw,1.7rem);
  line-height:1.45;letter-spacing:-.01em;color:var(--ink);margin-bottom:24px}
.quote-card .who{display:flex;align-items:center;justify-content:center;gap:12px}
.quote-card .av{width:46px;height:46px;border-radius:50%;background:var(--grad);background-size:160% 160%;flex:none}
.quote-card .who .n{font-weight:700;color:var(--ink)}
.quote-card .who .r{font-size:.9rem;color:var(--ink-faint)}

/* ---------- CTA with two buttons ---------- */
.cta-2{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- HUB: scenario cards ---------- */
.scn-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:840px){.scn-grid{grid-template-columns:1fr}}
.scn{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.scn:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:rgba(79,157,232,.45)}
.scn .scn-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.scn .scn-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s var(--ease)}
.scn:hover .scn-thumb img{transform:scale(1.05)}
.scn .scn-body{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.scn .scn-tag{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--blue-deep);margin-bottom:10px}
.scn h3{font-size:1.4rem;margin-bottom:10px}
.scn .hook{color:var(--ink);font-weight:600;font-size:1.02rem;margin-bottom:14px}
.scn .outs{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.scn .outs li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:.96rem;line-height:1.5}
.scn .outs svg{flex:none;width:18px;height:18px;margin-top:2px;stroke:var(--blue);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.scn .scn-link{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--blue-deep);font-size:1rem}
.scn .scn-link svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.scn:hover .scn-link svg{transform:translateX(4px)}

/* ---------- HUB: common pains strip ---------- */
.cpains{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:880px){.cpains{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cpains{grid-template-columns:1fr}}
.cpain{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow-sm)}
.cpain .ci{width:44px;height:44px;border-radius:12px;background:rgba(244,169,206,.16);display:grid;place-items:center;margin-bottom:14px}
.cpain .ci svg{width:22px;height:22px;stroke:#C2607E;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cpain h4{font-size:1.04rem;font-weight:700;margin-bottom:7px}
.cpain p{color:var(--ink-soft);font-size:.93rem;line-height:1.6}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--ink-faint);margin-bottom:18px}
.crumb a{color:var(--ink-soft);font-weight:600}
.crumb a:hover{color:var(--blue-deep)}
.crumb svg{width:14px;height:14px;stroke:var(--ink-faint);stroke-width:2;fill:none}