/* Náborové weby Spojuji (makléři, zateplení, energetici) v identitě nového www.spojuji.cz
   (Rodina Spojuji, 2026-10-02). Vrstva nad styl.css – HTML, formuláře a počítadla beze změny. */
:root{
  --pozadi:#f6f5f8; --text:#0e0b14; --text-2:#3d3747; --tlumene:#6b6474; --linka:rgba(14,11,20,.08); --obrys:rgba(14,11,20,.16);
  --noc:#0d0716; --fi-hl:#b26bff; --hladce:cubic-bezier(.2,.7,.1,1); --radius:28px;
  --stin:0 1px 2px rgba(14,11,20,.04),0 12px 40px -12px rgba(52,16,96,.14);
  --stin-v:0 2px 4px rgba(14,11,20,.04),0 40px 80px -24px rgba(72,18,140,.28);
}
body{background:var(--pozadi);color:var(--text-2)}
::selection{background:var(--fialova);color:#fff}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{font-weight:600;letter-spacing:-.04em;line-height:1.04}
h1{font-size:clamp(38px,5.6vw,76px);letter-spacing:-.05em}
h2{font-size:clamp(30px,4.2vw,56px)}
h3{letter-spacing:-.02em}

/* lišta – skleněná pilulka */
.lista{position:sticky;top:14px;max-width:1240px;width:calc(100% - 32px);margin:14px auto 0;padding:10px 10px 10px 22px;border-radius:999px;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:0 1px 0 rgba(14,11,20,.04),0 10px 30px -14px rgba(52,16,96,.2)}
.menu{background:transparent;box-shadow:none;padding:0;gap:2px}
.menu a{font-size:15px;color:var(--text-2);padding:11px 15px}
.menu a:hover{background:rgba(132,28,223,.07);color:var(--text)}
.lista .tlacitko{background:var(--text)}
.lista .tlacitko:hover{background:var(--fialova)}
.logo img{width:132px}

/* tlačítka – plynulejší pohyb jako na spojuji.cz */
.tlacitko{transition:background .3s,transform .35s var(--hladce),box-shadow .35s}
.tlacitko:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(132,28,223,.55)}
.tlacitko .sipka{transition:transform .35s var(--hladce)}

