/* ============================================================
   03 · FEATURED SOLUTION  (copy + hub-and-spoke "Nexora Connect"
   diagram rendered as a dark panel on the white section)
   ============================================================ */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,5vw,68px);align-items:center;padding:clamp(72px,9vw,116px) 0}

.feat-copy h2{max-width:14ch;color:var(--ink900)}
.feat-copy p{color:var(--ink500)}

/* checklist */
.ticks{list-style:none;margin:26px 0 34px;display:flex;flex-direction:column;gap:13px}
.ticks li{position:relative;padding-left:24px;color:var(--ink700);
  font-size:clamp(13.5px,1.3vw,15px);line-height:1.5}
.ticks li::before{content:'';position:absolute;left:0;top:.45em;width:7px;height:7px;
  background:var(--navy);transform:rotate(45deg)}

/* diagram panel */
.diagram{position:relative;aspect-ratio:680/620;background:var(--deep);
  border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.dlines{position:absolute;inset:0;width:100%;height:100%}
.dgrid line{stroke-width:1}

/* orbiting nodes */
.dnode{position:absolute;translate:-50% -50%;display:inline-flex;align-items:center;gap:7px;
  background:var(--ink);border:1px solid var(--onblue);border-radius:3px;padding:7px 11px;
  font-family:'Geist Mono',monospace;font-size:clamp(8px,1vw,11px);letter-spacing:.1em;
  color:var(--dim);white-space:nowrap;
  transition:border-color .3s,color .3s,transform .3s var(--ease)}
.dnode i{width:5px;height:5px;border-radius:50%;background:var(--b300);display:block}
.diagram:hover .dnode{border-color:var(--b300);color:#fff}
.dnode:hover{transform:translate(-50%,-50%) scale(1.08)}

/* center hub */
.dhub{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;
  flex-direction:column;align-items:center;gap:9px;background:var(--b500);border-radius:5px;
  padding:clamp(12px,2vw,20px) clamp(16px,2.6vw,26px)}
.dhub .mk{width:clamp(18px,2.6vw,26px);height:auto;color:#fff}
.dhub b{font-family:'Geist Mono',monospace;font-size:clamp(8px,1vw,11px);letter-spacing:.1em;
  font-weight:500;color:#fff;white-space:nowrap}

@media(max-width:1100px){
  .feat{grid-template-columns:1fr;gap:44px}
}
@media(max-width:720px){
  .diagram{aspect-ratio:1/1}
}