/* ===========================================================================
   ef-de · sekcie pod hero (Služby → pätička) · DS 2.0
   Závisí od tokens.css, fonts.css a hero.css (základ, .label, .link, .cta, .glass, .hl).
   Mobil najprv, počítač od 60em (960 px) — rovnako ako hero.
   Rytmus pozadí: modrá (hero) · biela · modrá · biela · modrá · biela · modrá · Ink.
   Čitateľný text sa nehýbe (DS 7). Detaily pri posúvaní len podľa DS 7 (bez pripínania, len transform/opacity/farba).
   =========================================================================== */

/* vlastný display nesmie prebiť atribút hidden (podmienené polia formulára) */
[hidden]{display:none!important}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- Spoločné ---------- */
.sec{position:relative;padding:clamp(72px,7vw + 40px,136px) 0}
.sec--blue{isolation:isolate;background:var(--bg-blue);color:var(--text-on-blue)}
/* rovnaká zrnitosť ako v hero: iba tmavé zrnká → pozadie nikdy nezosvetlí */
.sec--blue::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 .133 0 0 0 0 .212 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.sec--blue :focus-visible{outline-color:var(--focus-on-blue)}
.wrap{position:relative;z-index:1;max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter)}

.head{display:grid;gap:18px;max-width:900px;margin-bottom:clamp(40px,3vw + 28px,72px)}
.kicker{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono)}
.kicker::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c-pink)}
.sec--blue .kicker::before{background:currentColor}   /* ružová na modrej má takmer rovnaký jas */
.h2{margin:0;font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-display);
  letter-spacing:var(--track-display);text-wrap:balance}
.intro{margin:0;max-width:56ch;font-size:var(--fs-lead);font-weight:var(--fw-lead);line-height:var(--lh-text);text-wrap:pretty}
.note{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.sec__cta{margin-top:clamp(40px,3vw + 24px,64px)}

/* ikony služieb (DS 5): farbu riadi CSS, jeden ružový akcent */
.icon{display:block;flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon .ac{stroke:var(--c-pink)}
.icon .af{fill:var(--c-pink);stroke:none}
.icon--md{width:32px;height:32px}
.icon--lg{width:48px;height:48px}

/* CTA na svetlom pozadí: Ink pilulka namiesto bielej */
.cta--ink{background:var(--c-ink);color:var(--c-white)}
.cta--ink:hover{color:var(--cta-text)}

/* ---------- Služby ---------- */
.svc-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.svc{display:flex;flex-direction:column;gap:14px;padding:26px 24px 28px;border-radius:var(--r-lg);background:var(--c-sky-100);color:var(--c-ink);
  scroll-margin-top:24px}
.svc p{margin:0}
.price{display:grid;justify-items:end;gap:4px;text-align:right}
.price__cap{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono)}
.price__num{font-family:var(--f-display);font-weight:var(--fw-display);font-size:clamp(32px,1vw + 26px,42px);line-height:1;letter-spacing:var(--track-display);white-space:nowrap}
.svc__title{margin:0;font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h3);line-height:1.1;letter-spacing:var(--track-title)}
.ticks{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.ticks li{position:relative;padding-left:24px}
.ticks li::before{content:"";position:absolute;left:3px;top:.42em;width:10px;height:5px;border-left:2px solid var(--c-pink);border-bottom:2px solid var(--c-pink);
  transform:rotate(-45deg)}
.svc-note{margin-top:20px}

/* Živé ukážky (CRM, AI, Weby): pokojný stav je výsledok; ukážka sa prehrá raz (12 s) pri prejdení myšou (0,15 s),
   fokuse klávesnicou alebo na dotyku v strede obrazovky. Vždy hrá najviac jedna (js/hero.js, časť 5). */
.svc--demo{gap:14px}
.svc__row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.svc__row .svc__title{padding-top:6px}
.svc__cta{align-self:flex-start;margin-top:auto;background:var(--c-white);color:var(--c-ink);text-decoration:none}

/* ===== živé ukážky: spoločných 12 s, len transform/opacity/farba; všetky tri bežia naraz ===== */
.svc-grid{--dlzka:12s;--plynulo:cubic-bezier(.65,0,.35,1);--dosadni:cubic-bezier(.34,1.45,.64,1)}
.demo{position:relative;container-type:inline-size;height:182px;border-radius:16px;background:var(--c-white);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-on-light);font-family:var(--f-mono);font-size:10.5px;line-height:1.3;color:var(--c-ink)}
.demo.is-hra *,.demo.is-hra *::before{animation-duration:var(--dlzka);animation-iteration-count:1;animation-fill-mode:both}
.demo:not(.is-hra) *,.demo:not(.is-hra) *::before{animation:none!important}
/* krátky závoj pri spustení a pri odchode myši (stav sa prepne pod ním) */
.demo::after{content:"";position:absolute;z-index:5;inset:1px;border-radius:15px;background:var(--c-white);opacity:0;transition:opacity .18s ease;pointer-events:none}
.demo.is-prechod::after{opacity:1}
.demo b{font-family:var(--f-text);font-weight:700;font-size:12px}
.demo small{font-size:9.5px;color:var(--c-gray-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo svg{display:block}

/* časová os: tenká čiara po spodnej hrane, tri kroky (15 %, 48 %, 81 %) */
.tl{position:absolute;left:16px;right:16px;bottom:26px;height:2px;border-radius:2px;background:rgba(0,34,54,.1)}
.tl__fill{position:absolute;inset:0;border-radius:inherit;background:var(--c-sky-deep);transform-origin:left;animation-name:tlFill;animation-timing-function:linear}
.tl__k{position:absolute;top:1px;width:0;height:0}
.tl__k--1{left:15%}.tl__k--2{left:48%}.tl__k--3{left:81%}
.tl__k::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--c-white);
  box-shadow:inset 0 0 0 1.5px rgba(0,34,54,.22);animation-timing-function:ease;animation-duration:var(--dlzka);animation-iteration-count:infinite;animation-fill-mode:both}
