/* ============================================================
   FTAWANG SOHO — funnel / trust / conversion components
   Depends on style.css (palette + base). All classes prefixed soho-.
   ============================================================ */

/* ---------- Capabilities: process strip ---------- */
.soho-process { background: var(--blue); color:#fff; padding: 40px 0; }
.soho-process .section-subtitle { color:#aebbcf; margin-bottom: 26px; }
.soho-process-grid { display:grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.soho-step { text-align:center; position:relative; padding-top: 4px; }
.soho-step .ico { font-size: 1.7rem; display:block; margin-bottom: 8px; }
.soho-step b { display:block; font-size:.95rem; color:#fff; }
.soho-step span { font-size:.8rem; color:#aebbcf; }
.soho-step:not(:last-child)::after { content:"→"; position:absolute; right:-10px; top: 18px; color: var(--orange); font-weight:800; }

/* ---------- Industry cards ---------- */
.soho-ind-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.soho-ind { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; transition:.25s; display:flex; flex-direction:column; }
.soho-ind:hover { border-color: var(--orange); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.soho-ind img { width:100%; height:170px; object-fit:cover; background:var(--gray-100); }
.soho-ind .body { padding: 20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.soho-ind h3 { font-size:1.12rem; margin:0 0 8px; }
.soho-ind p { color:var(--text-muted); font-size:.88rem; flex:1; }
.soho-ind .cat-link { margin-top:14px; }

/* ---------- Capability detail (two-col feature) ---------- */
.soho-feature { display:grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items:center; }
.soho-feature.reverse .soho-feature-media { order:2; }
.soho-feature-media img { width:100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.soho-feature h3 { font-size:1.4rem; }
.soho-feature ul { list-style:none; padding:0; margin: 14px 0 0; }
.soho-feature ul li { padding: 7px 0 7px 26px; position:relative; color:var(--text); }
.soho-feature ul li::before { content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:800; }

/* ---------- How I Work: 7-step funnel ---------- */
.soho-flow { background: var(--bg-light); }
.soho-flow-list { max-width: 860px; margin: 0 auto; position:relative; }
.soho-flow-item { display:grid; grid-template-columns: 64px 1fr; gap: 22px; padding-bottom: 30px; position:relative; }
.soho-flow-item:not(:last-child)::before { content:""; position:absolute; left:31px; top:54px; bottom:0; width:2px; background: var(--gray-200); }
.soho-flow-num { width:64px; height:64px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.25rem; z-index:2; }
.soho-flow-item:nth-child(even) .soho-flow-num { background: var(--orange); }
.soho-flow-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; }
.soho-flow-card h4 { margin:0 0 6px; font-size:1.08rem; }
.soho-flow-card p { margin:0; color:var(--text-muted); font-size:.92rem; }
.soho-flow-card .tag { display:inline-block; margin-top:10px; font-size:.76rem; background:var(--gray-100); color:var(--gray-700); padding:3px 10px; border-radius:20px; }

/* ---------- Trust / proof grid ---------- */
.soho-trust-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.soho-trust { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 22px; }
.soho-trust .ico { font-size:1.6rem; }
.soho-trust h4 { font-size:1.02rem; margin: 10px 0 6px; }
.soho-trust p { margin:0; color:var(--text-muted); font-size:.86rem; }
.soho-proof { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top: 30px; }
.soho-proof figure { margin:0; border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; background:#fff; }
.soho-proof img { width:100%; height:200px; object-fit:cover; background:var(--gray-100); }
.soho-proof figcaption { padding:12px 14px; font-size:.84rem; color:var(--text-muted); }

/* ---------- Person / About hero ---------- */
.soho-person { display:grid; grid-template-columns: 280px 1fr; gap: 40px; align-items:center; }
.soho-person .photo { width:100%; aspect-ratio:1/1; border-radius: var(--radius-lg); background: linear-gradient(135deg,var(--blue-2),var(--blue)); display:grid; place-items:center; color:#fff; font-size:3.2rem; font-weight:800; }
.soho-person h2 { margin-top:0; }
.soho-person .badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.soho-person .badges span { background:var(--gray-100); border:1px solid var(--border); border-radius:20px; padding:6px 14px; font-size:.84rem; color:var(--gray-700); }

/* ---------- Contact ---------- */
.soho-contact-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items:start; }
.soho-form { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; }
.soho-form .field { margin-bottom: 16px; }
.soho-form label { display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.soho-form label .req { color: var(--orange); }
.soho-form input, .soho-form textarea, .soho-form select {
  width:100%; padding: 11px 13px; border:1px solid var(--border); border-radius: var(--radius); font-size:.92rem; font-family:inherit; color:var(--text); background:#fff;
}
.soho-form input:focus, .soho-form textarea:focus, .soho-form select:focus { outline:none; border-color: var(--blue-3); }
.soho-form textarea { min-height: 110px; resize: vertical; }
.soho-form .hint { font-size:.8rem; color:var(--text-muted); margin-top:6px; }
.soho-form .note { font-size:.82rem; color:var(--text-muted); margin-top:14px; text-align:center; }

.soho-channels { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.soho-channel { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; display:flex; gap:14px; align-items:center; }
.soho-channel .ico { width:44px; height:44px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.2rem; flex:none; }
.soho-channel .ico.wa { background:#25d366; }
.soho-channel .ico.email { background:var(--blue-3); }
.soho-channel .ico.fb { background:#1877f2; }
.soho-channel .ico.wechat { background:#09b83e; }
.soho-channel .ico.map { background:var(--orange); }
.soho-channel b { display:block; font-size:.92rem; color:var(--ink); }
.soho-channel span { font-size:.82rem; color:var(--text-muted); }
.soho-channel a { color: var(--blue-3); font-weight:600; }
.soho-qr { grid-column: 1 / -1; text-align:center; background:#fff; border:1px dashed var(--border); border-radius: var(--radius-lg); padding: 18px; }
.soho-qr .box { width:140px; height:140px; margin: 0 auto 10px; background:var(--gray-100); border-radius:10px; display:grid; place-items:center; color:var(--gray-500); font-size:.8rem; text-align:center; }

/* ---------- Resources ---------- */
.soho-res-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.soho-res { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; display:flex; flex-direction:column; }
.soho-res .ico { font-size:1.8rem; }
.soho-res h3 { font-size:1.12rem; margin: 10px 0 8px; }
.soho-res p { color:var(--text-muted); font-size:.88rem; flex:1; }
.soho-rfq { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; margin-top: 26px; }
.soho-rfq pre { background:var(--gray-50); border:1px solid var(--border); border-radius:var(--radius); padding:16px; overflow:auto; font-size:.84rem; color:var(--gray-700); white-space:pre-wrap; }

/* ---------- CTA band ---------- */
.soho-cta-band { background: linear-gradient(120deg, var(--blue), var(--blue-2)); color:#fff; padding: 56px 0; text-align:center; }
.soho-cta-band h2 { color:#fff; margin:0 0 12px; }
.soho-cta-band p { color:#c4cede; max-width:640px; margin:0 auto 24px; }
.soho-cta-band .hero-cta { justify-content:center; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .soho-process-grid { grid-template-columns: repeat(3,1fr); }
  .soho-ind-grid { grid-template-columns: repeat(2,1fr); }
  .soho-trust-grid { grid-template-columns: repeat(2,1fr); }
  .soho-res-grid { grid-template-columns: 1fr; }
  .soho-feature, .soho-person, .soho-contact-grid { grid-template-columns: 1fr; }
  .soho-person .photo { max-width: 240px; }
  .soho-proof { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .soho-process-grid { grid-template-columns: 1fr 1fr; }
  .soho-ind-grid, .soho-trust-grid, .soho-proof, .soho-channels { grid-template-columns: 1fr; }
  .soho-flow-item { grid-template-columns: 48px 1fr; gap:16px; }
  .soho-flow-num { width:48px; height:48px; font-size:1rem; }
}