/* ==========================================================================
   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;
  --c-cream-2: #FAF3EA;
  --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;
}

.topbar__logo {
  height: 36px;
  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;
}

.hero__intro {
  position: relative;
  padding-top: clamp(72px, 8vw, 128px);
  margin: 0 0 clamp(52px, 5.6vw, 84px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.hero__text {
  text-align: left;
  max-width: 720px;
}

.hero__title {
  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 {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-right: clamp(0px, 6vw, 96px);
  transform: translateY(-20px);
}

.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: 14px;
  padding: 16px 22px;
}

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

/* --- Nabídka: výběr práce + varianty -------------------------------------- */
.offer {
  position: relative;
  overflow: hidden;
  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 (na zelené i bílé, viz
   scroll-bg.css, kde se text přebarvuje na tmavě zelený). */
.jobs__title {
  margin: 0 0 clamp(22px, 2.2vw, 30px);
  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 –“ pod přepínačem: prostrkané verzálky s linkami
   po stranách; celek jemně dýchá (opacita) a linky se v rytmu natahují
   směrem od textu. Barvu animuje scroll-bg.css na <p>, efekt je na vnitřním
   spanu, aby se animace nepřebíjely. Text má Nexa posun jako tlačítka. */
.jobs__hint {
  margin: 18px 0 0;
  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čky za kartami: jedna vpravo dole, druhá zrcadlově vlevo
   o kus výš (stejný SVG, jen překlopený). Na užších desktopech se uzel
   smyčky schová za krajní kartu a vidět jsou jen konce u okraje okna. */
.offer__swoosh {
  position: absolute;
  right: -90px;
  top: 42%;
  width: min(620px, 40%);
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.offer__swoosh--left {
  right: auto;
  left: -90px;
  top: 0;
  transform: scaleX(-1);
}

.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;
}

.offer__note {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: clamp(30px, 3.4vw, 46px) auto 0;
  text-align: center;
  display: grid;
  gap: 14px;
}

.offer__note p {
  margin: 0;
  font-size: 16.5px;
  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;
}

.offer__note .offer__note-small {
  font-size: 14.5px;
  color: var(--c-mint-muted);
}

/* --- 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 ------------------------------------------------------- */
.plan {
  position: relative; /* kotva samolepky slevy */
  cursor: pointer;
  background: var(--c-cream);
  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;
  border: 1.5px solid var(--c-sand);
  transition: border-color var(--transition);
}

/* Každá karta má slevu (krajní 10 %, prostřední 20 %): hvězdicovou
   samolepku „−10 % / −20 %“ přes pravý horní roh a přeškrtnutou běžnou
   cenu pod cenou po slevě (řádek je vyhrazený v .plan__pricing, aby obsah
   karet lícoval). Doporučená (prostřední) karta je zvýrazněná nejvíc:
   na desktopu žlutý prstenec a měkký stín (na mobilu stín řídí carousel). */
.plan--recommended {
  border-color: var(--c-sand-2);
}

.plan__sale {
  --sale-shape: polygon(50.0% 0.0%, 61.1% 8.5%, 75.0% 6.7%, 80.4% 19.6%, 93.3% 25.0%, 91.5% 38.9%, 100.0% 50.0%, 91.5% 61.1%, 93.3% 75.0%, 80.4% 80.4%, 75.0% 93.3%, 61.1% 91.5%, 50.0% 100.0%, 38.9% 91.5%, 25.0% 93.3%, 19.6% 80.4%, 6.7% 75.0%, 8.5% 61.1%, 0.0% 50.0%, 8.5% 38.9%, 6.7% 25.0%, 19.6% 19.6%, 25.0% 6.7%, 38.9% 8.5%);
  position: absolute;
  top: -14px;
  right: -6px;
  z-index: 2;
  width: 82px;
  height: 82px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding-top: calc(2 * var(--nexa-shift));
  color: var(--c-ink);
  text-align: center;
  transform: rotate(10deg);
  filter: drop-shadow(0 10px 14px rgba(0, 26, 23, 0.35));
  pointer-events: none;
}

.plan__sale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-yellow);
  clip-path: var(--sale-shape);
}

/* Smetanový lem samolepky (::after = stejný tvar o 3 px větší pod ní):
   na kartě splývá s podkladem, mimo kartu odděluje samolepku od tmavě
   zeleného pozadí sekce. */
.plan__sale::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -2;
  background: var(--c-cream);
  clip-path: var(--sale-shape);
}

