.kc-a18{
  width:100%;
  margin:0 0 20px;
  color:#edf5fc;
}

.kc-a18 *{
  box-sizing:border-box;
}

.kc-a18-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:20px;
  min-height:170px;
  padding:23px;
  border:1px solid #274b68;
  border-radius:20px;
  background:
    radial-gradient(circle at 82% 12%,rgba(36,143,225,.21),transparent 35%),
    linear-gradient(140deg,#0d253c,#091b2e);
  box-shadow:0 13px 28px rgba(0,0,0,.18);
}

.kc-a18-copy,
.kc-a18-radar{
  position:relative;
  z-index:1;
}

.kc-a18-kicker{
  color:#52aef0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.kc-a18 h2{
  margin:8px 0 7px;
  color:#f3f8fd;
  font-size:26px;
}

.kc-a18-description{
  max-width:650px;
  margin:0;
  color:#97aec3;
  font-size:13px;
  line-height:1.55;
}

.kc-a18-user{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
}

.kc-a18-avatar{
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  border:1px solid #3675a5;
  border-radius:11px;
  background:#12334f;
  color:#7bc8ff;
  font-weight:900;
}

.kc-a18-user strong,
.kc-a18-user span{
  display:block;
}

.kc-a18-user strong{
  font-size:13px;
}

.kc-a18-user span{
  margin-top:2px;
  color:#7891a9;
  font-size:10px;
}

.kc-a18-radar{
  display:grid;
  place-items:center;
}

.kc-a18-orbit{
  position:relative;
  width:120px;
  height:120px;
  border:1px solid rgba(62,153,219,.35);
  border-radius:50%;
  background:
    linear-gradient(90deg,transparent 49.5%,rgba(53,137,194,.25) 50%,transparent 50.5%),
    linear-gradient(transparent 49.5%,rgba(53,137,194,.25) 50%,transparent 50.5%);
}

.kc-a18-orbit::before,
.kc-a18-orbit::after{
  content:"";
  position:absolute;
  border:1px solid rgba(80,170,221,.28);
  border-radius:50%;
}

.kc-a18-orbit::before{
  inset:18px;
}

.kc-a18-orbit::after{
  inset:36px;
}

.kc-a18-dot{
  position:absolute;
  top:14px;
  left:54px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#37baf0;
  box-shadow:0 0 0 7px rgba(55,186,240,.10),0 0 18px #269cdd;
  animation:kc18pulse 2s infinite;
}

@keyframes kc18pulse{
  0%,100%{opacity:.55;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.18)}
}

.kc-a18-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  margin-top:13px;
}

.kc-a18-card{
  position:relative;
  overflow:hidden;
  min-height:145px;
  padding:17px;
  border:1px solid #284962;
  border-radius:16px;
  background:linear-gradient(145deg,#0e273f,#0a1d31);
  box-shadow:0 9px 20px rgba(0,0,0,.15);
}

.kc-a18-card::after{
  content:"";
  position:absolute;
  right:-38px;
  bottom:-50px;
  width:120px;
  height:120px;
  border:1px solid rgba(55,145,207,.15);
  border-radius:50%;
}

.kc-a18-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.kc-a18-label{
  color:#7691a8;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.kc-a18-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid #345d7d;
  border-radius:9px;
  background:#112f49;
  color:#61bdf1;
}

.kc-a18-value{
  margin-top:10px;
  color:#f0f7fd;
  font-size:20px;
  font-weight:800;
}

.kc-a18-sub{
  margin-top:4px;
  color:#8299ae;
  font-size:10px;
}

.kc-a18-bars{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:30px;
  margin-top:13px;
}

.kc-a18-bars i{
  flex:1;
  border-radius:3px 3px 1px 1px;
  background:linear-gradient(#40c6de,#347dd3);
}

.kc-a18-meter{
  overflow:hidden;
  height:5px;
  margin-top:16px;
  border-radius:10px;
  background:#153047;
}

.kc-a18-meter span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#37c4cf,#3d84e0,#7966ce);
}

.kc-a18-matrix{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:3px;
  margin-top:13px;
}

.kc-a18-matrix i{
  aspect-ratio:1;
  border-radius:2px;
  background:#183a52;
}

.kc-a18-matrix i:nth-child(3n){background:#226d96}
.kc-a18-matrix i:nth-child(5n){background:#378ed0}
.kc-a18-matrix i:nth-child(7n){background:#51b2c7}

@media(max-width:900px){
  .kc-a18-hero{grid-template-columns:1fr}
  .kc-a18-radar{display:none}
  .kc-a18-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:620px){
  .kc-a18-hero{padding:18px}
  .kc-a18 h2{font-size:22px}
  .kc-a18-grid{grid-template-columns:1fr}
}