.hero{
  border:1px solid var(--border);
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.92));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero .inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  padding:22px;
}
@media (max-width: 860px){ .hero .inner{grid-template-columns:1fr} }

.poster{
  border-radius: var(--radius2);
  border:1px solid var(--border);
  overflow:hidden;
  min-height: 360px;
  background: #eaeaf6;
  position:relative;
  box-shadow: 0 14px 40px rgba(2,6,23,.08);
}
.poster::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(109,40,217,.12), rgba(37,99,235,.10));
  pointer-events:none;
}
.poster .img{
  position:absolute; inset:0;
  background: url("../public/img/logo1.JPEG") center/cover no-repeat;
  filter:saturate(1.05) contrast(1.02);
}
.poster .overlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:18px;
  background: linear-gradient(to top, rgba(2,6,23,.45), transparent 55%);
  color: #fff;
}
.poster .overlay .k{
  display:inline-flex;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.20);
  font-weight:900;
  font-size:12px;
}

.miniCards{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
}
@media (max-width: 860px){ .miniCards{grid-template-columns:1fr} }