/* MUNIO Firma – vzhľad. Farby a písmo vychádzajú z MUNIO Office (atrament, zelená značka, piesok, jantár). */
:root {
  --ink-950: #0b1420; --ink-900: #101c2c; --ink-800: #16283d; --ink-700: #1f3550;
  --ink-600: #3a4d66; --ink-500: #5b6b7f; --ink-400: #8493a6; --ink-300: #a9b6c6; --ink-200: #cfd8e2; --ink-100: #e6ebf1;
  --brand-50: #eef6f3; --brand-100: #d7ebe2; --brand-200: #b0d7c6; --brand-300: #83bea8; --brand-400: #57a48b;
  --brand-500: #357f6a; --brand-600: #296455; --brand-700: #224f44; --brand-800: #1c3f37; --brand-900: #17332e;
  --sand-50: #faf8f4; --sand-100: #f3ede1; --sand-200: #e6dac4;
  --amber: #fbbf24; --amber-deep: #b97f06;
  --white: #fff;
  --r: 14px; --r-lg: 20px;
  --shadow: 0 1px 2px rgba(16,28,44,.06), 0 8px 24px rgba(16,28,44,.07);
  --shadow-pop: 0 18px 50px rgba(5,12,22,.35);
  --wrap: 1180px; --gut: clamp(20px, 4.5vw, 44px);
  --header-h: 68px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink-900); background: var(--sand-50); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--amber); color: var(--ink-950); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { left: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 860px; }

/* ---------- hlavička ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); transition: background .25s, box-shadow .25s; }
.top.is-solid { background: rgba(11,20,32,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,.07); }
.top__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--white); margin-right: auto; }
.brand__mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--amber); color: var(--ink-950); font-weight: 800; font-size: 19px; letter-spacing: -.02em; flex: none; }
.brand__mark--lg { width: 56px; height: 56px; border-radius: 14px; font-size: 30px; }
.brand__txt { display: grid; line-height: 1.15; }
.brand__txt strong { font-size: 15.5px; font-weight: 650; letter-spacing: -.005em; }
.brand__txt small { font-size: 11.5px; color: var(--ink-300); }
.nav { display: flex; gap: 26px; }
.nav a { color: var(--ink-200); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 6px 0; transition: color .2s; }
.nav a:hover { color: var(--white); }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 12px 10px; margin-right: -10px; }
.burger span { display: block; height: 2px; background: var(--white); border-radius: 2px; margin: 5px 0; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mnav { background: var(--ink-950); padding: 8px var(--gut) 20px; display: grid; border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 40px rgba(0,0,0,.45); }
.mnav[hidden] { display: none; }
.mnav a { color: var(--white); text-decoration: none; padding: 14px 0; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.07); }

/* ---------- tlačidlá ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 24px; border-radius: 12px; border: 1.5px solid transparent; font-weight: 650; font-size: 16px; line-height: 1.2; text-decoration: none; transition: transform .15s, background .2s, border-color .2s, box-shadow .2s; }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn--amber { background: var(--amber); color: var(--ink-950); box-shadow: 0 8px 26px rgba(251,191,36,.22); }
.btn--amber:hover { background: #ffcd45; transform: translateY(-1px); }
.btn--ghost { border-color: rgba(255,255,255,.28); color: var(--white); background: rgba(255,255,255,.03); }
.btn--ghost:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14.5px; border-radius: 10px; box-shadow: none; }
.link { background: none; border: 0; padding: 0; color: var(--brand-600); font-weight: 650; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--brand-800); }

/* ---------- úvod ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: radial-gradient(120% 90% at 78% 38%, #12322d 0%, #0d1f2a 42%, var(--ink-950) 78%); min-height: min(100svh, 900px); display: flex; align-items: stretch; }
.hero__orb { position: absolute; inset: 0; z-index: -2; }
.hero__orb canvas { display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s ease; }
.hero__orb.is-live canvas { opacity: 1; }
.orb-fallback { position: absolute; left: var(--ox, 74%); top: var(--oy, 42%); width: var(--od, 280px); height: var(--od, 280px); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #bfe9d8 0%, #57a48b 16%, #2f8f76 38%, #17332e 68%, rgba(23,51,46,0) 72%);
  box-shadow: 0 0 90px 30px rgba(87,164,139,.28), 0 0 180px 70px rgba(251,191,36,.07); transition: opacity 1s ease; }
.hero__orb.is-live .orb-fallback { opacity: 0; }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(11,20,32,.86) 0%, rgba(11,20,32,.62) 34%, rgba(11,20,32,0) 60%), linear-gradient(0deg, rgba(11,20,32,.7) 0%, rgba(11,20,32,0) 22%); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: 40px; align-items: center; padding-top: calc(var(--header-h) + 40px); padding-bottom: 56px; }
.hero__copy { max-width: 660px; }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-500); margin-bottom: 14px; }
.eyebrow--amber { color: var(--amber); }
h1 { font-size: clamp(34px, 5.1vw, 62px); line-height: 1.05; letter-spacing: -.028em; font-weight: 700; text-wrap: balance; }
.hero__lead { margin-top: 22px; font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.58; color: #d5dee8; max-width: 560px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__cta--center { justify-content: center; }
.hero__points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 14px; color: var(--ink-300); }
.hero__points li { position: relative; padding-left: 20px; }
.hero__points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 6px; border-left: 2px solid var(--brand-300); border-bottom: 2px solid var(--brand-300); transform: rotate(-45deg); }

.brief { align-self: end; justify-self: end; width: min(100%, 430px); padding: 18px 20px 14px; border-radius: var(--r-lg); background: rgba(13,26,38,.62); border: 1px solid rgba(176,215,198,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-pop); }
.brief__head { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-200); }
.brief__head small { margin-left: auto; font-size: 12.5px; letter-spacing: 0; color: var(--ink-300); font-weight: 500; text-transform: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(251,191,36,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(251,191,36,.55); } 70% { box-shadow: 0 0 0 9px rgba(251,191,36,0); } 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); } }
.brief__lines { margin-top: 12px; display: grid; gap: 9px; font-size: 15.5px; line-height: 1.45; color: #e8eef4; }
.brief__lines li { transition: opacity .5s ease, transform .5s ease; }
.js .brief__lines li { opacity: 0; transform: translateY(6px); }
.js .brief__lines li.is-in { opacity: 1; transform: none; }
.brief__lines li.is-now { color: var(--white); }
.brief__lines strong { color: var(--amber); font-weight: 650; }
.brief__note { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; color: var(--ink-400); }

/* ---------- sekcie ---------- */
.sec { padding: clamp(64px, 8.5vw, 116px) 0; background: var(--white); }
.sec--sand { background: var(--sand-50); }
.sec--dark { background: var(--ink-950); color: var(--white); }
.h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -.022em; font-weight: 700; text-wrap: balance; max-width: 820px; }
.h2--narrow { max-width: 640px; }
.h3 { font-size: 20px; letter-spacing: -.01em; }
.lead { margin-top: 16px; font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-500); max-width: 700px; }
.lead--dark { color: var(--ink-300); }
.aside { margin-top: 36px; max-width: 720px; font-size: 18px; color: var(--ink-700); padding-left: 18px; border-left: 3px solid var(--amber); }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* bolesti */
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.pain { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r-lg); padding: 26px 24px 24px; box-shadow: var(--shadow); }
.pain__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--amber); color: var(--ink-950); font-weight: 750; font-size: 14.5px; }
.pain h3 { margin-top: 16px; font-size: 20px; line-height: 1.25; letter-spacing: -.012em; }
.pain p { margin-top: 10px; color: var(--ink-500); font-size: 16px; }

