/* needapc landing — dark, self-contained (Space Grotesk display + system body).
   Structural layout lives inline in home.html for fidelity with the source
   mockup; this file holds the reset, animation keyframes, responsive overrides,
   hover states, and reduced-motion handling. */

:root {
  --np-accent: #8AA0EA;
  --np-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --np-body: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: #0e1117;
}

/* ---- Interactive states (replace the mockup's style-hover artefacts) ---- */

.np-btn {
  background: var(--np-accent);
  color: #111726;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 12px;
  display: inline-block;
  transition: filter 0.15s ease;
}

.np-btn:hover,
.np-btn:focus-visible {
  filter: brightness(1.08);
}

.np-navlink,
.np-textlink {
  transition: color 0.15s ease;
}

.np-navlink:hover,
.np-navlink:focus-visible,
.np-textlink:hover,
.np-textlink:focus-visible {
  color: #e6e9f0;
}

/* Visible focus ring for keyboard users across all landing links/buttons. */
.np-root a:focus-visible {
  outline: 2px solid var(--np-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- Animation keyframes ---- */

@keyframes lidOpen {
  0% { transform: rotateX(-72deg); opacity: 0.4; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@keyframes sceneQuiz {
  0%, 42% { opacity: 1; }
  50%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes sceneMatch {
  0%, 46% { opacity: 0; }
  54%, 88% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes barFill1 {
  0%, 4% { width: 6%; }
  26%, 42% { width: 72%; }
  50%, 100% { width: 6%; }
}
@keyframes barFill2 {
  0%, 10% { width: 6%; }
  32%, 42% { width: 44%; }
  50%, 100% { width: 6%; }
}
@keyframes barFill3 {
  0%, 16% { width: 6%; }
  38%, 42% { width: 88%; }
  50%, 100% { width: 6%; }
}
@keyframes checkPop {
  0%, 48% { opacity: 0; transform: scale(0.4); }
  57%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.4); }
}
@keyframes matchPop {
  0%, 50% { opacity: 0; transform: translateY(12px) scale(0.96); }
  58%, 88% { opacity: 1; transform: translateY(0) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(12px) scale(0.96); }
}
@keyframes matchBar {
  0%, 56% { transform: scaleX(0); }
  72%, 88% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */

@media (max-width: 760px) {
  .np-hero { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 32px !important; padding-bottom: 44px !important; }
  .np-hero .np-laptop { order: -1; }
  .np-steps { grid-template-columns: 1fr !important; gap: 22px !important; }
  .np-trust { grid-template-columns: 1fr !important; gap: 32px !important; }
  .np-pad { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 460px) {
  .np-cta-row { flex-direction: column; align-items: stretch !important; }
  .np-cta-row a[role="button"] { text-align: center; }
}

/* ---- Respect reduced-motion preference ---- */

@media (prefers-reduced-motion: reduce) {
  .np-root *,
  .np-root *::before,
  .np-root *::after {
    animation: none !important;
    transition: none !important;
  }
}