.tl__k--1::before{animation-name:tlBod1}.tl__k--2::before{animation-name:tlBod2}.tl__k--3::before{animation-name:tlBod3}
.tl__k span{position:absolute;top:8px;left:0;transform:translateX(-50%);white-space:nowrap;font-size:9px;letter-spacing:.01em;color:var(--c-gray-600)}
@keyframes tlFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tlBod1{0%,14%{background:var(--c-white);box-shadow:inset 0 0 0 1.5px rgba(0,34,54,.22)}16%,100%{background:var(--c-sky-deep);box-shadow:inset 0 0 0 1.5px var(--c-sky-deep)}}
@keyframes tlBod2{0%,47%{background:var(--c-white);box-shadow:inset 0 0 0 1.5px rgba(0,34,54,.22)}49%,100%{background:var(--c-sky-deep);box-shadow:inset 0 0 0 1.5px var(--c-sky-deep)}}
@keyframes tlBod3{0%,80%{background:var(--c-white);box-shadow:inset 0 0 0 1.5px rgba(0,34,54,.22)}82%,100%{background:var(--c-pink);box-shadow:inset 0 0 0 1.5px var(--c-pink)}}

/* ----- CRM: dopyt prejde Dopyt → Ponuka → Zákazka ----- */
.crm{position:absolute;left:12px;right:12px;top:12px;bottom:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.crm__col{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:10px;background:var(--c-sky-100);animation-timing-function:ease}
.crm__col span{font-weight:600;margin-bottom:2px}
.crm__col i{display:block;height:24px;border-radius:6px;background:rgba(0,34,54,.07)}
.crm__col i.s{width:68%;height:14px}
.crm__col--1{animation-name:crmCol1}.crm__col--2{animation-name:crmCol2}.crm__col--3{animation-name:crmCol3}
.crm__card{--krok:calc((100cqw - 40px)/3 + 8px);position:absolute;left:20px;top:44px;width:calc((100cqw - 40px)/3 - 16px);display:grid;gap:1px;
  padding:7px 8px;border-radius:8px;background:var(--c-white);box-shadow:0 0 0 1.5px var(--c-ink),0 8px 16px rgba(0,34,54,.12);
  animation-name:crmIde;animation-timing-function:var(--plynulo)}
.crm__card b{white-space:nowrap;font-size:clamp(10px,3.4cqw,12px)}
.crm__eur,.crm__ok{position:absolute;top:-7px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font:700 10px/1 var(--f-text);
  animation-timing-function:var(--dosadni)}
.crm__eur{right:16px;background:var(--c-sky-deep);color:var(--c-white);animation-name:crmEur}
.crm__ok{right:-7px;background:var(--c-pink);color:var(--c-white);animation-name:crmOk}
.crm__ok svg{width:11px;height:11px}
@keyframes crmIde{0%,9%{opacity:0;transform:translate(0,6px) scale(.92)}14%{opacity:1;transform:none}
  38%{transform:translateX(0)}47%{transform:translateX(calc(var(--krok)*1.02))}50%,71%{transform:translateX(var(--krok))}
  80%{transform:translateX(calc(var(--krok)*2.01))}83%,100%{opacity:1;transform:translateX(calc(var(--krok)*2))}}
@keyframes crmEur{0%,47%{opacity:0;transform:scale(.3)}52%,100%{opacity:1;transform:none}}
@keyframes crmOk{0%,80%{opacity:0;transform:scale(.3)}85%,100%{opacity:1;transform:none}}
@keyframes crmCol1{0%,10%,22%,100%{background:var(--c-sky-100)}14%{background:#CBEAF6}}
@keyframes crmCol2{0%,45%,58%,100%{background:var(--c-sky-100)}49%{background:#CBEAF6}}
@keyframes crmCol3{0%,78%,92%,100%{background:var(--c-sky-100)}82%{background:#F8DDEC}}

/* ----- AI: píše sa správa → AI ju prečíta a zatriedi → odpoveď je pripravená ----- */
.ai__typing,.ai__msg{position:absolute;left:12px;top:14px}
.ai__typing{display:flex;gap:4px;padding:11px 12px;border-radius:12px 12px 12px 4px;background:var(--c-sky-100);animation-name:aiTyping}
.ai__typing i{width:5px;height:5px;border-radius:50%;background:rgba(0,34,54,.45);animation:aiBod .9s ease-in-out infinite!important}
.ai__typing i:nth-child(2){animation-delay:.15s!important}.ai__typing i:nth-child(3){animation-delay:.3s!important}
.ai__msg{width:42%;display:grid;gap:3px;padding:9px 10px;border-radius:12px 12px 12px 4px;background:var(--c-sky-100);overflow:hidden;
  animation-name:aiMsg;animation-timing-function:ease}
.ai__scan{position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(90deg,transparent,rgba(252,255,255,.9),transparent);
  animation-name:aiScan;animation-timing-function:ease-in-out}
.ai__spark{position:absolute;left:calc(12px + 42cqw + 4px);top:24px;width:22px;height:22px;fill:var(--c-pink);animation-name:aiSpark;animation-timing-function:ease}
.ai__spark svg{width:22px;height:22px}
.ai__dot{position:absolute;left:calc(12px + 42cqw - 4px);top:31px;width:8px;height:8px;border-radius:50%;background:var(--c-pink);
  animation-name:aiDot;animation-timing-function:var(--plynulo)}
.ai__bins{position:absolute;right:12px;top:14px;width:41%;display:grid;gap:6px}
.ai__bin{position:relative;padding:6px 8px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-on-light);background:var(--c-white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai__bin--on{animation-name:aiBin;animation-timing-function:var(--dosadni)}
.ai__done{position:absolute;left:12px;bottom:48px;display:flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;border-radius:999px;
  background:var(--c-white);box-shadow:inset 0 0 0 1.5px var(--c-ink);font-weight:600;animation-name:aiDone;animation-timing-function:var(--dosadni)}
.ai__done svg{width:13px;height:13px;color:var(--c-pink)}
@keyframes aiBod{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
@keyframes aiTyping{0%{opacity:0;transform:translateY(6px)}3%,10%{opacity:1;transform:none}13%,100%{opacity:0;transform:none}}
@keyframes aiMsg{0%,11%{opacity:0;transform:translateY(6px)}15%,100%{opacity:1;transform:none}}
@keyframes aiScan{0%,26%{transform:translateX(-110%)}38%,100%{transform:translateX(190%)}}
@keyframes aiSpark{0%,24%{transform:scale(.7) rotate(0);opacity:.35}32%{transform:scale(1.3) rotate(90deg);opacity:1}40%{transform:scale(1) rotate(180deg);opacity:1}
  50%,100%{transform:scale(.8) rotate(180deg);opacity:.45}}
@keyframes aiDot{0%,38%{opacity:0;transform:translateX(0)}40%{opacity:1;transform:translateX(0)}47%{opacity:1;transform:translateX(calc(17cqw - 14px))}
  49%,100%{opacity:0;transform:translateX(calc(17cqw - 14px))}}
@keyframes aiBin{0%,47%{box-shadow:inset 0 0 0 1px var(--line-on-light);transform:none}50%{transform:translateX(-4px)}53%,100%{box-shadow:inset 0 0 0 1.5px var(--c-pink);transform:translateX(-2px)}}
@keyframes aiDone{0%,77%{opacity:0;transform:translateY(8px) scale(.94)}82%,100%{opacity:1;transform:none}}

/* ----- Weby: stránka sa načíta → návštevník klikne → príde dopyt ----- */
.web__win{position:absolute;left:12px;top:12px;bottom:48px;width:60%;border-radius:10px;background:var(--c-white);box-shadow:inset 0 0 0 1.5px var(--c-ink);overflow:hidden}
.web__bar{display:flex;gap:4px;padding:7px 8px;border-bottom:1.5px solid var(--c-ink)}
.web__bar i{width:6px;height:6px;border-radius:50%;background:var(--c-ink)}
.web__page{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto auto;gap:5px 8px;padding:9px 10px}
.web__page i{display:block;border-radius:4px;background:rgba(0,34,54,.12);transform-origin:left;animation-timing-function:var(--plynulo)}
.web__h{grid-column:1;height:12px;width:90%;background:var(--c-ink)!important;animation-name:webIn1}
.web__t{grid-column:1;height:6px;animation-name:webIn2}.web__t.s{width:70%;animation-name:webIn3}
.web__img{grid-column:2;grid-row:1/4;border-radius:6px!important;background:var(--c-sky-100)!important;animation-name:webIn4}
.web__btn{position:absolute;left:10px;bottom:10px;width:58px;height:15px;border-radius:999px;background:var(--c-pink);transform-origin:center;
  animation-name:webBtn;animation-timing-function:ease}
.web__sent{position:absolute;left:31px;bottom:8px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--c-pink);color:var(--c-white);
  animation-name:webSent;animation-timing-function:var(--dosadni)}
.web__sent svg{width:11px;height:11px}
.web__cursor{position:absolute;left:49px;bottom:47px;width:15px;height:17px;animation-name:webCursor;animation-timing-function:var(--plynulo)}
.web__cursor svg{width:15px;height:17px}
.web__dot{position:absolute;left:38px;bottom:62px;width:8px;height:8px;border-radius:50%;background:var(--c-pink);animation-name:webDot;animation-timing-function:var(--plynulo)}
.web__lead{position:absolute;right:12px;top:56px;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;background:var(--c-white);
  box-shadow:0 0 0 1.5px var(--c-ink),0 8px 16px rgba(0,34,54,.12);font-weight:600;animation-name:webLead;animation-timing-function:var(--dosadni)}
.web__lead svg{width:13px;height:13px;color:var(--c-pink)}
@keyframes webIn1{0%,1%{opacity:0;transform:scaleX(.3)}6%,100%{opacity:1;transform:none}}
@keyframes webIn2{0%,4%{opacity:0;transform:scaleX(.3)}9%,100%{opacity:1;transform:none}}
@keyframes webIn3{0%,6%{opacity:0;transform:scaleX(.3)}11%,100%{opacity:1;transform:none}}
@keyframes webIn4{0%,8%{opacity:0;transform:scale(.8)}13%,100%{opacity:1;transform:none}}
@keyframes webBtn{0%,10%{opacity:0;transform:scale(.6)}15%,46%{opacity:1;transform:none}48%{opacity:1;transform:scale(.88)}51%{opacity:0;transform:scale(.88)}100%{opacity:0}}
@keyframes webSent{0%,50%{opacity:0;transform:scale(.3)}55%,100%{opacity:1;transform:none}}
@keyframes webCursor{0%,15%{opacity:0;transform:translate(calc(60cqw - 70px),-40px)}20%{opacity:1;transform:translate(calc(60cqw - 70px),-40px)}
  44%{opacity:1;transform:translate(0,0)}47%{transform:translate(0,0) scale(.85)}50%{opacity:1;transform:translate(0,0)}58%,100%{opacity:0;transform:translate(6px,6px)}}
@keyframes webDot{0%,68%{opacity:0;transform:translate(0,0)}70%{opacity:1;transform:translate(0,0)}80%{opacity:1;transform:translate(calc(100cqw - 160px),-40px)}
  82%,100%{opacity:0;transform:translate(calc(100cqw - 160px),-40px)}}
@keyframes webLead{0%,79%{opacity:0;transform:scale(.85)}84%,100%{opacity:1;transform:none}}

/* pokojný stav = výsledok všetkých troch krokov (bez myši, pred prvým prehratím aj pri vypnutom pohybe) */
.tl__k::before{background:var(--c-sky-deep);box-shadow:inset 0 0 0 1.5px var(--c-sky-deep)}
.tl__k--3::before{background:var(--c-pink);box-shadow:inset 0 0 0 1.5px var(--c-pink)}
.crm__card{transform:translateX(calc(var(--krok)*2))}
.ai__typing,.ai__dot,.ai__scan,.web__cursor,.web__dot,.web__btn{opacity:0}
.ai__spark{opacity:.45;transform:scale(.8) rotate(180deg)}
.ai__bin--on{box-shadow:inset 0 0 0 1.5px var(--c-pink);transform:translateX(-2px)}
@media (prefers-reduced-motion:reduce){.demo *,.demo *::before{animation:none!important}.demo::after{display:none}}

/* Ďalšie služby · mobil a tablet: zoznam s ikonami v dlaždiciach (bez animácie).
   Sieť kocky a skladanie pri posúvaní sú až od 72em (dole, „Počítač – sieť kocky“). */
.more{margin-top:clamp(64px,4vw + 40px,112px);display:grid;gap:12px}
.more__head{display:grid;gap:12px;align-content:start}
.more__head p,.more__help{margin:0;max-width:44ch;font-size:var(--fs-sm);line-height:var(--lh-text);color:var(--text-muted)}
.more__help{margin-top:16px}
.more__help .link{white-space:nowrap}
.more__h{margin:0;font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h3);line-height:1.1;letter-spacing:var(--track-title)}
.more__list{list-style:none;margin:0;padding:0;display:grid}
.more__item{display:flex;align-items:flex-start;gap:18px;padding:22px 0;border-bottom:1px solid var(--line-on-light)}
.more__ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--c-sky-100);color:var(--c-ink)}
.more__ic .icon{width:28px;height:28px}
.more__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.more__item p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.more__t{margin:0;font-family:var(--f-display);font-weight:var(--fw-display);font-size:20px;line-height:1.15;letter-spacing:var(--track-title)}
/* celý blok služby je odkaz: odkaz v nadpise sa roztiahne cez ::after na celú položku */
.more__item{position:relative}
.more__t a{color:inherit;text-decoration:none}
.more__t a::after{content:"";position:absolute;inset:0;z-index:1}
.more__t a:focus-visible{outline:none}
.more__item:has(.more__t a:focus-visible){outline:3px solid var(--focus-on-light);outline-offset:4px;border-radius:4px}
/* „Mám záujem“ je len viditeľná nápoveda (klik ide cez odkaz v nadpise); na počítači v sieti skrytá */
.more__cta{align-self:flex-start;margin-top:8px;font-weight:var(--fw-strong);font-size:15.5px;text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:6px}
.more__item:hover .more__cta{text-decoration-thickness:3px}

/* ---------- Referencie ---------- */
.case{display:grid;gap:36px;padding:clamp(24px,2.5vw + 12px,48px)}
.case p{margin:0}
.case__main{display:grid;gap:18px;align-content:start}
.case__name{margin:4px 0 6px}
.case__name img{width:auto;height:30px}
.case__lead{font-size:var(--fs-lead);font-weight:var(--fw-lead);max-width:52ch}
.case__main .link{justify-self:start;margin-top:6px}
.case__side{display:grid;gap:18px;align-content:start;container-type:inline-size}
.stats{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:26px;border-bottom:1px solid var(--line-on-blue)}
/* v <dl> je popis (dt) pred číslom (dd); vizuálne ide číslo hore */
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px}
/* veľkosť podľa šírky karty (nie okna) → tri čísla sa zmestia vedľa seba pri každej šírke */
.stat dd{margin:0;font-family:var(--f-display);font-weight:var(--fw-display);font-size:24px;font-size:clamp(20px,8.4cqi,48px);line-height:1;
  letter-spacing:var(--track-display);white-space:nowrap}
.stat dt{font-family:var(--f-mono);font-size:var(--fs-mono);line-height:1.45}
.sys{display:grid;gap:8px}
.sys__h{margin:0;font-family:var(--f-display);font-weight:var(--fw-title);font-size:var(--fs-title);line-height:1.3;letter-spacing:var(--track-title)}
.sys p{font-size:var(--fs-sm);line-height:var(--lh-text)}

.refs{display:grid;gap:16px;margin-top:16px}
.ref{display:grid;gap:16px;align-content:start;padding:clamp(24px,2vw + 12px,40px)}
.ref p{margin:0}
.ref__name{margin:0}
.ref__name img{width:auto;height:52px}
.ref .link{justify-self:start}
.ref__h{margin:0;font-family:var(--f-display);font-weight:var(--fw-title);font-size:var(--fs-title);line-height:1.3;letter-spacing:var(--track-title)}
.others{list-style:none;margin:0;padding:0;display:grid}
.others li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:10px 0;border-top:1px solid var(--line-on-blue)}
.others img{width:auto;height:calc(var(--h) * .95);max-width:55%;object-fit:contain;object-position:left center}
.others span{font-family:var(--f-mono);font-size:var(--fs-mono);text-align:right}

/* Svetlá za sklom: dve ružové žiary a tmavý tieň sa veľmi pomaly presúvajú za kartami, sklo ich rozmaže.
   Len ružová do 60 % a Ink → pozadie iba stmavne, biely text ostáva ≥ 4,60:1 (namerané 7. 11. 2026, ako bez svetiel).
   Bez pohybu ostanú stáť na mieste; mimo obrazovky sa zastavia (js/hero.js, časť 6). */
.refglow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.refglow i{position:absolute;display:block;aspect-ratio:1;border-radius:50%}
.refglow__a{width:clamp(520px,64vw,940px);right:-14%;top:2%;
  background:radial-gradient(closest-side,rgba(216,57,149,.6),rgba(216,57,149,.3) 45%,rgba(216,57,149,.08) 75%,transparent)}
.refglow__b{width:clamp(480px,56vw,820px);left:-18%;top:46%;
  background:radial-gradient(closest-side,rgba(216,57,149,.5),rgba(216,57,149,.24) 45%,rgba(216,57,149,.06) 75%,transparent)}
.refglow__shade{width:clamp(560px,72vw,1040px);left:16%;top:20%;
  background:radial-gradient(closest-side,rgba(0,34,54,.5),rgba(0,34,54,.2) 55%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .refglow__a{animation:glowA 34s ease-in-out infinite alternate}
  .refglow__b{animation:glowB 43s ease-in-out infinite alternate}
  .refglow__shade{animation:glowShade 52s ease-in-out infinite alternate}
  .sec[data-paused] .refglow i{animation-play-state:paused}
}
@keyframes glowA{to{transform:translate(-46%,34%) scale(1.14)}}
@keyframes glowB{to{transform:translate(58%,-38%) scale(.88)}}
@keyframes glowShade{to{transform:translate(-30%,18%) scale(1.1)}}

/* ---------- Ako pracujeme ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;counter-reset:krok}
.step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 16px;padding:24px 0;border-top:1px solid var(--line-on-light)}
.step::before{counter-increment:krok;content:counter(krok);grid-row:1 / span 2;font-family:var(--f-display);font-weight:var(--fw-display);
  font-size:44px;line-height:.9;letter-spacing:var(--track-display);color:var(--c-sky-deep)}
.step__t{margin:0;font-family:var(--f-display);font-weight:var(--fw-title);font-size:var(--fs-title);line-height:1.3;letter-spacing:var(--track-title)}
.step p{margin:0;color:var(--text-muted)}

.promises{list-style:none;margin:clamp(32px,2vw + 24px,56px) 0 0;padding:clamp(22px,2vw + 12px,36px);display:grid;gap:22px;
  border-radius:var(--r-lg);background:var(--c-sky-100);color:var(--c-ink)}
.promise{display:flex;align-items:flex-start;gap:14px}
.promise p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.promise strong{display:block;margin-bottom:2px;font-family:var(--f-display);font-weight:var(--fw-title);font-size:var(--fs-title);line-height:1.3;letter-spacing:var(--track-title)}
.promise__ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--c-sky-deep);color:var(--c-white)}
.promise__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Kto za tým stojí ---------- */
.about{display:grid;gap:40px}
.about__text{display:grid;gap:18px;align-content:start}
.about__text p:not(.kicker):not(.intro){margin:0;max-width:60ch}
.person{display:grid;gap:4px;align-content:start;padding:clamp(24px,2vw + 12px,36px)}
.person p{margin:0}
.person .label{margin-bottom:10px}
.person__name{font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h3);line-height:1.1;letter-spacing:var(--track-title)}
.person__role{font-size:var(--fs-sm)}
/* roly: štítky v Martian Mono (DS: písmo pre štítky), nie sú klikateľné → bez hover a výplne */
.person__roles{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.person__roles li{padding:5px 11px;border:1px solid var(--line-on-blue);border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:var(--track-mono);line-height:1.4}
.person__list{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line-on-blue);display:grid;gap:6px}
.person__list a{display:inline-block;padding:4px 0;font-weight:var(--fw-strong);font-size:var(--fs-lead);text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:6px}
.person__list a:hover{text-decoration-thickness:3px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:8px}
.faq .head{margin-bottom:24px}
.qa{border-bottom:1px solid var(--line-on-light)}
.qa:first-child{border-top:1px solid var(--line-on-light)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--tap);padding:18px 0;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:var(--fw-title);font-size:var(--fs-title);line-height:1.3;letter-spacing:var(--track-title);border-radius:var(--r-sm)}
.qa summary::-webkit-details-marker{display:none}
.qa__ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1.5px solid currentColor;border-radius:50%;transition:background var(--dur-hover) ease}
.qa__ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform var(--dur-ui) var(--ease-out)}
.qa summary:hover .qa__ic{background:var(--c-sky-100)}
.qa[open] .qa__ic svg{transform:rotate(45deg)}
.qa__a{padding:0 56px 22px 0}
.qa__a p{margin:0;max-width:64ch;color:var(--text-muted)}

