/* ==============================================
   VARIABLES & BASE
   ============================================== */
:root {
  --bg: #ECE6DD;
  --bg-deep: #E3DCCF;
  --paper: #F9F7F2;
  --ink: #2A231E;
  --ink-soft: #5A4F45;
  --olive: #54634B;
  --olive-deep: #39432F;
  --clay: #B07A57;
  --clay-soft: #C99A7E;
  --line: rgba(42,35,30,0.13);

  --serif: 'Fraunces', serif;
  --sans: 'Jost', sans-serif;

  --xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --sm: clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem);
  --base: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  --md: clamp(1.0rem, 0.8rem + 1vw, 2.1rem);
  --lg: clamp(2.4rem, 1.8rem + 2.5vw, 4.2rem);
  --xl: clamp(3.2rem, 2.5rem + 5vw, 7.5rem);
  --mega: clamp(6rem, 14vw, 18rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ==============================================
   LAYOUT SYSTEM (THE FIX)
   ============================================== */
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  /* Бронебойные отступы по бокам, которые никогда не сломаются */
  padding-left: clamp(1.5rem, 5vw, 4rem);
  padding-right: clamp(1.5rem, 5vw, 4rem);
}

.section-pad {
  padding-block: clamp(5rem, 12vh, 9rem);
}

.bg-dark { background-color: var(--olive-deep); color: var(--paper); }
.bg-light { background-color: var(--bg-deep); }

/* ==============================================
   TYPOGRAPHY & COMPONENTS
   ============================================== */
h1, h2, h3, h4, .serif { font-family: var(--serif); font-weight: 400; line-height: 1.05; }
.italic { font-style: italic; }

a { text-decoration: none; color: inherit; }
img { width: 100%; height: 100%; object-fit: cover; display: block; }

