/* ==========================================================================
   LightWeb — homepage v2
   Implementácia z „LightWeb Mockups.dc.html" (Claude Design handoff).
   Vybraný smer: 1a typografická doska. Služby 1e register.
   Rez procesu z 1b a výkaz úspory z 1c sú sekcie, nie konkurenčné heroy.
   Stavia na assets/tokens.css — tu nič nefixujem, čo už nesie token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lokálne premenné
   Mockup je celý v dark režime a drží modernistickú disciplínu:
   rádius 2 px ako v symbole, 2 px linky medzi sekciami, žiadne tiene.
   -------------------------------------------------------------------------- */
:root {
  --page:      1280px;              /* šírka karty v mockupe */
  --pad:       40px;                /* vnútorný okraj karty */
  --r:         2px;                 /* jediný rádius na celom webe */

  --rule-2:    rgba(244, 243, 239, .12);  /* 2px deliaca linka sekcií */
  --rule-1:    rgba(244, 243, 239, .10);  /* 1px linka v mriežke */
  --rule-0:    rgba(244, 243, 239, .08);  /* 1px linka medzi riadkami */
  --line-str:  rgba(244, 243, 239, .20);  /* zvýraznená linka a okraj tlačidla */
  --field:     rgba(244, 243, 239, .14);  /* okraj poľa formulára */

  --hover:     var(--lw-ink-800);         /* podfarbenie riadku pri hoveri */
  --sunken:    var(--lw-ink-950);         /* pravý panel v kontakte */
}

/* Dark je primárny režim značky — stránka sa neprepína. */
html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;   /* kotva nesmie skončiť pod sticky hlavičkou */
}

body {
  background: var(--sunken);
  color: var(--lw-text);
  font-family: var(--lw-font-text);
  line-height: var(--lw-lh-base);
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   2. Základ
   -------------------------------------------------------------------------- */
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--lw-font-display);
  font-weight: var(--lw-fw-bold);
  letter-spacing: var(--lw-ls-tight);
  margin: 0;
}

:focus-visible {
  outline: var(--lw-ring-width) solid var(--lw-accent);
  outline-offset: var(--lw-ring-offset);
  border-radius: var(--r);
}

::selection { background: var(--lw-accent); color: var(--lw-on-accent); }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Skryté, kým naň klávesnica neskočí. */
.skip {
  position: absolute;
  left: -9999px;
  z-index: var(--lw-z-toast);
  padding: 12px 16px;
  background: var(--lw-accent);
  color: var(--lw-on-accent);
  font: var(--lw-fw-semibold) 13px var(--lw-font-text);
  border-radius: var(--r);
}
.skip:focus { left: 12px; top: 12px; }

/* Modulárna mriežka nesie stránku — obsah nikdy neuteká na stred. */
.page {
  max-width: var(--page);
  margin: 0 auto;
  background: var(--lw-ink-900);
  border-left: 1px solid var(--rule-2);
  border-right: 1px solid var(--rule-2);
}

.pad  { padding-left: var(--pad); padding-right: var(--pad); }
.rule { border-top: 2px solid var(--rule-2); }

/* Mono štítok nad každou sekciou — nesie číslo alebo kategóriu, nie ozdobu. */
.kicker {
  font: var(--lw-fw-medium) 11px/1 var(--lw-font-mono);
  letter-spacing: var(--lw-ls-overline);
  text-transform: uppercase;
  color: var(--lw-slate-300);
}

.mono  { font-family: var(--lw-font-mono); font-weight: var(--lw-fw-medium); }
.muted { color: var(--lw-slate-300); }

/* --------------------------------------------------------------------------
   3. Tlačidlá — text vždy na ľavú zarážku, aj keď je tlačidlo širšie
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font: var(--lw-fw-semibold) 14px/1 var(--lw-font-text);
  cursor: pointer;
  transition: background var(--lw-dur-fast) var(--lw-ease-out),
              border-color var(--lw-dur-fast) var(--lw-ease-out);
}

/*
   "12px/1", nie "12px". Skratka font: resetuje line-height na normal, a
   JetBrains Mono ma pri normal vysku riadku 17 px — teda viac nez 15 px text
   vedla sipky. Tlacidlo so sipkou preto bolo o 2 px vyssie nez to bez nej
   a v hero stali dve CTA vedla seba nezarovnane.
*/
.btn .arrow { font: var(--lw-fw-medium) 12px/1 var(--lw-font-mono); }

.btn-primary { background: var(--lw-accent); color: var(--lw-on-accent); }
.btn-primary:hover  { background: var(--lw-accent-hover); }
.btn-primary:active { background: var(--lw-accent-pressed); }

.btn-ghost { border-color: var(--line-str); color: var(--lw-text); }
.btn-ghost:hover { border-color: rgba(244, 243, 239, .5); }

.btn-sm { padding: 13px 16px; font-size: 13px; }

/* Roztiahnuté tlačidlo: popisok vľavo, šípka vpravo. */
.btn-block { display: flex; justify-content: space-between; width: 100%; }

/* --------------------------------------------------------------------------
   4. Hlavička
   -------------------------------------------------------------------------- */
