/* ==========================================================================
   HALALI – sjednání pojištění
   Hlavní stylopis. Hodnoty vycházejí z návrhu v Claude Design
   (HALALI sjednání pojištění.dc.html).
   ========================================================================== */

/* --- Proměnné ------------------------------------------------------------ */
:root {
  --c-green: #003F38;
  --c-green-hover: #00564C;
  --c-ink: #001A17;
  --c-yellow: #FBCE3C;
  --c-yellow-hover: #FFD861;
  --c-yellow-border: #E0B62E;
  --c-mint: #BFE8D2;
  --c-mint-soft: #E8F4EC;
  --c-mint-muted: #A9C9BA;
  --c-cream: #F9F4EE; /* HALALI Light Champagne 50 (--colors-light-champagne-50 na halali.cz) */
  --c-sand: #E4DCCE;
  --c-sand-2: #C9BEA9;
  --c-sand-3: #EFE6D8;
  --c-slate: #4A5A54;
  --c-contact: #E7F1EC;
  --c-box-border: #B6AE9E;

  --container: 1320px;
  --transition: 140ms ease;

  /* Nexa má obsahovou oblast 0,70 em nad a 0,30 em pod účařím a verzálky
     sahají až k hornímu okraji, takže text v boxu sedí opticky výš.
     O tuto hodnotu posouváme text v tlačítkách dolů (padding nahoře +, dole -). */
  --nexa-shift: 0.12em;
  --underline-h: 1px;
}

/* --- Základ --------------------------------------------------------------- */
/* Font Nexa (fonts.cdnfonts.com) poskytuje řezy 300 a 700; ostatní váhy
   prohlížeč mapuje na tyto dva, stejně jako v náhledu návrhu. */
html, body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
}

html {
  scroll-behavior: smooth;
}

/* --- Plynulý scroll (Lenis, assets/js/smooth-scroll.js) ------------------ */
/* Doporučené třídy Lenisu. S aktivním Lenisem se nativní scroll-behavior
   vypíná, plynulost dělá Lenis (kotvy obsluhuje smooth-scroll.js). */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Nexa', Arial, Helvetica, sans-serif;
  color: var(--c-ink);
  background: #FFFFFF;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a {
  color: var(--c-mint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--c-yellow);
}

button {
  font: inherit;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--c-yellow);
  color: var(--c-ink);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Odkazy: animované podtržení ------------------------------------------ */
/* Podtržení je gradient na pozadí (background-size × background-position).
   Trvale podtržené odkazy na hover "odjedou" doprava a najedou zleva,
   nepodtržené odkazy si linku na hover vykreslí zleva. */
@keyframes link-underline-swipe {
  0%   { background-size: 100% var(--underline-h); background-position: 100% 100%; }
  45%  { background-size: 0 var(--underline-h);    background-position: 100% 100%; }
  55%  { background-size: 0 var(--underline-h);    background-position: 0 100%; }
  100% { background-size: 100% var(--underline-h); background-position: 0 100%; }
}

.u-line,
.u-line-grow {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
}

.u-line {
  background-size: 100% var(--underline-h);
}

.u-line:hover {
  animation: link-underline-swipe 0.6s ease-in-out;
}

.u-line-grow {
  background-size: 0 var(--underline-h);
  transition: color var(--transition), background-size 260ms ease;
}

.u-line-grow:hover {
  background-size: 100% var(--underline-h);
}

/* --- Tlačítka ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.btn--primary {
  border-radius: 14px;
  padding: calc(11px + var(--nexa-shift)) 30px calc(11px - var(--nexa-shift));
  background: var(--c-yellow);
  color: var(--c-ink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

.btn--primary:hover {
  background: var(--c-yellow-hover);
  color: var(--c-ink);
}

.btn--outline {
  justify-self: start;
  border: 1.5px solid var(--c-green);
  border-radius: 14px;
  padding: calc(15px + var(--nexa-shift)) 32px calc(15px - var(--nexa-shift));
  font-size: 17px;
  font-weight: 700;
  color: var(--c-green);
}

.btn--outline:hover {
  background: var(--c-green);
  color: #FFFFFF;
}

/* Tmavé tlačítko = halali.cz .btn-md.btn-primary (50 px, 16 px tučně,
   padding 14/24/10, radius 8 px, rámeček 1 px #BFE8D2, hover #077E71). */
.btn--dark {
  justify-content: center;
  width: 100%;
  max-width: 480px;
  height: 50px;
  padding: 14px 24px 10px;
  border: 1px solid var(--c-mint);
  border-radius: 8px;
  background: var(--c-green);
  color: #FFFFFF;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-align: center;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn--dark:hover {
  background: #077E71;
  border-color: var(--c-mint);
  color: #FFFFFF;
}

/* --- Hero + hlavička ------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--c-green);
  color: #FFFFFF;
  padding: 0;
}

/* Hlavička: rozměry převzaté z navigace na halali.cz
   (lišta 72 px = 15 px + řádek 42 px + 15 px, logo 36 px, navigace 16 px
   s mezerou 32 px, akce vpravo s mezerou 24 px, tlačítko 42 px). */
