.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.card-icon { font-size: 26px; }
.card h3 { margin: 8px 0 6px; }
.card p { color: var(--muted); margin: 0; }

/* Image-backed card variant for Services */
.card-cover { position: relative; padding: 0; background-size: cover; background-position: center; color: #ffffff; border: 1px solid rgba(255,255,255,0.12); overflow: hidden; }
.card-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.22) 48%, rgba(0,0,0,0.45) 100%); border-radius: 12px; z-index: 1; }
.card-cover::before { content: ""; position: absolute; inset: -24px; border-radius: 16px; background: radial-gradient(160px 120px at 18% 22%, rgba(149,73,218,0.35), transparent 62%), radial-gradient(180px 120px at 82% 78%, rgba(173,97,202,0.30), transparent 60%), radial-gradient(120px 90px at 50% 0%, rgba(146,101,112,0.24), transparent 62%); filter: blur(18px) saturate(1.05); opacity: 0.65; z-index: 0; pointer-events: none; animation: ledGlow 10s ease-in-out infinite alternate; }
.card-cover .card-content { position: relative; z-index: 2; padding: 18px; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.card-cover h3 { margin: 0; color: #ffffff; }
.card-cover p { margin: 0; color: rgba(255,255,255,0.9); }

.grid { display: grid; gap: 16px; }
.projects-grid { grid-template-columns: repeat(3, 1fr); }
.project-card { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: #0c1426; }
.project-card img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.5s ease; filter: saturate(0.9); }
.project-card:hover img { transform: scale(1.05); }
.project-meta { position: absolute; left: 12px; bottom: 12px; right: 12px; padding: 10px 12px; background: rgba(0,0,0,0.35); border-radius: 10px; backdrop-filter: blur(6px); }
.project-meta h3 { margin: 0; font-size: 16px; }
.project-meta p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }