/* ============ Industry use-case / wireframe showcase ============ */
.uc-note{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:22px;
  padding:8px 15px;margin-top:22px}
.uc-note b{color:var(--blue);font-weight:500}

/* tabs */
.uc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.uc-tab{font:inherit;font-size:13px;letter-spacing:.02em;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:12px 18px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.uc-tab:hover{color:var(--ink);border-color:#3a4a63}
.uc-tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

.uc-panel{display:block}
.uc-panel[hidden]{display:none}
.uc-panel-top{display:grid;grid-template-columns:1.55fr 1fr;gap:46px;align-items:center}

/* blueprint stage */
.uc-stage{padding:36px;border:1px solid var(--line);border-radius:12px;min-height:360px;
  display:flex;justify-content:center;align-items:center;
  background-color:#0a0f18;
  background-image:radial-gradient(circle at 1px 1px,#16223a 1px,transparent 0);
  background-size:23px 23px}
.uc-annote h3{font-family:var(--font-display);font-size:clamp(20px,2.4vw,28px);font-weight:500;
  letter-spacing:-.02em;margin-bottom:8px}
.uc-annote .k{font-family:var(--font-display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:14px}
.uc-annote>p{color:var(--muted);margin-bottom:20px;line-height:1.7;font-size:15px}
.uc-feat{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.uc-feat li{position:relative;padding-left:24px;color:var(--ink);font-size:14.5px;line-height:1.45}
.uc-feat li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:1px;background:var(--brand)}

/* wireframe primitives */
.wf{width:100%;background:#0c1119;border:1px solid #2a3750;border-radius:10px;overflow:hidden;
  box-shadow:0 26px 60px #00000070}
.wf-desktop{max-width:560px}
.wf-phone{max-width:212px;margin:0 auto}
.wf-top{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #1b2536;background:#0e1521}
.wf-dot{width:9px;height:9px;border-radius:50%;background:#2c3a54;flex:none}
.wf-url{margin-left:14px;font-size:10px;color:#627490;background:#121b2b;border:1px solid #223049;
  border-radius:20px;padding:4px 14px;letter-spacing:.02em}
.wf-body{padding:16px;display:flex;flex-direction:column;gap:11px}
.wf-split{display:flex}
.wf-row{display:flex;gap:10px;align-items:stretch}
.blk{background:#152030;border:1px solid #24334c;border-radius:4px;flex:none}
.blk.grow{flex:1}
.blk.accent{background:#173163;border-color:#345fb0}
.blk.line{height:9px;border-radius:20px;background:#1a2740;border:0}
.blk.round{border-radius:50%}
.wf-tag{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#5f7398;margin:2px 0}
.wf-side{width:106px;border-right:1px solid #1b2536;padding:14px 12px;display:flex;flex-direction:column;
  gap:9px;flex:none;background:#0a0f18}
.wf-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.wf-tile{height:46px;background:#152030;border:1px solid #24334c;border-radius:5px}
.wf-tile.accent{background:#173163;border-color:#345fb0}

/* connected-system band */
.uc-system{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:center}
.uc-system h2{margin-bottom:18px}
.uc-system p{color:var(--muted);line-height:1.75;max-width:52ch}
.uc-system .pull-quote{margin-top:22px}
.uc-diagram{aspect-ratio:1;width:100%;max-width:420px;justify-self:center;position:relative}
.uc-diagram svg{width:100%;height:100%;overflow:visible}
.uc-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1;
  border-radius:50%;border:1px solid #345fb0;background:#12295a;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;box-shadow:0 0 60px #3263dc33}
.uc-core b{font-family:var(--font-display);font-size:13px;letter-spacing:.02em;color:#fff}
.uc-core small{font-size:8px;letter-spacing:.1em;color:#9db6f0;margin-top:5px}
.uc-node{position:absolute;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.04em;
  background:#101a2a;border:1px solid #33456a;color:#cbd7ec;border-radius:22px;padding:9px 14px;white-space:nowrap}
.uc-n1{left:50%;top:6%}.uc-n2{left:94%;top:50%}.uc-n3{left:50%;top:94%}.uc-n4{left:6%;top:50%}

/* module chips */
.uc-modules{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.uc-modules span{font-size:13px;color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:22px;padding:9px 15px}

@media(max-width:900px){
  .uc-panel-top{grid-template-columns:1fr;gap:26px}
  .uc-stage{padding:24px;min-height:0}
  .uc-system{grid-template-columns:1fr;gap:34px}
  .uc-diagram{max-width:340px}
}

/* Fix: allow grid tracks to shrink below content on small screens (prevents mobile overflow) */
.uc-panel-top{min-width:0}
.uc-panel-top>*{min-width:0}
.uc-stage{overflow:hidden}

/* Fix: keep connected-diagram nodes inside the viewport on small screens */
@media(max-width:560px){
  .uc-node{font-size:10px;padding:7px 10px}
  .uc-diagram .uc-n2{left:87%}
  .uc-diagram .uc-n4{left:13%}
}