.topbar {
  position: relative;
  z-index: 1;
  min-height: 72px;
  padding: 15px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.topbar__brand {
  display: block;
  text-decoration: none;
}

/* Na desktopu větší než 36 px z halali.cz (připomínka HALALI: logo bylo malé),
   do 900 px zůstává 36 px. */
.topbar__logo {
  height: 52px;
  width: auto;
  display: block;
}

.topbar__nav {
  flex: 1 1 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 32px;
}

.topbar__nav a {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: #FFFFFF;
  padding-bottom: 2px;
}

/* Jako na halali.cz: text zůstává bílý, objeví se bílá 1px linka. */
.topbar__nav a:hover {
  color: #FFFFFF;
}

/* Obal navigace + žlutého tlačítka: na desktopu se rozpouští do flexu lišty
   (display: contents), do 900 px je z něj rozbalovací menu pod lištou
   (pravidla v responzivní sekci na konci). */
.topbar__menu,
.topbar__menu-inner {
  display: contents;
}

/* Burger: jen do 900 px (viz responzivní sekce), tři linky se přepnou na X. */
.topbar__burger {
  display: none;
  width: 44px;
  height: 42px;
  margin-left: -10px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}

.topbar__burger:focus-visible {
  outline: 2px solid var(--c-yellow);
  outline-offset: 2px;
}

.topbar__burger-box {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
  margin: 0 auto;
  transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Při otevření se celý znak pootočí, linky se zároveň složí do X. */
.topbar__burger[aria-expanded="true"] .topbar__burger-box {
  transform: rotate(90deg);
}

.topbar__burger-box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 220ms ease, top 220ms ease, opacity 160ms ease;
}

.topbar__burger-box span:nth-child(1) { top: 0; }
.topbar__burger-box span:nth-child(2) { top: 8px; }
.topbar__burger-box span:nth-child(3) { top: 16px; }

.topbar__burger[aria-expanded="true"] .topbar__burger-box span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.topbar__burger[aria-expanded="true"] .topbar__burger-box span:nth-child(2) { opacity: 0; }
.topbar__burger[aria-expanded="true"] .topbar__burger-box span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* Tlačítko v hlavičce = halali.cz .btn-sm.btn-secondary */
.topbar .btn--primary {
  height: 42px;
  padding: 12px 16px 8px;
  border: 1px solid #261F06;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #090909;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.topbar .btn--primary:hover {
  background: #F5EAC5;
  border-color: #7A620A;
  color: #090909;
}

/* Telefon = halali.cz .halali-navbar__phone (ikona 24 px + odkaz 14 px tučně,
   1px žlutá linka). Linka je kreslená gradientem, aby fungoval hover efekt. */
.topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition);
}

.topbar__phone-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.topbar__phone span {
  --underline-h: 1px;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--c-yellow), var(--c-yellow));
  background-repeat: no-repeat;
  background-size: 100% var(--underline-h);
  background-position: 0 100%;
}

.topbar__phone:hover {
  color: #FFFFFF;
}

.topbar__phone:hover span {
  animation: link-underline-swipe 0.6s ease-in-out;
}

/* Na desktopu je nadpis s podtitulem, svislá linka a logo Celní správy
   jako jedna skupina uprostřed (připomínka HALALI: logo úplně vpravo nebylo
   kompozičně navázané na nadpis). Do 640 px pod sebou na střed. */
.hero__intro {
  position: relative;
  padding-top: clamp(72px, 6.4vw, 104px);
  margin: 0 0 clamp(52px, 5.6vw, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3.2vw, 48px);
}

/* Šířka textu je daná nadpisem (dva řádky, 12,5 em), aby mezi textem
   a linkou nezůstávala prázdná plocha a skupina byla opravdu uprostřed. */
.hero__text {
  text-align: left;
}

.hero__title {
  max-width: 12.5em;
  margin: 0 0 12px;
  font-size: clamp(29px, 3.8vw, 46px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}

.hero__subtitle {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.45;
  font-weight: 600;
  color: var(--c-yellow);
}

.hero__partner {
  flex: none;
  display: grid;
  justify-items: start;
  gap: 10px;
  padding-left: clamp(28px, 3.2vw, 48px);
  border-left: 1px solid rgba(191, 232, 210, 0.3);
}

.hero__partner-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mint);
}

.hero__partner-logo {
  display: inline-flex;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 12px 18px;
}

.hero__partner-logo img {
  height: 44px;
  width: auto;
  display: block;
}

/* --- Nabídka: výběr práce + varianty -------------------------------------- */
/* Záporný horní okraj 1 px: hero končí na zlomku pixelu (výšky z vw) a bez
   překryvu by mezi dvěma zelenými sekcemi prosvítala světlá linka pozadí. */
.offer {
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  background: var(--c-green);
  color: #FFFFFF;
  padding: 0 0 clamp(38px, 4.6vw, 72px);
}

.jobs {
  position: relative;
  z-index: 1;
  scroll-margin-top: 32px;
  text-align: center;
  margin-bottom: clamp(32px, 3.4vw, 48px);
}

/* Otázka nad přepínačem je hlavní výzva sekce: krátká žlutá linka jako
   zvýraznění a pod ní velký tučný bílý nadpis. */
.jobs__title {
  margin: 0 0 clamp(14px, 1.4vw, 18px);
  font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.jobs__title::before {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--c-yellow);
}

/* Malý štítek „– Vyberte povolání –“ mezi nadpisem a přepínačem (připomínka
   HALALI: instrukce patří před panel s povoláními, volba povolání je první
   krok a řídí ceny v kartách): prostrkané verzálky s linkami po stranách;
   celek jemně dýchá (opacita) a linky se v rytmu natahují směrem od textu.
   Text má Nexa posun jako tlačítka. */
.jobs__hint {
  margin: 0 0 clamp(18px, 1.8vw, 24px);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mint-muted);
}

.jobs__hint-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  animation: jobs-hint-breathe 2.8s ease-in-out infinite;
}

.jobs__hint-text {
  padding-top: calc(2 * var(--nexa-shift));
}

.jobs__hint-inner::before,
.jobs__hint-inner::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  animation: jobs-hint-lines 2.8s ease-in-out infinite;
}

.jobs__hint-inner::before {
  transform-origin: right center;
}

.jobs__hint-inner::after {
  transform-origin: left center;
}

@keyframes jobs-hint-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@keyframes jobs-hint-lines {
  0%, 100% { transform: scaleX(0.5); }
  50%      { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .jobs__hint-inner,
  .jobs__hint-inner::before,
  .jobs__hint-inner::after {
    animation: none;
  }
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  background: var(--c-mint);
  border-radius: 999px;
  padding: 6px;
}

.segmented__btn {
  display: flex;
  align-items: center;
  border: none;
  border-radius: 999px;
  padding: calc(2 * var(--nexa-shift)) 26px 0;
  height: 48px;
  cursor: pointer;
  font-size: 16.5px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-weight: 400;
  background-color: transparent;
  color: var(--c-green);
  transition: background-color var(--transition), color var(--transition);
}

.segmented__btn[aria-checked="true"] {
  font-weight: 700;
  background-color: var(--c-green);
  color: #FFFFFF;
}

.segmented__btn:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

/* Dekorativní smyčka za kartami: jediná, vpravo dole, stejně jako
   .tabs-section__swirl na úvodní stránce halali.cz (tvar ze smycka01.svg od
   Sunworks, výplň #BFE8D2 s krytím 50 %, přesahuje pravý okraj a končí na
   spodní hraně sekce). */
.offer__swoosh {
  position: absolute;
  right: -80px;
  bottom: -2px;
  width: min(430px, 34%);
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* Na užších oknech by konec smyčky vjel do textu pod kartami, proto víc
   přes pravý okraj. */
@media (max-width: 1279px) {
  .offer__swoosh {
    right: -180px;
  }
}

.plans {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* do 900 px carousel, viz responzivní blok */
  gap: 16px;
  align-items: start;
}

/* Text pod kartami: oba odstavce stejnou velikostí a barvou (připomínka
   HALALI: sjednotit typografii). */
.offer__note {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: clamp(30px, 3.4vw, 46px) auto 0;
  text-align: center;
  display: grid;
  gap: 10px;
}

.offer__note p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-mint-soft);
}