/* roboti */
.bots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.bot { border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: 26px 26px 10px; background: var(--white); box-shadow: var(--shadow); }
.bot--main { border-color: var(--brand-300); background: linear-gradient(180deg, var(--brand-50), var(--white) 46%); }
.bot__head { display: flex; align-items: flex-start; gap: 14px; }
.bot__head h3 { font-size: 21px; letter-spacing: -.012em; line-height: 1.2; }
.bot__head p { color: var(--ink-500); font-size: 15.5px; margin-top: 3px; }
.bot__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--ink-950); }
.bot__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--brand-200); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tag { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--amber); color: var(--ink-950); padding: 5px 10px; border-radius: 999px; }
.bot__rows { margin-top: 18px; }
.bot__rows > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--ink-100); font-size: 15.5px; }
.bot__rows dt { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-400); padding-top: 3px; }
.bot__rows dd { color: var(--ink-700); }
.bot__rows .is-out dt { color: var(--brand-600); }
.bot__rows .is-out dd { color: var(--ink-950); font-weight: 600; }

/* ---------- ukážka ---------- */
.app { margin-top: 40px; border-radius: 18px; overflow: hidden; background: var(--sand-50); color: var(--ink-900); box-shadow: 0 30px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
.app__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #0e1a28; border-bottom: 1px solid rgba(255,255,255,.07); }
.app__dots { display: flex; gap: 6px; }
.app__dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a3a4f; }
.app__title { font-size: 13px; color: var(--ink-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__reset { margin-left: auto; flex: none; background: none; border: 1px solid rgba(255,255,255,.18); color: var(--ink-200); font-size: 12.5px; padding: 6px 12px; border-radius: 8px; }
.app__reset:hover { border-color: rgba(255,255,255,.4); color: var(--white); }
.app__body { padding: clamp(16px, 2.6vw, 30px); min-height: 520px; }
.app__foot { padding: 12px 18px; font-size: 12.5px; color: var(--ink-500); background: var(--sand-100); border-top: 1px solid var(--sand-200); text-align: center; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 22px; scrollbar-width: none; border-bottom: 1px solid var(--sand-200); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 2.5px solid transparent; padding: 10px 14px 12px; font-size: 15px; font-weight: 600; color: var(--ink-500); margin-bottom: -1px; }
.tab:hover { color: var(--ink-900); }
.tab.is-on { color: var(--ink-950); border-bottom-color: var(--brand-500); }
.tab b { font-size: 12px; font-weight: 700; min-width: 21px; height: 21px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--ink-100); color: var(--ink-700); }
.tab.is-on b { background: var(--brand-600); color: var(--white); }
.tab b[data-zero] { opacity: .45; }
.pane__intro { color: var(--ink-500); font-size: 15.5px; max-width: 760px; margin-bottom: 18px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { text-align: left; display: grid; gap: 2px; padding: 18px 18px 16px; border-radius: var(--r); background: var(--white); border: 1px solid var(--sand-200); box-shadow: var(--shadow); transition: transform .15s, border-color .2s; }
button.kpi:hover { transform: translateY(-2px); border-color: var(--brand-300); }
.kpi__n { font-size: 38px; font-weight: 720; letter-spacing: -.03em; line-height: 1; color: var(--ink-950); font-variant-numeric: tabular-nums; }
.kpi__l { font-size: 14.5px; color: var(--ink-600); line-height: 1.3; margin-top: 6px; }
.kpi__a { font-size: 13px; font-weight: 650; color: var(--brand-600); margin-top: 10px; }
.kpi--amber { background: #fff8e6; border-color: #f4d98b; }
.kpi--amber .kpi__a { color: var(--amber-deep); }
.kpi--quiet { background: var(--sand-100); box-shadow: none; }
.kpi--quiet .kpi__a { color: var(--ink-400); font-weight: 500; }
.today { margin-top: 22px; background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r); padding: 20px 20px 8px; box-shadow: var(--shadow); }
.today h3 { font-size: 17px; }
.today__list li { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ink-100); font-size: 15.5px; }
.today__list li:first-child { border-top: 0; margin-top: 6px; }
.pill { display: inline-block; justify-self: start; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); white-space: nowrap; }
.pill--amber { background: #fff1c9; color: #7a5200; }
.pill--blue { background: #e7eefb; color: #254a8f; }
.pill--grey { background: var(--ink-100); color: var(--ink-600); }
.today__list li.is-done { opacity: .5; }
.today__list li.is-done .link { visibility: hidden; }
.b[disabled] { opacity: .6; cursor: default; }
.draft.is-new, .opp.is-new { animation: fresh 1.6s ease; }
@keyframes fresh { 0% { box-shadow: 0 0 0 3px rgba(251,191,36,.9); } 100% { box-shadow: var(--shadow); } }
.list { display: grid; gap: 12px; }
.opp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: start; background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); transition: opacity .3s, transform .3s; }
.opp.is-out, .draft.is-out { opacity: 0; transform: translateX(18px); }
.opp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-500); }
.opp h4 { margin: 8px 0 4px; font-size: 17.5px; letter-spacing: -.008em; line-height: 1.3; }
.opp p { color: var(--ink-600); font-size: 15px; }
.opp__why { margin-top: 8px; font-size: 14.5px; color: var(--ink-700); padding-left: 12px; border-left: 2.5px solid var(--brand-300); }
.opp__why b { color: var(--brand-700); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.opp .acts { flex-direction: column; align-items: stretch; min-width: 172px; }
.b { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--ink-200); background: var(--white); font-size: 14.5px; font-weight: 650; color: var(--ink-800); transition: background .15s, border-color .15s; }
.b:hover { border-color: var(--ink-400); }
.b--go { background: var(--brand-600); border-color: var(--brand-600); color: var(--white); }
.b--go:hover { background: var(--brand-700); border-color: var(--brand-700); }
.b--quiet { border-color: transparent; color: var(--ink-500); }
.b--quiet:hover { background: var(--ink-100); border-color: transparent; }
.drafts { display: grid; gap: 16px; }
.draft { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; transition: opacity .3s, transform .3s; }
.draft__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 20px; background: var(--sand-50); border-bottom: 1px solid var(--sand-200); font-size: 14px; color: var(--ink-600); }
.draft__top strong { color: var(--ink-950); font-size: 15.5px; }
.draft__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.mail { padding: 18px 20px; border-right: 1px solid var(--sand-200); }
.mail__subj { font-weight: 650; font-size: 16px; color: var(--ink-950); }
.mail__body { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-800); white-space: pre-line; }
.mail__body[contenteditable="true"] { outline: 2px solid var(--amber); outline-offset: 6px; border-radius: 6px; background: #fffdf5; }
.quote { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-800); white-space: pre-line; padding: 12px 14px; background: var(--sand-50); border-radius: 10px; border: 1px solid var(--sand-200); }
.mail__label { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-400); margin-top: 16px; }
.mail__label:first-child { margin-top: 0; }
.why { padding: 18px 20px; font-size: 14.5px; color: var(--ink-700); background: #fcfbf8; }
.why h5 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-600); }
.why ul { display: grid; gap: 8px; }
.why li { position: relative; padding-left: 16px; }
.why li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-400); }
.why__src { margin-top: 12px; font-size: 13px; color: var(--ink-500); }
.draft__acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--sand-200); background: var(--white); }
.empty { padding: 34px 20px; text-align: center; color: var(--ink-500); background: var(--white); border: 1px dashed var(--sand-200); border-radius: var(--r); }
.week { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; }
.funnel, .week__note { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); }
.funnel { display: grid; gap: 18px; align-content: center; }
.funnel__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 40px; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-700); }
.funnel__row i { display: block; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-600), var(--brand-400)); width: var(--w); min-width: 10px; }
.funnel__row b { text-align: right; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ink-950); }
.week__note h3 { font-size: 16.5px; margin-bottom: 10px; }
.week__note ul { display: grid; gap: 10px; font-size: 15px; color: var(--ink-700); }
.week__note li { position: relative; padding-left: 18px; }
.week__note li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.fine { margin-top: 16px; font-size: 13px; color: var(--ink-500); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 60; max-width: min(92vw, 560px); padding: 14px 18px; border-radius: 12px; background: var(--ink-900); color: var(--white); font-size: 15px; box-shadow: var(--shadow-pop); border: 1px solid rgba(176,215,198,.25); opacity: 0; transition: opacity .25s, transform .25s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast[hidden] { display: none; }

/* postup */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; counter-reset: s; }
.step { position: relative; background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r-lg); padding: 24px 22px; box-shadow: var(--shadow); }
.step__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink-950); color: var(--amber); font-weight: 750; }
.step h3 { margin-top: 16px; font-size: 19px; letter-spacing: -.01em; }
.step p { margin-top: 8px; color: var(--ink-500); font-size: 15.5px; }

