/* Písma na vlastnom serveri (okt. 2026) – Outfit a Source Sans 3 z Google Fonts,
   licencia SIL Open Font License 1.1. Variabilné woff2: jeden súbor = všetky hrúbky.
   Len latin + latin-ext (slovenská diakritika). Návštevník neposiela IP adresu Googlu. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-surface: #ffffff;
  --color-surface-alt: #f4f2ef;
  --color-brand: #f04603;
  --color-brand-hover: #d63e02;
  /* modrá #1F2DA8 vyradená z identity (okt. 2026) – token ukazuje na značkovú oranžovú */
  --color-secondary: var(--color-brand);
  --color-secondary-hover: var(--color-brand-hover);
  --color-text: #141414;
  --color-text-muted: #6b6762;
  --color-on-brand: #ffffff;
  --color-on-secondary: #ffffff;
  --color-border: #e6e2dd;
  --color-footer: #f5f5f5; /* neutrálna svetlosivá pätičky – béžová alt plocha bola zamietnutá */

  --orange: var(--color-brand);
  --orange-deep: var(--color-brand-hover);
  --navy: var(--color-secondary);
  --navy-deep: var(--color-secondary-hover);
  --font-display: "Outfit", Arial, Helvetica, sans-serif;
  --font-text: "Source Sans 3", Arial, Helvetica, sans-serif;
  --white: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --page-gutter: clamp(40px, 5vw, 72px);
  --panel-radius: 28px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-brand);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
  max-width: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: Montserrat, Arial, Helvetica, sans-serif;
}

/* Notch / Dynamic Island / status bar — orange strip (may be 0px in Safari browser) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: env(safe-area-inset-top, 0px);
  background: var(--color-brand);
  pointer-events: none;
}

html:has(body.page-home) {
  background: var(--color-surface);
}

body.page-home {
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-text);
}

.page-home h1,
.page-home h2,
.page-home h3,
.page-home .hero-title,
.page-home .contact-mega,
.page-home .contact-card-title {
  font-family: var(--font-display);
  font-weight: 300;
}

.page-home h1 strong,
.page-home h2 strong,
.page-home h3 strong,
.page-home .hero-title strong,
.page-home .contact-mega strong,
.page-home .contact-card-title strong,
.page-home .social-copy h2 span {
  font-weight: 700;
  color: var(--color-secondary);
}

.page-home::before {
  background: var(--color-surface);
}

/* Home sections: solid surfaces (no longer inherit body white) */
.page-home .services-hero {
  background: var(--color-surface-alt);
}

.page-home .site-band {
  flex: 1 0 auto;
  background: var(--color-surface-alt);
}

.page-home .band-connect {
  background: var(--color-surface);
}

.page-home .site-footer {
  background: var(--color-surface);
}

header {
  padding: 28px var(--page-gutter) 0;
}

header img {
  display: block;
  width: auto;
  height: 52px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px var(--page-gutter) 24px;
}

h1 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(72px, 18vw, 248px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.82;
}

.hero-screen h1 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
}

.line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(12px, 1.8vw, 28px);
  width: 100%;
}

.rotator {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.22em;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-align: right;
  white-space: nowrap;
  transition: opacity 0.35s ease;
}

.rotator.is-out {
  opacity: 0;
}

.process {
  display: block;
  width: 100%;
}

.loader {
  width: 78px;
  height: 78px;
  margin-top: 40px;
}

.loader svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ring {
  fill: none;
  stroke: var(--color-on-brand);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 58 140;
  transform-origin: 40px 40px;
  animation: spin 1.7s cubic-bezier(0.6, 0.05, 0.3, 0.95) infinite;
}

.ring-inner {
  stroke-width: 2.2;
  stroke-dasharray: 16 96;
  opacity: 0.72;
  animation-duration: 1.15s;
  animation-direction: reverse;
}

.info p {
  max-width: 18em;
  margin: 28px 0 0;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

/* —— Home: fullscreen orange hero —— */
.hero-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.hero-screen header,
.hero-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hero-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.hero-nav a {
  color: color-mix(in srgb, var(--color-on-brand) 88%, transparent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: none;
  background: transparent !important;
}

.hero-nav a:hover,
.hero-nav a:focus-visible {
  color: var(--color-on-brand);
  background: transparent !important;
}

.hero-nav-sep {
  color: color-mix(in srgb, var(--color-on-brand) 40%, transparent);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.hero-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px var(--page-gutter) 80px;
}

.hero-screen .scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  animation: scroll-nudge 1.5s ease-in-out infinite;
}

.hero-screen .scroll-hint span {
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border-right: 2px solid color-mix(in srgb, var(--color-on-brand) 90%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--color-on-brand) 90%, transparent);
  transform: rotate(45deg);
}

.hero-screen .scroll-hint span:first-child {
  margin-top: 0;
  opacity: 0.4;
}

/* —— Home: services split under hero —— */
.services-hero {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
}

.services-hero .services-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
  align-items: center;
  min-height: 0;
  width: auto;
  max-width: none;
  margin-top: clamp(88px, 10vw, 140px);
  margin-bottom: clamp(88px, 10vw, 140px);
  margin-left: clamp(36px, 4.5vw, 72px);
  margin-right: clamp(36px, 4.5vw, 72px);
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 44px);
  border-radius: var(--panel-radius);
  background: var(--color-surface);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--color-text) 6%, transparent);
}

.services-hero-copy {
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.services-hero-copy .band-eyebrow {
  margin-bottom: 12px;
  font-size: 13px;
}

.services-hero-copy h2 {
  margin: 0 0 28px;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.98;
  color: var(--color-text);
}

.svc-stage {
  position: relative;
  min-height: 0;
  margin-top: 0;
}

.svc-card {
  max-width: none;
}

.svc-card[hidden] {
  display: none !important;
}

.svc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-bottom: 22px;
  border-radius: 22px;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.svc-ico svg {
  width: 48px;
  height: 48px;
}

.svc-card h3 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.svc-card p {
  margin: 0;
  max-width: 32em;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 500;
  line-height: 1.55;
}

.svc-card p strong {
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
  font-weight: inherit;
  font-style: italic;
}

.svc-tip {
  position: relative;
  display: inline;
}

.svc-tip-trigger {
  color: var(--color-secondary);
  font-weight: inherit;
  font-style: italic;
  text-decoration: none;
  text-underline-offset: 2px;
  background: transparent !important;
}

.svc-tip-trigger:hover,
.svc-tip-trigger:focus-visible {
  color: var(--color-secondary);
  text-decoration: underline;
  background: transparent !important;
}

.svc-tip-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: min(220px, 70vw);
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-text) 14%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.svc-tip-pop img {
  display: block;
  width: auto;
  height: 28px;
  max-width: 180px;
  object-fit: contain;
}

.svc-tip:hover .svc-tip-pop,
.svc-tip:focus-within .svc-tip-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.svc-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 0;
}

.svc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.svc-arrow:hover {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.svc-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--color-text) 16%, transparent);
  cursor: pointer;
  transition: width 0.2s ease, background 0.15s ease;
}

.svc-dot[aria-selected="true"],
.svc-dot.is-active {
  width: 28px;
  background: var(--color-brand);
}

.services-hero-visual {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.services-hero-visual img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: min(860px, 92vh);
  object-fit: contain;
  object-position: center;
}

/* —— Home: white/grey corporate band —— */
.site-band {
  background: var(--color-surface-alt);
  color: var(--color-text);
  padding-top: clamp(72px, 8vw, 120px);
  padding-bottom: clamp(96px, 11vw, 160px);
}

.band-panel {
  display: block;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: clamp(36px, 4.5vw, 72px);
  margin-right: clamp(36px, 4.5vw, 72px);
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 44px);
  border-radius: var(--panel-radius);
  background: var(--color-surface);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--color-text) 6%, transparent);
}

.band-head {
  margin-bottom: 22px;
}

.band-eyebrow {
  margin: 0 0 10px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.band-head h2,
.partners-band h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--color-text);
}

.band-connect {
  margin-top: 0;
  margin-left: clamp(36px, 4.5vw, 72px);
  margin-right: clamp(36px, 4.5vw, 72px);
  margin-bottom: 0;
  border-radius: var(--panel-radius);
  background: var(--color-surface);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--color-text) 6%, transparent);
  overflow-x: clip;
  overflow-y: visible;
  max-width: 100%;
}

.band-connect .showcase {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
}

.band-connect .showcase .carousel-viewport {
  border-radius: 0;
}

.band-connect .contact-block {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.88fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: stretch;
  overflow: visible;
  margin: 0;
  padding: clamp(72px, 8vw, 120px) clamp(28px, 3vw, 44px) clamp(40px, 4vw, 56px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
}

.contact-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  min-height: 100%;
  overflow: hidden;
  padding-bottom: 24px;
}

.contact-copy h2.contact-mega {
  margin: 0 0 18px;
  max-width: none;
  font-size: clamp(52px, 8vw, 104px);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--color-text);
  text-transform: uppercase;
}

.contact-lead {
  margin: 0 0 28px;
  max-width: 30em;
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

.contact-lead-accent {
  color: var(--color-text);
  font-weight: 700;
}

.contact-direct-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
}

.contact-direct {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  flex: 1 1 200px;
  min-width: 0;
}

.contact-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-secondary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-underline-offset: 2px;
}

.contact-direct-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.contact-direct-link:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

.contact-direct-link:hover .contact-direct-ico {
  background: var(--color-brand-hover);
}

.contact-map {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: min(280px, 52vw);
  height: 132px;
  margin-left: -12px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-surface-alt);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.contact-map iframe {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 0;
  pointer-events: none;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
}

.contact-map-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 8px 10px;
  color: transparent;
  font-size: 0;
  text-decoration: none;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.contact-map-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.contact-partners {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.contact-partners .band-eyebrow {
  margin-bottom: 16px;
}

.contact-partners .partners-row {
  gap: 24px 36px;
}

.proof-marquee {
  margin-top: auto;
  padding: 16px 0;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  background: transparent;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.proof-marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: proof-marquee 26s linear infinite;
}

.proof-marquee-list {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0 40px 0 0;
  white-space: nowrap;
}

.proof-marquee-list li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: none;
}

.proof-marquee-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 0;
  background-color: transparent;
  background-image: url("img/logo-mark.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 auto;
}

.proof-marquee-list strong {
  color: var(--color-text);
  font-weight: 800;
}

.proof-inf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  line-height: 0;
}

.proof-inf svg {
  display: block;
  width: 18px;
  height: 18px;
}

@keyframes proof-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.contact-form-wrap {
  position: relative;
  z-index: 0;
  min-width: 0;
  max-width: 480px;
  width: 100%;
  justify-self: end;
  margin-right: 24px;
  margin-bottom: 24px;
}

.contact-accent {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: min(68%, 220px);
  aspect-ratio: 1;
  background: var(--color-brand);
  border-radius: 0 0 var(--panel-radius) 0;
  z-index: 0;
  pointer-events: none;
}

.contact-corner {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 56px;
  height: 56px;
  border-top: 3px solid var(--color-brand);
  border-left: 3px solid var(--color-brand);
  border-radius: 5px 0 0 0;
  z-index: 2;
  pointer-events: none;
}

.contact-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 22px 22px 24px;
  border-radius: 16px;
  background: var(--color-surface-alt);
  box-shadow: none;
}

.contact-card-title {
  margin: 0 0 18px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--color-text);
}

.contact-card-dots {
  color: var(--color-text);
}

.page-home .contact-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  gap: 6px;
}

.page-home .contact-form > label:not(.contact-consent):not(.contact-honey) {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.page-home .contact-form > input:not(.contact-honey),
.page-home .contact-form > textarea {
  width: 100%;
  max-width: 100%;
  margin-bottom: 10px;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-weight: 600;
}

.page-home .contact-form > input:not(.contact-honey):focus,
.page-home .contact-form > textarea:focus {
  outline: none;
  border-bottom-color: var(--color-brand);
  background: transparent;
}

.page-home .contact-form > textarea {
  min-height: 110px;
  max-height: 220px;
  resize: vertical;
}

.page-home .contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin: 8px 0 14px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.45;
  cursor: pointer;
}

.page-home .contact-consent input {
  flex: 0 0 18px;
  width: 18px !important;
  max-width: 18px;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  accent-color: var(--color-brand);
  cursor: pointer;
}

.page-home .contact-consent span {
  flex: 1 1 auto;
  min-width: 0;
}

.page-home .contact-consent a {
  color: var(--color-secondary);
  text-underline-offset: 2px;
  background: transparent;
}

.page-home .contact-consent a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
  background: transparent;
}

.page-home .contact-form .turnstile-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.page-home .contact-form > button {
  width: 100%;
  margin-top: 4px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.page-home .contact-form > button:hover,
.page-home .contact-form > button:focus-visible {
  background: var(--color-brand-hover);
  color: var(--color-on-brand);
}

.page-home .contact-status {
  color: var(--color-text);
}

.page-home .contact-status.is-error {
  color: #b42318;
}

.showcase {
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.showcase .carousel {
  position: relative;
}

.showcase .carousel-viewport {
  overflow: hidden;
  border-radius: var(--panel-radius);
  background: transparent;
  box-shadow: none;
}

.showcase .carousel-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.showcase .slide {
  margin: 0;
  flex: 0 0 100%;
  min-width: 100%;
}

.showcase .carousel-track img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2400 / 900;
  object-fit: cover;
  user-select: none;
}

.showcase .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.showcase .dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--color-on-brand) 55%, transparent);
  cursor: pointer;
}

.showcase .dots button[aria-current="true"] {
  width: 22px;
  background: var(--color-surface);
}

.partners-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 48px;
  min-height: 40px;
}

.partners-row-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  line-height: 0;
}

.partners-row-link:hover {
  opacity: 0.75;
}

.partners-row-link img {
  display: block;
  width: auto;
  height: 34px;
  object-fit: contain;
}

.partners-row-link img[src*="partner-websupport"] {
  height: 46px;
}

/* Shared contact form (orange pages / base) */
.contact {
  width: min(520px, calc(100% - 520px));
  padding: 28px var(--page-gutter) 56px;
}

.contact h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.contact-form label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-on-brand) 16%, transparent);
  color: var(--color-on-brand);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid var(--color-surface);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--color-on-brand) 22%, transparent);
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 10px;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.4;
  cursor: pointer;
}

.contact-consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--color-on-brand);
  cursor: pointer;
}

.contact-consent a {
  color: var(--color-on-brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-consent a:hover {
  color: var(--color-brand);
  background: var(--color-surface);
}

.turnstile-wrap {
  margin: 4px 0 12px;
  min-height: 65px;
}

.contact-form button {
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.contact-form button:hover,
.contact-form button:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-brand);
}

.contact-form button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.contact-status {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.contact-status.is-error {
  color: #fff4c4;
}

/* —— Footer —— */
.site-footer {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin-top: auto;
  padding: 0;
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
}

.footer-mark {
  position: absolute;
  right: clamp(-72px, -5vw, -16px);
  bottom: 0;
  z-index: 0;
  width: clamp(320px, 48vw, 640px);
  pointer-events: none;
  user-select: none;
  transform: translateY(68%);
}

.footer-mark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.95;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 36px var(--page-gutter) max(32px, env(safe-area-inset-bottom));
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 64px;
  row-gap: 18px;
  align-items: start;
}

.footer-col-contact,
.footer-col-partners {
  display: contents;
}

.footer-col-contact .footer-label {
  grid-column: 1;
  grid-row: 1;
}

.footer-contacts {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 6px;
}

.footer-col-partners .footer-label {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.footer-partners {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  min-height: 34px;
}

.footer-label {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-secondary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-underline-offset: 2px;
}

.footer-ico {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.footer-contact:hover {
  color: var(--color-secondary);
  text-decoration: underline;
  background: transparent;
}

.footer-contact:hover .footer-ico {
  color: currentColor;
}

.footer-partner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  height: auto;
  line-height: 0;
  background: transparent !important;
}

.footer-partner:hover {
  background: transparent !important;
  opacity: 0.75;
}

.footer-partner img {
  display: block;
  width: auto;
  height: 30px;
  object-fit: contain;
}

.footer-partner img[src*="partner-websupport"] {
  height: 42px;
}

.footer-company {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.footer-company-name {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.footer-company-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.footer-company-meta span:not(:last-child)::after {
  content: "|";
  margin: 0 10px;
  color: color-mix(in srgb, var(--color-text) 22%, transparent);
  font-weight: 400;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 24px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.footer-legal .copy,
.footer-legal-links .legal-link:not(:last-child) {
  display: inline-flex;
  align-items: center;
}

/* Desktop: copyright first; DOM keeps links above © for mobile column */
.footer-legal .copy {
  order: -1;
}

.footer-legal .copy::after,
.footer-legal-links .legal-link:not(:last-child)::after {
  content: "|";
  margin: 0 12px;
  color: color-mix(in srgb, var(--color-text) 28%, transparent);
  font-weight: 400;
}

.site-footer .footer-legal .legal-link:hover::after {
  color: color-mix(in srgb, var(--color-text) 28%, transparent);
}

.site-footer .copy {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.site-footer .legal-link {
  color: var(--color-secondary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none;
  text-underline-offset: 2px;
}

.site-footer .legal-link:hover {
  color: var(--color-secondary) !important;
  text-decoration: underline;
}

.legal-link {
  color: color-mix(in srgb, var(--color-on-brand) 55%, transparent) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-link {
  display: inline-block;
}

.button-link {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.button-link:hover,
.button-link:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-brand);
}

/* Thank-you page */
.page-thanks main {
  justify-content: center;
}

.thanks-title {
  font-size: clamp(64px, 15.5vw, 224px);
}

.thanks-info p {
  max-width: 26em;
}

/* Legal page */
.page-legal main {
  justify-content: flex-start;
  padding-top: 40px;
}

.legal {
  max-width: 760px;
}

.legal h1 {
  margin-bottom: 8px;
  font-size: clamp(40px, 7vw, 88px);
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.legal-updated {
  margin: 0 0 32px;
  color: color-mix(in srgb, var(--color-on-brand) 70%, transparent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal h2 {
  margin: 32px 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.legal p,
.legal li {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

.legal ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 6px;
}

.legal a {
  color: var(--color-on-brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover {
  color: var(--color-brand);
  background: var(--color-surface);
}

.legal .button-link {
  margin-top: 36px;
  color: var(--color-brand);
  font-weight: 800;
  text-decoration: none;
}

.legal .button-link:hover,
.legal .button-link:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-brand);
}

.legal code {
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-on-brand) 18%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

a:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 4px;
}

.hero-screen a:focus-visible,
.page-legal a:focus-visible,
.page-thanks a:focus-visible {
  outline-color: var(--color-on-brand);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes scroll-nudge {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }

  50% {
    transform: translateY(8px);
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .services-hero .services-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    margin-top: 36px;
    margin-bottom: 36px;
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
    padding: 22px 18px 20px;
    border-radius: var(--panel-radius);
  }

  .services-hero-copy {
    gap: 0;
    padding: 0;
  }

  .services-hero-copy h2 {
    margin-bottom: 22px;
    font-size: clamp(34px, 10vw, 48px);
  }

  .svc-stage {
    min-height: 0;
    margin-top: 0;
  }

  .svc-ico {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    border-radius: 20px;
  }

  .svc-ico svg {
    width: 40px;
    height: 40px;
  }

  .svc-nav {
    margin-top: 22px;
    padding-top: 0;
  }

  .svc-arrow {
    width: 44px;
    height: 44px;
  }

  .services-hero-visual {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
    padding: 0;
  }

  .services-hero-visual img {
    max-height: none;
  }

  .band-connect .contact-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .contact-copy {
    min-height: 0;
    padding-bottom: 0;
  }

  .proof-marquee {
    margin-top: 36px;
  }

  .contact-form-wrap {
    max-width: none;
    justify-self: stretch;
    margin-right: 20px;
    margin-bottom: 20px;
  }

}

@media (max-width: 700px) {
  body {
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :root {
    --page-gutter: 20px;
    --panel-radius: 22px;
  }

  header,
  main,
  .hero-body,
  .footer-inner {
    padding-left: max(var(--page-gutter), env(safe-area-inset-left));
    padding-right: max(var(--page-gutter), env(safe-area-inset-right));
  }

  header,
  .hero-header {
    padding-top: max(18px, env(safe-area-inset-top));
    gap: 12px;
  }

  header img {
    height: 34px;
  }

  .hero-nav {
    gap: 8px;
  }

  .hero-nav a {
    padding: 8px 2px;
    font-size: 12px;
    letter-spacing: 0.03em;
  }

  main {
    flex: none;
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: 8px;
  }

  .hero-body {
    padding-top: 0;
    padding-bottom: 72px;
  }

  .hero-screen h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 18px;
    width: max-content;
    max-width: 100%;
    font-size: 19vw;
    letter-spacing: -0.065em;
    text-align: left;
    align-items: stretch;
  }

  .process::before {
    content: none;
  }

  .line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }

  .process {
    display: block;
    width: 100%;
  }

  .rotator {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.26em;
    letter-spacing: -0.04em;
    text-align: right;
  }

  .hero-screen .loader {
    display: none;
  }

  .hero-screen .info {
    margin-top: 16px;
  }

  .hero-screen .info p {
    margin-top: 0;
    max-width: 16em;
    font-size: 17px;
    line-height: 1.3;
  }

  .hero-screen .scroll-hint {
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  .svc-card h3 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .svc-card p {
    font-size: 16px;
    max-width: none;
  }

  .svc-tip-pop {
    max-width: min(200px, 78vw);
    padding: 8px 10px;
  }

  .svc-tip-pop img {
    height: 24px;
  }

  .band-connect {
    margin-top: 24px;
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
    border-radius: var(--panel-radius);
  }

  .band-connect .contact-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 48px 18px 22px;
  }

  .contact-copy h2.contact-mega {
    margin-bottom: 14px;
    font-size: clamp(40px, 14vw, 64px);
  }

  .contact-lead {
    margin-bottom: 22px;
    font-size: 15px;
  }

  .contact-direct-row {
    gap: 16px;
  }

  .contact-direct {
    gap: 12px;
    flex: 1 1 100%;
  }

  .contact-direct-link {
    font-size: 15px;
    min-height: 44px;
  }

  .contact-map {
    width: 100%;
    max-width: none;
    height: 148px;
    margin-left: 0;
  }

  .contact-partners {
    margin-top: 28px;
    padding-top: 22px;
  }

  .proof-marquee {
    margin-top: 28px;
    padding: 14px 0;
  }

  .proof-marquee-list {
    gap: 28px;
    padding-right: 28px;
  }

  .proof-marquee-list li {
    gap: 10px;
    font-size: 13px;
  }

  .band-panel {
    margin-top: 24px;
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
    padding: 22px 18px 20px;
    border-radius: var(--panel-radius);
  }

  .partners-row-link img {
    height: 28px;
  }

  .partners-row-link img[src*="partner-websupport"] {
    height: 38px;
  }

  .contact-form-wrap {
    max-width: none;
    justify-self: stretch;
    margin-right: 16px;
    margin-bottom: 16px;
  }

  .contact-corner {
    top: -10px;
    left: -10px;
    width: 44px;
    height: 44px;
  }

  .contact-accent {
    right: -20px;
    bottom: -20px;
    width: min(62%, 160px);
  }

  .contact-card {
    padding: 20px 18px 22px;
    border-radius: 14px;
  }

  .contact-card-title {
    margin-bottom: 16px;
    font-size: clamp(18px, 5.2vw, 22px);
  }

  .page-home .contact-form > input:not(.contact-honey),
  .page-home .contact-form > textarea {
    margin-bottom: 12px;
    padding: 10px 0 12px;
    font-size: 16px;
  }

  .page-home .contact-form > textarea {
    min-height: 96px;
  }

  .page-home .contact-consent {
    margin: 6px 0 12px;
    font-size: 12px !important;
  }

  .page-home .contact-form > button {
    min-height: 48px;
    padding: 14px 20px;
    font-size: 15px;
  }

  .site-footer .footer-inner {
    gap: 22px;
    padding-top: 28px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  .footer-mark {
    right: clamp(-48px, -10vw, -12px);
    width: clamp(220px, 58vw, 300px);
    transform: translateY(70%);
    opacity: 0.9;
  }

  .footer-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .footer-col-contact,
  .footer-col-partners {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }

  .footer-col-partners .footer-label,
  .footer-partners {
    justify-self: start;
  }

  .footer-contacts {
    gap: 10px 22px;
  }

  .footer-contact {
    min-height: 44px;
  }

  .footer-partners {
    gap: 16px 28px;
  }

  .footer-partner {
    min-height: 28px;
    height: auto;
  }

  .footer-partner img {
    height: 26px;
  }

  .footer-partner img[src*="partner-websupport"] {
    height: 36px;
  }

  .footer-company-name {
    font-size: 12px;
  }

  .footer-company-meta {
    font-size: 11px;
    line-height: 1.5;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .footer-legal .copy {
    order: 0;
  }

  .footer-legal .copy::after {
    content: none;
  }

  .page-thanks main {
    flex: 1;
    justify-content: center;
    padding-top: 24px;
  }

  .thanks-hero {
    min-height: 0;
    padding-bottom: 0;
  }

  .thanks-title {
    display: block;
    margin-bottom: 8px;
    font-size: 17vw;
  }

  .page-legal main {
    padding-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ring,
  .carousel-track,
  .scroll-hint,
  .proof-marquee-track,
  .social-card.is-loading::after {
    animation: none;
    transition: none;
  }
}

/* —— Social embeds: facades until click —— */
.social-stage {
  background: var(--color-surface-alt);
  color: var(--color-text);
  padding: clamp(88px, 10vw, 140px) 0;
}

.social-stage-inner {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: center;
  margin: 0 clamp(36px, 4.5vw, 72px) 0;
  padding: clamp(32px, 3.4vw, 48px) clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 32px);
  border-radius: var(--panel-radius);
  background: var(--color-surface);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--color-text) 6%, transparent);
}

.social-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.social-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.96;
  color: var(--color-text);
}

.social-copy h2 span {
  color: var(--color-secondary);
  font-weight: 700;
}

.social-lead {
  margin: 0;
  max-width: 36em;
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

.social-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.social-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-underline-offset: 2px;
}

.social-brand-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.social-brand:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

.social-brand:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.social-points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0 0 0 22px;
  border-left: 2px solid color-mix(in srgb, var(--color-brand) 35%, transparent);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.social-points li {
  position: relative;
  padding-left: 18px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.social-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand) 14%, transparent);
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.social-card {
  position: relative;
  aspect-ratio: 9 / 18;
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.social-facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 16px 16px 18px;
  border: 0;
  color: var(--color-on-brand);
  text-align: left;
  cursor: pointer;
  background:
    radial-gradient(90% 55% at 50% 108%, color-mix(in srgb, var(--color-brand) 72%, transparent), transparent 62%),
    linear-gradient(165deg, var(--color-text) 0%, var(--color-text) 58%);
}

.social-facade-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.social-facade-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.social-platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-on-brand) 10%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.social-index {
  color: var(--color-on-brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.social-play {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color-brand) 35%, transparent);
  transition: transform 0.2s ease, background 0.2s ease;
}

.social-facade:hover .social-play,
.social-facade:focus-visible .social-play {
  transform: scale(1.06);
  background: var(--color-brand-hover);
}

.social-facade:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -4px;
}

.social-kind {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.social-cta {
  color: color-mix(in srgb, var(--color-on-brand) 78%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.social-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-text);
}

.social-card.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color-on-brand) 22%, transparent);
  border-top-color: var(--color-brand);
  animation: spin 0.8s linear infinite;
  pointer-events: none;
}

.social-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .social-stage-inner {
    grid-template-columns: 1fr;
    align-items: start;
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
    padding: 22px 18px 18px;
  }

  .social-head {
    gap: 0;
  }

  .social-copy h2 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .social-points {
    padding-top: 0;
    padding-bottom: 0;
  }

  .social-grid {
    display: flex;
    gap: 12px;
    margin-right: -18px;
    padding-right: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch;
  }

  .social-card {
    flex: 0 0 min(78vw, 320px);
    scroll-snap-align: start;
  }
}

@media (max-width: 700px) {
  .social-stage-inner {
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }

  .social-lead {
    font-size: 15px;
  }
}

/* —— Start of the site: corporate bar + card carousel —— */
.u-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-top {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0;
  background: var(--color-surface);
  border-bottom: 0;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-text) 7%, transparent);
}

.site-top-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 28px;
  padding: calc(20px + env(safe-area-inset-top)) clamp(28px, 3vw, 56px) 20px;
}

.site-top-panel {
  display: contents;
}

.site-logo {
  --logo-ink: 62px;
  order: 1;
  display: block;
  flex: 0 0 auto;
  height: var(--logo-ink);
  margin-right: 4px;
  overflow: hidden;
  line-height: 0;
}

.site-logo img {
  display: block;
  width: auto;
  height: calc(var(--logo-ink) * 2813 / 1545);
  margin-top: calc(var(--logo-ink) * -513 / 1545);
  filter: none;
}

.site-top-side {
  order: 3;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-left: 22px;
  border-left: 1px solid var(--color-border);
}

.site-mail,
.site-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.site-mail {
  font-size: 14px;
  font-weight: 500;
}

.site-mail:hover,
.site-mail:focus-visible,
.site-tel:hover,
.site-tel:focus-visible {
  color: var(--color-brand-hover);
}

.site-toggle {
  order: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.site-toggle-icon,
.site-toggle-icon::before,
.site-toggle-icon::after {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
}

.site-toggle-icon::before,
.site-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-toggle-icon::before {
  top: -5px;
}

.site-toggle-icon::after {
  top: 5px;
}

.site-top.is-open .site-toggle-icon {
  background: transparent;
}

.site-top.is-open .site-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-top.is-open .site-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-cats {
  order: 2;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  border: 0;
}

.site-cats a {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.site-cats a .site-cat-ico {
  display: flex;
  color: var(--color-brand);
  transition: transform 0.25s ease;
}

.site-cats a .site-cat-label span {
  display: inline;
}

.site-cats a .site-cat-label span + span::before {
  content: " ";
}

.site-cats a:hover,
.site-cats a:focus-visible,
.site-cats a:active {
  color: var(--color-brand);
}

.site-cats a:hover .site-cat-ico,
.site-cats a:focus-visible .site-cat-ico {
  transform: translateY(-2px);
}

.hero-deck {
  --slide-size: 62%;
  background: var(--color-surface);
  padding: 0 0 clamp(88px, 10vw, 140px);
}

.hero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.22em;
  row-gap: 0.08em;
  margin: clamp(48px, 5.5vw, 84px) 0 28px;
  padding: 0 clamp(20px, 4vw, 72px) 0.42em;
  text-align: center;
  color: var(--color-text);
  font-size: clamp(42px, 5.8vw, 84px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.hero-kicker-mark {
  height: 1.38em;
  width: auto;
  position: relative;
  top: 0.42em;
}

.hero-kicker-line {
  color: var(--color-text);
  font-weight: 500;
}

.page-home .hero-kicker,
.page-home .hero-kicker strong {
  color: var(--color-text);
}

/* Podnadpis hero: jasne povie, čo onvyo je (veta) a čo pokrýva (rozsah) */
.hero-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: -6px clamp(20px, 4vw, 72px) 30px;
  text-align: center;
}

.hero-sub strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: balance;
}

.hero-sub span {
  color: var(--color-text-muted);
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: 0.01em;
}

.hero-kicker-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 20px 28px;
  text-align: center;
}

/* Dôkaz pod CTA: kruhy s logami reálnych klientov + „150+“ a vedľa
   Google recenzie (Elfsight widget). Žiadne stock tváre – len skutoční
   klienti. */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin: 0 clamp(20px, 4vw, 72px) clamp(48px, 5.5vw, 84px);
}

