/* ==========================================================================
   Autoprodavnice kviz — design tokens
   Rule from design.md: the conversion colour (--cta, black, per the v6 mockup)
   is used ONLY for clickable buy/quiz actions. Never as filled decoration.
   ========================================================================== */
:root {
  --ink: #16130f;
  --ink-2: #4f4943;
  --muted: #8a827a;
  --line: #ece6df;
  --bg: #ffffff;
  --cream: #fbf8f5;
  --sand: #f4ede5;
  --accent: #2f5fd0;        /* brand: autoprodavnice blue */
  --accent-soft: #e4ecfb;
  --star: #f5a623;
  --yes: #1f9d55;
  --no: #d64545;
  --mid: #b7791f;

  --cta: #111111;          /* conversion colour */
  --cta-hover: #2c2c2c;
  --cta-ink: #ffffff;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(22, 19, 15, .08);
  --shadow-lg: 0 24px 60px rgba(22, 19, 15, .14);
  --wrap: 1180px;
  --font: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; font-weight: 700; }
h1 em, h2 em { font-style: italic; font-weight: 800; color: var(--accent); }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Placeholder marker for proof that must be replaced before launch */
.insert {
  background: #fff6c9;
  outline: 1px dashed #d9b600;
  border-radius: 4px;
  padding: 0 4px;
  font-style: normal;
}

/* ---------- Buttons (conversion colour only) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  background: var(--cta);
  color: var(--cta-ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  padding: .8em 1.3em;
  cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:focus-visible { outline: 3px solid var(--star); outline-offset: 3px; }
.btn--sm { font-size: .9rem; padding: .6em 1.05em; }
.btn--lg { font-size: 1.25rem; padding: 1em 2.2em; border-radius: 6px; }
.btn--block { display: flex; width: 100%; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #f1ece6; }
.arrow { font-size: 1.25em; line-height: 1; transition: transform .15s; }
.btn:hover .arrow { transform: translateX(4px); }

.microcopy { font-size: .88rem; color: var(--muted); margin: .8em 0 0; text-align: center; }
.microcopy--light { color: rgba(255, 255, 255, .7); }
.fineprint { font-size: .8rem; color: var(--muted); margin-top: 1.2em; }
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9em;
}
.stars { color: var(--star); letter-spacing: 2px; }
.chip {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(30, 26, 22, .72);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .45em 1.1em;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.chip--right { left: auto; right: 18px; }
.chip--light { background: rgba(255, 255, 255, .9); color: var(--ink); letter-spacing: 0; }

.logo { font-weight: 800; font-size: 1.55rem; letter-spacing: -0.04em; text-decoration: none; }
.logo span { color: var(--accent); }
.checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 36px; color: var(--ink-2); }
.checks li strong { color: var(--ink); }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e3f5ea;
}
.checks li::after { content: ""; position: absolute; left: 9px; top: 7px; width: 5px; height: 10px; border: solid var(--yes); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* fixes */
.ba__divider { z-index: 2; }
.section__head h2 { text-wrap: balance; }
h1, h2 { text-wrap: balance; }