/* sub/2027 - vlastný CSS, hodnoty prevzaté z computed štýlov originálu https://2026.aio.sk/
(Divi 5). Farby: pozadie #030407, primárna #ea0d45, tlmený text #94a3b8,
karty rgba(99,99,99,.24) + border rgba(255,255,255,.05) + radius 30px, font Quicksand. */
/* Quicksand (SIL Open Font License 1.1) - z nasho servera namiesto Google Fonts (audit 3.10.2026):
IP navstevnika sa tak neposiela Googlu pred suhlasom a odpadne jedno spojenie.
Variabilny font = jeden subor pre hrubky 300-700; latin-ext pokryva slovencinu a cestinu. */
@font-face {
font-family: "Quicksand";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/fonts/quicksand-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Quicksand";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/fonts/quicksand-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--color-bg: #030407;
--color-primary: #ea0d45;
--color-primary-dark: #b50e33; /* hover: tmavsi nez primarna */
/* #ea0d45 od 2.10.2026 (audit kontrastu, majitel: "na vsetkej cervenej"): jediny odtien povodnej
cervenej, ktory ma 4,5:1 oboma smermi - biely text na nej (4,52) aj ona ako text na ciernom (4,53).
Povodna #f21b51 mala biely text len 4,16; tmavsia #d9123f zas text na ciernom len 4,01. */
--color-muted: #94a3b8;
--color-text: #ffffff;
--color-card: rgba(99, 99, 99, .24);
--color-card-border: rgba(255, 255, 255, .05);
--color-footer: #0b0e15; /* tmava modrosiva - musi sa lisit od --color-bg (#030407), inak splynu vlny (wave) na okrajoch */
--radius-card: 30px;
--container-w: 1390px;
--font: "Quicksand", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Glass (sklo) - JEDINY zdroj vzhladu pre hlavicku, mega-menu, pas "Doverujú nám"
a vsetky karty. Zmena tu = zmena vsade. --glass-tint sa da na prvku prebit
(napr. tmavsi variant pre dropdown nad hero textom). */
--glass-sheen: linear-gradient(to bottom, rgba(255, 255, 255, .07), rgba(255, 255, 255, .075) 10%, rgba(255, 255, 255, 0));
--glass-tint: rgba(10, 12, 20, .6);
--glass-tint-strong: rgba(10, 12, 20, .61);
--glass-border: rgba(255, 255, 255, 0);
--glass-blur: blur(6px) saturate(2.5);
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 0px 26px rgba(0, 0, 0, .37);
--glass-haze: 0; /* hmla pod hlavickou (alfa) - vyladene na 0 */
--section-tint: rgba(3, 4, 7, .75); /* krytie sekcii nad animovanym pozadim */
/* Ladenie naživo: ?glass=1 na ľubovoľnej stránke otvorí konfigurátor (assets/js/glass-config.js),
ktorý tieto tokeny mení na a vypíše hotový blok na vloženie sem. */
/* Tvar rohov pre .shape-hex (zrezaný/šesťuholníkový roh). Ladí sa konfigurátorom
?rohy=1 (assets/js/corner-config.js), ktorý tieto tokeny prepisuje na .
Každý roh má vlastnú šírku (X) aj výšku (Y) zrezania - keď sa nerovnajú, roh je
eliptický a tvar sa dá ťahať do strán alebo splošťovať. --hex-round rovnako
na roh: 0 = ostrý zrezaný roh (bevel), 1 = kruhový oblúk, 2 = squircle. */
--hex-x-tl: 56px; --hex-y-tl: 56px; --hex-round-tl: 0; /* ľavý horný */
--hex-x-tr: 56px; --hex-y-tr: 56px; --hex-round-tr: 0; /* pravý horný */
--hex-x-br: 56px; --hex-y-br: 56px; --hex-round-br: 0; /* pravý dolný */
--hex-x-bl: 56px; --hex-y-bl: 56px; --hex-round-bl: 0; /* ľavý dolný */
/* Zaoblenie samotných VRCHOLOV zrezania (hrany zostanú rovné). Kreslí
assets/js/shape-hex.js do --hex-path; 0 = ostré vrcholy. */
--hex-vertex-round: 14px;
--hex-path: none;
/* Pod 600px sa všetky rohy zmenšia týmto pomerom - pri úzkej karte by plné
zrezanie odkrojilo text. --hex-scale je to, čo sa reálne použije. */
--hex-mobile-scale: 0.6;
--hex-scale: 1;
}
@media (max-width: 600px) { :root { --hex-scale: var(--hex-mobile-scale); } }
/* ---------- Svetlý režim: tokeny ----------
Prepínač je v hlavičke (partials/header.php, obsluha v partials/footer.php),
voľba sa ukladá ako data-theme na a pamätá sa medzi návštevami.
Bez voľby platí nastavenie operačného systému, preto sú pravidlá dvakrát:
raz pre systémovú preferenciu, raz pre ručnú voľbu. Systémové je vylúčené
cez :not([data-theme]) - inak by na počítači so svetlým systémom prebíjalo
ručne zvolený tmavý režim.
Tu sa menia LEN tokeny. Karty, hlavička aj menu berú vzhľad z glass tokenov,
takže väčšinu webu pokryje už toto; prepisy jednotlivých komponentov sú
na konci súboru (poradie tam má význam). */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--color-bg: #f6f7fb;
--color-text: #0f172a;
--color-muted: #52607a;
--color-card: rgba(15, 23, 42, .04);
--color-card-border: rgba(15, 23, 42, .1);
--color-footer: #efe9f7;
--glass-sheen: linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5) 10%, rgba(255, 255, 255, 0));
--glass-tint: rgba(255, 255, 255, .75);
--glass-tint-strong: rgba(255, 255, 255, .92);
--glass-border: rgba(15, 23, 42, .1);
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(15, 23, 42, .04), 0 2px 18px rgba(15, 23, 42, .1);
--section-tint: rgba(246, 247, 251, .82);
--color-primary: #d9123f; /* na svetlom pozadi #ea0d45 ako text nestaci (4,2:1), #d9123f ma 4,8:1 */
}
}
:root[data-theme="light"] {
--color-bg: #f6f7fb;
--color-text: #0f172a;
--color-muted: #52607a;
--color-card: rgba(15, 23, 42, .04);
--color-card-border: rgba(15, 23, 42, .1);
--color-footer: #efe9f7;
--glass-sheen: linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5) 10%, rgba(255, 255, 255, 0));
--glass-tint: rgba(255, 255, 255, .75);
--glass-tint-strong: rgba(255, 255, 255, .92);
--glass-border: rgba(15, 23, 42, .1);
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(15, 23, 42, .04), 0 2px 18px rgba(15, 23, 42, .1);
--section-tint: rgba(246, 247, 251, .82);
--color-primary: #d9123f; /* na svetlom pozadi #ea0d45 ako text nestaci (4,2:1), #d9123f ma 4,8:1 */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-bg); }
body {
position: relative;
margin: 0;
font-family: var(--font);
font-size: 16px;
line-height: 1.5;
font-weight: 500;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
.container { max-width: calc(var(--container-w) + 48px); margin: 0 auto; padding: 0 24px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--color-text); }
h1 { font-size: 46.4px; line-height: 1.1; }
h2 { font-size: 36.8px; line-height: 1.28; }
h3 { font-size: 17.6px; line-height: 1.3; }
p { margin: 0; }
svg { display: inline-block; }
/* ---------- Animované pozadie (UnicornStudio, ako originál) ---------- */
#aio-site-bg {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 130vh;
z-index: 0;
pointer-events: none;
overflow: hidden;
filter: hue-rotate(15deg) saturate(1.5);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}
#aio-site-bg::before {
/* statický fallback, kým sa WebGL scéna načíta (alebo ak nie je dostupná) */
content: "";
position: absolute; inset: 0;
background:
radial-gradient(60% 45% at 50% 30%, rgba(120, 40, 160, .55), transparent 70%),
radial-gradient(40% 40% at 18% 8%, rgba(90, 30, 140, .45), transparent 70%),
radial-gradient(45% 40% at 85% 15%, rgba(140, 20, 90, .35), transparent 70%);
}
#aio-site-bg .aio-us-scene {
position: absolute;
top: 0; left: 50%;
width: 100%;
height: 120%;
transform: translateX(-50%);
transform-origin: center top;
}
#aio-site-bg canvas { display: block; width: 100% !important; height: 100% !important; }
.site-header { position: relative; z-index: 50; }
main, .site-footer { position: relative; z-index: 1; }
/* ---------- Tvar: šesťuholníková karta (.shape-hex) ----------
Obdĺžnik so zrezanými rohmi. Tri úrovne, od najstaršej podpory po najnovšiu -
každá ďalšia prebije predošlú, keď ju prehliadač vie:
1) clip-path: polygon() - funguje všade. Rovné hrany, ostré vrcholy. Clip
orezáva border aj vonkajší box-shadow, preto sú okraje v tejto vetve
riešené vnútornými (inset) tieňmi, ktoré clip nezruší.
2) corner-shape (Chrome 139+) - kreslí prehliadač natívne, takže platí border
aj vonkajší glass tieň. Vie zaobliť roh, ALE ohne celú hranu: pri hodnote
medzi 0 a 1 prestane byť strana rovná. Preto sa tu používa len 0 = ostrý
zrezaný roh (bevel).
POZOR: superellipse(2) / squircle je obyčajné zaoblenie BEZ zrezania.
3) shape() (Chrome 135+) + --hex-path z assets/js/shape-hex.js - jediné, čo vie
rovné hrany A zaoblené vrcholy naraz. Cesta sa musí počítať (odsadenie
oblúka od vrcholu závisí od uhla hrán), preto ju kreslí JS. Bez JS alebo
pri --hex-vertex-round: 0 ostáva --hex-path: none a platí úroveň 2. */
.shape-hex {
background: var(--glass-sheen), var(--glass-tint);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(255, 255, 255, .04);
--_x-tl: calc(var(--hex-x-tl) * var(--hex-scale)); --_y-tl: calc(var(--hex-y-tl) * var(--hex-scale));
--_x-tr: calc(var(--hex-x-tr) * var(--hex-scale)); --_y-tr: calc(var(--hex-y-tr) * var(--hex-scale));
--_x-br: calc(var(--hex-x-br) * var(--hex-scale)); --_y-br: calc(var(--hex-y-br) * var(--hex-scale));
--_x-bl: calc(var(--hex-x-bl) * var(--hex-scale)); --_y-bl: calc(var(--hex-y-bl) * var(--hex-scale));
clip-path: polygon(
var(--_x-tl) 0, calc(100% - var(--_x-tr)) 0,
100% var(--_y-tr), 100% calc(100% - var(--_y-br)),
calc(100% - var(--_x-br)) 100%, var(--_x-bl) 100%,
0 calc(100% - var(--_y-bl)), 0 var(--_y-tl)
);
}
@supports (corner-shape: superellipse(0.3)) {
.shape-hex {
clip-path: none;
/* poradie: ľavý horný, pravý horný, pravý dolný, ľavý dolný */
corner-shape: superellipse(var(--hex-round-tl)) superellipse(var(--hex-round-tr))
superellipse(var(--hex-round-br)) superellipse(var(--hex-round-bl));
/* pred lomítkom vodorovné polomery, za ním zvislé - tým je roh eliptický */
border-radius: var(--_x-tl) var(--_x-tr) var(--_x-br) var(--_x-bl)
/ var(--_y-tl) var(--_y-tr) var(--_y-br) var(--_y-bl);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
}
/* Zaoblené vrcholy pri rovných hranách. --hex-path je none, kým ho JS nenastaví,
takže bez JS sa nič nezmení. clip-path znovu orezáva border a vonkajší tieň,
preto sa vracajú vnútorné (inset) tiene ako v úrovni 1. */
@supports (clip-path: shape(from 0px 0px, line to 10px 0px, close)) {
.shape-hex {
/* --hex-path je "none", kým ho JS nenastaví - vtedy platí corner-shape
z úrovne 2 (a v prehliadačoch bez nej polygon z úrovne 1). */
clip-path: var(--hex-path);
/* keď cestu kreslí clip-path, border a vonkajší tieň sa orežú - späť na inset */
border: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
/* bez vypočítanej cesty sa okraje vrátia na natívne (corner-shape ich zvládne) */
.shape-hex:not(.has-hex-path) {
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
}
/* ---------- Tlačidlá ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 49px;
padding: 0 25px 0 14px;
border-radius: 100px;
font-size: 16px;
font-weight: 600;
line-height: 1;
/* Biela natvrdo: tlacidla lezia na cervenej (.btn--primary) alebo tmavom
podklade v oboch rezimoch. Svetly variant tmaveho tlacidla si farbu
prepisuje sam na konci suboru. */
color: #fff;
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn svg { width: 14px; height: 14px; flex: none; }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn--dark, .btn--secondary { background: rgba(17, 17, 17, .49); border-color: rgba(255, 255, 255, .05); }
.btn--dark svg, .btn--secondary svg { width: 16px; height: 16px; color: var(--color-primary); }
.btn--dark:hover, .btn--secondary:hover { border-color: rgba(255, 255, 255, .2); background: rgba(17, 17, 17, .7); }
/* ---------- Header (fix + zaoblená "pilulka", vzor: novy.drevostavbymichalic.sk) ----------
Pilulka je ::before na __inner (nie background hlavičky), aby zaoblenie kopírovalo
obsahový kontajner a nie celú šírku okna. Hlavička sa pri scrolle nadol skrýva. */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
height: auto;
background: none;
padding: 14px 20px 0;
transition: transform .3s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
/* Hlavicka je fixed a plava nad obsahom: main dostava odsadenie o jej vysku
(14px vrchny padding + 64px pilulka + 14px odstup). Hero si ho vytiahne spat
negativnym marginom, aby jeho tmave pozadie siahalo az pod hlavicku. */
main { position: relative; padding-top: var(--header-offset, 92px); }
/* Prva sekcia si odsadenie vytiahne spat negativnym marginom a nahradi ho
PRIEHLADNYM BORDEROM, nie paddingom: pozadie sekcie sa kresli aj pod border
(background-clip: border-box), takze siaha az pod hlavicku bez pasu, ale
vlastny padding-top sekcie ostane nedotknuty a absolutne prvky s top:0
(wave dividery) sa pocitaju od spodku borderu - ostanu tam, kde boli. */
main > :first-child {
margin-top: calc(-1 * var(--header-offset, 92px));
border-top: var(--header-offset, 92px) solid transparent;
}
.site-header__inner {
position: relative;
max-width: 1124px;
height: 64px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: minmax(0, 366px) 1fr minmax(0, 366px);
align-items: center;
}
/* Glass pilulka: silny blur + jemny svetelny gradient zhora (odlesk skla),
vnutorny highlight na hornej hrane a mekky vonkajsi tien. */
.site-header__inner::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: 999px;
background: var(--glass-sheen), var(--glass-tint);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-shadow);
transition: background .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled .site-header__inner::before {
background: var(--glass-sheen), var(--glass-tint-strong);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 10px 36px rgba(0, 0, 0, .5);
}
/* Hmla: mekky prechod pod hlavickou, aby obsah "vstupoval" do rozmazania
namiesto ostreho rezu na spodnej hrane pilulky. */
.site-header::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 132px;
z-index: -1;
pointer-events: none;
background: linear-gradient(to bottom, rgba(3, 4, 7, var(--glass-haze)), rgba(3, 4, 7, calc(var(--glass-haze) * .5)) 45%, rgba(3, 4, 7, 0));
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.site-header__inner > * { position: relative; z-index: 1; }
.site-logo { justify-self: start; display: flex; align-items: center; }
.main-nav { justify-self: start; }
.site-logo img { height: 25px; width: auto; display: block; }
.main-nav ul { list-style: none; display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; }
.main-nav__link {
display: block;
color: var(--color-text);
font-size: 16px;
font-weight: 600;
line-height: 20px;
padding: 22px 0;
/* "Sluzby" ma navyse sipku (.main-nav__caret) - bez nowrap sa pri uzsom
flex-stlaceni polozky sipka zalomi pod text namiesto vedla neho a
polozka menu sa (kvoli extra riadku) natiahne vyssie nez ostatne. */
white-space: nowrap;
transition: color .15s ease;
}
/* :hover len pre zariadenia s mysou - na dotykovom displeji "hover" po tuknuti
ostava visiet a Sluzby po zatvoreni menu zostali cervene
(pripomienka 20260920-181441-f8428775). Samotne (hover: hover) nestacilo -
niektore telefony (Samsung s perom) ho hlasia ako true, preto je hover
navyse viazany na desktopovu sirku; v rozbalenom mobilnom menu hover
nema zmysel (pripomienka 20260920-195544-111c1885). */
@media (hover: hover) and (min-width: 821px) {
.main-nav__link:hover { color: var(--color-primary); }
}
.main-nav__link[aria-current="page"] { color: var(--color-primary); }
.site-header__right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.header-cta { height: 28px; padding: 0 17px 0 14px; font-size: 14px; gap: 7px; }
.header-cta svg { width: 14px; height: 14px; }
/* Rychly kontakt v hlavicke (telefon, mail, WhatsApp) - len ikony, aby CTA ostalo hlavnym prvkom.
Standardne su ZBALENE (sirka 0) a vysunu sa dolava pri nabehnuti na pravu cast hlavicky
alebo ked ma niektora ikona fokus z klavesnice - pripomienka 20260926-082753-6a819d3b.
Animuje sa max-width, nie width: obsah ma vlastnu sirku (3x30px + medzery) a max-width
ju vie zrolovat na 0 bez toho, aby sa musela pocitat natvrdo. */
.header-contact {
display: inline-flex; align-items: center; gap: 2px;
max-width: 0; overflow: hidden; opacity: 0;
transition: max-width .28s ease, opacity .2s ease, margin-right .28s ease;
/* Zbalenie sa spusti az po odchode mysi - pripomienka 20260926-084229-2987b0bd
("nemozem to dobre chytit"): ikony sa vysunu dolava a cestou k nim mys opusti
pravu cast hlavicky, takze bez odkladu zmizli skor, nez sa na ne dalo kliknut.
Oneskorenie je na zakladnom (zbalenom) stave, preto plati len pri schovavani.
Skratene z 3s na 1s - pripomienka 20260926-123653-7cfff8ea. */
transition-delay: 1s;
margin-right: 0;
}
.site-header__right:hover .header-contact,
.header-contact:focus-within {
max-width: 120px; opacity: 1; margin-right: 6px;
/* Vysunutie ostava okamzite - oneskoruje sa iba schovanie. */
transition-delay: 0s;
}
.header-contact__link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: var(--color-text); transition: color .15s ease, background .15s ease; }
.header-contact__link svg { width: 17px; height: 17px; display: block; }
.header-contact__link:hover { color: var(--color-primary); background: rgba(255, 255, 255, .08); }
.header-contact__link--wa:hover { color: #25d366; }
/* Pod 1100px uz menu + ikony + CTA nevojdu do pilulky a prekryvali by sa
(menu je v strede mriezky, prava cast rastie dolava). */
@media (max-width: 1100px) { .header-contact { display: none; } }
/* Kto ma vypnute animacie, uvidi ikony rovno - bez vysuvania. */
@media (prefers-reduced-motion: reduce) {
.header-contact { transition: none; }
}
/* Prepínač tmavého / svetlého vzhľadu. Zobrazí sa vždy len jedna ikona - tá,
na ktorý vzhľad sa prepína (v tmavom režime slnko, v svetlom mesiac).
Tlačidlo je skryté, kým ho neodkryje JS - bez neho by nerobilo nič. */
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; flex: none; margin-left: 2px;
padding: 0; border: 0; border-radius: 50%;
background: none; color: var(--color-text); cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: rgba(127, 127, 127, .18); color: var(--color-primary); }
.theme-toggle__icon { width: 17px; height: 17px; display: block; }
.theme-toggle__icon--sun { display: none; }
:root[data-theme="light"] .theme-toggle__icon--sun { display: block; }
:root[data-theme="light"] .theme-toggle__icon--moon { display: none; }
@media (prefers-color-scheme: light) {
:root:not([data-theme]) .theme-toggle__icon--sun { display: block; }
:root:not([data-theme]) .theme-toggle__icon--moon { display: none; }
}
.menu-toggle { display: none; background: none; border: 0; color: var(--color-text); padding: 6px; cursor: pointer; align-items: center; gap: 6px; }
.menu-toggle svg { width: 26px; height: 26px; }
.menu-toggle__label { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
/* Otvorene menu: hamburger sa prepne na krizik (pripomienka 20260923-075751),
ale napis MENU ostava vedla neho aj v otvorenom stave
(pripomienka 20260925-054143-6158299a). */
.menu-toggle__icon--close { display: none; }
.menu-toggle.is-open .menu-toggle__icon--open { display: none; }
.menu-toggle.is-open .menu-toggle__icon--close { display: block; }
/* Služby mega-menu (dropdown na hover / klik na mobile) */
.main-nav__caret { display: inline-flex; margin-left: 6px; vertical-align: middle; }
.main-nav__caret svg { width: 12px; height: 12px; transform: rotate(90deg); transition: transform .18s ease; }
@media (hover: hover) and (min-width: 821px) {
.main-nav li.has-dropdown:hover .main-nav__caret svg { transform: rotate(-90deg); }
}
.main-nav li.has-dropdown.is-open .main-nav__caret svg { transform: rotate(-90deg); }
/* Dropdown sa centruje na celu pilulku hlavicky (.site-header__inner), nie na
polozku menu - preto su li aj nav na desktope static a kontajnerom je __inner. */
.main-nav li.has-dropdown { position: static; }
@media (min-width: 821px) {
.site-header__inner > .main-nav { position: static; }
}
.mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
/* 90 % sirky hlavickovej pilulky (pripomienka 20260922-092922-64f377d5 "nie na celu
sirku, len tak na 90%"; predtym 100 % z 20260922-092350-1f7e3919, 80 % pred tym) */
width: 90%;
max-width: 90%;
/* Vzhlad (sklo) dodava spolocne pravidlo "Glass" nizsie - menu vyzera rovnako
ako hlavicka, z ktorej vychadza.
Vyvoj: kvoli presvitaniu hero textu tu bol docasne nepriehladny tmavy
podklad (--glass-tint: #0a0c14). Majitel ho vratil spat na sklo -
pripomienka 20260926-183356-419adbce ("to co tam bolo predtym glass,
a href hover ma byt tmavy aby ho bolo vidno"). Citatelnost teraz riesi
tmavy hover na polozke, nie zatmavenie celeho menu.
Silnejsi blur (nie tmavsi podklad) drzi hero nadpis pod menu rozmazany,
takze cez sklo nepresvita citatelny text a menu pritom ostava sklom.
Tokeny :root sa nemenia - blur je prebity len tu, hlavicka a karty
zostavaju bez zmeny. */
--glass-blur: blur(22px) saturate(2.2);
border: 1px solid transparent;
/* horne rohy ostre - vizualne "vychadza" spod menu v hlavicke, ako jeden celok */
border-radius: 0 0 24px 24px;
padding: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
/* zatvaranie s oneskorenim - mys prechadza z odkazu do menu cez medzeru a nesmie sa zavriet */
transition: opacity .18s ease .3s, transform .18s ease .3s, visibility 0s linear .48s;
z-index: 60;
}
.main-nav li.has-dropdown:hover .mega-menu,
.main-nav li.has-dropdown.is-open .mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
/* Neviditelny mostik, aby hover nevypadol v medzere medzi odkazom a menu.
li je zamerne static (kvoli centrovaniu menu na celu hlavicku), takze
absolute sa viaze na .site-header__inner - mostik preto pokryva cely spodok
hlavicky az po menu, nie len uzky pruh pod odkazom. */
.main-nav li.has-dropdown:hover::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 100%;
height: 28px;
}
/* Rovnaky mostik drzi hover aj ked uz mys vosla do menu a vracia sa spat. */
.main-nav li.has-dropdown .mega-menu::before {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 100%;
height: 28px;
}
.mega-menu__inner { display: flex; flex-wrap: wrap; gap: 10px; }
.mega-menu__item {
/* pevne 3 polozky v riadku (3 + 3), nie "kolko sa zmesti" - pri 100 % sirke to
vychadzalo 4 + 2 (pripomienka 20260922-092922-64f377d5 "tri a tri mali byt") */
flex: 0 0 calc((100% - 20px) / 3);
display: flex;
align-items: center;
gap: 14px;
color: var(--color-text);
font-weight: 600;
font-size: 15.5px;
padding: 16px 14px; /* uzsie bocne odsadenie, aby sa najdlhsi nazov pri 3 v riadku nezalomil */
border-radius: 10px;
transition: background .15s ease, color .15s ease;
}
/* Hover: vyraznejsi cerveny podklad a BIELY text. Predtym to bolo
rgba(234,13,69,.12) + cerveny text, co nad tmavym sklom menu dalo takmer
cierny podklad a kontrast len ~4,3:1 - text bol na hover horsie citatelny
nez bez neho (pripomienka 20260926-125015-d2974df3 "hover neprehladne
tmave pozadie"). Teraz je kontrast ~13:1 a brandova cervena zostava. */
/* Hover je ODTIEN CIERNEJ - pripomienka 20260926-125847-ffc25d4e ("je cervene,
myslel som odtien ciernej") a 20260926-183356-419adbce ("href hover ma byt
tmavy aby ho bolo vidno"). Menu samo je sklo, takze polozka pod kurzorom sa
odlisi TMAVSIM podkladom, nie svetlejsim - predtym to bolo naopak
(rgba(255,255,255,.09)), lebo menu malo docasne tmavy nepriehladny podklad.
Nepriehladna cierna staci na citatelnost aj nad svetlym hero textom. */
.mega-menu__item:hover { background: rgba(10, 12, 20, .82); color: #fff; }
.mega-menu__icon { display: inline-flex; flex: none; width: 32px; height: 32px; background: rgba(255, 255, 255, .06); border-radius: 10px; align-items: center; justify-content: center; }
.mega-menu__icon svg { width: 18px; height: 18px; }
main { min-height: 40vh; }
/* ---------- Hero ---------- */
.hero { position: relative; background: var(--section-tint); padding-bottom: 54px; }
.hero__inner { max-width: 900px; margin: 0 auto; padding: 84px 24px 0; text-align: center; }
.hero-badge {
display: inline-flex;
align-items: center;
gap: 7px;
height: 28px;
padding: 0 8px;
border-radius: 100px;
background: rgba(234, 13, 69, .12);
border: 1px solid rgba(234, 13, 69, .12);
color: var(--color-primary);
font-size: 13px;
font-weight: 600;
line-height: 1;
margin: 0 0 21px;
}
.hero-badge svg { width: 14px; height: 14px; }
.hero h1 { font-size: 46.4px; line-height: 1.1; margin: 0 0 23px; padding-bottom: 10px; }
.hero__sub { font-size: 16px; line-height: 1.5; color: var(--color-muted); margin: 0 0 43px; }
.hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 101px; }
/* Dôverujú nám - pás na celú šírku + marquee */
.trust-band {
/* pozadie/okraje dodava spolocne pravidlo "Glass" - tu len sirky okrajov */
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
padding: 20px 14px;
text-align: center;
}
.marquee {
max-width: var(--container-w);
margin: 0 auto;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* 22 s na kolo (5 log): povodnych 40 s posobilo ako stojaci pas
(pripomienka 20260920-172253-0e6cec93). */
.marquee__track { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__slide { flex: none; width: 278px; height: 100px; display: flex; align-items: center; justify-content: center; }
.marquee__slide a { display: flex; align-items: center; justify-content: center; max-width: 100%; } /* logo je odkaz na referenciu; flex = bez medzery pod inline ![]()
*/
.marquee__slide img { height: 100px; width: auto; max-width: 100%; filter: opacity(.2); transition: filter .3s ease; }
.marquee__slide:hover img { filter: none; }
@keyframes marquee { to { transform: translateX(calc(-278px * 5)); } }
/* Obmedzeny pohyb (telefon s vypnutymi animaciami): pas sa nezastavi uplne
(majitel na telefone videl stojace loga), len ide 3x pomalsie. */
@media (prefers-reduced-motion: reduce) { .marquee__track { animation-duration: 66s; } }
/* ---------- Sekcie: nadpisy ---------- */
.section-sub { font-size: 16px; line-height: 1.5; color: var(--color-muted); text-align: center; margin: 10px 0 0; }
/* ---------- Služby (5 kariet) ---------- */
/* scroll-margin-top: pri skoku na #komplexne-sluzby nesmie nadpis skoncit pod
fixnou hlavickou (pripomienka 20260923-073603-7bfa7e56). */
.services { padding: 54px 0 92px; background: var(--section-tint); scroll-margin-top: var(--header-offset, 92px); }
.services h2 { text-align: center; }
.services .section-sub { margin-bottom: 54px; }
.svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.svc-card {
display: flex;
flex-direction: column;
background: var(--color-card);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-card);
padding: 24px 25px;
transition: border-color .3s ease;
}
.svc-card:hover { border-color: rgba(255, 255, 255, .18); }
.svc-card__icon { display: block; height: 48px; margin-bottom: 10px; }
.svc-card__icon svg { width: 40px; height: 40px; transition: transform .3s ease; }
.svc-card:hover .svc-card__icon svg { transform: scale(1.1); }
/* cela karta je odkaz - "VIAC" reaguje na hover kdekolvek na karte */
.svc-card:hover .more-link { color: var(--color-primary); }
.svc-card h3 { font-size: 17.6px; line-height: 1; padding-bottom: 10px; }
.svc-card p { font-size: 14.4px; line-height: 1.5; color: var(--color-muted); }
.more-link {
display: inline-flex;
align-items: center;
gap: 4px;
align-self: flex-start;
font-size: 11.2px;
font-weight: 500;
color: var(--color-text);
padding: 3.36px 0;
margin-top: 1px;
transition: color .15s ease;
}
.more-link svg { width: 10px; height: 10px; }
.more-link:hover { color: var(--color-primary); }
.more-link--pink { align-self: flex-end; color: var(--color-primary); font-size: 14.4px; font-weight: 600; padding: 0 28.8px 0 10px; margin: 0 0 9px; }
.more-link--pink svg { width: 14px; height: 14px; }
.more-link--pink:hover { color: #fff; }
/* ---------- Referencie ---------- */
.references { padding: 106px 0 73px; background: var(--color-bg); }
.references__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.references__head h2 { text-align: left; }
.references__head .section-sub { text-align: left; }
.references__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; align-items: start; }
.ref-card {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 183px;
padding: 0 25px 27px;
border-radius: 20px;
border: 1px solid #333;
overflow: hidden;
background:
linear-gradient(rgba(21, 21, 21, .43) 0%, rgba(0, 0, 0, .92) 100%),
var(--ref-img) center / cover no-repeat;
color: var(--color-text);
transition: transform .3s ease, border-color .3s ease;
}
.ref-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .25); }
.ref-card__tag { font-size: 11.2px; font-weight: 600; line-height: 24px; color: var(--color-primary); }
.ref-card__name { font-size: 17.6px; font-weight: 600; line-height: 24px; }
.ref-item__desc { font-size: 14.4px; line-height: 23.8px; color: var(--color-muted); margin-top: 15px; }
.testimonial {
background: var(--color-card);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-card);
padding: 30px 25px;
}
.testimonial__stars { display: flex; gap: 8px; color: var(--color-primary); margin-bottom: 30px; }
.testimonial__stars svg { width: 20px; height: 20px; }
.testimonial__quote { font-size: 17.6px; line-height: 23.8px; font-weight: 500; color: var(--color-text); margin-bottom: 14px; }
.testimonial__author { font-size: 14.4px; line-height: 18px; font-weight: 600; color: var(--color-text); }
.testimonial__company { font-size: 12.8px; line-height: 18px; font-weight: 500; color: var(--color-muted); }
/* ---------- Footer ---------- */
.site-footer { color: var(--color-text); }
.site-footer__main { position: relative; background: var(--color-footer); padding: 127px 0; }
.footer-col--contact { padding-top: 30px; }
.wave {
position: absolute;
left: 0; right: 0;
height: 44px;
background-repeat: repeat-x;
background-size: 100% 44px;
pointer-events: none;
z-index: 1;
}
.wave--top, .wave--why-top {
top: 0;
background-image: url("data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='none' width='100%25' height='140px' viewBox='0 0 1280 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23030407'%3E%3Cpath d='M504.854,80.066c7.812,0,14.893,0.318,21.41,0.879 c-25.925,22.475-56.093,40.852-102.946,40.852c-20.779,0-37.996-2.349-52.898-6.07C413.517,107.295,434.056,80.066,504.854,80.066z M775.938,51.947c19.145,18.596,39.097,35.051,77.956,35.051c46.907,0,62.299-14.986,80.912-24.98 c-21.357-15.783-46.804-28.348-85.489-28.348C816.829,33.671,794.233,41.411,775.938,51.947z' fill-opacity='.3' /%3E%3Cpath d='M1200.112,46.292c39.804,0,59.986,22.479,79.888,39.69v16.805 c-19.903-10.835-40.084-21.777-79.888-21.777c-72.014,0-78.715,43.559-147.964,43.559c-56.84,0-81.247-35.876-117.342-62.552 c9.309-4.998,19.423-8.749,34.69-8.749c55.846,0,61.99,39.617,115.602,39.617C1143.177,92.887,1142.618,46.292,1200.112,46.292z M80.011,115.488c-40.006,0-60.008-12.206-80.011-29.506v16.806c20.003,10.891,40.005,21.782,80.011,21.782 c80.004,0,78.597-30.407,137.669-30.407c55.971,0,62.526,24.026,126.337,24.026c9.858,0,18.509-0.916,26.404-2.461 c-57.186-14.278-80.177-48.808-138.66-48.808C154.698,66.919,131.801,115.488,80.011,115.488z M526.265,80.945 c56.848,4.902,70.056,28.726,137.193,28.726c54.001,0,73.43-35.237,112.48-57.724C751.06,27.782,727.548,0,665.691,0 C597.381,0,567.086,45.555,526.265,80.945z' fill-opacity='.5' /%3E%3Cpath d='M0,0v85.982c20.003,17.3,40.005,29.506,80.011,29.506c51.791,0,74.688-48.569,151.751-48.569 c58.482,0,81.473,34.531,138.66,48.808c43.096-8.432,63.634-35.662,134.433-35.662c7.812,0,14.893,0.318,21.41,0.879 C567.086,45.555,597.381,0,665.691,0c61.856,0,85.369,27.782,110.246,51.947c18.295-10.536,40.891-18.276,73.378-18.276 c38.685,0,64.132,12.564,85.489,28.348c9.309-4.998,19.423-8.749,34.69-8.749c55.846,0,61.99,39.617,115.602,39.617 c58.08,0,57.521-46.595,115.015-46.595c39.804,0,59.986,22.479,79.888,39.69V0H0z' /%3E%3C/g%3E%3C/svg%3E");
}
.wave--bottom, .wave--why-bottom {
bottom: 0;
transform: scaleX(-1);
background-image: url("data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='none' width='100%25' height='140px' viewBox='0 0 1280 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23030407'%3E%3Cpath d='M853.893,86.998c-38.859,0-58.811-16.455-77.956-35.051c18.295-10.536,40.891-18.276,73.378-18.276 c38.685,0,64.132,12.564,85.489,28.347C916.192,72.012,900.8,86.998,853.893,86.998z M526.265,80.945 c-6.517-0.562-13.599-0.879-21.41-0.879c-70.799,0-91.337,27.229-134.433,35.662c14.901,3.72,32.118,6.07,52.898,6.07 C470.171,121.797,500.34,103.421,526.265,80.945z' fill-opacity='.3' /%3E%3Cpath d='M663.458,109.671c-67.137,0-80.345-23.824-137.193-28.726C567.086,45.555,597.381,0,665.691,0 c61.857,0,85.369,27.782,110.246,51.947C736.888,74.434,717.459,109.671,663.458,109.671z M217.68,94.163 c55.971,0,62.526,24.026,126.337,24.026c9.858,0,18.508-0.916,26.404-2.461c-57.186-14.278-80.177-48.808-138.659-48.808 c-77.063,0-99.96,48.569-151.751,48.569c-40.006,0-60.008-12.206-80.011-29.506v16.806c20.003,10.891,40.005,21.782,80.011,21.782 C160.014,124.57,158.608,94.163,217.68,94.163z M1200.112,46.292c-57.493,0-56.935,46.595-115.015,46.595 c-53.612,0-59.755-39.618-115.602-39.618c-15.267,0-25.381,3.751-34.69,8.749c36.096,26.675,60.503,62.552,117.342,62.552 c69.249,0,75.951-43.559,147.964-43.559c39.804,0,59.986,10.943,79.888,21.777V85.982 C1260.097,68.771,1239.916,46.292,1200.112,46.292z' fill-opacity='.5' /%3E%3Cpath d='M1052.147,124.57c-56.84,0-81.247-35.876-117.342-62.552c-18.613,9.994-34.005,24.98-80.912,24.98 c-38.859,0-58.811-16.455-77.956-35.051c-39.05,22.487-58.479,57.724-112.48,57.724c-67.137,0-80.345-23.824-137.193-28.726 c-25.925,22.475-56.093,40.852-102.946,40.852c-20.779,0-37.996-2.349-52.898-6.07c-7.895,1.545-16.546,2.461-26.404,2.461 c-63.811,0-70.366-24.026-126.337-24.026c-59.072,0-57.665,30.407-137.669,30.407c-40.006,0-60.008-10.891-80.011-21.782V140h1280 v-37.212c-19.903-10.835-40.084-21.777-79.888-21.777C1128.098,81.011,1121.397,124.57,1052.147,124.57z' /%3E%3C/g%3E%3C/svg%3E");
}
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 76px; }
.footer-col h3 { font-size: 20px; line-height: 30px; letter-spacing: 2px; padding-bottom: 10px; }
.footer-list { list-style: none; margin: 0; padding: 0 0 16px; }
.footer-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.4px; line-height: 26px; color: var(--color-text); }
.footer-list li:first-child { line-height: 24px; }
.footer-list__spacer { height: 20px; }
.footer-list__small { font-size: 12.8px !important; }
.footer-list a { color: var(--color-text); transition: color .15s ease; }
.footer-list a:hover { color: var(--color-primary); }
.fi { display: inline-flex; width: 16px; height: 16px; flex: none; margin-top: 5px; }
.fi svg { width: 16px; height: 16px; }
.fi--pink { color: var(--color-primary); }
.contact-box { display: flex; gap: 15px; margin-bottom: 38px; }
.contact-box:last-child { margin-bottom: 0; }
.contact-box__icon {
width: 50px; height: 50px; flex: none;
border-radius: 100px;
background: var(--color-card);
display: flex; align-items: center; justify-content: center;
color: var(--color-text);
}
.contact-box__icon svg { width: 24px; height: 24px; }
.contact-box__text { display: flex; flex-direction: column; gap: 9px; }
.contact-box__label { font-size: 11.2px; font-weight: 500; line-height: 14px; text-transform: uppercase; color: var(--color-muted); }
.contact-box__text a { font-size: 19.2px; font-weight: 700; line-height: 24px; color: var(--color-text); transition: color .15s ease; }
.contact-box__text a:hover { color: var(--color-primary); }
.site-footer__bar { background: rgba(3, 4, 7, .16); margin-top: 23px; padding: 0 0 24px; }
.footer-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12.8px; color: #f1f1f1; }
.footer-bar__left { line-height: 23.8px; }
.footer-bar__left a { color: #f1f1f1; }
.footer-bar__left a:hover { color: var(--color-primary); }
.footer-bar__right { text-align: right; line-height: 20.8px; }
/* ---------- Podstránky (hodnoty z computed štýlov originálu 2026.aio.sk) ---------- */
.btn--purple { background: #c084fc; border-color: #c084fc; }
.btn--purple:hover { background: #b06ff5; border-color: #b06ff5; }
.btn--blue { background: #60a5fa; border-color: #60a5fa; color: #202c45; }
.btn--blue:hover { background: #4b95f2; border-color: #4b95f2; }
.btn--orange { background: #fb923c; border-color: rgba(251, 146, 60, .05); color: #000; }
.btn--orange:hover { background: #f9832a; }
.btn--outline { background: transparent; border-color: var(--color-text); }
.btn--outline:hover { background: rgba(255, 255, 255, .08); }
/* Hero varianty */
.hero__sub { max-width: 700px; margin-left: auto; margin-right: auto; }
.hero--svc .hero__inner { padding-top: 64px; }
.hero--box .hero__inner { padding-top: 74px; }
.hero .h1--split { margin-bottom: 33px; }
.sec-pill.hero-badge--svc { display: flex; width: max-content; margin: 0 auto 21px; }
.hero-box {
display: inline-flex; align-items: center; justify-content: center;
width: 68px; height: 68px;
border: 1px solid; border-radius: 10px;
margin-bottom: 16px;
}
.hero-box svg { width: var(--icon, 40px); height: var(--icon, 40px); }
.hero--list .svc-grid { margin-top: 21px; padding-bottom: 37px; }
/* Podstránky: logá v páse len 16px vysoké (ako originál) - bez stlmenia, na origináli sú plne viditeľné */
.trust-band--sm .marquee__slide { width: 247px; height: 16px; }
.trust-band--sm .marquee__slide img { height: 16px; filter: none; }
.trust-band--sm .marquee__track { animation-name: marquee-sm; }
@keyframes marquee-sm { to { transform: translateX(calc(-247px * 5)); } }
.hero--list .hero__sub { margin-bottom: 0; }
.hero--refs .hero-badge { color: var(--color-text); font-size: 14px; font-weight: 500; }
/* Hero so "Späť" (kontakt, detail referencie) */
.hero--back .hero__inner { max-width: 862px; padding-top: 108px; }
.back-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 25px;
font-size: 12.8px; font-weight: 700; line-height: 21.76px;
color: var(--color-text);
background: rgba(97, 97, 97, .4);
border: 1px solid rgba(255, 255, 255, .05);
border-radius: 100px;
margin-bottom: 31px;
transition: background .2s ease;
}
.back-pill svg { width: 12px; height: 12px; flex: none; transform: rotate(180deg); }
.back-pill:hover { background: rgba(97, 97, 97, .6); }
/* margin-top sa zlučuje s margin-bottom podtitulu (43px) - cielom je 66 / 103 px */
.hero__content { margin-top: 66px; margin-bottom: 101px; }
.hero__content--ref { margin-top: 103px; }
/* Sekcia so spoločnou hlavičkou */
.sec { padding: 50px 0 80px; }
.sec--dark { background: var(--section-tint); }
.sec__head { text-align: center; }
.sec h2 { line-height: 1; padding-bottom: 10px; }
.sec-pill {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 8px;
border: 1px solid; border-radius: 100px;
font-size: 14px; font-weight: 500; line-height: 26px;
margin-bottom: 24px;
}
.sec-pill svg { width: 16px; height: 16px; flex: none; } /* ikona sluzby pred textom stitku (farba = currentColor stitku) */
.sec__note { max-width: 666px; margin: 0 auto; padding-bottom: 16px; text-align: center; font-size: 16px; line-height: 23.8px; color: var(--color-muted); }
/* Ikonové karty (vlastnosti, kroky) - šírky 1:1 podľa originálu cez flex-basis */
/* Divi riadok ma pod kartami padding 37px; medzera medzi riadkami kariet je min. 20px */
.cards-row { display: flex; flex-wrap: wrap; gap: max(20px, var(--gap, 30px)) var(--gap, 30px); margin-top: 54px; padding-bottom: 37px; }
.icard {
flex: 0 1 var(--w, 300px); min-width: 0;
background: rgba(99, 99, 99, .16);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-card);
padding: 24px 25px;
transition: border-color .3s ease;
}
.icard:hover, .pcard:hover { border-color: rgba(255, 255, 255, .18); }
/* Ikona, nadpis aj popis na stred - pripomienka 20260926-125456-ff1adb0a
("ikona text popis vsetko nastred vsade"). .icard vykresluje spolocny blok
block_cards_section(), takze zmena tu plati na celom webe, nie len na uvode.
Ikona potrebuje flex - pri display:block by ju text-align nevycentroval,
lebo