/* Landing page. Tokeny a reset prichadzaju z assets/base.css — tu nie je ani
   jedna natvrdo napisana farba, vsetko ide cez premenne appky. */

body { min-height: 100%; height: auto; }

/* ---- layout ------------------------------------------------------------- */
.wrap { max-width: 940px; margin: 0 auto; padding: 0 20px; }
section { padding: 56px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }

.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }

h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 700; }
h3 { font-size: 17px; margin: 0 0 6px; font-weight: 600; }
.lede { color: var(--ink2); font-size: 15.5px; margin: 0 0 22px; max-width: 62ch; }

/* ---- hlavicka ----------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 20; background: var(--bg2);
  border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top);
}
.top .wrap { display: flex; align-items: center; gap: 10px; min-height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: var(--ink); min-width: 0; }
.spark {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  color: var(--ink);
}
.spark .ico { width: 40px; height: 40px; stroke: none; fill: none }
@media (max-width: 560px) { .spark .ico { width: 34px; height: 34px } }
.brand strong { font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
@media (max-width: 440px) {
  .brand strong { font-size: 11px; letter-spacing: .09em }
  .top .btn.small { padding: 9px 11px; font-size: 12px; white-space: nowrap }
}
.wires { display: flex; height: 3px; }
.wires i { flex: 1 }
.wires .a { background: var(--L) } .wires .b { background: var(--N) } .wires .c { background: var(--PE) }

/* ---- tlacidla ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--signal); color: var(--signalink); border: 1px solid var(--signal);
  border-radius: 10px; padding: 14px 22px; font: 600 15px/1 var(--font-sans);
  cursor: pointer; text-decoration: none; min-height: 48px;
}

.btn.ghost { background: transparent; border-color: var(--line2); color: var(--ink2); font-weight: 500 }

.btn.small { padding: 9px 14px; font-size: 13px; min-height: 40px }
.btn.link { background: none; border: 0; color: var(--ink2); text-decoration: underline; padding: 8px 0; min-height: 0 }

/* Focus NESMIE vyzerat ako vyber: vyber je jantarovy ram + vyplnena fajka,
   focus je prerusovany obrys v inej farbe. */
:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; border-radius: 4px }

/* Vsetky hover stavy len tam, kde je ozajstny kurzor. Na dotykovom displeji by
   prve tuknutie minulo klik a len zaplo hover — pouzivatel by musel tapnut dvakrat. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.07) }
  .btn.ghost:hover { border-color: var(--signal); color: var(--accent-text); filter: none }
  .btn.link:hover { color: var(--accent-text) }
  .play:hover { background: var(--signal); color: var(--signalink); border-color: var(--signal) }
  footer a:hover { color: var(--accent-text); text-decoration: underline }
  .choice:hover { border-color: var(--line2); background: var(--panel2) }
  .chlist a:hover { background: var(--panel2) }
}

/* ---- 1. hero ------------------------------------------------------------ */
.hero { padding: 44px 0 52px }
.hero h1 {
  font-size: clamp(30px, 7.4vw, 46px); line-height: 1.08; letter-spacing: -.03em;
  margin: 0 0 16px; font-weight: 700; max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--accent-text) }
.hero p.sub { color: var(--ink2); font-size: 16.5px; line-height: 1.5; margin: 0 0 26px; max-width: 46ch }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.fineprint { color: var(--mut); font-size: 12.5px; margin: 14px 0 0; font-family: var(--font-mono) }

/* ---- karta zo slovnika (rovnaky tvar ako v appke) ----------------------- */
.card {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--dim);
  border-radius: var(--radius); padding: 13px 15px;
}
.card .de { grid-column: 1; font-family: var(--font-mono); font-weight: 600; font-size: 15.5px; line-height: 1.35; word-break: break-word }
.card .pron { grid-column: 1; font-family: var(--font-mono); font-size: 12px; color: var(--pe-text); margin-top: 3px }
.card .sk { grid-column: 1; color: var(--ink2); font-size: 13.5px; margin-top: 1px }
.card .note { color: var(--mut); font-size: 12px; font-style: italic }
.card.term { border-left-color: var(--N) }

