/* Homepage – Pop */

/* ---------- hero ---------- */
.hero { position: relative; background: var(--cobalt); color: #fff; padding: calc(var(--nav-h) + clamp(1.5rem, 4vh, 3.5rem)) 0 clamp(4rem, 8vw, 6.5rem); overflow: clip; min-height: min(100svh, 980px); display: flex; align-items: center; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 30%, rgba(255, 255, 255, .12), transparent 40%), radial-gradient(circle at 10% 110%, rgba(255, 107, 74, .25), transparent 45%); pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero__h { margin-top: 1.4rem; max-width: 9.5ch; animation: heroIn .9s var(--pop) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(30px) rotate(-1.5deg); } }
.hero__lead { margin-top: 1.6rem; max-width: 40ch; opacity: .92; animation: heroIn .9s var(--pop) .1s both; }
.aibox { margin-top: 2rem; display: flex; gap: 8px; padding: 8px; border-radius: 22px; background: #fff; box-shadow: 0 8px 0 rgba(10, 20, 100, .45); max-width: 620px; animation: heroIn .9s var(--pop) .18s both; }
.aibox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1.08rem; font-weight: 600; padding: 0 1rem; }
.aibox input::placeholder { color: var(--ink-3); font-weight: 500; }
.hero__chips { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 8px; animation: heroIn .9s var(--pop) .24s both; }
.hero__chips button { padding: .45rem .9rem; border-radius: 99px; font-size: .88rem; font-weight: 700; background: rgba(255, 255, 255, .14); color: #fff; transition: background-color .15s, transform .2s var(--pop); }
.hero__chips button:hover { background: var(--yellow); color: var(--ink); transform: rotate(-3deg) scale(1.05); }
.hero__trust { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .92rem; font-weight: 600; opacity: .9; }
.hero__trust li::before { content: '✓'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: .45rem; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: .7rem; font-weight: 800; }
.hero__vis { position: relative; min-height: clamp(420px, 44vw, 600px); }
/* živá ukážka: zadanie → vizitka */
.demo { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; }
.demo__chat { justify-self: end; display: grid; justify-items: end; gap: 6px; width: min(88%, 470px); animation: heroIn .9s var(--pop) .3s both; }
.demo__me { display: inline-flex; align-items: center; gap: 6px; padding: .2rem .65rem .2rem .3rem; border-radius: 99px; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 800; font-size: .74rem; }
.demo__me::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232440E6'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") center / 13px no-repeat; }
.demo__msg { margin: 0; padding: .85rem 1.15rem; border-radius: 20px 20px 6px 20px; background: #fff; color: var(--ink); font-weight: 700; font-size: clamp(.98rem, 1.2vw, 1.12rem); line-height: 1.35; box-shadow: 0 10px 0 rgba(10, 20, 100, .35); min-height: 1.35em; width: 100%; }
.demo__caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--coral); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.demo__ai { display: flex; align-items: center; gap: 10px; min-height: 34px; animation: heroIn .9s var(--pop) .4s both; }
.demo__bot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: .78rem; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); flex: none; }
.demo__think { display: none; gap: 5px; }
.demo__think i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: dot 1s infinite; }
.demo__think i:nth-child(2) { animation-delay: .15s; } .demo__think i:nth-child(3) { animation-delay: .3s; }
.demo__ai.thinking .demo__think { display: inline-flex; }
.demo__ai b { font-size: .92rem; font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .5s var(--pop); }
.demo__ai.done b { opacity: .95; transform: none; }
.demo__ai.thinking b { opacity: 0; }
.demo__deck { position: relative; perspective: 1400px; --rx: 0deg; --ry: 0deg; }
.demo__deck::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 30px; border-radius: 50%; background: rgba(5, 10, 60, .45); filter: blur(22px); }
.dk { position: absolute; left: 4%; top: 50%; width: 80%; aspect-ratio: 90/50; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d;
  transition: transform .95s var(--pop), opacity .6s, filter .6s; transform: translate3d(0, -50%, 0) rotateX(var(--rx)) rotateY(var(--ry)) var(--t, ); }
.dk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.dk img:not([src]) { visibility: hidden; }
.dk__f { box-shadow: 0 .6px .6px rgba(5, 10, 40, .4), 0 4px 6px -2px rgba(5, 10, 40, .3), 0 20px 30px -12px rgba(5, 10, 40, .45), 0 50px 70px -30px rgba(5, 10, 40, .55); }
.dk__b { box-shadow: 0 24px 44px -20px rgba(5, 10, 60, .6); transition: transform 1s var(--pop) .15s, opacity .5s; opacity: 0; }
.dk.on .dk__b { opacity: 1; transform: translate(16%, 20%) rotate(8deg) scale(.94); }
.dk[data-pos="0"] { --t: rotate(-4deg); z-index: 4; }
.dk[data-pos="1"] { --t: translate(9%, -16%) rotate(6deg) scale(.86); z-index: 3; opacity: 1; filter: saturate(.85) brightness(.8); }
.dk[data-pos="2"] { --t: translate(-4%, -27%) rotate(-9deg) scale(.76); z-index: 2; opacity: 1; filter: saturate(.7) brightness(.64); }
.dk[data-pos="x"] { --t: translate(0, -34%) scale(.7); z-index: 1; opacity: 0; pointer-events: none; }
.dk[data-pos="in"] { --t: translate(-8%, 34%) rotate(-16deg) scale(1.08); z-index: 5; opacity: 0; }
.dk.on:hover { --t: rotate(-1.5deg) scale(1.03); }
.dk:focus-visible { outline: none; }
.dk:focus-visible .dk__f { outline: 3px solid var(--yellow); outline-offset: 4px; }
.demo__hint { margin: 0; font-size: .84rem; font-weight: 600; opacity: .72; text-align: center; }
.demo__hint::before { content: '↖ '; color: var(--yellow); }
.hero__vis.running .demo { opacity: .12; filter: blur(2px); transition: opacity .4s, filter .4s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .dk, .dk__b { transition: none; } .demo__caret { display: none; } }
.hero__sticker { position: absolute; right: -1%; bottom: 9%; left: auto; top: auto; z-index: 6; animation: spinIn 1s var(--pop) .5s both; }
@keyframes spinIn { from { transform: rotate(-60deg) scale(.3); opacity: 0; } }
.hero__vis.running .hero__sticker { opacity: 0; transform: scale(.6) rotate(-30deg); transition: opacity .3s, transform .4s var(--pop); }
.ai-run { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; }
.ai-run__load { display: grid; justify-items: center; gap: 16px; text-align: center; }
.ai-run__load b { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.04em; }
.dots { display: inline-flex; gap: 8px; }
.dots i { width: 13px; height: 13px; border-radius: 50%; background: var(--yellow); display: block; animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-8px); } }
.ai-run__res { width: 100%; display: grid; gap: 14px; justify-items: start; }
.ai-run__res p { font-weight: 700; font-size: 1.02rem; line-height: 1.4; max-width: 46ch; }
.ai-run__res p.ai-run__note { font-weight: 500; font-size: .86rem; opacity: .82; margin: -4px 0 0; }
.ai-run__grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ai-run__grid button { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 90/50; background: rgba(255, 255, 255, .12); box-shadow: 0 24px 40px -16px rgba(5, 10, 60, .7); animation: aiPop .6s var(--pop) both; transition: transform .3s var(--pop); }
.ai-run__grid button:first-child { grid-column: span 2; }
.ai-run__grid button:nth-child(2) { animation-delay: .1s; } .ai-run__grid button:nth-child(3) { animation-delay: .2s; }
.ai-run__grid button:hover { transform: rotate(-1.5deg) scale(1.02); }
.ai-run__grid img { width: 100%; height: 100%; object-fit: cover; }
.ai-run__grid .pend { position: absolute; left: 10px; bottom: 10px; padding: .3rem .6rem; border-radius: 99px; background: var(--ink); color: var(--yellow); font-size: .72rem; font-weight: 700; }
@keyframes aiPop { from { opacity: 0; transform: translateY(30px) scale(.9) rotate(-4deg); } }

