/* ════════════════════════════════════════════════════════════════════════
   BidClarity Loop Flow — visualizes the 7-stage Find → Win → Deliver →
   Learn flywheel. Used on index.html "Closes the full loop" section.
   Reuses .tag-* and .section-header from customers.css (Dispatch 1).
   ════════════════════════════════════════════════════════════════════════ */

.loop-flow-section{position:relative;z-index:1;background:var(--navy);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:80px 24px;}
.loop-flow-inner{max-width:1200px;margin:0 auto;}
.loop-flow-header{text-align:center;margin-bottom:48px;}
.loop-flow-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px;font-weight:700;}
.loop-flow-h{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(26px,3.6vw,42px);color:var(--text-primary);line-height:1.15;letter-spacing:-0.025em;margin-bottom:14px;}
.loop-flow-h em{font-style:normal;color:var(--teal);}
.loop-flow-sub{font-size:16px;color:var(--text-secondary);line-height:1.7;max-width:640px;margin:0 auto;}

/* The flow track (horizontal on desktop, vertical on mobile) */
.loop-flow-track{display:grid;grid-template-columns:repeat(7,1fr);gap:0;position:relative;align-items:stretch;}
.loop-flow-stage{position:relative;display:flex;flex-direction:column;padding:24px 14px 22px;background:var(--navy-mid);border:1px solid var(--border);border-right:none;transition:background var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);}
.loop-flow-stage:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px;}
.loop-flow-stage:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px;border-right:1px solid var(--border);}
.loop-flow-stage:hover{background:var(--navy-card);transform:translateY(-2px);z-index:2;}

/* Arrow between stages (chevron embedded between adjacent stages) */
.loop-flow-stage:not(:last-child)::after{
  content:'';position:absolute;top:50%;right:-9px;width:18px;height:18px;
  background:var(--navy-mid);border-top:1px solid var(--border);border-right:1px solid var(--border);
  transform:translateY(-50%) rotate(45deg);z-index:3;
}
.loop-flow-stage:hover:not(:last-child)::after{background:var(--navy-card);}

.loop-flow-stage-num{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;color:var(--text-muted);margin-bottom:8px;font-weight:700;}
.loop-flow-stage-label{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;color:var(--text-primary);letter-spacing:-0.015em;margin-bottom:8px;line-height:1.15;}
.loop-flow-stage-desc{font-size:12px;color:var(--text-secondary);line-height:1.55;margin-bottom:14px;flex:1;}
.loop-flow-stage-tag{align-self:flex-start;}

/* The flywheel loop arrow (curves from LEARN back to FIND) */
.loop-flow-cycle{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:24px;padding:14px 18px;background:rgba(0,212,170,0.05);border:1px solid var(--teal-border);border-radius:100px;width:fit-content;margin-left:auto;margin-right:auto;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;color:var(--teal);text-transform:uppercase;font-weight:700;}
.loop-flow-cycle::before{content:'↻';font-size:18px;}

/* Responsive: stack vertically on smaller screens */
@media(max-width:1100px){
  .loop-flow-track{grid-template-columns:repeat(4,1fr);}
  .loop-flow-stage{border-right:1px solid var(--border);border-radius:0;}
  .loop-flow-stage:nth-child(-n+4):first-child{border-top-left-radius:14px;}
  .loop-flow-stage:nth-child(4):not(:last-child){border-top-right-radius:14px;}
  .loop-flow-stage:nth-child(5){border-bottom-left-radius:14px;border-top:none;}
  .loop-flow-stage:last-child{border-bottom-right-radius:14px;}
  /* Hide between-stage arrows on smaller layouts (they don't align with grid wraps) */
  .loop-flow-stage::after{display:none;}
}
@media(max-width:760px){
  .loop-flow-track{grid-template-columns:1fr 1fr;}
  .loop-flow-stage{border-radius:0!important;}
  .loop-flow-stage:first-child{border-top-left-radius:14px!important;}
  .loop-flow-stage:nth-child(2){border-top-right-radius:14px!important;}
  .loop-flow-stage:nth-last-child(-n+2):nth-child(odd){border-bottom-left-radius:14px!important;}
  .loop-flow-stage:last-child{border-bottom-right-radius:14px!important;}
}
@media(max-width:480px){
  .loop-flow-track{grid-template-columns:1fr;}
  .loop-flow-stage{border-radius:0!important;}
  .loop-flow-stage:first-child{border-top-left-radius:14px!important;border-top-right-radius:14px!important;}
  .loop-flow-stage:last-child{border-bottom-left-radius:14px!important;border-bottom-right-radius:14px!important;}
}