/* zásady */
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 44px; border-top: 1px solid var(--ink-100); border-left: 1px solid var(--ink-100); }
.rule { padding: 26px 24px 28px; border-right: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.rule h3 { font-size: 18.5px; letter-spacing: -.01em; position: relative; padding-left: 26px; }
.rule h3::before { content: ""; position: absolute; left: 0; top: .32em; width: 15px; height: 8px; border-left: 2.5px solid var(--brand-500); border-bottom: 2.5px solid var(--brand-500); transform: rotate(-45deg); }
.rule p { margin-top: 8px; color: var(--ink-500); font-size: 15.5px; }

/* pre koho */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.fit__col { border-radius: var(--r-lg); padding: 28px 26px; background: var(--white); border: 1px solid var(--sand-200); box-shadow: var(--shadow); }
.fit__col h3 { font-size: 20px; letter-spacing: -.01em; }
.fit__col ul { margin-top: 14px; display: grid; gap: 11px; color: var(--ink-700); font-size: 16px; }
.fit__col li { position: relative; padding-left: 28px; }
.fit__col--yes { border-color: var(--brand-200); }
.fit__col--yes li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 14px; height: 7px; border-left: 2.5px solid var(--brand-500); border-bottom: 2.5px solid var(--brand-500); transform: rotate(-45deg); }
.fit__col--no li::before, .fit__col--no li::after { content: ""; position: absolute; left: 2px; top: .72em; width: 14px; height: 2.5px; background: var(--ink-400); transform: rotate(45deg); }
.fit__col--no li::after { transform: rotate(-45deg); }

