/* =========================================================
   solutions.css — product application architecture diagrams + tabs
   Used by: index.html
   ========================================================= */

/* ---------- product diagram ---------- */
.diagram-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
.diagram-box{
  background:#fff;border:2px solid var(--blue-800);border-radius:10px;padding:16px 18px;text-align:center;
  min-width:132px;font-weight:700;font-size:13px;color:var(--blue-800);
}
.diagram-box span{display:block;font-size:11px;font-weight:500;color:var(--gray-400);margin-top:4px;}
.diagram-box.orange{border-color:var(--orange);color:var(--orange-dark);}
.diagram-box.green{border-color:var(--green);color:var(--green);}
.diagram-arrow{font-size:20px;color:var(--gray-400);}
.diagram-group{margin-top:40px;}
.diagram-group:first-child{margin-top:0;}
.diagram-group-title{font-size:15.5px;font-weight:800;color:var(--blue-800);text-align:center;margin:0 0 14px;}

/* ---------- solution tabs ---------- */
.solution-tabs{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap;justify-content:center;}
.solution-tab-btn{
  background:#fff;border:1px solid #dbe1ea;color:var(--blue-800);
  padding:9px 20px;border-radius:20px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.2s;
}
.solution-tab-btn:hover{border-color:var(--blue-700);}
.solution-tab-btn.active{background:var(--orange);color:#fff;border-color:var(--orange);}
.solution-tab-panel{display:none;}
.solution-tab-panel.active{display:block;}