.hero-proof-clients {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-faces {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-faces li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 11px;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
}

.hero-faces li + li {
  margin-left: -16px;
}

.hero-faces img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hero-faces .hero-faces-count {
  background: var(--color-brand);
  box-shadow: none;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero-proof-text {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

/* Miesto pre Elfsight badge je rezervované vopred (badge ~197×132 px),
   aby sa slider pod hero neposúval, keď sa widget načíta. */
.hero-proof-reviews {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 132px;
  padding-left: 28px;
  border-left: 1px solid var(--color-border);
}

@media (max-width: 700px) {
  .hero-proof {
    flex-direction: column;
  }

  .hero-proof-reviews {
    width: 100%;
    padding-left: 0;
    border-left: 0;
  }
}

.hero-kicker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.hero-kicker-btn:hover,
.hero-kicker-btn:focus-visible {
  background: var(--color-brand-hover);
  color: var(--color-on-brand);
}

/* Sekundárne CTA: len oranžový obrys a oranžový text (výnimka z modrého
   sekundárneho tlačidla – modrá by sa dotýkala oranžovej). Hover = výplň. */
.hero-kicker-btn--outline {
  border: 2px solid var(--color-brand);
  background: transparent;
  color: var(--color-brand);
}

.hero-kicker-btn--outline:hover,
.hero-kicker-btn--outline:focus-visible {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.hero-deck-viewport {
  position: relative;
  overflow: hidden;
}

.hero-deck-track {
  display: flex;
  gap: 18px;
  width: 100%;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-deck-track.is-instant {
  transition: none;
}

.hero-slide {
  position: relative;
  z-index: 0;
  flex: 0 0 var(--slide-size);
  width: var(--slide-size);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  transition: box-shadow 0.45s ease;
}

.hero-slide.is-current {
  z-index: 1;
  box-shadow: none;
}

.hero-slide.is-side {
  box-shadow: 0 18px 40px color-mix(in srgb, var(--color-text) 22%, transparent);
}

.hero-slide--on-orange {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.hero-slide--on-light {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.hero-slide--accent {
  background: var(--color-surface);
  color: var(--color-text);
}

.hero-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6000 / 2813;
  user-select: none;
  transform: scale(1.025);
  transform-origin: 58% 48%;
}

.hero-slide.is-current img {
  animation: hero-drift 8.5s ease-in-out infinite alternate;
}

.hero-kicker,
.hero-sub,
.hero-kicker-cta,
.hero-proof,
.hv-phones,
.hv-card {
  overflow-anchor: none;
}

.hero-kicker {
  animation: hero-arrive 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-kicker-cta {
  animation: hero-arrive 0.9s 0.14s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-sub {
  animation: hero-arrive 0.9s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-proof {
  animation: hero-arrive 0.9s 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-slide.is-current .hero-title,
.hero-slide.is-current .hero-lead,
.hero-slide.is-current .hero-cta {
  animation: hero-arrive 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-slide.is-current .hero-lead {
  animation-delay: 0.1s;
}

.hero-slide.is-current .hero-cta {
  animation-delay: 0.2s;
}

.hero-slide.is-current .hero-title strong {
  display: inline-block;
  animation: hero-word 0.55s 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hero-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-word {
  from {
    transform: translate3d(0, 0.42em, 0);
  }
  to {
    transform: none;
  }
}

@keyframes hero-drift {
  from {
    transform: scale(1.025);
  }
  to {
    transform: scale(1.055) translate3d(-1.1%, 0, 0);
  }
}

.hero-slide-copy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 42%;
  padding: 6% 0;
  pointer-events: none;
}

.hero-slide-copy a {
  pointer-events: auto;
}

.hero-slide .hero-title {
  margin: 0;
  max-width: 7.6em;
  font-size: clamp(36px, 3.2vw, 64px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.hero-lead {
  margin: 14px 0 0;
  max-width: 16em;
  font-size: clamp(17px, 1.45vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.page-home .hero-slide--on-orange .hero-title,
.page-home .hero-slide--on-orange .hero-title strong,
.page-home .hero-slide--on-orange .hero-lead {
  color: var(--color-on-brand);
}

.page-home .hero-slide--accent .hero-title {
  color: var(--color-text);
}

.page-home .hero-slide--accent .hero-lead {
  color: var(--color-text);
}

.page-home .hero-slide--accent .hero-title strong {
  color: var(--color-secondary);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: 22px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: none;
}

.hero-cta:hover,
.hero-cta:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-brand);
}

.hero-slide--accent .hero-cta {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.hero-slide--accent .hero-cta:hover,
.hero-slide--accent .hero-cta:focus-visible {
  background: var(--color-brand-hover);
  color: var(--color-on-brand);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-brand);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text) 16%, transparent);
  cursor: pointer;
}

.hero-arrow--prev {
  left: calc((100% - var(--slide-size)) / 2);
  transform: translate(-50%, -50%);
}

.hero-arrow--next {
  right: calc((100% - var(--slide-size)) / 2);
  transform: translate(50%, -50%);
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.hero-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 16px 0 18px;
}

.hero-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
}

.hero-dot[aria-current="true"] {
  background: var(--color-text-muted);
}

.service-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 clamp(36px, 4.5vw, 72px) clamp(88px, 10vw, 140px);
}

.service-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  color: var(--color-text);
  text-decoration: none;
}

.service-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 2500;
}

.service-tile-foot {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 7% 8%;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.service-tile-foot > span {
  white-space: nowrap;
}

.service-tile-foot svg {
  flex: 0 0 auto;
  color: var(--color-brand);
  transition: transform 0.2s ease;
}

/* Úzke tri stĺpce (tablet): názvy služieb ostávajú na jednom riadku */
@media (min-width: 701px) and (max-width: 1000px) {
  .service-tile-foot {
    gap: 8px;
    font-size: 19px;
  }

  .service-tile-foot svg {
    width: 22px;
    height: 22px;
  }
}

.service-tile:hover .service-tile-foot svg,
.service-tile:focus-visible .service-tile-foot svg {
  transform: translateX(6px);
}

#sluzby,
#siete,
#kontakt,
#obsah {
  scroll-margin-top: 168px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-deck-track {
    transition: none;
  }

  .hero-kicker,
  .hero-sub,
  .hero-kicker-cta,
  .hero-proof,
  .hero-slide img,
  .hero-slide.is-current img,
  .hero-slide.is-current .hero-title,
  .hero-slide.is-current .hero-lead,
  .hero-slide.is-current .hero-cta,
  .hero-slide.is-current .hero-title strong {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1280px) {
  .site-logo {
    --logo-ink: 46px;
  }

  .site-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .site-top-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 6px clamp(32px, 3.5vw, 64px) 18px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }

  .site-top.is-open .site-top-panel {
    display: flex;
  }

  .site-cats {
    order: 1;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
  }

  .site-top-side {
    order: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 0;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .site-cats a {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 2px;
    font-size: 16px;
    text-align: left;
  }

  .site-cats a:hover .site-cat-ico,
  .site-cats a:focus-visible .site-cat-ico {
    transform: none;
  }

  .site-cats a span {
    display: inline;
  }

  .site-cats a span + span::before {
    content: " ";
  }
}

@media (max-width: 980px) {
  .hero-deck {
    --slide-size: 78%;
    padding-top: 0;
  }

  .hero-arrow {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 700px) {
  .hero-kicker {
    flex-wrap: nowrap;
    font-size: clamp(30px, 8.4vw, 40px);
  }

  .site-logo {
    --logo-ink: 40px;
  }

  .site-top-bar {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  .hero-deck {
    --slide-size: 92%;
  }

  .service-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }

  .hero-deck-track {
    gap: 12px;
  }

  .hero-slide {
    border-radius: 14px;
  }

  .hero-slide img {
    height: auto;
    aspect-ratio: 6000 / 2813;
    object-fit: contain;
    object-position: center;
  }

  .hero-slide-copy {
    left: 4%;
    width: 54%;
    padding-left: 40px;
  }

  .hero-slide--on-orange .hero-slide-copy {
    background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand) 46%, transparent 100%);
  }

  .hero-slide--on-light .hero-slide-copy,
  .hero-slide--accent .hero-slide-copy {
    background: linear-gradient(90deg, var(--color-surface-alt) 0%, var(--color-surface-alt) 46%, transparent 100%);
  }

  .hero-slide .hero-title {
    font-size: 26px;
  }

  .hero-lead {
    display: block;
    margin-top: 8px;
    font-size: 15px;
  }

  .hero-cta {
    height: 34px;
    margin-top: 10px;
    padding: 0 14px;
    font-size: 13px;
  }

  .hero-arrow {
    width: 34px;
    height: 34px;
  }

  .hero-arrow--prev {
    left: calc((100% - var(--slide-size)) / 2 + 10px);
    transform: translate(0, -50%);
  }

  .hero-arrow--next {
    right: calc((100% - var(--slide-size)) / 2 + 10px);
    transform: translate(0, -50%);
  }
}

/* Bridge: jedna sekcia v dvoch stĺpcoch na plnej značkovej oranžovej –
   vľavo výrok, vpravo dôkaz. Na oranžovej len biela a #141414:
   glyf „vy“ biely, „v strede.“ a odsek #141414, „My okolo.“ biela.
   Klienti = biele monochromatické logá. Partneri ostávajú vo svojich
   farbách, preto každý leží na vlastnej bielej dlaždici (nikdy farba
   priamo na oranžovej). Stuha z projektov nad sekciou do nej vteká. */
.bridge {
  position: relative;
  z-index: 3;
  margin-bottom: 40px;
  padding: clamp(72px, 8vw, 120px) clamp(36px, 4.5vw, 72px);
  background: var(--color-brand);
  color: var(--color-text);
}

.bridge-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(48px, 6vw, 112px);
}

.bridge-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.page-home .bridge-title {
  color: var(--color-text);
  font-weight: 400;
}

.bridge-title span {
  display: block;
}

.bridge-title-you {
  font-weight: 500;
}

/* „Vy“ = ten istý glyf ako v hero, v bielej (img/vy-white), rovnaké
   proporcie: výška 1.38em, posun nadol 0.42em, medzera 0.22em */
.bridge-title-mark {
  display: inline-block;
  width: auto;
  height: 1.38em;
  margin-right: 0.22em;
  vertical-align: -0.42em;
}

.bridge-title-us {
  margin-top: 0.14em;
}

.page-home .bridge-title .bridge-title-us {
  color: var(--color-on-brand);
}

.bridge-lead {
  max-width: 30ch;
  margin: 24px 0 0;
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.bridge-proof,
.bridge-group {
  min-width: 0;
}

.bridge-kicker {
  margin: 0 0 14px;
  color: var(--color-on-brand);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Klienti: dva nekonečné pásy, horný doľava, dolný doprava.
   Track = 4× tá istá trojica, posun o -50 % je presne 2 sady → bez švu.
   Medzera je padding na <li> (nie gap), aby -50 % sedelo na pixel.
   Okraje pásu sa strácajú maskou, nech logá nekončia tvrdým rezom. */
.bridge-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.bridge-marquee + .bridge-marquee {
  margin-top: 4px;
}

.bridge-marquee-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: bridge-marquee var(--dur, 30s) linear infinite;
}

.bridge-marquee--reverse .bridge-marquee-track {
  animation-direction: reverse;
}

.bridge-marquee:hover .bridge-marquee-track {
  animation-play-state: paused;
}

@keyframes bridge-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.bridge-marquee-track li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 60px;
  padding-right: 64px;
}

/* Biele monochromatické logá; hover = plná biela */
.bridge-marquee-track img {
  display: block;
  width: auto;
  height: var(--h, 26px);
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity 150ms linear;
}

.bridge-marquee-track li:hover img {
  opacity: 1;
}

/* Partneri: vo vlastných farbách na bielych dlaždiciach, oddelení
   bielou linkou */
.bridge-partners-group {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-on-brand);
}

.bridge-partners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bridge-partners li {
  display: flex;
  min-width: 0;
}

.bridge-partners a {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--color-surface);
  line-height: 0;
  transition: transform 0.2s ease;
}

.bridge-partners a:hover,
.bridge-partners a:focus-visible {
  transform: translateY(-2px);
}

.bridge-partners a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

.bridge-partners img {
  display: block;
  width: auto;
  max-width: 100%;
}

.bridge-partners .is-shoptet {
  height: 30px;
}

.bridge-partners .is-booqme {
  height: 26px;
}

.bridge-partners .is-websupport {
  height: 52px;
  border-radius: 8px;
}

@media (max-width: 1000px) {
  .bridge-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .bridge-lead {
    max-width: 44ch;
  }
}

@media (max-width: 700px) {
  .bridge {
    margin-bottom: 24px;
    padding: 56px max(20px, env(safe-area-inset-right)) 56px max(20px, env(safe-area-inset-left));
  }

  .bridge-title {
    font-size: clamp(34px, 9vw, 44px);
  }

  .bridge-lead {
    margin-top: 16px;
    font-size: 17px;
  }

  .bridge-marquee-track li {
    height: 52px;
    padding-right: 44px;
  }

  .bridge-marquee-track img {
    height: calc(var(--h, 26px) * 0.85);
  }

  .bridge-partners-group {
    margin-top: 24px;
    padding-top: 24px;
  }

  .bridge-partners {
    gap: 8px;
  }

  .bridge-partners a {
    height: 64px;
    padding: 0 10px;
    border-radius: 12px;
  }

  .bridge-partners .is-shoptet {
    height: 20px;
  }

  .bridge-partners .is-booqme {
    height: 18px;
  }

  .bridge-partners .is-websupport {
    height: 40px;
  }
}

/* Bez pohybu: pás stojí, kópie sa skryjú a logá sa zalomia */
@media (prefers-reduced-motion: reduce) {
  .bridge-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .bridge-marquee-track {
    flex-wrap: wrap;
    width: auto;
    animation: none;
  }

  .bridge-marquee-track li[aria-hidden="true"] {
    display: none;
  }

  .bridge-marquee-track img,
  .bridge-partners a {
    transition: none;
  }
}

/* Naše práce: biela sekcia medzi dvoma alt sekciami (služby, siete).
   Nadpis v štýle sociálnych sietí (light + jedno modré bold slovo).
   Mriežka 6 stĺpcov: 2 veľké projekty hore (po 3), 3 menšie dole (po 2).
   Fotky sú mockupy 4:3 – nikdy sa neorezávajú. */
/* Vodorovne orezať (stuha má 100vw), zvisle nie – stuha presahuje
   dole pod bridge. Staršie prehliadače bez „clip“ ju orežú na hrane. */
.work {
  overflow: hidden;
  overflow: clip visible;
  background: var(--color-surface);
  padding: clamp(88px, 10vw, 140px) 0;
}

/* Hneď pod hero (obe biele): medzeru drží spodný padding hero */
.hero-deck + .work {
  padding-top: 0;
}

.work-inner {
  margin: 0 clamp(36px, 4.5vw, 72px);
}

/* Hlavička: bez eyebrow. Hlas Vy / My (`.vy-title`) ako proces, FAQ
   a kontakt – glyf + silný prvý riadok, tichý druhý. Vedľa nadpisu
   krátky odsek zarovnaný na spodok. */
.work-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34ch);
  align-items: end;
  gap: 24px clamp(32px, 5vw, 96px);
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

.work-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.work-title span {
  display: block;
}

.work-title-quiet {
  color: var(--color-text-muted);
  font-weight: 300;
}

.work-title-strong {
  font-weight: 500;
}

.work-lead {
  margin: 0;
  padding-bottom: 0.4em;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.5;
}

/* Dva slidery: horný 2 veľké, dolný 3 menšie (tablet 1/2, mobil 1/1).
   --per = koľko projektov je vidno, --i = posun (nastavuje work.js).
   Šípky sedia v strede výšky fotky – výpočet cez container units. */
.work-rows {
  position: relative;
  display: grid;
  gap: clamp(40px, 4.5vw, 64px);
}

.work-row {
  --per: 3;
  --gap: 18px;
  position: relative;
  z-index: 1;
  container-type: inline-size;
}

.work-row--lg {
  --per: 2;
  z-index: 2;
}

.work-viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
  touch-action: pan-y;
}

/* Stuha (img/stuha.webp = výrez master krivky, zdroj patern.png).
   Jedna na sekciu, plná oranžová, cez celú šírku okna, zvislo otočená,
   ide za fotkami spodného radu (je v .work-row--sm, výška fotky cez
   container units) a pokračuje dole von zo sekcie – podlezie pod bridge
   („Vy v strede“), ktorý má vyšší z-index. Horný rad má vyšší z-index,
   takže ho stuha nikdy neprekryje. Pomer 16:9 sa nedeformuje. */
.work-ribbon {
  --media-h: calc((100cqw - var(--gap) * (var(--per) - 1)) / var(--per) * 0.75);
  --ribbon-h: calc(100vw * 0.5625);
  position: absolute;
  z-index: 0;
  top: calc(var(--media-h) / 2 - var(--ribbon-h) * 0.25);
  left: 50%;
  width: 100vw;
  height: var(--ribbon-h);
  margin-left: -50vw;
  background: url("img/stuha-vypln.webp") center / 100% 100% no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}

.work-track {
  --i: 0;
  display: flex;
  gap: var(--gap);
  transform: translateX(calc((100% + var(--gap)) / var(--per) * var(--i) * -1));
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-track.is-jumping {
  transition: none;
}

/* Projekt = fotka + biely pás s popisom. Na bielej sekcii vyzerá
   rovnako ako predtým; tam, kde ide stuha, leží karta na nej a text
   nikdy nie je na oranžovej. */
.work-item {
  flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per));
  min-width: 0;
  margin: 0;
  border-radius: 18px;
  background: var(--color-surface);
}

.work-arrow {
  position: absolute;
  top: 35%;
  top: calc((100cqw - var(--gap) * (var(--per) - 1)) / var(--per) * 0.375);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-brand);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text) 16%, transparent);
  cursor: pointer;
}

.work-arrow--prev {
  left: 0;
  transform: translate(-50%, -50%);
}

.work-arrow--next {
  right: 0;
  transform: translate(50%, -50%);
}

.work-arrow:hover,
.work-arrow:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.work-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface-alt);
}

.work-media > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-item:hover .work-media > img {
  transform: scale(1.03);
}

/* Logo klienta: biele monochromatické na malej oranžovej dlaždici v pravom
   hornom rohu fotky – čitateľné na svetlej aj tmavej fotke (na oranžovej
   len biela). Výška loga cez --lh. Bez loga = názov ako dočasný text. */
.work-logo {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--color-brand);
}

.work-logo img {
  display: block;
  width: auto;
  height: var(--lh, 24px);
  filter: brightness(0) invert(1);
}

.work-logo--text {
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Popis: ikonka typu práce (web / tlač) + typ + odvetvie.
   Ikonka je oranžová na alt ploche, pri hoveri karty sa dlaždica vyplní. */
.work-item figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px 14px;
}

.work-kind {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--color-surface-alt);
  color: var(--color-brand);
  transition: background-color 150ms linear, color 150ms linear;
}

.work-item:hover .work-kind {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.work-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.work-meta strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.work-meta span {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.4;
}

@media (max-width: 1000px) {
  .work-head {
    grid-template-columns: 1fr;
  }

  /* Jedna fotka cez celú šírku by stuhu skryla – na menších
     obrazovkách je stuha 1,6× širšia, aby bolo vidno jej tvar. */
  .work-ribbon {
    --ribbon-h: calc(160vw * 0.5625);
    width: 160vw;
    margin-left: -80vw;
  }

  .work-row--lg {
    --per: 1;
  }

  .work-row--sm {
    --per: 2;
  }
}

@media (max-width: 700px) {
  .work-inner {
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }

  .work-lead {
    padding-bottom: 0;
    font-size: 16px;
  }

  .work-row--sm {
    --per: 1;
  }

  .work-row {
    --gap: 12px;
  }

  .work-arrow {
    width: 40px;
    height: 40px;
  }

  .work-arrow--prev {
    left: 10px;
    transform: translateY(-50%);
  }

  .work-arrow--next {
    right: 10px;
    transform: translateY(-50%);
  }

  /* Na mobile je pod radom menší padding – stuha ide nižšie, aby tiež
     podliezla pod bridge */
  .work-ribbon {
    top: calc(var(--media-h) / 2 - var(--ribbon-h) * 0.25 + 100px);
  }

  .work-meta strong {
    font-size: 17px;
  }

  .work-kind {
    width: 40px;
    height: 40px;
  }

  .work-logo {
    top: 12px;
    right: 12px;
    min-height: 40px;
    padding: 8px 11px;
    border-radius: 10px;
  }

  .work-logo img {
    height: calc(var(--lh, 24px) * 0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-track,
  .work-media > img,
  .work-kind {
    transition: none;
  }

  .work-item:hover .work-media > img {
    transform: none;
  }
}

/* Blog a novinky: biela sekcia pod kartami služieb. Nadpis v systéme
   tichý + silný riadok. Karty v jednom vodorovnom páse (natívny scroll
   so snapom, šípky v blog.js) – desktop 4, tablet ~2, mobil ~1 + kúsok
   ďalšej. Titulná fotka 4:5, dole oranžový prechod pre čitateľnosť
   nadpisu (na oranžovej len biela). Pod fotkou úvod článku. */
.blog {
  background: var(--color-surface);
  padding: clamp(88px, 10vw, 140px) 0;
}

.service-row + .blog {
  padding-top: 0;
}

.blog-inner {
  margin: 0 clamp(36px, 4.5vw, 72px);
}

.blog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34ch);
  align-items: end;
  gap: 24px clamp(32px, 5vw, 96px);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.blog-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.blog-title span {
  display: block;
}

.blog-title-quiet {
  color: var(--color-text-muted);
  font-weight: 300;
}

.blog-title-strong {
  font-weight: 500;
}

.blog-head-side {
  display: grid;
  gap: 20px;
  justify-items: start;
}

.blog-lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.5;
}

.blog-nav {
  display: flex;
  gap: 10px;
}

.blog-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-brand);
  cursor: pointer;
  transition: background-color 150ms linear, color 150ms linear, border-color 150ms linear, opacity 150ms linear;
}

.blog-arrow:hover,
.blog-arrow:focus-visible {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.blog-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.blog-track {
  --gap: 18px;
  --per: 4;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.blog-track::-webkit-scrollbar {
  display: none;
}

.blog-track:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

.blog-card {
  flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per));
  min-width: 0;
  scroll-snap-align: start;
}

.blog-cover {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface-alt);
  color: var(--color-on-brand);
  text-decoration: none;
  aspect-ratio: 4 / 5;
}

.blog-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Oranžový prechod v dolnej časti fotky – čisto funkčný, nesie nadpis */
.blog-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-brand) 96%, transparent) 0%,
    color-mix(in srgb, var(--color-brand) 82%, transparent) 28%,
    color-mix(in srgb, var(--color-brand) 0%, transparent) 62%
  );
  pointer-events: none;
}

.blog-cover-text {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 22px 22px 20px;
}

.blog-cover time {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.blog-cover h3 {
  margin: 0;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 25px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.blog-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
}

.blog-more svg {
  transition: transform 0.2s ease;
}

.blog-cover:hover img {
  transform: scale(1.04);
}

.blog-cover:hover .blog-more svg,
.blog-cover:focus-visible .blog-more svg {
  transform: translateX(4px);
}

.blog-cover:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.blog-excerpt {
  display: -webkit-box;
  margin: 16px 4px 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 1000px) {
  .blog-head {
    grid-template-columns: 1fr;
  }

  .blog-track {
    --per: 2.2;
  }
}

@media (max-width: 700px) {
  .blog-inner {
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }

  .blog-lead {
    font-size: 16px;
  }

  .blog-nav {
    display: none;
  }

  .blog-track {
    --gap: 12px;
    --per: 1.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-track {
    scroll-behavior: auto;
  }

  .blog-cover img,
  .blog-more svg {
    transition: none;
  }

  .blog-cover:hover img {
    transform: none;
  }
}

/* Google recenzie vo footeri (Elfsight, druhý widget) – vlastný riadok
   cez celú šírku medzi kontaktmi/partnermi a firemnými údajmi. */
.footer-reviews {
  position: relative;
  min-width: 0;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--color-border);
}

/* Elfsight badge sa inak centruje na celú šírku – vo footeri ho držíme
   vľavo pod štítkom, ako ostatný obsah footeru. Kontajner nesmie mať pred
   načítaním nulovú plochu, inak lazy loader Elfsightu widget nespustí. */
.footer-reviews > [class*="elfsight-app"] {
  margin-top: 14px;
  width: max-content;
  max-width: 100%;
  min-width: 90px;
  min-height: 130px;
}

/* Spojme sa (#kontakt): alt plocha, dva stĺpce. Vľavo výrok v systéme
   tichý + silný riadok (schválený slogan „Vy máte firmu. My máme zvyšok.“),
   priame kontakty, čísla a mapa. Vpravo biela karta s formulárom.
   FORMULÁR JE FUNKČNE NEDOTKNUTÝ: action send.php, POST, polia name /
   email / message / consent=yes, honeypot company, Turnstile, data-contact-*
   atribúty pre contact.js. Tu sa mení iba vzhľad (selektory pod .kontakt). */
.kontakt {
  background: var(--color-surface-alt);
  padding: clamp(88px, 10vw, 140px) 0;
}

.kontakt-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 112px);
  margin: 0 clamp(36px, 4.5vw, 72px);
}

.kontakt-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.kontakt-title span {
  display: block;
}

.kontakt-title-quiet {
  color: var(--color-text-muted);
  font-weight: 300;
}

.kontakt-title-strong {
  font-weight: 500;
}

.kontakt-lead {
  max-width: 40ch;
  margin: 24px 0 0;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.5;
}

/* Priame kontakty: riadky s oranžovou ikonkou, štítkom a šípkou */
.kontakt-direct {
  display: grid;
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.kontakt-direct li {
  border-bottom: 1px solid var(--color-border);
}

.kontakt-direct-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  color: var(--color-text);
  text-decoration: none;
}

.kontakt-direct-ico {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-brand);
  transition: background-color 150ms linear, color 150ms linear;
}

.kontakt-direct-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kontakt-direct-text span {
  color: var(--color-text-muted);
  font-size: 13px;
}

.kontakt-direct-text strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.kontakt-direct-arrow {
  display: flex;
  color: var(--color-brand);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 150ms linear, transform 0.2s ease;
}

.kontakt-direct-link:hover .kontakt-direct-ico,
.kontakt-direct-link:focus-visible .kontakt-direct-ico {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.kontakt-direct-link:hover .kontakt-direct-arrow,
.kontakt-direct-link:focus-visible .kontakt-direct-arrow {
  opacity: 1;
  transform: none;
}

/* Tvrdé čísla namiesto vypĺňajúcich fráz */
.kontakt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 36px 0 0;
}

.kontakt-stats div {
  min-width: 0;
}

.kontakt-stats dt {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.kontakt-stats dd {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.35;
}

.kontakt-map {
  position: relative;
  overflow: hidden;
  margin-top: 36px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  aspect-ratio: 16 / 7;
}

.kontakt-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.kontakt-map-link {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-text) 14%, transparent);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.kontakt-map-link:hover,
.kontakt-map-link:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

/* Karta s formulárom */
.kontakt-card {
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
}

.kontakt-card-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.kontakt-card-lead {
  margin: 8px 0 24px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.page-home .kontakt .contact-form {
  gap: 8px;
}

.page-home .kontakt .contact-form > label:not(.contact-consent):not(.contact-honey) {
  margin-top: 6px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.page-home .kontakt .contact-form > input:not(.contact-honey),
.page-home .kontakt .contact-form > textarea {
  margin-bottom: 4px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  transition: border-color 150ms linear, box-shadow 150ms linear;
}

.page-home .kontakt .contact-form > input:not(.contact-honey):focus,
.page-home .kontakt .contact-form > textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
  outline: none;
}

.page-home .kontakt .contact-form > textarea {
  min-height: 140px;
}

.page-home .kontakt .contact-consent {
  margin: 12px 0 8px;
  color: var(--color-text-muted);
}

.page-home .kontakt .contact-form > button {
  height: 56px;
  margin-top: 8px;
  padding: 0 24px;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

@media (max-width: 1000px) {
  .kontakt-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .kontakt-inner {
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }

  .kontakt-lead {
    font-size: 16px;
  }

  .kontakt-direct-text strong {
    font-size: 17px;
  }

  .kontakt-stats dd {
    font-size: 13px;
  }

  .kontakt-map {
    aspect-ratio: 4 / 3;
  }

  .kontakt-card {
    padding: 24px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-direct-ico,
  .kontakt-direct-arrow,
  .page-home .kontakt .contact-form > input,
  .page-home .kontakt .contact-form > textarea {
    transition: none;
  }
}

/* Proces (#proces): alt plocha pod kartami služieb. Nadpis v systéme
   tichý + silný riadok. Krok 01 cez celú šírku s mapou (reálny obrys SR
   z Natural Earth, mestá na reálnych súradniciach – oranžové = osobne,
   šedé = online, Hencovce = domov). Krok 03 je jediná oranžová karta,
   lebo je najdôležitejší (návrh na schválenie, iterácie). */
.proces {
  background: var(--color-surface-alt);
  padding: clamp(88px, 10vw, 140px) 0;
}

.proces-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "head rail"
    "map rail";
  align-items: start;
  column-gap: clamp(32px, 5vw, 96px);
  row-gap: clamp(20px, 2.4vw, 32px);
  margin: 0 clamp(36px, 4.5vw, 72px);
}

.proces-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34ch);
  align-items: end;
  gap: 24px clamp(32px, 5vw, 96px);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.proces-title,
.faq-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.proces-title span,
.faq-title span {
  display: block;
}

.proces-title-quiet,
.faq-title-quiet {
  color: var(--color-text-muted);
  font-weight: 300;
}

.proces-title-strong,
.faq-title-strong {
  font-weight: 500;
}

.proces-lead,
.faq-lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.5;
}

.proces-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proces-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
}

.proces-num {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.proces-step h3 {
  margin: 14px 0 10px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.proces-step p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* 01: cez celú šírku, text + mapa */
.proces-step--meet {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.proces-modes {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.proces-modes li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.proces-modes strong {
  margin-right: 6px;
  color: var(--color-text);
  font-weight: 600;
}

.proces-mode-dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.proces-mode-dot--east {
  background: var(--color-brand);
}

.proces-mode-dot--online {
  background: color-mix(in srgb, var(--color-brand) 22%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 45%, transparent);
}

.proces-map {
  margin: 0;
}

.proces-map-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.map-land {
  fill: var(--color-surface-alt);
  stroke: var(--color-border);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Mestá: väčšia neviditeľná plocha pre hover, názov sa ukáže pri hoveri */
.map-city circle {
  stroke: transparent;
  stroke-width: 18;
}

.map-city--east circle {
  fill: var(--color-brand);
}

.map-city--west circle {
  fill: #8a8683;
}

.map-city--home circle {
  fill: var(--color-brand);
  stroke: var(--color-surface);
  stroke-width: 5;
}

.map-city--home .map-pulse {
  fill: var(--color-brand);
  stroke: none;
  opacity: 0.35;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-pulse 2.4s ease-out infinite;
}

@keyframes map-pulse {
  from {
    opacity: 0.4;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(3);
  }
}

.map-city text {
  fill: var(--color-text);
  font-family: var(--font-text);
  font-size: 30px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 8;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms linear;
}

.map-city:hover text,
.map-city--home text {
  opacity: 1;
}

.map-city--home text {
  font-weight: 700;
}

/* 03: jediná oranžová karta – na oranžovej len biela a #141414 */
.proces-step--key {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.proces-step--key .proces-num,
.proces-step--key h3,
.proces-step--key p {
  color: var(--color-on-brand);
}

.proces-key-label {
  align-self: flex-start;
  margin-top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.proces-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-on-brand);
  font-size: 15px;
  font-weight: 600;
}

.proces-checks svg {
  flex: 0 0 auto;
}

/* Časté otázky (#faq): biela sekcia pred kontaktom, natívne <details> */
.faq {
  background: var(--color-surface);
  padding: clamp(88px, 10vw, 140px) 0;
}

.blog + .faq {
  padding-top: 0;
}

.faq-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(40px, 6vw, 112px);
  margin: 0 clamp(36px, 4.5vw, 72px);
}

.faq-head {
  position: sticky;
  top: 140px;
}

.faq-lead {
  max-width: 34ch;
  margin-top: 24px;
}

.faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  margin-top: 28px;
  padding: 0 26px;
  border: 2px solid var(--color-brand);
  border-radius: 999px;
  color: var(--color-brand);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms linear, color 150ms linear;
}

.faq-cta:hover,
.faq-cta:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.faq-list {
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 2px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

.faq-ico {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  transition: background-color 150ms linear, transform 0.25s ease;
}

.faq-ico::before,
.faq-ico::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-brand);
  transform: translate(-50%, -50%);
}

.faq-ico::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item summary:hover .faq-ico {
  background: var(--color-border);
}

.faq-item[open] .faq-ico {
  background: var(--color-brand);
  transform: rotate(45deg);
}

.faq-item[open] .faq-ico::before,
.faq-item[open] .faq-ico::after {
  background: var(--color-on-brand);
}

.faq-answer p {
  max-width: 62ch;
  margin: 0;
  padding: 0 2px 24px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .proces-head,
  .faq-inner {
    grid-template-columns: 1fr;
  }

  .proces-steps {
    grid-template-columns: 1fr;
  }

  .proces-step--meet {
    grid-template-columns: 1fr;
  }

  .faq-head {
    position: static;
  }
}

@media (max-width: 700px) {
  .proces-inner,
  .faq-inner {
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }

  .proces-lead,
  .faq-lead {
    font-size: 16px;
  }

  .map-city text {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-city--home .map-pulse {
    animation: none;
    opacity: 0;
  }

  .map-city text,
  .faq-ico,
  .faq-cta {
    transition: none;
  }
}

/* Identita onvyo (práce, proces, otázky, kontakt).
   Nadpisy v systéme „Vy … / My …“ ako bridge: prvý riadok začína glyfom
   „vy“ (ten istý ako v hero, rovnaké proporcie) a je silný – klient
   vpredu; druhý riadok „My …“ je tichý – my v pozadí. */
.vy-title span {
  display: block;
}

.vy-title .vy-title-you {
  color: var(--color-text);
  font-weight: 500;
}

.vy-title .vy-title-us {
  margin-top: 0.14em;
  color: var(--color-text-muted);
  font-weight: 300;
}

.vy-mark {
  display: inline-block;
  width: auto;
  height: 1.38em;
  margin-right: 0.22em;
  vertical-align: -0.42em;
}

/* Proces: veľké čísla krokov v Outfit, oranžové */
.proces-num {
  font-size: clamp(40px, 3.6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Krok 03 (vy schvaľujete) nesie veľký biely glyf „vy“ v rohu */
.proces-step--key {
  position: relative;
}

.proces-key-mark {
  position: absolute;
  top: clamp(20px, 2.2vw, 30px);
  right: clamp(20px, 2.2vw, 30px);
  width: auto;
  height: clamp(52px, 5vw, 72px);
}

/* Kontakt: jedna zvislá stuha (img/stuha-zvisla.webp = otočená master
   stuha) vchádza hornou hranou sekcie a vychádza dolnou, za kartou
   s formulárom. Text nikdy neleží na stuhe – karta je navrchu. */
.kontakt {
  position: relative;
  overflow: hidden;
}

.kontakt-card-wrap {
  position: relative;
  align-self: stretch;
}

.kontakt-card {
  position: relative;
  z-index: 1;
}

.kontakt-ribbon {
  position: absolute;
  z-index: 0;
  top: calc(-1 * clamp(88px, 10vw, 140px));
  bottom: calc(-1 * clamp(88px, 10vw, 140px));
  left: 50%;
  aspect-ratio: 1080 / 1920;
  background: url("img/stuha-zvisla.webp") center / 100% 100% no-repeat;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (max-width: 1000px) {
  /* Pod sebou: stuha začína tesne nad kartou, nie za textom nad ňou */
  .kontakt-ribbon {
    top: -28px;
  }
}

/* Mapa v kroku 01 (SK + CZ): online = svetlá oranžová (22 % značkovej), osobne = značková oranžová
   (východné Slovensko). Západná hranica oranžovej nie je rovný rez, ale
   stredová krivka našej stuhy (patern.png) postavená na výšku. Pobočka
   vo Vranove = biely glyf „vy“ na oranžovej. Mapa je zámerne menšia. */
.proces-map {
  justify-self: center;
  width: 100%;
  max-width: 520px;
}

.map-online {
  fill: color-mix(in srgb, var(--color-brand) 22%, var(--color-surface));
}

/* Biela linka po krivke stuhy: modrá a oranžová sa nikdy nedotýkajú */
.map-edge {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-person {
  fill: var(--color-brand);
}

.map-border {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 3;
  stroke-linejoin: round;
}

.proces-mode-dot--online {
  background: color-mix(in srgb, var(--color-brand) 22%, var(--color-surface));
}

.proces-mode-mark {
  flex: 0 0 auto;
  width: 22px;
  height: auto;
  margin: 0 -4px;
}

/* Biele pozadie namiesto alt plochy (rozhodnutie majiteľa) */
.proces,
.kontakt {
  background: var(--color-surface);
}

.service-row + .proces {
  padding-top: 0;
}

.kontakt-direct-ico {
  background: var(--color-surface-alt);
}

/* Susedné biele sekcie: medzeru drží spodný padding predchádzajúcej */
.proces + .blog,
.faq + .kontakt {
  padding-top: 0;
}

/* Mapa: kancelária (Vranov, Budovateľská) a sklad (Hencovce) – biely kruh
   s oranžovou ikonkou z Lucide na oranžovej ploche. Reálne ~1,5 km od seba,
   na mapke zámerne roztiahnuté. */
.map-pin circle {
  fill: var(--color-surface);
}

.map-pin {
  color: var(--color-brand);
}

.proces-mode-ico {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 -4px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.proces-mode-ico svg {
  width: 13px;
  height: 13px;
}

/* Proces – kompozícia „Vy v strede. My okolo.“: mapa je dominantný objekt
   v strede (bez karty), kroky sú okolo nej. Poradie v smere hodinových
   ručičiek: 01 vľavo hore → 02 vpravo hore → 03 vpravo dole → 04 vľavo dole.
   Zoznam krokov má display: contents, aby kroky boli v tej istej mriežke
   ako mapa a v HTML ostali jedným zoradeným zoznamom 01–04. */
.proces-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr);
  grid-template-areas:
    "s1 map s2"
    "s4 map s3";
  align-items: stretch;
  gap: 18px clamp(24px, 3vw, 48px);
}

.proces-stage .proces-steps {
  display: contents;
}

.proces-step--1 { grid-area: s1; }
.proces-step--2 { grid-area: s2; }
.proces-step--3 { grid-area: s3; }
.proces-step--4 { grid-area: s4; }

.proces-stage .proces-map {
  grid-area: map;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
}

.proces-map-legend {
  margin-top: clamp(28px, 3vw, 40px);
}

.proces-map-legend .proces-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  justify-content: start;
  margin: 0;
}

.proces-map-legend .proces-modes li {
  align-items: flex-start;
  gap: 10px;
}

.proces-map-legend .proces-mode-dot,
.proces-map-legend .proces-mode-ico {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
}

.proces-map-legend .proces-mode-ico svg {
  width: 11px;
  height: 11px;
}

.proces-mode-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.proces-map-legend .proces-mode-copy strong {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.proces-mode-copy span {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .proces-map-legend .proces-modes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 520px;
  }

  .proces-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "map map"
      "s1 s2"
      "s4 s3";
  }

  .proces-stage .proces-map {
    margin-bottom: 16px;
  }
}

@media (max-width: 700px) {
  .proces-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "map"
      "s1"
      "s2"
      "s3"
      "s4";
  }

  .proces-map-legend .proces-modes {
    justify-content: flex-start;
  }
}

/* Kroky okolo mapy: 01, 02, 04 bez karty (číslo, nadpis, veta), aby mapa
   ostala dominantná; 03 ostáva jediná oranžová karta. Ľavý stĺpec
   zarovnaný doľava, pravý doprava k mape. */
.proces-stage .proces-step:not(.proces-step--key) {
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.proces-step--1,
.proces-step--2 {
  align-self: start;
}

.proces-step--4 {
  align-self: end;
}

.proces-stage .proces-step p {
  font-size: 15px;
}

@media (max-width: 1100px) {
  .proces-step--4 {
    align-self: start;
  }
}

/* Proces v2 – upratané: mapa vľavo ako dominanta (~60 %), vpravo zvislá
   časová os 01 → 04 (čísla v kruhoch spojené tenkou linkou), čítanie zhora
   nadol. Krok 03 je zvýraznený v rámci systému: plný oranžový kruh, svetlo
   oranžové pozadie (rovnaký tón ako mapa), štítok a odrážky. */
.proces-head {
  grid-area: head;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
}

.proces-stage {
  display: contents;
}

.proces-stage .proces-map {
  grid-area: map;
}

.proces-rail {
  grid-area: rail;
  min-width: 0;
  margin-top: 48px;
}

.proces-stage .proces-steps {
  display: flex;
  flex-direction: column;
  grid-area: auto;
  gap: 0;
}

.proces-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.proces-cta svg {
  width: 16px;
  height: 16px;
}

.proces-cta:hover,
.proces-cta:focus-visible {
  color: var(--color-text);
}

.proces-stage .proces-step,
.proces-stage .proces-step:not(.proces-step--key),
.proces-stage .proces-step--key {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-area: auto;
  align-self: auto;
  column-gap: 20px;
  padding: 0 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.proces-stage .proces-step > * {
  grid-column: 2;
}

/* Číslo v kruhu na osi */
.proces-stage .proces-step .proces-num {
  grid-row: 1 / span 6;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-brand);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-brand);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Spojnica medzi kruhmi */
.proces-stage .proces-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 52px;
  bottom: 4px;
  left: 23px;
  width: 2px;
  background: var(--color-border);
}

.proces-stage .proces-step h3 {
  margin: 10px 0 6px;
  color: var(--color-text);
  font-size: clamp(20px, 1.7vw, 24px);
}

.proces-stage .proces-step p {
  color: var(--color-text-muted);
  font-size: 15px;
}

/* 03: plná značková karta. Doplnky (číslo, štítok, fajky) sú svetlé. */
.proces-stage .proces-step--key {
  margin: 0 0 28px -16px;
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: var(--color-brand);
}

.proces-stage .proces-step--key:not(:last-child)::before {
  left: 39px;
  top: 70px;
  bottom: -24px;
  background: color-mix(in srgb, var(--color-on-brand) 42%, transparent);
}

.proces-stage .proces-step--key .proces-num {
  border-color: var(--color-on-brand);
  background: var(--color-on-brand);
  color: var(--color-brand);
}

.proces-stage .proces-step--key h3,
.proces-stage .proces-step--key .proces-checks li {
  color: var(--color-on-brand);
}

.proces-stage .proces-step--key p {
  color: var(--color-text);
}

.proces-stage .proces-step--key .proces-key-label {
  justify-self: start;
  margin: 8px 0 0;
  background: var(--color-on-brand);
  color: var(--color-brand);
}

.proces-stage .proces-step--key .proces-checks {
  margin-top: 12px;
}

.proces-stage .proces-step--key .proces-checks svg {
  color: var(--color-on-brand);
}

.proces-stage .proces-map {
  grid-area: map;
}

@media (max-width: 1100px) {
  .proces-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "map"
      "rail";
  }

  .proces-stage .proces-map {
    margin-bottom: 8px;
  }
}

@media (max-width: 700px) {
  .proces-stage .proces-step,
  .proces-stage .proces-step:not(.proces-step--key),
  .proces-stage .proces-step--key {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
  }

  .proces-stage .proces-step .proces-num {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .proces-stage .proces-step:not(:last-child)::before {
    top: 44px;
    left: 19px;
  }

  .proces-stage .proces-step--key:not(:last-child)::before {
    top: 60px;
    left: 35px;
  }
}

.map-online[data-zone],
.map-person[data-zone] {
  cursor: default;
}

.map-border,
.map-edge,
.map-pin {
  pointer-events: none;
}

.proces-map-frame {
  position: relative;
}

.map-pop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 8px 12px 9px;
  border: 0;
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 14%, transparent);
  pointer-events: none;
  white-space: nowrap;
}

.map-pop[hidden] {
  display: none;
}

.map-pop-kicker,
.map-pop-line {
  margin: 0;
}

.map-pop-kicker {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-pop-line {
  margin-top: 2px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.map-tools-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 44px;
}

.map-tools-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.map-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.map-tools li {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  line-height: 0;
}

.map-tools img {
  display: block;
  height: 28px;
  width: auto;
}

.proces-map.is-online .map-tools li {
  animation: map-tool-pulse 2.2s ease-in-out infinite;
}

.proces-map.is-online .map-tools li:nth-child(2) { animation-delay: 0.18s; }
.proces-map.is-online .map-tools li:nth-child(3) { animation-delay: 0.36s; }
.proces-map.is-online .map-tools li:nth-child(4) { animation-delay: 0.54s; }

@keyframes map-tool-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-brand) 16%, transparent); }
}

