/* =============================================================
   TechVistaar — Cards
   The software/store card used everywhere (carousels, hub, category
   pages, search results, similar-software) plus the generic
   directory card used for category tiles.
============================================================= */

.store-card, .product-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; display:flex; flex-direction:column; gap:12px;
  transition:border-color .2s ease, transform .2s ease;
}
.store-card:hover, .product-card:hover{ border-color:rgba(232,154,44,0.5); transform:translateY(-3px); }
.store-card.is-hidden{ display:none; }

.store-thumb{ width:100%; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:var(--panel-2); }
.store-thumb img{ width:100%; height:100%; object-fit:cover; }

.store-badge, .product-badge{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk'; font-weight:700; font-size:15px; color:#fff;
}
.store-card h4, .product-card h4{ font-size:16px; }
.store-card .cat, .product-card .cat{ font-size:11.5px; color:var(--slate); }

.store-rating{ display:flex; align-items:center; gap:6px; }
.store-rating .rating-num{ font-size:12px; color:var(--slate); font-weight:600; }
.tv-stars{ display:inline-flex; gap:1px; vertical-align:middle; }

.store-price, .product-price{ font-family:'IBM Plex Mono'; font-size:14.5px; margin-top:auto; }
.store-price span, .product-price span{ font-size:10.5px; color:var(--slate); display:block; text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }

.store-cta, .product-cta{
  display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line);
  border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; margin-top:4px;
  transition:background .2s, color .2s, border-color .2s;
}
.store-cta:hover, .product-cta:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* Category directory tiles (homepage, All Software hub) */
.cat-directory{ padding:50px 0 70px; }
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1024px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cat-grid{ grid-template-columns:1fr; } }
.cat-card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:30px;
  display:flex; flex-direction:column; gap:14px; transition:border-color .2s ease, transform .2s ease;
}
.cat-card:hover{ transform:translateY(-3px); border-color:var(--teal); }
.cat-card .cat-icon{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; }
.cat-card h3{ font-size:18px; }
.cat-card p{ color:var(--slate); font-size:14px; flex:1; }
.cat-card .cat-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.cat-card .count{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--slate); }
.cat-card .go{ font-size:13.5px; font-weight:600; color:var(--amber-ink); }

/* Testimonial / quote cards (homepage) */
.quote-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .quote-track{ grid-template-columns:1fr; } }
.quote-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; gap:18px; }
.quote-card p{ font-size:15.5px; color:var(--ink); }
.quote-who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.avatar-mark{
  width:40px; height:40px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-size:14px; color:var(--amber-ink);
}
.quote-who b{ display:block; font-size:14px; }
.quote-who span{ font-size:12.5px; color:var(--slate); }

/* Service cards (homepage) */
.service-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
@media (max-width:820px){ .service-grid{ grid-template-columns:1fr; } }
.service-card{ background:var(--panel); padding:36px 30px; transition:background .2s ease; }
.service-card:hover{ background:var(--amber-tint); }
.service-icon{ width:44px; height:44px; margin-bottom:22px; }
.service-card h3{ font-size:19px; margin-bottom:10px; }
.service-card p{ color:var(--slate); font-size:14.5px; }