.hd {
  position: sticky;
  top: 0;
  z-index: var(--lw-z-header);
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 20px var(--pad);
  background: var(--lw-ink-900);
  border-bottom: 2px solid var(--rule-2);
}

.hd-logo { height: 22px; }
.hd-nav  { display: flex; gap: 28px; align-items: center; margin-left: 16px; }
.hd-sp   { flex: 1; }

.hd-nav a,
.hd-lang {
  font: var(--lw-fw-medium) 11px/1 var(--lw-font-mono);
  letter-spacing: var(--lw-ls-overline);
  text-transform: uppercase;
  color: var(--lw-slate-300);
  transition: color var(--lw-dur-fast) var(--lw-ease-out);
}

.hd-nav a:hover,
.hd-lang:hover { color: var(--lw-text); }

/* Hamburger sa objaví až na mobile (1h). */
.hd-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 22px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hd-burger span { height: 2px; background: var(--lw-text); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero-body { position: relative; padding: 72px var(--pad) 0; }

.hero h1 {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.75rem);   /* 32 → 60 px */
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 28px;
}

.hero .lead {
  font-size: var(--lw-fs-body-lg);
  line-height: 1.65;
  color: var(--lw-slate-300);
  margin: 0 0 32px;
  max-width: 52ch;
  text-wrap: pretty;
}

/* Rez svetla: odstránený krok je medzera, nie ikona.
   Dva Lumen pásy s medzerou presne obkresľujú rez zo symbolu. */
.cut {
  display: inline-block;
  position: relative;
  padding-bottom: 16px;
}
.cut::before,
.cut::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 10px;
  background: var(--lw-accent);
  border-radius: var(--r);
}
.cut::before { left: 0; width: 20%; }
.cut::after  { left: 28%; right: 0; }

/* Prekrytie 12-stĺpcovej mriežky — prepínač `showGrid` z návrhu. */
.grid-overlay {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  padding: 0 var(--pad);
  pointer-events: none;
}
.grid-overlay span { background: rgba(255, 185, 21, .05); }
body[data-grid="on"] .grid-overlay { display: grid; }

/* --------------------------------------------------------------------------
   6. Hero — typografická doska
   -------------------------------------------------------------------------- */
.hero-cols {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: start;
}

.hero .kicker { display: block; margin-bottom: 28px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Servisný list — čísla, ktoré klient hľadá pred prvým e-mailom. */
.speclist { border-top: 2px solid var(--line-str); margin: 0; }
.speclist div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-1);
}
.speclist dt { font-size: var(--lw-fs-body-sm); color: var(--lw-slate-300); margin: 0; }
.speclist dd { font: var(--lw-fw-medium) 13px var(--lw-font-mono); margin: 0; }

/* Pás metrík pod herom */
.metrics {
  margin-top: 64px;
  border-top: 2px solid var(--rule-2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.metrics > div { padding: 28px 32px; border-right: 1px solid var(--rule-1); }
.metrics > div:first-child { padding-left: var(--pad); }
.metrics > div:last-child  { border-right: 0; }

.metrics b {
  display: block;
  font: var(--lw-fw-medium) 34px/1 var(--lw-font-mono);
  letter-spacing: var(--lw-ls-tight);
}
.metrics span {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--lw-slate-300);
}

/* --------------------------------------------------------------------------
   7. Metóda — rez procesu (before / after)
   -------------------------------------------------------------------------- */
.metoda {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
  padding: 0 var(--pad) 48px;
}

.metoda-intro { position: relative; }
.metoda-intro .lead { font-size: var(--lw-fs-body); max-width: 40ch; margin-bottom: 28px; }

.metoda-flow > .flow-title { display: block; margin-bottom: 22px; }
.flow-before { margin-bottom: 36px; }
.flow-after  { margin-bottom: 14px; }

.flowhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-1);
}
.flowhead .val { font: var(--lw-fw-medium) 13px var(--lw-font-mono); color: var(--lw-slate-300); }

.flowhead.after { border-bottom-color: var(--lw-accent-border); }
.flowhead.after .kicker,
.flowhead.after .val { color: var(--lw-lumen-400); }

.flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.step {
  padding: 10px 12px;
  border: 1px solid var(--field);
  background: var(--lw-ink-800);
  border-radius: var(--r);
  font: var(--lw-fw-medium) 12px/1 var(--lw-font-text);
}

/* Prerušovaný okraj = tento krok robí človek. */
.step.manual {
  background: none;
  border-style: dashed;
  border-color: rgba(244, 243, 239, .32);
  color: var(--lw-slate-300);
}
.step.manual em {
  font: var(--lw-fw-medium) 10px var(--lw-font-mono);
  font-style: normal;
}

.link { width: 10px; height: 1px; background: var(--line-str); }

