/* ============ B2B PAGE — section styles ============ */

/* ---- HERO (B2B) ---- */
.b-hero { position:relative; overflow:hidden; }
.b-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; padding-top:80px; padding-bottom:92px; }
.b-hero-eyebrow { display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 8px; border-radius:999px;
  background:var(--brand-tint); color:var(--brand-deep); font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.b-hero-eyebrow .dot { width:18px; height:18px; border-radius:50%; background:var(--brand); display:grid; place-items:center; }
.b-hero-eyebrow .dot::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--brand-ink); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--brand-ink);} 70%{box-shadow:0 0 0 6px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
.b-hero h1 { font-size:clamp(38px,4.8vw,60px); font-weight:700; line-height:1.04; letter-spacing:-.035em; margin:24px 0 22px; text-wrap:balance; }
.b-hero h1 em { font-style:normal; color:var(--brand-deep); position:relative; display:inline-block; }
.b-hero h1 em::after { content:''; position:absolute; inset:-2px -4px; background:var(--brand-tint); z-index:-1; border-radius:4px; }
.b-hero-sub { font-size:18px; line-height:1.55; color:var(--muted); max-width:540px; margin-bottom:34px; }
.b-hero-ctas { display:flex; gap:13px; margin-bottom:46px; flex-wrap:wrap; }
.b-hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding-top:30px; border-top:1px solid var(--rule); }
.b-stat { padding-right:22px; border-right:1px solid var(--rule); }
.b-stat:first-child { padding-left:0; }
.b-stat:last-child { border-right:none; padding-right:0; padding-left:22px; }
.b-stat .num { font-size:34px; font-weight:700; letter-spacing:-.03em; color:var(--brand-deep); line-height:1; font-variant-numeric:tabular-nums; }
.b-stat .lbl { font-size:13px; color:var(--muted); margin-top:8px; }
.b-hero-visual { position:relative; }
.b-hero-img { position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5; background:var(--surface); box-shadow:0 30px 64px -32px var(--shadow); }
.b-hero-img img, .b-hero-img image-slot { width:100%; height:100%; object-fit:cover; display:block; }
.b-hero-img .tint { position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,var(--brand-deep) 128%); mix-blend-mode:multiply; opacity:.22; }
.b-hero-dots { position:absolute; width:128px; height:128px; background-image:radial-gradient(circle,var(--brand-tint-strong) 1.6px,transparent 1.6px); background-size:14px 14px; z-index:-1; }
.b-hero-dots.tl { top:-22px; left:-30px; }
.b-hero-dots.br { bottom:-22px; right:-30px; }
.b-badge { position:absolute; background:var(--bg); border:1px solid var(--rule); border-radius:16px; padding:13px 17px; box-shadow:0 16px 34px -14px var(--shadow); display:flex; align-items:center; gap:12px; }
.b-badge.b1 { top:30px; left:-26px; }
.b-badge.b2 { bottom:30px; right:-26px; }
.b-badge-icon { width:42px; height:42px; border-radius:11px; background:var(--brand-tint); color:var(--brand-deep); display:grid; place-items:center; flex-shrink:0; }
.b-badge-icon svg { width:21px; height:21px; }
.b-badge small { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:500; }
.b-badge b { display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; margin-top:2px; }
@media (max-width:920px){ .b-hero-grid { grid-template-columns:1fr; gap:28px; } .b-badge { display:none; } }
@media (max-width:920px){
  .b-hero-grid { padding-top:16px; padding-bottom:48px; }
  .b-hero h1 { margin-top:14px; margin-bottom:16px; }
  .b-hero-sub { margin-bottom:22px; }
  .b-hero-ctas { margin-bottom:28px; }
}

