/* Uvodna stranka (index, odbory) podla navrhu Landing V2 z Claude Design,
   20. 10. 2026. Jedna struktura pre oba motivy — tmavy a svetly sa lisia len
   tokenmi (base.css, track-colors.css). Stranka nesie farbu zvoleneho odboru:
   --track ide z data-track na <body>, dlazdice maju vlastny data-track.

   Nacitava ju LEN rozcestnik (namiesto landing.css) a stranky odborov (po
   landing.css, kvoli spolocnej hlavicke a pate). Preto:
     .lp-*      spolocna hlavicka, tlacidla a pata (rozcestnik aj odbory)
     .lp2 …     vsetko ostatne z rozcestnika
     .lp2t …    jemne zjednotenie vzhladu stranok odborov
   landing.css sa tu neprepisuje, nacitavaju ho aj sprievodca, objednavka,
   stav a administracia.

   Ani jeden hex — farby su tokeny z base.css a track-colors.css. Navrh pise
   Inter 800; nase pismo ma rozsah 400–700, prehliadac ho zaokruhli na 700. */

body.lp2 { height: auto; min-height: 100%; -webkit-font-smoothing: antialiased;
  /* Navrh z 26. 10. 2026: pozadie uz nie je zafarbene odborom. */
  background: var(--bg) }
.lp2 {
  --soft: color-mix(in srgb, var(--track-ink) 13%, transparent);   /* tcSoft: tmavy/biely zavoj na ploche odboru */
  --track-15: color-mix(in srgb, var(--track) 15%, transparent);
  --track-shadow: color-mix(in srgb, var(--track) 33%, transparent);
}
.lp2 a { color: inherit }
.lp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 56px }

.lp-top .ico, .lp2 .ico {
  width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; display: block; flex: 0 0 auto;
}
:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; border-radius: 4px }
.ico-16 .ico { width: 16px; height: 16px; stroke-width: 2.2 }
.ico-20 .ico { width: 20px; height: 20px }
.ico-28 .ico { width: 28px; height: 28px }

/* ---- tlacidla -------------------------------------------------------------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 14px;
  background: var(--signal); color: var(--signalink); border: 0;
  font: 800 16px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, transform .1s;
}
.lp2 a.lp-btn, .lp-top a.lp-btn { color: var(--signalink) }
.lp-btn:active { transform: scale(.97) }
.lp-btn.big { min-height: 64px; padding: 0 30px; border-radius: 18px; font-size: 19px }
.lp-arrow { font-size: 1.15em; line-height: 1 }
.lp-btn.soft, .lp2 a.lp-btn.soft { background: var(--panel); color: var(--ink); font-weight: 700 }
.lp-btn.soft.big { padding: 0 26px; font-size: 18px }
.lp-btn.ghost, .lp2 a.lp-btn.ghost, .lp-top a.lp-btn.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line2); font-weight: 600;
}
.lp-btn.dark, .lp2 a.lp-btn.dark { background: var(--ink); color: var(--bg) }
.lp-btn.track, .lp2 a.lp-btn.track { background: var(--track); color: var(--track-ink); transition: background .4s }
.lp-btn.inv, .lp2 a.lp-btn.inv { background: var(--track-ink); color: var(--track); transition: color .4s }
@media (hover: hover) and (pointer: fine) {
  .lp-btn:hover { filter: brightness(1.07) }
  .lp-btn.soft:hover { background: var(--panel2); filter: none }
  .lp-btn.ghost:hover, .lp2 a.lp-btn.ghost:hover, .lp-top a.lp-btn.ghost:hover { border-color: var(--track); filter: none }
}

/* ---- hlavicka -------------------------------------------------------------- */
.lp-top { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top);
  background: var(--bg) }
.lp-topin { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px }
.lp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0 }
.lp-brand .spark { display: flex; color: var(--ink) }
.lp-brand .spark .ico { width: 34px; height: 34px; stroke: none; fill: none }
.lp-word { font-weight: 800; font-size: 17px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap }
.lp-login { white-space: nowrap }
.lp-nav { display: flex; gap: 4px; font-size: 16px; font-weight: 600 }
.lp-nav a { color: var(--ink2); text-decoration: none; padding: 10px 14px; border-radius: 10px }
@media (hover: hover) and (pointer: fine) { .lp-nav a:hover { color: var(--ink); background: var(--panel) } }
.lp-actions { display: flex; align-items: center; gap: 10px }
.lp-login, .lp2 a.lp-login, .lp-top a.lp-login { padding: 12px 16px; font-size: 16px; font-weight: 600; color: var(--ink2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; border-radius: 10px }
@media (hover: hover) and (pointer: fine) { .lp-top a.lp-login:hover { color: var(--ink); background: var(--panel) } }
.lp-top .tbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid transparent;
  color: var(--ink2); border-radius: 10px; font-family: inherit; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .lp-top .tbtn:hover { color: var(--ink); background: var(--panel); border-color: var(--line) } }