/* Tečky nad carouselem karet (vytváří JS před .plans, zobrazují se jen
   do 900 px). Tlačítko má hmatovou plochu 28 px, viditelná tečka je
   ::before; aktivní tečka se protáhne a zežloutne. */
.plans-dots {
  position: relative;
  z-index: 1;
  display: none;
  justify-content: center;
  gap: 4px;
  margin-bottom: 14px;
}

.plans-dots__dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: width 220ms ease;
}

.plans-dots__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  transition: width 220ms ease, background-color 220ms ease;
}

.plans-dots__dot.is-active {
  width: 40px;
}

.plans-dots__dot.is-active::before {
  width: 20px;
  background: var(--c-yellow);
}

.plans-dots__dot:focus-visible {
  outline: 2px solid var(--c-yellow);
  outline-offset: -4px;
  border-radius: 999px;
}

/* --- Efekty při změně typu práce ----------------------------------------- */
/* 1) Jezdec přepínače: tmavá pilulka klouže pod vybranou volbu s lehkým
      přestřelením. Bez JS (bez jezdce) má vybraná volba zelené pozadí. */
.segmented {
  position: relative;
}

.segmented__thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 999px;
  background: var(--c-green);
  pointer-events: none;
  transition: transform 480ms cubic-bezier(0.34, 1.35, 0.64, 1), width 480ms cubic-bezier(0.34, 1.35, 0.64, 1);
}

.segmented__thumb.is-static {
  transition: none;
}

.segmented.has-thumb .segmented__btn {
  position: relative;
  z-index: 1;
  transition: color 220ms ease;
}

.segmented.has-thumb .segmented__btn[aria-checked="true"] {
  background-color: transparent;
}

/* Hover na nezvolenou volbu: jemná pilulka, tmavší text; jezdec se přitom
   z JS lehce natáhne směrem k volbě pod kurzorem. */
@media (hover: hover) {
  .segmented__btn:not([aria-checked="true"]):hover {
    background-color: rgba(0, 63, 56, 0.12);
    color: var(--c-green);
  }
}

/* 2) Počítadlo ceny: číslice ve svislých pásech, které se protočí.
      Číslice jsou v pásu rozestoupené po --odo-step (1,4 em) a každá má
      nahoře odsazení --odo-pad (0,2 em); okno pásu je vysoké --odo-step,
      takže nad i pod viditelnou číslicí zůstává rezerva 0,2 em. Nula v Nexa
      Bold totiž sahá 0,12 em nad výšku verzálek i pod účaří a Safari navíc
      usazuje písmo v řádku výš než Chrome. Záporné okraje drží číslici na
      stejné účaři jako „Kč“. JS nastavuje jen --odo-index. */
.odo {
  --odo-step: 1.4em;
  --odo-pad: 0.2em;
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
}

.odo__slot {
  display: block;
  overflow: hidden;
  height: var(--odo-step);
  margin-top: calc(-1 * var(--odo-pad));
  margin-bottom: calc(-1 * var(--odo-pad));
  max-width: 1em;
  transition: max-width 350ms ease, opacity 350ms ease;
}

.odo__sep {
  display: block;
  overflow: hidden;
  height: 1em;
  max-width: 1em;
  transition: max-width 350ms ease, opacity 350ms ease;
}

.odo__slot.is-collapsed,
.odo__sep.is-collapsed {
  max-width: 0;
  opacity: 0;
}

.odo__strip {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--odo-index, 0) * -1 * var(--odo-step)));
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.odo__digit {
  display: block;
  box-sizing: border-box;
  height: var(--odo-step);
  padding-top: var(--odo-pad);
  line-height: 1;
  text-align: center;
}

/* 3) Žlutý sweep pod cenou, která se právě změnila (.odo-price přidává
      odometer.js každému počítadlu; platí pro karty i souhrn ve formuláři). */
@keyframes price-sweep {
  0%   { background-size: 0 3px;    background-position: 0 100%; }
  45%  { background-size: 100% 3px; background-position: 0 100%; }
  55%  { background-size: 100% 3px; background-position: 100% 100%; }
  100% { background-size: 0 3px;    background-position: 100% 100%; }
}

.plan__amount,
.odo-price {
  padding-bottom: 6px;
  background-image: linear-gradient(var(--c-yellow), var(--c-yellow));
  background-repeat: no-repeat;
  background-size: 0 3px;
  background-position: 0 100%;
}

.odo-price.is-changing {
  animation: price-sweep 850ms ease-in-out;
}

/* 4) Karty po změně typu práce jedna po druhé lehce poskočí. Přes vlastnost
   translate (ne transform), aby se skládalo s 3D natočením karet v mobilním
   carouselu, které používá transform. */
@keyframes plan-lift {
  0%   { translate: 0 0; }
  35%  { translate: 0 -10px; }
  100% { translate: 0 0; }
}

