/* nogrey.sk v štýle DECK ako stránka /ai: svetlá obloha, matné 3D gule, sklo s 3D hranou, jemná levitácia.
   Kópia webu redizajn-2026/web-ai (Erik 13. 10. 2026). Krok 1: úvod a Referencie na úvodnej stránke.
   Gule, sklo, úvod a animácie prevzaté z assets/ai/deck.css, aby obe časti webu vyzerali rovnako. */
:root{--text:#141B33;--tlm:#56607A;--azur:#1A8FE3;--grad:linear-gradient(115deg,#1592E6 0%,#5B63DC 38%,#9A3FD2 72%,#C24BCB 100%)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--text);background:#F3F8FE;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Sora',system-ui,sans-serif;letter-spacing:-.02em}
a{color:inherit}
img{max-width:100%}

/* ===== GULE ===== */
.gula{position:absolute;border-radius:50%;filter:blur(var(--b,0px));pointer-events:none}
.tyrkys{background:radial-gradient(circle at 28% 22%,#8AF7FE 0%,#6EE8FB 16%,#45C4F0 34%,#1E9BE5 50%,#0B86DC 64%,#0679D8 84%,#0A6FCF 100%)}
.magenta{background:radial-gradient(circle at 26% 20%,#FFC8FE 0%,#F3A6F7 12%,#D46CE1 30%,#A645D1 46%,#7A27C2 62%,#5B10B3 76%,#540FAE 100%)}
.magenta-velka{background:radial-gradient(circle at 26% 20%,#FFC8FE 0%,#F7AEF8 18%,#E58FEF 36%,#C75EDC 52%,#9A3FCD 70%,#7A27C2 86%,#6A1EBC 100%)}
.fialova{background:radial-gradient(circle at 30% 24%,#C67BEC 0%,#9A48D8 34%,#7228C5 64%,#5612B3 100%)}
.zlta{background:radial-gradient(circle at 32% 26%,#FFFEDC 0%,#FEE6A6 24%,#FBC97C 52%,#EEA554 80%,#E39A4B 100%)}
.oranzova{background:radial-gradient(circle at 30% 26%,#FFFEDB 0%,#FEECB4 18%,#FDD38A 38%,#F2B060 60%,#EA9C4E 100%)}
.mata{background:radial-gradient(circle at 28% 22%,#BDFDE0 0%,#92F7D4 18%,#4FDCCD 42%,#1CC4CB 66%,#07A9C6 90%,#0A9FC2 100%)}
.tien{position:absolute;border-radius:50%;filter:blur(24px);background:rgba(55,100,205,.5);pointer-events:none}
/* levitácia; --px/--py (poloha myši -1 až 1, nastavuje skript) krát hĺbka --hl posunie gule a postavy za myšou */
@keyframes levituj{0%,100%{translate:calc(var(--px,0) * var(--hl,0) * 1px) calc(var(--py,0) * var(--hl,0) * 1px)}50%{translate:calc(var(--px,0) * var(--hl,0) * 1px) calc(var(--py,0) * var(--hl,0) * 1px + var(--a,-10px))}}
@keyframes tien-dych{0%,100%{scale:1;opacity:1}50%{scale:.88;opacity:.72}}
.lev{animation:levituj var(--t,7s) ease-in-out var(--d,0s) infinite}
.tien.lev{animation-name:tien-dych}

/* ===== SKLO s 3D hranou (presne ako úvod /ai) ===== */
.sklo{position:relative;border-radius:44px;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.04) 80%,rgba(255,255,255,.14) 100%),rgba(70,150,245,.22);
  -webkit-backdrop-filter:blur(30px) saturate(1.12);backdrop-filter:blur(30px) saturate(1.12);
  box-shadow:inset 0 0 0 .8px rgba(255,255,255,.78),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -.5px 0 rgba(255,255,255,.9),0 30px 60px -30px rgba(40,90,190,.35)}
.sklo::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 24px 0 20px -12px rgba(255,255,255,.62),inset 0 -12px 10px -6px rgba(205,238,255,.62),inset 0 9px 10px -7px rgba(255,255,255,.38),inset -9px 0 10px -7px rgba(255,255,255,.30)}
.sklo::after{content:"";position:absolute;inset:8px;border-radius:calc(44px - 6px);pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.14)}

/* ===== TLAČIDLÁ ===== */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;font:700 16px/1 'Manrope',sans-serif;text-decoration:none;white-space:nowrap}
.pill-biela{background:#fff;color:var(--text);box-shadow:0 10px 24px -12px rgba(30,70,160,.45)}
.pill-sklo{color:#fff;text-shadow:0 1px 6px rgba(20,50,140,.4);background:rgba(25,60,170,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pill-farebna{color:#fff;background:linear-gradient(115deg,#1592E6 0%,#5B63DC 55%,#9A3FD2 100%);text-shadow:0 1px 2px rgba(20,30,120,.35);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 12px 24px -12px rgba(70,60,200,.6)}

/* ===== HLAVIČKA (logo, menu webu, jazyk, telefón) ===== */
.hlava{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:26px;padding:22px clamp(16px,4vw,56px);transition:padding .3s}
/* lišta ostáva hore aj pri posúvaní (Erik 13. 10. 2026 „chýba menu, keď roluješ dole“), po odrolovaní dostane svetlé sklo */
.hlava::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.62));-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 14px 30px -22px rgba(40,70,160,.5),inset 0 -1px 0 rgba(255,255,255,.95)}
.hlava.dole{padding-top:10px;padding-bottom:10px}
.hlava.dole::before{opacity:1}
body.zamknute .hlava{z-index:61}
body.zamknute .hlava::before{opacity:0}
html{scroll-padding-top:90px}
.logo{position:relative;display:flex;align-items:center;text-decoration:none;flex:none}
.hlava .logo img{display:block;height:31px;width:auto}
.logo .logo-cas{position:absolute;left:25.2%;top:57%;width:25.5%;translate:-50% -50%;
  box-shadow:inset 0 0 0 1px rgba(160,225,255,.45),inset -3px -4px 7px rgba(0,40,140,.28),0 5px 9px -3px rgba(15,90,200,.55)}
.logo .logo-cas::after{content:"";position:absolute;left:50%;top:calc(100% + 3px);width:86%;height:5px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,60,160,.42),rgba(20,60,160,0));filter:blur(1.5px)}
.menu{display:flex;gap:24px;margin-left:auto;font:600 15px/1 'Manrope',sans-serif}
.menu a{text-decoration:none;color:#2B3654;white-space:nowrap}
.menu a:hover,.menu a[aria-current]{color:var(--azur)}
.jazyk{display:flex;gap:6px;align-items:baseline;font:800 13px/1 'Sora',sans-serif;letter-spacing:.06em;color:#7A86A3}
.jazyk b{color:var(--azur)}
.jazyk a{text-decoration:none}
.jazyk a:hover{color:var(--azur)}
.hlava .pill{height:44px;padding:0 20px;font-size:14.5px}
.tel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tel img{width:24px;height:24px;margin:-4px -2px -4px -6px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(120,60,200,.25))}   /* 3D slúchadlo (Erik 13. 10. 2026 „aj toto 3D“) */
/* hamburger: sklenené koliesko, menu cez celú obrazovku */
.burger{display:none;position:relative;z-index:62;width:48px;height:48px;margin-left:auto;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px #fff,0 10px 22px -12px rgba(30,70,160,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* 3D hamburger (Erik 13. 10. 2026 „aj hamburger 3D“): zavretý je 3D gombík, otvorený sklenené koliesko s krížikom */
.burger[aria-expanded=false]{background:url(/assets/web/ikony/menu-96.webp) center/contain no-repeat;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;filter:drop-shadow(0 6px 8px rgba(30,70,160,.25))}
.burger[aria-expanded=false] span{opacity:0}
.burger[aria-expanded=true]{background:url(/assets/web/ikony/zavriet-96.webp) center/contain no-repeat;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;filter:drop-shadow(0 6px 8px rgba(30,70,160,.25))}
.burger[aria-expanded=true] span{opacity:0}   /* 3D krížik pri otvorenom menu (Erik 13. 10. 2026 „aj toto 3D“) */
.burger span{position:absolute;left:14px;right:14px;height:2.5px;border-radius:3px;background:var(--text);transition:transform .3s,opacity .2s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:29px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:90px 24px 40px;overflow-y:auto;
  background:radial-gradient(60% 40% at 100% 0%,rgba(247,205,241,.9) 0%,rgba(247,205,241,0) 100%),radial-gradient(60% 40% at 0% 100%,rgba(191,241,226,.9) 0%,rgba(191,241,226,0) 100%),rgba(220,235,253,.86);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.mmenu.otvorene{opacity:1;visibility:visible}
.mmenu a{padding:9px 20px;font:800 clamp(24px,6.5vw,30px)/1.2 'Sora',sans-serif;color:var(--text);text-decoration:none}
.mmenu a:hover{color:var(--azur)}
.mmenu .pill{margin-top:18px;font-size:16px}
.mmenu .jazyk{margin-top:14px;font-size:16px}
.mmenu .jazyk a{padding:0;font:inherit;color:inherit}
body.zamknute{overflow:hidden}

/* ===== 1 ÚVOD (súradnice ako /ai, jednotka --u) ===== */
.uvod{position:relative;min-height:max(100svh,720px);
  background:
    radial-gradient(45% 35% at 56% 10%,#CCE9FA 0%,rgba(204,233,250,0) 100%),
    radial-gradient(40% 60% at 0% 100%,#E6DCFC 0%,rgba(230,220,252,0) 100%),
    radial-gradient(22% 45% at 0% 50%,#DDE7FE 0%,rgba(221,231,254,0) 100%),
    linear-gradient(180deg,#BCDDFD 0%,#BEDFFD 50%,#C4E2FD 100%);
  --u:calc(min(100vw,1760px) / 1697);--cx:50%;--cy:52%}
.uvod .g{position:absolute;left:calc(var(--cx) + (var(--x) - 845 - var(--w) / 2) * var(--u));top:calc(var(--cy) + (var(--y) - 472 - var(--h, var(--w)) / 2) * var(--u));
  width:calc(var(--w) * var(--u));height:calc(var(--h, var(--w)) * var(--u))}
.uvod .karta{position:absolute;left:var(--cx);top:var(--cy);translate:-50% -50%;width:calc(949 * var(--u));min-height:calc(598 * var(--u));
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:calc(54 * var(--u)) calc(56 * var(--u));color:#fff;z-index:5}
.kicker{font:700 13px/1 'Manrope',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.uvod .kicker{color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(30,60,150,.35)}
/* nadpis je o pár znakov dlhší ako na /ai, preto o niečo menší, aby ostal na dvoch riadkoch */
.uvod h1{font-weight:800;font-size:clamp(38px,calc(76 * var(--u)),84px);line-height:1.04;margin:22px 0 0;text-shadow:0 2px 24px rgba(40,70,170,.25)}
.uvod h1 span{display:block;text-wrap:balance}
.uvod .kicker{text-wrap:balance;line-height:1.5}
.uvod .podnadpis{font:600 clamp(17px,calc(25 * var(--u)),27px)/1.45 'Manrope',sans-serif;max-width:660px;margin:22px auto 0;text-shadow:0 1px 2px rgba(20,50,140,.35),0 2px 14px rgba(20,50,140,.45)}
.uvod .tlacidla{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.uvod .pod{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:22px;font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(30,60,150,.35)}
.uvod .pod b{font:800 15px/1 'Sora',sans-serif;margin-right:4px}
.aika{position:absolute;z-index:8;left:calc(var(--cx) + 405 * var(--u));top:calc(var(--cy) + 40 * var(--u));width:calc(175 * var(--u));height:auto;filter:drop-shadow(0 18px 18px rgba(40,80,170,.28))}
.bublina{position:absolute;z-index:9;left:min(calc(var(--cx) + 500 * var(--u)),calc(100% - 300px));top:calc(var(--cy) - 40 * var(--u));background:#fff;color:var(--text);font:600 15px/1.35 'Manrope',sans-serif;padding:11px 16px;border-radius:16px 16px 4px 16px;box-shadow:0 12px 26px -14px rgba(30,70,160,.5);white-space:nowrap}
/* weby klientov v úvode: skutočné snímky v sklenenom okne, levitujú medzi guľami */
.okno{border-radius:calc(18 * var(--u));padding:calc(7 * var(--u));background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
  box-shadow:inset 0 0 0 1px #fff,0 30px 50px -24px rgba(40,70,170,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.okno-bar{display:flex;align-items:center;gap:calc(5 * var(--u));height:calc(20 * var(--u));padding:0 calc(6 * var(--u))}
.okno-bar i{width:calc(7 * var(--u));aspect-ratio:1;border-radius:50%;background:#C9D6EC}
.okno-bar i:nth-child(1){background:#F59AB7}.okno-bar i:nth-child(2){background:#FBC97C}.okno-bar i:nth-child(3){background:#6EE0C9}
.okno img{display:block;width:100%;height:calc(100% - 20 * var(--u));object-fit:cover;object-position:top;border-radius:calc(11 * var(--u))}
.uvod .okno.g{rotate:var(--r,0deg);z-index:3}

/* ===== spoločné pestré pozadie za sekciami (ako /ai) ===== */
body::before{content:"";position:fixed;left:0;top:0;width:100%;height:100lvh;z-index:-1;pointer-events:none;background:radial-gradient(42% 55% at 100% 0%,#F7CDF1 0%,rgba(247,205,241,0) 100%),radial-gradient(40% 50% at 0% 12%,#D9CCFB 0%,rgba(217,204,251,0) 100%),radial-gradient(45% 55% at 100% 100%,#BFF1E2 0%,rgba(191,241,226,0) 100%),radial-gradient(40% 50% at 6% 100%,#FFE1C2 0%,rgba(255,225,194,0) 100%),radial-gradient(50% 50% at 50% 50%,#CFE7FD 0%,rgba(207,231,253,0) 100%),linear-gradient(180deg,#DCEBFD 0%,#D6E9FD 100%)}
.uvod{isolation:isolate;overflow:clip visible}
.uvod::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:inherit;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 220px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 220px),transparent 100%)}
.uvod{background-color:transparent;background-image:none}

/* ===== úvod pri posúvaní: rozletené gule a okná sa zložia (ako /ai) ===== */
.uvod-scena{position:relative;height:calc(max(100svh,720px) + 80svh)}
.uvod-scena>.uvod{position:sticky;top:0}
.uvod{--e:1}
.uvod .g.let{transform:translate(calc(var(--ex,0px) * (1 - var(--e))),calc(var(--ey,0px) * (1 - var(--e)))) scale(calc(1 + (var(--es,1) - 1) * (1 - var(--e))));will-change:transform}
.uvod .tien{opacity:calc(var(--e) * var(--e))}
.uvod .karta{transform:scale(calc(1.07 - .07 * var(--e)))}
.uvod .aika{transform:translate(calc(26vw * (1 - var(--e))),calc(-6vh * (1 - var(--e)))) rotate(calc(-24deg * (1 - var(--e)))) scale(calc(1.5 - .5 * var(--e)));will-change:transform}
.uvod .bublina{opacity:clamp(0,calc((var(--e) - .85) * 6.7),1);transform:translateY(calc(10px * (1 - var(--e))))}
.uvod .sl{--w:clamp(0,calc((var(--e) - var(--d,0)) / (1 - var(--d,0))),1);opacity:var(--w)}
.uvod h1 .sl{display:inline;opacity:1}   /* nadpis úvodu je vždy viditeľný, bez postupného zjavovania (Erik 13. 10. 2026) */
.uvod .kicker{opacity:var(--e);transform:translateY(calc(-48px * (1 - var(--e))))}
.uvod .tlacidla{opacity:clamp(0,calc((var(--e) - .45) / .55),1)}
.uvod .pod{--w:clamp(0,calc((var(--e) - .55) / .45),1);opacity:var(--w);transform:translateY(calc(40px * (1 - var(--w))))}
@media (max-width:820px){.uvod .karta{transform:scale(calc(1.025 - .025 * var(--e)))}}
@media (prefers-reduced-motion:reduce){
  .uvod-scena{height:auto}
  .uvod-scena>.uvod{position:relative}
  .uvod{--e:1!important}
}
/* na mobile bez rozletu: úvod je hneď zložený a bez dlhej dráhy posúvania (Erik 13. 10. 2026 „na mobile hero animáciu zruš“) */
@media (max-width:820px){
  .uvod-scena{height:auto}
  .uvod-scena>.uvod{position:relative}
  .uvod{--e:1!important}
}

/* ===== animácia sekcií pri posúvaní (ako /ai) ===== */
.anim{--e:1}
.anim .a-sl{--w:clamp(0,calc((var(--e) - var(--ad,0)) / (1 - var(--ad,0))),1);opacity:var(--w)}
.anim .a-nadpis .a-sl{display:inline}
.anim .a-zhora{--w:clamp(0,calc((var(--e) - var(--ad,0)) / .5),1);opacity:var(--w);transform:translateY(calc(-36px * (1 - var(--w))))}
.anim .a-zjav,.anim.a-zjav{--w:clamp(0,calc((var(--e) - var(--ad,0) - var(--kr,0)) / max(.08,min(.35,1 - var(--ad,0) - var(--kr,0)))),1);opacity:var(--w)}
.anim .a-gula{transform:translate(calc(var(--ex,0px) * (1 - var(--e))),calc(var(--ey,0px) * (1 - var(--e)))) scale(calc(1 + (var(--es,1) - 1) * (1 - var(--e))));will-change:transform}
/* karty prichádzajú s hĺbkou (naklonené dozadu), po príchode sa dajú nakloniť myšou (--rx/--ry nastavuje skript) */
.anim .a-karta,.anim.a-kus{--w:clamp(0,calc((var(--e) - .15 - var(--kr,0)) / .6),1);opacity:calc(.2 + .8 * var(--w));transform:perspective(1100px) translateY(calc(50px * (1 - var(--w)))) rotateX(calc(14deg * (1 - var(--w)) + var(--rx,0deg))) rotateY(var(--ry,0deg)) scale(calc(1.06 - .06 * var(--w)))}
.anim .a-pop{--w:clamp(0,calc((var(--e) - var(--ad,0) - var(--kr,0)) / .3),1);opacity:var(--w);transform:scale(calc(.5 + .5 * var(--w)))}
.anim .a-zlet{transform:translate(calc(26vw * (1 - var(--e))),calc(-6vh * (1 - var(--e)))) rotate(calc(-24deg * (1 - var(--e)))) scale(calc(1.3 - .3 * var(--e)));will-change:transform}
@media (prefers-reduced-motion:reduce){.anim{--e:1!important}}

/* ===== sekcie (spoločné) ===== */
.sekcia{position:relative;padding:clamp(80px,9vw,128px) clamp(16px,5vw,56px);overflow:clip visible}
/* mobil: menšie medzery medzi sekciami na celom webe (Erik 14. 10. 2026), zo 160 na 112 px. Stojí hneď za základom,
   aby sekcie s vlastnou medzerou (úvody podstránok, značky…) ostali, ako sú */
@media (max-width:620px){.sekcia{padding-top:56px;padding-bottom:56px}}
.sekcia .obsah{position:relative;max-width:1240px;margin:0 auto}
.hlavicka{max-width:780px}
.sekcia .kicker{color:#3A6FD8}
.sekcia h2{font-weight:800;font-size:clamp(34px,4.2vw,56px);line-height:1.05;margin:16px 0 0;width:fit-content;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em;text-wrap:balance}
.sekcia .uvodny{font-size:18px;line-height:1.6;color:var(--tlm);margin-top:18px}

/* ===== 2 REFERENCIE: skutočné weby klientov v sklenených oknách nad pastelovou scénou s guľami ===== */
.ref-mriezka{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;margin-top:52px}
.rk{position:relative;display:flex;flex-direction:column;background:rgba(255,255,255,.78);border-radius:26px;text-decoration:none;color:var(--text);
  box-shadow:inset 0 0 0 1px #fff,0 26px 50px -32px rgba(60,70,160,.45);transition:box-shadow .25s}
.rk-scena{position:relative;aspect-ratio:16/11;border-radius:26px 26px 0 0;overflow:hidden;isolation:isolate}
.rk-ruzova .rk-scena{background:radial-gradient(70% 70% at 50% 42%,#FFE6DF 0%,#FBC6BF 60%,#F2A8A6 100%)}
.rk-nebo .rk-scena{background:radial-gradient(70% 70% at 50% 42%,#DDF3FF 0%,#A9DAFB 60%,#7DC2F4 100%)}
.rk-fialova .rk-scena{background:radial-gradient(70% 70% at 50% 42%,#EDE0FF 0%,#CDB4F8 60%,#A88CEE 100%)}
.rk-broskyna .rk-scena{background:radial-gradient(70% 70% at 50% 42%,#FFF4D9 0%,#FFD9A6 60%,#F7B877 100%)}
.rk-mata .rk-scena{background:radial-gradient(70% 70% at 50% 42%,#E2FBF2 0%,#B7EFDD 60%,#86DCC6 100%)}
.rk-levandula .rk-scena{background:radial-gradient(70% 70% at 50% 42%,#F6E6FB 0%,#E7C4F3 60%,#D39EEA 100%)}
.rk-scena .gula{z-index:0}
.rk .okno{position:absolute;z-index:1;left:11%;right:11%;top:15%;--u:.8px;rotate:var(--r,-2deg);transition:rotate .35s,scale .35s}
.rk .okno img{aspect-ratio:16/10;height:auto}
.rk:hover .okno{rotate:0deg;scale:1.04}
.rk-telo{display:flex;flex-direction:column;flex:1;padding:22px 26px 26px}
.rk-stitok{font:700 12.5px/1 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7F38C8}
.rk-ruzova .rk-stitok{color:#C9466A}.rk-nebo .rk-stitok{color:#1874C9}.rk-broskyna .rk-stitok{color:#B8601F}.rk-mata .rk-stitok{color:#0D8A7C}.rk-levandula .rk-stitok{color:#A43BB5}
.rk h3{font:800 21px/1.25 'Sora',sans-serif;margin-top:10px}
.rk p{font-size:15px;line-height:1.6;color:var(--tlm);margin-top:10px}
.rk .odkaz{margin-top:auto;padding-top:16px;font:700 14.5px/1.3 'Manrope',sans-serif;color:#4F5BD5}
.rk .odkaz::after{content:" →"}
.rk:hover .odkaz{text-decoration:underline}
.ref-vsetky{margin-top:48px;text-align:center}

/* ===== 3 SLUŽBY: svetlé sklo ako Čo postavíme na /ai; farbu má matná guľa s ikonou, nadpis a odkaz ===== */
.sk-mriezka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 22px;margin-top:56px}
.sk{position:relative;display:flex;flex-direction:column;border-radius:30px;padding:30px 30px 28px;color:var(--text);text-decoration:none;
  background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.4));-webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1);
  box-shadow:inset 0 0 0 .8px rgba(255,255,255,.9),inset 0 1px 0 rgba(255,255,255,.8),inset 18px 0 16px -10px rgba(255,255,255,.5),inset 0 -10px 10px -6px rgba(220,240,255,.55),0 26px 50px -30px rgba(60,70,160,.45)}
.sk-modra{--k:#0A57C9;--k2:#2E7BEA;--s:radial-gradient(78% 78% at 32% 26%,#74E0FB 0%,#5ACFF9 30%,#36B4F3 56%,#1A98EC 78%,#0E86E3 100%)}
.sk-broskyna{--k:#B4531A;--k2:#E0862E;--s:radial-gradient(80% 80% at 32% 26%,#FFF1D2 0%,#FDD08A 28%,#F5AE5E 56%,#EC944A 80%,#E2803A 100%)}
.sk-mata{--k:#06757F;--k2:#0A8F9E;--s:radial-gradient(70% 70% at 34% 24%,#8BEFD3 0%,#68E3C6 28%,#45D7C2 54%,#22C8BF 78%,#13B9BC 100%)}
.sk-fialova{--k:#6A1FB8;--k2:#A83CC8;--s:radial-gradient(80% 80% at 30% 24%,#FFC8FE 0%,#E9A0F4 30%,#C76DE0 60%,#9D45CD 100%)}
.sk-nebo{--k:#1F63C9;--k2:#3D8FE6;--s:radial-gradient(80% 80% at 30% 24%,#8AF7FE 0%,#6EE8FB 18%,#45C4F0 40%,#1E9BE5 68%,#0B86DC 100%)}
.sk-ruzova{--k:#A8287F;--k2:#D24BAE;--s:radial-gradient(80% 80% at 30% 24%,#FFD2F2 0%,#F7AEE0 26%,#EE8CCB 50%,#DC62B4 76%,#BC4598 100%)}
/* matná guľa s bielou ikonou (ako „Features“ v DECK): levituje, pod ňou tieň dotyku a opar vo farbe karty */
.sk-gw{position:relative;width:78px;height:78px;margin:0 0 24px}
.sk-gula{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;isolation:isolate}
.sk-gula::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;background:var(--s);filter:blur(.6px);
  box-shadow:inset -6px -8px 14px rgba(20,30,110,.18),inset 4px 5px 10px rgba(255,255,255,.35)}
.sk-gula svg{width:44%;height:auto;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(20,40,120,.3))}
.sk-tien{position:absolute;left:50%;top:calc(100% + 4px);width:62%;height:10px;translate:-50% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--k) 45%,transparent),transparent);filter:blur(2.5px)}
.sk-tien.lev{animation-name:tien-dych}
.sk h3{width:fit-content;padding-bottom:.06em;font:800 22px/1.2 'Sora',sans-serif;letter-spacing:-.02em;text-wrap:balance;
  background:linear-gradient(115deg,var(--k) 0%,var(--k2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sk-text{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--tlm)}
/* investícia a termín: vnorené svetlejšie sklo, popis vo farbe karty */
.sk-fakty{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:auto 0 0;padding-top:22px}
.sk-fakty div{padding:12px 14px 13px;border-radius:16px;background:rgba(255,255,255,.58);box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 10px 22px -16px rgba(40,90,190,.4)}
.sk-fakty dt{font:800 11px/1.2 'Sora',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--k)}
.sk-fakty dd{margin:5px 0 0;font:700 14.5px/1.35 'Manrope',sans-serif;color:var(--text)}
.sk-odkaz{align-self:flex-start;margin-top:18px;font:700 15px/1.35 'Manrope',sans-serif;color:var(--k);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--k) 35%,transparent);transition:text-decoration-color .2s}
.sk:hover .sk-odkaz{text-decoration-color:var(--k)}
.sk:focus-visible{outline:3px solid var(--k);outline-offset:3px}
/* 3D ikonka z hmoty (sada ako na /ai): levituje, pod ňou tesný tieň dotyku a širší opar vo farbe karty */
.sk-ik{position:relative;width:92px;height:92px;margin:-8px 0 26px -6px;z-index:1}
.sk-3d{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;
  filter:drop-shadow(0 6px 6px rgba(20,60,150,.16)) drop-shadow(0 16px 18px rgba(30,90,200,.12))}
.sk-ik .sk-tien{top:calc(100% - 2px);width:58%;background:radial-gradient(closest-side,rgba(15,50,140,.42),rgba(15,50,140,0));filter:blur(2px)}
.sk-ik::after{content:"";position:absolute;left:50%;top:calc(100% - 9px);width:100%;height:26px;translate:-50% 0;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--k) 24%,transparent),transparent);filter:blur(6px)}
@media (max-width:620px){.sk-ik{width:80px;height:80px}}
/* gule v bočných okrajoch sekcie, celé mimo kariet */
.okraj-gula{position:absolute;z-index:0}
@media (max-width:1400px){.okraj-gula{display:none}}
@media (max-width:1100px){.sk-mriezka{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.sk-mriezka{grid-template-columns:1fr}.sk{padding:26px 22px 24px}.sk h3{font-size:21px}}

/* ===== 4 PREČO noGREY ako Bežný deň na /ai: vľavo dôvody s 3D fajkami, vpravo svetlé sklo na guliach s Aikou ===== */
.pr-obsah{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.pr-zoznam{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:18px;max-width:560px}
.pr-zoznam li{position:relative;padding-left:40px}
/* odrážka: fajka 3D z hmoty, rovnaká ako na /ai */
.pr-zoznam li::before{content:"";position:absolute;left:0;top:-1px;width:27px;height:27px;
  background:url(/assets/ai/deck/ikony/mini-rozhodnete-c-96.webp) center/contain no-repeat;filter:drop-shadow(0 3px 3px rgba(150,80,20,.22))}
.pr-zoznam b{display:block;font:800 18px/1.3 'Sora',sans-serif;letter-spacing:-.01em;color:var(--text)}
.pr-zoznam span{display:block;margin-top:4px;font-size:16px;line-height:1.55;color:var(--tlm)}
/* vpravo: gule a svetlé sklo s piatym dôvodom, Aika sedí na rohu skla */
.pr-v{position:relative;aspect-ratio:1/.92}
.pr-v .gula{aspect-ratio:1;height:auto}
.pr-karta{position:absolute;left:8%;right:8%;top:24%;padding:30px 32px;color:var(--text)}
.pr-karta .app-hlava{display:flex;align-items:center;gap:14px}
.pr-karta .app-hlava img{flex:none;width:52px;height:52px;object-fit:cover;object-position:50% 12%;border-radius:50%;background:#DDF3FF;box-shadow:inset 0 0 0 2px #fff}
.pr-karta .app-hlava b{display:block;font:800 17px/1.2 'Sora',sans-serif}
.pr-karta .app-hlava span{font-size:13.5px;color:var(--tlm)}
.pr-karta h3{margin-top:22px;font:800 22px/1.25 'Sora',sans-serif;letter-spacing:-.02em}
.pr-karta p{margin-top:10px;font-size:16px;line-height:1.6;color:#2B3654}
.pr-aika{position:absolute;z-index:3;right:6%;top:6%;width:15%;height:auto;filter:drop-shadow(0 12px 14px rgba(40,60,140,.25))}
@media (max-width:980px){
  .pr-obsah{grid-template-columns:1fr}
  .pr-v{aspect-ratio:auto;min-height:440px}
  .pr-karta{left:0;right:0;padding:24px 20px}
  .pr-aika{width:74px;right:10px;top:4%}
}

/* ===== 5 ZNAČKY: logá voľne v mriežke, bez pásu a bez rámikov, jemne levitujú (Erik: „v pásiku nie“, „voľne bez rámikov“) ===== */
.znacky{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.znacky .hlavicka{max-width:860px;margin:0 auto;text-align:center}
.znacky h2{margin:16px auto 0;font-size:clamp(22px,2.3vw,30px);line-height:1.3}
/* logá partnerov 2× väčšie (Erik 13. 10. 2026 „zväčši o 100 %“): menej v riadku, neúplný posledný riadok v strede */
.zn-mriezka{--st:5;--mz:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:24px var(--mz);margin-top:44px}
.zn-mriezka>.zn-dl{flex:0 0 calc((100% - (var(--st) - 1) * var(--mz)) / var(--st));min-width:0}
.zn-dl{position:relative;display:flex;align-items:center;justify-content:center;height:140px;padding:10px 8px;text-decoration:none;border-radius:14px}
.zn-dl img{max-width:100%;max-height:92px;width:auto;height:auto;object-fit:contain;display:block;transition:transform .22s}   /* logá farebné (Erik 13. 10. 2026) */
.zn-dl:hover img,.zn-dl:focus-visible img{transform:translateY(-3px) scale(1.04)}
.zn-dl:focus-visible{outline:3px solid #1A8FE3;outline-offset:3px}
.pl-name{font:700 15px/1.2 'Sora',sans-serif;color:var(--tlm);text-align:center}
@media (max-width:1100px){.zn-mriezka{--st:4}}
@media (max-width:760px){.zn-mriezka{--st:3;--mz:12px;row-gap:12px}.zn-dl{height:110px;padding:6px 4px}.zn-dl img{max-height:76px}}
@media (max-width:420px){.zn-mriezka{--st:2}}

/* ===== 6 AKO PRACUJEME: kroky v svetlom skle s čiarou cez gule, vedľa návrh, ktorý sa mení na hotový web ===== */
.po-mriezka{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:52px}
.po-kroky{position:relative;border-radius:30px;padding:16px 30px;
  background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.4));-webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1);
  box-shadow:inset 0 0 0 .8px rgba(255,255,255,.9),inset 0 1px 0 rgba(255,255,255,.8),inset 18px 0 16px -10px rgba(255,255,255,.5),0 26px 50px -30px rgba(60,70,160,.45)}
.po-ciara{position:absolute;left:58px;top:56px;bottom:56px;width:2px;margin-left:-1px;border-radius:2px;background:rgba(140,165,215,.28)}
/* čiara sa pri posúvaní vyplňuje dole (Erik 13. 10. 2026 „čiara nech sa scrollom hýbe dole“), postup --p nastavuje web.js */
.po-ciara::after{content:"";position:absolute;left:-.5px;right:-.5px;top:0;height:100%;border-radius:inherit;background:linear-gradient(180deg,#36B4F3 0%,#9A48D8 50%,#45D7C2 100%);
  transform:scaleY(var(--p,0));transform-origin:top;box-shadow:0 0 8px rgba(91,99,220,.45)}
.po-ciara::before{content:"";position:absolute;z-index:1;left:50%;top:calc(var(--p,0) * 100%);width:10px;height:10px;translate:-50% -50%;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(91,99,220,.35),0 0 12px rgba(91,99,220,.7);opacity:calc(var(--p,0) * 40)}
@media (prefers-reduced-motion:reduce){.po-ciara{--p:1!important}.po-ciara::before{display:none}}
.po-krok{position:relative;display:grid;grid-template-columns:56px 1fr;gap:0 20px;align-items:start;padding:20px 0}
.po-krok+.po-krok{border-top:1px solid rgba(160,190,235,.35)}
.po-krok .sk-gw{width:56px;height:56px;margin:0}
.po-cislo{font:800 22px/1 'Sora',sans-serif;color:#fff;text-shadow:0 1px 3px rgba(20,40,120,.35)}
.po-krok h3{font:800 19px/1.3 'Sora',sans-serif;letter-spacing:-.01em;color:var(--text)}
.po-krok p{margin-top:6px;font-size:15.5px;line-height:1.6;color:var(--tlm)}
/* návrh → dizajn → web: tri sklenené okná za sebou, levitujú */
.po-vizual{position:relative;aspect-ratio:1/.86}
.po-vizual .gula{aspect-ratio:1;height:auto}
.po-okno{position:absolute;width:62%;border-radius:18px;padding:7px;background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.55));
  box-shadow:inset 0 0 0 1px #fff,0 30px 50px -24px rgba(40,70,170,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);rotate:var(--r,0deg)}
.po-okno .okno-bar{height:18px;gap:5px;padding:0 6px}
.po-okno .okno-bar i{width:7px}
.po-plocha{position:relative;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:#F4F7FC}
.po-plocha img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.po-1{left:0;top:4%;--r:-6deg;z-index:1}
.po-2{left:19%;top:28%;--r:-1deg;z-index:2}
.po-3{left:38%;top:52%;--r:4deg;z-index:3}
/* drôtený návrh: sivé bloky */
.dr{position:absolute;border-radius:6px;background:#DCE3EE}
.dr-c{border:2px dashed #C5D0E2;background:transparent}
/* rozpracovaný dizajn: farebné bloky */
.dz{position:absolute;border-radius:6px}
.po-stitok{position:absolute;z-index:4;padding:7px 12px;border-radius:999px;background:#fff;font:700 12px/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text);box-shadow:0 10px 20px -12px rgba(30,70,160,.5)}
@media (max-width:980px){.po-mriezka{grid-template-columns:1fr}.po-vizual{max-width:560px;width:100%;margin:0 auto}}
@media (max-width:560px){.po-kroky{padding:8px 20px}.po-ciara{left:44px}.po-krok{grid-template-columns:48px 1fr;gap:0 16px}.po-krok .sk-gw{width:48px;height:48px}.po-cislo{font-size:19px}.po-stitok{font-size:10.5px;padding:6px 9px}}

/* ===== 7 ČASTÉ OTÁZKY: hlavička s Aikou vľavo, otázky v svetlom skle vpravo ===== */
.ot-mriezka{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
.ot-hlava{position:sticky;top:110px}
.ot-aika{display:block;width:150px;height:auto;margin-top:34px;filter:drop-shadow(0 18px 18px rgba(40,80,170,.25))}
.ot-zoznam{display:grid;gap:14px}
.ot-q{border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.4));-webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1);
  box-shadow:inset 0 0 0 .8px rgba(255,255,255,.9),inset 0 1px 0 rgba(255,255,255,.8),0 20px 40px -30px rgba(60,70,160,.45)}
.ot-q summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;cursor:pointer;list-style:none;font:800 18px/1.35 'Sora',sans-serif;letter-spacing:-.01em;color:var(--text)}
.ot-q summary::-webkit-details-marker{display:none}
.ot-q summary:focus-visible{outline:3px solid #1A8FE3;outline-offset:3px;border-radius:24px}
/* plus v malej matnej guli, pri otvorení sa otočí na krížik */
.ot-plus{position:relative;flex:none;width:40px;height:40px;margin:-3px -3px -3px 0;
  /* 3D tlačidlo z hmoty ako ostatné 3D ikonky (Erik 13. 10. 2026 „aj toto 3D“), pri otvorení sa otočí na krížik */
  background:url(/assets/web/ikony/plus-96.webp) center/contain no-repeat;filter:drop-shadow(0 5px 6px rgba(20,90,200,.28));transition:rotate .35s cubic-bezier(.3,1.5,.5,1),scale .2s}
.ot-q summary:hover .ot-plus{scale:1.08}
.ot-q[open] .ot-plus{rotate:45deg}
.ot-q p{padding:0 24px 22px;font-size:16px;line-height:1.65;color:var(--tlm)}
@media (max-width:980px){.ot-mriezka{grid-template-columns:1fr}.ot-hlava{position:static}.ot-aika{display:none}}
@media (max-width:560px){.ot-q summary{padding:18px 18px;font-size:16.5px}.ot-q p{padding:0 18px 18px;font-size:15.5px}}

/* ===== 8 VÝZVA: sýte sklo ako úvod, gule priletia, Aika zakýva ===== */
.vyzva{padding-top:clamp(60px,7vw,100px);padding-bottom:clamp(60px,7vw,100px)}
.vy-scena{position:relative;max-width:980px;margin:0 auto;isolation:isolate}
.vy-scena>.gula{z-index:0;aspect-ratio:1;height:auto}
.vy-sklo{position:relative;z-index:1;padding:clamp(40px,6vw,72px) clamp(24px,6vw,80px);text-align:center;color:#fff}
.vy-sklo::after{border-radius:38px}
.sekcia .vy-sklo h2{width:fit-content;max-width:100%;margin:0 auto;padding:0;font:800 clamp(32px,4.4vw,58px)/1.06 'Sora',sans-serif;letter-spacing:-.02em;text-wrap:balance}
/* farebný nadpis výzvy (Erik 13. 10. 2026 „farebný nadpis text“): prechod značky na písme */
.sekcia .vy-sklo h2{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
/* gule, ktoré priletia z diaľky, idú pod obsah predošlej sekcie, nie cez jej texty */
.sekcia{z-index:1}
.postup,.vyzva{z-index:0}
.vy-sklo p{max-width:620px;margin:20px auto 0;font:600 clamp(16px,1.5vw,19px)/1.55 'Manrope',sans-serif;text-shadow:0 1px 2px rgba(20,50,140,.35),0 2px 14px rgba(20,50,140,.45)}
.vy-sklo .pill{margin-top:30px}
.vy-aika{position:absolute;z-index:3;right:-70px;bottom:-30px;width:170px;height:auto;filter:drop-shadow(0 18px 18px rgba(40,80,170,.28))}
@media (max-width:1180px){.vy-aika{right:-20px;width:130px}}
@media (max-width:820px){.vy-sklo{border-radius:30px}.vy-sklo::after{border-radius:24px}.vy-aika{right:4px;bottom:-46px;width:84px}.vy-scena>.gula.mimo-mobil{display:none}}

/* ===== PÄTA ako na /ai: svetlé sklo, gule celé za sklom ===== */
.b1g,.b2g,.b3g,.b4g{position:relative;border-radius:50%;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;flex:none}
.b1g::before,.b2g::before,.b3g::before,.b4g::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;filter:blur(1px);background:var(--bg)}
.b1g{--bg:radial-gradient(78% 78% at 32% 26%,#74E0FB 0%,#5ACFF9 30%,#36B4F3 56%,#1A98EC 78%,#0E86E3 100%)}
.b2g{--bg:radial-gradient(70% 70% at 34% 24%,#8BEFD3 0%,#68E3C6 28%,#45D7C2 54%,#22C8BF 78%,#13B9BC 100%)}
.b3g{--bg:radial-gradient(85% 85% at 24% 30%,#FFFCDC 0%,#FEF3C2 22%,#FFE2A2 40%,#FFCE8A 58%,#FCBF73 76%,#F5A85E 100%)}
.b4g{--bg:radial-gradient(80% 80% at 30% 24%,#FFC8FE 0%,#E9A0F4 30%,#C76DE0 60%,#9D45CD 100%)}
.b1g svg,.b2g svg,.b3g svg,.b4g svg{width:46%;height:auto;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nz{display:inline!important;white-space:nowrap!important}   /* aj v zoznamoch, kde majú span-y display:block */
.pata{position:relative;isolation:isolate;overflow:clip visible;padding:40px 56px 56px}
.pata-scena{position:relative;isolation:isolate;max-width:1240px;margin:0 auto}
.pata-scena>.gula{z-index:0}
.pata .pata-sklo{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:46px 50px 30px;border-radius:36px}
.sklo.svetle{border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.38));-webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1)}
.sklo.svetle::after{inset:6px;border-radius:24px}
.pata .pata-sklo::after{border-radius:30px}
.pata-mriezka{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.2fr);gap:40px}
.pata-logo{position:relative;display:inline-flex}
.pata-logo img{display:block;height:31px;width:auto}
.pata-znacka p{margin-top:16px;max-width:300px;font-size:15px;line-height:1.65;color:var(--tlm)}
.pata-h{margin-bottom:16px;font:700 12.5px/1.2 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5B63DC}
.pata ul{list-style:none;display:grid;gap:11px;margin:0;padding:0}
.pata li{font-size:15px;line-height:1.45;color:var(--text)}
.pata a{color:var(--text);text-decoration:none;transition:color .2s}
.pata a:hover{color:#1A8FE3}
.pata a[aria-current]{color:#1A8FE3;font-weight:700}
.pata a:focus-visible{outline:3px solid #1A8FE3;outline-offset:3px;border-radius:4px}
.pata-kontakt li{display:flex;align-items:center;gap:12px}
.pata-firma{font-weight:700}
.pata-ik{width:30px;height:30px}
.pata-ik::before{filter:none!important;box-shadow:0 5px 10px -5px rgba(40,70,160,.45)}
.pata-ik svg{width:52%!important;stroke-width:2.2!important}
/* 3D ikonky kontaktov v päte, pri prejdení myšou poskočia ako ikonky v Službách */
.pata-3d{flex:none;width:28px;height:28px;margin:-2px 0;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(40,70,160,.2));transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pata-kontakt li:hover .pata-3d,.krajina li:hover .pata-3d{transform:translateY(-3px) rotate(-6deg) scale(1.08)}
.krajina .pata-3d{width:38px;height:38px;margin:-4px 0}   /* karty na Kontakte ostávajú väčšie, menšie sú len v päte (Erik „menšie ikonky“ v päte) */
@media (prefers-reduced-motion:reduce){.pata-3d{transition:none}}
.pata-spodok{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-top:38px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.95);box-shadow:0 -1px 0 rgba(150,170,210,.25);font-size:13.5px;color:var(--tlm)}
.pata-spodok a{color:var(--tlm);text-decoration:underline;text-decoration-color:rgba(70,81,112,.35);text-underline-offset:3px}
.pata-ai{margin-top:12px;font-size:13px;color:var(--tlm)}
@media (max-width:980px){
  .pata{padding:32px 16px 40px}
  .pata .pata-sklo{padding:34px 26px 24px;border-radius:30px}
  .pata .pata-sklo::after{border-radius:24px}
  .pata-mriezka{grid-template-columns:1fr 1fr;gap:34px 24px}
  .pata-znacka,.pata-kontakt{grid-column:1 / -1}
  .pata-scena>.gula{display:none}
}
@media (max-width:560px){
  .pata .pata-sklo{padding:30px 20px 22px}
  .pata-spodok{flex-direction:column}
}

/* ===== PODSTRÁNKY: úvod podstránky, zoznamy s 3D fajkami, textové bloky, recenzie ===== */
/* úvod podstránky: obloha ako úvodná, vľavo sýte sklo s nadpisom, vpravo obrázok v sklenenom okne medzi guľami */
.pod-uvod{position:relative;isolation:isolate;overflow:clip visible;padding:150px clamp(16px,5vw,56px) clamp(70px,8vw,120px)}
.pod-uvod::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 35% at 56% 10%,#CCE9FA 0%,rgba(204,233,250,0) 100%),radial-gradient(40% 60% at 0% 100%,#E6DCFC 0%,rgba(230,220,252,0) 100%),linear-gradient(180deg,#BCDDFD 0%,#BEDFFD 50%,#C4E2FD 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 200px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 200px),transparent 100%)}
.pod-mriezka{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.pod-sklo{position:relative;z-index:2;padding:clamp(34px,4.4vw,60px);color:#fff}
.pod-sklo::after{border-radius:38px}
.pod-sklo .drobky{font:600 13.5px/1.4 'Manrope',sans-serif;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(30,60,150,.35)}
.pod-sklo .drobky a{color:#fff;text-decoration:none}
.pod-sklo .drobky a:hover{text-decoration:underline}
.pod-sklo h1{margin-top:18px;font:800 clamp(32px,3.3vw,48px)/1.08 'Sora',sans-serif;letter-spacing:-.02em;text-wrap:balance;text-shadow:0 2px 24px rgba(40,70,170,.25)}
.pod-sklo .podnadpis{margin-top:20px;font:600 clamp(16px,1.45vw,19px)/1.55 'Manrope',sans-serif;text-shadow:0 1px 2px rgba(20,50,140,.35),0 2px 14px rgba(20,50,140,.45)}
.pod-sklo .tlacidla{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pod-gule{position:absolute;inset:-60px -40px;z-index:0;pointer-events:none}
.pod-gule .gula{aspect-ratio:1;height:auto}
.pod-vizual{position:relative;z-index:1}
.pod-vizual .po-okno{position:relative;width:100%;rotate:var(--r,3deg)}
.pod-vizual .po-plocha{aspect-ratio:auto}
.pod-vizual .po-plocha img{height:auto}
@media (max-width:980px){.pod-uvod{padding-top:120px}.pod-mriezka{grid-template-columns:1fr}.pod-vizual{max-width:560px;width:100%;margin:0 auto}}
@media (max-width:820px){.pod-sklo{border-radius:30px}.pod-sklo::after{border-radius:24px}.pod-gule .mimo-mobil,.pod-vizual.mimo-mobil{display:none}}
/* zoznam s 3D fajkami (ako Bežný deň na /ai) */
.fajky{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:13px}
.fajky li{position:relative;padding-left:38px;font-size:16.5px;line-height:1.5;color:#2B3654}
.fajky li::before{content:"";position:absolute;left:0;top:-1px;width:26px;height:26px;background:url(/assets/ai/deck/ikony/mini-rozhodnete-c-96.webp) center/contain no-repeat;filter:drop-shadow(0 3px 3px rgba(150,80,20,.22))}
.fajky strong{color:var(--text)}
/* textová sekcia: dva stĺpce, vľavo text, vpravo svetlé sklo alebo obrázok */
.dva{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:44px}
.dva-hore{align-items:start}
.text p{font-size:17px;line-height:1.7;color:#2B3654}
.text p+p{margin-top:16px}
.text a{color:#4F5BD5;font-weight:700;text-decoration:underline;text-decoration-color:rgba(79,91,213,.35);text-underline-offset:3px}
.text a:hover{text-decoration-color:#4F5BD5}
.svetle-sklo{position:relative;border-radius:30px;padding:30px 32px;
  background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.4));-webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1);
  box-shadow:inset 0 0 0 .8px rgba(255,255,255,.9),inset 0 1px 0 rgba(255,255,255,.8),inset 18px 0 16px -10px rgba(255,255,255,.5),0 26px 50px -30px rgba(60,70,160,.45)}
.svetle-sklo .fajky{margin-top:0}
.vizual-gule{position:relative}
.vizual-gule>.gula{aspect-ratio:1;height:auto;z-index:0}
.vizual-gule>.po-okno{position:relative;width:100%;z-index:1}
@media (max-width:980px){.dva{grid-template-columns:1fr}}
/* karty výhod bez odkazu (rovnaké ako Služby) */
div.sk{cursor:default}
/* postup na podstránke: kroky v strede */
.po-stred{max-width:860px;margin:44px auto 0}
.postup-pod .hlavicka{max-width:860px;margin:0 auto}
.po-veta{max-width:860px;margin:28px auto 0}
.po-veta,.text .po-veta{font-size:16.5px;line-height:1.65;color:#2B3654}
/* recenzie */
.rec-hlava{max-width:860px;margin:0 auto;text-align:center}
.rec-hlava h2{margin-left:auto;margin-right:auto}
.rec-hodnotenie{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:18px}
.rec-hodnotenie a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px #fff;font:700 14.5px/1 'Manrope',sans-serif;color:var(--text);text-decoration:none}
.rec-hodnotenie a:hover{color:#1A8FE3}
.hviezdy{color:#F5B301;letter-spacing:2px}
.rec-mriezka{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:980px;margin:40px auto 0}
.rec-karta blockquote{margin:14px 0 0;font:600 17px/1.6 'Manrope',sans-serif;color:var(--text)}
.rec-karta .rec-meno{margin-top:16px;font:800 15.5px/1.3 'Sora',sans-serif}
.rec-karta .rec-zdroj{font-size:13.5px;color:var(--tlm)}
@media (max-width:760px){.rec-mriezka{grid-template-columns:1fr}}
.ot-q p a{color:#4F5BD5;font-weight:700}
/* galéria log: logá sú obrázky s vlastným pozadím, preto biele dlaždice s jemným tieňom */
.loga-mriezka{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:44px}
.loga-mriezka figure{margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:14px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 18px 34px -24px rgba(60,70,160,.5)}
.loga-mriezka img{max-width:100%;max-height:100%;object-fit:contain;display:block}
@media (max-width:1100px){.loga-mriezka{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){.loga-mriezka{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.loga-mriezka figure{border-radius:16px;padding:10px}}
/* úvod podstránky: koláž log v bielych dlaždiciach */
.pod-loga{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:440px;margin:0 auto}
.pod-loga figure{margin:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:18px;border-radius:26px;background:#fff;box-shadow:0 26px 44px -26px rgba(40,70,170,.5);rotate:var(--r,0deg)}
.pod-loga img{max-width:100%;max-height:100%;object-fit:contain}
/* malé logo v bielej dlaždici pri okne webu (webdizajn: od loga po web) */
.pod-dlazdica{position:absolute;z-index:3;left:-6%;bottom:-12%;width:30%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:14px;border-radius:22px;background:#fff;box-shadow:0 22px 40px -22px rgba(40,70,170,.55);rotate:-6deg}
.pod-dlazdica img{max-width:100%;max-height:100%;object-fit:contain}
/* ukážka grafu výkonnosti v okne (marketing, PPC, B2B) */
.graf{position:absolute;left:6%;right:6%;bottom:10%;height:52%;display:flex;align-items:flex-end;gap:5%}
.graf i{flex:1;height:var(--v);border-radius:10px 10px 6px 6px;background:linear-gradient(180deg,var(--g1,#74E0FB),var(--g2,#1A98EC));
  /* matné stĺpce s jemným svetlom (lesklé valce Erik 13. 10. 2026 „škaredé“) */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -10px 14px -10px rgba(0,0,0,.16),0 10px 16px -10px color-mix(in srgb,var(--g2,#1A98EC) 70%,transparent)}
.karta-sk a.sk{cursor:pointer}

/* ===== MODEL SPOLUPRÁCE: tri piliere, stredný v sýtom skle ===== */
.pod-ikony{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:10px;max-width:520px;margin:0 auto}
.pod-ikony img{width:100%;height:auto;filter:drop-shadow(0 18px 20px rgba(30,70,170,.25))}
.pod-ikony img:nth-child(2){scale:1.25;z-index:2}
.cenovky{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:56px;align-items:stretch}
.cenovka{display:flex;flex-direction:column;padding:34px 32px 30px}
.cenovka .fajky{margin:20px 0 26px;gap:11px}
.cenovka .fajky li{font-size:15.5px}
.cen-tier{margin-top:4px;font:700 12px/1.2 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--k,#5B63DC)}
.cenovka h3{margin-top:8px}
.cen-tl{margin-top:auto;align-self:flex-start}
.cen-obal{position:relative;isolation:isolate;z-index:2;scale:1.03;display:flex}
/* gule za sklom orezané tvarom skla (nikdy netrčia spod okraja); na mobile iné polohy (--mx/--my/--mw) */
.pr-gule{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:44px}
.pr-gule .gula{left:var(--gx);top:var(--gy);width:var(--gw);aspect-ratio:1;height:auto}
@media (max-width:820px){.pr-gule{border-radius:30px}.pr-gule .gula{left:var(--mx);top:var(--my);width:var(--mw)}}
.cen-obal .pr-gule{border-radius:44px}
.cenovka.hlavna{position:relative;z-index:1;flex:1;color:#fff;padding:40px 34px 34px}
.cenovka.hlavna::after{border-radius:38px}
.cenovka.hlavna h3{font:800 24px/1.2 'Sora',sans-serif;letter-spacing:-.02em;text-shadow:0 1px 2px rgba(20,50,140,.35),0 2px 14px rgba(20,50,140,.45)}
.cenovka.hlavna .sk-text,.cenovka.hlavna .fajky li{color:#fff;text-shadow:0 1px 2px rgba(20,50,140,.35),0 2px 14px rgba(20,50,140,.45)}
.cenovka.hlavna .cen-tier{color:rgba(255,255,255,.9)}
.cenovka.hlavna .sk-ik{--k:#fff}
.cen-odznak{position:absolute;top:-16px;left:50%;translate:-50% 0;z-index:5;padding:9px 16px;border-radius:999px;white-space:nowrap;font:800 12.5px/1 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:linear-gradient(115deg,#1592E6 0%,#5B63DC 55%,#9A3FD2 100%);box-shadow:0 12px 24px -12px rgba(70,60,200,.7)}
.cen-pozn{max-width:820px;margin:44px auto 0;text-align:center}
@media (max-width:1100px){.cenovky{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}.cen-obal{scale:1}}

/* ===== ESHOPY (Shoptet): ceny, rozpis, kto platí, partner ===== */
.pod-cisla{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.45);gap:18px 22px}
.pod-cisla b{font-size:clamp(22px,2vw,28px)}
.pod-cisla span{font-size:12.5px}
.fajky-d li strong{display:block;color:var(--text)}
.fajky-d li span{display:block;margin-top:2px;font-size:15px;color:var(--tlm)}
.kto-plati{margin-top:auto;padding-top:18px;font:700 12px/1.3 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--k,#5B63DC)}
.cen-suma{margin-top:10px;font:800 clamp(28px,2.6vw,36px)/1.1 'Sora',sans-serif;letter-spacing:-.02em;color:var(--text)}
.cen-suma small{font:700 13px/1 'Manrope',sans-serif;color:var(--tlm);letter-spacing:0}
.cenovka.hlavna .cen-suma,.cenovka.hlavna .cen-suma small{color:#fff;text-shadow:0 2px 18px rgba(40,70,170,.3)}
.riadky-karta{padding:32px 34px}
.riadky{display:grid;margin:18px 0 0}
.riadky div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(160,190,235,.4)}
.riadky dt{font:600 15.5px/1.4 'Manrope',sans-serif;color:#2B3654}
.riadky dd{margin:0;font:800 15.5px/1.4 'Sora',sans-serif;color:var(--text);white-space:nowrap}
.shoptet-pas{display:grid;grid-template-columns:220px 1fr auto;gap:22px 30px;align-items:center;padding:26px 32px;text-decoration:none;color:var(--text)}
.shoptet-pas img{width:100%;height:auto}
.sp-text{font-size:15px;line-height:1.55;color:var(--tlm)}
.sp-text b{display:block;font:800 17px/1.3 'Sora',sans-serif;color:var(--text);margin-bottom:4px}
@media (max-width:820px){.shoptet-pas{grid-template-columns:1fr}.shoptet-pas img{max-width:220px}}

/* Trenčín: gule ako mapa kraja so štítkom */
.kraj-gule{aspect-ratio:1/.78;min-height:280px}
.kraj-stitok{position:absolute;z-index:2;padding:9px 14px;border-radius:999px;background:#fff;font:800 13px/1 'Sora',sans-serif;color:var(--text);box-shadow:0 12px 24px -12px rgba(30,70,160,.55)}
.kraj-stitok::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;background:#1A8FE3;box-shadow:0 0 0 4px rgba(26,143,227,.2)}

/* ===== OCHRANA ÚDAJOV: text na čítanie v svetlom skle ===== */
.zasady{max-width:860px;margin:0 auto;padding:clamp(28px,4vw,52px)}
.zasady-blok+.zasady-blok{margin-top:34px;padding-top:30px;border-top:1px solid rgba(160,190,235,.4)}
.zasady h2{font:800 clamp(20px,2vw,24px)/1.25 'Sora',sans-serif;letter-spacing:-.01em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:fit-content}
.zasady p,.zasady li{font-size:16.5px;line-height:1.7;color:#2B3654}
.zasady p{margin-top:12px}
.zasady ul,.zasady ol{margin:12px 0 0;padding-left:22px}
.zasady strong{color:var(--text)}
.zasady a{color:#4F5BD5;font-weight:700;text-decoration:underline;text-decoration-color:rgba(79,91,213,.35);text-underline-offset:3px}
/* 404 */
.e404{min-height:max(100svh,700px);display:flex;align-items:center}
.e404-scena{position:relative;width:100%;max-width:880px;margin:0 auto}
.e404-scena>.gula{aspect-ratio:1;height:auto}
.e404-sklo{position:relative;z-index:2;text-align:center}
.e404-sklo .tlacidla{justify-content:center}
.e404-sklo h1{margin-top:8px}
.e404-cislo{font:800 clamp(90px,16vw,170px)/1 'Sora',sans-serif;letter-spacing:-.04em;color:#fff;text-shadow:0 6px 40px rgba(40,70,170,.35)}
.e404-aika{position:absolute;z-index:3;right:-40px;bottom:-40px;width:150px;height:auto;filter:drop-shadow(0 18px 18px rgba(40,80,170,.28));--hl:6}
@media (max-width:820px){.e404-aika{width:80px;left:8px;right:auto;bottom:-110px}}

/* ===== BLOG: karty ako Referencie (obálka v sklenenom okne), článok v svetlom skle ===== */
.bk .okno{top:19%}
.bk .okno img{aspect-ratio:40/21;object-position:center}
.po-plocha.obalka{aspect-ratio:40/21}
.po-plocha.obalka img{height:100%;object-position:center}
.clanok-meta{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:22px;font:700 13.5px/1.3 'Manrope',sans-serif;color:#fff;text-shadow:0 1px 6px rgba(30,60,150,.35)}
.clanok-meta span+span::before{content:"·";margin:0 10px;opacity:.75}
.clanok{max-width:820px}
.clanok>:first-child{margin-top:0}
.clanok h2{margin-top:42px}
.clanok h3{font:800 18.5px/1.3 'Sora',sans-serif;color:var(--text);margin-top:26px}
.clanok h3+p{margin-top:8px}
.clanok li+li{margin-top:8px}
.clanok code{font:600 .88em/1 ui-monospace,Consolas,monospace;padding:2px 6px;border-radius:6px;background:rgba(79,91,213,.09);color:#3B3FA8}
.clanok-pozn{margin-top:32px;padding:22px 26px;border-radius:22px;background:linear-gradient(150deg,rgba(225,240,255,.9),rgba(240,228,255,.9));box-shadow:inset 0 0 0 1px #fff,0 18px 34px -26px rgba(60,70,160,.45)}
.clanok-pozn p{margin-top:0}
.clanok-pozn+h2{margin-top:38px}
/* označenie fotiek z AI (AI Act čl. 50): pod obálkou článku a pod mriežkou článkov */
.obalka-ai{margin-top:18px;text-align:right;font:600 12.5px/1.4 'Manrope',sans-serif;color:var(--tlm)}
.obalky-ai{margin-top:30px;text-align:center;font-size:13px;line-height:1.5;color:var(--tlm)}
@media (max-width:980px){.obalka-ai{text-align:center}}

/* ===== PRÍBEHY PROJEKTOV ===== */
.fakty-sekcia{padding-top:0;padding-bottom:clamp(30px,4vw,56px)}
.fakty{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 30px;padding:28px 32px}
.fakty b{display:block;font:800 17px/1.35 'Sora',sans-serif;color:var(--text)}
.fakty span{display:block;margin-top:6px;font:700 12px/1.2 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5B63DC}
@media (max-width:900px){.fakty{grid-template-columns:1fr 1fr}}
.pr-h3{margin-top:14px;font:800 clamp(22px,2.2vw,30px)/1.15 'Sora',sans-serif;letter-spacing:-.02em;text-wrap:balance}
.svetle-sklo .fajky{margin-top:20px}
.pf-sklo{max-width:900px;margin:0 auto;padding:clamp(30px,4vw,52px)}
.pf-sklo h2{margin-top:14px}
.pf-sklo .text strong{color:var(--text)}
.text strong{color:var(--text)}
/* referencie: filter odvetví ako sklenené pilulky, dve okná v úvode, čísla v jednom riadku */
.filtre{display:flex;flex-wrap:wrap;gap:10px}
.filtre button{height:44px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;font:700 14.5px/1 'Manrope',sans-serif;color:var(--text);
  background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px #fff,0 10px 20px -14px rgba(30,70,160,.45);transition:background .2s,color .2s,translate .2s}
.filtre button:hover{translate:0 -2px}
.filtre button.on{color:#fff;text-shadow:0 1px 2px rgba(20,30,120,.35);background:linear-gradient(115deg,#1592E6 0%,#5B63DC 55%,#9A3FD2 100%)}
.filtre button:focus-visible{outline:3px solid #1A8FE3;outline-offset:3px}
.pod-okna{position:relative;max-width:560px;margin:0 auto;padding:30px 0 60px}
.pod-okna .po-okno{position:relative;width:78%}
.pod-okna .po-okno:nth-child(2){margin:-28% 0 0 auto;z-index:2}
.cisla-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:820px){.cisla-4{grid-template-columns:1fr 1fr}}
.ref-pozn{max-width:720px;margin:40px auto 0;text-align:center}
.rk a.odkaz{text-decoration:none}.rk a.odkaz:hover{text-decoration:underline}
.ripple{display:none}
.sk-mriezka.sk-dve{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.sk-mriezka.sk-dve{grid-template-columns:1fr}}
.mini-vyzva{max-width:900px;margin:0 auto;text-align:center}
.mini-vyzva h2{margin:0 auto;font:800 clamp(28px,3.4vw,44px)/1.1 'Sora',sans-serif;letter-spacing:-.02em;color:#fff;background:none;-webkit-text-fill-color:#fff;width:auto;text-wrap:balance;text-shadow:0 2px 24px rgba(40,70,170,.25)}
.mini-vyzva .tlacidla{justify-content:center}
.odkaz-text{color:#4F5BD5;font-weight:700;text-decoration:underline;text-decoration-color:rgba(79,91,213,.35);text-underline-offset:3px}

/* ===== O NÁS: štatistiky, tím vo fotokartách ako Pre koho na /ai ===== */
.cisla{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.cisla b{display:block;font:800 clamp(34px,3.6vw,48px)/1 'Sora',sans-serif;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:fit-content}
.cisla span{display:block;margin-top:8px;font:700 14px/1.3 'Manrope',sans-serif;color:var(--tlm)}
.pod-sklo .cisla b{background:none;color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 2px 18px rgba(40,70,170,.3)}
.pod-sklo .cisla span{color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(30,60,150,.35)}
.tim{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:52px}
.tk{position:relative;background:rgba(255,255,255,.78);border-radius:26px;overflow:hidden;box-shadow:inset 0 0 0 1px #fff,0 26px 50px -32px rgba(60,70,160,.45);text-align:center}
.tk-foto{aspect-ratio:3/4;overflow:hidden}
.tk-foto img{display:block;width:100%;height:100%;object-fit:cover}
.tk-ruzova .tk-foto{background:radial-gradient(70% 70% at 50% 42%,#FFE6DF 0%,#FBC6BF 60%,#F2A8A6 100%)}
.tk-nebo .tk-foto{background:radial-gradient(70% 70% at 50% 42%,#DDF3FF 0%,#A9DAFB 60%,#7DC2F4 100%)}
.tk-fialova .tk-foto{background:radial-gradient(70% 70% at 50% 42%,#EDE0FF 0%,#CDB4F8 60%,#A88CEE 100%)}
.tk-broskyna .tk-foto{background:radial-gradient(70% 70% at 50% 42%,#FFF4D9 0%,#FFD9A6 60%,#F7B877 100%)}
.tk-mata .tk-foto{background:radial-gradient(70% 70% at 50% 42%,#E2FBF2 0%,#B7EFDD 60%,#86DCC6 100%)}
.tk-telo{padding:18px 16px 22px}
.tk h3{font:800 19px/1.2 'Sora',sans-serif}
.tk-rola{display:block;margin-top:6px;font:700 12px/1.2 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5B63DC}
.tk-motto{margin-top:12px;font:600 14.5px/1.5 'Manrope',sans-serif;color:var(--tlm)}
.tk-motto::before{content:"„"}.tk-motto::after{content:"“"}
@media (max-width:1100px){.tim{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.tim{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.tk-telo{padding:14px 12px 18px}.tk h3{font-size:17px}}
/* tím ako 3D postavy: pastelová plocha, postava stojí na spodku a vytŕča nad kartu (ako Pre koho na /ai) */
.tim{margin-top:0}
.tim .tk{overflow:visible;margin-top:110px}
.tim .tk-foto{position:relative;aspect-ratio:auto;height:230px;overflow:visible;border-radius:26px 26px 0 0}
.tim .tk-foto img{position:absolute;left:50%;bottom:0;translate:-50% 0;width:auto;height:330px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(40,50,120,.22));transition:translate .35s,scale .35s}
.tim .tk:hover .tk-foto img{translate:-50% -6px;scale:1.03}
@media (max-width:620px){.tim .tk{margin-top:90px}.tim .tk-foto{height:190px}.tim .tk-foto img{height:270px}}
/* úvod O nás: traja z tímu stoja vedľa seba na podlahe s tieňmi */
.pod-postavy{position:relative;height:clamp(340px,34vw,500px);max-width:600px;margin:0 auto}
.pod-postavy img{position:absolute;bottom:3%;height:78%;width:auto;filter:drop-shadow(0 16px 18px rgba(40,70,160,.22))}
.pod-postavy .pp-1{left:0;height:74%}
.pod-postavy .pp-2{left:0;right:0;margin:0 auto;height:92%;z-index:2}
.pod-postavy .pp-3{right:0;height:74%}
.pod-postavy .tien{position:absolute;filter:blur(14px);background:rgba(55,100,205,.35)}
/* úvod O nás: tri fotokarty tímu vejárom */
.pod-tim{position:relative;display:flex;justify-content:center;align-items:center;max-width:540px;margin:0 auto;padding:20px 0}
.pod-tim .tk{width:36%;margin:0 -3%;rotate:var(--r,0deg)}
.pod-tim .tk:nth-child(2){z-index:2;width:40%}
/* prečo noGrey: šedá guľa medzi farebnými */
.me-gule{aspect-ratio:1/.8;min-height:280px}
.siva{background:radial-gradient(circle at 30% 24%,#F4F6FA 0%,#D5DAE3 40%,#AEB5C2 75%,#959CAA 100%)}

/* ===== KONTAKT: formulár v svetlom skle s Aikou, kontakty a mapy ===== */
.ko-mriezka{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:30px}
.ko-scena{position:relative;isolation:isolate;padding-top:120px}
.ko-scena>.gula{z-index:0;aspect-ratio:1;height:auto}
.ko-form{position:relative;z-index:1;padding:42px 44px 36px}
.ko-form h2{margin:0;font:800 clamp(26px,2.6vw,34px)/1.15 'Sora',sans-serif;letter-spacing:-.02em;width:fit-content;max-width:100%;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}   /* prechod ako nadpisy ostatných sekcií (kontrola jednotnosti 13. 10. 2026) */
.ko-aika{position:absolute;right:40px;top:-94px;width:136px;height:auto;z-index:3;filter:drop-shadow(0 14px 16px rgba(40,60,140,.25))}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.pole{display:grid;gap:7px;align-content:start}
.pole.cela,.formular .tl-form,.formular .pozn,.formular .cf-turnstile,.formular .form-note{grid-column:1 / -1}
.pole label,.pole>span{font:700 14px/1.2 'Manrope',sans-serif;color:var(--text)}
.pole input,.pole textarea,.pole select{width:100%;border:0;border-radius:16px;padding:14px 16px;font:600 15.5px/1.4 'Manrope',sans-serif;color:var(--text);
  background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(91,99,220,.16),inset 0 2px 6px rgba(30,60,150,.08);transition:box-shadow .2s,background .2s}
.pole select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B63DC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.pole textarea{resize:vertical;min-height:130px}
.pole input:focus,.pole textarea:focus,.pole select:focus{outline:none;background-color:#fff;box-shadow:inset 0 0 0 2px #1A8FE3,0 0 0 4px rgba(26,143,227,.18)}
.pole textarea::placeholder,.pole input::placeholder{color:#6B7591}
.tl-form{height:58px;margin-top:4px;border:0;border-radius:999px;cursor:pointer;font:800 17px/1 'Sora',sans-serif;color:#fff;text-shadow:0 1px 2px rgba(20,30,110,.3);
  background:linear-gradient(115deg,#1592E6 0%,#5B63DC 50%,#9A3FD2 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 16px 30px -14px rgba(80,70,200,.7);transition:translate .2s,box-shadow .2s}
.tl-form:hover{translate:0 -2px}
.tl-form:disabled{opacity:.7;cursor:wait}
.tl-form:focus-visible{outline:3px solid #1A8FE3;outline-offset:3px}
.pozn{font-size:13px;line-height:1.5;color:var(--tlm);text-align:center}
.pozn a{color:#5B63DC}
.form-note{display:none;padding:14px 18px;border-radius:16px;background:#CFF6EA;color:#0B5C55;font:700 14.5px/1.45 'Manrope',sans-serif}
.form-note.show{display:block}
.ko-krajiny{display:grid;gap:18px}
.krajina{padding:26px 28px}
.krajina-nazov{display:block;font:700 12.5px/1.2 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5B63DC}
.krajina-firma{display:block;margin-top:10px;font:800 19px/1.2 'Sora',sans-serif}
.krajina ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.krajina li{display:flex;align-items:center;gap:12px;font:600 15.5px/1.4 'Manrope',sans-serif;color:var(--text)}
.krajina li a{color:var(--text);text-decoration:none}
.krajina li a:hover{color:#1A8FE3}
.krajina .krajina-tel{font:800 18px/1.2 'Sora',sans-serif}
.krajina-ico{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px;color:var(--tlm)}
.mapy{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.mapa{position:relative;border-radius:26px;overflow:hidden;padding:8px;background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.5));box-shadow:inset 0 0 0 1px #fff,0 26px 50px -32px rgba(60,70,160,.45)}
.mapa iframe{display:block;width:100%;height:380px;border:0;border-radius:19px}
.mapa-popis{position:absolute;top:20px;left:20px;z-index:2;padding:7px 13px;border-radius:999px;background:#fff;font:700 12px/1 'Manrope',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text);box-shadow:0 8px 18px -10px rgba(30,70,160,.5)}
.ko-osobne{margin-top:22px;text-align:center;font:600 15px/1.5 'Manrope',sans-serif;color:var(--tlm)}
@media (max-width:980px){.ko-mriezka{grid-template-columns:1fr}}
@media (max-width:620px){.formular{grid-template-columns:1fr}.ko-form{padding:30px 20px 26px}.ko-aika{width:104px;right:16px;top:-40px}.mapy{grid-template-columns:1fr}.mapa iframe{height:300px}}

/* ===== POHYB: hĺbka za myšou, odlesk na kartách, ikonky ožijú, lesk na tlačidlách ===== */
.gula{--hl:16}
.gula.siva,.okraj-gula{--hl:22}
.okno.g,.po-okno,.pod-dlazdica,.pod-loga figure{--hl:9}
.aika,.pod-postavy img,.ot-aika,.vy-aika,.ko-aika,.pr-aika{--hl:6}
.sk-3d{--hl:3}
/* odlesk, ktorý ide za myšou po skle karty */
.lesk{position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.62),rgba(255,255,255,0) 58%),radial-gradient(700px circle at var(--lx,50%) var(--ly,50%),rgba(120,170,255,.10),rgba(120,170,255,0) 70%)}
.naklon:hover>.lesk{opacity:1}
.naklon{will-change:transform}
/* 3D ikonka pri prejdení kartou poskočí a zakýve sa */
@keyframes ikona-hop{0%,100%{rotate:0deg;scale:1}25%{rotate:-9deg;scale:1.08}55%{rotate:7deg;scale:1.04}80%{rotate:-2deg}}
.sk:hover .sk-ik,.sk:focus-visible .sk-ik{animation:ikona-hop .8s cubic-bezier(.3,.7,.4,1)}
/* tlačidlá: pri prejdení prebehne lesk */
.pill-biela,.pill-farebna,.pill-sklo,.tl-form,.filtre button{position:relative;overflow:hidden;isolation:isolate}
/* plávajúce tlačidlo „Kontaktujte nás“ (vkladá ho main.js na každú stránku okrem kontaktu) */
.sticky-cta{position:fixed;right:96px;bottom:28px;z-index:90;display:inline-flex;align-items:center;height:52px;padding:0 24px;border-radius:999px;overflow:hidden;isolation:isolate;
  font:700 15px/1 'Manrope',sans-serif;color:#fff;text-decoration:none;text-shadow:0 1px 2px rgba(20,30,120,.35);
  background:linear-gradient(115deg,#1592E6 0%,#5B63DC 55%,#9A3FD2 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 12px 24px -12px rgba(70,60,200,.6);
  opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .3s}
.sticky-cta.show{opacity:1;pointer-events:auto;transform:none}
.sticky-cta:hover{transform:translateY(-3px)}
@media (max-width:640px){.sticky-cta{display:none!important}}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}
.pill-biela::after,.pill-farebna::after,.pill-sklo::after,.tl-form::after,.sticky-cta::after,.filtre button::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);translate:-130% 0;transition:translate .7s cubic-bezier(.3,.7,.3,1)}
.pill-biela:hover::after,.pill-farebna:hover::after,.pill-sklo:hover::after,.tl-form:hover::after,.sticky-cta:hover::after,.filtre button:hover::after{translate:130% 0}
/* Aika pri výzve občas zamáva */
@keyframes mav{0%,86%,100%{rotate:0deg}90%{rotate:-6deg}94%{rotate:5deg}97%{rotate:-3deg}}
.vy-aika,.ko-aika{animation:levituj var(--t,6s) ease-in-out var(--d,0s) infinite,mav 6.5s ease-in-out 1.5s infinite;transform-origin:50% 90%}
@media (prefers-reduced-motion:reduce){.sk:hover .sk-ik{animation:none}.vy-aika,.ko-aika{animation:none}.pill-biela::after,.pill-farebna::after,.pill-sklo::after,.tl-form::after,.sticky-cta::after,.filtre button::after{display:none}}

/* ===== guľka času (lesklá modrá, ako na /ai), v logu pred „o“ ===== */
.cas{display:inline-block;flex:none;width:22px;aspect-ratio:1;border-radius:50%;vertical-align:middle;
  background:radial-gradient(24% 17% at 67% 25%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 100%),
    radial-gradient(9% 7% at 30% 31%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 100%),
    radial-gradient(48% 30% at 42% 80%,rgba(175,236,255,.8) 0%,rgba(175,236,255,0) 100%),
    radial-gradient(circle at 50% 44%,#4DBBFF 0%,#2196F3 48%,#1079DF 78%,#0B66C9 100%);
  box-shadow:inset 0 0 0 1.5px rgba(160,225,255,.45),inset -3px -5px 9px rgba(0,40,140,.25),0 6px 12px -4px rgba(20,110,220,.5)}

/* ===== KARTA COOKIES v štýle /ai: svetlé sklo vľavo dole, 3D sušienka, tlačidlá ako na webe (Erik: „aj cookies kartu vymeň“) =====
   značky vkladá main.js (.cookiebar, p, .cookiebar-btns, .btn-primary, .btn-ghost), mení sa len vzhľad */
.cookiebar{position:fixed;left:22px;bottom:22px;z-index:120;width:min(460px,calc(100% - 44px));display:grid;grid-template-columns:64px 1fr;gap:6px 18px;align-items:start;
  padding:22px 24px 22px 20px;border-radius:28px;color:var(--text);
  background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.62));-webkit-backdrop-filter:blur(26px) saturate(1.15);backdrop-filter:blur(26px) saturate(1.15);
  box-shadow:inset 0 0 0 .8px rgba(255,255,255,.95),inset 0 1px 0 #fff,0 34px 70px -30px rgba(40,70,170,.55),0 8px 22px -14px rgba(40,70,170,.35);
  opacity:0;transform:translateY(26px) scale(.96);transform-origin:20% 100%;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.25,1.15)}
.cookiebar.show{opacity:1;transform:none}
.cookiebar::before{content:"";grid-row:1 / span 2;width:64px;height:64px;margin-top:-2px;background:url(/assets/web/ikony/cookie-160.webp) center/contain no-repeat;
  filter:drop-shadow(0 8px 10px rgba(150,80,20,.25));animation:levituj 5.8s ease-in-out infinite;--a:-5px}
.cookiebar p{margin:0;font:600 14.5px/1.55 'Manrope',sans-serif;color:#2B3654}
.cookiebar a{color:#4F5BD5;font-weight:700;text-decoration:underline;text-decoration-color:rgba(79,91,213,.35);text-underline-offset:3px}
.cookiebar-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.cookiebar .btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;font:700 14.5px/1 'Manrope',sans-serif;position:relative;overflow:hidden;isolation:isolate;transition:translate .2s,box-shadow .2s}
.cookiebar .btn-primary{color:#fff;text-shadow:0 1px 2px rgba(20,30,120,.35);background:linear-gradient(115deg,#1592E6 0%,#5B63DC 55%,#9A3FD2 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 12px 22px -12px rgba(70,60,200,.7)}
.cookiebar .btn-ghost{color:var(--text);background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(91,99,220,.22)}
.cookiebar .btn:hover{translate:0 -2px}
.cookiebar .btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);translate:-130% 0;transition:translate .7s cubic-bezier(.3,.7,.3,1)}
.cookiebar .btn:hover::after{translate:130% 0}
.cookiebar .btn:focus-visible{outline:3px solid #1A8FE3;outline-offset:3px}
body:has(.cookiebar.show) .sticky-cta{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.cookiebar{transition:none;opacity:1;transform:none}.cookiebar::before{animation:none}}
@media (max-width:600px){
  .cookiebar{left:10px;right:10px;bottom:10px;width:auto;grid-template-columns:44px 1fr;gap:4px 12px;padding:14px 14px 14px 12px;border-radius:22px}
  .cookiebar::before{grid-row:1;width:44px;height:44px}
  .cookiebar p{font-size:12.5px;line-height:1.45}
  .cookiebar-btns{grid-column:1 / -1;flex-wrap:nowrap;gap:8px;margin-top:8px}
  .cookiebar .btn{flex:1;height:40px;padding:0 12px;font-size:13px}
  body:has(.cookiebar.show) #ngChat{opacity:0;pointer-events:none}
}

/* ===== mobil a menšie obrazovky ===== */
@media (max-width:1240px){
  .menu,.hlava .jazyk,.hlava .tel{display:none}
  .burger{display:block}
}
@media (max-width:1100px){.ref-mriezka{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .uvod{--u:calc(100vw / 760);--cy:50%}
  .uvod .karta{width:calc(100vw - 32px);min-height:auto;padding:44px 22px 36px;border-radius:30px}
  .uvod .karta.sklo::after{border-radius:24px}
  .uvod h1{font-size:clamp(34px,10vw,44px)}
  .aika{left:auto;right:8px;top:auto;bottom:74px;width:64px}
  .bublina{display:none}
  .g.mimo-mobil{display:none}
}
@media (max-width:620px){.ref-mriezka{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lev{animation:none!important}.rk .okno{transition:none}}

/* ===== REFERENCIE VO FARBÁCH PROJEKTU (Erik 13. 10. 2026): scéna a gule z farieb loga a webu klienta ===== */
.rk[class*="rk-p-"] .rk-scena{background:var(--sc)}
.gula.pg{background:radial-gradient(circle at 28% 22%,var(--g0) 0%,var(--g1) 34%,var(--g2) 76%,var(--g3) 100%)}
.rk .gula.pg-1{--g0:var(--a0);--g1:var(--a1);--g2:var(--a2);--g3:var(--a3)}
.rk .gula.pg-2{--g0:var(--b0);--g1:var(--b1);--g2:var(--b2);--g3:var(--b3)}
.rk[class*="rk-p-"] .rk-stitok{color:var(--st)}
/* HK Dukla: žltá a bordová */
.rk-p-dukla{--sc:radial-gradient(70% 70% at 50% 42%,#FFF8D2 0%,#FFE460 58%,#F4C400 100%);--a0:#EE9AB4;--a1:#A82A50;--a2:#6C1334;--a3:#4A0A23;--b0:#FFFCDA;--b1:#FCE34C;--b2:#E8B900;--b3:#C79A00;--st:#8E1D42}
/* Zee's Final Shift: čierne pozadie a žlté gule (Erik 13. 10. 2026) */
.rk-p-zfs{--sc:radial-gradient(70% 70% at 50% 42%,#3A3D44 0%,#1C1E23 58%,#0B0C0E 100%);--a0:#FFFBD0;--a1:#FFD21F;--a2:#E2A800;--a3:#B88600;--b0:#FFFCDA;--b1:#FFDF4D;--b2:#F0B800;--b3:#C79A00;--st:#7A5A00}
/* Hockey Slovakia: červená a tmavomodrá */
.rk-p-hockey{--sc:radial-gradient(70% 70% at 50% 42%,#EAF0FF 0%,#A9BDEB 58%,#4A68B4 100%);--a0:#FF9AA6;--a1:#E81932;--a2:#A8001A;--a3:#7C0012;--b0:#9FB3EA;--b1:#2A4CA0;--b2:#0F2A66;--b3:#0A1D49;--st:#C8102E}
/* Rezidencia Vinohrady: zelená a vínová */
.rk-p-vinohrady{--sc:radial-gradient(70% 70% at 50% 42%,#F4FAE6 0%,#D4EBAE 58%,#9CCB5C 100%);--a0:#DE8FA0;--a1:#8C2A42;--a2:#561226;--a3:#3C0A1A;--b0:#EEFBC9;--b1:#9ACD4A;--b2:#649A26;--b3:#4C7A18;--st:#5E8E22}
/* Mercedes-Benz Trenčín: strieborná a čierna */
.rk-p-mercedes{--sc:radial-gradient(70% 70% at 50% 42%,#FBFCFD 0%,#DDE2E8 58%,#A9B2BE 100%);--a0:#FFFFFF;--a1:#E1E7EE;--a2:#A9B3C0;--a3:#86929F;--b0:#EEF4FB;--b1:#B9C8DA;--b2:#7A8FAA;--b3:#5D7391;--st:#3A3F47}
/* Gratube: šalviová a grafitová */
.rk-p-gratube{--sc:radial-gradient(70% 70% at 50% 42%,#F2F9F5 0%,#D0E8DC 58%,#93C6AC 100%);--a0:#D2F0E1;--a1:#6FB993;--a2:#3E8463;--a3:#2C654A;--b0:#EAF8F0;--b1:#94CBAE;--b2:#4F8C6F;--b3:#3B6E55;--st:#3F7A5E}
/* Eurotip: tmavomodrá a oceľová */
.rk-p-eurotip{--sc:radial-gradient(70% 70% at 50% 42%,#F1F5FA 0%,#C6D4E6 58%,#7F9BC0 100%);--a0:#8FA9CF;--a1:#2C4C7C;--a2:#16304F;--a3:#0D2038;--b0:#FFFFFF;--b1:#D3DDEA;--b2:#8FA3BE;--b3:#6D839F;--st:#1F3D66}
/* KONŠTRUKTA-Industry: zelená a grafitová */
.rk-p-konstrukta{--sc:radial-gradient(70% 70% at 50% 42%,#EEF9F2 0%,#BFE6CC 58%,#5FBF85 100%);--a0:#C9F2D8;--a1:#2DB26A;--a2:#178049;--a3:#0F6236;--b0:#D6FFF2;--b1:#5FE0BF;--b2:#1CB396;--b3:#128B75;--st:#178049}
/* Reštaurácia Bosco: hnedá a zlatá */
.rk-p-bosco{--sc:radial-gradient(70% 70% at 50% 42%,#FBF3E8 0%,#EBCFA6 58%,#C8955A 100%);--a0:#B88A64;--a1:#6B3E1E;--a2:#3F220E;--a3:#2A1608;--b0:#FFF1C9;--b1:#E8B04E;--b2:#B97A1E;--b3:#925E12;--st:#7A4A20}
/* TISO Autoslužby: žltá, čierna a červená */
.rk-p-tiso{--sc:radial-gradient(70% 70% at 50% 42%,#FFFBD6 0%,#FFEB5C 58%,#F5D000 100%);--a0:#FFB0A8;--a1:#E8291C;--a2:#A81408;--a3:#7E0E05;--b0:#FFD9C4;--b1:#FF8D57;--b2:#E0551C;--b3:#B54010;--st:#B3130A}
/* Schodex: zelená a oranžová */
.rk-p-schodex{--sc:radial-gradient(70% 70% at 50% 42%,#F0FAF2 0%,#C2E9CB 58%,#6CC787 100%);--a0:#9EEBB4;--a1:#22A84E;--a2:#137A35;--a3:#0C5C26;--b0:#FFD2B0;--b1:#F47B2A;--b2:#C4520E;--b3:#9A3F08;--st:#178A3F}
/* Humed: karmínová */
.rk-p-humed{--sc:radial-gradient(70% 70% at 50% 42%,#FFF0F3 0%,#F4C3CE 58%,#D9718A 100%);--a0:#F29AAE;--a1:#C2183F;--a2:#86082A;--a3:#62051E;--b0:#FFFFFF;--b1:#F6D3DB;--b2:#D88A9C;--b3:#B86A7D;--st:#B0163A}
/* Hotel a Sushi Magnus: malinová a uhľová */
.rk-p-magnus{--sc:radial-gradient(70% 70% at 50% 42%,#FFF1F5 0%,#F1C2D2 58%,#D27294 100%);--a0:#F08DB0;--a1:#B5175A;--a2:#7C0A3B;--a3:#5A062A;--b0:#FFF0F5;--b1:#F8B4CD;--b2:#E46A98;--b3:#C7457A;--st:#A8124F}   /* malá guľa ružová, nie čierna (Erik 13. 10. 2026) */

/* ===== B2B: partnerský portál v okne ako živá obrazovka objednávky (Erik 13. 10. 2026 „prepracuj“), veľkosti podľa šírky okna ===== */
.portal{container-type:inline-size;display:grid;grid-template-columns:21% 1fr;background:#F4F7FC;color:var(--text)}
.pt-bok{display:flex;flex-direction:column;gap:1.4cqw;padding:3.4cqw 2.2cqw;background:linear-gradient(180deg,#EAF1FB,#E1EBF8);border-right:1px solid #DCE6F4}
.pt-logo{height:4.4cqw;width:80%;margin-bottom:2cqw;border-radius:1.2cqw;background:linear-gradient(115deg,#1592E6,#5B63DC)}
.pt-nav{padding:1.3cqw 1.5cqw;border-radius:1.4cqw;font:700 2.05cqw/1 'Manrope',sans-serif;color:#5A6888;white-space:nowrap}
.pt-nav.on{background:#fff;color:#1A8FE3;box-shadow:0 .6cqw 1.6cqw -1cqw rgba(30,70,160,.45)}
.pt-hlavna{display:flex;flex-direction:column;gap:1.5cqw;padding:3.2cqw 3cqw;min-width:0}
.pt-hore{display:flex;align-items:center;justify-content:space-between;gap:2cqw;margin-bottom:.8cqw}
.pt-hore b{font:800 3cqw/1.1 'Sora',sans-serif;letter-spacing:-.01em;white-space:nowrap}
.pt-zlava{padding:1.1cqw 1.8cqw;border-radius:99px;background:#CFF6EA;font:800 1.85cqw/1 'Manrope',sans-serif;color:#0D8A7C;white-space:nowrap}
.pt-riadok{display:grid;grid-template-columns:6.6cqw minmax(0,1fr) auto auto auto;align-items:center;gap:1.7cqw;padding:1.1cqw 1.5cqw;border-radius:1.8cqw;background:#fff;
  box-shadow:inset 0 0 0 1px #E3EAF5,0 .9cqw 1.8cqw -1.4cqw rgba(30,70,160,.35)}
.pod-vizual .portal .pt-riadok img{width:6.6cqw;height:6.6cqw;object-fit:contain;filter:drop-shadow(0 .5cqw .6cqw rgba(30,70,160,.22))}
.pt-nazov{display:grid;gap:.9cqw}
.pt-nazov i{display:block;height:1.3cqw;border-radius:99px;background:#DCE3EE}
.pt-nazov i+i{width:58%;background:#EBEFF6}
.pt-sklad{font:700 1.65cqw/1 'Manrope',sans-serif;color:#0D8A7C;white-space:nowrap}
.pt-sklad::before{content:"";display:inline-block;width:1.1cqw;height:1.1cqw;margin-right:.7cqw;border-radius:50%;background:#2BD3A6;vertical-align:middle}
.pt-ks{padding:.9cqw 1.3cqw;border-radius:99px;background:#F1F4F9;font:800 1.75cqw/1 'Sora',sans-serif;color:#2B3654;white-space:nowrap}
.pt-btn{padding:1.2cqw 1.8cqw;border-radius:99px;background:linear-gradient(115deg,#5B63DC,#9A3FD2);font:800 1.75cqw/1 'Manrope',sans-serif;color:#fff;white-space:nowrap;box-shadow:0 .8cqw 1.4cqw -1cqw rgba(91,99,220,.8)}
.pt-toast{right:-5%;bottom:-8%;rotate:-3deg}
.pod-vizual .pt-toast img{width:36px;height:36px}
.pt-toast small{display:block;font:600 11.5px/1.3 'Manrope',sans-serif;color:var(--tlm)}
@media (max-width:560px){.pt-toast{right:-2%;bottom:-12%}.pod-vizual .pt-toast img{width:28px;height:28px}.pt-toast small{font-size:10.5px}}

/* ===== ONLINE MARKETING: analytika a mesačný report v okne (Erik 13. 10. 2026 „prerobiť, je to škaredé“) ===== */
.an,.rp{container-type:inline-size;display:flex;flex-direction:column;background:linear-gradient(180deg,#FBFCFF,#F2F6FC);color:var(--text)}
.an{padding:4.4cqw 4.4cqw 3.2cqw}
.an-hore{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.an-legenda{display:flex;gap:3cqw;font:700 2.3cqw/1 'Manrope',sans-serif;color:#46506E}
.an-legenda span::before{content:"";display:inline-block;width:2.6cqw;height:1cqw;margin-right:1cqw;border-radius:99px;vertical-align:middle;background:var(--f)}
.an-legenda .l1{--f:linear-gradient(90deg,#1592E6,#C24BCB)}.an-legenda .l2{--f:#2BD3A6}
.an-chip{padding:1.3cqw 2.2cqw;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #E3EAF5;font:700 2.3cqw/1 'Manrope',sans-serif;color:#5A6888;white-space:nowrap}
.an-graf{position:relative;flex:1;margin-top:3cqw}
.an-graf svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.an-mriezka line{stroke:#DFE6F2;stroke-width:1;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.an-l1{fill:none;stroke:url(#an-ciara);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.an-l2{fill:none;stroke:#2BD3A6;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 7;vector-effect:non-scaling-stroke}
.an-bod{position:absolute;width:3.2cqw;height:3.2cqw;translate:-50% -50%;border-radius:50%;background:#fff;box-shadow:0 0 0 1cqw #C24BCB,0 0 0 2.6cqw rgba(194,75,203,.22),0 1cqw 2.4cqw rgba(154,63,210,.5)}
.an-tip{position:absolute;padding:1.2cqw 2cqw;border-radius:1.6cqw;background:linear-gradient(115deg,#5B63DC,#9A3FD2);font:800 2cqw/1 'Manrope',sans-serif;color:#fff;white-space:nowrap;box-shadow:0 1.4cqw 2.6cqw -1.4cqw rgba(91,99,220,.9)}
.an-osi{display:flex;justify-content:space-between;margin-top:2.4cqw;font:700 1.8cqw/1 'Manrope',sans-serif;color:#9AA4BC;text-transform:uppercase;letter-spacing:.08em}
.an-karta,.pt-toast{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:18px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 30px -16px rgba(30,70,160,.55),inset 0 0 0 1px #fff;
  font:800 13.5px/1.25 'Sora',sans-serif;color:var(--text)}
.an-karta{left:-6%;bottom:-9%;rotate:2deg}
.pod-vizual .an-karta img{width:40px;height:40px}
.an-karta small{display:block;font:600 11.5px/1.3 'Manrope',sans-serif;color:var(--tlm)}
.po-plocha.rp{aspect-ratio:auto}
.rp{padding:5cqw 5cqw 5.4cqw}
.rp-mesiac{font:800 5cqw/1 'Sora',sans-serif;letter-spacing:-.02em}
.rp-dlazdice{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;margin-top:3.6cqw}
.rp-d{display:flex;flex-direction:column;align-items:flex-start;gap:1.6cqw;padding:2.6cqw;border-radius:2.6cqw;background:#fff;box-shadow:inset 0 0 0 1px #E6ECF6,0 1.4cqw 2.6cqw -2cqw rgba(30,70,160,.4);
  font:700 2.9cqw/1.2 'Manrope',sans-serif;color:#46506E}
.vizual-gule .rp-d img{width:11cqw;height:11cqw;object-fit:contain;filter:drop-shadow(0 .8cqw .8cqw rgba(30,70,160,.2))}
.rp-d b{display:block;margin-top:.8cqw;font:800 3.8cqw/1 'Sora',sans-serif}
.rp-d b::before{content:"";display:inline-block;width:0;height:0;margin-right:1cqw;border-left:1.2cqw solid transparent;border-right:1.2cqw solid transparent;vertical-align:middle}
.rp-d b.hore{color:#0D9A7C}.rp-d b.hore::before{border-bottom:1.8cqw solid #2BD3A6}
.rp-d b.dole{color:#5B63DC}.rp-d b.dole::before{border-top:1.8cqw solid #7C6CF0}
.rp-veta{display:flex;align-items:center;gap:2.6cqw;margin-top:3cqw;padding:2.6cqw 3cqw;border-radius:2.6cqw;background:linear-gradient(115deg,rgba(21,146,230,.1),rgba(154,63,210,.12))}
.vizual-gule .rp-veta img{width:10cqw;height:10cqw;flex:none;object-fit:contain}
.rp-veta p{margin:0;font:700 3.1cqw/1.45 'Manrope',sans-serif;color:#2B3654}
@media (max-width:560px){.an-karta,.pt-toast{padding:8px 12px 8px 8px;font-size:12px}.pod-vizual .an-karta img{width:30px;height:30px}.an-karta small{font-size:10.5px}.an-karta{left:-2%;bottom:-12%}}

/* ===== KONTAKT: rozhovor v okne a 3D ikonky kontaktov (Erik 13. 10. 2026 „toto je škaredé“ o veľkej Aike) ===== */
.ko-vizual{position:relative}
.chat{container-type:inline-size;display:flex;flex-direction:column;gap:2.6cqw;padding:4cqw 4.6cqw;background:linear-gradient(180deg,#FBFCFF,#F1F5FC)}
.ch-hore{display:flex;align-items:center;gap:2.4cqw;padding-bottom:3cqw;margin-bottom:.6cqw;border-bottom:1px solid #E3EAF5}
.ch-avatar{position:relative;flex:none;width:8.6cqw;height:8.6cqw;border-radius:50%;overflow:hidden;background:radial-gradient(70% 70% at 35% 30%,#DDF6FF,#9FD8F7)}
.pod-vizual .ch-avatar img{position:absolute;left:50%;top:6%;width:62%;height:auto;translate:-50% 0}
.ch-avatar::after{content:"";position:absolute;right:4%;bottom:4%;width:2.2cqw;height:2.2cqw;border-radius:50%;background:#2BD3A6;box-shadow:0 0 0 .5cqw #fff}
.ch-hore b{display:block;font:800 3.2cqw/1.1 'Sora',sans-serif;color:var(--text)}
.ch-hore small{display:block;margin-top:.6cqw;font:600 2.1cqw/1.2 'Manrope',sans-serif;color:var(--tlm)}
.ch-b{max-width:72%;margin:0;padding:2.2cqw 3cqw;border-radius:3cqw;font:600 2.6cqw/1.4 'Manrope',sans-serif}
.ch-b.ja{align-self:flex-end;border-bottom-right-radius:.8cqw;background:linear-gradient(115deg,#1592E6,#5B63DC 60%,#9A3FD2);color:#fff;box-shadow:0 1.4cqw 2.6cqw -1.6cqw rgba(91,99,220,.8)}
.ch-b.my{align-self:flex-start;border-bottom-left-radius:.8cqw;background:#fff;color:#2B3654;box-shadow:inset 0 0 0 1px #E3EAF5,0 1.2cqw 2.4cqw -1.8cqw rgba(30,70,160,.4)}
.ch-pise{display:flex;gap:1.2cqw;padding:2.6cqw 3cqw}
.ch-pise i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#9AA8C7;animation:ch-bodka 1.2s ease-in-out infinite}
.ch-pise i:nth-child(2){animation-delay:.15s}.ch-pise i:nth-child(3){animation-delay:.3s}
@keyframes ch-bodka{0%,60%,100%{translate:0 0;opacity:.45}30%{translate:0 -.9cqw;opacity:1}}
.ch-3d{position:absolute;z-index:3;width:16%;height:auto;filter:drop-shadow(0 12px 14px rgba(30,70,160,.25));--hl:3}
@media (prefers-reduced-motion:reduce){.ch-pise i{animation:none}}
/* okno s analytikou, reportom, rozhovorom alebo portálom je kontajner: okraje a medzery v cqw sa rátajú podľa šírky okna, nie obrazovky */
.po-okno:has(.an,.rp,.chat,.portal){container-type:inline-size}

/* ===== O NÁS: celý tím spolu ako tímová fotka, krajní vzadu, Erik vpredu v strede (Erik 13. 10. 2026) ===== */
.tim5{max-width:640px}
.tim5 .pt5{position:absolute;bottom:3%;width:auto;filter:drop-shadow(0 14px 16px rgba(40,70,160,.22));--hl:6}
.tim5 .pt5-1{left:0;height:76%;z-index:1}
.tim5 .pt5-5{right:-2%;height:76%;z-index:1}
.tim5 .pt5-2{left:17%;height:84%;z-index:2}
.tim5 .pt5-4{right:19%;height:84%;z-index:2}
.tim5 .pt5-3{left:0;right:0;margin:0 auto;height:94%;z-index:3}

/* ===== PPC: prehľad kampaní v okne s 3D ikonkami (Erik 13. 10. 2026, jednotne s Online marketingom) ===== */
.kp{container-type:inline-size;display:flex;flex-direction:column;gap:1.8cqw;padding:4.4cqw 4.4cqw 4cqw;background:linear-gradient(180deg,#FBFCFF,#F2F6FC);color:var(--text)}
.kp-nadpis{font:800 4cqw/1 'Sora',sans-serif;letter-spacing:-.02em}
.kp-hlavicka,.kp-riadok{display:grid;grid-template-columns:minmax(0,1fr) 11cqw 17cqw 15cqw;align-items:center;gap:2.4cqw}
.kp-hlavicka{margin-top:1.6cqw;padding:0 2cqw;font:700 1.75cqw/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9AA4BC}
.kp-hlavicka span:first-child{padding-left:9cqw}
.kp-riadok{padding:1.6cqw 2cqw;border-radius:2.2cqw;background:#fff;box-shadow:inset 0 0 0 1px #E6ECF6,0 1.2cqw 2.4cqw -2cqw rgba(30,70,160,.4)}
.pod-vizual .kp-meno img{position:absolute;left:0;top:50%;width:7cqw;height:7cqw;translate:0 -50%;object-fit:contain;filter:drop-shadow(0 .6cqw .7cqw rgba(30,70,160,.22))}
.kp-meno{display:flex;flex-direction:column;justify-content:center;min-height:7cqw;padding-left:9cqw;position:relative;font:800 2.5cqw/1.15 'Sora',sans-serif;white-space:nowrap}
.kp-meno small{margin-top:.6cqw;font:600 1.85cqw/1 'Manrope',sans-serif;color:var(--tlm)}
.kp-stav{justify-self:start;padding:1cqw 1.6cqw;border-radius:99px;background:#D8F7EC;font:800 1.8cqw/1 'Manrope',sans-serif;color:#0D8A7C}
.kp-stav::before{content:"";display:inline-block;width:1.1cqw;height:1.1cqw;margin-right:.8cqw;border-radius:50%;background:#2BD3A6;vertical-align:middle}
.kp-rozpocet{height:1.6cqw;border-radius:99px;background:#E9EEF6;overflow:hidden}
.kp-rozpocet i{display:block;width:var(--p);height:100%;border-radius:inherit;background:linear-gradient(90deg,#1592E6,#5B63DC 70%,#9A3FD2)}
.kp-riadok b{font:800 2.3cqw/1 'Sora',sans-serif;white-space:nowrap}
.kp-riadok b::before{content:"";display:inline-block;width:0;height:0;margin-right:1cqw;border-left:1.1cqw solid transparent;border-right:1.1cqw solid transparent;vertical-align:middle}
.kp-riadok b.hore{color:#0D9A7C}.kp-riadok b.hore::before{border-bottom:1.6cqw solid #2BD3A6}
.kp-riadok b.dole{color:#5B63DC}.kp-riadok b.dole::before{border-top:1.6cqw solid #7C6CF0}
.po-okno:has(.kp){container-type:inline-size}

/* ===== E-SHOP (košík) a WEB (stránka služieb) v okne s 3D ikonkami (Erik 13. 10. 2026, jednotne s PPC a B2B) ===== */
.po-okno:has(.ks,.slz){container-type:inline-size}
.ks,.slz{container-type:inline-size;display:flex;flex-direction:column;background:linear-gradient(180deg,#FBFCFF,#F2F6FC);color:var(--text)}
.ks{padding:4cqw 4cqw 4.4cqw;gap:3cqw}
.ks-kroky{display:flex;gap:1.6cqw}
.ks-kroky span{padding:1.1cqw 2cqw;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #E3EAF5;font:700 2cqw/1 'Manrope',sans-serif;color:#9AA4BC}
.ks-kroky .on{background:linear-gradient(115deg,#F2B060,#E2803A);color:#fff;box-shadow:0 1cqw 2cqw -1.2cqw rgba(226,128,58,.9)}
.ks-telo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.6cqw;align-items:start}
.ks-polozky{display:grid;gap:1.6cqw}
.ks-riadok{display:grid;grid-template-columns:8.4cqw minmax(0,1fr) auto auto;align-items:center;gap:1.8cqw;padding:1.3cqw 1.6cqw;border-radius:2cqw;background:#fff;
  box-shadow:inset 0 0 0 1px #E6ECF6,0 1.2cqw 2.4cqw -2cqw rgba(30,70,160,.4)}
.ks-obr{display:grid;place-items:center;width:8.4cqw;height:8.4cqw;border-radius:1.6cqw;background:#FFF4E6}
.vizual-gule .ks-obr img{width:6.6cqw;height:6.6cqw;object-fit:contain;filter:drop-shadow(0 .5cqw .6cqw rgba(30,70,160,.2))}
.ks-cena{display:flex;align-items:center;gap:.6cqw;font:800 2.2cqw/1 'Sora',sans-serif;color:#2B3654}
.ks-cena i{display:block;width:5cqw;height:1.4cqw;border-radius:99px;background:#DCE3EE}
.ks-suhrn{display:grid;gap:1.6cqw;padding:2.4cqw;border-radius:2.4cqw;background:#fff;box-shadow:inset 0 0 0 1px #E6ECF6,0 1.4cqw 2.6cqw -2cqw rgba(30,70,160,.4)}
.ks-r{display:flex;flex-direction:column;gap:.6cqw;font:700 1.75cqw/1.2 'Manrope',sans-serif;color:#9AA4BC}
.ks-r b{font:800 2.1cqw/1.2 'Manrope',sans-serif;color:#2B3654}
.ks-spolu{display:flex;align-items:center;justify-content:space-between;padding-top:1.4cqw;border-top:1px solid #E6ECF6;font:800 2.2cqw/1 'Sora',sans-serif}
.ks-spolu i{display:block;width:8cqw;height:1.8cqw;border-radius:99px;background:#DCE3EE}
.ks-btn{padding:1.6cqw;border-radius:99px;background:linear-gradient(115deg,#1592E6,#5B63DC 55%,#9A3FD2);font:800 2cqw/1 'Manrope',sans-serif;color:#fff;text-align:center;box-shadow:0 1cqw 2cqw -1.2cqw rgba(91,99,220,.9)}
.ks-karta{left:auto;right:-5%;bottom:-8%;rotate:-2deg}
.slz{padding:3.6cqw 4cqw 4.4cqw;gap:3.2cqw}
.sl-menu{display:flex;align-items:center;gap:3cqw}
.sl-logo{width:12cqw;height:3.6cqw;border-radius:1cqw;background:linear-gradient(115deg,#1592E6,#5B63DC)}
.sl-pol{display:flex;gap:2cqw;margin-left:auto}.sl-pol i{display:block;width:7cqw;height:1.3cqw;border-radius:99px;background:#DCE3EE}
.sl-cta{padding:1.2cqw 2.4cqw;border-radius:99px;background:linear-gradient(115deg,#1592E6,#5B63DC 55%,#9A3FD2);font:800 1.9cqw/1 'Manrope',sans-serif;color:#fff}
.sl-hero{display:grid;gap:1.4cqw;padding:3.4cqw 3.6cqw;border-radius:2.6cqw;background:linear-gradient(115deg,rgba(21,146,230,.12),rgba(154,63,210,.14))}
.sl-hero b{font:800 4.4cqw/1.05 'Sora',sans-serif;letter-spacing:-.02em}
.sl-hero span{display:grid;gap:1cqw}.sl-hero i{display:block;height:1.4cqw;width:62%;border-radius:99px;background:rgba(91,99,220,.22)}.sl-hero i+i{width:44%}
.sl-karty{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.sl-karta{display:grid;gap:1.2cqw;padding:2.4cqw;border-radius:2.4cqw;background:#fff;box-shadow:inset 0 0 0 1px #E6ECF6,0 1.4cqw 2.6cqw -2cqw rgba(30,70,160,.4)}
.vizual-gule .sl-karta img{width:9cqw;height:9cqw;object-fit:contain;filter:drop-shadow(0 .7cqw .8cqw rgba(30,70,160,.2))}
.sl-karta i{display:block;height:1.4cqw;border-radius:99px;background:#DCE3EE}.sl-karta i+i{width:70%;background:#EBEFF6}
.sl-toast{left:auto;right:-5%;bottom:-8%;rotate:-2deg}
/* kartičky pri oknách: 3D ikonka rovnako veľká všade (v úvode aj v sekciách), okná e-shopu a webu podľa obsahu a väčšie */
.an-karta img,.pt-toast img{width:40px;height:40px;object-fit:contain}
@media (max-width:560px){.an-karta img,.pt-toast img{width:30px;height:30px}}
.po-plocha.ks,.po-plocha.slz{aspect-ratio:auto}
.ks-kroky span{font-size:2.4cqw;padding:1.3cqw 2.4cqw}
.ks-obr{width:10cqw;height:10cqw}.vizual-gule .ks-obr img{width:8cqw;height:8cqw}
.ks-riadok{grid-template-columns:10cqw minmax(0,1fr) auto auto;padding:1.6cqw 1.8cqw}
.ks .pt-ks{font-size:2.2cqw;padding:1.1cqw 1.6cqw}
.ks .pt-nazov i{height:1.6cqw}
.ks-cena{font-size:2.6cqw}
.ks-r{font-size:2.1cqw}.ks-r b{font-size:2.6cqw}
.ks-spolu{font-size:2.7cqw}.ks-btn{font-size:2.5cqw;padding:2cqw}
.sl-hero b{font-size:5.4cqw}
.vizual-gule .sl-karta img{width:11cqw;height:11cqw}
.sl-cta{font-size:2.4cqw;padding:1.5cqw 3cqw}
.sl-pol i{height:1.6cqw}

/* ===== AKO PRACUJEME: návrh, dizajn a hotový web prepracované (Erik 13. 10. 2026 „aj toto prepracuj“) ===== */
.po-okno:has(.nv,.dzs){container-type:inline-size}
.po-1{--r:-5deg}.po-3{--r:3deg}
/* okná postupu menšie a viac od seba, aby bolo vidieť obsah každého */
.po-vizual .po-okno{width:56%}
.po-vizual{aspect-ratio:1/1.1}
.po-vizual .po-1{left:0;top:1%}.po-vizual .po-2{left:22%;top:32%}.po-vizual .po-3{left:44%;top:63%}
.nv{background-color:#F6F9FE;background-image:linear-gradient(rgba(91,99,220,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(91,99,220,.07) 1px,transparent 1px);background-size:4cqw 4cqw}
.nv-b{position:absolute;display:grid;place-items:center;border:.4cqw dashed #9DB2D8;border-radius:1.6cqw;background:rgba(255,255,255,.75);font:700 2.4cqw/1 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#7E8FB3}
.nv-c{justify-items:end;padding-right:3cqw}
.nv-x{background:linear-gradient(to top right,transparent calc(50% - .2cqw),rgba(157,178,216,.55) 50%,transparent calc(50% + .2cqw)),linear-gradient(to top left,transparent calc(50% - .2cqw),rgba(157,178,216,.55) 50%,transparent calc(50% + .2cqw)),rgba(255,255,255,.75)}
.nv-x{font-size:2.8cqw;color:#5B6E96}
.dzs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:2.6cqw;padding:4cqw;background:linear-gradient(180deg,#FBFCFF,#F2F6FC)}
.dzs-farby{grid-column:1 / -1;display:flex;gap:2.2cqw}
.dzs-farby span{width:8.6cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--f) 35%,#fff),var(--f) 62%,color-mix(in srgb,var(--f) 75%,#000));box-shadow:0 1cqw 1.8cqw -1cqw color-mix(in srgb,var(--f) 80%,transparent)}
.dzs-pismo{display:flex;align-items:center;gap:2.4cqw;padding:2.4cqw 3cqw;border-radius:2.4cqw;background:#fff;box-shadow:inset 0 0 0 1px #E6ECF6,0 1.2cqw 2.4cqw -2cqw rgba(30,70,160,.4)}
.dzs-pismo b{font:800 9cqw/1 'Sora',sans-serif;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dzs-pismo span{display:grid;gap:.6cqw;font:800 3cqw/1 'Sora',sans-serif;color:var(--text)}
.dzs-pismo small{font:600 2cqw/1 'Manrope',sans-serif;color:var(--tlm)}
.dzs-ikony{display:flex;align-items:center;justify-content:space-around;padding:2cqw;border-radius:2.4cqw;background:#fff;box-shadow:inset 0 0 0 1px #E6ECF6,0 1.2cqw 2.4cqw -2cqw rgba(30,70,160,.4)}
.po-vizual .dzs-ikony img{width:10cqw;height:10cqw;object-fit:contain;filter:drop-shadow(0 .7cqw .8cqw rgba(30,70,160,.22))}
.dzs-tlacidla{grid-column:1 / -1;display:flex;gap:2cqw}
.dzs-t1,.dzs-t2{padding:2cqw 3.6cqw;border-radius:99px;font:800 2.6cqw/1 'Manrope',sans-serif}
.dzs-t1{background:linear-gradient(115deg,#1592E6,#5B63DC 55%,#9A3FD2);color:#fff;box-shadow:0 1.2cqw 2.2cqw -1.4cqw rgba(91,99,220,.9)}
.dzs-t2{background:#fff;color:var(--text);box-shadow:inset 0 0 0 1px #E3EAF5}
.po-spustene{left:-16%;right:auto;bottom:10%;rotate:-3deg}
/* vektorové logá klientov: rovnaká optická plocha bez ohľadu na tvar loga (Erik 13. 10. 2026 „logá v zlej kvalite“) */
.zn-dl img.zn-v{--plocha:9800;width:min(100%,calc(sqrt(var(--plocha) * var(--ar)) * 1px));max-height:92px;height:auto;object-fit:contain}
@media (max-width:760px){.zn-dl img.zn-v{--plocha:6800;max-height:76px}}

/* O nás: štítok Človek / AI agent na karte tímu (Erik 13. 10. 2026: Zaira, Mairana, Kain a Laila sú AI agenti) */
.tk-stitok{position:absolute;z-index:3;left:14px;top:14px;padding:7px 12px;border-radius:999px;font:800 11.5px/1 'Manrope',sans-serif;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 8px 16px -10px rgba(30,70,160,.6)}
.tk-clovek{background:#fff;color:#0D8A7C}
.tk-clovek::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#2BD3A6;vertical-align:1px}
.tk-ai{background:linear-gradient(115deg,#5B63DC,#9A3FD2);color:#fff}
.tim .hlavicka .uvodny{max-width:760px}

/* ===== KONTRAST: sýte sklo Erik 13. 10. 2026 odmietol („toto isto nie“), pôvodné priesvitné sklo ostáva ===== */
/* silnejší tmavomodrý tieň pod bielym textom v skle (Erik zvolil namiesto sýteho skla): tesný obrys + mäkká žiara */
.sklo:not(.svetle) :is(h1,.podnadpis,.drobky,.kicker,.pod,.cisla b,.cisla span),.vy-sklo>p,.sklo:not(.svetle) .sk-text{
  text-shadow:0 1px 1px rgba(10,34,110,.55),0 0 2px rgba(10,34,110,.35),0 1px 10px rgba(10,34,110,.45),0 2px 24px rgba(10,34,110,.30)}
.sklo:not(.svetle) h1{text-shadow:0 1px 2px rgba(10,34,110,.45),0 0 3px rgba(10,34,110,.25),0 2px 18px rgba(10,34,110,.40),0 4px 40px rgba(10,34,110,.30)}
/* ===== /KONTRAST ===== */

/* ===== AKO PRACUJEME, okno 2 · Dizajn: dizajn pri práci (Erik 13. 10. 2026 „toto mi nesedí, prepracuj“) ===== */
.po-okno:has(.dz2){container-type:inline-size}
.dz2{background:linear-gradient(180deg,#FBFCFF,#F1F5FC)}
.dz2-web{position:absolute;left:5%;top:7%;width:64%;bottom:9%;padding:4.4cqw 4.6cqw;border-radius:3cqw;
  background:radial-gradient(80% 90% at 85% 10%,rgba(247,205,241,.9),transparent 60%),radial-gradient(70% 80% at 0% 100%,rgba(191,241,226,.9),transparent 60%),#EAF3FE;
  box-shadow:inset 0 0 0 1px #fff,0 1.6cqw 3cqw -2cqw rgba(30,70,160,.45)}
.dz2-lista{display:flex;align-items:center;justify-content:space-between}
.dz2-logo{width:12cqw;height:2.8cqw;border-radius:1cqw;background:linear-gradient(115deg,#1592E6,#2BD3A6)}
.dz2-menu{display:flex;gap:1.6cqw}.dz2-menu i{display:block;width:5cqw;height:1.2cqw;border-radius:99px;background:rgba(43,54,84,.22)}
.dz2-vyber{position:relative;display:inline-block;margin-top:5cqw;padding:1cqw 1.6cqw;outline:.35cqw solid #1A8FE3;outline-offset:0}
.dz2-vyber b{display:block;font:800 6.2cqw/1 'Sora',sans-serif;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.dz2-vyber i{position:absolute;width:1.8cqw;height:1.8cqw;border-radius:.4cqw;background:#fff;box-shadow:inset 0 0 0 .35cqw #1A8FE3;translate:-50% -50%}
.dz2-vyber .u1{left:0;top:0}.dz2-vyber .u2{left:100%;top:0}.dz2-vyber .u3{left:0;top:100%}.dz2-vyber .u4{left:100%;top:100%}
.dz2-miera{position:absolute;left:0;top:-4.6cqw;padding:.7cqw 1.4cqw;border-radius:.8cqw;background:#1A8FE3;font:800 1.7cqw/1 'Manrope',sans-serif;color:#fff;white-space:nowrap}
.dz2-riadok{display:block;width:78%;height:1.6cqw;margin-top:3.4cqw;border-radius:99px;background:rgba(43,54,84,.2)}
.dz2-riadok.kratky{width:52%;margin-top:1.6cqw}
.dz2-tlacidlo{display:inline-block;margin-top:3.6cqw;padding:1.8cqw 3.4cqw;border-radius:99px;background:linear-gradient(115deg,#1592E6,#5B63DC 55%,#9A3FD2);font:800 2.3cqw/1 'Manrope',sans-serif;color:#fff;box-shadow:0 1.2cqw 2.4cqw -1.4cqw rgba(91,99,220,.9)}
.dz2-panel{position:absolute;right:5%;top:12%;width:22%;display:flex;flex-direction:column;gap:1.4cqw;padding:2.6cqw 2.4cqw;border-radius:2.6cqw;background:#fff;
  box-shadow:inset 0 0 0 1px #E6ECF6,0 1.6cqw 3cqw -2cqw rgba(30,70,160,.5)}
.dz2-nadpis{font:800 1.8cqw/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9AA4BC}
.dz2-farby{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw;margin-bottom:1.2cqw}
.dz2-farby i{display:block;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--f) 35%,#fff),var(--f) 62%,color-mix(in srgb,var(--f) 75%,#000))}
.dz2-pismo{font:800 6cqw/1 'Sora',sans-serif;letter-spacing:-.03em;color:var(--text)}
.po-vizual .dz2-kurzor{position:absolute;left:50%;top:44%;width:11cqw;height:11cqw;object-fit:contain;filter:drop-shadow(0 1cqw 1cqw rgba(30,70,160,.3))}

/* B2B Čo dostanete: Aika vľavo dole pri prehľade, ukazuje naň (Erik 13. 10. 2026) */
.b2b-aika{position:absolute;z-index:3;left:-14%;bottom:-16%;width:24%;height:auto;filter:drop-shadow(0 16px 16px rgba(40,80,170,.28));--hl:6}
@media (max-width:980px){.b2b-aika{left:-4%;bottom:-20%;width:22%}}

/* ===== WEBDIZAJN: vizuálny manuál značky v okne + vizitka a príspevok (Erik 13. 10. 2026 „nepáči sa mi to“ o mriežke log) ===== */
.zn-okno{position:relative;width:86%;margin:0 auto 110px;container-type:inline-size}
.vm{display:flex;flex-direction:column;gap:3.2cqw;padding:4.6cqw 5cqw 5.4cqw;background:linear-gradient(180deg,#FBFCFF,#F1F5FC);aspect-ratio:auto!important}
.vm-logo{display:flex;align-items:center;gap:3.4cqw;padding:3cqw 3.4cqw;border-radius:3cqw;background:#fff;box-shadow:inset 0 0 0 1px #E6ECF6,0 1.4cqw 2.6cqw -2cqw rgba(30,70,160,.4)}
.zn-okno .vm-logo img{width:15cqw;height:15cqw;object-fit:contain;filter:drop-shadow(0 1cqw 1cqw rgba(30,70,160,.22))}
.vm-logo b{display:block;font:800 6.4cqw/1 'Sora',sans-serif;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vm-logo small{display:block;margin-top:1.2cqw;font:700 2.4cqw/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9AA4BC}
.vm-riadok{display:flex;align-items:center;gap:3cqw}
.vm-nadpis{width:13cqw;flex:none;font:800 2.3cqw/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9AA4BC}
.vm-farby{display:flex;gap:2cqw}
.vm-farby i{display:block;width:8.4cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--f) 35%,#fff),var(--f) 62%,color-mix(in srgb,var(--f) 75%,#000));box-shadow:0 1cqw 1.8cqw -1cqw color-mix(in srgb,var(--f) 80%,transparent)}
.vm-pismo{display:flex;align-items:baseline;gap:1.6cqw;padding:1.8cqw 3cqw;border-radius:2.4cqw;background:#fff;box-shadow:inset 0 0 0 1px #E6ECF6}
.vm-pismo b{font:800 6.4cqw/1 'Sora',sans-serif;letter-spacing:-.03em;color:var(--text)}
.vm-text b{font:500 6.4cqw/1 'Manrope',sans-serif}
.vm-pismo small{font:700 2.2cqw/1 'Manrope',sans-serif;color:var(--tlm)}
.vm-vizitka{position:absolute;z-index:4;left:-12%;bottom:-36%;width:42%;aspect-ratio:1.75;display:flex;align-items:center;gap:4%;padding:5% 7%;border-radius:12px;rotate:-6deg;
  background:linear-gradient(135deg,#1592E6,#5B63DC 55%,#9A3FD2);box-shadow:0 24px 36px -18px rgba(60,50,170,.7),inset 0 1px 0 rgba(255,255,255,.35);--hl:9}
.vm-vizitka img{width:30%;height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,40,.35))}
.vm-vizitka span{display:grid;gap:6px;flex:1}
.vm-vizitka b{font:800 clamp(12px,1.25vw,16px)/1.1 'Sora',sans-serif;color:#fff}
.vm-vizitka i{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.55)}.vm-vizitka i+i{width:65%}
.vm-post{position:absolute;z-index:4;right:-12%;bottom:-22%;width:34%;padding:8px 8px 10px;border-radius:16px;rotate:5deg;background:#fff;box-shadow:0 24px 36px -18px rgba(40,70,170,.55),inset 0 0 0 1px #E6ECF6;--hl:9}
.vm-post-hlava{display:flex;align-items:center;gap:6px;padding:2px 2px 8px}
.vm-post-hlava img{width:22px;height:22px;border-radius:50%;background:#F1F5FC}
.vm-post-hlava b{font:800 11px/1 'Manrope',sans-serif;color:var(--text)}
.vm-post-obr{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,#BCDDFD,#E7C4F3 60%,#FFD9A6)}
.vm-post-obr img{width:62%;height:auto;filter:drop-shadow(0 8px 10px rgba(60,50,170,.3))}
@media (max-width:620px){.zn-okno{width:92%}.vm-vizitka{left:-4%;bottom:-18%}.vm-post{right:-3%;bottom:-24%}.vm-vizitka b{font-size:11px}}

/* ===== ESHOPY, zložky ceny: komu a ako často platíte ako dva štítky (Erik 13. 10. 2026 „prepracuj“) ===== */
.kto-plati{display:flex;flex-wrap:wrap;gap:8px;letter-spacing:0;text-transform:none}
.kto-plati span{display:inline-flex;align-items:center;padding:8px 13px;border-radius:999px;font:800 13px/1 'Manrope',sans-serif}
.kp-komu{background:color-mix(in srgb,var(--k,#5B63DC) 14%,#fff);color:var(--k,#5B63DC);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k,#5B63DC) 22%,#fff)}
.kp-komu::before{content:"";width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--k,#5B63DC)}
.kp-kedy{background:#fff;color:#46506E;box-shadow:inset 0 0 0 1px #E3EAF5}
/* sýtejšia žltá guľa za kartou Štandard na Eshopoch (Erik 13. 10. 2026 „len tú žltú sýtejšiu“) */
.gula.oranzova.syta{background:radial-gradient(circle at 30% 26%,#FFF6B8 0%,#FFE14D 22%,#FFC21A 46%,#FF9F0A 70%,#F07F00 100%)}

/* ===== ESHOPY prestavba (Erik 13. 10. 2026 „celú stránku prepracuj“, „chýba Aika + guľky“) ===== */
/* gule za sklom v sekciách: kontajner stojí na mieste (top:auto) tesne nad obsahom sekcie */
#preco-shoptet .obsah,#rozpis .obsah,#sprava .obsah,#postup .obsah{position:relative}
.sek-gule{position:absolute;left:-2%;right:-2%;z-index:-1;pointer-events:none}   /* pod textom aj pod sklom */
.sek-gule .gula{aspect-ratio:1;height:auto}
.sek-gule~*{position:relative;z-index:1}
.gule-preco{height:760px}.gule-rozpis{height:560px}.gule-sprava{height:440px}.gule-postup{height:760px}
/* nadpis karty s 3D ikonkou */
.h3-ik{display:flex;align-items:center;gap:14px}
.h3-ik img{width:48px;height:48px;flex:none;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(30,70,160,.22))}
/* čísla s 3D ikonkou */
.cislo-ik img{display:block;width:52px;height:52px;margin-bottom:10px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(30,70,160,.22))}
/* úvod: okno e-shopu, objednávka a Aika */
.es-vizual{position:relative;padding:10px 0 40px}
.es-vizual .po-okno{position:relative;width:88%;rotate:var(--r,3deg);container-type:inline-size}
.es{display:flex;flex-direction:column;gap:3cqw;padding:3.6cqw 4cqw 4.4cqw;background:linear-gradient(180deg,#FBFCFF,#F1F5FC);aspect-ratio:auto!important}
.es-lista{display:flex;align-items:center;gap:3cqw}
.es-logo{width:14cqw;height:3.6cqw;border-radius:1cqw;background:linear-gradient(115deg,#F2B060,#E2803A)}
.es-hladaj{flex:1;height:5cqw;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #E3EAF5}
.es-kosik{position:relative;display:grid;place-items:center;width:7cqw;height:7cqw}
.es-vizual .es-kosik img{width:100%;height:100%;object-fit:contain}
.es-kosik b{position:absolute;right:-1cqw;top:-1cqw;display:grid;place-items:center;width:3.6cqw;height:3.6cqw;border-radius:50%;background:#E2286F;font:800 2cqw/1 'Sora',sans-serif;color:#fff;box-shadow:0 0 0 .5cqw #fff}
.es-detail{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;align-items:center}
.es-foto{display:grid;place-items:center;aspect-ratio:1;border-radius:3cqw;background:radial-gradient(70% 70% at 50% 42%,#FFF4D9 0%,#FFD9A6 60%,#F7B877 100%);box-shadow:inset 0 0 0 1px #fff}
.es-vizual .es-foto img{width:74%;height:auto;filter:drop-shadow(0 1.6cqw 1.6cqw rgba(150,80,20,.3))}
.es-info{display:flex;flex-direction:column;align-items:flex-start;gap:1.8cqw}
.es-stitok{padding:1cqw 2cqw;border-radius:99px;background:#FFE3EE;font:800 1.9cqw/1 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#C2185B}
.es-nazov{display:grid;gap:1.2cqw;width:100%}.es-nazov i{display:block;height:2.4cqw;border-radius:99px;background:#2B3654;opacity:.85}.es-nazov i+i{width:70%;opacity:.35}
.es-hviezdy{font:400 2.8cqw/1 sans-serif;letter-spacing:.3cqw;color:#F2B060}
.es-velkosti{display:flex;gap:1.2cqw}
.es-velkosti i{display:grid;place-items:center;min-width:5.6cqw;height:5cqw;padding:0 1.2cqw;border-radius:1.4cqw;background:#fff;box-shadow:inset 0 0 0 1px #E3EAF5;font:800 2cqw/1 'Manrope',sans-serif;font-style:normal;color:#46506E}
.es-velkosti i.on{background:#2B3654;color:#fff;box-shadow:none}
.es-sklad{font:700 2.1cqw/1.2 'Manrope',sans-serif;color:#0D8A7C}
.es-sklad::before{content:"";display:inline-block;width:1.4cqw;height:1.4cqw;margin-right:1cqw;border-radius:50%;background:#2BD3A6;vertical-align:middle}
.es-btn{padding:2.2cqw 4.4cqw;border-radius:99px;background:linear-gradient(115deg,#F2B060,#E2803A);font:800 2.6cqw/1 'Manrope',sans-serif;color:#fff;box-shadow:0 1.2cqw 2.4cqw -1.2cqw rgba(226,128,58,.9)}
.es-objednavka{left:-8%;right:auto;bottom:-6%;rotate:-3deg}
.es-aika{position:absolute;z-index:4;right:-4%;bottom:-2%;width:23%;height:auto;filter:drop-shadow(0 16px 16px rgba(40,80,170,.28));--hl:6}
/* Ako to prebieha: Aika vedľa krokov */
.postup-aika{position:absolute;z-index:2;right:0;top:30%;width:150px;height:auto;filter:drop-shadow(0 16px 16px rgba(40,80,170,.28));--hl:6}
@media (max-width:1180px){.postup-aika{display:none}}
@media (max-width:980px){.es-vizual .po-okno{width:100%}.es-aika{width:20%;right:0;bottom:-8%}.gule-preco,.gule-rozpis{height:100%}}
@media (max-width:620px){.es-objednavka{left:-2%;bottom:-10%}.h3-ik img{width:40px;height:40px}}

/* ===== CHAT 3D: tlačidlo chatu ako 3D bublina, otvorený chat 3D krížik (Erik 13. 10. 2026 „tiež 3D“) ===== */
#ngChat .ngc-fab{background:url(/assets/web/ikony/chat-160.webp) center/88% no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 10px 12px rgba(70,60,200,.35))}
#ngChat .ngc-fab[aria-expanded=true]{background-image:url(/assets/web/ikony/zavriet-160.webp)!important;background-size:80%!important}
#ngChat .ngc-fab svg{opacity:0}
/* ===== /CHAT 3D ===== */

/* ===== Model spolupráce, úvod: tri 3D ikonky ako jedna skupina na sklenenom podstavci (Erik 13. 10. 2026 „upraviť spolu“) ===== */
.pod-ikony{display:block;aspect-ratio:1.3;max-width:540px;gap:0}
.pod-ikony::before{content:"";position:absolute;z-index:0;left:6%;right:6%;bottom:6%;height:24%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,.35) 70%,rgba(255,255,255,0));
  box-shadow:0 30px 40px -24px rgba(40,70,170,.45),inset 0 2px 0 rgba(255,255,255,.9)}
.pod-ikony::after{content:"";position:absolute;z-index:0;left:22%;right:22%;top:8%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(154,63,210,.28),rgba(21,146,230,.16) 60%,transparent);filter:blur(10px)}
.pod-ikony img{position:absolute;z-index:1;height:auto;filter:drop-shadow(0 22px 22px rgba(30,70,170,.3))}
.pod-ikony img:nth-child(1){left:3%;top:24%;width:40%;rotate:-9deg;z-index:2}
.pod-ikony img:nth-child(2){left:26%;top:26%;width:50%;scale:1;z-index:4}
.pod-ikony img:nth-child(3){right:3%;top:16%;width:38%;rotate:9deg;z-index:3}

/* ===== ČLENOVIA TÍMU pri ukážkach (Erik 13. 10. 2026 „aj členov podávaj niekde na web“): postava s menovkou ===== */
.clen{position:absolute;z-index:5;bottom:-14%;width:30%;margin:0;pointer-events:none;--hl:6}
.clen img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 18px rgba(40,70,160,.28))}
.clen figcaption{position:absolute;left:50%;bottom:-6px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 14px;border-radius:14px;white-space:nowrap;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 24px -14px rgba(30,70,160,.55),inset 0 0 0 1px #fff;
  font:700 11px/1.2 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#5B63DC}
.clen figcaption b{font:800 15px/1 'Sora',sans-serif;letter-spacing:-.01em;text-transform:none;color:var(--text)}
.clen-vlavo{left:-14%}
.clen-vpravo{right:-16%}
.clen-kontakt{width:25%;right:-8%;bottom:-18%}
@media (max-width:980px){.clen{width:25%;bottom:-16%}.clen-vlavo{left:0}.clen-vpravo,.clen-kontakt{right:0}}
@media (max-width:560px){.clen figcaption{padding:6px 10px;font-size:9.5px}.clen figcaption b{font-size:13px}}
@media (max-width:980px){.clen-vlavo figcaption{left:0;translate:0 0;align-items:flex-start}.clen-vpravo figcaption{left:auto;right:0;translate:0 0;align-items:flex-end}}

/* ===== O NÁS, Prečo noGrey: ten istý web šedý a farebný (Erik 13. 10. 2026 „nie guľky, iný obrázok“) ===== */
.me-obr{position:relative;aspect-ratio:1/.82;min-height:300px}
.me-obr .po-okno{position:absolute;width:74%}
.me-sede{left:0;top:4%;z-index:1}
.me-sede .po-plocha img{filter:grayscale(1) contrast(.82) brightness(1.08)}
.me-sede .po-plocha::after{content:"";position:absolute;inset:0;background:rgba(200,205,214,.25)}
.me-farba{right:0;bottom:6%;z-index:2}
.me-farba .po-plocha img{filter:saturate(1.15)}
.me-stitok-sede{background:#E4E7EC;color:#6B7280}
.me-stitok-farba{background:var(--grad);color:#fff;text-transform:none;letter-spacing:0;font-size:13px}
.me-ikona{position:absolute;z-index:3;left:4%;bottom:0;width:20%;height:auto;filter:drop-shadow(0 14px 16px rgba(60,50,170,.3));--hl:3}
@media (max-width:980px){.me-obr{max-width:560px;margin:10px auto 0}}

/* ===== ONLINE MARKETING úvod: 3D scéna rastu na sklenenom podstavci (Erik 13. 10. 2026 „prepracuj, 3D poriadne“) ===== */
.om-scena{position:relative;max-width:580px;margin:0 auto;padding:4% 0 10%}
.om-scena::before{content:"";position:absolute;z-index:0;left:4%;right:4%;bottom:4%;height:22%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.78),rgba(255,255,255,.35) 70%,rgba(255,255,255,0));box-shadow:0 30px 40px -24px rgba(40,70,170,.45),inset 0 2px 0 rgba(255,255,255,.9)}
.om-scena::after{content:"";position:absolute;z-index:0;left:18%;right:18%;top:2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(154,63,210,.26),rgba(43,211,166,.16) 60%,transparent);filter:blur(12px)}
.om-3d{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 26px 26px rgba(30,70,170,.28));--hl:5}
.om-stitok{position:absolute;z-index:2;right:2%;top:0;display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.92);
  box-shadow:0 14px 24px -14px rgba(30,70,160,.55),inset 0 0 0 1px #fff;font:700 12.5px/1 'Manrope',sans-serif;color:#46506E;--hl:7}
.om-stitok i{display:inline-block;width:18px;height:6px;border-radius:99px}
.om-stitok i.l1{background:linear-gradient(90deg,#1592E6,#C24BCB)}.om-stitok i.l2{margin-left:8px;background:#2BD3A6}
.om-karta{left:-4%;right:auto;bottom:6%;rotate:-3deg;z-index:3}
@media (max-width:560px){.om-stitok{font-size:11px;padding:7px 10px}.om-karta{left:0;bottom:2%}}
/* logo klienta v dlaždici: väčšie a ostré (Erik 13. 10. 2026 „logo daj väčšie, pôsobí rozmazane“) */
.pod-dlazdica{padding:10px}
.pod-dlazdica img{width:88%;height:88%;object-fit:contain;image-rendering:auto;transform:translateZ(0);backface-visibility:hidden}
/* slová nadpisov, ktoré skript rozdelí na kúsky, sa tiež nelámu pri spojovníku (e-shopov) */
.a-sl,.uvod .sl{white-space:nowrap}

/* ===== PPC: dvaja členovia tímu vpravo vedľa nadpisu Kanály (Erik 13. 10. 2026) ===== */
#co-spravime .obsah{position:relative}
.pp-postavy{position:absolute;z-index:3;right:0;top:-104px;width:420px;height:318px;pointer-events:none}
.pp-clen{position:absolute;bottom:0;margin:0;--hl:6}
.pp-clen img{display:block;height:300px;width:auto;filter:drop-shadow(0 16px 16px rgba(40,70,160,.26))}
.pp-clen-0{right:150px}
.pp-clen-1{right:0}
.pp-clen figcaption{position:absolute;left:50%;bottom:-8px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 12px;border-radius:14px;white-space:nowrap;
  background:rgba(255,255,255,.92);box-shadow:0 14px 24px -14px rgba(30,70,160,.55),inset 0 0 0 1px #fff;font:700 10.5px/1.2 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#5B63DC}
.pp-clen figcaption b{font:800 14px/1 'Sora',sans-serif;letter-spacing:-.01em;text-transform:none;color:var(--text)}
@media (max-width:1180px){.pp-postavy{display:none}}
@media (max-width:820px){.pp-postavy{display:block;position:relative;top:auto;right:auto;width:330px;height:270px;margin:0 auto 34px}.pp-clen img{height:250px}.pp-clen-0{right:118px}}
@media (max-width:820px){.pp-clen figcaption{padding:6px 9px;font-size:9px}.pp-clen figcaption b{font-size:12.5px}.pp-clen-0 figcaption{left:0;translate:0 0;align-items:flex-start}.pp-clen-1 figcaption{left:auto;right:0;translate:0 0;align-items:flex-end}.pp-postavy{width:340px}.pp-clen-0{right:150px}}

/* ===== ÚVODNÁ, Prečo noGrey: celý tím v rade pod kartou o ľuďoch a AI (Erik 13. 10. 2026) ===== */
.uvod-tim{position:absolute;z-index:4;left:0;right:0;bottom:-10%;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.ut{position:relative;margin:0 -10px;--hl:6}
.ut img{display:block;height:210px;width:auto;filter:drop-shadow(0 14px 14px rgba(40,70,160,.26))}
.ut-erik{z-index:2}.ut-erik img{height:236px}
.ut-1,.ut-3{z-index:1}
.ut figcaption{position:absolute;left:50%;bottom:-10px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:12px;white-space:nowrap;
  background:rgba(255,255,255,.94);box-shadow:0 12px 20px -12px rgba(30,70,160,.55),inset 0 0 0 1px #fff;font:700 9.5px/1.2 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#5B63DC;z-index:3}
.ut figcaption b{font:800 13px/1 'Sora',sans-serif;letter-spacing:-.01em;text-transform:none;color:var(--text)}
@media (max-width:980px){.uvod-tim{position:relative;bottom:auto;margin-top:16px}.pr-v{aspect-ratio:auto}}
@media (max-width:560px){.ut{margin:0 -14px}.ut img{height:150px}.ut-erik img{height:170px}.ut figcaption{padding:5px 7px;font-size:8px}.ut figcaption b{font-size:11px}}
/* tím pod kartou: na PC nižšie, aby nezakrýval text karty; na mobile karta v toku, tím pod ňou, menovky len s menom */
.uvod-tim{bottom:-34%}
@media (max-width:980px){.pr-karta{position:relative;top:auto;left:auto;right:auto}.uvod-tim{bottom:auto}}
@media (max-width:560px){.ut{margin:0 -9px}.ut figcaption{font-size:0;gap:0;padding:5px 8px}.ut figcaption b{font-size:11px}}
/* tím bez menoviek, ukotvený pod kartou (Erik 13. 10. 2026): vždy tesne pod textom karty, pri každej šírke */
.pr-karta .uvod-tim{position:absolute;left:-4%;right:-4%;top:calc(100% + 6px);bottom:auto;margin:0}
.pr-v{margin-bottom:250px}
@media (min-width:981px) and (max-width:1239px){.pr-v{margin-bottom:320px}}   /* tu je karta vyššia ako guľová plocha, tím siaha nižšie */
@media (max-width:980px){.pr-karta .uvod-tim{left:0;right:0}}
@media (max-width:560px){.pr-v{margin-bottom:180px}}

/* ===== MOBIL, ÚVODNÁ: úvod (Erik 13. 10. 2026 „mobile hero sa mi nepáči, prepracuj“, „prekop celú landing page na mobile“) =====
   karta v toku pod hlavičkou (nikdy pod logom), text vľavo ako na podstránkach, tlačidlá na celú šírku,
   čísla ako trojica pod čiarou, pod kartou scéna: dva skutočné weby klientov a Aika s bublinou */
@media (max-width:820px){
  .uvod{min-height:0;padding:100px 16px 292px}
  .uvod .karta{position:relative;left:auto;top:auto;translate:none;width:auto;max-width:560px;margin:0 auto;align-items:stretch;text-align:left;padding:26px 22px 22px}
  .uvod .kicker{font-size:11.5px;letter-spacing:.14em;line-height:1.6;text-wrap:wrap}
  .uvod .kicker .kz{display:block;height:0;overflow:hidden}
  .uvod h1{font-size:clamp(32px,9.4vw,44px);line-height:1.06;margin-top:14px}
  .uvod .podnadpis{font-size:16.5px;line-height:1.5;margin:14px 0 0;max-width:none}
  .uvod .tlacidla{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
  .uvod .tlacidla .pill{width:100%}
  .uvod .pod{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.45);font-size:12px;line-height:1.3;text-align:left}
  .uvod .pod>span{padding:0 8px;border-left:1px solid rgba(255,255,255,.35)}
  .uvod .pod>span:first-child{padding-left:0;border-left:0}
  .uvod .pod b{display:block;font-size:20px;margin:0 0 4px}
  /* scéna pod kartou: Aika vľavo (vpravo dole je tlačidlo četu), nad ňou bublina, vpravo dva weby klientov */
  .uvod .okno.ok-mob1,.uvod .okno.ok-mob2{display:block;left:auto;top:auto;height:auto;aspect-ratio:340/238}
  .uvod .okno.ok-mob1{right:14px;bottom:30px;width:min(62vw,330px);z-index:4;--r:4deg}
  .uvod .okno.ok-mob2{right:30px;bottom:148px;width:min(48vw,260px);z-index:3;--r:-5deg}
  .uvod .aika{left:6px;right:auto;top:auto;bottom:12px;width:104px}
  .uvod .bublina{display:block;left:16px;right:auto;top:auto;bottom:194px;white-space:normal;max-width:172px;font-size:13.5px;padding:9px 13px;border-radius:16px 16px 16px 4px}
  .uvod .gula.zlta:not(.mimo-mobil){display:none}   /* trčala spod spodného okraja karty */
}

/* ===== MOBIL, ÚVODNÁ: referencie ako pás kariet na posúvanie prstom (Erik 14. 10. 2026), ďalšia karta vykukuje, bodky pod pásom ===== */
.pas-bodky{display:none}
@media (max-width:620px){
  .ref .ref-mriezka{display:flex;gap:14px;margin:34px calc(-1 * clamp(16px,5vw,56px)) 0;padding:6px clamp(16px,5vw,56px) 50px;   /* dole miesto na tieň karty, inak ho pás oreže */
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(16px,5vw,56px);scrollbar-width:none}
  .ref .ref-mriezka::-webkit-scrollbar{display:none}
  .ref .ref-mriezka>.rk{flex:0 0 84%;scroll-snap-align:start}
  .ref .rk-telo{padding:18px 20px 20px}
  .ref .rk h3{font-size:19px}
  .ref .rk p{font-size:14.5px;line-height:1.55}
  .pas-bodky{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:-22px}
  .pas-bodky button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(79,91,213,.25);cursor:pointer;transition:width .3s,background .3s}
  .pas-bodky button.on{width:24px;background:linear-gradient(90deg,#1592E6,#9A3FD2)}
  .ref .ref-vsetky{margin-top:28px}
}

/* ===== MOBIL, ÚVODNÁ: služby ako kompaktné karty (Erik 14. 10. 2026): ikona vľavo, názov, text, termín a cena ako dva štítky,
   celá karta je odkaz, šípka vpravo hore namiesto „Detaily“ ===== */
@media (max-width:620px){
  #sluzby .sk-mriezka{gap:12px;margin-top:32px}
  #sluzby .sk{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px 18px 18px;border-radius:24px}
  #sluzby .sk-ik{grid-row:1 / span 3;width:58px;height:58px;margin:2px 0 0}
  #sluzby .sk h3{grid-column:2;font-size:19px;padding-right:24px}
  #sluzby .sk-text{grid-column:2;margin-top:6px;font-size:14.5px;line-height:1.55}
  #sluzby .sk-fakty{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding-top:12px}
  #sluzby .sk-fakty div{display:flex;align-items:baseline;gap:6px;padding:6px 11px 7px;border-radius:999px}
  #sluzby .sk-fakty dt{font-size:10px;letter-spacing:.12em}
  #sluzby .sk-fakty dd{margin:0;font-size:13px}
  #sluzby .sk-odkaz{display:none}
  #sluzby .sk::after{content:"";position:absolute;right:22px;top:27px;width:9px;height:9px;border:solid var(--k);border-width:2.5px 2.5px 0 0;border-radius:1px;rotate:45deg}
}

/* ===== ÚVODNÁ, značky: logá v dvoch radoch (web.js). PC: rady sa rozpustia do mriežky, kópie skryté.
   MOBIL (Erik 14. 10. 2026): dva rady log pomaly plynú proti sebe, okraje sa strácajú ===== */
.zn-rad{display:contents}
.zn-rad>.zn-dl{flex:0 0 calc((100% - (var(--st) - 1) * var(--mz)) / var(--st));min-width:0}
.zn-klon{display:none}
@keyframes zn-plyn{to{transform:translateX(-50%)}}
@media (max-width:620px){
  .znacky .zn-mriezka{display:block;margin:28px calc(-1 * clamp(16px,5vw,56px)) 0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
  .znacky .zn-rad{display:flex;width:max-content;animation:zn-plyn 40s linear infinite}
  .znacky .zn-rad-2{margin-top:4px;animation-duration:46s;animation-direction:reverse}
  .znacky .zn-rad>.zn-dl{flex:0 0 auto;width:auto;height:86px;padding:6px 22px}
  .znacky .zn-rad>.zn-klon{display:flex}
  .znacky .zn-dl.anim{--e:1!important}
  .znacky .zn-rad .zn-dl img{max-width:none;width:auto;height:auto;max-height:54px}
  .znacky .zn-rad .zn-dl img.zn-v{--plocha:4600;width:calc(sqrt(var(--plocha) * var(--ar)) * 1px);max-height:54px}
}
@media (max-width:620px) and (prefers-reduced-motion:reduce){
  .znacky .zn-mriezka{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .znacky .zn-rad{animation:none}
  .znacky .zn-rad>.zn-klon{display:none}
}

/* ===== O NÁS, tím: Aika ako šiesta (Erik 14. 10. 2026 „doplň Aiku“). 6 kariet: PC 6 v rade, tablet 3 + 3, mobil 2 + 2 + 2.
   Aika je nižšia a širšia postavička, preto menšia výška obrázka ===== */
@media (min-width:1101px){.tim{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}}
/* Aika (Erik 14. 10. 2026): o 45 % menšia, vyššie a levituje; centrovaná okrajmi, lebo levitácia používa translate */
.tim .tk-aika .tk-foto img{left:0;right:0;margin:0 auto;translate:none;bottom:50%;height:138px}
.tk-aika-tien{position:absolute;left:50%;bottom:calc(50% - 34px);width:76px;height:14px;margin-left:-38px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(170,90,30,.34),rgba(170,90,30,0));filter:blur(2px)}
.tk-aika-tien.lev{animation-name:tien-dych}
@media (max-width:620px){.tim .tk-aika .tk-foto img{height:110px}.tk-aika-tien{width:62px;margin-left:-31px;bottom:calc(50% - 28px)}}

/* ===== MOBIL, ÚVODNÁ: Ako pracujeme a medzery (Erik 14. 10. 2026) =====
   scéna troch okien pod krokmi je nižšia a okná väčšie, gule menšie a mimo okien; medzery medzi sekciami zo 160 na 112 px */
@media (max-width:620px){
  #postup .po-mriezka{gap:26px;margin-top:32px}
  #postup .po-vizual{aspect-ratio:1/.9;margin-top:6px}
  #postup .po-vizual .po-okno{width:66%}
  #postup .po-vizual .po-1{left:0;top:2%}
  #postup .po-vizual .po-2{left:17%;top:24%}
  #postup .po-vizual .po-3{left:34%;top:46%}
  #postup .po-vizual .gula.magenta-velka{left:76%!important;top:-6%!important;width:22%!important}
  #postup .po-vizual .gula.tyrkys{left:-3%!important;top:74%!important;width:16%!important}
  #postup .po-vizual .gula.zlta{left:90%!important;top:88%!important;width:7%!important}
}

/* ===== MOBIL, päta (Erik 14. 10. 2026): odkazy majú väčšiu plochu na ťuknutie (33 px, susedné sa neprekrývajú), vzhľad a rozostupy sa nemenia ===== */
@media (max-width:620px){.pata li a,.pata-spodok a{display:inline-block;padding-block:6px;margin-block:-6px}}

/* ===== Referencia Fanshop HK Dukla (Erik 14. 10. 2026): tmavá bordová scéna ako e-shop, žlté a bordové gule ===== */
.rk-p-duklashop{--sc:radial-gradient(70% 70% at 50% 42%,#7C2350 0%,#4A0D2B 58%,#2A0618 100%);--a0:#FFFCDA;--a1:#FCE34C;--a2:#E8B900;--a3:#C79A00;--b0:#EE9AB4;--b1:#A82A50;--b2:#6C1334;--b3:#4A0A23;--st:#8E1D42}
/* úvodná má 7 referencií: na PC a tablete sa siedma skryje, aby nezostala v rade sama; na mobile v páse ostanú všetky */
@media (min-width:621px){.ref .ref-mriezka>.rk:nth-child(7){display:none}}
/* tablet (dva stĺpce): posledná karta sama v rade sa roztiahne na celú šírku, obrázok vľavo a text vpravo (Erik 14. 10. 2026) */
@media (min-width:621px) and (max-width:1100px){
  .ref-mriezka>.rk.rk-sama{grid-column:1 / -1;flex-direction:row}
  .ref-mriezka>.rk.rk-sama .rk-scena{flex:0 0 52%;border-radius:26px 0 0 26px}
  .ref-mriezka>.rk.rk-sama .rk-telo{justify-content:center}
  .ref-mriezka>.rk.rk-sama .odkaz{margin-top:0}
}

/* ===== ESHOPY (/cennik-shoptet, Erik 14. 10. 2026): Shoptet podrobne v rozbaľovacej časti, vzhľad ako otázky ===== */
.sh-viac{margin-top:34px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.4));-webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1);
  box-shadow:inset 0 0 0 .8px rgba(255,255,255,.9),0 26px 50px -30px rgba(60,70,160,.45)}
.sh-viac>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;cursor:pointer;list-style:none;font:800 18px/1.35 'Sora',sans-serif;letter-spacing:-.01em;color:var(--text)}
.sh-viac>summary::-webkit-details-marker{display:none}
.sh-viac>summary:focus-visible{outline:3px solid #1A8FE3;outline-offset:3px;border-radius:24px}
.sh-viac>summary:hover .ot-plus{scale:1.08}
.sh-viac[open] .ot-plus{rotate:45deg}
.sh-obsah{padding:4px 24px 28px}
.sh-h{margin:34px 0 0;font:800 22px/1.25 'Sora',sans-serif;letter-spacing:-.02em;color:var(--text)}
.sh-obsah>.sh-h:first-child{margin-top:6px}
.sh-p{margin:8px 0 18px;font-size:16px;line-height:1.6;color:var(--tlm)}
.sh-obsah .sk-mriezka{margin-top:0}
@media (max-width:560px){.sh-viac>summary{padding:18px;font-size:16.5px}.sh-obsah{padding:4px 14px 20px}.sh-h{font-size:19px}}
/* mobil: balíky (Eshopy aj Cenník) ako pás na posúvanie ako referencie (Erik 14. 10. 2026) */
@media (max-width:620px){
  .cenovky{display:flex;gap:14px;max-width:none;margin:30px calc(-1 * clamp(16px,5vw,56px)) 0;padding:14px clamp(16px,5vw,56px) 50px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(16px,5vw,56px);scrollbar-width:none;align-items:stretch;padding-top:26px;margin-top:18px}   /* hore miesto na odznak Najčastejšia voľba */
  .cenovky::-webkit-scrollbar{display:none}
  .cenovky>*{flex:0 0 84%;scroll-snap-align:start}
}

/* ===== MOBIL, podstránky: karty v mriežke .sk-mriezka kompaktne ako služby na úvodnej (Erik 14. 10. 2026):
   ikona vľavo, vpravo názov, text a prípadne cena; len karty s ikonou, balíky (.cenovky) nie ===== */
@media (max-width:620px){
  .sk-mriezka{gap:12px}
  .sk-mriezka>.sk:has(>.sk-ik){display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px 18px 18px;border-radius:24px}
  .sk-mriezka>.sk:has(>.sk-ik)>.sk-ik{grid-row:1 / span 4;width:58px;height:58px;margin:2px 0 0}
  .sk-mriezka>.sk:has(>.sk-ik)>*:not(.sk-ik){grid-column:2}
  .sk-mriezka>.sk:has(>.sk-ik) h3{font-size:19px}
  .sk-mriezka>.sk:has(>.sk-ik) .sk-text{margin-top:6px;font-size:14.5px;line-height:1.55}
}

/* ===== MOBIL, ÚVODNÁ: úvod v2 (Erik 14. 10. 2026 „stále sa s tým nestotožňujem“) =====
   hore scéna: skutočné weby klientov v skle, Aika s bublinou a gule; pod ňou nadpis bez skleneného panela
   (tmavý prechod ako nadpisy sekcií), jedno farebné hlavné tlačidlo, biele vedľajšie, čísla ako sklenené štítky */
@media (max-width:820px){
  .uvod{padding:384px 20px 30px}
  .uvod .gula{display:none}
  .uvod .gula.gm1,.uvod .gula.gm2,.uvod .gula.gm3,.uvod .gula.gm4{display:block}
  .uvod .gula.gm1{left:auto;right:-26px;top:92px;width:150px;height:150px}
  .uvod .gula.gm2{left:14px;top:108px;width:58px;height:58px}
  .uvod .gula.gm3{left:-22px;top:284px;width:96px;height:96px}
  .uvod .gula.gm4{left:auto;right:96px;top:318px;width:44px;height:44px}
  .uvod .okno.ok-mob1{left:7%;right:auto;top:150px;bottom:auto;width:70vw;max-width:360px;--r:-4deg;z-index:4}
  .uvod .okno.ok-mob2{left:auto;right:6%;top:112px;bottom:auto;width:50vw;max-width:260px;--r:5deg;z-index:3}
  .uvod .aika{left:auto;right:3%;top:224px;bottom:auto;width:96px;z-index:8}
  .uvod .bublina{left:auto;right:92px;top:252px;bottom:auto;max-width:150px;font-size:12.5px;padding:8px 11px;border-radius:14px 14px 4px 14px;z-index:9}
  .uvod .karta.sklo{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-radius:0;max-width:560px}
  .uvod .karta.sklo::before,.uvod .karta.sklo::after{display:none}
  .uvod .karta.sklo .kicker{color:#4F5BD5;text-shadow:none}
  .uvod .karta.sklo h1{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;padding-bottom:.06em}
  .uvod .karta.sklo .podnadpis{color:var(--tlm);text-shadow:none;font-weight:500}
  .uvod .tlacidla .pill-biela{background:linear-gradient(115deg,#1592E6 0%,#5B63DC 55%,#9A3FD2 100%);color:#fff;text-shadow:0 1px 2px rgba(20,30,120,.35);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 12px 24px -12px rgba(70,60,200,.6)}
  .uvod .tlacidla .pill-sklo{background:#fff;color:var(--text);text-shadow:none;box-shadow:inset 0 0 0 1px rgba(79,91,213,.18),0 10px 24px -14px rgba(30,70,160,.45)}
  .uvod .karta.sklo .pod{border-top:0;padding-top:0;margin-top:18px;gap:8px;text-shadow:none;color:var(--tlm)}
  .uvod .karta.sklo .pod>span{padding:10px 10px 11px;border-left:0;border-radius:16px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px #fff,0 10px 22px -16px rgba(40,90,190,.45);text-shadow:none}
  .uvod .karta.sklo .pod b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;width:fit-content}
}
/* úvod v2 bez skla (Erik 14. 10. 2026 „to sklo sa mi nepáči“): weby ako čisté snímky bez skleneného rámu, čísla bez kartičiek */
@media (max-width:820px){
  .uvod .okno.ok-mob1,.uvod .okno.ok-mob2{padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:14px;
    box-shadow:0 0 0 1px rgba(255,255,255,.9),0 24px 40px -18px rgba(30,50,130,.5)}
  .uvod .okno.ok-mob1 .okno-bar,.uvod .okno.ok-mob2 .okno-bar{display:none}
  .uvod .okno.ok-mob1 img,.uvod .okno.ok-mob2 img{height:100%;border-radius:14px}
  .uvod .karta.sklo .pod>span{background:none;box-shadow:none;border-radius:0;padding:0 10px;border-left:1px solid rgba(79,91,213,.2)}
  .uvod .karta.sklo .pod>span:first-child{padding-left:0;border-left:0}
}
/* úvod v4 (Erik 14. 10. 2026 „fotky iných webov nie, niečo iné“): nad nadpisom Aika v strede a levitujúce 3D ikony služieb; weby klientov na mobile skryté */
.uv-scena-mob{display:none}
@media (max-width:820px){
  .uvod .okno.ok-mob1,.uvod .okno.ok-mob2{display:none}
  .uv-scena-mob{display:block;position:absolute;inset:0;z-index:6;pointer-events:none}
  .uvs{position:absolute;height:auto;filter:drop-shadow(0 14px 14px rgba(40,70,160,.25))}
  .uvs-web{left:6%;top:112px;width:86px}
  .uvs-eshop{right:6%;top:106px;width:92px}
  .uvs-dizajn{right:6%;top:256px;width:78px}
  .uvs-marketing{left:8%;top:292px;width:70px}
  .uvod .aika{left:calc(50% - 60px);right:auto;top:136px;width:120px}
  .uvod .bublina{left:4%;right:auto;top:206px;max-width:132px;border-radius:14px 14px 4px 14px}
  .uvod .gula.gm1{left:calc(50% - 86px);right:auto;top:176px;width:172px;height:172px}
  .uvod .gula.gm2{left:41%;top:110px;width:30px;height:30px}
  .uvod .gula.gm3{left:-26px;top:338px;width:70px;height:70px}
  .uvod .gula.gm4{left:auto;right:30%;top:340px;width:34px;height:34px}
}
/* úvod v5 (Erik 14. 10. 2026 „asi len Aiku“): nad nadpisom len Aika v strede, za ňou ružová guľa, bublina vľavo; gule mimo textu */
@media (max-width:820px){
  .uvod{padding-top:380px}
  .uvod .aika{left:calc(50% - 72px);top:116px;width:144px}
  .uvod .bublina{left:4%;top:262px;max-width:162px}
  .uvod .gula.gm1{left:calc(50% - 98px);top:170px;width:196px;height:196px}
  .uvod .gula.gm2{left:auto;right:12%;top:128px;width:40px;height:40px}
  .uvod .gula.gm3{left:-24px;top:270px;width:64px;height:64px}
  .uvod .gula.gm4{left:auto;right:7%;top:296px;width:30px;height:30px}
}

/* ===== MOBIL, úvod podstránok ako úvod webu (Erik 14. 10. 2026 „toto prerob“ pri Referenciách): bez skleneného panela,
   nadpis v prechode, tmavý text, farebné hlavné tlačidlo, čísla v prechode; gule mimo textu, obrázok stránky ostáva pod textom ===== */
@media (max-width:820px){
  .pod-uvod{padding-top:112px}
  .pod-uvod .pod-sklo{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-radius:0}
  .pod-uvod .pod-sklo::before,.pod-uvod .pod-sklo::after{display:none}
  .pod-uvod .pod-sklo .drobky{color:var(--tlm);text-shadow:none!important}
  .pod-uvod .pod-sklo .drobky a{color:#4F5BD5}
  .pod-uvod .pod-sklo h1,.pod-uvod .pod-sklo h1 *{text-shadow:none!important}
  .pod-uvod .pod-sklo h1{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
  .pod-uvod .pod-sklo .podnadpis{color:var(--tlm);font-weight:500;text-shadow:none!important}
  .pod-uvod .pod-sklo .tlacidla .pill-biela{background:linear-gradient(115deg,#1592E6 0%,#5B63DC 55%,#9A3FD2 100%);color:#fff;text-shadow:0 1px 2px rgba(20,30,120,.35);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 12px 24px -12px rgba(70,60,200,.6)}
  .pod-uvod .pod-sklo .tlacidla .pill-sklo{background:#fff;color:var(--text);text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px rgba(79,91,213,.18),0 10px 24px -14px rgba(30,70,160,.45)}
  .pod-uvod .pod-sklo .cisla{border-top-color:rgba(79,91,213,.18)}
  .pod-uvod .pod-sklo .cisla b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none!important}
  .pod-uvod .pod-sklo .cisla span{color:var(--tlm);text-shadow:none!important}
  .pod-uvod .pod-gule .gula{display:none}
  .pod-uvod .pod-gule .gula:nth-child(1){display:block;left:auto!important;right:-34px;top:auto!important;bottom:6%;width:96px!important}
  .pod-uvod .pod-sklo .clanok-meta,.pod-uvod .pod-sklo .clanok-meta *{color:var(--tlm);text-shadow:none!important}
  .pod-uvod .pod-gule .gula:nth-child(2){display:block;left:-26px!important;top:auto!important;bottom:34%;width:46px!important}
}

/* ===== MOBIL, Všetky referencie a Blog (Erik 14. 10. 2026): nízke karty, obrázok vľavo, text vpravo; text sa neskracuje ===== */
@media (max-width:620px){
  :is(#projekty,#clanky) .ref-mriezka{gap:12px}
  :is(#projekty,#clanky) .ref-mriezka>.rk{display:grid;grid-template-columns:38% minmax(0,1fr);border-radius:22px}
  :is(#projekty,#clanky) .rk-scena{aspect-ratio:auto;height:100%;min-height:150px;border-radius:22px 0 0 22px}
  :is(#projekty,#clanky) .rk .okno{left:7%;right:7%;top:50%;translate:0 -50%}
  :is(#projekty,#clanky) .rk-telo{padding:14px 14px 14px 15px}
  :is(#projekty,#clanky) .rk-stitok{font-size:10.5px;letter-spacing:.1em}
  :is(#projekty,#clanky) .rk h3{font-size:16px;line-height:1.25;margin-top:6px}
  :is(#projekty,#clanky) .rk p{font-size:13.5px;line-height:1.45;margin-top:6px}
  :is(#projekty,#clanky) .rk .odkaz{padding-top:8px;font-size:13.5px}
}

/* nadpis len pre čítačky a roboty (GEO / SEO report 14. 10. 2026: nadpisy bez preskočenej úrovne na Referenciách a Blogu) */
.len-citacky{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* GEO / SEO report nogrey.sk (14. 10. 2026): na mobile žiadne písmo pod 12 px (nadpis nad nadpisom, štítky služieb) */
@media (max-width:820px){.uvod .kicker{font-size:12px;letter-spacing:.12em}}
@media (max-width:620px){#sluzby .sk-fakty dt{font-size:12px;letter-spacing:.06em}}
@media (max-width:620px){:is(#projekty,#clanky) .rk-stitok{font-size:12px;letter-spacing:.06em}}
/* GEO / SEO report: na mobile odkazy v kartách a kontaktoch s plochou aspoň 24 px (WCAG 2.2) */
@media (max-width:620px){a.sk-odkaz,.krajina li a{display:inline-block;padding-block:4px}}

/* ===== GEO / SEO report (Erik 14. 10. 2026): maketa reportu v sklenenom okne, kruh skóre a pruhy oblastí, pred a po ===== */
.po-okno:has(.geo){container-type:inline-size}
.po-plocha.geo{padding:5cqw 5.5cqw;background:linear-gradient(160deg,#F5F9FF,#F3EEFF);border-radius:calc(11 * var(--u,1px));display:flex;flex-direction:column;gap:4cqw}
.geo-hore{display:grid;grid-template-columns:30cqw 1fr;gap:5cqw;align-items:center}
.geo-kruh{--f:#119C7A;position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;border-radius:50%;background:conic-gradient(var(--f) calc(var(--s) * 3.6deg),#E2E8F4 0);align-content:center}
.geo-kruh::after{content:"";position:absolute;inset:13%;border-radius:50%;background:#fff;box-shadow:inset 0 2px 6px rgba(30,60,150,.12)}
.geo-kruh b{position:relative;z-index:1;font:800 9cqw/1 'Sora',sans-serif;color:var(--f);text-align:center}
.geo-kruh small{position:relative;z-index:1;display:block;margin-top:.6cqw;font:700 2.6cqw/1.2 'Manrope',sans-serif;color:var(--tlm);letter-spacing:.04em}
.geo-kruh.pred{--f:#E2932E}
.geo-oblasti{display:flex;flex-direction:column;gap:2.2cqw}
.geo-oblasti span{display:block}
.geo-oblasti i{display:block;font:700 2.9cqw/1.2 'Manrope',sans-serif;font-style:normal;color:var(--text)}
.geo-oblasti em{display:block;height:1.6cqw;margin-top:.9cqw;border-radius:9px;background:linear-gradient(90deg,#119C7A var(--s),#E2E8F4 var(--s))}
.geo-oblasti em.stred{background:linear-gradient(90deg,#E2932E var(--s),#E2E8F4 var(--s))}
.geo-nalez{display:flex;flex-wrap:wrap;align-items:center;gap:1.6cqw;padding:3.2cqw 3.6cqw;border-radius:3cqw;background:#fff;box-shadow:inset 0 0 0 1px #fff,0 2cqw 4cqw -2.4cqw rgba(30,60,150,.4)}
.geo-nalez b{flex-basis:100%;font:800 3.3cqw/1.3 'Sora',sans-serif;color:var(--text)}
.geo-zav,.geo-kto{padding:.6cqw 2cqw;border-radius:99px;font:700 2.5cqw/1.4 'Manrope',sans-serif}
.geo-zav{background:#E2932E;color:#fff}.geo-kto{background:#EEF1FF;color:#4F5BD5}
.geo-karta{left:-6%;right:auto;bottom:-8%;rotate:-3deg;z-index:3}
.geo-pp{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4cqw;padding:4cqw 2cqw}
.geo-pp p{margin:2.4cqw 0 0;text-align:center;font:700 3.6cqw/1.3 'Manrope',sans-serif;color:var(--text)}
.geo-pp .geo-kruh b{font-size:11cqw}.geo-pp .geo-kruh small{font-size:3.2cqw}
.geo-sipka{font:800 9cqw/1 'Sora',sans-serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:620px){.geo-karta{left:-2%;bottom:-12%}}
@media (max-width:620px){#sebe .clen{display:none}}   /* na mobile by postava zakryla skóre pred opravami */