.lp-top .tbtn .ico { width: 19px; height: 19px }
.lp-top .tbtn .tlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---- spolocne prvky sekcii ------------------------------------------------- */
.lp2 .lp-sec { padding: 96px 0 }
.lp2 .lp-tinted { background: var(--lp-band); padding: 88px 0 }
.lp-eyebrow {
  font: 700 13px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mut); margin: 0 0 10px;
}
.lp-eyebrow.lp-red { color: var(--bad-text) }
.lp2 h2 { margin: 0; font-size: 52px; line-height: 1.02; letter-spacing: -.03em; font-weight: 800 }
.lp2 .lp-wideh { max-width: 820px }
.lp2 .lp-lede { margin: 0; font-size: 21px; line-height: 1.55; color: var(--ink2); max-width: 580px; text-wrap: pretty }
.lp-sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px }
.lp-sechead h2 { flex: 1 1 auto; min-width: 0 }
.lp-sechead .lp-secnote { flex: 0 0 auto }
.lp-secnote { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink2); max-width: 420px; text-align: right }
.lp-fine { font-size: 15px; color: var(--mut); margin: 24px 0 0; line-height: 1.55 }
.lp-atb {
  display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 5px;
  font: 700 11px/1.2 var(--font-mono); background: var(--badge-bg); color: var(--badge-ink);
}

/* ---- hero ----------------------------------------------------------------- */
.lp-hero { padding: 56px 0 96px; overflow: clip } /* natocene karty vzadu nesmu rozsirit stranku na mobile */
.lp-herogrid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; align-items: center }
.lp-herotext { display: flex; flex-direction: column; gap: 28px; min-width: 0; animation: lpIn .6s both }
.lp-pill {
  align-self: flex-start; display: flex; align-items: center; gap: 10px; margin: 0; min-height: 42px;
  padding: 0 16px 0 8px; border-radius: 21px; background: var(--panel); font-size: 15px; font-weight: 700; flex-wrap: wrap;
}
.lp-pillicon { width: 28px; height: 28px; border-radius: 14px; background: var(--track); color: var(--track-ink); display: flex; align-items: center; justify-content: center; transition: background .4s }
.lp-pillrest { color: var(--mut); font-weight: 500 }
.lp2 h1 { margin: 0; font-size: 80px; line-height: .98; font-weight: 800; letter-spacing: -.04em; text-wrap: balance }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.lp-bullets { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--ink2) }
.lp-bullets li { display: flex; align-items: center; gap: 8px }
.lp-bullets li::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--track); transition: background .4s }