/* stav */
.state { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 22px; background: var(--sand-100); border: 1px solid var(--sand-200); border-radius: var(--r-lg); padding: 28px 30px; max-width: 900px; margin-inline: auto; }
.state__bar { background: var(--brand-500); border-radius: 4px; }
.state p { margin-top: 10px; color: var(--ink-700); font-size: 16px; }

/* otázky */
.faq { margin-top: 34px; border-top: 1px solid var(--sand-200); }
.faq details { border-bottom: 1px solid var(--sand-200); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: 18.5px; font-weight: 600; letter-spacing: -.008em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--ink-500); border-bottom: 2.5px solid var(--ink-500); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 44px 22px 0; color: var(--ink-600); font-size: 16.5px; }

/* kontakt */
.cta { position: relative; overflow: hidden; text-align: center; isolation: isolate; }
.cta__glow { position: absolute; left: 50%; top: -40%; width: 900px; height: 900px; transform: translateX(-50%); z-index: -1; background: radial-gradient(circle, rgba(47,143,118,.35) 0%, rgba(47,143,118,.12) 32%, rgba(11,20,32,0) 62%); }
.cta__in { display: grid; justify-items: center; }
.cta .h2 { margin-top: 22px; }
.cta .lead { margin-inline: auto; }
.cta__mail { margin-top: 18px; color: var(--ink-300); font-size: 15.5px; }