@media (max-width: 700px) {
  .proces-map-legend .proces-modes {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .proces-map.is-online .map-tools li {
    animation: none;
  }
}

/* Kontakt na čiernom (#141414 = textová čierna, žiadna nová farba):
   kontrastná, úplne oddelená záverečná sekcia. Biely text, tlmený text
   ako biela zmiešaná do čiernej, oranžová pre glyf, ikonky a stuhu.
   Karta s formulárom ostáva biela – maximálny kontrast, polia bez zmeny. */
.kontakt {
  --kontakt-muted: color-mix(in srgb, var(--color-on-brand) 62%, var(--color-text));
  --kontakt-line: color-mix(in srgb, var(--color-on-brand) 14%, var(--color-text));
  background: var(--color-text);
  color: var(--color-on-brand);
}

.faq + .kontakt {
  padding-top: clamp(88px, 10vw, 140px);
}

.kontakt .vy-title .vy-title-you {
  color: var(--color-on-brand);
}

.kontakt .vy-title .vy-title-us {
  color: var(--kontakt-muted);
}

.kontakt-lead {
  color: var(--kontakt-muted);
}

.kontakt-direct,
.kontakt-direct li {
  border-color: var(--kontakt-line);
}

.kontakt-direct-link {
  color: var(--color-on-brand);
}

.kontakt-direct-text span {
  color: var(--kontakt-muted);
}

.kontakt-direct-ico {
  background: var(--kontakt-line);
  color: var(--color-brand);
}

.kontakt-stats dt {
  color: var(--color-on-brand);
}

.kontakt-stats dd {
  color: var(--kontakt-muted);
}

.kontakt-card {
  border: 0;
}

.kontakt-card-note {
  margin: 14px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}

/* Vzory vo formulári (placeholder): jasne svetlošedé, aby nikto nemyslel,
   že pole je už vyplnené; po začatí písania zmiznú. */
.page-home .kontakt .contact-form > input::placeholder,
.page-home .kontakt .contact-form > textarea::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-surface));
  font-weight: 400;
  opacity: 1;
}

/* Kompaktná karta formulára – celá sa zmestí do viewportu (cieľ ≤ 600 px).
   Meno a e-mail vedľa seba (mriežka cez id polí, HTML sa nemení),
   ostatné cez celú šírku. Funkcia formulára bez zmeny. */
.kontakt-card {
  padding: clamp(24px, 2.4vw, 32px);
}

.kontakt-card-title {
  font-size: clamp(22px, 1.9vw, 26px);
}

.kontakt-card-lead {
  margin: 6px 0 18px;
  font-size: 14px;
}

.page-home .kontakt .contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 6px;
}

.page-home .kontakt .contact-form > * {
  grid-column: 1 / -1;
}

.page-home .kontakt .contact-form > label[for="contact-name"] {
  grid-column: 1;
  grid-row: 1;
}

.page-home .kontakt .contact-form > #contact-name {
  grid-column: 1;
  grid-row: 2;
}

.page-home .kontakt .contact-form > label[for="contact-email"] {
  grid-column: 2;
  grid-row: 1;
}

.page-home .kontakt .contact-form > #contact-email {
  grid-column: 2;
  grid-row: 2;
}

.page-home .kontakt .contact-form > label:not(.contact-consent):not(.contact-honey) {
  margin-top: 4px;
  font-size: 13px;
}

.page-home .kontakt .contact-form > input:not(.contact-honey),
.page-home .kontakt .contact-form > textarea {
  margin-bottom: 0;
  padding: 11px 14px;
  font-size: 15px;
}

.page-home .kontakt .contact-form > textarea {
  min-height: 96px;
}

.page-home .kontakt .contact-consent {
  margin: 8px 0 4px;
}

.page-home .kontakt .contact-form .turnstile-wrap {
  margin: 4px 0 0;
}

.page-home .kontakt .contact-form > button {
  height: 50px;
  margin-top: 6px;
}

.kontakt-card-note {
  margin-top: 10px;
}

@media (max-width: 700px) {
  .page-home .kontakt .contact-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-home .kontakt .contact-form > label[for="contact-name"],
  .page-home .kontakt .contact-form > #contact-name,
  .page-home .kontakt .contact-form > label[for="contact-email"],
  .page-home .kontakt .contact-form > #contact-email {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Ikonky kontaktov bez dlaždíc – čistá oranžová ikonka, žiadny rámček */
.kontakt-direct-ico,
.kontakt-direct-link:hover .kontakt-direct-ico,
.kontakt-direct-link:focus-visible .kontakt-direct-ico {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: transparent;
  color: var(--color-brand);
}

.kontakt-direct-ico svg {
  width: 22px;
  height: 22px;
}

.kontakt-direct-link {
  gap: 18px;
}

.kontakt-direct-link:hover .kontakt-direct-text strong,
.kontakt-direct-link:focus-visible .kontakt-direct-text strong {
  color: var(--color-brand);
}

/* Mobil: Turnstile má pevnú šírku 300 px – karta mu musí nechať aspoň toľko */
@media (max-width: 700px) {
  .kontakt-card {
    padding: 22px 16px;
  }
}

/* Footer (.foot) – pokojný, usporiadaný ako vo veľkej firme, identitu nesie
   oranžový oblúk (img/footer-znak.webp z foooter.png), ktorý v pravom dolnom
   rohu vychádza z konca stránky nahor, logo onvyo a typografia.
   Hore 5 stĺpcov (značka · kontakt · navigácia · partneri · Google recenzie),
   dole firemné údaje, právne odkazy a ©. Spodný riadok necháva miesto
   oblúku – nikdy nezasahuje do textu. */
.foot {
  --foot-mark-w: clamp(130px, 14vw, 200px);
  --foot-mark-r: clamp(20px, 3vw, 48px);
  position: relative;
  overflow: hidden;
  border-top: 0;
  background: var(--color-surface);
  color: var(--color-text);
}

.foot-mark {
  position: absolute;
  right: var(--foot-mark-r);
  bottom: 0;
  z-index: 0;
  display: block;
  width: var(--foot-mark-w);
  height: auto;
  pointer-events: none;
  user-select: none;
}

.foot-inner {
  position: relative;
  z-index: 1;
  margin: 0 clamp(36px, 4.5vw, 72px);
  padding: clamp(64px, 7vw, 104px) 0 0;
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 0.8fr);
  gap: 40px clamp(24px, 3vw, 48px);
  padding-bottom: clamp(48px, 5vw, 72px);
}

.foot-logo {
  display: inline-block;
  line-height: 0;
}

.foot-logo img {
  display: block;
  width: auto;
  height: clamp(36px, 3vw, 44px);
}

.foot-claim {
  max-width: 24ch;
  margin: 18px 0 24px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.foot-cta {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border: 2px solid var(--color-brand);
  border-radius: 999px;
  color: var(--color-brand);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms linear, color 150ms linear;
}

.foot-cta:hover,
.foot-cta:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.foot-label {
  margin: 6px 0 18px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

.foot-list a {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms linear;
}

.foot-list a:hover,
.foot-list a:focus-visible {
  color: var(--color-brand);
}

.foot-contacts a,
.foot-address {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}

.foot-contacts svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-brand);
}

.foot-address {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Partneri: presne pôvodné obrázky, každý zvlášť a väčší */
.foot-partners {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-partners a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  line-height: 0;
  transition: border-color 150ms linear;
}

.foot-partners a:hover,
.foot-partners a:focus-visible {
  border-color: var(--color-brand);
}

.foot-partners img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 44px;
}

.foot-reviews > [class*="elfsight-app"] {
  width: max-content;
  max-width: 100%;
  min-width: 90px;
  min-height: 130px;
}

/* Spodok: firemné údaje + právne odkazy; vpravo voľné miesto pre oblúk */
.foot-bottom {
  display: grid;
  gap: 10px;
  margin-right: calc(var(--foot-mark-w) + var(--foot-mark-r) - clamp(36px, 4.5vw, 72px) + 32px);
  padding: 24px 0 max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
}

.foot-company,
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.foot-company strong {
  color: var(--color-text);
  font-weight: 600;
}

.foot-legal a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.foot-legal a:hover,
.foot-legal a:focus-visible {
  color: var(--color-brand);
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .foot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .foot {
    --foot-mark-w: 104px;
  }

  .foot-inner {
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }

  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }

  .foot {
    --foot-mark-r: 16px;
  }

  .foot-bottom {
    margin-right: calc(var(--foot-mark-w) + 16px - 20px + 16px);
  }

  .foot-company,
  .foot-legal {
    flex-direction: column;
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .foot-cta,
  .foot-list a,
  .foot-partners a {
    transition: none;
  }
}

/* „Zobraziť všetky referencie“ – v hlavičke sekcie pod odsekom (nie pod
   fotkami, tam ide stuha a text na ňu nesmie) */
.work-head-side {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.work-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 2px solid var(--color-brand);
  border-radius: 999px;
  color: var(--color-brand);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms linear, color 150ms linear;
}

.work-more-btn:hover,
.work-more-btn:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

/* Podstránka Referencie (referencie.html): mriežka 3 vedľa seba (tablet 2,
   mobil 1), karty rovnaké ako na homepage (.work-item: fotka 4:3, logo
   klienta na oranžovej dlaždici, ikonka typu + odvetvie). Načítanie
   po dávkach rieši referencie.js (9, potom po 6). */
.refs {
  background: var(--color-surface);
  padding: clamp(40px, 5vw, 72px) 0 clamp(88px, 10vw, 140px);
}

.refs-inner {
  margin: 0 clamp(36px, 4.5vw, 72px);
}

.refs-crumbs {
  display: flex;
  gap: 10px;
  margin-bottom: clamp(28px, 3vw, 44px);
  color: var(--color-text-muted);
  font-size: 14px;
}

.refs-crumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.refs-crumbs a:hover,
.refs-crumbs a:focus-visible {
  color: var(--color-brand);
}

.refs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34ch);
  align-items: end;
  gap: 24px clamp(32px, 5vw, 96px);
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

.refs-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.refs-title span {
  display: block;
}

.refs-title-quiet {
  color: var(--color-text-muted);
  font-weight: 300;
}

.refs-title-strong {
  font-weight: 500;
}

.refs-lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.5;
}

.refs-count {
  display: block;
  margin-top: 10px;
  color: var(--color-brand);
  font-size: 15px;
  font-weight: 600;
}

.refs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.refs-item {
  min-width: 0;
}

.refs-item:focus {
  outline: none;
}

.refs-grid .work-item {
  flex: none;
  height: 100%;
}

.refs-item.is-revealing {
  animation: refs-in 0.6s var(--refs-delay, 0ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes refs-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.refs-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 56px);
}

.refs-more[hidden] {
  display: none;
}

.refs-more-btn,
.refs-cta-btn {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 26px;
  border: 2px solid var(--color-brand);
  border-radius: 999px;
  background: transparent;
  color: var(--color-brand);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms linear, color 150ms linear;
}

.refs-more-btn:hover,
.refs-more-btn:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.refs-sentinel {
  height: 1px;
}

.refs-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin-top: clamp(56px, 6vw, 96px);
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid var(--color-border);
}

.refs-cta-text {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.refs-cta-btn {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.refs-cta-btn:hover,
.refs-cta-btn:focus-visible {
  border-color: var(--color-brand-hover);
  background: var(--color-brand-hover);
}

@media (max-width: 1000px) {
  .refs-head {
    grid-template-columns: 1fr;
  }

  .refs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .refs-inner {
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }

  .refs-lead {
    font-size: 16px;
  }

  .refs-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .refs-item.is-revealing {
    animation: none;
  }

  .refs-more-btn,
  .refs-cta-btn {
    transition: none;
  }
}

/* Hodnotenie nového webu (feedback.js): karta vľavo dole (vpravo je chat),
   neblokuje stránku. Nadpis v systéme „[vy] … / My …“ (malý), oranžové
   hviezdičky (radio 1–5, ovládateľné klávesnicou), nepovinný návrh. */
.fb {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: max(20px, env(safe-area-inset-left));
  z-index: 60;
  width: min(380px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 24px 24px 20px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--color-text) 18%, transparent);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.fb.is-open {
  opacity: 1;
  transform: none;
}

.fb[hidden] {
  display: none;
}

.fb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text);
  cursor: pointer;
}

.fb-close:hover,
.fb-close:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.fb-title {
  margin: 0 40px 6px 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.fb-title span {
  display: block;
}

.fb-title-you {
  font-weight: 500;
}

.fb-title-us {
  margin-top: 0.1em;
  color: var(--color-text-muted);
  font-weight: 300;
}

.fb-desc {
  margin: 10px 0 16px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.fb-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.fb-rate legend {
  float: left;
  padding: 0;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
}

.fb-stars {
  display: flex;
  gap: 2px;
}

.fb-stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.fb-stars label {
  display: flex;
  padding: 2px;
  border-radius: 6px;
  cursor: pointer;
}

.fb-stars svg {
  fill: var(--color-border);
  transition: fill 120ms linear, transform 120ms ease;
}

.fb-stars label.is-on svg {
  fill: var(--color-brand);
}

.fb-stars label:hover svg {
  transform: scale(1.12);
}

.fb-stars input:focus-visible + label {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}

.fb-label {
  display: block;
  margin: 12px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
}

.fb-label span {
  color: var(--color-text-muted);
  font-weight: 400;
}

.fb-form textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.fb-form textarea::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-surface));
}

.fb-form textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
  outline: none;
}

.fb-error {
  margin: 10px 0 0;
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 600;
}

.fb-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.fb-submit {
  flex: 1 1 auto;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.fb-submit:hover,
.fb-submit:focus-visible {
  background: var(--color-brand-hover);
}

.fb-later {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.fb-later:hover,
.fb-later:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

.fb-thanks .fb-title {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .fb {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    max-height: 85vh;
    padding: 20px 18px 16px;
  }

  .fb-title {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fb,
  .fb-stars svg {
    transition: none;
  }
}

/* Bridge – doladenie: oranžová vlna z projektov tvorí „vstup“ do sekcie,
   preto obsah ide vyššie (menší horný padding). Partneri na hranatých
   bielych dlaždiciach (bez zaoblenia), logá väčšie. */
.bridge {
  padding-top: clamp(28px, 3vw, 48px);
  padding-bottom: clamp(80px, 8vw, 128px);
}

.bridge-partners {
  gap: 14px;
}

.bridge-partners a {
  height: 108px;
  padding: 0 22px;
  border-radius: 0;
}

.bridge-partners .is-shoptet {
  height: 40px;
}

.bridge-partners .is-booqme {
  height: 34px;
}

.bridge-partners .is-websupport {
  height: 66px;
  border-radius: 0;
}

@media (max-width: 700px) {
  .bridge {
    padding-top: 28px;
    padding-bottom: 64px;
  }

  .bridge-partners a {
    height: 76px;
    padding: 0 10px;
  }

  .bridge-partners .is-shoptet {
    height: 24px;
  }

  .bridge-partners .is-booqme {
    height: 21px;
  }

  .bridge-partners .is-websupport {
    height: 46px;
  }
}

/* Turnstile v hodnotiacej karte (300 × 65 px) */
.fb-turnstile {
  min-height: 65px;
  margin-top: 12px;
}

.fb-submit:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* Partnerské logá (Shoptet, booqme, Websupport) majú prísny brand manuál:
   len proporcionálne zväčšenie/zmenšenie, nikdy deformácia. Veľkosť je
   preto horný limit (max-height), šírka aj výška sa dopočítajú z pomeru
   strán; object-fit: contain je poistka pre akýkoľvek užší box. */
.bridge-partners img,
.foot-partners img,
.footer-partner img,
.partners-row-link img {
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.bridge-partners .is-shoptet { height: auto; max-height: 40px; }
.bridge-partners .is-booqme { height: auto; max-height: 34px; }
.bridge-partners .is-websupport { height: auto; max-height: 66px; }

@media (max-width: 700px) {
  .bridge-partners .is-shoptet { max-height: 24px; }
  .bridge-partners .is-booqme { max-height: 21px; }
  .bridge-partners .is-websupport { max-height: 46px; }
}

/* Hodnotiaca karta nad ikonkou CookieYes (kruh ~44 px vľavo dole) –
   nikdy ju neprekrýva. Samotnú lištu rieši feedback.js (čaká na súhlas). */
.fb {
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px));
  max-height: calc(100vh - 96px);
}

@media (max-width: 700px) {
  .fb {
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 58px));
    max-height: calc(85vh - 58px);
  }
}

/* Ďakovná stránka (dakujeme.html) – po odoslaní kontaktného formulára.
   Vľavo biela plocha s textom (systém „Vy … / My …“, 3 kroky, tlačidlá),
   vpravo oranžový panel = pattern so stuhou, ktorá vychádza z jeho ľavého
   okraja, teda spoza textového stĺpca. Text nikdy neleží na stuhe.
   Pod 860 px panel hore ako pás (stuha zhora nadol). */
.thx {
  background: var(--color-surface);
}

.thx-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: min(calc(100vh - 96px), 860px);
}

.thx-copy {
  align-self: center;
  max-width: 640px;
  padding: clamp(48px, 6vw, 96px) clamp(36px, 4.5vw, 72px);
}

.thx-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.thx-lead {
  max-width: 44ch;
  margin: 28px 0 0;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.55;
}

.thx-steps {
  display: grid;
  gap: 18px;
  margin: 36px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.thx-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.thx-step-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--color-brand);
  border-radius: 50%;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

/* prvý krok je hotový (e-mail už prišiel) – plný kruh */
.thx-steps li:first-child .thx-step-num {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.thx-step-text {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.thx-step-text strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
}

.thx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.thx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border: 2px solid var(--color-brand);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms linear, color 150ms linear, border-color 150ms linear;
}

.thx-btn--primary {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.thx-btn--primary:hover,
.thx-btn--primary:focus-visible {
  border-color: var(--color-brand-hover);
  background: var(--color-brand-hover);
}

.thx-btn--outline {
  background: transparent;
  color: var(--color-brand);
}

.thx-btn--outline:hover,
.thx-btn--outline:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.thx-urgent {
  margin: 22px 0 0;
  color: var(--color-text-muted);
  font-size: 15px;
}

.thx-urgent a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.thx-urgent a:hover {
  color: var(--color-brand);
}

.thx-visual {
  position: relative;
  overflow: hidden;
  background: var(--color-brand);
}

.thx-visual picture,
.thx-visual img {
  display: block;
  width: 100%;
  height: 100%;
}

.thx-visual img {
  object-fit: cover;
  /* stuha vchádza z ľavého okraja panelu – ten musí ostať vždy vidno */
  object-position: left center;
}

@media (max-width: 860px) {
  .thx-stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .thx-visual {
    order: -1;
    height: clamp(170px, 34vw, 280px);
  }

  .thx-visual img {
    object-position: 70% top;
  }

  .thx-copy {
    max-width: none;
    padding: 40px 20px 64px;
  }
}

@media (max-width: 480px) {
  .thx-actions {
    flex-direction: column;
  }

  .thx-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thx-btn {
    transition: none;
  }
}

.page-thx main.thx {
  padding: 0;
}

.thx-visual img {
  object-position: left bottom;
}

@media (max-width: 860px) {
  .thx-visual img {
    object-position: 70% top;
  }
}

/* obrázok nesmie určovať výšku panelu – výšku dáva text */
.thx-visual picture {
  position: absolute;
  inset: 0;
}

/* Logo klienta na fotke projektu: namiesto oranžovej dlaždice tmavé matné
   sklo, hranaté (rozhodnutie majiteľa). Tmavé, lebo logo je biele – na bielom
   skle by zaniklo; sklo ho drží čitateľné aj na svetlých mockupoch. */
.work-logo {
  border-radius: 0;
  background: color-mix(in srgb, var(--color-text) 38%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

@media (max-width: 700px) {
  .work-logo {
    border-radius: 0;
  }
}

/* prehliadače bez backdrop-filter: plná tmavšia plocha, nech logo ostane čitateľné */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .work-logo {
    background: color-mix(in srgb, var(--color-text) 72%, transparent);
  }
}

/* Pätička: partnerské logá bez rámčeka */
.foot-partners a,
.foot-partners a:hover,
.foot-partners a:focus-visible {
  border-color: transparent;
}

/* klávesnica: bez rámčeka musí ostať viditeľný fokus */
.foot-partners a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* mobil: stuha vychádza z ľavého horného rohu pásu – roh musí ostať vidno */
@media (max-width: 860px) {
  .thx-visual img {
    object-position: left top;
  }
}

/* Ďakovná stránka – stuha „obálka“: desktop výšková verzia ukotvená hore
   (stuha vchádza horným ľavým rohom), mobil celý pattern v páse. */
.thx-visual img {
  object-position: center top;
}

@media (max-width: 860px) {
  .thx-visual {
    height: auto;
    aspect-ratio: 2400 / 1125;
  }

  .thx-visual img {
    object-position: center;
  }
}

/* Pätička na celom webe: jemná neutrálna sivá (nie béžová). Partnerské logá
   ostávajú na bielych dlaždiciach, oblúk a logo majú priehľadné pozadie. */
.site-footer,
.foot,
.page-home .site-footer {
  background: var(--color-footer);
}

/* Pätička: partnerské logá voľne na sivej, bez bielej dlaždice
   (rozhodnutie majiteľa). Veľkosť a pomer strán bez zmeny. */
.foot-partners a,
.footer-partner {
  background: transparent;
}

/* Právne podstránky (cookies.html, ochrana-osobnych-udajov.html) – nový
   vzhľad onvyo: biela plocha, text #141414, Outfit nadpisy, Source Sans text. */
.page-doc main.doc {
  padding: clamp(40px, 6vw, 88px) clamp(20px, 4.5vw, 72px) clamp(72px, 9vw, 128px);
  background: var(--color-surface);
}

.doc-inner {
  max-width: 760px;
  color: var(--color-text);
}

.doc-inner h1 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.doc-inner .legal-updated {
  margin: 0 0 36px;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.doc-inner h2 {
  margin: 40px 0 12px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.doc-inner p,
.doc-inner li {
  margin: 0 0 12px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.doc-inner strong {
  color: var(--color-text);
}

.doc-inner ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.doc-inner li::marker {
  color: var(--color-brand);
}

.doc-inner a {
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-inner a:hover {
  color: var(--color-brand-hover);
}

.doc-inner code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--color-footer);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

.doc-inner .doc-back {
  display: inline-flex;
  align-items: center;
  height: 50px;
  margin-top: 36px;
  padding: 0 26px;
  border: 2px solid var(--color-brand);
  border-radius: 999px;
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: none;
}

.doc-inner .doc-back:hover,
.doc-inner .doc-back:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

/* Bridge „Vy v strede“: partneri na jednom spojenom bielom páse (hranatý),
   medzi logami jemná deliaca linka. Logá vo vlastných farbách, bez deformácie. */
.bridge-partners {
  gap: 0;
  background: var(--color-surface);
}

.bridge-partners a {
  background: transparent;
}

.bridge-partners li + li a {
  box-shadow: inset 1px 0 0 var(--color-border);
}

.bridge-partners a:hover,
.bridge-partners a:focus-visible {
  transform: none;
}

/* bez deliacich čiar – čistý spojený biely pás */
.bridge-partners li + li a {
  box-shadow: none;
}

/* Bridge: „Vy v strede. My okolo.“ ako obraz pod textom. V strede biely kruh
   s glyfom vy (klient), okolo na dráhe 5 služieb ako biele štítky
   (na oranžovej len biela a #141414/oranžový text na bielom). Dráha sa pomaly
   otáča, štítky ostávajú vzpriamené; reduced-motion = stojí. */
.bridge-orbit {
  --size: clamp(260px, 26vw, 360px);
  --r: calc(var(--size) / 2);
  position: relative;
  width: var(--size);
  height: var(--size);
  margin-top: clamp(28px, 3.5vw, 48px);
}

.bridge-orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px dashed color-mix(in srgb, var(--color-on-brand) 55%, transparent);
  border-radius: 50%;
}

.bridge-orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-surface);
  transform: translate(-50%, -50%);
}

.bridge-orbit-core img {
  display: block;
  width: 64%;
  height: auto;
}

.bridge-orbit-ring {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: bridge-orbit-spin 48s linear infinite;
}

.bridge-orbit-ring li {
  --a: calc(var(--i) * 72deg - 90deg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1));
}

.bridge-orbit-ring span {
  display: block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  translate: -50% -50%; /* samostatná vlastnosť: otáča sa okolo vlastného stredu */
  animation: bridge-orbit-spin 48s linear infinite reverse;
}

@keyframes bridge-orbit-spin {
  to {
    rotate: 360deg;
  }
}

@media (max-width: 1000px) {
  .bridge-orbit {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bridge-orbit-ring,
  .bridge-orbit-ring span {
    animation: none;
  }
}

/* štítky nesmú pri otáčaní vyčnievať za ľavý okraj textu; kompaktnejšie */
.bridge-orbit {
  --size: clamp(240px, 22vw, 310px);
  margin-left: 56px;
}

@media (max-width: 1000px) {
  .bridge-orbit {
    margin-left: auto;
  }
}

/* bez odseku: obraz je hlavný prvok ľavej strany – väčší */
.bridge-orbit {
  --size: clamp(260px, 26vw, 360px);
}

/* Obraz „Vy v strede“ statický (rozhodnutie majiteľa) a väčšie štítky */
.bridge-orbit-ring,
.bridge-orbit-ring span {
  animation: none;
}

.bridge-orbit {
  margin-left: 84px;
}

.bridge-orbit-ring span {
  padding: 10px 20px;
  font-size: 17px;
}

@media (max-width: 1000px) {
  .bridge-orbit {
    margin-left: auto;
  }
}

@media (max-width: 480px) {
  .bridge-orbit {
    --size: 220px;
  }

  .bridge-orbit-ring span {
    padding: 8px 15px;
    font-size: 15px;
  }
}

/* Nadpis „Vy v strede. My okolo.“ presunutý vpravo nad „Dôverujú nám“;
   ľavá strana patrí len obrazu – väčší, vycentrovaný v stĺpci. */
.bridge-proof .bridge-title {
  margin-bottom: clamp(28px, 3vw, 44px);
}

.bridge-statement {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bridge-orbit {
  --size: clamp(300px, 30vw, 440px);
  margin: 0;
}

.bridge-orbit-core {
  width: 36%;
}

.bridge-orbit-ring span {
  padding: 11px 22px;
  font-size: 18px;
}

@media (max-width: 1000px) {
  .bridge-orbit {
    --size: clamp(240px, 56vw, 380px);
    margin: 8px auto 0;
  }

  /* na mobile nadpis ide prvý (nad obraz), aby sekcia začínala textom */
  .bridge-proof {
    display: contents;
  }

  .bridge-proof .bridge-title {
    order: -1;
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .bridge-orbit {
    --size: 220px;
  }

  .bridge-orbit-ring span {
    padding: 8px 15px;
    font-size: 15px;
  }
}

/* Bridge doladenie (okt. 2026): nadpis = dôkaz („150+ firiem / už má
   marketing u nás.“), menší, aby obraz vľavo dominoval; dva hlasy
   (#141414 medium / biela light), bez glyfu – ten je v strede kruhu. */
.page-home .bridge-proof .bridge-title {
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.08;
}

.page-home .bridge-proof .bridge-title .bridge-title-you {
  color: var(--color-text);
  font-weight: 500;
}

.page-home .bridge-proof .bridge-title .bridge-title-us {
  font-weight: 300;
}

/* obraz k pravému okraju stĺpca – štítky tak nevyčnievajú za ľavý okraj obsahu */
.bridge-statement {
  justify-content: flex-end;
}

.bridge-orbit {
  --size: clamp(280px, 26vw, 380px);
}

@media (max-width: 1000px) {
  .bridge-statement {
    justify-content: center;
  }

  /* menšie medzery medzi nadpisom, obrazom, klientmi a partnermi */
  .bridge-inner {
    row-gap: 32px;
  }

  .bridge-proof .bridge-group,
  .bridge-partners-group {
    margin-top: 0;
  }
}

/* mobil/tablet: veľkosť obrazu tak, aby štítky ostali v obsahu */
@media (max-width: 1000px) {
  .bridge-orbit {
    --size: clamp(220px, 50vw, 360px);
  }
}

@media (max-width: 480px) {
  .bridge-orbit {
    --size: 210px;
  }
}

@media (max-width: 480px) {
  .bridge-orbit-ring span {
    padding: 7px 13px;
    font-size: 14px;
  }
}

/* Kompozícia bridge: kruh vľavo zarovnaný – ľavý štítok sedí na ľavom okraji
   obsahu (padding = presah štítka), od pásu logov väčší odstup. */
.bridge-statement {
  justify-content: flex-start;
  padding-left: 82px;
}

/* Biely pás partnerov ako blok v pravom dolnom rohu: siaha až po pravý okraj
   okna a po spodok sekcie. Biela plocha je pseudo-element za logami,
   sekcia ju oreže (overflow: clip). */
.bridge {
  overflow: clip;
}

.bridge-partners {
  position: relative;
  z-index: 0;
  background: transparent;
}

.bridge-partners::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: -100vw;
  bottom: -100vh;
  background: var(--color-surface);
}

@media (max-width: 1000px) {
  .bridge-statement {
    justify-content: center;
    padding-left: 0;
  }
}

@media (max-width: 1000px) {
  /* mobil/tablet: biely blok cez celú šírku (inak by vľavo ostal úzky oranžový pásik) */
  .bridge-partners::before {
    left: -100vw;
  }
}

/* biely blok partnerov: pôvodná výška (len pás s logami), napojený len na pravý okraj okna */
.bridge-partners::before {
  bottom: 0;
}

/* Nadpis bridge = jedna veta #141414, zvýraznené len číslo (na oranžovej
   = biela bold, pravidlo farieb). Predtým dva hlasy s dlhším tichým riadkom
   – hierarchia bola otočená a číslo zanikalo. */
.page-home .bridge-proof .bridge-title--proof {
  max-width: 15ch;
  color: var(--color-text);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1.06;
}

.bridge-title--proof strong {
  color: var(--color-on-brand);
  font-weight: 700;
}

/* Vzdušnejšie rozostupy (sekcia má na to výšku) */
.page-home .bridge-proof .bridge-title--proof {
  margin-bottom: clamp(40px, 4.4vw, 68px);
}

.bridge-kicker {
  margin-bottom: 22px;
}

.bridge-marquee + .bridge-marquee {
  margin-top: 18px;
}

.bridge-partners-group {
  margin-top: clamp(40px, 4vw, 60px);
  padding-top: clamp(32px, 3.2vw, 48px);
}

.bridge {
  padding-bottom: clamp(96px, 9vw, 152px);
}

@media (max-width: 1000px) {
  .page-home .bridge-proof .bridge-title--proof {
    margin-bottom: 0;
  }

  .bridge-inner {
    row-gap: 44px;
  }
}

/* „150+“ musí byť biele – globálne pravidlo pre <strong> v nadpisoch dáva
   modrú, tá sa na oranžovej nesmie objaviť */
.page-home .bridge .bridge-proof .bridge-title--proof strong {
  color: var(--color-on-brand);
  font-weight: 700;
}

/* Nadpis bridge: „150+ firiem“ = biely blok s oranžovým písmom, zvyšok vety
   biely (čierna na oranžovej majiteľovi nesedí; modrá je vyradená). */
.page-home .bridge .bridge-proof .bridge-title--proof {
  color: var(--color-on-brand);
}

.page-home .bridge .bridge-proof .bridge-title--proof strong {
  padding: 0 0.16em;
  background: var(--color-surface);
  color: var(--color-brand);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* zaoblený biely blok pod „150+ firiem“ */
.page-home .bridge .bridge-proof .bridge-title--proof strong {
  padding: 0 0.22em;
  border-radius: 0.2em;
}

/* Obraz „Vy v strede“ ako zvislá elipsa – kompozične stojí vedľa celého
   pravého stĺpca. Štítky rovnako široké (dlhé „Automatizácie“ tak nevyskakuje),
   pozície = päťuholník na elipse (--x, --y v HTML, -1…1). */
.bridge-orbit {
  --w: clamp(240px, 21vw, 300px);
  --h: clamp(380px, 34vw, 500px);
  width: var(--w);
  height: var(--h);
}

.bridge-orbit::before {
  border-radius: 50%;
}

.bridge-orbit-core {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  width: clamp(104px, 9.5vw, 136px);
}

.bridge-orbit-ring li {
  top: calc(50% + var(--y) * 50%);
  left: calc(50% + var(--x) * 50%);
  transform: none;
}

.bridge-orbit-ring span {
  min-width: 8.4em;
  text-align: center;
}

.bridge-statement {
  padding-left: 90px;
  align-self: stretch;
}

@media (max-width: 1000px) {
  .bridge-statement {
    padding-left: 0;
  }

  .bridge-orbit {
    --w: 230px;
    --h: 330px;
  }
}

@media (max-width: 480px) {
  .bridge-orbit {
    --w: 200px;
    --h: 300px;
  }

  .bridge-orbit-ring span {
    min-width: 7.6em;
  }
}

.bridge-orbit {
  --w: clamp(260px, 23vw, 330px);
}

@media (max-width: 1000px) {
  .bridge-orbit {
    --w: 240px;
    --h: 330px;
  }
}

@media (max-width: 480px) {
  .bridge-orbit {
    --w: 196px;
    --h: 300px;
  }
}

/* Bridge – ľavá strana = čistá biela stuha (nahradila obraz s elipsou).
   Obrázok pokrýva ľavú časť sekcie od horného po spodný okraj a od ľavého
   okraja okna; stuha vchádza hore (nadväzuje na bielu vlnu nad sekciou),
   odchádza vľavo a dole. Pravá časť obrázka je čistá oranžová, takže okraj
   boxu nie je vidieť. Text vpravo stuhu nikdy neprekrýva. */
.bridge-inner {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}

.bridge-statement {
  min-height: 1px;
  padding: 0;
}

.bridge-ribbon {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 52%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  pointer-events: none;
}

@media (max-width: 1000px) {
  /* mobil: stuha by šla pod text – vypnutá, sekcia = nadpis, klienti, partneri */
  .bridge-ribbon {
    display: none;
  }

  .bridge-inner {
    grid-template-columns: 1fr;
  }

  .bridge-statement {
    display: none;
  }
}

/* stuha musí byť ukotvená na celú sekciu (okraje okna a sekcie), nie na obsah */
.bridge-inner {
  position: static;
}

.bridge-proof {
  position: relative;
  z-index: 1;
}

/* Klienti a partneri: logá o kúsok väčšie, celý pravý blok bližšie k stuhe.
   Posun len od 1440 px – pod tým by text sadol na bielu stuhu (odstup ≥ 100 px).
   Pravý okraj bloku ostáva na hrane obsahu, biely pás partnerov ďalej do okna. */
@media (min-width: 1001px) {
  .bridge-marquee-track li {
    height: 68px;
    padding-right: 72px;
  }

  .bridge-marquee-track img {
    height: calc(var(--h, 26px) * 1.15);
  }

  .bridge-partners a {
    height: 120px;
  }

  .bridge-partners .is-shoptet { max-height: 46px; }
  .bridge-partners .is-booqme { max-height: 40px; }
  .bridge-partners .is-websupport { max-height: 76px; }
}

@media (min-width: 1440px) {
  .page-home .bridge-proof {
    margin-left: -110px;
    width: calc(100% + 110px);
  }
}

@media (min-width: 1700px) {
  .page-home .bridge-proof {
    margin-left: -170px;
    width: calc(100% + 170px);
  }
}

/* Ľavá strana bridge = mockup hneď vedľa pravého obsahu, na mieste stuhy.
   Zarovnaný k textu (nie do voľnej plochy, nie na okraj okna). */
.page-home .bridge-inner {
  align-items: center;
}

.bridge-statement {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 72px 0 8px;
}

.bridge-devices-slot {
  position: relative;
  display: block;
  width: 100%;
}

/* mäkký tieň pod podstavou notebooku – mockup visí nad plochou.
   Podstava siaha takmer po spodok výrezu, preto tieň vyčnieva pod ňu. */
.bridge-devices-slot::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8%;
  width: 76%;
  bottom: -9%;
  height: 18%;
  background: radial-gradient(ellipse at center, rgba(20, 20, 20, 0.55) 0%, rgba(20, 20, 20, 0.24) 42%, transparent 72%);
  filter: blur(16px);
  pointer-events: none;
}

.bridge-devices {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

@media (min-width: 1440px) {
  .bridge-statement {
    padding-right: 104px;
  }
}

@media (min-width: 1700px) {
  .bridge-statement {
    padding-right: 136px;
  }
}

@media (max-width: 1000px) {
  .bridge-statement {
    display: flex;
    justify-content: center;
    padding: 8px 0 0;
  }

  .bridge-devices-slot {
    width: min(78vw, 420px);
  }

  .bridge-devices {
    width: 100%;
  }
}

/* Desktop: pravý blok (nadpis, klienti, partneri) zmenšený tak, aby mal
   rovnakú výšku ako mockup vľavo (~76 % pôvodnej výšky). */
@media (min-width: 1001px) {
  .page-home .bridge .bridge-proof .bridge-title--proof {
    font-size: clamp(30px, 2.8vw, 42px);
    margin-bottom: clamp(24px, 2.4vw, 36px);
  }

  .bridge-proof .bridge-kicker {
    margin-bottom: 12px;
  }

  .bridge-proof .bridge-marquee + .bridge-marquee {
    margin-top: 6px;
  }

  .bridge-proof .bridge-marquee-track li {
    --h-scale: 0.82;
  }

  .bridge-proof .bridge-marquee-track img {
    height: calc(var(--h, 28px) * 0.82);
  }

  .bridge-proof .bridge-partners-group {
    margin-top: clamp(22px, 2.2vw, 32px);
    padding-top: clamp(18px, 1.8vw, 26px);
  }

  .bridge-partners a {
    height: 84px;
  }

  .bridge-partners .is-shoptet { max-height: 32px; }
  .bridge-partners .is-booqme { max-height: 27px; }
  .bridge-partners .is-websupport { max-height: 52px; }
}

@media (min-width: 1001px) {
  .bridge-proof .bridge-marquee-track li {
    height: 48px;
    padding-right: 52px;
  }
}

@media (min-width: 1001px) {
  .page-home .bridge .bridge-proof .bridge-title--proof {
    margin-bottom: clamp(32px, 3.4vw, 52px);
  }

  .bridge-proof .bridge-partners-group {
    margin-top: clamp(30px, 3.2vw, 48px);
    padding-top: clamp(24px, 2.4vw, 36px);
  }

  .bridge-proof .bridge-marquee-track li {
    height: 54px;
  }
}

/* ===== Kariéra (kariera.html) ===== */
.career-head {
  align-items: end;
}

.career-head-side {
  display: grid;
  gap: 20px;
  justify-items: start;
}

.career-jump {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 22px 0 26px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms linear;
}

.career-jump:hover,
.career-jump:focus-visible {
  background: var(--color-brand-hover);
}

.career-jump-count {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 700;
}

.career-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 clamp(64px, 7vw, 112px);
  padding: 0;
  list-style: none;
}

.career-benefit {
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: var(--color-footer);
}

.career-benefit-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-brand);
}

.career-benefit h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.career-benefit p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.career-h2 {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.career-jobs {
  display: grid;
  gap: 24px;
  scroll-margin-top: 110px;
}

.job {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  scroll-margin-top: 110px;
}

.job-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 20px;
}

.job-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  flex: 0 0 auto;
}