.lp-stage { position: relative; height: 560px }
.lp-stack, .lp-hcard { position: absolute; left: 52px; top: 46px; width: 376px; height: 440px; border-radius: 34px; background: var(--track); transition: background .5s }
.lp-stack.s2 { opacity: .28; transform: rotate(-9deg) }
.lp-stack.s1 { opacity: .5; transform: rotate(-4deg) }
.lp-hcard {
  color: var(--track-ink); padding: 30px; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  box-shadow: 0 30px 60px var(--track-shadow); transition: background .5s, box-shadow .5s;
}
.lp-hcdeco { position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 90px; background: var(--soft) }
.lp-hctop { display: flex; justify-content: space-between; align-items: center; position: relative; font: 700 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .85 }
.lp-hcpos { letter-spacing: 0 }
.lp-hcbody { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; position: relative; min-height: 0 }
.lp-hcbody.in { animation: lpWord .3s both }
.hw-at { align-self: flex-start; font: 700 11px/1.2 var(--font-mono); text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--badge-bg); color: var(--badge-ink) }
.hw-de { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; text-wrap: balance }
.hw-de.lg { font-size: 32px }
.hw-de.xl { font-size: 26px }
.hw-pron { font: 600 24px/1.25 var(--font-mono); opacity: .9; overflow-wrap: anywhere }
.hw-line { height: 2px; background: var(--soft); margin: 6px 0 }
.hw-sk { font-size: 26px; font-weight: 700; line-height: 1.2 }
.lp-hcact { display: flex; gap: 10px; position: relative }
.lp-hcplay {
  width: 64px; height: 64px; flex: none; border-radius: 32px; border: 0; padding: 0; cursor: pointer;
  background: var(--track-ink); color: var(--track); display: flex; align-items: center; justify-content: center; transition: transform .1s, color .4s;
}
.lp-hcplay:active { transform: scale(.92) }
.lp-hcplay .ico { width: 26px; height: 26px; fill: currentColor; stroke: none; margin-left: 3px }
.lp-hcnext {
  flex: 1; min-height: 64px; border-radius: 20px; border: 0; background: color-mix(in srgb, var(--track-ink) 6%, transparent); color: inherit;
  font: 800 17px/1.2 var(--font-sans); cursor: pointer; transition: transform .1s;
}
.lp-hcnext:active { transform: scale(.97) }
.lp2 .ipause { display: none }
.lp2 .speaking .iplay { display: none }
.lp2 .speaking .ipause { display: block }
.lp2 .speaking .ipause .ico { margin-left: 0 }

.lp-float {
  position: absolute; display: flex; align-items: center; gap: 8px; padding: 0 16px; min-height: 48px; border-radius: 24px;
  background: var(--panel); box-shadow: 0 12px 30px var(--shadow-deep); font-weight: 800; font-size: 16px;
  animation: lpBob 2.8s ease-in-out infinite alternate;
}
.lp-float .ico { width: 20px; height: 20px; fill: currentColor; stroke-width: 1.5 }
.lp-float.f1 { left: 0; top: 20px; color: var(--accent-text) }
.lp-float.f2 { right: 0; top: -6px; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border-radius: 18px; animation-duration: 3.3s; animation-delay: -1s }
.lp-float.f2 small { font: 700 11px/1.2 var(--font-mono); text-transform: uppercase; color: var(--mut) }
.lp-float.f3 { left: 150px; bottom: -14px; z-index: 3; gap: 10px; padding: 12px 16px; border-radius: 18px; animation-duration: 3s; animation-delay: -.5s }
/* Sova (navrh 26. 10. 2026): sedi na hornom okraji karty slova, zrkadlovo otocena. */
.lp-sova { position: absolute; left: 172px; top: -60px; width: 136px; z-index: 2; pointer-events: none; animation: lpSova 2.8s ease-in-out infinite alternate } /* v navrhu -92 px; hero ma overflow: clip, vyssie by sove odrezalo hlavu */
.lp-sova img { display: block; width: 100%; height: auto; transform: scaleX(-1) }
.lp-sova span { display: block; margin: -10px auto 0; width: 130px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.25); filter: blur(6px) }
@keyframes lpSova { from { transform: translateY(-5px) rotate(-2deg) } to { transform: translateY(5px) rotate(2deg) } }
.lp-float.f4 { right: 20px; bottom: 70px; min-height: 44px; border-radius: 22px; background: var(--ok-bg); color: var(--ok-ink); animation-duration: 2.6s; animation-delay: -1.5s }
@keyframes lpIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes lpBob { from { translate: 0 -7px } to { translate: 0 7px } }
@keyframes lpWord { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .lp-float, .lp-sova, .lp-herotext, .lp-hcbody.in { animation: none } }

/* ---- odbory --------------------------------------------------------------- */
.lp-odbory { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start }
.lp-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px }
.lp2 .tracktile {
  min-height: 92px; border-radius: 18px; background: var(--panel); color: var(--ink); padding: 12px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; text-decoration: none;
  transition: transform .25s cubic-bezier(.25,1,.5,1), background .2s, box-shadow .25s;
}
.lp2 .tracktile .ticon { width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--tid) 15%, transparent); color: var(--tid); display: flex; align-items: center; justify-content: center }
.lp2 .tracktile .tname { font-size: 14px; font-weight: 700; line-height: 1.2 }
.lp2 .tracktile[aria-current="true"] { background: var(--track); color: var(--track-ink); transform: scale(1.04); box-shadow: 0 12px 26px var(--track-shadow) }
.lp2 .tracktile[aria-current="true"] .ticon { background: var(--soft); color: inherit }
@media (hover: hover) and (pointer: fine) { .lp2 .tracktile:hover { transform: translateY(-3px) } .lp2 .tracktile[aria-current="true"]:hover { transform: scale(1.04) } }

