/* Stránka /ai v štýle DECK. Zdroj: redizajn-2026/ai-pre-firmy/06-deck/index.html, zostavené skriptom zostav-ai.py; neupravovať ručne. */
/* Návrh nogrey.sk/ai v štýle predlohy DECK: svetlá obloha, matné 3D gule, matné sklo s 3D hranou, jemná levitácia.
   Krok 1: úvod a sekcia 2. Farby gúľ presne podľa predlohy (odmerané pri cvičnom DECK). */
:root{
  --text:#141B33; --tlm:#56607A; --azur:#1A8FE3;
  --oblaha:#BEDFFD;
}
*{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}

/* ===== GULE (spoločné) ===== */
.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}
@keyframes levituj{0%,100%{translate:0 0}50%{translate:0 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 ===== */
.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)}

/* ===== HLAVIČKA ===== */
.hlava{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:28px;padding:22px clamp(16px,4vw,56px)}
/* logo z webu nogrey.sk (assets/img/logo-nogrey.svg), rovnaké ako v päte */
.logo{display:flex;align-items:center;text-decoration:none}
.hlava .logo img{display:block;height:31px;width:auto}
/* guľka času pred písmenom „o“ v logu (stred „o“ je na 25,2 % šírky a 63 % výšky loga) */
.hlava .logo{position:relative}
.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)}
/* tieň pod guľkou v logu */
.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:26px;margin-left:auto;font:600 15px/1 'Manrope',sans-serif}
.menu a{text-decoration:none;color:#2B3654}
.menu a:hover{color:var(--azur)}
.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)}
.hlava .pill{height:44px;padding:0 20px;font-size:14.5px}

