/* 13. 10. 2026: statické stránky s odpoveďami (/otazky/, /pre-rodinu/ …)
   21. 10. 2026 (landing 1.1.0): prerobené ako landing — Sora + Manrope, fialová a oranžová, svetlý aj
   tmavý režim (podľa uloženej témy z appky, inak podľa systému), úvod s ukážkou, obsah stránky vľavo,
   kroky, karty, tabuľka. Žiadny JavaScript okrem témy. Animácie len jemné a vypnuté pri „obmedziť pohyb“. */
:root {
  --g-bg: #fdf9f4; --g-section: #f6f0e7; --g-card: #fff; --g-ink: #1f1a33; --g-soft: #5a556e; --g-faint: #8a8599;
  --g-line: #e8e0d4; --g-primary: #5b42a4; --g-primary-ink: #4a3590; --g-primary-soft: #ece6fb; --g-accent: #f07a2f;
  --g-ok: #2f9e5b; --g-warn: #d9961c; --g-shadow: 0 24px 50px -30px rgb(40 24 80 / 0.35);
  --g-ease: cubic-bezier(0.19, 1, 0.22, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --g-bg: #13131c; --g-section: #191926; --g-card: #1e1d2b; --g-ink: #ece8f7; --g-soft: #b3adc8; --g-faint: #8d87a3;
    --g-line: #2f2c42; --g-primary: #8f78e6; --g-primary-ink: #c3b5f7; --g-primary-soft: #2a2443; --g-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --g-bg: #13131c; --g-section: #191926; --g-card: #1e1d2b; --g-ink: #ece8f7; --g-soft: #b3adc8; --g-faint: #8d87a3;
  --g-line: #2f2c42; --g-primary: #8f78e6; --g-primary-ink: #c3b5f7; --g-primary-soft: #2a2443; --g-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--g-bg); color: var(--g-ink); font: 1.0625rem/1.65 Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--g-primary-ink); font-weight: 700; text-underline-offset: 3px; }
h1, h2, h3 { font-family: Sora, Manrope, system-ui, sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 3px; border-radius: 6px; }
.g-skip { position: absolute; left: 12px; top: -60px; padding: 8px 14px; border-radius: 999px; background: var(--g-primary); color: #fff; z-index: 20; }
.g-skip:focus { top: 12px; }
.g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- horná lišta --- */
.g-top { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--g-bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--g-line); }
.g-top-in { display: flex; align-items: center; gap: 18px; max-width: 1160px; margin: 0 auto; padding: 12px 24px; }
.g-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--g-ink); text-decoration: none; font-family: Sora, Manrope, sans-serif; font-weight: 800; font-size: 1.125rem; flex-shrink: 0; }
.g-nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.g-nav::-webkit-scrollbar { display: none; }
.g-nav a { padding: 7px 11px; border-radius: 999px; color: var(--g-soft); font-size: 0.875rem; text-decoration: none; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease; }
.g-nav a:hover { color: var(--g-ink); background: var(--g-section); }
.g-nav a[aria-current='page'] { color: var(--g-primary-ink); background: var(--g-primary-soft); }

/* --- tlačidlá --- */
.g-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--g-primary); color: #fff; text-decoration: none; font-weight: 800; transition: transform 0.25s var(--g-ease), box-shadow 0.25s ease, background-color 0.2s ease; box-shadow: 0 10px 22px -12px rgb(91 66 164 / 0.7); }
.g-btn span { transition: transform 0.25s var(--g-ease); }
.g-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgb(91 66 164 / 0.75); }
.g-btn:hover span { transform: translateX(3px); }
.g-btn:active { transform: scale(0.97); }
.g-btn-sm { min-height: 38px; padding: 0 16px; font-size: 0.875rem; flex-shrink: 0; }
.g-btn-ghost { background: transparent; color: var(--g-ink); border: 1.5px solid var(--g-line); box-shadow: none; }
.g-btn-ghost:hover { border-color: var(--g-primary); box-shadow: none; }
.g-btn-light { background: #fff; color: #3a2a7a; box-shadow: none; }
.g-btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / 0.45); box-shadow: none; }
.g-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* --- úvod --- */
.g-main { max-width: 1160px; margin: 0 auto; padding: 0 24px 56px; }
.g-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; padding: 40px 0 48px; animation: gIn 0.9s var(--g-ease) both; }
.g-crumbs { font-size: 0.875rem; color: var(--g-faint); }
.g-crumbs a { color: var(--g-soft); font-weight: 600; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); line-height: 1.1; margin: 14px 0 14px; }
.g-lead { font-size: 1.1875rem; color: var(--g-soft); margin: 0; max-width: 36em; }
.g-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--g-soft); font-weight: 600; }
.g-facts li::before { content: '✓'; margin-right: 6px; color: var(--g-ok); font-weight: 800; }
.g-hero-art { position: relative; animation: gIn 1s 0.12s var(--g-ease) both; }
.g-hero-art::before { content: ''; position: absolute; inset: -30px -20px; z-index: -1; border-radius: 40px; background: radial-gradient(60% 60% at 60% 40%, color-mix(in oklab, var(--g-primary) 18%, transparent), transparent 70%); }

