/* falka.app — shared styles
   Layout lives in inline styles on the elements; this file holds what
   inline styles cannot express: resets, fonts, keyframes, hover/focus states. */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #FBF3E7;
  color: #25352E;
  font-family: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.dark {
  background: #16352A;
  color: #FBF3E7;
}

a { color: #2E7D50; text-decoration: none; }
a:hover { color: #234B3B; }
body.dark a { color: #E0912F; }
body.dark a:hover { color: #F0B268; }

img { max-width: 100%; }
::selection { background: #E0912F; color: #16352A; }

*:focus-visible { outline: 2px solid #2E7D50; outline-offset: 2px; }
body.dark *:focus-visible { outline-color: #E0912F; }

/* FAQ — native accordion, works without JavaScript */
.faq { border-bottom: 1px solid #E7E0D3; }
.faq > summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Baloo 2', system-ui, cursive;
  font-weight: 700;
  font-size: 19px;
  color: #16352A;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: '+';
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #8F5A18;
  line-height: 1;
}
.faq[open] > summary::after { content: '\2013'; }
.faq > p {
  margin: 0;
  padding: 0 0 22px;
  max-width: 520px;
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 500;
  color: #4a5a52;
}

@keyframes fk-bar { 0% { width: 8% } 60% { width: 76% } 100% { width: 100% } }
@keyframes fk-pop { 0% { transform: scale(.6); opacity: 0 } 60% { transform: scale(1.08); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }
@keyframes fk-pulse { 0%, 100% { opacity: .35; transform: scale(1) } 50% { opacity: 1; transform: scale(1.35) } }
@keyframes fk-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes fk-scan { 0% { transform: translateY(0) } 100% { transform: translateY(148px) } }
@keyframes fk-scan2 { 0% { transform: translateY(-70px) } 100% { transform: translateY(170px) } }
@keyframes fk-in { 0% { opacity: 0; transform: translateY(16px) } 100% { opacity: 1; transform: translateY(0) } }
@keyframes fk-tilt { 0%, 100% { transform: rotate(-2deg) translateY(0) } 50% { transform: rotate(1.5deg) translateY(-10px) } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* generated: hover & focus states lifted out of the markup */
.x1:hover { background: #F3EAD9 !important; color: #16352A !important; }
.x2:hover { background: #16352A !important; color: #FBF3E7 !important; }
.x3:hover { background: #234B3B !important; color: #FBF3E7 !important; }
.x4:hover { color: #16352A !important; }
.x5:hover { transform: translateY(-4px) !important; border-color: #234B3B !important; }
.x6:hover { color: #234B3B !important; }
.x7:hover { border-color: #234B3B !important; transform: translateY(-3px) !important; }
.x8:focus { border-color: #2E7D50 !important; background: #FFFFFF !important; }
.x9:hover { background: #16352A !important; }