/* Odstránené kroky: medzera vyplnená Lumen pásom — ten istý rez. */
.gap { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.gap .bar { width: 132px; height: 10px; background: var(--lw-accent); border-radius: var(--r); }
.gap span {
  font: var(--lw-fw-medium) 10px var(--lw-font-mono);
  letter-spacing: .06em;
  color: var(--lw-slate-300);
}

.flow-note {
  font: 400 11.5px/1.5 var(--lw-font-mono);
  color: var(--lw-slate-300);
  margin: 0;
}

/* Pás metódy: Pochopiť → … → Zlepšiť */
.method {
  margin-top: 56px;
  border-top: 2px solid var(--rule-2);
  display: flex;
  align-items: center;
}
.method-lbl {
  padding: 24px var(--pad);
  border-right: 1px solid var(--rule-1);
  white-space: nowrap;
}
.method-steps {
  flex: 1;
  min-width: 0;          /* bez toho flex položka narastie na šírku obsahu */
  display: flex;
  align-items: center;
  padding: 0 24px;
  overflow-x: auto;
}
.method-steps b {
  font: var(--lw-fw-medium) 12.5px var(--lw-font-mono);
  padding: 0 14px;
  white-space: nowrap;
}
.method-steps i { color: var(--lw-slate-300); font-style: normal; }

/* --------------------------------------------------------------------------
   8. Výkaz úspory (#uspora)
   -------------------------------------------------------------------------- */
.ledger-wrap {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 56px;
  align-items: start;
}

/* Zostáva to <table> kvôli sémantike (role-y sú na elementoch), ale rozloženie
   drží grid — inak by tabuľkový layout prebil šírky stĺpcov. */
.ledger {
  --cols: 1fr 108px 116px 128px 116px;
  display: block;
  width: 100%;
  border-collapse: collapse;
}
.ledger thead,
.ledger tbody { display: block; }

.ledger-row {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: 20px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-0);
}

.ledger-row.head {
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(244, 243, 239, .16);
  font: var(--lw-fw-medium) 10px var(--lw-font-mono);
  letter-spacing: var(--lw-ls-overline);
  text-transform: uppercase;
  color: var(--lw-slate-300);
}

.ledger-row:not(.head):not(.sum):hover { background: var(--hover); }

.ledger-row .num  { font: 400 13px var(--lw-font-mono); color: var(--lw-slate-300); text-align: right; }
.ledger-row .save { font: var(--lw-fw-medium) 13px var(--lw-font-mono); color: var(--lw-text); text-align: right; }
.ledger-row .proc { font-size: 14px; }
.ledger-row .freq { font: 400 13px var(--lw-font-mono); color: var(--lw-slate-300); }
.ledger-row .head-r { text-align: right; }

/* Jediné Lumen číslo na obrazovke je súčet — pozornosť ide tam, kam ju smerujeme. */
.ledger-row.sum {
  padding: 18px 0 0;
  margin-top: 2px;
  border-top: 2px solid rgba(255, 185, 21, .5);
  border-bottom: 0;
}
.ledger-row.sum .proc { font-weight: var(--lw-fw-semibold); }
.ledger-row.sum .total {
  font: var(--lw-fw-medium) 22px var(--lw-font-mono);
  color: var(--lw-lumen-400);
  text-align: right;
}

