/* =========================================================
   M&R jobs s.r.o. — styly (index.html + script.js)
   Paleta: teplá slonová kost · grafit s teplým podtónem · zlato · žhavý jantar
   Typografie: Spectral (nadpisy, serif, emoce) + Manrope (text, humanistický sans)
   ========================================================= */

:root {
  --bg: #fdfcf9;
  --bg-alt: #f6f2ea;
  --ink: #16140f;
  --ink-2: #55503f;
  --muted: #93896f;
  --gold: #d4af37;
  --gold-2: #c5a059;
  --ember: #e2792e;
  --ember-2: #c85a2a;
  --border: #e7e0cf;
  --border-2: rgba(22, 20, 15, 0.1);
  --font-head: "Spectral", "Iowan Old Style", serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; font-weight: 500; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--gold); color: var(--ink); }
.gold { color: var(--gold); }
.hidden { display: none !important; }
em, i.em { font-family: var(--font-head); font-style: italic; }

.container { max-width: 1600px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .container { padding: 0 3rem; } }

/* Scrollbar */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: #ddd3ba; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- TEXTURE, PROGRESS, AMBIENT LAYERS (nové) ---------- */
.grain {
  position: fixed; inset: 0; z-index: 998; pointer-events: none;
  opacity: 0.045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}
.progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 2.5px; z-index: 999; pointer-events: none; background: transparent; }
.progress-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  transition: width 0.08s linear;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- KICKER ---------- */
.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.kicker-center { justify-content: center; }
.kicker-line { height: 1px; width: 32px; background: linear-gradient(90deg, var(--gold), transparent); }
.kicker-line-after { background: linear-gradient(90deg, transparent, var(--gold)); }
.kicker span:last-child,
.kicker > span[data-i18n] {
  font-size: 0.86rem; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 600; color: #a87f2b; font-family: var(--font-body);
}
.kicker-on-dark span[data-i18n] { color: var(--gold); }

/* ---------- TYPOGRAFIE ---------- */
.h2 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.12; max-width: 46ch; }
.h2-light { color: #fff; }
.lead { margin-top: 1.75rem; color: var(--ink-2); font-weight: 400; line-height: 1.75; font-size: 1.08rem; max-width: 60ch; }
.mb-lg { margin-bottom: 3.5rem; }
.mb-xl { margin-bottom: 5rem; }

/* ---------- BUTTONS ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  border-radius: 999px; font-size: 0.92rem; cursor: pointer; border: none;
  font-family: var(--font-body); font-weight: 600; transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease); }
.btn-dark { background: var(--ink); color: #fff; padding: 0.85rem 1.5rem; }
.btn-dark:hover { background: var(--gold); color: var(--ink); }
.btn-arrow { position: relative; overflow: hidden; padding: 1.05rem 1.95rem; isolation: isolate; gap: 0.85rem; }
.btn-arrow > span { position: relative; z-index: 1; transition: color .3s; font-family: var(--font-head); font-style: italic; font-size: 1.05rem; font-weight: 500; }

.btn-arrow .arrow { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 400; line-height: 1; color: inherit;
  font-style: normal; transition: transform .45s var(--ease-soft), color .3s; }

.btn-arrow::before { content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: translateY(100%); transition: transform .5s var(--ease-soft); z-index: 0; }
.btn-arrow:hover::before { transform: translateY(0); }
.btn-arrow:hover > span, .btn-arrow:hover .arrow { color: #fff; }
.btn-arrow:hover .arrow { transform: translate(4px, -4px); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-outline { background: transparent; border: 1px solid rgba(22,20,15,0.35); color: var(--ink); }

/* ---------- HEADER ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1.4rem 0;
  transition: all .5s var(--ease-soft);
  border-bottom: 1px solid transparent;
  background: rgba(253, 252, 249, 0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.header.scrolled {
  background: rgba(253, 252, 249, 0.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
  box-shadow: 0 12px 40px rgba(22,20,15,0.04);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: baseline; gap: 0.5rem; }
.logo-mark { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 2.1rem; letter-spacing: -0.01em; }
.logo-light { color: #fff; }
.logo-sub { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); }
.nav { display: none; gap: 2.25rem; }
.nav-link { font-size: 0.92rem; color: var(--ink-2); position: relative; font-weight: 500; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--gold); transition: width .35s var(--ease-soft); }
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { width: 100%; }
.header-right { display: flex; align-items: center; gap: 0.75rem; }
@media (min-width: 1024px) { .nav { display: flex; } }

/* Lang switcher */
.lang { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--ink); font-weight: 500;
  border: 1px solid var(--border); border-radius: 999px; padding: 0.45rem 0.85rem; background: #fff; cursor: pointer; transition: border-color .3s; }
.lang-btn:hover { border-color: var(--gold); }
.chev { font-size: 0.7rem; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--border); border-radius: 14px;
  min-width: 7rem; display: none; overflow: hidden; box-shadow: 0 16px 40px rgba(22,20,15,.1); }
.lang-menu.open { display: block; }
.lang-menu button { display: block; width: 100%; text-align: left; padding: 0.65rem 1rem; background: #fff; border: none;
  font-size: 0.9rem; cursor: pointer; color: var(--ink); font-family: var(--font-body); }
.lang-menu button:hover { background: var(--bg-alt); }
.lang-menu button.active { color: var(--gold-2); font-weight: 700; }
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: inline-flex; } }

/* Burger */
.burger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 44px; height: 44px; background: none; border: none; cursor: pointer; position: relative; z-index: 60; }
.burger span { display: block; width: 26px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.45s cubic-bezier(.68,-0.55,.27,1.55), opacity 0.25s ease; }
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(135deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-135deg); }
@media (min-width: 1024px) { .burger { display: none; } }

/* Mobile menu */
.mobile-menu { max-height: 0; opacity: 0; overflow: hidden; background: rgba(253,252,249,0.98); backdrop-filter: blur(20px);
  transition: max-height .55s var(--ease-soft), opacity .4s ease; }
.mobile-menu.open { max-height: 560px; opacity: 1; }
.mobile-menu-inner { display: flex; flex-direction: column; padding: 1.75rem 0; }
.mobile-menu-inner a { font-family: var(--font-head); font-style: italic; font-size: 1.55rem; font-weight: 500; color: var(--ink);
  padding: 0.8rem 0; border-bottom: 1px solid var(--border); opacity: 0; transform: translateY(15px);
  transition: opacity .35s ease, transform .35s ease, color .2s ease, padding-left .2s ease; }
