/* Clients page specific styles */

:root{
  /* you already have these in common.css; using them here */
  /* --surface, --shadow-soft, --ink, --brand, --header-h, etc. */
  --deal-size: clamp(220px, 30vw, 420px);
}

/* 2-column grid for the hero */
.client-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  align-items:center;
  gap: clamp(18px, 3vw, 36px);
}
.client-copy{ z-index:1; }
.client-graphic{ z-index:1; justify-self:end; }

@media (max-width: 900px){
  .client-hero-grid{ grid-template-columns:1fr; }
  .client-graphic{ justify-self:center; }
}

/* ==== Futuristic “deal” graphic ==== */
.deal-orb{
  position:relative;
  width:var(--deal-size);
  height:var(--deal-size);
  border-radius:50%;
  background:
    radial-gradient(60% 60% at 50% 42%, #fff 0 30%, var(--surface) 60%, transparent 61%),
    linear-gradient(145deg, var(--surface), #ffffff);
  box-shadow: var(--shadow-soft);
  isolation:isolate;
  filter: drop-shadow(0 20px 30px rgba(15,23,42,.12));
  overflow:hidden;
}

/* soft grid + glow sweep */
.deal-orb::before{
  content:"";
  position:absolute; inset:-18%;
  background:
    radial-gradient(140px 140px at 60% 35%, rgba(14,107,168,.22), transparent 60%),
    repeating-conic-gradient(from 0deg, rgba(0,0,0,.045) 0 6deg, transparent 6deg 12deg);
  mix-blend-mode: soft-light;
  animation: orbRotate 22s linear infinite;
}
.deal-orb::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.4), rgba(255,255,255,.05) 35%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events:none;
}

/* parties chips */
.client-chip{
  position:absolute; top: 48%;
  transform: translateY(-50%);
  padding:10px 14px;
  border-radius:999px;
  background: var(--surface);
  color: var(--ink);
  font-weight:700;
  letter-spacing:.2px;
  box-shadow: var(--shadow-soft);
  user-select:none;
}
.client-chip.left  { left: 6%; }
.client-chip.right { right: 6%; }

/* connecting link (animated) */
.link{
  position:absolute; left:18%; right:18%; top:50%;
  height:3px; transform: translateY(-50%);
  background: linear-gradient(90deg,
    rgba(14,107,168,.1),
    rgba(14,107,168,.45),
    rgba(14,107,168,.1));
  filter: blur(.2px);
}
.link::before{
  content:"";
  position:absolute; inset:-8px 0;
  background: linear-gradient(90deg, transparent, rgba(14,107,168,.22), transparent);
  animation: linkSweep 2.8s linear infinite;
}

/* approval seal */
.seal{
  position:absolute; inset:0;
  display:grid; place-items:center;
}
.seal::before{
  content:"";
  width:96px; height:96px; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 40%, var(--surface) 75%);
  box-shadow: var(--shadow-soft), inset 0 0 20px rgba(14,107,168,.15);
  opacity:.98;
}
.tick{
  position:absolute; width:32px; height:16px; border-left:5px solid var(--brand); border-bottom:5px solid var(--brand);
  transform: rotate(-45deg) translate(6px, -2px);
  animation: tickPulse 2.6s ease-in-out infinite;
}

/* orbits for motion depth */
.orbit{
  position:absolute; inset:9%;
  border-radius:50%;
  border:2px dashed rgba(14,107,168,.28);
  mix-blend-mode: soft-light;
}
.o1{ animation: orbitSpin 18s linear infinite; }
.o2{ inset:16%; animation: orbitSpin 26s linear infinite reverse; }

/* animations */
@keyframes orbRotate{ to{ transform: rotate(360deg); } }
@keyframes linkSweep{
  0%{ transform: translateX(-80%); opacity:.8; }
  100%{ transform: translateX(80%);  opacity:1; }
}
@keyframes tickPulse{
  0%,100%{ transform: rotate(-45deg) translate(6px,-2px) scale(1);   opacity: .9; }
  50%    { transform: rotate(-45deg) translate(6px,-2px) scale(1.08); opacity: 1;  }
}
@keyframes orbitSpin{ to{ transform: rotate(360deg); } }

/* honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .deal-orb::before, .o1, .o2, .link::before, .tick{ animation:none !important; }
}