.lp-learn {
  position: sticky; top: 20px; border-radius: 28px; background: var(--panel); padding: 26px;
  display: flex; flex-direction: column; gap: 18px;
}
.lp-learnhead { display: flex; align-items: center; gap: 14px }
.lp-learnhead > div { display: flex; flex-direction: column; min-width: 0 }
.lp-learnicon { width: 54px; height: 54px; flex: none; border-radius: 17px; background: var(--track); color: var(--track-ink); display: flex; align-items: center; justify-content: center; transition: background .4s }
.lp-learnk { font-size: 14px; color: var(--mut) }
.lp-learnn { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15 }
.lp-layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.lp-layers li { border-radius: 14px; background: var(--panel2); padding: 12px 14px; display: flex; flex-direction: column; gap: 1px }
.lp-layers li.own { background: var(--track); color: var(--track-ink); transition: background .4s }
.lp-layers .ln { font-size: 15px; font-weight: 800; line-height: 1.3 }
.lp-layers .ls { font-size: 13px; line-height: 1.35; opacity: .85 }
.lp-trwords { display: flex; flex-direction: column }
.lp-tw { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line) }
.lp-twtxt { flex: 1; display: flex; flex-direction: column; min-width: 0 }
.twde { font-size: 16px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere }
.twsk { font-size: 14px; line-height: 1.4; color: var(--ink2) }
.twpron { font-family: var(--font-mono); color: var(--track); transition: color .4s }
.lp-twplay {
  width: 44px; height: 44px; flex: none; border-radius: 22px; border: 0; padding: 0; cursor: pointer;
  background: var(--track-15); color: var(--track); display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.lp-twplay .ico { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 2px }
.lp-twplay.speaking { background: var(--track); color: var(--track-ink) }
.lp-learn .lp-btn { min-height: 56px; border-radius: 16px; font-size: 17px; white-space: normal; text-align: center }

/* ---- ako to funguje --------------------------------------------------------- */
.lp2 #ako .lp-wideh { margin-bottom: 44px }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.lp-steps li { border-radius: 26px; background: var(--panel); padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 240px }
.lp-steps li.hl { background: var(--track); color: var(--track-ink); transition: background .4s }
.lp-stepn { width: 48px; height: 48px; border-radius: 24px; background: var(--track); color: var(--track-ink); display: flex; align-items: center; justify-content: center; font: 800 18px/1 var(--font-mono); transition: background .4s }
.lp-steps li.hl .lp-stepn { background: var(--track-ink); color: var(--track) }
.lp-steps h3 { margin: auto 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2 }
.lp-steps p { margin: 0; font-size: 17px; line-height: 1.5; opacity: .85 }

/* ---- funkcie ---------------------------------------------------------------- */
.lp2 .lp-featsec { padding: 0 0 96px }
.lp-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.lp-feat { border-radius: 28px; background: var(--panel); padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.lp-feat.wide { grid-column: span 2; gap: 18px }
.lp-feat h3 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2 }
.lp-feat p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink2) }
.lp-feat.wide p { font-size: 16px; max-width: 460px }
.lp-feat.track { background: var(--track); color: var(--track-ink); transition: background .4s }
.lp-feat.track p { color: inherit; font-size: 16px; opacity: .9 }
.lp-feathead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap }
.lp-feathead > div:first-child { display: flex; flex-direction: column; gap: 6px }
.lp-feattop { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.lp-segs { display: flex; flex-direction: column; gap: 6px; align-items: flex-end }
.lp-seg { display: flex; background: var(--panel2); border-radius: 12px; padding: 3px }
.lp-seg button {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--mut);
  font: 700 14px/1 var(--font-sans); cursor: pointer; transition: background .2s;
}
.lp-seg button[aria-pressed="true"] { background: var(--track); color: var(--track-ink) }
.lp-seg button:active { transform: scale(.97) }
/* Prepinace su 36 px vysoke ako v navrhu; dotykovy ciel 44 px dopĺňa neviditelny presah. */
.lp-seg button { position: relative }
.lp-seg button::before { content: ""; position: absolute; inset: -4px 0; }
.lp-democards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.lp-demo {
  border-radius: 20px; background: var(--panel2); color: var(--ink); padding: 18px; border: 0; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; font-family: inherit; min-width: 0; transition: background .25s, transform .15s;
}
.lp-demo:active { transform: scale(.97) }
.lp-demo .dtop { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.lp-demo .dde { font-size: 19px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere }
.lp-demo .dic .ico { width: 18px; height: 18px; fill: currentColor; stroke: none }
.lp-demo .dpron { font: 600 15px/1.3 var(--font-mono); color: var(--track); overflow-wrap: anywhere; transition: color .4s }
.lp-demo .dsk { font-size: 15px; line-height: 1.4; opacity: .85 }
.lp-demo.speaking { background: var(--track); color: var(--track-ink) }
.lp-demo.speaking .dpron { color: inherit }
.lp-bignum { margin-top: auto !important; display: flex; align-items: baseline; gap: 8px; opacity: 1 !important }
.lp-bignum b { font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1 }
.lp-bignum span { font-size: 16px; font-weight: 700 }
.lp-tag { font: 700 11px/1.2 var(--font-mono); text-transform: uppercase; padding: 4px 8px; border-radius: 6px }
.lp-tag.ok { background: var(--ok-bg); color: var(--ok-ink) }
.lp-search {
  width: 100%; min-height: 50px; border-radius: 14px; border: 0; background: var(--panel2); color: var(--ink);
  padding: 0 14px; font: 600 17px/1.2 var(--font-sans); -webkit-appearance: none; appearance: none;
}
.lp-search::placeholder { color: var(--mut); font-weight: 500 }
.lp-search:focus { outline: 2px solid var(--track); outline-offset: 0 }
.lp-dictres { display: flex; flex-direction: column; gap: 12px }
.lp-dres { display: flex; flex-direction: column; gap: 1px; animation: lpIn .3s both }
.lp-dres .dvia { font: 600 12px/1.3 var(--font-mono); color: var(--track) }
.lp-dres .dline { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800 }
.lp-dres .dsk { font-size: 15px; color: var(--ink2) }
.lp-bub { max-width: 88%; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--panel2) }
.lp-bub.l { align-self: flex-start; border-radius: 18px 18px 18px 5px }
.lp-bub.r { align-self: flex-end; border-radius: 18px 18px 5px 18px; background: var(--track); color: var(--track-ink); transition: background .4s }
.lp-bub b { font-size: 15px; font-weight: 700; line-height: 1.35 }
.lp-bub span { font-size: 13px; line-height: 1.4; color: var(--ink2) }
.lp-bub.r span { color: inherit; opacity: .85 }
.lp-testchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.lp-testchips li { min-height: 38px; display: flex; align-items: center; padding: 0 12px; border-radius: 19px; background: var(--panel2); font-size: 14px; font-weight: 700 }
.lp-testchips li.hl { background: var(--track); color: var(--track-ink); transition: background .4s }
.lp-feat.trio { grid-column: span 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 24px 28px }
.lp-feat.trio > div { display: flex; flex-direction: column; gap: 4px }
.lp-feat.trio h3 { font-size: 18px }