.plans.is-refresh .plan {
  animation: plan-lift 650ms cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* --- Karta varianty ------------------------------------------------------- */
/* Krajní karty bílé, prostřední (doporučená) #FAF4ED bez žlutého rámečku,
   zvýrazněná štítkem „Nejčastější volba“. Karta začíná štítky a cenou, limit
   pojistného plnění je první položkou seznamu „Co je v ceně“. */
.plan {
  position: relative;
  cursor: pointer;
  background: #FFFFFF;
  color: var(--c-ink);
  border-radius: 28px;
  padding: clamp(32px, 3.2vw, 46px) clamp(26px, 2.6vw, 38px) clamp(30px, 3vw, 42px);
  display: grid;
  gap: 0;
  align-content: start;
}

.plan--recommended {
  background: #FAF4ED;
}

/* Sleva (20 % na pojištění zbraně) platí jen se zaškrtnutou zbraní: bez ní
   JS štítku „Sleva 20 %“ i přeškrtnuté ceně přidá třídu .is-off a oba se
   prolnou do ztracena (místo zůstává vyhrazené, karty nemění výšku).
   Přechody se zapnou až po prvním vykreslení (.plans.is-animated), aby
   výchozí stav naskočil bez animace; visibility se mění až po dojetí.
   Při prefers-reduced-motion je globální pravidlo v app.css zkrátí na 0,01 ms. */
.plans.is-animated .plan__sale,
.plans.is-animated .plan__price-old {
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1.35), visibility 0s;
}

.plans.is-animated .plan__sale.is-off,
.plans.is-animated .plan__price-old.is-off {
  transition: opacity 160ms ease, transform 180ms ease-in, visibility 0s 180ms;
}

.plan__sale.is-off,
.plan__price-old.is-off {
  opacity: 0;
  visibility: hidden;
}

.plan__sale.is-off {
  transform: scale(0.85);
}

@media (min-width: 901px) {
  .plan--recommended {
    box-shadow: 0 28px 48px -28px rgba(0, 26, 23, 0.45);
  }
}

.plan:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
}

/* Štítky nad cenou podle .pricing-card__tag z halali.cz (12 px tučně,
   odsazení 8 px, zaoblení 8 px, bez verzálek): žlutý „Sleva 20 %“ na všech
   kartách a u prostřední navíc světle zelený „Nejčastější volba“. Řádek má
   pevnou výšku, aby karty lícovaly i se skrytým štítkem slevy. */
.plan__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-bottom: 22px;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: calc(8px + var(--nexa-shift)) 10px calc(8px - var(--nexa-shift));
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  color: var(--c-ink);
  white-space: nowrap;
}

.badge--rec {
  background: #B4EAD0;
}

.badge--sale {
  background: var(--c-yellow);
}

.plan__pricing {
  margin-bottom: 34px;
  display: grid;
  row-gap: 8px;
}

/* Cena po slevě, „/rok“ a hned za nimi přeškrtnutá běžná cena (ceníková
   cena odpovědnosti + zbraně) jako jeden celek. */
/* Cena s „/rok“ je nedělitelný celek (.plan__price-main); když se vedle
   ní přeškrtnutá cena nevejde (úzké karty na mobilu), zalomí se pod ni bez
   odsazení (mezera je column-gap, ne margin). */
.plan__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.plan__price-main {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.plan__price-old {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--c-slate);
  white-space: nowrap;
  text-decoration-thickness: 1.5px;
}

.plan__amount {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-green);
  line-height: 1;
}

.plan__per {
  font-size: 15px;
  font-weight: 400;
  color: var(--c-slate);
}

.plan__price-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--c-slate);
  visibility: hidden;
}

.plan.has-weapon .plan__price-note {
  visibility: visible;
}

.plan__weapon {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  margin-bottom: 34px;
}

.plan__weapon-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.checkbox {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--c-box-border);
  background-color: transparent;
  color: #FFFFFF;
  transition: background-color var(--transition), border-color var(--transition);
}

.checkbox svg {
  opacity: 0;
}

.plan.has-weapon .checkbox {
  background-color: var(--c-green);
  border-color: var(--c-green);
}

.plan.has-weapon .checkbox svg {
  opacity: 1;
}

.plan__weapon-input:focus-visible + .checkbox {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

.plan__weapon-text {
  display: grid;
  gap: 5px;
}

.plan__weapon-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-green);
}

.plan__weapon-desc {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--c-slate);
}

.plan__weapon-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.plan__weapon-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-green);
}

/* Přeškrtnutá ceníková cena zbraně vedle ceny po slevě (sleva je jen na zbraň). */
.plan__weapon-old {
  margin-left: 6px;
  font-weight: 400;
  color: var(--c-slate);
}

.plan__weapon-monthly {
  font-size: 13px;
  color: var(--c-slate);
}

.plan__includes {
  border-top: 1px solid var(--c-sand);
  padding-top: 30px;
  margin-bottom: 34px;
}

.plan__includes-title {
  margin: 0 0 22px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-green);
}

.plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.plan__list li {
  display: flex;
  gap: 13px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--c-ink);
}

.plan__icon {
  flex: none;
  margin-top: 1px;
}

.plan__icon svg {
  display: block;
}

/* Položka pojištění zbraně je v seznamu vždy; bez zaškrtnutí je neaktivní:
   šedá, zesvětlená, s prázdnou ikonou. */
.plan__list-item--weapon {
  font-weight: 700;
  color: var(--c-green);
  transition: color var(--transition), opacity var(--transition);
}

.plan__list-item--weapon svg circle,
.plan__list-item--weapon svg path {
  transition: fill var(--transition), stroke var(--transition);
}

.plan:not(.has-weapon) .plan__list-item--weapon {
  font-weight: 400;
  color: var(--c-slate);
  opacity: 0.65;
}

.plan:not(.has-weapon) .plan__list-item--weapon svg circle {
  fill: transparent;
  stroke: var(--c-box-border);
  stroke-width: 1.2;
  r: 8.6;
}

.plan:not(.has-weapon) .plan__list-item--weapon svg path {
  stroke: transparent;
}

/* Tlačítko „Spočítat online“ = žluté .btn-secondary z halali.cz (rámeček
   1 px #261F06, radius 8 px, hover #F5EAC5 s rámečkem #7A620A, stisk
   #F2D989) ve velikosti .btn-md (50 px, 16 px, padding 14/24/10), na všech
   kartách stejné: žlutá označuje hlavní konverzní akci. */
.plan__cta {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px 10px;
  border: 1px solid #261F06;
  border-radius: 8px;
  background-color: var(--c-yellow);
  color: #090909;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.plan__cta:hover {
  background-color: #F5EAC5;
  border-color: #7A620A;
  color: #090909;
}

