/* ==========================================================================
   Connectors hero — kicker + big title + subtitle + two buttons, with the
   site's Connectors diagram (coworkers -> leapforce CONNECT hub -> governed
   CLI -> fan-out to connector tiles) forked to the brand blue gradient
   (#0036FA -> #4E87FC). Cool #f4f7fd band. Site scroll-reveal motion.
   ========================================================================== */
.pg-cnh { background-color:#f4f7fd; padding:104px 0 116px; overflow:hidden; }
.pg-cnh__inner { max-width:1280px; margin:0 auto; padding:0 80px; }

.pg-cnh__kicker {
  font-family:"Cabin",sans-serif; font-weight:600; font-size:14px; line-height:16px;
  letter-spacing:0.08em; text-transform:uppercase;
  background:linear-gradient(90deg,#0036fa,#4e87fc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pg-cnh__title {
  font-family:"Cabin",sans-serif; font-weight:700; font-size:60px; line-height:1.06;
  letter-spacing:-0.01em; color:#12140f; margin-top:22px;
}
.pg-cnh__subtitle {
  font-family:"Cabin",sans-serif; font-weight:400; font-size:18px; line-height:29px;
  color:#4d4d4d; max-width:620px; margin-top:22px;
}

.pg-cnh__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.pg-cnh__btn {
  display:inline-flex; align-items:center; justify-content:center; padding:14px 26px;
  border-radius:10px; font-family:"Cabin",sans-serif; font-weight:600; font-size:15px; line-height:1;
  text-decoration:none;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.pg-cnh__btn--solid {
  color:#fff; background-image:linear-gradient(90deg,#0036fa,#4e87fc);
  box-shadow:0 10px 24px rgba(0,54,250,0.24);
}
.pg-cnh__btn--solid:hover { transform:translateY(-1px); box-shadow:0 16px 30px rgba(0,54,250,0.3); }
.pg-cnh__btn--outline { color:#12140f; background-color:#fff; border:1px solid #cfd6e6; }
.pg-cnh__btn--outline:hover { border-color:#0036fa; color:#0036fa; }

.pg-cnh__panel {
  margin-top:64px; background-color:#fff; border:1px solid #e4e9f4; border-radius:16px;
  box-shadow:0 24px 48px rgba(16,24,40,0.07); padding:56px 40px 56px;
  display:flex; flex-direction:column; align-items:center;
  opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease;
}
.pg-cnh__panel.is-in { opacity:1; transform:none; }

.pg-cnh__coworkers {
  border:1px solid #e4e9f4; border-radius:6px; padding:12px 18px; text-align:center;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px; line-height:15px;
  letter-spacing:0.08em; text-transform:uppercase; color:#8a8fa0; background-color:#f7f9fd;
}
.pg-cnh__wire { width:1px; background-color:#cfd6e6; }
.pg-cnh__wire--a { height:26px; }
.pg-cnh__wire--b { height:24px; }

.pg-cnh__hub {
  width:108px; height:108px; border-radius:20px;
  background-image:linear-gradient(135deg,#0036fa,#4e87fc);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 20px 40px rgba(0,54,250,0.28);
}
.pg-cnh__hub-mark { font-family:"Cabin",sans-serif; font-weight:700; font-size:19px; line-height:1; color:#fff; letter-spacing:-0.01em; }
.pg-cnh__hub-sub { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:9px; letter-spacing:0.14em; color:rgba(255,255,255,0.78); }

.pg-cnh__cli {
  width:100%; max-width:640px; background-color:#0c1424; border-radius:8px; padding:17px 24px;
  text-align:center; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:14px;
  line-height:20px; color:#cdd6ea; white-space:nowrap; overflow-x:auto;
}
.pg-cnh__flag { color:#6fa0ff; }

.pg-cnh__fanout { width:100%; position:relative; margin-top:22px; padding-top:34px; }
.pg-cnh__bus { position:absolute; top:33px; left:calc(100% / 18); right:calc(100% / 18); height:1px; background-color:#d8deea; }
.pg-cnh__bus-drop { position:absolute; top:0; left:50%; width:1px; height:34px; background-color:#cfd6e6; }
.pg-cnh__bus-node { position:absolute; top:30px; width:7px; height:7px; border-radius:50%; background-color:#0036fa; transform:translateX(-50%); }

.pg-cnh__tiles { display:grid; grid-template-columns:repeat(9,1fr); }
.pg-cnh__tile {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:30px;
  opacity:0; transform:translateY(14px); transition:opacity 0.5s ease, transform 0.5s ease;
}
.pg-cnh__panel.is-in .pg-cnh__tile { opacity:1; transform:none; }
.pg-cnh__panel.is-in .pg-cnh__tile:nth-child(1) { transition-delay:0.10s; }
.pg-cnh__panel.is-in .pg-cnh__tile:nth-child(2) { transition-delay:0.16s; }
.pg-cnh__panel.is-in .pg-cnh__tile:nth-child(3) { transition-delay:0.22s; }
.pg-cnh__panel.is-in .pg-cnh__tile:nth-child(4) { transition-delay:0.28s; }
.pg-cnh__panel.is-in .pg-cnh__tile:nth-child(5) { transition-delay:0.34s; }
.pg-cnh__panel.is-in .pg-cnh__tile:nth-child(6) { transition-delay:0.40s; }
.pg-cnh__panel.is-in .pg-cnh__tile:nth-child(7) { transition-delay:0.46s; }
.pg-cnh__panel.is-in .pg-cnh__tile:nth-child(8) { transition-delay:0.52s; }
.pg-cnh__panel.is-in .pg-cnh__tile:nth-child(9) { transition-delay:0.58s; }
.pg-cnh__tile::before { content:""; position:absolute; top:0; left:50%; width:1px; height:30px; background-color:#d8deea; }

.pg-cnh__logo {
  width:64px; height:64px; border:1px solid #e4e9f4; border-radius:12px; background-color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(16,24,40,0.04);
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pg-cnh__tile:hover .pg-cnh__logo { transform:translateY(-3px); border-color:#b9c8f5; box-shadow:0 12px 22px rgba(0,54,250,0.14); }
.pg-cnh__logo img { width:32px; height:32px; object-fit:contain; }
.pg-cnh__logo--api {
  border-style:dashed; border-color:#9fb4f2; background-color:#eef3ff;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12px; font-weight:700;
  letter-spacing:0.06em; color:#0036fa;
}
.pg-cnh__tile-label { font-family:"Cabin",sans-serif; font-size:13px; line-height:17px; text-align:center; color:#4d4d4d; }

.pg-cnh__copy { opacity:0; transform:translateY(16px); transition:opacity 0.6s ease, transform 0.6s ease; }
.pg-cnh__copy.is-in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .pg-cnh__copy, .pg-cnh__panel, .pg-cnh__tile { opacity:1; transform:none; transition:none; }
}

@media (max-width:1040px) {
  .pg-cnh { padding:80px 0 90px; }
  .pg-cnh__inner { padding:0 24px; }
  .pg-cnh__title { font-size:42px; }
  .pg-cnh__panel { padding:44px 20px 40px; }
  .pg-cnh__tiles { grid-template-columns:repeat(3,1fr); gap:28px 0; }
  .pg-cnh__bus, .pg-cnh__bus-drop, .pg-cnh__bus-node, .pg-cnh__tile::before { display:none; }
  .pg-cnh__fanout { padding-top:8px; }
  .pg-cnh__cli { font-size:12px; text-align:left; }
}
@media (max-width:600px) {
  .pg-cnh__title { font-size:34px; }
  .pg-cnh__subtitle { font-size:16px; line-height:27px; }
  .pg-cnh__tiles { grid-template-columns:repeat(2,1fr); }
}