/* Scéna v úvodu: okna firemních programů a dva kurzory AI, které v nich pracují (řídí js/scena.js). */
.scena-obal { position: relative; margin: 72px auto 0; max-width: 1180px; perspective: 1800px; }
.scena-obal::before { content: ''; position: absolute; inset: 8% 6% -4%; z-index: -1; border-radius: 40px; background: radial-gradient(50% 60% at 30% 50%, rgb(47 227 208 / .25), transparent 70%), radial-gradient(50% 60% at 70% 50%, rgb(124 77 255 / .32), transparent 70%); filter: blur(60px); }
.scena { position: relative; display: grid; gap: 14px; padding: 14px; border-radius: 30px; border: 1px solid var(--linka-2); background: linear-gradient(180deg, rgb(24 22 44 / .92), rgb(12 11 24 / .96)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 60px 140px -60px rgb(0 0 0 / .95); transform-origin: 50% 0; transform: rotateX(calc(var(--naklon, 0) * 16deg)) scale(calc(1 - var(--naklon, 0) * .06)); will-change: transform; font-size: 13px; line-height: 1.4; text-align: left; }
.scena { grid-template-columns: minmax(0, 1fr); grid-template-areas: "posta" "konfig" "nabidky"; }
.okno-posta { grid-area: posta; } .okno-konfig { grid-area: konfig; } .okno-nabidky { grid-area: nabidky; } .okno-kalendar { grid-area: kalendar; display: none; }
@media (min-width: 640px) {
  .scena { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "posta konfig" "nabidky kalendar"; padding: 16px; gap: 16px; }
  .okno-kalendar { display: block; }
}
@media (min-width: 1000px) {
  .scena { grid-template-columns: 1.12fr 1fr .95fr; grid-template-areas: "posta konfig nabidky" "posta konfig kalendar"; padding: 18px; }
}

.okno { position: relative; border-radius: 18px; border: 1px solid var(--linka); background: #0e0d1b; overflow: hidden; box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); }
.okno-hlava { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--linka); background: rgb(255 255 255 / .02); }
.okno-hlava b { font-size: 12.5px; font-weight: 600; }
.okno-hlava > span:last-child { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.tecky { display: inline-flex; gap: 5px; margin-right: 4px; }
.tecky i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .14); }
.mini-nazev { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }

/* Rozbalovací kousky, které AI během ukázky přidá */
.rozbal { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease), opacity .45s ease; }
.rozbal > div { min-height: 0; overflow: hidden; }
.rozbal.je-pred { grid-template-rows: 0fr; opacity: 0; }
.scena [data-krok]:not(.rozbal) { transition: opacity .4s ease, transform .5s var(--ease); }
.scena [data-krok]:not(.rozbal).je-pred { opacity: 0; transform: translateY(4px) scale(.94); }

/* E-mail */
.posta { padding: 6px; display: grid; gap: 2px; }
.zprava { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; transition: background-color .3s ease, box-shadow .3s ease; }
.zprava-text { min-width: 0; }
.zprava-text b { display: block; font-size: 12.5px; font-weight: 600; }
.zprava-text span { display: block; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 10.5px; font-weight: 650; color: #07070d; }
.a1 { background: linear-gradient(135deg, #2fe3d0, #6cb6ff); } .a2 { background: #3a3753; color: var(--text); } .a3 { background: #2c2a42; color: var(--text); }
.cas { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.zprava.je-nova { background: rgb(47 227 208 / .06); }
.zprava.vybrana { background: rgb(47 227 208 / .11); box-shadow: inset 0 0 0 1px rgb(47 227 208 / .35); }
.priloha { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 7px; border: 1px solid var(--linka-2); font-size: 11px; color: var(--text-2); overflow: hidden; white-space: nowrap; }
.priloha.cte { color: var(--text); border-color: rgb(167 123 255 / .6); }
.priloha.cte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(167 123 255 / .5), transparent); transform: translateX(-100%); animation: sken .9s linear infinite; }
@keyframes sken { to { transform: translateX(100%); } }
.vytah { margin: 6px 12px 10px; padding: 11px 12px; border-radius: 12px; background: linear-gradient(120deg, rgb(167 123 255 / .14), rgb(47 227 208 / .08)); border: 1px solid rgb(167 123 255 / .3); }
.vytah ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vytah li { padding: 4px 9px; border-radius: 999px; background: rgb(255 255 255 / .07); font-size: 11.5px; font-weight: 500; }
.odpoved { margin: 0 12px 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--linka-2); background: rgb(255 255 255 / .02); }
.odpoved p { font-size: 12.5px; color: var(--text); min-height: 3.6em; margin-bottom: 10px; }

.mini-tl { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--linka-2); font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; transition: background-color .25s ease, color .25s ease, transform .15s ease; }
.mini-tl.plne { border-color: transparent; background: var(--prechod); color: #07070d; }
.mini-tl.zmacknute { transform: scale(.94); }
#s-odeslat:not(.je-pred-stav) { background: rgb(47 227 208 / .14); color: var(--tyrkys); }
#s-odeslat:not(.je-pred-stav)::before { content: '✓'; }

/* Konfigurátor */
.konfig { padding: 14px; display: grid; gap: 11px; }
.k-dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.k-pole { display: grid; gap: 5px; }
.k-stitek { font-size: 11px; color: var(--text-3); }
.k-hodnota { display: block; min-height: 34px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--linka-2); background: rgb(255 255 255 / .03); font-size: 13px; white-space: nowrap; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.k-pole.aktivni .k-hodnota { border-color: var(--tyrkys); box-shadow: 0 0 0 3px rgb(47 227 208 / .15); }
.k-pata { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.k-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--tyrkys); }
.pise::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--tyrkys); animation: blik .8s steps(1) infinite; }
@keyframes blik { 50% { opacity: 0; } }

