/*
 * krovix — landing (`/`).
 *
 * Sesterský súbor k preview.css / workspace.css: ručne písaný, nie generovaný.
 * Tokeny a komponenty (.btn, .card, .badge, .alert) prichádzajú z geo.css —
 * tu je LEN rozloženie stránky. Nič sa tu nesmie farbiť natvrdo; keď hodnota
 * v tokenoch chýba, patrí do tokens.css, nie sem.
 *
 * Hierarchia je okrajom (--border), nie tieňom — v tmavom režime žiadne box-shadow.
 */

.lp {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* `:not(.btn)` NIE JE kozmetika. `.btn` žije v `@layer components` (geo.css),
   tento súbor je NEVRSTVENÝ — a nevrstvená deklarácia poráža vrstvenú bez ohľadu
   na špecificitu. Bez tejto výnimky prepíše `.lp a` farbu tlačidla na akcentovú,
   čiže modrý text na modrom pozadí: tlačidlo sa vykreslí ako prázdny obdĺžnik.
   Namerané pri prvom screenshote — v kóde to vyzerá správne.

   Farba odkazu ide cez PREMENNÚ, nie cez ďalšie selektory: `.lp a:not(.btn)` má
   vyššiu špecificitu než `.lp-nav__links a`, takže by kontextové farby prebíjalo
   a každý ďalší blok by si vynucoval vlastnú výnimku. Premennú stačí prepísať
   na rodičovi a špecificita sa do toho nezaplieta. */
.lp { --link: var(--accent); --link-hover: var(--accent-hover); }
.lp a:not(.btn) { color: var(--link); text-decoration: none; }
.lp a:not(.btn):hover { color: var(--link-hover); }
.lp a.btn { text-decoration: none; }

/* Odkaz v behu textu musí byť rozoznateľný aj BEZ farby (WCAG 1.4.1). Zmerané
   axe-core: `link-in-text-block`, závažnosť serious — odkaz na workspace vnútri
   odseku bol odlíšený iba farbou. Navigačné odkazy (hlavička, pätička) nie sú
   v odseku, takže si čistý vzhľad zachovajú. */
.lp p a:not(.btn) { text-decoration: underline; text-underline-offset: 0.18em; }

/* Viditeľný fokus je funkčná požiadavka, nie ozdoba — bez neho sa stránka nedá
   preklikať klávesnicou a `outline: none` býva prvé, čo z resetu zostane. */
.lp :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.lp-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lp-dim { color: var(--muted); }
.lp-fg2 { color: var(--fg-secondary); }
.lp-accent { color: var(--accent); }
.lp-ok { color: var(--ok); }
.lp-warn { color: var(--warn); }

.lp-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.lp-h1 {
  margin: 0;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
/* Nadpisy potrebujú vlastné riadkovanie: `--leading-body` (1.6) je pre bežný text
   a na 30 px nadpise vyrobí medzery, ktoré rozbijú jeho čitateľnosť ako celku. */
.lp-h2 {
  margin: 0;
  font-size: var(--text-h1);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.lp-h3 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; }
.lp-lede { margin: 0; font-size: 17px; color: var(--muted); max-width: 56ch; text-wrap: pretty; }
.lp-body { margin: 0; text-wrap: pretty; }

/* --- navigácia ----------------------------------------------------------- */

.lp-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.lp-brand { display: inline-flex; align-items: center; gap: var(--space-3); --link: var(--fg); --link-hover: var(--fg); }
.lp-brand__mark { display: block; }
.lp-brand__word { font-size: 19px; font-weight: 500; letter-spacing: .02em; }
.lp-brand__tail { color: var(--muted); }

.lp-nav__links { display: flex; gap: var(--space-6); font-size: 14px; --link: var(--muted); --link-hover: var(--fg); }

.lp-nav__cta { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.lp-link-plain { font-size: 14px; --link: var(--fg); }

/* --- hero ---------------------------------------------------------------- */

.lp-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.lp-hero__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.lp-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.lp-trust {
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--muted);
  flex-wrap: wrap;
}

.lp-shot {
  margin: 0;
  background: var(--panel-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lp-shot__head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--muted);
}
.lp-shot__canvas { background: var(--bg); }
.lp-shot__canvas svg { display: block; width: 100%; height: auto; }
/* Poznámka je VLASTNÝ riadok, nie absolútne položená nad kresbou. Prekrytie
   textu grafikou závisí od šírky panela, takže „u mňa to nekoliduje“ je len
   výrok o jednej šírke okna — a atribúcia mriežok je licenčná povinnosť,
   ktorá sa nesmie stať nečitateľnou. */
.lp-shot__note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1.6;
  color: var(--muted);
}
.lp-shot__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-micro);
  flex-wrap: wrap;
}

/* --- sekcie -------------------------------------------------------------- */

.lp-section {
  padding: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.lp-section__head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 72ch; }

.lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.lp-compare__panel { overflow: hidden; }
.lp-compare__head { display: flex; align-items: center; gap: var(--space-3); }
.lp-compare__head span:last-child { margin-left: auto; }
.lp-compare__panel svg { display: block; width: 100%; height: auto; }

/* --- vlastnosti ---------------------------------------------------------- */

.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.lp-feature {
  background: var(--bg);
  padding: var(--space-8) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- súkromie ------------------------------------------------------------ */

.lp-privacy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.lp-privacy__copy { display: flex; flex-direction: column; gap: var(--space-4); }

.lp-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lp-fact { background: var(--panel-inset); padding: var(--space-6); }
.lp-fact dt { font-family: var(--font-mono); font-size: var(--text-small); color: var(--muted); }
.lp-fact dd { margin: var(--space-2) 0 0; font-size: var(--text-body); }

/* --- stav ---------------------------------------------------------------- */

.lp-status__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.lp-status__list li { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* --- pätička ------------------------------------------------------------- */

.lp-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: var(--bg);
}
.lp-foot__brand { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-3); }
.lp-foot__attrib { margin: 0; font-size: var(--text-small); line-height: 1.7; color: var(--muted); max-width: 60ch; }
.lp-foot__links { display: flex; gap: var(--space-12); font-size: var(--text-small); }
.lp-foot__links div { display: flex; flex-direction: column; gap: var(--space-2); }
.lp-foot__links { --link: var(--muted); }
.lp-foot__heading { color: var(--fg); font-weight: 600; }

/* --- úzke obrazovky ------------------------------------------------------ */

@media (max-width: 1000px) {
  .lp-hero,
  .lp-privacy { grid-template-columns: 1fr; }
  .lp-compare,
  .lp-features { grid-template-columns: 1fr; }
  .lp-nav,
  .lp-hero,
  .lp-section,
  .lp-feature,
  .lp-foot { padding-left: var(--space-6); padding-right: var(--space-6); }
  .lp-h1 { font-size: var(--text-h1); }
  .lp-nav__cta { margin-left: 0; width: 100%; }
}

/* Zredukovaný pohyb: stránka nič neanimuje, ale `scroll-behavior` z kotiev áno. */
@media (prefers-reduced-motion: reduce) {
  .lp { scroll-behavior: auto; }
}