/* Vzhled podle www.spojuji.cz: světle šedé pozadí, bílé karty s velkým
   zaoblením, fialová #841CDF, tyrkysová tečka u štítků, Poppins na nadpisy
   a General Sans na text (písma převzatá z webu spojuji.cz). */
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonty/poppins-v23-latin-ext-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonty/poppins-v23-latin-ext-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/fonty/poppins-v23-latin-ext-700.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-weight:400;font-display:swap;src:url(/fonty/general-sans-latin-ext-regular.woff2) format("woff2")}

:root{
  --fialova:#841cdf; --fialova-tm:#6a14b5; --fialova-bg:#350b59; --fialova-svetla:#f3e8fd;
  --tyrkys:#00d1b2;
  --pozadi:#f6f6f6; --bila:#fff;
  --text:#020617; --text-2:#1e293b; --tlumene:#64748b; --linka:#e2e8f0; --obrys:#94a3b8;
  --chyba:#dc2626; --radius:32px;
  --stin:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
  --nadpis:Poppins,ui-sans-serif,system-ui,sans-serif;
  --pismo:"General Sans",Poppins,ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:var(--pismo);color:var(--text-2);background:var(--pozadi);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--nadpis);color:var(--text);line-height:1.1;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(34px,5.6vw,64px);text-wrap:balance}