.caret {
  display: inline-block;
  width: 9px;
  height: 18px;
  margin-left: 6px;
  vertical-align: -3px;
  background: var(--lw-accent);
  animation: caret 1.1s step-end infinite;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.disclaimer {
  font: 400 11.5px/1.5 var(--lw-font-mono);
  color: var(--lw-slate-300);
  margin: 14px 0 0;
}

.ledger-aside { border-left: 1px solid var(--rule-1); padding-left: 32px; }
.ledger-aside p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lw-slate-300);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.ledger-facts {
  margin-top: 16px;
  border-top: 1px solid var(--rule-1);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.ledger-facts div { display: flex; justify-content: space-between; gap: 16px; }
.ledger-facts dt { font-size: 12.5px; color: var(--lw-slate-300); margin: 0; }
.ledger-facts dd { font: var(--lw-fw-medium) 12.5px var(--lw-font-mono); margin: 0; }

.toolbar {
  border-top: 2px solid var(--rule-2);
  padding: 22px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.toolbar .tools { font: 400 12.5px var(--lw-font-mono); color: var(--lw-slate-300); }

/* --------------------------------------------------------------------------
   7. Služby — register (1e)
   -------------------------------------------------------------------------- */
.sec-head { position: relative; padding: 48px var(--pad) 28px; }

/* Symbol ako vodoznak sekcie — pôvodné SVG z kitu, nikdy neprekreslené.
   Sadne do prázdna vpravo od nadpisu, nie za text. */
.sec-head .watermark {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  opacity: .12;
  pointer-events: none;
}
.sec-head .kicker { display: block; margin-bottom: 16px; }

/* Rez ako oddeľovač sekcií: Lumen segment ukazuje, v ktorej sekcii ste.
   Počet segmentov = poradie sekcie, posledný je akcentový. */
.seg { display: flex; gap: 4px; margin-bottom: 20px; max-width: 460px; }
.seg span { height: 8px; border-radius: var(--r); background: rgba(244, 243, 239, .12); }
.seg .fixed { width: 40px; flex: none; }
.seg .rest  { flex: 1; }
.seg .on    { background: var(--lw-accent); }

/* Telo sekcie zdieľa odsadenie s hlavičkou. */
.sec-body { padding: 0 var(--pad) 8px; }

.sec-head h2 {
  font-size: clamp(1.65rem, 1.1rem + 2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.reg { border-top: 2px solid var(--rule-2); }

.reg-row {
  display: grid;
  grid-template-columns: 56px 1fr 300px 120px 100px;
  align-items: baseline;
  gap: 24px;
  padding: 26px var(--pad);
  border-bottom: 1px solid var(--rule-0);
  transition: background var(--lw-dur-fast) var(--lw-ease-out);
}
.reg-row:last-child { border-bottom: 0; }
.reg-row:hover { background: var(--hover); }

.reg-row .no    { font: var(--lw-fw-medium) 12px var(--lw-font-mono); color: var(--lw-slate-300); }
.reg-row .name  { font: var(--lw-fw-bold) 24px/1.15 var(--lw-font-display); letter-spacing: -.02em; }
.reg-row .what  { font-size: 13.5px; line-height: 1.5; color: var(--lw-slate-300); }
.reg-row .when  { font: 400 12px var(--lw-font-mono); color: var(--lw-slate-300); }
.reg-row .price { font: var(--lw-fw-medium) 13px var(--lw-font-mono); text-align: right; }

.reg-foot {
  border-top: 2px solid var(--rule-2);
  padding: 22px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.reg-foot p { font: 400 12px var(--lw-font-mono); color: var(--lw-slate-300); margin: 0; }

/* --------------------------------------------------------------------------
   9. Odrážky so symbolom
   Namiesto ikony v krúžku nesie odrážku samotný symbol značky.
   -------------------------------------------------------------------------- */
.bullets {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--rule-1);
  padding-top: 20px;
}
.bullets li { display: flex; gap: 12px; align-items: center; font-size: 13.5px; }
.bullets img { width: 14px; height: 14px; flex: none; }


/* --------------------------------------------------------------------------
   9b. Referencie, portfólio, technológie, otázky
   Rovnaká gramatika ako register služieb: riadky oddelené linkou,
   žiadne karty, žiadne tiene, čísla a domény v mono.
   -------------------------------------------------------------------------- */

/* Pás s referenciami pod herom */
.clients {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 20px var(--pad);
}
.clients ul { display: flex; flex-wrap: wrap; gap: 28px; }
.clients li {
  font: var(--lw-fw-medium) 13px var(--lw-font-mono);
  color: var(--lw-slate-300);
}

/* Portfólio */
.port-group + .port-group { border-top: 2px solid var(--rule-2); }

.port-lbl {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--rule-0);
}
.port-lbl .cnt { color: var(--lw-lumen-400); }

.port-row {
  display: grid;
  grid-template-columns: 220px 1fr 220px 20px;
  align-items: baseline;
  gap: 24px;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--rule-0);
  transition: background var(--lw-dur-fast) var(--lw-ease-out);
}
.port-row:last-child { border-bottom: 0; }
.port-row:hover { background: var(--hover); }

.port-row .name { font: var(--lw-fw-bold) 18px/1.2 var(--lw-font-display); letter-spacing: -.02em; }
.port-row .what { font-size: 13.5px; line-height: 1.5; color: var(--lw-slate-300); }
.port-row .dom  { font: 400 12px var(--lw-font-mono); color: var(--lw-slate-300); overflow-wrap: anywhere; }
.port-row .go   { font: var(--lw-fw-medium) 12px var(--lw-font-mono); color: var(--lw-slate-300); text-align: right; }
.port-row:hover .dom,
.port-row:hover .go { color: var(--lw-lumen-400); }

/* Technológie */
.tech {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--rule-2);
  margin: 0;
}
.tech > div {
  padding: 26px var(--pad);
  border-right: 1px solid var(--rule-1);
  border-bottom: 1px solid var(--rule-1);
}
.tech > div:nth-child(3n) { border-right: 0; }
.tech > div:nth-last-child(-n+3) { border-bottom: 0; }

.tech dt { margin-bottom: 12px; }
.tech .tech-list {
  margin: 0;
  font: 400 13px/1.7 var(--lw-font-mono);
  color: var(--lw-slate-300);
}

/* Časté otázky — natívny <details>, bez skriptu */
.faq { border-top: 2px solid var(--rule-2); }

.qa { border-bottom: 1px solid var(--rule-0); }
.qa:last-child { border-bottom: 0; }

.qa summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--pad);
  font: var(--lw-fw-bold) 18px/1.35 var(--lw-font-display);
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
  transition: background var(--lw-dur-fast) var(--lw-ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { background: var(--hover); }

/* Znamienko drží rovnaký rez ako všetko ostatné — plus, nie šípka. */
.qa summary::after {
  content: "+";
  flex: none;
  font: var(--lw-fw-medium) 18px/1 var(--lw-font-mono);
  color: var(--lw-slate-300);
}
.qa[open] summary::after { content: "‘2"; color: var(--lw-lumen-400); }

.qa .a {
  padding: 0 var(--pad) 24px;
  max-width: 86ch;
}
.qa .a p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--lw-slate-300);
}