/* ---------- Kontakt ---------- */
.contact{display:grid;gap:40px}
.contact__text{display:grid;gap:18px;align-content:start}
.contact .h2{padding-top:.08em}
.direct{margin:14px 0 0;display:grid;gap:18px}
.direct div{display:grid;gap:6px;padding-top:16px;border-top:1px solid var(--line-on-blue)}
.direct dd{margin:0}
.direct a{font-family:var(--f-display);font-weight:var(--fw-title);font-size:clamp(21px,.9vw + 16px,28px);line-height:1.2;letter-spacing:var(--track-title);
  text-decoration:none;overflow-wrap:anywhere}
.direct a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.direct__txt{max-width:40ch}

.formcard{align-self:start;padding:clamp(22px,2vw + 14px,44px);border-radius:var(--r-lg);background:var(--bg-light);color:var(--text-on-light);
  box-shadow:0 30px 80px rgba(0,34,54,.22)}
.formcard :focus-visible{outline-color:var(--focus-on-light)}
.form{display:grid;gap:20px}
.form p{margin:0}
.fine{font-size:13px;line-height:1.5;color:var(--text-muted)}
.chips{min-width:0;margin:0;padding:0;border:0}
.chips legend{padding:0;margin-bottom:12px;font-weight:var(--fw-strong)}
.chips__list{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:block}
/* skutočné políčko zostáva (klávesnica, čítačka), vizuálne ho nahrádza pilulka */
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--c-gray-400);border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:500;transition:background var(--dur-hover) ease,border-color var(--dur-hover) ease,color var(--dur-hover) ease}
.chip span::before{content:"";display:none;width:9px;height:5px;margin:-3px 2px 0 0;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.chip:hover span{border-color:var(--c-ink)}
.chip input:checked + span{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-white)}
.chip input:checked + span::before{display:block}
.chip input:focus-visible + span{outline:3px solid var(--focus-on-light);outline-offset:3px}
.field{display:grid;gap:6px}
.field label{font-weight:var(--fw-strong);font-size:var(--fs-sm)}
.field input,.field textarea{width:100%;min-height:var(--tap);padding:11px 14px;border:1.5px solid var(--c-gray-400);border-radius:var(--r-md);
  background:var(--c-white);color:var(--c-ink);font:inherit;font-size:16px;transition:border-color var(--dur-hover) ease}