/* ---- CAPABILITIES ---- */
.cap { padding:96px 0; background:var(--surface); border-top:1px solid var(--rule); }
.cap-head { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:end; margin-bottom:48px; }
.cap-head .eyebrow { margin-bottom:18px; }
.cap-chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.cap-chip { padding:10px 18px; border-radius:999px; background:var(--bg); border:1px solid var(--rule); font-size:13.5px; font-weight:500; display:inline-flex; align-items:center; gap:8px; transition:all .2s ease; cursor:default; }
.cap-chip:hover { transform:translateY(-2px); border-color:var(--brand); }
.cap-chip .cdot { width:6px; height:6px; border-radius:50%; background:var(--brand); }
.cap-chip.active { background:var(--brand-deep); color:var(--brand-ink); border-color:var(--brand-deep); }
.cap-chip.active .cdot { background:var(--brand-ink); }
.cap-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.cap-card { background:var(--bg); border:1px solid var(--rule); border-radius:20px; padding:28px 26px; position:relative; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cap-card:hover { transform:translateY(-5px); box-shadow:0 26px 44px -22px var(--shadow); border-color:var(--brand-tint-strong); }
.cap-card .cnum { position:absolute; top:24px; right:26px; font-size:13px; color:var(--muted); font-weight:500; }
.cap-card .cicon { width:52px; height:52px; border-radius:14px; background:var(--brand-tint); color:var(--brand-deep); display:grid; place-items:center; margin-bottom:22px; }
.cap-card .cicon svg { width:24px; height:24px; }
.cap-card h3 { font-size:19px; font-weight:600; letter-spacing:-.018em; margin-bottom:10px; line-height:1.25; }
.cap-card p { font-size:14px; color:var(--muted); line-height:1.55; }
.cap-card .cmeta { margin-top:22px; padding-top:18px; border-top:1px dashed var(--rule); display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted); }
.cap-card .cmeta b { color:var(--brand-deep); font-weight:600; }
@media (max-width:980px){ .cap-grid { grid-template-columns:1fr 1fr; } .cap-head { grid-template-columns:1fr; gap:20px; } }
@media (max-width:620px){ .cap-grid { grid-template-columns:1fr; } }

/* ---- COST SAVINGS ---- */
.cost { padding:96px 0; }
.cost-head { text-align:center; max-width:760px; margin:0 auto 52px; }
.cost-head .eyebrow { margin-bottom:18px; }
.cost-head .sec-title { margin-bottom:18px; }
.cost-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; position:relative; margin-bottom:28px; }
.cost-vs { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-weight:700; font-size:14px; letter-spacing:.05em; z-index:2; box-shadow:0 8px 24px -8px var(--shadow); }
.cost-col { background:var(--surface); border:1px solid var(--rule); border-radius:24px; padding:34px; }
.cost-col.featured { background:var(--brand-deep); color:var(--brand-ink); border-color:var(--brand-deep); }
.cost-col.featured .cost-row { border-color:rgba(255,255,255,.12); }
.cost-col.featured .cost-total { border-top-color:rgba(255,255,255,.4); }
.cost-col.featured .cost-row-label, .cost-col.featured .cost-row-val, .cost-col.featured .cost-name, .cost-col.featured .cost-csub, .cost-col.featured .cost-total-label, .cost-col.featured .cost-total-val { color:var(--brand-ink); }
.cost-tag { display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.cost-tag.trad { background:rgba(0,0,0,.06); color:var(--muted); }
.cost-tag.featured { background:rgba(255,255,255,.16); color:var(--brand-ink); }
.cost-name { font-size:23px; font-weight:700; letter-spacing:-.025em; margin-bottom:4px; }
.cost-csub { font-size:14px; color:var(--muted); margin-bottom:26px; }
.cost-row { display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid var(--rule); }
.cost-row-label { font-size:14.5px; }
.cost-row-val { font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.cost-row-val.free { color:var(--brand-deep); }
.cost-col.featured .cost-row-val.free { color:var(--brand-tint-strong); }
.cost-total { display:flex; justify-content:space-between; align-items:baseline; padding-top:22px; margin-top:6px; border-top:2px solid var(--ink); }
.cost-total-label { font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.cost-total-val { font-size:27px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cost-summary { background:var(--surface); border:1px solid var(--rule); border-radius:20px; display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; padding:26px 34px; }
.cost-summary-icon { width:56px; height:56px; border-radius:16px; background:var(--brand); color:var(--brand-ink); display:grid; place-items:center; }
.cost-summary-icon svg { width:26px; height:26px; }
.cost-summary-text strong { display:block; font-size:12.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
.cost-summary-amount { font-size:30px; font-weight:700; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.cost-summary-amount span { color:var(--brand-deep); }
.cost-summary-pill { padding:11px 19px; border-radius:999px; background:var(--brand-tint); color:var(--brand-deep); font-size:14px; font-weight:600; white-space:nowrap; }
@media (max-width:860px){ .cost-grid { grid-template-columns:minmax(0,1fr); } .cost-vs { display:none; } .cost-summary { grid-template-columns:1fr; text-align:center; gap:18px; justify-items:center; } }
@media (max-width:860px){
  .cost-col { padding:20px 16px; overflow:hidden; }
  .cost-row-label { flex:1 1 0; min-width:0; font-size:13px; }
  .cost-row-val { flex:0 0 auto; font-size:13px; font-weight:700; }
  .cost-name { font-size:20px; }
  .cost-csub { font-size:13px; margin-bottom:16px; }
  .cost-total { flex-wrap:wrap; gap:6px; }
  .cost-total-val { font-size:22px; }
  .cost-total-label { font-size:11px; }
  .cost-summary-amount { font-size:24px; }
  .cost-summary-pill { font-size:13px; padding:9px 14px; }
}