/* --------------------------------------------------------------------------
   10. Kontakt a pätička (1i)
   -------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 7fr 5fr; }

/*
   Bez min-width: 0 pretekal pri sirke 320 px cely web vodorovne — a to prave
   na sekcii s formularom, teda tam, kde sa rozhoduje o dopyte.
   Preco: grid polozka ma predvolene min-width: auto, takze stlpec nemoze byt
   uzsi nez min-content obsahu. Vnutri je pruh .seg, ktory ma tolko segmentov,
   kolke je poradie sekcie; pri kontakte (07) je to 7 x 40 px a sest medzier,
   dokopy 308 px, k tomu 40 px odsadenia — 348 px v 320 px sirokom okne.
   Segmenty maju flex-shrink, lenze pri vypocte min-content sa neuplatni:
   prehliadac berie flex-basis, nie zmensenu sirku. Zmensovat sa zacnu az
   vtedy, ked stlpec smie byt uzsi — cize po tomto pravidle.
*/
.contact > * { min-width: 0; }

.contact-form {
  padding: 48px var(--pad);
  border-right: 1px solid var(--rule-1);
}
.contact-form h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 12px;
}
.contact-form .intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lw-slate-300);
  margin: 0 0 32px;
  max-width: 52ch;
}
.contact-form .kicker { display: block; margin-bottom: 18px; }
.contact-form .seg { margin-bottom: 20px; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.field { margin-bottom: 20px; }

.field label { display: block; margin-bottom: 8px; }

.field label,
.chips-lbl {
  font: var(--lw-fw-medium) 10px var(--lw-font-mono);
  letter-spacing: var(--lw-ls-overline);
  text-transform: uppercase;
  color: var(--lw-slate-300);
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--lw-ink-800);
  border: 1px solid var(--field);
  border-radius: var(--r);
  font: 400 14px/1.55 var(--lw-font-text);
  color: var(--lw-text);
  transition: border-color var(--lw-dur-fast) var(--lw-ease-out);
}
.field textarea { resize: vertical; }

.field input:hover,
.field textarea:hover { border-color: var(--line-str); }

.field.invalid input,
.field.invalid textarea { border-color: var(--lw-error); }

.err { display: none; margin: 8px 0 0; font: 400 11.5px var(--lw-font-mono); color: var(--lw-error); }
.field.invalid .err { display: block; }

/* Potvrdenie po odoslaní dopytu.
   Rovnaká reč ako toast: plná plocha, rez svetla zľava. Musí byť
   nezameniteľné s bežným textom — bez toho návštevník nevie, či dopyt
   odišiel, a odošle ho druhýkrát. */
.form-ok {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: var(--r);
  border-left: 3px solid var(--lw-accent);
  background: var(--lw-bone);
  color: var(--lw-ink-900);
  font-size: var(--lw-fs-body-sm);
  font-weight: 500;
}

/* Predmet dopytu — chips, nie select. Klik prepína. */
.chips-set { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.chips-lbl { display: block; margin-bottom: 10px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.chip {
  padding: 9px 12px;
  background: none;
  border: 1px solid var(--field);
  border-radius: var(--r);
  font: var(--lw-fw-medium) 10px var(--lw-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lw-slate-300);
  cursor: pointer;
  transition: border-color var(--lw-dur-fast) var(--lw-ease-out),
              color var(--lw-dur-fast) var(--lw-ease-out);
}
.chip:hover { border-color: var(--lw-accent); color: var(--lw-text); }
.chip[aria-pressed="true"] {
  background: var(--lw-accent);
  border-color: var(--lw-accent);
  color: var(--lw-on-accent);
}

.submit-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.submit-row .note { font: 400 12px/1.5 var(--lw-font-mono); color: var(--lw-slate-300); }

/* Pravý panel odstraňuje hlavnú obavu pred odoslaním: čo bude a dokedy. */
.contact-next { padding: 48px var(--pad); background: var(--sunken); }
.contact-next > .kicker { display: block; margin-bottom: 24px; }

.next-step {
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule-1);
}
.next-step:last-of-type { border-bottom: 0; padding-bottom: 28px; margin-bottom: 0; }
.next-step .no { font: var(--lw-fw-medium) 12px var(--lw-font-mono); color: var(--lw-lumen-400); }
.next-step b { display: block; margin-bottom: 6px; font: var(--lw-fw-semibold) 14px var(--lw-font-text); }
.next-step p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--lw-slate-300); }

.direct {
  border-top: 2px solid var(--rule-2);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.direct a { font: var(--lw-fw-medium) 15px var(--lw-font-mono); }
.direct a:hover { color: var(--lw-lumen-400); }
.direct span { font-size: 12.5px; color: var(--lw-slate-300); }

/* Pätička je mriežka, nie stred. */
.foot {
  border-top: 2px solid var(--rule-2);
  padding: 36px var(--pad);
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 2fr;
  gap: 32px;
}
.foot img { height: 20px; margin-bottom: 14px; }
.foot .about { font: 400 12px/1.6 var(--lw-font-mono); color: var(--lw-slate-300); }
.foot nav { display: flex; flex-direction: column; gap: 10px; }
.foot nav .kicker { font-size: 10px; margin-bottom: 4px; }
.foot nav a { font-size: 13px; color: var(--lw-slate-300); transition: color var(--lw-dur-fast) var(--lw-ease-out); }
.foot nav a:hover { color: var(--lw-text); }
.foot nav span { font-size: 13px; color: var(--lw-slate-300); }
.foot .m { font-family: var(--lw-font-mono); }

/* Tlacidlo, ktore vyzera ako odkaz v paticke. Otvara listu suhlasu, cize
   vykonava akciu — odkaz by nikam neviedol. Vzhlad musi sediet so susedmi,
   inak by vycnievalo. */
.foot nav .linkbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--lw-slate-300);
  text-align: left;
  cursor: pointer;
  transition: color var(--lw-dur-fast) var(--lw-ease-out);
}
.foot nav .linkbtn:hover { color: var(--lw-text); }