.mobile-menu.open .mobile-menu-inner a:nth-child(1) { transition-delay: .08s; opacity: 1; transform: translateY(0); }
.mobile-menu.open .mobile-menu-inner a:nth-child(2) { transition-delay: .13s; opacity: 1; transform: translateY(0); }
.mobile-menu.open .mobile-menu-inner a:nth-child(3) { transition-delay: .18s; opacity: 1; transform: translateY(0); }
.mobile-menu.open .mobile-menu-inner a:nth-child(4) { transition-delay: .23s; opacity: 1; transform: translateY(0); }
.mobile-menu.open .mobile-menu-inner a:nth-child(5) { transition-delay: .28s; opacity: 1; transform: translateY(0); }
.mobile-menu.open .mobile-menu-inner a:nth-child(6) { transition-delay: .33s; opacity: 1; transform: translateY(0); }
.mobile-menu-inner a:active, .mobile-menu-inner a:hover { color: var(--gold-2); padding-left: 0.5rem; }
.mobile-menu-inner .btn { margin-top: 1.5rem; padding: 1rem; }
.mobile-menu-inner .btn-dark { color: #ffffff !important; background-color: var(--ink); text-align: center; justify-content: center; font-family: var(--font-body); font-style: normal; }
.mobile-menu-inner .btn-dark:hover, .mobile-menu-inner .btn-dark:active { background-color: var(--gold); color: var(--ink) !important; }

/* ---------- HERO ---------- */
.hero { position: relative; padding: 7.25rem 0 3rem; overflow: hidden; background: var(--bg); }
@media (min-width: 768px) { .hero { padding: 8.75rem 0 4rem; } }

/* Velký zlatý "orbit" vzor — dva tenké prstence přesahující přes pravý okraj hero
   sekce, čistě kresba (žádná výplň), stejné umístění vychází z referenčního layoutu.
   Škáluje se přes clamp(), takže zůstává viditelný i na mobilu jako jemné pozadí. */
.hero-orbit { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orbit-ring {
  position: absolute; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.32);
}
/* Kruhy jsou vědomě mnohem větší než viditelná plocha hero sekce — vidět je
   jen jemný oblouk v horní části, zbytek je odseknutý přetečením (overflow)
   hero sekce dole a vpravo. Tím vzniká decentní, neobtěžující zdobný prvek
   podle referenčního obrázku, ne dvě plně viditelné velké kružnice. */
.orbit-ring--a {
  width: clamp(700px, 78vw, 1300px);
  top: clamp(160px, 20vw, 340px);
  right: clamp(-420px, -22vw, -160px);
}
.orbit-ring--b {
  width: clamp(560px, 58vw, 980px);
  top: clamp(230px, 30vw, 480px);
  right: clamp(-40px, 2vw, 90px);
  border-color: rgba(212, 175, 55, 0.22);
}
@media (max-width: 767px) {
  .orbit-ring--a { width: clamp(420px, 130vw, 720px); top: clamp(150px, 40vw, 260px); right: clamp(-260px, -50vw, -120px); }
  .orbit-ring--b { width: clamp(320px, 100vw, 560px); top: clamp(200px, 55vw, 340px); right: clamp(-60px, 4vw, 30px); }
}

/* Cursor-linked zlatý odlesk — sleduje kurzor jen v hero sekci, čistě zlatá barva */
.ember-glow {
  position: absolute; width: 340px; height: 340px; left: 0; top: 0; margin: -170px 0 0 -170px;
  border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(circle, rgba(212,175,55,0.26), rgba(212,175,55,0.08) 45%, transparent 72%);
  filter: blur(6px); transition: opacity .5s ease; transform: translate3d(-9999px,-9999px,0);
}
.ember-glow.active { opacity: 1; }
@media (pointer: coarse) { .ember-glow { display: none; } }

.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-title { font-size: clamp(3.1rem, 4.6vw, 5.8rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; max-width: 23ch; }
.hero-title .accent { color: var(--gold); }
.mask-line { display: block; overflow: hidden; }
.mask-line > span { display: block; transform: translateY(112%); }
.mask-line.play > span { transform: translateY(0); transition: transform 1.1s var(--ease-soft); }
.hero-lead { margin-top: 1.6rem; max-width: 62ch; color: var(--ink-2); font-weight: 400; line-height: 1.75; font-size: 1.12rem; }
.hero-lead2 { margin-top: 1rem; max-width: 58ch; color: var(--ink-2); font-weight: 400; line-height: 1.75; }
.hero-more { max-width: 58ch; }
.hero-toggle {
  display: none; margin-top: 0.85rem; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--gold-2); align-items: center; gap: 0.4rem;
}
.hero-toggle::after { content: "↓"; display: inline-block; transition: transform .3s var(--ease-soft); }
.hero-toggle.is-open::after { transform: rotate(180deg); }
@media (max-width: 767px) {
  .hero-more { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease-soft); }
  .hero-more.open { max-height: 20rem; }
  .hero-toggle { display: inline-flex; }
}
.hero-actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.scroll-down { position: relative; margin: 2.75rem auto 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); width: max-content; font-weight: 600; }
.scroll-down:hover { color: var(--ink); }
.scroll-down i { font-style: normal; animation: bounce 1.6s infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0);} 50% { transform: translateY(6px);} }

/* Na počítači (desktop) je hero zarovnaná doleva podle referenčního layoutu —
   na mobilu a tabletu zůstává beze změny (viz base .hero-inner výše, na střed). */
@media (min-width: 1024px) {
  .hero-inner { align-items: flex-start; text-align: left; padding-left: clamp(0px, 6vw, 100px); }
  .hero-inner .kicker { justify-content: flex-start; }
  .hero-inner .kicker-line-after { display: none; }
  .hero-actions { justify-content: flex-start; }
}

/* ---------- MARQUEE ---------- */
.marquee { position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); padding: 1.6rem 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 46s linear infinite; }
.marquee-track span.word { font-family: var(--font-head); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 500; padding: 0 2rem; color: var(--ink-2); }
.marquee-track span.star { color: var(--gold); }
@keyframes marquee { 0% { transform: translateX(0);} 100% { transform: translateX(-50%);} }

/* ---------- SECTIONS ---------- */
.section { padding: 6rem 0; position: relative; isolation: isolate; }
@media (min-width: 768px) { .section { padding: 9rem 0; } }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.section-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 15% 0%, rgba(212,175,55,0.13), transparent 60%),
              radial-gradient(ellipse 50% 40% at 100% 100%, rgba(226,121,46,0.1), transparent 60%);
}

