@font-face { font-family: Figtree; font-weight: 400; src: url(assets/fonts/Figtree-Regular.ttf); }
@font-face { font-family: Figtree; font-weight: 500; src: url(assets/fonts/Figtree-Medium.ttf); }
@font-face { font-family: Figtree; font-weight: 600; src: url(assets/fonts/Figtree-SemiBold.ttf); }
@font-face { font-family: Figtree; font-weight: 700; src: url(assets/fonts/Figtree-Bold.ttf); }

:root {
  --or: #F7892A; --or-hot: #FF6E36; --or-soft: #FF9838; --peach: #FFC48C;
  --cream: #FBF7F2; --ink: #1E1E22; --mut: #6B6B73; --forest: #15201A; --mint: #8FD9A8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0E0E10; overflow: hidden; font-family: Figtree, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.idle { cursor: none; }
img { display: block; }

/* ---------- stage ---------- */
#view { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: var(--or); }
#bg, .pbg { position: absolute; inset: 0; background: var(--or); overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .7; will-change: transform; }
.b1 { width: 1400px; height: 1400px; left: -400px; top: -500px; background: radial-gradient(circle, var(--peach) 0, transparent 68%); }
.b2 { width: 1200px; height: 1200px; right: -350px; bottom: -450px; background: radial-gradient(circle, var(--or-hot) 0, transparent 68%); }
.b3 { width: 900px; height: 900px; left: 640px; top: 120px; background: radial-gradient(circle, var(--or-soft) 0, transparent 68%); }
#scenes { position: absolute; inset: 0; }
#bar { position: absolute; left: 0; bottom: 0; width: 1920px; height: 3px; z-index: 40; }
#bar i { display: block; height: 100%; background: rgba(255, 255, 255, .6); transform-origin: 0 50%; transform: scaleX(0); }
#stage.t-cream #bar i { background: var(--or); }
#wipe { position: absolute; inset: 0; z-index: 50; display: none; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 14px; pointer-events: none; }
#wipe i { border-radius: 22px; background: var(--wc); }
#black { position: fixed; inset: 0; background: #000; display: none; z-index: 200; }

/* ---------- scene base ---------- */
.scene { position: absolute; inset: 0; overflow: hidden; color: #fff; font-size: 30px; line-height: 1.4; }
.scene.cream { background: var(--cream); color: var(--ink); }
.scene.forest { background: var(--forest); color: #fff; }
.scene > *, .g > * { position: absolute; }
.g { inset: 0; }
.full { left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }
.circ { position: absolute; overflow: visible; pointer-events: none; }
.src { left: 150px; top: 958px; font-size: 16px; color: var(--mut); }

/* kinetic text: each line is a mask, words (or chars) rise inside it */
.kin { left: 150px; white-space: nowrap; }
.ln { overflow: hidden; padding: .12em 0; margin: -.12em 0; }
.w, .wi, .ch { display: inline-block; }
.key { display: inline-block; }
.kin.rel { position: static; }
.kin.c { left: 0; width: 100%; text-align: center; }
.display { font-size: 124px; font-weight: 700; line-height: .95; letter-spacing: -.03em; }
.h1 { font-size: 96px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; top: 165px; }
.h2 { font-size: 64px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.or { color: var(--or); }
.label { top: 110px; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; line-height: 1.3; color: rgba(255, 255, 255, .88); }
.cream .label { color: var(--or); }
.forest .label { color: var(--mint); }

/* glass + pills */
.glass { background: rgba(255, 255, 255, .17); border: 1.5px solid rgba(255, 255, 255, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pill { display: inline-block; font-size: 56px; font-weight: 500; line-height: 1.2; padding: 20px 48px; border-radius: 999px; white-space: nowrap; }
.pill.solid { background: #fff; color: var(--or); border: 0; font-weight: 600; }
.pill.orange { background: var(--or); color: #fff; font-size: 40px; padding: 18px 44px; box-shadow: 0 18px 40px rgba(247, 137, 42, .35); }
.pill.sm { font-size: 28px; padding: 14px 30px; }

/* ---------- S1 ---------- */
.logo { left: 150px; top: 100px; height: 64px; }
.photo-wrap { left: 1202px; top: 160px; width: 568px; height: 760px; }
.photo { width: 568px; height: 760px; }
.photo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .28)); }
.chip.glass { right: 585px; top: 96px; padding: 12px 28px; border-radius: 999px; font-size: 26px; font-weight: 500; white-space: nowrap; }
.chip b { font-weight: 700; }
.stack { left: 150px; top: 420px; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.stack .pill { position: static; }

/* ---------- S2 ---------- */
.big { left: 150px; top: 300px; font-size: 220px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--or); white-space: nowrap; }
.big.b74 { top: 340px; }
.biglab { left: 770px; top: 425px; width: 920px; white-space: nowrap; font-size: 40px; font-weight: 500; line-height: 1.25; }
.want { left: 150px; top: 590px; width: 900px; font-size: 48px; font-weight: 500; line-height: 1.25; }
.track { left: 150px; top: 620px; width: 1400px; height: 18px; border-radius: 9px; background: #EFE8E0; }
.fill { position: relative; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--or-soft), var(--or)); }
.fill::after { content: ""; position: absolute; right: -18px; top: -9px; width: 36px; height: 36px; border-radius: 50%; background: var(--or); border: 5px solid #fff; box-shadow: 0 4px 14px rgba(247, 137, 42, .5); }
.band { left: 808px; top: 620px; width: 392px; height: 18px; border-radius: 9px; background: rgba(247, 137, 42, .4); }
.ghost { left: 1200px; top: 505px; }
.gl { position: absolute; left: -250px; width: 500px; text-align: center; font-size: 26px; font-weight: 600; color: var(--ink); }
.gline { position: absolute; left: -1px; top: 50px; height: 100px; border-left: 3px dashed var(--or); }
.gknob { position: absolute; left: -14px; top: 110px; width: 28px; height: 28px; border-radius: 50%; border: 3px dashed var(--or); background: rgba(255, 255, 255, .85); }
.gap { left: 804px; top: 684px; width: 400px; text-align: center; font-size: 28px; font-weight: 600; color: var(--or); }
.dots { left: 1154px; top: 309px; display: grid; grid-template-columns: repeat(10, 30px); gap: 18px; }
.dots i { width: 30px; height: 30px; border-radius: 50%; background: #EFE8E0; }
/* S2 B3 situation cards */
.pn { margin-left: .17em; }
.sit { white-space: nowrap; font-size: 64px; line-height: 1.15; }
.cards { position: absolute; left: 1020px; top: 255px; width: 750px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sit-card { height: 270px; padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 20px 50px rgba(30, 30, 34, .13); display: flex; flex-direction: column; justify-content: space-between; }
.sit-card svg { width: 96px; height: 96px; overflow: visible; }
.sit-card span { font-size: 26px; font-weight: 600; line-height: 1.25; }
/* S5 B2 stat card */
.stat { left: 150px; top: 690px; width: 540px; padding: 24px 30px 22px; border-radius: 24px; background: rgba(255, 255, 255, .75); border: 1.5px solid #fff; box-shadow: 0 20px 50px rgba(30, 30, 34, .12); }
.stat b { display: block; font-size: 84px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--or); }
.stat p { margin: 8px 0 10px; font-size: 24px; line-height: 1.35; }
.stat small { font-size: 16px; color: var(--mut); }

/* ---------- S3 ---------- */
.pgrid { left: 150px; top: 480px; width: 1060px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pgrid .pill { font-size: 28px; padding: 28px 16px; text-align: center; white-space: nowrap; line-height: 1.2; }
.capbox { left: 1240px; top: 62px; width: 412px; height: 48px; overflow: hidden; }
.cap { position: absolute; inset: 0; text-align: center; font-size: 34px; font-weight: 600; line-height: 48px; }
.phone { padding: 14px; border-radius: 44px; background: #0b0b0d; box-shadow: 0 50px 100px rgba(90, 30, 0, .4), inset 0 0 0 2px #2c2c30; }
.screen { position: relative; overflow: hidden; border-radius: 32px; height: var(--h); width: calc(var(--h) * .4614); background: #fff; }
.screen > * { position: absolute; }
.scr { left: 0; top: 0; width: 100%; height: 100%; }
.ripple { left: 17%; top: 68.6%; width: 90px; height: 90px; border: 5px solid #fff; border-radius: 50%; }
.thumb { left: 12%; top: 72.1%; width: 52px; height: 52px; border-radius: 50%; background: var(--or-hot); border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.thumb svg { width: 100%; height: 100%; }
.flash { inset: 0; background: #fff; }
.badge { left: 50%; top: 20%; width: 96px; height: 96px; padding: 22px; border-radius: 50%; background: var(--or); border: 5px solid #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.badge svg { width: 100%; height: 100%; }
.check { left: 50%; top: 44%; width: 140px; height: 140px; padding: 30px; border-radius: 50%; background: var(--or); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }

/* ---------- S4 ---------- */
.lane { inset: 0; }
.lane > * { position: absolute; }
.ltag { left: 150px; height: 56px; padding: 0 30px; border-radius: 28px; background: var(--or); color: #fff; font-size: 18px; font-weight: 600; line-height: 56px; text-transform: uppercase; letter-spacing: .14em; }
.node { width: 56px; height: 56px; border-radius: 50%; background: var(--or); color: #fff; font-size: 28px; font-weight: 700; line-height: 56px; text-align: center; box-shadow: 0 0 0 9px rgba(247, 137, 42, .18); }
.nt { width: 460px; text-align: center; }
.nt b { display: block; font-size: 30px; font-weight: 600; margin-bottom: 6px; }
.nt span { display: block; text-wrap: balance; font-size: 22px; line-height: 1.35; color: var(--mut); }

/* ---------- S5 ---------- */
.steps { left: 150px; top: 520px; }
.step { display: flex; align-items: center; gap: 28px; margin-bottom: 44px; font-size: 44px; font-weight: 500; white-space: nowrap; }
.step i { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--or); color: #fff; font-style: normal; font-weight: 700; font-size: 32px; line-height: 64px; text-align: center; }
.kiosk { left: 1130px; top: 120px; width: 640px; height: 840px; }
.kframe { position: absolute; inset: 0; border-radius: 18px; background: #0c0c0e; box-shadow: 0 40px 90px rgba(30, 30, 34, .35), inset 0 0 0 2px #26262b; }
.kpanel { position: absolute; left: 20px; top: 20px; width: 100px; height: 800px; border-radius: 10px; background: #17171a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; }
.kl { position: absolute; left: 50%; top: 50%; height: 60px; transform: translate(-50%, -50%) rotate(-90deg); }
.kl.client { height: 56px; filter: brightness(0) invert(1); }
.kt { height: auto; font-size: 52px; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: -.02em; line-height: 1; }
.kgrid { position: absolute; left: 134px; top: 20px; width: 486px; height: 800px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 12px; }
.cell { position: relative; perspective: 900px; perspective-origin: 0% 50%; }
/* dark glass bay lit by a soft cool-white glow from the top, cream door frame like the real kiosk */
.bay { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; background: radial-gradient(120% 62% at 50% 0%, rgba(214, 228, 255, .55), rgba(214, 228, 255, 0) 72%), linear-gradient(180deg, #232830, #101216); }
.glow { position: absolute; inset: 0; background: radial-gradient(110% 90% at 50% 20%, rgba(235, 244, 255, .95), rgba(190, 210, 245, .35) 60%, rgba(190, 210, 245, 0) 100%); }
.prod { position: absolute; left: 50%; bottom: 14px; max-width: 76%; max-height: 62%; width: auto; transform: translateX(-50%); filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .55)); }
.door { position: absolute; inset: 0; border: 12px solid #F1EDE7; border-radius: 8px; transform-style: preserve-3d; background: linear-gradient(135deg, rgba(225, 235, 252, .34), rgba(225, 235, 252, .1) 55%); box-shadow: inset 0 0 14px rgba(0, 0, 0, .35); }
.item { position: absolute; left: 50%; top: 50%; width: 132px; z-index: 5; filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .55)); }
.fshadow { position: absolute; left: -290px; top: 500px; width: 240px; height: 44px; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 30, 34, .45), rgba(30, 30, 34, 0)); filter: blur(4px); }
.scrn { overflow: hidden; border: 8px solid #060607; border-radius: 8px; background: #060607; }
.ui { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.pol { padding: 12px; width: 384px; height: 664px; object-fit: cover; background: #fff; border-radius: 6px; box-shadow: 0 30px 60px rgba(30, 30, 34, .3); }

/* ---------- S6 ---------- */
.pt { border-radius: 50%; background: var(--mint); }
.s6t { left: 150px; top: 430px; width: 900px; font-size: 38px; line-height: 1.4; font-weight: 500; color: rgba(255, 255, 255, .88); }
.gpath { left: 150px; top: 470px; width: 1620px; height: 520px; }
.gpath > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.hex { position: absolute; width: 110px; height: 110px; display: grid; place-items: center; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: linear-gradient(160deg, var(--or-soft), var(--or-hot)); }
.hex.dim { filter: saturate(.7) brightness(.85); }
.hex svg { width: 54px; height: 54px; }
.mascot { position: absolute; width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: 50% 78%; border: 6px solid var(--mint); background: var(--forest); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.chips { left: 150px; top: 270px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.chips .pill { position: static; font-size: 36px; padding: 16px 36px; }

/* ---------- S7 ---------- */
.d7 { left: 960px; top: 250px; font-size: 300px; font-weight: 700; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.ul { left: 960px; top: 590px; font-size: 36px; font-weight: 500; white-space: nowrap; }
.ring { left: 150px; top: 310px; width: 460px; height: 460px; }
.ring svg { position: absolute; left: 0; top: 0; }
.pc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; font-weight: 700; letter-spacing: -.03em; }
.rl { left: 150px; top: 795px; width: 480px; text-wrap: balance; font-size: 36px; font-weight: 500; line-height: 1.3; }
.minis { left: 820px; top: 380px; display: flex; gap: 34px; }
.mini { width: 150px; height: 190px; padding: 12px; border-radius: 16px; background: var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 7px; box-shadow: 0 24px 50px rgba(120, 40, 0, .35); }
.mini i { border-radius: 5px; background: rgba(255, 255, 255, .28); border: 2px solid rgba(255, 255, 255, .7); }
.two { left: 1210px; top: 320px; font-size: 220px; font-weight: 700; line-height: 1; }
.rl2 { left: 1210px; top: 560px; width: 560px; font-size: 46px; font-weight: 500; line-height: 1.2; }
.mlab { left: 150px; font-size: 22px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.mq { left: 0; width: 1920px; height: 110px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 150px, #000 calc(100% - 150px), transparent); mask-image: linear-gradient(90deg, transparent, #000 150px, #000 calc(100% - 150px), transparent); }
.track7 { display: flex; width: max-content; height: 100%; align-items: center; }
.set { display: flex; flex: none; align-items: center; gap: 110px; padding-right: 110px; }
.lg { height: 56px; width: auto; filter: brightness(0) invert(1); }
.lt { font-size: 40px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.bp { display: flex; padding: 12px 32px; border-radius: 999px; background: #fff; }
.bp img { height: 72px; }


/* ---------- S8 ---------- */
.card { top: 360px; width: 440px; }
.ph { width: 440px; height: 440px; object-fit: cover; object-position: top; border-radius: 32px; background: #fff; }
.nm { margin-top: 26px; font-size: 46px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.role { margin-top: 8px; font-size: 30px; font-weight: 600; color: var(--or); }
.area { margin-top: 4px; font-size: 24px; color: var(--mut); }

/* ---------- S9 ---------- */
.logo10 { left: 0; right: 0; margin: 0 auto; top: 320px; height: 120px; }
.thanks { font-size: 24px; letter-spacing: .3em; }
.qrcard { left: 1200px; top: 280px; width: 360px; height: 360px; padding: 32px; border-radius: 36px; background: #fff; box-shadow: 0 30px 70px rgba(120, 40, 0, .35); }
.qrcard svg { width: 100%; height: 100%; display: block; }
.scan10 { left: 1200px; top: 672px; width: 360px; text-align: center; font-size: 36px; font-weight: 600; }
.contacts { left: 0; top: 920px; width: 1920px; text-align: center; font-size: 34px; font-weight: 500; }
.contacts i { font-style: normal; margin: 0 26px; opacity: .7; }

/* ---------- overview, print ---------- */
#overview { position: fixed; inset: 0; z-index: 100; display: none; overflow: auto; padding: 48px; background: #0E0E10; }
#overview .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.th { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; cursor: pointer; outline: 3px solid transparent; outline-offset: 3px; }
.th:hover, .th.cur { outline-color: var(--or); }
.pg { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; }
.pg .scene { z-index: 1; }
.pg .pbg .blob { animation: none; }
#print { display: none; }
body.print { overflow: visible; height: auto; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.print #view, body.print #overview { display: none; }
body.print #print { display: block; }
.page { position: relative; width: 1920px; height: 1080px; overflow: hidden; break-after: page; page-break-after: always; }
@page { size: 1920px 1080px; margin: 0; }
@media screen { body.print { background: #444; } body.print .page { margin: 0 auto 20px; } }

/* S5 door: face darkens as it turns; its shadow falls on the cell to the left */
.dshade { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(20, 22, 28, .15), rgba(20, 22, 28, .6)); }
.cshadow { position: absolute; left: -166px; top: 0; width: 154px; height: 100%; border-radius: 8px; pointer-events: none; background: linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 75%); }

.pay .or { font-weight: 700; }
.langsw { position: fixed; right: 48px; top: 14px; z-index: 5; color: #6b6b73; font: 600 18px/1 Figtree, sans-serif; letter-spacing: .12em; text-decoration: none; padding: 8px 14px; border: 1.5px solid #2c2c31; border-radius: 999px; }
.langsw b { font-weight: 600; } .langsw b.on { color: #fff; }
.langsw:hover { border-color: var(--or); }
.sp { display: inline-block; width: .12em; }
html[lang=cs] .step { font-size: 40px; }
.p1 { object-position: 22% 50%; }

/* S7 FNZ case */
.fzh { left: 150px; top: 160px; display: flex; align-items: center; gap: 18px; font-size: 28px; font-weight: 500; }
.fzh img { height: 48px; filter: brightness(0) invert(1); }
.pp { left: 0; top: 480px; width: 100px; height: 120px; }
.semi { left: 150px; top: 380px; }
.fz { left: 860px; top: 350px; width: 900px; }
.fz .fzb { position: static; font-size: 160px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.fz p { margin: 12px 0 0; font-size: 44px; line-height: 1.25; font-weight: 500; max-width: 800px; }
.fz > * { position: static; }
.fzs { color: rgba(255, 255, 255, .85); }

/* S8 business model (investor variant) */
.fee { left: 150px; top: 450px; height: 110px; padding: 0 48px; display: flex; align-items: center; border-radius: 55px; font-size: 56px; font-weight: 700; white-space: nowrap; }
.feecap { left: 150px; top: 580px; font-size: 34px; font-weight: 500; }
.rnode { left: 925px; top: 701px; width: 150px; height: 150px; border-radius: 50%; background: #fff; color: var(--or); font-size: 34px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 20px 50px rgba(150, 60, 0, .3); }
.fly { width: 340px; height: 72px; padding: 0; text-align: center; font-size: 32px; line-height: 72px; }
.paycap { left: 1130px; top: 746px; width: 600px; text-wrap: balance; font-size: 42px; font-weight: 500; line-height: 1.25; }
.addons { left: 150px; top: 925px; display: flex; align-items: center; gap: 20px; }
.addons span { font-size: 30px; font-weight: 600; margin-right: 6px; }
.addons .pill { position: static; }
/* S7 FNZ value beat: product pile */
.fzv { left: 150px; top: 330px; width: 960px; }
.fzv small { display: block; font-size: 44px; font-weight: 500; }
.fzv .fzn { display: block; font-size: 150px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; white-space: nowrap; }
.floor { left: 1190px; top: 830px; width: 580px; height: 56px; border-radius: 50%; background: radial-gradient(closest-side, rgba(90, 30, 0, .4), rgba(90, 30, 0, 0)); }
.prod7 { filter: drop-shadow(0 12px 10px rgba(90, 30, 0, .35)); }
.prod7.coffee { left: 1330px; top: 580px; width: 330px; }
.prod7.switch { left: 1180px; top: 636px; width: 260px; }
.prod7.guitar { left: 1520px; top: 470px; width: 297px; }
.prod7.gopro { left: 1420px; top: 484px; width: 160px; z-index: 2; }