/* =====================================================================
   www.modernastranka.sk — jediný štýlový súbor.
   Vizuálny jazyk: biely podklad, motorsportové pruhy (svetlá modrá /
   tmavá modrá / červená) a šikmé rovnobežníky. Naľavo pevný panel
   s navigáciou, ktorý sa na mobile vysunie ako prekrytie.

   Poradie sekcií v súbore:
     1. premenné a základ        6. sekcie a karty
     2. geometria (rovnobežníky)  7. cenník
     3. ľavý panel                8. referencie
     4. tlačidlá                  9. formulár
     5. hero                     10. pätička + responzivita
   ===================================================================== */

/* ============================ 1. premenné ========================== */

:root{
  /* plochy */
  --white:#ffffff;
  --paper:#f3f5f8;          /* svetlé pozadie sekcií */
  --paper-2:#e9edf3;        /* o odtien tmavšie */
  --ink:#0e1219;            /* text */
  --ink-2:#5b6472;          /* vedľajší text */
  --ink-3:#8b939f;          /* najtichší text */
  --line:#e0e5ec;
  --line-2:#cdd5e0;

  /* motorsportová trojica */
  --blue-l:#1c9ae0;         /* svetlá modrá */
  --blue:#0653b6;           /* modrá — hlavný akcent */
  --navy:#0d1b3e;           /* tmavá modrá */
  --red:#e4002b;            /* červená */

  /* odvodené */
  --blue-soft:rgba(6,83,182,.08);
  --red-soft:rgba(228,0,43,.08);

  /* geometria */
  --pg:18px;                /* posun rovnobežníka */
  --pg-sm:10px;
  --skew:-11deg;

  /* ostatné */
  --shadow:0 1px 2px rgba(14,18,25,.04), 0 8px 24px rgba(14,18,25,.06);
  --shadow-lg:0 2px 4px rgba(14,18,25,.05), 0 24px 60px rgba(13,27,62,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1320px;
  --gut:clamp(20px,3.6vw,56px);   /* vodorovná medzera .wrap — používa ju aj hero */
  --hero-cut:clamp(56px,7.5vw,132px);  /* šírka šikmého zrezu modrej plochy */
}

*,*::before,*::after{box-sizing:border-box}

/* [hidden] musí prebiť display:inline-flex na tlačidlách — inak by ostali
   viditeľné aj keď ich skript skryje. */
[hidden]{display:none!important}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  /* položky menu musia zostať viditeľné aj bez animácie, ktorá ich odkrýva */
  .drawer a,.drawer-foot{opacity:1!important;transform:none!important}
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font:400 16.5px/1.65 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden}

img,svg,picture{max-width:100%;display:block;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{
  margin:0;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.015em;
  text-transform:uppercase;
  font-style:italic;
}
h1{font-size:clamp(2.1rem,4.1vw,4rem);line-height:1.06;letter-spacing:-.025em}
h2{font-size:clamp(1.72rem,3.1vw,2.85rem);line-height:1.1;letter-spacing:-.022em}
h3{font-size:1.14rem;letter-spacing:0;text-transform:none;font-style:normal;font-weight:700}
h4{font-size:1rem;letter-spacing:0;text-transform:none;font-style:normal;font-weight:700}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

:focus-visible{outline:3px solid var(--blue-l);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
/* Ľavé odsadenie zhodné so .wrap, ale prvok si smie tiecť až k pravému okraju
   obrazovky. Používa hero — pravý stĺpec musí siahať do kraja. */
.bleed-r{padding-left:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)))}
.center{text-align:center}
.muted{color:var(--ink-2)}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
      padding:12px 20px;font-weight:700}
.skip:focus{left:16px;top:calc(var(--nav-h) + 12px)}

/* ============================ 2. geometria ========================= */

/* Rovnobežník: šikmé ľavé aj pravé hrany, vodorovný text zostáva čitateľný.
   Používa clip-path, takže netreba dvojité skosenie obsahu. */
.pg{clip-path:polygon(var(--pg) 0,100% 0,calc(100% - var(--pg)) 100%,0 100%)}
.pg-sm{clip-path:polygon(var(--pg-sm) 0,100% 0,calc(100% - var(--pg-sm)) 100%,0 100%)}
/* zrezaný pravý horný / ľavý dolný roh — pre karty */
.cut{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))}

/* trojpruh — vodorovný */
.stripe{display:flex;height:5px;width:112px;overflow:hidden;
        clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.stripe i{flex:1}
.stripe i:nth-child(1){background:var(--blue-l)}
.stripe i:nth-child(2){background:var(--navy)}
.stripe i:nth-child(3){background:var(--red)}
.stripe.wide{width:100%;max-width:none}
.stripe.thin{height:3px}

/* Na TMAVOM podklade je stredný diel (--navy) neviditeľný — pruh sa potom
   rozpadne na modrý a červený kus s medzerou medzi nimi a pôsobí, akoby mali
   rôznu dĺžku. Všetky tri diely sú pritom presne rovnaké (flex:1).
   Na tmavom preto stred dostane --blue. Nie bielu: pruh pod hero sekciou
   susedí zhora s bielym pozadím a biely stred by sa doň zlial rovnako, ako
   sa tmavomodrý zlieva s tmavým. --blue je čitateľné proti obom. */
.sec-navy .stripe i:nth-child(2),
.cta .stripe i:nth-child(2),
.band .stripe i:nth-child(2),
.price.hot .stripe i:nth-child(2),
footer.ft .stripe i:nth-child(2){background:var(--blue)}

/* trojpruh — svislý (pravý okraj panela, boky sekcií) */
.stripe-v{display:flex;flex-direction:column;width:5px;height:96px}
.stripe-v i{flex:1}
.stripe-v i:nth-child(1){background:var(--blue-l)}
.stripe-v i:nth-child(2){background:var(--navy)}
.stripe-v i:nth-child(3){background:var(--red)}

/* nadpis sekcie s malým štítkom */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--red);flex:0 0 auto}

