/* ==========================================================================
   fitplus.studio – nábor trénerov (treneri.fitplus.studio)
   Vizuál (tokeny, písma, farby, komponenty ako .btn, .feature, .eyebrow,
   .section-title, .hero__badge…) preberá zo zdieľaného main.css.
   Rozloženie sekcií je vlastné pre túto stránku:
   1. Hero – centrovaný nadpis a koláž fotiek   2. Prečo – bento s číslami
   3. Pozície – zoznam oblastí + detail          4. Štúdiá – mapa + karty miest
   5. Spolupráca – veľká karta + očakávania      6. Postup – zvislá os
   7. FAQ – dva stĺpce   8. Prihláška – centrovaný formulár
   9. Formulár – výber (chips)   10. Animácie   11. Responzivita
   ========================================================================== */

/* TYPO3: Flux prvok bez FSC rámu, Powermail má vlastný obal */
.contact__form .tx-powermail { display: contents; }

.section-head--center { margin-inline: auto; text-align: center; align-items: center; margin-bottom: clamp(48px, 6vw, 72px); }
.section-head--center .section-lead { max-width: 40em; }

/* 1. HERO -------------------------------------------------------------------- */
.hero--center { display: block; min-height: 0; padding-bottom: clamp(64px, 7vw, 104px); }
.hero--center::before { right: auto; left: 50%; top: 10%; transform: translateX(-50%); width: 80vw; height: 80vw; }
.hero__head {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  max-width: 1000px; margin-inline: auto; text-align: center;
}
.hero--center .hero__lead { max-width: 40em; }
.hero--center .hero__actions { justify-content: center; }

.collage {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px); align-items: end;
  max-width: 1080px; margin: clamp(48px, 6vw, 80px) auto 0;
}
.collage__item { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.7); }
.collage__item img { width: 100%; height: 100%; object-fit: cover; }
.collage__item--main { aspect-ratio: 3 / 4; border-radius: 999px 999px 22px 22px; }
.collage__item--side { aspect-ratio: 4 / 5; margin-bottom: clamp(24px, 4vw, 56px); }
.collage__item--side img { object-position: 35% 30%; }
.collage__item--right img { object-position: 78% 50%; }
.collage .hero__badge { left: auto; right: 3%; bottom: -34px; }
.collage .hero__ring { right: auto; left: calc(28% - 70px); top: -48px; }

.hero__cities {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  max-width: 1080px; margin: clamp(56px, 6vw, 88px) auto 0;
  padding-top: 26px; border-top: 1px solid var(--line-dark);
}
.hero__cities li {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.125rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream);
}
.hero__cities small { font-family: var(--ff-label); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--faint-dark); }
.hero__cities .dot { align-self: center; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--gold); }
.hero__cities .is-live .dot { background: var(--gold); animation: ping 2.4s var(--ease-out) infinite; }
.hero__cities .is-live small { color: var(--gold); }

/* 2. PREČO – bento ------------------------------------------------------------ */
.why .section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.bento .feature { padding: 28px; }
.bento .feature p { font-size: 0.9375rem; }
.bento .feature:hover .icon-box { transform: translateY(-4px) rotate(-6deg); background: var(--ink-3); }
.bento__stats {
  grid-row: span 2;
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px; border-radius: var(--radius);
  background: var(--ink); color: var(--muted-dark);
  position: relative; overflow: hidden; isolation: isolate;
}
.bento__stats::after {
  content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; right: -140px; bottom: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgb(198 173 112 / 0.3), transparent 65%);
}
.bento__kicker { font-family: var(--ff-label); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.bento__stats dl { display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.bento__stats dl div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 16px 0; border-top: 1px solid var(--line-dark); }
.bento__stats dd { font-family: var(--ff-display); font-weight: 700; font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.25rem); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.bento__stats dt { font-size: 0.875rem; }

/* 3. POZÍCIE – zoznam + detail ------------------------------------------------ */
.roles__layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.roles__side { display: flex; flex-direction: column; gap: 40px; position: sticky; top: calc(var(--header-h) + 24px); }
.roles__tabs { display: none; flex-direction: column; border-top: 1px solid var(--line-strong); }
.roles.is-tabs .roles__tabs { display: flex; }
.roles__tab {
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line-strong);
  display: flex; align-items: baseline; gap: 18px; padding: 16px 0; text-align: left; cursor: pointer;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.3rem; line-height: 1.1;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted);
  transition: color 0.3s, padding 0.45s var(--ease-out), box-shadow 0.3s;
}
.roles__tab span { font-size: 0.95rem; color: var(--gold-deep); }
.roles__tab:hover { color: var(--text); padding-left: 8px; }
.roles__tab[aria-selected="true"] { color: var(--text); padding-left: 16px; box-shadow: inset 3px 0 0 var(--gold); }