.field textarea{min-height:120px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--c-ink)}
.field input:focus,.field textarea:focus{border-color:var(--c-sky-deep)}
.field ::placeholder{color:var(--c-gray-600);opacity:1}
.grid2{display:grid;gap:20px}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-sm);line-height:var(--lh-snug);cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--c-ink);cursor:pointer}
.consent a{color:inherit}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__end{display:grid;gap:14px;justify-items:start}
.btn-pink{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 26px 0 28px;border:0;border-radius:var(--r-pill);
  background:var(--cta-bg);color:var(--cta-text);font-weight:var(--fw-strong);font-size:var(--fs-base);cursor:pointer;
  transition:background var(--dur-hover) ease}
.btn-pink svg{width:20px;height:20px;transition:transform .5s var(--ease-out)}
.btn-pink:hover{background:var(--c-ink)}
.btn-pink:hover svg{transform:translateX(4px)}
.fine a{color:inherit}
/* chyby: text Error (6,50 : 1) + červený okraj poľa, nikdy len farba bez textu */
.err{margin:0;font-size:13.5px;line-height:1.4;font-weight:500;color:var(--c-error)}
.chips .err{margin-top:8px}
.consent + .err{margin-top:-10px;padding-left:34px}
.field [aria-invalid="true"]{border-color:var(--c-error)}
.consent:has([aria-invalid="true"]) input{outline:2px solid var(--c-error);outline-offset:2px}
.chips.is-chyba .chip span{border-color:var(--c-error)}
.form__status{padding:12px 14px;border-radius:var(--r-md);background:#FBEAEA;color:var(--c-error);font-size:var(--fs-sm);font-weight:500}
.form__status:empty{display:none}
.btn-pink[aria-busy="true"]{cursor:progress;background:var(--c-ink)}
/* odznak reCAPTCHA je skrytý — Google to dovoľuje, ak je pri formulári text o reCAPTCHA (je) */
.grecaptcha-badge{visibility:hidden}

/* ---------- Pätička ---------- */
.foot{background:var(--c-ink);color:var(--c-white);padding:clamp(56px,4vw + 40px,96px) 0 36px}
.foot :focus-visible{outline-color:var(--focus-on-blue)}
.foot__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
.foot__brand,.foot__legal{grid-column:1 / -1}
.foot__in > nav{grid-row:span 2}
.foot p{margin:0}
.foot__brand{display:grid;gap:16px;align-content:start}
.foot__brand .brand{justify-self:start}
.foot__logo{width:auto;height:48px}
.foot__brand p{max-width:30ch;font-size:var(--fs-sm)}
.foot__col{display:grid;gap:12px;align-content:start}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--fs-sm)}
.foot__col a{display:inline-block;padding:3px 0;text-decoration:none}
.foot__col a:hover{text-decoration:underline;text-underline-offset:4px}
.foot__legal{padding-top:24px;border-top:1px solid rgba(252,255,255,.18);font-size:12.5px;line-height:1.6;color:rgba(252,255,255,.78)}

