/* Root background and iOS Safari dark mode integration */
:root,
html,
body,
#main,
.framer-o2v6Q,
.framer-k9mos5 {
  background-color: #060606 !important;
  background: #060606 !important;
  color-scheme: dark !important;
}

/* Company / legal strip appended below the footer (details from the previous
   iabco.cz). Scoped to its own id so it cannot affect the Framer styles. */
#iabco-legal {
  background: #050507;
  color: #6b7280;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  padding: 18px 24px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.iabco-legal-inner {
  max-width: 1324px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#iabco-legal a {
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.25s;
}

#iabco-legal a:hover {
  color: #fff;
}

.iabco-legal-sep {
  color: rgba(255, 255, 255, 0.18);
}

@media (max-width: 640px) {
  #iabco-legal {
    font-size: 11px;
    padding: 16px 18px 20px;
  }

  .iabco-legal-inner {
    gap: 6px;
  }
}

/* ── "Who we are" logo strip: real client marks ───────────────────────────
   The template ships five placeholder brand logos (Amsterdam / Milano /
   luminous ...) as inline SVG inside a scrolling ticker. Each slot keeps the
   ticker's motion but is painted over with the matching portfolio client
   logo, flattened to the same light grey the placeholders used. The URLs are
   relative to this stylesheet, so they resolve at any page depth.

   The source logos are wildly different: Al Mouna and Byblos are white artwork
   built for dark cards, the rest are mid-tone. Each slot therefore gets its own
   wash so all five land at roughly the same grey: the two white marks are
   inverted, the coloured ones are lifted or pulled down as needed. */