/* Jemný tečkovaný vzor v pozadí sekcí — decentní textura, která obsah nepřebíjí */
.section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(22, 20, 15, 0.07) 1px, transparent 0);
  background-size: 25px 25px;
}
.section-alt::after {
  background-image: radial-gradient(circle at 1px 1px, rgba(22, 20, 15, 0.055) 1px, transparent 0);
}
.section-dark::after {
  background-image: radial-gradient(circle at 1px 1px, rgba(212, 175, 55, 0.16) 1px, transparent 0);
}

/* ---------- FILOZOFIE ---------- */
.philo-top { display: grid; gap: 3rem; margin-bottom: 5rem; }
@media (min-width: 1024px) { .philo-top { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: stretch; } }
.philo-quote { background: var(--bg-alt); border-left: 2px solid var(--gold); border-radius: 4px; padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.quote-mark { font-family: var(--font-head); font-size: 3.2rem; color: var(--gold); line-height: 1; }
.quote-text { font-family: var(--font-head); font-style: italic; font-size: 1.65rem; line-height: 1.32; letter-spacing: -0.01em; margin: 1rem 0 0; }
.quote-rule { display: block; height: 1px; width: 64px; background: var(--gold); margin: 1.5rem 0; }
.quote-by { color: var(--muted); font-size: 0.9rem; margin: 0; font-weight: 500; }
.chapters { display: grid; gap: 3.5rem; }
@media (min-width: 768px) { .chapters { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }
.chapter { border-top: 1px solid var(--border); padding-top: 2rem; }
.chapter-head { display: flex; align-items: baseline; gap: 1.25rem; }
.chapter-num { font-family: var(--font-head); font-style: italic; font-size: clamp(3rem,5vw,3.9rem); font-weight: 400;
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.chapter-title { font-size: 1.45rem; font-weight: 500; }
.chapter-text { margin-top: 1.25rem; color: var(--ink-2); font-weight: 400; line-height: 1.75; }

/* ---------- ČÍST VÍCE / progressive disclosure (nové) ---------- */
.clampable p {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-line-clamp: 3; transition: -webkit-line-clamp .2s;
}
.clampable.expanded p { -webkit-line-clamp: unset; display: block; overflow: visible; }
.text-toggle {
  margin-top: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--gold-2); transition: gap .25s var(--ease-soft), color .2s;
}
.text-toggle::after { content: "→"; display: inline-block; transition: transform .3s var(--ease-soft); }
.text-toggle.is-open::after { transform: rotate(90deg); }
.text-toggle:hover { color: var(--ember); gap: 0.6rem; }
.card-dark .text-toggle { color: var(--gold); }
.card-dark .text-toggle:hover { color: #fff; }
.why-item .text-toggle, .section-dark .text-toggle { color: var(--gold); }

/* ---------- SPECIALIZACE ---------- */
.spec-grid { display: grid; gap: 1.5rem; perspective: 1400px; }
@media (min-width: 1024px) { .spec-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.card { position: relative; overflow: hidden; padding: 2.75rem; display: flex; flex-direction: column; height: 100%;
  border-radius: 22px; transition: border-color .5s, transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft); transform-style: preserve-3d; will-change: transform; }
.card-dark { background: var(--ink); color: #fff; }
.card-light { background: #fff; border: 1px solid var(--border); }
.card:hover { box-shadow: 0 30px 70px -20px rgba(22,20,15,0.25); }
.card-ghost { position: absolute; right: -0.5rem; top: -2.5rem; font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: 11rem; line-height: 1; pointer-events: none; }
.card-dark .card-ghost { color: rgba(255,255,255,0.045); }
.card-light .card-ghost { color: rgba(22,20,15,0.035); }
.card-top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }

.card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.85rem; height: 2.85rem;
  border-radius: 999px; flex-shrink: 0; transition: transform 0.35s var(--ease-soft), background-color 0.3s ease, color .3s ease; }
.card-icon .card-svg, .card-icon svg { width: 1.35rem; height: 1.35rem; display: block; }
.card-dark .card-icon { border: 1px solid rgba(212,175,55,0.4); color: var(--gold); }
.card-light .card-icon { border: 1px solid var(--border); background: var(--bg-alt); color: var(--gold); }
.card:hover .card-icon { transform: scale(1.1) rotate(-6deg); background: var(--gold); color: var(--ink); }

.card-title { position: relative; font-size: clamp(2.2rem,4vw,3.1rem); font-weight: 500; font-style: italic; letter-spacing: -0.01em; margin-bottom: 1.5rem; }
.card-lead { position: relative; font-size: 1.06rem; font-weight: 400; line-height: 1.75; }
.card-dark .card-detail, .card-light .card-detail { position: relative; margin-top: 1rem; font-weight: 400; line-height: 1.75; }
.card-dark .card-detail { color: rgba(255,255,255,0.62); }
.card-light .card-detail { color: var(--ink-2); }
.roles { position: relative; margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.role-chip { border: 1px solid; border-radius: 999px; font-size: 0.75rem; padding: 0.4rem 0.9rem; font-weight: 500; }
.card-dark .role-chip { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); }
.card-light .role-chip { border-color: var(--border); background: var(--bg-alt); color: var(--ink); }
.geo { position: relative; margin-top: 1.75rem; display: flex; gap: 0.75rem; border-left: 2px solid var(--gold); padding: 0.3rem 0 0.3rem 1rem; }
.geo i { color: var(--gold); font-style: normal; }
.geo-label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #a87f2b; margin: 0 0 0.4rem; }
.geo-text { font-size: 0.9rem; color: var(--ink-2); line-height: 1.65; margin: 0; }
.card-foot { position: relative; margin-top: auto; padding-top: 2rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; font-weight: 600; font-family: var(--font-head); font-style: italic; }
.card-foot .line { height: 1px; width: 32px; background: var(--gold); }
.card-foot .a { color: var(--gold); font-family: var(--font-body); font-style: normal; }

/* ---------- SPOLUPRÁCE ---------- */
.process-grid { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .process-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }
.timeline-title { font-size: 1.55rem; font-weight: 500; font-style: italic; margin-bottom: 2.25rem; display: flex; align-items: center; gap: 1rem; }
.timeline-title .title-icon { width: 2.85rem; height: 2.85rem; padding: 0.65rem; border-radius: 50%;
  background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.4); color: var(--gold); flex: none;
  transition: transform 0.35s var(--ease-soft), background-color 0.3s ease, color .3s ease; }
.timeline:hover .timeline-title .title-icon { transform: scale(1.1) rotate(-6deg); background: var(--gold); color: var(--ink); }
.steps { position: relative; padding-left: 2rem; display: flex; flex-direction: column; gap: 2.25rem; }
.steps::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.step { position: relative; }
.step::before { content: ""; position: absolute; left: -2rem; top: 4px; width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 2px solid var(--gold); }
.section-alt .step::before { background: var(--bg-alt); }
.step-head { display: flex; align-items: baseline; gap: 0.75rem; }
.step-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; color: var(--gold-2); }
.step-title { font-family: var(--font-head); font-style: italic; font-size: 1.2rem; font-weight: 500; }
.step-text { margin-top: 0.5rem; color: var(--ink-2); font-weight: 400; line-height: 1.75; }

/* ---------- MAPA ---------- */
.map-head { display: grid; gap: 2rem; align-items: end; margin-bottom: 3rem; }
@media (min-width: 1024px) { .map-head { grid-template-columns: 1.4fr 1fr; } }
.cert-warning { display: flex; align-items: flex-start; gap: 0.75rem; background: #fff; border: 1px solid rgba(212,175,55,0.4); border-radius: 16px; padding: 1.35rem; }
.cert-warning i { color: var(--gold); font-style: normal; }
.cert-warning span { font-size: 0.9rem; font-weight: 600; line-height: 1.55; }
.map-wrap { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 1rem; }
@media (min-width: 768px) { .map-wrap { padding: 2.5rem; } }
.map-ratio { position: relative; width: 100%; aspect-ratio: 1023.53 / 570.37; }
.map-svg { width: 100%; height: 100%; overflow: visible; }
.pin { position: absolute; transform: translate(-50%, -50%); z-index: 1; }
.pin.pin-active { z-index: 30; }
.pin-btn { position: relative; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; }
.pin-dot { position: relative; width: 14px; height: 14px; border-radius: 999px; background: var(--gold); box-shadow: 0 0 14px rgba(212,175,55,0.7); border: 2px solid #fff; }
.pin-ring { position: absolute; width: 16px; height: 16px; border-radius: 999px; background: var(--gold); animation: pinPulse 2.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes pinPulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
.popup { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; width: 260px; z-index: 20;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft); }
.popup.open { opacity: 1; pointer-events: auto; }
.popup-card { background: rgba(255,255,255,0.97); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(22,20,15,0.14); padding: 1.4rem; text-align: left; }
.popup-city { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #a87f2b; }
.popup-role { font-family: var(--font-head); font-style: italic; font-size: 1.15rem; font-weight: 600; margin: 0.3rem 0; }
.popup-desc { font-size: 0.85rem; color: var(--ink-2); line-height: 1.55; margin: 0.5rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.popup-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 700; color: #a87f2b;
  background: rgba(212,175,55,0.12); padding: 0.3rem 0.7rem; border-radius: 999px; margin-top: 0.8rem; }
.popup .btn { margin-top: 1rem; width: 100%; padding: 0.65rem; }
.popup-close { position: absolute; top: 0.85rem; right: 0.85rem; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; }

/* ---------- VOLNÁ MÍSTA ---------- */
.vac-list { display: flex; flex-direction: column; }
.vac { position: relative; display: grid; gap: 1.5rem; padding: 2.4rem 0; border-top: 1px solid var(--border); transition: padding-left .35s var(--ease-soft); }
.vac:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 768px) { .vac { grid-template-columns: 1fr 1.25fr 0.75fr; gap: 2rem; padding-left: 1.5rem; } .vac:hover { padding-left: 2rem; } }
.vac::before { content: ""; position: absolute; left: 0; top: 2.4rem; bottom: 2.4rem; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-2)); transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease-soft); }
.vac:hover::before { transform: scaleY(1); }
.vac-loc { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.5rem; font-weight: 500; }
.vac-loc i { color: var(--gold); font-style: normal; }
.vac-role { font-family: var(--font-head); font-style: italic; font-size: clamp(1.5rem,3vw,2rem); font-weight: 500; line-height: 1.15; }
.vac-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 700; color: #a87f2b;
  background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.25); padding: 0.4rem 0.8rem; border-radius: 999px; margin-top: 1rem; }
