/* ==========================================================
   MANTYZ — tvorba webů
   Světlý, technický, čitelný. Barvy jsou v jednom bloku dole
   u :root, takže se dají změnit na jednom místě.
   ========================================================== */

:root{
  --papir:#f6f7f6;        /* zakladni podklad */
  --papir-2:#ffffff;      /* karty */
  --tmava:#111614;        /* tmave sekce */
  --tmava-2:#19201d;

  --ink:#111614;
  --ink-2:#4d5854;
  --ink-3:#7f8b86;
  --ink-svetly:#eef2f0;   /* text na tmavem */
  --ink-svetly-2:#9fada8;

  --linka:#dfe4e2;
  --linka-tmava:#28312d;

  --akcent:#0b7d68;       /* hluboka zelenomodra */
  --akcent-svetly:#22b294;
  --akcent-jemny:#e3f2ee;

  --r:12px;
  --max:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papir);
  color:var(--ink);
  font-family:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}

.obal{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.obal-uzky{max-width:720px}

/* ---------- HLAVIČKA ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(246,247,246,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linka);
}
.hdr-in{
  max-width:var(--max);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.brand{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.2rem;
  letter-spacing:.02em;text-decoration:none;
}
.brand-tecka{color:var(--akcent)}

.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.96rem;transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav .nav-cta{
  background:var(--akcent);color:#fff;padding:9px 18px;border-radius:8px;
}
.nav .nav-cta:hover{background:#0a6d5b;color:#fff}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;margin-left:auto;padding:0;
  background:transparent;border:1px solid var(--linka);border-radius:9px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;margin:0 auto;background:var(--ink);
  transition:transform .2s,opacity .2s}
.otevreno .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.otevreno .burger span:nth-child(2){opacity:0}
.otevreno .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- SPOLEČNÉ ---------- */
.stitek,.nadpisek{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akcent);margin:0 0 14px;
}
h1{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(2.1rem,5.4vw,3.7rem);line-height:1.08;letter-spacing:-.025em;
  margin:0 0 22px;text-wrap:balance;overflow-wrap:break-word;
}
h2{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.14;letter-spacing:-.02em;
  margin:0 0 16px;text-wrap:balance;
}
h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.12rem;margin:0 0 8px;letter-spacing:-.01em}
.lead{font-size:clamp(1.03rem,1.7vw,1.17rem);color:var(--ink-2);max-width:56ch;margin:0 0 32px}
.uvod{color:var(--ink-2);max-width:58ch;margin:0 0 38px}

.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:1rem;
  padding:14px 26px;border-radius:9px;transition:transform .12s,background .2s;
  font-family:inherit;border:none;cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn-hlavni{background:var(--akcent);color:#fff}
.btn-hlavni:hover{background:#0a6d5b}
.btn-vedlejsi{border:1px solid var(--linka);color:var(--ink);background:var(--papir-2)}
.btn-vedlejsi:hover{border-color:var(--ink-3)}
.siroke{width:100%;text-align:center}
.akce{display:flex;flex-wrap:wrap;gap:12px}

.sekce{padding:clamp(58px,8vw,100px) 0}
.sekce-jemna{background:var(--akcent-jemny)}
.sekce-tmava{background:var(--tmava);color:var(--ink-svetly)}
.sekce-tmava .uvod{color:var(--ink-svetly-2)}
.sekce-tmava .nadpisek{color:var(--akcent-svetly)}

/* ---------- HERO ---------- */
.hero{
  padding:clamp(56px,9vw,104px) 0 clamp(50px,7vw,84px);
  background:
    radial-gradient(70% 60% at 8% 0%, var(--akcent-jemny), transparent 65%);
  border-bottom:1px solid var(--linka);
}

/* ---------- SLUŽBY ---------- */
.sluzby{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:34px}
.sluzba{
  background:var(--papir-2);border:1px solid var(--linka);border-radius:var(--r);
  padding:26px 24px;
}
.cislo{
  font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--akcent);
  display:block;margin-bottom:14px;
}
.sluzba p{margin:0;color:var(--ink-2);font-size:.98rem}

/* ---------- CENÍK ---------- */
.cenik{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:34px}
.tarif{
  background:var(--papir-2);border:1px solid var(--linka);border-radius:var(--r);
  padding:26px 24px;display:flex;flex-direction:column;
}
/* Prostřední tarif je ten, o který je největší zájem — dostane zvýraznění. */
.tarif-hlavni{border-color:var(--akcent);box-shadow:0 0 0 3px var(--akcent-jemny)}
.cena{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.5rem;
  color:var(--akcent);margin:4px 0 16px;letter-spacing:-.02em;
}
.tarif ul{margin:0 0 16px;padding-left:20px;color:var(--ink-2);font-size:.97rem}
.tarif li{margin-bottom:5px}
.tarif-pozn{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--linka);
  color:var(--ink-3);font-size:.88rem}
.cenik-pozn{margin:26px 0 0;color:var(--ink-2);font-size:.94rem;max-width:62ch}

/* ---------- PROJEKTY ---------- */
.projekty{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:34px}
.projekt{
  background:var(--tmava-2);border:1px solid var(--linka-tmava);border-radius:var(--r);
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;
}
.projekt-siroky{grid-column:1/-1}
/* Náhled živého webu. Ořezaný na pás, ať karty drží stejnou výšku. */
.nahled{
  display:block;margin:-26px -24px 4px;border-bottom:1px solid var(--linka-tmava);
  border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:var(--tmava);
}
.nahled img{width:100%;height:170px;object-fit:cover;object-position:top center;
  transition:transform .4s}
