:root{
  /* modrozelená: hlavná farba je morská, akcent tyrkysový */
  --modra:#0C7C8A; --modra-tmava:#075A66; --modra-svetla:#2BC4CE; --modra-plocha:#E2F4F6;
  --noc:#06222A; --noc2:#0E3A44;
  --text:#0A1F25; --text2:#44606A; --text3:#6E8A93;
  --plocha:#FFFFFF; --plocha2:#EAF3F4;
  --ram:rgba(10,60,70,.13); --ram2:rgba(10,60,70,.08);
  --sklo:rgba(255,255,255,.70); --sklo2:rgba(255,255,255,.50); --skloram:rgba(255,255,255,.80);
  --tien:0 8px 26px rgba(6,45,55,.08); --tien2:0 18px 44px rgba(6,45,55,.15);
  --rast:#0E7A54; --pokles:#B3341F; --predbezne:#8A5D06; --oranz:#E8710A;
  --sirka:1140px; --r:18px;
}
/* prehliadač bez rozostrenia pozadia musí ostať čitateľný, preto plné biele sklo */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  :root{--sklo:rgba(255,255,255,.94); --sklo2:rgba(255,255,255,.90)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);background:var(--plocha2);line-height:1.55;-webkit-font-smoothing:antialiased}
/* farebné svetelné škvrny, zámerne slabé: číslo na skle musí ostať čitateľné */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46rem 36rem at 8% -6%, rgba(91,140,255,.55), transparent 60%),
    radial-gradient(40rem 32rem at 96% 6%, rgba(124,92,246,.42), transparent 58%),
    radial-gradient(38rem 32rem at 72% 48%, rgba(0,182,178,.26), transparent 60%),
    radial-gradient(34rem 28rem at 12% 76%, rgba(255,150,80,.20), transparent 60%)}
a{color:var(--modra);text-decoration:none}
a:hover{text-decoration:underline}
.in{max-width:var(--sirka);margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--modra-svetla);outline-offset:2px;border-radius:6px}

/* ---------- hlavička ---------- */
.pas{background:rgba(11,20,43,.88);color:#B7C6E2;font-size:12.5px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pas .in{display:flex;justify-content:space-between;gap:14px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.pas a{color:#D3DEF5}
header.hlava{background:rgba(12,22,46,.80);-webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);color:#fff;position:relative;z-index:2;
  border-bottom:1px solid rgba(255,255,255,.10);box-shadow:0 10px 34px rgba(9,18,40,.20)}