.roles__panels { display: flex; flex-direction: column; gap: 20px; }
.role-panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
}
.role-panel__num {
  position: absolute; z-index: -1; right: 20px; bottom: -0.18em;
  font-family: var(--ff-display); font-weight: 700; font-size: clamp(5rem, 3rem + 6vw, 9rem); line-height: 1;
  color: rgb(198 173 112 / 0.22);
}
.role-panel__title { font-family: var(--ff-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); max-width: 12em; }
.role-panel p { font-size: 1.0625rem; color: var(--muted); max-width: 34em; }
.role-panel__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.role-panel__tags li {
  padding: 6px 14px; border: 1px solid rgb(164 134 77 / 0.5); border-radius: 999px;
  font-family: var(--ff-label); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text);
}
.role-panel .btn { margin-top: 6px; }
.roles.is-tabs .role-panel:not(.is-active) { display: none; }
.roles.is-tabs .role-panel.is-active { min-height: 380px; justify-content: center; animation: reveal-up 0.6s var(--ease-out); }

.rookie {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  padding: 26px 32px; border-radius: var(--radius); background: var(--ink); color: var(--muted-dark);
}
.rookie > div { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; }
.rookie__kicker { font-family: var(--ff-display); font-weight: 700; font-size: 1.6rem; line-height: 1; text-transform: uppercase; color: var(--gold); }

/* 4. ŠTÚDIÁ – mapa + karty miest --------------------------------------------- */
.network { overflow: hidden; }
.network__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.locs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.loc {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px; border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: linear-gradient(160deg, rgb(198 173 112 / 0.07), transparent 60%);
  transition: border-color 0.3s, translate 0.5s var(--ease-out), background-color 0.3s;
}
.loc.is-hl { border-color: var(--gold); translate: 0 -4px; }
.loc.is-live { background: linear-gradient(160deg, rgb(198 173 112 / 0.2), rgb(198 173 112 / 0.04) 70%); border-color: rgb(198 173 112 / 0.5); }
.loc__status {
  font-family: var(--ff-label); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint-dark);
  display: inline-flex; align-items: center; gap: 8px;
}
.loc__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.loc.is-live .loc__status { color: var(--gold); }
.loc.is-live .loc__status::before { background: currentColor; }
.loc__name { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.85rem); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream); }
.loc__meta { font-size: 0.875rem; color: var(--muted-dark); margin-bottom: 14px; }
.loc__cta {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px;
  border: 1px solid rgb(198 173 112 / 0.45); border-radius: 999px;
  font-family: var(--ff-display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream);
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.loc__cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease-out); }
.loc__cta:hover, .loc.is-hl .loc__cta { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.loc__cta:hover svg { transform: translateX(3px); }

.map {
  margin: 0; position: relative;
  padding: clamp(16px, 2.5vw, 28px);
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgb(198 173 112 / 0.07), transparent 55%), var(--ink-2);
}
.map__svg { width: 100%; height: auto; overflow: visible; }
#map-dots circle, .map__dot { fill: rgb(198 173 112 / 0.18); }
.map__river { fill: none; stroke: rgb(143 134 118 / 0.5); stroke-width: 12; stroke-linecap: round; opacity: 0.45; }
.map__river-label { font-family: var(--ff-body); font-style: italic; font-weight: 300; font-size: 15px; letter-spacing: 0.3em; fill: var(--faint-dark); }
.map__route { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease-out) 0.3s; }
.map__pin { cursor: pointer; }
.map__pin-hit { fill: transparent; }
.map__pin-dot { fill: var(--ink-2); stroke: var(--gold); stroke-width: 2; transition: r 0.4s var(--ease-out), fill 0.3s; }
.map__pin.is-live .map__pin-dot { fill: var(--gold); }
.map__pin-ping { fill: none; stroke: var(--gold); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: map-ping 2.4s var(--ease-out) infinite; }
.map__pin.is-hl .map__pin-dot { r: 12px; fill: var(--gold); }
.map__pin.is-live.is-hl .map__pin-dot { r: 14px; }
.map__label { font-family: var(--ff-display); font-weight: 700; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--cream); transition: fill 0.3s; }
.map__pin.is-hl .map__label { fill: var(--gold-light); }
.map__sub { font-family: var(--ff-label); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--faint-dark); }
.map__pin.is-live .map__sub { fill: var(--gold); }
.map__compass path { fill: var(--gold); }
.map__compass text, .map__scale text { font-family: var(--ff-label); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; fill: var(--faint-dark); }
.map__scale path { fill: none; stroke: var(--faint-dark); stroke-width: 1.2; }
.map__caption { margin-top: 8px; font-size: 0.875rem; color: var(--muted-dark); text-align: center; }

