/* ============================================================
   BADPIECE — service pages (shared layout helpers)
   ------------------------------------------------------------
   Colours, fonts, buttons, panels, the slider and the stickers
   all come from badpiece.webflow.css. This file ONLY adds what
   the service pages need on top of the real design system:
     - scroll-reveal (a robust stand-in for Webflow IX2)
     - the giant two-tone hero
     - a clean slider-slide visual
     - the 7-service list
     - the 6-step process
     - the standards chips
     - a few dark-panel text helpers
   NOTE: in the SPA this stylesheet is linked from index.html, so it loads on
   EVERY route — the homepage included. Service-page rules are keyed off
   .svc-section / .svc-* so they don't touch the homepage; homepage-only tweaks
   live in the "Homepage layout overrides" block at the bottom, scoped to
   .panelcon.
   ============================================================ */

html { scroll-behavior: smooth; }

/* Lenis (weighted smooth scroll) — recommended base styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- language toggle: BADPIECE green sticker, fixed top-right ----------
   One bold label = the language you'd switch to. Black Anton on brand green with
   a hard black outline and a slight tilt; the outline keeps it readable even on
   the green panels, where the fill matches the background. */
.lang-toggle {
  position: fixed;
  top: 22px;
  right: 30px;
  z-index: 70;
  appearance: none;
  cursor: pointer;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--black-950, #00171f);
  background: var(--primary-green, #00ff30);
  border: 2.5px solid var(--black-950, #00171f);
  border-radius: 4px;
  padding: 9px 15px 7px;
  box-shadow: 3px 3px 0 var(--black-950, #00171f);
  transform: rotate(-3deg);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.lang-toggle:hover {
  transform: rotate(0deg) scale(1.06);
  background: #fff;
  box-shadow: 4px 4px 0 var(--black-950, #00171f);
}
.lang-toggle:active { transform: rotate(0deg) scale(.98); box-shadow: 1px 1px 0 var(--black-950, #00171f); }
.lang-toggle:focus-visible { outline: 3px solid var(--violet-primary, #9921a3); outline-offset: 3px; }
@media screen and (max-width: 767px) {
  .lang-toggle { top: 16px; right: 16px; font-size: 1.1rem; padding: 7px 12px 5px; }
}

/* ---------- chat launcher: same green sticker as the language toggle.
   Fixed bottom-right placement is handled by the widget's own container; this
   class only carries the sticker look so the two buttons read as a matched set. */
.chat-launch {
  appearance: none;
  cursor: pointer;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--black-950, #00171f);
  background: var(--primary-green, #00ff30);
  border: 2.5px solid var(--black-950, #00171f);
  border-radius: 4px;
  padding: 9px 15px 7px;
  box-shadow: 3px 3px 0 var(--black-950, #00171f);
  transform: rotate(-3deg);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.chat-launch:hover {
  transform: rotate(0deg) scale(1.06);
  background: #fff;
  box-shadow: 4px 4px 0 var(--black-950, #00171f);
}
.chat-launch:active { transform: rotate(0deg) scale(.98); box-shadow: 1px 1px 0 var(--black-950, #00171f); }
.chat-launch:focus-visible { outline: 3px solid var(--violet-primary, #9921a3); outline-offset: 3px; }
@media screen and (max-width: 767px) {
  .chat-launch { font-size: 1.05rem; padding: 7px 12px 5px; }
}

/* ---------- cookie consent: white sticker card, fixed bottom-left ----------
   Real consent gate for Google Analytics (src/lib/analytics.ts): GA loads
   only after "allow", and "reject" gets the exact same button weight — no
   dark patterns. Same sticker family as the lang toggle and chat launcher:
   hard black outline + offset shadow. Bottom-LEFT so it never collides with
   the chat launcher; on phones it spans the width and sits above it. */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 30px;
  z-index: 80;
  max-width: 420px;
  background: #fff;
  border: 2.5px solid var(--black-950, #00171f);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--black-950, #00171f);
  padding: 18px 20px;
  transform: rotate(-1deg);
}
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner { animation: cookie-banner-in .3s ease both; }
  @keyframes cookie-banner-in { from { opacity: 0; } to { opacity: 1; } }
}
.cookie-banner-text {
  margin: 0 0 12px;
  color: var(--black-950, #00171f);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
}
.cookie-banner-actions { display: flex; gap: 10px; }
.cookie-banner-ok,
.cookie-banner-no {
  appearance: none;
  cursor: pointer;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--black-950, #00171f);
  background: var(--primary-green, #00ff30);
  border: 2.5px solid var(--black-950, #00171f);
  border-radius: 4px;
  padding: 8px 14px 6px;
  box-shadow: 3px 3px 0 var(--black-950, #00171f);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.cookie-banner-no { background: #fff; }
.cookie-banner-ok:hover,
.cookie-banner-no:hover { transform: scale(1.06); box-shadow: 4px 4px 0 var(--black-950, #00171f); }
.cookie-banner-ok:hover { background: #fff; }
.cookie-banner-no:hover { background: var(--primary-green, #00ff30); }
.cookie-banner-ok:active,
.cookie-banner-no:active { transform: scale(.98); box-shadow: 1px 1px 0 var(--black-950, #00171f); }
.cookie-banner-ok:focus-visible,
.cookie-banner-no:focus-visible { outline: 3px solid var(--violet-primary, #9921a3); outline-offset: 3px; }
@media screen and (max-width: 767px) {
  .cookie-banner { left: 16px; right: 16px; bottom: 84px; max-width: none; transform: none; }
}

/* link to the privacy policy inside the banner text */
.cookie-banner-more {
  color: var(--black-950, #00171f);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner-more:hover { color: var(--violet-primary, #9921a3); }

/* footer legal row: privacy policy link + "cookie settings" (reopens the
   consent banner — withdrawing consent has to be as easy as giving it) */
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }
.cookie-settings {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--black-950, #00171f);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .12s ease;
}
.cookie-settings:hover { color: var(--violet-primary, #9921a3); }
.cookie-settings:focus-visible { outline: 3px solid var(--violet-primary, #9921a3); outline-offset: 3px; }

/* ---------- privacy policy page: plain prose, no Webflow runtime ---------- */
.privacy-page { background: #fff; min-height: 100vh; padding: 120px 0 100px; }
.privacy-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--black-950, #00171f);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.privacy-inner p { margin: 0 0 14px; }
.privacy-back {
  display: inline-block;
  margin-bottom: 48px;
  color: var(--black-950, #00171f);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.privacy-back:hover { color: var(--violet-primary, #9921a3); }
.privacy-heading { margin: 0 0 6px; font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1.05; }
.privacy-updated { color: var(--base-color-neutral--neutral, #666); margin-bottom: 32px; }
.privacy-subheading { margin: 40px 0 12px; font-size: 1.6rem; }
@media screen and (max-width: 767px) {
  .privacy-page { padding-top: 90px; }
}

/* ---------- minimal nav: the brand mark, fixed top-left ---------- */
.svc-home {
  position: fixed;
  top: 22px;
  left: 40px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
}
.svc-home img.svc-logo { width: 60px; height: auto; }
/* fade the logo out while scrolling so it never sits on top of moving content */
.svc-home { transition: opacity .28s ease, transform .28s ease; }
html.is-scrolling .svc-home { opacity: 0; transform: translateY(-10px); pointer-events: none; }
/* match the homepage's logo swap: white "B" (logo-secondary) on the dark navy
   panels, navy "B" (logo-primary) on the green/white panels. service-pages.js
   toggles html.logo-light based on the section behind the logo. (display lives
   only on the swap classes so neither rule out-specifies the other.) */
.svc-home .svc-logo--ondark { display: block; }
.svc-home .svc-logo--onlight { display: none; }
html.logo-light .svc-home .svc-logo--ondark { display: none; }
html.logo-light .svc-home .svc-logo--onlight { display: block; }

/* ---------- section rhythm ----------
   The homepage panels are a hard 100vh built around full-bleed imagery.
   The service sections are text-led, so forcing 100vh + vertical centering
   just left big empty bands. Instead: natural height with consistent,
   generous vertical padding. (!important to beat the framework's
   .section.background-color-* padding overrides.) */
.svc-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.svc-inner { width: 100%; }

/* Content-led sections (the 7-service lists, the steps, the "where to start"
   cards) anchor to the top, clear the fixed corner logo, and KEEP the 100vh
   panel feel. The container + rows flex to fill the screen, so a short list (5
   rows) or the 3 cards still occupy ~100vh instead of leaving a dead band — but
   the rows use flex-basis:auto (their own content height) rather than 0, so a
   long list (security: 7 services + chips, longer in Czech) is never crammed:
   it just grows past 100vh and scrolls. The scroll layer stops snapping inside
   any section taller than the viewport. */
.svc-section:has(.svc-list),
.svc-section:has(.svc-steps),
.svc-section:has(.svc-start) {
  justify-content: flex-start;
  padding-top: 7rem !important;
  padding-bottom: 4.5rem !important;
}
.svc-section:has(.svc-list) > .container,
.svc-section:has(.svc-steps) > .container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* The 3 "where to start" cards are always short — centre them so the section
   reads as a deliberate, spacious full screen (desktop only; on tablet/phone
   they stack and the section just flows). */
@media screen and (min-width: 992px) {
  .svc-section:has(.svc-start) { justify-content: center; }
}

/* ---------- hero composition ----------
   Stacked, not side-by-side: the giant heading owns the space, the supporting
   line sits beneath it, then the buttons. Side-by-side left a dead void on the
   right (no imagery to fill it) — stacking removes it and reads as deliberate
   "exaggerated minimalism". */
.svc-section .flex-row.mobile-flex-reverse.mobile-reverse.gap20 {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.svc-section .flex-column.align-right.max-width-small {
  align-items: flex-start;
  max-width: 46rem;
}
.svc-hero-title { letter-spacing: -0.015em; margin-bottom: .25rem; }
.svc-section .flex-column.align-right .paragraph {
  font-size: 1.375rem;
  line-height: 1.5;
}
.svc-hero-hand { display: none; }   /* pointed at nothing in this layout */

/* ---------- text on the navy panels ---------- */
.svc-ondark,
.svc-ondark .heading-style-h1,
.svc-ondark .heading-style-h2,
.svc-ondark .heading-style-h4,
.svc-ondark .heading-style-h5,
.svc-ondark .paragraph,
.svc-ondark h3,
.svc-ondark p { color: #fff; }
.svc-accent { color: var(--primary-green); }
/* on the green panels, green-on-green is invisible — use the violet accent there */
.background-color-primary .svc-accent,
.background-color-secondary .svc-accent { color: var(--violet-primary); }

/* ---------- hero ---------- */
.svc-hero-title span { display: block; }
.svc-lead { max-width: 46rem; margin-top: var(--space-6); }
.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-10);
}
.svc-hero-hand { width: 120px; height: auto; margin-top: var(--space-8); }

/* ---------- section intros ---------- */
.svc-claim { max-width: 20ch; letter-spacing: -0.015em; }
.svc-claim-md { max-width: 26ch; letter-spacing: -0.015em; }
.svc-eyebrow {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--violet-primary);
  font-size: 1.125rem;
  margin: 0 0 var(--space-4);
}
.svc-section-lead { max-width: 42rem; margin-top: var(--space-5); font-size: 1.2rem; line-height: 1.55; }

/* ---------- scroll reveal ----------
   Elements start hidden; Motion (js/animations.js) animates them in on scroll.
   Gated on .w-mod-js so no-JS users just see the content. A fail-safe class
   (.reveal-fallback, added by service-pages.js if Motion never loads) reveals
   everything, so content can never get stuck hidden. */
.w-mod-js [data-reveal] { opacity: 0; will-change: opacity, transform; }
.reveal-fallback [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .w-mod-js [data-reveal] { opacity: 1 !important; transform: none !important; }
}
.svc-noanim [data-reveal] { opacity: 1 !important; transform: none !important; }
html.svc-noanim { scroll-behavior: auto; }

/* ---------- "where most companies start" cards ----------
   The three entry-point services as a clean 3-up grid (replaced the old
   carousel). Self-contained classes — they don't touch the homepage slider. */
.svc-start {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
  width: 100%;
}
.svc-start-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.svc-start-card:hover {
  border-color: var(--violet-primary);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -20px rgba(0, 0, 0, .45);
}
.svc-start-card__title {
  margin: 0;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1.12;             /* room for Czech diacritics (háček / kroužek) */
  letter-spacing: -.01em;
}
.svc-start-card__tagline {
  margin: 0;
  color: var(--violet-primary);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.svc-start-card__desc { margin: .35rem 0 0; font-size: 1rem; line-height: 1.55; }
.svc-start-card__meta { margin-top: auto; padding-top: var(--space-4); font-size: .95rem; line-height: 1.5; }
.svc-start-card__meta strong { color: #0a7b1f; }   /* dark green — readable on white */

/* ---------- the homepage flagship slider ----------
   (These rules are global; the service pages no longer use a slider, so they now
   only style the homepage carousel.) */
.custom-dots {
  flex-wrap: wrap;
  justify-content: center;        /* group the labels, don't sprawl them */
  gap: var(--space-4) var(--space-8);
  margin: var(--space-10) auto 0;         /* space below the section heading */
  max-width: 880px;
}
.slider-2 { margin-top: var(--space-8); }

/* slide title sits BELOW the section heading, never above it
   (the homepage .title2/4/5 are 90px — too big for a sub-section here) */
.slider-2 .word-break {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem) !important;
  line-height: 1.04 !important;
  word-break: normal !important;
}

/* visible controls — the index dots (the homepage styles these inline; we
   replicate so they're not invisible on white) + active label highlight */
.slider-2 .w-slider-nav { position: static; height: auto; margin-top: var(--space-6); }
.w-slider-dot {
  width: 12px; height: 12px; margin: 0 6px;
  background-color: var(--black-950); opacity: .3;
  transition: opacity .2s, background-color .2s;
}
.w-slider-dot.w-active { background-color: var(--violet-primary); opacity: 1; }
.custom-dot { transition: color .2s; }
.custom-dot.w-active { color: var(--violet-primary); }

/* ---------- service / who-we-help list ----------
   Bold editorial rows with hairline rules — NOT a SaaS card grid (the
   homepage has no such grid). Big Anton names carry the section. */
.svc-list {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  margin-top: var(--space-6); width: 100%;
}
.svc-list-item {
  /* flex-basis:auto (not 0) is the key: rows start at their own content height
     and then grow EQUALLY to fill a short section (no dead band) — but a long
     list (7 services + chips, longer in Czech) is never crammed below its
     content; it just grows past 100vh and scrolls. */
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  column-gap: var(--space-14);
  row-gap: var(--space-1);
  align-items: baseline;
  align-content: center;       /* centre content when the row grows */
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(0, 0, 0, .16);
}
.svc-list-item:last-child { border-bottom: 1px solid rgba(0, 0, 0, .16); }
.svc-list-item h3 {
  margin: 0;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 2.7vw, 2.6rem);
  line-height: .98;
  letter-spacing: -.012em;
}
.svc-list-item p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.svc-ondark .svc-list-item { border-color: rgba(255, 255, 255, .22); }

/* ---------- process — oversized numbers, editorial rows ---------- */
.svc-steps {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  margin-top: var(--space-6); width: 100%;
}
.svc-step {
  flex: 1 1 auto;              /* fill when short, grow past 100vh when long */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-10);
  align-items: baseline;
  align-content: center;
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(0, 0, 0, .16);
}
.svc-step:last-child { border-bottom: 1px solid rgba(0, 0, 0, .16); }
.svc-step-num {
  grid-row: 1 / 3;
  align-self: start;
  font-family: Anton, sans-serif;
  font-size: clamp(2.75rem, 4.6vw, 4.5rem);
  line-height: .85;
  color: var(--violet-primary);
}
.svc-step h3 {
  grid-column: 2;
  margin: 0 0 .35rem;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.3vw, 2.15rem);
  line-height: 1;
  letter-spacing: -.012em;
}
.svc-step p { grid-column: 2; margin: 0; font-size: 1.0625rem; line-height: 1.55; max-width: 54ch; }
.svc-ondark .svc-step { border-color: rgba(255, 255, 255, .22); }

/* ---------- standards chips (security page) ---------- */
.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.svc-chip {
  font-family: Poppins, sans-serif;
  font-size: .875rem;
  letter-spacing: .02em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 160px;
  padding: var(--space-2) var(--space-4);
}

/* ---------- differentiation (attitude panel) ---------- */
/* size the stacked lines so they don't wrap to 5 lines + overflow the screen */
.background-color-secondary .heading-style-h1 {
  font-size: clamp(2.75rem, 5.2vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.background-color-secondary .paragraph-3 { font-size: 1.3rem; line-height: 1.55; }

/* ---------- final CTA + sibling routing ---------- */
.svc-cta { align-items: center; text-align: center; gap: var(--space-10) !important; }
/* a bigger, more confident primary button */
.svc-cta > .button.w-button {
  font-size: 1.35rem;
  padding: var(--space-4) var(--space-12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.svc-cta > .button.w-button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--violet-primary); }
/* siblings as bold editorial links with a green underline, not generic pills */
.svc-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-10);
  justify-content: center;
  margin-top: var(--space-2);
}
.svc-siblings .button.is-secondary {
  border: 0;
  border-bottom: 3px solid var(--primary-green);
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 0 0 6px;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  transition: color .15s ease, border-color .15s ease;
}
.svc-siblings .button.is-secondary:hover {
  background: transparent;
  color: var(--primary-green);
  border-bottom-color: #fff;
}

/* ---------- contact form: centred, sensible width ----------
   .div-block-7 is capped at max-width:960 and left-aligned by the framework; the
   form centres WITHIN it, so the whole block reads as left-shifted. Centre the
   block itself, and the form (which already centres inside it) lands centred. */
footer#contact .div-block-7 { max-width: 960px; margin-left: auto; margin-right: auto; }
footer#contact .form-block { width: 100%; max-width: 760px; }

/* ---------- packages / outputs two-column on green panel ---------- */
.svc-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10) var(--space-14);
  margin-top: var(--space-12);
  width: 100%;
}
.svc-col h3 { margin: 0 0 var(--space-2); }
.svc-col p { margin: 0 0 var(--space-1); }
.svc-col ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); }
.svc-col li { margin-bottom: var(--space-1); }

/* ---------- micro-interactions (a little life on hover) ---------- */
.svc-list-item h3, .svc-step h3 { transition: color .2s ease; }
.svc-list-item:hover h3, .svc-step:hover h3 { color: var(--violet-primary); }
.svc-ondark .svc-list-item:hover h3, .svc-ondark .svc-step:hover h3 { color: var(--primary-green); }
.custom-dot { cursor: pointer; }
.custom-dot:hover { color: var(--violet-primary); }
.button.w-button { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.button.w-button:not(.is-secondary):hover { transform: translateY(-2px); }

/* ============================================================
   responsive
   ============================================================ */
@media screen and (max-width: 991px) {
  .svc-cols { grid-template-columns: 1fr 1fr; }
  /* fluid hero — scales with the viewport so it never clips off the right edge */
  .heading-style-h1.font-size-150 { font-size: clamp(32px, 8.5vw, 104px); }
  /* "where to start" cards: stack to one column on tablet/phone */
  .svc-start { grid-template-columns: 1fr; }
}

@media screen and (max-width: 767px) {
  /* on phones, drop the 100vh-screen model — let it flow naturally */
  .svc-section { min-height: 0; justify-content: flex-start; padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
  .svc-list, .svc-steps { display: block; flex: none; }
  .svc-cols { grid-template-columns: 1fr; }
  .svc-list-item { grid-template-columns: 1fr; row-gap: .55rem; padding: 1.3rem 0; }
  .svc-step { column-gap: 1.4rem; }
  /* slide stacking + full-width visual handled by the <=991px rule above */
  .svc-home { top: 16px; left: 18px; }
  .svc-home img.svc-logo { width: 40px; }
  .svc-section .flex-row.mobile-flex-reverse.mobile-reverse.gap20 { align-items: stretch; }
  footer#contact .form-block { max-width: 100%; }
}

/* ============================================================
   Homepage layout overrides
   ------------------------------------------------------------
   This file loads on every route, so these are scoped to .panelcon
   (homepage only). The same sections on the service pages are .svc-section
   and are already handled above.
   ============================================================ */

/* "the good, the bad, the badpiece." panel — it top-aligned its content in a
   100vh section, leaving the bottom half empty. Centre it vertically (the
   service-page version already centres via .svc-section) and give it room. */
.panelcon .section.background-color-secondary.overflow-hidden.panel._100vh {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6vh !important;
  padding-bottom: 6vh !important;
}

/* Hero "light switch" gate — the original Webflow toggle shipped without its CSS,
   so it rendered as a bare control. Rebuilt on-brand: a clear track + knob that
   turns BADPIECE green when on, with a bold "Light it up" label so it reads as an
   action. (Scoped to the homepage intro via #intro / .code-embed.) */
#intro .code-embed .switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  user-select: none;
}
#intro .code-embed .switch input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
#intro .code-embed .slider {
  position: relative;
  flex: none;
  width: 78px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .4);
  transition: background-color .25s ease, border-color .25s ease;
}
#intro .code-embed .slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s ease, background-color .25s ease;
}
#intro .code-embed input:checked + .slider {
  background: var(--primary-green, #00ff30);
  border-color: var(--primary-green, #00ff30);
}
#intro .code-embed input:checked + .slider::before {
  transform: translateY(-50%) translateX(38px);
  background: var(--black-950, #00171f);
}
#intro .code-embed input:focus-visible + .slider {
  outline: 3px solid var(--primary-green, #00ff30);
  outline-offset: 4px;
}
#intro .code-embed .switch-text {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.3rem;
  color: #fff;
  transition: color .2s ease;
}
#intro .code-embed input:checked ~ .switch-text { color: var(--primary-green, #00ff30); }

/* "Light it up" reveal — flipping the hero toggle irises the REAL panels in:
   the panels are clipped to a zero-radius circle at the viewport centre, then
   the circle expands to the edges, so the green "Welcome to the rebelion"
   section bursts out of the navy from the centre. No overlay element; the clip
   is added/removed by home-glue. Centre is 50% wide × 50vh down = viewport
   centre (the panels' top sits at scroll 0 when this runs). */
.panelcon.reveal-iris {
  clip-path: circle(0% at 50% 50vh);
  will-change: clip-path;
}
.panelcon.reveal-iris.reveal-iris-open {
  /* 72vmax just clears the farthest corner for any aspect ratio — bigger than
     that and the screen is covered before the transition ends (the reveal looked
     faster than its duration). */
  clip-path: circle(72vmax at 50% 50vh);
  transition: clip-path 1.6s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .panelcon.reveal-iris { clip-path: none; }
}

/* ============================================================
   reality.badpiece.com — pricing (scoped .rl-*; loaded everywhere
   but only used on the reality landing page)
   ============================================================ */
.rl-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-8);
}
.rl-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 14px;
  background: #fff;
}
.rl-plan--featured {
  border-color: var(--violet-primary);
  box-shadow: 0 0 0 2px var(--violet-primary);
}
.rl-plan__badge {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-6);
  background: var(--violet-primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 12px;
  border-radius: 999px;
}
.rl-plan__name { font-size: 1.5rem; font-weight: 700; margin: 0; }
.rl-plan__promise { color: var(--violet-primary); font-weight: 600; margin: 0; }
.rl-plan__for { opacity: .7; margin: 0 0 var(--space-2); }
.rl-plan__price { font-size: 2rem; font-weight: 700; line-height: 1.1; margin: 0; }
.rl-plan__vat { opacity: .6; font-size: .9rem; margin: 0 0 var(--space-4); }
.rl-plan__features { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.rl-plan__features li { position: relative; padding-left: 1.5rem; }
.rl-plan__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-green);
  font-weight: 700;
}
.rl-plan .button { margin-top: auto; }
.rl-pricing-notes { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.rl-note { max-width: 760px; margin: 0; }
.rl-note--guarantee {
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 14px;
  padding: var(--space-4) var(--space-6);
  background: #fff;
}
@media (max-width: 860px) {
  .rl-pricing { grid-template-columns: 1fr; }
}

/* reality — comparison table (šablona vs. Badpiece) */
.rl-compare-wrap { overflow-x: auto; margin-top: var(--space-6); }
.rl-compare { width: 100%; border-collapse: collapse; min-width: 540px; }
.rl-compare th,
.rl-compare td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  vertical-align: top;
}
.rl-compare thead th { font-weight: 700; }
.rl-compare thead th:last-child { color: var(--violet-primary); }
.rl-compare tbody th { font-weight: 600; white-space: nowrap; }
.rl-compare__us { color: var(--violet-primary); font-weight: 600; }

/* ============================================================
   reality.badpiece.com — page-scoped polish (.rl-page)
   ------------------------------------------------------------
   Loaded on every route but gated on .rl-page (the reality
   <main>), so none of this leaks onto the AI / other service
   pages that share the .svc-* chrome. Same flow, same brand
   language (Anton display, brand-green stickers, violet accent,
   navy) — just a tighter hierarchy, better readability and more
   pizzazz on the reality-only blocks (hero, "why" cards, the
   comparison table and the pricing tier cards).
   ============================================================ */
:root { --rl-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- hero: sized for the long Czech headline ----------
   The AI/home heroes are 1–2 short lines at the full 150px display size.
   Reality's headline ("ŘÍZENÁ PRÁCE S REALITY JE REALITOU.") wraps to three
   lines — at 150px it overran the panel and crashed into the fixed logo.
   Scale it down to a fluid size so the three lines breathe, clear the logo,
   and read as a deliberate statement rather than a clipped wall of caps. */
.rl-page .svc-hero-title.font-size-150 {
  font-size: clamp(2.75rem, 7.6vw, 7.5rem);
  line-height: 1.12;
  letter-spacing: -.022em;
}
/* the hero subhead is a long paragraph — drop it a touch and tighten the
   measure + leading so it reads as prose, not a wall */
.rl-page .svc-section .flex-column.align-right .paragraph {
  font-size: 1.2rem;
  line-height: 1.62;
  max-width: 38rem;
}
.rl-page .svc-section-lead { line-height: 1.6; }

/* ---------- statement panel: own the full screen ----------
   The "váš web nic neprodává" claim sat at h4 size (4rem), centred in a
   100vh green panel — a small line marooned in a huge void (the section the
   brief flagged as unbalanced). Promote it to true statement scale so the
   type anchors the panel, and give the supporting line real presence. */
.rl-page .rl-statement .svc-claim {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1.12;
  max-width: 17ch;
}
.rl-page .rl-statement .svc-section-lead {
  font-size: 1.5rem;
  line-height: 1.5;
  max-width: 46rem;
  margin-top: var(--space-8);
}

/* section intros: ONE size for every section heading, so they anchor
   consistently down the page (the two parallel "features" sections in
   particular read as a matched pair). svc-claim vs svc-claim-md differ only
   in measure (max-width: 20ch vs 26ch) — never in size. */
.rl-page .svc-claim,
.rl-page .svc-claim-md { font-size: clamp(2.5rem, 4vw, 4.25rem); line-height: 1.1; }

/* ---------- "why" cards: oversized index + warmer enclosure ----------
   Borrow the violet step-number rhythm from the process list so the three
   "tiché způsoby" read as a deliberate 01/02/03 sequence, and give the
   cards a softer squircle + a custom-eased lift. */
.rl-page .svc-start-card {
  position: relative;
  padding-top: var(--space-6);
  border-radius: 18px;
  border-color: rgba(0, 0, 0, .1);
  background: linear-gradient(180deg, #fff, #fcfcfd);
  box-shadow: 0 18px 40px -34px rgba(0, 0, 0, .55);
  transition: transform .4s var(--rl-ease), box-shadow .4s var(--rl-ease), border-color .4s var(--rl-ease);
}
.rl-page .svc-start-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px -32px rgba(0, 0, 0, .5);
}
.rl-page .rl-why-num {
  font-family: Anton, sans-serif;
  font-size: 1.1rem;
  letter-spacing: .12em;
  line-height: 1;
  color: var(--violet-primary);
  margin-bottom: .35rem;
}
.rl-page .svc-start-card:hover .svc-start-card__title { color: var(--violet-primary); }
.rl-page .svc-start-card__title { transition: color .25s var(--rl-ease); }

/* ---------- comparison table: editorial, not a default <table> ----------
   Nested enclosure (outer hairline tray + inner rounded core), Anton column
   heads, the "us" column tinted brand-green with a check, and a violet row
   hover. The plain bordered grid was the flattest block on the page. */
.rl-page .rl-compare-wrap {
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 22px;
  background: #fff;
  padding: var(--space-2);
  box-shadow: 0 30px 64px -44px rgba(0, 0, 0, .55);
}
.rl-page .rl-compare { border-collapse: separate; border-spacing: 0; }
.rl-page .rl-compare thead th {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: .005em;
  padding: var(--space-4) var(--space-5);
  border-bottom: 2px solid var(--black-950);
}
.rl-page .rl-compare thead th:last-child { color: var(--violet-primary); }
.rl-page .rl-compare tbody th {
  font-family: Anton, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .002em;
  padding: var(--space-4) var(--space-5);
}
.rl-page .rl-compare td {
  padding: var(--space-4) var(--space-5);
  font-size: 1.05rem;
  line-height: 1.45;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.rl-page .rl-compare tbody tr:last-child td,
.rl-page .rl-compare tbody tr:last-child th { border-bottom: 0; }
.rl-page .rl-compare tbody tr { transition: background-color .2s var(--rl-ease); }
.rl-page .rl-compare tbody tr:hover { background: rgba(153, 33, 163, .045); }
.rl-page td.rl-compare__us {
  position: relative;
  padding-left: 3rem;
  background: rgba(0, 255, 48, .09);
  color: var(--black-950);
  font-weight: 600;
}
.rl-page td.rl-compare__us::before {
  content: "✓";
  position: absolute;
  left: var(--space-4);
  color: #0a7b1f;            /* dark green — readable on the light tint */
  font-weight: 700;
}

/* ---------- pricing: bold tier cards in the brand's own voice ----------
   Anton tier names + price, a nested squircle with a soft inset highlight,
   a lifted/glowing featured card, and a full-width CTA. The old cards were
   a generic SaaS pricing grid (system font, flat 1px borders). */
.rl-page .rl-pricing { gap: var(--space-6); margin-top: var(--space-12); }
.rl-page .rl-plan {
  border-radius: 24px;
  border-color: rgba(0, 0, 0, .1);
  padding: var(--space-10) var(--space-8) var(--space-8);
  box-shadow: 0 24px 52px -38px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .42s var(--rl-ease), box-shadow .42s var(--rl-ease), border-color .42s var(--rl-ease);
}
.rl-page .rl-plan:hover {
  transform: translateY(-6px);
  border-color: var(--violet-primary);
  box-shadow: 0 38px 74px -40px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.rl-page .rl-plan--featured {
  border-color: var(--violet-primary);
  box-shadow: 0 0 0 2px var(--violet-primary), 0 40px 78px -38px rgba(153, 33, 163, .5);
}
@media (min-width: 861px) {
  .rl-page .rl-plan--featured { transform: scale(1.045); }
  .rl-page .rl-plan--featured:hover { transform: scale(1.045) translateY(-6px); }
}
.rl-page .rl-plan__badge {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: .08em;
  top: calc(-1 * var(--space-4));
  padding: 6px 14px 4px;
  box-shadow: 2px 2px 0 var(--black-950);
}
.rl-page .rl-plan__name {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  letter-spacing: -.01em;
  line-height: 1;
}
.rl-page .rl-plan__promise { font-size: 1.05rem; }
.rl-page .rl-plan__price {
  font-family: Anton, sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 3.6vw, 3.1rem);
  letter-spacing: -.012em;
  line-height: 1;
  margin-top: var(--space-2);
}
.rl-page .rl-plan__features { margin-bottom: var(--space-8); }
.rl-page .rl-plan__features li::before { color: #0a7b1f; }   /* darker green — readable on white */
.rl-page .rl-plan .button { width: 100%; text-align: center; }
.rl-page .rl-note--guarantee { border-radius: 18px; box-shadow: 0 18px 40px -34px rgba(0, 0, 0, .5); }

@media (prefers-reduced-motion: reduce) {
  .rl-page .svc-start-card,
  .rl-page .rl-plan,
  .rl-page .rl-plan--featured,
  .rl-page .rl-plan--featured:hover { transition: none; transform: none; }
}