.legal {
  border-top: 1px solid var(--rule-1);
  padding: 18px var(--pad);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font: 400 11.5px var(--lw-font-mono);
  color: var(--lw-slate-300);
}

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   11. Toast po odoslaní formulára
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--lw-z-toast);
  max-width: 380px;
  padding: 14px 18px;
  border-radius: var(--r);
  border-left: 3px solid var(--lw-accent);
  background: var(--lw-bone);
  color: var(--lw-ink-900);
  font-size: var(--lw-fs-body-sm);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity var(--lw-dur-base) var(--lw-ease-out),
              transform var(--lw-dur-base) var(--lw-ease-out);
}
.toast.show { transform: none; opacity: 1; }
.toast.error { border-left-color: var(--lw-error-600); }


/* --------------------------------------------------------------------------
   13. Podstránky — súvislý text a právny dokument
   Rovnaká mriežka ako homepage, len úzky stĺpec: dlhý text sa nečíta
   cez celú 1280 dosku.
   -------------------------------------------------------------------------- */
.page-head { padding: 56px var(--pad) 36px; }
.page-head .kicker { display: block; margin-bottom: 16px; }
.page-head h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 16px;
}
.page-head .lede {
  font-size: var(--lw-fs-body-lg);
  line-height: 1.6;
  color: var(--lw-slate-300);
  margin: 0;
  max-width: 62ch;
}
.page-head .meta {
  margin-top: 20px;
  font: 400 12px var(--lw-font-mono);
  color: var(--lw-slate-300);
}

.prose {
  max-width: 78ch;
  padding: 8px var(--pad) 56px;
  border-top: 2px solid var(--rule-2);
  padding-top: 40px;
}
.prose > section + section { margin-top: 40px; }

.prose h2 {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}
.prose h3 {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 24px 0 10px;
}
.prose p,
.prose li {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--lw-slate-300);
  margin: 0 0 12px;
}
.prose ul { margin: 0 0 12px; }
.prose ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}
/* Odrážka je rez, nie bodka. */
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 3px;
  background: var(--lw-accent);
  border-radius: var(--r);
}
.prose a { color: var(--lw-lumen-400); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--lw-text); }
.prose strong { color: var(--lw-text); font-weight: var(--lw-fw-semibold); }

/* Miesto, ktoré musí doplniť prevádzkovateľ — vizuálne odlíšené,
   aby sa nedostalo do produkcie nevyplnené. */
.todo {
  display: inline-block;
  padding: 1px 6px;
  border: 1px dashed var(--lw-accent-border);
  border-radius: var(--r);
  font: var(--lw-fw-medium) 12px var(--lw-font-mono);
  color: var(--lw-lumen-400);
}

/* Zhrnutie na začiatku právneho textu */
.summary {
  border: 1px solid var(--rule-1);
  border-left: 3px solid var(--lw-accent);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 0 0 32px;
}
.summary p:last-child { margin-bottom: 0; }

/* Tabuľka v právnom texte (kategórie údajov, doby uchovávania) */
.dtable { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.dtable th,
.dtable td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule-0);
  font-size: 13.5px;
  line-height: 1.6;
}
.dtable th {
  font: var(--lw-fw-medium) 10px var(--lw-font-mono);
  letter-spacing: var(--lw-ls-overline);
  text-transform: uppercase;
  color: var(--lw-slate-300);
  border-bottom-color: var(--rule-1);
}
.dtable td { color: var(--lw-slate-300); }
.dtable td:first-child { color: var(--lw-text); }

/* Obsah dokumentu */
/* Tlacidla na chybovej stranke. Jedno primarne, zvysok tiche — rovnaka
   hierarchia ako inde na webe, aby chybova stranka nevyzerala ako cudzia. */
.err-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }

.toc { border-top: 2px solid var(--rule-2); padding: 22px var(--pad); }
.toc ol { margin: 12px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 40px; }
.toc li { margin-bottom: 8px; break-inside: avoid; }
.toc a { font-size: 13.5px; color: var(--lw-slate-300); }
.toc a:hover { color: var(--lw-text); }
.toc .n { font: var(--lw-fw-medium) 11px var(--lw-font-mono); color: var(--lw-lumen-400); margin-right: 8px; }