/* pätička */
.foot { background: #070e17; color: var(--ink-300); padding: 44px 0 52px; font-size: 14.5px; }
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; }
.foot p { margin-top: 6px; }
.foot__brand { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 650; font-size: 16px; margin-top: 0 !important; margin-bottom: 10px; }
.foot__brand .brand__mark { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
.foot a { color: var(--brand-200); }
.foot__legal { text-align: right; }
.foot__draft { color: var(--ink-500); }

/* ---------- menšie obrazovky ---------- */
@media (max-width: 1020px) {
  .nav { display: none; }
  .burger { display: block; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body { font-size: 16.5px; }
  .hero { min-height: 0; background: radial-gradient(130% 60% at 50% 16%, #12322d 0%, #0d1f2a 44%, var(--ink-950) 80%); }
  .hero__shade { background: linear-gradient(0deg, rgba(11,20,32,.92) 0%, rgba(11,20,32,.72) 46%, rgba(11,20,32,0) 70%); }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: calc(var(--header-h) + var(--orb-space, 300px)); padding-bottom: 44px; }
  .brief { justify-self: stretch; width: 100%; }
  .orb-fallback { --ox: 50%; --oy: 190px; --od: 190px; }
  .top__cta { display: none; }
  .pains, .bots, .fit, .week, .draft__grid, .foot__in { grid-template-columns: minmax(0, 1fr); }
  .mail { border-right: 0; border-bottom: 1px solid var(--sand-200); }
  .foot__legal { text-align: left; }
  .today__list li { grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
  .today__list .link { justify-self: start; }
  .opp { grid-template-columns: minmax(0, 1fr); }
  .opp .acts { flex-direction: row; }
  .funnel__row { grid-template-columns: 120px minmax(0, 1fr) 34px; font-size: 13.5px; }
}
@media (max-width: 600px) {
  .btn { width: 100%; }
  .hero__points { display: grid; gap: 8px; }
  .kpis { gap: 10px; }
  .kpi { padding: 14px 14px 12px; }
  .kpi__n { font-size: 32px; }
  .steps, .rules { grid-template-columns: minmax(0, 1fr); }
  .bot { padding: 22px 20px 6px; }
  .bot__rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tag { display: none; }
  .app { margin-inline: calc(var(--gut) * -0.5); border-radius: 14px; }
  .app__title { display: none; }
  .draft__acts .b, .opp .acts .b { flex: 1 1 auto; }
  .state { padding: 22px 20px; gap: 16px; }
  .faq summary { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal, .js .brief__lines li { opacity: 1; transform: none; }
}

/* ===================== verzia 2: dve služby, výber, ukážka podľa odvetvia ===================== */
.btn--dark { background: var(--ink-950); color: var(--white); }
.btn--dark:hover { background: var(--ink-800); transform: translateY(-1px); }

/* výber: dve karty */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.choice { display: grid; justify-items: start; gap: 6px; text-align: left; padding: 26px 26px 24px; border-radius: var(--r-lg); border: 1.5px solid var(--ink-100); background: var(--white); box-shadow: var(--shadow); transition: transform .15s, border-color .2s, box-shadow .2s; }
.choice:hover { transform: translateY(-2px); border-color: var(--brand-300); }
.choice--a { background: linear-gradient(180deg, #fffaf0, var(--white) 55%); }
.choice--b { background: linear-gradient(180deg, var(--brand-50), var(--white) 55%); }
.choice__ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; background: var(--ink-950); margin-bottom: 8px; }
.choice__ic svg { width: 26px; height: 26px; fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.choice--b .choice__ic svg { stroke: var(--brand-200); }
.choice__k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.choice__t { font-size: clamp(24px, 2.4vw, 30px); font-weight: 720; letter-spacing: -.02em; line-height: 1.15; color: var(--ink-950); }
.choice__d { font-size: 16.5px; color: var(--ink-600); max-width: 440px; }
.choice__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; font-size: 15.5px; color: var(--brand-600); }
.choice__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.choice:hover .choice__go svg { transform: translateX(4px); }

/* výber: dve otázky */
.quiz { margin-top: 24px; padding: 22px 26px 24px; border-radius: var(--r-lg); background: var(--sand-50); border: 1px solid var(--sand-200); }
.quiz__title { font-weight: 700; font-size: 17px; color: var(--ink-900); }
.quiz__qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 14px; }
.quiz__q > p { font-size: 15px; color: var(--ink-600); margin-bottom: 10px; font-weight: 600; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { border: 1.5px solid var(--ink-200); background: var(--white); border-radius: 999px; padding: 9px 16px; font-size: 15px; font-weight: 600; color: var(--ink-800); transition: background .15s, border-color .15s, color .15s; }
.opt:hover { border-color: var(--ink-400); }
.opt.is-on { background: var(--ink-950); border-color: var(--ink-950); color: var(--white); }
.quiz__res { margin-top: 20px; padding: 18px 20px; background: var(--white); border-radius: var(--r); border-left: 4px solid var(--amber); box-shadow: var(--shadow); display: grid; gap: 8px; justify-items: start; }
.quiz__rec { font-size: 19px; font-weight: 720; letter-spacing: -.01em; color: var(--ink-950); }
.quiz__why { color: var(--ink-600); font-size: 15.5px; max-width: 760px; }
.quiz__res .btn { margin-top: 6px; }

/* služby */
.svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.svc { display: flex; flex-direction: column; align-items: flex-start; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: 28px 28px 26px; box-shadow: var(--shadow); border-top: 4px solid var(--amber); transition: box-shadow .3s; }
.svc--b { border-top-color: var(--brand-500); }
.svc.is-picked { box-shadow: 0 0 0 3px rgba(251,191,36,.7), var(--shadow); }
.svc--b.is-picked { box-shadow: 0 0 0 3px rgba(53,127,106,.55), var(--shadow); }
.svc__k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.svc__head h3 { font-size: 27px; letter-spacing: -.02em; margin-top: 4px; }
.svc__head p:last-child { color: var(--ink-500); margin-top: 6px; font-size: 16px; }
.agents { margin: 18px 0 6px; width: 100%; }
.agents li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--ink-100); }
.agents__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--ink-950); }
.agents__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--brand-200); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.svc--a .agents__ic svg { stroke: var(--amber); }
.agents strong { font-size: 16.5px; color: var(--ink-950); }
.agents p { font-size: 15px; color: var(--ink-500); margin-top: 2px; }
.svc__fit { margin: 8px 0 18px; padding-top: 14px; border-top: 1px solid var(--ink-100); width: 100%; font-size: 15.5px; color: var(--ink-700); }
.svc .btn { margin-top: auto; }

/* ukážka: prepínače */
.controls { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 30px; }
.seg { display: inline-flex; padding: 4px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); flex: none; }
.seg__b { border: 0; background: none; color: var(--ink-300); padding: 11px 18px; border-radius: 10px; font-size: 15px; font-weight: 700; transition: background .2s, color .2s; }
.seg__b:hover { color: var(--white); }
.seg__b.is-on { background: var(--amber); color: var(--ink-950); }
.chips-wrap { width: 100%; min-width: 0; }
.chips-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.02); color: var(--ink-200); border-radius: 999px; padding: 8px 14px; font-size: 14.5px; font-weight: 600; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.chip:hover { border-color: rgba(255,255,255,.5); color: var(--white); }
.chip.is-on { background: var(--white); border-color: var(--white); color: var(--ink-950); }
.demo-lead { margin-top: 20px; min-height: 3.2em; }
.app { margin-top: 22px; }