.play {
  grid-column: 2; grid-row: 1 / 4; align-self: center;
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: var(--panel2); border: 1px solid var(--line2); color: var(--accent-text);
  font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}

.play.speaking { background: var(--PE); color: var(--signalink); border-color: var(--PE) }

.demo { margin-top: 30px }
.demo .hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--mut); margin: 9px 0 0; text-align: center }

/* ---- 2. problem --------------------------------------------------------- */
.problems { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0 }
.problems li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink);
}
.problems li:first-child { border-top: 1px solid var(--line) }
.problems b { font-family: var(--font-mono); color: var(--bad-text); font-size: 15px; flex: 0 0 auto }

/* ---- 3. co je vnutri — SIGNATURE: role ako vodice ----------------------- */
.chapterhead { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 4px }
.code {
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  color: var(--signalink); background: var(--signal); border-radius: 7px; padding: 3px 9px;
}
.chapterhead .name { font-size: 17px; font-weight: 600 }
.chaptermeta { color: var(--mut); font-size: 13px; font-family: var(--font-mono); margin: 0 0 20px }

.rail { display: grid; gap: 16px }
.rail .role { position: relative; padding-left: 26px }
/* vodic: farebna zvisla ciara so svorkou na zaciatku */
.rail .role::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px; background: var(--wire);
}
.rail .role::after {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--wire);
}
/* Nazov roly je --ink, nie farba vodica: hneda a modra by na male pismo
   nepresli kontrastom. Farbu nesie samotny vodic a svorka vedla neho. */
.rail .rolename {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: var(--ink); text-transform: uppercase; margin: 0 0 9px;
}
.rail .lines { display: grid; gap: 8px }
.line {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px;
}
.line .de { font-family: var(--font-mono); font-weight: 600; font-size: 14.5px; line-height: 1.35; word-break: break-word }
.line .sk { color: var(--mut); font-size: 13px; margin-top: 2px }
.line .play { grid-row: 1 / 3; width: 38px; height: 38px; font-size: 13px }

.terms { display: grid; gap: 8px; margin-bottom: 26px }

/* ---- 4. ako to funguje -------------------------------------------------- */
.steps { display: grid; gap: 14px; counter-reset: step; padding: 0; margin: 0; list-style: none }
.steps li {
  display: grid; grid-template-columns: 38px 1fr; gap: 15px; align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--panel2); border: 1px solid var(--line2); color: var(--accent-text);
  font-family: var(--font-mono); font-weight: 600; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.steps p { margin: 3px 0 0; color: var(--ink2); font-size: 14px }

/* ---- 5. pre koho / 6. cisla -------------------------------------------- */
.grid { display: grid; gap: 12px; grid-template-columns: 1fr }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 18px }
.tile .meta { color: var(--mut); font-size: 12.5px; font-family: var(--font-mono); margin-top: 8px }
.tile p { margin: 0; color: var(--ink2); font-size: 14px }

.numbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px }
.num { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 18px }
.num b { display: block; font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: var(--accent-text); line-height: 1.05 }
.num span { display: block; color: var(--mut); font-size: 12.5px; margin-top: 6px }
.num.g b { color: var(--pe-text) } .num.b b { color:var(--n-text) }

/* ---- 7. cennik ---------------------------------------------------------- */
.plans { display: grid; gap: 14px }
.plan {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.plan.best { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) }
.plan .tagline { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px }
.plan .price { font-family: var(--font-mono); font-size: 32px; font-weight: 600; letter-spacing: -.02em }
.plan .per { color: var(--mut); font-size: 13px }
.plan .note { color: var(--ink2); font-size: 13.5px; margin: 8px 0 16px }
.plan .btn { width: 100% }
.plan.best .btn { background: var(--signal); color: var(--signalink) }