.job-head-text {
  flex: 1 1 260px;
}

.job-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.job-tags li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-footer);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
}

.job-apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms linear;
}

.job-apply:hover,
.job-apply:focus-visible {
  background: var(--color-brand-hover);
}

.job-apply--head {
  background: transparent;
  border: 2px solid var(--color-brand);
  color: var(--color-brand);
}

.job-apply--head:hover,
.job-apply--head:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.job-lead {
  max-width: 70ch;
  margin: 24px 0 0;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.6;
}

.job-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 3vw, 48px);
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.job-col h4 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.job-col ul,
.job-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.job-col li {
  position: relative;
  margin-bottom: 9px;
  padding-left: 18px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.job-col li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-brand);
}

.job-facts {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--color-footer);
}

.job-facts li {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.job-facts strong {
  color: var(--color-text);
}

/* Neprepísaná suma – viditeľne označená, kým ju majiteľ nedoplní */
.job-todo {
  padding: 0 6px;
  border-radius: 4px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: 700;
}

.job-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 28px;
}

.job-how {
  flex: 1 1 280px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.career-process {
  margin-top: clamp(64px, 7vw, 112px);
}

.career-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.career-steps li {
  padding: 26px 24px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.career-steps strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
}

.career-step-num {
  display: block;
  margin-bottom: 14px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.career-open {
  flex-direction: column;
  text-align: center;
}

.career-open .refs-cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.career-open p {
  max-width: 52ch;
  margin: 0;
  color: var(--color-text-muted);
}

.career-gdpr {
  max-width: 80ch;
  margin: 40px auto 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.career-gdpr a {
  color: var(--color-brand);
}

@media (max-width: 1100px) {
  .career-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .job-cols,
  .career-steps {
    grid-template-columns: 1fr;
  }

  .job-apply--head {
    display: none;
  }
}

@media (max-width: 560px) {
  .career-benefits {
    grid-template-columns: 1fr;
  }

  .job-apply {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Kariéra v2 (kariera.html, .page-kar) =====
   Hero ako ďakovná stránka (biela + oranžový panel so stuhou spoza textu),
   oranžový pás „Ako u nás pracujete“, profily, kroky, čierny záver. */
.page-kar main.kar {
  padding: 0;
  background: var(--color-surface);
}

.kar-wrap {
  margin: 0 clamp(20px, 4.5vw, 72px);
}

.kar-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: min(calc(100vh - 96px), 720px);
}

.kar-hero-copy {
  align-self: center;
  max-width: 640px;
  padding: clamp(40px, 5vw, 80px) clamp(20px, 4.5vw, 72px);
}

.kar-title {
  margin: clamp(20px, 2.4vw, 36px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.kar-lead {
  max-width: 44ch;
  margin: 26px 0 0;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.55;
}

.kar-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 34px;
}

.kar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 2px solid var(--color-brand);
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms linear, color 150ms linear, border-color 150ms linear;
}

.kar-btn:hover,
.kar-btn:focus-visible {
  border-color: var(--color-brand-hover);
  background: var(--color-brand-hover);
}

.kar-btn--outline {
  background: transparent;
  color: var(--color-brand);
}

.kar-btn--outline:hover,
.kar-btn--outline:focus-visible {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.kar-btn--light {
  border-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-brand);
}

.kar-btn--light:hover,
.kar-btn--light:focus-visible {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.kar-link {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.kar-hero-visual {
  position: relative;
  overflow: hidden;
  background: var(--color-brand);
}

.kar-hero-visual picture {
  position: absolute;
  inset: 0;
}

.kar-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center; /* stuha vchádza z ľavého okraja panelu */
}

/* Oranžový pás – na oranžovej len biela a #141414 */
.kar-band {
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--color-brand);
}

.kar-band-title {
  margin: 0 0 clamp(28px, 3vw, 44px);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kar-band-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kar-band-list li {
  padding-top: 18px;
  border-top: 2px solid var(--color-on-brand);
}

.kar-band-list strong {
  display: block;
  margin-bottom: 10px;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.kar-band-list span {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
}

.kar-section {
  padding: clamp(64px, 7vw, 112px) 0 0;
}

.kar-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 40px;
  margin-bottom: clamp(28px, 3vw, 40px);
}

.kar-section-head p {
  max-width: 44ch;
  margin: 0;
  color: var(--color-text-muted);
}

.kar-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.kar-profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.kar-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  transition: border-color 150ms linear;
  scroll-margin-top: 110px;
}

.kar-profile:hover {
  border-color: var(--color-brand);
}

.kar-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.kar-profile-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.kar-profile-level {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-footer);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
}

.kar-profile-title {
  margin: 22px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.kar-profile-lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.55;
}

.kar-profile-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  width: 100%;
  margin: 26px 0 30px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.kar-profile-cols h4 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.kar-profile-cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kar-profile-cols li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 16px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.kar-profile-cols li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand);
}

.kar-profile .kar-btn {
  margin-top: auto;
}

.kar-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 3vw, 48px);
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.kar-steps li {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.55;
}

.kar-step-num {
  display: block;
  margin-bottom: 14px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(44px, 4vw, 60px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.kar-steps strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}

/* Čierny záver ako sekcia kontaktu */
.kar-final {
  margin-top: clamp(72px, 8vw, 128px);
  padding: clamp(56px, 6vw, 96px) 0;
  background: var(--color-text);
}

.kar-final-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px clamp(32px, 5vw, 96px);
}

.kar-final-title {
  margin: 0;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.kar-final-side {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.kar-gdpr {
  margin: 0;
  color: color-mix(in srgb, var(--color-on-brand) 62%, var(--color-text));
  font-size: 13px;
  line-height: 1.55;
}

.kar-gdpr a {
  color: var(--color-on-brand);
}

@media (max-width: 1000px) {
  .kar-band-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kar-profiles,
  .kar-final-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .kar-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .kar-hero-visual {
    order: -1;
    height: auto;
    aspect-ratio: 1920 / 900;
  }

  .kar-hero-visual img {
    object-position: center;
  }

  .kar-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .kar-band-list,
  .kar-profile-cols {
    grid-template-columns: 1fr;
  }

  .kar-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kar-btn,
  .kar-profile {
    transition: none;
  }
}

/* biela medzera medzi hero a pásom – stuha z panelu vteká do bielej plochy,
   nie do oranžovej (inak by pôsobila odseknuto) */
.kar-band {
  margin-top: clamp(56px, 6vw, 96px);
}

/* Kariéra hero: výšková vlna (stuha-vlna-zlava-biela-na-vysku) – panel užší,
   aby bol na výšku a stuha vošla pravým a odišla ľavým okrajom */
.kar-hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  min-height: min(calc(100vh - 96px), 760px);
}

.kar-hero-visual img {
  object-position: center 78%;
}

@media (max-width: 860px) {
  .kar-hero-visual {
    aspect-ratio: auto;
    height: clamp(200px, 52vw, 320px);
  }

  .kar-hero-visual img {
    object-position: center 86%;
  }
}

@media (max-width: 860px) {
  .kar-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* mobil: tá istá vlna naležato – vchádza horným okrajom, odchádza vpravo dole */
  .kar-hero-visual img {
    object-position: 75% center;
  }
}

/* ===== Kariéra – formulár žiadosti (čierna sekcia #prihlaska) ===== */
.kar-final-inner {
  align-items: start;
}

.kar-final-copy {
  display: grid;
  gap: 22px;
  align-content: start;
}

.kar-final-lead {
  max-width: 40ch;
  margin: 0;
  color: color-mix(in srgb, var(--color-on-brand) 72%, var(--color-text));
  font-size: 18px;
  line-height: 1.55;
}

.kar-form-card {
  padding: clamp(22px, 2.6vw, 36px);
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--color-text);
}

.kar-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.kar-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.kar-field--full {
  grid-column: 1 / -1;
}

.kar-field > span {
  font-size: 14px;
  font-weight: 600;
}

.kar-field em {
  color: var(--color-text-muted);
  font-style: normal;
  font-weight: 400;
}

.kar-field input,
.kar-field select,
.kar-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  transition: border-color 150ms linear, box-shadow 150ms linear;
}

.kar-field textarea {
  min-height: 90px;
  resize: vertical;
}

.kar-field input::placeholder,
.kar-field textarea::placeholder {
  color: #b5b0aa;
}

.kar-field input:focus,
.kar-field select:focus,
.kar-field textarea:focus {
  border-color: var(--color-brand);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.kar-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1.5px dashed var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 150ms linear, background-color 150ms linear;
}

.kar-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.kar-file:hover,
.kar-file.is-drag,
.kar-file:focus-within {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 5%, var(--color-surface));
}

.kar-file.has-file {
  border-style: solid;
  border-color: var(--color-brand);
}

.kar-file-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-brand) 12%, var(--color-surface));
  color: var(--color-brand);
  flex: 0 0 auto;
}

.kar-file-text {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kar-file-text strong {
  color: var(--color-brand);
}

.kar-file.has-file .kar-file-text {
  color: var(--color-text);
  font-weight: 600;
}

.kar-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.kar-consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--color-brand);
}

.kar-turnstile {
  min-height: 65px;
  margin-top: 16px;
}

.kar-status {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.kar-status.is-error {
  color: var(--color-brand);
  font-weight: 600;
}

.kar-submit {
  width: 100%;
  margin-top: 16px;
}

.kar-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.kar-done {
  padding: 12px 4px;
  text-align: center;
}

.kar-done-ico {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.kar-done h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
}

.kar-done p {
  max-width: 40ch;
  margin: 0 auto;
  color: var(--color-text-muted);
}

#prihlaska {
  scroll-margin-top: 90px;
}

@media (max-width: 560px) {
  .kar-form-grid {
    grid-template-columns: 1fr;
  }

  .kar-form-card {
    padding: 18px 16px;
  }
}

/* Kariéra – „Ovládate niečo, čo by sme mali vedieť?“ – oranžová karta pod
   profilmi (na oranžovej len biela a #141414, tlačidlo biele s oranžovým textom) */
.kar-talent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  margin-top: 20px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 18px;
  background: var(--color-brand);
}

.kar-talent > div {
  flex: 1 1 420px;
}

.kar-talent-title {
  margin: 0 0 8px;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.kar-talent p {
  max-width: 56ch;
  margin: 0;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.55;
}

.kar-talent .kar-btn--light:hover,
.kar-talent .kar-btn--light:focus-visible {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-on-brand);
}

/* Kariéra hero: text ďalej od okraja (vycentrovaný v ľavom stĺpci),
   panel so stuhou na celú výšku hero a bez bielej medzery pod ním */
.kar-hero-copy {
  justify-self: center;
  width: 100%;
  max-width: 600px;
  padding-left: clamp(20px, 6vw, 112px);
  padding-right: clamp(20px, 4vw, 64px);
}

.kar-band {
  margin-top: 0;
}

.kar-hero-visual img {
  object-position: center bottom;
}

@media (max-width: 860px) {
  .kar-hero-copy {
    max-width: none;
    padding: 40px 20px 56px;
  }

  .kar-hero-visual img {
    object-position: 75% center;
  }
}

/* Kariéra hero: text bližšie k okraju (stred medzi pôvodným a centrovaným),
   pattern zväčšený – biela stuha výraznejšie vyplní panel */
.kar-hero-copy {
  justify-self: start;
  max-width: 640px;
  padding-left: clamp(20px, 9vw, 140px);
}

.kar-hero-visual img {
  transform: scale(1.3);
  transform-origin: 50% 100%;
}

@media (max-width: 860px) {
  .kar-hero-copy {
    padding-left: 20px;
  }

  .kar-hero-visual img {
    transform: none;
  }
}

/* Kariéra – ID karta onvyo (mockup) v čiernej sekcii vedľa formulára */
.kar-idcard {
  display: block;
  width: clamp(200px, 19vw, 280px);
  height: auto;
  margin: 6px 0 4px clamp(0px, 4vw, 64px);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
  transform: rotate(-4deg);
  transform-origin: 50% 0;
}

@media (max-width: 1000px) {
  .kar-idcard {
    width: 170px;
    margin: 0 auto;
  }
}

.kar-idcard {
  width: clamp(180px, 15.5vw, 236px);
}

/* Kariéra – pás „Ako to u nás chodí“ v2: vľavo nadpis + úvod, vpravo 2×2
   body s číslami. Na oranžovej len biela a #141414. */
.kar-band {
  padding: clamp(64px, 7vw, 112px) 0;
}

.kar-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px clamp(40px, 6vw, 112px);
  align-items: start;
}

.kar-band-head {
  position: sticky;
  top: 120px;
}

.kar-band-title {
  margin: 0 0 18px;
  color: var(--color-on-brand);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-transform: none;
}

.kar-band-lead {
  max-width: 36ch;
  margin: 0;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.55;
}

.kar-band-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px clamp(28px, 3vw, 48px);
}

.kar-band-list li {
  display: grid;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--color-on-brand) 55%, var(--color-brand));
}

.kar-band-num {
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.kar-band-list strong {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.kar-band-list span:not(.kar-band-num) {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .kar-band-inner {
    grid-template-columns: 1fr;
  }

  .kar-band-head {
    position: static;
  }
}

@media (max-width: 560px) {
  .kar-band-list {
    grid-template-columns: 1fr;
  }
}

/* hero pattern ešte väčší, spodok obrázka nižšie (zväčšenie od vrchu) */
.kar-hero-visual img {
  transform: scale(1.5);
  transform-origin: 50% 0;
}

/* ID karta pri formulári väčšia */
.kar-idcard {
  width: clamp(220px, 20vw, 300px);
}

@media (max-width: 860px) {
  .kar-hero-visual img {
    transform: none;
  }
}

@media (max-width: 1000px) {
  .kar-idcard {
    width: 210px;
  }
}

.kar-hero-copy {
  max-width: 720px;
}

.kar-title {
  font-size: clamp(38px, 4.3vw, 64px);
}

@media (min-width: 861px) {
  .kar-title .vy-title-you,
  .kar-title .vy-title-us {
    white-space: nowrap;
  }
}


/* Kariéra – všetky texty na oranžovej biele (sivá mala kontrast ~1,9 : 1,
   čiernu majiteľ nechce). Hierarchia cez veľkosť a hrúbku, nie farbu. */
.kar-band-lead,
.kar-band-num,
.kar-band-list span:not(.kar-band-num),
.kar-talent p {
  color: var(--color-on-brand);
  font-weight: 400;
}

.kar-band-num {
  font-weight: 600;
}

.kar-band-list .kar-band-num {
  color: var(--color-on-brand);
}

/* Kariéra – názvy bodov v páse ako „150+ firiem“: biely zaoblený blok,
   oranžové písmo (na oranžovej povolené: biela plocha s oranžovým textom) */
.kar-band-list strong {
  justify-self: start;
  padding: 0.08em 0.32em 0.12em;
  border-radius: 0.22em;
  background: var(--color-surface);
  color: var(--color-brand);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Kariéra – záver: nadpis vo Vy/My systéme na čiernej (biely glyf, tichý
   druhý riadok), ID karta natočená o 30° a vytiahnutá k nadpisu – šnúrka
   siaha na úroveň nadpisu, karta vyplní priestor pri formulári */
.kar-final-title .vy-title-you {
  color: var(--color-on-brand);
}

.kar-final-title .vy-title-us {
  color: color-mix(in srgb, var(--color-on-brand) 62%, var(--color-text));
  font-weight: 300;
}

@media (min-width: 1001px) {
  .kar-final-copy {
    position: relative;
    align-self: stretch;
    grid-template-rows: auto 1fr auto;
  }

  .kar-idcard {
    position: absolute;
    top: 30px;
    right: clamp(-50px, -2.5vw, -20px);
    width: clamp(240px, 21vw, 320px);
    margin: 0;
    transform: rotate(22deg);
    transform-origin: 50% 0;
    pointer-events: none;
  }

  .kar-gdpr {
    grid-row: 3;
    max-width: 46ch;
  }
}

/* Kariéra – GDPR poznámka v 2–3 dlhých riadkoch, nie úzky blok */
@media (min-width: 1001px) {
  .kar-gdpr {
    max-width: none;
    margin-right: -24px;
  }
}

.kar-final-sub {
  margin: 20px 0 0;
  max-width: 30ch;
  color: color-mix(in srgb, var(--color-on-brand) 62%, var(--color-text));
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
}

@media (min-width: 1001px) {
  .kar-final-sub {
    grid-row: 2;
    align-self: start;
    max-width: 44ch;
  }
}

/* Kariéra – trofej „MVP Kolega“ pod nadpisom pásu Ako to u nás chodí */
.kar-band-award {
  display: block;
  width: clamp(220px, 20vw, 300px);
  height: auto;
  margin: clamp(24px, 3vw, 40px) 0 0 -12px;
  filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--color-text) 28%, transparent));
}

@media (max-width: 1000px) {
  .kar-band-award {
    width: 200px;
    margin-left: 0;
  }
}

/* úvod pásu je pod trofejou – kratší, bez veľkej medzery */
.kar-band-award + .kar-band-lead {
  margin-top: -6px;
  max-width: 26ch;
}

/* Kariéra – pás „Ako to u nás chodí“: vyvážená kompozícia
   vľavo nadpis + trofej s popiskom (ako štítok pod trofejou), vpravo 2×2 body
   zvislo vycentrované k ľavému stĺpcu – žiadna prázdna plocha vpravo dole */
@media (min-width: 1001px) {
  .kar-band-inner {
    align-items: center;
  }

  .kar-band-head {
    position: static;
  }

  .kar-band-list {
    row-gap: clamp(40px, 4vw, 64px);
  }
}

.kar-band-award {
  width: clamp(260px, 24vw, 360px);
  margin: clamp(20px, 2.4vw, 36px) 0 0 -16px;
}

.kar-band-award + .kar-band-lead {
  width: clamp(260px, 24vw, 360px);
  max-width: 100%;
  margin: -4px 0 0 -16px;
  text-align: center;
  font-size: 17px;
}

@media (max-width: 1000px) {
  .kar-band-award,
  .kar-band-award + .kar-band-lead {
    width: 240px;
    margin-left: 0;
  }
}

.kar-band-sub {
  max-width: 30ch;
  margin: 0;
  color: var(--color-on-brand);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
}

/* Kariéra – príloha životopisu v systémovej modrej (Apple #007AFF).
   Výnimka z „modrá sa nepoužíva“: ovládací prvok, nie farba značky –
   len v bielej karte formulára, nikdy pri oranžovej ploche. */
.kar-file {
  --ui-blue: #007AFF;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--ui-blue) 45%, var(--color-surface));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-blue) 3%, var(--color-surface));
}

.kar-file:hover,
.kar-file.is-drag,
.kar-file:focus-within {
  border-color: var(--ui-blue);
  background: color-mix(in srgb, var(--ui-blue) 7%, var(--color-surface));
}

.kar-file:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-blue) 20%, transparent);
}

.kar-file.has-file {
  border-style: solid;
  border-color: color-mix(in srgb, var(--ui-blue) 45%, var(--color-surface));
}

.kar-file-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ui-blue) 12%, var(--color-surface));
  color: var(--ui-blue);
}

.kar-file-text {
  flex: 1 1 auto;
}

.kar-file-text strong {
  color: var(--ui-blue);
}

.kar-file.has-file .kar-file-text {
  font-weight: 500;
}

.kar-file-change {
  display: none;
  flex: 0 0 auto;
  color: var(--ui-blue);
  font-size: 15px;
  font-weight: 600;
}

.kar-file.has-file .kar-file-change {
  display: inline;
}

/* dlhý názov súboru nesmie roztiahnuť kartu (mobil) */
.kar-form-grid > .kar-field {
  min-width: 0;
}

.kar-file {
  min-width: 0;
  max-width: 100%;
}

/* biely štítok nadpisu bodu: miesto pre mäkčeň „ť“ (Priestor rásť) – nevyčnieva z rohu */
.kar-band-list strong {
  padding: 0.16em 0.42em 0.14em 0.34em;
}

/* Hero – obsah vyššie, aby oranžové karty boli v prvej obrazovke aj na notebooku
   (pôvodne 48–84 px nad nadpisom a pod dôkazmi; karty začínali až na spodku okna) */
.hero-kicker {
  margin-top: clamp(28px, 3vw, 48px);
}

.hero-sub {
  margin-bottom: 24px;
}

.hero-kicker-cta {
  margin-bottom: 22px;
}

.hero-proof {
  margin-bottom: clamp(32px, 3vw, 48px);
}

/* Hero – logá klientov farebne v krúžkoch. Logo s vlastným podkladom
   (štvorec) vyplní celý kruh, priehľadné logo ostáva na bielom s okrajom. */
.hero-faces .hero-faces-fill {
  padding: 0;
  overflow: hidden;
}

.hero-faces .hero-faces-fill img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.hero-faces li:not(.hero-faces-fill):not(.hero-faces-count) {
  padding: 8px;
}

/* Naše práce → bridge bez stuhy (okt. 2026, rozhodnutie majiteľa):
   čistý prechod biela → oranžová, preto bežné rozostupy namiesto
   malého „vstupu pod vlnou“ */
.page-home .work {
  padding-bottom: clamp(64px, 6vw, 96px);
}

.page-home .bridge {
  padding-top: clamp(56px, 6vw, 96px);
}

/* Hero v2 (okt. 2026): texty vľavo, mockup vpravo (notebook + mobil
   s našimi obrazovkami: prehľad výsledkov a chat so schválením).
   Pod 1000 px: texty vycentrované ako predtým, mockup pod nimi. */
.hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1001px) {
  .hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 72px) clamp(32px, 3vw, 48px);
  }

  .hero-copy .hero-kicker {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0 0 20px;
    padding-right: 0;
    padding-left: 0;
    text-align: left;
    white-space: nowrap;
    font-size: clamp(34px, 4.1vw, 62px);
  }

  .hero-copy .hero-kicker-line {
    white-space: nowrap;
  }

  .hero-copy .hero-sub,
  .hero-copy .hero-kicker-cta,
  .hero-copy .hero-proof {
    justify-content: flex-start;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    text-align: left;
  }

  .hero-copy .hero-sub {
    align-items: flex-start;
  }

  .hero-copy .hero-proof {
    margin-bottom: 0;
  }

  .hero-visual img {
    max-width: 600px;
  }
}

@media (max-width: 1000px) {
  .hero-visual {
    max-width: 440px;
    margin: 0 auto clamp(28px, 5vw, 44px);
    padding: 0 20px;
  }
}

/* =========================================================
   Podstránka Služby (/sluzby) – 8 služieb ako prehľadné riadky
   ========================================================= */
.sv-grid {
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-border);
}

.sv-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: clamp(28px, 3vw, 40px) 0;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 120px;
}

.sv-name {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
}

.sv-ico {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface));
  color: var(--color-brand);
  transition: background-color 180ms ease, color 180ms ease;
}

.sv-item:hover .sv-ico,
.sv-item:target .sv-ico {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.sv-num {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.sv-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-transform: none;
}

.sv-desc {
  margin: 4px 0 0;
  color: var(--color-text);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
}

.sv-side {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.sv-list {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.sv-list li {
  position: relative;
  padding-left: 22px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.45;
}

.sv-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand);
}

.sv-link {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.sv-link span {
  display: inline-block;
  transition: transform 180ms ease;
}

.sv-link:hover span,
.sv-link:focus-visible span {
  transform: translateX(4px);
}

@media (max-width: 1000px) {
  .sv-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .sv-name {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .sv-item {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sv-ico {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
}

/* Homepage – CTA pod kartami služieb */
.service-more {
  display: flex;
  justify-content: center;
  padding: 0 20px clamp(48px, 5vw, 80px);
}

.page-home .service-row {
  margin-bottom: 28px;
}

/* Služby v2: veľké karty ako v hero (.hero-slide bez karuselu) + rozpis pod nimi */
.sv-cards {
  display: grid;
  gap: clamp(56px, 6vw, 96px);
  margin-top: clamp(32px, 4vw, 56px);
}

.sv-block {
  scroll-margin-top: 120px;
}

.sv-card.hero-slide {
  flex: none;
  width: 100%;
}

.sv-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  padding: clamp(24px, 3vw, 36px) clamp(4px, 1vw, 12px) 0;
}

.sv-detail .sv-desc {
  margin: 0;
  max-width: 34em;
}

@media (max-width: 700px) {
  .sv-detail {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Služby v3: karty zo sekcie služieb na homepage (.service-tile), rovnako
   uložené – tri vedľa seba (pod 700 px pod sebou) a pod každou rozpis. */
.sv-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(32px, 4vw, 56px);
}

.sv-cols .sv-block {
  display: grid;
  align-content: start;
  gap: 0;
}

.sv-cols .sv-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  justify-items: start;
  padding: clamp(22px, 2.4vw, 32px) 4px 0;
}

.sv-cols .sv-desc {
  margin: 0;
  font-size: 17px;
}

.sv-cols .sv-list {
  margin: 0;
}

@media (max-width: 700px) {
  .sv-cols {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* =========================================================
   Naše práce v2 (okt. 2026): hlavička pod sebou, dve časti –
   1) Prípadové štúdie (2 karty + klient, citácia, „Už čoskoro“),
   2) Ďalšie práce (posuvný rad mockupov s popisom, čo sme robili).
   ========================================================= */
.work-head--stack {
  display: block;
}

.work-head--stack .work-lead {
  max-width: 40ch;
  margin-top: 18px;
  padding-bottom: 0;
  font-size: clamp(17px, 1.3vw, 20px);
}

.work-part + .work-part {
  margin-top: clamp(64px, 7vw, 112px);
}

.work-part-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.work-part-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
}

.work-part-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 16px;
}

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

/* prípadové štúdie */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.case {
  display: grid;
  align-content: start;
}

.case-body {
  display: grid;
  gap: 18px;
  justify-items: start;
  padding: 4px 4px 0;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-tags li {
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface));
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 700;
}

.case-summary {
  max-width: 46ch;
  margin: 0;
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.55;
}

.case-quote {
  display: grid;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--color-footer);
}

.case-quote p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.case-quote footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.case-quote footer strong {
  display: block;
  font-size: 15px;
}

.case-quote footer span span {
  display: block;
  color: var(--color-text-muted);
  font-size: 14px;
}

.case-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-weight: 600;
}

.case-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* zástupné miesto, kým nepríde fotka a citácia klienta – nikdy nenahrávať na web */
.case-quote.is-placeholder {
  outline: 2px dashed var(--color-border);
  outline-offset: -2px;
  background: var(--color-surface);
}

.case-quote.is-placeholder p {
  color: var(--color-text-muted);
}

.case-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* „Už čoskoro“: case study ešte nie sú – pri prejdení myšou sa text vymení */
.is-soon {
  position: relative;
  cursor: default;
}

.is-soon > span {
  transition: opacity 150ms linear;
}

.is-soon::after {
  content: attr(data-soon);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center start;
  opacity: 0;
  transition: opacity 150ms linear;
  pointer-events: none;
}

.work-more-btn.is-soon::after {
  place-items: center;
}

.is-soon:hover > span,
.is-soon:hover > svg {
  opacity: 0;
}

.is-soon:hover::after {
  opacity: 1;
}

.work-more-btn.is-soon:hover {
  background: transparent;
  color: var(--color-brand);
}

@media (hover: none) {
  .is-soon > span::after {
    content: " · čoskoro";
    font-weight: 400;
    opacity: 0.75;
  }
}

/* ďalšie práce – riadok „čo sme robili“ pod odvetvím */
.work-meta .work-did {
  color: var(--color-text);
  font-size: 15px;
  font-style: normal;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .case-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.work-head.work-head--stack {
  padding-right: 0;
  padding-left: 0;
}

/* =========================================================
   Prípadové štúdie – prepínač 01–03 (cases.js). Jeden panel:
   mockup vľavo, vpravo čo/prečo, tlačidlo a citácia klienta.
   ========================================================= */
.cs-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.cs-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms linear, color 150ms linear, background-color 150ms linear;
}

.cs-tab:hover {
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
}

.cs-tab:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.cs-tab-num {
  flex: 0 0 auto;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.cs-tab-name {
  display: grid;
  min-width: 0;
}

.cs-tab-name strong {
  overflow: hidden;
  color: inherit;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-tab-name span {
  font-size: 14px;
}

.cs-tab[aria-selected="true"] {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 6%, var(--color-surface));
  color: var(--color-text);
}

.cs-tab[aria-selected="true"] .cs-tab-num {
  color: var(--color-brand);
}

.cs-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.cs-panel.is-in {
  animation: cs-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cs-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.cs-media .work-media {
  border-radius: 18px;
}

.cs-copy {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.cs-kind {
  margin: 0;
  color: var(--color-brand);
  font-size: 15px;
  font-weight: 700;
}

.cs-title {
  margin: -6px 0 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-transform: none;
}

.cs-text {
  display: grid;
  gap: 10px;
}

.cs-text p {
  max-width: 46ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.55;
}

.cs-text strong {
  color: var(--color-text);
}

.cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.cs-btn.is-soon::after {
  place-items: center;
}

.cs-quote {
  display: grid;
  gap: 14px;
  width: 100%;
  margin: 6px 0 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--color-footer);
}

.cs-quote blockquote {
  margin: 0;
}

.cs-quote blockquote p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.4;
}

.cs-quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cs-quote figcaption strong {
  display: block;
  font-size: 15px;
}

.cs-quote figcaption span span {
  display: block;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* zástupné – nikdy nenahrávať na web */
.cs-quote.is-placeholder {
  outline: 2px dashed var(--color-border);
  outline-offset: -2px;
  background: var(--color-surface);
}

.cs-quote.is-placeholder blockquote p {
  color: var(--color-text-muted);
}

@media (max-width: 1000px) {
  .cs-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .cs-tabs {
    display: flex;
    overflow-x: auto;
    margin-right: calc(-1 * max(20px, env(safe-area-inset-right)));
    padding-right: 20px;
    scrollbar-width: none;
  }

  .cs-tab {
    flex: 0 0 auto;
    padding: 12px 16px;
  }

  .cs-tab-num {
    font-size: 22px;
  }
}

.cs-panel[hidden] {
  display: none;
}

/* Prípadové štúdie v3: tmavá karta #141414 (ako sekcia Kontakt) – nadpis
   sekcie vľavo hore, prepínač 01–03 vpravo hore, pod tým panel.
   Na čiernej: biela, tlmená biela 62 %, oranžová ako akcent. */
.cs {
  --cs-muted: color-mix(in srgb, #fff 62%, var(--color-text));
  --cs-line: color-mix(in srgb, #fff 14%, var(--color-text));
  padding: clamp(28px, 4vw, 64px);
  border-radius: 28px;
  background: var(--color-text);
  color: #fff;
}

.cs-top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

.cs .cs-title-main {
  color: #fff;
  font-size: clamp(36px, 3.8vw, 58px);
}

.cs .cs-title-main .vy-title-you {
  color: #fff;
}

.cs .cs-title-main .vy-title-us {
  color: var(--cs-muted);
  font-weight: 300;
}

.cs-lead {
  margin: 16px 0 0;
  color: var(--cs-muted);
  font-size: 17px;
  line-height: 1.5;
}

.cs .cs-tabs {
  margin-bottom: 0;
}

.cs .cs-tab {
  border-color: var(--cs-line);
  background: transparent;
  color: var(--cs-muted);
}

.cs .cs-tab:hover {
  border-color: color-mix(in srgb, #fff 32%, var(--color-text));
  color: #fff;
}

.cs .cs-tab[aria-selected="true"] {
  border-color: #fff;
  background: #fff;
  color: var(--color-text);
}

.cs .cs-tab[aria-selected="true"] .cs-tab-num {
  color: var(--color-brand);
}

.cs .cs-tab-name span {
  opacity: 0.8;
}

.cs .work-media {
  border-color: transparent;
}

.cs .cs-title {
  color: #fff;
}

.cs .cs-text p {
  color: var(--cs-muted);
}

.cs .cs-text strong {
  color: #fff;
}

.cs .cs-quote {
  background: color-mix(in srgb, #fff 7%, var(--color-text));
}

.cs .cs-quote blockquote p {
  color: #fff;
}

.cs .cs-quote figcaption span span {
  color: var(--cs-muted);
}

.cs .case-avatar {
  background: color-mix(in srgb, #fff 16%, var(--color-text));
  color: #fff;
}

.cs .cs-quote.is-placeholder {
  outline-color: color-mix(in srgb, #fff 24%, var(--color-text));
  background: transparent;
}

.cs .cs-quote.is-placeholder blockquote p {
  color: var(--cs-muted);
}

.cs-foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: clamp(24px, 2.6vw, 36px);
  border-top: 1px solid var(--cs-line);
}

.work-part--cases + .work-part {
  margin-top: clamp(56px, 6vw, 96px);
}

@media (max-width: 1000px) {
  .cs-top {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 700px) {
  .cs {
    border-radius: 20px;
    padding: 24px 18px;
  }

  .cs .cs-tabs {
    margin-right: -18px;
    padding-right: 18px;
  }
}

/* Prípadové štúdie v4 (rozhodnutie majiteľa): na celú šírku okna a čierno-
   oranžový podklad. VEDOMÁ VÝNIMKA z „nikdy gradienty“ – len hlboká čierna
   s oranžovou žiarou z pravého dolného rohu (a slabým odleskom vľavo hore),
   žiadny dúhový prechod. Text vždy na tmavej časti. */
.work-part--cases {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}

.cs {
  padding: clamp(56px, 6vw, 96px) clamp(36px, 4.5vw, 72px);
  border-radius: 0;
  background:
    radial-gradient(70% 85% at 100% 100%, color-mix(in srgb, var(--color-brand) 58%, transparent) 0%, color-mix(in srgb, var(--color-brand) 22%, transparent) 38%, transparent 72%),
    radial-gradient(45% 55% at 0% 0%, color-mix(in srgb, var(--color-brand) 14%, transparent) 0%, transparent 70%),
    var(--color-text);
}

.cs-top,
.cs-panel,
.cs-foot {
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}

.cs-top {
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

.cs-foot {
  margin-top: clamp(28px, 3vw, 44px);
}

@media (max-width: 700px) {
  .cs {
    padding: 48px max(20px, env(safe-area-inset-right)) 48px max(20px, env(safe-area-inset-left));
    border-radius: 0;
    background:
      radial-gradient(120% 60% at 100% 100%, color-mix(in srgb, var(--color-brand) 50%, transparent) 0%, transparent 70%),
      var(--color-text);
  }

  .cs .cs-tabs {
    margin-right: calc(-1 * max(20px, env(safe-area-inset-right)));
    padding-right: 20px;
  }
}

.cs {
  background:
    radial-gradient(85% 120% at 100% 100%, color-mix(in srgb, var(--color-brand) 85%, transparent) 0%, color-mix(in srgb, var(--color-brand) 42%, transparent) 30%, color-mix(in srgb, var(--color-brand) 10%, transparent) 55%, transparent 75%),
    radial-gradient(50% 60% at 0% 0%, color-mix(in srgb, var(--color-brand) 18%, transparent) 0%, transparent 70%),
    var(--color-text);
}

@media (max-width: 700px) {
  .cs {
    background:
      radial-gradient(130% 55% at 100% 100%, color-mix(in srgb, var(--color-brand) 70%, transparent) 0%, color-mix(in srgb, var(--color-brand) 20%, transparent) 45%, transparent 75%),
      var(--color-text);
  }
}

/* Prípadové štúdie: fotka aktívnej zákazky na pozadí celého bloku
   (.cs-bg vkladá cases.js), nad ňou čierne stmavenie a oranžová žiara. */
.cs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-text);
}

.cs > *:not(.cs-bg) {
  position: relative;
  z-index: 2;
}

.cs-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cs-bg span {
  position: absolute;
  inset: -2%;
  background-position: center;
  background-size: cover;
  opacity: 0;
  filter: saturate(0.85) blur(2px);
  transform: scale(1.04);
  transition: opacity 0.7s ease, transform 6s ease-out;
}

.cs-bg span.is-on {
  opacity: 0.5;
  transform: scale(1);
}

.cs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(85% 120% at 100% 100%, color-mix(in srgb, var(--color-brand) 80%, transparent) 0%, color-mix(in srgb, var(--color-brand) 38%, transparent) 30%, color-mix(in srgb, var(--color-brand) 8%, transparent) 55%, transparent 75%),
    radial-gradient(50% 60% at 0% 0%, color-mix(in srgb, var(--color-brand) 16%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-text) 72%, transparent) 0%, color-mix(in srgb, var(--color-text) 86%, transparent) 55%, color-mix(in srgb, var(--color-text) 78%, transparent) 100%);
}

@media (max-width: 700px) {
  .cs {
    background: var(--color-text);
  }

  .cs::after {
    background:
      radial-gradient(130% 55% at 100% 100%, color-mix(in srgb, var(--color-brand) 66%, transparent) 0%, color-mix(in srgb, var(--color-brand) 18%, transparent) 45%, transparent 75%),
      linear-gradient(180deg, color-mix(in srgb, var(--color-text) 74%, transparent), color-mix(in srgb, var(--color-text) 88%, transparent));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-bg span {
    transition: none;
    transform: none;
  }
}

/* vrch tmavého bloku: čistá čierna (nadväzuje na spodok hero), fotka
   a oranžová žiara sa objavia až nižšie */
.cs::after {
  background:
    linear-gradient(180deg, var(--color-text) 0, var(--color-text) 40px, transparent 260px),
    radial-gradient(85% 120% at 100% 100%, color-mix(in srgb, var(--color-brand) 80%, transparent) 0%, color-mix(in srgb, var(--color-brand) 38%, transparent) 30%, color-mix(in srgb, var(--color-brand) 8%, transparent) 55%, transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-text) 80%, transparent) 0%, color-mix(in srgb, var(--color-text) 86%, transparent) 55%, color-mix(in srgb, var(--color-text) 78%, transparent) 100%);
}

@media (max-width: 700px) {
  .cs::after {
    background:
      linear-gradient(180deg, var(--color-text) 0, var(--color-text) 30px, transparent 200px),
      radial-gradient(130% 55% at 100% 100%, color-mix(in srgb, var(--color-brand) 66%, transparent) 0%, color-mix(in srgb, var(--color-brand) 18%, transparent) 45%, transparent 75%),
      linear-gradient(180deg, color-mix(in srgb, var(--color-text) 80%, transparent), color-mix(in srgb, var(--color-text) 88%, transparent));
  }
}



/* =========================================================
   Naše práce v3 – Mozaika / bento (okt. 2026, voľba majiteľa zo
   smerov A/B/C). Biela sekcia, dlaždice rôznych veľkostí: veľký
   projekt 2×2, menšie projekty, číslo 5000+ (oranžová), čierna
   dlaždica so službami. Všetky projekty vedú na /referencie.
   ========================================================= */
.bento-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: clamp(32px, 3.4vw, 48px);
}

.bento-lead {
  margin: 18px 0 0;
  color: var(--color-text-muted);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(220px, 20vw, 300px);
  gap: 16px;
}

.bento-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-footer);
  color: var(--color-text);
  text-decoration: none;
}

.bento-tile > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-tile:hover > img,
.bento-tile:focus-visible > img {
  transform: scale(1.04);
}

.bento-tile:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
}

