/* ── Scroll-triggered fade animations ── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Counter number display ── */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── 2×2 Competitive Matrix ── */
.matrix-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  border-left: 2px solid #e5e7eb;
  border-bottom: 2px solid #e5e7eb;
  margin: 0 auto;
}
.matrix-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
}
.matrix-label-x-left  { position: absolute; bottom: -28px; left: 0;   font-size: 11px; color: #6b7280; }
.matrix-label-x-right { position: absolute; bottom: -28px; right: 0;  font-size: 11px; color: #6b7280; }
.matrix-label-y-top   { position: absolute; top: 0;    left: -8px;  font-size: 11px; color: #6b7280; writing-mode: vertical-rl; transform: rotate(180deg); }
.matrix-label-y-bot   { position: absolute; bottom: 0; left: -8px;  font-size: 11px; color: #6b7280; writing-mode: vertical-rl; transform: rotate(180deg); }

/* ── Mobile-responsive table → card fallback ── */
@media (max-width: 640px) {
  .responsive-table thead { display: none; }
  .responsive-table tr    { display: block; margin-bottom: 1rem; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
  .responsive-table td    { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 13px; }
  .responsive-table td::before { content: attr(data-label); font-weight: 600; color: #374151; margin-right: 8px; flex-shrink: 0; }
}

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Nav shadow on scroll ── */
#navbar.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* ── Scroll indicator ── */
.scroll-indicator {
  animation: bounce 2s infinite;
  transition: opacity 0.4s;
}
.scroll-indicator.hidden-indicator { opacity: 0; pointer-events: none; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}