/* Fakturace */
.nabidky { padding: 12px; display: grid; gap: 6px; justify-items: stretch; }
.nabidky > .mini-tl { justify-self: start; margin-bottom: 4px; }
.radek-nab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgb(255 255 255 / .025); }
.radek-nab.je-nova { background: rgb(47 227 208 / .07); box-shadow: inset 0 0 0 1px rgb(47 227 208 / .25); }
.radek-nab .c { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.radek-nab .kdo { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stitek-stav { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgb(47 227 208 / .14); color: var(--tyrkys); transition: background-color .3s ease, color .3s ease; }
.stitek-stav.je-pred-stav { background: rgb(167 123 255 / .16); color: #c6aaff; }
.stitek-stav.sedy { background: rgb(255 255 255 / .06); color: var(--text-2); }

/* Kalendář */
.kal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 12px; }
.den { display: flex; flex-direction: column; gap: 6px; min-height: 112px; padding: 6px; border-radius: 10px; background: rgb(255 255 255 / .025); }
.den > span { font-size: 11px; color: var(--text-3); }
.ud { display: block; border-radius: 7px; font-style: normal; }
.ud.sedy { height: 24px; margin-top: calc(var(--z) * 14px); background: rgb(255 255 255 / .06); }
.ud.nova { padding: 5px 6px; font-size: 10.5px; line-height: 1.25; background: linear-gradient(135deg, rgb(47 227 208 / .22), rgb(167 123 255 / .22)); box-shadow: inset 0 0 0 1px rgb(47 227 208 / .45); }
.ud.nova b { display: block; color: var(--tyrkys); }

/* Kurzory AI */
.kurzor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transform: translate3d(50%, 110%, 0); transition: transform .85s cubic-bezier(.6, 0, .2, 1), opacity .4s ease; }
.kurzor.videt { opacity: 1; }
.kurzor svg { display: block; margin: -3px 0 0 -4px; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .5)); transition: transform .12s ease; transform-origin: 4px 3px; }
.kurzor path { stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.ka path { fill: var(--tyrkys); } .kb path { fill: var(--fialova); }
.kurzor.klika svg { transform: scale(.8); }
.kurzor-stitek { position: absolute; left: 14px; top: 16px; padding: 3px 9px; border-radius: 4px 999px 999px 999px; font-size: 11px; font-weight: 650; color: #07070d; white-space: nowrap; box-shadow: 0 6px 18px -6px rgb(0 0 0 / .6); }
.ka .kurzor-stitek { background: var(--tyrkys); } .kb .kurzor-stitek { background: var(--fialova); }
.vlna { position: absolute; z-index: 4; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid currentColor; pointer-events: none; animation: vlna .6s ease-out forwards; }
@keyframes vlna { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

/* Stav pod scénou */
.scena-stav { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 22px auto 0; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linka-2); background: rgb(14 13 26 / .8); font-size: 14px; color: var(--text); }
.pulz { position: relative; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--tyrkys); box-shadow: 0 0 12px var(--tyrkys); }
.pulz::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--tyrkys); animation: pulz 1.8s ease-out infinite; }
@keyframes pulz { from { transform: scale(.6); opacity: 1; } to { transform: scale(2); opacity: 0; } }
.scena-obal figcaption { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--text-3); }

@media (max-width: 639px) {
  .scena-obal { margin-top: 56px; }
  .scena { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .kurzor { display: none; }
  .scena { transform: none; }
  .pulz::after, .priloha.cte::after, .pise::after { animation: none; }
}