.eyebrow {
  font-size: var(--xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--olive);
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.bg-dark .eyebrow { color: var(--clay-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--sans);
  font-size: var(--xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  padding: 1.1em 2.4em;
  border-radius: 100px;
  border: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.5s var(--ease);
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  white-space: nowrap;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
.btn:hover { color: var(--paper); }
.btn:hover::after { transform: translateY(0); }

.btn--fill { background: var(--olive); border-color: var(--olive); color: var(--paper); }
.btn--fill::after { background: var(--olive-deep); }
.btn--fill:hover { color: var(--paper); }

.btn--light { border-color: rgba(249, 247, 242, 0.4); color: var(--paper); }
.btn--light::after { background: var(--paper); }
.btn--light:hover { color: var(--olive-deep); }

.frame { border-radius: 4px; overflow: hidden; background: var(--bg-deep); }

/* Texture overlay */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==============================================
   NAVIGATION
   ============================================== */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  transition: padding 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(236, 230, 221, 0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.5rem; transition: padding 0.5s var(--ease);
}
nav.scrolled::before { opacity: 1; }
nav.scrolled { box-shadow: 0 1px 0 var(--line); }
nav.scrolled .nav-inner { padding-block: 1rem; }

.brand { display: inline-flex; align-items: center; z-index: 30; position: relative; }
.logo-img { height: clamp(36px, 5vw, 48px); width: auto; display: block; }
.logo-text { display: none; font-family: var(--serif); font-size: var(--md); letter-spacing: 0.04em; line-height: 0.9; }
.logo-text small { font-family: var(--sans); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.4em; display: block; text-transform: uppercase; color: var(--olive); margin-top: 0.3em; }

.nav-menu { display: flex; align-items: center; gap: 2.4rem; list-style: none; margin-left: 2rem; margin-right: 2.4rem; }
.nav-menu a { font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500; position: relative; }
.nav-menu a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: currentColor; transition: width 0.4s var(--ease); }
.nav-menu a:not(.btn):hover::after { width: 100%; }

.nav-backdrop { position: fixed; inset: 0; background: rgba(42, 35, 30, 0.45); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; z-index: 110; }
.nav-backdrop.open { opacity: 1; visibility: visible; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.4rem; z-index: 130; }
.burger span { width: 26px; height: 2px; background: var(--ink); transition: 0.4s var(--ease); }

/* MOBILE CTA FIX */
.mobile-cta { display: none !important; }

/* ==============================================
   HERO
   ============================================== */
.hero { position: relative; padding-top: clamp(10rem, 22vh, 14rem); padding-bottom: 5rem; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero-bgword {
  position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-size: var(--mega); line-height: 0.8;
  color: rgba(42, 35, 30, 0.04); white-space: nowrap; letter-spacing: -0.04em;
  z-index: 0; pointer-events: none; font-style: italic;
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; position: relative; z-index: 3; flex-wrap: wrap; }
.hero h1 { font-size: var(--xl); letter-spacing: -0.02em; }
.hero h1 .italic { color: var(--olive); }
.hero-lead { max-width: 38ch; color: var(--ink-soft); font-size: var(--base); padding-bottom: 0.6rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

.hero-gallery {
  position: relative; z-index: 2; margin-top: clamp(4rem, 10vh, 7rem);
  display: grid; grid-template-columns: 1.15fr 0.85fr 1fr; gap: clamp(1rem, 2vw, 2.5rem); align-items: end;
}
.hero-gallery .g1 { height: clamp(260px, 45vh, 480px); }
.hero-gallery .g2 { height: clamp(200px, 35vh, 360px); transform: translateY(-40px); }
.hero-gallery .g3 { height: clamp(280px, 48vh, 520px); }
.hero-gallery img { transition: transform 1.2s var(--ease); }
.hero-gallery figure:hover img { transform: scale(1.05); }

.hero-badge {
  position: absolute; z-index: 5; top: -60px; right: 10%;
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--olive); color: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; line-height: 1.5;
  transform: rotate(-12deg); box-shadow: 0 16px 32px rgba(57, 67, 47, 0.3);
  animation: spinwobble 9s ease-in-out infinite;
}
.hero-badge strong { font-family: var(--serif); font-size: 1.8rem; letter-spacing: 0; font-weight: 500; margin-block: 0.1em; }
@keyframes spinwobble { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-4deg); } }

/* ==============================================
   MARQUEE
   ============================================== */
.marquee { background: var(--olive-deep); color: var(--paper); padding: 1.4rem 0; overflow: hidden; white-space: nowrap; display: flex; }
.marquee-track { display: inline-flex; gap: 3rem; animation: marq 30s linear infinite; padding-right: 3rem; }
.marquee span { font-family: var(--serif); font-style: italic; font-size: var(--md); display: inline-flex; align-items: center; gap: 3rem; }
.marquee span::after { content: "✺"; font-style: normal; font-size: 1rem; color: var(--clay-soft); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ==============================================
   ABOUT
   ============================================== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.about-visual { position: relative; height: clamp(480px, 65vh, 680px); }
.about-visual .main { position: absolute; right: 0; top: 0; width: 85%; height: 85%; transform: rotate(2.5deg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); }
.about-visual .main img { transition: transform 1.4s var(--ease); }
.about-visual:hover .main img { transform: scale(1.05) rotate(-1deg); }
.note {
  position: absolute; left: 0; bottom: 0; width: 65%; background: var(--paper);
  padding: 2.5rem; transform: rotate(-3deg); z-index: 4;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.04);
}
.note h3 { font-size: var(--md); color: var(--olive); font-style: italic; margin-bottom: 0.8rem; }
.note p { font-size: var(--sm); color: var(--ink-soft); }

.about-text h2 { font-size: var(--lg); margin-bottom: 1.8rem; }
.about-text p { font-size: var(--base); color: var(--ink-soft); margin-bottom: 1.4rem; max-width: 48ch; }
.sign { margin-top: 2.5rem; display: flex; align-items: center; gap: 1.2rem; }
.sign b { font-family: var(--serif); font-style: italic; font-size: var(--md); font-weight: 400; }
.sign small { font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--olive); }

