/* ── service cards ───────────────────────────────────────────────── */
.card-grid { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2rem; }
.card, .carousel-card {
  background: linear-gradient(135deg, rgba(26, 26, 38, 0.6) 0%, rgba(18, 18, 26, 0.8) 100%);
  border-radius: 16px; padding: 1.5rem;
  position: relative; overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(230, 57, 70, 0.15);
  width: 100%; box-sizing: border-box;
}
/* ★ THE HEAD ROW — same fix, same reason as app/index/css/card.css (operator: "the right side
   of every card is empty"). Title left, icon right, one flex row instead of the icon sitting
   alone above the title with nothing filling the rest of the width. */
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.card-head .card-title { margin-bottom: 0; }
.card-head .card-icon { margin-bottom: 0; flex-shrink: 0; }
.card-head .card-icon svg { width: 1.6rem; height: 1.6rem; }

.card-icon { font-size: 2rem; margin-bottom: 0.8rem; filter: drop-shadow(0 0 10px rgba(230, 57, 70, 0.55)); color: var(--accent-red); }
/* SVG icons, additive alongside any emoji still in use elsewhere on this page — see
   app/index/css/card.css for the full reasoning, identical here. */
.card-icon svg {
  width: 2rem; height: 2rem; display: block;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* img sits alongside svg, not in place of it — see app/index/css/card.css for the full reasoning
   (identical here): the extracted icon files bake their own color in now, only sizing carries over. */
.card-icon img { width: 2rem; height: 2rem; display: block; }
.card-title {
  font-family: 'Orbitron', monospace;
  font-size: 1.1rem; font-weight: 600;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-silver));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.card-description { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; }