.foot__btn{min-height:auto;padding:3px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.foot__btn:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Podstránky (dokumenty, ďakujeme, 404) ---------- */
.page-top{padding:calc(86px + clamp(28px,3vw + 12px,72px)) 0 clamp(48px,4vw + 24px,96px)}
.page-top .head{margin-bottom:0}
.h1{margin:0;font-family:var(--f-display);font-weight:var(--fw-display);font-size:clamp(40px,4.4vw + 20px,88px);line-height:var(--lh-display);
  letter-spacing:var(--track-display);text-wrap:balance}
.page-top--full{display:flex;align-items:center;min-height:min(820px,88svh)}
.page-top--full > .wrap{width:100%}
.page-top .actions{margin-top:12px}

/* text dokumentov zarovnaný vľavo s nadpisom stránky, riadky najviac 800 px */
.legal__in > *{max-width:800px}
.legal h2{margin:52px 0 14px;font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h3);line-height:1.15;letter-spacing:var(--track-title)}
.legal h2:first-child{margin-top:0}
.legal h3{margin:28px 0 10px;font-family:var(--f-display);font-weight:var(--fw-title);font-size:var(--fs-title);line-height:1.3;letter-spacing:var(--track-title)}
.legal p{margin:0 0 14px;max-width:72ch}
.legal ul{margin:0 0 16px;padding-left:1.25em;max-width:72ch}
.legal li{margin:6px 0;padding-left:4px}
.legal li::marker{color:var(--c-pink)}
.legal a{color:var(--c-sky-deep);text-underline-offset:3px}
.legal a:hover{text-decoration-thickness:2px}
.tbl{overflow-x:auto;margin:10px 0 22px;border:1px solid var(--line-on-light);border-radius:var(--r-md)}
.legal table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.legal th,.legal td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-on-light)}
.legal tr:last-child > *{border-bottom:0}
.legal thead th{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;background:var(--c-sky-100)}
.legal tbody th{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;color:var(--text-muted);width:34%}
.tbl--wide table{min-width:640px}
.legal code{font-family:var(--f-mono);font-size:.82em}
.legal .ck-btn{margin:4px 0 16px;background:var(--c-ink);color:var(--c-white)}
.legal .ck-btn:hover{background:var(--c-sky-deep)}