.projekt:hover .nahled img{transform:scale(1.03)}
.projekt-hlava{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.projekt h3{margin:0;color:var(--ink-svetly)}
.tagy{display:flex;flex-wrap:wrap;gap:6px}
.tagy span{
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  color:var(--akcent-svetly);border:1px solid var(--linka-tmava);
  padding:3px 8px;border-radius:20px;
}
.projekt p{margin:0;color:var(--ink-svetly-2);font-size:.97rem}
.projekt-pozn{font-size:.9rem!important;padding-top:10px;border-top:1px solid var(--linka-tmava)}
.odkaz{
  margin-top:auto;align-self:flex-start;text-decoration:none;font-weight:600;
  color:var(--akcent-svetly);border-bottom:1px solid transparent;transition:border-color .2s;
}
.odkaz:hover{border-bottom-color:var(--akcent-svetly)}

/* ---------- POSTUP ---------- */
.kroky{margin:34px 0 0;padding:0;list-style:none;counter-reset:k;
  display:flex;flex-direction:column;gap:2px}
.kroky li{
  counter-increment:k;position:relative;padding:22px 0 22px 62px;
  border-top:1px solid var(--linka);
}
.kroky li:last-child{border-bottom:1px solid var(--linka)}
.kroky li::before{
  content:counter(k);position:absolute;left:0;top:22px;
  width:36px;height:36px;border-radius:50%;
  background:var(--akcent-jemny);color:var(--akcent);
  font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:500;
  display:flex;align-items:center;justify-content:center;
}
.kroky p{margin:0;color:var(--ink-2);font-size:.98rem}

/* ---------- DŮVODY ---------- */
.duvody{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:34px}
.duvod h3{color:var(--ink-svetly)}
.duvod p{margin:0;color:var(--ink-svetly-2);font-size:.97rem}

/* ---------- FORMULÁŘ ---------- */
.form{display:flex;flex-direction:column;gap:16px;margin:34px 0 24px}
.dvojice{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pole{display:flex;flex-direction:column;gap:7px}
.pole label{font-size:.88rem;font-weight:600;color:var(--ink-2)}
.volitelne{font-weight:400;color:var(--ink-3)}
.pole input,.pole select,.pole textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--papir-2);border:1px solid var(--linka);border-radius:9px;
  padding:12px 14px;transition:border-color .2s,box-shadow .2s;
}
.pole input:focus,.pole select:focus,.pole textarea:focus{
  outline:none;border-color:var(--akcent);box-shadow:0 0 0 3px var(--akcent-jemny);
}
.pole textarea{resize:vertical}
.form-pozn{margin:0;text-align:center;color:var(--ink-3);font-size:.86rem}
.zaloha{
  background:var(--papir-2);border:1px solid var(--linka);border-radius:var(--r);
  padding:22px 22px 24px;margin:0 0 24px;
}
.zaloha-nadpis{font-family:'Archivo',sans-serif;font-weight:700;margin:0 0 6px}
.zaloha-text{margin:0 0 14px;color:var(--ink-2);font-size:.95rem}
.zaloha-text a{color:var(--akcent);font-weight:600}
.zaloha-zprava{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.82rem;line-height:1.6;
  background:var(--papir);border:1px solid var(--linka);border-radius:9px;
  padding:14px;margin:0 0 14px;max-height:220px;overflow:auto;white-space:pre-wrap;
  color:var(--ink-2);
}
.primy{text-align:center;color:var(--ink-2)}
.primy a{color:var(--akcent);font-weight:600}

/* ---------- PATIČKA ---------- */
.pata{padding:34px 0;border-top:1px solid var(--linka)}
.pata .obal{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pata-brand{font-family:'Archivo',sans-serif;font-weight:800}
.pata-txt{color:var(--ink-3);font-size:.9rem}
.pata-odkaz{margin-left:auto;color:var(--akcent);font-weight:600;font-size:.9rem;
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.pata-odkaz:hover{border-bottom-color:var(--akcent)}

/* ---------- MOBIL ---------- */
@media (max-width:800px){
  /* Ruční zalomení nadpisu je vymyšlené pro širokou obrazovku.
     Na mobilu by přetékalo přes okraj, tak ho necháme zalomit samo. */
  h1 br{display:none}
  .burger{display:flex}
  .nav{
    display:none;order:3;flex-basis:100%;
    flex-direction:column;align-items:flex-start;gap:2px;
    margin-left:0;padding-top:10px;
  }
  .otevreno .nav{display:flex}
  .nav a{width:100%;padding:11px 2px}
  .nav .nav-cta{text-align:center;margin-top:8px}
  .dvojice{grid-template-columns:1fr}
  .kroky li{padding-left:54px}
}

/* ---------- TMAVÝ REŽIM SYSTÉMU ----------
   Když má návštěvník v systému tmavý režim, web se přizpůsobí.
   Zároveň je to ukázka, že tohle umím udělat i klientovi. */
@media (prefers-color-scheme:dark){
  :root{
    --papir:#101513;
    --papir-2:#181f1c;
    --tmava:#0b100e;
    --tmava-2:#141a18;
    --ink:#eef2f0;
    --ink-2:#a7b3ae;
    --ink-3:#75827d;
    --linka:#252e2a;
    --akcent:#2bbd9d;
    --akcent-jemny:#12302a;
  }
  .hdr{background:rgba(16,21,19,.86)}
  .btn-hlavni{color:#07110e}
  .nav .nav-cta{color:#07110e}
  .btn-hlavni:hover,.nav .nav-cta:hover{background:#35d3b0;color:#07110e}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
}