.bento-tile--big {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-tile--wide {
  grid-column: span 2;
}

.bento-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.bento-label span {
  color: var(--color-text-muted);
  font-weight: 400;
}

.bento-tile--big .bento-label {
  bottom: 20px;
  left: 20px;
  padding: 10px 18px;
  font-size: 18px;
}

/* číslo – oranžová dlaždica (len biela) */
.bento-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2vw, 28px);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.bento-stat-text {
  max-width: 14ch;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.bento-stat-num {
  font-family: var(--font-display);
  font-size: clamp(56px, 5.4vw, 80px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* čierna dlaždica – služby */
.bento-ink {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2vw, 28px);
  background: var(--color-text);
  color: var(--color-on-brand);
}

.bento-ink strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.bento-ink-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.bento-ink-link svg {
  transition: transform 0.2s ease;
}

.bento-ink:hover .bento-ink-link svg {
  transform: translateX(4px);
}

/* tablet: 2 stĺpce */
@media (max-width: 1000px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(200px, 32vw, 280px);
  }
}

/* mobil: 1 stĺpec, všetko rovnako široké */
@media (max-width: 600px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }

  .bento-tile,
  .bento-tile--big,
  .bento-tile--wide {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .bento-stat,
  .bento-ink {
    aspect-ratio: auto;
    min-height: 180px;
    gap: 24px;
  }
}

/* Hero pod 1000 px: nadpis → podnadpis → mockup → CTA → dôkazy
   (.hero-copy sa „rozpustí“, aby mockup mohol ísť medzi nadpis a text) */
@media (max-width: 1000px) {
  .hero-split {
    display: flex;
    flex-direction: column;
  }

  .hero-copy {
    display: contents;
  }

  .hero-copy .hero-kicker { order: 1; }
  .hero-copy .hero-sub { order: 2; }
  .hero-visual { order: 3; }
  .hero-copy .hero-kicker-cta { order: 4; }
  .hero-copy .hero-proof { order: 5; }

  .hero-visual {
    width: 100%;
    margin: 0 auto 18px;
  }
}

/* Hero – dôkazy na mobile v jednom rade ako na desktope:
   logá + „spokojných klientov“ pod nimi | linka | Google odznak */
@media (max-width: 700px) {
  .hero-proof {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .hero-proof-clients {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .hero-proof-reviews {
    width: auto;
    min-width: 124px;
    padding-left: 16px;
    border-left: 1px solid var(--color-border);
  }
}

@media (max-width: 380px) {
  .hero-proof {
    gap: 12px;
  }

  .hero-faces li {
    width: 50px;
    height: 50px;
  }

  .hero-faces li + li {
    margin-left: -14px;
  }

  .hero-proof-reviews {
    min-width: 116px;
    padding-left: 12px;
  }
}

/* mobil: Google odznak menší, „spokojných klientov“ na jednom riadku */
@media (max-width: 700px) {
  .hero-proof-text {
    white-space: nowrap;
  }

  .hero-proof-text br {
    display: none;
  }

  /* widget potrebuje plnú veľkosť, inak sa lenivé načítanie nespustí –
     preto ho len vizuálne zmenšíme v menšom ráme */
  .hero-proof-reviews {
    position: relative;
    width: 116px;
    min-width: 0;
    height: 104px;
    min-height: 0;
    box-sizing: content-box;
  }

  .hero-proof-reviews > [class*="elfsight-app"] {
    position: absolute;
    top: 0;
    left: 16px;
    width: 136px;
    min-height: 132px;
    transform: scale(0.74);
    transform-origin: top left;
  }
}

/* =========================================================
   Hero – mobil (≤ 700 px): typografická hierarchia a dôkazy
   ========================================================= */
@media (max-width: 700px) {
  /* nadpis vyplní šírku (pomer šírky vety k písmu ≈ 8,6) – nikdy menší
     ako podnadpis, stále na jednom riadku */
  .hero-kicker {
    font-size: clamp(28px, calc((100vw - 44px) / 8.6), 46px);
  }

  /* podnadpis o stupeň menší, vyvážené zalomenie */
  .hero-sub strong {
    font-size: 17px;
    line-height: 1.4;
    text-wrap: balance;
  }

  /* CTA: obe tlačidlá rovnako široké, pohodlné na palec */
  .hero-kicker-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin-right: auto;
    margin-left: auto;
  }

  .hero-kicker-cta .hero-kicker-btn {
    justify-content: center;
    width: 100%;
    height: 52px;
    font-size: 16px;
  }

  /* „spokojných klientov“ jemnou sivou */
  .hero-proof-text {
    color: var(--color-text-muted);
    font-weight: 500;
  }

  /* Google odznak rovnako vysoký ako logá s textom (≈ 80 px), opticky
     na rovnakej osi */
  .hero-proof-reviews {
    width: 82px;
    height: 80px;
  }

  .hero-proof-reviews > [class*="elfsight-app"] {
    transform: scale(0.6);
  }
}

@media (max-width: 700px) {
  .hero-kicker-cta {
    width: calc(100% - 40px);
    max-width: 360px;
    padding-right: 0;
    padding-left: 0;
  }
}

/* Hero nadpis na mobile NIKDY na dva riadky: zákaz zalomenia + písmo
   s rezervou (pomer 9,4 namiesto 8,6 – iné telefóny vykresľujú Outfit širšie) */
@media (max-width: 700px) {
  .hero-kicker,
  .hero-kicker-line {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .hero-kicker {
    font-size: clamp(26px, calc((100vw - 40px) / 9.4), 44px);
  }

  /* Google odznak o kúsok väčší */
  .hero-proof-reviews {
    width: 94px;
    height: 92px;
  }

  .hero-proof-reviews > [class*="elfsight-app"] {
    transform: scale(0.69);
  }
}

/* mobil: „…spokojných klientov“ – tri bodky nadväzujú na krúžok 150+ nad textom */
@media (max-width: 700px) {
  .hero-proof-text::before {
    content: "…";
  }
}

/* mobil: Google odznak ešte o kúsok väčší */
@media (max-width: 700px) {
  .hero-proof-reviews {
    width: 106px;
    height: 104px;
  }

  .hero-proof-reviews > [class*="elfsight-app"] {
    transform: scale(0.78);
  }
}

@media (max-width: 360px) {
  .hero-proof-reviews {
    width: 96px;
    height: 94px;
  }

  .hero-proof-reviews > [class*="elfsight-app"] {
    transform: scale(0.7);
  }
}

/* mobil: kruh odznaku opticky na strede oproti logám + „…spokojných klientov“
   (widget kreslí kruh v hornej časti svojho rámu – namerané o 11 px vyššie) */
@media (max-width: 700px) {
  .hero-proof-reviews > [class*="elfsight-app"] {
    top: 11px;
  }
}

@media (max-width: 360px) {
  .hero-proof-reviews > [class*="elfsight-app"] {
    top: 10px;
  }
}

/* mobil: viac vzduchu medzi dôkazmi (logá, Google) a bannermi */
@media (max-width: 700px) {
  .hero-copy .hero-proof,
  .hero-proof {
    margin-bottom: 56px;
  }
}

/* =========================================================
   Veľké menu (menu.js) – tlačidlo „Menu“ na počítači (> 1280 px),
   na menších obrazovkách ho otvára hamburger .site-toggle.
   ========================================================= */
.site-burger {
  order: 4;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms linear, background-color 150ms linear, color 150ms linear;
}

.site-burger:hover,
.site-burger:focus-visible,
.site-burger[aria-expanded="true"] {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.site-burger[aria-expanded="true"] .site-toggle-icon {
  background: transparent;
}

.site-burger[aria-expanded="true"] .site-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-burger[aria-expanded="true"] .site-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 1280px) {
  .site-burger {
    display: none;
  }

  /* hamburger už neotvára starý zoznam, ale veľké menu */
  .site-top.is-open .site-top-panel {
    display: none;
  }
}

html.is-mega-open {
  overflow: hidden;
}

.mega {
  position: fixed;
  top: var(--mega-top, 100px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  animation: mega-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega[hidden] {
  display: none;
}

@keyframes mega-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

.mega-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.15fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: start;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 64px) clamp(28px, 3vw, 56px);
}

.mega-label {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
}

.mega-main,
.mega-svc,
.mega-more {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* hlavné stránky – veľká typografia */
.mega-main a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(30px, 2.8vw, 46px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-decoration: none;
}

.mega-main a svg {
  flex: 0 0 auto;
  color: var(--color-brand);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 150ms linear, transform 200ms ease;
}

.mega-main a:hover,
.mega-main a:focus-visible {
  color: var(--color-brand);
}

.mega-main a:hover svg,
.mega-main a:focus-visible svg {
  opacity: 1;
  transform: none;
}

/* služby s ikonkami */
.mega-svc {
  display: grid;
  gap: 4px;
}

.mega-svc a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  color: var(--color-text);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.mega-ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface));
  color: var(--color-brand);
  transition: background-color 150ms linear, color 150ms linear;
}

.mega-svc a:hover .mega-ico,
.mega-svc a:focus-visible .mega-ico {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.mega-svc a:hover,
.mega-svc a:focus-visible {
  color: var(--color-brand);
}

/* viac + pripravované */
.mega-more {
  display: grid;
  gap: 2px;
}

.mega-more a,
.mega-soon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  color: var(--color-text);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.mega-more a:hover,
.mega-more a:focus-visible {
  color: var(--color-brand);
}

.mega-soon {
  color: var(--color-text-muted);
  cursor: default;
}

.mega-soon em {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-footer);
  color: var(--color-text-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

/* oranžová karta s mockupom (na oranžovej len biela) */
.mega-card {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  overflow: hidden;
  padding: 24px;
  border-radius: 24px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  text-decoration: none;
}

.mega-card > img {
  display: block;
  width: 108%;
  max-width: none;
  height: auto;
  margin: -12px -4% -4px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-card:hover > img {
  transform: translateY(-4px) scale(1.02);
}

.mega-card-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.mega-card-title > span {
  display: block;
  font-weight: 300;
  opacity: 0.9;
}

.mega-card-vy {
  height: 1.3em;
  width: auto;
  margin-right: 0.2em;
  vertical-align: -0.38em;
}

.mega-card-btn {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

/* kontakty dole */
.mega-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  width: 100%;
  max-width: 1600px;
  margin: auto auto 0;
  padding: 20px clamp(28px, 3vw, 56px) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 15px;
}

.mega-foot a,
.mega-foot span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.mega-foot a:hover,
.mega-foot a:focus-visible {
  color: var(--color-brand);
}

.mega-foot svg {
  color: var(--color-brand);
}

/* tablet: 2 stĺpce, karta na celú šírku */
@media (max-width: 1100px) {
  .mega-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mega-card {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .mega-card > img {
    grid-row: span 2;
    width: 100%;
    margin: 0;
  }
}

/* mobil: pod sebou */
@media (max-width: 700px) {
  .mega-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 20px;
  }

  .mega-main a {
    font-size: 32px;
  }

  .mega-main a svg {
    opacity: 1;
    transform: none;
  }

  .mega-card {
    grid-template-columns: 1fr;
  }

  .mega-card > img {
    grid-row: auto;
  }

  .mega-foot {
    flex-direction: column;
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: none;
  }
}

.mega-card-title .mega-card-vy {
  display: inline-block;
}

.mega:focus {
  outline: none;
}

/* Tlačidlo „Menu“ v štýle položiek navigácie (ikonka nad textom),
   tesne pred zvislou čiarou kontaktov */
@media (min-width: 1281px) {
  .site-burger {
    order: 3;
    flex-direction: column;
    gap: 5px;
    height: auto;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
  }

  .site-top-side {
    order: 4;
  }

  .site-burger:hover,
  .site-burger:focus-visible,
  .site-burger[aria-expanded="true"] {
    border-color: transparent;
    color: var(--color-brand);
  }

  .site-burger:hover .site-cat-ico,
  .site-burger:focus-visible .site-cat-ico {
    transform: translateY(-2px);
  }
}

.site-burger-ico {
  color: var(--color-brand);
}

.site-burger-close {
  display: none;
}

.site-burger[aria-expanded="true"] .site-burger-open {
  display: none;
}

.site-burger[aria-expanded="true"] .site-burger-close {
  display: inline;
}

.site-burger-ico .site-burger-open,
.site-burger-ico .site-burger-close {
  line-height: 0;
}

.site-burger .site-cat-ico {
  display: flex;
  transition: transform 0.25s ease;
}

/* hamburger na mobile/tablete: rovnaké tri čiarky posunuté do šikmej línie
   (horná vľavo, stredná v strede, spodná vpravo); pri otvorení krížik */
.site-toggle-icon {
  width: 13px;
}

.site-toggle-icon::before,
.site-toggle-icon::after {
  width: 13px;
}

.site-toggle-icon::before {
  transform: translateX(-3px);
}

.site-toggle-icon::after {
  transform: translateX(3px);
}

.site-top.is-open .site-toggle-icon::before {
  transform: rotate(45deg);
}

.site-top.is-open .site-toggle-icon::after {
  transform: rotate(-45deg);
}

.site-toggle-icon,
.site-toggle-icon::before,
.site-toggle-icon::after {
  transition: transform 0.25s ease, top 0.25s ease, background-color 0.2s linear;
}

/* jazyky v menu – SK aktívne, ostatné pripravujeme */
.mega-lang {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.mega-lang-item {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: default;
}

.mega-lang-item[aria-disabled="true"] {
  opacity: 0.55;
}

.mega-lang-item.is-active {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
  opacity: 1;
}

.mega-lang-note {
  margin-left: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-style: normal;
}

@media (max-width: 700px) {
  .mega-lang {
    margin-left: 0;
    padding-top: 8px;
  }
}

.site-toggle-icon,
.site-toggle-icon::before,
.site-toggle-icon::after {
  width: 17px;
  height: 1.75px;
}

.site-toggle-icon::before {
  top: -6px;
  transform: translateX(-4px);
}

.site-toggle-icon::after {
  top: 6px;
  transform: translateX(4px);
}

.site-top.is-open .site-toggle-icon::before,
.site-top.is-open .site-toggle-icon::after {
  top: 0;
}

/* menu – služby: len čisté oranžové ikonky, bez dlaždice */
.mega-ico {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: none;
}

.mega-svc a:hover .mega-ico,
.mega-svc a:focus-visible .mega-ico {
  background: none;
  color: var(--color-brand);
  transform: translateX(2px);
}

.mega-ico {
  transition: transform 0.2s ease;
}

/* karta v menu s iPhonom (img/nav-iphone): text a tlačidlo hore,
   telefón vyrastá zo spodného okraja karty (spodok je orezaný) */
.mega-card {
  grid-template-rows: auto auto 1fr;
  height: clamp(440px, 58vh, 560px);
  padding-bottom: 0;
}

.mega-card > .mega-card-phone {
  justify-self: center;
  width: clamp(170px, 13vw, 210px);
  max-width: none;
  height: auto;
  margin: 10px 0 0;
  transform: rotate(-4deg);
  transform-origin: 50% 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-card:hover > .mega-card-phone {
  transform: rotate(-4deg) translateY(-8px);
}

@media (max-width: 1100px) {
  .mega-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
    height: 340px;
  }

  .mega-card > .mega-card-phone {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 170px;
    margin: 0;
  }
}

@media (max-width: 700px) {
  .mega-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    height: 470px;
  }

  .mega-card > .mega-card-phone {
    grid-column: auto;
    grid-row: auto;
    margin-top: 6px;
  }
}

/* karta v menu čierna – oranžový telefón na nej vynikne (oranžová na oranžovej splývala) */
.mega-card {
  background: var(--color-text);
}

.mega-card-title > span {
  color: color-mix(in srgb, #fff 62%, var(--color-text));
  opacity: 1;
}

.mega-card-btn {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.mega-card:hover .mega-card-btn {
  background: var(--color-brand-hover);
}

.mega-card > .mega-card-phone {
  width: clamp(180px, 14.5vw, 230px);
}

/* telefón v karte menu menší a celý viditeľný (nič orezané) */
.mega-card {
  height: auto;
  padding-bottom: 28px;
}

.mega-card > .mega-card-phone {
  width: clamp(120px, 9.6vw, 150px);
  margin: 14px 0 4px;
  transform: rotate(-3deg);
  transform-origin: 50% 50%;
}

.mega-card:hover > .mega-card-phone {
  transform: rotate(-3deg) translateY(-6px);
}

@media (max-width: 1100px) {
  .mega-card {
    height: auto;
  }

  .mega-card > .mega-card-phone {
    width: 120px;
    margin: 0 12px 0 0;
  }
}

@media (max-width: 700px) {
  .mega-card {
    height: auto;
  }

  .mega-card > .mega-card-phone {
    width: 130px;
    margin: 12px 0 0;
  }
}

/* Menu ↔ Zavrieť bez skákania: oba texty aj ikonky v tej istej bunke,
   tlačidlo má stále šírku dlhšieho slova; prepína sa len viditeľnosť */
.site-burger-label,
.site-burger-ico {
  display: inline-grid;
}

.site-burger-label > span,
.site-burger-ico > span {
  grid-area: 1 / 1;
  justify-self: center;
}

.site-burger .site-burger-close {
  display: inline;
  visibility: hidden;
}

.site-burger[aria-expanded="true"] .site-burger-open {
  display: inline;
  visibility: hidden;
}

.site-burger[aria-expanded="true"] .site-burger-close {
  visibility: visible;
}

/* Mozaika – popis projektu ako „záložka“ vyrezaná v pravom hornom rohu fotky:
   biela plocha sekcie zasahuje do fotky (bez pilulky, bez skla), mäkké
   vnútorné rohy nadväzujú na zaoblenie dlaždice */
.bento-media {
  display: block;
  width: 100%;
  height: 100%;
}

.bento-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-tile:hover .bento-media > img,
.bento-tile:focus-visible .bento-media > img {
  transform: scale(1.04);
}

.bento-cap {
  --notch: 18px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px 13px 20px;
  border-bottom-left-radius: var(--notch);
  background: var(--color-surface);
}

/* vnútorné (obrátené) rohy – vľavo hore a vpravo dole od záložky */
.bento-cap::before,
.bento-cap::after {
  content: "";
  position: absolute;
  width: var(--notch);
  height: var(--notch);
  border-top-right-radius: var(--notch);
  box-shadow: 6px -6px 0 6px var(--color-surface);
  pointer-events: none;
}

.bento-cap::before {
  top: 0;
  right: 100%;
}

.bento-cap::after {
  top: 100%;
  right: 0;
}

.bento-cap strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  transition: color 150ms linear;
}

.bento-cap span {
  color: var(--color-text-muted);
  font-size: 14px;
  white-space: nowrap;
}

.bento-cap span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 10px 0 0;
  border-radius: 50%;
  background: var(--color-brand);
  vertical-align: 0.2em;
}

.bento-tile:hover .bento-cap strong,
.bento-tile:focus-visible .bento-cap strong {
  color: var(--color-brand);
}

.bento-tile--big .bento-cap {
  padding: 14px 22px 17px 26px;
}

.bento-tile--big .bento-cap strong {
  font-size: 19px;
}

@media (max-width: 600px) {
  .bento-cap {
    --notch: 16px;
    padding: 9px 14px 11px 16px;
  }
}

/* záložka mimo orezu dlaždice: fotku zaobľuje až .bento-media, takže
   antialiasovaný okraj fotky v pravom hornom rohu nepresvitá okolo záložky */
.bento-tile:has(.bento-media) {
  overflow: visible;
  background: none;
}

.bento-media {
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-footer);
}

.bento-cap {
  top: -1px;
  right: -1px;
}

/* mobil/tablet: biely blok partnerov len na šírku obsahu (nie pás od kraja po kraj),
   po stranách ostáva oranžová plocha sekcie */
@media (max-width: 1000px) {
  .bridge-partners::before {
    left: 0;
    right: 0;
  }
}

/* Dôverujú nám: logá čisto biele a jasné (bez priehľadnosti – cez 82 %
   presvitala oranžová a logá pôsobili vyblednuto) */
.bridge-marquee-track img {
  opacity: 1;
}

/* Bridge: tiché CTA pod partnermi – len na mobile/tablete (pod 1000 px
   tam ostával prázdny oranžový priestor); dôkaz → akcia */
.bridge-cta {
  display: none;
}

@media (max-width: 1000px) {
  .bridge-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    order: 10;
    align-self: flex-start;
    margin-top: 28px;
    color: var(--color-surface);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    text-decoration: none;
  }

  .bridge-cta strong {
    font-weight: 600;
    border-bottom: 1.5px solid currentColor;
  }

  .bridge-cta svg {
    transition: transform 150ms linear;
  }

  .bridge-cta:hover svg,
  .bridge-cta:focus-visible svg {
    transform: translateX(3px);
  }

  .bridge-cta:focus-visible {
    outline: 2px solid var(--color-surface);
    outline-offset: 4px;
  }
}

@media (max-width: 1000px) {
  .bridge-cta {
    justify-self: start;
    margin-top: -8px;
  }

  .page-home .bridge {
    padding-bottom: 64px;
  }
}

/* Posuvník okna skrytý (rozhodnutie majiteľa): stránka ide na 100 % šírky
   aj pri systémovom nastavení „posuvníky vždy“ / pripojenej myši.
   Posúvanie kolieskom, trackpadom, klávesnicou a dotykom funguje ďalej. */
html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

/* Proces na mobile: os vycentrovaná ako celok. Karta 03 bez presahu doľava
   (predtým −16 px vľavo, vpravo nič → pôsobila posunuto), sedí v okrajoch
   stránky; všetky kroky majú rovnaké vnútorné odsadenie 16 px, takže kruhy,
   linka aj pravý okraj textu sú na jednej osi. */
@media (max-width: 700px) {
  .proces-stage .proces-step,
  .proces-stage .proces-step:not(.proces-step--key) {
    padding-right: 16px;
    padding-left: 16px;
  }

  .proces-stage .proces-step--key {
    margin-left: 0;
    padding: 18px 16px 20px;
  }

  .proces-stage .proces-step:not(:last-child)::before {
    left: 35px;
  }

  .proces-stage .proces-step--key:not(:last-child)::before {
    left: 35px;
  }
}

/* Newsletter – nízky čierny pás medzi blogom a otázkami (okt. 2026).
   Hlasový systém Vy / My, glyf biely. Formulár: e-mail + oranžové tlačidlo
   v jednom riadku; Turnstile sa ukáže len keď treba (interaction-only).
   Odoslanie newsletter.js → newsletter.php → Ecomail (double opt-in). */
.nl {
  --nl-muted: color-mix(in srgb, var(--color-on-brand) 62%, var(--color-text));
  --nl-line: color-mix(in srgb, var(--color-on-brand) 18%, var(--color-text));
  background: var(--color-text);
  color: var(--color-on-brand);
  padding: clamp(44px, 5vw, 72px) 0;
}

.nl + .faq {
  padding-top: clamp(88px, 10vw, 140px);
}

.nl-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: center;
  gap: 28px clamp(40px, 6vw, 112px);
  margin: 0 clamp(36px, 4.5vw, 72px);
}

.nl-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.nl .vy-title .vy-title-you {
  color: var(--color-on-brand);
}

.nl .vy-title .vy-title-us {
  color: var(--nl-muted);
}

.nl .vy-mark {
  background: none;
}

.nl-lead {
  max-width: 46ch;
  margin: 16px 0 0;
  color: var(--nl-muted);
  font-size: 17px;
  line-height: 1.5;
}

.nl-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.nl-row {
  display: flex;
  gap: 8px;
}

.nl-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: 17px;
}

.nl-input::placeholder {
  color: #a19c97;
}

.nl-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 35%, transparent);
}

.nl-input[aria-invalid="true"] {
  border-color: var(--color-brand);
}

.nl-submit {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms linear;
}

.nl-submit:hover,
.nl-submit:focus-visible {
  background: var(--color-brand-hover);
}

.nl-submit:focus-visible {
  outline: 2px solid var(--color-on-brand);
  outline-offset: 3px;
}

.nl-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.nl-submit svg {
  transition: transform 150ms linear;
}

.nl-submit:hover svg {
  transform: translateX(3px);
}

.nl-turnstile:not(:empty) {
  margin-top: 12px;
}

.nl-note {
  margin: 12px 0 0;
  color: var(--nl-muted);
  font-size: 14px;
  line-height: 1.5;
}

.nl-note a {
  color: var(--color-on-brand);
  text-underline-offset: 3px;
}

.nl-error {
  margin: 10px 0 0;
  color: var(--color-on-brand);
  font-size: 15px;
  font-weight: 600;
}

.nl-error::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-brand);
  vertical-align: 0.1em;
}

.nl-thanks {
  padding: 20px 22px;
  border: 1px solid var(--nl-line);
  border-radius: 14px;
}

.nl-thanks strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.nl-thanks span {
  display: block;
  margin-top: 6px;
  color: var(--nl-muted);
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .nl-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .nl-inner {
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }

  .nl-lead {
    font-size: 16px;
  }

  .nl-row {
    flex-direction: column;
  }

  .nl-submit {
    justify-content: center;
  }
}

/* Vzorky zdarma (/vzorky, okt. 2026) – len pre odberateľov newslettera.
   Hore nadpis Vy / My + ilustrácia sady, pod tým vľavo obsah sady
   (veľké oranžové čísla ako v procese), vpravo biela karta s formulárom. */
.vz {
  padding: clamp(40px, 5vw, 72px) 0 clamp(88px, 10vw, 140px);
  background: var(--color-surface);
  color: var(--color-text);
}

.vz-head,
.vz-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px clamp(40px, 6vw, 112px);
  margin: 0 clamp(36px, 4.5vw, 72px);
}

.vz-head {
  align-items: center;
}

.vz-body {
  align-items: start;
  margin-top: clamp(48px, 6vw, 96px);
}

.vz-crumb {
  margin: 0 0 18px;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vz-crumb::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--color-brand);
  vertical-align: 0.1em;
}

.vz-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.vz-lead {
  max-width: 44ch;
  margin: 22px 0 0;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.55;
}

.vz-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.vz-h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

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

.vz-items li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.vz-num {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.vz-items strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.vz-items li > span:last-child {
  color: var(--color-text-muted);
  font-size: 16px;
}

.vz-rule {
  margin: 22px 0 0;
  color: var(--color-text-muted);
  font-size: 15px;
}

.vz-card {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
}

.vz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.vz-wide {
  grid-column: 1 / -1;
}

.vz-field {
  display: grid;
  gap: 6px;
}

.vz-field > span {
  font-size: 14px;
  font-weight: 600;
}

.vz-field input,
.vz-field select,
.vz-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: 16px;
}

.vz-field textarea {
  resize: vertical;
}

.vz-field input::placeholder,
.vz-field textarea::placeholder {
  color: #a19c97;
}

.vz-field input:focus,
.vz-field select:focus,
.vz-field textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent);
}

.vz-field [aria-invalid="true"] {
  border-color: var(--color-brand);
}

.vz-turnstile:not(:empty) {
  margin-top: 18px;
}

.vz-submit,
.vz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  margin-top: 20px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms linear;
}

.vz-submit:hover,
.vz-submit:focus-visible,
.vz-btn:hover,
.vz-btn:focus-visible {
  background: var(--color-brand-hover);
}

.vz-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.vz-error {
  margin: 14px 0 0;
  color: var(--color-brand);
  font-size: 15px;
  font-weight: 600;
}

.vz-note {
  margin: 14px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.vz-note a {
  color: var(--color-text);
}

.vz-state p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .vz-head,
  .vz-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .vz-head,
  .vz-body {
    margin-left: max(20px, env(safe-area-inset-left));
    margin-right: max(20px, env(safe-area-inset-right));
  }

  .vz-grid {
    grid-template-columns: 1fr;
  }

  .vz-card {
    padding: 20px 16px;
  }

  .vz-submit,
  .vz-btn {
    width: 100%;
  }
}

/* Stránka 404 (404.html, okt. 2026) – rozloženie ďakovnej stránky,
   vpravo stuha „vlna“ (obálka patrí ďakovnej stránke). Namiesto krokov
   rýchle odkazy na hlavné časti webu. */
.nf-code {
  margin: 0 0 14px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.nf-code::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--color-brand);
  vertical-align: 0.1em;
}

.nf-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.nf-links a {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 150ms linear;
}

.nf-links a:hover,
.nf-links a:focus-visible {
  border-color: var(--color-brand);
}

.nf-links strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.nf-links a:hover strong,
.nf-links a:focus-visible strong {
  color: var(--color-brand);
}

.nf-links span {
  color: var(--color-text-muted);
  font-size: 14px;
}

@media (max-width: 520px) {
  .nf-links {
    grid-template-columns: 1fr;
  }
}

/* 404: vlna vchádza pravým okrajom a odchádza vľavo dole – oba okraje vidno */
.page-404 .thx-visual img {
  object-position: right bottom;
}

@media (max-width: 860px) {
  .page-404 .thx-visual img {
    object-position: left center;
  }
}

/* 404: veľké číslo, aby bolo hneď jasné, čo sa stalo */
.nf-code {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-size: clamp(88px, 11vw, 160px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.nf-code::before {
  content: none;
}

/* Článok blogu (napr. shoptet-partner-meetup-kosice.html, okt. 2026).
   Úzky čitateľný stĺpec (~68 znakov), široká titulná fotka, čísla vo veľkom,
   galéria s veľkým náhľadom (clanok.js, <dialog>). */
.art {
  padding: clamp(32px, 4vw, 56px) 0 clamp(88px, 10vw, 140px);
  background: var(--color-surface);
  color: var(--color-text);
}

.art-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.5vw, 72px);
}

.art-head,
.art-body,
.art-cta {
  max-width: 720px;
}

.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 16px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.art-meta time {
  color: var(--color-brand);
  font-weight: 600;
}

.art-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.art-lead {
  margin: 20px 0 0;
  color: var(--color-text-muted);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
}

.art-cover {
  margin: clamp(32px, 4vw, 52px) 0;
}

.art-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.art-body {
  font-size: 18px;
  line-height: 1.7;
}

.art-body p {
  margin: 0 0 18px;
}

.art-body h2,
.art-gallery-title {
  margin: 44px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.art-body ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.art-body li {
  margin-bottom: 10px;
}

.art-body li::marker {
  color: var(--color-brand);
}

.art-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0 10px;
}

.art-stats p {
  margin: 0;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.art-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.art-stats span {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.4;
}

.art-note {
  margin: 0 0 18px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.art-gallery-wrap {
  margin-top: 56px;
}

.art-gallery {
  columns: 3 260px;
  column-gap: 14px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.art-gallery-item {
  margin: 0 0 14px;
  break-inside: avoid;
}

.art-gallery-item a {
  display: block;
  overflow: hidden;
  border-radius: 14px;
}

.art-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.art-gallery-item a:hover img,
.art-gallery-item a:focus-visible img {
  transform: scale(1.04);
}

.art-gallery-item a:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
}

.art-cta {
  margin-top: 56px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 20px;
  background: var(--color-text);
  color: var(--color-on-brand);
}

.art-cta p {
  margin: 0 0 18px;
  color: color-mix(in srgb, var(--color-on-brand) 70%, var(--color-text));
  font-size: 17px;
}

.art-cta .art-cta-title {
  margin-bottom: 8px;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.art-lightbox {
  max-width: min(96vw, 1600px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  overflow: visible;
}

.art-lightbox::backdrop {
  background: color-mix(in srgb, var(--color-text) 92%, transparent);
}

.art-lightbox img {
  display: block;
  max-width: min(96vw, 1600px);
  max-height: 94vh;
  width: auto;
  height: auto;
  border-radius: 14px;
}

.art-lb-btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.art-lb-btn:hover,
.art-lb-btn:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.art-lb-close {
  top: 16px;
  right: 16px;
}

.art-lb-prev,
.art-lb-next {
  top: 50%;
  transform: translateY(-50%);
}

.art-lb-prev {
  left: 16px;
}

.art-lb-next {
  right: 16px;
}

@media (max-width: 700px) {
  .art-body {
    font-size: 17px;
  }

  .art-stats {
    grid-template-columns: 1fr;
  }

  .art-gallery {
    columns: 2 140px;
    column-gap: 10px;
  }

  .art-gallery-item {
    margin-bottom: 10px;
  }

  .art-lb-prev,
  .art-lb-next {
    top: auto;
    bottom: 20px;
    transform: none;
  }

  .art-lb-prev {
    left: calc(50% - 60px);
  }

  .art-lb-next {
    right: calc(50% - 60px);
  }
}

/* článok: <header class="art-head"> nesmie dediť všeobecné odsadenie hlavičiek */
.art .art-head {
  padding: 0;
}

/* odkazy v texte článku – oranžové, podčiarknuté */
.art-body a,
.art-note a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.art-body a:hover,
.art-body a:focus-visible {
  color: var(--color-brand-hover);
}

/* CTA článku na oranžovej so stuhou „S pri okraji“ (zrkadlená – vchádza
   pravým okrajom karty, text vľavo na čistej ploche). Na oranžovej len biela. */
.art .art-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-brand);
  padding: 0;
}

.art-cta-visual {
  position: absolute;
  inset: 0;
}

.art-cta-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transform: scaleX(-1);
}

.art-cta-copy {
  position: relative;
  max-width: 56%;
  padding: clamp(28px, 3.4vw, 44px);
}

.art .art-cta .art-cta-copy p {
  color: var(--color-on-brand);
}

.art-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  margin-top: 4px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms linear;
}