/* ---- Rakusko ---------------------------------------------------------------- */
.lp-at { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 56px; align-items: center }
.lp-attext { display: flex; flex-direction: column; gap: 18px }
.lp-attext .lp-eyebrow, .lp-attext h2 { margin: 0 }
.lp-attext .lp-lede { font-size: 19px }
.lp-seg.big { align-self: flex-start; background: var(--panel); border-radius: 16px; padding: 4px }
.lp-seg.big button { min-height: 48px; padding: 0 22px; border-radius: 12px; font-size: 16px; font-weight: 800 }
.lp-seg.big button::before { content: none }
.lp-seg.big button[data-country="at"][aria-pressed="true"] { background: var(--badge-bg); color: var(--badge-ink) }
.lp-atwords { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.lp-atword {
  border-radius: 20px; background: var(--panel); color: var(--ink); padding: 16px 18px; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px; font-family: inherit; min-width: 0; transition: background .3s, transform .15s;
}
.lp-atword:active { transform: scale(.97) }
.lp-atword > span:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.lp-atword .w { font-size: 19px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere }
.lp-atword small { font-size: 14px; line-height: 1.35; opacity: .8 }
.lp-atword .ico { width: 18px; height: 18px; fill: currentColor; stroke: none }
.lp-atword.at { background: color-mix(in srgb, var(--badge-bg) 15%, var(--panel)) }
.lp-atword.speaking { background: var(--track); color: var(--track-ink) }
.lp-atword.at.speaking { background: var(--badge-bg); color: var(--badge-ink) }

/* ---- cena ----------------------------------------------------------------- */
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.lp-plan { position: relative; border-radius: 28px; background: var(--panel); padding: 30px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.lp-plan p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink2) }
.lp-pname { font-size: 18px; font-weight: 700 }
.lp-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.lp-amount { font-size: 56px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05 }
.lp-per { color: var(--mut) }
.lp-plan .lp-btn { margin-top: auto; min-height: 56px; border-radius: 16px; font-size: 16px; width: 100% }
.lp-plan .lp-btn.soft, .lp2 .lp-plan a.lp-btn.soft { background: var(--panel2) }
.lp-plan.hl { background: var(--track); color: var(--track-ink); transition: background .4s }
.lp-plan.hl .lp-pname { font-weight: 800 }
.lp-plan.hl p, .lp-plan.hl .lp-per { color: inherit; opacity: .9 }
.lp-badge {
  position: absolute; top: -13px; right: 22px; font: 800 12px/1.2 var(--font-mono); letter-spacing: .02em; text-transform: uppercase;
  color: var(--signalink); background: var(--signal); padding: 5px 10px; border-radius: 8px;
}