h2{font-size:clamp(28px,3.6vw,44px);text-wrap:balance}
h3{font-size:20px;font-weight:600}
p{margin:0 0 1em}
.obal{max-width:1200px;margin:0 auto;padding:0 28px}
@media (max-width:600px){.obal{padding:0 16px}}
.dva-sloupce{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media (max-width:900px){.dva-sloupce{grid-template-columns:1fr}}
.tlumene{color:var(--tlumene)}

/* štítek s tyrkysovou tečkou */
.stitek{display:inline-flex;align-items:center;gap:8px;border:.8px solid var(--obrys);border-radius:99px;padding:5px 15px;font-family:var(--nadpis);font-size:13px;font-weight:500;text-transform:uppercase;color:#334155;margin:0 0 18px;line-height:1.3}
.stitek::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tyrkys);flex:none}
.stitek.na-tmavem{color:#e2e8f0;border-color:rgba(255,255,255,.45)}

/* tlačítko jako na spojuji.cz – fialová tableta s bílým kolečkem a šipkou */
.tlacitko{display:inline-flex;align-items:center;gap:12px;background:var(--fialova);color:#fff;font-family:var(--nadpis);font-weight:600;font-size:17px;text-decoration:none;padding:10px 10px 10px 24px;border-radius:99px;border:0;box-shadow:var(--stin);cursor:pointer;transition:background .2s}
.tlacitko:hover{background:var(--fialova-tm)}
.tlacitko:focus-visible{outline:3px solid var(--tyrkys);outline-offset:3px}
.sipka{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;flex:none;transition:transform .3s}
.sipka svg{width:12px;height:12px;fill:none;stroke:var(--fialova);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tlacitko:hover .sipka{transform:rotate(45deg)}
.tlacitko.male{font-size:15px;padding:7px 7px 7px 18px}
.tlacitko.male .sipka{width:28px;height:28px}
.tlacitko[disabled]{opacity:.6;cursor:wait}

/* horní lišta */
.lista{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:rgba(246,246,246,.92);backdrop-filter:blur(8px)}
.logo img{display:block;width:150px}
.menu{display:flex;gap:6px;background:#fff;border-radius:99px;padding:6px;box-shadow:var(--stin)}
.menu a{font-family:var(--nadpis);font-size:15px;font-weight:500;text-decoration:none;color:var(--text-2);padding:8px 18px;border-radius:99px}
.menu a:hover{background:var(--pozadi);color:var(--fialova)}
@media (max-width:820px){.menu{display:none}}
@media (max-width:420px){.lista{padding:12px 16px}.logo img{width:118px}}

/* úvod */
.uvod{padding:8px 28px 0}
@media (max-width:600px){.uvod{padding:4px 12px 0}}
.uvod-karta{max-width:1200px;margin:0 auto;background:#fff;border-radius:var(--radius);box-shadow:var(--stin);padding:clamp(32px,6vw,80px);position:relative;overflow:hidden}
.uvod-karta::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(132,28,223,.16),rgba(132,28,223,0) 70%);pointer-events:none}
.uvod-karta{display:grid;grid-template-columns:1.45fr 1fr;gap:56px;align-items:center}
@media (max-width:980px){.uvod-karta{grid-template-columns:1fr;gap:36px}}
.uvod-text,.ukazka-leadu{position:relative;z-index:1}
.ukazka-leadu{background:#fff;border:1px solid var(--linka);border-radius:24px;padding:24px;box-shadow:0 20px 50px -20px rgba(53,11,89,.35);max-width:400px;justify-self:end;width:100%;transform:rotate(1.5deg)}
@media (max-width:980px){.ukazka-leadu{justify-self:start;transform:none}}
.ukazka-hlava{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.novy{background:#d9f8f3;color:#007a68;font-family:var(--nadpis);font-weight:600;font-size:13px;border-radius:99px;padding:4px 12px}
.kdy{font-size:13px;color:var(--tlumene)}
.ukazka-titul{font-family:var(--nadpis);font-weight:600;font-size:20px;color:var(--text);margin:0}
.ukazka-misto{color:var(--tlumene);margin:0 0 14px}
.ukazka-leadu dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;padding:14px 0;border-top:1px solid var(--linka);border-bottom:1px solid var(--linka);font-size:15px}
.ukazka-leadu dt{color:var(--tlumene)}
.ukazka-leadu dd{margin:0;color:var(--text);font-weight:500;text-align:right}
.ukazka-pata{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ukazka-pata span{background:var(--fialova-svetla);color:var(--fialova);font-family:var(--nadpis);font-weight:500;font-size:13px;border-radius:99px;padding:5px 12px}
.ukazka-pozn{margin:12px 0 0;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--obrys)}
.uvod h1{max-width:820px}
.uvod h1 span{color:var(--fialova)}
.perex{max-width:680px;font-size:clamp(17px,1.6vw,20px);color:var(--text-2)}
.akce{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:30px 0 40px}
.odkaz{font-family:var(--nadpis);font-weight:600;text-decoration:none;color:var(--text)}
.odkaz:hover{color:var(--fialova)}
.exkluzivita{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 24px;background:var(--fialova-svetla);border-radius:24px;padding:18px 28px}
.exkluzivita strong{font-family:var(--nadpis);font-size:clamp(22px,3vw,30px);color:var(--fialova);font-weight:700}
.exkluzivita span{color:var(--text-2)}

/* sekce */
.sekce{padding:clamp(56px,8vw,96px) 0 0}
.hlavicka{margin-bottom:36px}
.hlavicka.stred{text-align:center}
.karta{background:#fff;border-radius:var(--radius);box-shadow:var(--stin);padding:clamp(26px,4vw,44px)}

/* kroky 01–04 */
.kroky{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:980px){.kroky{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.kroky{grid-template-columns:1fr}}
.kroky li{background:#fff;border-radius:24px;box-shadow:var(--stin);padding:28px}
.kroky p{margin:0;color:var(--text-2);font-size:16px}
.cislo{display:block;font-family:var(--nadpis);font-weight:700;font-size:40px;line-height:1;color:rgba(132,28,223,.75);margin-bottom:36px;transition:color .3s}
.kroky li:hover .cislo{color:var(--fialova)}

/* seznam */
.seznam{list-style:none;padding:0;margin:8px 0 0}
.seznam li{position:relative;padding:13px 0 13px 42px;border-bottom:1px solid var(--linka);font-family:var(--nadpis);font-weight:500;color:var(--text)}
.seznam li:last-child{border-bottom:0}
.seznam li::before{content:"";position:absolute;left:0;top:13px;width:26px;height:26px;border-radius:50%;background:var(--tyrkys) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6 9.5 3.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}

/* přepis */
.prepis{margin:10px 0 0;border:1px solid var(--linka);border-radius:24px;padding:20px 24px;background:var(--pozadi)}
.prepis figcaption{display:flex;justify-content:space-between;align-items:center;font-family:var(--nadpis);font-size:13px;font-weight:500;text-transform:uppercase;color:var(--tlumene);border-bottom:1px solid var(--linka);padding-bottom:12px}
.overeno{background:#d9f8f3;color:#007a68;border-radius:99px;padding:4px 12px;font-weight:600}
.prepis dl{display:grid;grid-template-columns:78px 1fr;gap:12px 14px;margin:14px 0 0}
.prepis dt{font-family:var(--nadpis);font-size:13px;color:var(--tlumene);padding-top:3px}
.prepis dd{margin:0;color:var(--tlumene)}
.prepis .majitel{color:var(--text)}
.prepis dt.majitel{color:var(--fialova);font-weight:600}
.poznamka-male{margin:16px 0 0;padding-top:10px;border-top:1px dashed var(--obrys);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--tlumene)}
@media (max-width:480px){.prepis{padding:16px}.prepis dl{grid-template-columns:1fr;gap:2px}.prepis dd{margin-bottom:10px}}

/* ceník */
.ceny{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;max-width:1000px;margin:0 auto}
@media (max-width:820px){.ceny{grid-template-columns:1fr}}
.cena.hlavni{outline:2px solid var(--fialova)}
.odznak{display:inline-block;background:var(--fialova);color:#fff;font-family:var(--nadpis);font-weight:600;font-size:13px;text-transform:uppercase;border-radius:99px;padding:6px 15px}
.odznak.svetly{background:var(--pozadi);color:var(--text-2)}
.castka{color:var(--tlumene);margin:14px 0}
.castka s{color:var(--obrys)}
.castka strong{font-family:var(--nadpis);font-size:clamp(40px,5vw,54px);color:var(--fialova);font-weight:700;margin:0 4px;line-height:1}
.castka strong.tmavy{color:var(--text);margin-left:0}
.soucet{border-top:1px solid var(--linka);padding-top:14px;color:var(--text-2)}
.soucet strong{font-family:var(--nadpis);font-size:30px;color:var(--text);margin-left:6px}
.drobne{font-size:14px;color:var(--tlumene)}
.cena{display:flex;flex-direction:column;align-items:flex-start}
.cena .tlacitko{margin-top:auto}
.cena .drobne{margin-bottom:20px}
.tlacitko.obrys{background:#fff;color:var(--fialova);box-shadow:inset 0 0 0 2px var(--fialova)}
.tlacitko.obrys .sipka{background:var(--fialova)}
.tlacitko.obrys .sipka svg{stroke:#fff}
.tlacitko.obrys:hover{background:var(--fialova-svetla)}
.soucet strong.mensi{font-size:24px;margin-left:0}
.cena .seznam.male{width:100%}
.podminky{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:24px auto 0}
@media (max-width:820px){.podminky{grid-template-columns:1fr}}
.podminky p{margin:0}
.seznam.male{margin:0 0 12px}
.seznam.male li{padding:9px 0 9px 38px;font-size:16px}
.seznam.male li::before{top:9px;width:24px;height:24px}

/* fialový blok s formulářem */
.fialovy-blok{background:var(--fialova-bg);color:#e2e8f0;border-radius:var(--radius);padding:clamp(28px,6vw,80px);gap:clamp(28px,5vw,64px)}
.fialovy-blok h2{color:#fff}
.fialovy-blok strong{color:#fff}
.kontakty{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin-top:28px}
.kontakty dt{font-size:14px;color:#c4b5d9;padding-top:3px}
.kontakty dd{margin:0;font-family:var(--nadpis);font-size:18px;font-weight:600}
.kontakty a{color:#fff;text-decoration:none}
.formular{background:#fff;color:var(--text-2);border-radius:24px;padding:28px}
@media (max-width:520px){.formular{padding:20px}}
.pole{margin:0 0 16px;border:0;padding:0;min-width:0}
.radek{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:520px){.radek{grid-template-columns:1fr}}
label,legend{display:block;font-family:var(--nadpis);font-weight:500;font-size:15px;color:var(--text);margin-bottom:6px;padding:0}
.nepovinne{font-weight:400;color:var(--tlumene)}
input:not([type=checkbox]):not([type=radio]),textarea{width:100%;font:inherit;font-size:16px;padding:11px 14px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:var(--text)}
input:focus,textarea:focus{outline:none;border-color:var(--fialova);box-shadow:0 0 0 3px rgba(132,28,223,.15)}
input[aria-invalid=true]{border-color:var(--chyba)}
textarea{resize:vertical}
.volby{display:flex;flex-wrap:wrap;gap:8px}
.volby label{display:flex;align-items:center;gap:8px;font-family:var(--pismo);font-weight:400;margin:0;border:1px solid #cbd5e1;border-radius:99px;padding:8px 15px;cursor:pointer}
.volby label:has(input:checked){border-color:var(--fialova);background:var(--fialova-svetla);color:var(--text)}
.volby.svisle{flex-direction:column;align-items:stretch}
.volby.svisle label{border-radius:14px}
.volby input{accent-color:var(--fialova);width:16px;height:16px;margin:0}
.chyba{color:var(--chyba);font-size:14px;margin:5px 0 0}
.chyba:empty{display:none}
.past{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tlacitko.plne{width:100%;justify-content:space-between;font-size:17px;margin-top:4px}
.stav{margin:12px 0 0;font-weight:600}
.stav:empty{display:none}
.stav.chybna{color:var(--chyba)}
.gdpr{font-size:13px;color:var(--tlumene);margin:14px 0 0}
.dekujeme h3{color:var(--fialova);font-size:26px}
.dekujeme a{font-weight:600;color:var(--fialova)}

/* patička */
.paticka{padding:clamp(56px,8vw,96px) 0 40px;font-size:15px}
.paticka-mrizka{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;border-top:1px solid var(--linka);padding-top:40px}
@media (max-width:760px){.paticka-mrizka{grid-template-columns:1fr}}
.paticka p{margin:0 0 6px;color:var(--text-2);max-width:420px}
.paticka img{margin-bottom:14px}
.paticka-nadpis{font-family:var(--nadpis);font-weight:600;color:var(--text)!important;margin-top:10px!important}
.paticka a{text-decoration:none}
.paticka a:hover{color:var(--fialova)}

/* 404 */
.nenalezeno{min-height:100vh;display:grid;place-items:center;text-align:center;padding:20px}