/* Homepage portfolio: three logos, no cards or preview overlays. */
.sp-work{padding:80px 36px 88px;background:var(--page,#FCFBFE);scroll-margin-top:110px}
.sp-head{display:flex;justify-content:space-between;align-items:center;gap:32px;max-width:1208px;margin:0 auto}
.sp-head h2{margin:0;font-size:clamp(30px,2.6vw,44px);line-height:1.12;letter-spacing:-.033em;font-weight:800;color:var(--navy,#141B4D)}
.sp-head h2 span{color:var(--orange,#F0552B)}
.sp-head>a{display:inline-flex;align-items:center;gap:16px;flex-shrink:0;padding:12px 0;font-size:15px;color:var(--navy,#141B4D);text-decoration:underline;text-decoration-color:#B9B6CD;text-underline-offset:8px}
.sp-head>a:hover{text-decoration-color:currentColor}
.sp-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:60px;max-width:1208px;margin:56px auto 0}
.sp-logo{display:flex;align-items:center;justify-content:center;min-width:0;min-height:240px;padding:16px;text-decoration:none}
.sp-logo img{display:block;width:100%;height:auto;object-fit:contain}
.sp-logo--grill img{width:190px;max-width:80%}
.sp-logo--lar img{max-width:330px}
.sp-logo--vvision img{width:290px;max-width:95%}
.sp-logo:focus-visible,.sp-head>a:focus-visible{outline:3px solid var(--purple,#5B4AD8);outline-offset:8px}
.sp-work+.process{padding-top:65px}
@media(min-width:1800px){.sp-head,.sp-stage{max-width:1500px}.sp-logo{min-height:290px}.sp-logo--grill img{width:220px}.sp-logo--lar img{max-width:390px}.sp-logo--vvision img{width:340px}}
@media(max-width:760px){.sp-work{padding:56px 24px 64px}.sp-head{align-items:flex-start;flex-direction:column;gap:20px}.sp-stage{gap:24px;margin-top:32px}.sp-logo{min-height:170px;padding:8px}.sp-logo--grill img{width:140px}}
@media(max-width:520px){.sp-stage{grid-template-columns:1fr;gap:16px}.sp-logo{min-height:190px;padding:20px}.sp-logo--grill img{width:160px}.sp-logo--lar img{max-width:290px}.sp-logo--vvision img{width:245px}}

/* Curved section boundaries echo the About page. */
.services .svc-edge{display:none}
.services{padding-bottom:80px}
.sp-work{position:relative;padding-top:100px;padding-bottom:108px}
.sp-cut{display:block;position:absolute;left:0;width:100%;max-width:none;pointer-events:none}
.sp-cut--top{top:-1px;height:80px;background:#ECE9FF}
.sp-cut--bottom{bottom:-1px;height:56px}
.sp-work~.process{background:#EFEDFB}
.sp-logo img{transition:transform 220ms cubic-bezier(.23,1,.32,1);transform-origin:50% 60%}
@media(hover:hover) and (pointer:fine){.sp-logo:hover img{transform:translateY(-6px) scale(1.045)}}
.sp-logo:active img{transform:scale(.98);transition-duration:120ms}
@media(max-width:760px){.sp-work{padding-top:88px;padding-bottom:84px}.sp-cut--top{height:56px}.sp-cut--bottom{height:36px}.services{padding-bottom:48px}}
@media(prefers-reduced-motion:reduce){.sp-logo img{transition:none}.sp-logo:hover img,.sp-logo:active img{transform:none}}


/* Centered heading and a parchment sheet for project previews. */
.sp-head{flex-direction:column;gap:16px;text-align:center}
.sp-head h2{white-space:nowrap;font-size:clamp(26px,3.05vw,48px)}
.sp-stage{min-height:340px;margin-top:32px}
.sp-work{isolation:isolate}
.sp-paper[hidden]{display:none}
.sp-paper{position:absolute;z-index:3;top:200px;left:50%;width:min(900px,calc(100% - 72px));padding:26px 34px 22px;background:#F4E6C9;color:#493B2A;box-shadow:0 24px 50px -22px #34261970;transform:translate(-50%,12px) scale(.97);opacity:0;transition:transform 250ms cubic-bezier(.23,1,.32,1),opacity 180ms ease;clip-path:polygon(0 2%,5% 1%,12% 2%,21% 0,33% 1%,47% 0,60% 2%,73% 0,86% 1%,97% 0,100% 3%,99.5% 22%,100% 42%,99% 63%,100% 82%,99% 98%,88% 100%,73% 99%,56% 100%,41% 98%,25% 100%,11% 99%,0 100%,.7% 77%,0 56%,.5% 34%)}
.sp-paper::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../img/hero-bg/hero-bg-w1-1x.webp') center/cover;mix-blend-mode:multiply;opacity:.18;filter:sepia(1);pointer-events:none}
.sp-paper.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}
.sp-paper-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;font-size:18px;font-weight:600}
.sp-paper-close{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:15px;padding:8px}
.sp-paper-close span{margin-left:8px;font-size:23px}
.sp-paper-web{display:block;height:300px;overflow:auto;overscroll-behavior:contain;background:#fff;scrollbar-color:#A38A60 #F4E6C9;scrollbar-width:thin}
.sp-paper-web img{display:block;width:100%;height:auto;max-width:none}
.sp-paper-link{display:block;width:fit-content;margin:14px auto 0;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:5px}
.sp-paper a:focus-visible,.sp-paper button:focus-visible{outline:3px solid #493B2A;outline-offset:4px}
@media(max-width:760px){.sp-head h2{white-space:normal;text-wrap:balance}.sp-paper{top:210px;width:calc(100% - 32px);padding:20px 18px}.sp-paper-web{height:300px}}
@media(max-width:520px){.sp-paper{position:fixed;top:50%;max-height:85vh;overflow:auto;transform:translate(-50%,-48%) scale(.97)}.sp-paper.is-visible{transform:translate(-50%,-50%) scale(1)}.sp-paper-web{height:48vh}}
@media(prefers-reduced-motion:reduce){.sp-paper,.sp-paper.is-visible{transition:opacity 100ms ease;transform:translate(-50%,0)} }
@media(max-width:520px) and (prefers-reduced-motion:reduce){.sp-paper,.sp-paper.is-visible{transform:translate(-50%,-50%)}}

.sp-head h2 span{margin-left:.2em}


/* Each preview occupies only its own logo slot. */
.sp-item{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;min-height:280px}
.sp-item>.sp-logo{width:100%}
.sp-item .sp-paper{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;max-height:none;padding:18px 16px 16px;overflow:visible;display:flex;flex-direction:column;transform:translateY(8px) scale(.97)}
.sp-item .sp-paper[hidden]{display:none}
.sp-item .sp-paper.is-visible{transform:translateY(0) scale(1)}
.sp-paper-top{margin-bottom:10px;font-size:15px;gap:8px}
.sp-paper-close{font-size:13px;padding:4px}
.sp-paper-close span{font-size:18px;margin-left:4px}
.sp-item .sp-paper-web{height:auto;flex:1;min-height:0}
.sp-paper-link{font-size:13px;margin-top:10px}
.sp-item:has(.sp-paper.is-visible)>.sp-logo{opacity:0}
@media(max-width:760px){.sp-stage{gap:16px}.sp-item{min-height:240px}.sp-item .sp-paper{padding:14px 12px}}
@media(max-width:520px){.sp-item{min-height:280px}.sp-item .sp-paper{inset:0;max-height:none}.sp-item .sp-paper-web{height:auto}}
@media(prefers-reduced-motion:reduce){.sp-item .sp-paper,.sp-item .sp-paper.is-visible{transform:none}}

/* Device previews replace the parchment treatment. */
.sp-item .sp-device{clip-path:none;background:transparent;box-shadow:none;padding:30px 16px 28px;overflow:visible;color:#141B4D;align-items:center}
.sp-device::before{display:none}
.sp-device .sp-paper-top{position:absolute;top:0;left:0;right:0;font-size:14px;margin:0}
.sp-device .sp-paper-close{font-size:13px}
.sp-device .sp-paper-web{position:relative;flex:none;width:100%;height:190px;border:8px solid #25262D;border-top-width:12px;border-radius:9px;background:#fff;box-shadow:0 12px 24px -16px #141B4D80}
.sp-device .sp-paper-link{position:absolute;bottom:0;margin:0;font-size:14px}
.sp-device--desktop::after{content:"";position:absolute;top:220px;left:50%;width:84px;height:26px;transform:translateX(-50%);background:linear-gradient(90deg,#B5B8C1,#E2E3E7 50%,#B5B8C1);clip-path:polygon(35% 0,65% 0,69% 75%,100% 86%,100% 100%,0 100%,0 86%,31% 75%)}
.sp-item .sp-device--phone{padding-top:8px;padding-bottom:28px}
.sp-device--phone .sp-paper-top{left:0;right:0;top:-18px}
.sp-device--phone .sp-paper-web{width:120px;height:236px;border:6px solid #25262D;border-radius:24px;scrollbar-width:none}
.sp-device--phone .sp-paper-web::-webkit-scrollbar{display:none}
.sp-device--phone::after{content:"";position:absolute;top:15px;left:50%;width:38px;height:9px;transform:translateX(-50%);border-radius:8px;background:#25262D;pointer-events:none}
.sp-device--phone .sp-paper-web img{border-radius:16px 16px 0 0}
.sp-device--laptop .sp-paper-web{width:90%;height:190px;border-width:7px;border-top-width:11px;border-radius:9px 9px 3px 3px}
.sp-device--laptop::after{content:"";position:absolute;top:219px;left:50%;width:100%;height:12px;transform:translateX(-50%);border-radius:2px 2px 50% 50%;background:linear-gradient(#E5E6EA,#A9ADB8);box-shadow:0 8px 12px -7px #141B4D70}
@media(min-width:521px) and (max-width:760px){.sp-stage{grid-template-columns:1fr;max-width:380px}.sp-item{min-height:280px}}

/* Quiet device previews: no labels, controls or visible scrollbar. */
.sp-device .sp-paper-top,.sp-device .sp-paper-link{display:none}
.sp-item .sp-device .sp-paper-web{overflow:hidden;scrollbar-width:none;container-type:size}
.sp-device .sp-paper-web::-webkit-scrollbar{display:none}
.sp-device .sp-paper-web img{transform:translateY(0)}
.sp-device.is-visible .sp-paper-web img{animation:sp-device-tour 22s linear infinite}
@keyframes sp-device-tour{0%,1%{transform:translateY(0)}80%,90%{transform:translateY(min(0px,calc(100cqh - 100%)))}100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.sp-device.is-visible .sp-paper-web img{animation:none}}

/* VVision: landscape tablet with a continuous rounded bezel. */
.sp-item .sp-device--tablet{padding:24px 8px;justify-content:center}
.sp-device--tablet .sp-paper-web{width:94%;height:206px;border:10px solid #24252B;border-left-width:14px;border-right-width:14px;border-radius:22px;box-shadow:0 14px 24px -18px #141B4D80;outline:1px solid #797C85;outline-offset:-1px}
.sp-device--tablet::before{display:none}
.sp-device--tablet::after{content:"";position:absolute;left:calc(3% + 13px);top:50%;width:4px;height:4px;border-radius:50%;background:#464C61;transform:translateY(-50%);pointer-events:none}
.sp-device--tablet .sp-paper-web img{border-radius:10px 10px 0 0}

/* Portfolio flows directly into the navy footer. */
.sp-cut--bottom path{fill:#101641}

/* Služby v modré z hera, jen o stupeň světlejší než jeho spodek (místo
   levandule), aby úvodní stránka plynula bez skoku. Horní barva je stejná jako
   přední pás přechodu v heru (prechod.py: C_SEKCE), takže hero do sekce
   přechází bez švu; dolů mírně tmavne (C_SEKCE_DOLE) a na tu barvu navazuje
   výřez další sekce. */
.services{background:linear-gradient(180deg,#44519A 0,rgba(68,81,154,0) 240px),linear-gradient(0deg,#3B4789 0,rgba(59,71,137,0) 180px),radial-gradient(70% 90% at 24% 40%,rgba(94,108,182,.32) 0%,rgba(94,108,182,0) 100%),radial-gradient(60% 80% at 86% 80%,rgba(40,49,112,.30) 0%,rgba(40,49,112,0) 100%),linear-gradient(180deg,#44519A 0%,#404D94 55%,#3B4789 100%);overflow:visible;margin-top:0;position:relative;padding-top:54px}
.services .head h2,.services .svc h3{color:#fff}
.services .svc p{color:#D9DCF2}
.sp-cut--top{background:#3B4789}

/* Curve the footer itself so its artwork follows the same edge. */
.sp-work .sp-cut--bottom{display:none}
.sp-work+.tail{margin-top:-30px;clip-path:polygon(0 8px,15% 15px,30% 18px,45% 16px,60% 10px,75% 3px,90% 0,100% 4px,100% 100%,0 100%)}

/* Gentle invitation to explore the client work. */
.sp-logo{position:relative;cursor:pointer}
.sp-logo::after{content:'↗';position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:30px;height:30px;border:1px solid #D9D3F2;border-radius:50%;color:var(--purple,#5B4AD8);font-size:18px;line-height:1;transition:transform 220ms cubic-bezier(.23,1,.32,1),opacity 220ms cubic-bezier(.23,1,.32,1)}
@media(prefers-reduced-motion:no-preference){
.sp-logo img{animation:spLogoBreathe 4.8s ease-in-out infinite}
.sp-item:nth-child(2) .sp-logo img{animation-delay:-1.6s}
.sp-item:nth-child(3) .sp-logo img{animation-delay:-3.2s}
@keyframes spLogoBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.035)}}
}
@media(hover:hover) and (pointer:fine){.sp-logo:hover img{animation:none;transform:translateY(-6px) scale(1.045)}.sp-logo:hover::after{transform:translate(2px,-2px)}}
.sp-logo:focus-visible img,.sp-logo:active img{animation:none}
.sp-logo[aria-expanded="true"]::after{opacity:0}
@media(prefers-reduced-motion:reduce){.sp-logo::after{transition:none;transform:none}}

/* A light downward cue, moving within its own space. */
.sp-logo::after{content:'';right:24px;bottom:23px;width:11px;height:11px;border:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;border-radius:1px;color:#8E7BD8;transform:rotate(45deg);opacity:.7}
@media(prefers-reduced-motion:no-preference){.sp-logo::after{animation:spArrowDown 2.4s ease-in-out infinite}.sp-item:nth-child(2) .sp-logo::after{animation-delay:-.8s}.sp-item:nth-child(3) .sp-logo::after{animation-delay:-1.6s}@keyframes spArrowDown{0%,100%{transform:translateY(-4px) rotate(45deg);opacity:.45}50%{transform:translateY(4px) rotate(45deg);opacity:1}}}
@media(hover:hover) and (pointer:fine){.sp-logo:hover::after{animation:none;transform:translateY(4px) rotate(45deg);opacity:1}}
.sp-logo[aria-expanded="true"]::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.sp-logo::after{animation:none;transform:rotate(45deg)}}

/* Place the downward invitation above each client mark. */
.sp-logo::after{top:0;bottom:auto;left:calc(50% - 6px);right:auto}

.sp-logo::after{content:none;animation:none}

/* Give the service illustrations more presence. */
.services .svc .brandmark,.services .svc .buildui,.services .svc .cxui,.services .svc .dashui{height:140px}
.services .svc .brandmark svg,.services .svc .buildui svg,.services .svc .cxui svg,.services .svc .dashui svg{width:clamp(150px,13vw,205px);height:auto;max-width:90%;aspect-ratio:92 / 54}
@media(max-width:560px){.services .svc .brandmark,.services .svc .buildui,.services .svc .cxui,.services .svc .dashui{height:124px}.services .svc .brandmark svg,.services .svc .buildui svg,.services .svc .cxui svg,.services .svc .dashui svg{width:180px}}

/* Projekty v zarizenich: nakloneny tablet a telefon na svetle modre plose. */
.sp-work.kb-work{padding:0;background:#E8ECFD;overflow:hidden}
.kb-work .sp-cut--top{z-index:3;background:none}
.kb-dark{position:relative;min-height:800px;display:flex;align-items:center;color:var(--navy,#141B4D)}
.kb-copy{position:relative;z-index:2;width:calc(clamp(32px,10vw,135px) + 420px);padding:130px 0 110px clamp(32px,10vw,135px)}
.kb-copy h2{margin:0 0 26px;font-size:clamp(38px,3.6vw,50px);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--navy,#141B4D);text-wrap:balance}
.kb-copy h2 span{color:var(--orange,#F0552B)}
.kb-copy p{margin:0 0 32px;font-size:16px;line-height:1.75;color:var(--body,#5F6588)}
.kb-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;background:var(--orange,#F0552B);color:#fff;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 12px 24px -12px #F0552BA6}
.kb-btn svg{transition:transform 220ms cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.kb-btn:hover svg{transform:translateX(4px)}}
.kb-btn:focus-visible{outline:3px solid var(--purple,#5B4AD8);outline-offset:4px}
.kb-scene{position:absolute;inset:0;pointer-events:none}
.kb-dev{position:absolute;background:#000;box-shadow:0 40px 60px -24px #141B4D73;transform:rotate(-36deg);overflow:hidden}
.kb-dev img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top;background:#fff}
.kb-dev-tablet{left:calc(50% + 100px);top:-60px;width:720px;height:960px;padding:10px;border-radius:26px}
.kb-dev-tablet img{border-radius:17px}
.kb-dev-phone{width:262px;height:536px;padding:7px;border-radius:32px}
.kb-dev-phone img{border-radius:26px}
.kb-dev-phone1{left:calc(50% - 143px);top:512px}
@media(max-width:1240px){
  .kb-dark{display:block;min-height:0}
  .kb-copy{width:auto;max-width:640px;padding:110px 24px 0 clamp(24px,8vw,64px)}
  .kb-scene{position:relative;inset:auto;height:560px;margin-top:24px;overflow:hidden}
  .kb-dev-tablet{left:calc(50% - 170px);top:100px;width:560px;height:747px;padding:8px;border-radius:22px}
  .kb-dev-tablet img{border-radius:15px}
  .kb-dev-phone{width:200px;height:409px;padding:6px;border-radius:26px}
  .kb-dev-phone img{border-radius:21px}
  .kb-dev-phone1{left:calc(50% - 310px);top:380px}
}
@media(max-width:820px){
  .kb-copy{padding:110px 24px 0}
  .kb-copy h2{font-size:36px}
  .kb-scene{height:430px;margin-top:20px}
  .kb-dev-tablet{left:calc(50% - 80px);top:70px;width:400px;height:533px;padding:6px;border-radius:18px}
  .kb-dev-tablet img{border-radius:13px}
  .kb-dev-phone{width:150px;height:307px;padding:5px;border-radius:20px}
  .kb-dev-phone img{border-radius:16px}
  .kb-dev-phone1{left:calc(50% - 215px);top:325px}
}
@media(max-width:560px){.kb-dev-phone1{display:none}.kb-dev-tablet{left:calc(50% - 150px)}}
@media(max-width:480px){.kb-copy{padding-left:16px;padding-right:16px}}
@media(prefers-reduced-motion:reduce){.kb-btn svg{transition:none}}