/* ---- caste otazky ------------------------------------------------------------ */
.lp2 #otazky { padding-top: 0 }
.lp-faq { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: start }
.lp-faqhead { display: flex; flex-direction: column; gap: 12px }
.lp-faqhead .lp-eyebrow, .lp-faqhead h2 { margin: 0 }
.lp-faqnote { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink2) }
.lp2 .lp-faqnote a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.lp-faqlist { display: flex; flex-direction: column; gap: 8px }
.lp-q { border-radius: 22px; background: color-mix(in srgb, var(--panel) 50%, transparent); transition: background .2s }
.lp-q.open { background: var(--panel) }
.lp-q h3 { margin: 0 }
.lp-q h3 button {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 0; background: none; color: inherit;
  font: 800 19px/1.3 var(--font-sans); text-align: left; cursor: pointer; border-radius: 22px;
}
.lp-q h3 button > span:first-child { flex: 1 }
.lp-qicon {
  width: 36px; height: 36px; flex: none; border-radius: 18px; background: var(--panel2); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
  transition: transform .25s cubic-bezier(.25,1,.5,1), background .2s;
}
.lp-q.open .lp-qicon { background: var(--track); color: var(--track-ink); transform: rotate(45deg) }
.lp-a { padding: 0 24px 20px }
.lp-a[hidden] { display: none }
.lp-a p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink2); max-width: 680px; animation: lpIn .3s both }

/* ---- zaverecna vyzva ------------------------------------------------------------ */
.lp-ctaband { padding: 0 0 72px }
.lp-ctabox {
  position: relative; overflow: hidden; border-radius: 32px; background: var(--track); color: var(--track-ink); padding: 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; transition: background .4s;
}
.lp-ctabox .lp-hcdeco { right: 220px; top: -90px; width: 240px; height: 240px; border-radius: 120px }
.lp-ctabox > div { display: flex; flex-direction: column; gap: 10px; position: relative }
.lp-ctabox h2 { font-size: 44px; line-height: 1.05 }
.lp-ctabox p { margin: 0; font-size: 18px; line-height: 1.5; opacity: .9 }
.lp-ctabox .lp-btn { position: relative; padding: 0 32px }

/* ---- pata ----------------------------------------------------------------- */
footer.lp-foot { border-top: 1px solid var(--line); color: var(--mut); font-size: 15px }
.lp-footin { padding-top: 36px; padding-bottom: 36px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 56px; align-items: start }
.lp-footl { display: flex; flex-direction: column; gap: 14px; max-width: 640px }
footer.lp-foot nav { display: grid; grid-template-columns: auto auto; gap: 8px 36px; font-size: 16px; justify-content: end }
footer.lp-foot nav a { color: var(--ink2); text-decoration: none; padding: 4px 0 }
footer.lp-foot p { margin: 0; line-height: 1.5 }
footer.lp-foot p a { color: var(--ink2); text-decoration: underline; text-underline-offset: 3px }
@media (hover: hover) and (pointer: fine) { footer.lp-foot a:hover { color: var(--ink) } }

