/* ============================================================
   ShopLab — koncept redizajnu
   Inžiniersky skicár: milimetrový papier + ručná kresba + mono
   1. Tokens  2. Base  3. Kresba  4. Komponenty  5. Sekcie
   6. Pohyb   7. Responsive
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --paper:      #EDEEF0;
  --paper-2:    #F4F5F6;
  --card:       #FBFBFC;
  --ink:        #14171B;
  --graphite:   #5B626B;
  --guide:      #C7CBD2;

  --signal:     #2540F2;
  --signal-dp:  #1B2FBE;
  --signal-sf:  #DEE3FF;
  --amber:      #E8A020;
  /* hviezdičky nesú informáciu (hodnotenie), takže na ne platí WCAG 1.4.11
     s minimom 3:1 — dekoratívny amber vyššie má na karte len 2,14:1 */
  --star:       #B87500;
  --green:      #17A06A;
  --red:        #D8452F;

  --f-disp: "Bricolage Grotesque", system-ui, sans-serif;
  --f-ui:   "Inter", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-hand: "Caveat", cursive;

  --pad:   clamp(20px, 5vw, 56px);
  --maxw:  1220px;
  --sec-y: clamp(72px, 9vw, 136px);
  --ease:  cubic-bezier(.22,.61,.36,1);

  /* jemne nepravidelné rohy — čiara ťahaná rukou, nie oblý balón */
  --sk-1: 16px 5px 14px 6px / 6px 13px 5px 16px;
  --sk-2: 6px 15px 5px 16px / 14px 6px 16px 5px;
  --sk-3: 13px 5px 11px 6px / 6px 10px 5px 12px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; scroll-padding-top:88px; }

body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:clamp(15.5px,.35vw + 15px,16.8px);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  /* milimetrový papier: jemná sieť + silnejšia každých 55 px */
  background-image:
    linear-gradient(rgba(20,23,27,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,23,27,.045) 1px, transparent 1px),
    linear-gradient(rgba(20,23,27,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,23,27,.028) 1px, transparent 1px);
  background-size:55px 55px, 55px 55px, 11px 11px, 11px 11px;
}

/* zrno papiera */
body::after{
  content:""; position:fixed; inset:0;
  pointer-events:none; z-index:9999; opacity:.26;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; display:block; }
p{ margin:0 0 1em; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--f-disp); font-weight:800;
  line-height:1.03; letter-spacing:-.028em; margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.35rem,5.6vw,4.1rem); }
h2{ font-size:clamp(1.95rem,4.4vw,3.5rem); }
h3{ font-size:1.14rem; line-height:1.24; letter-spacing:-.018em; }
h1 em,h2 em{ font-style:normal; color:var(--signal); }