.art-cta-btn:hover,
.art-cta-btn:focus-visible {
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-text));
}

.art-cta-btn:focus-visible {
  outline: 2px solid var(--color-surface);
  outline-offset: 3px;
}

.art-cta-btn svg {
  transition: transform 150ms linear;
}

.art-cta-btn:hover svg {
  transform: translateX(3px);
}

@media (max-width: 700px) {
  .art-cta-visual {
    position: static;
    height: 150px;
  }

  .art-cta-visual img {
    object-position: left 40%;
  }

  .art-cta-copy {
    max-width: none;
    padding: 24px 22px 28px;
  }
}

/* CTA článku na mobile: oranžový pruh so stuhou (stuha vychádza spodným
   okrajom pruhu do bielej), text pod ním na bielom – bez odrezanej stuhy */
@media (max-width: 700px) {
  .art .art-cta {
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .art-cta-visual {
    overflow: hidden;
    height: 160px;
    border-radius: 20px;
    background: var(--color-brand);
  }

  .art-cta-visual img {
    object-position: left 70%;
  }

  .art-cta-copy {
    padding: 22px 0 0;
  }

  .art .art-cta .art-cta-copy p {
    color: var(--color-text-muted);
  }

  .art .art-cta .art-cta-copy .art-cta-title {
    color: var(--color-text);
  }

  .art-cta-btn {
    background: var(--color-brand);
    color: var(--color-on-brand);
  }

  .art-cta-btn:hover,
  .art-cta-btn:focus-visible {
    background: var(--color-brand-hover);
  }
}

/* podpis autora pod článkom: oranžový kruh s bielym „vy“ + meno a funkcia */
.art-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.art-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-brand);
}

.art-avatar img {
  width: 32px;
  height: auto;
}

.art-author-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.art-author-text span {
  display: block;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.4;
}

/* overený autor – oranžová ikonka Lucide badge-check za menom */
.art-author-text strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.art-verified {
  flex: 0 0 auto;
  color: var(--color-brand);
}

/* CTA článku na celú šírku článku (ako titulná fotka a galéria) */
.art .art-cta {
  max-width: none;
}

.art-cta-copy {
  max-width: 52%;
}

@media (max-width: 700px) {
  .art-cta-copy { max-width: none; }
  /* aj pruh na mobile: bez oranžového pozadia pod bielou stuhou */
  .art .art-cta-visual { background: var(--color-surface); }
  .art .art-cta-visual img { transform: scaleX(-1) scale(1.01); }
}

/* CTA v článku: oranžovú dáva len obrázok – oranžové pozadie karty presvitalo
   na zaoblenom okraji pod bielou stuhou ako tenká čiarka vpravo hore */
@media (min-width: 701px) {
  .art .art-cta { background: var(--color-surface); }
  .art .art-cta-visual img { transform: scaleX(-1) scale(1.01); }
}

/* „Prečítajte si ďalej“ pod CTA článku – tie isté karty ako blog na úvode,
   3 vedľa seba (rytmus galérie), tablet 2, mobil vodorovný pás */
.art-more {
  margin-top: clamp(56px, 6vw, 88px);
}

.art-more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.art .art-more-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.art-more-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.art-more-all svg {
  transition: transform 0.2s ease;
}

.art-more-all:hover svg,
.art-more-all:focus-visible svg {
  transform: translateX(3px);
}

.art-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.art-more-grid .blog-card {
  flex: none;
}

.art-more-grid .blog-cover h3 {
  margin: 0;
}

@media (max-width: 1000px) {
  .art-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .art-more-grid .blog-card:nth-child(3) {
    display: none;
  }
}

@media (max-width: 700px) {
  .art-more-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -20px;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
  }

  .art-more-grid::-webkit-scrollbar {
    display: none;
  }

  .art-more-grid .blog-card,
  .art-more-grid .blog-card:nth-child(3) {
    display: block;
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* CTA článku na mobile v2: text vnútri oranžovej karty (biely), stuha pod ním
   v spodnej časti karty – vychádza pravým a spodným okrajom. Karta má biele
   pozadie (oranžovú dáva text-blok a obrázok), aby v rohoch nepresvitala čiarka. */
@media (max-width: 700px) {
  .art .art-cta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: var(--color-surface);
  }

  .art .art-cta-copy {
    order: 0;
    padding: 28px 22px 6px;
    background: var(--color-brand);
  }

  .art .art-cta-visual {
    order: 1;
    height: 140px;
    border-radius: 0;
  }

  .art .art-cta-visual img {
    object-position: left 85%;
  }

  .art .art-cta .art-cta-copy .art-cta-title,
  .art .art-cta .art-cta-copy p {
    color: var(--color-on-brand);
  }

  .art .art-cta-btn {
    background: var(--color-surface);
    color: var(--color-brand);
  }

  .art .art-cta-btn:hover,
  .art .art-cta-btn:focus-visible {
    background: var(--color-surface);
    color: var(--color-brand-hover);
  }
}

@media (max-width: 700px) {
  .art .art-cta-visual {
    position: relative;
    height: 112px;
    margin-top: -2px;
    background: var(--color-brand);
  }

  .art .art-cta-visual img {
    object-position: left 100%;
  }
}

/* CTA článku na mobile v3: pás so stuhou ukazuje pattern v celej výške
   (pomer 1920:900) – stuha vchádza pravým okrajom karty a odchádza spodným.
   Výrez len spodnej časti (112 px) stuhu rovno odrezal pri texte. Na širších
   displejoch max 200 px, orez zospodu (spodný okraj = okraj karty). */
@media (max-width: 700px) {
  .art .art-cta-visual {
    height: auto;
    aspect-ratio: 1920 / 900;
    max-height: 200px;
  }

  .art .art-cta-visual img {
    object-position: left top;
  }
}

@media (max-width: 700px) {
  /* stuha posunutá za pravý okraj karty – hore pri texte nesmie trčať rovný kúsok */
  .art .art-cta-visual img {
    position: absolute;
    right: -16%;
    bottom: 0;
    width: 116%;
    height: 116%;
    max-width: none;
    transform: scaleX(-1);
  }
}

@media (max-width: 700px) {
  /* vždy celý pattern – orez zhora pri širších displejoch nechal len kúsok stuhy */
  .art .art-cta-visual { max-height: none; }
}

/* CTA článku na mobile v4 (podľa náčrtu majiteľa): pattern otočený o 90°
   (stuha-s-okraj-biela-mobil) v pravej spodnej časti karty – stuha vyrastá
   zo spodného okraja, robí oblúk a odchádza pravým okrajom. Text hore. */
@media (max-width: 700px) {
  .art .art-cta {
    background: var(--color-brand);
  }

  .art .art-cta-visual {
    position: relative;
    width: 64%;
    height: auto;
    aspect-ratio: 900 / 676;
    margin: 0 0 0 auto;
    background: var(--color-brand);
  }

  .art .art-cta-visual img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center bottom;
    transform: none;
  }

  .art .art-cta-copy {
    padding-bottom: 0;
  }
}

.art-cta-visual picture {
  display: contents;
}

/* CTA článku na mobile v5: stuha otočená o ďalších 30° doľava (želanie
   majiteľa) – výrez 452×688 vybraný tak, aby stuha vchádzala/vychádzala len
   pravým a spodným okrajom karty. Vpravo dole, kúsok vytiahnutá k tlačidlu. */
@media (max-width: 700px) {
  .art .art-cta-visual {
    width: 44%;
    aspect-ratio: 452 / 688;
    margin-top: -48px;
  }
}

/* CTA článku na mobile v6: stuha natočená o 30° = SVG od majiteľa
   (img/paterny/stuha-30-stupnov.svg; na web orezaná kópia -mobil.svg len na
   oblasť stuhy, priehľadná). Vpravo dole, vychádza spodným a pravým okrajom. */
@media (max-width: 700px) {
  .art .art-cta-visual {
    width: 58%;
    aspect-ratio: 916 / 925;
    margin-top: 4px;
  }

  .art .art-cta-visual img {
    object-fit: contain;
    object-position: right bottom;
  }
}

/* CTA článku na mobile: menšia stuha vedľa tlačidla (nie pod ním) = nižšia karta */
@media (max-width: 700px) {
  .art .art-cta-visual {
    width: 36%;
    margin-top: -58px;
  }
}

@media (max-width: 700px) {
  /* text-blok bez vlastného pozadia (oranžovú dáva karta) – inak prekryl vrch
     stuhy vytiahnutej vedľa tlačidla a stuha bola rovno odrezaná */
  .art .art-cta-copy { background: transparent; }
  .art .art-cta-visual { z-index: 1; }
}

/* článok: blok „Čo to znamená pre vás“ – preklad zistenia do praxe klienta
   (alt plocha, oranžová linka vľavo), aby bol na prvý pohľad oddelený od faktov */
.art-body .art-for-you {
  margin: 4px 0 18px;
  padding: 16px 20px;
  border-left: 3px solid var(--color-brand);
  border-radius: 0 14px 14px 0;
  background: var(--color-surface-alt);
}

.art-body .art-for-you strong {
  color: var(--color-text);
}

/* galéria s malým počtom fotiek (4): mriežka 2 × 2, rovnaký orez 4:3
   (CSS columns by pri 4 fotkách nechali prázdny stĺpec); celá fotka v náhľade */
.art-gallery--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  columns: auto;
}

.art-gallery--grid .art-gallery-item {
  margin: 0;
}

.art-gallery--grid .art-gallery-item img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

/* fotka v texte článku (oživí pasáž s faktami) */
.art-body .art-figure {
  margin: 36px 0;
}

.art-body .art-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.art-body .art-figure figcaption {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* galéria 3 fotky: farebná na výšku vľavo, dve sivé vpravo pod sebou */
.art-gallery--grid .art-gallery-item--tall {
  grid-row: span 2;
}

.art-gallery--grid .art-gallery-item--tall a,
.art-gallery--grid .art-gallery-item--tall img {
  height: 100%;
}

.art-gallery--grid .art-gallery-item--tall img {
  aspect-ratio: auto;
}

.art-body .art-figure figcaption a {
  color: inherit;
}

/* Služby: hlavný blok „Externé marketingové oddelenie“ nad tromi kartami
   (návrh v1 – vpravo miesto na mockup od majiteľa). Na oranžovej len biela. */
.sv-main {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: clamp(32px, 4vw, 52px) 0 clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.sv-main-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}

.sv-main-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.sv-main-lead {
  max-width: 44ch;
  margin: 16px 0 28px;
  font-size: 18px;
  line-height: 1.55;
}

.sv-main-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.sv-main-list li {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.sv-main-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.sv-main-list span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.45;
}

.sv-main-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.sv-main-btn svg {
  transition: transform 0.2s ease;
}

.sv-main-btn:hover svg,
.sv-main-btn:focus-visible svg {
  transform: translateX(3px);
}

.sv-main-visual {
  display: grid;
  place-items: center;
  min-height: 360px;
  height: 100%;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 18px;
}

.sv-main-placeholder {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
}

.sv-parts-title {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  .sv-main {
    grid-template-columns: 1fr;
  }

  .sv-main-visual {
    min-height: 240px;
  }
}

@media (max-width: 520px) {
  .sv-main-list {
    grid-template-columns: 1fr;
  }
}

/* Úvod: pás „Externé marketingové oddelenie“ nad tromi kartami služieb
   (návrh v1, nadväzuje na hlavný blok /sluzby#komplet). Na oranžovej len biela. */
.service-main {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 48px);
  border-radius: 20px;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.service-main-kicker {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.service-main-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.service-main-text {
  max-width: 56ch;
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.5;
}

.service-main-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.service-main-btn svg {
  transition: transform 0.2s ease;
}

.service-main-btn:hover svg,
.service-main-btn:focus-visible svg {
  transform: translateX(3px);
}

@media (max-width: 800px) {
  .service-main {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Pás hlavnej služby v2: „kričí“ – väčší, biela stuha sprava (zrkadlená
   stuha-s-okraj ako CTA článku) a jemné zrno cez celú plochu (SVG šum, 0 KB
   navyše). Zrno = textúra, nie prechod – pravidlo „žiadne gradienty“ platí. */
.service-main {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(280px, 26vw, 380px);
  padding: clamp(32px, 4vw, 56px);
}

.service-main-ribbon {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transform: scaleX(-1);
}

.service-main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.service-main-copy {
  position: relative;
  z-index: 1;
  max-width: 52%;
}

.service-main-title {
  font-size: clamp(30px, 3.6vw, 52px);
}

.service-main-copy .service-main-btn {
  margin-top: 26px;
}

@media (max-width: 800px) {
  .service-main-copy {
    max-width: none;
  }

  .service-main {
    padding-bottom: clamp(150px, 40vw, 220px);
  }

  .service-main-ribbon {
    object-position: left bottom;
  }
}

.service-main {
  background: var(--color-surface);
}

.service-main::after {
  opacity: 0.45;
  mix-blend-mode: overlay;
}

/* Pás hlavnej služby v3: ČIERNY (kontrast medzi oranžovým bridge a kartami
   so stuhou) + bežiaci riadok služieb veľkým písmom s oranžovými bodkami
   (nadväzuje na pásy lôg v bridge). Stuha a zrno z v2 zrušené. */
.service-main {
  display: block;
  min-height: 0;
  padding: clamp(32px, 4vw, 56px) 0 clamp(28px, 3vw, 40px);
  background: #141414;
  color: var(--color-on-brand);
}

.service-main::after {
  content: none;
}

.service-main-ribbon {
  display: none;
}

.service-main-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 0 clamp(24px, 3.4vw, 48px);
}

.service-main-copy {
  max-width: 60ch;
}

.service-main-kicker {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.service-main-title em {
  font-style: normal;
  color: var(--color-brand);
}

.service-main-text {
  color: rgba(255, 255, 255, 0.72);
}

.service-main-btn,
.service-main-copy .service-main-btn {
  margin-top: 0;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.service-main-btn:hover,
.service-main-btn:focus-visible {
  background: var(--color-brand-hover);
}

.service-main-marquee {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.service-main-track {
  display: flex;
  width: max-content;
  animation: service-run 32s linear infinite;
}

.service-main:hover .service-main-track {
  animation-play-state: paused;
}

.service-main-run {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-main-run li {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.service-main-run li::after {
  content: "";
  width: 0.22em;
  height: 0.22em;
  margin: 0 0.5em;
  border-radius: 50%;
  background: var(--color-brand);
}

@keyframes service-run {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .service-main-track { animation: none; }
}

@media (max-width: 800px) {
  .service-main {
    padding-bottom: 28px;
  }

  .service-main-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Podstránka Sezónna ponuka (/sezonna-ponuka): katalóg partnera ako iframe,
   načíta sa až po kliknutí na náhľad */
.pon-book {
  margin: clamp(32px, 4vw, 52px) 0 0;
}

.pon-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 22px;
  background: var(--color-surface-alt);
}

.pon-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pon-load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
}

.pon-load-ico {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  transition: transform 0.2s ease;
}

.pon-load:hover .pon-load-ico,
.pon-load:focus-visible .pon-load-ico {
  transform: scale(1.06);
}

.pon-load-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.pon-load-note {
  color: var(--color-text-muted);
  font-size: 14px;
}

.pon-full {
  margin: 12px 0 0;
  text-align: right;
  font-size: 15px;
}

.pon-full a {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.pon-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.pon-steps li {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.pon-steps strong {
  display: block;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pon-steps span {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .pon-frame {
    aspect-ratio: 3 / 4;
  }

  .pon-steps {
    grid-template-columns: 1fr;
  }
}

/* Sezónna ponuka v2: Vianoce a Nový rok – oranžový hero s konfetami (vedomá
   výnimka z „jedna stuha“, len pre oslavné momenty – konfety len v pravej
   časti, text na čistej oranžovej), 4 ponuky, katalóg košov */
.pon-hero {
  position: relative;
  overflow: hidden;
  margin: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 80px);
  padding: clamp(32px, 5vw, 72px);
  border-radius: 24px;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.pon-hero-konfety {
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.pon-hero-copy {
  position: relative;
  max-width: 50%;
}

.pon-hero-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}

.pon-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.pon-hero-lead {
  margin: 20px 0 30px;
  max-width: 44ch;
  font-size: 18px;
  line-height: 1.55;
}

.pon-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.pon-h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.pon-offer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 clamp(48px, 6vw, 80px);
  padding: 0;
  list-style: none;
}

.pon-offer a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pon-offer a:hover,
.pon-offer a:focus-visible {
  border-color: var(--color-brand);
  transform: translateY(-2px);
}

.pon-ico {
  color: var(--color-brand);
}

.pon-offer strong {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.pon-offer a > span:last-child {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.45;
}

.pon-book {
  margin-top: 0;
  scroll-margin-top: 100px;
}

@media (max-width: 1000px) {
  .pon-offer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .pon-hero {
    padding-bottom: clamp(180px, 50vw, 260px);
  }

  .pon-hero-copy {
    max-width: none;
  }

  .pon-hero-konfety {
    top: auto;
    bottom: 0;
    width: 100%;
    height: clamp(150px, 42vw, 230px);
    object-position: center bottom;
  }
}

@media (max-width: 520px) {
  .pon-offer {
    grid-template-columns: 1fr;
  }
}

/* konfety cez celú kartu – v obrázku sú len celé kúsky mimo zóny textu
   (pc: vpravo, mobil: dole), takže nikde nie sú odrezané pri texte */
.pon-hero-konfety,
.pon-hero-konfety img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pon-hero-konfety img {
  object-fit: cover;
  object-position: right center;
}

@media (max-width: 800px) {
  .pon-hero-konfety {
    top: 0;
    bottom: 0;
    height: 100%;
  }

  .pon-hero-konfety img {
    object-position: center bottom;
  }
}

/* Sezónna ponuka: katalóg hneď pod úvodom – náhľad s obálkou katalógu
   (obálka z Heyzine og:image), klik načíta listovací katalóg */
.pon-book {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.pon-frame:not(.is-loaded) {
  aspect-ratio: auto;
}

.pon-load {
  position: relative;
  inset: auto;
  flex-direction: row;
  justify-content: flex-start;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 4vw, 56px);
  text-align: left;
}

.pon-cover {
  flex: 0 0 auto;
  width: clamp(200px, 26vw, 300px);
  height: auto;
  border-radius: 6px;
  transform: rotate(-2deg);
  transition: transform 0.3s ease;
}

.pon-load:hover .pon-cover,
.pon-load:focus-visible .pon-cover {
  transform: rotate(0deg) scale(1.02);
}

.pon-load-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.pon-load-kicker {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.pon-load .pon-load-title {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
}

.pon-load-text {
  max-width: 40ch;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.5;
}

.pon-load-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-weight: 600;
}

.pon-load:hover .pon-load-cta {
  background: var(--color-brand-hover);
}

@media (max-width: 700px) {
  .pon-load {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .pon-load-copy {
    align-items: center;
  }

  .pon-cover {
    width: 62%;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sezónna ponuka: upozornenie na termín (čierny pás, oranžový akcent) –
   na stránke, nie vyskakovacie okno */
.pon-deadline {
  display: flex;
  align-items: center;
  gap: 18px 24px;
  margin: calc(clamp(48px, 6vw, 80px) * -0.5) 0 clamp(40px, 5vw, 64px);
  padding: 20px clamp(20px, 3vw, 32px);
  border-radius: 20px;
  background: #141414;
  color: var(--color-on-brand);
}

.pon-deadline-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-brand);
}

.pon-deadline-text {
  flex: 1 1 auto;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.5;
}

.pon-deadline-text strong {
  display: block;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.pon-deadline-btn {
  flex: 0 0 auto;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.pon-deadline-btn:hover,
.pon-deadline-btn:focus-visible {
  background: var(--color-brand-hover);
}

@media (max-width: 700px) {
  .pon-deadline {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Sezónna ponuka v3: termín ako technické okno vľavo dole (nie súčasť dizajnu
   stránky); 76 px nad spodkom, aby neprekrylo ikonku CookieYes */
.pon-deadline { display: none; }

.pon-toast {
  position: fixed;
  left: 16px;
  bottom: 76px;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 360px;
  padding: 14px 40px 14px 14px;
  border-radius: 16px;
  background: #141414;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pon-toast.is-in {
  opacity: 1;
  transform: none;
}

.pon-toast[hidden] {
  display: none;
}

.pon-toast p {
  margin: 0;
}

.pon-toast strong {
  color: var(--color-on-brand);
}

.pon-toast a {
  color: var(--color-brand);
  font-weight: 600;
  white-space: nowrap;
}

.pon-toast-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.pon-toast-x {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pon-toast-x:hover,
.pon-toast-x:focus-visible {
  color: var(--color-on-brand);
}

@media (max-width: 420px) {
  .pon-toast {
    right: 16px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pon-toast { transition: none; }
}

/* Sezónna ponuka: pod katalógom stiahnutie PDF + celá obrazovka */
.pon-full {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 28px;
}

.pon-pdf-size {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* náhľad katalógu = mockup od majiteľa (už natočený, priehľadný) */
.pon-cover--mockup {
  width: clamp(240px, 30vw, 340px);
  border-radius: 0;
  transform: none;
}

.pon-load:hover .pon-cover--mockup,
.pon-load:focus-visible .pon-cover--mockup {
  transform: scale(1.03);
}

@media (max-width: 700px) {
  .pon-cover--mockup { width: 72%; }
}

/* Sezónna ponuka v4: v úvode namiesto konfiet otvorený katalóg na oranžovej
   so stuhou (hero-vianoce, rovnaký ako slajd na úvode). Ľavá časť obrázka je
   čistá oranžová = miesto pre text; horný okraj obrázka je celý oranžový,
   takže na mobile nadväzuje na text bez švu. */
.pon-hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.pon-hero {
  min-height: clamp(380px, 38vw, 520px);
}

@media (max-width: 800px) {
  .pon-hero {
    min-height: 0;
    padding-bottom: calc((100vw - 40px) * 0.47 + 8px);
  }

  .pon-hero-visual {
    top: auto;
    bottom: 0;
    height: auto;
    object-fit: contain;
  }
}

/* Sezónna ponuka v5: otvorený katalóg (xmas-open, pozadie prefarbené presne
   na #F04603) vpravo v úvode, okraje obrázka jemne splývajú s plochou */
.pon-hero-visual--open {
  inset: auto;
  top: 50%;
  right: 0;
  left: auto;
  width: auto;
  height: 112%;
  object-fit: contain;
  transform: translateY(-50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
}

@media (max-width: 800px) {
  .pon-hero-visual--open {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform: none;
  }

  .pon-hero {
    padding-bottom: calc((100vw - 40px) * 0.74);
  }
}

.pon-hero-visual--open {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Podstránka Reklamné predmety (/reklamne-predmety): ploché ilustrácie
   v brand jazyku (oranžová, biela, #141414), kým nebudú reálne mockupy */
.rp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 clamp(8px, 2vw, 16px);
  padding: 0;
  list-style: none;
}

.rp-item {
  display: flex;
  flex-direction: column;
}

.rp-ill {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  border-radius: 20px;
  background: var(--color-surface-alt);
  transition: background-color 0.25s ease;
}

.rp-ill svg {
  width: 74%;
  height: auto;
  transition: transform 0.3s ease;
}

.rp-item:hover .rp-ill svg {
  transform: scale(1.06) rotate(-2deg);
}

.rp-item h3 {
  margin: 16px 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.rp-item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.45;
}

@media (max-width: 1000px) {
  .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .rp-grid { gap: 14px 12px; }
  .rp-item h3 { font-size: 17px; }
  .rp-item p { font-size: 14px; }
}

.pon-more {
  margin: calc(clamp(48px, 6vw, 80px) * -0.6) 0 clamp(40px, 5vw, 64px);
  font-family: var(--font-display);
  font-weight: 600;
}

.pon-more a {
  color: var(--color-brand);
  text-decoration: none;
}

/* Reklamné predmety: „Toto je len výber“ – čierna karta s výzvou na konzultáciu */
.rp-consult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  background: #141414;
  color: rgba(255, 255, 255, 0.72);
}

.rp-consult-title {
  margin: 0 0 12px;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.rp-consult p {
  max-width: 60ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

.rp-consult-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.rp-consult-btn:hover,
.rp-consult-btn:focus-visible {
  background: var(--color-brand-hover);
}

@media (max-width: 800px) {
  .rp-consult {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Podstránka Weby a e-shopy (/weby) – skenovateľná: krátke bloky,
   ukážky prác medzi sekciami, 2 návrhy zdarma ako hlavný sľub ===== */
.wb-hero {
  padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 5vw, 64px);
}

.wb-lead {
  max-width: 48ch;
  margin: 20px 0 28px;
  color: var(--color-text-muted);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
}

.wb-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 2px solid var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wb-btn:hover,
.wb-btn:focus-visible {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.wb-btn--ghost {
  background: transparent;
  color: var(--color-brand);
}

.wb-btn--ghost:hover,
.wb-btn--ghost:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.wb-btn--white {
  border-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-brand);
}

.wb-btn--white:hover,
.wb-btn--white:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-brand-hover);
}

.wb-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.wb-facts li {
  padding-top: 14px;
  border-top: 2px solid var(--color-brand);
}

.wb-facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.wb-facts span {
  color: var(--color-text-muted);
  font-size: 15px;
}

.wb-sec {
  margin: 0 0 clamp(56px, 7vw, 96px);
}

.wb-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.wb-h2 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.wb-h2--small {
  font-size: clamp(20px, 2vw, 26px);
}

.wb-more {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.wb-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.wb-type {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--color-border);
  border-radius: 22px;
}

.wb-type--pro {
  border-color: #141414;
  background: #141414;
  color: rgba(255, 255, 255, 0.75);
}

.wb-type-kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.wb-type--pro .wb-type-kicker {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.wb-type h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.wb-type--pro h3 {
  color: var(--color-on-brand);
}

.wb-type > p {
  margin: 0 0 20px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.wb-type--pro > p {
  color: rgba(255, 255, 255, 0.72);
}

.wb-type ul,
.wb-checks {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-type li,
.wb-checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.4;
}

.wb-type li svg,
.wb-checks li svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-brand);
}

.wb-works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-work {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}

.wb-work img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.wb-work:hover img {
  transform: scale(1.03);
}

.wb-work-cap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 20px 20px;
}

.wb-work-cap strong {
  font-family: var(--font-display);
  font-weight: 600;
}

.wb-work-cap strong::after {
  content: "·";
  margin-left: 8px;
  color: var(--color-brand);
}

.wb-work-cap span {
  color: var(--color-text-muted);
  font-size: 15px;
}

.wb-gets {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 24px 56px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px;
  background: var(--color-surface-alt);
}

.wb-gets-head p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.55;
}

.wb-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  font-size: 17px;
}

.wb-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-steps li {
  position: relative;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

.wb-steps strong {
  display: block;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.wb-steps h3 {
  margin: 14px 0 6px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.wb-steps p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.45;
}

.wb-steps .wb-step--hi {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.wb-step--hi strong,
.wb-step--hi p {
  color: var(--color-on-brand);
}

.wb-step-tag {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.wb-tools-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-tools-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8a8683;
  font-family: var(--font-display);
  font-weight: 500;
}

.wb-tools-list svg {
  fill: currentColor;
}

.wb-tool-img img {
  display: block;
  width: auto;
  height: auto;
  max-height: 44px;
  object-fit: contain;
}

.wb-faq-list {
  border-top: 1px solid var(--color-border);
}

.wb-faq-item {
  border-bottom: 1px solid var(--color-border);
}

.wb-faq-item summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
}

.wb-faq-item summary::-webkit-details-marker {
  display: none;
}

.wb-faq-item summary::after {
  content: "+";
  color: var(--color-brand);
  font-size: 26px;
  line-height: 0.8;
  transition: transform 0.2s ease;
}

.wb-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.wb-faq-item p {
  max-width: 70ch;
  margin: 0 0 20px;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.wb-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: clamp(32px, 4vw, 56px);
  border-radius: 24px;
  background: var(--color-brand);
}

.wb-final .vy-title {
  margin: 0;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.wb-final .vy-title-you,
.wb-final .vy-title-us {
  display: block;
  color: var(--color-on-brand);
}

@media (max-width: 1000px) {
  .wb-facts,
  .wb-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wb-gets {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 700px) {
  .wb-types,
  .wb-checks {
    grid-template-columns: 1fr;
  }

  .wb-works {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -20px;
    padding-inline: 20px;
  }

  .wb-works::-webkit-scrollbar {
    display: none;
  }

  .wb-works li {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .wb-sec-head {
    flex-direction: column;
    gap: 0;
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .wb-facts,
  .wb-steps {
    grid-template-columns: 1fr;
  }
}

.wb-hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 24px 48px;
}

.wb-hero-img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  justify-self: end;
}

.wb-tool-img img[alt="Websupport"] {
  max-height: 36px;
  border-radius: 6px;
}

@media (max-width: 1000px) {
  .wb-hero-split {
    grid-template-columns: 1fr;
  }

  .wb-hero-img {
    max-width: 440px;
    justify-self: center;
  }
}

/* Weby v2: hero = oranžová karta so stuhou a mockupom (ako sezónna ponuka),
   viac užitočného obsahu, nástroje len GA, Search Console, Ecomail, Cloudflare */
.wb-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 24px 40px;
  margin: clamp(16px, 2vw, 28px) 0 clamp(28px, 3vw, 40px);
  padding: clamp(32px, 5vw, 72px);
  border-radius: 24px;
  background: var(--color-surface);
}

.wb-hero-ribbon {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transform: scaleX(-1) scale(1.01);
}

.wb-hero-copy {
  color: var(--color-on-brand);
}

.wb-hero-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}

.wb-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 78px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.wb-hero-title span {
  display: block;
}

.wb-hero .wb-lead {
  color: var(--color-on-brand);
  max-width: 46ch;
}

.wb-btn--outline-white {
  border-color: rgba(255, 255, 255, 0.85);
  background: transparent;
  color: var(--color-on-brand);
}

.wb-btn--outline-white:hover,
.wb-btn--outline-white:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-brand);
}

.wb-hero .wb-hero-img {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: auto;
  justify-self: end;
}

.wb-facts {
  margin: 0 0 clamp(56px, 7vw, 96px);
}

.wb-intro {
  max-width: 62ch;
  margin: -8px 0 28px;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.55;
}

.wb-must {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: must;
}

.wb-must li {
  counter-increment: must;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

.wb-must li::before {
  content: counter(must, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.wb-must strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.wb-must p {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.wb-need {
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--color-surface);
}

.wb-need-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
}

.wb-need ul {
  margin: 0;
  padding-left: 20px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.wb-need li::marker {
  color: var(--color-brand);
}

.wb-after {
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px;
  background: #141414;
  color: rgba(255, 255, 255, 0.72);
}

.wb-after .wb-h2 {
  color: var(--color-on-brand);
}

.wb-after-head p {
  max-width: 56ch;
  margin: -8px 0 28px;
  font-size: 17px;
  line-height: 1.55;
}

.wb-after-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 0;
  list-style: none;
}

.wb-after-list li {
  padding-top: 14px;
  border-top: 2px solid var(--color-brand);
}

.wb-after-list strong {
  display: block;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.wb-after-list span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
}

.wb-tools {
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.wb-tools-title {
  margin: 0 0 18px;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-weight: 600;
}

.wb-after .wb-tools-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.wb-after .wb-tools-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
}

.wb-after .wb-tools-list svg {
  grid-row: 1 / span 2;
  fill: #ffffff;
}

.wb-after .wb-tools-list strong {
  color: var(--color-on-brand);
  font-size: 15px;
}

.wb-after .wb-tools-list span {
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 1000px) {
  .wb-hero {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .wb-hero-ribbon {
    object-position: left bottom;
  }

  .wb-hero .wb-hero-img {
    max-width: 420px;
    justify-self: center;
  }

  .wb-must,
  .wb-after-list,
  .wb-after .wb-tools-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .wb-must,
  .wb-after-list,
  .wb-after .wb-tools-list {
    grid-template-columns: 1fr;
  }
}

.wb-after .wb-tools-list svg.wb-logo-color {
  fill: initial;
}

@media (max-width: 1000px) {
  /* na úzkej šírke by text išiel cez stuhu – čistá oranžová, mockup pod textom */
  .wb-hero {
    background: var(--color-brand);
    padding-bottom: 28px;
  }

  .wb-hero-ribbon {
    display: none;
  }
}

/* Weby: detail jednoduchého webu (#jednoduchy-web) – základ, doplnky za
   príplatok, cookies (CookieYes) a GDPR */
.wb-type-link {
  display: inline-block;
  margin-top: 22px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.wb-simple {
  scroll-margin-top: 100px;
}

.wb-simple-head p:not(.wb-type-kicker) {
  max-width: 62ch;
  margin: -8px 0 28px;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.55;
}

.wb-simple-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.wb-simple-box {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--color-border);
  border-radius: 22px;
}

.wb-simple-box h3 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.wb-simple-box--add {
  background: var(--color-surface-alt);
  border-color: var(--color-surface-alt);
}

.wb-simple-box--add h3 {
  margin-bottom: 4px;
}

.wb-simple-note {
  margin: 0 0 18px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.wb-checks--one {
  grid-template-columns: 1fr;
}

.wb-addons {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-addons li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.wb-addons svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-brand);
}

.wb-addons strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
}

.wb-addons span {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.4;
}

.wb-addons strong {
  color: var(--color-text);
  font-size: 16px;
}

.wb-legal {
  display: flex;
  align-items: center;
  gap: 24px 40px;
  margin-top: 16px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--color-border);
  border-radius: 22px;
}

.wb-legal-logo {
  flex: 0 0 auto;
  width: 160px;
  height: auto;
}

.wb-legal h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.wb-legal p {
  margin: 0;
  max-width: 72ch;
  color: var(--color-text-muted);
  line-height: 1.55;
}

@media (max-width: 800px) {
  .wb-simple-cols {
    grid-template-columns: 1fr;
  }

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

.wb-back {
  margin: 0 0 clamp(40px, 5vw, 64px);
  text-align: center;
}

.wb-back a {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.wb-final + .wb-back {
  margin-top: calc(clamp(40px, 5vw, 64px) * -0.4);
}

.wb-legal-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.wb-legal-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.4;
}

.wb-legal-list svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-brand);
}

/* Podstránka Web na mieru (/web-na-mieru) */
.wbp-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wbp-group {
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--color-border);
  border-radius: 22px;
}

.wbp-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--color-surface-alt);
  color: var(--color-brand);
}

.wbp-group h3 {
  margin: 16px 0 14px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}

.wbp-group ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wbp-group li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.4;
}

.wbp-group li svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-brand);
}

.wbp-demo {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 24px 48px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.wbp-demo .wb-type-kicker {
  background: var(--color-surface);
}

.wbp-demo .wb-h2 {
  color: var(--color-on-brand);
}

.wbp-demo-head p:not(.wb-type-kicker) {
  margin: -8px 0 0;
  font-size: 17px;
  line-height: 1.55;
}

.wbp-demo-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wbp-demo-list li {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.wbp-demo-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.wbp-demo-list span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.45;
}

.wbp-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .wbp-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wbp-demo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .wbp-groups,
  .wbp-demo-list,
  .wbp-steps {
    grid-template-columns: 1fr;
  }
}

/* Podstránka E-shopy (/eshopy) */
.es-hero-partner {
  position: relative;
  justify-self: end;
  max-width: 380px;
  padding: 28px;
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: none;
}

.es-hero-partner img {
  display: block;
  width: 100%;
  height: auto;
}

.es-hero-partner p {
  margin: 16px 0 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
}

.es-partner {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  align-items: center;
  gap: 24px 56px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--color-border);
  border-radius: 24px;
}

.es-partner-logo {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
}

.es-partner p {
  margin: 0 0 14px;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.55;
}

.es-case {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 24px;
  color: var(--color-text);
  text-decoration: none;
}

.es-case img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}

.es-case-copy {
  position: absolute;
  left: 24px;
  bottom: 24px;
  max-width: 420px;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--color-surface);
}

.es-case-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.es-case-copy span {
  color: var(--color-text-muted);
  font-size: 15px;
}

.es-brand {
  background: #141414;
}

.es-brand .wb-type-kicker {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.es-brand .wbp-demo-head p:not(.wb-type-kicker) {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.72);
}

.es-brand .wbp-demo-list li {
  border-top-color: var(--color-brand);
}

.es-brand .wbp-demo-list span {
  color: rgba(255, 255, 255, 0.72);
}

.es-brand .wb-btn--white {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

@media (max-width: 1000px) {
  .es-hero-partner {
    justify-self: start;
    margin-bottom: 8px;
  }

  .es-partner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .es-case img {
    aspect-ratio: 4 / 3;
  }

  .es-case-copy {
    position: static;
    max-width: none;
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 24px 24px;
  }
}

.es-hero-shot {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  justify-self: end;
  border-radius: 18px;
}

.es-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 0;
  padding: 10px 16px 10px 10px;
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.es-badge img {
  display: block;
  width: auto;
  height: 40px;
  border-radius: 6px;
}

@media (max-width: 1000px) {
  .es-hero-shot {
    justify-self: center;
    margin-bottom: 8px;
  }
}

.es-hero-fig {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 560px;
  margin: 0;
}

.es-hero-fig .es-hero-shot {
  max-width: none;
}

.es-hero-fig figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--color-surface);
  font-size: 14px;
}

.es-hero-fig figcaption strong {
  font-family: var(--font-display);
  font-weight: 600;
}

.es-hero-fig figcaption span {
  color: var(--color-text-muted);
}

@media (max-width: 1000px) {
  .es-hero-fig {
    justify-self: center;
  }
}

@media (max-width: 520px) {
  .es-badge {
    max-width: 100%;
    gap: 10px;
    font-size: 13px;
    line-height: 1.25;
  }

  .es-badge img {
    height: 32px;
  }
}

/* Podstránka Reklama a tlač (/tlac) */
.tl-cat {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 100px;
}

.tl-tech {
  margin: auto 0 0;
  padding-top: 16px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}

.tl-tech-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-tech-list li {
  padding: 22px;
  border-radius: 20px;
  background: var(--color-surface-alt);
}

.tl-tech-list h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.tl-tech-list > li > p {
  margin: 0 0 14px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.45;
}

.tl-tech-list dl {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.tl-tech-list dt {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.tl-tech-list dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.tl-graf-list li {
  display: flex;
  align-items: center;
}

.tl-predmety {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--color-border);
  border-radius: 24px;
}

.tl-predmety p:not(.wb-type-kicker) {
  max-width: 54ch;
  margin: -8px 0 0;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.55;
}

.tl-predmety-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 900px) {
  .tl-predmety {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Tlač: kategórie ako kartičky s náhľadom (ako dlaždice na Službách) */
.tl-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-card {
  scroll-margin-top: 100px;
}

.tl-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.tl-card > a:hover,
.tl-card > a:focus-visible {
  border-color: var(--color-brand);
}

.tl-card-img {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
}

.tl-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tl-card > a:hover .tl-card-img img {
  transform: scale(1.04);
}

.tl-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}

.tl-card-body h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.tl-card-body ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-card-body li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.4;
}

.tl-card-body li svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-brand);
}

.tl-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
}

.tl-card-cta svg {
  transition: transform 0.2s ease;
}

.tl-card > a:hover .tl-card-cta svg {
  transform: translateX(3px);
}

@media (max-width: 1000px) {
  .tl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .tl-cards { grid-template-columns: 1fr; }
}

.tl-card-body .tl-tech {
  display: block;
}

/* Externé marketingové oddelenie = jeden úzky jasný banner (rozhodnutie
   majiteľa – veľké karty dostávali menej pozornosti). Úvod aj Služby. */
.em-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  margin: 0 0 18px;
  padding: 18px 18px 18px clamp(20px, 3vw, 32px);
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.em-banner-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
}

.em-banner-text strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.em-banner-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.em-banner-btn svg {
  transition: transform 0.2s ease;
}

.em-banner-btn:hover svg,
.em-banner-btn:focus-visible svg {
  transform: translateX(3px);
}

.sv .em-banner {
  margin: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 48px);
}

@media (max-width: 800px) {
  .em-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
    border-radius: 22px;
  }
}

/* Katalógy na stiahnutie (/tlac#katalogy): hlavný s naším logom veľký,
   ostatné menšie; náhľad obálky + 1 veta + rozsah + Prelistovať / Stiahnuť */
.kt {
  scroll-margin-top: 100px;
}

.kt-main {
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr;
  align-items: center;
  gap: 24px clamp(24px, 4vw, 56px);
  margin-bottom: 18px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 24px;
  background: var(--color-surface-alt);
}

.kt-cover {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 5;
  background: #141414;
  transition: transform 0.25s ease;
}

.kt-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kt-cover:hover,
.kt-cover:focus-visible {
  transform: translateY(-3px);
}

.kt-main .kt-info h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.kt-info h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.kt-info > p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.kt-main .kt-info > p:not(.wb-type-kicker):not(.kt-meta) {
  max-width: 52ch;
  font-size: 17px;
}

.kt-main .wb-type-kicker {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.kt-info .kt-meta {
  margin-top: 10px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}

.kt-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.kt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--color-brand);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.kt-btn--main {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.kt-btn--ghost {
  border-color: var(--color-border);
  color: var(--color-text);
}

.kt-btn--ghost span {
  color: var(--color-text-muted);
  font-weight: 500;
}

.kt-btn:hover,
.kt-btn:focus-visible {
  border-color: var(--color-brand);
}

.kt-btn--main:hover,
.kt-btn--main:focus-visible {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.kt-main .kt-btn {
  padding: 13px 22px;
  font-size: 16px;
}

.kt-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kt-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

.kt-item .kt-btns {
  margin-top: 12px;
}

.kt-item .kt-btn {
  padding: 8px 12px;
  font-size: 14px;
}

.kt-item .kt-btn svg {
  width: 16px;
  height: 16px;
}

.kt-tip {
  margin: 14px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .kt-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .kt-main {
    grid-template-columns: 1fr;
  }

  .kt-cover--main {
    max-width: 240px;
  }

  .kt-item {
    grid-template-columns: 90px 1fr;
  }
}

/* Tlač v2: úvod bez fotky – čistá oranžová, vpravo mriežka našich plochých
   ilustrácií na bielych dlaždiciach; kartičky s ilustráciou namiesto fotky */
.tl-hero {
  background: var(--color-brand);
}

.tl-hero .wb-hero-title .tl-hero-quiet {
  font-weight: 300;
  opacity: 0.92;
}

.tl-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-hero-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px 12px;
  border-radius: 18px;
  background: var(--color-surface);
}

.tl-hero-grid svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 130px;
}

.tl-hero-grid span {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.tl-card-ill {
  display: grid;
  place-items: center;
}

.tl-card-ill svg {
  width: 62%;
  height: auto;
  transition: transform 0.3s ease;
}

.tl-card > a:hover .tl-card-ill svg {
  transform: scale(1.06) rotate(-2deg);
}

@media (max-width: 1000px) {
  .tl-hero {
    padding-bottom: clamp(28px, 5vw, 48px);
  }
}

@media (max-width: 480px) {
  .tl-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tl-hero .wb-hero-title {
  font-size: clamp(32px, 3.9vw, 58px);
}

.tl-hero .wb-hero-title span {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .tl-hero .wb-hero-title span {
    white-space: normal;
  }
}

/* ===== Podstránka Na stiahnutie (/na-stiahnutie) – UX: zoznam riadkov,
   filter, jasné akcie Otvoriť / Stiahnuť, rozsah a veľkosť vždy viditeľné ===== */
.dl-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(24px, 3vw, 36px) 0;
  padding: 0;
  list-style: none;
}

.dl-how li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--color-surface-alt);
  font-size: 15px;
  line-height: 1.35;
}