/* 5. SPOLUPRÁCA ---------------------------------------------------------------- */
.deal__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(32px, 5vw, 64px); border-radius: var(--radius-lg);
  background: var(--ink); color: var(--muted-dark);
}
.deal__card .price-card__glow { right: auto; left: -160px; top: -200px; }
.deal__intro { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.deal__title { font-family: var(--ff-display); font-weight: 700; font-size: clamp(2.6rem, 1.9rem + 2.4vw, 4rem); line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream); }
.deal__note { font-size: 1.0625rem; max-width: 24em; }
.deal__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line-dark); }
.deal__rows div:last-child { border-bottom: 1px solid var(--line-dark); }
.deal__rows dt { color: #d9d1c3; }
.deal__rows dd { font-weight: 500; color: var(--cream); text-align: right; }

.expect { margin-top: clamp(64px, 8vw, 96px); }
.expect__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.expect__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.expect__item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  transition: translate 0.5s var(--ease-out), border-color 0.3s, box-shadow 0.5s var(--ease-out);
}
.expect__item:hover { translate: 0 -6px; border-color: var(--gold); box-shadow: 0 24px 48px -30px rgb(20 18 16 / 0.35); }
.expect__item svg { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--ink); fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.expect__item h4 { font-family: var(--ff-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); }
.expect__item p { font-size: 0.9375rem; color: var(--muted); }

/* 6. POSTUP – zvislá os -------------------------------------------------------- */
.steps__layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.steps__head { position: sticky; top: calc(var(--header-h) + 24px); }
.steps .steps__head { margin-bottom: 0; }
.steps__photo { position: relative; margin: 12px 0 0; border-radius: var(--radius-lg); overflow: hidden; }
.steps__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.steps__photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: 48px 24px 22px;
  background: linear-gradient(180deg, transparent, rgb(20 18 16 / 0.88));
  color: var(--cream); font-style: italic; font-size: 1.125rem; line-height: 1.4;
}
.vsteps { position: relative; display: flex; flex-direction: column; }
.vsteps::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 56px; width: 1.5px; background: var(--line-strong); }
.vsteps::after {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 56px; width: 1.5px; background: var(--gold-deep);
  transform-origin: top; transform: scaleY(var(--fill, 1));
}
.js .vsteps { --fill: 0; }
.js .vsteps::after { transition: transform 2.2s var(--ease-out) 0.3s; }
.js .vsteps.is-filled { --fill: 1; }
.vstep { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; padding: 14px 0 30px; }
.vstep > div { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.vstep p { color: var(--muted); }
.vstep__num {
  position: relative; z-index: 1;
  width: 56px; height: 56px; display: grid; place-items: center;
  border: 1.5px solid var(--gold-deep); border-radius: 50%; background: var(--paper);
  font-family: var(--ff-display); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--gold-deep);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.5s var(--ease-out);
}
.vstep:hover .vstep__num { background: var(--ink); color: var(--gold); border-color: var(--ink); transform: scale(1.08); }
.vstep:last-child .vstep__num { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* 7. FAQ – dva stĺpce (vzhľad otázok .faq__q / .faq__a je v main.css) ------ */
.faq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; max-width: 1100px; margin-inline: auto; align-items: start; }
.faq__cols > :nth-child(-n + 2) { border-top: 1px solid var(--line); }
.faq__cols .faq__q { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; }
.faq__more { margin-top: 40px; text-align: center; color: var(--muted); }
.faq__more a { color: var(--gold-text); font-weight: 500; background: linear-gradient(var(--gold-deep), var(--gold-deep)) 0 100% / 100% 1px no-repeat; }

/* 8. PRIHLÁŠKA – centrovaná --------------------------------------------------- */
.apply .section-head--center { margin-bottom: 28px; }
.apply__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-bottom: clamp(40px, 5vw, 56px); }
.apply__contacts li { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--cream); }
.apply__contacts svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.apply__contacts a { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out), color 0.3s; }
.apply__contacts a:hover { color: var(--gold-light); background-size: 100% 1px; }
.apply__form { max-width: 880px; margin-inline: auto; }
.apply__form .form__grid { align-items: start; }
/* Powermail: odkaz na profil/CV na celý riadok (pole s markerom "link") */
.apply__form .powermail_fieldwrap_link { grid-column: 1 / -1; }