.lead{font-size:clamp(1.04rem,1.35vw,1.22rem);line-height:1.62;color:var(--ink-2);max-width:62ch}
.head{margin-bottom:clamp(36px,5vw,64px)}
.head .lead{margin-top:16px}
.head.center .lead{margin-left:auto;margin-right:auto}

/* jemná diagonálna textúra do pozadia sekcií */
.diag{position:relative;overflow:hidden}
.diag::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(101deg,
    transparent 0 38px,rgba(13,27,62,.035) 38px 39px);
}

/* ====================== 3. HORNÁ NAVIGÁCIA ========================= */
/*
   Pevná lišta hore. Čo v nej beží:
     · pruh priebehu čítania (šírka podľa odscrollovania)
     · lišta sa po odscrollovaní zúži, zbelie a dostane tieň
     · pod odkazmi kĺže rovnobežníkový trojpruh za kurzorom aj fokusom
     · text odkazu sa pri prejdení preroluje (dve kópie nad sebou)
     · CTA tlačidlo prebehne šikmý odlesk
     · na mobile sa menu otvorí na celú obrazovku šikmým zotretím
   Všetko rešpektuje prefers-reduced-motion (blok na konci súboru).
*/

:root{
  --nav-h:88px;              /* výška lišty hore na stránke */
  --nav-h-s:66px;            /* výška po odscrollovaní */
  --nl-line:1.2em;           /* výška jedného riadka odkazu = posun pri rolovaní */
}

body{padding-top:var(--nav-h)}

/* Odkaz na kotvu (/sluzby/#eshop z pätičky) by inak pristál pod pevnou
   lištou. scroll-margin ju odpočíta pri natívnom aj plynulom scrollovaní. */
[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}

.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--nav-h);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:height .34s var(--ease),background .34s var(--ease),
             border-color .34s var(--ease),box-shadow .34s var(--ease);
}
.nav.is-stuck{
  height:var(--nav-h-s);
  background:rgba(255,255,255,.97);
  border-bottom-color:var(--line);
  box-shadow:0 6px 28px rgba(13,27,62,.09);
}

/* pruh priebehu čítania — --p nastavuje skript (0–1) */
.nav-prog{
  position:absolute;left:0;bottom:-1px;height:3px;width:100%;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue-l) 0 34%,var(--navy) 34% 67%,var(--red) 67% 100%);
  transition:transform .1s linear;pointer-events:none;
}

.nav-in{
  height:100%;display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
}

/* ---- značka ---- */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{width:42px;height:42px;transition:width .34s var(--ease),height .34s var(--ease)}
.nav.is-stuck .brand img{width:34px;height:34px}
.brand-txt{display:flex;flex-direction:column;line-height:1.04}
.brand-txt b{font-size:1.04rem;font-weight:800;font-style:italic;text-transform:uppercase;
             letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
.brand-txt span{font-size:.66rem;font-weight:700;letter-spacing:.17em;
                text-transform:uppercase;color:var(--blue);white-space:nowrap}

/* ---- odkazy ---- */
.nav-list{
  position:relative;display:flex;align-items:center;gap:clamp(2px,.6vw,10px);
  margin-left:auto;height:100%;
}
.nl{
  position:relative;display:block;padding:10px clamp(10px,1.1vw,17px);
  color:var(--ink);font-weight:700;font-size:.9rem;letter-spacing:.02em;
  text-transform:uppercase;font-style:italic;text-decoration:none;
}
.nl:hover{text-decoration:none}
/* Dve kópie textu nad sebou; pri prejdení sa vysunie spodná.
   Orezáva .nl-mask, nie .nl — na .nl je odsadenie, takže by druhá kópia
   presvitala v jeho spodnom paddingu. */
.nl-mask{display:block;overflow:hidden;height:var(--nl-line);line-height:1.2}
.nl-roll{display:block;transition:transform .38s var(--ease)}
.nl-roll span{display:block;height:var(--nl-line);line-height:1.2}
.nl-roll span+span{color:var(--red)}
/* Posun MUSÍ byť o jeden riadok, nie translateY(-100%): .nl-roll je vysoký
   dva riadky, takže -100 % vysunie z masky obe kópie a odkaz sa pri prejdení
   vyprázdni (vyzerá to, akoby zbelel). */
.nl:hover .nl-roll,.nl:focus-visible .nl-roll{transform:translateY(calc(-1 * var(--nl-line)))}
.nl[aria-current="page"]{color:var(--blue)}

/* kĺzavý rovnobežník pod odkazmi — polohu nastavuje skript */
.nav-ind{
  position:absolute;left:0;bottom:14px;height:4px;width:var(--w,0px);
  transform:translate3d(var(--x,0px),0,0);
  background:linear-gradient(90deg,var(--blue-l) 0 34%,var(--navy) 34% 67%,var(--red) 67% 100%);
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
  opacity:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.34,1.32,.44,1),
             width .42s cubic-bezier(.34,1.32,.44,1),opacity .25s var(--ease);
}
.nav-ind.is-on{opacity:1}

/* ---- CTA s odleskom ---- */
.nav-cta{flex:0 0 auto;margin-left:clamp(6px,1vw,18px)}
.nav-cta .btn{padding:13px 22px;font-size:.85rem}   /* odlesk je na .btn */

/* ---- hamburger ---- */
.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:44px;padding:0 12px;border:0;cursor:pointer;background:var(--navy);
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  flex:0 0 auto;margin-left:auto;
}
.burger i{display:block;height:2.5px;background:#fff;
          transition:transform .3s var(--ease),opacity .2s var(--ease),width .3s var(--ease)}
