:root{
  --radius: 16px;
  --bg: #0b0b10;
  --card: #10131a;
  --text: #e9eef5;
  --muted: #a6b0bf;
  --accent: #7c5cff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 800px at 20% 10%, #171a22 0%, #0b0b10 60%);
  color: var(--text);
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
  padding:48px clamp(16px,4vw,56px);
  max-width:1200px;
  margin-inline:auto;
}

.card{
  position:relative;
  background: linear-gradient(180deg, #121725, #0e1220);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .2s ease;
}

.card:hover{
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}

.card-img{
  width:100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display:block;
  transform: translateZ(30px) scale(1.02);
  transition: transform .2s ease;
}

.card-body{
  padding:20px;
  transform: translateZ(35px);
}

.card-title{
  margin:0 0 6px;
  font-size:1.15rem;
  letter-spacing:.2px;
}

.card-sub{
  margin:0 0 14px;
  color: var(--muted);
  font-size:.95rem;
}

.btn{
  background: linear-gradient(135deg, var(--accent), #5a77ff);
  color:white;
  border:none;
  padding:10px 14px;
  border-radius: 10px;
  font-weight:600;
  cursor:pointer;
  transform: translateZ(40px);
}

.glare{
  position:absolute;
  inset:-20%;
  background: radial-gradient(250px 150px at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.0;
  transform: translateZ(60px);
  transition: opacity .15s ease;
}

.card:hover .glare{ opacity:.45; }

@media (hover:none){
  .card:hover .glare{ opacity:.0; } /* avoid constant glare on mobile hover emulation */
}