/* ---------- Súhlas s cookies (js/consent.js) ----------
   Ink karta dole: na bielej aj modrej sekcii rovnako čitateľná.
   „Prijať“ a „Odmietnuť“ majú rovnaký vzhľad — odmietnuť musí byť rovnako ľahké. */
.cookie-bar{position:fixed;z-index:50;left:12px;right:12px;bottom:12px;display:grid;gap:14px;padding:18px 18px 16px;max-width:600px;
  border:1px solid rgba(252,255,255,.16);border-radius:var(--r-lg);background:var(--c-ink);color:var(--c-white);box-shadow:0 24px 60px rgba(0,34,54,.35)}
.cookie-bar :focus-visible{outline-color:var(--focus-on-blue)}
.cookie-bar__text{margin:0;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.cookie-bar__text a{color:inherit;text-underline-offset:3px}
.cookie-bar__btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ck-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 20px;border:0;border-radius:var(--r-pill);
  background:var(--c-white);color:var(--c-ink);font:inherit;font-size:15px;font-weight:var(--fw-strong);cursor:pointer;transition:background var(--dur-hover) ease}
.ck-btn:hover{background:var(--c-sky-100)}
.ck-link{min-height:var(--tap);padding:0 10px;border:0;background:none;color:inherit;font:inherit;font-size:15px;font-weight:var(--fw-strong);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;cursor:pointer}
.ck-link:hover{text-decoration-thickness:3px}
.cookie-bar .ck-btn{flex:1 1 auto}