.hlava-top{display:flex;align-items:center;gap:22px;padding:14px 0 12px;flex-wrap:wrap}
.znacka{font-weight:800;font-size:22px;letter-spacing:-.025em;color:#fff;display:flex;align-items:center;gap:9px}
.znacka:hover{text-decoration:none}
.znacka .ikona{width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:flex-end;justify-content:center;
  gap:2px;padding:6px 5px;background:linear-gradient(150deg,#6EA0FF,#3B62E8);box-shadow:0 4px 14px rgba(59,98,232,.45)}
.znacka .ikona i{display:block;width:4px;background:#fff;border-radius:1px}
.znacka .ikona i:nth-child(1){height:38%} .znacka .ikona i:nth-child(2){height:70%} .znacka .ikona i:nth-child(3){height:100%}
.znacka span{color:#8FB4FF}
.hlada-hlava{flex:1;min-width:230px;display:flex;max-width:440px;position:relative;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:13px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hlada-hlava input{flex:1;min-width:0;padding:11px 14px;border:0;background:transparent;color:#fff;font-size:15px;border-radius:13px}
.hlada-hlava input::placeholder{color:#A7BADD}
.hlada-hlava button{padding:11px 18px;border:0;border-radius:12px;margin:3px;cursor:pointer;font:inherit;
  background:linear-gradient(150deg,#6EA0FF,#3B62E8);color:#fff;font-weight:650;font-size:15px}
nav.menu{display:flex;gap:9px;flex-wrap:wrap;padding:0 0 16px}
nav.menu::-webkit-scrollbar{display:none}
nav.menu a{color:#DCE6FA;font-size:14.5px;font-weight:600;padding:10px 17px;border-radius:13px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:.16s;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
nav.menu a:hover{background:rgba(255,255,255,.19);color:#fff;text-decoration:none;transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(10,20,45,.22)}
nav.menu a.tu{background:#fff;color:var(--modra-tmava);border-color:#fff;
  box-shadow:0 6px 18px rgba(10,20,45,.24)}

/* ---------- obsah ---------- */
main{max-width:var(--sirka);margin:0 auto;padding:26px 20px 64px}
h1{font-size:34px;line-height:1.16;letter-spacing:-.028em;margin:0 0 8px}
h2{font-size:22px;margin:38px 0 15px;letter-spacing:-.018em}
h2:first-child{margin-top:6px}
.podnadpis{color:var(--text2);max-width:680px;font-size:16.5px}
.drobky{font-size:13.5px;color:var(--text3);margin-bottom:14px}

/* ---------- hero s veľkým vyhľadávaním ---------- */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:40px 34px 34px;margin-bottom:26px;color:#fff;
  background:linear-gradient(140deg,#0E2050 0%,#1B3F9E 52%,#2E5AD6 100%);
  box-shadow:0 24px 60px rgba(14,32,80,.28)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(38px)}
.hero::before{width:26rem;height:26rem;right:-7rem;top:-11rem;background:rgba(60,215,215,.46)}
.hero::after{width:20rem;height:20rem;left:-6rem;bottom:-10rem;background:rgba(22,150,175,.48)}
.hero>*{position:relative;z-index:1}
.hero h1{color:#fff;font-size:38px;max-width:680px}
.hero p{color:#D5E1FB;max-width:640px;margin:12px 0 22px;font-size:17px}
.hero .pod{margin-top:15px;font-size:13.5px;color:#C0D1F5}
.hero .pod strong{color:#fff}

.velke-hladanie{position:relative;max-width:640px}
.velke-hladanie form{display:flex;gap:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  border-radius:18px;padding:7px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 14px 34px rgba(8,20,52,.26)}
.velke-hladanie input{flex:1;min-width:0;padding:16px 18px;border:0;border-radius:13px;font-size:17px;
  font-family:inherit;background:#fff;color:var(--text)}
.velke-hladanie input::placeholder{color:#8A97AE}
.velke-hladanie button{padding:16px 26px;border:0;border-radius:13px;cursor:pointer;font-family:inherit;
  background:linear-gradient(150deg,#FFFFFF,#DCE7FF);color:var(--modra-tmava);font-weight:750;font-size:16px;white-space:nowrap}
.velke-hladanie button:hover{background:#fff}
.hero .tipy{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:#BDCFF5}
.hero .tipy a{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#EAF1FF;
  border-radius:999px;padding:7px 14px;font-weight:600}
.hero .tipy a:hover{background:rgba(255,255,255,.26);text-decoration:none}

/* našepkávač, čisté vylepšenie navyše: bez JavaScriptu sa nezobrazí a formulár funguje ďalej */
.naseptavac{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;overflow:hidden;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);border:1px solid var(--skloram);border-radius:16px;box-shadow:var(--tien2)}
.naseptavac b{display:block;padding:9px 16px 5px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.naseptavac a{display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:13px 16px;color:var(--text);border-top:1px solid var(--ram2);min-height:52px}
.naseptavac a:hover,.naseptavac a.tu{background:var(--modra-plocha);text-decoration:none}
.naseptavac small{color:var(--text3);font-size:12.5px;white-space:nowrap}

/* ---------- sklenené dlaždice a karty ---------- */
.dlazdice{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.dlazdica{background:var(--sklo);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--skloram);border-radius:var(--r);padding:20px;display:block;color:var(--text);
  box-shadow:var(--tien);transition:transform .16s ease,box-shadow .16s ease}
.dlazdica:hover{box-shadow:var(--tien2);text-decoration:none;transform:translateY(-2px)}
.dlazdica .nad{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--modra);margin-bottom:7px}
.dlazdica h3{margin:0 0 5px;font-size:17.5px;letter-spacing:-.012em}
.dlazdica p{margin:0;color:var(--text2);font-size:14.5px}
.dlazdica.tichá{background:var(--sklo2);border-style:dashed;box-shadow:none}
.dlazdica.tichá .nad{color:var(--text3)}

.karty{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:15px}
.karta{background:var(--sklo);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--skloram);border-radius:16px;padding:17px 18px;box-shadow:var(--tien)}
.karta .pop{font-size:13px;color:var(--text2);margin-bottom:6px}
.karta .cis{font-size:29px;font-weight:760;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.karta .jed{font-size:13px;color:var(--text3);font-weight:500;margin-left:4px;letter-spacing:0}
.karta .zmena{font-size:13px;margin-top:6px;font-weight:650}
.rast{color:var(--rast)} .pokles{color:var(--pokles)}
.karta .zdroj{font-size:11.5px;color:var(--text3);margin-top:10px;border-top:1px solid var(--ram);padding-top:8px}
.karta .zdroj a{color:var(--text2);text-decoration:underline}

/* ---------- produkty na titulke ---------- */
.produkty{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.produkt{display:flex;flex-direction:column;background:var(--sklo);border:1px solid var(--skloram);border-radius:var(--r);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  padding:19px 20px;box-shadow:var(--tien);color:var(--text);transition:transform .16s ease,box-shadow .16s ease}
a.produkt:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--tien2)}
.produkt .komu{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--modra)}
.produkt h3{margin:7px 0 6px;font-size:17px;letter-spacing:-.012em}
.produkt p{margin:0 0 14px;color:var(--text2);font-size:14.5px;flex:1}
.produkt .cena{font-size:25px;font-weight:780;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.produkt .cena small{font-size:13px;font-weight:600;color:var(--text3);margin-left:5px;letter-spacing:0}

/* ---------- výsledky hľadania, riadkové karty pre palec ---------- */
.skupina{margin:0 0 8px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.skupina em{font-style:normal;font-weight:600;color:var(--text3);letter-spacing:0;text-transform:none;font-size:13px}
.vysledky{display:grid;gap:10px;margin-bottom:26px}
.vysl{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;
  background:var(--sklo);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--skloram);border-radius:15px;padding:13px 17px;color:var(--text);box-shadow:var(--tien)}
.vysl:hover{text-decoration:none;box-shadow:var(--tien2);border-color:var(--modra-svetla)}
.vysl>span:first-child{min-width:0;overflow-wrap:anywhere}
.vysl .hl{font-weight:650;font-size:16px;display:block}
.vysl .sp{display:block;color:var(--text3);font-size:13px;margin-top:2px}
.vysl .sip{color:var(--modra);font-weight:800;font-size:19px;flex:none}
.prazdne{background:var(--sklo);border:1px solid var(--skloram);border-radius:var(--r);padding:22px;box-shadow:var(--tien)}

/* ---------- tabuľky, zoznamy, grafy ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--sklo);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--skloram);border-radius:16px;overflow:hidden;box-shadow:var(--tien)}
th,td{padding:13px 15px;text-align:left;font-size:15px;border-bottom:1px solid var(--ram2)}
th{background:rgba(255,255,255,.45);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);font-weight:700}
td.cislo,th.cislo{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.55)}
.tabulka-obal{overflow-x:auto;-webkit-overflow-scrolling:touch}

.hladaj{display:flex;gap:9px;margin:18px 0 6px;max-width:560px;position:relative}
.hladaj input{flex:1;min-width:0;padding:14px 16px;border:1px solid var(--skloram);border-radius:14px;font-size:16px;
  font-family:inherit;background:rgba(255,255,255,.86);box-shadow:var(--tien)}
.hladaj button{padding:14px 22px;border:0;border-radius:14px;cursor:pointer;font-family:inherit;
  background:linear-gradient(150deg,#3B62E8,#1B3FB0);color:#fff;font-weight:680;font-size:15.5px;box-shadow:0 8px 22px rgba(27,63,176,.28)}
.stitok{display:inline-block;background:rgba(232,238,253,.9);color:var(--modra-tmava);border:1px solid rgba(27,79,216,.14);
  border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:650;margin-right:6px}
.stitok.varovny{background:rgba(253,243,224,.9);color:var(--predbezne);border-color:rgba(138,93,6,.18)}
.zoznam{columns:3;column-gap:26px;font-size:15px}
.zoznam a{display:block;padding:4px 0;break-inside:avoid}
.graf{background:var(--sklo);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--skloram);border-radius:16px;padding:15px;box-shadow:var(--tien)}
.pozn{font-size:13px;color:var(--text3);margin-top:9px}
.pozn a{color:var(--text2);text-decoration:underline}

/* pás dôveryhodnosti: čo za číslami stojí */
.dovera{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;overflow:hidden;
  background:var(--ram);border:1px solid var(--skloram);border-radius:var(--r);box-shadow:var(--tien);margin:22px 0 8px}
.dovera div{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:16px 18px}
.dovera b{display:block;font-size:22px;font-weight:780;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dovera span{font-size:13px;color:var(--text2)}

/* ---------- cenník ---------- */
.cennik{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:6px}
.plan{background:var(--sklo);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--skloram);border-radius:var(--r);padding:21px;display:flex;flex-direction:column;box-shadow:var(--tien)}
.plan.zvyraznene{border:2px solid var(--modra-svetla);box-shadow:0 16px 40px rgba(27,79,216,.18)}
.plan h3{margin:0 0 3px;font-size:17px}
.plan .cena{font-size:30px;font-weight:790;letter-spacing:-.03em;margin:9px 0 2px;font-variant-numeric:tabular-nums}
.plan .cena small{font-size:14px;font-weight:600;color:var(--text3);letter-spacing:0}
.plan ul{margin:13px 0 0;padding-left:18px;color:var(--text2);font-size:14.5px}
.plan li{margin-bottom:6px}
.plan .komu{color:var(--text3);font-size:13.5px}

footer{border-top:1px solid var(--ram);background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--text3);font-size:13.5px;margin-top:24px}
.foot-in{max-width:var(--sirka);margin:0 auto;padding:28px 20px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px}
footer h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--text2)}
footer a{display:block;color:var(--text2);padding:4px 0}
.foot-spod{border-top:1px solid var(--ram);padding:15px 20px;max-width:var(--sirka);margin:0 auto}

/* ---------- mobil je prvý ---------- */
@media(max-width:760px){
  .zoznam{columns:1}
  h1{font-size:27px} h2{font-size:19.5px;margin:30px 0 13px}
  main{padding:18px 14px 54px}
  .hero{padding:26px 20px 24px;border-radius:20px} .hero h1{font-size:28px} .hero p{font-size:15.5px;margin-bottom:18px}
  .velke-hladanie form{flex-direction:column;gap:8px;padding:8px}
  .velke-hladanie input{padding:15px 16px;font-size:16px}
  .velke-hladanie button{width:100%;padding:16px;font-size:16.5px}
  .hladaj{flex-direction:column}
  .hladaj button{width:100%;padding:16px}
  nav.menu{gap:0;flex-wrap:nowrap} nav.menu a{padding:10px 12px;font-size:14px}
  .hlava-top{gap:12px} .hlada-hlava{order:3;max-width:none}
  th,td{padding:12px 12px;font-size:14.5px}
  .karty{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:11px}
  .karta .cis{font-size:25px}
  .produkty,.dlazdice,.cennik{grid-template-columns:1fr}
  .vysl{min-height:68px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}