.vac-desc { color: var(--ink-2); font-weight: 400; line-height: 1.75; }
.vac-tasks { margin-top: 1rem; display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .vac-tasks { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.vac-task { display: flex; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-2); }
.vac-task i { color: var(--gold); font-style: normal; }
.vac-cta { display: flex; align-items: center; }
@media (min-width: 768px) { .vac-cta { justify-content: flex-end; } }
.vac-cta .btn { border: 1px solid rgba(22,20,15,0.3); background: transparent; padding: 0.9rem 1.6rem; }
.vac-cta .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- PROČ M&R ---------- */
.why-grid { display: grid; gap: 3rem 2rem; }
@media (min-width: 768px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-item { position: relative; }
.why-item .why-ic { width: 3.6rem; height: 3.6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); font-family: var(--font-head); font-style: italic;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--gold); margin-bottom: 1.5rem; transition: background-color .4s, border-color .4s, transform .4s var(--ease-soft); }
.why-item:hover .why-ic { background: var(--gold); color: var(--ink); border-color: transparent; transform: rotate(-8deg) scale(1.06); }
.why-item h3 { font-size: 1.28rem; font-weight: 500; font-style: italic; color: #fff; margin-bottom: 0.75rem; }
.why-item p { color: rgba(255,255,255,0.62); font-weight: 400; line-height: 1.65; font-size: 0.92rem; }

/* ---------- KONTAKT ---------- */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.contact-title { font-size: clamp(2.5rem,5vw,3.9rem); font-style: italic; line-height: 1.08; }
.toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; margin-bottom: 2.5rem; }
.toggle-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: var(--ink); transition: transform .45s var(--ease-soft); }
.toggle.company .toggle-pill { transform: translateX(100%); }
.toggle-btn { position: relative; z-index: 1; background: none; border: none; padding: 0.95rem; cursor: pointer; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--ink-2); transition: color .3s; }
.toggle-btn.active { color: #fff; }
.form-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
@media (max-width: 640px) { .form-mode { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #a87f2b; margin-bottom: 0.55rem; }
.field input, .field textarea { background: transparent; border: none; border-bottom: 1px solid var(--border); padding: 0.75rem 0; font-family: var(--font-body); font-size: 1rem; color: var(--ink); outline: none; transition: border-color .3s; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field select {
  background: transparent; border: none; border-bottom: 1px solid var(--border); padding: 0.75rem 1.75rem 0.75rem 0;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); outline: none; transition: border-color .3s; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; border-radius: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355503f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat; background-position: right 0.2rem center; background-size: 13px;
}
.field select:focus { border-color: var(--gold); }
.field select option { color: var(--ink); }
.prof-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.prof-chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border); background: #fff; color: var(--ink-2); border-radius: 999px; padding: 0.55rem 1.05rem; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all .25s; }
.prof-chip:hover { border-color: var(--gold); }
.prof-chip.on { background: linear-gradient(135deg, var(--gold), var(--gold-2)); border-color: var(--gold); color: var(--ink); }
.submit-btn { margin-top: 2.5rem; padding: 1.05rem 2.1rem; }
.form-success { margin-top: 1.5rem; color: #1a7a3a; font-weight: 600; }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px;
}

/* ---------- PATIČKA ---------- */
.footer { background: var(--ink); color: #fff; padding: 3rem 0 1.5rem; overflow: hidden; position: relative; }
.footer-grid { display: grid; gap: 2.25rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1.3fr 1fr 1.3fr; } }
.footer-brand .logo-sub { color: var(--muted); }
.footer-tagline { margin-top: 1rem; color: rgba(255,255,255,0.62); font-weight: 400; line-height: 1.6; max-width: 30ch; font-style: italic; font-family: var(--font-head); font-size: 1.05rem; }
.footer-h { font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin: 0 0 1rem; }
.footer-col ul li { color: rgba(255,255,255,0.72); font-size: 0.9rem; margin-bottom: 0.55rem; }
.footer-col ul li.strong { color: #fff; font-weight: 600; }
.footer-col a:hover { color: var(--gold); }
.footer-col .muted { color: rgba(255,255,255,0.4); font-size: 0.75rem; }
.footer-word { padding-top: 1.75rem; font-family: var(--font-head); font-style: italic; font-weight: 600; letter-spacing: -0.02em;
  font-size: 18vw; line-height: 0.8; color: rgba(255,255,255,0.055); white-space: nowrap; }
.gold-dim { color: rgba(212,175,55,0.2); }
.footer-bottom { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.75rem; color: rgba(255,255,255,0.4); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }

/* ---------- REVEAL ANIMACE (scroll) ---------- */
.reveal { opacity: 0; transform: translateY(34px); filter: blur(6px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft), filter 1s var(--ease-soft); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }

/* =========================================================
   ÚPRAVA ZAROVNÁNÍ A ODSAZENÍ PRO MOBILY
   ========================================================= */
@media (max-width: 767px) {
  .container { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
  .card, .philo-quote, .map-wrap { padding: 1.85rem 1.4rem !important; }
  .vac { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }

  /* ---- HERO: méně mrtvého prostoru nahoře, víc razance hned na úvod ---- */
  .hero { padding: 6.75rem 0 2.25rem; }
  .hero-title { font-size: clamp(2.75rem, 11vw, 3.6rem) !important; }
  .hero-orbit { opacity: 0.9; }
  .hero-lead { font-size: 1.02rem; margin-top: 1.25rem; }
  .hero-actions { flex-direction: column; width: 100%; margin-top: 1.5rem; }
  .hero-actions .btn { width: 100%; }
  .scroll-down { margin-top: 2rem; }

  /* ---- PATIČKA: vše na střed + oprava velkého nápisu na pozadí (dřív useknutý mimo střed) ---- */
  .footer { padding: 2.5rem 0 1.25rem; }
  .footer-grid { text-align: center; justify-items: center; gap: 1.75rem; padding-bottom: 2rem; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-col { display: flex; flex-direction: column; align-items: center; }
  .footer-col ul { display: flex; flex-direction: column; align-items: center; }
  .footer-bottom { align-items: center; text-align: center; }
  .footer-word { font-size: 20vw; text-align: center; letter-spacing: -0.01em; padding-top: 1.25rem; }
}


/* --- ÚPRAVY PŘIDANÉ NA KONEC SOUBORU --- */

/* Posunutí Hero sekce nahoru */
.hero { padding: 5rem 0 2rem !important; }
@media (min-width: 768px) { .hero { padding: 6rem 0 2rem !important; } }
@media (max-width: 767px) { .hero { padding: 5rem 0 2rem !important; } }

/* Posunutí obsahu doprava na PC */
@media (min-width: 1024px) {
  .hero-inner { padding-left: clamp(40px, 12vw, 250px) !important; }
}

/* Oprava ornamentu a zmenšení obřích kruhů + přidání linky */
.hero-orbit::before {
  content: ""; position: absolute; top: 58%; left: 0; right: 18%; height: 1px;
  background: rgba(212, 175, 55, 0.25) !important; z-index: -1; transform: translateY(-50%);
}
.orbit-ring { top: 58% !important; transform: translateY(-50%) !important; }
.orbit-ring--a { width: 400px !important; right: 5% !important; top: 58% !important; }
.orbit-ring--b { width: 620px !important; right: calc(5% - 110px) !important; top: 58% !important; border-color: rgba(212, 175, 55, 0.15) !important; }
@media (max-width: 767px) {
  .hero-orbit::before { top: 75%; right: -10%; }
  .orbit-ring--a { width: 300px !important; right: -20% !important; top: 75% !important; }
  .orbit-ring--b { width: 480px !important; right: calc(-20% - 90px) !important; top: 75% !important; }
}

/* Oprava Hover efektu na tlačítku (zlatý text a rámeček, bez černého pozadí) */
.btn-outline { border: 1px solid rgba(22,20,15,0.15) !important; transition: border-color .3s, color .3s !important; }
.btn-outline.btn-arrow::before { display: none !important; }
.btn-outline.btn-arrow:hover { border-color: var(--gold) !important; }
.btn-outline.btn-arrow:hover > span, .btn-outline.btn-arrow:hover .arrow { color: var(--gold) !important; }

/* Zmenšení obrovského odsazení (vzduchu) v patičce */
.footer { padding: 1.5rem 0 1rem !important; }
.footer-grid { gap: 1.25rem !important; padding-bottom: 1.5rem !important; }
.footer-word { padding-top: 0.5rem !important; }
@media (max-width: 767px) {
  .footer { padding: 1.5rem 0 1rem !important; }
  .footer-grid { gap: 1.25rem !important; padding-bottom: 1.25rem !important; }
}




/* --- ÚPRAVY 2: ZAROVNÁNÍ, MOBILNÍ PŘEKRYV A HLAVIČKA --- */

/* 1. Oprava překrývání textu a hlavičky na mobilu (zvětšení horního místa) */
@media (max-width: 767px) { 
  .hero { padding: 7.5rem 0 2rem !important; } 
}

/* 2. Zmenšení mezery u "Posunout dolů" a zarovnání vlevo pod text na PC */
.scroll-down {
  margin-top: 1.5rem !important; /* Zmenšení mezery */
}
@media (min-width: 1024px) {
  .scroll-down {
    /* Nastaví stejné odsazení zleva jako má hlavní text */
    margin: 1.5rem 0 0 clamp(40px, 12vw, 250px) !important; 
    align-items: flex-start !important;
  }
}

/* 3. Jemná čára pod hlavičkou v základním stavu */
.header {
  border-bottom: 1px solid rgba(22, 20, 15, 0.08) !important;
}

/* 4. Mírné ztmavení hlavičky do šeda při scrollování dolů */
.header.scrolled {
  background: rgba(240, 238, 235, 0.95) !important; /* Jemně šedá */
  border-bottom: 1px solid rgba(22, 20, 15, 0.15) !important;
}


/* --- ÚPRAVA 3: Odlepení textu od hlavičky --- */

/* Větší odsazení shora, aby text nekolidoval s fixním menu */
.hero { 
  padding-top: 7.5rem !important; 
}

@media (min-width: 768px) { 
  .hero { 
    padding-top: 9.5rem !important; 
  } 
}




/* --- ÚPRAVA 4: Vrácení "Posunout dolů" na střed --- */
.scroll-down {
  margin: 2rem auto 0 !important;
  align-items: center !important;
}

@media (min-width: 1024px) {
  .scroll-down {
    margin: 2rem auto 0 !important;
    align-items: center !important;
  }
}



/* --- ÚPRAVA 5: Levé tlačítko černé a tučnější písmo u obou --- */

/* 1. Ztučnění písma pro obě tlačítka v úvodní sekci (původně 500, nyní 600) */
.hero-actions .btn-arrow > span {
  font-weight: 600 !important; 
}

/* 2. Změna levého tlačítka (btn-gold) na černé s bílým textem */
.hero-actions .btn-gold {
  background-color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}
.hero-actions .btn-gold > span, 
.hero-actions .btn-gold .arrow {
  color: #fff !important;
}

/* 3. Vypnutí původního "posuvného" hover efektu (který byl černý, takže by nebyl vidět) */
.hero-actions .btn-gold::before {
  display: none !important;
}

/* 4. Nový hover efekt pro levé tlačítko (při najetí zezlátne) */
.hero-actions .btn-gold:hover {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
}
.hero-actions .btn-gold:hover > span, 
.hero-actions .btn-gold:hover .arrow {
  color: var(--ink) !important;
}



/* --- ÚPRAVA 7: Bílé pozadí a poloviční černo-zlatý ornament --- */

/* 1. Čistě bílé pozadí pro úvodní hero sekci */
.hero { background-color: #ffffff !important; }

/* 2. Nastavení kruhů přesně na pravý okraj (ukáže se jen půlka) a zesílení čáry */
.orbit-ring { 
  right: 0 !important; 
  transform: translate(50%, -50%) !important; /* Posune střed přesně na hranu obrazovky */
  border-width: 1.5px !important; /* O kousek tlustší a výraznější linka */
}

/* 3. Vnitřní kruh – černý/grafitový */
.orbit-ring--a { 
  width: 500px !important; 
  border-color: rgba(22, 20, 15, 0.85) !important; 
}

/* 4. Vnější kruh – zlatý */
.orbit-ring--b { 
  width: 800px !important; 
  border-color: rgba(212, 175, 55, 0.85) !important; 
}

/* 5. Horizontální vodící linka (dojede až ke středu kruhů) */
.hero-orbit::before {
  right: 0 !important;
  height: 1px !important;
  background: rgba(212, 175, 55, 0.4) !important; /* Zlatavý nádech linky */
}

/* 6. Prizpůsobení velikosti polokruhů pro mobilní telefony */
@media (max-width: 767px) {
  .orbit-ring--a { width: 350px !important; }
  .orbit-ring--b { width: 550px !important; }
}


/* --- ÚPRAVA 8: Zjemnění ornamentů a odstranění vodorovné linky --- */

/* Úplné skrytí té dlouhé horizontální čáry */
.hero-orbit::before {
  display: none !important;
}

/* Ztenčení kruhů zpět na základní tenkou linku */
.orbit-ring {
  border-width: 1px !important;
}

/* Vnitřní kruh - velmi jemná poloprůhledná šedo-černá (odchod do stínu) */
.orbit-ring--a {
  border-color: rgba(22, 20, 15, 0.12) !important;
}

/* Vnější kruh - velmi jemná poloprůhledná zlatá (odchod do stínu) */
.orbit-ring--b {
  border-color: rgba(212, 175, 55, 0.2) !important;
}


/* --- ÚPRAVA 10: Úprava proporcí pro mobily (tlačítka ihned viditelná) --- */
@media (max-width: 767px) {
  /* Zmenšení horní mezery (text bude výš, ale stále bezpečně pod hlavičkou) */
  .hero {
    padding-top: 5.5rem !important; 
    padding-bottom: 1rem !important;
  }

  /* Mírné zmenšení hlavního nadpisu */
  .hero-title {
    font-size: clamp(2.2rem, 9vw, 3rem) !important;
  }

  /* Přitažení malého horního textu k nadpisu */
  .kicker {
    margin-bottom: 0.75rem !important;
  }

  /* Zmenšení a zahuštění hlavního odstavce */
  .hero-lead {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    margin-top: 0.75rem !important;
  }

  /* Přitažení tlačítek blíž k textu a jejich drobné zmenšení na výšku */
  .hero-actions {
    margin-top: 1.25rem !important;
    gap: 0.6rem !important;
  }
  .hero-actions .btn {
    padding: 0.8rem 1.2rem !important;
  }

  /* Přitažení šipky "Posunout dolů" (pokud by se tam pořád nevešla, zvaž její úplné skrytí na mobilu) */
  .scroll-down {
    margin-top: 1rem !important;
  }
}


@media (max-width: 767px) {
  .hero {
    padding-top: 7rem !important; 
  }
}


/* --- ÚPRAVA 11: Vynucení správného fontu a čitelnosti pro hlavní text --- */
.hero-lead {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 500 !important; 
  color: #55503f !important;
}


/* --- ÚPRAVA 12: Silnější rámeček pro pravé (světlé) tlačítko --- */
.hero-actions .btn-outline {
  border-width: 2px !important;
  border-color: rgba(22, 20, 15, 0.25) !important; /* Mírně ztmavená šedá pro lepší kontrast */
}

/* Zajištění, že se při najetí myší rámeček zbarví do zlata a zachová tloušťku 2px */
.hero-actions .btn-outline:hover {
  border-color: var(--gold) !important;
}


/* --- ÚPRAVA 13: Neprůstřelná sada fontů pro mobil a lepší čitelnost --- */
.hero-lead {
  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
  color: #55503f !important;
  line-height: 1.7 !important;
  letter-spacing: 0.015em !important;
}



  @media (max-width: 767px) {
    /* Zahuštění nadpisu pro větší údernost */
    .hero-title {
      font-size: clamp(2.4rem, 10vw, 3.2rem) !important;
      line-height: 1.05 !important;
      margin-bottom: 1rem !important;
    }

    /* Vizuální zkrácení textu jen na 4 řádky (aby to nebyla dlouhá šedá zeď) */
    .hero-lead {
      display: -webkit-box !important;
      -webkit-line-clamp: 4 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      font-size: 0.95rem !important;
      margin-bottom: 1.5rem !important;
      padding: 0 10px !important;
    }

    /* Vyladění mezer u tlačítek, aby to hned navazovalo */
    .hero-actions {
      gap: 0.75rem !important;
      margin-top: 0 !important;
    }
  }




/* --- STYLY: PRÉMIOVÁ KARTA PRO 3 BODY --- */

.hero-benefits {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  margin: 3.5rem auto 0 !important; /* Vycentrování na střed */
  width: 100% !important;
  max-width: 960px !important;
  
  /* Vytvoření "karty" pro ukotvení v prostoru */
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  box-shadow: 0 12px 30px rgba(22, 20, 15, 0.04) !important;
  
  position: relative !important;
  z-index: 2 !important;
}

/* Na PC 3 sloupce s luxusními oddělovacími linkami */
@media (min-width: 768px) {
  .hero-benefits { 
    grid-template-columns: 1fr 1fr 1fr !important; 
    padding: 2.5rem 3rem !important;
    gap: 3rem !important; 
    text-align: left !important;
  }
  .benefit {
    position: relative !important;
  }
  /* Oddělovací linky mezi body na PC */
  .benefit:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    right: -1.5rem !important;
    top: 10% !important;
    height: 80% !important;
    width: 1px !important;
    background: rgba(212, 175, 55, 0.2) !important;
  }
}

.ben-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  color: var(--ink) !important; 
  margin-bottom: 0.75rem !important;
}

/* Zářící zlatá tečka k nadpisu */
.gold-dot {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--gold) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.8) !important;
  flex-shrink: 0 !important;
}

.ben-text {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--ink-2) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

/* Sjednocení na mobilu */
@media (max-width: 767px) {
  .hero-benefits {
    text-align: center !important;
    padding: 1.5rem !important;
    gap: 2rem !important;
  }
  .ben-title {
    justify-content: center !important;
  }
}



/* --- ÚPRAVA: SRAŽENÍ MEZER A ZMENŠENÍ FONTŮ JAKO NA EXBEN --- */

/* Skrytí zbytečné šipky pod textem, která dělala mezeru */
.hero-toggle { 
  display: none !important; 
}

@media (max-width: 767px) {
  /* Zmenšení a srovnání horního nadpisu (Kicker) */
  .kicker { 
    margin-bottom: 0.75rem !important; 
  }
  .kicker span[data-i18n], .kicker span:last-child { 
    font-size: 0.65rem !important; 
    letter-spacing: 0.15em !important; 
  }
  .kicker-line { 
    display: none !important; 
  }

  /* Hlavní nadpis - zmenšit velikost a oříznout mezeru pod ním */
  .hero-title { 
    font-size: clamp(2.2rem, 9vw, 2.8rem) !important; 
    margin-bottom: 0.75rem !important; 
    line-height: 1.1 !important;
  }

  /* Text pod nadpisem - menší písmo, blíž k nadpisu, blíž k tlačítkům */
  .hero-lead {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    margin-top: 0 !important; 
    margin-bottom: 1.5rem !important; /* Přitažení odkazů mnohem blíž */
    padding: 0 10px !important;
  }

  /* Odkazy (tlačítka) blíž k sobě a sražené nahoru */
  .hero-actions {
    margin-top: 0 !important;
    gap: 0.75rem !important;
  }
  
  /* Zmenšení samotných tlačítek, aby nebyla tak obrovská */
  .btn {
    padding: 0.8rem 1.4rem !important;
    font-size: 0.85rem !important;
  }
}



/* --- ÚPRAVA: ZABRÁNĚNÍ POSUNU DO STRAN A OPRAVA VYSKAKOVACÍ MAPY --- */

/* 1. Zámek proti viklání webu do stran na mobilech */
html, body {
  overflow-x: hidden !important;
  width: 100%;
  position: relative;
}

/* 2. Vyskakovací okno na mapě se na mobilu ukáže vždy hezky uprostřed */
@media (max-width: 767px) {
  .popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
    width: 90vw !important;
    max-width: 340px !important;
    z-index: 9999 !important; /* Bude to nade vším, i nad hlavičkou */
  }
  
  .popup.open {
    transform: translate(-50%, -50%) scale(1) !important;
  }
  
  /* Přidá elegantní tmavé pozadí kolem kartičky, aby mapa nerušila text */
  .popup-card {
    box-shadow: 0 0 0 100vmax rgba(22, 20, 15, 0.65), 0 20px 50px rgba(0,0,0,0.2) !important;
  }
}



/* --- ÚPRAVA 16: Zrušení zvětšování/překrývání tlačítek při hoveru --- */
.hero-actions .btn:hover {
  /* Zruší jakékoliv zvětšování nebo posuny do stran, které rozbíjely layout */
  transform: translateY(-2px) !important; 
  /* Tlačítko se jen nepatrně zvedne nahoru (o 2 pixely), což je bezpečné a hezké */
  z-index: 10 !important; /* Pojistka, aby se rámečky chovaly korektně */
}

.hero-actions .btn:active {
  transform: translateY(0) !important; /* Při kliknutí si tlačítko "sedne" zpět */
}


@media (min-width: 992px) {
    /* 1. Úplné skrytí textu/tlačítka "POSUNOUT DOLŮ" na PC */
    .hero-toggle, #heroToggle {
      display: none !important;
    }

    /* 2. Zúžení běžícího pásu a jeho posunutí nahoru do obrazovky */
    /* Zacílí na element hned pod úvodní sekcí (nebo na obvyklé třídy pásu) */
/* 2. Zúžení běžícího pásu a nastavení správné mezery od tlačítek */
    .hero + div, .hero + section, .marquee, .ticker-wrap {
      margin-top: 0px !important; /* Zrušíme ten záporný posun, už není potřeba */
      position: relative !important;
      z-index: 50 !important;
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }

    /* 3. Přidání vzdušného prostoru pod tlačítka, aby na nich pás neseděl */
    .hero-actions {
      margin-bottom: 2rem !important; 
    }

    /* Úplné skrytí textu a šipky "POSUNOUT DOLŮ" na PC podle překladového atributu */
    [data-i18n="hero.scroll"] {
      display: none !important;
    }
    
    /* Schováme rovnou celý odkaz, který tento text obsahuje (aby zmizela i šipka) */
    a:has([data-i18n="hero.scroll"]),
    div:has(> [data-i18n="hero.scroll"]) {
      display: none !important;
    }
  }

  /* --- ÚPRAVA: Zvýraznění zlatého a černého kruhu --- */
  /* Zlatý kruh (vnitřní) */
  .orbit-ring--a {
    border-width: 1px !important;
    border-color: rgba(174, 166, 148, 0.833) !important; /* TADY: Změněno z 0.4 na 0.8 */
  }
  
  /* Černý/tmavý kruh (vnější) */
  .orbit-ring--b {
    border-width: 1px !important;
    border-color: rgba(212, 175, 55, 0.501) !important; /* TADY: Změněno z 0.4 na 0.8 */
  }