/* malé ukážky z appky */
.m-cal, .m-chat, .m-vs { background: var(--g-card); border: 1px solid var(--g-line); border-radius: 20px; padding: 16px; box-shadow: var(--g-shadow); display: grid; gap: 8px; font-size: 0.8125rem; transform: rotate(1.2deg); transition: transform 0.6s var(--g-ease); }
.g-hero-art:hover .m-cal, .g-hero-art:hover .m-chat, .g-hero-art:hover .m-vs { transform: rotate(0deg) translateY(-4px); }
.m-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--g-line); }
.m-head b { font-family: Sora, Manrope, sans-serif; font-size: 0.9375rem; }
.m-head span { color: var(--g-faint); font-weight: 600; }
.m-ev { display: grid; gap: 2px; padding: 9px 11px; border-radius: 10px; border-left: 4px solid var(--c); background: color-mix(in oklab, var(--c) 13%, var(--g-card)); }
.m-ev small, .m-slot small, .m-lesson small { color: var(--g-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.m-rsvp { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.m-rsvp i { font-style: normal; font-size: 0.6875rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.m-rsvp .ok { color: #23774a; background: color-mix(in oklab, var(--g-ok) 20%, var(--g-card)); }
.m-rsvp .maybe { color: #8a5a00; background: color-mix(in oklab, var(--g-warn) 24%, var(--g-card)); }
:root[data-theme='dark'] .m-rsvp .ok { color: #7fd6a4; } :root[data-theme='dark'] .m-rsvp .maybe { color: #f1c36b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .m-rsvp .ok { color: #7fd6a4; } :root:not([data-theme='light']) .m-rsvp .maybe { color: #f1c36b; } }
.m-rem { justify-self: start; display: inline-flex; gap: 6px; align-items: center; padding: 3px 11px 3px 8px; border-radius: 999px; font-weight: 700; background: color-mix(in oklab, var(--g-accent) 15%, var(--g-card)); border: 1px solid color-mix(in oklab, var(--g-accent) 45%, var(--g-line)); }
.m-pause { justify-self: start; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 800; border: 1px dashed var(--g-line); background: var(--g-card); }
.m-slot { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1.5px dashed var(--g-line); color: var(--g-faint); }
.m-slot span { font-size: 0.75rem; font-weight: 600; }
.m-slot.is-free { border-style: solid; border-color: color-mix(in oklab, var(--g-ok) 55%, transparent); background: color-mix(in oklab, var(--g-ok) 11%, var(--g-card)); color: var(--g-ink); }
.m-vote { display: grid; gap: 4px; padding: 10px 11px; border-radius: 10px; background: var(--g-section); }
.m-vote > span { display: block; height: 6px; border-radius: 999px; background: var(--g-line); overflow: hidden; }
.m-vote i { display: block; height: 100%; border-radius: inherit; background: var(--g-primary); animation: gGrow 1.4s 0.4s var(--g-ease) both; }
.m-vote small { color: var(--g-soft); font-weight: 600; }
.m-lesson { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 9px; border-left: 3px solid var(--c); background: color-mix(in oklab, var(--c) 11%, var(--g-card)); }
.m-lesson span { font-size: 0.75rem; color: var(--g-soft); font-weight: 600; }
.m-lesson.is-sub span { color: #8a5a00; font-weight: 800; }
:root[data-theme='dark'] .m-lesson.is-sub span { color: #f1c36b; }
.m-note { margin-left: 14px; padding: 5px 10px; border-radius: 9px; border-left: 3px solid #e8669a; background: color-mix(in oklab, #e8669a 12%, var(--g-card)); }
.m-note b { margin-right: 4px; font-size: 0.6875rem; letter-spacing: 0.03em; text-transform: uppercase; color: #c2457a; }
.m-chat { gap: 6px; }
.m-chat p { margin: 0; max-width: 85%; padding: 8px 12px; border-radius: 14px; font-weight: 600; }
.m-q { justify-self: end; background: var(--g-primary); color: #fff; border-bottom-right-radius: 4px; }
.m-a { background: var(--g-section); border-bottom-left-radius: 4px; }
.m-chat p:nth-child(n) { animation: gIn 0.7s var(--g-ease) both; }
.m-chat p:nth-child(2) { animation-delay: 0.25s; } .m-chat p:nth-child(3) { animation-delay: 0.5s; } .m-chat p:nth-child(4) { animation-delay: 0.75s; }
.m-vs { grid-template-columns: 1fr 1fr; gap: 10px; }
.m-vs > div { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 14px; background: var(--g-section); }
.m-vs > div.is-inp { background: var(--g-primary-soft); outline: 1.5px solid color-mix(in oklab, var(--g-primary) 40%, transparent); }
.m-vs b { font-family: Sora, Manrope, sans-serif; margin-bottom: 2px; }
.m-vs span { font-weight: 600; }
.m-vs .no { color: var(--g-faint); }

/* --- obsah + text --- */
.g-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 8px; border-top: 1px solid var(--g-line); }
.g-toc { position: sticky; top: 92px; padding-top: 28px; font-size: 0.875rem; }
.g-toc b { display: block; margin-bottom: 8px; color: var(--g-faint); font-weight: 700; }
.g-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--g-line); }
.g-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--g-soft); font-weight: 600; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; }
.g-toc a:hover { color: var(--g-primary-ink); border-left-color: var(--g-primary); }
.g-content { max-width: 720px; min-width: 0; }
.g-sec { padding-top: 34px; }
h2 { font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.25; margin: 0 0 12px; }
p { margin: 0 0 12px; }
.g-steps { counter-reset: s; list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 10px; }
.g-steps li { counter-increment: s; position: relative; padding: 12px 16px 12px 58px; border-radius: 14px; background: var(--g-card); border: 1px solid var(--g-line); font-weight: 600; min-height: 50px; display: flex; align-items: center; }
.g-steps li::before { content: counter(s); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--g-primary); color: #fff; font-family: Sora, Manrope, sans-serif; font-weight: 800; font-size: 0.875rem; }
.g-feats { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g-feats li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--g-card); border: 1px solid var(--g-line); border-top: 3px solid var(--g-accent); transition: transform 0.35s var(--g-ease), box-shadow 0.35s ease; }
.g-feats li:hover { transform: translateY(-3px); box-shadow: var(--g-shadow); }
.g-feats b { font-family: Sora, Manrope, sans-serif; font-size: 0.9375rem; }
.g-feats span { color: var(--g-soft); font-size: 0.9375rem; line-height: 1.5; }

/* tabuľka porovnania */
.g-table-wrap { overflow-x: auto; border: 1px solid var(--g-line); border-radius: 16px; background: var(--g-card); }
.g-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 520px; }
.g-table th, .g-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--g-line); vertical-align: top; }
.g-table tr:last-child th, .g-table tr:last-child td { border-bottom: 0; }
.g-table thead th { font-family: Sora, Manrope, sans-serif; font-size: 0.875rem; background: var(--g-section); }
.g-table tbody th { font-weight: 700; }
.g-table td { color: var(--g-soft); }
.g-table .is-inp { color: var(--g-ink); background: color-mix(in oklab, var(--g-primary) 7%, transparent); font-weight: 600; }
.g-table thead .is-inp { color: var(--g-primary-ink); background: var(--g-primary-soft); }

/* časté otázky */
details { background: var(--g-card); border: 1px solid var(--g-line); border-radius: 14px; padding: 0 18px; margin: 0 0 10px; transition: border-color 0.2s ease; }
details[open] { border-color: color-mix(in oklab, var(--g-primary) 40%, var(--g-line)); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-weight: 800; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--g-section); color: var(--g-primary-ink); font-size: 1.1rem; transition: transform 0.3s var(--g-ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 16px; color: var(--g-soft); }
details[open] p { animation: gIn 0.45s var(--g-ease) both; }

/* výzva a ďalšie stránky */
.g-cta-band { margin: 56px 0 0; padding: 36px clamp(20px, 4vw, 48px); border-radius: 28px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #7b5fd6 0%, #4a3590 55%, #2e2162 100%); position: relative; overflow: hidden; }
.g-cta-band::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgb(240 122 47 / 0.55), transparent 70%); }
.g-cta-band h2 { color: #fff; margin-bottom: 8px; }
.g-cta-band p { color: rgb(255 255 255 / 0.85); max-width: 34em; }
.g-cta-band .g-ctas { margin-top: 18px; position: relative; z-index: 1; }
.g-more { padding-top: 48px; }
.g-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.g-cards a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: 16px; background: var(--g-card); border: 1px solid var(--g-line); color: var(--g-ink); text-decoration: none; transition: transform 0.35s var(--g-ease), border-color 0.25s ease, box-shadow 0.35s ease; }
.g-cards a:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--g-primary) 45%, var(--g-line)); box-shadow: var(--g-shadow); }
.g-cards b { font-family: Sora, Manrope, sans-serif; color: var(--g-primary-ink); }
.g-cards b::after { content: ' →'; transition: margin 0.25s var(--g-ease); }
.g-cards a:hover b::after { margin-left: 4px; }
.g-cards span { font-size: 0.875rem; color: var(--g-soft); font-weight: 500; line-height: 1.5; }