.plan__cta:active {
  background-color: #F2D989;
  border-color: #261F06;
}


/* --- Proč se pojistit ----------------------------------------------------- */
.why {
  scroll-margin-top: 24px;
  background: #FFFFFF;
  padding: clamp(56px, 6.4vw, 104px) 0 clamp(48px, 5.4vw, 88px);
}

.why__title {
  margin: 0 0 clamp(32px, 3.6vw, 52px);
  max-width: 720px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-green);
}

/* Karta i fotografie jsou přímé položky mřížky a natahují se na stejnou
   výšku; výšku řádku určuje karta (fotografie nemá na desktopu min-height,
   obrázek je v ní absolutně). Tlačítko je pod mřížkou, vycentrované pod
   oběma panely. */
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 2.8vw, 44px);
  align-items: stretch;
}

.why__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3vw, 44px);
}

.why__card {
  position: relative;
  overflow: hidden;
  background: var(--c-cream);
  border-radius: 24px;
  padding: clamp(34px, 3.6vw, 56px) clamp(26px, 3vw, 46px);
}

.why__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--c-green);
}

.why__features {
  display: grid;
  gap: clamp(34px, 3.8vw, 56px);
}

.feature {
  display: flex;
  gap: clamp(18px, 2vw, 30px);
  align-items: flex-start;
}

/* Ikony 40 px z halali.cz (box „S Halali víte, jaké pojištění si sjednáváte“);
   třetí ikona je vlastní SVG, vnitřní padding ji opticky srovná s jejich kresbou. */
.feature__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: block;
}

.feature__icon--inline {
  padding: 4px;
}

.feature__body {
  display: grid;
  gap: 8px;
}

.feature h3 {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-green);
}

.feature p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
}

/* Fotografie: Freepik premium, autor alexandrgrant („The guy puts the gun in the
   holster close-up“), staženo přes účet Sunworks. */
.why__photo {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--c-cream);
}

.why__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Časté dotazy --------------------------------------------------------- */
.faq {
  background: var(--c-cream);
  color: var(--c-green);
  scroll-margin-top: 24px;
  padding: clamp(48px, 6vw, 92px) clamp(24px, 3vw, 52px) clamp(52px, 6vw, 96px);
}

.faq__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.faq__title {
  margin: 0 0 20px;
  text-align: center;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-green);
}

.faq__lead {
  margin: 0 auto clamp(30px, 3.4vw, 44px);
  max-width: 720px;
  text-align: center;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.5;
  color: var(--c-green);
}

.faq__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(26px, 3vw, 38px);
}

.faq__tab {
  border-radius: 999px;
  padding: calc(7px + var(--nexa-shift)) 24px calc(7px - var(--nexa-shift));
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 2px solid var(--c-green);
  font-weight: 400;
  background-color: #FFFFFF;
  color: var(--c-green);
  transition: background-color var(--transition), color var(--transition);
}

.faq__tab[aria-selected="true"] {
  font-weight: 700;
  background-color: var(--c-green);
  color: #FFFFFF;
}

.faq__tab:hover {
  background-color: var(--c-green);
  color: #FFFFFF;
}

.faq__panel {
  display: grid;
  gap: 16px;
}

.faq__item {
  background: #FFFFFF;
  border: 1px solid var(--c-sand-3);
  border-radius: 24px;
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: none;
  padding: clamp(24px, 2.6vw, 34px) clamp(24px, 3vw, 40px);
  cursor: pointer;
  text-align: left;
  color: inherit;
  border-radius: 24px;
}

.faq__question:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

.faq__q {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-green);
}

/* Znaménko +/−: dvě linky, svislá se při otevření sklopí do vodorovné. */
.faq__sign {
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  color: var(--c-green);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 2.5px;
  margin-top: -1.25px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 320ms ease;
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq__item.is-open .faq__sign::after {
  transform: rotate(0deg);
}

/* Odpověď: výška se animuje přes grid-template-rows 0fr → 1fr. */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 320ms ease, visibility 0s linear 320ms;
}

.faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq__answer-body {
  padding: 0 clamp(24px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 320ms ease, visibility 0s;
}

.faq__item.is-open .faq__answer-body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 80ms;
}

.faq__answer p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-slate);
}

/* Odkazy v odpovědích (pojistné podmínky, hlášení škody, e-mail): sekce má
   smetanové pozadí, globální mátová barva odkazů by na něm nebyla vidět. */
.faq__answer a {
  color: var(--c-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq__answer a:hover {
  color: var(--c-green-hover);
}

/* --- Kontakt -------------------------------------------------------------- */
/* Rozměry, typografie i barvy (pozadí #EDF3F4, smyčka #7ECBA8 s krytím 20 %)
   převzaté z boxu „Stále něco hledáte?“ na halali.cz. Místo tlačítka na
   kontakty HALALI je vizitka zprostředkovatele, jediný kontakt na webu. */
.contact {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 24px;
  background: #EDF3F4;
  padding: 72px 24px 104px;
}

/* Dekorativní smyčka: stejné SVG a pozicování jako box „Stále něco hledáte?“
   na halali.cz (1440 px široká, 16 px od horního okraje, na užších oknech
   posunutá doleva, na mobilu otočená). */
.contact__loop {
  position: absolute;
  left: 0;
  top: 16px;
  width: 1440px;
  height: auto;
  pointer-events: none;
}

@media (max-width: 1279px) {
  .contact__loop { left: -200px; }
}

@media (max-width: 991px) {
  .contact__loop { left: -300px; }
}

@media (max-width: 767px) {
  .contact__loop { left: -400px; }
}

@media (max-width: 575px) {
  .contact__loop {
    left: -200px;
    top: 40px;
    width: 200%;
    transform: rotate(-44deg);
  }
}

.contact__inner {
  position: relative;
  max-width: 512px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact__title {
  margin: 0 0 16px;
  font-size: 39px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--c-green);
}

/* Jen úvodní odstavec sekce (> p), aby pravidlo nepřebíjelo odstavce ve vizitce. */
.contact__inner > p {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: #181818;
}

/* Vizitka zprostředkovatele (údaje v kernel/const.php) na šířku textu sekce
   (512 px, radius 8 px jako tlačítka halali.cz): vlevo jméno a funkce (bez
   štítku, nadpis sekce stačí), vpravo telefon a e-mail jako odkazy. Do 575 px
   pod sebou. */
.contact__card {
  width: 100%;
  max-width: 512px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 20px 24px;
  border-radius: 8px;
  background: #FFFFFF;
  text-align: left;
}

.contact__card-name {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--c-green);
}

.contact__card-job {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-slate);
}