/* --------------------------------------------------------------------------
   14. Lišta súhlasu
   Zobrazí sa len vtedy, keď je naozaj čo odsúhlasiť (pozri consent.js).
   Odmietnuť musí byť rovnako ľahké ako prijať — preto rovnaké tlačidlá.
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--lw-z-modal);
  background: var(--lw-ink-950);
  border-top: 2px solid var(--lw-accent);
}
.consent[hidden] { display: none; }

.consent-in {
  max-width: var(--page);
  margin: 0 auto;
  padding: 20px var(--pad);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.consent h2 {
  font: var(--lw-fw-bold) 16px/1.3 var(--lw-font-display);
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.consent p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lw-slate-300);
  max-width: 70ch;
}
.consent p a { color: var(--lw-lumen-400); text-decoration: underline; text-underline-offset: 3px; }

.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-actions .btn { white-space: nowrap; }

@media (max-width: 720px) {
  .consent-in { grid-template-columns: 1fr; gap: 18px; padding: 18px var(--pad); }
  .consent-actions .btn { flex: 1 1 auto; justify-content: center; }
  .toc ol { columns: 1; }
  .prose { padding-bottom: 40px; }
}


/* --------------------------------------------------------------------------
   15. Tabuľka služieb (návrh 1f) — podstránka Služby
   Najhustejšia verzia z návrhu. Stĺpec „prvý výstup" nesie odpoveď na
   otázku „čo reálne dostanem" namiesto opisu služby.
   -------------------------------------------------------------------------- */
.svc-table-wrap {
  border-top: 2px solid var(--rule-2);
  padding: 0 var(--pad) 8px;
  overflow-x: auto;
}
.svc-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.svc-table th {
  text-align: left;
  padding: 16px 24px 12px 0;
  border-bottom: 2px solid var(--line-str);
  font: var(--lw-fw-medium) 10px var(--lw-font-mono);
  letter-spacing: var(--lw-ls-overline);
  text-transform: uppercase;
  color: var(--lw-slate-300);
  white-space: nowrap;
}
.svc-table th:last-child,
.svc-table .from { text-align: right; }

.svc-table td {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--rule-0);
  vertical-align: baseline;
}
.svc-table tbody tr:hover { background: var(--hover); }

.svc-table .svc  { font: var(--lw-fw-medium) 14px var(--lw-font-text); width: 240px; }
.svc-table .out  { font-size: 13.5px; line-height: 1.5; color: var(--lw-slate-300); }
.svc-table .when { font: 400 13px var(--lw-font-mono); color: var(--lw-slate-300); width: 132px; white-space: nowrap; }
.svc-table .from { font: var(--lw-fw-medium) 13px var(--lw-font-mono); width: 108px; white-space: nowrap; padding-right: 0; }

/* Dvojstĺpcová tabuľka faktov vnútri popisu služby */
.prose .dtable td:first-child {
  width: 160px;
  font: var(--lw-fw-medium) 10px var(--lw-font-mono);
  letter-spacing: var(--lw-ls-overline);
  text-transform: uppercase;
  color: var(--lw-slate-300);
}

@media (max-width: 720px) {
  .svc-table-wrap { padding-left: var(--pad); padding-right: var(--pad); }
  .prose .dtable td:first-child { width: 120px; }
}

/*
   Na najuzsich displejoch presla ochrana udajov cez okraj o 19 px.
   Tabulky maju tri stlpce textu a "width: 100%" je pri tabulke len navrh —
   ked sa obsah nezmesti, tabulka kontajner jednoducho prerastie a s nou aj
   cela stranka. Prvy stlpec bol navyse zamknuty na 120 px.

   table-layout: fixed nuti prehliadac drzat sa zadanych sirok a text zalomit.
   Tabulka sa tak zmesti cela a nemusi sa vodorovne rolovat — pri pravnom
   dokumente je citanie s vodorovnym posuvnikom to posledne, co niekto chce.
*/
@media (max-width: 420px) {
  .prose .dtable { table-layout: fixed; }
  .prose .dtable td:first-child { width: 90px; }
}