.company {
  margin-top: 18px; background: var(--panel2); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 16px 18px; font-size: 14px; color: var(--ink2);
}
.company a { color: var(--accent-text) }

/* ---- 8. FAQ ------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--line) }
.faq details:first-of-type { border-top: 1px solid var(--line) }
.faq summary {
  cursor: pointer; padding: 16px 30px 16px 0; font-size: 15.5px; font-weight: 500;
  position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 19px; color: var(--accent-text);
}
.faq details[open] summary::after { content: "−" }
.faq .answer { color: var(--ink2); font-size: 14.5px; padding: 0 0 16px; margin: 0; max-width: 64ch }

/* ---- 9. zaver + pata ---------------------------------------------------- */
.closing { text-align: center }
.closing h2 { max-width: 22ch; margin-inline: auto }
.closing .cta { justify-content: center }

footer { border-top: 1px solid var(--line); background: var(--bg2); padding: 26px 0 40px; color: var(--mut); font-size: 12.5px }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px }
footer a { color: var(--mut); text-decoration: none }


/* ---- pravne podstranky -------------------------------------------------- */
.doc { padding: 40px 0 60px; max-width: 68ch }
.doc h1 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 6px }
.doc h2 { font-size: 18px; margin: 28px 0 8px }
.doc p, .doc li { color: var(--ink2); font-size: 15px }
.doc a:not(.btn) { color: var(--accent-text) }
.doc .todo {
  background: var(--panel2); border: 1px solid var(--line2); border-left: 3px solid var(--signal);
  border-radius: var(--radius); padding: 14px 16px; color: var(--ink2); font-size: 14px;
}

/* ---- desktop ------------------------------------------------------------ */
@media (min-width: 720px) {
  section { padding: 76px 0 }
  h2 { font-size: 32px }
  .hero { display: grid; grid-template-columns: 1.18fr .82fr; gap: 44px; align-items: center; padding: 70px 0 78px }
  .hero h1 { max-width: none }
  .demo { margin-top: 0 }
  .grid { grid-template-columns: repeat(2, 1fr) }
  .numbers { grid-template-columns: repeat(4, 1fr) }
  .plans { grid-template-columns: repeat(3, 1fr); align-items: start }
  .plan.best { transform: translateY(-8px) }
  .steps { grid-template-columns: repeat(3, 1fr) }
  .rail { grid-template-columns: repeat(2, 1fr); gap: 26px 30px }
}

/* ---- jemny nabeh pri scrolle (vypnuty pri prefers-reduced-motion) ------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease }
  .reveal.in { opacity: 1; transform: none }
}

/* ======================================================================
   ONBOARDING — sprievodca a obrazovka s planom
   ====================================================================== */
body.onb .top .wrap { gap: 14px }
body.onb .brand { margin-right: auto }
.back { flex: 0 0 auto; text-decoration: none; font-weight: 600; color: var(--ink2) }
.stepcount { font-family: var(--font-mono); font-size: 12px; color: var(--mut); flex: 0 0 auto }
.stepbar { height: 3px; background: var(--panel2) }
.stepbar .fill { height: 100%; width: 0; background: var(--signal); transition: width .25s ease }
@media (prefers-reduced-motion: reduce) { .stepbar .fill { transition: none } }

.qhead { padding: 34px 0 22px }
.qhead h1 { font-size: clamp(26px, 6.4vw, 36px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 10px; font-weight: 700 }
.qhead .lede { margin-bottom: 0 }

.choices { display: grid; gap: 10px; padding-bottom: 20px }
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 14px;
  padding: 15px 16px; text-align: left; cursor: pointer; color: var(--ink);
  font-family: inherit; transition: border-color .12s, background .12s;
}