/* --- ÚPRAVA: Přesné vycentrování mapového okna (.popup a .popup-card) na mobilu --- */
@media (max-width: 991px) {
  
  /* Celé zatemněné pozadí / obal popup okna */
  .popup {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
  }

  /* Samotná karta s obsahem (Šumperk, texty, tlačítko) */
  .popup.open .popup-card,
  .popup-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 380px !important; /* Pevná maximální šířka, ať to na mobilu nevypadá obří */
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}


@media (max-width: 991px) {
  
  /* 1. Úplné vymazání kruhů v pozadí na mobilu */
  .orbit-ring, 
  .orbit-ring--a, 
  .orbit-ring--b, 
  .hero-orbits,
  .hero-background-circles {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  



/* --- ÚPRAVA: Zmenšení nápisu v preloaderu na mobilu, aby se vešel na střed --- */
@media (max-width: 991px) {
  .footer-word {
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important; /* Zmenšíme hlavní nápis, aby nepřetékal */
    letter-spacing: 0.1em !important;
  }
}}


/* --- Styly pro ikony v kontaktech --- */
.footer-col ul li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}

.contact-icon {
  width: 15px !important;
  height: 15px !important;
  fill: #d4af37 !important; /* Zlatá barva ikon */
  flex-shrink: 0 !important;
}