/* 9. FORMULÁR – výber v tvare chipov ----------------------------------------- */
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field.has-error .choice span { border-color: #a3322a; }
fieldset.field legend { padding: 0; margin-bottom: 10px; font-size: 0.875rem; font-weight: 500; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.field .choice input,
.choice input {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; min-height: 0 !important;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.choice span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px;
  border: 1px solid #cfc2a8; border-radius: 999px; background: var(--white);
  font-size: 0.9375rem; font-weight: 400; line-height: 1.2;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
  pointer-events: none;
}
.choice span::before {
  content: ""; width: 0; height: 10px; margin-right: -8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg) scale(0);
  transition: width 0.3s var(--ease-out), margin 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.choice:hover span { border-color: var(--gold-deep); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.choice input:checked + span::before { width: 5px; margin-right: 2px; transform: translateY(-2px) rotate(45deg) scale(1); border-color: var(--gold); }
.choice input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
fieldset[aria-invalid="true"] .choice span { border-color: #a3322a; }
.choice.is-flash span { animation: chip-flash 1.2s var(--ease-out); }

.site-footer__links { display: flex; gap: 24px; }
.site-footer__links a { color: var(--gold); font-weight: 500; transition: color 0.3s; }
.site-footer__links a:hover { color: var(--gold-light); }
/* powered by AWIS – rovnako ako na your.fitplus.studio */
.site-footer__powered { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.8125rem; letter-spacing: 0.02em; }
.site-footer .site-footer__awis { display: inline-flex; color: inherit; font-weight: inherit; line-height: 0; }
.site-footer__awis img { display: block; width: 78px; height: 20px; filter: brightness(0) invert(1); opacity: 0.6; transition: opacity 0.2s; }
.site-footer__awis:hover img, .site-footer__awis:focus-visible img { opacity: 1; }

/* 10. ANIMÁCIE ------------------------------------------------------------------- */
.js .collage__item { clip-path: inset(100% 0 0 0); }
.js .collage__item img { transform: scale(1.15); }
.is-loaded .collage__item { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease-out) 0.2s; }
.is-loaded .collage__item img { transform: none; transition: transform 2s var(--ease-out) 0.2s; }
.is-loaded .collage__item--side { transition-delay: 0.45s; }
.is-loaded .collage__item--right { transition-delay: 0.6s; }
.js .hero__cities { opacity: 0; transform: translateY(20px); }
.is-loaded .hero__cities { opacity: 1; transform: none; transition: opacity 1s var(--ease-out) 0.9s, transform 1s var(--ease-out) 0.9s; }

.js .map:not(.is-visible) .map__route { stroke-dashoffset: 1; }
.js .map .map__pin { opacity: 0; }
.js .map.is-visible .map__pin { opacity: 1; transition: opacity 0.6s var(--ease-out); }
.js .map.is-visible .map__pin[data-pin="puchov"] { transition-delay: 0.5s; }
.js .map.is-visible .map__pin[data-pin="ilava"] { transition-delay: 0.9s; }
.js .map.is-visible .map__pin[data-pin="dubnica"] { transition-delay: 1.3s; }
.js .map.is-visible .map__pin[data-pin="trencin"] { transition-delay: 1.7s; }

@keyframes map-ping { 0% { transform: scale(1); opacity: 0.9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes chip-flash { 0% { box-shadow: 0 0 0 0 rgb(198 173 112 / 0.8); } 100% { box-shadow: 0 0 0 12px rgb(198 173 112 / 0); } }

/* 11. RESPONZIVITA --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento__stats { grid-row: span 3; }
  .expect__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .roles__layout, .network__grid, .deal__card { grid-template-columns: minmax(0, 1fr); }
  .roles__side { position: static; }
  .map { max-width: 620px; width: 100%; justify-self: center; }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__stats { grid-column: 1 / -1; grid-row: auto; }
  .bento__stats dl { flex-direction: row; flex-wrap: wrap; }
  .bento__stats dl div { flex: 1 1 140px; padding-right: 16px; }
  .steps__layout { grid-template-columns: minmax(0, 1fr); }
  .steps__head { position: static; }
  .faq__cols { grid-template-columns: minmax(0, 1fr); }
  .faq__cols > :nth-child(2) { border-top: 0; }
  .expect__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .collage { grid-template-columns: minmax(0, 1fr); max-width: 330px; margin-bottom: 40px; }
  .collage__item--side { display: none; }
  .collage .hero__badge { left: -12px; right: auto; bottom: 28px; width: 210px; padding: 18px 20px; }
  .collage .hero__ring { display: none; }
  .hero__cities { justify-content: flex-start; gap: 10px 18px; }
  .hero__cities li { font-size: 1rem; }
  .bento, .expect__grid, .locs { grid-template-columns: minmax(0, 1fr); }
  .deal__rows div { flex-direction: column; gap: 4px; }
  .deal__rows dd { text-align: left; }
  .rookie { padding: 24px; }
  .map__label { font-size: 30px; }
  .map__sub { font-size: 15px; }
  .map__compass text, .map__scale text { font-size: 15px; }
  .faq__cols .faq__q { font-size: 1.125rem; padding: 20px 0; }
  .apply__contacts { flex-direction: column; align-items: center; }
  .site-footer__links { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .map__pin-ping { display: none; }
  .js .map .map__pin { opacity: 1; }
  .js .vsteps { --fill: 1; }
}