.choice .ctext { flex: 1; min-width: 0 }
.choice strong { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.25 }
.choice span { display: block; color: var(--mut); font-size: 13.5px; margin-top: 3px }
.choice .mark {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; margin: 0;
  border: 1px solid var(--line2); color: transparent; background: transparent;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.choice:not(.on) .mark { color: var(--mut) }
.choice.on {
  border-color: var(--signal); border-width: 2px; padding: 14px 15px;
  background: color-mix(in srgb, var(--signal) 12%, var(--panel));
}
.choice.on .mark { background: var(--signal); border-color: var(--signal); color: var(--signalink) }

.qfoot { padding: 4px 0 40px; display: grid; gap: 2px; justify-items: start }
.qwarn {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  color: var(--bad-text); font-size: 14px; font-weight: 500;
}
.qwarn[hidden] { display: none }
.qfoot .btn:disabled { opacity: .45; cursor: not-allowed }
.qfoot .fineprint { margin-top: 8px }

/* ---- vysledok ---- */
.planhead { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline }
.planhead span:not(:last-child)::after { content: " ·"; color: var(--mut) }
.planhead span:first-child { color: var(--accent-text) }

.timeline { display: grid; gap: 10px; margin-bottom: 26px }
.phase { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden }
.phase summary { cursor: pointer; padding: 15px 16px; list-style: none }
.phase summary::-webkit-details-marker { display: none }
.ptop { display: flex; align-items: center; gap: 13px }
.pnum {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: var(--panel2); border: 1px solid var(--line2); color: var(--accent-text);
  font-family: var(--font-mono); font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.ptitle { min-width: 0 }
.ptitle strong { display: block; font-size: 16px; font-weight: 600 }
.ptitle span { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--mut); margin-top: 2px }
.pnote { display: block; color: var(--ink2); font-size: 13.5px; margin: 9px 0 0 45px }
.phase[open] summary { border-bottom: 1px solid var(--line) }

.chlist { list-style: none; margin: 0; padding: 6px 0 }
.chlist a {
  display: flex; align-items: center; gap: 11px; padding: 11px 16px;
  text-decoration: none; color: var(--ink); min-height: 46px;
}

.chlist .chname { flex: 1; font-size: 14.5px; min-width: 0 }
.chlist .chn { font-family: var(--font-mono); font-size: 11.5px; color: var(--mut); flex: 0 0 auto }

.gramrow { background: var(--panel2); border: 1px solid var(--line2); border-radius: 14px; padding: 17px 18px; margin-bottom: 26px }
.gramrow h2 { font-size: 16px; margin: 0 0 10px }
.gramrow ul { margin: 0; padding-left: 20px; display: grid; gap: 5px }
.gramrow li { color: var(--ink2); font-size: 14px }

.planCta { padding-bottom: 6px }
.planCta .btn { flex: 1 1 220px }

@media (min-width: 720px) {
  .qhead { padding: 54px 0 26px }
  .choices { max-width: 640px }
  .planCta .btn { flex: 0 0 auto }
}
.doc .lead{color:var(--ink2);font-size:16px;margin:0 0 22px}
.doc h2{border-top:1px solid var(--line);padding-top:22px}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc ul,.doc ol{padding-left:22px}
.doc li{margin:5px 0}
.doc .fill{background:var(--tint-signal-2);border:1px dashed var(--signal);border-radius:5px;padding:0 6px;color:var(--accent-text);font-size:13px;font-family:var(--font-mono)}
/* Znenie, ktore este nepreslo pravnikom. Ma byt na stranke vidiet, ze je to
   navrh — nie schovane v komentari, kde by sa na to zabudlo. */
.doc .draft{background:var(--tint-signal-2);border-left:3px solid var(--signal);border-radius:0 8px 8px 0;padding:12px 14px;margin:14px 0}
.doc .draft b{color:var(--accent-text)}
.doc .gtable{width:100%;border-collapse:collapse;margin:12px 0;font-size:13.5px}
.doc .gtable th,.doc .gtable td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.doc .gtable th{color:var(--mut);font-weight:600;font-size:12px}
.doc .gtable td{color:var(--ink2)}
.doc .updated{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--mut);font-size:13px;font-family:var(--font-mono)}

