/* ═══════════════════════════════════════
   SAITT Homepage — Extracted inline styles
   Keyframes, comparison, metrics, process
═══════════════════════════════════════ */

/* ── Typewriter cursor blink ── */
@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Ticker infinite scroll ── */
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Animated line drift ── */
@keyframes line-drift { 0%, 100% { transform: translateX(-5%) scaleX(1.05); } 50% { transform: translateX(5%) scaleX(.95); } }

/* ── Dot grid pulse ── */
@keyframes dots-pulse { 0%, 100% { opacity: .4; } 50% { opacity: .8; } }

/* ── Scanlines ── */
@keyframes scanlines { 0% { background-position: 0 0; } 100% { background-position: 0 100px; } }

/* ── Comparison table ── */
.cmp-row:hover { background: rgba(0, 212, 232, .02); }

/* ── Comparison responsive ── */
@media (max-width: 680px) {
  .cmp-desktop { display: none !important; }
  .cmp-mobile { display: flex !important; }
}

/* ── Engagement header responsive ── */
@media (max-width: 768px) {
  .eng-header { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ── Impact metrics responsive ── */
@media (max-width: 768px) {
  .metrics-row { grid-template-columns: repeat(2, 1fr) !important; }
  .metrics-row > div { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .metrics-row > div:nth-child(even) { border-left: 1px solid var(--border) !important; }
  .metrics-row > div:nth-last-child(-n+2) { border-bottom: none !important; }
}
@media (max-width: 480px) {
  .metrics-row { grid-template-columns: 1fr !important; }
  .metrics-row > div { border-left: none !important; }
  .metrics-row > div:not(:last-child) { border-bottom: 1px solid var(--border) !important; }
  .metrics-row > div:last-child { border-bottom: none !important; }
}

/* ── Process step hover ── */
.process-num:hover {
  background: rgba(0, 212, 232, .1);
  box-shadow: 0 0 24px rgba(0, 212, 232, .25);
  border-color: rgba(0, 212, 232, .6);
}

/* ── Role card arrow ── */
.card:hover .role-arr {
  background: rgba(0, 212, 232, .12);
  border-color: rgba(0, 212, 232, .55);
  transform: translateX(4px);
}

/* ── Screen reader only utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ── Reduced motion for homepage keyframes ── */
@media (prefers-reduced-motion: reduce) {
  @keyframes tw-blink { 0%, 100% { opacity: 1; } }
  @keyframes ticker { 0%, 100% { transform: none; } }
  @keyframes line-drift { 0%, 100% { transform: none; } }
  @keyframes dots-pulse { 0%, 100% { opacity: .6; } }
  @keyframes scanlines { 0%, 100% { background-position: 0 0; } }
}