code{ font-family:var(--f-mono); font-size:.86em; }

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

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px; font-size:.9rem;
}
.skip:focus{ left:12px; top:12px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- 3. Kresba ---------- */
.line{
  fill:none; stroke:currentColor; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  filter:url(#rough);
}
.blob{ filter:url(#rough2); transform:translate(1.6px,-1.6px); opacity:.9; }
.dot{ fill:currentColor; stroke:none; }

/* farebné plochy — deklarované až za .line, aby prebili fill:none */
.f-s{ fill:var(--signal-sf); }
.f-a{ fill:#FBE3B8; }
.f-g{ fill:#C9EEDD; }
.f-i{ fill:var(--card); }

.ico{ width:48px; height:48px; color:var(--ink); flex:none; overflow:visible; }
.ico--sm{ width:34px; height:34px; }
.ico--md{ width:84px; height:84px; }
.ico--lg{ width:60px; height:60px; }

.ill{ width:100%; height:auto; color:var(--ink); overflow:visible; }
.ill--hero .line{ stroke-width:2.8; }

/* ručne písané poznámky vnútri kresieb */
.hand{
  font-family:var(--f-hand); font-size:23px; font-weight:600;
  fill:var(--signal); stroke:none;
}
.ann{ fill:none; stroke:var(--signal); stroke-width:2; stroke-linecap:round; filter:url(#rough); }

.dood{ fill:none; stroke:var(--signal); stroke-width:2.4; stroke-linecap:round; overflow:visible; }
.dood--arrow{ width:58px; height:44px; }

.mark{ position:relative; display:inline-block; }
.mark__u{
  position:absolute; left:-1%; bottom:-.14em; width:102%; height:.28em;
  fill:none; stroke:var(--amber); stroke-width:6; stroke-linecap:round; z-index:-1;
}

/* ---------- 4. Komponenty ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:840px; }

.sec{ padding-block:var(--sec-y); position:relative; }
.sec--alt{ background:var(--paper-2); }

/* tmavá sekcia = modrotlačový výkres */
.sec--dark{
  background-color:var(--ink); color:var(--paper);
  margin-block:clamp(26px,3.5vw,52px);
  background-image:
    linear-gradient(rgba(222,227,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222,227,255,.075) 1px, transparent 1px);
  background-size:55px 55px, 55px 55px;
}
.sec--plain-dark{ background-image:none; }
.sec--dark::before,.sec--dark::after{
  content:""; position:absolute; left:0; right:0; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M0 12C18 4 38 3 56 8c18 5 36 6 54 1 18-5 36-7 56-3 20 4 38 7 56 2 18-4 36-6 54-1 12 2 18 3 24 4v7H0z' fill='%2314171B'/%3E%3C/svg%3E") repeat-x;
  background-size:300px 18px;
}
.sec--dark::before{ top:-17px; }
.sec--dark::after{ bottom:-17px; transform:scaleY(-1); }
.sec--dark h2 em{ color:#93A2FF; }
.sec--dark .lede{ color:rgba(237,238,240,.68); }
.sec--dark .tag{ color:#93A2FF; }
.sec--dark .ico{ color:var(--paper); }
.sec--dark .hand{ fill:#93A2FF; }
.sec--dark .f-i{ fill:rgba(237,238,240,.09); }
.sec--dark .f-s{ fill:rgba(147,162,255,.24); }

.sec__head{ margin-bottom:clamp(40px,4.6vw,68px); text-align:center; }

.tag{
  font-family:var(--f-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.02em; color:var(--signal); margin:0 0 14px;
}

.lede{ font-size:clamp(1rem,1.15vw,1.12rem); color:var(--graphite); max-width:54ch; }
.lede__brand{ color:inherit; font-weight:700; text-decoration:none; }
.lede__brand:hover{ color:var(--signal); }
.lede--mid{ margin:18px auto 0; max-width:58ch; text-wrap:pretty; }

/* tlačidlá */
.btn{
  --bg:transparent; --fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 26px;
  font-family:var(--f-ui); font-size:.93rem; font-weight:500;
  text-decoration:none; cursor:pointer;
  background:var(--bg); color:var(--fg);
  border:2.2px solid var(--ink); border-radius:var(--sk-3);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .22s var(--ease);
}
.btn:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn--solid{ --bg:var(--signal); --fg:#fff; }
.btn--line{ --bg:var(--card); }
.btn--line:hover{ --bg:var(--signal-sf); }
.btn--full{ width:100%; }

.lnk{
  font-family:var(--f-mono); font-size:.82rem; color:var(--signal);
  text-decoration:none; border-bottom:1.5px solid var(--signal-sf);
  padding-bottom:2px;
}
.lnk:hover{ border-bottom-color:var(--signal); }

.pill{
  display:inline-block; font-family:var(--f-mono); font-size:.72rem;
  padding:4px 11px; background:var(--signal); color:#fff;
  border:2px solid var(--ink); border-radius:var(--sk-3);
}
.pill--muted{ background:var(--paper); color:var(--graphite); }

/* logo + hlavička */
.logo{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:inherit; }
.logo__ico{ width:30px; height:30px; color:var(--signal); flex:none; overflow:visible; }
.logo__txt{ font-family:var(--f-disp); font-weight:800; font-size:1.3rem; letter-spacing:-.03em; }

.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(237,238,240,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:2px solid transparent; transition:border-color .3s var(--ease);
}
.hdr.is-stuck{ border-bottom-color:var(--ink); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:74px; }

.nav{ display:flex; align-items:center; gap:clamp(15px,2vw,30px); }
.nav a{ position:relative; font-size:.9rem; font-weight:500; text-decoration:none; padding-block:6px; }
.nav a:not(.nav__cta)::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:0; height:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C26 1 68 1 98 4' fill='none' stroke='%232540F2' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  transform:scaleX(0); transform-origin:right; transition:transform .32s var(--ease);
}
.nav a:not(.nav__cta):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  background:var(--ink); color:var(--paper) !important;
  padding:10px 18px !important; border-radius:var(--sk-3);
  box-shadow:3px 3px 0 var(--signal);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.nav__cta:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--signal); }

.burger{
  display:none; width:44px; height:44px; padding:0;
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-3); cursor:pointer; place-items:center; gap:5px;
}
.burger span{ display:block; width:17px; height:2px; background:var(--ink); transition:transform .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ---------- 5. Sekcie ---------- */

/* HERO */
.hero{ padding-block:clamp(40px,5vw,80px) clamp(52px,6vw,96px); }
.hero__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px); align-items:center;
}
.hero h1{ margin-bottom:24px; }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:30px; }
.note{ font-family:var(--f-hand); font-size:1.3rem; color:var(--signal); }
.note--cta{ display:flex; align-items:flex-end; gap:2px; transform:rotate(-5deg) translateY(-4px); }
.note--cta i{ font-style:normal; padding-bottom:9px; }
.note--cta .dood--arrow{ transform:scaleX(-1) rotate(16deg); }

/* odznak bronzového Shoptet partnera */
.hero__badge{
  margin:36px 0 0; padding:22px 0 0;
  border-top:2px dashed var(--guide);
}
.hero__badge img{ width:auto; max-width:206px; height:auto; }

/* UKÁŽKA — porovnanie */
.compare{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,2.4vw,34px); }
.card{
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); padding:clamp(20px,2.2vw,28px);
  box-shadow:5px 5px 0 rgba(20,23,27,.13);
}
.card--after{ border-radius:var(--sk-2); box-shadow:5px 5px 0 var(--signal); }
.card__cap{ margin:0 0 18px; }

.pcard{ border:2px solid var(--guide); border-radius:var(--sk-3); padding:16px; background:#fff; }
.pcard--plain{ border-radius:0; border-color:#D3D6DB; }
.pcard__img{
  display:grid; place-items:center; position:relative;
  aspect-ratio:16/10; background:var(--paper-2); margin-bottom:14px; color:var(--guide);
}
.pcard__img--hi{ background:var(--signal-sf); color:var(--signal); border-radius:var(--sk-3); }
.pcard__badge{
  position:absolute; top:8px; left:8px;
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  background:var(--red); color:#fff; padding:3px 9px;
  border:2px solid var(--ink); border-radius:var(--sk-3);
}
.pcard h3{ font-size:1rem; margin:0 0 4px; }
.pcard__meta{ font-size:.82rem; color:var(--graphite); margin:0 0 12px; }
.pcard__sel{
  font-size:.85rem; margin:0 0 12px; padding:8px 10px;
  border:1px solid #D3D6DB; background:#F7F7F8; color:var(--graphite);
}
.pcard__sizes{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.pcard__sizes span{
  font-family:var(--f-mono); font-size:.8rem;
  min-width:36px; text-align:center; padding:5px 4px;
  border:2px solid var(--ink); border-radius:var(--sk-3); cursor:pointer;
}
.pcard__sizes .on{ background:var(--ink); color:#fff; }
.pcard__sizes .out{ color:var(--guide); border-color:var(--guide); text-decoration:line-through; cursor:not-allowed; }
.pcard__price{ font-size:1.05rem; margin:0 0 12px; color:var(--graphite); }
.pcard__price--hi{ font-family:var(--f-disp); font-weight:800; font-size:1.5rem; color:var(--ink); letter-spacing:-.03em; }
.pcard__price s{ font-family:var(--f-ui); font-weight:400; font-size:.86rem; color:var(--graphite); margin-left:6px; }
.pcard__btn{
  width:100%; font-family:var(--f-ui); font-size:.92rem; padding:11px;
  background:#DDDFE3; color:#6C7278; border:1px solid #C9CCD2; cursor:not-allowed;
}
.pcard__btn--hi{
  background:var(--signal); color:#fff; font-weight:500; cursor:pointer;
  border:2.2px solid var(--ink); border-radius:var(--sk-3);
  box-shadow:3px 3px 0 var(--ink); transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.pcard__btn--hi:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }


/* SLUŽBY */
.areas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(20px,2.4vw,32px); }
.area{
  background:rgba(237,238,240,.05);
  border:2.2px solid rgba(237,238,240,.5);
  border-radius:var(--sk-1); padding:clamp(24px,2.6vw,34px);
}
.area:nth-child(2){ border-radius:var(--sk-2); }
.area h3{ margin:14px 0 10px; font-size:1.25rem; }
.area p{ color:rgba(237,238,240,.68); font-size:.94rem; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
.chips span{
  font-family:var(--f-mono); font-size:.74rem; padding:4px 10px;
  border:1.8px solid rgba(147,162,255,.6); border-radius:var(--sk-3); color:#93A2FF;
}

/* zoznam všetkých služieb pod dvomi hlavnými oblasťami */
.more{
  list-style:none; margin:clamp(20px,2.4vw,30px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(12px,1.4vw,18px);
}
.more li{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:14px; align-items:center;
  border:2px dashed rgba(237,238,240,.3); border-radius:var(--sk-3);
  padding:16px 18px;
}
.more li:nth-child(even){ border-radius:var(--sk-2); }
.more .ico{ grid-row:span 2; }
.more b{ font-size:.95rem; }
.more span{ font-family:var(--f-mono); font-size:.74rem; color:rgba(237,238,240,.6); }
.more__all{ margin:clamp(22px,2.6vw,32px) 0 0; text-align:center; }
.more__all .btn{
  --bg:transparent; --fg:var(--paper);
  border-color:var(--paper); box-shadow:4px 4px 0 var(--paper);
}
.more__all .btn:hover{ --bg:rgba(237,238,240,.12); box-shadow:1px 1px 0 var(--paper); }

/* DOPLNKY */
.addons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); gap:clamp(18px,2.2vw,28px); }
.addon{
  display:flex; flex-direction:column;
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); padding:clamp(22px,2.4vw,30px);
  box-shadow:5px 5px 0 rgba(20,23,27,.13);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.addon:nth-child(2){ border-radius:var(--sk-2); }
.addon:hover{ transform:translate(-2px,-3px); box-shadow:8px 9px 0 rgba(20,23,27,.17); }
.addon--hi{ box-shadow:5px 5px 0 var(--signal); }
.addon--hi:hover{ box-shadow:8px 9px 0 var(--signal); }
.addon h3{ margin:12px 0 8px; }
.addon p{ color:var(--graphite); font-size:.92rem; flex:1 1 auto; }
.addon__price{
  font-family:var(--f-disp); font-weight:800; font-size:1.6rem;
  letter-spacing:-.03em; margin:6px 0 16px;
}
.addon__price span{ font-family:var(--f-mono); font-size:.74rem; font-weight:400; color:var(--graphite); }

/* POSTUP */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(24px,2.8vw,40px);
}
.step{ border-top:2px dashed var(--guide); padding-top:20px; }
.step__n{ display:block; font-family:var(--f-mono); font-size:.85rem; color:var(--signal); margin-bottom:12px; }
.step h3{ margin:12px 0 8px; }
.step p{ color:var(--graphite); font-size:.92rem; margin:0; }

/* PREČO MY */
/* rozloženie ako na pôvodnom webe: partner cez celú šírku, štatistiky v rade pod ním */
.why{ display:block; }
.partner{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(16px,2vw,26px); text-decoration:none;
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); padding:clamp(24px,2.6vw,34px);
  box-shadow:5px 5px 0 var(--signal);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.partner:hover{ transform:translate(-2px,-3px); box-shadow:8px 9px 0 var(--signal); }
.partner:hover .lnk{ border-bottom-color:var(--signal); }
.partner__copy{ flex:1 1 260px; }
.partner__copy .tag{ margin-bottom:12px; }
.partner h3{ margin:0 0 10px; font-size:clamp(1.3rem,1.9vw,1.6rem); }
.partner p{ color:var(--graphite); font-size:.94rem; }
.partner__badge{ flex:0 0 auto; }
.partner__badge img{ width:auto; max-width:min(340px, 42vw); height:auto; }

/* odznak je preklik na profil — rám a tieň rovnaké ako pri tlačidlách */
.hero__badge a{
  display:inline-block; line-height:0;
  border:2.2px solid var(--ink);
  border-radius:var(--sk-3);
  box-shadow:4px 4px 0 var(--ink);
  overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.hero__badge a:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.hero__badge a:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }

/* odznak v karte partnera — rovnaký tvar, bez tieňa (karta ho už má) */
.partner__badge img{
  border:2px solid var(--ink);
  border-radius:var(--sk-3);
  display:block;
}
.stats{
  list-style:none; margin:clamp(18px,2.2vw,28px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(14px,1.7vw,22px);
}
.stats li{
  background:var(--card); border:2.2px solid var(--ink); border-radius:var(--sk-2);
  padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px;
  box-shadow:4px 4px 0 rgba(20,23,27,.12);
}
.stats li:nth-child(even){ border-radius:var(--sk-1); }
.stats b{
  font-family:var(--f-disp); font-weight:800; font-size:2.1rem; line-height:1;
  letter-spacing:-.035em; color:var(--signal);
}
.stats span{ font-size:.86rem; color:var(--graphite); }

.points{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(22px,2.6vw,38px); margin-top:clamp(34px,4vw,56px);
}
.point{ border-top:2px dashed var(--guide); padding-top:20px; }
.point__n{ display:block; font-family:var(--f-mono); font-size:.85rem; color:var(--signal); margin-bottom:10px; }
.point h3{ margin:0 0 8px; }
.point p{ color:var(--graphite); font-size:.92rem; margin:0; }

/* FAQ */
.faq{ border-top:2px dashed var(--guide); }
.faq__i{ border-bottom:2px dashed var(--guide); }
.faq__i summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  list-style:none; cursor:pointer; padding:22px 0;
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1.02rem,1.5vw,1.24rem); letter-spacing:-.022em;
  transition:color .25s var(--ease);
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary:hover{ color:var(--signal); }
.faq__i summary::after{
  content:""; flex:none; width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%2314171B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2.5 11.4C7 10.4 15 10.6 19.5 11'/%3E%3Cpath d='M11.3 2.5C10.4 7 10.6 15 11 19.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .34s var(--ease);
}
.faq__i[open] summary::after{ transform:rotate(135deg); }
.faq__a p{ margin:0; padding:0 0 24px; max-width:64ch; color:var(--graphite); font-size:.94rem; }

/* KONTAKT */
/* formulár sa zvisle vycentruje proti textu vedľa neho */
.cta{ display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:clamp(32px,4vw,68px); align-items:center; }
.cta h2{ margin-bottom:18px; }
/* fakturačné údaje 2 × 2, aby ľavý stĺpec nebol dvakrát vyšší ako formulár */
/* fakturačné údaje ako pás pod oboma kolónami */
.cta__info{
  list-style:none; margin:clamp(34px,4vw,54px) 0 0; padding:clamp(18px,2.2vw,26px) 0 0;
  font-family:var(--f-mono); font-size:.86rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(16px,2.4vw,34px);
  border-top:2px dashed rgba(237,238,240,.18);
}
.cta__info li{
  display:flex; flex-direction:column; gap:4px;
  color:rgba(237,238,240,.88);
}
.cta__info span{ font-size:.72rem; letter-spacing:.06em; color:rgba(237,238,240,.42); }
.cta__info a{ text-decoration:none; }
.cta__info a:hover{ border-bottom-color:#93A2FF; color:#93A2FF; }

.form{
  background:rgba(237,238,240,.05);
  border:2.2px solid rgba(237,238,240,.5);
  border-radius:var(--sk-2); padding:clamp(22px,2.6vw,34px);
}
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.field{ display:flex; flex-direction:column; gap:7px; margin:0 0 16px; }
.field label{ font-family:var(--f-mono); font-size:.74rem; color:rgba(237,238,240,.6); }
.field label i{ font-style:normal; opacity:.6; }
.field input,.field select,.field textarea{
  font-family:var(--f-ui); font-size:.94rem; color:var(--paper);
  background:rgba(237,238,240,.06);
  border:2px solid rgba(237,238,240,.3); border-radius:var(--sk-3);
  padding:11px 14px; width:100%;
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.field textarea{ resize:vertical; min-height:104px; border-radius:var(--sk-1); }
.field input::placeholder,.field textarea::placeholder{ color:rgba(237,238,240,.32); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:#93A2FF; background:rgba(237,238,240,.1);
}
.field select option{ background:var(--ink); color:var(--paper); }
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{ border-color:#FF8A72; }
.field .err{ font-family:var(--f-mono); font-size:.74rem; color:#FF8A72; }
.form .btn--solid{ border-color:var(--paper); box-shadow:4px 4px 0 var(--paper); }
.form .btn--solid:hover{ box-shadow:1px 1px 0 var(--paper); }
.form__msg{ margin:14px 0 0; font-family:var(--f-mono); font-size:.82rem; color:#FF8A72; min-height:1.3em; }
.form__msg.is-ok{ color:#7FD8AE; }
.form__fine{ margin:12px 0 0; font-size:.74rem; line-height:1.5; color:rgba(237,238,240,.42); }

/* PÄTIČKA */
.ftr{ padding-block:clamp(8px,1vw,14px) clamp(24px,2.8vw,36px); }
.ftr__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:8px 24px; font-size:.86rem; }
.ftr__nav a{ text-decoration:none; color:var(--graphite); }
.ftr__nav a:hover{ color:var(--signal); }
.ftr__c{ margin:0; font-family:var(--f-mono); font-size:.76rem; color:var(--graphite); }

/* ---------- 6. Pohyb ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 7. Responsive ---------- */
@media (max-width:1000px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__art{ max-width:520px; margin:6px auto 0; }
  .cta, .why{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  /* hlavička nie je fixná — odroluje sa spolu so stránkou ako bežný obsah */
  .hdr{
    position:relative; top:auto;
    background:var(--paper);
    border-bottom-color:var(--ink);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .hdr__in{ min-height:54px; }
  .hdr .logo{ display:inline-flex; gap:6px; }
  .hdr .logo__ico{ width:24px; height:24px; }
  .hdr .logo__txt{ font-size:1.08rem; }
  html{ scroll-padding-top:12px; }
  /* menu sa rozbalí pod hlavičkou a je súčasťou stránky */
  .nav{
    position:absolute; top:calc(100% + 2px); right:0; left:0;  /* +2px = spodná linka hlavičky ostane vidieť */
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:2.2px solid var(--ink);
    padding:6px var(--pad) 18px;
    transform:translateY(-8px); opacity:0;
    pointer-events:none; visibility:hidden;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
  .nav a{ padding:13px 0; font-size:.96rem; border-bottom:2px dashed var(--guide); }
  .nav a::after{ display:none; }
  .nav__cta{ text-align:center; margin-top:12px; border-bottom:0 !important; }
  .burger{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:36px; height:36px; gap:5px; border-width:2px;
  }
}

@media (max-width:560px){
  .f2{ grid-template-columns:1fr; gap:0; }
  .hero__badge img{ max-width:176px; }
  .note--cta{ display:none; }
  .ftr__in{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   8. Podstránky — rozcestníky, detaily, prechody
   ============================================================ */

/* aktívna položka v navigácii */
.nav a.is-on::after{ transform:scaleX(1); }

/* hlavička podstránky */
.phero{ padding-block:clamp(30px,3.6vw,58px) clamp(14px,1.6vw,24px); }
/* nadpis aj úvodný text idú cez celú šírku obsahu */
.phero h1{ margin:0 0 12px; }
.phero .lede{ margin-bottom:0; max-width:none; }

.pricetag{
  display:inline-block; margin:clamp(20px,2.4vw,30px) 0 0;
  font-family:var(--f-mono); font-size:.84rem;
  padding:7px 16px; background:var(--card);
  border:2px dashed var(--ink); border-radius:var(--sk-3);
}

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:.76rem; color:var(--graphite);
  margin-bottom:20px;
}
.crumbs a{ text-decoration:none; border-bottom:1.5px solid var(--guide); }
.crumbs a:hover{ color:var(--signal); border-bottom-color:var(--signal); }
.crumbs i{ font-style:normal; opacity:.45; }
.crumbs span{ color:var(--ink); }

.sec--tight{ padding-block:clamp(14px,2vw,28px); }
.body{ color:var(--graphite); max-width:64ch; }

/* zoznam s odškrtnutím */
.checks{ list-style:none; margin:18px 0 0; padding:0; }
.checks li{
  position:relative; padding:7px 0 7px 26px; color:var(--ink);
}
/* bez fajok — stačí krátka pomlčka, aby bolo poznať, kde riadok začína */
.checks li::before{
  content:""; position:absolute; left:0; top:1.02em;
  width:13px; height:2px; background:var(--guide);
}

/* rozcestník služieb */
.svcindex{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(16px,1.9vw,24px); }
.svccard{
  position:relative; display:flex; gap:16px;
  padding:22px 22px 46px; text-decoration:none;
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); box-shadow:4px 4px 0 rgba(20,23,27,.12);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.svccard:nth-child(even){ border-radius:var(--sk-2); }
.svccard:hover{ transform:translate(-2px,-3px); box-shadow:7px 8px 0 var(--signal); }
.svccard__n{ position:absolute; top:16px; right:20px; margin:0; }
.svccard__b{ display:flex; flex-direction:column; gap:6px; }
.svccard__b b{ font-family:var(--f-disp); font-weight:800; font-size:1.06rem; letter-spacing:-.022em; padding-right:34px; }
.svccard__b span{ font-size:.9rem; color:var(--graphite); }
.svccard__b em{ font-style:normal; margin-top:4px; }
.svccard__go{ position:absolute; left:22px; bottom:18px; margin:0; }

/* rozcestník doplnkov */
.dcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.2vw,28px); }
.dcard{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); overflow:hidden;
  box-shadow:5px 5px 0 rgba(20,23,27,.13);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.dcard:nth-child(even){ border-radius:var(--sk-2); }
.dcard:hover{ transform:translate(-2px,-3px); box-shadow:8px 9px 0 var(--signal); }
.dcard__img{ display:block; background:var(--signal-sf); border-bottom:2.2px solid var(--ink); }
.dcard__img img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.dcard__img--mockup{
  display:grid; place-items:center; aspect-ratio:16/10; padding:0;
  background-color:var(--paper);
  background-image:linear-gradient(var(--guide-sf) 1px,transparent 1px),linear-gradient(90deg,var(--guide-sf) 1px,transparent 1px);
  background-size:18px 18px;
}
.dcard__mockup{
  display:flex; flex-direction:column; width:83%; height:76%; margin:auto; overflow:hidden;
  background:#fff; border:1.5px solid var(--guide); border-radius:10px;
  box-shadow:3px 4px 0 rgba(20,23,27,.1);
}
.dcard__mockbar{
  position:relative; display:block; height:12%; min-height:18px; flex:none;
  background:#f6f6f4; border-bottom:1.5px solid var(--guide-sf);
}
.dcard__mockbar::before{
  content:""; position:absolute; left:4%; top:50%; width:5px; height:5px;
  border-radius:50%; background:var(--guide); transform:translateY(-50%);
  box-shadow:9px 0 var(--guide),18px 0 var(--guide);
}
.dcard__mockbar::after{
  content:""; position:absolute; left:20%; right:20%; top:27%; bottom:27%;
  border-radius:999px; background:var(--paper);
}
.dcard__mockshot{ display:block; flex:1 1 auto; min-height:0; overflow:hidden; }
.dcard__img--mockup .dcard__mockshot img{
  width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:50% 50%;
}
.dcard__img--none{ display:grid; place-items:center; aspect-ratio:16/10; color:var(--signal); }
.dcard__b{ display:flex; flex-direction:column; gap:7px; padding:20px 22px 24px; flex:1 1 auto; }
.dcard__b b{ font-family:var(--f-disp); font-weight:800; font-size:1.1rem; letter-spacing:-.024em; }
.dcard__b > span{ font-size:.9rem; color:var(--graphite); }
.dcard__b em{ font-style:normal; }
.dcard__price{ font-family:var(--f-mono); font-size:.94rem; color:var(--signal); }
/* odkaz drží spodnú hranu, nech je vo všetkých kartách v jednej línii */
.dcard .lnk{ margin-top:auto; padding-top:14px; align-self:flex-start; }

/* rozcestník referencií */
.refcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:clamp(18px,2.2vw,30px); }
.refcard{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); overflow:hidden;
  box-shadow:5px 5px 0 rgba(20,23,27,.13);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.refcard:nth-child(even){ border-radius:var(--sk-2); }
.refcard:hover{ transform:translate(-2px,-3px); box-shadow:8px 9px 0 var(--signal); }
.refcard__shot{ display:block; background:var(--paper-2); border-bottom:2.2px solid var(--ink); min-height:6px; }
.refcard__shot img{ width:100%; aspect-ratio:8/5; object-fit:cover; object-position:top center; }
.refcard__b{ display:flex; flex-direction:column; gap:7px; padding:20px 22px 24px; flex:1 1 auto; }
.refcard__b b{ font-family:var(--f-disp); font-weight:800; font-size:1.24rem; letter-spacing:-.026em; }
.refcard__b > span{ font-size:.9rem; color:var(--graphite); }
.refcard__b em{ font-style:normal; }
.refcard .lnk{ margin-top:auto; padding-top:14px; align-self:flex-start; }

/* predošlá / ďalšia */
.pnav{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,20px); }
.pnav a{
  display:flex; flex-direction:column; gap:4px;
  padding:16px 20px; text-decoration:none;
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-3); box-shadow:3px 3px 0 rgba(20,23,27,.12);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pnav a:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--signal); }
.pnav a b{ font-family:var(--f-disp); font-weight:800; font-size:1rem; letter-spacing:-.022em; }
.pnav__next{ text-align:right; align-items:flex-end; }

/* výzva na konci podstránky */
.ctabox{ text-align:center; }
.ctabox .lede{ max-width:78ch; margin-inline:auto; text-wrap:pretty; }
.ctabox h2 + .lede{ margin-top:clamp(22px,3vw,38px); }
.ctabox__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:clamp(32px,4vw,46px) 0 0; }
.ctabox .btn--line{ --bg:transparent; --fg:var(--paper); border-color:var(--paper); box-shadow:4px 4px 0 var(--paper); }
.ctabox .btn--line:hover{ --bg:rgba(237,238,240,.12); box-shadow:1px 1px 0 var(--paper); }
.ctabox .btn--solid{ border-color:var(--paper); box-shadow:4px 4px 0 var(--paper); }
.ctabox .btn--solid:hover{ box-shadow:1px 1px 0 var(--paper); }

@media (max-width:720px){
  .pnav{ grid-template-columns:1fr; }
  .pnav__next{ text-align:left; align-items:flex-start; }
}

/* Postup — šesť krokov */
.pfsteps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(18px,2.2vw,28px); }
.pfstep{
  display:grid; grid-template-columns:170px 1fr; gap:clamp(18px,2.4vw,34px);
  padding:clamp(22px,2.6vw,32px);
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); box-shadow:5px 5px 0 rgba(20,23,27,.12);
}
.pfstep:nth-child(even){ border-radius:var(--sk-2); }
.pfstep__side{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.pfstep__n{
  font-family:var(--f-disp); font-weight:800; font-size:2.4rem;
  letter-spacing:-.04em; color:var(--signal); line-height:1;
}
.pfstep__side .tag{ margin:0; color:var(--graphite); }
.pfstep__body h2{ font-size:1.28rem; margin:0 0 10px; }
.pfstep__body .chips{ margin:16px 0 0; }
.pfstep .chips span{ border-color:var(--guide); color:var(--graphite); }

@media (max-width:760px){
  .pfstep{ grid-template-columns:1fr; }
  .pfstep__side{ flex-direction:row; align-items:center; gap:14px; }
  .pfstep__side .tag{ margin-left:auto; }
}

/* snímky obrazovky v prípadových štúdiách */
.shots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(14px,1.8vw,22px); margin:26px 0 0; }
.shots figure{
  margin:0; background:var(--card);
  border:2.2px solid var(--ink); border-radius:var(--sk-1);
  box-shadow:5px 5px 0 rgba(20,23,27,.12); overflow:hidden;
}
.shots figure:nth-child(even){ border-radius:var(--sk-2); }
.shots img,
.shots video{ width:100%; height:auto; display:block; background:var(--ink); }
.shots figure:only-child{ grid-column:1/-1; }
.shots figcaption{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 16px 16px;
  border-top:2px dashed var(--guide);
}
.shots figcaption b{
  font-family:var(--f-disp); font-size:1rem; letter-spacing:-.02em;
}
.shots figcaption span{ font-size:.84rem; color:var(--graphite); }
.shots--shipping{ grid-template-columns:repeat(2,minmax(0,1fr)); }

@media (max-width:760px){
  .shots--shipping{ grid-template-columns:1fr; }
}

/* ---------- cenník ---------- */
.ptable{
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); box-shadow:5px 5px 0 rgba(20,23,27,.13);
  overflow:hidden;
}
.ptable__h{
  display:flex; justify-content:space-between; gap:20px;
  padding:12px 22px; border-bottom:2.2px solid var(--ink);
  background:var(--signal-sf);
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.05em;
}
.prow{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:15px 22px; border-bottom:2px dashed var(--guide);
  text-decoration:none; color:inherit;
  transition:background .2s var(--ease);
}
.prow:last-child{ border-bottom:0; }
.prow--lnk:hover{ background:var(--signal-sf); }
.prow--lnk .pname{ color:var(--signal); }
.pname{ font-size:.96rem; }
.pname i{
  display:block; margin-top:3px; font-style:normal;
  font-family:var(--f-mono); font-size:.72rem; color:var(--graphite);
}
.pprice{
  flex:none; font-family:var(--f-disp); font-weight:800; font-size:1.12rem;
  letter-spacing:-.03em; white-space:nowrap;
}
.pprice--free{ color:var(--green); }
.pnote{ margin:18px 0 0; font-size:.82rem; color:var(--graphite); text-align:center; }

/* ---------- dvojstĺpcový layout podstránok ---------- */
.wrap--mid{ max-width:980px; }

.prose__head{ margin-bottom:clamp(16px,1.8vw,24px); }
.prose__head h2{ font-size:clamp(1.5rem,2.5vw,2.15rem); }
.prose__head h2{
  font-size:clamp(1.5rem,2.4vw,2.2rem);
  text-wrap:balance;
}
.prose__body > :first-child{ margin-top:0; }
.prose__body .body{ max-width:82ch; }
.prose__body .checks{ margin-top:0; }
.prose__body .body + .checks{ margin-top:20px; }

/* ---------- ochrana osobných údajov ---------- */
.phero--privacy{
  padding-block:clamp(24px,2.8vw,42px) clamp(18px,2.2vw,30px);
}
.phero--privacy h1{ margin-bottom:12px; }
.phero--privacy .crumbs{ margin-bottom:14px; }
.phero--privacy .lede{ margin:0; max-width:none; }
.privacy-sec{ padding-block:clamp(10px,1.5vw,20px) clamp(36px,4vw,56px) !important; }
.privacy{
  overflow:hidden;
  background:var(--card);
  border:2.2px solid var(--ink);
  border-radius:var(--sk-1);
  box-shadow:5px 5px 0 rgba(20,23,27,.12);
}
.privacy__row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding:clamp(20px,2.5vw,32px);
  border-bottom:2px dashed var(--guide);
}
.privacy__row:last-child{ border-bottom:0; }
.privacy__row h2{
  font-size:clamp(1.22rem,1.8vw,1.55rem);
  line-height:1.15;
}
.privacy__copy{ color:var(--graphite); }
.privacy__copy > *{ margin:0; }
.privacy__copy > * + *{ margin-top:12px; }
.privacy__copy a{
  color:var(--signal-dp);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.privacy__copy .checks{
  columns:1;
  margin-top:10px;
}
.privacy__copy .checks li{
  padding-block:5px;
  color:var(--graphite);
}
.privacy__updated{
  margin:14px 0 0;
  font-family:var(--f-mono);
  font-size:.74rem;
  color:var(--graphite);
}

@media (max-width:700px){
  .privacy__row{ padding:20px; }
}

/* zoznam v širšom stĺpci znesie dva stĺpce */
@media (min-width:1080px){
  .checks{ columns:2; column-gap:40px; }
  .checks li{ break-inside:avoid; }
}

@media (max-width:880px){
}

/* podstránky: sekcie tesnejšie za sebou, nie na plné odsadenie ako na úvode */
body.sub .sec{ padding-block:clamp(24px,2.8vw,40px); }
body.sub .phero + .sec{ padding-top:clamp(8px,1vw,14px); }
body.sub .sec--dark{ padding-block:clamp(36px,4vw,62px); }

/* ilustrácia služby pod hlavičkou */
.svcart{
  margin:0; background:var(--card);
  border:2.2px solid var(--ink); border-radius:var(--sk-1);
  box-shadow:6px 6px 0 rgba(20,23,27,.13); overflow:hidden;
}
.svcart img{ width:100%; display:block; }

/* kartičky rozšírení */
.tcards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(16px,2vw,24px); margin-top:clamp(18px,2.2vw,28px);
}
.tcard{
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); padding:clamp(20px,2.2vw,26px);
  box-shadow:5px 5px 0 rgba(20,23,27,.12);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.tcard:nth-child(even){ border-radius:var(--sk-2); }
.tcard:hover{ transform:translate(-2px,-3px); box-shadow:8px 9px 0 var(--signal); }
.tcard .tag{ margin:0 0 8px; }
.tcard h3{ margin:0 0 8px; }
.tcard p{ margin:0; font-size:.92rem; color:var(--graphite); }

/* ---------- recenzie klientov ---------- */
.reviews{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(16px,2vw,26px);
}
.review{
  margin:0; display:flex; flex-direction:column;
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); padding:clamp(20px,2.2vw,28px);
  box-shadow:5px 5px 0 rgba(20,23,27,.12);
}
.review:nth-child(even){ border-radius:var(--sk-2); }
.review__stars{ display:flex; gap:3px; margin:0 0 14px; }
.star{ width:17px; height:17px; fill:var(--star); stroke:none; flex:none; }
.review blockquote{
  margin:0 0 18px; flex:1 1 auto;
  font-size:.98rem; line-height:1.55; color:var(--ink);
}
.review blockquote::before{ content:"„"; color:var(--signal); }
.review blockquote::after{ content:"“"; color:var(--signal); }
.review figcaption{
  display:flex; flex-direction:column; gap:2px;
  padding-top:14px; border-top:2px dashed var(--guide);
}
.review figcaption b{ font-size:.94rem; }
.review figcaption span{ font-family:var(--f-mono); font-size:.76rem; color:var(--graphite); }
/* súhrnné hodnotenie pod nadpisom sekcie recenzií */
.rating{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:4px 9px; margin:14px 0 0;
  font-family:var(--f-mono); font-size:.84rem; color:var(--graphite);
}
.rating__stars{ display:inline-flex; gap:3px; }
.rating b{ font-family:var(--f-ui); font-weight:500; font-size:1.02rem; color:var(--ink); }
.rating a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.rating a:hover{ color:var(--signal); }

.reviews__more{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px clamp(18px,2.4vw,30px); margin:clamp(24px,2.8vw,36px) 0 0;
}

/* ---------- posuvník recenzií ---------- */
.rev{ position:relative; }
/* plynulé rolovanie rieši skript — v CSS by sa oba mechanizmy bili */
.rev__track{
  display:flex; gap:clamp(14px,1.8vw,22px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 6px 14px;
  scrollbar-width:none;
}
.rev__track::-webkit-scrollbar{ display:none; }
.rev__track:focus-visible{ outline:2.5px solid var(--signal); outline-offset:2px; }
.rev__track .review{
  flex:0 0 clamp(268px, 31%, 360px);
  scroll-snap-align:start;
}
.rev__nav{ display:contents; }
/* šípky po stranách posuvníka */
.rev__btn{
  position:absolute; top:calc(50% - 22px); z-index:3;
  width:44px; height:44px; cursor:pointer;
  font-family:var(--f-ui); font-size:1rem; line-height:1;
  background:var(--card); color:var(--ink);
  border:2.2px solid var(--ink); border-radius:var(--sk-3);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .2s var(--ease);
}
.rev__btn:hover{ background:var(--signal-sf); transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.rev__btn[data-dir="-1"]{ left:-14px; }
.rev__btn[data-dir="1"]{ right:-14px; }
@media (min-width:1240px){
  .rev__btn[data-dir="-1"]{ left:-58px; }
  .rev__btn[data-dir="1"]{ right:-58px; }
}
@media (max-width:600px){
  .rev__btn{ position:static; top:auto; }
  .rev__nav{ display:flex; justify-content:center; gap:10px; margin-top:4px; }
}
.rev__btn[disabled]{ opacity:.35; cursor:default; transform:none; box-shadow:3px 3px 0 var(--ink); background:var(--card); }
.lnk--strong{ font-family:var(--f-ui); font-weight:600; font-size:1em; border-bottom-width:2px; }

/* menšie prázdne miesta medzi sekciami na úvodnej stránke */
/* menšie prázdne miesta medzi sekciami */
:root{ --sec-y: clamp(44px, 5vw, 76px); }
/* dve sekcie s rovnakým pozadím za sebou nemajú dvojité odsadenie */
.sec--alt + .sec--alt{ padding-top:0; }
.sec--dark{ margin-block:clamp(22px,2.8vw,40px); }
.sec__head{ margin-bottom:clamp(28px,3.2vw,46px); }
.review figcaption a{
  color:var(--signal); text-decoration:none;
  border-bottom:1.5px solid var(--signal-sf); padding-bottom:1px;
}
.review figcaption a:hover{ border-bottom-color:var(--signal); }

/* suma v cene — tmavomodrá a tučná, nech je čitateľná na prvý pohľad */
.pricetag b,
.svccard__b em b{
  font-family:var(--f-disp); font-weight:800;
  font-size:1.18em; letter-spacing:-.02em;
  color:var(--signal-dp);
}
.svccard__b em b{ padding-right:0; }
.ptable .pprice{ color:var(--signal-dp); }
.ptable .pprice--free{ color:var(--green); }
.dcard__price{ font-weight:600; color:var(--signal-dp); }

/* ľavá strana kontaktu — priamy e-mail a čo bude nasledovať */
.cta__or{
  margin:clamp(26px,3vw,38px) 0 6px;
  font-family:var(--f-mono); font-size:.78rem;
  color:rgba(237,238,240,.5);
}
.cta__mail{ margin:0; }
.cta__mail a{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1.3rem,2.1vw,1.75rem); letter-spacing:-.03em;
  color:#93A2FF; text-decoration:none;
  border-bottom:2.5px solid rgba(147,162,255,.35); padding-bottom:2px;
}
.cta__mail a:hover{ border-bottom-color:#93A2FF; }

.next{
  list-style:none; margin:clamp(26px,3vw,38px) 0 0; padding:0;
  display:grid; gap:0;
}
.next li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline;
  padding:13px 0; border-top:2px dashed rgba(237,238,240,.16);
  font-size:.94rem; color:rgba(237,238,240,.78);
}
.next span{ font-family:var(--f-mono); font-size:.78rem; color:#93A2FF; }

/* pasca na roboty — pre človeka neviditeľná */
.form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- cookie lišta ---------- */
/* ---------- zväčšenie ukážok ----------
   Screenshoty v referenciách a pri doplnkoch sa dajú otvoriť cez celú
   obrazovku. Vrstvu pridáva js/main.js, bez skriptu ostane obrázok obrázkom. */
.js-zoomable{ cursor:zoom-in; }

.zoombox{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  padding:clamp(14px,4vw,48px);
  background:rgba(20,23,27,.86);
  animation:zoomboxIn .16s ease-out;
}
@media (prefers-reduced-motion: reduce){ .zoombox{ animation:none; } }
@keyframes zoomboxIn{ from{ opacity:0; } to{ opacity:1; } }

.zoombox img{
  display:block; max-width:100%; max-height:100%;
  width:auto; height:auto;
  background:#fff; border:2.2px solid var(--ink); border-radius:var(--sk-3);
  box-shadow:8px 8px 0 rgba(0,0,0,.35);
  cursor:zoom-out;
}
.zoombox__x{
  position:absolute; top:clamp(10px,2.4vw,22px); right:clamp(10px,2.4vw,22px);
  width:44px; height:44px; display:grid; place-items:center;
  font-family:var(--f-disp); font-size:1.5rem; line-height:1;
  color:var(--ink); background:var(--card);
  border:2.2px solid var(--ink); border-radius:var(--sk-3);
  box-shadow:3px 3px 0 var(--ink); cursor:pointer;
}
.zoombox__x:hover{ box-shadow:1px 1px 0 var(--ink); }

.cookiebar{
  position:fixed; left:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px);
  bottom:clamp(12px,3vw,24px); z-index:200;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px clamp(18px,3vw,36px);
  max-width:920px; margin-inline:auto;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); box-shadow:6px 6px 0 var(--ink);
}
.cookiebar__ico{ width:44px; height:44px; flex:none; color:var(--ink); overflow:visible; }
.cookiebar p{ margin:0; flex:1 1 300px; font-size:.9rem; color:var(--graphite); max-width:56ch; }
.cookiebar__btns{ display:flex; gap:10px; flex:none; }
.cookiebar .btn{ padding:10px 20px; font-size:.88rem; box-shadow:3px 3px 0 var(--ink); }
.cookiebar .btn:hover{ box-shadow:1px 1px 0 var(--ink); }

/* ============================================================
   9. Blog — výpis článkov a samotný článok
   ============================================================ */

/* ---------- výpis článkov ---------- */
.bloglist{ display:grid; gap:clamp(16px,2vw,24px); }

.bpost{
  position:relative;
  display:grid; grid-template-columns:minmax(230px,.82fr) minmax(0,1fr); gap:clamp(18px,2.4vw,34px);
  align-items:center; text-decoration:none; color:inherit;
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); padding:clamp(22px,2.6vw,34px);
  box-shadow:5px 5px 0 rgba(20,23,27,.13);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bpost:nth-child(even){ border-radius:var(--sk-2); }
.bpost:hover{ transform:translate(-2px,-3px); box-shadow:8px 9px 0 var(--signal); }
.bpost__media{
  position:relative; display:block; overflow:hidden;
  background:var(--paper-2); border:1.5px solid var(--guide);
  border-radius:var(--sk-3);
}
.bpost__media img{ width:100%; aspect-ratio:1.904/1; object-fit:cover; }
.bpost__body{ display:block; padding-right:34px; }

/* poradové číslo článku — rovnaký rukopis ako čísla krokov v postupe */
.bpost__meta{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  font-family:var(--f-mono); font-size:.76rem; color:var(--graphite); margin:0 0 10px;
}
.bpost h2{ font-size:clamp(1.3rem,2.2vw,1.85rem); margin:0 0 10px; }
.bpost p{ color:var(--graphite); font-size:.94rem; max-width:68ch; margin:0; }
.bpost__go{
  display:inline-block; margin-top:16px; font-weight:500; font-size:.92rem;
  border-bottom:2px solid var(--signal); color:var(--signal);
}

/* ---------- hlavička článku ---------- */
.artmeta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  margin:18px 0 0; font-family:var(--f-mono); font-size:.78rem; color:var(--graphite);
}
.artmeta i{ font-style:normal; opacity:.45; }
.arthero{
  margin:0; overflow:hidden; background:var(--card);
  border:2.2px solid var(--ink); border-radius:var(--sk-1);
  box-shadow:6px 7px 0 rgba(20,23,27,.13);
}
.arthero img{ width:100%; height:auto; }

/* ---------- obsah článku (kotvy na sekcie) ---------- */
.toc{
  background:var(--paper-2); border:2.2px dashed var(--guide);
  border-radius:var(--sk-3); padding:clamp(20px,2.2vw,28px);
}
.toc h2{ font-family:var(--f-mono); font-weight:500; font-size:.8rem; letter-spacing:.04em;
  color:var(--graphite); margin:0 0 14px; text-transform:uppercase; }
.toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc;
  columns:2; column-gap:clamp(20px,3vw,44px); }
/* číslo visí vedľa textu, aby zalomený riadok nezačínal pod ním */
.toc li{ counter-increment:toc; break-inside:avoid; margin:0 0 9px;
  position:relative; padding-left:28px; }
.toc li::before{ content:counter(toc,decimal-leading-zero); position:absolute; left:0; top:2px;
  font-family:var(--f-mono); font-size:.78rem; color:var(--signal); }
.toc a{ text-decoration:none; font-size:.93rem; border-bottom:1.5px solid transparent; }
.toc a:hover{ border-bottom-color:var(--signal); color:var(--signal); }

/* ---------- referencia: čo sme spravili, bod po bode ----------
   Text vľavo, ukážka vpravo. Karta bez obrázka sa roztiahne na celú šírku,
   aby v nej nezívala prázdna polovica. */
.rsteps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(18px,2.2vw,28px); }
.rstep{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,2.8vw,40px); align-items:center;
  padding:clamp(22px,2.6vw,32px);
  background:var(--card); border:2.2px solid var(--ink);
  border-radius:var(--sk-1); box-shadow:5px 5px 0 rgba(20,23,27,.12);
}
.rstep:nth-child(even){ border-radius:var(--sk-2); }
.rstep--wide{ grid-template-columns:1fr; }