/* =========================================================
   FINÁLNÍ OPRAVY: PRELOADER, SÍDLO A KONTAKTY NA MOBILU
   ========================================================= */

/* 1. Odstranění kruhů a oprava preloaderu na mobilech */
@media (max-width: 991px) {
  .orbit-ring, .orbit-ring--a, .orbit-ring--b, .hero-orbits, .hero-background-circles {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .preloader-text-main {
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
    letter-spacing: 0.1em !important;
  }
}

/* 2. Zrušení globálního flexboxu u patičky (TÍM ZMIZÍ MEZERA U SÍDLA) */
.footer-col ul li {
  display: block !important; /* Zruší flexbox, který odtlačoval dvojtečku */
  margin-bottom: 6px !important;
}

/* Na mobilu vrátíme Společnost a Navigaci hezky na střed */
@media (max-width: 767px) {
  .footer-col ul li {
    text-align: center !important;
  }
}

/* 3. Obecné stylování ikon (nyní fungují hezky v řádku s textem) */
.contact-icon {
  display: inline-block !important;
  vertical-align: middle !important;
  width: 15px !important;
  height: 15px !important;
  margin-right: 8px !important;
  margin-bottom: 2px !important;
  fill: #d4af37 !important;
}

/* 4. Srovnání POUZE posledního sloupce (Kontakt) pod sebe na mobilu */
@media (max-width: 767px) {
  .footer-col:last-child ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Srovná ikony do úhledné lajny nalevo */
    width: fit-content !important;      /* Smrskne blok na šířku nejdelšího textu */
    margin: 0 auto !important;          /* Vycentruje tento stažený blok doprostřed obrazovky */
  }
  
  .footer-col:last-child ul li {
    display: flex !important; /* Pro kontakty zapneme zpět flexbox pro dokonalé srovnání */
    align-items: center !important;
    text-align: left !important;
    gap: 10px !important;
  }
  
  .footer-col:last-child ul li .contact-icon {
    margin-right: 0 !important;
  }
}