/* ==============================================
   STATS
   ============================================== */
.stats { border-block: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(2.5rem, 5vw, 4rem) 1.5rem; text-align: center; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat .num { font-family: var(--serif); font-size: var(--lg); line-height: 1; color: var(--olive-deep); }
.stat .num span { color: var(--clay); }
.stat .lbl { font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); margin-top: 1rem; }

/* ==============================================
   SERVICES LIST
   ============================================== */
.services-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 4rem; }
.services-head h2 { font-size: var(--xl); }
.services-head h2 .italic { color: var(--olive); }
.services-head p { max-width: 40ch; color: var(--ink-soft); font-size: var(--base); }

.srow {
  display: grid; grid-template-columns: 0.6fr 5fr 3fr; gap: 2rem;
  align-items: center; padding: clamp(1.8rem, 3vw, 2.5rem) 1.5rem;
  border-top: 1px solid var(--line); transition: background 0.4s var(--ease);
  cursor: pointer; border-radius: 8px;
}
.srow:last-child { border-bottom: 1px solid var(--line); border-radius: 0; }
.srow:hover { background: rgba(249, 247, 242, 0.6); }
.srow .n { font-family: var(--serif); font-size: var(--md); color: var(--clay); }
.srow h3 { font-size: var(--md); transition: transform 0.4s var(--ease); }
.srow:hover h3 { transform: translateX(0.5rem); }
.srow .desc { font-size: var(--sm); color: var(--ink-soft); margin-top: 0.5rem; max-width: 55ch; }
.srow .tag { justify-self: end; text-align: right; font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--olive); font-weight: 500; }
.scat { padding: clamp(2.6rem, 4.5vw, 4rem) 1.5rem 0.4rem; }
.scat:first-child { padding-top: 0.4rem; }
.scat .scat-k { font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--clay); display: flex; align-items: center; gap: 0.7em; }
.scat h3 { font-family: var(--serif); font-size: var(--lg); margin-top: 0.5rem; line-height: 1.05; }
.scat h3 .italic { color: var(--olive); font-style: italic; }
.scat + .srow { border-top: none; }

.preview {
  position: fixed; top: 0; left: 0; width: 260px; height: 320px;
  z-index: 80; pointer-events: none; overflow: hidden; border-radius: 4px;
  opacity: 0; transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); background: var(--olive);
}
.preview.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ==============================================
   FEATURE (Piercing)
   ============================================== */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: center; }
.feature-visual { position: relative; height: clamp(400px, 60vh, 650px); border-radius: 8px; overflow: hidden; }
.feature-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(57, 67, 47, 0.6), transparent); }
.brandtag { position: absolute; bottom: 0; left: 0; background: var(--paper); color: var(--olive-deep); padding: 1.2rem 2rem; font-family: var(--serif); font-style: italic; font-size: var(--md); z-index: 2; border-top-right-radius: 8px; }

.feature-text h2 { font-size: var(--lg); margin-bottom: 1.5rem; }
.feature-text h2 .italic { color: var(--clay-soft); }
.feature-text p { color: rgba(249, 247, 242, 0.85); font-size: var(--base); margin-bottom: 2rem; max-width: 50ch; }
.flist { list-style: none; margin-bottom: 2.5rem; display: grid; gap: 1rem; }
.flist li { display: flex; gap: 1rem; align-items: flex-start; font-size: var(--sm); color: rgba(249, 247, 242, 0.9); }
.flist li::before { content: "✓"; color: var(--clay-soft); font-weight: 600; }

/* ==============================================
   PRICING
   ============================================== */
