* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
/* Stejné tóny jako hero na webu: accent → accentBackground */
body {
  background: linear-gradient(90deg, #f3f5f6 0%, #eef1f4 48%, #f4f5f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'neue-haas-grotesk-display','Helvetica Neue',Helvetica,Arial,sans-serif;
  cursor: none;
}
#demo {
  width: 1280px;
  height: 720px;
  background: linear-gradient(165deg, #f5f6f8 0%, #e8ebf0 52%, #f1f3f6 100%);
  position: relative;
  overflow: hidden;
  cursor: none;
}
#pt { position: absolute; top:0; left:0; right:0; height:2px; background:rgba(42,45,66,0.12); z-index:100; }
#pb { height:100%; background:#EC2143; width:0%; transition:width 0.15s linear; }
.scene { position:absolute; inset:0; opacity:0; transition:opacity 0.7s ease; pointer-events:none; }
.scene.active { opacity:1; pointer-events:all; }
.slabel { position:absolute; top:32px; left:36px; font-size:11px; font-weight:600; letter-spacing:0.16em; color:#EC2143; text-transform:uppercase; z-index:10; }
.sbenefit { position:absolute; bottom:36px; left:0; right:0; text-align:center; font-size:15px; z-index:10; }
.sbenefit strong { color:#2A2D42; font-weight:600; }
.sbenefit span { color:#2A2D42; opacity:0.38; font-weight:400; }
.center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#cursor { position:absolute; z-index:9999; pointer-events:none; width:22px; height:22px; will-change:transform; }
#cursor svg { filter: drop-shadow(0 1px 3px rgba(42,45,66,0.18)); }
.ripple { position:absolute; z-index:9998; pointer-events:none; width:40px; height:40px; border-radius:50%; background:rgba(236,33,67,0.22); transform:translate(-50%,-50%) scale(0); animation:rip 0.55s ease-out forwards; }
@keyframes rip { 0%{transform:translate(-50%,-50%) scale(0);opacity:1} 100%{transform:translate(-50%,-50%) scale(2.8);opacity:0} }
.h-card { outline:2px solid rgba(236,33,67,0.4) !important; transition:outline 0.15s ease !important; }
.h-btn  { background:#EC2143 !important; color:#fff !important; border-color:#EC2143 !important; }
.h-row  { background:#FEF0F2 !important; }
.h-slot { outline:2px solid rgba(236,33,67,0.5) !important; }
.h-sidebar { background:#FEF0F2 !important; color:#EC2143 !important; opacity:1 !important; }
#s0 { background: linear-gradient(165deg, #f5f6f8 0%, #e8ebf0 52%, #f1f3f6 100%); }
.s0-wrap { text-align:center; }
/* Červená tečka jako SpiroqDot na webu (secondary #EC2143, ~23 % výšky písma, odsazení ~8 %) */
.spiroq-brand-dot {
  display: inline-block;
  width: 0.23em;
  height: 0.23em;
  margin-left: 0.08em;
  vertical-align: 0.06em;
  border-radius: 50%;
  background: #EC2143;
  flex-shrink: 0;
  position: relative;
  top: 0.03em;
}
.s0-title {
  font-size: 64px;
  font-weight: 700;
  color: #2A2D42;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.s0-sub { font-size:20px; font-weight:400; color:#2A2D42; opacity:0; transform:translateY(18px); transition:opacity 0.8s ease 0.75s,transform 0.8s ease 0.75s; margin-top:16px; }
#s0.active .s0-title { opacity:1; transform:translateY(0); }
#s0.active .s0-sub { opacity:0.42; transform:translateY(0); }
.dashboard { display:flex; width:1060px; height:500px; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 4px 60px rgba(42,45,66,0.09); }
.sidebar { width:240px; background:#fff; border-right:1px solid #F0EDE8; padding:28px 16px; flex-shrink:0; }
.sb-logo { font-size:20px; font-weight:700; color:#2A2D42; margin-bottom:32px; padding:0 12px; }
.sb-logo em { color:#EC2143; font-style:normal; }
.sb-item { display:flex; align-items:center; gap:12px; font-size:14px; color:#2A2D42; opacity:0.4; padding:11px 14px; border-radius:10px; margin-bottom:4px; font-weight:500; transition:all 0.2s; }
.sb-item.on { opacity:1; background:#FEF0F2; color:#EC2143; }
.sb-icon { width:18px; height:18px; flex-shrink:0; opacity:0.7; }
.main-panel { flex:1; padding:32px 36px; overflow:hidden; }
.mp-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; }
.mp-title { font-size:26px; font-weight:700; color:#2A2D42; }
.mp-sub { font-size:13px; color:#2A2D42; opacity:0.38; margin-top:4px; }
.mp-action { background:#EC2143; color:#fff; font-size:12px; font-weight:600; padding:10px 18px; border-radius:10px; white-space:nowrap; transition:opacity 0.2s; letter-spacing:0.01em; }
.mgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mc { border:1px solid #EDEAE4; border-radius:14px; padding:20px 22px; opacity:0; transform:translateY(6px); transition:opacity 0.4s ease,transform 0.4s ease,outline 0.15s ease,background 0.2s ease; }
.mc.show { opacity:1; transform:translateY(0); }
.mc-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; }
.mc-name { font-size:14px; font-weight:700; color:#2A2D42; line-height:1.35; }
.sdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sdot.g { background:#1DB954; animation:pg 2s infinite; }
.sdot.gr { background:#C5C3BE; }
@keyframes pg { 0%,100%{opacity:1} 50%{opacity:0.3} }
.slbl { font-size:10px; font-weight:600; letter-spacing:0.08em; display:flex; align-items:center; gap:5px; margin-top:2px; }
.slbl.on { color:#1DB954; }
.slbl.off { color:#C5C3BE; }
.mc-stats { display:flex; justify-content:space-between; }
.mcs-lbl { font-size:11px; color:#2A2D42; opacity:0.38; margin-bottom:3px; display:flex; align-items:center; gap:4px; }
.mcs-val { font-size:15px; font-weight:700; color:#2A2D42; }
.map-outer { width:640px; height:340px; position:relative; }
.map-pin { position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); }
.map-pin.on { background:#1DB954; animation:mpon 2s infinite; }
.map-pin.off { background:#ccc; }
@keyframes mpon { 0%,100%{box-shadow:0 0 0 0 rgba(29,185,84,0.4)} 50%{box-shadow:0 0 0 10px rgba(29,185,84,0)} }
.mcard { position:absolute; background:#fff; border-radius:10px; border:1px solid #F0EDE8; padding:12px 16px; min-width:160px; box-shadow:0 4px 20px rgba(42,45,66,0.1); font-size:12px; color:#2A2D42; opacity:0; transition:opacity 0.5s ease; }
.mcard.vis { opacity:1; }
.mcard-name { font-weight:700; font-size:13px; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.mcard-dot { width:8px; height:8px; border-radius:50%; background:#EC2143; }
.mcard-row { display:flex; justify-content:space-between; gap:20px; margin-bottom:2px; }
.mcard-key { opacity:0.42; }
.mcard-on { color:#1DB954; font-weight:600; }
.rc-wrap { display:flex; gap:16px; align-items:flex-start; }
.rc-main { width:520px; background:#fff; border-radius:16px; padding:24px 28px; box-shadow:0 2px 30px rgba(42,45,66,0.07); }
.rc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.rc-machine { font-size:20px; font-weight:700; color:#2A2D42; }
.rc-status-pill { display:flex; align-items:center; gap:6px; border:1px solid #F0EDE8; border-radius:20px; padding:5px 12px; font-size:12px; color:#2A2D42; font-weight:500; }
.rc-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.rcb { border:1px solid #F0EDE8; border-radius:10px; padding:13px; text-align:center; font-size:12px; font-weight:600; color:#2A2D42; transition:all 0.15s ease; }
.rcb.primary { background:#EC2143; color:#fff; border-color:#EC2143; }
.terminal { background:#2A2D42; border-radius:10px; padding:14px 16px; font-family:'Courier New',monospace; font-size:11px; color:#8B8FA8; min-height:110px; }
.tl { margin-bottom:5px; opacity:0; transition:opacity 0.3s; }
.tl.show { opacity:1; }
.tg { color:#1DB954; }
.tr { color:#EC2143; }
.slots-panel { width:220px; background:#fff; border-radius:16px; padding:20px; box-shadow:0 2px 30px rgba(42,45,66,0.07); }
.slots-title { font-size:13px; font-weight:600; color:#2A2D42; margin-bottom:14px; }
.sgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.sc { aspect-ratio:1; border-radius:8px; border:1px solid #F0EDE8; display:flex; align-items:center; justify-content:center; font-size:11px; color:#ccc; font-weight:500; opacity:0; transition:all 0.3s ease; }
.sc.show { opacity:1; }
.sc.full.show { background:#F0FBF5; border-color:#1DB954; color:#1DB954; }
.sc.low.show { background:#FFF8E8; border-color:#FFB347; color:#b36a00; }
.sc.empty.show { background:#FFF0F2; border-color:#EC2143; color:#EC2143; }
.inv-wrap { display:flex; gap:16px; align-items:flex-start; }
.inv-main { width:440px; background:#fff; border-radius:16px; padding:24px 28px; box-shadow:0 2px 30px rgba(42,45,66,0.07); }
.inv-title { font-size:18px; font-weight:700; color:#2A2D42; margin-bottom:3px; }
.inv-sub { font-size:12px; color:#2A2D42; opacity:0.38; margin-bottom:18px; }
.irow { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #F0EDE8; transition:background 0.2s; border-radius:6px; }
.irow-name { font-size:13px; font-weight:600; color:#2A2D42; margin-bottom:2px; }
.irow-meta { font-size:11px; color:#2A2D42; opacity:0.38; }
.irow-right { display:flex; align-items:center; gap:10px; }
.irow-cnt { font-size:15px; font-weight:700; color:#2A2D42; }
.ibar { width:60px; height:4px; background:#F0EDE8; border-radius:2px; }
.ibar-fill { height:100%; border-radius:2px; transition:width 0.8s ease; }
.cf { background:#1DB954; }
.cl { background:#FFB347; }
.ce { background:#EC2143; }
.cd { background:#A78BFA; }
.inv-side { display:flex; flex-direction:column; gap:12px; }
.card-sm { width:260px; background:#fff; border-radius:16px; padding:20px; box-shadow:0 2px 30px rgba(42,45,66,0.07); }
.card-label { font-size:10px; font-weight:600; letter-spacing:0.1em; color:#2A2D42; opacity:0.38; text-transform:uppercase; margin-bottom:8px; }
.big-num { font-size:42px; font-weight:700; color:#EC2143; line-height:1; }
.big-unit { font-size:13px; color:#2A2D42; opacity:0.38; margin-top:4px; }
.sess-row { display:flex; justify-content:space-between; margin-bottom:6px; font-size:12px; }
.sess-key { color:#2A2D42; opacity:0.38; }
.sess-val { color:#2A2D42; font-weight:600; }
.sess-active { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:#1DB954; margin-top:8px; }
.exp-wrap { display:flex; gap:14px; align-items:stretch; width:860px; height:310px; }
.exp-card { flex:1; background:#fff; border-radius:16px; padding:24px 26px; display:flex; flex-direction:column; gap:12px; box-shadow:0 2px 30px rgba(42,45,66,0.07); }
.exp-card.mid { border-top:3px solid #EC2143; }
.ec-lbl { font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#2A2D42; opacity:0.38; }
.ec-val { font-size:14px; font-weight:600; color:#2A2D42; }
.ec-sub { font-size:12px; color:#2A2D42; opacity:0.42; }
.steak-icon { width:48px; height:48px; background:#FEF0F2; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.epill { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600; background:#e6faf0; color:#1a7a4a; transition:all 1.5s ease; width:fit-content; }
.epill.amber { background:#FFF3E0; color:#b36a00; }
.rule-box { background:#F5F4F0; border-radius:8px; padding:12px 14px; font-size:12px; line-height:1.8; color:#2A2D42; }
.kw-if { color:#2A2D42; opacity:0.4; }
.kw-then { color:#2A2D42; opacity:0.4; }
.kw-disc { color:#EC2143; font-weight:700; }
.abadge-g { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#1DB954; }
.sync-tiny { font-size:11px; color:#2A2D42; opacity:0.35; }
.pflip { height:44px; perspective:600px; margin:2px 0; }
.pflip-inner { position:relative; height:100%; transform-style:preserve-3d; transition:transform 0.7s ease; }
.pflip-inner.flipped { transform:rotateY(180deg); }
.pface { position:absolute; width:100%; height:100%; backface-visibility:hidden; display:flex; align-items:center; font-size:28px; font-weight:700; color:#2A2D42; }
.pface.back { transform:rotateY(180deg); color:#EC2143; }
.rdet { opacity:0; transition:opacity 0.5s; margin-top:2px; }
.rdet.vis { opacity:1; }
.old-p { text-decoration:line-through; font-size:14px; color:#2A2D42; opacity:0.3; margin-right:6px; }
.disc-badge { display:inline-block; background:#EC2143; color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; }
.pricing-wrap { display:flex; gap:16px; align-items:flex-start; width:780px; }
.pricing-left { flex:1; display:flex; flex-direction:column; gap:12px; }
.prule { background:#fff; border-radius:16px; border-left:4px solid #EC2143; padding:20px 22px; box-shadow:0 2px 30px rgba(42,45,66,0.07); }
.prule-name { font-size:16px; font-weight:700; color:#2A2D42; margin-bottom:4px; }
.prule-desc { font-size:12px; color:#2A2D42; opacity:0.42; margin-bottom:8px; }
.prule-meta { font-size:11px; color:#2A2D42; opacity:0.32; }
.sync-log { background:#fff; border-radius:16px; padding:20px 22px; box-shadow:0 2px 30px rgba(42,45,66,0.07); }
.sl-title { font-size:11px; font-weight:600; color:#2A2D42; opacity:0.38; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:12px; }
.log-row { display:flex; align-items:center; gap:8px; font-size:12px; color:#2A2D42; margin-bottom:5px; }
.lchk { color:#1DB954; font-weight:700; }
.lmut { opacity:0.38; }
.pricing-right { width:340px; background:#fff; border-radius:16px; padding:20px; box-shadow:0 2px 30px rgba(42,45,66,0.07); }
.sgrid-p { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:14px; }
.sp { aspect-ratio:1; border-radius:8px; background:#F3F0FF; border:1px solid #A78BFA; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:9px; font-weight:600; color:#6D4FD8; position:relative; transition:all 0.2s; }
.sp-badge { position:absolute; top:-5px; right:-5px; background:#EC2143; color:#fff; font-size:7px; font-weight:700; padding:1px 4px; border-radius:10px; }
.sp-num { font-size:8px; opacity:0.5; margin-bottom:1px; }
.locker-outer { display:flex; flex-direction:column; align-items:center; gap:14px; }
.locker-wrap { display:flex; gap:16px; align-items:flex-start; }
.order-card { width:380px; background:#fff; border-radius:16px; padding:24px 28px; box-shadow:0 2px 30px rgba(42,45,66,0.07); }
.oc-title { font-size:18px; font-weight:700; color:#2A2D42; margin-bottom:14px; }
.prod-row { background:#F5F4F0; border-radius:10px; padding:12px 14px; margin-bottom:14px; }
.prod-name { font-size:13px; font-weight:600; color:#2A2D42; }
.prod-meta { font-size:11px; color:#2A2D42; opacity:0.42; margin-top:2px; }
.ostep { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #F0EDE8; font-size:12px; color:#2A2D42; opacity:0.3; transition:opacity 0.5s; }
.ostep.done { opacity:1; }
.osdot { width:8px; height:8px; border-radius:50%; background:#E2E0DA; flex-shrink:0; transition:background 0.5s; }
.ostep.done .osdot { background:#1DB954; }
.pcode { font-size:32px; font-weight:700; color:#EC2143; letter-spacing:0.18em; text-align:center; margin-top:14px; opacity:0; transition:opacity 0.5s; }
.pcode.vis { opacity:1; }
.machine-card { width:320px; background:#fff; border-radius:16px; box-shadow:0 2px 30px rgba(42,45,66,0.07); overflow:hidden; }
.mc-top-inner { padding:18px 20px; }
.mc-top-title { font-size:16px; font-weight:700; color:#2A2D42; margin-bottom:12px; }
.mc-display { background:#2A2D42; border-radius:10px; padding:20px; text-align:center; }
.mc-hint { font-size:10px; color:#F0F0EC; opacity:0.38; margin-bottom:8px; font-family:'Courier New',monospace; }
.mc-code-disp { font-size:28px; font-weight:700; letter-spacing:0.2em; color:#EC2143; margin:6px 0; font-family:'Courier New',monospace; }
.mc-status { font-size:10px; color:#F0F0EC; opacity:0.38; font-family:'Courier New',monospace; transition:color 0.5s; }
.smart-bar { background:#EC2143; border-radius:12px; padding:16px 28px; width:716px; }
.smart-head { font-size:15px; font-weight:700; color:#fff; }
.smart-sub { font-size:12px; color:#fff; opacity:0.82; margin-top:3px; }
#s-close { background:#2A2D42; }
.cl-wrap { text-align:center; }
.cl-logo { font-size:72px; font-weight:700; color:#F0F0EC; letter-spacing:-0.01em; opacity:0; transform:translateY(14px); transition:opacity 0.9s ease,transform 0.9s ease; }
.cl-sub { font-size:18px; color:#F0F0EC; opacity:0; transform:translateY(14px); transition:opacity 0.7s ease 0.65s,transform 0.7s ease 0.65s; margin-top:10px; }
.cl-btn { margin-top:36px; display:inline-block; padding:12px 32px; border:1.5px solid #EC2143; border-radius:8px; color:#EC2143; font-size:14px; font-weight:600; font-family:inherit; background:transparent; cursor:pointer; letter-spacing:0.04em; opacity:0; transition:opacity 0.5s ease 1.3s; }
#s-close.active .cl-logo { opacity:1; transform:translateY(0); }
#s-close.active .cl-sub { opacity:0.5; transform:translateY(0); }
#s-close.active .cl-btn { opacity:1; }
#s-punch { background: linear-gradient(165deg, #f5f6f8 0%, #e8ebf0 52%, #f1f3f6 100%); }
.punch {
  font-size: 56px;
  font-weight: 700;
  color: #2A2D42;
  letter-spacing: -0.01em;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
#s-punch.active .punch { opacity:1; transform:translateY(0); }