.burger i:nth-child(1){width:100%}
.burger i:nth-child(2){width:66%;margin-left:auto}
.burger i:nth-child(3){width:100%}
.burger:hover i:nth-child(2){width:100%}
.burger[aria-expanded="true"]{background:var(--red)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){width:100%;transform:translateY(-7.5px) rotate(-45deg)}

/* ---- celoobrazovkové menu (mobil) ---- */
.drawer{
  position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;
  justify-content:center;gap:2px;padding:96px var(--gut) 40px;
  background:linear-gradient(155deg,var(--navy) 0%,#122a5f 55%,var(--blue) 100%);
  /* šikmé zotretie zľava — zatvorené je do nuly */
  clip-path:polygon(0 0,0 0,0 100%,0 100%);
  transition:clip-path .55s cubic-bezier(.76,0,.24,1),visibility 0s .55s;
  visibility:hidden;overflow-y:auto;overscroll-behavior:contain;
}
body.nav-open .drawer{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  visibility:visible;transition:clip-path .55s cubic-bezier(.76,0,.24,1),visibility 0s;
}
.drawer::before{                        /* jemné pruhy do pozadia */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(101deg,
    transparent 0 46px,rgba(255,255,255,.045) 46px 47px);
}
.drawer a{
  position:relative;display:flex;align-items:center;gap:16px;
  padding:14px 0;color:#fff;text-decoration:none;
  font-size:clamp(1.7rem,7.5vw,2.6rem);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;
  opacity:0;transform:translateX(-28px);
}
body.nav-open .drawer a{
  animation:polozkaIn .5s var(--ease) forwards;
  animation-delay:calc(.18s + var(--i,0) * .06s);
}
@keyframes polozkaIn{to{opacity:1;transform:none}}
.drawer a i{
  font-style:normal;font-size:.8rem;font-weight:800;letter-spacing:.16em;
  color:var(--blue-l);min-width:2.6ch;
}
.drawer a[aria-current="page"]{color:var(--blue-l)}
.drawer a[aria-current="page"] i{color:var(--red)}
.drawer a::after{                       /* podčiarknutie pri prejdení */
  content:"";position:absolute;left:0;right:100%;bottom:8px;height:3px;
  background:var(--red);transition:right .35s var(--ease);
}
.drawer a:hover::after,.drawer a:focus-visible::after{right:0}

.drawer-foot{
  margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);
  display:grid;gap:10px;opacity:0;
}
body.nav-open .drawer-foot{animation:polozkaIn .5s var(--ease) .5s forwards}
.drawer-foot a{font-size:1rem;font-style:normal;font-weight:700;
               text-transform:none;letter-spacing:0;padding:4px 0;opacity:1;transform:none;
               animation:none!important}
.drawer-foot a::after{display:none}
.drawer-foot svg{width:17px;height:17px;color:var(--blue-l);flex:0 0 auto}
.drawer-foot p{margin:8px 0 0;color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.6}

/* ============================ 4. tlačidlá ========================== */

.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border:0;cursor:pointer;
  font:inherit;font-weight:800;font-size:.93rem;font-style:italic;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  clip-path:polygon(var(--pg-sm) 0,100% 0,calc(100% - var(--pg-sm)) 100%,0 100%);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{text-decoration:none;transform:translateX(3px)}
.btn svg{width:16px;height:16px;position:relative;z-index:1}

/* Šikmý odlesk, ktorý pri prejdení prebehne tlačidlom — rovnaký ako má CTA
   v hornej lište. Beží po ::after, takže sa nedotýka obsahu tlačidla. */
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-140%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-22deg);pointer-events:none;
}
.btn:hover::after,.btn:focus-visible::after{animation:odlesk .75s var(--ease)}
@keyframes odlesk{to{left:150%}}
/* na svetlých tlačidlách by biely odlesk nebolo vidieť — tam ide tmavý */
.btn-ghost::after,.btn-light::after{
  background:linear-gradient(100deg,transparent,rgba(13,27,62,.13),transparent);
}

.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:#c40025;color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--blue);color:#fff}
.btn-ghost{background:var(--paper);color:var(--ink)}
.btn-ghost:hover{background:var(--paper-2);color:var(--ink)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--paper);color:var(--navy)}
.btn-outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.btn-outline:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:11px 20px;font-size:.82rem}

.btns{display:flex;flex-wrap:wrap;gap:14px}

/* ============================ 5. hero ============================== */

/* Modrá plocha nie je pseudo-prvok, ale priamo pravý stĺpec mriežky.
   Predtým bola plocha umiestnená v percentách a karty odsadené pevnými
   pixelmi — na širokej obrazovke sa rozišli a karty vyliezli na biele
   pozadie. Takto je odsadenie obsahu vždy odvodené od --hero-cut,
   takže sa rozísť nemôžu, nezávisle od šírky okna. */

.hero{position:relative;background:var(--white);overflow:hidden}
.hero-in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,42%);
  align-items:stretch;
  min-height:min(80vh,760px);
}

.hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,7vw,104px) clamp(28px,3vw,64px) clamp(56px,7vw,104px) 0;
  position:relative;z-index:2;
}
.hero-copy > * {max-width:min(100%,44rem)}
.hero-copy .stripe{margin-bottom:26px;width:128px}
.hero h1{margin-bottom:22px}
.hero h1 .u{display:inline-block;position:relative;padding:0 2px}
.hero h1 .u::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.15em;
  background:var(--red);z-index:-1;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.hero .lead{margin-bottom:32px;max-width:46rem}