.ck-dialog{width:min(560px,calc(100% - 24px));max-height:calc(100% - 24px);margin:auto;padding:0;border:0;border-radius:var(--r-lg);
  background:var(--bg-light);color:var(--text-on-light);box-shadow:0 30px 90px rgba(0,34,54,.4)}
.ck-dialog::backdrop{background:rgba(0,34,54,.6)}
.ck-dialog :focus-visible{outline:3px solid var(--focus-on-light);outline-offset:3px}
.ck-dialog__in{display:grid;gap:4px;padding:clamp(22px,3vw,32px)}
.ck-dialog__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ck-dialog__h{margin:0;font-family:var(--f-display);font-weight:var(--fw-display);font-size:var(--fs-h3);line-height:1.1;letter-spacing:var(--track-title)}
.ck-dialog__uvod{margin:6px 0 10px;font-size:var(--fs-sm);color:var(--text-muted)}
.ck-x{display:grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);padding:0;border:1.5px solid currentColor;border-radius:50%;background:none;color:inherit;cursor:pointer}
.ck-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ck-x:hover{background:var(--c-sky-100)}
.ck-opt{padding:16px 0;border-top:1px solid var(--line-on-light)}
.ck-opt__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ck-opt__t{font-family:var(--f-display);font-weight:var(--fw-title);font-size:var(--fs-title);letter-spacing:var(--track-title)}
.ck-opt__vzdy{font-family:var(--f-mono);font-size:var(--fs-mono);color:var(--text-muted)}
.ck-opt__d{margin:6px 0 0;font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--text-muted)}
/* prepínač: vypnutý Gray 400 (3,59 : 1), zapnutý Sky Deep; stav ukazuje aj poloha gombíka */
.ck-switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:52px;height:30px;margin:0;border-radius:var(--r-pill);
  background:var(--c-gray-400);cursor:pointer;transition:background var(--dur-hover) ease}
.ck-switch::before{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:var(--c-white);
  box-shadow:0 1px 3px rgba(0,34,54,.3);transition:transform var(--dur-hover) var(--ease-out)}
.ck-switch:checked{background:var(--c-sky-deep)}
.ck-switch:checked::before{transform:translateX(22px)}
.ck-dialog__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;padding-top:18px;border-top:1px solid var(--line-on-light)}
.ck-btn--ink{background:var(--c-ink);color:var(--c-white)}
.ck-btn--ink:hover{background:var(--c-sky-deep)}
.ck-btn--line{box-shadow:inset 0 0 0 1.5px var(--c-ink)}
@media (prefers-reduced-motion:no-preference){
  .cookie-bar{animation:ckIn .7s var(--ease-out) backwards .6s}
}
@keyframes ckIn{from{opacity:0;transform:translateY(16px)}}

/* ---------- Tablet (od 640 px) ---------- */
@media (min-width:40em){
  .more__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promises{grid-template-columns:repeat(3,minmax(0,1fr))}
  .promise{flex-direction:column}
  .foot__in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__in > nav{grid-row:auto}
  .cookie-bar{left:24px;right:auto;bottom:24px;padding:22px 24px 20px}
  .cookie-bar .ck-btn{flex:0 0 auto}
}

/* ---------- Počítač (od 960 px) ---------- */
@media (min-width:60em){
  .svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .more{grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:min(4vw,58px)}
  .more__h{padding-top:22px}
  .more__list{column-gap:min(4vw,58px)}
  .more__help{grid-column:2}

  .case{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:min(5vw,72px)}
  .case__name img{height:38px}
  .refs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

  .steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:min(3vw,40px)}
  .step{grid-template-columns:minmax(0,1fr);align-content:start;padding-top:28px}
  .step::before{grid-row:auto;margin-bottom:22px;font-size:64px}

  .about{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);column-gap:min(5vw,72px);align-items:center}

  .faq{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:min(5vw,72px);align-items:start}
  .faq .head{position:sticky;top:40px;margin-bottom:0}

  .contact{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:min(5vw,72px)}

  .foot__in{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
  .foot__brand{grid-column:auto}
}

/* ---------- Počítač – sieť kocky „Ďalšie služby“ (od 1152 px) ----------
   Šesť služieb = šesť stien kocky rozložených ako vystrihovačka 1-4-1 (plná čiara = strih, prerušovaná = ohyb).
   Steny sú štvorce (inak by sa nezložila kocka). Bez JS a pri vypnutom pohybe je sieť rozložená (všetky --k = 0).
   js/hero.js (časť 4) pri posúvaní nastavuje na .more:
     --kv  natočenie celej kocky (0 rozložená … 1 zložená a natočená ako logo)
     --k1  ohyby pri základnej stene f3 (f2, f4, f6)      --k2  ohyby ďalej (f5 na f4, f1 na f4)
     --kc  tieňovanie stien a ikona v strede (0 biela sieť … 1 papierová kocka)      --t  text (0 skrytý … 1 viditeľný)
   Mení sa len transform, opacity a farba (DS 7), sekcia sa nepripína. */