.pricing-head { text-align: center; margin-bottom: 4rem; }
.pricing-head h2 { font-size: var(--xl); margin-top: 1rem; }
.pricing-head h2 .italic { color: var(--olive); }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1.5rem; }
@media(max-width:880px){ .price-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:560px){ .price-grid { grid-template-columns: 1fr; } }
a.pcat-card { text-decoration:none; color:inherit; }
.pcat { font-size:var(--xs); text-transform:uppercase; letter-spacing:.22em; color:var(--clay); }
.pcat-card h3 { font-size:var(--md); }
.pcat-desc { font-size:var(--sm); color:var(--ink-soft); line-height:1.5; }
.pcat-arrow { margin-top:auto; padding-top:1rem; font-size:var(--sm); color:var(--olive); }
.pcard.dark { background:#15130F; color:var(--paper); border-color:#15130F; }
.pcard.dark h3 { color:var(--paper); }
.pcard.dark .pcat { color:var(--clay-soft); }
.pcard.dark .pcat-desc { color:rgba(249,247,242,.72); }
.pcard.dark .pcat-arrow { color:var(--clay-soft); }
.pcard.dark::before { background:var(--clay-soft); }
.pcard {
  background: var(--paper); padding: 2.5rem; border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); border-radius: 4px;
}
.pcard::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--olive); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.pcard:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.08); }
.pcard:hover::before { transform: scaleX(1); }
.pcard.feat { background: var(--olive); color: var(--paper); }
.pcard.feat .pmeta, .pcard.feat .pdesc { color: rgba(249, 247, 242, 0.8); }
.pcard.feat::before { background: var(--clay-soft); }

/* cena POD názvem (jednotně u všech karet) */
.ptop { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.pcard h3 { font-size: var(--md); }
.pprice { font-family: var(--serif); font-size: var(--md); color: var(--clay); text-align: left; }
.pcard.feat .pprice { color: var(--clay-soft); }

.pmeta { font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--olive); }
.pdesc { font-size: var(--sm); color: var(--ink-soft); margin-top: auto; padding-top: 1rem; }
.pnote { text-align: center; margin-top: 3rem; font-size: var(--sm); color: var(--ink-soft); }

/* ==============================================
   PROCESS (Accordion)
   ============================================== */
.process { border-top: 1px solid var(--line); }
.process-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(4rem, 8vw, 8rem); align-items: start; }
.process-title h2 { font-size: var(--lg); margin-bottom: 2.5rem; }
.process-title h2 .italic { color: var(--olive); }
.accent-note { background: var(--clay); color: var(--paper); padding: 2.5rem; transform: rotate(-2deg); box-shadow: 0 20px 40px rgba(176, 122, 87, 0.25); border-radius: 4px; }
.accent-note p { font-size: var(--sm); line-height: 1.65; }
.accent-note p+p { margin-top: 1.2rem; }

.acc-item { border-bottom: 1px solid var(--line); overflow: hidden; }
.acc-item:first-child { border-top: 1px solid var(--line); }
.acc-q { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.8rem 0; font-family: var(--serif); font-size: var(--md); cursor: pointer; transition: color 0.4s var(--ease), padding 0.4s var(--ease); }
.acc-q:hover { color: var(--olive); padding-left: 0.8rem; }
.acc-q .pm { font-family: var(--sans); font-weight: 300; font-size: 1.8rem; transition: transform 0.4s var(--ease); flex-shrink: 0; }
.acc-item.open .acc-q .pm { transform: rotate(45deg); }
.acc-a { max-height: 0; transition: max-height 0.5s var(--ease), padding 0.5s var(--ease); }
.acc-item.open .acc-a { max-height: 250px; padding-bottom: 1.8rem; }
.acc-a p { font-size: var(--base); color: var(--ink-soft); max-width: 55ch; }

/* ==============================================
   QUOTES & GALLERY
   ============================================== */
.quotes { border-block: 1px solid var(--line); }
.quotes .eyebrow { display: flex; justify-content: center; margin-bottom: 3.5rem; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.qcard { background: var(--paper); padding: 3rem 2.5rem; position: relative; border-radius: 4px; border: 1px solid rgba(0,0,0,0.03); }
.qcard .mark { font-family: var(--serif); font-size: 5rem; line-height: 0.4; color: var(--clay-soft); height: 2.2rem; display: block; }
.qcard p { font-family: var(--serif); font-style: italic; font-size: var(--base); color: var(--ink); margin-bottom: 2rem; line-height: 1.5; }
.qcard .who { font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--olive); }

