/* Komponenty, ktoré používa viac sekcií. Vygenerované z návrhu (tools/split_css.py). */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.svc{flex:none;width:clamp(300px,28vw,450px);scroll-snap-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--card);color:var(--ink);border:1px solid var(--line);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .4s}
.svc:hover{transform:translateY(-8px);box-shadow:0 34px 70px rgba(106,31,163,.18);border-color:rgba(145,55,205,.35)}
.svc .cover{aspect-ratio:auto;height:clamp(150px,22vh,220px);place-items:center start;padding-inline:28px}
.svc:hover .cover::after{transform:translate(-30%,-25%) scale(1.25)}
.svc:hover .cover .g{transform:scale(1.08) rotate(-6deg)}
.svc-body{display:flex;flex-direction:column;gap:12px;padding:24px 28px 28px;flex:1}
.svc .n{font-family:var(--display);font-size:.85rem;color:var(--violet)}
.svc p{color:var(--ink-2);font-size:.98rem}
.svc .d3{font-size:clamp(1.5rem,2.1vw,2rem)}
.svc .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.svc:hover .arrow{background:var(--card);color:var(--ink);transform:rotate(-45deg)}
.why{padding-block:clamp(90px,12vw,190px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:50px clamp(40px,7vw,130px);align-items:start}
.why-head{order:2;position:sticky;top:130px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.why-list{border-top:1px solid var(--hair)}
.why-item{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px 28px;padding:clamp(28px,3.4vw,52px) 0;border-bottom:1px solid var(--hair)}
.why-item .ico{grid-row:1/3;width:72px;height:72px;border-radius:22px;background:linear-gradient(140deg,#9137CD,#D47BFF);color:#fff}
.why-item .ico .i{width:30px;height:30px}
.why-item h3{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.4vw,2.4rem);line-height:1.12;letter-spacing:-.02em}
.why-item p{color:var(--fg2);font-size:1.05rem;max-width:48ch;transition:color .7s}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative}
.step{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r-lg);background:var(--card);color:var(--ink);border:1px solid var(--line);margin-top:calc(var(--k) * (1 - var(--q,0)) * clamp(50px,5.5vw,100px));transition:transform .35s,box-shadow .35s}
.step:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(106,31,163,.14)}
.step::before{content:"";position:absolute;left:100%;top:54px;width:16px;height:1px;background:var(--violet)}
.step:last-child::before{display:none}
.step .ico{width:52px;height:52px;border-radius:16px;margin-bottom:28px}
.step .n{position:absolute;right:24px;top:18px;font-family:var(--display);font-weight:500;font-size:clamp(3rem,5vw,4.6rem);line-height:1;letter-spacing:-.04em;color:var(--violet);opacity:calc(.14 + .86 * var(--q,0))}
.step h3{font-family:var(--display);font-weight:500;font-size:1.4rem;letter-spacing:-.01em}
.step p{font-size:.96rem;color:var(--ink-2)}
.step small{margin-top:6px;font-size:.8rem;color:var(--violet-deep);display:flex;align-items:center;gap:8px}
.step small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet)}
.tech{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.tech>div{padding:30px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:12px;transition:background .3s}
.tech>div:hover{background:var(--mist)}
.tech .top{display:flex;align-items:center;gap:14px}
.tech .ico{width:48px;height:48px;border-radius:14px}
.tech h3{font-family:var(--display);font-weight:500;font-size:1.35rem;letter-spacing:-.015em}
.tech p{font-size:.96rem;color:var(--fg2)}
.tech ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.kh-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.kh-tabs button{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--pill);border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.93rem;font-weight:500;transition:background .25s,color .25s,border-color .25s}
.kh-tabs .i{width:17px;height:17px;color:var(--violet)}
.kh-tabs button:hover{border-color:var(--violet)}
.kh-tabs button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.kh-tabs button[aria-pressed="true"] .i{color:#fff}
.kh{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.art{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--card);color:var(--ink);border:1px solid var(--line);overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s}
.art:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(106,31,163,.16);border-color:rgba(145,55,205,.35)}
.art.wide{grid-column:span 2}
.cover{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/9.5;display:grid;place-items:center;color:#fff;background:radial-gradient(70% 90% at var(--x,100%) 0%,var(--c2,#E9D6F8),transparent 62%),radial-gradient(100% 120% at 0% 100%,var(--c1,#6A1FA3),#9137CD 55%,#C99BEA)}
.art.wide .cover{aspect-ratio:16/6.4}
.cover::before{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:soft-light;opacity:.55;z-index:1}
.cover::after{content:"";position:absolute;width:60%;aspect-ratio:1;right:-18%;bottom:-50%;border-radius:50%;background:var(--c3,#F3B8FF);filter:blur(50px);opacity:.75;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.art:hover .cover::after{transform:translate(-30%,-25%) scale(1.25)}
.cover .g{position:relative;z-index:2;width:84px;height:84px;border-radius:26px;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 20px 40px rgba(50,8,90,.25);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.art:hover .cover .g{transform:scale(1.08) rotate(-6deg)}
.cover .g .i{width:36px;height:36px}
.cover .flag{position:absolute;left:16px;top:16px;z-index:2;font-size:.78rem;padding:6px 12px;border-radius:var(--pill);background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.art-body{display:flex;flex-direction:column;gap:12px;padding:24px 26px 26px;flex:1}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.84rem;color:var(--ink-3)}
.art-meta b{font-weight:500;color:var(--violet-deep)}
.art h3{font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.art.wide h3{font-size:clamp(1.4rem,2.2vw,2.1rem);line-height:1.13}
.art .read{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:500}
.art .read .i{width:17px;height:17px;transition:transform .3s}
.art:hover .read .i{transform:translateX(5px)}
.kh-foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:26px}
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step{margin-top:0}
  .step::before{display:none}
  .why{grid-template-columns:1fr}
  .why-head{position:static;order:0}
  .tech{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1;justify-content:center;padding-inline:18px}
  .tech,.kh{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);border:0}
  .tech::-webkit-scrollbar,.kh::-webkit-scrollbar{display:none}
  .tech>div{flex:none;width:80vw;scroll-snap-align:start;border:1px solid var(--hair);border-radius:var(--r-lg);padding:26px}
  .kh .art{flex:none;width:80vw;scroll-snap-align:start}
  .steps{display:block;padding-bottom:10px}
  .step{position:sticky;top:calc(84px + var(--k) * 14px);margin:0 0 16px!important;box-shadow:0 -10px 40px rgba(60,20,100,.10);min-height:270px}
  .step .n{opacity:1}
  .svc{width:82vw}
  .why-item{grid-template-columns:60px minmax(0,1fr);gap:6px 18px}
  .why-item .ico{width:56px;height:56px;border-radius:18px}
}
.grid3 .svc,.grid4 .svc,.grid2 .svc{width:auto}
.crumbs{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.84rem;padding:7px 15px;border-radius:var(--pill);background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.crumbs a{opacity:.8}
.crumbs a:hover{opacity:1}
.crumbs i{font-style:normal;opacity:.5}
.crumbs.ink{background:var(--mist);border-color:transparent;color:var(--violet-deep);backdrop-filter:none}
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 16px}
.refs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ref{display:flex;flex-direction:column;gap:6px}
.ref figure{margin:0 0 10px;border-radius:var(--r-lg);overflow:hidden;position:relative;isolation:isolate}
.ref img{width:100%;height:auto;aspect-ratio:16/10.5;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.ref:hover img{transform:scale(1.05)}
.ref figure .arrow{opacity:0;transform:translateY(8px)}
.ref:hover figure .arrow{opacity:1;transform:rotate(-45deg)}
.ref h3{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,1.8vw,1.7rem);letter-spacing:-.02em;line-height:1.12}
.ref .no{font-size:.86rem;color:var(--fg3)}
.ref .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.filters button{padding:10px 18px;border-radius:var(--pill);border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.93rem;font-weight:500;transition:background .3s,color .3s,border-color .3s}
.filters button:hover{border-color:var(--violet)}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:1080px){
  .refs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .refs,.refs.two{grid-template-columns:minmax(0,1fr)}
}
.steps{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.steps[style*="--n:5"] .step{padding:24px}
.steps[style*="--n:5"] .step h3{font-size:1.2rem}
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.feat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 26px;padding:30px;border-radius:var(--r-lg);background:var(--card);color:var(--ink);border:1px solid var(--line);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .4s}
.feat:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(106,31,163,.14);border-color:rgba(145,55,205,.35)}
.feat .gl{grid-row:span 3;position:relative;overflow:hidden;isolation:isolate;width:92px;height:92px;border-radius:26px;display:grid;place-items:center;color:#fff;background:radial-gradient(80% 90% at 100% 0%,var(--c2,#E9D6F8),transparent 60%),radial-gradient(100% 120% at 0% 100%,var(--c1,#6A1FA3),#9137CD 60%,#C99BEA)}
.feat .gl::before{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:soft-light;opacity:.55}
.feat .gl span{position:relative;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.feat:hover .gl span{transform:scale(1.08) rotate(-6deg)}
.feat .gl .i{width:26px;height:26px}
.feat h3{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,1.7vw,1.6rem);letter-spacing:-.015em;line-height:1.16}
.feat p{color:var(--ink-2);font-size:1rem;line-height:1.65}
.feat ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
@media (max-width:1080px){
  .steps[style*="--n:5"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feats{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .feat{grid-template-columns:minmax(0,1fr);padding:24px}
  .feat .gl{grid-row:auto;width:72px;height:72px;border-radius:22px;margin-bottom:6px}
  .feat .gl span{width:44px;height:44px;border-radius:14px}
}
.prob{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:var(--r-lg);background:var(--mist);color:var(--ink)}
.prob .no{position:absolute;right:26px;top:22px;font-family:var(--display);font-size:.9rem;color:var(--violet)}
.prob .ico{background:var(--card);width:56px;height:56px;border-radius:18px;margin-bottom:26px}
.prob h3{font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.16;letter-spacing:-.015em}
.prob p{color:var(--ink-2);font-size:1rem;line-height:1.65}
.casc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(30px,4vw,60px);align-items:start}
.casc>*{margin-top:calc(var(--k) * (1 - var(--q,0)) * clamp(50px,6vw,110px))}
.casc .prob{min-height:320px}
.casc .prob .no{opacity:calc(.25 + .75 * var(--q,0))}
@media (max-width:760px){
  .casc{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .casc::-webkit-scrollbar{display:none}
  .casc>*{flex:none;width:80vw;scroll-snap-align:start;margin-top:0}
  .casc .prob{min-height:0}
}
.feat p a{color:var(--violet);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .25s}
.feat p a:hover{color:var(--violet-deep)}
.feat.tall p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.feat p strong,.prob p strong{color:var(--ink);font-weight:600}
.feat.tall p strong{color:#fff;font-weight:600}
.why-item p strong{color:var(--fg);font-weight:600}
.why-item p a{color:var(--violet-soft);text-decoration:underline;text-underline-offset:3px}
.kh-foot{margin-top:clamp(32px,3.4vw,52px)}
.person{display:inline-flex;align-items:center;gap:14px;padding:8px 22px 8px 8px;border-radius:var(--pill);background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.person img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6)}
.person b{display:block;font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.2}
.person span{display:block;font-size:.84rem;opacity:.85}
/* kompaktnejšia karta služby: obálka je úzky pás, sklenená ikona menšia (úprava po migrácii) */
.svc .cover{height:104px;padding-inline:24px}
.svc .cover .g{width:56px;height:56px;border-radius:18px}
.svc .cover .g .i{width:24px;height:24px}
.svc .cover::after{width:45%;bottom:-120%}
.svc .arrow{width:40px;height:40px;top:32px;right:22px}
.svc .arrow .i{width:16px;height:16px}
.svc-body{gap:10px;padding:20px 24px 24px}