/* ==== hub.sswx.space/products/ — page-specific styles ==== */

.products-hero { padding: 56px 0 24px; max-width: 720px; }
.products-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 16px 0; }

.nav-dropdown-menu a.current { color: var(--radar-teal); }

.product-section { padding: 40px 0; border-top: 1px solid var(--border); }
.product-section:first-child { border-top: none; }
.product-section h2 { font-size: 1.3rem; margin-bottom: 20px; }

.badge-grid { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- Animated badge --- */
.badge {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 14px 16px;
  border-radius: 100px;
  background: var(--bg-elevated);
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.2s ease;
}
.badge::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg, var(--storm-blue), var(--radar-teal), var(--alert-gold), var(--storm-blue));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: badge-spin 4s linear infinite;
  z-index: -1;
}
.badge:hover { transform: translateY(-3px); }
.badge:hover::before { animation-duration: 1.4s; }
@keyframes badge-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .badge::before { animation: none; } }

.badge-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--storm-blue), var(--radar-teal));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #05070C;
}
.badge-text { display: flex; flex-direction: column; }
.badge-text .badge-name { font-size: 0.92rem; font-weight: 600; }
.badge-text .badge-tagline { font-size: 0.76rem; color: var(--text-faint); }

/* --- Badge detail modal --- */
.badge-modal { max-width: 420px; text-align: left; }
.badge-modal-image {
  width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--border); margin-bottom: 16px; background: var(--bg-elevated-2);
}
.badge-modal-image[src=""], .badge-modal-image:not([src]) { display: none; }
.badge-modal h3 { font-size: 1.2rem; margin: 8px 0 8px; }
.badge-modal p { font-size: 0.92rem; margin-bottom: 20px; }
.badge-modal .btn { width: 100%; }