/* ---- uzsie obrazovky -------------------------------------------------------- */
@media (max-width: 1180px) {
  .lp-wrap { padding: 0 40px }
  .lp2 h1 { font-size: 64px }
  .lp-herogrid { grid-template-columns: minmax(0, 1fr) 440px; gap: 32px }
  .lp-stage { transform-origin: left center; }
  .lp-stack, .lp-hcard { left: 32px; width: 360px }
  .lp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .lp-odbory { grid-template-columns: minmax(0, 1fr) 360px }
  .lp-at { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px }
  .lp-faq { grid-template-columns: 300px minmax(0, 1fr); gap: 40px }
  .lp-nav { gap: 0 } .lp-nav a { padding: 10px 10px; font-size: 15px }
}
@media (max-width: 960px) {
  .lp-nav { display: none }
  .lp-wrap { padding: 0 24px }
  .lp2 .lp-sec { padding: 72px 0 }
  .lp2 .lp-tinted { padding: 64px 0 }
  .lp2 .lp-featsec { padding: 0 0 72px }
  .lp-hero { padding: 32px 0 72px }
  .lp-herogrid { grid-template-columns: minmax(0, 1fr); gap: 40px }
  .lp2 h1 { font-size: 56px }
  .lp2 h2 { font-size: 40px }
  /* Karta slova pod textom, v toku stranky; dve karty vzadu ostavaju. */
  .lp-stage { height: auto; max-width: 480px; margin: 0 auto; width: 100%; padding: 30px 0 40px }
  .lp-stack, .lp-hcard { left: auto; top: auto; width: min(376px, 100%); height: 440px; margin: 0 auto }
  .lp-stack { position: absolute; left: 50%; top: 30px; translate: -50% 0 }
  .lp-hcard { position: relative }
  .lp-float.f2, .lp-float.f3 { display: none }
  .lp-float.f1 { left: -8px; top: 4px }
  .lp-float.f4 { right: -8px; bottom: 14px }
  .lp-sova { left: 50%; top: -40px; width: 110px; margin-left: -55px }
  .lp-sova span { width: 104px }
  .lp-sechead { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px }
  .lp-secnote { text-align: left }
  .lp-odbory { grid-template-columns: minmax(0, 1fr); gap: 24px }
  .lp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .lp-learn { position: static }
  .lp-steps { grid-template-columns: minmax(0, 1fr) }
  .lp-steps li { min-height: 0 }
  .lp-feats { grid-template-columns: minmax(0, 1fr) }
  .lp-feat.wide, .lp-feat.trio { grid-column: auto }
  .lp-feat.trio { grid-template-columns: minmax(0, 1fr); gap: 20px }
  .lp-segs { align-items: flex-start; flex-direction: row; flex-wrap: wrap }
  .lp-democards { grid-template-columns: minmax(0, 1fr) }
  .lp-at { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .lp-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px }
  .lp-faq { grid-template-columns: minmax(0, 1fr); gap: 28px }
  .lp-ctabox { grid-template-columns: minmax(0, 1fr); padding: 36px }
  .lp-ctabox .lp-btn { justify-self: start }
}
@media (max-width: 640px) {
  .lp-wrap { padding: 0 16px }
  .lp-topin { padding-top: 12px; padding-bottom: 12px; gap: 6px }
  .lp-actions { gap: 4px }
  .lp-top .lp-btn { min-height: 44px; padding: 0 14px; font-size: 15px; border-radius: 12px }
  .lp-login, .lp2 a.lp-login, .lp-top a.lp-login { padding: 10px 8px; font-size: 15px }
  .lp2 .lp-sec { padding: 56px 0 }
  .lp2 .lp-tinted { padding: 48px 0 }
  .lp2 .lp-featsec { padding: 0 0 56px }
  .lp-hero { padding: 20px 0 48px }
  .lp-herotext { gap: 22px }
  .lp2 h1 { font-size: 44px; line-height: 1.02; letter-spacing: -.03em }
  .lp2 h2 { font-size: 32px }
  .lp2 .lp-lede { font-size: 18px }
  .lp-pill { font-size: 14px; min-height: 40px }
  .lp-cta > .lp-btn { flex: 1 1 100%; min-height: 56px; font-size: 18px }
  .lp-btn.big { min-height: 56px; padding: 0 22px; font-size: 18px; border-radius: 16px }
  .lp-stage { padding: 24px 0 24px }
  .lp-stack, .lp-hcard { height: 400px }
  .lp-hcard { padding: 24px }
  .hw-de { font-size: 32px } .hw-de.lg { font-size: 27px } .hw-de.xl { font-size: 22px } .hw-pron { font-size: 20px } .hw-sk { font-size: 22px }
  .lp-hcplay { width: 56px; height: 56px } .lp-hcnext { min-height: 56px; border-radius: 16px }
  .lp-float { display: none }
  .lp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .lp2 .tracktile { min-height: 84px; border-radius: 16px }
  .lp2 .tracktile[aria-current="true"] { transform: scale(1.02) }
  .lp-learn { padding: 20px; border-radius: 22px; gap: 16px }
  .lp-learnn { font-size: 22px }
  .lp-steps li, .lp-feat, .lp-plan { padding: 22px; border-radius: 22px }
  .lp-feat.trio { padding: 22px }
  .lp-feat h3, .lp-steps h3 { font-size: 21px }
  .lp-bignum b { font-size: 52px }
  .lp-seg.big { align-self: stretch } .lp-seg.big button { flex: 1; padding: 0 12px }
  .lp-atwords { grid-template-columns: minmax(0, 1fr) }
  .lp-amount { font-size: 48px }
  .lp-q h3 button { padding: 16px 18px; font-size: 17px; border-radius: 18px }
  .lp-a { padding: 0 18px 16px }
  .lp-a p { font-size: 16px }
  .lp-ctabox { padding: 28px 22px; border-radius: 24px }
  .lp-ctabox .lp-hcdeco { right: -70px; top: -110px }
  .lp-ctabox h2 { font-size: 30px }
  .lp-ctabox p { font-size: 16px }
  .lp-ctabox .lp-btn { width: 100% }
  .lp-footin { padding-top: 28px; padding-bottom: 28px; grid-template-columns: 1fr; gap: 18px }
  footer.lp-foot nav { grid-template-columns: 1fr 1fr; gap: 0 24px; justify-content: start } footer.lp-foot nav a { padding: 10px 0 }
  .lp-brand { min-height: 44px }
}
/* Archivo je sirsie ako Inter: slovo SPRECHIO sa vedla Prihlasit sa + Zacat zadarmo
   zmesti az od ~500 px (28. 10. 2026, prekryvalo sa na iPhone Pro Max). */
