/* ============================================================================
   10-pages2.css — automation / seo / outreach rich components + agency pages
   ============================================================================ */
.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 8px;border-radius:var(--r-full);
  background:var(--glass-hi);backdrop-filter:blur(10px);border:1px solid var(--glass-brd);box-shadow:var(--shadow-sm);
  font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:22px}
.hero-badge .hb-pill{background:var(--grad);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;letter-spacing:.03em}
.hero-trust{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin-top:26px}
.hero-trust .ht{display:inline-flex;align-items:center;gap:7px}
.hero-trust b{color:var(--ink);font-weight:600}
.flow-line{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.flow-line::before{content:"";position:absolute;top:34px;left:12%;right:12%;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--blue-3),transparent);opacity:.35}
.flow-step{background:var(--glass-hi);backdrop-filter:blur(14px);border:1px solid var(--glass-brd);border-radius:var(--r-lg);
  padding:28px 22px;box-shadow:var(--shadow-sm);position:relative;text-align:center;transition:transform .24s var(--ease),box-shadow .24s}
.flow-step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.flow-n{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;
  background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:14px;box-shadow:0 6px 14px -4px rgba(22,104,251,.7)}
.flow-ic{width:56px;height:56px;margin:10px auto 14px;border-radius:16px;background:var(--grad-soft);
  border:1px solid rgba(22,104,251,.14);display:grid;place-items:center;font-size:26px}
.flow-step h3{font-size:17px;margin-bottom:8px;font-family:var(--font-d);letter-spacing:-.01em}
.flow-step p{color:var(--muted);font-size:14px;line-height:1.55}
.integ-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:900px;margin:0 auto}
.integ{background:var(--glass-hi);backdrop-filter:blur(12px);border:1px solid var(--glass-brd);border-radius:var(--r-md);
  padding:20px;text-align:center;font-weight:600;font-size:15px;font-family:var(--font-d);letter-spacing:-.01em;
  box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s}
.integ:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.frow + .frow{margin-top:96px}
.frow.rev .frow-copy{order:2}
.frow-copy h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:16px;font-family:var(--font-d);letter-spacing:-.02em}
.frow-copy p{color:var(--muted);font-size:16.5px;margin-bottom:20px;line-height:1.7}
.frow-list{list-style:none;display:grid;gap:12px}
.frow-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-2)}
.frow-list .ci{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--grad-soft);
  border:1px solid rgba(22,104,251,.16);display:grid;place-items:center;font-size:13px;color:var(--blue);margin-top:1px}
@media(max-width:1024px){
  .flow-line{grid-template-columns:1fr 1fr;gap:32px}
  .flow-line::before{display:none}
  .integ-grid{grid-template-columns:1fr 1fr}
  .frow,.frow.rev .frow-copy{grid-template-columns:1fr;order:0}
  .frow{gap:32px}
}
@media(max-width:560px){ .flow-line{grid-template-columns:1fr} .integ-grid{grid-template-columns:1fr 1fr} }
/* frow visual column */
.frow-visual{min-width:0}
.frow-visual .photo-slot{width:100%}