/* ---------- pás ---------- */
.band-clip { position: relative; z-index: 3; margin-top: -54px; padding: 20px 0; overflow: hidden; }
.band { position: relative; margin: 0 -2vw; background: var(--yellow); transform: rotate(-2deg); padding: 18px 0; overflow: hidden; box-shadow: 0 8px 0 rgba(15, 20, 64, .12); }
.band__in { display: flex; width: max-content; animation: band 30s linear infinite; }
.band span { display: inline-flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.4rem); letter-spacing: -.04em; white-space: nowrap; }
.band span::after { content: '✺'; color: var(--coral); font-size: .8em; }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- kroky ---------- */
.b { padding: .75rem 1rem; border-radius: 18px; font-weight: 600; font-size: .94rem; max-width: 88%; }
.b--me { justify-self: end; background: var(--cobalt); color: #fff; border-bottom-right-radius: 6px; }
.b--ai { background: var(--cream); border-bottom-left-radius: 6px; }
.b--ai::before { content: 'AI · '; color: var(--coral); font-weight: 800; }
.step__vis--ed .sel::before { left: -6px; top: -6px; } .step__vis--ed .sel::after { right: -6px; bottom: -6px; }
@keyframes selMove { 0%, 20% { transform: none; } 55%, 80% { transform: translate(14%, -60%); } 100% { transform: none; } }
@keyframes curMove { 0%, 20% { transform: none; } 55%, 80% { transform: translate(60%, -130%); } 100% { transform: none; } }

/* ---------- AI ukážky ---------- */
.real { background: var(--ink); color: #fff; padding: var(--sec) 0; overflow: clip; }
.real__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem 4rem; align-items: end; }
.real__head .lead { opacity: .82; font-weight: 400; }
.real__tabs { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 10px; }
.real__tabs button { padding: .75rem 1.2rem; border-radius: 16px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; transition: background-color .15s, transform .2s var(--pop); }
.real__tabs button:hover { background: rgba(255, 255, 255, .16); }
.real__tabs button.on { background: var(--yellow); color: var(--ink); transform: rotate(-2deg); box-shadow: 0 5px 0 var(--yellow-2); }
.real__stage { margin-top: 2rem; }
.real__prompt { display: inline-block; padding: 1rem 1.3rem; border-radius: 22px 22px 22px 6px; background: var(--cobalt); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 60ch; }
.real__prompt::before { content: '„'; } .real__prompt::after { content: '“'; }
.real__cards { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 2.6rem; min-height: 200px; }
.real__card { animation: aiPop .7s var(--pop) both; }
.real__card:nth-child(2) { animation-delay: .1s; } .real__card:nth-child(3) { animation-delay: .2s; }
.real__scene { position: relative; aspect-ratio: 4/3; border-radius: 22px; background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--scene) 70%, #fff 12%), var(--scene)); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.real__scene::after { content: ''; position: absolute; inset: -4%; z-index: 3; pointer-events: none; background: url('../img/shadow-leaf.png') left top / 120% auto no-repeat; mix-blend-mode: multiply; opacity: .55; }
.real__scene img { position: absolute; width: 74%; aspect-ratio: 90/50; object-fit: cover; border-radius: 3px; transition: transform .7s var(--pop); }
.real__back { right: 6%; top: 10%; transform: rotate(8deg); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7); filter: brightness(.94); }
.real__front { left: 6%; bottom: 12%; transform: rotate(-5deg); box-shadow: 0 34px 50px -18px rgba(0, 0, 0, .75); z-index: 2; }
.real__card:hover .real__front { transform: rotate(-2deg) translateY(-6px) scale(1.03); }
.real__card:hover .real__back { transform: rotate(11deg) translateX(6px); }
.real__dir { position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: .3rem .7rem; border-radius: 99px; background: var(--yellow); color: var(--ink); font-size: .74rem; font-weight: 800; }
.real__card p { margin-top: .9rem; font-size: .92rem; opacity: .75; }
.real__card p b { color: var(--yellow); opacity: 1; }

/* ---------- editor ---------- */
.dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.dot--heart { display: inline-grid; place-items: center; background: none; color: var(--coral); font-size: 1rem; }