/* štítky */
.stitek{border:1px solid var(--linka);background:rgba(255,255,255,.7);color:var(--text-2);letter-spacing:.08em;font-size:12.5px;padding:8px 14px 8px 12px}
.stitek::before{box-shadow:0 0 0 4px rgba(0,209,178,.15)}
.stitek.na-tmavem{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#d9cdea}

/* úvod – porcelán s aurorou */
.uvod{padding-top:22px}
.uvod-karta{background:radial-gradient(55% 75% at 90% 0%,rgba(217,182,255,.55),transparent 60%),radial-gradient(45% 65% at 0% 100%,rgba(201,243,236,.55),transparent 60%),#fbfafd;
  border:1px solid rgba(255,255,255,.9);border-radius:36px;box-shadow:var(--stin)}
.uvod-karta::after{display:none}
.ukazka-leadu{border:1px solid rgba(255,255,255,.8);border-radius:28px;box-shadow:var(--stin-v);transform:rotate(1.5deg);transition:transform .6s var(--hladce)}
.ukazka-leadu:hover{transform:rotate(0) translateY(-4px)}
.rychly{background:rgba(255,255,255,.75);border:1px solid var(--linka);box-shadow:var(--stin)}
.exkluzivita{background:rgba(132,28,223,.08)}

/* karty a kroky */
.karta,.kroky li{border:1px solid var(--linka);box-shadow:0 1px 2px rgba(14,11,20,.03);transition:transform .5s var(--hladce),box-shadow .5s,border-color .4s}
.karta:hover,.kroky li:hover{transform:translateY(-4px);box-shadow:var(--stin-v);border-color:rgba(132,28,223,.18)}
.kroky li{border-radius:28px;padding:32px 30px}
.cislo{font-weight:600;font-size:56px;letter-spacing:-.06em;background:linear-gradient(160deg,var(--fialova),#c79bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cena.hlavni{outline:0;border:2px solid var(--fialova)}
.prepis{background:#f8f7fa;border-color:var(--linka)}

/* tmavý blok s formulářem – stejný jako výzva na spojuji.cz */
.fialovy-blok{background:radial-gradient(55% 90% at 100% 100%,rgba(132,28,223,.55),transparent 60%),radial-gradient(45% 70% at 0% 0%,rgba(0,209,178,.13),transparent 60%),var(--noc);border-radius:40px}
.fialovy-blok h2{font-size:clamp(34px,4.6vw,64px)}
.formular{border-radius:28px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
input:not([type=checkbox]):not([type=radio]),textarea{background:#f7f6f9;border-color:transparent;border-radius:14px}
input:focus,textarea:focus{background:#fff}

/* patička – tmavá, obří nápis, pás Rodiny Spojuji */
.paticka{background:radial-gradient(50% 80% at 90% 0%,rgba(132,28,223,.32),transparent 60%),var(--noc);color:#c9bdd9;margin-top:clamp(70px,9vw,120px);padding:clamp(60px,8vw,110px) 0 30px}
.paticka-mrizka{border-top:0;padding-top:0}
.paticka p{color:#c9bdd9}
.paticka-nadpis{color:#8f7fa8!important;font:500 12px var(--nadpis)!important;letter-spacing:.14em;text-transform:uppercase}
.paticka a{color:#e6ddf2}
.paticka a:hover{color:var(--fi-hl)}
.obri{margin:clamp(40px,6vw,80px) 0 clamp(8px,1.5vw,18px)!important;max-width:none!important;padding:0 .06em;text-align:center;white-space:nowrap;user-select:none;
  font:700 clamp(52px,15vw,230px)/1.12 var(--nadpis);letter-spacing:-.06em;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.03) 95%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.rodina-pas{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08)}
.rodina-pas>span{font:500 12px var(--nadpis);letter-spacing:.14em;text-transform:uppercase;color:#8f7fa8;margin-right:8px}
.rodina-pas a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font:600 14px var(--nadpis);color:#efe8f8}
.rodina-pas a:hover{background:rgba(255,255,255,.1);color:#fff}
.rodina-pas a[aria-current]{background:rgba(132,28,223,.25);border-color:rgba(178,107,255,.4)}
.rodina-pas i{width:8px;height:8px;border-radius:50%}
.r-spojuji{background:#b26bff}.r-ocenuji{background:#3fd0a0}.r-strankuji{background:#7d96ff}.r-stvrzuji{background:#c7c98a}.r-navazuji{background:#F5B700}.r-bazaruji{background:#ff7a45}

/* mobil */
@media (max-width:700px){
  .lista{top:10px;width:calc(100% - 20px);padding:8px 8px 8px 16px}
  .uvod-karta{border-radius:26px}
  .fialovy-blok{border-radius:28px}
  .spodni-lista{left:10px;right:10px;bottom:10px;border-radius:22px;background:rgba(14,11,20,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:none}
  .spodni-volat{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
  .paticka{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==================== KRÉDO SPOJUJI (2026-10-14) ==================== */
.kredo-rodina{margin:clamp(56px,8vw,96px) 0 0;padding:clamp(56px,8vw,96px) clamp(16px,4vw,40px);background:#0d0716;color:#f3eefa}
.kredo-obal{max-width:1100px;margin:0 auto}
.kredo-stitek{display:inline-block;margin:0 0 22px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#d9cdea;font:600 13px/1.2 Poppins,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.kredo-rodina h2{margin:0;color:#fff;font:600 clamp(30px,4.4vw,58px)/1.08 Poppins,system-ui,sans-serif;letter-spacing:-.035em;text-wrap:balance}
.kredo-rodina h2 em{font-style:normal;color:#b26bff}
.kredo-uvod{max-width:760px;margin:24px 0 0;color:#c9bdd9;font-size:clamp(17px,1.6vw,20px);line-height:1.6}
.kredo-uvod strong{color:#fff}
.kredo-body{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.kredo-body li{padding:26px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.kredo-body h3{margin:0 0 10px;color:#fff;font:600 19px/1.25 Poppins,system-ui,sans-serif;letter-spacing:-.02em}
.kredo-body p{margin:0;color:#c9bdd9;font-size:16px;line-height:1.6}
@media (max-width:860px){.kredo-body{grid-template-columns:1fr}}