/* Krajní karty (10 %): zelená samolepka s bílým textem. */
.plan__sale--green {
  color: #FFFFFF;
}

.plan__sale--green::before {
  background: var(--c-green);
}

.plan__sale strong {
  font-size: 23px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.plan__sale span {
  margin-top: 3px;
  font-size: 9.5px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

.plan:hover,
.plan.is-selected {
  border-color: var(--c-green);
}

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

.plan__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 20px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 3px 14px 0;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge svg {
  display: block;
}

.badge--rec {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--c-ink);
}

.plan__title {
  margin: 0 0 34px;
  font-size: 27px;
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-green);
}

/* Tři pevné řádky (cena, běžná cena, poznámka), aby karty lícovaly
   i v případě, že některá karta slevu (a řádek s běžnou cenou) nemá. */
.plan__pricing {
  margin-bottom: 34px;
  display: grid;
  grid-template-rows: auto minmax(18px, auto) auto;
  row-gap: 6px;
}

.plan__price {
  grid-row: 1;
}

.plan__price-old {
  grid-row: 2;
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--c-slate);
}

.plan__price-note {
  grid-row: 3;
}

.plan__price-old s {
  font-weight: 700;
  text-decoration-thickness: 1.5px;
}

.plan__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}

.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);
}

.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;
}

.plan__cta {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: calc(2 * var(--nexa-shift)) 22px 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--c-green);
  background-color: var(--c-green);
  color: #FFFFFF;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.plan__cta {
  text-decoration: none;
  color: #FFFFFF;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.plan__cta:hover {
  background-color: #077E71;
  border-color: #077E71;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 63, 56, 0.22);
}

.plan.is-selected .plan__cta {
  border-color: var(--c-yellow-border);
  background-color: var(--c-yellow);
  color: var(--c-ink);
}

.plan.is-selected .plan__cta:hover {
  background-color: #F5EAC5;
  border-color: #7A620A;
  color: var(--c-ink);
  box-shadow: 0 8px 18px rgba(122, 98, 10, 0.18);
}

.plan__cta:active {
  transform: translateY(0);
  box-shadow: none;
}


/* --- 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-2);
  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);
}

/* --- Kontakt -------------------------------------------------------------- */
/* Rozměry i typografie převzaté z boxu „Stále něco hledáte?“ na halali.cz. */
.contact {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 24px;
  background: var(--c-contact);
  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);
}

.contact__inner p {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: #181818;
}

/* --- 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;
}

.footer__brand {
  display: grid;
  gap: 14px;
}

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

.footer__brand p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-mint-muted);
  max-width: 300px;
}

.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;
}

.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 {
  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 {
  color: var(--c-yellow);
}

/* --- 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__title {
    margin-bottom: 24px;
    font-size: 23px;
  }

  .plan__pricing {
    margin-bottom: 24px;
  }

  .plan__amount {
    font-size: 38px;
  }

  .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__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__title {
    margin-bottom: 18px;
    font-size: 25px;
  }

  .plan__amount {
    font-size: 42px;
  }

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

  .plan__pricing {
    grid-template-rows: auto minmax(17px, auto) auto;
    row-gap: 4px;
  }

  .plan__sale {
    top: -12px;
    right: -8px;
    width: 72px;
    height: 72px;
  }

  .plan__sale strong {
    font-size: 20px;
  }

  .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 i blok s logem Celní správy na střed. */
  .hero__intro {
    justify-content: center;
    text-align: center;
  }

  .hero__text {
    text-align: center;
  }

  .hero__partner {
    justify-items: center;
    margin-right: 0;
    transform: none;
  }

  /* 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;
  }
}

/* --- 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);
}