/* ---- test urovne v onboardingu ------------------------------------------ */
.ltcard{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--N);border-radius:14px;padding:16px 17px;margin-bottom:18px}
.ltde{flex:1;min-width:0;font-family:var(--font-mono);font-weight:600;font-size:17px;line-height:1.35;word-break:break-word}
.choice.compact{min-height:56px;padding:13px 15px}
.choice.compact .ctext{font-size:15.5px;font-weight:500}
.choice.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--panel))}
.choice.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--panel))}
.choice:disabled{cursor:default}
.ltresult{display:flex;flex-direction:column;gap:3px;background:var(--panel);border:1px solid var(--signal);border-radius:14px;padding:16px 17px;margin-bottom:20px}
.ltresult strong{font-size:17px}
.ltresult span{color:var(--mut);font-size:13.5px}

/* ---- vyber odboru v onboardingu ----------------------------------------- */
.tracktile .soonbadge{position:absolute;top:17px;right:16px;margin-left:0}
.soonbadge{display:inline-block;font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);background:var(--panel2);border:1px solid var(--line2);border-radius:20px;padding:2px 8px;margin-left:9px;vertical-align:middle}
.choice.soon strong{color:var(--ink2)}
.mailrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;max-width:520px}
.mailrow input{flex:1 1 220px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:13px 14px;color:var(--ink);font-size:16px;font-family:inherit;outline:none;min-height:48px}
.mailrow input:focus{border-color:var(--signal)}

/* ---- zastresujuca stranka: mriezka odborov ------------------------------ */
.hero.solo{display:block;max-width:640px}
.hero.solo h1{max-width:none}
.trackgrid{display:grid;gap:12px;grid-template-columns:1fr;grid-auto-rows:1fr}
.gridlabel{margin:26px 0 14px;grid-column:1/-1;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:16px 0 2px;display:flex;align-items:center;gap:10px}
.gridlabel::after{content:"";flex:1;height:1px;background:var(--line)}
/* Farbu nesie [data-track] z track-colors.css. Ked odbor nie je urceny,
   --track je znackova jantarova, takze sa nic nerozbije. */
.tracktile{display:block;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--track);border-radius:var(--radius);padding:17px 18px;text-decoration:none;color:var(--ink);transition:border-color .12s,background .12s}
.tracktile:hover{border-color:var(--track)}
/* Znacka "coskoro" ide MIMO tok textu. Kym bola v nadpise, dlhy nazov
   (Opatrovanie a zdravotnictvo) sa s nou zalomil na tri riadky a cely rad
   dlazdic narastol o 26 px oproti susednym. Nadpis ma pevnu vysku dvoch
   riadkov, takze su vsetky dlazdice rovnako vysoke. */
.tracktile h3{margin:0 0 4px;font-size:17px;font-weight:600;line-height:1.3;
  min-height:2.6em;display:flex;align-items:flex-start;padding-right:76px}
.tracktile p{margin:0;color:var(--ink2);font-size:14px}
.tracktile .meta{color:var(--mut);font-size:12.5px;font-family:var(--font-mono);margin-top:9px}
/* Pripravovany odbor si farbu PONECHAVA — je to jeho totoznost, nie stav.
   Tlmi sa nadpis a znacka "coskoro", nie pruh; inak by rozcestnik vyzeral
   ako jeden zivy odbor a osem sivych riadkov. */
.tracktile.soon{opacity:.92}
.tracktile.soon h3{color:var(--ink2)}
.planmore{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:4px}
.planmore li{color:var(--mut);font-size:12.5px;font-family:var(--font-mono)}
.plan .note{margin-bottom:10px}
@media (hover:hover) and (pointer:fine){.tracktile:hover{border-color:var(--signal)}}
@media (min-width:720px){.trackgrid{grid-template-columns:repeat(3,1fr)}}