/* ukážka asistenta: položky */
.items { display: grid; gap: 12px; }
.item { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r); padding: 16px 20px; box-shadow: var(--shadow); transition: opacity .3s, transform .3s; }
.item.is-out { opacity: 0; transform: translateX(18px); }
.item__dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; background: var(--brand-400); }
.item__dot--red { background: #d64545; box-shadow: 0 0 0 4px rgba(214,69,69,.15); }
.item__dot--amber { background: #e0a106; box-shadow: 0 0 0 4px rgba(224,161,6,.15); }
.item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink-500); }
.item h4 { margin: 6px 0 2px; font-size: 17px; line-height: 1.3; letter-spacing: -.008em; }
.item p { color: var(--ink-600); font-size: 15px; }
.item__amt { font-weight: 700; color: var(--ink-950); font-variant-numeric: tabular-nums; }
.item .acts { flex-direction: column; align-items: stretch; min-width: 172px; }
.pill--red { background: #fde4e1; color: #9b2c2c; }
.today--auto { margin-top: 14px; background: var(--sand-100); box-shadow: none; }
.today--auto h3 { color: var(--ink-700); }
.auto-list { display: grid; gap: 8px; margin: 10px 0 12px; }
.auto-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-700); }
.auto-list li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 12px; height: 6px; border-left: 2.5px solid var(--brand-500); border-bottom: 2.5px solid var(--brand-500); transform: rotate(-45deg); }

/* pre koho */
.fit__no { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sand-200); color: var(--ink-500); font-size: 15px; }
.fit__tags { margin-top: 16px; color: var(--ink-600); font-size: 15px; line-height: 1.65; }
.fit__pairs strong { color: var(--ink-950); }