.dl-how strong {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
}

.dl-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.dl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.dl-chip span {
  color: var(--color-text-muted);
  font-weight: 500;
}

.dl-chip.is-active {
  border-color: #141414;
  background: #141414;
  color: var(--color-on-brand);
}

.dl-chip.is-active span {
  color: rgba(255, 255, 255, 0.6);
}

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

.dl-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 16px 24px;
  padding: 16px 20px 16px 16px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  transition: border-color 0.2s ease;
}

.dl-row:hover {
  border-color: var(--color-brand);
}

.dl-row[hidden] {
  display: none;
}

.dl-row--main {
  border-color: var(--color-brand);
  background: var(--color-surface-alt);
}

.dl-cover {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: #141414;
}

.dl-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dl-cat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dl-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: #141414;
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.dl-badge--main {
  background: var(--color-brand);
}

.dl-info h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  line-height: 1.25;
}

.dl-desc {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.45;
}

.dl-meta {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}

.dl-actions {
  display: flex;
  gap: 8px;
}

.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.dl-btn:hover,
.dl-btn:focus-visible {
  border-color: var(--color-brand);
}

.dl-btn--main {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.dl-btn--main:hover,
.dl-btn--main:focus-visible {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.dl-tip {
  margin: 16px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

@media (max-width: 800px) {
  .dl-how {
    grid-template-columns: 1fr;
  }

  .dl-row {
    grid-template-columns: 80px 1fr;
    padding: 14px;
  }

  .dl-actions {
    grid-column: 1 / -1;
  }

  .dl-actions .dl-btn {
    flex: 1;
    justify-content: center;
  }
}

.kt-all {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
}

.kt-all a {
  color: var(--color-brand);
  text-decoration: none;
}

/* Tlač: rozbaľovacia tabuľka „Ďalšie možnosti tlače a výroby“ */
.tl-more {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

.tl-more summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.tl-more summary::-webkit-details-marker {
  display: none;
}

.tl-more summary span {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 14px;
}

.tl-more summary::after {
  content: "+";
  margin-left: auto;
  color: var(--color-brand);
  font-size: 26px;
  line-height: 0.8;
  transition: transform 0.2s ease;
}

.tl-more[open] summary::after {
  transform: rotate(45deg);
}

.tl-more-table {
  width: calc(100% - 44px);
  margin: 0 22px;
  border-collapse: collapse;
  font-size: 15px;
}

.tl-more-table th,
.tl-more-table td {
  padding: 11px 12px 11px 0;
  border-top: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.tl-more-table thead th {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  border-top: 0;
}

.tl-more-table tbody th {
  width: 38%;
  font-family: var(--font-display);
  font-weight: 600;
}

.tl-more-table td {
  color: var(--color-text-muted);
}

.tl-more-note {
  margin: 0;
  padding: 16px 22px 20px;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* Tlač: billboardy – špeciálna ponuka pre okres Vranov n. T. */
.tl-card-img {
  position: relative;
}

.tl-card-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.tl-bill {
  margin: 18px 0 0;
}

/* ---------- Billboardy Vranov (/billboardy-vranov) ---------- */
.bb-hero-ill {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
}

.bb-hero-ill svg {
  display: block;
  width: 100%;
  height: auto;
}

.bb-hero-badge {
  position: absolute;
  top: 4%;
  right: 2%;
  display: grid;
  place-items: center;
  width: clamp(84px, 9vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-on-brand);
  font-size: 14px;
  line-height: 1.1;
  text-align: center;
  transform: rotate(-8deg);
}

.bb-hero-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
}

.bb-places {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-places li {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 18px;
  background: var(--color-surface-alt);
}

.bb-ico {
  display: block;
  margin-bottom: 18px;
}

.bb-places h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
}

.bb-places p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.bb-big {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 48px;
  padding: clamp(28px, 4vw, 56px);
  border: 2px solid var(--color-brand);
  border-radius: 24px;
}

.bb-big-kicker {
  margin: 0 0 12px;
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-big-title {
  max-width: 20ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.bb-big-text {
  max-width: 56ch;
  margin: 16px 0 0;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.55;
}

.bb-big-btn {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
  white-space: nowrap;
}

.bb-big-btn:hover,
.bb-big-btn:focus-visible {
  border-color: var(--color-brand-hover);
  background: var(--color-brand-hover);
}

.bb-type {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.bb-type legend {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

.bb-type-opt {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border: 2px solid var(--color-border);
  border-radius: 14px;
  cursor: pointer;
}

.bb-type-opt input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-brand);
}

.bb-type-opt strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
}

.bb-type-opt em {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-style: normal;
}

.bb-type-opt:has(input:checked) {
  border-color: var(--color-brand);
}

.bb-type-opt:has(input:focus-visible) {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

@media (max-width: 1000px) {
  .bb-places {
    grid-template-columns: 1fr;
  }

  .bb-big {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .bb-big-btn {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .bb-hero-ill {
    width: min(100%, 320px);
  }

  .bb-type {
    grid-template-columns: 1fr;
  }

  .bb-big-btn {
    justify-self: stretch;
    justify-content: center;
    white-space: normal;
  }
}

.wb-hero.bb-hero {
  background: var(--color-brand);
}

/* dočasná ilustrácia v čiernom závere – nahradiť reálnym mockupom billboardu */
.bb-final-ill {
  width: min(100%, 380px);
  margin: clamp(24px, 4vw, 56px) 0;
}

.bb-final-ill svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1000px) {
  .bb-final-ill {
    width: min(70%, 280px);
    margin: 24px 0;
  }
}

@media (min-width: 1001px) {
  .bb-final .kar-final-copy {
    grid-template-rows: auto auto 1fr auto;
  }

  .bb-final .bb-final-ill {
    grid-row: 3;
    align-self: center;
  }

  .bb-final .kar-gdpr {
    grid-row: 4;
  }
}

/* Služby: karty 3 v rade (Web, E-shop, Reklama & tlač / Obsah & kampane + 2 ďalšie) */
.sv-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 56px;
}

.service-tile img.sv-tile-cover {
  object-fit: cover;
  object-position: 38% center;
}

@media (max-width: 1000px) {
  .sv-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 48px;
  }
}

@media (max-width: 700px) {
  .sv-cols {
    grid-template-columns: 1fr;
  }
}

/* E-shopy: „Ako to robíme“ – ilustrácia + text + mini proces, striedavo */
.es-how-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px clamp(32px, 5vw, 80px);
  margin-top: clamp(32px, 4vw, 56px);
}

.es-how-row--flip .es-how-ill {
  order: 2;
}

.es-how-ill {
  padding: clamp(20px, 3vw, 40px);
  border-radius: 24px;
  background: var(--color-surface-alt);
}

.es-how-ill svg {
  display: block;
  width: 100%;
  height: auto;
}

.es-how-kicker {
  margin: 0 0 10px;
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.es-how-copy h3 {
  max-width: 22ch;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.es-how-copy > p {
  max-width: 52ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.55;
}

.es-how-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: esh;
}

.es-how-steps li {
  position: relative;
  padding: 12px 14px 12px 46px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.4;
  counter-increment: esh;
}

.es-how-steps li::before {
  content: counter(esh, decimal-leading-zero);
  position: absolute;
  top: 12px;
  left: 14px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 600;
}

.es-how-steps strong {
  display: block;
  color: var(--color-text);
  font-size: 15px;
}

.es-how-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.es-how-tags li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-on-brand);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 1000px) {
  .es-how-row {
    grid-template-columns: 1fr;
  }

  .es-how-row--flip .es-how-ill {
    order: 0;
  }
}

@media (max-width: 520px) {
  .es-how-steps {
    grid-template-columns: 1fr;
  }
}

.es-hero-fig figcaption strong {
  white-space: nowrap;
}

.wb-hero .sm-hero-img {
  max-width: 400px;
  border-radius: 18px;
}

.sv-cols {
  row-gap: 18px;
}

.sm-feed-box {
  min-height: 320px;
}

.sm-feed-box + .sm-feed-box {
  margin-top: clamp(40px, 5vw, 64px);
}

.wb-work img.zn-work-tall {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%;
}

/* Úvod: banner Externé marketingové oddelenie – oranžový obrys, biely vnútrajšok */
.page-home .em-banner {
  border: 0;
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.page-home .em-banner-text strong {
  color: var(--color-brand);
}

.page-home .em-banner-text span {
  color: var(--color-text-muted);
}

.page-home .em-banner-btn {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.page-home .em-banner-btn:hover,
.page-home .em-banner-btn:focus-visible {
  background: var(--color-brand-hover);
}

/* Newsletter v2 (26. 10. 2026): vycentrovaný obsah, vľavo čo dostanú, vpravo sada + formulár */
.nl-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: center;
  gap: 32px clamp(40px, 6vw, 96px);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.nl-get-title {
  margin: 28px 0 12px;
  color: var(--color-brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nl-get {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nl-get li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--nl-line);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.nl-get-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.nl-get-more {
  margin: 14px 0 0;
  color: var(--nl-muted);
  font-size: 15px;
}

.nl-side {
  padding: clamp(18px, 2vw, 24px);
  border-radius: 24px;
  background: var(--color-surface);
  color: var(--color-text);
}

.nl-sada {
  display: block;
  width: 100%;
  height: auto;
  margin: -6px 0 12px;
}

.nl-side .nl-input {
  border: 1px solid var(--color-border);
}

.nl-side .nl-note {
  color: var(--color-text-muted);
}

.nl-side .nl-note a {
  color: var(--color-text);
}

.nl-side .nl-thanks strong {
  color: var(--color-text);
}

.nl-side .nl-thanks span {
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .nl-inner {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 480px) {
  .nl-get {
    grid-template-columns: 1fr;
  }
}

/* Galéria 3 × 2 so štvorcovými fotkami (článok Felix) */
.art-gallery--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.art-gallery--3 .art-gallery-item img {
  aspect-ratio: 1;
}

@media (max-width: 700px) {
  .art-gallery--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Zdieľanie článku – obyčajné odkazy, bez skriptov sietí a cookies */
.art-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  max-width: 970px;
  margin: clamp(32px, 4vw, 48px) auto;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
}

.art-share-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}

.art-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.art-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.art-share-btn:hover,
.art-share-btn:focus-visible {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.art-share-native {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.art-share-native:hover,
.art-share-native:focus-visible {
  background: var(--color-brand-hover);
  color: var(--color-on-brand);
}

.art-share-btn.is-done {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

@media (max-width: 700px) {
  .art-share {
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* Dvojica fotiek v texte článku (deň / noc) */
.art-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.art-pair-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
}

/* Fotky na výšku v texte článku: orez 4:3 alebo užší stĺpec */
.art-body .art-figure--crop img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.art-body .art-figure--narrow {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.art-gallery--45 .art-gallery-item img {
  aspect-ratio: 4 / 5;
}

.art-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: var(--color-text);
}

/* Bridge v3 (26. 10. 2026): obsah vycentrovaný v rozumnej šírke – na veľkých
   monitoroch sa už neroztiahne cez celé okno a pravý blok nepreteká. */
@media (min-width: 1001px) {
  .page-home .bridge-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 3vw, 40px);
    padding-right: clamp(20px, 3vw, 40px);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px clamp(40px, 5vw, 88px);
    align-items: center;
  }

  .page-home .bridge-statement {
    justify-content: center;
    padding: 0;
  }

  .page-home .bridge-devices-slot {
    max-width: 500px;
  }

  .page-home .bridge-proof {
    margin-left: 0;
    width: auto;
    min-width: 0;
  }
}

.faq-answer a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Náhľad živého webu klienta v článku (iframe v ráme prehliadača) */
.art-site {
  margin: 40px 0;
}

.art-site-kicker {
  margin: 0 0 6px;
  color: var(--color-brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.art-body .art-site-title {
  margin: 0 0 18px;
}

.art-site-frame {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
}

.art-site-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.art-site-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}

.art-site-bar em {
  margin-left: 10px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-style: normal;
}

.art-site-frame iframe {
  display: block;
  width: 100%;
  height: clamp(420px, 60vw, 600px);
  border: 0;
}

.art-site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--color-brand);
  font-weight: 600;
}

/* Úzky banner v texte článku: vždy v bloku (stĺpec textu je úzky) */
.art-body .art-em {
  flex-direction: column;
  align-items: flex-start;
  margin: 32px 0;
  padding: 22px 24px;
  border-radius: 20px;
}

.art-body .art-em .em-banner-btn {
  text-decoration: none;
}

/* Video na výšku (reel) v článku – užšie, vycentrované */
.art-body .art-video--dp {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.art-video--dp video {
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* Video na výšku v karte s textom (článok Dobré Percento) */
.art-body .art-video-card {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 24px clamp(24px, 4vw, 40px);
  margin: 36px 0;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 24px;
  background: var(--color-surface-alt);
}

.art-video-card-media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
  background: var(--color-text);
}

.art-body .art-video-card-copy {
  display: grid;
  gap: 10px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.art-video-card-kicker {
  color: var(--color-brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.art-video-card-copy strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.15;
}

.art-video-card-copy em {
  font-size: 13px;
  font-style: normal;
}

@media (max-width: 640px) {
  .art-body .art-video-card {
    grid-template-columns: 1fr;
  }

  .art-video-card-media {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Listovateľný leták (Publuu) v článku */
.art-flip iframe {
  display: block;
  width: 100%;
  height: clamp(380px, 52vw, 520px);
  border: 0;
  border-radius: 14px;
  background: var(--color-surface-alt);
}

/* Titulka článku ako dvojica fotiek (deň / noc) */
.art-cover--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.art-cover--pair img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.art-cover--pair img {
  aspect-ratio: 1;
}

.art-pair-grid--sq img {
  aspect-ratio: 1;
}

/* iframe vykreslený na 1440 px a zmenšený (clanok.js) */
.art-site-mock {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  border-radius: 14px;
}

[data-site-frame] {
  position: relative;
}

[data-site-frame] iframe {
  height: var(--site-h, 450px);
  transform-origin: 0 0;
}

[data-site-frame]::after {
  content: "";
  display: block;
  height: var(--site-h, 450px);
}

[data-site-frame] iframe {
  position: absolute;
  top: 41px;
  left: 0;
}

/* Hero: jemná oranžová žiara za mockupom (26. 10. 2026, želanie majiteľa).
   Dve mäkké elipsy v značkovej oranžovej s veľmi nízkou sýtosťou – teplé svetlo,
   nie „AI“ mesh gradient. Vypnúť = zmazať tento blok. */
.hero-deck {
  position: relative;
  isolation: isolate;
}

.hero-deck::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: min(100%, 860px);
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 46% 58% at 76% 42%, rgb(240 70 3 / 0.11), rgb(240 70 3 / 0) 70%),
    radial-gradient(ellipse 34% 40% at 8% 4%, rgb(240 70 3 / 0.05), rgb(240 70 3 / 0) 70%);
  pointer-events: none;
}

@media (max-width: 1000px) {
  .hero-deck::before {
    height: min(100%, 900px);
    background:
      radial-gradient(ellipse 80% 34% at 50% 44%, rgb(240 70 3 / 0.10), rgb(240 70 3 / 0) 72%);
  }
}

/* ---- Náhľady výraznejšieho pozadia hero (len cez ?hero=grid / ?hero=band) ---- */
/* A) Mriežka ako technický výkres (Linear / Vercel): jemné linky, ktoré sa
      strácajú do bielej, pod nimi oranžová žiara. */
.hero-v-grid .hero-deck::before {
  background:
    radial-gradient(ellipse 46% 58% at 76% 42%, rgb(240 70 3 / 0.13), rgb(240 70 3 / 0) 70%),
    linear-gradient(to right, var(--color-border) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 35%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 70% at 60% 35%, #000 30%, transparent 78%);
}

/* B) Šikmý pás (Stripe): plná značková oranžová v pravej časti, mockup leží
      na ňom. Bez priehľadnosti, jedna farba – silný, nie „AI“ dojem. */
.hero-v-band .hero-deck::before {
  height: min(100%, 720px);
  background: var(--color-brand);
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 74% 100%);
}

@media (max-width: 1000px) {
  /* mobil: pás by šiel pod tlačidlá – ostáva jemná žiara */
  .hero-v-band .hero-deck::before {
    height: min(100%, 900px);
    clip-path: none;
    background: radial-gradient(ellipse 80% 34% at 50% 44%, rgb(240 70 3 / 0.12), rgb(240 70 3 / 0) 72%);
  }
}

/* C) Prepracovaný gradient so zrnom (?hero=grain): teplé svetlo z pravého
      horného rohu, ktoré sa láme do krémovej, a jemné papierové zrno ako
      pri tlači – vďaka zrnu to nepôsobí ako digitálny „AI“ prechod. */
.hero-v-grain .hero-deck::before {
  height: min(100%, 860px);
  background:
    radial-gradient(ellipse 38% 48% at 84% 18%, rgb(240 70 3 / 0.28), rgb(240 70 3 / 0) 72%),
    radial-gradient(ellipse 60% 70% at 72% 46%, rgb(240 70 3 / 0.12), rgb(240 70 3 / 0) 70%),
    conic-gradient(from 210deg at 78% 30%, rgb(244 242 239 / 0.0), rgb(244 242 239 / 0.9) 25%, rgb(244 242 239 / 0) 55%),
    linear-gradient(180deg, rgb(244 242 239 / 0.0) 70%, #fff 100%);
}

.hero-v-grain .hero-deck::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: min(100%, 860px);
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.08 0 0 0 0 0.08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.22;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 35%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 80% at 75% 35%, #000 20%, transparent 80%);
  pointer-events: none;
}

@media (max-width: 1000px) {
  .hero-v-grain .hero-deck::before,
  .hero-v-grain .hero-deck::after {
    height: min(100%, 900px);
  }

  .hero-v-grain .hero-deck::before {
    background:
      radial-gradient(ellipse 70% 30% at 70% 30%, rgb(240 70 3 / 0.24), rgb(240 70 3 / 0) 72%),
      radial-gradient(ellipse 90% 40% at 50% 45%, rgb(240 70 3 / 0.10), rgb(240 70 3 / 0) 72%);
  }
}

/* D) Svetelná stuha (?hero=ribbon): naša S-krivka zo značky ako mäkký pruh
      svetla za mockupom. Tvar = maska zo stuhy, výplň = prechod oranžová →
      broskyňová → krémová, rozmazaný a pomaly sa prelieva. Gradient, ktorý
      má len onvyo – vychádza z loga. */
.hero-v-ribbon .hero-deck::before {
  background: radial-gradient(ellipse 50% 60% at 75% 40%, rgb(240 70 3 / 0.08), rgb(240 70 3 / 0) 70%);
}

.hero-v-ribbon .hero-deck::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40px;
  right: max(-6vw, calc((100vw - 1440px) / -2));
  width: min(52vw, 760px);
  aspect-ratio: 916 / 925;
  background:
    linear-gradient(125deg, #f04603 0%, #ff7a2f 30%, #ffb07a 55%, #f4f2ef 80%, #f04603 100%);
  background-size: 260% 260%;
  -webkit-mask: url("img/paterny/stuha-30-stupnov-mobil.svg") center / contain no-repeat;
  mask: url("img/paterny/stuha-30-stupnov-mobil.svg") center / contain no-repeat;
  filter: blur(26px) saturate(1.1);
  opacity: 0.55;
  transform: rotate(-8deg);
  animation: hero-ribbon-flow 16s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hero-ribbon-flow {
  from { background-position: 0% 30%; }
  to { background-position: 100% 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v-ribbon .hero-deck::after { animation: none; }
}

@media (max-width: 1000px) {
  .hero-v-ribbon .hero-deck::after {
    top: clamp(170px, 34vw, 340px);
    right: -24vw;
    width: min(110vw, 760px);
    opacity: 0.45;
  }
}

@media (min-width: 1001px) and (max-width: 1279px) {
  .hero-v-ribbon .hero-deck::after {
    top: 40px;
    right: -12vw;
    width: 42vw;
  }
}

/* Mobil: mockup v hero o niečo menší (26. 10. 2026, majiteľ) */
@media (max-width: 1000px) {
  .hero-visual {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Gradient so zrnom v2 (26. 10. 2026, majiteľ): vľavo čisto biela,
   vpravo oranžové svetlo, ktoré jemne prechádza do teplej sivej. */
.hero-v-grain .hero-deck::before {
  background:
    radial-gradient(ellipse 34% 52% at 88% 26%, rgb(240 70 3 / 0.26), rgb(240 70 3 / 0) 72%),
    radial-gradient(ellipse 40% 60% at 74% 52%, rgb(240 70 3 / 0.10), rgb(240 70 3 / 0) 70%),
    linear-gradient(90deg, #fff 0%, #fff 44%, var(--color-surface-alt) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

.hero-v-grain .hero-deck::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 80%), linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 40%, #000 80%), linear-gradient(180deg, #000 70%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 1000px) {
  .hero-v-grain .hero-deck::before {
    background:
      radial-gradient(ellipse 70% 30% at 85% 30%, rgb(240 70 3 / 0.22), rgb(240 70 3 / 0) 72%),
      linear-gradient(100deg, #fff 0%, #fff 40%, var(--color-surface-alt) 100%);
  }
}

/* Dôverujú nám v2 (26. 10. 2026): jeden väčší pás, 35 log, poradie od menej
   známych po najznámejšie, rozbehne sa až keď je sekcia na obrazovke. Logá
   sú už pripravené biele (img/loga/stream/), bez CSS filtra. */
.bridge-marquee--one .bridge-marquee-track {
  animation-play-state: paused;
}

.bridge-marquee--one.is-running .bridge-marquee-track {
  animation-play-state: running;
}

.bridge-marquee--one.is-running:hover .bridge-marquee-track {
  animation-play-state: paused;
}

.bridge .bridge-marquee--one .bridge-marquee-track li {
  height: 96px;
  padding-right: 64px;
}

.bridge .bridge-marquee--one .bridge-marquee-track img {
  height: var(--h, 40px);
  filter: none;
}

@media (max-width: 700px) {
  .bridge .bridge-marquee--one .bridge-marquee-track li {
    height: 68px;
    padding-right: 40px;
  }

  .bridge .bridge-marquee--one .bridge-marquee-track img {
    height: calc(var(--h, 40px) * 0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bridge-marquee--one .bridge-marquee-track {
    flex-wrap: wrap;
    width: auto;
    animation: none;
  }
}

/* Odkaz pod pásom log + stránka /klienti */
.bridge-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--color-on-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.kl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.kl-grid li {
  display: grid;
  place-items: center;
  height: 130px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
}

/* biele logá z pásu → tmavé na bielej (logá v šedej, hover čierna) */
.kl-grid img {
  width: auto;
  max-width: 100%;
  height: calc(var(--h, 40px) * 0.9);
  object-fit: contain;
  filter: brightness(0) opacity(0.55);
  transition: filter 150ms linear;
}

.kl-grid li:hover img {
  filter: brightness(0) opacity(0.9);
}

.kl-more {
  margin: 24px 0 0;
}

.kl-more a {
  color: var(--color-brand);
  font-weight: 600;
}

@media (max-width: 520px) {
  .kl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kl-grid li {
    height: 104px;
    padding: 14px;
  }
}

/* Bridge v4: vzdušnejší pravý blok, odkaz na klientov v hlavičke skupiny */
.bridge-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.bridge-group-head .bridge-kicker {
  margin: 0;
}

.bridge .bridge-all {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
}

.bridge .bridge-marquee--one {
  margin-top: 10px;
}

@media (min-width: 1001px) {
  .page-home .bridge .bridge-proof .bridge-title--proof {
    margin-bottom: clamp(40px, 4vw, 64px);
  }

  .page-home .bridge .bridge-proof .bridge-partners-group {
    margin-top: clamp(36px, 3.6vw, 56px);
    padding-top: clamp(28px, 2.8vw, 40px);
  }
}

/* Gradient so zrnom v3 (majiteľ: „udržať svetlé“): žiadne stmavnutie –
   koniec prechodu takmer biely, oranžová jemnejšia, zrno slabšie. */
.hero-v-grain .hero-deck::before {
  background:
    radial-gradient(ellipse 34% 52% at 88% 26%, rgb(240 70 3 / 0.16), rgb(240 70 3 / 0) 72%),
    radial-gradient(ellipse 40% 60% at 74% 52%, rgb(240 70 3 / 0.06), rgb(240 70 3 / 0) 70%),
    linear-gradient(90deg, #fff 0%, #fff 50%, color-mix(in srgb, var(--color-surface-alt) 45%, #fff) 100%);
}

.hero-v-grain .hero-deck::after {
  opacity: 0.1;
}

@media (max-width: 1000px) {
  .hero-v-grain .hero-deck::before {
    background:
      radial-gradient(ellipse 70% 30% at 85% 30%, rgb(240 70 3 / 0.14), rgb(240 70 3 / 0) 72%),
      linear-gradient(100deg, #fff 0%, #fff 50%, color-mix(in srgb, var(--color-surface-alt) 45%, #fff) 100%);
  }
}

/* Úvod: banner Externé marketingové oddelenie – asymetrické rohy
   (ostré vľavo hore a vpravo dole, oblé v ostatných), tlačidlo rovnako */
.page-home .em-banner {
  border-radius: 4px 32px 4px 32px;
}

.page-home .em-banner-btn {
  border-radius: 2px 18px 2px 18px;
}

/* E) Čistá oranžová žiara za mockupom (?hero=glow, predvolené od 27. 10. 2026):
      len odtiene značkovej oranžovej, bez zrna a bez sivej, výraznejšia. */
.hero-v-glow .hero-deck::before {
  height: min(100%, 860px);
  background:
    radial-gradient(ellipse 30% 40% at 84% 44%, rgb(240 70 3 / 0.24), rgb(240 70 3 / 0) 70%),
    radial-gradient(ellipse 50% 64% at 88% 42%, rgb(255 140 70 / 0.14), rgb(255 140 70 / 0) 72%);
}

@media (max-width: 1000px) {
  .hero-v-glow .hero-deck::before {
    height: min(100%, 900px);
    background:
      radial-gradient(ellipse 55% 22% at 66% 38%, rgb(240 70 3 / 0.22), rgb(240 70 3 / 0) 72%),
      radial-gradient(ellipse 90% 34% at 70% 38%, rgb(255 140 70 / 0.12), rgb(255 140 70 / 0) 74%);
  }
}

/* Žiara v hero v2 (27. 10. 2026, majiteľ: „veľmi svetlá“): len značková
   oranžová #F04603, výraznejšia v strede, mäkký okraj. */
.hero-v-glow .hero-deck::before {
  background:
    radial-gradient(ellipse 28% 38% at 84% 44%, rgb(240 70 3 / 0.40), rgb(240 70 3 / 0) 70%),
    radial-gradient(ellipse 48% 62% at 86% 42%, rgb(240 70 3 / 0.16), rgb(240 70 3 / 0) 74%);
}

@media (max-width: 1000px) {
  .hero-v-glow .hero-deck::before {
    background:
      radial-gradient(ellipse 55% 22% at 66% 38%, rgb(240 70 3 / 0.34), rgb(240 70 3 / 0) 72%),
      radial-gradient(ellipse 90% 34% at 70% 38%, rgb(240 70 3 / 0.14), rgb(240 70 3 / 0) 74%);
  }
}

/* Žiara v hero v3 (27. 10. 2026): namiesto „škvrny“ plynulý prechod cez celú
   výšku hero – vľavo biela, doprava pribúda značková oranžová. */
.hero-v-glow .hero-deck::before {
  background:
    linear-gradient(100deg, rgb(240 70 3 / 0) 42%, rgb(240 70 3 / 0.10) 62%, rgb(240 70 3 / 0.26) 82%, rgb(240 70 3 / 0.36) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

@media (max-width: 1000px) {
  .hero-v-glow .hero-deck::before {
    background:
      linear-gradient(160deg, rgb(240 70 3 / 0) 30%, rgb(240 70 3 / 0.14) 55%, rgb(240 70 3 / 0.26) 75%, rgb(240 70 3 / 0) 100%);
  }
}

/* Proces v2: dve osi – vľavo hlas + kanály, vpravo kroky v jednom ritme.
   03 je záves (oranžové číslo + pás), nie ďalší rovnaký stĺpec. */
.proces--v2 {
  padding: clamp(72px, 9vw, 140px) 0;
}

.pv2-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 40px);
}

.pv2-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: start;
}

.pv2-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.pv2-intro .proces-title {
  margin: 0;
}

.pv2-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv2-tools li {
  display: flex;
  align-items: center;
  line-height: 0;
}

.pv2-tools img {
  display: block;
  height: 26px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.pv2-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: none;
}

.pv2-cta svg {
  transition: transform 0.2s ease;
}

.pv2-cta:hover svg,
.pv2-cta:focus-visible svg {
  transform: translateX(3px);
}

.pv2-steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv2-steps li {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  margin: 0;
  padding: 26px 0;
  border-top: 1px solid var(--color-border);
}

.pv2-steps li:first-child {
  padding-top: 0;
  border-top: 0;
}

.pv2-steps li:last-child {
  padding-bottom: 0;
}

.pv2-num {
  grid-column: 1;
  grid-row: 1;
  display: block;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.pv2-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.pv2-copy h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pv2-copy p {
  margin: 0;
  max-width: 38ch;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.55;
}

.pv2-key {
  align-items: center;
  margin: 8px -12px 8px -20px;
  padding: 28px 28px 28px 20px;
  border-top: 0;
  border-radius: 18px;
  background: var(--color-brand);
}

.pv2-key + li {
  border-top: 0;
}

.pv2-key .pv2-num {
  color: #fff;
  font-weight: 500;
}

.pv2-key .pv2-copy h3 {
  color: var(--color-text);
}

.pv2-key .pv2-copy p {
  color: var(--color-text);
}

.pv2-key-label {
  margin: 0 0 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

@media (max-width: 1000px) {
  .pv2-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pv2-intro {
    gap: 20px;
  }

  .pv2-key {
    margin-left: 0;
    margin-right: 0;
    padding-left: 18px;
  }
}

@media (max-width: 600px) {
  .pv2-steps li {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 14px;
    padding: 22px 0;
  }

  .pv2-num {
    font-size: 28px;
  }

  .pv2-copy p {
    max-width: none;
  }
}

/* Hero bez gradientu (27. 10. 2026) – namiesto neho plávajúce UI kartičky
   okolo mockupu: schválenie návrhu, nový dopyt, priebeh zákazky. */
.hero-v-none .hero-deck::before,
.hero-v-none .hero-deck::after {
  content: none;
}

.hero-visual {
  position: relative;
}

.hf {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 18px 40px -18px rgb(20 20 20 / 0.28);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.3;
  pointer-events: none;
  animation: hf-float 7s ease-in-out infinite alternate;
}

.hf p {
  margin: 0;
}

.hf strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
}

.hf span:not(.hf-ico):not(.hf-avatar) {
  color: var(--color-text-muted);
  font-size: 13px;
}

.hf-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgb(240 70 3 / 0.1);
  color: var(--color-brand);
}

.hf-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-brand);
}

.hf-avatar img {
  width: 26px;
  height: auto;
}

/* rozmiestnenie okolo mockupu */
.hf--chat {
  top: 2%;
  left: -6%;
  animation-delay: -1s;
}

.hf--chat p {
  font-size: 15px;
}

.hf--lead {
  bottom: 14%;
  left: -10%;
  animation-delay: -3s;
}

.hf--flow {
  top: 28%;
  right: -4%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 10px 14px;
  animation-delay: -5s;
}

.hf-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
}

.hf-step + .hf-step::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 15px;
  width: 2px;
  height: 12px;
  background: rgb(240 70 3 / 0.35);
}

.hf-step .hf-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.hf-step:last-child .hf-ico {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

@keyframes hf-float {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hf { animation: none; }
}

@media (max-width: 1000px) {
  .hf {
    font-size: 12px;
    padding: 8px 12px;
    gap: 8px;
  }

  .hf--chat {
    top: -4%;
    left: -4%;
  }

  .hf--chat p {
    font-size: 12px;
  }

  .hf-avatar {
    width: 32px;
    height: 32px;
  }

  .hf-avatar img {
    width: 20px;
  }

  .hf--lead {
    bottom: 4%;
    left: -4%;
  }

  .hf--flow {
    display: none;
  }

  .hf-ico {
    width: 26px;
    height: 26px;
  }
}

/* Hero kompozícia Klima Elite: na mobile na plnú šírku (obsahuje text kariet) */
@media (max-width: 1000px) {
  .hero-visual {
    max-width: 520px;
  }
}

/* Hero: viac vzduchu (27. 10. 2026, majiteľ) – úvodná obrazovka patrí hero,
   karusel kariet je vidieť len okrajom (~90 px) pri spodnom okraji. */
@media (min-width: 1001px) {
  .page-home .hero-split {
    min-height: calc(100svh - 101px - 90px);
    padding-top: clamp(40px, 4vw, 72px);
    padding-bottom: clamp(40px, 4vw, 72px);
    align-items: center;
    box-sizing: border-box;
  }

  .page-home .hero-visual {
    max-width: 680px;
  }
}

/* Hero v3: bez prázdneho pásu pod navigáciou – obsah vyplní výšku,
   obrázok väčší, horný odstup menší */
@media (min-width: 1001px) {
  .page-home .hero-split {
    padding-top: clamp(24px, 2.4vw, 40px);
    padding-bottom: clamp(24px, 2.4vw, 40px);
  }

  .page-home .hero-visual {
    max-width: min(820px, calc((100svh - 101px - 90px - 48px) * 1.25));
  }
}

/* Hero v4: obsah hneď pod navigáciou (žiadny prázdny pás nad ním),
   voľné miesto je až medzi hero a karuselom. */
@media (min-width: 1001px) {
  .page-home .hero-split {
    align-items: center;
    align-content: start;
    padding-top: clamp(40px, 4vw, 64px);
  }
}

/* Hero v5: väčší obrázok vyplní výšku, aby pod hero neostal prázdny pás */
@media (min-width: 1001px) {
  .page-home .hero-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-home .hero-visual {
    max-width: none;
    width: 100%;
    justify-self: end;
  }

  .page-home .hero-visual img {
    max-height: calc(100svh - 101px - 90px - 96px);
    width: auto;
    max-width: 100%;
    margin-left: auto;
  }
}

/* Hero v6 (27. 10. 2026): textový stĺpec širší, Google odznak v rade s logami,
   obrázok posunutý doprava k okraju obsahu. */
@media (min-width: 1001px) {
  .page-home .hero-split {
    grid-template-columns: minmax(560px, 1fr) minmax(0, 1fr);
  }

  .page-home .hero-copy {
    max-width: 600px;
    margin-left: 0;
  }

  .page-home .hero-copy .hero-proof {
    flex-wrap: nowrap;
  }

  .page-home .hero-visual {
    justify-self: end;
    margin-right: clamp(-48px, -2vw, -16px);
  }
}

/* Hero v7 – kompozícia na PC (27. 10. 2026). Jedna škála odvodená od
   nadpisu: H1 ≈ 4,4 × text, podnadpis 1,4 ×, CTA 56 px; blok textu aj obrázok
   sú zvislo vycentrované v hero, obrázok je dominanta a siaha k okraju. */
@media (min-width: 1001px) {
  .page-home .hero-split {
    grid-template-columns: clamp(500px, 35.5vw, 600px) minmax(0, 1fr);
    column-gap: clamp(24px, 2.2vw, 48px);
    align-items: center;
    align-content: center;
    padding-top: clamp(24px, 3vh, 48px);
    padding-bottom: clamp(24px, 3vh, 48px);
  }

  .page-home .hero-copy {
    max-width: none;
  }

  .page-home .hero-kicker {
    font-size: clamp(52px, 3.95vw, 66px);
    white-space: nowrap;
    line-height: 1;
    margin: 0;
  }

  .page-home .hero-sub {
    margin: clamp(18px, 1.6vw, 28px) 0 0;
    font-size: clamp(19px, 1.5vw, 26px);
    line-height: 1.35;
    color: var(--color-text-muted);
  }

  .page-home .hero-sub strong {
    font-weight: 500;
    color: var(--color-text);
  }

  .page-home .hero-kicker-cta {
    margin-top: clamp(28px, 2.6vw, 44px);
    gap: 12px;
  }

  .page-home .hero-kicker-btn {
    min-height: 56px;
    padding: 0 30px;
    font-size: 17px;
  }

  .page-home .hero-copy .hero-proof {
    margin-top: clamp(36px, 3.4vw, 60px);
    padding-top: 0;
    align-items: center;
  }

  .page-home .hero-visual {
    margin-right: clamp(-64px, -4vw, -24px);
  }

  .page-home .hero-visual img {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: calc(100svh - 101px - 90px - 48px);
    object-fit: contain;
  }
}

@media (min-width: 1600px) {
  .page-home .hero-split {
    max-width: 1520px;
  }
}

/* Hero v7b: podnadpis a CTA na stred pod nadpisom, CTA menšie, podnadpis tlmený */
@media (min-width: 1001px) {
  .page-home .hero-copy {
    justify-self: start;
    width: max-content;
  }

  .page-home .hero-sub {
    text-align: center;
  }

  .page-home .hero-sub strong {
    font-weight: 400;
    color: var(--color-text-muted);
  }

  .page-home .hero-kicker-cta {
    justify-content: center;
  }

  .page-home .hero-kicker-btn {
    min-height: 50px;
    padding: 0 24px;
    font-size: 16px;
  }
}

@media (min-width: 1001px) {
  .page-home .hero-copy .hero-proof {
    justify-content: center;
  }
}

@media (min-width: 1001px) {
  .page-home .hero-copy .hero-sub {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-items: center;
  }
}

/* Hero v7c: dôkazy (logá + Google odznak) menšie, stred na osi nadpisu */
@media (min-width: 1001px) {
  .page-home .hero-copy .hero-proof {
    scale: 0.8;
    transform-origin: center top;
    margin-bottom: -26px;
  }
}

/* Hero v8 (27. 10. 2026): v rozložení text | obrázok jedna ľavá os.
   Centrovaný blok vedľa obrázka mal tri rôzne ľavé okraje (nadpis,
   podnadpis, tlačidlá) a pôsobil, že pláva. Teraz: všetko od jednej línie,
   väčší nadpis, kompaktný rad dôkazov. */
@media (min-width: 1001px) {
  .page-home .hero-split {
    grid-template-columns: clamp(540px, 40vw, 680px) minmax(0, 1fr);
  }

  .page-home .hero-copy {
    width: auto;
  }

  .page-home .hero-kicker {
    font-size: clamp(56px, 4.5vw, 78px);
  }

  .page-home .hero-copy .hero-sub {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    margin-top: clamp(16px, 1.4vw, 24px);
    font-size: clamp(19px, 1.45vw, 24px);
  }

  .page-home .hero-kicker-cta {
    justify-content: flex-start;
    margin-top: clamp(28px, 2.4vw, 40px);
  }

  .page-home .hero-copy .hero-proof {
    justify-content: flex-start;
    gap: 16px 24px;
    scale: 0.85;
    transform-origin: left top;
    margin-top: clamp(40px, 3.6vw, 60px);
    margin-bottom: -20px;
  }

  .page-home .hero-copy .hero-proof-reviews {
    min-width: 160px;
    padding-left: 24px;
    justify-content: flex-start;
  }
}

/* Hero – obrázok po vrstvách a animácia v poradí príbehu (27. 10. 2026):
   1. text (už existuje), 2. telefóny vyjdú zdola, 3. karty v poradí
   nájdu vás na Google → prídu na web (GA live) → pošlú dopyt (+20 %).
   Každá karta vychádza spoza telefónu smerom von, potom jemne dýcha.
   Pri prefers-reduced-motion všetko stojí. */
.hv {
  position: relative;
  width: 100%;
  aspect-ratio: 2020 / 1520;
  margin-left: auto;
}

.hv-layer {
  position: absolute;
  height: auto;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.hv-phones {
  z-index: 2;
  animation: hv-rise 1.1s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hv-card {
  z-index: 3;
  animation:
    hv-pop 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
    hv-float 7s ease-in-out infinite alternate;
}

.hv-card--3 {
  z-index: 1;
}

.hv-card--1 { --hv-x: 28px; --hv-y: 6px; animation-delay: 0.95s, 1.9s; }
.hv-card--2 { --hv-x: -28px; --hv-y: 10px; animation-delay: 1.25s, 2.4s; }
.hv-card--3 { --hv-x: -36px; --hv-y: -6px; animation-delay: 1.55s, 2.9s; }

@keyframes hv-rise {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes hv-pop {
  from { opacity: 0; translate: var(--hv-x) var(--hv-y); scale: 0.94; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes hv-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -6px, 0); }
}

@media (min-width: 1001px) {
  .page-home .hero-visual .hv {
    width: min(100%, calc((100svh - 101px - 90px - 48px) * 2020 / 1520));
  }
}

@media (max-width: 1000px) {
  .page-home .hero-visual .hv {
    max-width: 520px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hv-phones,
  .hv-card {
    animation: none;
  }
}

/* Horná navigácia – 3 rozbaľovacie panely (27. 10. 2026, navdrop.js).
   Tlačidlo vyzerá ako ostatné položky lišty (ikona nad textom) + šípka.
   Panel: vľavo zoznam s ikonkou v dlaždici a jednou vetou, vpravo náhľad
   (mockup / obálka) s odkazom. Pod 1280 px lišta nie je – rieši to veľké menu. */
.site-cats .nd {
  position: static;
  display: flex;
}

.site-cats .nd-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
}

.site-cats .nd-btn .site-cat-ico {
  display: flex;
  transition: transform 0.25s ease;
}

.site-cats .nd-btn .site-cat-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.nd-chev {
  color: var(--color-text-muted);
  transition: transform 0.25s ease, color 0.2s ease;
}

.site-cats .nd-btn:hover,
.site-cats .nd-btn:focus-visible,
.site-cats .nd.is-open .nd-btn {
  color: var(--color-brand);
}

.site-cats .nd-btn:hover .site-cat-ico,
.site-cats .nd.is-open .nd-btn .site-cat-ico {
  transform: translateY(-2px);
}

.site-cats .nd.is-open .nd-chev {
  transform: rotate(180deg);
  color: var(--color-brand);
}

.nd-panel {
  position: fixed;
  left: 50%;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  width: min(940px, calc(100vw - 48px));
  margin-top: 10px;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: 0 30px 80px -30px rgb(20 20 20 / 0.28);
  opacity: 0;
  translate: -50% -8px;
  transition: opacity 0.22s ease, translate 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* most nad medzerou medzi lištou a panelom, aby myš panel „nestratila“ */
.nd-panel::before {
  content: "";
  position: absolute;
  inset: -12px 0 auto;
  height: 12px;
}

.nd.is-open .nd-panel {
  opacity: 1;
  translate: -50% 0;
}

.nd-title {
  margin: 0 0 14px 12px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nd-list ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-cats .nd-panel a.nd-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  color: var(--color-text);
  text-align: left;
  white-space: normal;
  transition: background-color 0.18s ease;
}

.nd-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-surface-alt);
  color: var(--color-brand);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.nd-txt {
  display: grid;
  gap: 2px;
}

.site-cats .nd-txt strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.site-cats .nd-txt > span {
  color: var(--color-text-muted);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.3;
}

.site-cats .nd-panel a.nd-item:hover,
.site-cats .nd-panel a.nd-item:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.site-cats .nd-panel a.nd-item:hover .nd-ico,
.site-cats .nd-panel a.nd-item:focus-visible .nd-ico {
  background: var(--color-brand);
  color: #fff;
}

.site-cats .nd-panel a.nd-media {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-align: left;
  white-space: normal;
}

.nd-media-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.nd-media-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.nd-media--cover .nd-media-img {
  display: grid;
  place-items: center;
  padding: 18px 0 0;
}

.nd-media--cover .nd-media-img img {
  width: auto;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 16px 30px -14px rgb(20 20 20 / 0.45);
  rotate: -3deg;
}

.nd-media-cap {
  display: grid;
  gap: 2px;
  padding: 16px 18px 4px;
}

.site-cats .nd-media-cap strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.site-cats .nd-media-cap > span {
  color: var(--color-text-muted);
  font-size: 13.5px;
  font-weight: 400;
}

.site-cats .nd-media-more {
  margin-top: auto;
  padding: 10px 18px 18px;
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 600;
}

.site-cats .nd-panel a.nd-media:hover .nd-media-img img {
  scale: 1.04;
}

@media (prefers-reduced-motion: reduce) {
  .nd-panel,
  .nd-chev,
  .nd-media-img img {
    transition: none;
  }
}

.nd-media--cover .nd-media-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 6px;
}

.nd-media--cover .nd-media-img img {
  width: 46%;
  height: auto;
}

/* závoj pod hlavičkou, kým je otvorený panel navigácie */
.nd-scrim {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgb(255 255 255 / 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s 0.25s;
}

.is-nd-open .nd-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .nd-scrim { transition: none; }
}

/* prepnutie medzi panelmi bez animácie (navdrop.js) */
.nd.is-instant .nd-panel {
  transition: none;
}

/* medzera medzi hlavičkou a panelom je „most“, aby sa panel nezatváral */
.nd-panel::before {
  inset: -14px 0 auto;
  height: 14px;
}

/* skrytý panel nesmie zaberať miesto ani chytať myš (display: grid by inak prebil [hidden]) */
.nd-panel[hidden] {
  display: none;
}

/* bez „gumového“ prescrollovania nad začiatok stránky (macOS/iOS) –
   pri lepkavej hlavičke pôsobilo, že sa dá ísť ešte vyššie */
html,
body {
  overscroll-behavior-y: none;
}

/* Hlavička na PC (27. 10. 2026, majiteľ): navigácia vľavo, logo presne
   v strede okna, Menu a kontakty vpravo. */
@media (min-width: 1281px) {
  .site-top-bar {
    position: relative;
  }

  .site-top-bar .site-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }

  .site-top-bar .site-cats {
    order: 1;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 6px 28px;
  }

  .site-top-bar .site-burger {
    margin-left: auto;
  }
}

/* Lišta len textom (27. 10. 2026, majiteľ podľa referencie): slová vedľa seba,
   pri rozbaľovacích položkách oranžová šípka, ikonky až v paneloch. */
.site-cats--text {
  gap: 6px 34px;
}

.site-cats--text .nd-btn,
.site-cats--text a.nd-link {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.site-cats--text .nd-chev {
  color: var(--color-brand);
}

.site-cats--text .nd-btn:hover,
.site-cats--text .nd-btn:focus-visible,
.site-cats--text .nd.is-open .nd-btn,
.site-cats--text a.nd-link:hover,
.site-cats--text a.nd-link:focus-visible {
  color: var(--color-brand);
}

/* naše ploché ikonky v paneli – farebné samy osebe, dlaždica len jemný podklad */
.nd-ico svg {
  display: block;
  width: 28px;
  height: 28px;
}

.site-cats .nd-panel a.nd-item:hover .nd-ico,
.site-cats .nd-panel a.nd-item:focus-visible .nd-ico {
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-brand);
}

.site-cats .nd-panel a.nd-item:hover strong,
.site-cats .nd-panel a.nd-item:focus-visible strong {
  color: var(--color-brand);
}

/* lišta vľavo nesmie naraziť na logo v strede */
.site-cats--text {
  gap: 6px 26px;
}

.site-cats--text .nd-btn,
.site-cats--text a.nd-link {
  font-size: 16px;
}

@media (min-width: 1281px) and (max-width: 1439px) {
  .site-cats--text {
    gap: 6px 18px;
  }
}

@media (min-width: 1700px) {
  .site-cats--text {
    gap: 6px 34px;
  }

  .site-cats--text .nd-btn,
  .site-cats--text a.nd-link {
    font-size: 17px;
  }
}

/* 1281–1439 px: „Kontakt“ v lište vynechaný (telefón a e-mail sú hneď vpravo), aby sa lišta nedotkla loga */
@media (min-width: 1281px) and (max-width: 1439px) {
  .site-cats--text a.nd-link[href="/#kontakt"] {
    display: none;
  }
}

/* Hlavička v3 (27. 10. 2026, majiteľ: so stredovým logom „nesymetrické“):
   logo späť vľavo, hneď za ním textová lišta, Menu a kontakty vpravo. */
@media (min-width: 1281px) {
  .site-top-bar .site-logo {
    position: static;
    translate: none;
  }

  .site-top-bar .site-cats {
    margin-left: clamp(32px, 3.4vw, 64px);
  }
}

@media (min-width: 1281px) and (max-width: 1439px) {
  .site-cats--text a.nd-link[href="/#kontakt"] {
    display: inline-flex;
  }
}

/* Pravá strana hlavičky v2 (27. 10. 2026): v jednom rade a v jazyku textovej
   lišty – telefón s ikonkou, primárne tlačidlo „Nezáväzná ponuka“, Menu
   (ikonka + slovo vedľa seba). E-mail je v Menu a pätičke. */
@media (min-width: 1281px) {
  .site-top-bar .site-top-side {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
    padding-left: 0;
    border-left: 0;
  }

  .site-top-bar .site-top-side .site-mail {
    display: none;
  }

  .site-top-bar .site-tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease;
  }

  .site-top-bar .site-tel svg {
    color: var(--color-brand);
  }

  .site-top-bar .site-tel:hover,
  .site-top-bar .site-tel:focus-visible {
    color: var(--color-brand);
  }

  .site-top-bar .site-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease;
  }

  .site-top-bar .site-cta:hover,
  .site-top-bar .site-cta:focus-visible {
    background: var(--color-brand-hover);
  }

  .site-top-bar .site-burger {
    order: 5;
    margin-left: 22px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
  }

  .site-top-bar .site-burger-label {
    font-size: 16px;
  }
}

@media (min-width: 1281px) {
  .site-top-bar .site-top-side {
    flex-direction: row;
  }

  .site-top-bar .site-burger {
    display: inline-flex;
  }
}

/* 1281–1439 px: telefón len ako ikonka (číslo je v Menu a pätičke), inak by sa rad dotkol lišty */
@media (min-width: 1281px) and (max-width: 1439px) {
  .site-top-bar .site-tel span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-top-bar .site-tel svg {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 1281px) {
  .site-top-bar .site-burger .site-burger-ico {
    width: 20px;
    min-width: 0;
    height: 20px;
  }

  .site-top-bar .site-burger .site-burger-label {
    justify-items: start;
  }
}

/* bez tlačidla v hlavičke: 1281–1439 px sa už telefón zmestí aj s číslom */
@media (min-width: 1281px) and (max-width: 1439px) {
  .site-top-bar .site-tel span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* vpravo: Menu | telefón (27. 10. 2026) */
@media (min-width: 1281px) {
  .site-top-bar .site-burger {
    order: 3;
    margin-left: auto;
  }

  .site-top-bar .site-top-side {
    order: 4;
    margin-left: 22px;
    padding-left: 22px;
    border-left: 1px solid var(--color-border);
    min-height: 28px;
  }
}

/* Digitál: priehľadný mockup notebook + mobil (pôvodne v hero) celý, nie orezaný */
.nd-media--mockup .nd-media-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px 0;
}

.nd-media--mockup .nd-media-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* SKÚŠKA (27. 10. 2026, majiteľ): modrý rámček náhľadov v paneloch navigácie
   namiesto sivého – výnimka z „modrá sa nepoužíva“, len na skúšku. Vrátiť = zmazať tento blok. */
.site-cats .nd-panel a.nd-media {
  background: linear-gradient(180deg, #2fa4ff 0%, #1a6ff2 100%); /* sýta modrá ako ikonka App Store */
  box-shadow: none;
  color: #fff;
}

.site-cats .nd-panel a.nd-media .nd-media-cap strong,
.site-cats .nd-panel a.nd-media .nd-media-more {
  color: #fff;
}

.site-cats .nd-panel a.nd-media .nd-media-cap > span {
  color: rgb(255 255 255 / 0.8);
}

/* ikonky v paneloch navigácie bez dlaždice (27. 10. 2026, majiteľ) */
.nd-ico,
.site-cats .nd-panel a.nd-item:hover .nd-ico,
.site-cats .nd-panel a.nd-item:focus-visible .nd-ico {
  width: 32px;
  height: 32px;
  background: none;
  box-shadow: none;
}

.nd-ico svg {
  width: 30px;
  height: 30px;
  transition: transform 0.2s ease;
}

.site-cats .nd-panel a.nd-item:hover .nd-ico svg {
  transform: translateY(-2px);
}

/* ===== Sekundárny akcent – modrá (27. 10. 2026, rozhodnutie majiteľa) =====
   Sýta modrá ako ikonka App Store. Len na okrajové / doplnkové prvky alebo
   na zámernú „anomáliu“, ktorá má vyskočiť. Oranžová ostáva hlavná farba
   (primárne CTA, zvýraznené slová, značka). Nikdy modrá a oranžová v jednom prvku. */
:root {
  --color-accent: #1a6ff2;
  --color-accent-hover: #155fd4;
  --color-accent-soft: #e8f0fe;
  --accent-gradient: linear-gradient(180deg, #2fa4ff 0%, #1a6ff2 100%);
}

/* sekundárne tlačidlo „Nezáväzná cenová ponuka“ (hero) */
.hero-kicker-btn--outline,
.page-home .hero-kicker-btn--outline {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.hero-kicker-btn--outline:hover,
.hero-kicker-btn--outline:focus-visible,
.page-home .hero-kicker-btn--outline:hover,
.page-home .hero-kicker-btn--outline:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

/* telefón v hlavičke – drobná anomália */
@media (min-width: 1281px) {
  .site-top-bar .site-tel svg {
    color: var(--color-accent);
  }

  .site-top-bar .site-tel:hover,
  .site-top-bar .site-tel:focus-visible {
    color: var(--color-accent);
  }
}

/* banner Externé marketingové oddelenie na úvode */
.page-home .em-banner {
  box-shadow: inset 0 0 0 2px var(--color-accent);
  background: var(--color-surface);
}

.page-home .em-banner-text strong {
  color: var(--color-accent);
}

.page-home .em-banner-btn {
  background: var(--color-accent);
  color: #fff;
}

.page-home .em-banner-btn:hover,
.page-home .em-banner-btn:focus-visible {
  background: var(--color-accent-hover);
}

/* náhľady v paneloch navigácie používajú ten istý token */
.site-cats .nd-panel a.nd-media {
  background: var(--accent-gradient);
}

/* 27. 10. 2026 (majiteľ): modrá na telefóne a na sekundárnom CTA v hero nesedí.
   Telefón späť oranžový, „Nezáväzná cenová ponuka“ jemne sivá. */
@media (min-width: 1281px) {
  .site-top-bar .site-tel svg {
    color: var(--color-brand);
  }

  .site-top-bar .site-tel:hover,
  .site-top-bar .site-tel:focus-visible {
    color: var(--color-brand);
  }
}

.hero-kicker-btn--outline,
.page-home .hero-kicker-btn--outline {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.hero-kicker-btn--outline:hover,
.hero-kicker-btn--outline:focus-visible,
.page-home .hero-kicker-btn--outline:hover,
.page-home .hero-kicker-btn--outline:focus-visible {
  border-color: var(--color-surface-alt);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* Proces v3 (27. 10. 2026, majiteľ: „dať celú dokopy“). Jeden systém:
   vľavo nadpis (každý hlas na jednom riadku), nástroje a tiché CTA – drží sa
   pri čítaní; vpravo 4 kroky ako rovnaké riadky s linkou. Krok 03 len jemne
   vyzdvihnutý (alt plocha, oranžové číslo a štítok), žiadny oranžový blok. */
.proces--v2 {
  padding: clamp(72px, 8vw, 128px) 0;
}

.proces--v2 .pv2-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.proces--v2 .pv2-intro {
  position: sticky;
  top: 140px;
  display: grid;
  gap: 28px;
  justify-items: start;
}

.proces--v2 .proces-title {
  margin: 0;
}

.proces--v2 .proces-title .vy-title-you,
.proces--v2 .proces-title .vy-title-us {
  display: block;
  white-space: nowrap;
}

.proces--v2 .pv2-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proces--v2 .pv2-tools img {
  display: block;
  width: auto;
  height: 22px;
  opacity: 0.85;
}

.proces--v2 .pv2-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.proces--v2 .pv2-cta svg {
  color: var(--color-brand);
}

.proces--v2 .pv2-cta:hover,
.proces--v2 .pv2-cta:focus-visible {
  border-color: var(--color-surface-alt);
  background: var(--color-surface-alt);
}

.proces--v2 .pv2-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.proces--v2 .pv2-steps > li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  margin: 0;
  padding: 30px 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  color: var(--color-text);
}

.proces--v2 .pv2-num {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: clamp(32px, 2.6vw, 44px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}

.proces--v2 .pv2-copy h3 {
  margin: 0 0 8px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.proces--v2 .pv2-copy p {
  max-width: 52ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 16.5px;
  line-height: 1.55;
}

/* krok 03 – jemne vyzdvihnutý */
.proces--v2 .pv2-steps > li.pv2-key {
  margin: -1px -24px 0;
  padding: 30px 24px;
  border-bottom-color: transparent;
  border-radius: 20px;
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.proces--v2 .pv2-key .pv2-num {
  color: var(--color-brand);
  font-weight: 500;
}

.proces--v2 .pv2-key .pv2-copy h3 {
  color: var(--color-text);
}

.proces--v2 .pv2-key .pv2-copy p {
  color: var(--color-text-muted);
}

.proces--v2 .pv2-key .pv2-key-label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1000px) {
  .proces--v2 .pv2-layout {
    grid-template-columns: 1fr;
  }

  .proces--v2 .pv2-intro {
    position: static;
  }
}

@media (max-width: 600px) {
  .proces--v2 .pv2-steps > li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 24px 0;
  }

  .proces--v2 .pv2-steps > li.pv2-key {
    margin: -1px -16px 0;
    padding: 24px 16px;
  }

  .proces--v2 .proces-title .vy-title-you,
  .proces--v2 .proces-title .vy-title-us {
    white-space: normal;
  }
}

.proces--v2 .pv2-intro {
  gap: 0;
}

.proces--v2 .pv2-tools {
  margin-top: clamp(28px, 2.4vw, 40px);
}

.proces--v2 .pv2-tools::before {
  content: "Aj online cez";
  flex-basis: 100%;
  margin-bottom: -6px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.proces--v2 .pv2-cta {
  margin-top: 28px;
}

/* veľké menu: „Na stiahnutie“ len modrým textom (sekundárny akcent) */
.mega-more a[href="/na-stiahnutie"] {
  color: var(--color-accent);
}

.mega-more a[href="/na-stiahnutie"]:hover,
.mega-more a[href="/na-stiahnutie"]:focus-visible {
  color: var(--color-accent-hover);
}

/* Menu ↔ Zavrieť: ikonky aj slová v jednej bunke (krížik nesmie liezť na text) */
@media (min-width: 1281px) {
  .site-top-bar .site-burger .site-burger-ico,
  .site-top-bar .site-burger .site-burger-label {
    display: grid;
    place-items: center start;
  }

  .site-top-bar .site-burger .site-burger-ico > span,
  .site-top-bar .site-burger .site-burger-label > span {
    grid-area: 1 / 1;
    display: flex;
  }
}

/* /klienti: namiesto úvodného odseku Google recenzie (widget z pätičky) */
.kl-reviews {
  min-width: 200px;
  min-height: 130px;
}

/* Bridge: mockup viac doľava, väčší vzduch k obsahu (27. 10. 2026, majiteľ) */
@media (min-width: 1001px) {
  .bridge .bridge-devices {
    translate: clamp(-90px, -5vw, -32px) 0;
  }
}

/* ===== Proces v4 – stohované karty (27. 10. 2026, majiteľ) =====
   4 karty na plnú šírku obsahu, každá sa pri vrchu zastaví (position: sticky)
   a ďalšia sa cez ňu prisunie – stránka sa scrolluje normálne, nič sa neunáša.
   Farby stúpajú ku kroku 03: 01 teplá sivá → 02 modrá (sekundárny akcent,
   „návrh“) → 03 oranžová (vrchol, značka) → 04 čierna (záver + CTA).
   Vpravo v každej karte UI prvky v štýle hero (biele karty s tieňom). */
.pv3 {
  width: min(1240px, calc(100% - 2 * var(--gutter, 24px)));
  margin: 0 auto;
  padding: clamp(72px, 8vw, 120px) 0 clamp(40px, 5vw, 80px);
}

.pv3-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.pv3-head .vy-title {
  margin: 0;
}

.pv3-head .vy-title-you,
.pv3-head .vy-title-us {
  display: block;
  white-space: nowrap;
}

.pv3-lead {
  max-width: 36ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.5;
}

.pv3-stack {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv3-card {
  position: sticky;
  top: calc(118px + var(--i, 0) * 14px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: min(520px, calc(100svh - 180px));
  padding: clamp(28px, 4vw, 64px);
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 -18px 40px -30px rgb(20 20 20 / 0.35);
}

.pv3-card--1 { --i: 0; background: var(--color-surface-alt); color: var(--color-text); }
.pv3-card--2 { --i: 1; background: var(--accent-gradient); color: #fff; }
.pv3-card--3 { --i: 2; background: var(--color-brand); color: #fff; }
.pv3-card--4 { --i: 3; background: #141414; color: #fff; }

.pv3-num {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 96px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
  opacity: 0.9;
}

.pv3-card--1 .pv3-num { color: var(--color-brand); }

.pv3-copy h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.pv3-copy p {
  max-width: 40ch;
  margin: 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  opacity: 0.86;
}

.pv3-card--1 .pv3-copy p { color: var(--color-text-muted); opacity: 1; }

.pv3-key {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pv3-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  margin-top: 28px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.pv3-cta:hover,
.pv3-cta:focus-visible { background: var(--color-brand-hover); }

/* ---- UI prvky vpravo (ako karty v hero) ---- */
.pv3-ui {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.pv3-chip,
.pv3-variant,
.pv3-approve,
.pv3-track {
  border-radius: 20px;
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 24px 50px -24px rgb(20 20 20 / 0.35);
}

.pv3-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  font-size: 15px;
}

.pv3-chip b,
.pv3-variant b,
.pv3-approve b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
}

.pv3-chip small,
.pv3-variant small,
.pv3-approve small {
  color: var(--color-text-muted);
  font-size: 13px;
}

.pv3-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-surface-alt);
  color: var(--color-brand);
}

.pv3-ico--ok { border-radius: 50%; background: #22b35e; color: #fff; }

/* 01 */
.pv3-chip--meet { justify-self: start; translate: 8% 0; }
.pv3-chip--tools { flex-direction: column; align-items: start; gap: 10px; padding: 18px 22px; }
.pv3-logos { display: flex; align-items: center; gap: 18px; }
.pv3-logos img { display: block; width: auto; height: 24px; }
.pv3-chip--pin { justify-self: end; translate: -6% 0; }

/* 02 */
.pv3-card--2 .pv3-ui { grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; align-items: start; }
.pv3-variant { display: grid; gap: 10px; padding: 22px; }
.pv3-variant i { display: block; height: 8px; border-radius: 4px; background: var(--color-surface-alt); }
.pv3-variant i + i { width: 70%; }
.pv3-variant--b { translate: 0 28px; }
.pv3-tag {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
}

/* 03 */
.pv3-approve { width: min(100%, 380px); padding: 20px; }
.pv3-approve-head { display: flex; align-items: center; gap: 12px; }
.pv3-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-brand); }
.pv3-avatar img { width: 24px; height: auto; }
.pv3-approve-prev { display: grid; gap: 8px; margin: 16px 0; padding: 18px; border-radius: 14px; background: var(--color-surface-alt); }
.pv3-approve-prev i { display: block; height: 10px; border-radius: 5px; background: #fff; }
.pv3-approve-prev i:first-child { height: 46px; background: rgb(240 70 3 / 0.18); }
.pv3-approve-prev i:last-child { width: 60%; }
.pv3-approve-btns { display: flex; justify-content: end; gap: 10px; }
.pv3-btn-ghost,
.pv3-btn-ok { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.pv3-btn-ghost { box-shadow: inset 0 0 0 1px var(--color-border); }
.pv3-btn-ok { background: #22b35e; color: #fff; }
.pv3-chip--ok { justify-self: end; translate: 0 -8px; }

/* 04 */
.pv3-track { display: grid; gap: 4px; width: min(100%, 340px); padding: 18px 22px; }
.pv3-track p { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 0; font-weight: 600; }
.pv3-track p + p { border-top: 1px solid var(--color-border); }
.pv3-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.pv3-dot--done { background: #22b35e; color: #fff; }
.pv3-dot--now { background: var(--color-brand); box-shadow: 0 0 0 6px rgb(240 70 3 / 0.18); }

@media (max-width: 900px) {
  .pv3-card {
    top: calc(76px + var(--i, 0) * 10px);
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 24px;
  }

  .pv3-ui { justify-items: stretch; }
  .pv3-chip--meet,
  .pv3-chip--pin,
  .pv3-chip--ok { translate: none; justify-self: stretch; }
  .pv3-card--2 .pv3-ui { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv3-variant--b { translate: 0 16px; }
  .pv3-logos { gap: 12px; }
  .pv3-logos img { height: 20px; }
  .pv3-head .vy-title-you,
  .pv3-head .vy-title-us { white-space: normal; }
}

@media (max-width: 600px) {
  .pv3-card--1 .pv3-chip--pin,
  .pv3-card--3 .pv3-chip--ok { display: none; }
}

/* Newsletter v3 – dotiahnutie (27. 10. 2026): čierna plocha ako zaoblená karta
   v šírke obsahu (rovnaký jazyk ako karty procesu), väčší nadpis, vzdušnejšie
   dlaždice „Čo dostanete“, na karte s formulárom štítok „Sada zdarma“. */
.nl {
  width: min(1240px, calc(100% - 2 * var(--gutter, 24px)));
  margin: clamp(24px, 3vw, 48px) auto;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 5vw, 80px);
  border-radius: 32px;
}

.nl .nl-inner {
  max-width: none;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.nl .nl-title {
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.02;
}

.nl .nl-title .vy-title-you,
.nl .nl-title .vy-title-us {
  display: block;
  white-space: nowrap;
}

.nl .nl-lead {
  max-width: 44ch;
  margin-top: 18px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
}

.nl .nl-get-title {
  margin-top: clamp(28px, 2.6vw, 40px);
}

.nl .nl-get {
  gap: 10px;
}

.nl .nl-get li {
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.06);
}

.nl .nl-side {
  position: relative;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 24px;
}

.nl .nl-side::before {
  content: "Sada zdarma";
  position: absolute;
  top: -14px;
  left: 28px;
  z-index: 1;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px -10px rgb(240 70 3 / 0.6);
}

.nl .nl-sada {
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .nl {
    border-radius: 24px;
  }

  .nl .nl-title .vy-title-you,
  .nl .nl-title .vy-title-us {
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .nl {
    padding: 40px 20px;
  }

  .nl .nl-title {
    font-size: 34px;
  }

  .nl .nl-side {
    padding: 22px 18px;
  }
}

/* Newsletter v4 (27. 10. 2026, majiteľ: „naopak“): pozadie zase na celú šírku,
   obsah široký (1240 px), menej textu vľavo, karta s e-mailom širšia. */
.nl {
  width: auto;
  margin: 0;
  padding: clamp(64px, 7vw, 104px) var(--gutter, 24px);
  border-radius: 0;
}

.nl .nl-inner {
  width: min(1240px, 100%);
  max-width: 1240px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.nl .nl-get-more {
  display: none;
}

.nl .nl-side {
  width: 100%;
  max-width: none;
}

.nl .nl-sada {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
}

.nl .nl-row {
  width: 100%;
}

.nl .nl-input {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 900px) {
  .nl {
    padding: 56px var(--gutter, 20px);
    border-radius: 0;
  }

  .nl .nl-inner {
    grid-template-columns: 1fr;
  }
}

/* Newsletter v4b: pozadie istota až po okraje okna (bez presvitajúcej bielej
   čiarky vpravo), biela karta širšia a ďalej od textu */
.nl {
  box-shadow: 0 0 0 100vmax #141414;
  clip-path: inset(0 -100vmax);
}

@media (min-width: 901px) {
  .nl .nl-inner {
    grid-template-columns: minmax(0, 4.4fr) minmax(0, 6.6fr);
    column-gap: clamp(56px, 7vw, 120px);
  }
}

/* Kontakt: karta s formulárom rovnako vysoká ako text vľavo, vzdušnejšia
   (len vzhľad – polia a funkcia formulára bez zmeny) */
@media (min-width: 1001px) {
  .page-home .kontakt .kontakt-card-wrap {
    display: flex;
  }

  .page-home .kontakt .kontakt-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding: clamp(32px, 3vw, 48px);
  }

  .page-home .kontakt .contact-form {
    flex: 1 1 auto;
    row-gap: 12px;
    align-content: start;
    margin-top: 8px;
  }

  .page-home .kontakt .contact-form textarea {
    min-height: 180px;
  }

  .page-home .kontakt .contact-form button[type="submit"] {
    margin-top: 6px;
  }

  .page-home .kontakt .kontakt-card-note {
    margin-top: auto;
    padding-top: 16px;
  }
}