[data-framer-name^="Placeholder Logo"] {
  width: 120px !important;
  height: 44px !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

[data-framer-name^="Placeholder Logo"] svg {
  opacity: 0 !important;
}

[data-framer-name="Placeholder Logo 1"] {
  background-image: url("../portfolio/images/image-1772547681820-Photoroom.png");
  filter: grayscale(1) brightness(2);
  opacity: 0.8;
}

[data-framer-name="Placeholder Logo 2"] {
  background-image: url("../portfolio/images/startuspechu-logo-photoroom.png");
  filter: grayscale(1) brightness(2);
  opacity: 0.8;
}

[data-framer-name="Placeholder Logo 3"] {
  background-image: url("../portfolio/images/almouna_logo.png");
  filter: brightness(1);
  opacity: 0.8;
}

[data-framer-name="Placeholder Logo 4"] {
  background-image: url("../portfolio/images/al_yasmin_logo.png");
  filter: grayscale(1) brightness(1.8);
  opacity: 0.8;
}

[data-framer-name="Placeholder Logo 5"] {
  background-image: url("../portfolio/images/byblos_logo.png");
  filter: brightness(1);
  opacity: 0.8;
}

/* Phone: the card is narrow, so tighten the cells to keep more than one
   logo in view while the ticker moves. */
@media (max-width: 809px) {
  [data-framer-name^="Placeholder Logo"] {
    width: 92px !important;
    height: 34px !important;
  }
}

/* ── "Who we are" backdrop ───────────────────────────────────────────────
   The template paints this section with a flat stock blue photo (the "S2"
   block, alt "Creative team at work in studio"). Next to the dark sculptural
   renders every other section uses, that flat blue reads as an unstyled
   placeholder, so it is swapped here for one of the site's own dark renders.

   Only the photo is hidden and its own box is repainted, so the element keeps
   its size, position, mask, stacking and scroll-linked parallax - nothing
   reflows and no Framer rule needs rewriting. The drop-shadow is dropped
   because a shadow cast by a filled rectangle just draws a visible halo
   around the fill. */
[data-framer-name="S2"] [data-framer-name="Image"] {
  filter: none !important;
  background-image: url("../images/h09GGftf1aozWF4si4ZfXZiZhx0.w2400-h1600.png") !important;
  background-position: center 30% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

[data-framer-name="S2"] [data-framer-name="Image"] img {
  opacity: 0 !important;
}

/* ── Navbar mark ─────────────────────────────────────────────────────────
   The logo goes to the home page now (see the "navbar mark" block in
   extras.js), so it should read as clickable. The class only exists on the
   nav's logo block. */
.framer-FRMF4 .framer-63i707 {
  cursor: pointer;
}

/* ── "brand & identity" service photo ────────────────────────────────────
   The phone layout crops this slot from the top, which suited the template's
   own photo (its subject sits high in the frame). The replacement is composed
   around the middle, so the word was sliced off on phones - centre it there.
   Desktop and tablet already use the centre. */
@media (max-width: 809.98px) {
  [id="service 1"] img {
    object-position: 50% 50% !important;
  }
}

/* ── Language Switcher pill in navbar ─────────────────────────────────── */
.iabco-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 3px 4px;
  margin: 0;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.iabco-lang-btn {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
  line-height: 1;
}

.iabco-lang-active {
  background: #ffffff;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: default;
}

.iabco-lang-inactive {
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer;
}

.iabco-lang-inactive:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 809.98px) {
  .iabco-lang-pill {
    margin: 0 8px 0 auto;
    padding: 2px 3px;
  }
  .iabco-lang-btn {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* ── Section header alignment: {Proč my} / "Why choose us" ───────────────
   Stack tag above big headline and ensure big headline is aligned to the left,
   matching {Blog} and other sections. */
.framer-PDNJg .framer-ave2se {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 24px !important;
}

.framer-PDNJg .framer-ave2se .framer-13gai8x,
.framer-PDNJg .framer-ave2se .framer-16r33nj {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Section reordering: Place Blog below Signup Form (CTA) ───────────────
   In the main flex column container (.framer-1k16o3s), CTA is placed before
   Blog by giving CTA order: 9 and Blog order: 10. */
.framer-1k16o3s #ctA.framer-tea9cm-container {
  order: 9 !important;
}

.framer-1k16o3s .framer-1mu3tfi {
  order: 10 !important;
}

/* ── Hide links to removed About Us page & template leftovers ───────────
   Hides the desktop navbar link, mobile overlay item, intro section CTA button, and footer link. */
.framer-15olwv6 a[href*="about"],
.framer-1eraljc,
.framer-1nkzlv5,
.framer-mkotf0 {
  display: none !important;
}

/* ── Hide template 404 link from footer & mobile menu ───────────────────── */
.framer-4lxyu1-container,
.framer-658g7s,
.framer-nji4tv {
  display: none !important;
}

/* ── Remove unused social links (LinkedIn and YouTube) ────────────────────
   Only Instagram (https://www.instagram.com/iabco.cz) is active on iabco.cz. */
.framer-uexzpm-container,
.framer-1c38aak-container {
  display: none !important;
}

/* ── Hide preloader / loading screen ("iabco.cz" reveal overlay) ────────── */
.framer-6jza5z-container {
  display: none !important;
}

/* ── Blog button & blog cards interactivity ────────────────────────────── */
.framer-10uccl5-container,
.framer-10uccl5-container a,
.framer-10uccl5-container *,
.framer-hrcpbu-container,
.framer-hrcpbu-container a,
.framer-hrcpbu-container *,
[data-iabco-all-blogs],
[data-iabco-all-blogs] *,
[data-iabco-blog-link],
[data-iabco-blog-link] * {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}

/* ── Remove blog author block ───────────────────────────────────────────── */
[data-framer-name="Author details"],
.framer-1dfm02j {
  display: none !important;
}


/* ── Hero text positioning & bottom fluted panel (Navarro style) ────────── */
.framer-PDNJg .framer-cg8ao5 {
  justify-content: flex-end !important;
}

.framer-PDNJg .framer-3jzq35 {
  flex: none !important;
  height: auto !important;
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  text-align: center !important;
  gap: 28px !important;
  padding: 20px 24px 75px !important;
  z-index: 2 !important;
}

.framer-PDNJg .framer-3jzq35::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(12, 12, 14, 0.76) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(0, 0, 0, 0.45) 8px,
      rgba(0, 0, 0, 0.15) 36px,
      rgba(255, 255, 255, 0.02) 64px,
      rgba(0, 0, 0, 0.5) 71px,
      rgba(0, 0, 0, 0.75) 72px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 15%, transparent 80%, rgba(0, 0, 0, 0.85) 100%),
    radial-gradient(ellipse 65% 50% at 50% 30%, rgba(255, 255, 255, 0.06), transparent 70%),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%) !important;
  background-size: auto, auto, auto, 100% 1px !important;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: top left, top left, center, top left !important;
  box-shadow:
    0 -20px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -30px 40px rgba(0, 0, 0, 0.7) !important;
}

