/* =========================
   Minimalistické CSS – dvoubarevné pozadí, mobil-friendly
   ========================= */

/* Proměnné (dark + light) */
:root{
  --bg:#0e1422;
  --bg-soft:#151b22;
  --text:#e8ecf2;
  --muted:#9aa6b2;
  --primary:#79c0ff;
  --primary-ink:#0b1a26;
  --accent:#0ed184;
  --border:#202835;
  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --bg-soft:#f6f8fb;
    --text:#0f1720;
    --muted:#5b6674;
    --primary:#1a7af2;
    --primary-ink:#ffffff;
    --accent:#0db36c;
    --border:#e6eaf0;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

/* ====== Pozadí: plynulý 2-barevný blend bez pásů ====== */
body{
  margin:0;
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:
    radial-gradient(1200px 800px at 15% 0%, #101828 0%, #0a1a2e 55%, #08131f 100%),
    linear-gradient(135deg, #0e1422 0%, #0a1a2e 100%);
  color:var(--text);
  line-height:1.6;
  position:relative;
}

/* ultra-jemný dithering (rozbije banding) */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140">\
<filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter>\
<rect width="100%" height="100%" filter="url(%23n)" opacity="0.015"/></svg>');
}

/* ====== Typografie ====== */
h1,h2,h3{
  font-family:"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  margin:0 0 .4rem 0;
}
h1{font-size:clamp(1.8rem, 2.6vw + 1rem, 2.6rem)}
h2{font-size:clamp(1.3rem, 1.2vw + 1rem, 1.8rem)}
h3{font-size:1.15rem}
strong{color:var(--accent); font-weight:800}
a{color:inherit}

/* Pomocné */
.container{width:min(1100px,92%); margin-inline:auto; position:relative; z-index:1}
.lead{color:var(--muted); font-size:clamp(1.05rem, 1.2vw + .6rem, 1.25rem)}
.muted{color:var(--muted)}
.note{color:var(--muted); font-size:.95rem; margin-top:.8rem}

/* Grid helper */
.grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}

/* Reveal animace (JS přidá .in) */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .4s ease}
.reveal.in{opacity:1; transform:none}

/* ====== Header / Navigace ====== */
.site-header{border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(21,27,34,.6), rgba(21,27,34,0))}

