/* ============================================================
   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; }
}

/* ---------- 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: 1.75rem;
}
.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: 26px; }
.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 40px;
}
.svc-hero-hand { width: 120px; height: auto; margin-top: 36px; }

/* ---------- 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 18px;
}
.svc-section-lead { max-width: 42rem; margin-top: 20px; 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: 1.5rem;
  margin-top: 2.5rem;
  width: 100%;
}
.svc-start-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 2rem 1.75rem;
  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: 1rem; 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: 16px 36px;
  margin: 2.75rem auto 0;         /* space below the section heading */
  max-width: 880px;
}
.slider-2 { margin-top: 2.25rem; }

/* 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: 1.75rem; }
.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: 1.5rem; 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: 3.5rem;
  row-gap: .35rem;
  align-items: baseline;
  align-content: center;       /* centre content when the row grows */
  padding: .95rem 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: 1.5rem; 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: 2.5rem;
  align-items: baseline;
  align-content: center;
  padding: .95rem 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: 12px;
  margin-top: 26px;
}
.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: 8px 18px;
}

/* ---------- 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: 2.5rem !important; }
/* a bigger, more confident primary button */
.svc-cta > .button.w-button {
  font-size: 1.35rem;
  padding: 18px 48px;
  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: 1.25rem 2.75rem;
  justify-content: center;
  margin-top: .5rem;
}
.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: 40px 56px;
  margin-top: 48px;
  width: 100%;
}
.svc-col h3 { margin: 0 0 10px; }
.svc-col p { margin: 0 0 6px; }
.svc-col ul { margin: 8px 0 0; padding-left: 18px; }
.svc-col li { margin-bottom: 4px; }

/* ---------- 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: 16px;
  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; }
}