/* BigCommerce — enterprise B2B / integration architecture */
.bc-hero-map {
  min-height:570px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    radial-gradient(circle at 72% 22%,rgba(22,184,173,.11),transparent 28%),
    #fff;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.bc-topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:3px 3px 15px;
  color:#7f8b96;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.bc-architecture {
  min-height:520px;
  padding:20px;
  border:1px solid #e0e7ea;
  border-radius:19px;
  background:#f7fafb;
  position:relative;
}
.bc-core {
  width:170px;height:170px;
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;place-items:center;text-align:center;
  color:#fff;
  background:linear-gradient(145deg,#0c1f34,#0a9189);
  box-shadow:0 20px 50px rgba(15,31,55,.18),0 0 0 18px rgba(22,184,173,.06);
}
.bc-core strong {display:block;font-size:16px}
.bc-core span {display:block;margin-top:5px;color:#8bece5;font-size:9px;text-transform:uppercase;letter-spacing:.11em;font-weight:900}
.bc-node {
  position:absolute;
  width:145px;
  min-height:78px;
  padding:13px;
  border:1px solid #dfe7ea;
  border-radius:14px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,31,55,.08);
}
.bc-node b {display:block;font-size:12px}
.bc-node small {display:block;color:var(--muted);font-size:9px;line-height:1.4;margin-top:4px}
.bc-node::after {
  content:"";
  position:absolute;
  height:1px;
  background:#9edbd6;
  width:72px;
}
.bc-node.n1{left:26px;top:54px}
.bc-node.n1::after{right:-72px;top:50%;transform:rotate(22deg);transform-origin:left}
.bc-node.n2{right:26px;top:54px}
.bc-node.n2::after{left:-72px;top:50%;transform:rotate(-22deg);transform-origin:right}
.bc-node.n3{left:16px;bottom:60px}
.bc-node.n3::after{right:-72px;top:34%;transform:rotate(-28deg);transform-origin:left}
.bc-node.n4{right:16px;bottom:60px}
.bc-node.n4::after{left:-72px;top:34%;transform:rotate(28deg);transform-origin:right}
.bc-node.n5{left:50%;bottom:14px;transform:translateX(-50%)}
.bc-node.n5::after{display:none}

.bc-fit {
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:50px;
  align-items:start;
}
.bc-fit-copy {position:sticky;top:118px}
.bc-fit-copy h2 {
  margin:14px 0 18px;
  font-size:clamp(40px,4.7vw,62px);
  line-height:1;
  letter-spacing:-.055em;
}
.bc-fit-copy p {color:var(--muted);line-height:1.7}
.bc-fit-list {border-top:1px solid var(--line)}
.bc-fit-row {
  display:grid;
  grid-template-columns:72px 1fr;
  gap:16px;
  padding:27px 0;
  border-bottom:1px solid var(--line);
}
.bc-fit-row span {
  color:var(--brand-dark);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.bc-fit-row h3 {margin:0 0 7px;font-size:20px;letter-spacing:-.025em}
.bc-fit-row p {margin:0;color:var(--muted);font-size:13px;line-height:1.65}

.bc-b2b-lanes {
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  overflow:hidden;
}
.bc-b2b-lanes article {
  min-height:340px;
  padding:26px 20px;
  background:rgba(7,43,56,.30);
}
.bc-b2b-lanes span {
  color:#8bece5;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.bc-b2b-lanes h3 {margin:62px 0 9px;font-size:18px}
.bc-b2b-lanes p {margin:0;color:rgba(255,255,255,.7);font-size:12px;line-height:1.62}

.bc-cap-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}
.bc-cap {
  min-height:300px;
  padding:27px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.bc-cap.big {grid-column:span 6}
.bc-cap.small {grid-column:span 4}
.bc-cap.dark {
  background:#0d1727;
  color:#fff;
  border-color:#0d1727;
}
.bc-cap span {
  color:var(--brand-dark);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.bc-cap.dark span {color:#74e5dd}
.bc-cap h3 {margin:50px 0 9px;font-size:20px;letter-spacing:-.03em}
.bc-cap p {margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.bc-cap.dark p {color:#a9b9c3}

.integration-map {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:46px;
  align-items:center;
}
.integration-copy h2 {
  margin:14px 0 18px;
  font-size:clamp(40px,4.7vw,61px);
  line-height:1;
  letter-spacing:-.055em;
}
.integration-copy p {color:var(--muted);line-height:1.7}
.integration-stack {
  padding:28px;
  border-radius:22px;
  background:#0d1727;
  color:#fff;
}
.integration-row {
  display:grid;
  grid-template-columns:1fr 52px 1fr;
  gap:10px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.integration-row:last-child {border-bottom:0}
.integration-row div {
  padding:12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.04);
}
.integration-row b {display:block;font-size:11px}
.integration-row span {display:block;color:#8096a3;font-size:9px;margin-top:3px}
.integration-row i {
  font-style:normal;
  color:#75e4dd;
  text-align:center;
  font-weight:900;
}

.bc-migration {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.bc-migrate-card {
  padding:28px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.bc-migrate-card h3 {font-size:23px;margin:16px 0 12px;letter-spacing:-.035em}
.bc-migrate-card p {color:var(--muted);font-size:13px;line-height:1.65}
.bc-migrate-card ul {list-style:none;padding:0;margin:20px 0 0}
.bc-migrate-card li {padding:10px 0;border-top:1px solid var(--line);font-size:12px}
.bc-migrate-card li::before {content:"→";color:var(--brand-dark);margin-right:8px}

.bc-compare {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.bc-compare-card {
  padding:30px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
}
.bc-compare-card.active {
  border-color:#bce8e4;
  background:#f8fdfc;
}
.bc-compare-card .label {
  color:var(--brand-dark);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.bc-compare-card h3 {font-size:26px;margin:16px 0 11px;letter-spacing:-.035em}
.bc-compare-card p {color:var(--muted);line-height:1.65}
.bc-compare-card ul {list-style:none;padding:0;margin:20px 0 0}
.bc-compare-card li {padding:10px 0;border-top:1px solid var(--line);font-size:12px;color:#4f5d6b}

@media(max-width:1040px){
  .bc-fit,.integration-map{grid-template-columns:1fr}
  .bc-fit-copy{position:static}
  .bc-b2b-lanes{grid-template-columns:1fr 1fr}
  .bc-cap.big,.bc-cap.small{grid-column:span 6}
}
@media(max-width:680px){
  .bc-architecture{min-height:620px}
  .bc-core{width:145px;height:145px}
  .bc-node{width:120px}
  .bc-node::after{display:none}
  .bc-node.n1{left:8px;top:55px}
  .bc-node.n2{right:8px;top:55px}
  .bc-node.n3{left:8px;bottom:100px}
  .bc-node.n4{right:8px;bottom:100px}
  .bc-node.n5{bottom:14px}
  .bc-b2b-lanes,.bc-migration,.bc-compare{grid-template-columns:1fr}
  .bc-cap-grid{grid-template-columns:1fr}
  .bc-cap.big,.bc-cap.small{grid-column:auto}
  .integration-row{grid-template-columns:1fr 34px 1fr}
}