.gallery-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 3rem; }
.gallery-head h2 { font-size: var(--lg); }
.gallery-head a { font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--olive); border-bottom: 1px solid var(--olive); padding-bottom: 0.4rem; }
.gphotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.8rem, 1.5vw, 1.5rem); }
.gphotos figure { height: clamp(200px, 25vw, 360px); }
.gphotos figure:nth-child(2), .gphotos figure:nth-child(4) { transform: translateY(30px); }
.gphotos img { transition: transform 1s var(--ease); }
.gphotos figure:hover img { transform: scale(1.08); }

/* ==============================================
   CONTACT
   ============================================== */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(4rem, 8vw, 8rem); align-items: center; }
.contact h2 { font-size: var(--xl); margin-bottom: 1.5rem; }
.contact h2 .italic { color: var(--clay-soft); }
.cinfo { display: grid; gap: 1rem; margin-bottom: 1rem; }
.cinfo .row span { display: block; font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--clay-soft); margin-bottom: 0.7rem; }
.cinfo .row a, .cinfo .row p { font-family: var(--serif); font-size: 0.6rem color: var(--paper); line-height: 0.9; word-wrap: break-word; }
.contact-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.map { position: relative; height: clamp(400px, 55vh, 600px); border-radius: 8px; border: 1px solid rgba(249, 247, 242, 0.15); overflow: hidden; background: #ECE6DD; }
.map svg.mapfig { width: 100%; height: 100%; display: block; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-card { position: absolute; top: 1rem; left: 1rem; background: var(--paper); border-radius: 7px; padding: .85rem 1rem; box-shadow: 0 12px 30px rgba(0,0,0,.18); display: flex; gap: .9rem; align-items: flex-start; max-width: 74%; z-index: 3; }
.map-card .t b { font-family: var(--serif); font-size: 1rem; color: var(--ink); display: block; line-height: 1.2; }
.map-card .t span { display: block; font-family: var(--sans); font-size: .78rem; color: var(--ink-soft); margin-top: 3px; }
.map-card .t a { color: var(--olive); font-weight: 500; transition: color .3s; }
.map-card .t a:hover { color: var(--clay); }
.map-card .t .mc-hours { color: var(--clay); }
.eshop-banner { background: var(--paper); border-radius: 10px; padding: clamp(2.2rem, 4vw, 3.4rem) clamp(2rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.05); }
.eshop-banner .eb-text h2 { font-size: var(--lg); margin-top: 0.8rem; }
.eshop-banner .eb-text h2 .italic { color: var(--olive); }
.eshop-banner .eb-text p { color: var(--ink-soft); margin-top: 0.7rem; max-width: 46ch; font-size: var(--sm); }
.map-card a.ext { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--olive); display: flex; align-items: center; justify-content: center; transition: background .3s, transform .3s; }
.map-card a.ext:hover { background: var(--olive-deep); transform: translateY(-1px); }
.map-card a.ext svg { width: 15px; height: 15px; }
.mpin-ring { transform-box: fill-box; transform-origin: center; animation: mappulse 2.8s ease-out infinite; }
@keyframes mappulse { 0% { transform: scale(.5); opacity: .55; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mpin-ring { animation: none; } }
.road-label { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; fill: #6E6256; text-transform: uppercase; font-weight: 500; }
.road-label-sm { font-family: var(--sans); font-size: 10px; letter-spacing: .12em; fill: #8A7C6C; text-transform: uppercase; font-weight: 500; }
.lm-label { font-family: var(--sans); font-size: 11.5px; letter-spacing: .1em; fill: #3C4631; font-weight: 600; }
.lm-label-sm { font-family: var(--sans); font-size: 10px; letter-spacing: .08em; fill: #5A4F45; font-weight: 600; }
.river-label { font-family: var(--serif); font-style: italic; font-size: 16px; fill: #5F756E; }
.river-label-sm { font-family: var(--serif); font-style: italic; font-size: 12px; fill: #6E8079; }

/* ==============================================
   FOOTER
   ============================================== */
footer { padding-block: clamp(4rem, 8vw, 6rem) 2rem; color: var(--bg); background: var(--ink); }
.foot-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(236, 230, 221, 0.15); }
.foot-brand { font-family: var(--serif); font-size: var(--lg); }
.foot-brand small { font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; display: block; margin-top: 0.8rem; color: var(--clay-soft); }
.foot-cols { display: flex; gap: clamp(3rem, 7vw, 8rem); flex-wrap: wrap; }
.foot-col h4 { font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--clay-soft); margin-bottom: 1.5rem; font-weight: 500; }
.foot-col a, .foot-col p { display: block; font-size: var(--sm); color: rgba(236, 230, 221, 0.8); margin-bottom: 0.8rem; transition: color 0.3s; }
.foot-col a:hover { color: var(--clay-soft); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding-top: 2.5rem; font-size: var(--xs); color: rgba(236, 230, 221, 0.5); letter-spacing: 0.05em; }

/* ==============================================
   ANIMATIONS
   ============================================== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 980px) {
  .nav-menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(85vw, 360px); margin: 0;
    background: var(--paper); flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 2rem; padding: 2rem clamp(2rem, 8vw, 4rem);
    transform: translateX(105%); transition: transform 0.5s var(--ease);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.15); z-index: 115;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu a { font-size: var(--md); }
  .nav-menu .btn { display: none; } /* Hide standard button in mobile menu */
  
  .burger { display: flex; z-index: 130; }
  
  /* PROPER MOBILE CTA DISPLAY */
  .mobile-cta {
    display: flex !important; align-items: center; justify-content: center;
    position: fixed; left: 1rem; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 90; padding: 1.2rem; border-radius: 100px;
    background: var(--olive); color: var(--paper);
    font-size: var(--xs); text-transform: uppercase; letter-spacing: 0.22em; font-weight: 600;
    box-shadow: 0 14px 34px rgba(57, 67, 47, 0.35);
    transition: opacity 0.3s, visibility 0.3s, transform 0.15s;
  }
  .nav-backdrop.open ~ .mobile-cta { opacity: 0; visibility: hidden; }
  .mobile-cta:active { transform: scale(0.97); }
  
  body { padding-bottom: 6rem; }
  
  .hero-gallery { grid-template-columns: 1fr 1fr; }
  .hero-gallery .g3 { grid-column: 1 / -1; height: clamp(240px, 45vh, 380px); }
  .hero-gallery .g2 { transform: none; }
  
  .about-grid, .feature-grid, .process-grid, .contact-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  
  .gphotos { grid-template-columns: 1fr 1fr; }
  .gphotos figure { transform: none !important; }
  .preview { display: none; }
}

@media (max-width: 560px) {
  .srow { grid-template-columns: auto 1fr; gap: 1rem 1.2rem; }
  .srow .tag { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

/* === BANNERY SLUZEB (bod 8 + 13) === */
.svc-banners { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.svc-banner { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:230px; padding:1.6rem; border-radius:10px; background:var(--paper); border:1px solid var(--line); color:var(--ink); overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.svc-banner:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(42,35,30,.14); }
.svc-banner .bk { font-size:var(--xs); text-transform:uppercase; letter-spacing:.22em; color:var(--clay); margin-bottom:.5rem; }
.svc-banner h3 { font-family:var(--serif); font-size:1.55rem; line-height:1.12; margin:0 0 .5rem; }
.svc-banner p { font-size:var(--sm); color:var(--ink-soft); margin:0 0 1rem; line-height:1.45; }
.svc-banner .arrow { font-size:var(--sm); letter-spacing:.04em; color:var(--olive); }
.svc-banner.dark { background:#15130F; color:var(--paper); border-color:#15130F; }
.svc-banner.dark .bk { color:var(--clay-soft); }
.svc-banner.dark p { color:rgba(249,247,242,.72); }
.svc-banner.dark .arrow { color:var(--clay-soft); }
@media(max-width:980px){ .svc-banners { grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .svc-banners { grid-template-columns:1fr; } }

/* === ZLATY SALON (bod 6) === */
.zlaty-band { padding:3rem 0; background:var(--bg-deep); text-align:center; }
.zlaty-band .ze { display:block; font-size:var(--xs); text-transform:uppercase; letter-spacing:.22em; color:var(--clay); margin-bottom:.4rem; }
.zlaty-band .zh { font-family:var(--serif); font-weight:400; margin:0 0 .5rem; }
.zlaty-band .zp { color:var(--ink-soft); font-size:var(--sm); margin:0 0 2.2rem; }
.zlaty-row { display:flex; align-items:flex-start; justify-content:center; gap:2.6rem; flex-wrap:wrap; }
.zlaty-row figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:.7rem; transition:transform .4s var(--ease); }
.zlaty-row figure:hover { transform:translateY(-5px); }
.zlaty-row img { width:140px; height:auto; display:block; }
.zlaty-row figcaption { font-family:var(--serif); font-size:var(--md); color:var(--ink); line-height:1; }
@media(max-width:600px){ .zlaty-row { gap:1.4rem; } .zlaty-row img { width:100px; } }

/* === ACCORDION KATEGORII SLUZEB (bod 7) === */
.svc-acc { margin-top:2.5rem; }
.svc-cat { border-bottom:1px solid var(--line); }
.svc-cat:first-child { border-top:1px solid var(--line); }
.svc-head { display:flex; align-items:center; gap:1.1rem; width:100%; padding:1.6rem 0; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--serif); color:var(--ink); transition:color .4s var(--ease), padding .4s var(--ease); }
.svc-head:hover { color:var(--olive); padding-left:.6rem; }
.svc-head .cn { font-size:var(--xs); font-family:var(--sans); color:var(--clay); letter-spacing:.1em; min-width:2.2rem; }
.svc-head .ct { font-size:1.5rem; flex:1; }
.svc-head .cc { font-family:var(--sans); font-size:var(--xs); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.12em; }
.svc-head .pm { font-family:var(--sans); font-weight:300; font-size:1.7rem; line-height:1; transition:transform .4s var(--ease); flex-shrink:0; }
.svc-cat.open .svc-head .pm { transform:rotate(45deg); }
.svc-body { max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.svc-cat.open .svc-body { max-height:760px; }
.svc-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0 .9rem 3.3rem; border-top:1px solid var(--line); color:var(--ink); transition:color .3s var(--ease), padding .3s var(--ease); }
.svc-row:hover { color:var(--olive); padding-left:3.8rem; }
.svc-row .st { font-size:var(--base); }
.svc-row .sp { font-size:var(--sm); color:var(--clay); white-space:nowrap; }
.svc-row .badge-dbp { display:inline-block; margin-left:.6rem; font-family:var(--sans); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; background:#15130F; color:var(--paper); padding:.18rem .5rem; border-radius:4px; vertical-align:middle; }
@media(max-width:560px){ .svc-row { padding-left:2.2rem; } .svc-row:hover{ padding-left:2.6rem; } .svc-head .cc{ display:none; } }


/* === KATEGORIE-KARTY (model dle ref webu) === */
.cat-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:2.6rem; }
.cat-card { position:relative; display:block; min-height:360px; border-radius:12px; overflow:hidden; color:var(--paper); }
.cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.cat-card:hover img { transform:scale(1.05); }
.cat-card .cat-ov { position:absolute; inset:0; background:linear-gradient(to top, rgba(21,19,15,.88) 0%, rgba(21,19,15,.35) 45%, rgba(21,19,15,.05) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:2.2rem; }
.cat-card .cat-ov h3 { font-family:var(--serif); font-size:2.1rem; margin:0 0 .5rem; }
.cat-card .cat-ov p { font-size:var(--sm); color:rgba(249,247,242,.86); margin:0 0 1.1rem; max-width:36ch; line-height:1.5; }
.cat-card .cat-ov .go { font-size:var(--sm); letter-spacing:.05em; color:var(--clay-soft); }
@media(max-width:680px){ .cat-cards { grid-template-columns:1fr; } .cat-card{ min-height:300px; } }

.badge-db { display:inline-block; font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); background:var(--olive); padding:.22rem .6rem; border-radius:20px; margin-left:.6rem; vertical-align:middle; }
/* Accordion sluzeb */
.scat-group { border-top:1px solid var(--line); }
.scat-group:first-child { border-top:none; }
.scat.scat-head { padding:1.5rem 1.5rem; cursor:pointer; user-select:none; display:flex; flex-wrap:wrap; align-items:center; column-gap:1rem; transition:background .3s var(--ease); }
.scat.scat-head:hover { background:rgba(249,247,242,.5); }
.scat.scat-head .scat-k { width:100%; }
.scat.scat-head h3 { margin-top:.3rem; font-size:clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem); line-height:1.12; }
.scat-pm { margin-left:auto; align-self:center; font-family:var(--serif); font-size:1.5rem; line-height:1; color:var(--clay); transition:transform .4s var(--ease); }
.scat-group.open .scat-pm { transform:rotate(45deg); }
.scat-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s cubic-bezier(.4,0,.2,1); }
.scat-group.open .scat-panel { grid-template-rows:1fr; }
.scat-panel-inner { overflow:hidden; min-height:0; }
.scat-panel .srow:first-child { border-top:1px solid var(--line); }
/* plynula kaskada: jemne vyplynuti zdola se zaostrenim z rozmazani */
.scat-panel-inner .srow {
  opacity:0; transform:translateY(18px); filter:blur(5px);
  transition: opacity .75s var(--ease), transform .85s cubic-bezier(.16,1,.3,1), filter .75s var(--ease);
}
.scat-group.open .scat-panel-inner .srow { opacity:1; transform:translateY(0); filter:blur(0); }
.scat-group.open .scat-panel-inner .srow:nth-child(1){ transition-delay:.08s; }
.scat-group.open .scat-panel-inner .srow:nth-child(2){ transition-delay:.16s; }
.scat-group.open .scat-panel-inner .srow:nth-child(3){ transition-delay:.24s; }
.scat-group.open .scat-panel-inner .srow:nth-child(4){ transition-delay:.32s; }
.scat-group.open .scat-panel-inner .srow:nth-child(5){ transition-delay:.40s; }
.scat-group.open .scat-panel-inner .srow:nth-child(6){ transition-delay:.48s; }

.hero-badge-sec { position:absolute; z-index:6; top:92px; right:3%; width:94px; height:94px; border-radius:50%; background:var(--clay); color:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:.5rem; text-transform:uppercase; letter-spacing:.12em; line-height:1.45; transform:rotate(7deg); box-shadow:0 12px 26px rgba(0,0,0,.22); text-decoration:none; transition:transform .4s var(--ease); }
.hero-badge-sec:hover { transform:rotate(2deg) scale(1.06); }
.hero-badge-sec strong { font-family:var(--serif); font-size:1.05rem; letter-spacing:0; font-weight:500; margin-block:.06em; }
.hero-voucher { margin-top:1.1rem; }
.hero-voucher a { display:inline-flex; align-items:center; gap:.45em; font-size:var(--sm); color:var(--clay); font-weight:500; border-bottom:1px solid var(--clay); padding-bottom:.12em; transition:color .3s, border-color .3s; }
.hero-voucher a:hover { color:var(--olive); border-color:var(--olive); }
.scat-group.open .scat-panel-inner .srow:nth-child(7){ transition-delay:.56s; }
.foot-partner { margin-top:.6rem; opacity:.92; }
@media (max-width:980px){ .hero-badge-sec{ top:auto; bottom:-30px; right:4%; width:80px; height:80px; } }