/* =========================================================
   FINÁLNÍ OPRAVA: VYSKAKOVACÍ MAPA NA MOBILU (CENTRUM)
   ========================================================= */

/* 1. Osvobození popupu z "pasti" rodiče. Přesuneme centrování mapového pinu jen na klikací tlačítko. */
.pin {
  transform: none !important; 
}
.pin-btn {
  transform: translate(-50%, -50%) !important;
}

/* 2. Zafixování vyskakovacího okna striktně na střed obrazovky nezávisle na pinu */
@media (max-width: 991px) {
  .popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    /* translate(-50%, -50%) zaručí přesný matematický střed displeje. Pomocí scale to malinko zmenšíme. */
    transform: translate(-50%, -50%) scale(0.92) !important; 
    width: 90vw !important;
    max-width: 320px !important; /* Omezení šířky, aby to nebylo moc robustní */
    z-index: 999999 !important; /* Vystřelí to nad úplně celou stránku vč. hlavičky */
  }
  
  .popup-card {
    padding: 1.25rem !important; /* Vzdušnější, ale menší vnitřní okraje pro mobil */
    /* Vytvoří to pohlcující tmavé pozadí kolem okna (ztmaví zbytek stránky) */
    box-shadow: 0 0 0 100vmax rgba(22, 20, 15, 0.75), 0 20px 50px rgba(0,0,0,0.3) !important;
  }

  /* 3. Zmenšení fontů uvnitř kartičky, ať je to na menším prostoru čitelnější */
  .popup-city {
    font-size: 0.65rem !important;
  }
  .popup-role {
    font-size: 1.05rem !important;
    margin: 0.2rem 0 !important;
  }
  .popup-desc {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 3 !important; /* Text se zkrátí max na 3 řádky, aby okno nebylo moc dlouhé */
  }
  .popup-badge {
    font-size: 0.65rem !important;
    padding: 0.25rem 0.6rem !important;
    margin-top: 0.6rem !important;
  }
}