/* ── Mascot hero portrait (behind fluted bar without circle disk) ── */
.framer-PDNJg .framer-3jzq35::after {
  content: "" !important;
  position: absolute !important;
  top: -210px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 360px !important;
  height: 360px !important;
  background-image: url("../images/mascot-hero-portrait.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 809.98px) {
  .framer-PDNJg .framer-3jzq35::after {
    top: -145px !important;
    width: 250px !important;
    height: 250px !important;
  }
}

.framer-PDNJg .framer-18nanaf-container {
  flex: none !important;
  width: 100% !important;
  max-width: 1100px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Ensure Framer SSR hidden responsive variants are never shown simultaneously */
@media (min-width: 1200px) {
  .framer-PDNJg .hidden-139wr5a,
  .hidden-139wr5a {
    display: none !important;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-PDNJg .hidden-ok9bmj,
  .hidden-ok9bmj {
    display: none !important;
  }
}
@media (max-width: 809.98px) {
  .framer-PDNJg .hidden-3utw0l,
  .hidden-3utw0l {
    display: none !important;
  }
}

.framer-PDNJg .framer-18nanaf-container > div,
.framer-PDNJg .framer-18nanaf-container h1 {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.framer-PDNJg .framer-18nanaf-container h1 > span {
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* ── Remove orange spinning asterisk in hero headline ───────────────────── */
.framer-18nanaf-container svg {
  display: none !important;
}

/* ── Rolling words (marketingová, brandingová, kreativní) in orange accent ── */
.framer-18nanaf-container h1 > span:nth-child(2),
.framer-18nanaf-container h1 > span:nth-child(2) span {
  color: var(--token-0396541d-ba46-4341-af36-8352f97334b5, rgb(252, 81, 2)) !important;
}

.framer-PDNJg .framer-12h6avx {
  flex: none !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.framer-PDNJg .framer-12h6avx p {
  --framer-text-alignment: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}

@media (max-width: 809.98px) {
  .framer-PDNJg .framer-3jzq35 {
    padding: 32px 16px 32px !important;
    gap: 20px !important;
  }

  .framer-PDNJg .framer-3jzq35::before {
    height: max(440px, 54vh) !important;
    background-image:
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.08) 0px,
        rgba(255, 255, 255, 0.02) 2px,
        rgba(0, 0, 0, 0.45) 6px,
        rgba(0, 0, 0, 0.15) 22px,
        rgba(255, 255, 255, 0.02) 38px,
        rgba(0, 0, 0, 0.5) 43px,
        rgba(0, 0, 0, 0.75) 44px
      ),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 15%, transparent 80%, rgba(0, 0, 0, 0.85) 100%),
      radial-gradient(ellipse 80% 50% at 50% 30%, rgba(255, 255, 255, 0.06), transparent 70%),
      linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%) !important;
  }
}

/* Top bar logo: 20% larger (109px * 1.2 = 130.8px, 42px * 1.2 = 50.4px) */
.framer-FRMF4 .framer-63i707 {
  width: 130.8px !important;
  height: 50.4px !important;
}

/* ── Footer brand mark: replaced with the official iabco logo ────────────
   The template rendered a giant Clash Grotesk live text wordmark inside an SVG
   foreignObject. Replaced with the crisp official iabco logo matching the top bar. */
footer .framer-suwlec {
  background-image: url("../images/Lm0kH0RypLOgsnNSBEDhNJ3Ss4.w337-h132.png") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  cursor: pointer;
}

footer .framer-suwlec svg {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ── Footer navigation cleanups (Items 7 & 9) ───────────────────────────
   Hide the template 404 test link (.framer-4lxyu1-container) and dead
   social placeholders (LinkedIn: .framer-uexzpm-container, YouTube: .framer-1c38aak-container).
   Keeps the active Instagram link (.framer-ovj4et-container) cleanly displayed. */
.framer-4lxyu1-container,
.framer-uexzpm-container,
.framer-1c38aak-container {
  display: none !important;
}