:root {
  --m-text: var(--ht-navy);
  --m-tlumeny: #5f727c;        
  --m-tlumeny-tma: #a3b8c0;    
  --m-mlha: #f4f7f7;
  --m-tma: radial-gradient(70% 80% at 50% 0%, rgba(var(--ht-laguna-rgb), 0.32), transparent 70%), linear-gradient(180deg, var(--ht-navy-2) 0%, var(--ht-navy) 55%, #08232e 100%);
}

.m-display { margin: 0; font-family: var(--ht-f-head); font-weight: 700; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; color: inherit; }
.m-display em { font-style: italic; color: var(--ht-laguna); }
.m-na-tme .m-display em, .m-na-tme .m-velke em { color: var(--ht-glow); }
.m-eyebrow { margin: 0; font-family: var(--ht-f-head); font-size: 0.82em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ht-laguna-ink); }
.m-na-tme .m-eyebrow { color: var(--ht-glow); }
.m-lead { margin: 0; color: var(--m-tlumeny); line-height: 1.45; text-wrap: balance; }
.m-na-tme .m-lead { color: var(--m-tlumeny-tma); }
.m-velke { margin: 0; font-family: var(--ht-f-head); font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.m-velke small { font-size: 0.42em; font-weight: 700; letter-spacing: -0.02em; color: var(--ht-laguna); margin-left: 0.08em; }
.m-na-tme .m-velke small { color: var(--ht-laguna-tma); }
.m-pozn { margin: 0; font-size: 0.8em; color: var(--m-tlumeny); }
.m-na-tme .m-pozn { color: var(--m-tlumeny-tma); }

.m-znak { position: relative; display: grid; place-items: center; }
.m-znak::before { content: ""; position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--ht-laguna-rgb), 0.3) 0%, rgba(var(--ht-glow-rgb), 0.12) 38%, transparent 66%); }
.m-znak img { position: relative; display: block; width: 100%; height: auto; }

.ks { width: min(100%, 25em); padding: 1.35em 1.45em 1.45em; border-radius: 1.35em; background: var(--ht-white); color: var(--ht-navy); text-align: left;
  display: grid; gap: 0.75em; box-shadow: 0 2.4em 4.5em -1.6em rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); }
.ks__hlava { display: flex; justify-content: space-between; align-items: center; gap: 1em; font-size: 0.74em; color: var(--ht-slate); }
.ks__agent { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 600; color: var(--ht-laguna-ink); }
.ks__agent i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--ht-laguna); box-shadow: 0 0 0 0.32em rgba(var(--ht-laguna-rgb), 0.18); }
.ks__titul { margin: 0; font-family: var(--ht-f-head); font-weight: 700; font-size: 1.3em; line-height: 1.18; letter-spacing: -0.015em; }
.ks__detail { margin: 0; font-size: 0.82em; color: var(--ht-slate); }
.ks__akce { display: flex; gap: 0.5em; margin-top: 0.25em; }
.ks__akce span { padding: 0.62em 1.15em; border-radius: 999px; border: 1px solid var(--ht-line); font-weight: 600; font-size: 0.82em; }
.ks__akce span:first-child { background: var(--ht-navy); border-color: var(--ht-navy); color: var(--ht-white); }

.m-kroky { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4em; text-align: left; }
.m-kroky li { display: grid; gap: 0.35em; align-content: start; min-width: 0; }
.m-cislo { font-family: var(--ht-f-head); font-weight: 800; font-size: 3.2em; line-height: 1; letter-spacing: -0.04em; color: var(--ht-laguna); }
.m-kroky h3 { margin: 0.15em 0 0; font-family: var(--ht-f-head); font-weight: 700; font-size: 1.45em; letter-spacing: -0.015em; }
.m-kroky p { margin: 0; color: var(--m-tlumeny); line-height: 1.45; }

@media (prefers-reduced-motion: no-preference) {
  .m-znak::before { animation: m-dech 7s ease-in-out infinite; }
  @keyframes m-dech { 0%, 100% { opacity: 0.75; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
}