.dark-section .dark-columns{
  margin-bottom:48px;
}

.dark-section .dark-columns h2{
  color:#fff!important;
}

.dark-section .dark-columns h2 span{
  color:#8dd9ff!important;
}

.dark-section .dark-columns .section-copy{
  color:#c4d0df!important;
  font-family:Bahnschrift,'Segoe UI',Arial,sans-serif;
  font-size:18px;
  line-height:1.68;
}

.dark-section .play-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  background:transparent!important;
}

.dark-section .play-panel{
  position:relative;
  min-height:250px;
  padding:28px;
  border:1px solid transparent;
  border-radius:5px 16px 5px 16px;
  clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
  overflow:visible;
}

.dark-section .play-panel:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background-position:center;
  background-size:cover;
  opacity:.62;
  filter:brightness(1.24) saturate(1.18) contrast(1.08);
  transition:transform .6s ease,opacity .6s ease;
}

.dark-section .play-panel:nth-child(1):before{
  background-image:linear-gradient(135deg,rgba(10,28,48,.16),rgba(10,28,48,.48)),url('assets/frames-research/research-10.jpg');
}

.dark-section .play-panel:nth-child(2):before{
  background-image:linear-gradient(135deg,rgba(30,31,74,.16),rgba(30,31,74,.48)),url('assets/frames-research/research-01.jpg');
}

.dark-section .play-panel:nth-child(3):before{
  background-image:linear-gradient(135deg,rgba(30,31,74,.12),rgba(30,31,74,.42)),url('assets/frames-hq/clear-03.jpg');
}

.dark-section .play-panel:hover:before{
  opacity:.58;
  transform:scale(1.06);
}

.dark-section .play-panel:nth-child(1){
  background:linear-gradient(145deg,rgba(14,47,74,.96),rgba(20,42,67,.84))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24),0 0 28px rgba(141,217,255,.18);
}

.dark-section .play-panel:nth-child(2){
  background:linear-gradient(145deg,rgba(31,35,83,.96),rgba(68,42,91,.84))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24),0 0 28px rgba(188,167,255,.16);
}

.dark-section .play-panel:nth-child(3){
  background:linear-gradient(145deg,rgba(51,31,72,.96),rgba(95,39,72,.84))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24),0 0 28px rgba(242,169,210,.16);
}

.dark-section .play-panel:after{
  content:'';
  position:absolute;
  inset:14px -2px;
  border-left:2px solid rgba(141,217,255,.48);
  border-right:2px solid rgba(141,217,255,.48);
  border-radius:3px 12px 3px 12px;
  filter:blur(3px);
  pointer-events:none;
}

.dark-section .play-panel:nth-child(2):after{border-color:rgba(188,167,255,.48)}
.dark-section .play-panel:nth-child(3):after{border-color:rgba(242,169,210,.48)}

.dark-section .panel-symbol{
  display:none!important;
}

.dark-section .play-panel:nth-child(2) .panel-symbol{color:#bca7ff!important}
.dark-section .play-panel:nth-child(3) .panel-symbol{color:#f2a9d2!important}

.dark-section .play-panel h3{
  position:relative;
  z-index:1;
  margin:22px 0 10px;
  color:#fff!important;
  font-family:Arial Black,Bahnschrift,'Segoe UI Black',sans-serif;
  font-size:19px;
  font-weight:900;
  letter-spacing:.035em;
  line-height:1.12;
  text-transform:uppercase;
}

.dark-section .play-panel p{
  position:relative;
  z-index:1;
  max-width:250px;
  color:rgba(255,255,255,.9)!important;
  font-family:Bahnschrift,'Segoe UI',Arial,sans-serif;
  font-size:14.5px;
  line-height:1.55;
}

.dark-section .panel-link{
  position:relative;
  z-index:1;
  color:#8dd9ff!important;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media(max-width:820px){
  .dark-section .play-grid{grid-template-columns:1fr;gap:14px}
  .dark-section .play-panel{min-height:205px}
}
