.courses-catalog-hero {
  padding:105px 34px 68px;
  border-bottom:1px solid rgba(139,92,246,.14);
  background:radial-gradient(circle at 50% 0,rgba(139,92,246,.17),transparent 48%)
}
.courses-catalog-container {
  width:min(1480px,100%);
  margin:0 auto
}
.courses-catalog-hero h1 {
  margin-top:16px;
  font-size:clamp(48px,6vw,82px);
  line-height:1.02;
  letter-spacing:-3px;
  color:#f8fafc
}
.courses-catalog-hero p {
  max-width:760px;
  margin-top:20px;
  font-size:18px;
  line-height:1.75;
  color:#9aa5b8
}
.courses-catalog-section {
  padding:58px 34px 110px
}
.courses-filter-bar {
  display:grid;
  grid-template-columns:minmax(280px,1fr) 220px 220px;
  gap:14px;
  padding:18px;
  border:1px solid rgba(139,92,246,.18);
  border-radius:20px;
  background:rgba(10,10,27,.75);
  backdrop-filter:blur(14px)
}
.courses-filter-bar label {
  display:grid;
  gap:8px;
  color:#9da8bc;
  font-size:12px;
  font-weight:700
}
.courses-filter-bar input,.courses-filter-bar select {
  width:100%;
  height:48px;
  padding:0 14px;
  color:#f1f5f9;
  border:1px solid rgba(129,140,248,.2);
  border-radius:13px;
  outline:none;
  background:rgba(4,4,15,.75);
  font:inherit
}
.courses-filter-bar input:focus,.courses-filter-bar select:focus {
  border-color:rgba(139,92,246,.7);
  box-shadow:0 0 0 3px rgba(139,92,246,.1)
}
.courses-results-meta {
  margin:28px 0 16px;
  color:#8994a8;
  font-size:14px
}
.courses-results-meta strong {
  color:#d8d9ff;
  font-size:18px
}
.courses-grid--catalog {
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:none
}
.courses-empty {
  padding:60px 20px;
  text-align:center;
  color:#94a3b8;
  font-size:18px
}
@media(max-width:1050px) {
  .courses-filter-bar {
    grid-template-columns:1fr 1fr
  }
  .courses-search {
    grid-column:1/-1
  }
  .courses-grid--catalog {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:680px) {
  .courses-catalog-hero,.courses-catalog-section {
    padding-left:20px;
    padding-right:20px
  }
  .courses-filter-bar {
    grid-template-columns:1fr
  }
  .courses-search {
    grid-column:auto
  }
  .courses-grid--catalog {
    grid-template-columns:1fr
  }
  .courses-catalog-hero h1 {
    letter-spacing:-1.5px
  }
}
.course-card {
  position:relative;
  min-height:520px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:inherit;
  border:1px solid rgba(129,140,248,.17);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(15,15,38,.82),rgba(7,7,21,.72));
  text-decoration:none;
  transition:transform .32s,border-color .32s,box-shadow .32s
}
.course-card:before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--course-accent),#ec4899)
}
.course-card:hover {
  transform:translateY(-8px);
  border-color:rgba(139,92,246,.55);
  box-shadow:0 26px 65px rgba(18,12,65,.34)
}
.course-card__media {
  position:relative;
  height:245px;
  overflow:hidden;
  background:rgba(99,102,241,.09)
}
.course-card__media img,.course-card__placeholder {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s,filter .45s
}
.course-card__media img {
  filter:brightness(.67) saturate(.9)
}
.course-card:hover .course-card__media img {
  transform:scale(1.045);
  filter:brightness(.78) saturate(1.08)
}
.course-card__placeholder {
  display:grid;
  place-items:center;
  font:100px Georgia;
  color:#c4b5fd;
  background:radial-gradient(circle,rgba(139,92,246,.28),rgba(7,7,21,.95))
}
.course-card__level {
  position:absolute;
  left:18px;
  bottom:16px;
  padding:7px 11px;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(5,5,18,.7);
  font-size:11px;
  font-weight:800
}
.course-card__body {
  flex:1;
  display:flex;
  flex-direction:column;
  padding:24px
}
.course-card__topline {
  display:flex;
  justify-content:space-between;
  gap:12px
}
.course-card__code {
  color:var(--course-accent);
  font:800 12px 'JetBrains Mono',monospace
}
.course-card__credits {
  color:#8d98aa;
  font-size:11px
}
.course-card h3 {
  margin-top:10px;
  color:#f8fafc;
  font-size:24px;
  line-height:1.2
}
.course-card p {
  margin-top:12px;
  color:#929db0;
  font-size:14px;
  line-height:1.7
}
.course-card__meta {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:18px
}
.course-card__meta span {
  padding:6px 9px;
  color:#aeb7c7;
  border:1px solid rgba(129,140,248,.14);
  border-radius:9px;
  background:rgba(99,102,241,.06);
  font-size:10px
}
.course-card__action {
  display:flex;
  justify-content:space-between;
  margin-top:auto;
  padding-top:22px;
  color:#d8d9ff;
  font-size:13px;
  font-weight:800
}
.course-card__action i {
  color:var(--course-accent);
  font-style:normal;
  font-size:18px
}
.courses-grid {
  display:grid;
  gap:20px
}