:root {
  --oct-glow: 0 0 18px 6px #ffd857, 0 0 6px 2px #4f46e5;
  --oct-grad: linear-gradient(120deg, #4f46e5 60%, #ffd857 100%);
}
.oct-hierarchy { width:100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 10px 64px; }
.oct-title { font-family: 'Segoe UI',sans-serif; font-size:2.2rem; color: #07204a; text-align:center; margin-bottom: 24px; font-weight:900; }
.oct-row { display: flex; gap: 28px; justify-content: center; align-items: flex-end; position: relative; }

.oct-card {
  width: 140px; height: 140px;
  clip-path: polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);
  background: #fff;
  box-shadow: var(--oct-glow), 0 6px 14px 0 rgba(18,27,80,.16);
  transition: box-shadow 0.22s;
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor:pointer;
}
.oct-card img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius:10px;
  clip-path: inherit;
  box-shadow: 0 3px 16px rgba(18,27,80,0.10);
}
.oct-card-inner {
  width: 97%; height: 97%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: rgba(255,255,255,0.92); border-radius: 8px; padding-bottom:10px;
}
.oct-card-details { margin-top: 8px; }
.oct-card-name { font-weight: 800; color: #092c5c; font-size: 1.08rem; margin-bottom:2px; }
.oct-card-role { color: #4f46e5; font-size: .97rem;}

.oct-card-principal {
  width: 186px; height: 186px;
  box-shadow: 0 0 28px 14px #ffd857bb, var(--oct-glow);
  background: var(--oct-grad);
}
.oct-card-vice {
  width: 156px; height: 156px;
  background: var(--oct-grad);
}
.oct-card-coord { background: var(--oct-grad); box-shadow: var(--oct-glow); }
.oct-card:hover, .oct-card:focus {
  box-shadow: 0 0 32px 12px #ffe854cc, 0 0 10px 4px #4f46e5, 0 6px 20px rgba(18,27,80,.18);
  z-index: 6;
}

.oct-connector-line {
  width: 6px; height: 38px; border-radius: 3px;
  background: linear-gradient(180deg, #4f46e5 30%, #ffd857 100%);
  margin:0 auto; position:relative; z-index: 1;
}
.oct-connector-horizontal {
  height: 7px; width: 56%; min-width:240px; background:linear-gradient(90deg, #4f46e5 30%, #ffd857 100%);
  border-radius:4px; margin: 10px auto 0; z-index: 1;
}
@media (max-width: 580px){
  .oct-card, .oct-card-principal, .oct-card-vice { width: 86vw; max-width:180px; height: 86vw; max-height:180px;}
  .oct-row { flex-direction: column; gap:14px;}
  .oct-connector-horizontal{ width:88vw; min-width: 60vw;}
}