.contact__card-links {
  display: grid;
  gap: 10px;
}

.contact__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--c-green);
  text-decoration: none;
  white-space: nowrap;
}

.contact__card-link:hover {
  color: var(--c-green);
}

.contact__card-link:hover .u-line {
  animation: link-underline-swipe 0.6s ease-in-out;
}

.contact__card-link .u-line {
  padding-bottom: 2px;
}

.contact__card-icon {
  flex: none;
}

/* --- Patička -------------------------------------------------------------- */
.footer {
  background: var(--c-green);
  color: #FFFFFF;
}

.footer__top {
  padding-top: clamp(40px, 4.4vw, 64px);
  padding-bottom: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 28px;
  align-items: start;
}

/* Logo, claim a sociální sítě jako v patičce halali.cz (claim 13 px / 1,6,
   ikony 32 px s mezerou 12 px, mezi bloky 24 px). */
.footer__brand {
  display: grid;
  justify-items: start;
  gap: 24px;
}

.footer__logo {
  height: 34px;
  width: auto;
  display: block;
}

.footer__brand p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #F8F8F8;
  max-width: 300px;
}

.footer__social {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__social a {
  display: block;
  border-radius: 6px;
  transition: opacity var(--transition);
}

.footer__social a:hover {
  opacity: 0.7;
}

.footer__social a:focus-visible {
  outline: 2px solid var(--c-yellow);
  outline-offset: 2px;
}

.footer__social img {
  width: 32px;
  height: 32px;
  display: block;
}

.footer__col {
  display: grid;
  gap: 10px;
}

.footer__heading {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-mint);
}

.footer__col a {
  justify-self: start;
  font-size: 14.5px;
  font-weight: 600;
  padding-bottom: 2px;
}

.footer__col a:hover {
  color: var(--c-yellow);
}

.footer__col span {
  font-size: 14.5px;
  color: var(--c-mint-muted);
  line-height: 1.6;
}

/* Jméno zprostředkovatele ve sloupci „Potřebujete poradit?“ */
.footer__col span strong {
  font-weight: 700;
  color: #FFFFFF;
}

.footer__bottom {
  padding-bottom: clamp(28px, 3vw, 40px);
}

.footer__bar {
  border-top: 1px solid rgba(191, 232, 210, 0.3);
  padding-top: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
}

.footer__bar span {
  font-size: 14.5px;
  color: var(--c-mint-soft);
}

.footer__bar a,
.footer__cookies {
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--c-yellow), var(--c-yellow));
  transition: color var(--transition);
}

.footer__bar a:hover,
.footer__cookies:hover {
  color: var(--c-yellow);
}

/* „Nastavení cookies“ je tlačítko (otevírá dialog souhlasu), vypadá jako odkaz. */
.footer__cookies {
  padding-inline: 0;
  padding-top: 0;
  border: 0;
  background-color: transparent;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.footer__cookies:focus-visible {
  outline: 2px solid var(--c-yellow);
  outline-offset: 3px;
}

/* --- Souhlas s cookies (www/#layout/inc/cookies.php, assets/js/consent.js) -- */
/* Lišta dole přes obsah, dokud návštěvník nerozhodne; „Přijmout vše“
   a „Odmítnout vše“ jsou stejně velká tlačítka (odmítnutí musí být stejně
   snadné jako souhlas). Tlačítka mají rozměry .btn-sm z halali.cz, hlavní je
   žluté .btn-secondary. */
.cookies-lista {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px 32px;
  padding: 20px 24px;
  border-radius: 12px;
  background: #FFFFFF;
  color: #181818;
  box-shadow: 0 12px 40px rgba(0, 26, 23, 0.28);
}

.cookies-lista p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.cookies-lista .cookies-lista__titulek {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-green);
}

.cookies-lista__akce {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cookies-lista a,
.cookies-dialog a {
  font-weight: 700;
  color: var(--c-green);
}

.cookies-lista a:hover,
.cookies-dialog a:hover {
  color: var(--c-green-hover);
}

.cookies-btn {
  height: 42px;
  padding: 12px 16px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.cookies-btn:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

.cookies-btn--hlavni {
  border-color: #261F06;
  background: var(--c-yellow);
  color: #090909;
}

.cookies-btn--hlavni:hover {
  border-color: #7A620A;
  background: #F5EAC5;
}

.cookies-btn--obrys {
  border-color: var(--c-green);
  background: #FFFFFF;
  color: var(--c-green);
}

.cookies-btn--obrys:hover {
  background: var(--c-green);
  color: #FFFFFF;
}

.cookies-btn--odkaz {
  padding-inline: 8px;
  background: transparent;
  color: var(--c-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookies-btn--odkaz:hover {
  color: var(--c-green-hover);
}

/* Dialog s nastavením (nativní <dialog>, showModal: fokus zůstává uvnitř,
   Escape zavírá; plynulý scroll stránky je po dobu otevření zastavený). */
.cookies-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #181818;
  box-shadow: 0 24px 60px rgba(0, 26, 23, 0.35);
  overflow: auto;
  overscroll-behavior: contain;
}

.cookies-dialog::backdrop {
  background: rgba(0, 26, 23, 0.55);
}

.cookies-dialog__obsah {
  position: relative;
  padding: 28px;
}

.cookies-dialog__zavrit {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-green);
  cursor: pointer;
}

.cookies-dialog__zavrit:hover {
  background: var(--c-mint-soft);
}

.cookies-dialog__zavrit:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

.cookies-dialog__titulek {
  margin: 0 40px 8px 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-green);
}

.cookies-dialog__uvod {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
}

.cookies-kategorie {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-sand);
}

.cookies-kategorie__polozka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-sand);
}

.cookies-kategorie__nazev {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-green);
}

.cookies-kategorie__popis {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--c-slate);
}

/* Přepínač: skutečný checkbox (role="switch") přes celou plochu, vzhled
   dělá span za ním. */