/* ---------- šablóny ---------- */
.tpls { background: var(--coral); color: #fff; padding: var(--sec) 0; overflow: clip; }
.tpls__head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem 4rem; align-items: end; }
.tpls__y { color: var(--ink); }
.tpls__head .lead { font-weight: 600; }
.tpls__rows { margin: 1.5rem 0 2.5rem; display: grid; }
.tpls__row { overflow: hidden; padding: clamp(46px, 4.5vw, 64px) 0 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tpls__track { display: flex; gap: clamp(44px, 4.6vw, 76px); width: max-content; animation: band 90s linear infinite; padding-right: clamp(44px, 4.6vw, 76px); will-change: transform; }
.tpls__row--rev .tpls__track { animation-direction: reverse; animation-duration: 104s; }
/* vizitky v páse: ostrá predná strana, zadná vykukuje spoza nej */
.tc2 { flex: none; display: block; width: clamp(236px, 22vw, 340px); color: #fff; text-decoration: none; }
.tc2__stack { position: relative; display: block; aspect-ratio: 90 / 50; transform: rotate(var(--r, 0deg)); transition: transform .7s var(--pop); }
.tc2__f, .tc2__b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.tc2__f { box-shadow: 0 .5px 0 rgba(255, 255, 255, .5) inset, 0 1px 1px rgba(70, 12, 0, .3), 0 6px 10px -4px rgba(70, 12, 0, .28), 0 26px 40px -18px rgba(70, 12, 0, .55); }
.tc2__b { transform: translate(8%, -15%) rotate(5deg) scale(.95); filter: brightness(.93) saturate(.95); box-shadow: 0 1px 1px rgba(70, 12, 0, .25), 0 14px 26px -14px rgba(70, 12, 0, .5); transition: transform .7s var(--pop), filter .7s; }
.tc2__stack::after { content: ''; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .32) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0; transition: background-position 1.1s cubic-bezier(.2, .7, .2, 1); }
.tc2:hover .tc2__stack, .tc2:focus-visible .tc2__stack { transform: rotate(0deg) translateY(-8px); }
.tc2:hover .tc2__b, .tc2:focus-visible .tc2__b { transform: translate(20%, -22%) rotate(9deg) scale(.95); filter: none; }
.tc2:hover .tc2__stack::after { background-position: -30% 0; }
.tc2:focus-visible { outline: none; }
.tc2:focus-visible .tc2__f { outline: 3px solid #fff; outline-offset: 4px; }
.tc2__cap { display: flex; align-items: baseline; gap: .55rem; margin-top: 1.25rem; padding-left: 2px; font-size: .84rem; line-height: 1.2; white-space: nowrap; }
.tc2__cap b { font-weight: 800; }
.tc2__cap i { font-style: normal; font-weight: 600; color: rgba(255, 255, 255, .72); overflow: hidden; text-overflow: ellipsis; }
.tc2__cap i::before { content: '·'; margin-right: .55rem; color: rgba(255, 255, 255, .5); }
@media (max-width: 640px) { .tc2 { width: 224px; } .tpls__track { animation-duration: 70s; } .tpls__row--rev .tpls__track { animation-duration: 82s; } }
@media (prefers-reduced-motion: reduce) { .tpls__track { animation: none; } .tpls__row { overflow-x: auto; } }
.tpls__row:hover .tpls__track { animation-play-state: paused; }
.tc { position: relative; flex: none; width: clamp(240px, 22vw, 330px); aspect-ratio: 90/50; perspective: 1200px; display: block; }
.tc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; backface-visibility: hidden; box-shadow: 0 .6px .6px rgba(60, 10, 0, .35), 0 4px 6px -2px rgba(60, 10, 0, .25), 0 22px 34px -16px rgba(60, 10, 0, .5); transition: transform .8s var(--pop); background: rgba(255, 255, 255, .2); }
.tc img + img { transform: rotateY(180deg); }
.tc:hover img:first-child { transform: rotateY(-180deg); }
.tc:hover img + img { transform: rotateY(0); }
.tc span { position: absolute; left: 10px; top: -12px; z-index: 2; padding: .25rem .6rem; border-radius: 99px; background: var(--ink); color: #fff; font-size: .74rem; font-weight: 800; transform: rotate(-4deg); }

/* ---------- papier 3D ---------- */

/* ---------- digitál ---------- */
.dig { background: var(--yellow); padding: var(--sec) 0; overflow: clip; }
.dig__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.dig__vis { position: relative; display: grid; place-items: center; min-height: 600px; }
.dig .phone { position: relative; width: min(300px, 70vw); aspect-ratio: 9/19.2; border-radius: 46px; padding: 10px; background: linear-gradient(145deg, #2F3140, #14151D 40%, #262836); box-shadow: inset 0 0 0 1.5px #474A5C, inset 0 0 0 3px #0B0B10, 12px 14px 0 var(--ink); transform: rotate(-4deg); }
.phone__screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: #fff; }
.phone__island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 34%; height: 24px; border-radius: 14px; background: #000; z-index: 5; }
.dcard-host { height: 100%; overflow: hidden auto; scrollbar-width: none; }
.dig__qr { position: absolute; right: 0; bottom: 6%; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 3px var(--ink), 6px 7px 0 var(--ink); transform: rotate(3deg); font-weight: 700; font-size: .92rem; }
.dig__qr span { width: 84px; height: 84px; display: block; }
.dig__qr svg { width: 100%; height: 100%; }
.dig__qr small { font-weight: 500; color: var(--ink-2); }
.dig__copy .lead { margin-top: 1.4rem; }
.dig__list { margin: 1.8rem 0 2rem; display: grid; gap: .9rem; }
.dig__list li { display: grid; padding: 1rem 1.2rem; border-radius: 18px; background: rgba(255, 255, 255, .55); font-weight: 500; }
.dig__list b { font-size: 1.1rem; letter-spacing: -.02em; }

/* ---------- cena ---------- */
.price { padding: var(--sec) 0 calc(var(--sec) * .7); }
.price__lead { margin-top: 1.2rem; max-width: 52ch; color: var(--ink-2); }
.price__grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pcard { position: relative; display: flex; flex-direction: column; padding: 2rem 1.8rem; border-radius: 30px; box-shadow: 0 0 0 3px var(--ink), 8px 9px 0 var(--ink); transition: transform .3s var(--pop), box-shadow .3s var(--pop); }
.pcard:hover { transform: translate(-3px, -4px) rotate(-1deg); box-shadow: 0 0 0 3px var(--ink), 12px 14px 0 var(--ink); }
.pcard--w { background: #fff; }
.pcard--y { background: var(--yellow); }
.pcard--b { background: var(--cobalt); color: #fff; }
.pcard__tag { position: absolute; top: -14px; right: 22px; padding: .35rem .8rem; border-radius: 99px; background: var(--ink); color: #fff; font-size: .76rem; font-weight: 800; transform: rotate(3deg); }
.pcard--y .pcard__tag { background: var(--coral); }
.pcard__who { margin-top: 1rem; font-weight: 600; line-height: 1.45; opacity: .85; }
.pcard__q { font-family: var(--mono); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.pcard__p { margin-top: .6rem; font-size: clamp(3rem, 5vw, 4.6rem); letter-spacing: -.06em; line-height: .9; }
.pcard__per { font-weight: 600; opacity: .7; margin-top: .4rem; }
.pcard ul { margin: 1.1rem 0 1.6rem; display: grid; gap: .45rem; font-weight: 600; }
.pcard li::before { content: '✓ '; color: var(--coral); font-weight: 800; }
.pcard--b li::before { color: var(--yellow); }
.pcard__go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 .5rem 0 1.2rem; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 800; font-size: 1.02rem; box-shadow: 0 4px 0 rgba(15, 20, 64, .35); transition: transform .25s var(--pop), box-shadow .25s var(--pop); }
.pcard__go i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--coral); font-style: normal; transition: transform .3s var(--pop); }
.pcard:hover .pcard__go i { transform: translateX(3px) rotate(-8deg); }
.pcard:active .pcard__go { transform: translateY(3px); box-shadow: 0 1px 0 rgba(15, 20, 64, .35); }
.pcard--b .pcard__go { background: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(5, 10, 60, .45); }
.pcard--b .pcard__per { opacity: 1; color: rgba(255, 255, 255, .82); }
.pcard__who { min-height: 2.9em; }
.pcard:focus-visible { outline: 3px solid var(--coral); outline-offset: 6px; }
@media (min-width: 1061px) { .pcard--y { translate: 0 -14px; } }
.price__more { margin-top: 2rem; }

/* ---------- FAQ ---------- */
.faq { padding: calc(var(--sec) * .6) 0 var(--sec); }
.faq__grid { display: grid; grid-template-columns: .6fr 1.4fr; gap: 2rem 4rem; align-items: start; }
.faq__list { display: grid; gap: 10px; }
.faq__side { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.faq__sub { margin-top: 1.2rem; max-width: 30ch; color: var(--ink-2); font-weight: 500; line-height: 1.55; }
.faq__ask { margin-top: 1.8rem; display: inline-flex; align-items: center; gap: .9rem; padding: .7rem .8rem .7rem .7rem; border-radius: 20px; background: #fff; box-shadow: var(--sh); transition: transform .25s var(--pop), box-shadow .25s var(--pop); }
.faq__ask:hover { transform: translateY(-2px); }
.faq__ask:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.faq__ava { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--yellow); font-weight: 800; font-size: 1.2rem; }
.faq__ask b { display: block; font-weight: 800; letter-spacing: -.01em; }
.faq__ask small { display: block; color: var(--ink-3); font-weight: 600; font-size: .86rem; }
.faq__ar { display: grid; place-items: center; width: 34px; height: 34px; margin-left: .4rem; border-radius: 50%; background: var(--ink); color: #fff; transition: transform .3s var(--pop); }
.faq__ask:hover .faq__ar { transform: translateX(3px); }
@media (max-width: 1060px) { .faq__side { position: static; } .faq__sub { max-width: 52ch; } }
.faq details { border-radius: 20px; background: #fff; box-shadow: var(--sh); transition: background-color .2s; }
.faq details[open] { background: var(--lilac); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem; font-weight: 800; font-size: clamp(1.08rem, 1.5vw, 1.3rem); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 1.3rem; transition: transform .3s var(--pop); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--coral); }
.faq details p { padding: 0 1.5rem 1.4rem; color: var(--ink-2); font-weight: 500; max-width: 62ch; }

/* ---------- final ---------- */
.final { background: var(--cobalt); color: #fff; padding: var(--sec) 0; overflow: clip; }
.final__h { max-width: 12ch; }
.aibox--final { margin-top: 2.6rem; max-width: 680px; }

/* ---------- responzívne ---------- */
@media (max-width: 1060px) {
  .hero__grid, .dig__grid, .real__head, .tpls__head, .faq__grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero__vis { min-height: 420px; max-width: 620px; width: 100%; }
  .real__cards { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .price__grid { grid-template-columns: 1fr; max-width: 520px; gap: 30px; }
  .demo__hint { margin-top: 1.4rem; position: relative; z-index: 3; }
  .real__head .lead { max-width: 60ch; }
  .dig__vis { min-height: 560px; order: 2; }
}
@media (max-width: 640px) {
  .hero__h { font-size: clamp(3.2rem, 15vw, 5rem); }
  .aibox { flex-direction: column; border-radius: 20px; }
  .aibox input { padding: .9rem .6rem .4rem; }
  .aibox .btn { width: 100%; }
  .hero__vis { min-height: 440px; }
  .dk { width: 84%; left: 2%; }
  .demo__hint { display: none; }
  .hero__sticker { width: 78px; height: 78px; font-size: .74rem; left: auto; right: 0; bottom: 4%; }
  .real__cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -16px; margin-right: -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .real__cards::-webkit-scrollbar { display: none; }
  .real__card { scroll-snap-align: center; }
  .hero__trust { flex-direction: column; gap: .45rem; }
  .hero__alt a { white-space: nowrap; }
  .dig__vis { min-height: 520px; }
  .dig__qr { right: -4px; bottom: 2%; }
  .dig__qr span { width: 64px; height: 64px; }
  .band span { font-size: 1.3rem; }
}

.hero__alt { margin-top: 1rem; font-weight: 600; opacity: .9; }
.hero__alt a { border-bottom: 2px solid rgba(255, 255, 255, .5); }
.hero__alt a:hover { border-color: var(--yellow); color: var(--yellow); }

/* fotografické náhľady */
.tc--photo { width: clamp(280px, 26vw, 400px); aspect-ratio: 5 / 4; perspective: none; }
.tc--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 40px -22px rgba(60, 10, 0, .55); transform: none !important; backface-visibility: visible; }
.tc--photo:hover img { transform: translateY(-4px) !important; }
.real__scene--photo::after { display: none; }
.real__scene--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; transform: none !important; }

/* porovnanie */
.cmp { padding: var(--sec) 0 0; background: var(--cream); }
.cmp h2 { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); max-width: 16ch; }
.cmp__box { overflow-x: auto; border-radius: 28px; background: #fff; box-shadow: 0 0 0 3px var(--ink), 8px 9px 0 var(--ink); }
.cmp table { width: 100%; min-width: 640px; border-collapse: collapse; }
.cmp th, .cmp td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px dashed var(--line); font-size: .96rem; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th { font-family: var(--mono); font-weight: 500; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-top: 1.3rem; }
.cmp tbody th { font-weight: 700; color: var(--ink-2); width: 26%; }
.cmp td { color: var(--ink-2); font-weight: 500; }
.cmp .us { background: #FFF6D8; color: var(--ink); font-weight: 800; }
.cmp thead .us span { font-family: var(--f); text-transform: none; letter-spacing: -.04em; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.cmp td.us::before { content: '✓'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: .5rem; border-radius: 50%; background: #2EAA62; color: #fff; font-size: .7rem; vertical-align: 1px; }
.cmp td.no { color: #B9BCD3; font-weight: 800; }

/* porovnanie na mobile: riadky ako karty */
@media (max-width: 700px) {
  .cmp__box { overflow: visible; }
  .cmp table { min-width: 0; }
  .cmp thead { display: none; }
  .cmp tbody tr { display: grid; grid-template-columns: 1fr 1fr; padding: .9rem 1rem; gap: .35rem .8rem; border-bottom: 1px dashed var(--line); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp tbody th { grid-column: 1 / -1; width: auto; padding: 0; border: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; font-family: var(--mono); font-weight: 500; color: var(--ink-3); }
  .cmp td { padding: 0; border: 0; font-size: .86rem; }
  .cmp td.us { grid-column: 1 / -1; background: none; font-size: 1.02rem; }
  .cmp td:not(.us)::before { content: attr(data-l); display: block; font-size: .7rem; font-weight: 700; color: var(--ink-3); }
  .cmp td.no { font-size: .86rem; }
}
/* záverečná výzva s vizitkami */
.final { position: relative; }
.final__cards { position: absolute; right: max(3vw, calc((100vw - 1400px) / 2)); top: 50%; width: min(34vw, 500px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.final__cards img { position: absolute; width: 82%; aspect-ratio: 90/50; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 1px rgba(5, 10, 60, .35), 0 8px 14px -6px rgba(5, 10, 60, .35), 0 40px 60px -24px rgba(5, 10, 60, .75); }
.final__cards img:nth-child(1) { right: 0; top: 8%; transform: rotate(8deg); filter: brightness(.9); }
.final__cards img:nth-child(2) { left: 0; top: 30%; transform: rotate(-7deg); }
.final__cards img:nth-child(3) { left: 12%; top: 52%; transform: rotate(2deg); }
@media (max-width: 1060px) { .final__cards { display: none; } }

@media (min-width: 1061px) { .final__h { max-width: 9.6ch; } .final .aibox--final { max-width: min(680px, 52vw); } }
@media (max-width: 1060px) { .demo__hint { display: none; } .step__vis { max-width: 480px; } }
/* tablet: cenové karty vedľa seba namiesto jednej úzkej kolóny */
@media (min-width: 821px) and (max-width: 1060px) {
  .price__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 16px; }
  .pcard { padding: 1.7rem 1.3rem; }
  .pcard__p { font-size: clamp(2.6rem, 5.4vw, 3.4rem); }
  .pcard__tag { right: 14px; font-size: .7rem; }
}
@media (min-width: 641px) and (max-width: 820px) { .price__grid { max-width: 560px; } }

/* ===== Papier (hmatové vzorky) ===== */
.paper2 { background: var(--cream); padding: var(--sec) 0 0; }
.paper2__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem 4rem; align-items: end; }
.paper2__head .lead { color: var(--ink-2); max-width: 46ch; }
.paper2__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.sw { border-radius: var(--r); background: #fff; box-shadow: var(--sh); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.sw__stage { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; perspective: 1100px; background: radial-gradient(120% 90% at 50% 20%, #fffaf1, var(--cream-2)); overflow: hidden; }
.sw--soft .sw__stage { background: radial-gradient(120% 90% at 50% 20%, #3a3f6e, var(--ink)); }
.sw--triplex .sw__stage { background: radial-gradient(120% 90% at 50% 20%, #ffe9e1, #ffd3c4); }
.sw__card { --edge: #f3eee4; --core: var(--edge); position: relative; width: 66%; aspect-ratio: 90 / 50; border-radius: 3px; transform: rotateX(58deg) rotateZ(-32deg); transform-style: preserve-3d; transition: transform 1s var(--pop);
  box-shadow: 0 1px 0 var(--edge), 0 2px 0 var(--edge), 0 3px 0 #d9d2c4, 0 34px 34px -10px rgba(40, 28, 15, .35); }
.sw__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }
.sw__card::after { content: ''; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; }
.sw--matny .sw__card::after { opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sw--soft .sw__card { --edge: #1d1d24; box-shadow: 0 1px 0 #26262e, 0 2px 0 #26262e, 0 3px 0 #111, 0 40px 40px -12px rgba(0, 0, 0, .6); }
.sw--soft .sw__card::after { background: radial-gradient(80% 60% at 30% 20%, rgba(255, 255, 255, .16), transparent 70%); }
.sw--triplex .sw__card { box-shadow: 0 1px 0 #f6f1e7, 0 2px 0 #f6f1e7, 0 3px 0 #efe9dd, 0 4px 0 var(--coral), 0 5px 0 var(--coral), 0 6px 0 var(--coral-2), 0 7px 0 #f6f1e7, 0 8px 0 #efe9dd, 0 9px 0 #e2dbcd, 0 44px 40px -12px rgba(120, 40, 20, .38); }
.sw:hover .sw__card { transform: rotateX(48deg) rotateZ(-24deg) translateY(-6px); }
.sw__txt { padding: clamp(1.3rem, 2.4vw, 1.9rem); display: grid; align-content: start; gap: .55rem; }
.sw__sub { font-family: var(--mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.sw h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); letter-spacing: -.03em; line-height: 1; }
.sw__txt > p:not([class]) { color: var(--ink-2); line-height: 1.5; }
.sw__p { margin-top: .4rem; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.sw__p small { font-weight: 600; font-size: .85rem; color: var(--ink-3); }

/* ===== Bez rizika ===== */
.safe__promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
.safe__promise > div { border-radius: var(--r); padding: 1.4rem 1.5rem; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.safe__promise b { display: block; font-size: 1.1rem; margin-bottom: .35rem; }
.safe__promise p { color: rgba(255, 255, 255, .7); line-height: 1.5; }
@media (max-width: 1000px) {
  .paper2__head { grid-template-columns: 1fr; }
  .paper2__grid { grid-template-columns: 1fr; max-width: 560px; }
  .sw { grid-template-columns: .9fr 1.1fr; grid-template-rows: none; }
  .sw__stage { aspect-ratio: auto; min-height: 220px; }
  .safe__promise { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sw { grid-template-columns: 1fr; }
  .sw__stage { min-height: 0; aspect-ratio: 16 / 10; }
}
.tpls__foot { display: grid; gap: 1.8rem; justify-items: start; }
.tpls__ind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tpls__ind span { font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-right: .3rem; }
.tpls__ind a { padding: .5rem .9rem; border-radius: 99px; background: rgba(15, 20, 64, .2); color: #fff; font-weight: 700; font-size: .9rem; transition: background-color .2s, color .2s, transform .25s var(--pop); }
.tpls__ind a:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }

/* =========================================================
   v3 – hero mágia, príbeh, hmatový papier, tmavé „prečo“
   ========================================================= */

/* ---------- hero: svetlo, zrno, materializácia ---------- */
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__trust { padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .16); max-width: 620px; animation: heroIn .9s var(--pop) .32s both; }
.hero__alt { animation: heroIn .9s var(--pop) .28s both; font-size: .95rem; }
.demo__glow { position: absolute; left: -6%; right: -6%; top: 2%; bottom: -4%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, rgba(255, 210, 63, .55)), transparent 72%); filter: blur(36px); opacity: .75; transition: background .9s ease; animation: glow 7s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.1) translate(2%, -3%); opacity: 1; } }
.dk::after { content: ''; position: absolute; top: -4%; bottom: -4%; left: -3%; right: -3%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent calc(50% - 1.5px), #FFF6C8 calc(50% - 1.5px), #FFF6C8 calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(90deg, transparent calc(50% - 26px), rgba(255, 210, 63, .55) 50%, transparent calc(50% + 26px));
  background-size: 200% 100%; background-repeat: no-repeat; background-position: 100% 0; }
.dk.mat::after { animation: scan .85s cubic-bezier(.45, .1, .25, 1) both; }
.dk.mat .dk__f { animation: mat .85s cubic-bezier(.45, .1, .25, 1) both; }
@keyframes scan { 0% { background-position: 100% 0; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { background-position: 0% 0; opacity: 0; } }
@keyframes mat { 0% { clip-path: inset(0 100% 0 0 round 4px); filter: blur(5px) brightness(1.35) saturate(.6); } 100% { clip-path: inset(0 0 0 0 round 4px); filter: none; } }
.demo__ai.thinking ~ .demo__deck .dk.on .dk__f { filter: brightness(.94) saturate(.9); transition: filter .5s; }
@media (prefers-reduced-motion: reduce) { .demo__glow { animation: none; } .dk.mat::after, .dk.mat .dk__f { animation: none; } }

/* ---------- príbeh: od vety k vizitke (sticky scéna) ---------- */
.story { padding: var(--sec) 0 calc(var(--sec) * .6); }
.story__head { max-width: 980px; }
.story__head .kicker { color: var(--coral-2); margin-bottom: 1.2rem; }
.story__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(1rem, 3vw, 2rem); }
.story__stage { position: sticky; top: calc(var(--nav-h) + 3vh); height: calc(100svh - var(--nav-h) - 6vh); max-height: 780px; display: grid; align-content: center; gap: 18px; }
.ss { --fx: cubic-bezier(.2, .9, .25, 1); position: relative; width: 100%; aspect-ratio: 1 / .9; max-height: calc(100% - 30px); margin-inline: auto; border-radius: 34px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #F3EFFF 55%, var(--lilac) 100%); box-shadow: 0 0 0 3px var(--ink), 10px 12px 0 var(--ink); }
.ss::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(rgba(36, 64, 230, .22) 1.2px, transparent 1.3px); background-size: 22px 22px; }
.story__stage[data-step="4"] .ss, .story__stage[data-step="5"] .ss { background: radial-gradient(120% 90% at 50% 0%, #FFFBF3 0%, #FFF1DA 60%, var(--cream-2) 100%); }
.ss > * { transition: opacity .55s ease, transform .85s var(--fx), filter .6s; }
.ss__chat { position: absolute; left: 8%; right: 8%; top: 10%; display: grid; justify-items: end; gap: 8px; }
.ss__me { display: inline-flex; padding: .2rem .7rem; border-radius: 99px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 800; }
.ss__chat p { margin: 0; padding: 1rem 1.25rem; border-radius: 22px 22px 6px 22px; background: #fff; color: var(--ink); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.35; box-shadow: 0 6px 0 rgba(15, 20, 64, .14), 0 20px 40px -24px rgba(15, 20, 64, .5); max-width: 30ch; }
.ss__caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--coral); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ss__ai { position: absolute; left: 50%; bottom: 9%; display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .45rem; border-radius: 99px; background: var(--ink); color: #fff; font-size: .9rem; white-space: nowrap; translate: -50% 0; }
.ss__ai span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: .78rem; }
.ss__alt, .ss__main { position: absolute; left: 50%; top: 54%; width: 66%; aspect-ratio: 90 / 50; }
.ss__alt { height: auto; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 1px rgba(15, 20, 64, .3), 0 24px 34px -18px rgba(15, 20, 64, .6); }
.ss__main { perspective: 1400px; }
.ss__flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.05s var(--fx); }
.ss__f, .ss__b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 .6px .6px rgba(15, 20, 64, .35), 0 6px 10px -4px rgba(15, 20, 64, .25), 0 34px 44px -20px rgba(15, 20, 64, .55); }
.ss__b { transform: rotateY(180deg); }
.ss__sel { position: absolute; left: 4%; top: 34%; width: 56%; height: 30%; border: 2px solid var(--cobalt); border-radius: 3px; opacity: 0; transition: opacity .4s .3s, transform .6s var(--fx) .3s; transform: scale(1.1); }
.ss__sel::before, .ss__sel::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--cobalt); }
.ss__sel::before { left: -6px; top: -6px; } .ss__sel::after { right: -6px; bottom: -6px; }
.ss__cur { position: absolute; left: 52%; top: 58%; width: 26px; height: 26px; opacity: 0; transition: opacity .3s .5s, transform .9s var(--fx) .5s; transform: translate(60px, 50px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3 7z' fill='%230F1440' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.ss__stack { position: absolute; inset: 0; z-index: -1; border-radius: 4px; opacity: 0; transition: opacity .5s .2s;
  box-shadow: 0 3px 0 #F4EFE6, 0 4px 0 #D9D1C2, 0 7px 0 #F4EFE6, 0 8px 0 #D9D1C2, 0 11px 0 #F4EFE6, 0 12px 0 #D9D1C2, 0 15px 0 #F4EFE6, 0 16px 0 #CFC6B5, 0 46px 40px -16px rgba(60, 40, 20, .45); }
.ss__tools { position: absolute; right: 8%; top: 12%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px var(--ink), 4px 5px 0 var(--ink); }
.ss__tools i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.ss__tools i:nth-child(2) { outline: 2px solid var(--ink); outline-offset: 2px; }
.ss__tools b { margin-left: 4px; font-family: Georgia, serif; font-size: 1.1rem; }
.ss__stamp { position: absolute; left: 7%; top: 11%; display: grid; padding: .7rem 1rem; border-radius: 14px; border: 3px solid #2EAA62; color: #1E8A4C; background: rgba(255, 255, 255, .85); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; rotate: -7deg; }
.ss__stamp small { font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; }
.ss__qr { position: absolute; right: 7%; bottom: 10%; display: grid; grid-template-columns: auto auto; column-gap: .7rem; align-items: center; padding: .7rem .9rem; border-radius: 16px; background: var(--ink); color: #fff; }
.ss__qrc { grid-row: span 2; width: 44px; height: 44px; border-radius: 6px; background:
  conic-gradient(from 90deg at 30% 30%, #fff 25%, transparent 0) 0 0/11px 11px, linear-gradient(#fff 0 0) 3px 3px/12px 12px no-repeat, linear-gradient(var(--ink) 0 0) 6px 6px/6px 6px no-repeat, #0F1440; box-shadow: 0 0 0 4px #fff inset; }
.ss__qr b { font-size: .95rem; } .ss__qr small { font-size: .74rem; opacity: .7; }
.ss__ship { position: absolute; right: 7%; bottom: 10%; display: grid; padding: .8rem 1.1rem; border-radius: 16px; background: var(--yellow); box-shadow: 0 0 0 2.5px var(--ink), 5px 6px 0 var(--ink); rotate: 3deg; }
.ss__ship small { font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.ss__ship b { font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.04em; line-height: 1.05; text-transform: capitalize; }
.ss__dots { list-style: none; padding: 0; margin: 0 auto; display: flex; gap: 8px; width: 100%; max-width: 240px; }
.ss__dots li { flex: 1; height: 5px; border-radius: 9px; background: rgba(15, 20, 64, .14); transition: background-color .4s; }

/* stavy scény */
.ss__alt { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
.ss__main { transform: translate(-50%, -50%) translateY(18%) scale(.82); opacity: 0; }
.ss__ai, .ss__tools, .ss__stamp, .ss__qr, .ss__ship { opacity: 0; transform: translateY(14px) scale(.92); }
.story__stage[data-step="1"] .ss__chat { opacity: 1; }
.story__stage:not([data-step="1"]) .ss__caret { display: none; }
.story__stage[data-step="2"] .ss__chat { opacity: .55; transform: translateY(-12%) scale(.86); transform-origin: 100% 0; }
.story__stage[data-step="2"] .ss__ai { opacity: 1; transform: none; transition-delay: .35s; }
.story__stage[data-step="2"] .ss__alt { opacity: 1; }
.story__stage[data-step="2"] .ss__alt--a { transform: translate(-50%, -50%) translate(-36%, 9%) rotate(-10deg) scale(.5); transition-delay: .08s; }
.story__stage[data-step="2"] .ss__alt--b { transform: translate(-50%, -50%) translate(36%, 9%) rotate(10deg) scale(.5); transition-delay: .16s; }
.story__stage[data-step="2"] .ss__main { opacity: 1; transform: translate(-50%, -50%) translateY(1%) scale(.6); z-index: 2; }
.story__stage:not([data-step="1"]):not([data-step="2"]) .ss__chat { opacity: 0; transform: translateY(-30%) scale(.8); }
.story__stage[data-step="3"] .ss__main { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
.story__stage[data-step="3"] .ss__sel { opacity: 1; transform: none; }
.story__stage[data-step="3"] .ss__cur { opacity: 1; transform: none; }
.story__stage[data-step="3"] .ss__tools { opacity: 1; transform: none; transition-delay: .3s; }
.story__stage[data-step="4"] .ss__main { opacity: 1; transform: translate(-50%, -50%) scale(.94) rotate(-2deg); }
.story__stage[data-step="4"] .ss__flip { transform: rotateY(180deg); }
.story__stage[data-step="4"] .ss__stamp { opacity: 1; transform: none; transition: opacity .3s .55s, transform .5s var(--pop) .55s; }
.story__stage[data-step="4"] .ss__qr { opacity: 1; transform: none; transition-delay: .7s; }
.story__stage[data-step="5"] .ss__main { opacity: 1; transform: translate(-50%, -50%) translateY(-6%) scale(.84) rotate(-6deg); }
.story__stage[data-step="5"] .ss__stack { opacity: 1; }
.story__stage[data-step="5"] .ss__ship { opacity: 1; transform: none; transition: opacity .3s .4s, transform .55s var(--pop) .4s; }
.story__stage[data-step="1"] .ss__dots li:nth-child(-n+1), .story__stage[data-step="2"] .ss__dots li:nth-child(-n+2), .story__stage[data-step="3"] .ss__dots li:nth-child(-n+3),
.story__stage[data-step="4"] .ss__dots li:nth-child(-n+4), .story__stage[data-step="5"] .ss__dots li { background: var(--coral); }

.story__steps { list-style: none; padding: 0; margin: 0; }
.story__steps li { min-height: 68vh; display: grid; align-content: center; gap: .9rem; padding: 2rem 0; opacity: .28; transition: opacity .5s ease; }
.story__steps li:first-child { min-height: 58vh; }
.story__steps li.on { opacity: 1; }
.story__n { font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; color: var(--coral-2); }
.story__steps h3 { font-size: clamp(2rem, 3.4vw, 3.1rem); letter-spacing: -.05em; line-height: 1; max-width: 13ch; }
.story__steps p { font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--ink-2); font-weight: 500; line-height: 1.55; max-width: 36ch; }
.story__alt { margin-top: .6rem; font-size: .98rem !important; }
@media (prefers-reduced-motion: reduce) { .ss > *, .ss__flip, .ss__sel, .ss__cur { transition: none !important; } .ss__caret { animation: none; } }
@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; gap: 0; }
  .story__stage { top: var(--nav-h); height: auto; max-height: none; z-index: 2; padding: 10px 0 22px; margin: 0 -16px; padding-inline: 16px; background: linear-gradient(var(--cream) 88%, rgba(255, 246, 230, 0)); gap: 12px; }
  .ss { aspect-ratio: 1 / .78; max-height: none; width: min(100%, calc(44svh * 1.28)); border-radius: 26px; box-shadow: 0 0 0 2.5px var(--ink), 6px 7px 0 var(--ink); }
  .ss__chat p { font-size: .92rem; padding: .7rem .9rem; }
  .ss__tools { top: 7%; } .ss__stamp { top: 7%; font-size: .9rem; } .ss__ai, .ss__qr, .ss__ship { bottom: 6%; }
  .story__steps li, .story__steps li:first-child { min-height: 50vh; align-content: center; padding: 1rem 0; }
  .ss__alt, .ss__main { width: 58%; top: 56%; }
  .ss__ai { font-size: .8rem; bottom: 5%; } .ss__ai span { width: 24px; height: 24px; }
  .ss__ghost { top: 66%; width: 52%; }
  .ss__chat { top: 7%; }
  .story__stage[data-step="2"] .ss__chat { opacity: 0; }
  .story__steps li:last-child { padding-bottom: 4rem; }
  .story__steps h3 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
}

/* ---------- papier: hmatový náklon ---------- */
.sw__card { transform: rotateX(calc(56deg - var(--ty, 0) * 18deg)) rotateZ(calc(-30deg + var(--tx, 0) * 16deg)); animation: swFloat 6s ease-in-out infinite; }
.sw:nth-child(2) .sw__card { animation-delay: -2s; } .sw:nth-child(3) .sw__card { animation-delay: -4s; }
@keyframes swFloat { 50% { translate: 0 -8px; } }
.sw.tilt .sw__card { transition: transform .12s linear; }
.sw:hover .sw__card { transform: rotateX(calc(46deg - var(--ty, 0) * 18deg)) rotateZ(calc(-22deg + var(--tx, 0) * 16deg)) translateZ(12px); }
.sw__card::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 3px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--lx, 30%) var(--ly, 20%), rgba(255, 255, 255, .55), transparent 55%); mix-blend-mode: soft-light; }
.sw:hover .sw__card::before { opacity: 1; }
.sw--soft .sw__card::before { background: radial-gradient(circle at var(--lx, 30%) var(--ly, 20%), rgba(255, 255, 255, .22), transparent 60%); mix-blend-mode: screen; }
.sw__stage::after { content: attr(data-hint); position: absolute; left: 50%; bottom: 12px; translate: -50% 0; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .3s; color: currentColor; }
.sw { transition: transform .35s var(--pop), box-shadow .35s var(--pop); }
.sw:hover { transform: translateY(-4px); box-shadow: 0 10px 0 rgba(15, 20, 64, .18); }
@media (prefers-reduced-motion: reduce) { .sw__card { animation: none; } }

/* ---------- cena: čo je v cene ---------- */
.price__inc { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.price__inc li { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 99px; background: #fff; box-shadow: 0 0 0 2px rgba(15, 20, 64, .1); font-weight: 700; font-size: .92rem; }
.price__inc li::before { content: '✓'; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2EAA62; color: #fff; font-size: .68rem; }
.price { padding-bottom: var(--sec); }

/* ---------- prečo my (tmavá) ---------- */
.why.cmp { background: var(--ink); color: #fff; padding: var(--sec) 0; }
.why__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.why__head h2 { margin: 0; max-width: 14ch; }
.why__head .lead { color: rgba(255, 255, 255, .74); max-width: 46ch; }
.why .cmp__box { background: rgba(255, 255, 255, .035); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14); }
.why th, .why td { border-bottom-color: rgba(255, 255, 255, .1); }
.why thead th { color: rgba(255, 255, 255, .55); }
.why tbody th { color: rgba(255, 255, 255, .86); }
.why td { color: rgba(255, 255, 255, .62); }
.why .us { background: rgba(255, 210, 63, .1); color: #fff; }
.why thead .us span { color: var(--yellow); }
.why td.no { color: rgba(255, 255, 255, .28); }
.why .safe__promise { margin-top: clamp(2rem, 4vw, 3rem); }
.why + .faq { padding-top: var(--sec); }
@media (max-width: 1000px) { .why__head { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .why tbody tr { border-bottom-color: rgba(255, 255, 255, .1); } .why tbody th, .why td:not(.us)::before { color: rgba(255, 255, 255, .5); } }

/* krok 1: AI už „kreslí“ – obrys budúcej vizitky */
.ss__ghost { position: absolute; left: 50%; top: 58%; width: 60%; aspect-ratio: 90 / 50; translate: -50% -50%; border-radius: 6px; border: 2px dashed rgba(36, 64, 230, .35); display: grid; align-content: center; gap: 10px; padding: 0 9%; overflow: hidden; opacity: 0; transform: scale(.94); }
.ss__ghost i { display: block; height: 12px; border-radius: 6px; background: rgba(36, 64, 230, .1); }
.ss__ghost i:nth-child(1) { width: 58%; height: 16px; } .ss__ghost i:nth-child(2) { width: 38%; } .ss__ghost i:nth-child(3) { width: 46%; margin-top: 14px; }
.ss__ghost::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); background-size: 250% 100%; animation: ghost 1.8s linear infinite; }
@keyframes ghost { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.story__stage[data-step="1"] .ss__ghost { opacity: 1; transform: none; transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .ss__ghost::after { animation: none; } }

/* iskry pri zrode vizitky */
.spk { position: absolute; z-index: 7; color: var(--yellow); font-size: 22px; line-height: 1; pointer-events: none; opacity: 0; text-shadow: 0 0 14px rgba(255, 210, 63, .9); }
.spk--1 { left: 2%; top: 22%; } .spk--2 { left: 78%; top: 14%; font-size: 30px; } .spk--3 { left: 86%; top: 74%; font-size: 16px; } .spk--4 { left: 10%; top: 80%; font-size: 18px; color: #fff; }
.demo__deck.spark .spk { animation: spk 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.demo__deck.spark .spk--2 { animation-delay: .12s; } .demo__deck.spark .spk--3 { animation-delay: .22s; } .demo__deck.spark .spk--4 { animation-delay: .3s; }
@keyframes spk { 0% { opacity: 0; transform: scale(.2) rotate(0); } 35% { opacity: 1; transform: scale(1.15) rotate(40deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg) translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .spk { display: none; } }
.paper2 { padding-bottom: var(--sec); }
.story { padding-bottom: calc(var(--sec) * .35); }
.story__steps li:last-child { min-height: 56vh; }
/* zadanie má vždy miesto na dva riadky, balíček vizitiek pod ním neposkakuje */
.demo__chat { min-height: calc(28px + 2 * 1.4em + 1.7rem + 6px); align-content: end; }
.demo__msg { line-height: 1.4; }