.hex-diagram{max-width:960px;margin:40px auto;position:relative;font-family:'Poppins',sans-serif;}
.hex-center-wrap{display:flex;justify-content:center;margin-bottom:20px;}
.hex-center{width:220px;height:190px;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:#1ab69d;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;}
.hex-center h4{margin:0;font-size:19px;font-weight:700;line-height:1.3;font-family:'Spartan',sans-serif;color:#fff;}
.hex-center span{font-size:13px;color:#e8fff9;margin-top:6px;}
.hex-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.hex-item{display:flex;align-items:center;gap:0;cursor:pointer;margin-bottom:30px;}
.hex-columns .hex-col-right .hex-item{flex-direction:row-reverse;}
.hex-icon{width:84px;height:84px;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#ff9100;transition:transform .2s, background .2s;}
.hex-item:hover .hex-icon{transform:scale(1.08);background:#1ab69d;}
.hex-item.active .hex-icon{transform:scale(1.1);background:#1ab69d;}
.hex-label{background:#f0f4f5;padding:18px 24px;font-size:16px;font-weight:600;color:#181818;flex:1;clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%);margin-left:-18px;transition:background .2s, color .2s;font-family:'Poppins',sans-serif;}
.hex-col-right .hex-label{clip-path:polygon(10% 0,100% 0,100% 100%,10% 100%,0% 50%);margin-left:0;margin-right:-18px;}
.hex-item:hover .hex-label,.hex-item.active .hex-label{background:#1ab69d;color:#fff;}
.hex-detail-panel{margin-top:24px;background:#f5f9fa;border-radius:10px;padding:34px;display:none;border-left:5px solid #ff9100;}
.hex-detail-panel.show{display:block;animation:hexFade .3s ease;}
@keyframes hexFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.hex-detail-panel h3{margin:0 0 12px;font-size:22px;font-weight:700;color:#181818;font-family:'Spartan',sans-serif;}
.hex-detail-panel p{margin:0;font-size:16px;line-height:1.8;color:gray;font-family:'Poppins',sans-serif;}
.hex-placeholder{text-align:center;font-size:15px;color:#999;padding:22px 0;font-family:'Poppins',sans-serif;}
@media (max-width:768px){
  .hex-columns{grid-template-columns:1fr;}
  .hex-columns .hex-col-right .hex-item{flex-direction:row;}
  .hex-col-right .hex-label{clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%);margin-left:-18px;margin-right:0;}
  .hex-center{width:180px;height:160px;}
  .hex-icon{width:70px;height:70px;}
}