/* --------------------------------------------------------------------------
   12. Responzívne — mriežka ide na jeden stĺpec, linky zostávajú (1h)
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .reg-row { grid-template-columns: 44px 1fr 200px 110px 92px; gap: 16px; }
  .reg-row .name { font-size: 21px; }
  .ledger { --cols: 1fr 92px 100px 108px 100px; }
  .hero-cols { gap: 40px; }
  .metoda { gap: 36px; }
  .ledger-wrap { gap: 36px; }
}

@media (max-width: 1024px) {
  :root { --pad: 28px; }

  /* Navigácia sa zbalí pod hamburger a rozvinie ako zoznam, nie overlay. */
  .hd { flex-wrap: wrap; gap: 20px; }
  .hd-nav { display: none; }
  .hd-burger { display: flex; }

  .hd.open .hd-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 4px 0 0;
    border-top: 1px solid var(--rule-1);
  }
  .hd.open .hd-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-0);
  }
  .hd.open .hd-nav a:last-child { border-bottom: 0; }

  .hero-cols,
  .metoda,
  .ledger-wrap,
  .contact { grid-template-columns: 1fr; }

  .hero-cols, .metoda { gap: 40px; align-items: start; }
  .hero-body { padding-top: 48px; }

  .ledger-aside { border-left: 0; border-top: 1px solid var(--rule-1); padding: 28px 0 0; }
  .contact-form { border-right: 0; border-bottom: 1px solid var(--rule-1); }

  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics > div:nth-child(2n) { border-right: 0; }
  .metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-1); }
  .metrics > div:nth-child(odd) { padding-left: var(--pad); }

  /* Na úzkej hlavičke by vodoznak sadol na nadpis. */
  .sec-head .watermark { display: none; }

  .foot { grid-template-columns: 1fr 1fr; }

  .port-row { grid-template-columns: 180px 1fr 20px; }
  .port-row .dom { display: none; }
  .tech { grid-template-columns: repeat(2, 1fr); }
  .tech > div:nth-child(3n) { border-right: 1px solid var(--rule-1); }
  .tech > div:nth-child(2n) { border-right: 0; }
  .tech > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule-1); }
  .tech > div:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 720px) {
  :root { --pad: 20px; }

  .hd { padding: 16px var(--pad); gap: 16px; }
  .hd-logo { height: 18px; }

  /* CTA sa skrýva — kontakt je v rozbalenom menu.
     Prepínač jazyka NIE. V menu nie je, takže bez neho sa z telefónu na
     druhú jazykovú verziu nedá dostať vôbec. Je krátky („SK / EN“),
     vedľa hamburgera sa zmestí aj pri 320 px. */
  .hd-cta { display: none; }

  /* Text má 11 px, takže samotný odkaz by mal dotykovú plochu 11 px vysokú.
     Manuál žiada minimálne 44 px. Záporné zvislé okraje rušia prídavok
     dovnútra, takže sa plocha zväčší, ale hlavička nenarastie. */
  .hd-lang {
    margin: -17px 0 -17px auto;
    padding: 17px 6px;
  }

  /* To isté pre hamburger — dva prúžky s medzerou majú dohromady 9 px. */
  .hd-burger {
    margin: -18px -6px;
    padding: 18px 6px;
    box-sizing: content-box;
  }

  .hero-body { padding-top: 32px; }
  .hero h1 { margin-bottom: 18px; }
  .hero .lead { font-size: 15px; margin-bottom: 24px; }

  /* Tlačidlá 54 px vysoké, popisok vľavo a šípka vpravo. */
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { justify-content: space-between; padding: 17px 18px; font-size: 15px; }

  .cut { padding-bottom: 10px; }
  .cut::before { width: 22%; height: 7px; }
  .cut::after  { left: 30%; height: 7px; }

  .metrics { margin-top: 32px; }
  .metrics > div { padding: 20px; }
  .metrics > div:nth-child(odd) { padding-left: 20px; }
  .metrics b { font-size: 26px; }
  .metrics span { font-size: 11.5px; margin-top: 6px; }

  /* Register sa na mobile skladá do kariet — čísla ostávajú vpravo,
     aby sa dali porovnávať zvisle. */
  .reg-row {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 20px var(--pad);
  }
  .reg-row .no    { grid-column: 1 / -1; }
  .reg-row .name  { grid-column: 1 / -1; font-size: 18px; }
  .reg-row .what  { grid-column: 1 / -1; margin-bottom: 4px; font-size: 13px; }
  .reg-row .when  { font-size: 11px; }
  .reg-row .price { font-size: 11px; }

  /* Výkaz: hlavička tabuľky odpadne, riadok nesie vlastné popisky. */
  .ledger-row.head { display: none; }
  .ledger-row {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 16px 0;
  }
  .ledger-row .proc { grid-column: 1 / -1; }
  .ledger-row .num  { text-align: left; }
  .ledger-row .save { grid-column: 2; }
  .ledger-row.sum { grid-template-columns: 1fr auto; }
  .ledger-row.sum .total { grid-column: 2; font-size: 18px; }

  /* Diagram procesu ide pod seba. Vodorovné spojky by potom viseli
     vo vzduchu, tak zmiznú — poradie nesie samotné stohovanie. */
  .flow { flex-direction: column; align-items: stretch; }
  .flow .link { display: none; }
  .step { text-align: left; }
  .gap { align-items: flex-start; }
  .gap .bar { width: 100%; }

  .method { flex-direction: column; align-items: stretch; margin-top: 32px; }
  .method-lbl { border-right: 0; border-bottom: 1px solid var(--rule-1); padding: 16px var(--pad); }
  .method-steps { padding: 16px var(--pad); }

  .pair { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .submit-row .btn { width: 100%; justify-content: space-between; padding: 17px 18px; font-size: 15px; }

  .foot { grid-template-columns: 1fr; gap: 24px; }

  /* Portfólio ide do kariet: názov, popis, doména pod sebou. */
  .port-row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px var(--pad); }
  .port-row .name { grid-column: 1; }
  .port-row .go   { grid-column: 2; grid-row: 1; }
  .port-row .what { grid-column: 1 / -1; font-size: 13px; }
  .port-row .dom  { display: block; grid-column: 1 / -1; font-size: 11px; }

  .tech { grid-template-columns: 1fr; }
  .tech > div { border-right: 0 !important; border-bottom: 1px solid var(--rule-1) !important; }
  .tech > div:last-child { border-bottom: 0 !important; }

  /* Na veľmi úzkom displeji sa segmenty zmestia tak, že sa zmrštia. */
  .seg { max-width: 100%; }
  .seg .fixed { flex: 0 1 40px; min-width: 10px; }

  .qa summary { font-size: 16px; padding: 18px var(--pad); }
  .qa .a { padding-bottom: 20px; }

  .clients { gap: 16px; padding: 18px var(--pad); }
  .clients ul { gap: 16px; }
  .clients li { font-size: 12px; }
}

@media print {
  .hd, .toast { display: none; }
  .page { border: 0; }
}