/* ===========================================================================
   PLEVIX — spoločné štýly nových stránok webu
   ---------------------------------------------------------------------------
   Nadväzuje na landing-v73.css a legal.css: rovnaké farby, rámy aj rádiusy,
   nič nové sa nezavádza. Svetlá téma je základ, tmavá sa dopĺňa cez
   html[data-plevix-theme="dark"].

   Prefix px- používajú len nové stránky (domovská, rozcestníky, role).
   Nastavovač ceny má vlastný prefix cnk- v /cennik/.
   =========================================================================== */

.px-skip{position:absolute;left:-9999px;top:0}
.px-skip:focus{left:12px;top:12px;z-index:20;padding:10px 14px;border-radius:10px;
  background:#4f46e5;color:#fff;font-size:13px;font-weight:800;text-decoration:none}

/* ── hero ─────────────────────────────────────────────────────────────── */
.px-hero{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin:0 0 30px}
.px-hero-txt{flex:1 1 380px;min-width:0}
.px-hero-txt h1{margin:0 0 14px}
.px-lead{font-size:16.5px;line-height:1.7;color:#33415b;margin:0 0 20px;max-width:34em}
.px-actions{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 12px}
.px-btn{display:inline-flex;align-items:center;min-height:50px;padding:0 21px;border-radius:12px;
  background:#4f46e5;color:#fff;font-size:14.5px;font-weight:800;text-decoration:none;
  transition:transform .14s,box-shadow .14s}
.px-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(79,70,229,.32)}
.px-btn.ghost{background:transparent;color:#4338ca;border:1px solid #b9b4f0}
.px-btn.ghost:hover{background:#f4f3ff;box-shadow:none}
.px-actions-note{margin:0;font-size:13px;line-height:1.7;color:#5b6779;max-width:36em}
.px-actions-note b{color:#1f2937}
.px-hero-shot{flex:1 1 380px;min-width:0;margin:0}
.px-hero-shot img,.px-shots img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid #e1e7f0;background:#07090f}
.px-hero-shot figcaption{margin-top:9px;font-size:12.5px;line-height:1.6;color:#5b6779}

/* ── kroky ────────────────────────────────────────────────────────────── */
.px-steps{counter-reset:px;margin:18px 0 26px;padding:0;list-style:none;max-width:46em}
.px-steps li{position:relative;padding:0 0 14px 38px;font-size:14.5px;line-height:1.7;color:#33415b}
.px-steps li b{color:#1f2937}
.px-steps li:before{counter-increment:px;content:counter(px);position:absolute;left:0;top:1px;
  width:25px;height:25px;display:grid;place-items:center;border-radius:8px;
  background:#eeecff;color:#4f46e5;font-size:11.5px;font-weight:900}

/* ── ukážky ───────────────────────────────────────────────────────────── */
.px-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:0 0 30px}
.px-shots figure{margin:0}
.px-shots figcaption{margin-top:10px;font-size:12.5px;line-height:1.65;color:#5b6779}
.px-shots figcaption b{display:block;font-size:13.5px;color:#1f2937;margin-bottom:4px}

/* ── role ─────────────────────────────────────────────────────────────── */
.px-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:11px;margin:18px 0 30px}
.px-roles a{display:block;padding:16px 18px;border:1px solid #e1e7f0;border-radius:14px;
  background:#fff;text-decoration:none;transition:transform .14s,border-color .14s}
.px-roles a:hover{transform:translateY(-1px);border-color:#b9b4f0}
.px-roles b{display:block;font-size:14.5px;color:#1f2937;margin-bottom:5px}
.px-roles span{display:block;font-size:12.5px;line-height:1.6;color:#5b6779}

/* ── nástroje po kategóriách ──────────────────────────────────────────── */
.px-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px 22px;margin:18px 0 12px}
.px-tools>div{min-width:0}
.px-tools b{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#8894a8;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #e1e7f0}
.px-tools a{display:block;padding:6px 0;font-size:13.5px;color:#4338ca;text-decoration:none}
.px-tools a:hover{text-decoration:underline}
.px-more{margin:0 0 30px;font-size:13.5px;color:#5b6779}

/* ── karty ────────────────────────────────────────────────────────────── */
.px-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:12px;margin:18px 0 26px}
.px-grid>div{padding:16px 18px;border:1px solid #e1e7f0;border-radius:14px;background:#fff}
.px-grid b{display:block;font-size:13.5px;color:#1f2937;margin-bottom:5px}
.px-grid p{margin:0;font-size:12.5px;line-height:1.65;color:#5b6779}

/* ── stav produktu ───────────────────────────────────────────────────── */
.px-status{margin:0 0 30px;padding:16px 18px;border:1px solid #dbe2ea;border-radius:13px;background:#f7f9fc}
.px-status b{display:block;font-size:13.5px;color:#1f2937;margin-bottom:5px}
.px-status p{margin:0;font-size:13px;line-height:1.7;color:#5b6779}

/* ── výzva ────────────────────────────────────────────────────────────── */
.px-cta{margin:30px 0 0;padding:24px;border-radius:16px;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}
.px-cta h2{margin:0 0 8px;font-size:20px;color:#fff}
.px-cta p{margin:0 0 15px;color:#ede9fe;font-size:13.5px;line-height:1.65;max-width:40em}
.px-cta a{display:inline-flex;align-items:center;min-height:46px;padding:0 19px;border-radius:11px;
  background:#fff;color:#4338ca;font-size:13.5px;font-weight:800;text-decoration:none;
  margin:0 9px 9px 0}
.px-cta a+a{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}

@media (max-width:640px){
  .px-lead{font-size:15.5px}
  .px-btn{width:100%;justify-content:center}
}

/* ── slnečná sústava nástrojov ────────────────────────────────────────── */
.px-sus{margin:18px 0 12px}
.px-sus-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
.px-sus-zostavy{display:flex;flex-wrap:wrap;gap:7px;flex:1 1 auto}
.px-sus-zostavy button{min-height:42px;padding:0 15px;border:1px solid #e1e7f0;border-radius:999px;
  background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:#33415b;
  transition:border-color .14s,background .14s}
.px-sus-zostavy button:hover{border-color:#b9b4f0}
.px-sus-zostavy button.is-on{background:#eeecff;border-color:#4f46e5;color:#3730a3}
.px-sus-pohlad{display:flex;gap:2px;padding:3px;border:1px solid #e1e7f0;border-radius:11px;background:#f6f8fc}
.px-sus-pohlad button{min-height:36px;padding:0 13px;border:0;border-radius:8px;background:transparent;
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;color:#5b6779}
.px-sus-pohlad button.is-on{background:#fff;color:#3730a3;box-shadow:0 1px 3px rgba(15,23,42,.12)}

.px-sus-stage{position:relative;width:100%;max-width:540px;margin:0 auto;aspect-ratio:1/1;
  border:1px solid #e1e7f0;border-radius:50%;background:
    radial-gradient(circle at 50% 50%,#f4f3ff 0%,#fff 62%)}
.px-sus[data-pohlad="zoznam"] .px-sus-stage,
.px-sus[data-pohlad="zoznam"] .px-sus-legend,
.px-sus[data-pohlad="zoznam"] .px-sus-detail{display:none}
.px-sus[data-pohlad="sustava"] .px-sus-zoznam{display:none}

.px-sus-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px dashed #e6e9f2;border-radius:50%;display:block}
.px-sus-ring.r1{width:54%;height:54%}
.px-sus-ring.r2{width:68%;height:68%}
.px-sus-ring.r3{width:92%;height:92%}

.px-sus-sun{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:20px;display:flex;align-items:flex-end;justify-content:center;
  gap:5px;padding-bottom:19px;background:linear-gradient(150deg,#312e81,#0b0e1c);
  box-shadow:0 0 0 8px rgba(99,102,241,.1),0 14px 34px rgba(49,46,129,.4)}
.px-sus-sun b{width:8px;border-radius:3px;display:block}
.px-sus-sun b:nth-child(1){height:14px;background:#4338ca}
.px-sus-sun b:nth-child(2){height:22px;background:#6366f1}
.px-sus-sun b:nth-child(3){height:31px;background:linear-gradient(180deg,#c7d2fe,#818cf8)}

.px-sus-planet{position:absolute;transform:translate(-50%,-50%);width:var(--d);height:var(--d);
  border-radius:50%;border:1px solid #d7dbe8;background:#fff;cursor:pointer;padding:0;
  display:grid;place-items:center;font-family:inherit;
  transition:left .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1),
    border-color .2s,background .2s,box-shadow .2s}
.px-sus-planet i{width:9px;height:9px;border-radius:50%;background:#cbd5e1;display:block}
.px-sus-planet span{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  white-space:nowrap;text-align:center}
.px-sus-planet b{display:block;font-size:12px;font-weight:700;color:#5b6779}
.px-sus-planet em{display:block;font-style:normal;font-size:10.5px;color:#8894a8;margin-top:1px}
.px-sus-planet.is-in{border-color:#4f46e5;background:#eeecff;
  box-shadow:0 0 0 5px rgba(99,102,241,.09)}
.px-sus-planet.is-in i{background:#4f46e5}
.px-sus-planet.is-in b{color:#3730a3}
.px-sus-planet.is-free{border-color:#14b8a6;background:#f0fdfa;box-shadow:0 0 0 5px rgba(20,184,166,.09)}
.px-sus-planet.is-free i{background:#14b8a6}
.px-sus-planet.is-free b{color:#0f766e}
.px-sus-planet:hover{transform:translate(-50%,-50%) scale(1.06)}
.px-sus-planet.is-open{box-shadow:0 0 0 4px rgba(79,70,229,.35)}
.px-sus-jemne .px-sus-planet{transition:none}

.px-sus-legend{margin:14px 0 0;font-size:13px;line-height:1.7;color:#5b6779;text-align:center}
.px-sus-legend b{color:#1f2937}
.px-sus-detail{margin:14px 0 0}
.px-sus-card{padding:16px 18px;border:1px solid #e1e7f0;border-radius:14px;background:#fff}
.px-sus-card.is-in{border-color:#b9b4f0;background:#f8f7ff}
.px-sus-card>b{display:block;font-size:14.5px;color:#1f2937;margin-bottom:4px}
.px-sus-card>span{display:block;font-size:12.5px;line-height:1.6;color:#5b6779;margin-bottom:11px}
.px-sus-links{display:flex;flex-wrap:wrap;gap:7px}
.px-sus-links a{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border-radius:9px;
  border:1px solid #e1e7f0;background:#fff;font-size:13px;font-weight:600;color:#4338ca;text-decoration:none}
.px-sus-links a:hover{border-color:#b9b4f0;background:#f4f3ff}

@media (max-width:520px){
  .px-sus-stage{max-width:none}
  .px-sus-planet b{font-size:11px}
}

/* ── tmavá téma ──────────────────────────────────────────────────────── */
html[data-plevix-theme="dark"] .px-lead,
html[data-plevix-theme="dark"] .px-steps li{color:#cbd5e1}
html[data-plevix-theme="dark"] .px-actions-note,
html[data-plevix-theme="dark"] .px-hero-shot figcaption,
html[data-plevix-theme="dark"] .px-shots figcaption,
html[data-plevix-theme="dark"] .px-roles span,
html[data-plevix-theme="dark"] .px-grid p,
html[data-plevix-theme="dark"] .px-status p,
html[data-plevix-theme="dark"] .px-more{color:#aeb8cb}
html[data-plevix-theme="dark"] .px-actions-note b,
html[data-plevix-theme="dark"] .px-steps li b,
html[data-plevix-theme="dark"] .px-shots figcaption b,
html[data-plevix-theme="dark"] .px-roles b,
html[data-plevix-theme="dark"] .px-grid b,
html[data-plevix-theme="dark"] .px-status b{color:#e6ebf5}
html[data-plevix-theme="dark"] .px-roles a,
html[data-plevix-theme="dark"] .px-grid>div{background:#111622;border-color:#293247}
html[data-plevix-theme="dark"] .px-roles a:hover{border-color:#3d3a7a}
html[data-plevix-theme="dark"] .px-hero-shot img,
html[data-plevix-theme="dark"] .px-shots img{border-color:#293247}
html[data-plevix-theme="dark"] .px-btn.ghost{color:#c7c2ff;border-color:#3d3a7a}
html[data-plevix-theme="dark"] .px-btn.ghost:hover{background:#1b1e46}
html[data-plevix-theme="dark"] .px-steps li:before{background:#241f52;color:#c7c2ff}
html[data-plevix-theme="dark"] .px-tools b{color:#8894a8;border-color:#293247}
html[data-plevix-theme="dark"] .px-tools a{color:#c7c2ff}
html[data-plevix-theme="dark"] .px-status{background:#0f1626;border-color:#293247}

html[data-plevix-theme="dark"] .px-sus-zostavy button{background:#111622;border-color:#293247;color:#cbd5e1}
html[data-plevix-theme="dark"] .px-sus-zostavy button:hover{border-color:#3d3a7a}
html[data-plevix-theme="dark"] .px-sus-zostavy button.is-on{background:#241f52;border-color:#6366f1;color:#c7c2ff}
html[data-plevix-theme="dark"] .px-sus-pohlad{background:#0f1626;border-color:#293247}
html[data-plevix-theme="dark"] .px-sus-pohlad button{color:#aeb8cb}
html[data-plevix-theme="dark"] .px-sus-pohlad button.is-on{background:#241f52;color:#c7c2ff;box-shadow:none}
html[data-plevix-theme="dark"] .px-sus-stage{border-color:#293247;
  background:radial-gradient(circle at 50% 50%,#161b34 0%,#0b0f1c 62%)}
html[data-plevix-theme="dark"] .px-sus-ring{border-color:#232c40}
html[data-plevix-theme="dark"] .px-sus-planet{background:#111622;border-color:#2f3a52}
html[data-plevix-theme="dark"] .px-sus-planet i{background:#3a465e}
html[data-plevix-theme="dark"] .px-sus-planet b{color:#aeb8cb}
html[data-plevix-theme="dark"] .px-sus-planet.is-in{background:#1b1e46;border-color:#6366f1}
html[data-plevix-theme="dark"] .px-sus-planet.is-in b{color:#c7c2ff}
html[data-plevix-theme="dark"] .px-sus-planet.is-in i{background:#818cf8}
html[data-plevix-theme="dark"] .px-sus-planet.is-free{background:#0c2724;border-color:#175f56}
html[data-plevix-theme="dark"] .px-sus-planet.is-free b{color:#5eead4}
html[data-plevix-theme="dark"] .px-sus-planet.is-free i{background:#14b8a6}
html[data-plevix-theme="dark"] .px-sus-legend{color:#aeb8cb}
html[data-plevix-theme="dark"] .px-sus-legend b{color:#e6ebf5}
html[data-plevix-theme="dark"] .px-sus-card{background:#111622;border-color:#293247}
html[data-plevix-theme="dark"] .px-sus-card.is-in{background:#161a3a;border-color:#3d3a7a}
html[data-plevix-theme="dark"] .px-sus-card>b{color:#e6ebf5}
html[data-plevix-theme="dark"] .px-sus-card>span{color:#aeb8cb}
html[data-plevix-theme="dark"] .px-sus-links a{background:#111622;border-color:#293247;color:#c7c2ff}
html[data-plevix-theme="dark"] .px-sus-links a:hover{border-color:#3d3a7a;background:#1b1e46}

/* ── cenník: hotové zostavy ako cenové karty ─────────────────────────── */
.cnk-presets-lab{font:600 11px 'IBM Plex Mono',monospace;letter-spacing:.13em;
  text-transform:uppercase;color:#8894a8;margin-bottom:10px}
.cnk-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(166px,1fr));gap:9px}
.cnk-preset{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:left;
  min-height:auto;padding:15px 16px 14px;border-radius:15px;cursor:pointer;
  border:1px solid #e1e7f0;background:#fff;font-family:inherit;
  transition:transform .15s,border-color .15s,box-shadow .15s}
.cnk-preset:hover{transform:translateY(-2px);border-color:#b9b4f0;box-shadow:0 10px 26px rgba(79,70,229,.12)}
.cnk-preset.is-on{border-color:#4f46e5;background:#f7f6ff;box-shadow:0 10px 26px rgba(79,70,229,.16)}
.cnk-preset-head{display:flex;align-items:center;gap:8px}
.cnk-preset-head b{flex:1 1 auto;font:700 14px 'IBM Plex Sans',sans-serif;color:#1f2937}
.cnk-preset-head i{width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:1.5px solid #cbd5e1;background:#fff;position:relative;display:block}
.cnk-preset.is-on .cnk-preset-head i{background:#4f46e5;border-color:#4f46e5}
.cnk-preset.is-on .cnk-preset-head i:after{content:"";position:absolute;left:3px;top:4px;
  width:7px;height:3px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
.cnk-preset-cena{font:800 24px 'IBM Plex Sans',sans-serif;letter-spacing:-.03em;color:#4f46e5;
  font-variant-numeric:tabular-nums;line-height:1}
.cnk-preset-cena em{font-style:normal;font-size:12px;font-weight:600;color:#8894a8;margin-left:5px}
.cnk-preset-note{font:400 12px 'IBM Plex Sans',sans-serif;color:#5b6779}

/* ── cenník: za čo neplatíte ─────────────────────────────────────────── */
.cnk-never{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:11px;margin:0 0 26px}
.cnk-never>div{position:relative;padding:16px 18px 16px 20px;border:1px solid #e1e7f0;
  border-radius:14px;background:#fff;overflow:hidden}
.cnk-never>div:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#14b8a6}
.cnk-never b{display:block;font:700 14px 'IBM Plex Sans',sans-serif;color:#1f2937;margin-bottom:5px}
.cnk-never p{margin:0;font:400 12.5px/1.6 'IBM Plex Sans',sans-serif;color:#5b6779}

html[data-plevix-theme="dark"] .cnk-preset,
html[data-plevix-theme="dark"] .cnk-never>div{background:#111622;border-color:#293247}
html[data-plevix-theme="dark"] .cnk-preset:hover,
html[data-plevix-theme="dark"] .cnk-preset.is-on{border-color:#6366f1}
html[data-plevix-theme="dark"] .cnk-preset.is-on{background:#1b1e46}
html[data-plevix-theme="dark"] .cnk-preset-head b,
html[data-plevix-theme="dark"] .cnk-never b{color:#e6ebf5}
html[data-plevix-theme="dark"] .cnk-preset-cena{color:#c7c2ff}
html[data-plevix-theme="dark"] .cnk-preset-note,
html[data-plevix-theme="dark"] .cnk-never p{color:#aeb8cb}
html[data-plevix-theme="dark"] .cnk-preset-head i{background:#0f1626;border-color:#3a465e}

.cnk-preset.je-pick{animation:cnkPick .3s cubic-bezier(.3,.9,.3,1)}
@keyframes cnkPick{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}