/* Hlavná stránka (od 13. 11. 2026): cenník, karty služieb, Kto som, test webu na zadnej strane Z praxe, Moje weby.
   Načítava sa len na hlavnej stránke, po main.css. Mobil dolaďuje domov-mobil.css. */

/* Cenník (návrh): štyri jednoduché karty v poradí optimalizácia, pluginy a úpravy, správa, nový web. Bez klikania a počítania. */

#cennik .wrap{max-width:1240px}
.pl-lead{margin:12px 0 24px;font-size:18px;line-height:1.5;color:var(--muted)}
.pl{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.pl-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px 22px 24px;border:2px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:border-color .2s}
.pl-card:hover{border-color:var(--accent)}
.pl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;min-height:36px}
.pl-ico{width:36px;height:36px;color:var(--accent)}
.pl-card h3{font-size:21px;line-height:1.2}
.pl-from{font-size:32px;font-weight:800;line-height:1.05;letter-spacing:-.01em;color:var(--accent)}
.pl-from small{font-size:.5em;font-weight:600}
.pl-list{margin:4px 0 0;padding:0;list-style:none}
.pl-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.35}
.pl-list b{flex:0 0 auto;white-space:nowrap;font-weight:700}
.pl-dots li{justify-content:flex-start;gap:10px}
.pl-dots li::before{content:'';flex:0 0 auto;width:7px;height:7px;margin-bottom:2px;border-radius:999px;background:var(--accent);align-self:center}
.pl-note{font-size:14.5px;line-height:1.45;color:var(--muted)}
.pl-btn{width:100%;margin-top:6px}
.pl-incl{display:flex;flex-wrap:wrap;gap:8px 28px;margin:22px 0 0;padding:0;list-style:none;font-size:16px;font-weight:600}
.pl-incl li{position:relative;padding-left:24px}
.pl-incl li::before{content:'✓';position:absolute;left:0;font-weight:800;color:var(--ok)}
.pl-ask{margin-top:12px;font-size:15px;line-height:1.45;color:var(--muted)}
.pl-ask a{font-weight:700;color:var(--accent);text-underline-offset:4px}