.rstep__head{ display:flex; align-items:center; gap:12px; margin:0 0 12px; }
.rstep__n{
  font-family:var(--f-disp); font-weight:800; font-size:1.9rem;
  letter-spacing:-.04em; color:var(--signal); line-height:1;
}
.rstep__body h2{ font-size:1.28rem; margin:0 0 10px; }
.rstep__body p:last-child{ margin-bottom:0; }

.rstep__media{ display:grid; gap:12px; }
.rstep__media figure{
  margin:0; background:#fff; overflow:hidden;
  border:2px solid var(--guide); border-radius:var(--sk-3);
}
.rstep__media img{ width:100%; height:auto; display:block; }

@media (max-width:820px){
  .rstep{ grid-template-columns:1fr; }
}

/* ---------- telo článku ---------- */
.art{ max-width:74ch; }
.article-page .art{ max-width:none; }
.art > section + section{ margin-top:clamp(38px,4.4vw,64px); }
.art h2{
  font-size:clamp(1.45rem,2.5vw,2.05rem);
  /* číslo sekcie sedí nad nadpisom ako popiska v skicári */
  margin:0 0 14px; scroll-margin-top:20px;
}
.art h2 .art__no{
  display:block; font-family:var(--f-mono); font-weight:500;
  font-size:.78rem; letter-spacing:.06em; color:var(--signal); margin-bottom:8px;
}
.art h3{ margin:26px 0 10px; }
.art p{ color:var(--graphite); }
.art p:last-child{ margin-bottom:0; }
.art a:not(.btn){ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--signal-sf); }
.art a:not(.btn):hover{ border-bottom-color:var(--signal); color:var(--signal); }
.art .checks{ margin-bottom:0; }