/* >>> UPRAVENO: nav centrované, větší položky (desktop) <<< */
.nav{
  display:flex;
  align-items:center;
  justify-content:center;   /* centrování celého bloku (brand + menu) */
  gap:1rem;                 /* mezera mezi brandem a menu */
  padding:1.1rem 0;         /* vyšší lišta */
  flex-wrap:wrap;           /* když se nevejde na jeden řádek */
}
.brand{
  text-decoration:none; color:var(--text); font-weight:800; letter-spacing:.3px;
  background:var(--bg-soft); border:1px solid var(--border);
  padding:.5rem .85rem;                 /* větší klik plocha */
  border-radius:12px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.brand:hover{transform:translateY(-1px); box-shadow:var(--shadow)}

.nav__toggle{display:none; background:var(--bg-soft); color:var(--text); border:1px solid var(--border); padding:.55rem .7rem; border-radius:10px}
.nav__list{
  display:flex;
  align-items:center;
  justify-content:center;   /* centrování položek menu */
  gap:.8rem;                /* větší mezery */
  list-style:none; margin:0; padding:0; flex-wrap:wrap;
}
.nav__list a{
  text-decoration:none;
  padding:.75rem 1rem;      /* větší klik plocha */
  border-radius:12px;
  font-size:1.05rem;        /* větší text */
  transition:background .12s ease, transform .12s ease;
  white-space:nowrap;
}
.nav__list a:hover{background:var(--bg-soft); transform:translateY(-1px)}
.btn{
  display:inline-block; padding:.8rem 1.1rem; border-radius:12px; border:1px solid var(--border);
  font-weight:700; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  font-size:1.05rem;
}
.btn--primary{background:var(--primary); color:var(--primary-ink); border-color:transparent}
.btn--ghost{background:transparent; color:var(--text)}
.btn:hover{filter:brightness(1.05); box-shadow:var(--shadow)}
.hover-press:active{transform:scale(.98)}

@media (max-width:800px){
  .nav__toggle{display:inline-block}
  .nav__list{
    position:absolute; inset:58px 0 auto 0; background:var(--bg);
    border-bottom:1px solid var(--border); transform:translateY(-140%);
    transition:transform .2s ease; flex-direction:column; padding:.6rem;
  }
  .nav__list.is-open{transform:translateY(0)}
  .nav{justify-content:space-between; gap:.5rem} /* mobil: necháme brand vlevo, toggle vpravo */
}

/* ====== Hero ====== */
.hero{padding:3rem 0 2rem; text-align:center}
.hero__cta{margin:1rem 0; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
.hero__tags{
  list-style:none; padding:0; margin:1rem 0 0; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
}
.hero__tags li{
  color:var(--muted); background:var(--bg-soft); border:1px solid var(--border);
  border-radius:999px; padding:.35rem .6rem; font-size:.9rem;
}

/* ====== O mně ====== */
.about{display:grid; gap:1.4rem; align-items:center; padding:2.2rem 0; grid-template-columns:1.2fr .8fr}
.about__card{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem; transition:box-shadow .2s ease, transform .2s ease;
}
.about__card:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.about__thumb{display:grid; place-items:center}
.about__thumb svg{width:100%; max-width:320px}
.ring{fill:none; stroke:var(--border); stroke-width:2}
@media (max-width:980px){.about{grid-template-columns:1fr}}

/* ====== Služby + galerie ====== */
.services{padding:2.2rem 0}
.services .card{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1rem 1.1rem; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.hover-lift:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.3)}

.services__gallery{display:grid; gap:.8rem; margin-bottom:1rem; grid-template-columns:repeat(3,1fr)}
.shot{margin:0; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; text-align:center}
.shot img{width:100%; height:180px; object-fit:cover; display:block; transition:transform .35s ease, filter .35s ease}
.shot figcaption{padding:.5rem .7rem; color:var(--muted); font-size:.95rem}
.hover-pop:hover img{transform:scale(1.04); filter:saturate(1.05) contrast(1.02)}

@media (max-width:820px){
  .services__gallery{grid-template-columns:1fr}
  .shot img{height:220px}
}

/* ====== Ceník ====== */
.pricing{padding:2.2rem 0}
.price{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem; display:grid; gap:.4rem; align-content:start; position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.price__value{font-size:1.6rem; font-weight:800}
.price--featured{outline:2px solid var(--primary)}
.badge{
  position:absolute; top:.8rem; right:.8rem; background:var(--primary); color:var(--primary-ink);
  padding:.2rem .5rem; border-radius:999px; font-size:.8rem; font-weight:700;
}
.plain{margin:.3rem 0 0; padding-left:1.1rem}
.plain li{margin:.25rem 0}

/* ====== Proces ====== */
.process{padding:2.2rem 0}
.steps{counter-reset:step; list-style:none; padding:0; display:grid; gap:.8rem}
.steps li{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius);
  padding:.9rem 1rem; position:relative; padding-left:3.1rem;
}
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:.9rem; top:.8rem; width:1.6rem; height:1.6rem; display:grid; place-items:center;
  border-radius:999px; background:var(--accent); color:#07140d; font-weight:800;
}

/* ====== FAQ ====== */
.faq{padding:2.2rem 0}
details{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius);
  padding:.8rem 1rem; margin-bottom:.6rem; transition:box-shadow .2s ease;
}
details[open]{box-shadow:var(--shadow)}

/* ====== Kontakt / Formulář ====== */
.contact{padding:2.2rem 0}
.form{
  display:grid; gap:.8rem; background:var(--bg-soft); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem;
}
.form__row{display:grid; gap:.35rem}
input,textarea{
  width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--border);
  background:#0b0f15; color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(121,192,255,.22)}
@media (prefers-color-scheme: light){input,textarea{background:#fff}}

.contact__meta{
  list-style:none; padding:0; margin:.9rem 0 0; color:var(--muted);
  display:flex; gap:1rem; flex-wrap:wrap;
}

/* ====== Footer ====== */
.site-footer{border-top:1px solid var(--border); background:transparent; padding:1.2rem 0; margin-top:2rem}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:.8rem}
.backtop{color:var(--muted); text-decoration:none; transition:color .12s ease, transform .12s ease}
.backtop:hover{color:var(--text); transform:translateY(-1px)}

/* ====== Mobilní doladění ====== */
@media (max-width:420px){
  .hero__tags li{font-size:.85rem; padding:.3rem .55rem}
  .btn{padding:.65rem .85rem}
  .price__value{font-size:1.4rem}
}
@media (max-width:980px){.about{grid-template-columns:1fr}}

/* Centrované řádkování karet v ceníku */
.pricing .grid.grid-center{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;   /* ↤ centrování poslední řady */
}

.pricing .grid.grid-center .price{
  flex:1 1 280px;           /* min šířka karty */
  max-width: 340px;         /* max šířka karty */
}