.copilot-hero{padding:2.2rem 0 2.5rem;background:#f4f6f8}
.copilot-shell{display:grid;grid-template-columns:1fr 300px;gap:0;background:#fff;border:1px solid #e2e8f0;min-height:420px}
.main-pane{padding:1.6rem 1.5rem}
.main-pane h1{font-size:clamp(1.25rem,3vw,1.7rem);font-weight:800;line-height:1.35;margin-bottom:.75rem}
.main-pane h1 em{font-style:normal;color:#6366f1}
.main-desc{color:#5a6478;font-size:.93rem;margin-bottom:1.1rem;max-width:520px}
.main-btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.15rem}
.main-shot{border:1px solid #e2e8f0;padding:.4rem;margin-top:1rem}
.main-shot img{width:100%}
.side-pane{background:#1a1f2e;color:#e2e8f0;padding:1rem;border-left:1px solid #2d3348;display:flex;flex-direction:column}
.side-head{font-size:.72rem;font-weight:800;color:#a855f7;letter-spacing:.08em;margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid #2d3348}
.suggest{display:flex;flex-direction:column;gap:.5rem;flex:1}
.chip{background:#252b3d;border:1px solid #3d4560;padding:.65rem .75rem;font-size:.78rem;border-radius:6px;line-height:1.5}
.chip b{display:block;color:#a855f7;font-size:.68rem;margin-bottom:.25rem}
.chip.ghost{opacity:.7;border-style:dashed}
.side-action{margin-top:.8rem;font-size:.72rem;color:#9aa3b8;text-align:center}

.skill-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.skill{background:#fff;border:1px solid #e2e8f0;padding:1.15rem;border-radius:8px}
.skill:nth-child(1){border-top:4px solid #6366f1}
.skill:nth-child(2){border-top:4px solid #a855f7}
.skill:nth-child(3){border-top:4px solid #3ecf8e}
.skill .tag{font-size:.7rem;font-weight:800;color:#6366f1;margin-bottom:.3rem}
.skill h3{font-size:.95rem;margin-bottom:.4rem;font-weight:800}
.skill p{font-size:.86rem;color:#5a6478;line-height:1.6}

.flow{display:flex;max-width:720px;margin:0 auto;background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}
.flow-s{flex:1;padding:1.05rem .9rem;border-right:1px solid #e2e8f0}
.flow-s:last-child{border-right:none}
.flow-s strong{display:block;font-size:.72rem;color:#a855f7;margin-bottom:.3rem}
.flow-s h3{font-size:.88rem;font-weight:800;margin-bottom:.25rem}
.flow-s p{font-size:.8rem;color:#5a6478}

.ctx-dual{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ctx{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}
.ctx h3{padding:.5rem .95rem;background:#1a1f2e;color:#a855f7;font-size:.84rem;font-weight:800}
.ctx ul{padding:1rem 1.05rem}
.ctx li{font-size:.84rem;color:#5a6478;padding:.3rem 0;border-bottom:1px solid #f1f5f9}
.ctx li:last-child{border-bottom:none}

.ai-cta{background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;text-align:center;padding:2.5rem 1rem}
.ai-cta h2{font-size:clamp(1.15rem,3vw,1.4rem);margin-bottom:.4rem;font-weight:800}
.ai-cta p{margin-bottom:1.1rem;font-size:.9rem;opacity:.9}
.ai-cta .btn-ai{background:#1a1f2e}

@media(max-width:900px){
  .copilot-shell,.skill-row,.ctx-dual{grid-template-columns:1fr}
  .side-pane{border-left:none;border-top:1px solid #2d3348}
  .flow{flex-direction:column}
  .flow-s{border-right:none;border-bottom:1px solid #e2e8f0}
}
