/* styl-uvod.css - komponenty domovske a landing stranek (hero, formular, kroky, cisla, hodnoceni, casova osa...).
   Nacita se JEN na index.html, jak-prodavam.html, pruvodce-pro-prodavajici.html
   a na generovanych strankach nabidek (berou hlavicku z index.html), VZDY AZ ZA styl.css.
   Spolecny zaklad (hlavicka, menu, paticka, typografie) je jen ve styl.css - tady se nemeni.
   Vznikl 24. 9. 2026 (CSS krok B) z vlozeneho <style> tech tri stranek. */
.hero{padding:64px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.hero h1{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:20px}
.hero .lead{font-size:1.14rem;max-width:34em;margin-bottom:28px}
.trust{list-style:none;margin-bottom:30px}
.trust li{padding-left:32px;position:relative;margin-bottom:13px;font-size:1.02rem}
.trust li::before{
  content:"";position:absolute;left:0;top:9px;width:12px;height:12px;background:var(--gold);
}
.hero-phone{font-size:1rem;color:var(--stone)}
.hero-phone a{font-weight:600;color:var(--navy);font-size:1.1rem}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(20,40,58,.09);position:relative}
.form-head{background:var(--navy);color:#fff;padding:20px 26px 18px;border-top:3px solid var(--gold)}
.form-head .doc-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.form-head h2{font-size:1.35rem;margin-top:4px}
.stamp{
  position:absolute;top:-24px;right:20px;width:98px;height:98px;border-radius:50%;
  background:var(--gold);color:var(--navy);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  border:3px solid var(--ivory);box-shadow:0 6px 18px rgba(20,40,58,.2);
  font-family:'Bitter',serif;font-weight:700;line-height:1.15;
}
.stamp b{font-size:1rem;letter-spacing:.04em}
.stamp span{font-size:.68rem;font-weight:600;letter-spacing:.05em}
form{padding:26px}
.field{margin-bottom:16px}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
label .req{color:var(--navy)}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:13px 14px;font-size:1.02rem;font-family:inherit;
  border:1.5px solid var(--line);border-radius:var(--radius);background:#FCFAF5;color:var(--navy);
}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(20,40,58,.3);border-color:var(--navy)}
textarea{resize:vertical;min-height:84px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;color:var(--stone);margin:16px 0}
.consent a{color:var(--navy)}
.consent input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--navy)}
button[type=submit]{
  width:100%;padding:16px;font-size:1.12rem;font-weight:600;font-family:inherit;
  background:var(--gold);color:var(--navy);border:none;border-radius:var(--radius);cursor:pointer;
}
button[type=submit]:hover{background:#D4B36F}
button[type=submit]:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
button[disabled]{opacity:.6;cursor:wait}
.form-note{font-size:.84rem;color:var(--stone);text-align:center;margin-top:12px}
.success{display:none;padding:44px 28px;text-align:center}
.success h3{font-size:1.4rem;margin-bottom:10px}
.error-msg{display:none;color:#9B3223;font-size:.9rem;margin-top:10px;text-align:center}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-top:3px solid var(--gold);padding:26px}
.step .n{font-family:'Bitter',serif;font-weight:700;font-size:1.5rem;color:var(--gold);margin-bottom:10px}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{font-size:.96rem;color:rgba(255,255,255,.85)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px;margin:34px 0 0}
.stat{border-top:3px solid var(--gold);padding-top:14px}
.stat b{display:block;font-family:'Bitter',serif;font-weight:700;font-size:2rem;line-height:1.1}
.stat span{font-size:.9rem;color:var(--stone)}
.sec-navy .stat span{color:rgba(255,255,255,.75)}
.quotes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:start}
.quote{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);padding:22px}
.quote p{font-size:.98rem;margin-bottom:14px}
.quote cite{font-style:normal;font-size:.85rem;color:var(--stone)}
.quote-navy{background:var(--navy);border:0;color:#fff;padding:26px 22px}
.quote-navy b{display:block;font-family:'Bitter',serif;font-size:1.6rem;color:var(--gold);line-height:1.15;margin-bottom:10px}
.quote-navy p{color:rgba(255,255,255,.85);font-size:.95rem;margin-bottom:14px}
.quote-navy a{color:var(--gold);font-weight:600}
.about-grid{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
.about-photo{aspect-ratio:4/5;background:var(--white);border:1px solid var(--line);overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about p{margin-bottom:16px;max-width:38em}
.about .areas{font-size:.94rem;color:var(--stone)}
.about .areas strong{color:var(--navy)}
@media (max-width:960px){
.hero-grid{grid-template-columns:1fr;gap:44px}
.stats{grid-template-columns:repeat(2,1fr)}
.quotes{grid-template-columns:1fr}
}
@media (max-width:760px){
.hero{padding:40px 0 52px}
.head-row{gap:12px}
.logo{margin-right:0;width:100%}
.nav{gap:16px;width:100%;order:3}
.head-phone{order:2;margin-left:auto}
.steps-grid,.cards-2,.cards-3,.cards-4{grid-template-columns:1fr}
.about-grid{grid-template-columns:1fr;gap:28px}
.about-photo{max-width:280px}
.two-col{grid-template-columns:1fr}
.stamp{width:86px;height:86px;top:-18px;right:14px}
}
.src{font-size:.82rem;color:var(--stone);border-top:1px solid var(--line);padding-top:12px;margin-top:26px}
.src-light{color:rgba(255,255,255,.6);border-top-color:var(--line-dark)}
.fig-navy,.fig-solid{background:var(--navy);border-color:var(--navy);color:#fff}
.fig-navy span,.fig-solid span{color:rgba(255,255,255,.78)}
.fig-navy strong,.fig-solid strong{color:var(--gold)}
.fig-outline{background:transparent;border-color:var(--gold)}
.sec-navy .fig-outline{color:#fff}
.sec-navy .fig-outline span{color:rgba(255,255,255,.7)}
.box h3{font-size:1.15rem;margin-bottom:16px}
.box-light{background:rgba(255,255,255,.06);color:#fff}
.box-light h3{color:#fff}
.deflist{display:grid;grid-template-columns:200px 1fr;gap:10px 20px;font-size:.97rem}
.deflist dt{font-weight:600}
.deflist dd{color:var(--stone)}
.box-light .deflist dd{color:rgba(255,255,255,.8)}
.numbered{list-style:none;margin-top:22px}
.numbered li{display:flex;gap:18px;margin-bottom:18px;align-items:flex-start}
.numbered .num{margin-right:0;flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--gold);
  font-family:'Bitter',serif;font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center}
.sec-navy .numbered .num{background:rgba(255,255,255,.1);border:1px solid var(--gold)}
.numbered li > span:last-child{padding-top:6px}
.timeline{list-style:none;margin-top:34px;border-left:2px solid rgba(255,255,255,.2);padding-left:26px}
.timeline li{position:relative;margin-bottom:24px;display:grid;grid-template-columns:130px 1fr;gap:18px}
.timeline li::before{content:"";position:absolute;left:-33px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--ivory)}
.timeline li.tl-mark::before{background:var(--gold)}
.tl-when{font-family:'Bitter',serif;font-weight:700;font-size:1rem}
.tl-what{color:rgba(255,255,255,.85);font-size:.98rem}
.tl-what strong{color:#fff}
.chan{background:rgba(255,255,255,.06);border:1px solid var(--line-dark);padding:18px 20px;font-size:.97rem}
.chan-gold{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:600}
.pull{border-left:4px solid var(--gold);padding:6px 0 6px 22px;margin-top:44px;
  font-family:'Bitter',serif;font-weight:600;font-size:1.25rem;line-height:1.4;color:#fff;max-width:30em}
.checklist{list-style:none}
.checklist li{position:relative;padding:14px 0 14px 40px;border-bottom:1px solid var(--line);font-size:.99rem}
.sec-navy .trust li{color:rgba(255,255,255,.88)}
.sec-navy .trust li strong{color:#fff}
@media (max-width:760px){
.deflist{grid-template-columns:1fr;gap:2px 0}
.deflist dd{margin-bottom:12px}
.timeline li{grid-template-columns:1fr;gap:4px}
.numbered li{gap:12px}
.numbered .num{width:34px;height:34px;font-size:.85rem}
}
.sec-navy .fig-solid{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.sec-navy .fig-solid span,.sec-navy .fig-solid .lbl{color:rgba(20,40,58,.82)}
.sec-navy .fig-solid strong{color:var(--navy)}
.trust{max-width:52em}
.timeline,.numbered,.checklist{max-width:880px}
.chan{max-width:none}
@media (max-width:760px){

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

}