.cookies-prepinac {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
}

.cookies-prepinac input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cookies-prepinac input:disabled {
  cursor: not-allowed;
}

.cookies-prepinac span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #C9CFCD;
  transition: background-color var(--transition);
}

.cookies-prepinac span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 26, 23, 0.3);
  transition: transform 160ms ease;
}

.cookies-prepinac input:checked + span {
  background: var(--c-green);
}

.cookies-prepinac input:checked + span::after {
  transform: translateX(18px);
}

.cookies-prepinac input:disabled + span {
  opacity: 0.5;
}

.cookies-prepinac input:focus-visible + span {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

.cookies-dialog__akce {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* --- Responzivita --------------------------------------------------------- */
/* Hlavička do 900 px: burger | logo | telefon (mřížka 1fr auto 1fr drží logo
   přesně uprostřed), navigace a žluté tlačítko jsou v menu pod lištou, které
   je v toku stránky (odsouvá obsah, nic nepřekrývá) a otevírá ho header.js. */
/* Tři karty vedle sebe už od 901 px: do 1039 px je karta jen 276–320 px
   široká (návrh počítá s min. 320 px), proto kompaktnější odsazení, menší
   cena, nadpis a texty, aby se řádek s pojištěním zbraně a cena nelámaly. */
@media (min-width: 901px) and (max-width: 1039px) {
  .plans {
    gap: 12px;
  }

  .plan {
    padding: 28px 20px 26px;
    border-radius: 24px;
  }

  .plan__badges {
    margin-bottom: 18px;
  }

  .plan__pricing {
    margin-bottom: 24px;
  }

  .plan__amount {
    font-size: 38px;
  }

  .plan__price {
    column-gap: 10px;
  }

  .plan__price-old {
    font-size: 16px;
  }

  .plan__weapon {
    gap: 12px;
    margin-bottom: 24px;
  }

  .plan__weapon-title {
    font-size: 15px;
  }

  .plan__includes {
    padding-top: 22px;
    margin-bottom: 26px;
  }

  .plan__list li {
    font-size: 15px;
  }

  .plan__cta {
    padding-inline: 12px;
  }
}

@media (max-width: 900px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0 12px;
  }

  /* Řádky napevno: s automatickým rozmístěním by telefon při otevřeném menu
     (které zabírá celý 2. řádek) spadl až pod něj. */
  .topbar__burger {
    grid-row: 1;
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
  }

  .topbar__brand {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
  }

  .topbar__logo {
    height: 36px;
  }

  .topbar__phone {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
  }

  /* Menu se rozbaluje přes grid-template-rows 0fr → 1fr (stejný princip jako
     odpovědi ve FAQ), vnitřní obal ořezává. Linka a odsazení jsou až na
     vnitřních prvcích, aby zavřené menu mělo výšku přesně 0. Zavřené menu je
     visibility: hidden (odkazy nejsou dosažitelné), při zavírání se skryje až
     po sjetí. */
  .topbar__menu {
    display: grid;
    grid-template-rows: 0fr;
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 0 -24px;
    visibility: hidden;
    transition: grid-template-rows 420ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 420ms;
  }

  .topbar.is-open .topbar__menu {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 420ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  }

  .topbar__menu-inner {
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .topbar__nav {
    display: grid;
    gap: 0;
    justify-content: stretch;
    justify-items: center;
    margin-top: 15px;
    padding: 6px 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .topbar__nav a {
    display: block;
    justify-self: center; /* odkaz jen na šířku textu, jinak by podtržení jelo přes celý řádek */
    padding: 14px 0;
    font-size: 18px;
    line-height: 1.3;
  }

  .topbar__menu .topbar__cta {
    display: flex;
    justify-content: center;
    margin: 18px 24px 20px;
    --i: 4;
  }

  /* Položky do otevřeného menu postupně vjíždějí shora (pořadí přes --i),
     při zavírání zmizí rychle a bez zpoždění. */
  .topbar__nav a,
  .topbar__menu .topbar__cta {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 180ms ease, transform 220ms ease;
  }

  .topbar.is-open .topbar__nav a,
  .topbar.is-open .topbar__menu .topbar__cta {
    opacity: 1;
    transform: none;
    transition: opacity 320ms ease, transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(90ms + var(--i, 0) * 55ms);
  }

  .topbar__nav a:nth-child(2) { --i: 1; }
  .topbar__nav a:nth-child(3) { --i: 2; }
  .topbar__nav a:nth-child(4) { --i: 3; }

  /* Karty variant jako „peek carousel“: vodorovný scroller přes celou šířku
     displeje (záporný margin proti paddingu kontejneru), uprostřed jedna
     karta, po stranách vykukují kraje sousedních karet o šířce --plans-peek.
     Karta je široká jako obsah scrolleru (100 % = displej − 2 × boční
     padding), nejvýš --plans-card-max; na tabletu se boční padding zvětší
     tak, aby karta zůstala uprostřed (procenta paddingu se počítají ze
     šířky .container, proto +24 px). Snap na střed karty; JS po načtení
     vycentruje vybranou variantu, přepíná výběr podle karty uprostřed
     a přidává tečky (.plans-dots). Svislý padding s protimarginem nechává
     místo rámečku fokusu, poskočení karet a stínu prostřední karty (dole
     48 px), které by overflow jinak ořízl; nahoře jen 20 px, aby scroller
     nepřekryl přepínač typu práce. Tečky nad scrollerem leží v jeho horním
     paddingu, proto mají z-index 2, aby zůstaly klepnutelné. */
  .plans {
    --plans-peek: clamp(36px, 10vw + 4px, 56px); /* 360 px → 40 px, 390 px → 43 px */
    --plans-gap: 12px;
    --plans-card-max: 420px;
    --plans-side: max(calc(var(--plans-peek) + var(--plans-gap)), calc((100% - var(--plans-card-max)) / 2 + 24px));
    display: flex;
    align-items: stretch;
    gap: var(--plans-gap);
    margin: -20px -24px -48px;
    padding: 20px var(--plans-side) 48px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .plans::-webkit-scrollbar {
    display: none;
  }

  /* 3D efekt (coverflow): JS zapisuje kartám --t (0 = uprostřed, 1 = na
     sousední pozici) a --dir (−1 vlevo od středu, 1 vpravo). Karta mimo
     střed se natáčí vnitřní hranou od diváka, ustupuje dozadu a zmenšuje
     se; prostřední karta stojí rovně s měkkým stínem. Perspektiva je na
     kartě (vlastní úběžník), ne na scrolleru. Zmenšení a natočení stahují
     vnitřní hranu boční karty k jejímu středu (spočítáno z projekce:
     3,3 % šířky při t = 0,25, 7,9 % při 0,5, 20 % při 1), proto se karta
     o stejnou hodnotu (11,5 % × t + 8,6 % × t²) posouvá ke středu
     scrolleru, aby viditelný kraj zůstal --plans-peek a mezera 12 px
     i uprostřed swipu. Posun je před perspective(), tedy už v projekci. */
  .plan {
    --t: 0;
    --dir: 1;
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: translateX(calc(var(--dir) * -1 * (11.5% * var(--t) + 8.6% * var(--t) * var(--t)))) perspective(1000px) rotateY(calc(var(--dir) * var(--t) * -20deg)) translateZ(calc(var(--t) * -80px)) scale(calc(1 - var(--t) * 0.08));
    box-shadow: 0 18px 36px rgba(0, 20, 18, calc((1 - var(--t)) * 0.34));
    will-change: transform;
  }

  @media (prefers-reduced-motion: reduce) {
    .plan {
      transform: none;
    }
  }

  .plans-dots {
    display: flex;
    z-index: 2;
  }

  /* Pod sebou: fotografie už nemá výšku od karty, proto vlastní min-height. */
  .why__grid {
    grid-template-columns: 1fr;
  }

  .why__photo {
    min-height: clamp(320px, 38vw, 560px);
  }
}

@media (max-width: 640px) {
  /* Užší karty v carouselu (na 360 px má karta 256 px): menší vnitřní
     odsazení, cena, nadpis a text u zbraně, aby zůstaly na jednom řádku,
     a menší svislé mezery (hlavně kolem ceny), aby karta nebyla tak vysoká. */
  .plan {
    padding: 26px 20px 24px;
  }

  .plan__badges {
    margin-bottom: 14px;
  }

  .plan__amount {
    font-size: 42px;
  }

  .plan__price {
    column-gap: 10px;
  }

  .plan__price-old {
    font-size: 16px;
  }

  .plan__pricing {
    row-gap: 6px;
  }

  /* Oba štítky prostřední karty se vejdou na jeden řádek i na 256 px široké kartě. */
  .plan__badges {
    gap: 6px;
  }

  .badge {
    padding-inline: 8px;
    font-size: 12px;
  }

  .plan__weapon-title {
    font-size: 15px;
  }

  .plan__pricing {
    margin-bottom: 20px;
  }

  .plan__weapon {
    margin-bottom: 22px;
  }

  .plan__includes {
    padding-top: 20px;
    margin-bottom: 24px;
  }

  .plan__includes-title {
    margin-bottom: 14px;
  }

  .plan__list {
    gap: 13px;
  }

  /* Hero na mobilu: nadpis, podtitul a pod nimi blok s logem Celní správy,
     vše na střed. */
  .hero__intro {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
  }

  .hero__text {
    text-align: center;
  }

  /* Lišta cookies přes celou šířku, text nad tlačítky; „Odmítnout vše“
     a „Přijmout vše“ vedle sebe, „Nastavení“ pod nimi. */
  .cookies-lista {
    left: 8px;
    right: 8px;
    bottom: 8px;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
  }

  .cookies-lista__akce {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cookies-lista__akce .cookies-btn--odkaz {
    grid-column: 1 / -1;
    order: 1;
  }

  .cookies-dialog__obsah {
    padding: 24px 20px;
  }

  .cookies-dialog__akce {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cookies-dialog__akce .cookies-btn--hlavni {
    order: -1;
  }

  /* Na mobilu štítek nad logem a logo větší (tak ho HALALI schválili). */
  .hero__partner {
    justify-items: center;
    gap: 12px;
    padding-left: 0;
    border-left: 0;
  }

  .hero__partner-logo {
    border-radius: 14px;
    padding: 16px 22px;
  }

  .hero__partner-logo img {
    height: 52px;
  }

  /* Menší přepínač typu práce. */
  .segmented {
    padding: 4px;
  }

  .segmented__btn {
    height: 40px;
    padding: calc(2 * var(--nexa-shift)) 14px 0;
    font-size: 14px;
  }

  /* Fotografie v sekci „Proč“ se na mobilu nezobrazuje. */
  .why__photo {
    display: none;
  }

  /* Záložky kategorií FAQ v jednom vodorovně posuvném řádku přes celou šířku
     displeje (záporný margin proti paddingu sekce 24 px), bez zalamování
     a bez posuvníku; JS po klepnutí přisune záložku doprostřed záběru.
     Svislý padding s protimarginem nechává místo rámečku fokusu, spodní
     margin je původních 26 px minus tento padding. */
  .faq__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin: -4px -24px 22px;
    padding: 4px 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .faq__tabs::-webkit-scrollbar {
    display: none;
  }

  .faq__tab {
    flex: none;
  }
}

/* Telefon v hlavičce na úzkých mobilech jen jako číslo, aby se vešel vedle
   vycentrovaného loga. */
@media (max-width: 480px) {
  .topbar__phone-icon {
    display: none;
  }
}

/* Kontakt na mobilu jako na halali.cz: box přes celou šířku, padding 104/24,
   nadpis 31 px. */
@media (max-width: 575px) {
  .contact {
    margin-inline: -24px;
    padding: 104px 24px;
  }

  .contact__title {
    margin-bottom: 8px;
    font-size: 31px;
  }

  .contact__card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Stránka 404 (www/404) ------------------------------------------------ */
.notfound {
  padding: clamp(56px, 8vw, 120px) 0 clamp(72px, 9vw, 140px);
  text-align: center;
  background: #FFFFFF;
}

.notfound__code {
  margin: 0 0 8px;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--c-mint);
}

.notfound__title {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 39px);
  line-height: 1.16;
  font-weight: 700;
  color: var(--c-green);
}

.notfound__text {
  margin: 0 auto 28px;
  max-width: 512px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
}