@media (max-width: 900px) {
  .choices, .quiz__qs, .svcs { grid-template-columns: minmax(0, 1fr); }
  .controls { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .seg { display: flex; }
  .seg__b { flex: 1 1 0; padding: 11px 10px; }
  .chips-wrap { flex: none; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .chips::-webkit-scrollbar { display: none; }
  .item { grid-template-columns: 12px minmax(0, 1fr); }
  .item .acts { grid-column: 1 / -1; flex-direction: row; min-width: 0; }
  .item .acts .b { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .choice { padding: 22px 20px 20px; }
  .quiz { padding: 20px 18px 22px; }
  .svc { padding: 24px 20px 22px; }
  .svc .btn { width: 100%; }
}

/* ===================== cenník ===================== */
.cennik { background: var(--white); }
.cennik__ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 30px; }
.cennik .seg { background: var(--sand-100); border-color: var(--sand-200); }
.cennik .seg__b { color: var(--ink-600); }
.cennik .seg__b:hover { color: var(--ink-950); }
.cennik .seg__b.is-on { background: var(--ink-950); color: var(--white); }
.cur { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--sand-200); background: var(--sand-50); }
.cur__b { border: 0; background: none; color: var(--ink-500); padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 650; transition: background .2s, color .2s; }
.cur__b:hover { color: var(--ink-950); }
.cur__b.is-on { background: var(--white); color: var(--ink-950); box-shadow: var(--shadow); }
.cennik[data-cur="eur"] .czk, .cennik[data-cur="czk"] .eur { display: none; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; align-items: stretch; }
.plans[hidden] { display: none; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--ink-100); border-radius: var(--r-lg); padding: 26px 24px 24px; box-shadow: var(--shadow); }
.plan--top { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(251,191,36,.35), 0 18px 40px rgba(16,28,44,.12); }
.plan--b.plan--top { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(53,127,106,.3), 0 18px 40px rgba(16,28,44,.12); }
.plan__tag { position: absolute; top: -13px; left: 22px; font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--amber); color: var(--ink-950); }
.plan--b .plan__tag { background: var(--brand-600); color: var(--white); }
.plan__head h3 { font-size: 24px; letter-spacing: -.015em; }
.plan__head p { margin-top: 4px; color: var(--ink-500); font-size: 15px; min-height: 2.6em; }
.plan__price { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__price b { font-size: clamp(32px, 3vw, 40px); font-weight: 760; letter-spacing: -.03em; line-height: 1; color: var(--ink-950); font-variant-numeric: tabular-nums; }
.plan__price small { font-size: 14px; color: var(--ink-500); font-weight: 500; }
.plan__setup { margin-top: 6px; font-size: 14px; color: var(--ink-600); }
.plan__lim { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ink-100); }
.plan__lim li { font-size: 12.5px; color: var(--ink-700); background: var(--sand-100); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.plan__lim b { color: var(--ink-950); font-weight: 750; }
.plan--a .plan__lim li { background: #fff6dd; }
.plan--b .plan__lim li { background: var(--brand-50); }
.plan__list { margin-top: 16px; display: grid; align-content: start; gap: 10px; font-size: 15px; color: var(--ink-700); flex: 1 1 auto; }
.plan__list li { position: relative; padding-left: 26px; }
.plan__list li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 12px; height: 6px; border-left: 2.5px solid var(--brand-500); border-bottom: 2.5px solid var(--brand-500); transform: rotate(-45deg); }
.plan--a .plan__list li::before { border-color: var(--amber-deep); }
.plan__list strong { color: var(--ink-950); font-weight: 650; }
.plan__all { font-weight: 700; color: var(--ink-950); padding-left: 0 !important; }
.plan__all::before { display: none; }
.plan__cta { margin-top: 22px; width: 100%; }

.perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.perks li { display: grid; gap: 3px; padding: 16px 18px; border-radius: var(--r); background: var(--ink-950); color: var(--white); }
.perks b { font-size: 19px; letter-spacing: -.015em; color: var(--amber); }
.perks span { font-size: 13.5px; color: var(--ink-300); }

.incl { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 26px; }
.incl__col { padding: 24px 24px 22px; border-radius: var(--r-lg); background: var(--sand-50); border: 1px solid var(--sand-200); }
.incl__col h3 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 12px; }
.incl__col ul { display: grid; gap: 9px; font-size: 15px; color: var(--ink-700); }
.incl__col li { position: relative; padding-left: 24px; }
.incl__col li::before { content: ""; position: absolute; left: 2px; top: .48em; width: 12px; height: 6px; border-left: 2.5px solid var(--brand-500); border-bottom: 2.5px solid var(--brand-500); transform: rotate(-45deg); }
.incl__col--no li::before, .incl__col--no li::after { content: ""; position: absolute; left: 3px; top: .75em; width: 12px; height: 2.5px; background: var(--ink-400); transform: rotate(45deg); border: 0; }
.incl__col--no li::after { transform: rotate(-45deg); }
.incl__terms { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sand-200); font-size: 14px; color: var(--ink-600); }
.incl__terms b { color: var(--ink-900); }
.cennik__fine { margin-top: 18px; }

@media (max-width: 1020px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .plan--top { order: -1; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cennik__ctrl { flex-direction: column; align-items: stretch; }
  .cennik .seg { display: flex; }
  .cur { justify-content: center; }
  .cur__b { flex: 1 1 0; }
  .incl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .perks { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 24px 20px 22px; }
}

/* ===================== verzia 4: čo dostanete, cena začiatku, formulár ===================== */
.daily .lead { max-width: 760px; }
.daily__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.daily__col { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r-lg); padding: 26px 26px 24px; box-shadow: var(--shadow); border-top: 4px solid var(--brand-500); }
.daily__col--you { border-top-color: var(--amber); }
.daily__col h3 { font-size: 19px; letter-spacing: -.012em; }
.daily__col ul { margin-top: 14px; display: grid; gap: 10px; font-size: 15.5px; color: var(--ink-700); }
.daily__col li { position: relative; padding-left: 26px; }
.daily__col--auto li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 12px; height: 6px; border-left: 2.5px solid var(--brand-500); border-bottom: 2.5px solid var(--brand-500); transform: rotate(-45deg); }
.daily__col--you li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--amber-deep); background: #fff6dd; }
.daily__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sand-200); font-size: 14.5px; color: var(--ink-600); }

