/* ===== View transition ===== */
::view-transition-old(root), ::view-transition-new(root){ animation-duration: 160ms; }

/* ===== CSS Variables ===== */
:root{
  --bg:#ffffff;        /* bílé pozadí */
  --card:#ffffff;      /* panely/karty */
  --ink:#111827;       /* primární text (téměř černý) */
  --muted:#4b5563;     /* sekundární text */
  --brand:#4051ad;     /* hlavní modrá */
  --line:#e7e9f3;      /* jemná linka */
  --ok:#18a05b;        /* pozitivní */
}

/* ========== Reset & Base ========== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ font-size:16px; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "DejaVu Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height:1.55;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }             /* konsolidace */
img[width][height]{ height:auto; width:auto; }
.wrap{ max-width:820px; margin:0 auto; padding:16px 14px 92px; }

/* ========== Header minimal ========== */
.hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0 4px; gap:10px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.2px; text-decoration:none; color:#111;
}
.brand-badge{
  width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; border:1px solid var(--line);
}
.brand-badge img{ width:100%; height:100%; object-fit:contain; }

.hdr-cta{ padding:.58rem .9rem; border:1px solid var(--line); border-radius:10px; font-weight:600; font-size:.95rem; opacity:.9; background:#f9fafe; }
.hdr-cta:hover{ opacity:1; border-color:#cfd6eb; background:#eef3ff; }

/* Lepší sticky varianta headeru (sjednocení s dolní částí) */
.hdr{
  padding:10px 20px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  position:sticky; top:0; z-index:50;
}
.brand-logo{ display:flex; align-items:center; flex:0 0 auto; }
.brand-logo img{ max-height:32px; height:auto; width:auto; object-fit:contain; border-radius:8px; }
@media (max-width:380px){ .brand-logo img{ max-height:28px; } }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.brand-name{ font-weight:700; font-size:18px; color:var(--brand); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub{ font-size:13px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdr-nav{ display:flex; gap:16px; }
.hdr-nav a{ color:#374151; font-size:14.5px; text-decoration:none; transition:color .15s ease; }
.hdr-nav a:hover{ color:var(--brand); }
@media(max-width:700px){ .hdr{flex-direction:column;gap:4px;} .hdr-nav{gap:12px;font-size:14px;} }

/* ========== Hero ========== */
.hero{
  margin:12px 0 18px;
  background:linear-gradient(180deg, #ffffff 0%, #f9fafe 100%);
  border:1px solid var(--line);
  border-radius:16px; padding:18px 14px;
}
.hero h1{ font-size: clamp(22px, 5.8vw, 30px); margin:6px 0 8px; font-weight:800; letter-spacing:.2px; color:var(--brand); }
.hero .lead{ color:var(--muted); font-size:15.5px; }
.hero .note{ margin-top:10px; color:#6b7280; font-size:13.5px; }
.cta-primary{
  display:inline-block; margin-top:14px; padding:.9rem 1.1rem; background:var(--brand); color:#fff;
  border-radius:12px; font-weight:700; box-shadow:0 10px 24px rgba(64,81,173,.28); transition: transform .06s ease, background .2s ease;
}
.cta-primary:hover{ background:#2f3e8c; }
.cta-primary:active{ transform:translateY(1px); }

/* ========== Trust microbar ========== */
.trust{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 8px; color:#374151; font-size:12.8px; list-style:none; padding:0; }
.pill{
  border:1px solid var(--line); border-radius:999px; padding:6px 10px;
  display:inline-flex; align-items:center; gap:8px; background:#f9fafe;
}
.trust .pill{ font-size:.95rem; line-height:1.2; white-space:nowrap; }
.pill span[aria-hidden="true"]{ display:inline-block; transform:translateY(1px); }
@media (max-width:480px){ .pill{ white-space:normal; } }

/* ========== How it works (3 kroky) ========== */
.steps{ margin:18px 0; display:grid; gap:10px; }
.step{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
.step h3{ margin:0 0 4px; font-size:16px; color:var(--brand); }
.step p{ margin:0; color:#374151; font-size:14.5px; }

/* ========== Product focus ========== */
.focus{ margin:18px 0; display:grid; gap:10px; }
.focus .row{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.tag{
  border:1px solid var(--line); border-radius:10px; padding:10px; font-size:14px; color:#1f2937; text-align:center; background:#f9fafe; transition: all .2s ease;
}
.tag.demo-link{ cursor:pointer; display:block; text-decoration:none; color:#1f2937; }
.tag.demo-link:hover,
.tag.demo-link:focus{ background:#eef3ff; border-color:#cfd6eb; color:#4051ad; transform:translateY(-2px); box-shadow:0 4px 10px rgba(64,81,173,.15); }
.tag.demo-link:active{ transform:translateY(0); box-shadow:0 2px 6px rgba(64,81,173,.2); }

/* ========== Conversion block (product card) ========== */
.product-order{ padding:14px 12px 28px; }
.product-card{
  display:grid; grid-template-columns:1fr;
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 6px 20px rgba(16,24,40,.06); max-width:860px; margin:0 auto;
}
.product-media{
  position:relative; aspect-ratio:16/9;
  background: linear-gradient(180deg, #ecebff 0%, #fff 100%);
  border-radius:12px; overflow:hidden;                 /* klíčové */
}
.product-media img{
  width:100%; height:100%; display:block; object-fit:contain; object-position:center;
}
.media-badge{
  position:absolute; top:10px; left:10px; padding:6px 10px; font-size:12px;
  background:rgba(122,55,199,.9); color:#fff; border-radius:999px; backdrop-filter:blur(2px);
}
.product-content{ padding:14px 14px 18px; position:relative; z-index:1; } /* jistota nad mediem */
.product-title{
  margin:6px 0 8px; font-size: clamp(20px, 4.8vw, 28px); line-height:1.15; color:#0407af; letter-spacing:.2px; font-weight:800;
}
.product-desc{ margin:6px 0 12px; color:#3f4a74; font-size:15.5px; }
.product-points{
  margin:10px 0 14px; padding:0; list-style:none; display:grid; grid-template-columns:1fr; gap:8px;
}
.product-points li{ position:relative; padding-left:26px; color:var(--ink); font-size:15px; }
.product-points li::before{ content:"✓"; position:absolute; left:0; top:0; line-height:1; transform:translateY(2px); font-weight:700; color:#7a37c7; }
.product-cta-row{ display:grid; grid-template-columns:1fr; gap:10px; align-items:center; margin:8px 0 6px; }

/* Cena – světle zelený štítek jen pro hodnotu */
.price-wrap{ display:inline-flex; align-items:baseline; gap:6px; }
.price-from{ font-size:14px; color:var(--muted); }
.price{
  font-weight:800; font-size:22px; color:#065f46;
  background:#ecfdf5; border:1px solid #a7f3d0; padding:2px 8px; border-radius:6px;
  transition:background .2s ease,border-color .2s ease,transform .06s ease;
}
.price:hover{ background:#dff9ee; border-color:#86efac; transform:translateY(-1px); }

.btn-primary{
  display:inline-flex; justify-content:center; align-items:center; gap:8px; text-decoration:none;
  background:#7a37c7; color:#fff; border-radius:12px; padding:14px 16px; font-weight:700; font-size:16px;
  box-shadow:0 8px 20px rgba(122,55,199,.22); transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-primary:hover{ box-shadow:0 10px 24px rgba(122,55,199,.28); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0); opacity:.94; }
.trust-note{ margin-top:6px; color:var(--muted); font-size:13.5px; }

/* ========== Proof micro ========== */
.proof{ margin:14px 0; display:grid; gap:10px; }
.proof .card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; color:#1f2937; font-size:14px; }
.proof .small{ color:#6b7280; font-size:12.5px; margin-top:6px; }

/* ========== FAQ compact ========== */
.faq{ margin:16px 0 8px; }
details{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; }
summary{ cursor:pointer; font-weight:700; color:var(--brand); }
details p{ margin:.6em 0 0; color:#374151; font-size:14.5px; }

/* ========== Footer mini ========== */
.ftr{
  margin-top:22px; color:#6b7280; font-size:12.5px;
  border-top:1px solid var(--line); padding-top:14px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
}

/* ========== Samples (mini galerie) ========== */
.mbw-samples{ margin-top:2em; }
.mbw-samples .intro{ text-align:center; max-width:600px; margin:0 auto 1.8em; color:#444; font-size:1rem; }
.sample-card{
  background:#f9f8ff; border-left:4px solid #c8b3f1; border-radius:12px; padding:1em 1.2em; margin-bottom:1em;
  box-shadow:0 2px 6px rgba(80,50,140,0.05); transition: transform .2s ease, box-shadow .2s ease;
}
.sample-card:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(80,50,140,0.1); }
.sample-card h4{ margin-top:.3em; color:#5a2ea6; font-weight:600; }
.sample-emoji{ font-size:1.6em; float:right; opacity:.8; }
.sample-quote{ background:#fff9e9; border-left-color:#f8cd65; }
.sample-quote .quote{ font-style:italic; color:#5b3a9b; }

.samples-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin:12px 0 20px; }
@media (min-width:640px){ .samples-grid{ grid-template-columns: repeat(3, 1fr); } }

.sample-thumb{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:10px; border-radius:16px; background:#fff; box-shadow:0 4px 12px rgba(16, 24, 40, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sample-thumb:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(16, 24, 40, 0.15); }
.sample-thumb img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:contain;
  background:#f9fafe; border-bottom:1px solid #eee; border-radius:10px; padding:6px;
}
.thumb-title{
  font-weight:600; font-size:15.5px; color:#1e1b4b;
  background:#f8f7ff; border-radius:0 0 12px 12px; width:100%; padding:8px 0 10px; text-align:center;
}
@media (max-width:900px){ .samples-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:420px){
  .samples-grid{ grid-template-columns:1fr; }
  .thumb-title{ font-size:14.5px; }
}

/* ========== Typografie úprav pro malé šířky ========== */
.hero h1{ font-size: clamp(20px, 6vw, 26px); line-height:1.2; }
.product-title{ font-size: clamp(18px, 5vw, 24px); }

/* ========== Sticky CTA rezerva (jen mobil) ========== */
@media (max-width:720px){ body.has-sticky-padding{ padding-bottom:88px; } }

/* ========== Obrázky uvnitř karet obecně ========== */
.card img, .product-content img{ height:auto !important; width:100%; object-fit:contain; }

/* ===== Cookie banner ===== */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; background:#f5f6fd; border-top:2px solid #4051ad; padding:17px 8px 14px;
  z-index:2500; box-shadow:0 -4px 18px #2e34792a; font-family:'Segoe UI',Arial,sans-serif; font-size:1.08em; display:none;
}
.cb-wrap{ max-width:700px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.cb-btns{ margin-top:10px; display:flex; gap:12px; }
.cb-btn{ padding:7px 23px; border-radius:8px; border:none; font-weight:600; font-size:1em; cursor:pointer; }
.cb-accept{ background:#4051ad; color:#fff; }
.cb-accept:hover{ background:#233197; }
.cb-decline{ background:#eee; color:#333; border:1.2px solid #cfd5ef; }
.cb-decline:hover{ background:#f7f7fa; }

.highlight { color: var(--brand); font-weight: 600; }

/* ====== RESPONSIVE: Desktop specifika ====== */
@media (min-width:760px){
  .hero{ padding:22px 20px; }
  .order{ padding:18px; }
  .focus .row{ grid-template-columns: repeat(4, 1fr); }
}

@media (min-width:860px){
  .product-card{ grid-template-columns: 46% 1fr; align-items:stretch; }
  .product-media{ aspect-ratio:auto; min-height:100%; }         /* drží výšku levého sloupce */
  .product-media img{
    /* fade doprava – zůstává uvnitř obrázku, nic nepřetéká */
    -webkit-mask-image: linear-gradient(to right, #000 68%, transparent 98%);
    mask-image: linear-gradient(to right, #000 68%, transparent 98%);
  }
  .product-content{ padding:22px 22px; }
  .product-points{ grid-template-columns:1fr 1fr; }
  .product-cta-row{ grid-template-columns:auto 1fr; gap:14px; }
  .price{ font-size:24px; }
}

/* ========== Processing overlay (pro 3–4s pauzu) ========== */
.overlay{ position:fixed; inset:0; background:rgba(17,24,39,.55); display:none; z-index:60; backdrop-filter: blur(2px); }
.overlay.show{ display:grid; place-items:center; }
.spinner{ width:64px; height:64px; border-radius:50%; border:4px solid rgba(17,24,39,.15); border-top-color:#4051ad; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.overlay-txt{ margin-top:12px; color:#111827; font-weight:700; text-align:center; background:#ffffff; padding:10px 12px; border-radius:10px; border:1px solid var(--line); }

/* Zrušení fade masky a případného overlaye */
@media (min-width: 860px){
  .product-media img{
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}
/* Kdyby někde zůstal fialový ::after overlay, úplně ho vypneme */
.product-media::after{ content: none !important; }
/* Mini popis pod benefity */
.benefit .mini{
  margin:.4em 0 0;
  color:#6b7280;
  font-size:12.8px;
}