/* Questy Landing Page — Custom Styles & Figma Node 202:2 Precision Tokens */
:root {
  --questy-navy: #03071e;
  --questy-navy-surface: #0b112c;
  --questy-navy-border: #1e293b;
  --questy-orange: #ff6d00;
  --questy-red: #dc2f02;
  --questy-crimson: #9d0208;
  --questy-white: #ffffff;
  --questy-slate-muted: #475569;
}

html,
body,
.font-sans {
  scroll-behavior: smooth;
  font-family: 'Google Sans Flex', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--questy-navy);
  background-color: var(--questy-white);
}

.font-prompt {
  font-family: 'Prompt', 'Google Sans Flex', sans-serif;
}

.font-display-flex {
  font-family: 'Google Sans Flex', 'Outfit', 'Plus Jakarta Sans', sans-serif;
}

.font-code {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
}

/* Figma Node 202:2 Decorative Pill Bars */
.figma-pill-orange {
  border: 6.5px solid #ff6d00;
  border-radius: 30px;
  background-color: #ffffff;
}

.figma-pill-crimson {
  border: 6.5px solid #9d0208;
  border-radius: 30px;
  background-color: #ffffff;
}

.figma-pill-red {
  border: 6.5px solid #dc2f02;
  border-radius: 30px;
  background-color: #ffffff;
}

/* Figma Node 202:163 / 202:196 Section Indicator Pill */
.figma-section-badge {
  width: 23px;
  height: 47px;
  border: 4.5px solid #ff6d00;
  border-radius: 30px;
  background-color: #ffffff;
  flex-shrink: 0;
}

/* Figma Node 202:14 / 202:183 / 202:186 Feature Vertical Capsule */
.figma-feature-bar {
  width: 18px;
  min-height: 166px;
  border: 2px solid #dc2f02;
  border-radius: 18px;
  background-color: transparent;
  flex-shrink: 0;
  transition: background-color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.feature-row:hover .figma-feature-bar {
  background-color: rgba(220, 47, 2, 0.08);
  border-color: #ff6d00;
  transform: scaleY(1.03);
}

/* Figma Node 202:7 Clone Command Box Shadow */
.figma-command-shadow {
  box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, 0.22);
  border-radius: 30px;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.figma-command-shadow:hover {
  box-shadow: 0px 6px 18px 6px rgba(255, 109, 0, 0.18), 0px 4px 10px 5px rgba(0, 0, 0, 0.22);
}

/* Subtle ticker animation inside hero decorative capsules */
@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}

.capsule-track {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* Focus visibility for WCAG 2.1 AA compliance */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid #ff6d00;
  outline-offset: 3px;
}