/* ============================================================
   DREAMY — B2B marketingové STRÁNKY (Proč Dreamy, Jak prodávat)
   ------------------------------------------------------------
   Nahraj do:  Správce souborů → /user/documents/
   Odkaz:      ZÁHLAVÍ → <link rel="stylesheet" href="/user/documents/stranky.css?v=1">
   Interaktivita: stranky.js (Zápatí).
   Po KAŽDÉ změně souboru zvyš ?v=.

   Doplňuje dreamy.css. Vše scopováno pod .dm-page → nešahá na
   nativní prvky. Řeší jen to, co inline styl v obsahu neumí:
   responsivní mřížky, hover, focus a stavy interaktivních nástrojů.
   Vlastní vzhled sekcí je inline přímo v HTML bloku stránky.
   ============================================================ */

.dm-page{
  --pink:#C8005F; --pink-dark:#9E0A54;
  --teal:#1E7A70; --teal-bright:#33B3A6;
  --ink:#141118; --paper:#F5F1EC;
  max-width:1200px;margin:0 auto;padding:0 32px;
  font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);
}
.dm-page,.dm-page *,.dm-page *::before,.dm-page *::after{box-sizing:border-box}
.dm-page h1,.dm-page h2,.dm-page h3,.dm-page p{margin:0}
.dm-page a{text-decoration:none}

/* ---- responsivní mřížky (sloupce řídí CSS → media query kaskáduje) ---- */
.dmp-g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dmp-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dmp-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dmp-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.dmp-principle{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.dmp-reg{display:grid;grid-template-columns:.95fr 1.05fr}
.dmp-dl{display:grid;grid-template-columns:1fr 1.3fr;gap:36px;align-items:center}
.dmp-dl-inner{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dmp-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dmp-step{display:grid;grid-template-columns:80px 1fr;gap:24px;align-items:center}
.dmp-tool{display:grid;grid-template-columns:1fr 1fr}
.dmp-optgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

/* ---- stín karet (aby vynikly na bílém pozadí) ---- */
.dmp-step,.dmp-tool{box-shadow:0 1px 2px rgba(20,17,24,.04),0 14px 34px -24px rgba(20,17,24,.28)}
.dmp-card{box-shadow:0 1px 2px rgba(20,17,24,.04),0 14px 34px -24px rgba(20,17,24,.24);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.dmp-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(20,17,24,.42)}

/* ---- Materiály ke stažení — tmavé dlaždice (layout v CSS → editor Shoptetu nevytrhne text z odkazu) ---- */
.dmp-dl-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dmp-dl-tile{display:flex;gap:13px;align-items:center;background:rgba(245,241,236,.06);border:1px solid rgba(245,241,236,.12);border-radius:12px;padding:16px 18px;color:inherit;text-decoration:none;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.dmp-dl-tile:hover{transform:translateY(-2px);background:rgba(245,241,236,.1);border-color:rgba(51,179,166,.4)}
.dmp-dl-ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;letter-spacing:.02em}
.dmp-dl-ic.teal{background:rgba(51,179,166,.18);color:#33B3A6}
.dmp-dl-ic.pink{background:rgba(224,0,122,.18);color:#F7C7DF}
.dmp-dl-tx{display:flex;flex-direction:column;min-width:0}
.dmp-dl-tile .t{display:block;font-size:14px;font-weight:700;color:#F5F1EC;line-height:1.2}
.dmp-dl-tile .s{display:block;font-size:12px;color:rgba(245,241,236,.55);margin-top:2px}

/* ---- CTA tlačítka ---- */
.dmp-btn{transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease,color .15s ease}
.dmp-btn-primary:hover{background:var(--pink-dark);color:#fff;transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(200,0,95,.5)}
.dmp-btn-teal:hover{background:#155E56;color:#fff;transform:translateY(-1px)}
.dmp-btn-ghost:hover{border-color:var(--pink);color:var(--pink)}

/* ---- formulář registrace ---- */
.dmp-input{width:100%;border:1.5px solid rgba(20,17,24,.14);border-radius:10px;padding:12px 14px;font-size:14.5px;outline:none;font-family:inherit;background:#fff;color:#141118;transition:border-color .15s ease,box-shadow .15s ease}
.dmp-input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(200,0,95,.13)}

/* ---- poradce tuhosti (interaktivní nástroj) ---- */
.dmp-opt{border:1.5px solid rgba(20,17,24,.14);background:#fff;color:#141118;border-radius:10px;padding:12px 6px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;text-align:center;transition:border-color .15s ease,background .15s ease,color .15s ease,transform .12s ease}
.dmp-opt:hover{border-color:var(--teal);transform:translateY(-1px)}
.dmp-opt.is-active{border-color:var(--teal);background:var(--teal);color:#fff;font-weight:800}
.dmp-adv-panel{transition:background .35s ease}

/* ---- nadpisy bezpatkově (přebíjí Cormorant !important z dreamy.css) ---- */
.dmp-sans h1,.dmp-sans h2,.dmp-sans h3,.dmp-sans h4{
  font-family:'Hanken Grotesk',system-ui,sans-serif !important;
}

/* ---- FAQ garance (details/summary) ---- */
.dmp-faq details{border-bottom:1px solid rgba(20,17,24,.08)}
.dmp-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:20px 0;font-size:16px;font-weight:700;color:#141118;line-height:1.35;gap:16px}
.dmp-faq summary::-webkit-details-marker{display:none}
.dmp-faq summary::after{content:'+';font-size:22px;color:var(--pink);flex-shrink:0;width:28px;text-align:center;font-weight:300;line-height:1}
.dmp-faq details[open] summary::after{content:'\2212'}
.dmp-faq-a{padding:0 0 20px;font-size:15px;line-height:1.65;color:#4A4550}

/* ---- responsivita ---- */
@media (max-width:960px){
  .dmp-g4{grid-template-columns:1fr 1fr}
  .dmp-hero,.dmp-principle,.dmp-reg,.dmp-dl,.dmp-tool{grid-template-columns:1fr}
  .dmp-reg .dmp-reg-media{order:-1}
}
@media (max-width:600px){
  .dm-page{padding:0 18px}
  .dmp-g2,.dmp-g3{grid-template-columns:1fr}
  .dmp-form,.dmp-dl-inner{grid-template-columns:1fr}
  .dmp-dl-tiles{grid-template-columns:1fr}
  .dmp-step{grid-template-columns:56px 1fr;gap:16px}
}