@media (max-width: 520px) { .lp-word { display: none } }
@media (max-width: 400px) {
  .lp-top .lp-btn { padding: 0 12px; font-size: 14px }
  .lp-tiles { gap: 6px }
}

/* ---- stranky odborov: zjednotenie s novym vzhladom ---------------------------
   Obsah a rozlozenie ostavaju z landing.css, meni sa len hlavicka, pata,
   tlacidla a zaoblenie kariet — nech clovek z uvodnej stranky neprejde
   do inej appky. */
body.lp2t { height: auto; min-height: 100% }
.lp2t .lp-top { background: var(--bg2); border-bottom: 1px solid var(--line) }
.lp2t .lp-topin { padding-top: 14px; padding-bottom: 14px }
.lp2t .lp-top .lp-wrap, .lp2t footer.lp-foot .lp-wrap { max-width: 1280px; padding-left: 28px; padding-right: 28px }
.lp2t main .btn { border-radius: 12px; font-size: 16px; padding: 16px 24px; min-height: 52px }
.lp2t main .btn.link { padding: 8px 0; min-height: 0 }
.lp2t main .btn.ghost { color: var(--ink); border-color: var(--line2) }
.lp2t .hero h1 { letter-spacing: -.025em }
.lp2t .card, .lp2t .line, .lp2t .num, .lp2t .steps li, .lp2t .company { border-radius: 16px }
.lp2t .plan { border-radius: 18px; padding: 28px }
.lp2t .plan.best { border-color: var(--signal) }
.lp2t .eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .08em }
.lp2t footer.lp-foot { background: var(--bg2) }
@media (max-width: 640px) {
  .lp2t .lp-top .lp-wrap, .lp2t footer.lp-foot .lp-wrap { padding-left: 16px; padding-right: 16px }
  .lp2t .lp-hide-s { display: none }
}