@media (min-width:72em){
  .more{--s:clamp(250px,21vw,300px);--pad:22px;grid-template-columns:repeat(4,var(--s));grid-template-rows:repeat(3,var(--s));
    justify-content:center;gap:0;perspective:2000px}
  .more__h{padding-top:0}
  .more__head{grid-column:1/3;grid-row:1;align-self:end;padding:0 40px 32px 0}
  .more__head p{max-width:46ch}
  .more__help{grid-column:3/5;grid-row:3;align-self:center;margin:0;padding:24px 0 24px 40px}
  /* zložená kocka je „papierová“ (rozhodnutie 7. 11. 2026: decentne, nekradne pozornosť hlavným trom službám):
     hrany ostávajú ako čiary strihu/ohybu, steny majú len svetlé tieňovanie, ikony sú stále Ink s ružovým akcentom */
  .more__list{--cut-c:var(--c-ink);--fold-c:var(--c-sky-deep);
    grid-column:1/-1;grid-row:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;column-gap:0;
    pointer-events:none;transform-style:preserve-3d;
    transform-origin:calc(var(--s)*1.5) calc(var(--s)*1.5) calc(var(--s)*-.5);
    /* zložená kocka sedí hore vpravo vedľa nadpisu (stred 2,5 s; 0,6 s), aby bola vidno skôr, než sa rozloží */
    transform:translate(calc(var(--s)*var(--kv,0)),calc(var(--s)*-.9*var(--kv,0))) rotateX(calc(-24deg*var(--kv,0)))
      rotateY(calc(-34deg*var(--kv,0))) scale(calc(1 - .38*var(--kv,0)))}
  .more__item{position:relative;flex-direction:column;align-items:stretch;gap:10px;padding:var(--pad);border:0;pointer-events:auto;
    background:color-mix(in srgb,var(--farba) calc(var(--kc,0)*100%),var(--c-white));backface-visibility:hidden}
  .more__ic{display:block;width:32px;height:32px;border-radius:0;background:none;transform-origin:16px 16px;
    transform:translate(calc((var(--s)/2 - var(--pad) - 16px)*var(--kc,0)),calc((var(--s)/2 - var(--pad) - 16px)*var(--kc,0)))
      scale(calc(1 + 1.2*var(--kc,0)))}
  .more__ic .icon{width:32px;height:32px}
  .more__body{flex:1;gap:6px;opacity:var(--t,1)}
  .more__t{font-size:19px}
  .more__cta{display:none}
  .more__item:has(.more__t a:focus-visible){outline-offset:-4px;border-radius:0}

  /* steny: poloha v sieti, strih/ohyb, farba v zloženej kocke, kĺb (f3 je základ a nehýbe sa) */
  .more__item.f1{--farba:var(--c-white);grid-area:1/3;border-top:1.5px solid var(--cut-c);border-left:1.5px solid var(--cut-c);border-right:1.5px solid var(--cut-c);
    transform-origin:0 100%;transform:rotateY(calc(90deg*var(--k1,0))) rotateX(calc(90deg*var(--k2,0)))}
  .more__item.f2{--farba:var(--c-sky-100);grid-area:2/1;border-top:1.5px solid var(--cut-c);border-left:1.5px solid var(--cut-c);border-bottom:1.5px solid var(--cut-c);
    transform-origin:100% 50%;transform:rotateY(calc(-90deg*var(--k1,0)))}
  .more__item.f3{--farba:var(--c-sky-100);grid-area:2/2;border-top:1.5px solid var(--cut-c);border-left:1.5px dashed var(--fold-c)}
  .more__item.f4{--farba:color-mix(in srgb,var(--c-sky) 22%,var(--c-white));grid-area:2/3;border-top:1.5px dashed var(--fold-c);border-left:1.5px dashed var(--fold-c);border-bottom:1.5px solid var(--cut-c);
    transform-origin:0 50%;transform:rotateY(calc(90deg*var(--k1,0)))}
  .more__item.f5{--farba:var(--c-sky-100);grid-area:2/4;border:1.5px solid var(--cut-c);border-left:1.5px dashed var(--fold-c);
    transform-origin:0 50%;transform:translateX(calc(var(--s)*-1)) rotateY(calc(90deg*var(--k1,0))) translateX(var(--s)) rotateY(calc(90deg*var(--k2,0)))}
  .more__item.f6{--farba:var(--c-sky-100);grid-area:3/2;border:1.5px solid var(--cut-c);border-top:1.5px dashed var(--fold-c);
    transform-origin:50% 0;transform:rotateX(calc(-90deg*var(--k1,0)))}

  /* lepiace chlopne (7 ako na skutočnej vystrihovačke); v zloženej kocke sú vnútri, preto miznú s textom */
  .f1::before,.f1::after,.f2::before,.f2::after,.f5::after,.f6::before,.f6::after{content:"";position:absolute;background:var(--c-sky-100);
    pointer-events:none;opacity:var(--t,1)}
  .f1::before,.f6::after{left:16%;right:16%;height:18px;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}
  .f1::before{top:-19.5px}
  .f6::after{bottom:-19.5px;transform:scaleY(-1)}
  .f2::after{left:16%;right:16%;bottom:-19.5px;height:18px;clip-path:polygon(0 0,100% 0,90% 100%,10% 100%)}
  .f1::after,.f5::after{right:-19.5px;top:16%;bottom:16%;width:18px;clip-path:polygon(0 0,100% 10%,100% 90%,0 100%)}
  .f2::before,.f6::before{left:-19.5px;top:16%;bottom:16%;width:18px;clip-path:polygon(0 10%,100% 0,100% 100%,0 90%)}

  /* rozložená sieť: jemná odozva na myš; počas skladania sa na steny nedá kliknúť */
  .more:not([data-zlozene]) .more__item{transition:background-color .4s ease}
  .more:not([data-zlozene]) .more__item:hover,.more:not([data-zlozene]) .more__item:focus-within{background:var(--c-sky-100)}
  .more[data-zlozene] .more__item{pointer-events:none}
  .more[data-skladanie] .more__list,.more[data-skladanie] .more__item{will-change:transform}
}

/* vypnutý pohyb: aj drobné prechody ikon a prepínača sa zmenia okamžite, bez pohybu */
@media (prefers-reduced-motion:reduce){
  .cta__icon svg,.btn-pink svg,.qa__ic svg,.ck-switch::before{transition:none}
}