.plan__total { margin-top: 10px; font-size: 14px; color: var(--ink-600); padding: 8px 12px; border-radius: 9px; background: var(--sand-50); border: 1px dashed var(--sand-200); }
.plan__total b { color: var(--ink-950); font-variant-numeric: tabular-nums; }
.perks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* kontakt s formulárom */
.cta { text-align: left; }
.cta__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: start; }
.cta__txt .lead { margin-inline: 0; }
.cta__txt .brand__mark--lg { display: inline-grid; margin-bottom: 18px; }
.cta__pts { margin-top: 22px; display: grid; gap: 10px; color: var(--ink-200); font-size: 15.5px; }
.cta__pts li { position: relative; padding-left: 24px; }
.cta__pts li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 6px; border-left: 2.5px solid var(--brand-300); border-bottom: 2.5px solid var(--brand-300); transform: rotate(-45deg); }
.cta__mail { margin-top: 22px; }
.cta__mail a { color: var(--brand-200); }
.form { background: var(--white); color: var(--ink-900); border-radius: var(--r-lg); padding: 26px 26px 24px; box-shadow: var(--shadow-pop); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form__f { display: grid; gap: 6px; font-size: 14px; font-weight: 650; color: var(--ink-800); }
.form__f em { font-style: normal; font-weight: 500; color: var(--ink-400); }
.form__f--full { grid-column: 1 / -1; }
.form__f input, .form__f select, .form__f textarea { width: 100%; font: inherit; font-weight: 500; font-size: 15.5px; color: var(--ink-950); background: var(--sand-50); border: 1.5px solid var(--sand-200); border-radius: 10px; padding: 11px 13px; transition: border-color .15s, background .15s; }
.form__f input:focus, .form__f select:focus, .form__f textarea:focus { outline: none; border-color: var(--brand-500); background: var(--white); box-shadow: 0 0 0 3px rgba(53,127,106,.18); }
.form__f textarea { resize: vertical; min-height: 96px; }
.form__f select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }
.form__chk { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; font-weight: 500; color: var(--ink-600); margin-top: 2px; }
.form__chk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-600); }
.form__submit { width: 100%; margin-top: 18px; }
.form__fine { margin-top: 12px; font-size: 13px; color: var(--ink-500); text-align: center; }
.form.is-flash { animation: formflash 1.2s ease; }
@keyframes formflash { 0% { box-shadow: 0 0 0 4px rgba(251,191,36,.9), var(--shadow-pop); } 100% { box-shadow: var(--shadow-pop); } }

@media (max-width: 1020px) { .perks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .daily__cols, .cta__grid { grid-template-columns: minmax(0, 1fr); }
  .perks--3 { grid-template-columns: minmax(0, 1fr); }
  .cta__grid { gap: 30px; }
}
@media (max-width: 600px) {
  .form { padding: 20px 16px 18px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
}
.foot__links a { color: var(--ink-300); text-decoration: underline; text-underline-offset: 3px; }
.foot__links a:hover { color: var(--white); }
.form__chk a { color: var(--brand-600); }

/* reálna ukážka */
.real { background: var(--sand-50); }
.lievik { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 36px; counter-reset: f; }
.lievik li { position: relative; background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r-lg); padding: 20px 18px 18px; box-shadow: var(--shadow); display: grid; gap: 4px; align-content: start; }
.lievik li + li::before { content: ""; position: absolute; left: -11px; top: 50%; width: 10px; height: 2px; background: var(--sand-300, var(--sand-200)); }
.lievik b { font-size: 36px; font-weight: 760; letter-spacing: -.03em; line-height: 1; color: var(--ink-950); font-variant-numeric: tabular-nums; }
.lievik span { font-size: 15px; font-weight: 650; color: var(--ink-800); margin-top: 4px; }
.lievik small { font-size: 13px; color: var(--ink-600); line-height: 1.4; }
.lievik__win { background: var(--ink-950) !important; border-color: var(--ink-950) !important; }
.lievik__win b { color: var(--amber); }
.lievik__win span { color: var(--white); }
.lievik__win small { color: var(--ink-300); }
.calc { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.calc__in, .calc__out { border-radius: var(--r-lg); padding: 24px 26px 20px; }
.calc__in { background: var(--white); border: 1px solid var(--sand-200); box-shadow: var(--shadow); }
.calc__in label { display: block; font-weight: 700; font-size: 16px; color: var(--ink-900); }
.calc__field { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.calc__field input { width: 100%; max-width: 220px; font: inherit; font-size: 28px; font-weight: 760; letter-spacing: -.02em; color: var(--ink-950); padding: 8px 12px; border: 1.5px solid var(--sand-300, var(--sand-200)); border-radius: 12px; background: var(--sand-50); font-variant-numeric: tabular-nums; }
.calc__field input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(251, 191, 36, .28); }
.calc__field span { font-size: 24px; font-weight: 700; color: var(--ink-600); }
.calc__in input[type=range] { width: 100%; margin-top: 16px; accent-color: var(--amber); }
.calc__out { background: var(--ink-950); color: var(--white); }
.calc__cap, .asst__cap { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-200); }
.calc__out ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.calc__out li { display: grid; gap: 4px; align-content: start; }
.calc__out b { font-size: 34px; font-weight: 760; letter-spacing: -.03em; line-height: 1; color: var(--amber); font-variant-numeric: tabular-nums; }
.calc__out span { font-size: 14px; color: var(--ink-300); }
.calc__out .fine { color: var(--ink-400); margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.asst { margin-top: 16px; background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r-lg); padding: 22px 26px 18px; box-shadow: var(--shadow); }
.asst__cap { color: var(--ink-600); }
.asst ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.asst li { display: grid; gap: 4px; align-content: start; }
.asst b { font-size: 30px; font-weight: 760; letter-spacing: -.03em; line-height: 1; color: var(--ink-950); font-variant-numeric: tabular-nums; }
.asst span { font-size: 14px; color: var(--ink-600); }
.asst .fine { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sand-200); }
@media (max-width: 1020px) { .lievik { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lievik li + li::before { display: none; } .calc { grid-template-columns: minmax(0, 1fr); } .calc__out ul, .asst ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lievik { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lievik__win { grid-column: 1 / -1; } .calc__out ul, .asst ul { grid-template-columns: minmax(0, 1fr); } .lievik b, .calc__out b { font-size: 30px; } }