.g-foot { border-top: 1px solid var(--g-line); background: var(--g-section); }
.g-foot-in { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; max-width: 1160px; margin: 0 auto; padding: 22px 24px; font-size: 0.875rem; color: var(--g-soft); }
.g-foot-in > span:first-child { font-weight: 800; color: var(--g-ink); }
.g-foot a { font-weight: 600; color: var(--g-soft); }
.g-upd { margin-left: auto; color: var(--g-faint); }

@keyframes gIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes gGrow { from { width: 0; } }

@media (max-width: 1000px) {
  .g-nav { display: none; }
  .g-top-in { justify-content: space-between; }
  .g-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 28px; }
  .g-hero-art { max-width: 460px; }
  .g-body { grid-template-columns: 1fr; gap: 0; }
  .g-toc { position: static; padding-top: 22px; }
  .g-toc ul { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
  .g-toc a { margin: 0; padding: 5px 12px; border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-card); }
  .g-toc a:hover { border-color: var(--g-primary); }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .g-top-in, .g-main, .g-foot-in { padding-left: 16px; padding-right: 16px; }
  .g-lead { font-size: 1.0625rem; }
  .g-ctas .g-btn { flex: 1 1 auto; justify-content: center; }
  .g-feats { grid-template-columns: 1fr; }
  .g-upd { margin-left: 0; width: 100%; }
  .m-cal, .m-chat, .m-vs { transform: none; }
  .m-vs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .g-top, .g-toc, .g-cta-band, .g-more, .g-hero-art { display: none; }
  .g-body { display: block; border: 0; }
}
/* nič nepretečie do strany (žiara za ukážkou, natočená karta) */
.g-main { overflow-x: clip; }

/* 23. 10. (QA): v tmavom režime malo biele písmo na svetlofialovom tlačidle kontrast len ~3,5 : 1 — tmavšia fialová (~5 : 1) */
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .g-btn:not(.g-btn-ghost):not(.g-btn-light):not(.g-btn-ghost-light) { background: #6f57d0; } }
:root[data-theme='dark'] .g-btn:not(.g-btn-ghost):not(.g-btn-light):not(.g-btn-ghost-light) { background: #6f57d0; }