.hero-note{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 26px;
           font-size:.87rem;font-weight:600;color:var(--ink-2)}
.hero-note span{display:inline-flex;align-items:center;gap:8px}
.hero-note span::before{content:"";width:9px;height:9px;background:var(--blue);
                        transform:skewX(var(--skew));flex:0 0 auto}

/* pravý stĺpec — modrá plocha so šikmou ľavou hranou */
.hero-side{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:clamp(48px,6vw,84px) var(--gut) clamp(48px,6vw,84px)
          calc(var(--hero-cut) + clamp(22px,2.4vw,44px));
  background:linear-gradient(158deg,var(--navy) 0%,#122a5f 52%,var(--blue) 100%);
  clip-path:polygon(var(--hero-cut) 0,100% 0,100% 100%,0 100%);
}
.hero-side::before{                 /* jemné svetlé pruhy */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0 52px,rgba(255,255,255,.05) 52px 53px);
  clip-path:polygon(var(--hero-cut) 0,100% 0,100% 100%,0 100%);
}
/* Trojpruh presne po šikmej hrane — šikmý pás širokej 7 px, ktorý kopíruje
   zrez a je zvnútra zvislo rozdelený na tri motorsportové farby. */
.hero-side::after{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:calc(var(--hero-cut) + 7px);pointer-events:none;
  background:linear-gradient(180deg,
    var(--blue-l) 0 34%,#ffffff 34% 67%,var(--red) 67% 100%);
  clip-path:polygon(var(--hero-cut) 0,calc(var(--hero-cut) + 7px) 0,7px 100%,0 100%);
}

.hero-card{
  position:relative;z-index:2;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  padding:22px 28px;color:#fff;
  clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.hero-card:hover{background:rgba(255,255,255,.19);transform:translateX(5px)}
.hero-card b{display:block;font-size:clamp(1.6rem,2.3vw,2.15rem);font-weight:800;
             font-style:italic;line-height:1;letter-spacing:-.03em}
.hero-card span{display:block;margin-top:7px;font-size:.78rem;font-weight:700;
                letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.8)}
/* mierne stupňovanie — rovnobežníky sa neprekrývajú, len sa odsadzujú vpravo */
.hero-card:nth-child(2){margin-left:clamp(8px,1.4vw,26px)}
.hero-card:nth-child(3){margin-left:clamp(16px,2.8vw,52px)}

/* pás s pruhmi pod hero */
.band{background:var(--navy);color:#fff;padding:0}
.band .stripe{width:100%;height:6px;clip-path:none}
.band-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
         gap:12px 34px;padding:22px 0;align-items:center}
.band-in p{margin:0;font-size:.9rem;font-weight:700;letter-spacing:.03em;
           text-transform:uppercase;color:rgba(255,255,255,.85)}
.band-in strong{color:#fff}

/* ============================ 6. sekcie a karty ==================== */

.sec{padding:clamp(60px,8.5vw,126px) 0}
.sec-paper{background:var(--paper)}
.sec-navy{background:var(--navy);color:#fff}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-navy .lead,.sec-navy .muted{color:rgba(255,255,255,.72)}
.sec-navy .eyebrow{color:var(--blue-l)}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* karta služby */
.card{
  position:relative;background:#fff;border:1px solid var(--line);
  padding:clamp(26px,2.4vw,34px) clamp(24px,2.2vw,32px);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,100% 100%,0 100%);
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.card::before{                       /* pruh na hornej hrane */
  content:"";position:absolute;top:0;left:0;width:0;height:4px;
  background:linear-gradient(90deg,var(--blue-l) 0 34%,var(--navy) 34% 67%,var(--red) 67% 100%);
  transition:width .3s var(--ease);
}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.card:hover::before{width:100%}
.sec-paper .card{background:#fff}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-2);font-size:.95rem}
.card .ic{
  width:50px;height:50px;margin-bottom:18px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);
  clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);
}
.card .ic svg{width:23px;height:23px}
.card .more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:.83rem;font-weight:800;font-style:italic;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue);
}
.card .more:hover{text-decoration:none;gap:12px}
.card .more svg{width:14px;height:14px}
.card.accent{background:var(--navy);border-color:var(--navy);color:#fff}
.card.accent h3{color:#fff}
.card.accent p{color:rgba(255,255,255,.74)}
.card.accent .ic{background:rgba(255,255,255,.12);color:#fff}

/* číslovaný krok */
.step{position:relative;padding:28px 26px;background:#fff;border:1px solid var(--line);
      clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.step .no{
  display:inline-block;padding:6px 16px;margin-bottom:16px;
  background:var(--navy);color:#fff;
  font-size:.82rem;font-weight:800;font-style:italic;letter-spacing:.08em;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.step:nth-child(2) .no{background:var(--blue)}
.step:nth-child(3) .no{background:var(--blue-l)}
.step:nth-child(4) .no{background:var(--red)}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-2);font-size:.94rem}

/* zoznam s odrážkami — POZOR: nikdy display:flex na <li>, <b> vnútri by sa
   stal samostatnou flex položkou a veta by sa rozpadla do stĺpcov. */
.checks{list-style:none;margin:0;padding:0}
.checks li{position:relative;padding:7px 0 7px 30px;font-size:.95rem;line-height:1.55}
.checks li::before{
  content:"";position:absolute;left:0;top:15px;width:12px;height:12px;
  background:var(--blue);
  clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);
}
.checks.red li::before{background:var(--red)}
.checks.light li::before{background:var(--blue-l)}
.checks li b{font-weight:700;color:var(--ink)}
.sec-navy .checks li b{color:#fff}

/* dvojstĺpec text + zoznam */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
       gap:clamp(28px,5vw,64px);align-items:center}

/* štatistiky */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.stats div{background:#fff;padding:26px 22px;text-align:center}
.sec-navy .stats{background:rgba(255,255,255,.14)}
.sec-navy .stats div{background:var(--navy)}
.stats b{display:block;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;font-style:italic;
         line-height:1;letter-spacing:-.02em;color:var(--blue)}
.sec-navy .stats b{color:var(--blue-l)}
.stats span{display:block;margin-top:8px;font-size:.78rem;font-weight:700;letter-spacing:.12em;
            text-transform:uppercase;color:var(--ink-2)}
.sec-navy .stats span{color:rgba(255,255,255,.7)}

/* citát */
.quote{background:#fff;border:1px solid var(--line);padding:30px 30px 26px;
       clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.quote p{font-size:1rem;color:var(--ink);line-height:1.7}
.quote footer{margin-top:16px;display:flex;align-items:center;gap:12px;
              font-size:.85rem;color:var(--ink-2)}
.quote footer b{color:var(--ink);font-weight:700}
.quote .stripe{margin-bottom:18px;width:74px}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-weight:700;font-size:1.02rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  margin-top:-6px;background:var(--blue);transition:transform .25s var(--ease);
  clip-path:polygon(50% 100%,0 0,100% 0);
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{color:var(--blue)}
.faq .ans{padding:0 40px 22px 0;color:var(--ink-2);font-size:.96rem}
.sec-navy .faq,.sec-navy .faq details{border-color:rgba(255,255,255,.16)}
.sec-navy .faq summary{color:#fff}
.sec-navy .faq .ans{color:rgba(255,255,255,.72)}

/* výzva na akciu */
.cta{position:relative;overflow:hidden;background:var(--navy);color:#fff;
     padding:clamp(48px,7vw,84px) 0}
.cta::before{
  content:"";position:absolute;top:-20%;left:-10%;width:46%;height:140%;
  background:linear-gradient(160deg,rgba(28,154,224,.22),rgba(6,83,182,0));
  transform:skewX(var(--skew));
}
/* Predtým: height:64% + bottom:0 → farba končila rovnou vodorovnou hranou
   v strede sekcie a bolo ju vidieť ako obdĺžnik. Teraz plocha presahuje
   sekciu hore aj dole a farba vyhasína radiálne ešte pred okrajmi, takže
   žiadna hrana vzniknúť nemôže. */
.cta::after{
  content:"";position:absolute;top:-12%;bottom:-12%;right:-6%;width:52%;
  background:radial-gradient(68% 62% at 66% 74%,
    rgba(228,0,43,.30),rgba(228,0,43,.10) 45%,transparent 72%);
  transform:skewX(var(--skew));
}
.cta .wrap{position:relative;z-index:2}
.cta h2{color:#fff;margin-bottom:14px}
.cta p{color:rgba(255,255,255,.78);max-width:56ch}
.cta .btns{margin-top:28px}

/* ============================ 7. cenník ============================ */

/* align-items ostáva na stretch — karty tak majú rovnakú výšku a tlačidlá
   (margin-top:auto) sa zarovnajú na spodnú hranu vo všetkých troch. */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.price{
  position:relative;background:#fff;border:1px solid var(--line);padding:32px 28px 30px;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  display:flex;flex-direction:column;
}
.price .stripe{margin-bottom:20px;width:88px}
.price .tag{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
            color:var(--blue);margin-bottom:10px}
.price h3{font-size:1.34rem;font-weight:800;font-style:italic;text-transform:uppercase;
          letter-spacing:-.01em;margin-bottom:6px}
.price .who{color:var(--ink-2);font-size:.9rem;margin-bottom:22px}
.price .amt{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.price .amt i{font-style:normal;font-size:.86rem;font-weight:700;color:var(--ink-3);
              text-transform:uppercase;letter-spacing:.08em}
.price .amt b{font-size:2.5rem;font-weight:800;font-style:italic;line-height:1;
              letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.price .vat{font-size:.78rem;color:var(--ink-3);margin-bottom:24px}
.price .checks{margin-bottom:26px}
.price .checks li{font-size:.91rem;padding:6px 0 6px 28px}
.price .checks li::before{top:13px}
.price .btn{margin-top:auto}
.price.hot{background:var(--navy);border-color:var(--navy);color:#fff;
           box-shadow:var(--shadow-lg)}
.price.hot h3{color:#fff}
.price.hot .tag{color:var(--blue-l)}
.price.hot .who{color:rgba(255,255,255,.72)}
.price.hot .amt b{color:#fff}
.price.hot .amt i,.price.hot .vat{color:rgba(255,255,255,.6)}
.price.hot .checks li{color:rgba(255,255,255,.9)}
.price.hot .checks li::before{background:var(--red)}
.price.hot .checks li b{color:#fff}
.flag{
  position:absolute;top:0;right:0;background:var(--red);color:#fff;
  padding:7px 30px 7px 22px;font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%);
}

/* tabuľka doplnkov */
.tw{overflow-x:auto;border:1px solid var(--line);background:#fff}
table.tbl{width:100%;border-collapse:collapse;min-width:520px;font-size:.94rem}
table.tbl caption{text-align:left;padding:18px 22px;font-weight:700;color:var(--ink);
                  border-bottom:1px solid var(--line)}
table.tbl th,table.tbl td{padding:15px 22px;text-align:left;border-bottom:1px solid var(--line);
                          vertical-align:top}
table.tbl thead th{background:var(--paper);font-size:.74rem;font-weight:800;letter-spacing:.14em;
                   text-transform:uppercase;color:var(--ink-2)}
table.tbl tbody tr:last-child th,table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--paper)}
table.tbl th{font-weight:700}
table.tbl td.pr{text-align:right;font-weight:800;font-style:italic;white-space:nowrap;
                color:var(--blue)}
table.tbl small{display:block;margin-top:4px;color:var(--ink-2);font-weight:400;
                font-style:normal;font-size:.86rem}

/* ============================ 8. referencie ======================== */

.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.ref{
  background:#fff;border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ref:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ref .shot{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:16/10}
.ref .shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
               transition:transform .5s var(--ease)}
.ref:hover .shot img{transform:scale(1.05)}
.ref .shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--blue-l) 0 34%,var(--navy) 34% 67%,var(--red) 67% 100%);
}
.ref .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.ref .kind{font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
           color:var(--blue);margin-bottom:9px}
.ref h3{margin-bottom:8px}
.ref p{color:var(--ink-2);font-size:.93rem;margin-bottom:16px}
.ref .tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.ref .tags span{
  background:var(--paper);color:var(--ink-2);padding:5px 13px;font-size:.74rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
/* overflow-wrap: dlhé domény (orieskovadekarbonizacia.sk) sa inak nezalomia
   a pretečú z karty von. min-width:0 kvôli flexu. */
.ref .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:.8rem;
         font-weight:800;font-style:italic;letter-spacing:.04em;text-transform:uppercase;
         color:var(--blue);min-width:0;overflow-wrap:break-word}
.ref .go svg{flex:0 0 auto}
.ref .go:hover{text-decoration:none;gap:13px}
.ref .go svg{width:14px;height:14px}

/* logo pás */
.logos{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center}
.logos span{
  background:#fff;border:1px solid var(--line);padding:11px 22px;
  font-size:.84rem;font-weight:800;font-style:italic;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-2);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}

/* ============================ 9. formulár ========================== */

.form-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
           gap:clamp(28px,4vw,52px);align-items:start}

form.f{background:#fff;border:1px solid var(--line);padding:clamp(26px,3.4vw,40px);
       clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))}
.fr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;margin-bottom:16px}
.fr.one{grid-template-columns:1fr}
.fl{display:flex;flex-direction:column;gap:7px}
/* :not(.hint) — inak by sa štýl menovky aplikoval aj na pomocný text pod poľom */
.fl > span:not(.hint){font-size:.78rem;font-weight:800;letter-spacing:.1em;
           text-transform:uppercase;color:var(--ink-2)}
.fl > span em{font-style:normal;color:var(--red)}
.fl input,.fl select,.fl textarea{
  font:inherit;font-size:.97rem;color:var(--ink);background:var(--white);
  border:1px solid var(--line-2);padding:13px 15px;width:100%;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.fl textarea{min-height:132px;resize:vertical}
.fl input:focus,.fl select:focus,.fl textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.fl input:user-invalid,.fl textarea:user-invalid{border-color:var(--red)}
.fl .hint{font-size:.81rem;font-weight:400;letter-spacing:0;text-transform:none;
          color:var(--ink-3)}

.agree{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;
       margin:6px 0 20px;font-size:.87rem;color:var(--ink-2);line-height:1.55}
.agree input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--blue)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.msg{padding:16px 20px;margin-bottom:20px;font-size:.93rem;font-weight:600;
     clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.msg.ok{background:rgba(6,83,182,.09);color:#08387a;border-left:4px solid var(--blue)}
.msg.err{background:var(--red-soft);color:#9b0020;border-left:4px solid var(--red)}

/* bočný kontaktný panel */
.aside{display:grid;gap:16px}
.ci{background:#fff;border:1px solid var(--line);padding:24px;
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.ci .stripe{margin-bottom:16px;width:64px}
.ci h3{margin-bottom:12px}
.ci a{display:flex;align-items:center;gap:11px;padding:7px 0;color:var(--ink);
      font-weight:600;font-size:.96rem;text-decoration:none}
.ci a:hover{color:var(--blue);text-decoration:none}
.ci svg{width:17px;height:17px;color:var(--blue);flex:0 0 auto}
.ci p{color:var(--ink-2);font-size:.92rem}
.ci dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:.92rem}
.ci dt{color:var(--ink-3);font-weight:600}
.ci dd{margin:0;color:var(--ink);font-weight:600}

/* ======================= 10. pätička + drobnosti =================== */

.crumbs{padding:18px 0;border-bottom:1px solid var(--line);font-size:.83rem;color:var(--ink-3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
           align-items:center}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"";width:6px;height:6px;background:var(--line-2);
                      transform:skewX(var(--skew))}
.crumbs a{color:var(--ink-2);font-weight:600}
.crumbs [aria-current]{color:var(--ink);font-weight:700}

.ph{position:relative;overflow:hidden;background:var(--paper);
    padding:clamp(44px,6vw,76px) 0 clamp(40px,5vw,64px)}
.ph::before{
  content:"";position:absolute;top:-30%;right:-12%;width:44%;height:160%;
  background:linear-gradient(160deg,rgba(6,83,182,.1),rgba(228,0,43,.06));
  transform:skewX(var(--skew));
}
.ph .wrap{position:relative;z-index:2}
.ph .stripe{margin-bottom:20px}
.ph h1{margin-bottom:16px}
.ph .lead{max-width:64ch}

footer.ft{background:var(--navy);color:rgba(255,255,255,.72);padding:0}
footer.ft .stripe{width:100%;height:5px;clip-path:none}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,44px);
         padding:clamp(44px,5vw,64px) 0 36px}
.ft-grid h4{color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.16em;
            text-transform:uppercase;margin-bottom:16px}
.ft-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft-grid a{color:rgba(255,255,255,.72);font-size:.92rem;text-decoration:none}
.ft-grid a:hover{color:#fff;text-decoration:none}
.ft-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ft-brand img{width:42px;height:42px}
.ft-brand b{color:#fff;font-size:1rem;font-weight:800;font-style:italic;
            text-transform:uppercase;line-height:1.1}
.ft-about{font-size:.91rem;line-height:1.65;max-width:36ch}
.ft-bar{border-top:1px solid rgba(255,255,255,.14);padding:20px 0;display:flex;
        flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.85rem}
.ft-bar a{color:rgba(255,255,255,.72)}
.ft-bar a:hover{color:#fff}

/* právne stránky */
.legal{max-width:78ch}
.legal h2{font-size:1.4rem;margin:36px 0 12px}
.legal h3{margin:24px 0 8px}
.legal p,.legal li{color:var(--ink-2);font-size:.98rem}
.legal ul,.legal ol{padding-left:22px;margin:0 0 16px}
.legal li{margin-bottom:7px}
.legal .box{background:var(--paper);border-left:4px solid var(--blue);padding:18px 22px;
            margin:22px 0;font-size:.95rem}
.legal table.tbl{min-width:420px}

/* postupné odkrývanie pri scrollovaní */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ======================= responzivita ============================== */

/* Medzi 900 a 1360 px je textový stĺpec úzky — dve CTA tlačidlá by sa
   zalomili pod seba. Menšie odsadenie ich udrží v jednom riadku. */
@media (max-width:1360px){
  .hero .btn{padding:13px 20px;font-size:.88rem}
}

@media (max-width:1180px){
  .nl{padding:10px 11px;font-size:.85rem}
  .ft-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:1024px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.prices,.refs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prices .price.hot{order:-1}
  .split,.form-wrap{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Pod 1024 px sa hero zlomí pod seba. Šikmá ĽAVÁ hrana modrej plochy by
     potom nemala zmysel (nič vedľa nej nie je) a text nad ňou by bol čierny
     na modrom — preto sa zrez prepne na šikmú HORNÚ hranu a plocha ide
     na celú šírku. */
  .hero-in{grid-template-columns:1fr;min-height:0;padding-right:var(--gut)}
  .hero-copy{padding:clamp(44px,6vw,72px) 0 0}
  .hero-copy > *{max-width:none}
  .hero-side{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;align-items:stretch;
    margin-top:clamp(34px,5vw,54px);
    padding:calc(38px + clamp(26px,4vw,44px)) var(--gut) clamp(40px,6vw,64px);
    clip-path:polygon(0 38px,100% 0,100% 100%,0 100%);
  }
  .hero-side::before{clip-path:polygon(0 38px,100% 0,100% 100%,0 100%)}
  .hero-side::after{display:none}
  .hero-card{margin:0!important;padding:17px 20px}
  .hero-card b{font-size:1.55rem}
}

/* --- pod 960 px sa odkazy schovajú do celoobrazovkového menu --- */
@media (max-width:960px){
  :root{--nav-h:68px;--nav-h-s:60px}
  .nav-list,.nav-ind{display:none}
  .burger{display:flex}
  .nav-cta{margin-left:auto}
  .nav-cta + .burger{margin-left:12px}
  body.nav-open{overflow:hidden}
}

@media (max-width:560px){
  /* CTA by tu vytlačilo hamburger mimo obrazovky — v menu je aj tak */
  .nav-cta{display:none}
  .brand-txt span{display:none}
}

@media (max-width:700px){
  body{font-size:16px}
  .g2,.g3,.g4,.prices,.refs{grid-template-columns:1fr}
  .hero-side{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .band-in{justify-content:flex-start}
  .ft-grid{grid-template-columns:1fr;gap:28px;padding-bottom:28px}
  .ft-bar{flex-direction:column}
  .btns .btn{width:100%}
  .fr{grid-template-columns:1fr}
  h1{font-size:clamp(2rem,8.6vw,2.7rem)}
  .price .amt b{font-size:2.1rem}
  :root{--pg:12px}
}

@media (max-width:420px){
  .card,.step,.price,.quote,.ci,form.f,.ref{clip-path:none}
  .logos span{padding:9px 15px;font-size:.78rem}
}

@media print{
  body{padding-top:0}
  .nav,.burger,.drawer,.cta,.btn{display:none!important}
  body{padding:0;color:#000}
  .hero-side,.ph::before{display:none}
}

/* =====================================================================
   11. OBJEDNÁVKOVÝ SPRIEVODCA  (/objednavka/)
   Päť krokov, priebežný výpočet ceny, zhrnutie pred odoslaním.
   Kroky sú v DOM-e všetky; neaktívne majú [hidden], takže bez
   JavaScriptu je vidieť celý formulár naraz a dá sa odoslať klasicky.
   ===================================================================== */

.wizard{position:relative}

/* --- horná lišta krokov --- */
.wz-tabs{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;
  margin-bottom:clamp(22px,3vw,34px);
}
.wz-tab{
  position:relative;display:flex;flex-direction:column;gap:5px;
  padding:13px 16px 13px 20px;border:0;cursor:pointer;text-align:left;
  background:var(--paper);color:var(--ink-3);font:inherit;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  transition:background .22s var(--ease),color .22s var(--ease);
}
.wz-tab b{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.wz-tab span{font-size:.86rem;font-weight:700;color:inherit;line-height:1.25}
.wz-tab:hover{background:var(--paper-2);color:var(--ink-2)}
.wz-tab.is-done{background:var(--paper);color:var(--blue)}
.wz-tab.is-done b::after{content:" ✓"}
.wz-tab.is-active{background:var(--navy);color:#fff}
.wz-tab.is-active b{color:var(--blue-l)}
.wz-tab.is-active::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--blue-l) 0 34%,#fff 34% 67%,var(--red) 67% 100%);
}

/* --- krok --- */
.wz-step{animation:wzIn .28s var(--ease)}
@keyframes wzIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wz-step{animation:none}}

.wz-step > legend{
  display:block;width:100%;padding:0;margin:0 0 6px;
  font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:-.018em;color:var(--ink);
}
.wz-step .wz-sub{color:var(--ink-2);font-size:.95rem;margin-bottom:24px;max-width:60ch}
.wz-step fieldset{border:0;margin:0 0 26px;padding:0;min-width:0}
.wz-step fieldset:last-of-type{margin-bottom:0}
.wz-step fieldset + .fr,.wz-step fieldset + .fl{margin-top:26px}
.wz-step fieldset > legend{
  padding:0;margin-bottom:12px;
  font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);font-style:normal;
}
.wz-step fieldset > legend em{font-style:normal;color:var(--red)}

/* --- voľby (rádio / checkbox ako karty) --- */
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}

.opt{
  position:relative;display:block;cursor:pointer;
  background:#fff;border:1px solid var(--line-2);
  padding:16px 18px 16px 46px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  transition:border-color .18s var(--ease),background .18s var(--ease),
             box-shadow .18s var(--ease);
}
.opt:hover{border-color:var(--blue);background:var(--blue-soft)}
.opt input{position:absolute;left:17px;top:19px;width:17px;height:17px;
           margin:0;accent-color:var(--blue)}
.opt b{display:block;font-size:.97rem;font-weight:700;color:var(--ink);line-height:1.3}
.opt small{display:block;margin-top:4px;font-size:.855rem;color:var(--ink-2);line-height:1.5}
.opt .pr{
  display:inline-block;margin-top:8px;padding:3px 12px;
  background:var(--paper);color:var(--blue);
  font-size:.78rem;font-weight:800;font-style:italic;white-space:nowrap;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
/* :has() nie je dostupné všade — skript pridáva .is-on ako záložné riešenie */
.opt:has(input:checked),.opt.is-on{
  border-color:var(--blue);background:var(--blue-soft);
  box-shadow:inset 3px 0 0 var(--blue);
}
.opt:has(input:checked) .pr,.opt.is-on .pr{background:var(--blue);color:#fff}
.opt:focus-within{outline:3px solid var(--blue-l);outline-offset:2px}

/* skupina, kde treba aspoň jednu voľbu */
fieldset.je-chybna .opts{outline:2px solid var(--red);outline-offset:6px}
.skupina-chyba{margin:12px 0 0;color:#9b0020;font-size:.87rem;font-weight:700}

/* --- polia, ktoré si pridávajú ďalší riadok --- */
.repeat{display:grid;gap:8px}
.repeat input{font:inherit;font-size:.97rem;color:var(--ink);background:#fff;
              border:1px solid var(--line-2);padding:12px 15px;width:100%}
.repeat input:focus{outline:none;border-color:var(--blue);
                    box-shadow:0 0 0 3px var(--blue-soft)}

/* --- blok s priebežnou cenou (na konci 2. kroku, ako v origináli) --- */
.wz-total{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;
  margin-top:clamp(22px,3vw,32px);
  padding:18px clamp(20px,2.4vw,30px);
  background:var(--navy);color:#fff;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  box-shadow:var(--shadow);
}
.wz-total .lbl{font-size:.72rem;font-weight:800;letter-spacing:.15em;
               text-transform:uppercase;color:rgba(255,255,255,.6);width:100%}
.wz-total .v{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:800;font-style:italic;
             line-height:1;letter-spacing:-.025em;white-space:nowrap}
.wz-total .m{font-size:.95rem;font-weight:700;color:var(--blue-l);white-space:nowrap}
.wz-total .note{margin-left:auto;font-size:.79rem;color:rgba(255,255,255,.6);
                max-width:34ch;line-height:1.45}

/* --- navigácia medzi krokmi --- */
.wz-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
        margin-top:clamp(20px,2.6vw,28px)}
.wz-count{margin-left:auto;font-size:.78rem;font-weight:800;letter-spacing:.12em;
          text-transform:uppercase;color:var(--ink-3)}

/* --- zhrnutie na poslednom kroku --- */
.wz-sum{background:var(--paper);border-left:4px solid var(--blue);
        padding:22px 24px;margin-bottom:24px}
.wz-sum h3{margin-bottom:14px}
.wz-sum dl{margin:0;display:grid;grid-template-columns:minmax(120px,auto) 1fr;
           gap:8px 20px;font-size:.92rem}
.wz-sum dt{color:var(--ink-3);font-weight:700}
.wz-sum dd{margin:0;color:var(--ink);font-weight:600}
.wz-sum .cena{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
}
.wz-sum .cena span{font-size:.75rem;font-weight:800;letter-spacing:.14em;
                   text-transform:uppercase;color:var(--ink-2)}
.wz-sum .cena b{font-size:1.5rem;font-weight:800;font-style:italic;
                color:var(--blue);white-space:nowrap}

@media (max-width:1100px){
  .wz-tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .wz-tab{padding:11px 12px 11px 16px}
  .wz-tab span{display:none}
}
@media (max-width:900px){
  .opts.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .opts.two,.opts.three{grid-template-columns:1fr}
  .wz-tabs{grid-template-columns:repeat(5,1fr)}
  .wz-tab{align-items:center;padding:10px 6px;text-align:center;clip-path:none}
  .wz-tab.is-active::before{display:none}
  .wz-total{flex-direction:column;align-items:flex-start}
  .wz-total .note{margin-left:0}
  .wz-nav .btn{flex:1 1 100%}
  .wz-count{margin:0;width:100%;text-align:center}
  .wz-sum dl{grid-template-columns:1fr;gap:2px}
  .wz-sum dt{margin-top:8px}
}
@media (max-width:420px){
  .opt{clip-path:none}
}