/* ---- maketa telefonu na rozcestniku --------------------------------------
   Vykresluje sa z realnych dat (data/landing.json -> preview), nie ako obrazok.
   Stock fotka by produkt zabila a screenshot by za mesiac neplatil. */
.hero:has(.phone) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 46px; align-items: center }
.phone {
  position: relative; justify-self: center; width: 100%; max-width: 310px;
  border: 10px solid var(--line2); border-radius: 34px; background: var(--bg2);
  box-shadow: 0 18px 50px var(--shadow-deep); overflow: hidden; padding: 14px 12px 18px;
}
.phone::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 5px; border-radius: 4px; background: var(--line2);
}
.pscreen { margin-top: 10px }
.ptop { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap }
.pcode {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--track-ink); background: var(--track); border-radius: 6px; padding: 2px 7px;
}
.ptitle { font-size: 12.5px; color: var(--ink2); font-weight: 600 }
.pprog { height: 6px; border-radius: 4px; background: var(--panel2); overflow: hidden }
.pfill { height: 100%; background: var(--track) }
.pproglbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--mut); margin: 5px 0 12px }
.pcard {
  display: flex; align-items: center; gap: 10px; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--track);
  border-radius: 0 9px 9px 0; padding: 9px 10px; margin-bottom: 8px;
}
.pcard.fraza { border-left-color: var(--L) }
.ptxt { flex: 1; min-width: 0 }
.pde { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.25 }
.ppron { font-family: var(--font-mono); font-size: 11px; color: var(--track); margin-top: 2px }
.psk { font-size: 11.5px; color: var(--ink2); margin-top: 2px }
.pplay {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--track); color: var(--track);
  display: flex; align-items: center; justify-content: center; cursor: default;
}
.pplay.on { background: var(--track); color: var(--track-ink) }
.pplay .ico { width: 14px; height: 14px }

@media (max-width: 900px) {
  /* Na mobile ide maketa POD text, ako ziada zadanie. */
  .hero:has(.phone) { grid-template-columns: 1fr; gap: 30px }
  .phone { max-width: 280px; order: 2 }
}
@media (prefers-reduced-motion: no-preference) {
  .phone { transition: transform .3s }
}

/* ---- ikona odboru na dlazdici -------------------------------------------- */
.tracktile { position: relative; padding-left: 68px }
.tico {
  position: absolute; left: 18px; top: 17px;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--track-tint); color: var(--track);
  display: flex; align-items: center; justify-content: center;
}
.tico .ico { width: 21px; height: 21px; stroke-width: 1.9 }
@media (max-width: 560px) { .tracktile { padding-left: 62px } .tico { left: 14px } }

/* Odbor je zvolený, ale ešte nemá vlastný obsah — plán je trojfázový. */
.planned {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--track-tint); border: 1px solid var(--line2);
  color: var(--ink2); font-size: 14px;
}

/* ---- prepínač témy na webe ----------------------------------------------
   Appka ho mala, web nie — a človek, ktorý si v appke prepol svetlú tému,
   dostal na webe tmavú. Rovnaký modul aj rovnaké tri stavy. */
.topright { display: flex; align-items: center; gap: 10px; margin-left: auto }
.top .tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; min-width: 40px; padding: 0 12px;
  background: var(--panel); border: 1px solid var(--line2); color: var(--ink2);
  border-radius: 10px; font-family: inherit; font-size: 13px; cursor: pointer;
}
.top .tbtn:hover { color: var(--ink); border-color: var(--track) }
.top .tbtn .ico { width: 17px; height: 17px }
@media (max-width: 620px) {
  .top .tbtn .tlabel { display: none }
  .top .tbtn { padding: 0; width: 40px }
}