/* ==========================================================================
   Fakturujem.online — vlastné štýly úvodnej stránky
   Umiestnenie: public/css/app.css
   Načítané v Blade cez: <link rel="stylesheet" href="{{ asset('css/app.css') }}">
   Pozn.: Tailwind utility triedy zostávajú v HTML (CDN). Tu sú len veci,
   ktoré Tailwind nepokrýva (fonty, dekoratívne prvky, animácie).
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: Inter, system-ui, sans-serif;
  color: #14161B;
  background: #F7F5EF;
}

.font-display { font-feature-settings: "ss01" 1; letter-spacing: -0.02em; }
.num { font-family: "JetBrains Mono", monospace; font-feature-settings: "tnum" 1; }

/* papierová mriežka v hero */
.ledger-bg {
  background-image:
    linear-gradient(to right, rgba(20,22,27,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,22,27,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* dekoratívny QR (nie skenovateľný) */
.qr { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; }
.qr span { aspect-ratio: 1; background: #14161B; border-radius: 1px; }
.qr span.off { background: transparent; }

/* pečiatka "Zaplatené" */
.stamp {
  transform: rotate(-11deg);
  border: 2.5px solid #D99A2B;
  color: #D99A2B;
  letter-spacing: 0.18em;
  box-shadow: inset 0 0 0 2px rgba(217,154,43,0.25);
  opacity: 0.92;
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.card-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-lift:hover { transform: translateY(-4px); }

a:focus-visible, button:focus-visible {
  outline: 3px solid #1F3DE6;
  outline-offset: 2px;
  border-radius: 6px;
}