:root {
  --bg: #FFF8EC; --bg2: #FFFFFF; --ink: #2B2620; --muted: #6E655A; --line: #EADFCB;
  --yellow: #FAC775; --yellow-d: #412402; --pink: #F4C0D1; --pink-d: #4B1528;
  --green: #C0DD97; --green-d: #173404; --red: #E24B4A; --btn: #2B2620; --btn-ink: #FFF8EC;
  --hand: "Segoe Print", "Bradley Hand", "Marker Felt", "Comic Neue", cursive;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1E1B17; --bg2: #2A2621; --ink: #F3EDE3; --muted: #B5AB9C; --line: #3E3830; --btn: #FAC775; --btn-ink: #2B2620; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 680px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .9rem; color: var(--muted); margin-top: .6rem; }
section { padding: 72px 0; }

.top { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { display: flex; justify-content: space-between; align-items: center; height: 60px; }
.logo { font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.logo-note { width: 22px; height: 22px; background: var(--yellow); transform: rotate(-6deg); position: relative; border-radius: 2px; }
.logo-note::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--red); top: -3px; left: 7px; }

.btn { display: inline-block; background: var(--btn); color: var(--btn-ink); border: 0; border-radius: 999px; padding: 14px 26px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .1s; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-small { padding: 8px 16px; font-size: .9rem; }

.hero { padding-top: 56px; }
.hero-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.eyebrow { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 1rem; }
.hl { background: linear-gradient(transparent 60%, var(--yellow) 60%); color: inherit; }
@media (prefers-color-scheme: dark) { .hl { background: none; color: var(--yellow); } }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 32em; margin: 0 0 1.6rem; }

.phone { justify-self: center; width: 280px; height: 560px; border: 10px solid #2B2620; border-radius: 42px; background: #B5D4F4; overflow: hidden; }
.phone-screen { padding: 14px 16px; height: 100%; position: relative; }
.status { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: #042C53; padding: 0 6px; }
.widget { margin-top: 22px; background: var(--yellow); color: var(--yellow-d); border-radius: 22px; padding: 16px; transform: rotate(-2deg); animation: drop .7s ease-out .3s both; }
.widget-top, .widget-bottom { display: flex; justify-content: space-between; font-size: 12px; opacity: .8; }
.widget-text { font-family: var(--hand); font-size: 20px; line-height: 1.25; margin: 10px 0; }
.heart { color: #993556; font-size: 18px; opacity: 1; }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; margin-top: 28px; }
.apps i { aspect-ratio: 1; border-radius: 14px; background: #E6F1FB; }
.apps .app-fn { background: var(--yellow); }
.toast { position: absolute; left: 16px; right: 16px; bottom: 24px; background: #E1F5EE; color: #085041; border-radius: 14px; padding: 10px 12px; font-size: 13px; font-weight: 600; animation: up .5s ease-out 2.2s both; }
@keyframes drop { from { opacity: 0; transform: translateY(-30px) rotate(-8deg); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .widget, .toast { animation: none; } }

.problem { background: var(--bg2); }
.chat { display: flex; flex-direction: column; gap: 10px; margin: 28px 0; }
.msg { max-width: 75%; padding: 10px 14px; border-radius: 18px; font-size: 1rem; }
.msg span { display: block; font-size: .72rem; opacity: .6; margin-top: 2px; }
.msg-her { align-self: flex-start; background: #E6E1D8; color: #2B2620; border-bottom-left-radius: 4px; }
.msg-him { align-self: flex-end; background: #378ADD; color: #fff; border-bottom-right-radius: 4px; }
.slogan { font-family: var(--hand); font-size: 1.6rem; margin: 28px 0 0; }
.gap { text-align: center; font-size: .9rem; color: var(--muted); font-style: italic; margin: 8px 0; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
.step { text-align: center; }
.step p { color: var(--muted); margin: 0; }
.note { width: 88px; height: 88px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-family: var(--hand); font-size: 40px; border-radius: 3px; position: relative; }
.note::before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); }
.n-yellow { background: var(--yellow); color: var(--yellow-d); transform: rotate(-4deg); }
.n-pink { background: var(--pink); color: var(--pink-d); transform: rotate(3deg); }
.n-green { background: var(--green); color: var(--green-d); transform: rotate(-2deg); }

.features { background: var(--bg2); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 32px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.card p { color: var(--muted); margin: 0; }
.ico { font-size: 28px; margin-bottom: 8px; }

.signup-note { background: var(--yellow); color: var(--yellow-d); padding: 36px 32px; border-radius: 4px; transform: rotate(-1deg); position: relative; }
.signup-note::before { content: ""; position: absolute; top: -9px; left: 50%; margin-left: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--red); }
.signup-note > * { transform: rotate(1deg); }
.signup-note a { color: var(--yellow-d); }
.row { display: flex; gap: 10px; margin-top: 18px; }
.row input { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 999px; border: 2px solid var(--yellow-d); font: inherit; background: #FFFDF7; color: #2B2620; }
.signup .btn { background: #2B2620; color: #FFF8EC; }
.pick { display: block; margin-top: 14px; font-size: .95rem; }
.pick select { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--yellow-d); background: #FFFDF7; color: #2B2620; margin-left: 6px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; margin-top: 14px; line-height: 1.45; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.msg-out { min-height: 1.4em; margin: 14px 0 0; font-weight: 600; }
.msg-out.ok { color: #173404; }
.msg-out.err { color: #791F1F; }

details { border-bottom: 1px solid var(--line); padding: 16px 0; }
summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
details p { color: var(--muted); margin: 10px 0 0; }

.foot { border-top: 1px solid var(--line); padding: 28px 0; font-size: .9rem; color: var(--muted); }
.foot-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.doc { padding: 48px 0 72px; }
.doc h1 { font-size: 2rem; }
.doc h2 { font-size: 1.25rem; margin-top: 1.8em; }
.doc p, .doc li { color: var(--ink); }

@media (max-width: 820px) {
  section { padding: 56px 0; }
  .hero-in { grid-template-columns: 1fr; text-align: center; }
  .lead { margin-left: auto; margin-right: auto; }
  .steps { grid-template-columns: 1fr; }
  .row { flex-direction: column; }
  .signup-note { padding: 32px 20px; }
  .msg { max-width: 88%; }
}

.soon { display: none; font-weight: 600; margin-top: 18px; }
[data-prihlasky="off"] .soon { display: block; }
[data-prihlasky="off"] #form, [data-prihlasky="off"] .need-gdpr { display: none; }
.top-r { display: flex; align-items: center; gap: 14px; }
.lang { font-size: .9rem; color: var(--muted); text-decoration: none; }
.lang:hover { color: var(--ink); text-decoration: underline; }