/* ============ CODE BINARY — Product page additions ============ */

/* active nav state */
.nav-links a.is-here{color:var(--tx);}
.nav-links a.is-here::after{right:0;}

/* breadcrumb (mirrors team.css so the page is self contained) */
.crumb{
  display:flex;align-items:center;gap:8px;margin-bottom:22px;
  font-family:var(--fm);font-size:11.5px;color:var(--mu2);letter-spacing:.04em;
}
.crumb a{color:var(--mu2);}
.crumb a:hover{color:var(--cy);}
.crumb i{font-style:normal;color:rgba(79,230,245,.5);}
.crumb b{color:var(--mu);font-weight:500;}

/* ---------- product hero ---------- */
.phero{position:relative;padding:74px 0 88px;overflow:hidden;}
.phero-bg{position:absolute;inset:0;pointer-events:none;}
.orb-pc{width:620px;height:620px;top:-220px;left:-180px;background:radial-gradient(circle,rgba(38,180,215,.3),transparent 68%);}
.orb-pv{width:700px;height:700px;top:-160px;right:-260px;background:radial-gradient(circle,rgba(120,80,230,.28),transparent 68%);}
.phero-in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;}
.phero-copy h1{font-size:54px;line-height:1.06;font-weight:700;margin-bottom:24px;letter-spacing:-.035em;}
.phero-copy .lede{max-width:580px;}
.phero-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.phero-meta li{
  display:flex;flex-direction:column;gap:3px;padding:12px 18px;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);
}
.phero-meta b{font-family:var(--fd);font-size:14.5px;font-weight:600;color:var(--tx);}
.phero-meta i{font-style:normal;font-size:11.5px;color:var(--mu2);letter-spacing:.02em;}

/* ---------- pillar row ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pil{
  position:relative;padding:28px 24px 26px;border:1px solid var(--line);
  border-radius:var(--rad);background:linear-gradient(170deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  transition:border-color .25s ease,transform .25s ease;
}
.pil:hover{border-color:rgba(79,230,245,.34);transform:translateY(-3px);}
.pil-n{
  display:block;font-family:var(--fm);font-size:11px;letter-spacing:.2em;
  color:var(--cy);margin-bottom:16px;
}
.pil h3{font-size:18px;margin-bottom:10px;line-height:1.25;}
.pil p{font-size:13.8px;color:var(--mu);line-height:1.62;}

/* ---------- alternating detail blocks ---------- */
.dsplit{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;}
.dsplit + .dsplit{margin-top:104px;}
.dsplit.flip .dsplit-copy{order:2;}
.dsplit-copy h2{font-size:40px;margin-bottom:18px;letter-spacing:-.03em;}
.dsplit-copy .sub{color:var(--mu);font-size:16.6px;line-height:1.72;}
.dsplit-visual{position:relative;display:flex;justify-content:center;}
.dsplit-visual::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,230,245,.12),transparent 66%);filter:blur(40px);
}