@media (max-width:720px){
  .bpost{ grid-template-columns:1fr; align-items:start; }
  .bpost__body{ padding-right:0; }
}

/* zvýraznená myšlienka — rozbije dlhý text a udrží pozornosť */
.pull{
  margin:clamp(26px,3vw,40px) 0;
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px);
  background:var(--signal-sf); border:2.2px solid var(--ink);
  border-radius:var(--sk-2); box-shadow:5px 5px 0 var(--signal);
}
.pull p{ margin:0; color:var(--ink); font-size:clamp(1rem,1.2vw,1.1rem); font-weight:500; }

/* ---------- späť na výpis ---------- */
.artback{ margin:clamp(30px,3.4vw,46px) 0 0; }
.artback a{
  font-family:var(--f-mono); font-size:.84rem; text-decoration:none;
  border-bottom:2px solid var(--guide);
}
.artback a:hover{ color:var(--signal); border-bottom-color:var(--signal); }

@media (max-width:640px){
  .bpost{ grid-template-columns:1fr; gap:10px; }
  .toc ol{ columns:1; }
  /* Na úzkej obrazovke čísla len uberajú šírku textu a obsah je aj tak
     pod sebou, takže poradie je zrejmé z poradia riadkov. */
  .toc li{ padding-left:0; }
  .toc li::before{ content:none; }
}