/* ===== 1 ÚVOD (súradnice gúľ prevzaté z DECK, jednotka --u) ===== */
.uvod{position:relative;min-height:max(100svh,720px);overflow:hidden;
  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{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(70 * 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)}
.uvod h1{font-weight:800;font-size:clamp(38px,calc(84 * var(--u)),92px);line-height:1.02;margin:22px 0 0;text-shadow:0 2px 24px rgba(40,70,170,.25)}
.uvod h1 span{display:block}
.uvod .podnadpis{font:600 clamp(17px,calc(25 * var(--u)),27px)/1.45 'Manrope',sans-serif;max-width:640px;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{margin-top:14px;font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(30,60,150,.35)}
.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:calc(var(--cx) + 500 * var(--u));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}

/* ===== 2 BEŽNÝ DEŇ (štýl snímky „Features“) ===== */
.den{position:relative;overflow:hidden;padding:clamp(72px,9vw,128px) clamp(16px,5vw,56px);background:radial-gradient(42% 55% at 0% 0%,#F7CDF1 0%,rgba(247,205,241,0) 100%),radial-gradient(40% 50% at 100% 8%,#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%)}
.den .obsah{position:relative;z-index:2;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.den .kicker{color:#3A6FD8}
.den h2{font-weight:800;font-size:clamp(34px,4.2vw,58px);line-height:1.05;margin:16px 0 0;background:linear-gradient(115deg,#1592E6 0%,#5B63DC 38%,#9A3FD2 72%,#C24BCB 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em;width:fit-content}
.den .uvodny{font-size:18px;line-height:1.6;color:var(--tlm);margin-top:18px;max-width:520px}
.den ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px;max-width:520px}
.den li{position:relative;padding-left:36px;font-size:16.5px;line-height:1.5;color:#2B3654}
/* odrážka: fajka 3D z hmoty (sada v2b), rovnaká ako „Vy rozhodnete“, stred na prvom riadku textu */
.den li::before{content:"";position:absolute;left:0;top:0;width:25px;height:25px;
  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))}
.den .zaver{margin-top:28px;padding-top:22px;border-top:1px solid #D6E3F5;font:800 clamp(20px,2vw,26px)/1.25 'Sora',sans-serif;max-width:520px}
.den .zaver span{display:block;font:500 16px/1.55 'Manrope',sans-serif;color:var(--tlm);margin-top:8px}

/* Sekcia 2, návrh 1 (Erik): sklenená karta s návrhom odpovede pred guľami */
.v1{position:relative;aspect-ratio:1/.92}
.v1 .gula{aspect-ratio:1;height:auto}
.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}
.karta-app{position:absolute;left:9%;right:9%;top:22%;padding:30px 32px;color:var(--text)}
.app-hlava{display:flex;align-items:center;gap:14px}
.app-hlava img{flex:none;width:52px;height:52px;aspect-ratio:1;object-fit:cover;object-position:50% 12%;border-radius:50%;background:#DDF3FF;box-shadow:inset 0 0 0 2px #fff}
.app-hlava b{display:block;font:800 17px/1.2 'Sora',sans-serif}
.app-hlava span{font-size:13.5px;color:var(--tlm)}
.stitok-mata{margin-left:auto;font:700 12px/1 'Manrope',sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#0D6E66;background:#CFF6EA;padding:8px 12px;border-radius:999px}
.app-nazov{font:800 22px/1.2 'Sora',sans-serif;margin-top:22px}
.app-text{font-size:16px;line-height:1.6;color:#2B3654;margin-top:10px}
.app-tl{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.app-tl .pill{height:44px;padding:0 20px;font-size:15px}
.pill-mata{background:linear-gradient(180deg,#3FD9BE,#0E9F97);color:#fff;text-shadow:0 1px 2px rgba(0,70,70,.35);box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 10px 18px -10px rgba(20,170,160,.7)}
.pill-tlmena{background:rgba(255,255,255,.55);color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}


/* ===== 3 PRE KOHO (návrh 1: štyri farebné fotokarty) ===== */
/* matné gule s ikonou (ako vo „Features“) */
.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}

.pk{position:relative;overflow:hidden;padding:110px 56px 110px;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%);border-bottom:8px solid #fff}
.pk-obsah{position:relative;max-width:1240px;margin:0 auto}
.hlavicka{max-width:760px}
.pk h2{font-weight:800;font-size:56px;line-height:1.05;margin:16px 0 0;width:fit-content;
  background:linear-gradient(115deg,#1592E6 0%,#5B63DC 38%,#9A3FD2 72%,#C24BCB 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.pk h3{font:800 20px/1.25 'Sora',sans-serif;color:var(--text)}
.veta{margin-top:56px;text-align:center;font:800 30px/1.25 'Sora',sans-serif;color:var(--text);text-wrap:balance}
.veta span{background:linear-gradient(115deg,#1592E6 0%,#9A3FD2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.riadok{display:flex;gap:12px;align-items:flex-start;margin-top:14px}
.riadok b{display:block;font:800 14.5px/1.2 'Sora',sans-serif}
.riadok p{font-size:14.5px;line-height:1.5;color:var(--tlm);margin-top:3px}
.mini{width:22px;height:22px}

/* A fotokarty */
.a-mriezka{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.fk{position:relative;z-index:1;background:rgba(255,255,255,.78);border-radius:26px;padding:0 0 22px;box-shadow:inset 0 0 0 1px #fff,0 26px 50px -32px rgba(60,70,160,.45);overflow:hidden}
.fk-foto{position:relative;height:296px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.fk-foto img{height:234px;width:auto;position:relative;z-index:1}
.fk-ruzova .fk-foto{background:radial-gradient(70% 70% at 50% 42%,#FFE6DF 0%,#FBC6BF 60%,#F2A8A6 100%)}
.fk-nebo .fk-foto{background:radial-gradient(70% 70% at 50% 42%,#DDF3FF 0%,#A9DAFB 60%,#7DC2F4 100%)}
.fk-fialova-k .fk-foto{background:radial-gradient(70% 70% at 50% 42%,#EDE0FF 0%,#CDB4F8 60%,#A88CEE 100%)}
.fk-broskyna .fk-foto{background:radial-gradient(70% 70% at 50% 42%,#FFF4D9 0%,#FFD9A6 60%,#F7B877 100%)}
.fk-stitok{position:absolute;left:14px;top:14px;z-index:2;font:700 12.5px/1 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.24);padding:8px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:0 1px 3px rgba(60,40,90,.35)}
.fk h3{padding:18px 20px 0}
.fk .riadok{padding:0 20px}

@media (max-width:980px){
  .pk{padding:72px 16px}
  .pk h2{font-size:clamp(34px,8vw,52px)}
  .a-mriezka{grid-template-columns:1fr 1fr}
  .veta{font-size:24px}
  .a-mriezka>.gula{display:none}
}
@media (max-width:560px){.a-mriezka{grid-template-columns:1fr}}

.pk .kicker{color:#3A6FD8}
.pk .uvodny{font-size:18px;line-height:1.6;color:var(--tlm);margin-top:18px}

/* Fotokarty (Erik): riadky „AI pripraví“ a „Vy rozhodnete“ v jednej línii naprieč kartami, viac vzduchu.
   Karty zdieľajú riadky mriežky (subgrid), ikona je pri nadpise riadku, text pod ním na celú šírku. */
.a-mriezka{grid-auto-rows:auto;gap:0 26px;row-gap:34px}
.fk{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;padding-bottom:30px}
.fk h3{padding:26px 26px 0;font-size:21px;line-height:1.25}
.fk .riadok{display:grid;grid-template-columns:28px 1fr;column-gap:10px;row-gap:8px;align-items:center;align-content:start;padding:0 26px;margin-top:22px}
.fk .riadok>div{display:contents}
.fk .riadok b{font-size:15.5px}
.fk .riadok p{grid-column:1 / -1;margin:0;font-size:15px;line-height:1.6}
@media (max-width:1199px){.a-mriezka{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.a-mriezka{grid-template-columns:1fr}}


/* Fotokarty (Erik): väčšie postavy, môžu pretŕčať nad kartu; rola ako farebný nadtitul pri nadpise */
.fk{overflow:visible}
.fk-foto{overflow:visible;border-radius:26px 26px 0 0}
.fk-foto img{position:absolute;left:50%;bottom:0;translate:-50% 0;height:372px;width:auto;z-index:2;filter:drop-shadow(0 10px 14px rgba(40,50,120,.22))}
/* medzera nad kartou ako okraj karty, nie medzera mriežky: tú si karty so zdieľanými riadkami dedia a natiahla by jednoriadkové nadpisy */
.a-mriezka{margin-top:0;row-gap:0}
.fk{margin-top:120px}
.fk-rola{display:block;margin-bottom:8px;font:700 12.5px/1 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.fk-ruzova .fk-rola{color:#C9466A}.fk-nebo .fk-rola{color:#1874C9}.fk-fialova-k .fk-rola{color:#7F38C8}.fk-broskyna .fk-rola{color:#B8601F}
@media (max-width:560px){.fk-foto img{height:340px}
  /* jeden stĺpec: karty nie sú vedľa seba, zarovnanie riadkov netreba (inak sa nadpis natiahne na výšku najdlhšieho) */
  .fk{display:block}}


/* ===== 4 ČO POSTAVÍME (návrh 2: farebné karty) ===== */
.s-text{font-size:15px;line-height:1.55;color:var(--tlm);margin-top:10px}
.s-priklad{margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.6);font-size:14.5px;line-height:1.5;color:#2B3654}
.s-priklad b{display:block;font:800 12px/1 'Sora',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#0E9F97;margin-bottom:6px}
.odkaz{display:inline-block;margin-top:14px;font:700 14.5px/1.3 'Manrope',sans-serif;color:#4F5BD5;text-decoration:none}
.odkaz:hover{text-decoration:underline}

/* karty Čo postavíme: svetlé sklo ako karty v Ako začneme (Erik 12. 10.: „nechcem to extrémne farebné“), tmavé písmo,
   farba len v matnej guli s ikonou, v nadpise, v štítku „Príklad“ a v odkaze */
.s2-mriezka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto auto 22px auto auto 1fr auto auto;column-gap:22px;margin-top:56px}
.s2k{position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:30px 30px 28px;color:var(--text);
  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)}
/* farba karty: --k a --k2 pre nadpis a odkaz (sýte, čitateľné na svetlom), --s pre matnú guľu */
.s2-modra{--k:#0A57C9;--k2:#2E7BEA;--s:radial-gradient(78% 78% at 32% 26%,#74E0FB 0%,#5ACFF9 30%,#36B4F3 56%,#1A98EC 78%,#0E86E3 100%)}
.s2-broskyna{--k:#B4531A;--k2:#E0862E;--s:radial-gradient(80% 80% at 32% 26%,#FFF1D2 0%,#FDD08A 28%,#F5AE5E 56%,#EC944A 80%,#E2803A 100%)}
.s2-mata{--k:#06757F;--k2:#0A8F9E;--s:radial-gradient(70% 70% at 34% 24%,#8BEFD3 0%,#68E3C6 28%,#45D7C2 54%,#22C8BF 78%,#13B9BC 100%)}
.s2-fialova-k{--k:#6A1FB8;--k2:#A83CC8;--s:radial-gradient(80% 80% at 30% 24%,#FFC8FE 0%,#E9A0F4 30%,#C76DE0 60%,#9D45CD 100%)}
.s2-nebo{--k:#1F63C9;--k2:#3D8FE6;--s:radial-gradient(80% 80% at 30% 24%,#8AF7FE 0%,#6EE8FB 18%,#45C4F0 40%,#1E9BE5 68%,#0B86DC 100%)}
.s2-ruzova{--k:#A8287F;--k2:#D24BAE;--s:radial-gradient(80% 80% at 30% 24%,#FFD2F2 0%,#F7AEE0 26%,#EE8CCB 50%,#DC62B4 76%,#BC4598 100%)}
/* malé karty: riadky ikona, nadpis, text, príklad, odkaz zdieľajú mriežku, takže príklady aj odkazy sú v riadku v jednej línii */
.s2-mala{display:grid;grid-row:span 5;grid-template-rows:subgrid}
@media (min-width:1101px){
  .s2-mriezka>.s2-mala:nth-child(2){grid-column:2;grid-row:1 / span 5}
  .s2-mriezka>.s2-mala:nth-child(3){grid-column:3;grid-row:1 / span 5}
  .s2-mriezka>.s2-mala:nth-child(4){grid-column:2;grid-row:7 / span 5}
  .s2-mriezka>.s2-mala:nth-child(5){grid-column:3;grid-row:7 / span 5}
}
.s2-velka{grid-column:1;grid-row:1 / span 11;display:flex;flex-direction:column;padding:34px 34px 32px}
/* 3D ikonka z hmoty (sada v2b): levituje, pod ňou tesný tieň dotyku a širší opar vo farbe karty */
.s2-gw{position:relative;width:92px;height:92px;margin:-8px 0 26px -6px;z-index:1}
.s2-velka .s2-gw{width:120px;height:120px;margin:-10px 0 30px -10px}
.s2-ik3d{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))}
.s2-tien{position:absolute;left:50%;top:calc(100% - 2px);width:58%;height:10px;translate:-50% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(15,50,140,.42),rgba(15,50,140,0));filter:blur(2px)}
.s2-tien.lev{animation-name:tien-dych}
.s2-gw::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)}
.s2k h3{align-self:start;justify-self:start;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}
.s2-velka h3{font-size:32px;line-height:1.1}
@media (min-width:1101px){.s2-mala h3{align-self:end}}
.s2k .s-text{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--tlm)}
/* príklad: svetlejšie vnorené sklo, štítok vo farbe karty */
.s2-priklad{align-self:stretch;margin-top:22px;padding:14px 16px 15px;border-radius:18px;font:600 14.5px/1.5 'Manrope',sans-serif;color:var(--text);
  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)}
.s2-priklad b{display:block;margin-bottom:5px;font:800 11px/1.2 'Sora',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--k)}
.s2-odkaz{justify-self:start;align-self: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}
.s2-odkaz:hover{text-decoration-color:var(--k)}
.s2-odkaz:focus-visible{outline:3px solid var(--k);outline-offset:3px;border-radius:4px}
/* vysoká karta: ukážka automatizácie dopytu ako sklenená karta s tromi krokmi pod sebou, posledný je hotový návrh */
.s2-tok{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;margin:30px 0 8px}
.s2-tok-k{margin-bottom:4px;font:800 11px/1.2 'Sora',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--k)}
.sklo.s2-app{padding:10px 22px;border-radius:24px}
.sklo.s2-app::after{border-radius:18px}
/* zvislá čiara cez stredy gúľ: od stredu prvej po stred poslednej */
.s2-app-ciara{position:absolute;left:46px;top:46px;bottom:46px;width:2px;margin-left:-1px;border-radius:2px;
  background:linear-gradient(180deg,#36B4F3 0%,#45D7C2 100%);opacity:.45}
.s2-app-krok{position:relative;display:flex;align-items:center;gap:14px;padding:12px 0}
.s2-app-t{min-width:0}
.s2-app-t b{display:block;font:700 16px/1.3 'Sora',sans-serif;letter-spacing:-.01em;color:var(--text)}
.s2-app-t i{display:block;margin-top:3px;font:600 14px/1.35 'Manrope',sans-serif;font-style:normal;color:var(--tlm)}
.s2-mg3d{flex:none;position:relative;z-index:1;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(20,60,150,.22))}
.s2-hotovo .s2-app-t b{color:#06757F}
.s2-velka .s2-odkaz{margin-top:22px}
/* široká karta: guľa, nadpis s textom, príklad */
.s2-siroka{grid-column:1 / -1;grid-row:12;margin-top:22px;display:grid;grid-template-columns:92px minmax(0,1.15fr) minmax(0,1fr);gap:0 34px;align-items:center;padding:30px 34px}
.s2-siroka .s2-gw{margin:0 0 6px}
.s2-siroka .s2-priklad{margin:0;align-self:center}
/* pod 1100 px sú tri stĺpce kariet príliš úzke, preto dva */
@media (max-width:1100px){
  .s2-mriezka{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:22px}
  .s2-mriezka>.s2k{grid-column:auto;grid-row:auto}
  .s2-mriezka>.s2-velka,.s2-mriezka>.s2-siroka{grid-column:1 / -1}
  .s2-mala{display:flex;flex-direction:column}
  .s2-mala .s2-priklad{margin-top:auto;padding-top:14px}
  .s2-mala .s-text{margin-bottom:22px}
  .s2-tok{max-width:460px}
  .s2-siroka{grid-row:auto;margin-top:0;display:block}
  .s2-siroka .s2-gw{margin-bottom:24px}
  .s2-siroka .s2-priklad{margin-top:22px}
}
@media (max-width:560px){
  .s2-mriezka{grid-template-columns:1fr}
  .s2k,.s2-velka,.s2-siroka{padding:26px 22px 24px}
  .s2-velka h3{font-size:27px}
  .s2k h3{font-size:21px}
  .s2-gw{width:80px;height:80px}
  .s2-velka .s2-gw{width:104px;height:104px}
}


/* ===== DETAILY podľa úvodu (Erik: „úvod premakaný a detail flákaš“) ===== */
:root{--tlm:#465170}
/* písmo: Manrope 500 nie je načítané (len 400, 600, 700, 800), čitateľnosť odstavcov rieši tmavšia farba --tlm */

/* Pre koho: telo karty ako svetlé sklo s 3D hranou (rovnaké ako karta v Bežnom dni) */
.fk{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)}
.fk-foto{box-shadow:inset 0 -1px 0 rgba(255,255,255,.6)}
/* malé gule pri „AI pripraví“ a „Vy rozhodnete“: ostré, väčšie, ikona čitateľná */
/* malé 3D ikonky „AI pripraví“ a „Vy rozhodnete“ (sada v2b), 44 px, jemný tieň pod predmetom */
.znak3d{display:block;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(20,60,150,.18)) drop-shadow(0 9px 10px rgba(30,90,200,.12))}
.fk .riadok{grid-template-columns:44px 1fr;column-gap:12px}


/* ===== 5 AKO ZAČNEME (časová os so sklenenými kartami) ===== */
/* JEDNO SKLO PRE CELÝ WEB = sklo z úvodu (Erik: nie modré, rovnaké ako úvod). Farbu dávajú gule za sklom, nie tónovanie. */
.deck-sklo{position:relative;z-index:1;border-radius:44px;color:#fff;text-shadow:0 1px 2px rgba(20,50,140,.35),0 2px 14px rgba(20,50,140,.45);
  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)}
.deck-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)}
.deck-sklo::after{content:"";position:absolute;inset:8px;border-radius:38px;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.deck-sklo h3{color:#fff}
.z-kicker{font:700 12.5px/1.3 'Manrope',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:10px}

/* časová os so sklenenými kartami (Erik 11. 10.: rozloženie nechať, zmeniť len gule) */
.panel-kicker{font:700 13px/1 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5B63DC;margin-bottom:10px}
.z3{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:30px;margin-top:56px}
.z3-krok{display:grid;grid-row:span 5;grid-template-rows:subgrid;justify-items:center}
/* guľa s číslom: matná ako v úvode, bez prstenca, levituje, pod ňou tieň, ktorý sa pri stúpnutí zmenší a zosvetlí */
.z3-g{grid-row:1;position:relative;z-index:2;width:112px;height:112px;margin-bottom:42px}
/* 3D číslo z hmoty (sada v2b) v rámčeku gule, levituje nad dýchajúcim tieňom */
.z3-cislo3d{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 6px rgba(20,60,150,.16)) drop-shadow(0 16px 18px rgba(30,90,200,.12))}
@keyframes tien-dych{0%,100%{scale:1;opacity:1}50%{scale:.8;opacity:.55}}
.z3-tien{position:absolute;left:50%;top:122px;width:92px;height:18px;margin-left:-46px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(35,60,160,.42),rgba(35,60,160,0));filter:blur(4px)}
.z3-tien.lev{animation-name:tien-dych}
.z3-karta{grid-row:2 / span 4;display:grid;grid-template-rows:subgrid;width:100%;padding:30px 30px 28px;text-align:center}
.z3-karta .panel-kicker{margin:0 0 8px}
.z3-karta h3{font-size:22px;line-height:1.25;align-self:start}
.z3-karta .s-text{font-size:15.5px;line-height:1.65;margin-top:12px}
.z3-vystup{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.85);box-shadow:0 -1px 0 rgba(150,170,210,.25)}
.z3-vystup span{display:inline-block;padding-top:3px;font:800 11.5px/1.35 'Sora',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(115deg,#1592E6,#9A3FD2);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.z3-vystup p{margin-top:8px;font:700 15px/1.45 'Manrope',sans-serif;color:var(--text)}
.z-pas{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.z-mala{padding:28px 30px}
.z-mala h3{font-size:21px}
@media (max-width:980px){
  .z3{grid-template-columns:1fr;grid-template-rows:none;row-gap:40px}
  .z3-tien{display:none}
  .z3-krok{grid-row:auto;display:flex;flex-direction:column;align-items:center}
  .z3-g{width:96px;height:96px}
  .z3-g{margin-bottom:-34px}
  .z3-karta{display:block;padding-top:58px}
  .z-pas{grid-template-columns:1fr}
}
.z3-krok{position:relative}
/* šípka medzi guľami: stred medzi stredmi stĺpcov = 100 % šírky stĺpca + polovica medzery (15 px) */
.z3-sipka{position:absolute;left:calc(100% + 15px);top:56px;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:1;pointer-events:none}
.z3-sipka svg{width:100%;height:100%;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 6px rgba(60,70,170,.25))}
.z3-krok:nth-child(1) .z3-sipka svg{stroke:#18A6D8}
.z3-krok:nth-child(2) .z3-sipka svg{stroke:#7E62D6}
@media (max-width:980px){.z3-sipka{display:none}}
/* gule bez zadanej výšky sú vždy guľaté (inak by mali výšku 0 a zmizli) */
.gula{aspect-ratio:1}
#ako-zacneme .hlavicka{max-width:980px}


/* ===== 6 OTÁZKY A FORMULÁR (návrh 3: záver ako úvod) ===== */
/* tlačidlo + pri rozbaľovacej otázke, slová so spojovníkom sa nelámu */
.nz{white-space:nowrap}
.faq-plus{position:relative;width:32px;height:32px;flex:none;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px #fff,0 4px 10px -6px rgba(60,70,160,.5)}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;margin:-1.25px 0 0 -6px;border-radius:2px;background:#5B63DC;transition:rotate .25s}
.faq-plus::after{rotate:90deg}

/* časté otázky (návrh 2): vľavo zoznam po témach, vpravo veľké svetlé sklo s odpoveďou a Aikou */
/* sekcia orezáva cez clip, nie hidden: hidden vytvorí posuvný kontajner a prilepené sklo by sa nedržalo */
#otazky{overflow:clip}
.ob-t1{--c:#0A57C9;--c2:#2E7BEA}
.ob-t2{--c:#06757F;--c2:#0A8F9E}
.ob-t3{--c:#6A1FB8;--c2:#A83CC8}
.ob-t4{--c:#B4531A;--c2:#E0862E}
.ob-q summary{list-style:none;cursor:pointer}
.ob-q summary::-webkit-details-marker{display:none}
@supports (interpolate-size:allow-keywords){
  .ob-q{interpolate-size:allow-keywords}
  .ob-q::details-content{block-size:0;overflow:hidden;transition:block-size .25s ease,content-visibility .25s allow-discrete}
  .ob-q[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){.ob-q::details-content{transition:none}}
summary:hover .faq-plus{background:#fff}
.ob-q[open] .faq-plus::after{rotate:0deg}
/* B: zoznam otázok a odpoveď na veľkom skle */
.ob{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;margin-top:56px;align-items:start}
.ob-zoznam{display:grid;gap:28px}
.ob-nazov{display:flex;align-items:center;gap:10px;margin:0 0 8px 14px;font:700 13px/1 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.ob-bod{width:16px;height:16px}
.ob-q summary{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 14px;border-radius:16px;transition:background .2s,box-shadow .2s}
.ob-q summary:hover{background:rgba(255,255,255,.42)}
.ob-q summary:focus-visible{outline:3px solid var(--c);outline-offset:1px}
.ob-c{flex:none;width:24px;font:800 13.5px/1 'Sora',sans-serif;color:var(--c)}
.ob-otazka{flex:1;font:700 15.5px/1.4 'Sora',sans-serif;letter-spacing:-.01em;color:var(--text);text-wrap:balance;transition:color .2s}
.ob-q .faq-plus::before,.ob-q .faq-plus::after{background:var(--c)}
/* vybraná otázka: svetlá sklenená pilulka, otázka vo farbe témy, šípka k odpovedi */
.ob-q.aktivna summary{background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.52));box-shadow:inset 0 0 0 .8px #fff,inset 0 1px 0 #fff,0 12px 26px -16px rgba(40,90,190,.5)}
.ob-q.aktivna .ob-otazka{color:var(--c)}
.ob-q summary::after{content:"";flex:none;width:9px;height:9px;border-top:2.5px solid var(--c);border-right:2.5px solid var(--c);rotate:45deg;margin-right:4px;opacity:0;translate:-6px 0;transition:opacity .2s,translate .2s}
.ob-q.aktivna summary::after{opacity:1;translate:0 0}
.ob-q .faq-plus,.ob-q p{display:none}
.ob-pravy{position:sticky;top:24px;padding-top:200px}
.ob-pravy>.gula{z-index:0}
.ob-scena{position:relative;isolation:isolate}
.ob-aika{position:absolute;right:48px;bottom:calc(100% - 14px);width:128px;z-index:3}
.ob-aika img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 16px rgba(40,60,140,.25))}
.ob-sklo{display:flex;flex-direction:column;min-height:460px;padding:46px 50px 40px}
.pk .ob-h{margin:0;padding-bottom:.06em;font:800 30px/1.16 'Sora',sans-serif;letter-spacing:-.02em;text-wrap:balance;
  background:linear-gradient(115deg,#1592E6 0%,#5B63DC 38%,#9A3FD2 72%,#C24BCB 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ob-odpoved{margin-top:18px;font-size:17.5px;line-height:1.7;color:var(--tlm)}
.ob-nav{display:flex;justify-content:flex-end;gap:12px;margin-top:auto;padding-top:30px}
.ob-tl{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.75);
  box-shadow:inset 0 0 0 1px #fff,0 8px 18px -10px rgba(60,70,160,.5);transition:background .2s,translate .2s}
.ob-tl:hover{background:#fff;translate:0 -2px}
.ob-tl:focus-visible{outline:3px solid #1A8FE3;outline-offset:3px}
.ob-tl svg{width:22px;height:22px;fill:none;stroke:#5B63DC;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:980px){
  .ob{grid-template-columns:1fr;margin-top:44px}
  .ob-pravy{display:none}
  /* B na mobile: témy ako svetlé sklenené karty, otázky sa rozbaľujú */
  .ob-tema{padding:24px 18px 8px;border-radius:26px;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);box-shadow:inset 0 0 0 .8px rgba(255,255,255,.78),inset 0 1px 0 rgba(255,255,255,.7),0 30px 60px -30px rgba(40,90,190,.35)}
  .ob-nazov{margin:0 0 10px 0}
  .ob-q{border-top:1px solid rgba(255,255,255,.9);box-shadow:0 -1px 0 rgba(150,170,210,.22)}
  .ob-q summary{padding:15px 0;border-radius:0}
  .ob-q summary:hover{background:none}
  .ob-q summary::after{display:none}
  .ob-q.aktivna summary{background:none;box-shadow:none}
  .ob-q.aktivna .ob-otazka{color:var(--text)}
  .ob-otazka{text-wrap:pretty}
  .ob-q .faq-plus{display:block}
  .ob-q p{display:block;padding:0 40px 18px 38px;font-size:15px;line-height:1.65;color:var(--tlm)}
  .ob-q[open] .ob-otazka,.ob-q.aktivna[open] .ob-otazka{color:var(--c)}
}
@media (max-width:560px){
  .ob-otazka{font-size:15.5px}
}

.zdroje{margin-top:18px}
.zdroje summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font:700 14px/1.3 'Manrope',sans-serif;color:#5B63DC}
.zdroje summary::-webkit-details-marker{display:none}
.zdroje summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .2s}
.zdroje[open] summary::after{rotate:225deg;translate:0 2px}
.zdroje ul{margin-top:12px;padding-left:18px;display:grid;gap:6px;font-size:13.5px;line-height:1.5;color:var(--tlm)}
.zdroje a{color:var(--tlm);text-underline-offset:2px}

/* formulár na svetlom skle: tmavé písmo, polia ako biele vnorené sklo */
.k-kicker{font:700 13px/1.3 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5B63DC;margin-bottom:10px}
.pk .form-h{margin:0;font-size:34px;line-height:1.12;text-wrap:balance}
.form-uvod{margin-top:14px;font-size:16px;line-height:1.6;color:var(--tlm)}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px;margin-top:26px}
.pole{display:grid;gap:7px;align-content:start}
.pole.cela,.formular .tl-form,.formular .pozn{grid-column:1 / -1}
.pole label{font:700 14px/1.2 'Manrope',sans-serif;color:var(--text)}
.pole label em{font-style:normal;font-weight:600;color:var(--tlm);margin-left:6px}
.pole input,.pole textarea{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);text-shadow:none;transition:box-shadow .2s,background .2s}
.pole textarea{resize:vertical;min-height:110px}
.pole input:focus,.pole textarea:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px #1A8FE3,0 0 0 4px rgba(26,143,227,.18)}
.pole textarea::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;box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 22px 34px -14px rgba(80,70,200,.8)}
.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}
.kontakt-udaje{display:grid;gap:6px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.9);box-shadow:0 -1px 0 rgba(150,170,210,.25)}
.kontakt-udaje .k-kicker{margin-bottom:4px}
.kontakt-udaje a,.kontakt-udaje span{font:700 16px/1.45 'Manrope',sans-serif;color:var(--text);text-decoration:none}
.kontakt-udaje a:hover{color:#5B63DC}

/* scéna: gule celé za sklom (farba presvitá), Aika na hornej hrane skla s bublinou */
.k-scena{position:relative;isolation:isolate}
.k-scena>.gula{z-index:0}
.k-scena>.sklo,.k-scena>.deck-sklo{z-index:1}
.k-aika{position:absolute;right:40px;bottom:calc(100% - 14px);width:136px;z-index:3}
.k-aika img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 16px rgba(40,60,140,.25))}
.k-tien{position:absolute;left:50%;bottom:4px;width:96px;height:18px;margin-left:-48px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(35,60,160,.4),rgba(35,60,160,0));filter:blur(4px)}
@keyframes k-tien-dych{0%,100%{scale:1;opacity:1}50%{scale:.82;opacity:.6}}
.k-tien.lev{animation-name:k-tien-dych}
.k-bublina{position:absolute;right:calc(100% + 4px);top:26px;width:250px;padding:12px 16px;border-radius:18px 18px 4px 18px;background:#fff;
  font:600 15px/1.4 'Manrope',sans-serif;color:var(--text);box-shadow:0 12px 26px -14px rgba(30,70,160,.5)}

/* 3 záver ako úvod: veľké svetlé sklo v strede, gule okolo (celé mimo skla) a za ním */
.k3{position:relative;margin-top:40px;padding:190px 0 40px;isolation:isolate}
.k3>.gula{z-index:0}
.k3-scena{width:66%;margin:0 auto}
.k3-sklo{padding:56px 64px 48px;scroll-margin-top:220px}
.k3-hlava{text-align:center}
.k3-hlava .form-h{margin:0 auto}
.k3-hlava .form-uvod{max-width:600px;margin-left:auto;margin-right:auto}
.k3-sklo .kontakt-udaje{grid-template-columns:repeat(3,auto);justify-content:center;column-gap:30px;text-align:center}
.k3-sklo .kontakt-udaje .k-kicker{grid-column:1 / -1}

@media (max-width:980px){
  .k3{padding-top:160px}
  .k3>.gula{display:none}
  .k3-scena{width:auto}
  .k3-sklo{padding:42px 26px 34px}
  .k3-sklo .kontakt-udaje{grid-template-columns:1fr}
  .k-aika{width:118px;right:24px}
  .k-bublina{width:200px;font-size:14px;top:14px}
}
@media (max-width:560px){
  .formular{grid-template-columns:1fr}
  .k3-sklo{padding:34px 20px 28px}
  .pk .form-h{font-size:27px}
  .k-aika{width:104px;right:14px}
  .k-bublina{width:180px}
}


/* ===== PÄTA v štýle DECK: svetlé sklo na spoločnom pestrom pozadí, obsah ako päta celého webu ===== */
.pata{position:relative;isolation:isolate;overflow:clip visible;padding:40px 56px 56px}
/* gule sú celé za sklom (obal má rozmer skla), farbu dávajú sklu zospodu */
.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}
.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}
/* ikonky kontaktov v malých matných guliach (rovnaké gule ako ikonky na stránke) */
.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}
/* spodný riadok oddelený vyrytou linkou (biela linka a pod ňou jemný tieň) */
.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}
}


/* ťukacie plochy na dotykových zariadeniach aspoň 44 px (vzhľad sa nemení, rozšíri sa len plocha pre prst) */
@media (pointer:coarse){
  .s2-odkaz,.zdroje summary,.zdroje a{position:relative}
  .kontakt-udaje{gap:0}
  .kontakt-udaje a,.kontakt-udaje span{padding:10px 0}
  .s2-odkaz::after,.zdroje summary::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;translate:0 -50%}
  .zdroje li{padding:6px 0}
  .zdroje ul{gap:2px}
}


/* ===== spoločné pozadie stránky (Erik 12. 10.: prechody medzi sekciami) =====
   jedno pestré pozadie pripnuté k obrazovke za všetkými sekciami, takže medzi sekciami nie je šev;
   sekcie sú priehľadné a gule orezávajú len do strán (clip), hore a dole môžu presahovať do susednej sekcie */
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%)}
.den,.pk{background:none!important;border-bottom:0!important;overflow:clip visible!important}
/* úvod: vlastné nebo ostáva, ale jeho spodok plynulo zmizne do spoločného pozadia (nebo presunuté do ::before s maskou) */
.uvod{isolation:isolate;overflow:clip visible!important}
.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!important;background-image:none!important}


/* ===== guľka času: lesklá sklenená modrá guľka, rovnaká ako v rukách postáv (čas, ktorý AI vráti ľuďom) ===== */
.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)}
.cas-legenda{display:flex;align-items:center;gap:12px;margin-top:18px;font:700 15.5px/1.4 'Manrope',sans-serif;color:#1874C9}
.cas-legenda .cas{width:26px}
/* pri tlačidle Schváliť: guľka práve vyskočila */
.app-tl{position:relative}
.cas-schvalit{position:absolute;right:-8px;top:-30px;width:26px}
/* postavy v Pre koho: poloha v pomere k výške obrázka postavy (--ph), aby sedela aj na mobile */
.fk-foto{--ph:372px}
@media (max-width:560px){.fk-foto{--ph:340px}}
.cas-fk{position:absolute;z-index:3;width:calc(var(--ph) * .072);translate:-50% 50%}
.cas-p3{left:calc(50% + var(--ph) * .153);bottom:calc(var(--ph) * .817)}
.cas-p4{left:calc(50% + var(--ph) * .235);bottom:calc(var(--ph) * .937)}
/* hotový krok v ukážke dopytu */
.cas-krok{margin-left:auto;width:22px}
/* Aika nad formulárom drží guľku nad zdvihnutou rukou */
.cas-aika{position:absolute;z-index:4;left:90.6%;top:25%;width:17.6%;translate:-50% -50%}


/* ===== Aika sprievodca: letí s návštevníkom pri posúvaní ===== */
.sprievodca{position:fixed;left:0;top:0;z-index:40;width:var(--s,96px);pointer-events:none;
  translate:var(--x,0) var(--y,0);opacity:0;scale:.6;transition:translate 1.15s cubic-bezier(.45,0,.2,1),opacity .4s,scale .4s,width .4s}
.sprievodca.viditelna{opacity:1;scale:1}
.sprievodca .sp-telo{position:relative;animation:levituj 5.6s ease-in-out infinite;--a:-9px}
.sprievodca img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 14px rgba(40,60,140,.25));transition:rotate .5s}
.sprievodca.leti img{rotate:-8deg}
.sprievodca.leti.dolava img{rotate:8deg}
.sprievodca.dolava img{scale:-1 1}
.sprievodca .sp-tien{position:absolute;left:50%;top:calc(100% + 10px);width:60%;height:12px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(35,60,160,.32),rgba(35,60,160,0));filter:blur(3px);animation:tien-dych 5.6s ease-in-out infinite}
.sprievodca.leti .sp-tien{opacity:0}
/* malá v rohu: pri zmene sekcie poskočí */
@keyframes sp-skok{0%,100%{translate:0 0}35%{translate:0 -22px}60%{translate:0 0}75%{translate:0 -6px}}
.sprievodca.skok .sp-telo{animation:sp-skok .7s ease-out}
/* v Ako začneme je Aika vložená do časovej osi (posúva sa so stránkou) a skáče po číslach */
.sprievodca.na-osi{position:absolute;z-index:5;transition:opacity .4s,scale .4s,width .4s}
.z3-g{transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){
  .sprievodca{transition:opacity .2s}
  .sprievodca .sp-telo,.sprievodca .sp-tien{animation:none}
}


/* ===== úvod „explode“: pri posúvaní sa rozletené gule, Aika a sklo zložia do podoby úvodu =====
   obal dáva 80 % výšky obrazovky na posúvanie, úvod je počas toho pripnutý; --e je postup 0 (rozletené) až 1 (zložené) */
.uvod-scena{position:relative;height:calc(max(100svh,720px) + 80svh)}
.uvod-scena>.uvod{position:sticky;top:0}
.uvod{--e:1}
.uvod .gula.g{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))))}
/* texty úvodu sa len zjavia, bez pohybu (Erik: „text fade, no motion“): slovo má oneskorenie --d, --w je jeho postup 0 až 1 */
.uvod .sl{--w:clamp(0,calc((var(--e) - var(--d,0)) / (1 - var(--d,0))),1);opacity:var(--w)}
.uvod h1 .sl{display:inline}   /* riadky nadpisu sú span s display:block, slová v nich ostávajú v riadku */
/* štítok jediný príde zhora (Erik: „príchod zhora“) */
.uvod .kicker{opacity:var(--e);transform:translateY(calc(-48px * (1 - var(--e))))}
.uvod .tlacidla{opacity:clamp(0,calc((var(--e) - .45) / .55),1)}
/* riadok pod tlačidlami príde zdola (Erik: „príchod zdola“) */
.uvod .pod{--w:clamp(0,calc((var(--e) - .55) / .45),1);opacity:var(--w);transform:translateY(calc(40px * (1 - var(--w))))}
/* na mobile je sklo takmer na celú šírku, zväčší sa menej, aby nenarazilo na okraje */
@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}
}


/* ===== animácia sekcií pri posúvaní =====
   Každý prvok .anim má vlastný postup --e (0 až 1) podľa svojej polohy na obrazovke, nastavuje ho skript.
   --ad je oneskorenie prvku vnútri, --k posun kariet v jednom riadku (počíta skript), --w vlastný postup prvku.
   Texty sa len zjavia; pohybujú sa štítky (zhora), karty, gule, ikony a čísla. */
.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(--k,0)) / max(.08,min(.35,1 - var(--ad,0) - var(--k,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}
.anim .a-karta,.anim.a-kus{--w:clamp(0,calc((var(--e) - .15 - var(--k,0)) / .6),1);opacity:calc(.2 + .8 * var(--w));transform:translateY(calc(50px * (1 - var(--w)))) scale(calc(1.06 - .06 * var(--w)))}
.anim .a-pop{--w:clamp(0,calc((var(--e) - var(--ad,0) - var(--k,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}}

/* ===== mobil ===== */
@media (max-width:820px){
  .menu{display:none}
  .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,.den .mimo-mobil{display:none}
  .den .obsah{grid-template-columns:1fr}
  .v1{aspect-ratio:auto;min-height:420px}
  .karta-app{left:0;right:0;padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){.lev{animation:none!important}}

/* ===== doplnky pre ostrú stránku ===== */
button.pill{border:0;cursor:pointer;font-family:inherit}
.medove{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.formular .turnstile:empty,.formular .turnstile:has(.cf-turnstile:empty){display:none}
.form-stav{grid-column:1 / -1;min-height:1.4em;margin:0;text-align:center;font:700 14.5px/1.4 'Manrope',sans-serif;color:#0B7F6E}
.form-stav.chyba{color:#B4232F}
.form-stav:empty{display:none}
.form-ok{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 10px 6px;text-align:center;font:700 18px/1.5 'Manrope',sans-serif;color:var(--text)}
.form-ok i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:radial-gradient(70% 70% at 34% 24%,#8BEFD3 0%,#45D7C2 54%,#13B9BC 100%);box-shadow:0 10px 20px -10px rgba(19,160,160,.7)}
.form-ok svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* chat na mobile a tablete vľavo dole, aby nezakrýval Aiku v úvode (Erik 13. 10. 2026); kým svieti lišta cookies, tlačidlo nie je vidieť
   (chat.js vkladá svoje štýly neskôr, preto !important) */
@media (max-width:820px){
  #ngChat{right:auto!important;left:14px!important}
  #ngChat .ngc-panel{right:auto;left:0}
  body:has(.cookiebar.show) #ngChat:not(.is-open){opacity:0;pointer-events:none}
}

/* lišta cookies: kópia z assets/style.css (štýly webu sa na tejto stránke nenačítavajú); pri zmene upraviť aj tam */
.cookiebar{position:fixed;left:18px;right:18px;bottom:18px;z-index:120;max-width:680px;margin:0 auto;background:#101A2B;border:1px solid #22314A;border-radius:16px;padding:20px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;box-shadow:0 20px 50px rgba(0,0,0,.45);opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.cookiebar.show{opacity:1;transform:none}
.cookiebar p{color:#AAB8C9;font-size:14px;margin:0;flex:1 1 280px;line-height:1.5}
.cookiebar a{color:#2BE0A6}
.cookiebar-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookiebar .btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:12px;font:700 13.6px/1.2 'Manrope',sans-serif;cursor:pointer;border:1.5px solid transparent;transition:background .2s,border-color .2s,color .2s}
.cookiebar .btn-primary{background:#16AFD4;color:#fff}
.cookiebar .btn-primary:hover{background:#0E9DE5}
.cookiebar .btn-ghost{background:transparent;color:#D5DEE9;border-color:#3A4A63}
.cookiebar .btn-ghost:hover{border-color:#2BE0A6;color:#2BE0A6}
@media (prefers-reduced-motion:reduce){.cookiebar{transition:none;opacity:1;transform:none}}
@media (max-width:600px){
  .cookiebar{left:8px;right:8px;bottom:8px;padding:10px 12px;gap:8px;border-radius:12px}
  .cookiebar p{flex:1 1 100%;font-size:12px;line-height:1.35}
  .cookiebar-btns{flex:1 1 100%;gap:8px;flex-wrap:nowrap}
  .cookiebar .btn{flex:1;padding:7px 10px;font-size:12.5px}
  body:has(.cookiebar.show) #ngChat{bottom:146px}
}