/* ---------- orchestration board ---------- */
.orch{
  position:relative;width:100%;max-width:470px;padding:24px 22px 22px;
  border:1px solid var(--line);border-radius:20px;background:var(--panel);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.orch-head{
  display:flex;align-items:center;gap:10px;padding-bottom:16px;
  border-bottom:1px solid var(--line2);margin-bottom:18px;
}
.orch-head span{
  font-family:var(--fd);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mu2);
}
.orch-head b{
  margin-left:auto;font-family:var(--fm);font-size:10.5px;color:var(--cy);
  border:1px solid rgba(79,230,245,.26);border-radius:99px;padding:3px 10px;font-weight:500;
}
.orch-req{
  font-size:13.6px;color:var(--tx);line-height:1.55;background:rgba(79,230,245,.07);
  border:1px solid rgba(79,230,245,.2);border-radius:14px;padding:13px 15px;margin-bottom:8px;
}
.orch-note{font-size:11.5px;color:var(--mu2);margin-bottom:18px;}
.orch-tracks{display:flex;flex-direction:column;gap:10px;}
.orch-tracks li{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:13px;
  border:1px solid var(--line2);background:rgba(255,255,255,.028);
}
.orch-tracks .tag{flex:none;}
.orch-tracks em{font-style:normal;flex:1;font-size:12.8px;color:var(--mu);line-height:1.4;}
.orch-tracks b{font-size:9.8px;font-weight:600;flex:none;letter-spacing:.06em;text-transform:uppercase;}
.st-done{color:#58d996;}
.st-run{color:var(--cy);}
.st-hold{color:#ffce94;}
.orch-foot{
  display:flex;justify-content:space-between;align-items:center;margin-top:18px;
  padding-top:15px;border-top:1px solid var(--line2);
  font-size:11.3px;color:var(--mu2);
}
.orch-foot b{font-family:var(--fd);font-size:11.3px;color:var(--tx);font-weight:600;}

/* ---------- approval card ---------- */
.apv{
  position:relative;width:100%;max-width:400px;padding:22px;
  border:1px solid rgba(79,230,245,.26);border-radius:20px;background:var(--panel2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9),0 0 70px -40px rgba(79,230,245,.5);
}
.apv-top{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.apv-mark{
  display:block;width:36px;height:36px;border-radius:11px;overflow:hidden;flex:none;
  border:1px solid rgba(120,200,235,.3);background:#05070d;
}
.apv-mark img{width:100%;height:100%;object-fit:contain;}
.apv-top b{font-family:var(--fd);font-size:14.5px;}
.apv-top i{font-style:normal;display:block;font-size:10.5px;color:var(--mu2);}
.apv-q{font-size:13.8px;color:var(--tx);line-height:1.6;margin-bottom:14px;}
.apv-item{
  display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:13px;
  border:1px solid var(--line);background:rgba(0,0,0,.28);margin-bottom:14px;
}
.apv-ic{
  width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-family:var(--fm);font-size:9.5px;letter-spacing:.06em;color:#04070d;font-weight:700;
  background:linear-gradient(135deg,var(--cy),var(--vi));
}
.apv-item>span.apv-meta{display:flex;flex-direction:column;min-width:0;flex:1;}
.apv-item b{font-size:12.4px;font-weight:600;}
.apv-item i{font-style:normal;font-size:10.4px;color:var(--mu2);}
.apv-btns{display:flex;gap:9px;}
.apv-btns b,.apv-btns em{
  flex:1;text-align:center;font-family:var(--fd);font-size:12.5px;font-weight:600;
  padding:11px;border-radius:11px;font-style:normal;
}
.apv-btns b{background:linear-gradient(135deg,var(--cy),var(--vi));color:#04070d;}
.apv-btns em{border:1px solid var(--line);color:var(--mu);}
.apv-tail{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line2);
  font-size:11.3px;color:var(--mu2);line-height:1.5;
}

/* ---------- deliverables vault ---------- */
.vault{
  width:100%;max-width:450px;padding:22px;border:1px solid var(--line);
  border-radius:20px;background:var(--panel);position:relative;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.vault-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.vault-head strong{font-family:var(--fd);font-size:14.5px;font-weight:600;}
.vault-head span{
  font-family:var(--fm);font-size:10px;color:var(--mu2);border:1px solid var(--line);
  border-radius:99px;padding:3px 10px;
}
.vault ul{display:flex;flex-direction:column;gap:9px;}
.vault li{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--line2);background:rgba(255,255,255,.026);
}
.v-ic{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-family:var(--fm);font-size:8.6px;font-weight:700;letter-spacing:.04em;
  border:1px solid var(--line);color:var(--mu);background:rgba(0,0,0,.3);
}
.v-ic.on{color:var(--cy);border-color:rgba(79,230,245,.3);}
.vault li>span.v-meta{display:flex;flex-direction:column;flex:1;min-width:0;}
.vault li b{font-size:12.4px;font-weight:600;}
.vault li i{font-style:normal;font-size:10.4px;color:var(--mu2);}
.v-state{
  display:block;font-family:var(--fd);font-size:9.4px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;flex:none;
  background:rgba(72,224,138,.14);color:#7fe3aa;border:1px solid rgba(72,224,138,.26);
}
.v-state.wait{background:rgba(255,180,92,.12);color:#ffce94;border-color:rgba(255,180,92,.26);}
.vault-foot{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line2);
  font-size:11.4px;color:var(--mu2);
}

/* ---------- surfaces ---------- */
.surf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.surf{
  padding:30px 26px;border:1px solid var(--line);border-radius:var(--rad);
  background:rgba(255,255,255,.022);transition:border-color .25s ease,transform .25s ease;
}
.surf:hover{border-color:rgba(155,123,255,.38);transform:translateY(-3px);}
.surf h3{font-size:18.5px;margin-bottom:10px;}
.surf p{font-size:14px;color:var(--mu);line-height:1.62;}
.surf-ic{
  display:block;width:44px;height:44px;border-radius:13px;margin-bottom:18px;position:relative;
  border:1px solid var(--line);background:rgba(0,0,0,.28);
}
.surf-ic::after{content:"";position:absolute;inset:12px;background:linear-gradient(135deg,var(--cy),var(--vi));}
.ic-chat::after{border-radius:5px;clip-path:polygon(0 0,100% 0,100% 72%,42% 72%,22% 100%,22% 72%,0 72%);}
.ic-phone::after{border-radius:4px;clip-path:polygon(24% 0,76% 0,76% 100%,24% 100%);}
.ic-hand::after{border-radius:50%;clip-path:polygon(50% 0,64% 14%,86% 14%,86% 36%,100% 50%,86% 64%,86% 86%,64% 86%,50% 100%,36% 86%,14% 86%,14% 64%,0 50%,14% 36%,14% 14%,36% 14%);}

/* ---------- read next ---------- */
.next-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.nx{
  display:block;padding:34px 30px;border:1px solid var(--line);border-radius:var(--rad);
  background:linear-gradient(150deg,rgba(79,230,245,.055),rgba(155,123,255,.045));
  transition:border-color .25s ease,transform .25s ease;
}
.nx:hover{border-color:rgba(79,230,245,.4);transform:translateY(-3px);}
.nx span{
  font-family:var(--fd);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cy);display:block;margin-bottom:12px;
}
.nx h3{font-size:24px;margin-bottom:10px;}
.nx p{font-size:14.2px;color:var(--mu);line-height:1.62;}
.nx b{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--fd);font-size:14px;font-weight:600;color:var(--tx);
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .phero-in{grid-template-columns:1fr;gap:52px;}
  .phero-copy h1{font-size:44px;}
  .pillars{grid-template-columns:repeat(2,1fr);}
  .dsplit{grid-template-columns:1fr;gap:44px;}
  .dsplit.flip .dsplit-copy{order:0;}
  .dsplit + .dsplit{margin-top:80px;}
  .dsplit-copy h2{font-size:34px;}
  .surf-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .phero{padding:52px 0 64px;}
  .phero-copy h1{font-size:34px;letter-spacing:-.02em;}
  .phero-meta{gap:10px;}
  .phero-meta li{flex:1 1 100%;}
  .pillars{grid-template-columns:1fr;}
  .dsplit-copy h2{font-size:29px;}
  .dsplit-visual::before{width:300px;height:300px;}
  .next-grid{grid-template-columns:1fr;}
  .nx{padding:28px 22px;}
  .nx h3{font-size:21px;}
  .orch,.apv,.vault{max-width:100%;}
  .crumb{font-size:10.5px;}
}