/* Vedľa seba: piktogram, názov, cena, zoznam, poznámka a tlačidlo sú vo všetkých kartách v rovnakej výške */
@media (min-width:701px){
  .pl{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .pl-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start}
  .pl-btn{align-self:end}
}
@media (min-width:960px){
  .pl{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}
@media (min-width:960px) and (max-width:1099px){
  .pl-card{padding:14px 14px 16px}
  .pl-list li{gap:8px;font-size:14px}
  .pl-card h3{font-size:18px}
}
@media (min-width:1100px){
  .pl{gap:18px}
}

/* Počítač s nižšou obrazovkou */
@media (min-width:960px) and (max-height:1000px){
  #cennik .sec{padding-top:16px;padding-bottom:16px}
  #cennik h2{font-size:40px}
  .pl-lead{margin:4px 0 14px;font-size:16.5px}
  .pl-card{gap:6px;padding:16px 18px 18px}
  .pl-ico{width:30px;height:30px}
  .pl-head{min-height:30px}
  .pl-card h3{font-size:19px}
  .pl-from{font-size:28px}
  .pl-list li{padding:5px 0;font-size:14.5px}
  .pl-note{font-size:13.5px;line-height:1.38}
  .pl-btn{min-height:46px;padding-top:8px;padding-bottom:8px}
  .pl-incl{margin-top:12px;font-size:15px}
  .pl-ask{margin-top:4px;font-size:14px}
}
@media (min-width:960px) and (max-height:740px){
  #cennik h2{font-size:32px}
  .pl-lead{margin:0 0 10px;font-size:15px}
  .pl-head{display:none}
  .pl-card{grid-row:span 6}
  .pl-incl{display:none}
}
@media (min-width:960px) and (max-height:640px){
  .pl-note{display:none}
}
@media (min-width:960px) and (max-width:1099px) and (max-height:760px){
  .pl-list li{padding:3px 0;font-size:13.5px}
  .pl-card{padding:12px 14px 14px}
  .pl-ask{display:none}
}

/* Bez malých oranžových nadpisov, bodkovaná čiara len pri službách a referenciách */
.eyebrow{display:none}
.dots{display:none}
#sluzby .dots,#referencie .dots{display:block}
/* Hlavička nepriesvitná, aby cez ňu pri posúvaní nepresvital bežiaci pás */
.header{background:var(--bg)}

/* Úvod: krátka recenzia pod tlačidlami */
.hero-ref{max-width:470px;margin:6px 0 0;padding:2px 0 2px 18px;border-left:3px solid var(--accent)}
.hero-ref blockquote{margin:0}
.hero-ref p{font-size:18px;line-height:1.42;font-weight:500}
.hero-ref figcaption{margin-top:6px;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.hero-ref figcaption a{font-weight:500;letter-spacing:0;color:var(--accent);text-underline-offset:4px}

/* Služby: piktogram, názov, cena. Všetky karty rovnaké, oranžová až pri prejdení myšou. Nový web posledný. */
.nw{white-space:nowrap}
.cards-v4{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.cards-v4 .card,.card-strip{border:2px solid var(--line);box-shadow:none;transition:background-color .25s,border-color .25s,color .25s,transform .25s}
.cards-v4 .card{gap:10px;padding:24px 22px}
.cards-v4 .card:hover,.cards-v4 .card:focus-visible,.card-strip:hover,.card-strip:focus-visible{transform:translateY(-4px);border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:none}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card-ico{flex:0 0 auto;width:40px;height:40px;color:var(--accent);transition:color .25s}
.card-tag{display:inline-block;padding:4px 10px;border:1.5px solid var(--accent);border-radius:999px;font-size:13px;font-weight:700;line-height:1.2;color:var(--accent);white-space:nowrap;transition:color .25s,border-color .25s}
.cards-v4 .card h3{font-size:22px;line-height:1.2}
.card-price{font-size:32px;font-weight:800;line-height:1.05;letter-spacing:-.01em;color:var(--accent);transition:color .25s}
.card-price small{font-size:.5em;font-weight:600}
.cards-v4 .card p{font-size:16px;line-height:1.45;transition:color .25s}
.cards-v4 .card .more{font-size:16px;transition:color .25s}
.cards-v4 .card:is(:hover,:focus-visible) :is(.card-ico,.card-price,p,.more,.card-tag),.card-strip:is(:hover,:focus-visible) :is(.card-ico,span){color:#fff}
.cards-v4 .card:is(:hover,:focus-visible) .card-tag{border-color:#fff}
/* Napadnutý web: nízky pás pod kartami */
.card-strip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:16px;padding:12px 20px;border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none}
.card-strip .card-ico{width:28px;height:28px}
.card-strip b{font-size:18px}
.card-strip span{flex:1 1 280px;min-width:0;font-size:16px;line-height:1.4;color:var(--muted);transition:color .25s}
.card-strip .more{flex:0 0 auto;font-weight:600;color:var(--accent)}
@media (min-width:701px){
  .cards-v4{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  /* Piktogram, názov, cena, text a odkaz sú vo všetkých kartách v rovnakej výške */
  .cards-v4 .card{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
  .cards-v4 .card .more{align-self:end}
}
@media (min-width:960px){
  .cards-v4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:960px) and (max-height:760px){
  .cards-v4 .card{gap:6px;padding:18px 18px}
  .card-ico{width:32px;height:32px}
  .card-price{font-size:28px}
  .cards-v4 .card h3{font-size:20px}
  .cards-v4 .card p{font-size:15px;line-height:1.4}
  .card-strip{margin-top:12px;padding:8px 18px}
}
@media (prefers-reduced-motion:reduce){
  .cards-v4 .card:hover,.card-strip:hover{transform:none}
}
/* Z praxe, zadná strana: „Ako je na tom váš web?“ ako biela karta, rovnaká ako porovnanie na prednej strane */
.tt{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:24px 20px;border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.tt :focus-visible{outline-color:var(--ink)}
.tt-h{font-size:30px;line-height:1.12;color:var(--ink)}
.tt-sub{margin-top:8px;font-size:16px;line-height:1.45;color:var(--muted)}
.tt input[type="text"],.tt input[type="email"]{flex:1 1 auto;width:100%;min-width:0;min-height:52px;padding:10px 16px;border:1px solid var(--field);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:17px}
.tt input::placeholder{color:var(--muted);opacity:.8}
.tt input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(181,68,26,.18)}
.tt-form{display:flex;gap:8px;margin-top:16px}
.tt-form .btn{flex:0 0 auto;min-height:52px;padding:12px 22px}
.tt-rows{margin:16px 0 0;padding:0;list-style:none}
.tt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 14px;padding:12px 0;border-top:1px solid var(--line)}
.tt-n{font-size:16px;font-weight:700}
.tt-row small{grid-column:1;font-size:14px;line-height:1.35;color:var(--muted)}
.tt-v{grid-row:1/span 2;grid-column:2;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:46px}
.tt-v b{font-size:22px;font-weight:800;line-height:1;color:var(--muted)}
.tt-v svg{width:46px;height:4px;overflow:visible}
.tt-v line{fill:none;stroke:var(--line);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tt-v .gauge-v{stroke:var(--muted);transition:stroke-dasharray 1s ease}
.flip:not(.has-result) .tt-v svg{visibility:hidden}
.tt-row.good b{color:var(--pass-ink)}
.tt-row.good .gauge-v{stroke:var(--ok)}
.tt-row.mid b{color:var(--accent)}
.tt-row.mid .gauge-v{stroke:var(--accent)}
.tt-row.bad b{color:var(--err)}
.tt-row.bad .gauge-v{stroke:var(--err)}
.tt-intro{padding:20px;border-radius:14px;background:var(--bg-alt);font-size:16px;line-height:1.45;color:var(--muted)}
.tt-intro-h{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tt-intro ul{display:flex;flex-direction:column;gap:8px;margin:12px 0 14px;padding:0;list-style:none;color:var(--ink)}
.tt-intro li{position:relative;padding-left:26px}
.tt-intro li::before{content:'✓';position:absolute;left:0;font-weight:800;color:var(--ok)}
.flip.is-testing .tt-intro,.flip.has-result .tt-intro{display:none}
.tt-result{display:flex;flex-direction:column;gap:12px}
.tt .test-verdict{font-size:19px}
.tt .test-tips li:nth-child(n+3){display:none}
.tt .test-next{font-size:15px;color:var(--muted)}
.tt .test-next strong{color:var(--ink)}
.tt-fine{font-size:13px;line-height:1.4;color:var(--muted)}
.tt-fine a{color:var(--muted);text-underline-offset:3px}
@media (min-width:960px){
  .tt{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px 40px;padding:30px 34px 22px}
  .tt-fine{grid-column:1/-1}
  .tt .metrics{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}
@media (min-width:960px) and (max-height:820px){
  .tt{padding:22px 28px 16px}
  .tt-h{font-size:26px}
  .tt-sub{font-size:15px}
  .tt-row{padding:8px 0}
  .tt-intro{padding:16px}
  .tt-intro ul{gap:4px;margin:8px 0 10px}
  .tt .metrics dt{font-size:13.5px}
  .tt .test-health ul,.tt .test-tips ul,.tt .test-next{font-size:14px}
  .tt-result{gap:8px}
}
@media (min-width:960px) and (max-height:680px){
  .tt-row small{display:none}
  .tt .test-tips{display:none}
}

/* Moje weby: dve karty so snímkou z Google Search Console */
.pj-lead{max-width:720px;margin:14px 0 26px;font-size:18px;line-height:1.5;color:var(--muted)}
.pj{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.pj-card{display:flex;flex-direction:column;gap:14px;min-width:0;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.pj-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px}
.pj-top h3{font-size:24px;line-height:1.15}
.pj-link{font-size:15px;font-weight:600;color:var(--accent);text-decoration:none}
.pj-link:hover{text-decoration:underline;text-underline-offset:4px}
.pj-what{font-size:16px;line-height:1.4;color:var(--muted)}
.pj-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.pj-stats > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px}
.pj-stats dd{margin:0;font-size:28px;font-weight:800;line-height:1.05;letter-spacing:-.01em}
.pj-stats dt{font-size:13px;line-height:1.25;color:var(--muted)}
.pj-shot{margin:auto 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-alt)}
.pj-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:12px;color:var(--muted)}
.pj-bar i{width:9px;height:9px;border-radius:999px;background:var(--field)}
.pj-bar i:first-child{background:var(--accent)}
.pj-bar span{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-shot a{display:block;background:#fff}
.pj-shot img{width:100%;height:auto}
.pj-shot figcaption{padding:7px 12px;font-size:12px;color:var(--muted)}
.pj-more{margin-top:22px}
.pj-more a{font-weight:600;color:var(--accent);text-underline-offset:5px}
@media (min-width:701px){
  .pj{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .pj-card{padding:26px}
}
@media (min-width:960px) and (max-height:900px){
  #projekty .sec{padding-top:18px;padding-bottom:18px}
  .pj-lead{margin:8px 0 16px;font-size:17px}
  .pj-card{gap:10px;padding:18px 20px}
  .pj-stats dd{font-size:24px}
  .pj-more{margin-top:12px}
}
@media (min-width:960px) and (max-height:760px){
  .pj-what{display:none}
  .pj-lead{margin:4px 0 10px;font-size:16px}
  .pj-shot figcaption{padding:4px 12px}
}
@media (min-width:960px) and (max-height:640px){
  .pj-stats dd{font-size:21px}
  .pj-top h3{font-size:21px}
  .pj-lead{display:none}
  .hero-ref{margin-top:0}
  .hero-ref p{font-size:16px;line-height:1.35}
}

/* Tablet: bez prichytávania a celých obrazoviek, tie ostávajú len na počítači */
@media (min-width:701px) and (max-width:959px){
  html.snap-page{scroll-snap-type:none}
  .snap{min-height:0}
}

/* Kto som: nadpis cez celú šírku, pod ním predstavenie vľavo a text vpravo, dole tichý pás s tromi faktmi */
.me{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 64px}
.me h2{grid-column:1/-1;margin-bottom:14px}
.me-hi{font-size:clamp(24px,2.4vw,32px);font-weight:700;line-height:1.25;color:var(--accent)}
.me-text{display:flex;flex-direction:column;gap:16px;font-size:19px;line-height:1.6}
.me-text .me-hi{margin-bottom:2px}
/* Úryvok kódu: „Ahoj svet“ programátora, riadky sa postupne vypíšu, na konci bliká kurzor */
.me-code{min-width:0;align-self:start;padding-top:6px}
.me-code pre{margin:0;overflow:hidden;font:500 17px/1.85 ui-monospace,'Cascadia Code',Consolas,'SF Mono',Menlo,monospace;color:var(--ink);white-space:pre}
.me-code .ln{display:inline-block}
.me-code i{display:inline-block;width:2.2em;margin-right:1em;padding-right:.8em;border-right:1px solid var(--field);font-style:normal;text-align:right;color:var(--muted);opacity:.6}
.me-code .k{color:var(--accent);font-weight:700}
.me-code .v{color:var(--ink);font-weight:700}
.me-code .f{color:var(--accent)}
.me-code .s{color:#016B35}
.me-code .c{color:var(--muted);font-style:italic}
.caret{display:inline-block;width:.55em;height:1.1em;margin-left:3px;vertical-align:-.18em;background:var(--accent);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@keyframes ln-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference) and (min-width:701px){
  .js .reveal:not(.in) .me-code .ln{opacity:0}
  .js .reveal.in .me-code .ln{animation:ln-in .35s ease both}
  .js .reveal.in .me-code .ln:nth-child(2){animation-delay:.25s}
  .js .reveal.in .me-code .ln:nth-child(3){animation-delay:.5s}
  .js .reveal.in .me-code .ln:nth-child(4){animation-delay:.7s}
  .js .reveal.in .me-code .ln:nth-child(5){animation-delay:1s}
  .js .reveal.in .me-code .ln:nth-child(6){animation-delay:1.3s}
  .js .reveal.in .me-code .ln:nth-child(7){animation-delay:1.6s}
}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}
.me-facts{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);margin:24px 0 0;padding:0;border-top:1px solid var(--field);list-style:none}
.me-facts li{display:flex;flex-direction:column;gap:2px;padding:18px 0}
.me-facts b{font-size:19px;font-weight:700;line-height:1.25}
.me-facts span{font-size:16px;line-height:1.4;color:var(--muted)}
@media (min-width:701px){
  .me-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .me-facts li{padding:20px 24px 0 0}
  .me-facts li + li{padding-left:24px;border-left:1px solid var(--field)}
}
@media (min-width:960px){
  .me{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
}
@media (min-width:960px) and (max-height:760px){
  .me h2{margin-bottom:4px}
  .me-text{gap:10px;font-size:17px;line-height:1.5}
  .me-facts{margin-top:12px}
  .me-facts li{padding-top:14px}
}
@media (min-width:960px) and (max-height:640px){
  .cards-v4 .card p{font-size:14px;line-height:1.35}
  .cards-v4 .card{padding:14px 16px}
}

/* Karta napadnutého webu je len na mobile, na počítači je pás pod kartami */
.cards-v4 .card-hack{display:none}