/* ICL AI Office R19 — frontend component layer.
 * The page inherits the shared ICL design system. Orange is the single
 * page-level accent; cyan remains a secondary data/status signal only.
 */
.icl-page-ai-office .iclspShell,
.iclAIPageShell,
.iclAIPageRoot {
  --iclsp-accent:#ff6528;
  --iclsp-accent-rgb:255,101,40;
}

.iclAIPageRoot {
  font-family:var(--iclpv-fontBody,"IBM Plex Sans","Segoe UI",Arial,sans-serif);
}
.iclAIPageRoot h1,
.iclAIPageRoot h2,
.iclAIPageRoot h3 {
  font-family:var(--iclpv-fontDisplay,"Space Grotesk","Segoe UI",Arial,sans-serif)!important;
}
.iclAIPageRoot :is(
  .iclAI01Kicker,
  .iclspSectionStartLabel,
  .iclAI01FlowIdentity,
  .iclAI01SignalEyebrow,
  .iclAI01PanelDemoTag,
  .iclAI02Kicker,
  .iclAI01ArchTierNum,
  .iclAI01ArchDecisionChip,
  .iclIntegrationCardMeta,
  .iclDecisionNo,
  .iclFinalCtaEyebrow
) {
  font-family:var(--iclpv-fontMono,"IBM Plex Mono",ui-monospace,Consolas,monospace)!important;
}

/* Extracted AI Office base component layer from the accepted preview. */
/* =========================================================
   AI OFFICE — SECTION 01 — HERO

   ROUND 4 (2026-08-25) -- CLEAN REBUILD ON SMART HOME'S STRUCTURAL
   MECHANICS. Rounds 1-3 kept patching the generic .iclspHero/.iclspHeroGrid/
   .iclspSignalCard skeleton with local overrides; this round replaces
   that approach entirely. Section 01's markup no longer uses .iclspHero/
   .iclspHeroGrid/.iclspHeroCopy/.iclspSignalCard/.iclspH1/.iclspLead/
   .iclspEyebrow at all -- it is now a fully local component,
   structurally identical to Smart Home's OWN Hero (.iclHeroV3*,
   icl-patterns.css lines ~1127-1178), same as Smart Home itself never
   mixes in the generic subpage classes for its own Hero. Every spacing/
   geometry value below is copied VERBATIM from the real .iclHeroV3*
   rules (not approximated) -- only the accent color (copper, not Smart
   Home's cyan #00edf5) and the panel's own visual content differ.
   .iclHeroV3* itself is READ-ONLY reference and was not modified.
   ========================================================= */

.iclAI01Hero {
  position: relative;
  /* Round 11 (first-view fit): reduced from min(600px,...) -- with the
     round-9 compact 2-column panel, natural content height already
     exceeds 600px, so that floor was adding unused extra height on top
     of the real content rather than acting as a genuine minimum. Still
     NOT Smart Home's near-fullscreen calc(100svh - 98px) -- see round-2
     note this replaces. */
  min-height: min(520px, calc(100vh - 86px));
  display: grid;
  align-items: start;
  border-bottom: 1px solid var(--iclpv-hair, rgba(244,247,248,.08));
  isolation: isolate;
  /* PREMIUM BACKGROUND (round 6, "tło ma być ciemne i bardziej premium niż
     obecne"): layered dual-glow recipe -- the same structure ported from
     HOME's own .iclpvContactFooter in round 3 (two asymmetric low-opacity
     radial glows over a subtle vertical near-black gradient), minus the
     checkerboard grid layer that round 4 removed as too busy/generic.
     Dominant copper glow stays near the panel (this section's identity);
     the cyan glow is kept extremely faint -- auxiliary atmosphere only,
     not a second accent color competing with copper. No new hex: same
     --iclpv-copper/--iclpv-cyan/--iclpv-black tokens as everywhere else
     in this section. */
  background:
    radial-gradient(circle at 88% 2%, rgba(var(--iclsp-accent-rgb), .16), transparent 46%),
    radial-gradient(circle at 4% 98%, rgba(0, 242, 255, .03), transparent 30%),
    linear-gradient(180deg, #0c0908 0%, #0a0a0a 55%, #0a0a0a 100%);
}

/* ROUND 17 -- post-load ~24px vertical shift fix. .iclAI01Hero carries
   the shared data-icl-reveal attribute; the generic sitewide rule
   (".iclspJs [data-icl-reveal]", see icl-patterns.css reveal-system
   block) fades AND slides the whole matched element (opacity 0->1 +
   transform: translateY(24px) -> none) once setupReveal()'s
   IntersectionObserver marks it .is-visible. Fine for a single card/
   paragraph; wrong for Hero, whose two-column grid is the very first
   thing painted -- the slide component made the entire section (both
   columns, as one unit, since the attribute sits on .iclAI01Hero
   itself) resettle ~24px after initial paint. Fix is scoped to Hero
   only, via selector specificity over the generic rule -- never edited,
   never touched for any other data-icl-reveal element on the site:
   keep the opacity fade (a safe, non-layout visual effect), drop the
   transform entirely so Hero's geometry never moves after paint. */
.iclspJs .iclAI01Hero[data-icl-reveal] {
  transform: none;
  transition: opacity 650ms ease;
}
.iclspJs .iclAI01Hero[data-icl-reveal].is-visible {
  transform: none;
}

/* Was verbatim from .iclHeroV3Container's padding (54px 0 64px). Round 11
   (first-view fit) reduces it -- explicitly authorized to diverge from
   the "verbatim Smart Home" rule for this specific tuning pass, since the
   goal now is fitting the approved first-screen framing, not principle-
   matching. Symmetric top/bottom for the "vertically balanced" goal.
   Bottom is the ONE value controlling where Section 02 begins on desktop
   (.iclAI01Hero itself carries zero padding/margin -- confirmed via
   real getBoundingClientRect measurement at an exact 1366x768 viewport,
   not a screenshot estimate). Measured: at 8px, Hero section bottom
   lands at ~781px and Section 02's top border at ~809px -- comfortably
   past the 768px fold (a small, deliberate scroll) without the
   "hundreds of pixels of dead space" an earlier, larger value produced.
   DEMO annotation's own position is unaffected (it sits before this
   padding, driven only by its own margin-top). Tablet/mobile overrides
   below (max-width:1180px / 700px) already use their own larger bottom
   values and are untouched. */
.iclAI01Container {
  width: min(100% - 184px, 1440px);
  margin-inline: auto;
  padding: 0 0 8px;
  display: grid;
  grid-template-columns: minmax(430px, .9fr) minmax(620px, 1.1fr);
  gap: clamp(48px, 5vw, 84px);
  align-items: start;
}

/* Verbatim from .iclHeroV3Copy. */
.iclAI01Copy {
  align-self: center;
  max-width: 640px;
}

/* Verbatim geometry from .iclHeroV3Kicker/.iclHeroV3KickerLabel/
   .iclHeroV3KickerLine -- color is AI Office's copper instead of Smart
   Home's cyan #00edf5, per this round's explicit color instruction. */
.iclAI01Kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px; /* was 28px (verbatim Smart Home) -- tightened, round 11 first-view fit */
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--icl-hero-eyebrow-font);
  font-size: var(--icl-hero-eyebrow-size);
  font-weight: 600;
  line-height: var(--icl-hero-eyebrow-lh);
  letter-spacing: var(--icl-hero-eyebrow-ls);
  text-transform: uppercase;
}
.iclAI01KickerLabel { flex: 0 0 auto; white-space: nowrap; }
.iclAI01KickerLine { flex: 1 1 auto; min-width: 24px; height: 1px; background: linear-gradient(to right, rgba(var(--iclsp-accent-rgb), .5), rgba(var(--iclsp-accent-rgb), 0)); }

/* Verbatim from .iclHeroV3Title -- HOME's real compact Hero tokens
   (icl-shared-original.css --icl-hero-h1-*), same ones Smart Home's own
   Hero consumes. Selector is "h1.iclAI01Title" (element + class), NOT
   just ".iclAI01Title": .iclshMain h1,h2,h3,p{margin-top:0} (icl-patterns.css
   line ~1120) is specificity (0,1,1) and this element's <main> carries
   .iclshMain (see templates/subpage-application.html), so a class-only
   rule at (0,1,0) would silently lose that fight -- matching Smart
   Home's own documented p.iclHeroV3Lead fix for the identical conflict. */
h1.iclAI01Title {
  max-width: var(--icl-hero-h1-max-width-compact);
  margin: 0;
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--icl-hero-h1-font);
  font-weight: var(--icl-hero-h1-weight);
  font-size: var(--icl-hero-h1-size-compact);
  line-height: var(--icl-hero-h1-lh);
  letter-spacing: var(--icl-hero-h1-ls);
}
/* Verbatim from .iclHeroV3TitleLine -- each headline line is its own
   real block box, so the H1's total height is the natural sum of both
   lines and the lead starts strictly after it: normal document flow, no
   negative margins/absolute positioning/transforms. */
.iclAI01TitleLine { display: block; }

/* Verbatim from p.iclHeroV3Lead, including the same element+class
   specificity fix (see h1.iclAI01Title comment above) -- color uses the
   canonical --iclpv-grey1 token rather than hand-copying Smart Home's
   own one-off #a8b4b8 (this round's brief asked for structural/spacing
   values verbatim, not Smart Home's specific color choices). */
p.iclAI01Lead {
  max-width: var(--icl-hero-lead-max-width);
  margin: 0;
  margin-block-start: 32px; /* was 54px (verbatim Smart Home) -- tightened, round 11 first-view fit */
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontBody);
  font-size: var(--icl-hero-lead-size);
  line-height: var(--icl-hero-lead-lh);
}
/* Verbatim from .iclHeroV3LeadLine -- block on desktop for an exact line
   composition, reverts to inline at <=1180px (see media query below),
   same breakpoint Smart Home uses for its own Lead. */
.iclAI01LeadLine { display: block; }

/* Was verbatim from .iclHeroV3Actions (margin-top:40px) -- tightened to
   26px, round 11 first-view fit. */
.iclAI01Actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

/* AI Office CTA = copper identity on HOME's exact button geometry.
   .iclpvBtn/.iclpvBtnPrimary (icl-shared-original.css) are NOT edited --
   this only overrides background/color. Selector matches
   "a.iclpvBtnPrimary"'s own specificity pattern so it reliably wins the
   same .iclspShell a{color:inherit} cascade conflict documented on the
   canonical rule, without !important. Hover keeps the identical copper
   (no new hex invented) and adds only a restrained glow. */
a.iclpvBtnPrimary.iclAI01Cta {
  background: var(--iclpv-copper, var(--iclsp-accent));
  color: var(--iclpv-black, #0A0A0A);
}
a.iclpvBtnPrimary.iclAI01Cta:hover {
  background: var(--iclpv-copper, var(--iclsp-accent));
  box-shadow: 0 0 32px rgba(var(--iclsp-accent-rgb), .32);
}

/* Structural positioning verbatim from .iclHeroV3Panel (the ONLY part of
   Smart Home's panel being reused -- its visual chrome, icl-smart-core,
   is explicitly NOT copied per this round's instruction). Visual
   treatment below (border/background/corner brackets) is round 3's own
   AI Office panel design, carried forward unchanged and NOT
   re-decorated this round ("improve the panel visual later, after the
   left-side geometry is proven"). */
.iclAI01Panel {
  position: relative;
  width: 100%;
  max-width: 760px;
  justify-self: end;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .34);
  border-radius: 4px;
  /* Tightened round 9 from clamp(28px,3.4vw,40px), tightened again round
     11 (first-view fit) from clamp(22px,2.6vw,30px). */
  padding: clamp(18px, 2.1vw, 24px);
  background:
    linear-gradient(180deg, rgba(var(--iclsp-accent-rgb), .45) 0, rgba(var(--iclsp-accent-rgb), .45) 2px, transparent 2px),
    linear-gradient(180deg, rgba(var(--iclsp-accent-rgb), .1), transparent 48%),
    radial-gradient(circle at 94% 100%, rgba(0, 242, 255, .05), transparent 40%),
    var(--iclpv-black2, #101215);
  /* DESKTOP PREMIUM PASS -- one added ambient lift so the panel reads as
     a physical instrument sitting slightly off the page, not a flat
     bordered box. Copper only, no new hue, kept soft (this is the
     "elegant depth" ask, not a glow effect). */
  box-shadow: 0 28px 70px -30px rgba(var(--iclsp-accent-rgb), .35), 0 2px 0 rgba(0, 0, 0, .4);
}

.iclAI01Panel::before,
.iclAI01Panel::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.iclAI01Panel::before {
  top: 14px;
  left: 14px;
  border-top: 1.5px solid rgba(var(--iclsp-accent-rgb), .55);
  border-left: 1.5px solid rgba(var(--iclsp-accent-rgb), .55);
}
.iclAI01Panel::after {
  bottom: 14px;
  right: 14px;
  border-bottom: 1.5px solid rgba(var(--iclsp-accent-rgb), .55);
  border-right: 1.5px solid rgba(var(--iclsp-accent-rgb), .55);
}

/* Quiet technical annotation, single word -- sits exactly where the
   removed autoplay pause/resume icon used to be (top-right corner of
   .iclAI01SignalHead, already position:relative). Not a UI component:
   no pill/border/background/glow, not interactive, just a low-contrast
   label clarifying the panel is a demo. */
.iclAI01PanelDemoBadge {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Panel header band -- separates the "System online" status + headline
   from the process rows below with its own border, so the panel reads
   as a structured instrument (header + body), not one undifferentiated
   text stack. */
.iclAI01SignalHead {
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(var(--iclsp-accent-rgb), .22);
}

/* Was ".iclspEyebrow iclAI01SignalEyebrow" (round 3) -- now fully local
   since the panel no longer co-applies any .iclsp* class. Declares its
   own base type directly instead of inheriting it. */
.iclAI01SignalEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Round 13: autoplay pause/resume control -- small, visually secondary
   to "System online", absolutely positioned within .iclAI01SignalHead
   (already position:relative) so it never adds to the header's own
   document-flow height/geometry. Muted by default, not styled as a CTA
   (no copper fill, no button-like weight) -- matches "must not look like
   another CTA". */
.iclAI01AutoplayToggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  appearance: none;
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 247, 248, .18);
  border-radius: 50%;
  background: transparent;
  color: var(--iclpv-grey1, #AEB6BE);
  font-size: 9px;
  line-height: 1;
  transition: border-color .15s ease, color .15s ease;
}

.iclAI01AutoplayToggle:hover {
  border-color: rgba(var(--iclsp-accent-rgb), .5);
  color: var(--iclpv-copper, var(--iclsp-accent));
}

.iclAI01AutoplayToggle:focus-visible {
  outline: 2px solid var(--iclpv-cyan, #00F2FF);
  outline-offset: 2px;
}

.iclAI01SignalEyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--iclpv-cyan, #00F2FF);
  box-shadow: 0 0 8px rgba(0, 242, 255, .75);
  animation: iclAI01Pulse 2.4s ease-in-out infinite;
}

@keyframes iclAI01Pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .iclAI01SignalEyebrow::before {
    animation: none;
    opacity: .9;
  }
}

/* Was ".iclspH3" (round 3) -- fully local now, own type declared directly
   instead of inheriting the shared heading scale. */
.iclAI01SignalTitle {
  margin: 8px 0 0;
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontDisplay);
  font-weight: 650;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* =========================================================
   AI OFFICE — SECTION 01 — HERO — "AI Lead Desk" panel
   Colors fixed per spec: --iclpv-black (#0A0A0A) / --iclpv-black2
   (#101215) / --iclpv-copper (var(--iclsp-accent)) / --iclpv-white (#F4F7F8) --
   all four already canonical HOME tokens, no new hex. Cyan
   (--iclpv-cyan) appears in exactly ONE place, the Status field's dot.

   ROUND 9 COMPACT REDESIGN: replaces the round-5/8 single-column
   bordered .iclAI01LeadCard groups (each with its own margin/border/
   padding overhead -- real height cost across 3-4 stacked groups) with
   ONE flat 2-column .iclAI01DataGrid per tab ("dane obok siebie w 2
   kolumnach... usuń pustą przestrzeń"). .iclAI01LeadRow changed from a
   horizontal 92px-label + value grid (needed the full row width) to a
   compact vertical key-over-value cell, so it now works as a grid ITEM
   inside a 2-column layout instead of a full-width single-column row. */
.iclAI01DataGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 20px;
  margin-top: 12px;
  border-top: 1px solid rgba(var(--iclsp-accent-rgb), .22);
  border-bottom: 1px solid rgba(var(--iclsp-accent-rgb), .22);
}

.iclAI01LeadRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px 0 8px 12px;
  border-left: 2px solid rgba(var(--iclsp-accent-rgb), .3);
}

/* Full-width row inside the grid (the "Źródła" source line and the
   "Efekt AI" totals line) -- spans both columns and gets its own top
   rule so it reads as the grid's closing summary line, not just
   another cell. Bolder value for the same "stronger" emphasis reason. */
.iclAI01LeadRow--wide {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--iclpv-hair, rgba(244, 247, 248, .08));
}
.iclAI01LeadRow--wide .iclAI01LeadValue {
  font-weight: 650;
}

.iclAI01LeadKey {
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.iclAI01LeadValue {
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontBody);
  font-size: 15.5px;
  font-weight: 550;
  line-height: 1.35;
}

/* Priorytet: the single most sales-critical field gets a copper badge
   treatment instead of plain text -- a real UI panel would flag it the
   same way. */
.iclAI01LeadBadge {
  display: inline-block;
  width: fit-content;
  padding: 3px 10px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .5);
  border-radius: 3px;
  background: rgba(var(--iclsp-accent-rgb), .12);
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* "Kontekst firmy" card only: company name + subtle demo-data tag above
   its .iclAI01DataGrid. */
.iclAI01ContextHead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.iclAI01ContextCompany {
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontDisplay);
  font-weight: 650;
  font-size: 17px;
}

.iclAI01ContextDemo {
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}

/* ROUND 20 -- "Kontekst firmy" AI interpretation module ("Ocena AI").
   Deliberately NOT another bordered card like .iclAI01ImpactTile -- a
   thin border-top separator + compact label/value rows is what keeps
   this reading as "one system, a second layer of the same panel" rather
   than a second data card. Company data above stays untouched; this is
   visually the ONLY place below the separator, so the data/interpretation
   boundary is unambiguous. */
.iclAI01ContextScore {
  position: relative;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--iclsp-accent-rgb), .22);
}

/* Small traveling dot on the separator itself (stage 3 -- "signal moves
   to result"). Static/rest state is invisible (opacity 0); only ever
   visible while .is-animating plays it once. */
.iclAI01ContextScoreScan {
  position: absolute;
  top: -1px;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--iclpv-copper, var(--iclsp-accent));
  box-shadow: 0 0 6px rgba(var(--iclsp-accent-rgb), .8);
  opacity: 0;
}

.iclAI01ContextScoreEyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.iclAI01ContextScoreEyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--iclpv-cyan, #00F2FF);
  box-shadow: 0 0 6px rgba(0, 242, 255, .7);
}

.iclAI01ContextScoreEyebrowLabel {
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.iclAI01ContextScoreEyebrowStatus {
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.iclAI01ContextScoreRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.iclAI01ContextScoreRow:first-of-type { margin-top: 0; }

.iclAI01ContextScoreLabel {
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* "Wysoki" -- a clear result, deliberately not badge/pill-sized (see
   .iclAI01LeadBadge for what a badge treatment looks like -- this is
   plain text with weight/color doing the work instead). */
.iclAI01ContextScoreValue {
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontDisplay);
  font-size: 15px;
  font-weight: 700;
}

.iclAI01ContextScoreBarRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.iclAI01ContextScoreTrack {
  flex: 1 1 auto;
  max-width: 120px;
  height: 4px;
  border-radius: 2px;
  background: rgba(244, 247, 248, .12);
  overflow: hidden;
}

/* Resting width is the actual score (82/100) -- the ONLY value that
   ever changes here is future page-content, never a CSS edit; the grow-
   in animation scales this same box, it never targets width. */
.iclAI01ContextScoreBar {
  width: 82%;
  height: 100%;
  border-radius: 2px;
  background: var(--iclpv-copper, var(--iclsp-accent));
  transform-origin: left center;
}

.iclAI01ContextScoreValueNum {
  flex: 0 0 auto;
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 11px;
  font-weight: 700;
}

.iclAI01ContextScoreSignals {
  margin: 12px 0 0;
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 9.5px;
  letter-spacing: .04em;
}

/* One-time sequence, restarted per activation via JS remove/reflow/
   re-add of .is-animating on .iclAI01TabPanel[data-tab="context"] --
   identical technique to the Lead pipeline / Efekt AI. Every element
   below already has its correct FINAL value in the base rules above;
   these keyframes only ever animate color/box-shadow/opacity/transform,
   never text, width, height or margin, so there is no layout shift and
   nothing here can hide content. */
@media (prefers-reduced-motion: no-preference) {
  .iclAI01TabPanel[data-tab="context"].is-animating .iclAI01ContextScoreEyebrow::before {
    animation: iclAI01ContextDotPulse 1.9s ease;
  }

  .iclAI01TabPanel[data-tab="context"].is-animating [data-ai01-context-signal="1"] { animation: iclAI01ContextSignalPulse .4s ease; animation-delay: .3s; }
  .iclAI01TabPanel[data-tab="context"].is-animating [data-ai01-context-signal="2"] { animation: iclAI01ContextSignalPulse .4s ease; animation-delay: .7s; }
  .iclAI01TabPanel[data-tab="context"].is-animating [data-ai01-context-signal="3"] { animation: iclAI01ContextSignalPulse .4s ease; animation-delay: 1.1s; }
  .iclAI01TabPanel[data-tab="context"].is-animating [data-ai01-context-signal="4"] { animation: iclAI01ContextSignalPulse .4s ease; animation-delay: 1.5s; }

  .iclAI01TabPanel[data-tab="context"].is-animating .iclAI01ContextScoreScan {
    animation: iclAI01ContextScanTravel .4s ease;
    animation-delay: 1.9s;
  }

  .iclAI01TabPanel[data-tab="context"].is-animating .iclAI01ContextScoreBar {
    animation: iclAI01ContextBarGrow 1.4s ease-out both;
    animation-delay: 2s;
  }

  .iclAI01TabPanel[data-tab="context"].is-animating .iclAI01ContextScoreValue {
    animation: iclAI01ContextValueSettle .4s ease both;
    animation-delay: 3.3s;
  }
}

@keyframes iclAI01ContextDotPulse {
  0%, 100% { opacity: 1; }
  25%, 75% { opacity: .35; }
  50% { opacity: 1; }
}

@keyframes iclAI01ContextSignalPulse {
  0%, 100% { color: var(--iclpv-white, #F4F7F8); }
  40% { color: var(--iclpv-copper, var(--iclsp-accent)); }
}

@keyframes iclAI01ContextScanTravel {
  0% { left: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes iclAI01ContextBarGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes iclAI01ContextValueSettle {
  from { color: var(--iclpv-grey1, #AEB6BE); }
  to { color: var(--iclpv-copper, var(--iclsp-accent)); }
}

/* Status: the ONE deliberate cyan touch in the whole panel, per this
   round's explicit "cyan tylko jako mały akcent statusu" instruction --
   a small live-status dot, nothing else on this field is cyan. */
.iclAI01LeadStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.iclAI01LeadStatus::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--iclpv-cyan, #00F2FF);
  box-shadow: 0 0 6px rgba(0, 242, 255, .7);
}

/* ROUND 15 -- "Nowy lead" AI-processing module, strengthened from the
   round-14 thin under-divider trace into a bounded system/process module
   (bordered box, own eyebrow, larger step chips) so it reads as visible
   AI WORK PERFORMED, not just a connector between UI states. Same
   "operating panel reads premium through structure" principle as
   .iclAI01Panel itself, scaled down -- a bounded header band (eyebrow) +
   a node row, not more glow. */
.iclAI01LeadFlow {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .22);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(var(--iclsp-accent-rgb), .05), transparent 65%), var(--iclpv-black2, #101215);
}

.iclAI01LeadFlowEyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ROUND 16 -- "Nowy lead" pipeline: replaces the round-15 flat 3-chip
   trace with a genuine numbered operating-pipeline (numbered node +
   title + secondary per stage, connected by a thin system line), plus a
   restrained once-per-activation "signal travel" animation. Static/
   reduced-motion/editor state is already the fully-lit end result --
   the animation only plays a temporary dim->lit intro over it, it never
   gates access to the text itself (see JS setupAI01Tabs() -> the
   pipeline is always full plain DOM content, class toggling is purely
   decorative). */
.iclAI01Pipeline {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.iclAI01PipelineStage {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 0;
}

.iclAI01PipelineNum {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-bottom: 1px;
  border: 1px solid var(--iclpv-copper, var(--iclsp-accent));
  border-radius: 50%;
  background: rgba(var(--iclsp-accent-rgb), .14);
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 9px;
  font-weight: 700;
}

.iclAI01PipelineTitle {
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontDisplay);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.iclAI01PipelineSecondary {
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontBody);
  font-size: 11px;
  line-height: 1.3;
}

.iclAI01PipelineTask {
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Thin system line between stages, vertically centered against the
   20px Num circle (9px margin-top = half the circle's own height).
   Already "filled" copper at rest -- see the module comment above. */
.iclAI01PipelineConnector {
  position: relative;
  flex: 1 1 24px;
  align-self: flex-start;
  margin-top: 9px;
  height: 1px;
  background: var(--iclpv-copper, var(--iclsp-accent));
}

.iclAI01PipelineSignal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--iclpv-copper, var(--iclsp-accent));
  box-shadow: 0 0 6px rgba(var(--iclsp-accent-rgb), .8);
  opacity: 0;
  transform: translate(-50%, -50%);
}

/* The animated intro -- only plays once per activation (JS restarts it
   via remove/reflow/add of .is-animating, same technique already used
   for .iclAI01AutoplayProgressBar), and only when the user allows
   motion. Fill-mode "both" makes the "from" keyframe act as the dim
   starting state before each stage's delay, and holds the matching lit
   "to" state afterward -- identical to the static base rules above, so
   there is no visual seam when the animation ends. */
@media (prefers-reduced-motion: no-preference) {
  .iclAI01Pipeline.is-animating .iclAI01PipelineNum {
    animation: iclAI01PipelineNumActivate .35s ease both;
  }
  .iclAI01Pipeline.is-animating [data-stage="1"] .iclAI01PipelineNum { animation-delay: 0s; }
  .iclAI01Pipeline.is-animating [data-stage="2"] .iclAI01PipelineNum { animation-delay: 1s; }
  .iclAI01Pipeline.is-animating [data-stage="3"] .iclAI01PipelineNum { animation-delay: 2s; }

  .iclAI01Pipeline.is-animating .iclAI01PipelineConnector {
    animation: iclAI01PipelineLineFill .3s ease both;
  }
  .iclAI01Pipeline.is-animating [data-connector="1"] { animation-delay: .3s; }
  .iclAI01Pipeline.is-animating [data-connector="2"] { animation-delay: 1.3s; }

  .iclAI01Pipeline.is-animating .iclAI01PipelineSignal {
    animation: iclAI01PipelineSignalTravel .7s ease both;
  }
  .iclAI01Pipeline.is-animating [data-connector="1"] .iclAI01PipelineSignal { animation-delay: .3s; }
  .iclAI01Pipeline.is-animating [data-connector="2"] .iclAI01PipelineSignal { animation-delay: 1.3s; }
}

@keyframes iclAI01PipelineNumActivate {
  from { border-color: rgba(244, 247, 248, .22); background: var(--iclpv-black2, #101215); color: var(--iclpv-grey1, #AEB6BE); }
  to { border-color: var(--iclpv-copper, var(--iclsp-accent)); background: rgba(var(--iclsp-accent-rgb), .14); color: var(--iclpv-copper, var(--iclsp-accent)); }
}

@keyframes iclAI01PipelineLineFill {
  from { background: rgba(244, 247, 248, .18); }
  to { background: var(--iclpv-copper, var(--iclsp-accent)); }
}

@keyframes iclAI01PipelineSignalTravel {
  0% { left: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Result readout -- "4 s" gets deliberately stronger hierarchy (the
   copper "final state" color, larger technical numeral) than the muted
   detail line next to it, without approaching the Hero H1's own size/
   weight. The one deliberate cyan touch is the detail line's live-status
   dot, same convention as .iclAI01LeadStatus::before /
   .iclAI01ImpactStatus::before. */
.iclAI01LeadFlowResult {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.iclAI01LeadFlowResultValue {
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
}

.iclAI01LeadFlowResultDetail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  letter-spacing: .04em;
}

.iclAI01LeadFlowResultDetail::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--iclpv-cyan, #00F2FF);
  box-shadow: 0 0 6px rgba(0, 242, 255, .7);
}

/* =========================================================
   "AI Lead Desk" tabbed panel -- 3 switchable cards: Nowy lead /
   Kontekst firmy / Efekt AI (Rekomendacja moved out to the persistent
   .iclAI01PanelFooter, round 7 -- "jeden premium panel z przełączanymi
   kartami... nie jedna długa statyczna lista"). State lives in ONE
   place: data-active-tab on .iclAI01Tabs, same convention Smart Home's
   own icl-smart-core[data-mode] already uses in this file -- not a
   class-toggling scheme, for consistency. JS (setupAI01Tabs in
   icl-patterns.js) updates that attribute on click AND on autoplay
   (round 13); the markup's static data-active-tab="lead" IS the no-JS
   fallback (first card renders correctly with zero script), same
   "content works before JS runs" principle as the FAQ accordion. Full
   stacking override for the Gutenberg editor lives in
   icl-subpage-editor.css (all 3 cards must stay directly editable). */
.iclAI01TabNav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.iclAI01TabBtn {
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .3);
  border-radius: 3px;
  background: transparent;
  padding: 8px 12px;
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.iclAI01TabBtn:hover {
  border-color: rgba(var(--iclsp-accent-rgb), .55);
  color: var(--iclpv-white, #F4F7F8);
}

.iclAI01TabBtn[aria-selected="true"] {
  border-color: var(--iclpv-copper, var(--iclsp-accent));
  background: var(--iclpv-copper, var(--iclsp-accent));
  color: var(--iclpv-black, #0A0A0A);
}

.iclAI01TabBtn:focus-visible {
  outline: 2px solid var(--iclpv-cyan, #00F2FF);
  outline-offset: 2px;
}

/* ROUND 14 -- thin autoplay progress indicator, paired with the existing
   pause/resume toggle. Sits between the tab nav and the slider viewport
   (sibling of both), same "UI chrome, not main content" reasoning as
   .iclAI01AutoplayToggle. .is-animating carries the actual @keyframes run
   (animation-duration 7s matches AUTOPLAY_MS in setupAI01Tabs()); JS
   restarts it per tab change via remove/reflow/re-add of that class, and
   pauses/resumes it with the animation-play-state LONGHAND (kept separate
   from the "animation" shorthand below so it never gets clobbered), synced
   to the exact same isPaused() check that already gates the autoplay
   timer. */
.iclAI01AutoplayProgress {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  height: 2px;
  border-radius: 1px;
  background: rgba(244, 247, 248, .1);
  overflow: hidden;
}

.iclAI01AutoplayProgressBar {
  width: 0%;
  height: 100%;
  background: var(--iclpv-copper, var(--iclsp-accent));
}

.iclAI01AutoplayProgressBar.is-animating {
  animation: iclAI01AutoplayProgressGrow 7s linear forwards;
}

@keyframes iclAI01AutoplayProgressGrow {
  from { width: 0%; }
  to { width: 100%; }
}

/* Explicit hard requirement: reduced-motion users must not see this
   animation at all -- stronger than the TabTrack rule below, which only
   drops the transition timing; this hides the element entirely. */
@media (prefers-reduced-motion: reduce) {
  .iclAI01AutoplayProgress { display: none; }
}

/* ROUND 12 -- horizontal slider + fixed panel height.
   STRUCTURAL PRINCIPLE reused from HOME's Poziom -1 (patterns/homepage-content.html
   ".iclpvSensorStoryShell" scene, icl-project.css): a clipped Viewport
   wrapping a flex Rail/Track whose width is a multiple of 100% and whose
   children are each flex:0 0 (one slide's share) -- HOME's own
   .iclpvSensorStoryViewport{overflow:hidden} > .iclpvSensorStoryRail
   {display:flex;width:calc(var(--story-count)*100%);transform:translate3d}
   > .iclpvSensorStoryState{flex:0 0 calc(100%/var(--story-count))}. Only
   the STRUCTURAL convention is reused -- HOME's rail has no CSS
   `transition` at all (it's driven by direct per-frame `transform` writes
   tied to scroll position, never a discrete click-triggered animation),
   so there is no timing/easing value to literally copy. For the
   transition itself we reuse the closest existing ICL convention for a
   discrete CLICK-triggered visual change: Smart Home's mode-switcher
   icon transition (icl-mode-node__icon, this file: "border-color .35s
   ease, background .35s ease, ... transform .35s ease").

   EQUAL-HEIGHT WITHOUT FIXED PIXELS: .iclAI01TabTrack is `display:flex`
   with all 3 panels genuinely laid out side-by-side (each flex:0 0 100%),
   never display:none. Normal flexbox cross-axis sizing means the Track's
   own height is already the tallest of its 3 flex items -- standard
   browser behavior, not a hack -- so the Viewport (which clips overflow)
   naturally reserves the tallest slide's height on every tab, with no
   JS measurement and no arbitrary height value anywhere. */
.iclAI01TabViewport {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.iclAI01TabTrack {
  display: flex;
  transition: transform .35s ease;
  transform: translateX(0);
}
.iclAI01Tabs[data-active-tab="context"] .iclAI01TabTrack { transform: translateX(-100%); }
.iclAI01Tabs[data-active-tab="impact"] .iclAI01TabTrack { transform: translateX(-200%); }

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

/* Always laid out (never display:none -- see the equal-height comment
   above); the Viewport's overflow:hidden is what actually keeps only one
   slide visible. */
.iclAI01TabPanel {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

/* ROUND 18 -- "Kontekst firmy" / "Efekt AI" have visibly less content
   than "Nowy lead" (the pipeline module made Lead the tallest tab), but
   .iclAI01TabTrack's flex-stretch cross-axis sizing (see the comment
   above) means every tab's own box is already Lead's full height --
   the shorter tabs were just leaving that extra height as dead space
   between their content and the persistent recommendation footer.
   Fix: let these two tabs' own content group vertically-center within
   their already-Lead-height box, instead of hugging the top -- splits
   the unused height evenly above/below so the gap in front of the
   footer reads as deliberate breathing room, not an accident. Lead
   itself is untouched (its content already fills the box naturally).
   No pixel value guessed, no outer panel/height change -- purely how
   the existing height budget is distributed inside these two tabs. */
.iclAI01TabPanel[data-tab="context"],
.iclAI01TabPanel[data-tab="impact"] {
  display: flex;
  flex-direction: column;
}

/* ROUND 20 -- Context carries its own "Ocena AI" module (below), making
   its content noticeably taller than when centering was first added.
   Centering would now mean splitting the (smaller) leftover height
   evenly above AND below, which reads as an odd gap pushing "Aurexion
   Industries" down from the top. flex-end pushes the whole content
   group down to sit close to the persistent footer instead -- the one
   place a controlled small gap actually matters here -- and lets the
   company name start naturally near the top. */
.iclAI01TabPanel[data-tab="context"] { justify-content: flex-end; }
/* ROUND 25 -- flex-end (round 23) pushed Impact's content down against the
   footer, but that left the LEFTOVER height (Context's taller box minus
   Impact's own shorter content) sitting as dead space directly above the
   4-tile grid, right under the tab-line the user just clicked -- the
   grid read as disconnected from the process tabs above it. flex-start
   plus an explicit margin-top on .iclAI01ImpactGrid (below) puts a fixed,
   deliberate gap there instead of a variable leftover one; the same
   leftover height now falls after the comparison rows, inside the panel,
   never touching the persistent footer. */
.iclAI01TabPanel[data-tab="impact"] { justify-content: flex-start; }

/* ROUND 14 -- "Efekt AI" 4-tile AI-worker grid, replacing the flat 2x2
   key/value rows. Same iclAI01DataGrid-derived 2-column grid, but each
   cell is now a bordered tile (worker/task/status) instead of a bare
   key/value pair -- reads as 4 distinct AI workers having run. */
.iclAI01ImpactGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  /* ROUND 25 -- deliberate fixed gap from the tab-line above (was 12px,
     only correct once flex-end's leftover push was removed above) so the
     grid reads as the direct result of the process tabs, not a floating
     block. */
  margin-top: 48px;
}

/* ROUND 24 -- diagnosis for the still-visible dead space above the
   footer: .iclAI01TabTrack's align-items:stretch (default, no override
   anywhere -- verified, only one non-conflicting justify-content rule
   exists per tab) makes every .iclAI01TabPanel match the TALLEST tab's
   own natural content height. That reference tab is no longer Lead --
   since round 20 added the "Ocena AI" module, Context's own stack
   (company DataGrid + ContextScore block) now measures taller than
   Lead's (DataGrid + pipeline). justify-content:flex-end (already
   applied) only decides WHERE the leftover height sits inside Impact's
   box, it cannot shrink it -- that leftover is the actual gap. The
   architecture-safe lever is growing Impact's OWN natural height
   (padding/gap only, no new content, no text change) so less leftover
   height remains for flex-end to place at all. Tightened here instead
   of loosened: tile padding. */
.iclAI01ImpactTile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(244, 247, 248, .14);
  border-radius: 4px;
  background: var(--iclpv-black2, #101215);
}

/* ROUND 26 -- "these are AI agents" identity marker: a small technical
   chip glyph sitting inline with the (now-uniform) "Agent AI" label, on
   the SAME row/line as the label so tile height is unaffected ("do not
   make the tiles much larger"). One consistent icon across all 4 tiles
   on purpose -- differentiation already lives in the task/status lines
   below; a shared glyph reads as "same category of thing" (an agent),
   which is the actual ask, rather than 4 different pictograms turning
   this into a colorful feature-card grid. */
.iclAI01ImpactTileHead {
  display: flex;
  align-items: center;
  gap: 7px;
}

.iclAI01ImpactIcon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--iclpv-grey1, #AEB6BE);
}

.iclAI01ImpactWorker {
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontDisplay);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

/* ROUND 27 -- demoted to a secondary tag (was the tile's task description
   before the tile-header swap moved the function name into
   .iclAI01ImpactWorker as the primary title). Small/muted/mono, same
   language as the other small tags in this panel (.iclAI01ImpactStatus,
   .iclAI01ContextDemo) so it reads as metadata under the title, not a
   second line competing with it. */
.iclAI01ImpactTask {
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Same lone cyan status-dot accent as .iclAI01LeadStatus. */
.iclAI01ImpactStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.iclAI01ImpactStatus::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--iclpv-cyan, #00F2FF);
  box-shadow: 0 0 5px rgba(0, 242, 255, .7);
}

/* ROUND 26 -- "Efekt AI" result block redesign. The old inline
   label+thin-bar+value row packed a 6px track and an 8%-wide, fully
   pill-shaped (border-radius:3px on a 6px-tall bar = a half-circle cap
   at each end) AI segment into one cramped line. At the panel's real
   size that AI segment had no label touching it, no straight edge, and
   nothing else nearby -- an isolated, fully-rounded, colored blob
   floating in empty track space reads as a stray mark (a comma/
   apostrophe), not a data bar; separately, both bars were too thin to
   register as "the proof point" at a glance. Root cause of both
   complaints is the same shape.
   Fix stays on the ORIGINAL single-line-per-row layout (label+track+
   value inline) on purpose: the right panel's outer height is pinned to
   the "Kontekst firmy" tab (its tallest sibling, out of scope here), so
   there is no real height budget for a taller stacked layout without
   growing the whole panel. Everything visible gets bigger/bolder in
   place instead: a much thicker track, a hard pixel floor + gradient +
   glow on the AI segment so it reads as a deliberate short bar (never a
   loose dot), and roughly 40% bigger value type -- plus a new eyebrow
   line framing the whole block as "the agents' result". */
.iclAI01ImpactCompare {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--iclpv-hair, rgba(244, 247, 248, .08));
}

.iclAI01CompareEyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.iclAI01CompareEyebrowDot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--iclpv-copper, var(--iclsp-accent));
  box-shadow: 0 0 6px rgba(var(--iclsp-accent-rgb), .75);
}

.iclAI01CompareRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.iclAI01CompareRow:first-of-type { margin-top: 0; }

.iclAI01CompareLabel {
  flex: 0 0 66px;
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.iclAI01CompareTrack {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 4px;
  background: rgba(244, 247, 248, .1);
  overflow: hidden;
}

.iclAI01CompareBar {
  height: 100%;
  border-radius: 4px;
}

.iclAI01CompareBar--ai {
  width: 8%;
  min-width: 42px;
  background: linear-gradient(90deg, #FF7A33, var(--iclpv-copper, var(--iclsp-accent)));
  box-shadow: 0 0 10px rgba(var(--iclsp-accent-rgb), .5);
}

.iclAI01CompareBar--manual {
  width: 100%;
  background: var(--iclpv-grey2, #75808A);
}

.iclAI01CompareValue {
  flex: 0 0 auto;
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 15px;
  font-weight: 700;
}

.iclAI01CompareValue--ai {
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-size: 16px;
}

.iclAI01CompareResult {
  margin: 14px 0 0;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontBody);
  font-size: 14px;
  font-weight: 650;
}

/* ROUND 18 -- "Efekt AI" one-time flow animation. Restart technique
   matches the Lead pipeline / autoplay progress bar exactly (JS
   remove/reflow/re-add of .is-animating on the tab's own TabPanel, see
   icl-patterns.js). Text/DOM is fully present and static throughout --
   only decorative border/glow/bar-fill values animate, so nothing here
   can delay or hide the actual content. Final state after the sequence
   is byte-identical to the base (non-animating) rules above: the 4
   tiles' calm bordered look and the bars' normal resting widths, so
   there is no visual seam and no layout shift (only transform/box-shadow
   animate, never width/height/margin). */
@media (prefers-reduced-motion: no-preference) {
  /* ROUND 19 -- timing-only refinement (was flashing at .4s/.3s stagger).
     Each worker now gets a genuine .8s "receives -> processes -> reports"
     window, .6s apart, so tile 4 finishes at 2.6s. */
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01ImpactTile {
    animation: iclAI01ImpactTileActivate .8s ease;
  }
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01ImpactTile:nth-child(1) { animation-delay: 0s; }
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01ImpactTile:nth-child(2) { animation-delay: .6s; }
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01ImpactTile:nth-child(3) { animation-delay: 1.2s; }
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01ImpactTile:nth-child(4) { animation-delay: 1.8s; }

  /* Status dot now pulses near the END of its own tile's .8s window
     (delay = tile delay + .45s) instead of near the start -- reads as
     "reports completion" / handoff to the next worker, not a blink at
     the moment the tile activates. */
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01ImpactTile:nth-child(1) .iclAI01ImpactStatus::before { animation: iclAI01ImpactStatusPulse .4s ease; animation-delay: .45s; }
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01ImpactTile:nth-child(2) .iclAI01ImpactStatus::before { animation: iclAI01ImpactStatusPulse .4s ease; animation-delay: 1.05s; }
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01ImpactTile:nth-child(3) .iclAI01ImpactStatus::before { animation: iclAI01ImpactStatusPulse .4s ease; animation-delay: 1.65s; }
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01ImpactTile:nth-child(4) .iclAI01ImpactStatus::before { animation: iclAI01ImpactStatusPulse .4s ease; animation-delay: 2.25s; }

  /* Comparison bars now wait until the 4-worker sequence is nearly done
     (tile 4 finishes at 2.6s) and grow in noticeably slower, so the
     left-to-right build is actually visible instead of snapping in.
     Still scaleX/transform-origin:left -- no width animation, no layout
     impact. Sequence ends at 2.7 + 1.5 = 4.2s, inside the 4-4.5s target,
     comfortably clear of the unchanged 7s tab autoplay. */
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01CompareBar {
    transform-origin: left center;
    animation: iclAI01CompareBarGrow 1.5s ease-out both;
  }
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01CompareBar--ai { animation-delay: 2.5s; }
  .iclAI01TabPanel[data-tab="impact"].is-animating .iclAI01CompareBar--manual { animation-delay: 2.7s; }
}

@keyframes iclAI01ImpactTileActivate {
  0% { border-color: rgba(244, 247, 248, .14); box-shadow: none; }
  40% { border-color: var(--iclpv-copper, var(--iclsp-accent)); box-shadow: 0 0 0 1px rgba(var(--iclsp-accent-rgb), .25); }
  100% { border-color: rgba(244, 247, 248, .14); box-shadow: none; }
}

@keyframes iclAI01ImpactStatusPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 242, 255, .7); }
  50% { box-shadow: 0 0 11px rgba(0, 242, 255, 1); }
}

@keyframes iclAI01CompareBarGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Persistent footer zone: lives as a sibling of .iclAI01Tabs, not inside
   it, so it never changes with data-active-tab. Tightened (round 9) from
   margin-top:24px/padding-top:22px. */
.iclAI01PanelFooter {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--iclsp-accent-rgb), .22);
}

/* ROUND 13: was a solid var(--iclsp-accent) fill ("strongest visual weight in the
   panel") -- that visually competed with the real left-column CTA
   (a.iclpvBtnPrimary.iclAI01Cta), which must stay the only solid-copper
   primary action on the page. Redesigned as an INFORMATION / SYSTEM
   RESULT panel, not a button: dark base, a subtle copper tint layer, a
   thin copper accent line (left border, the classic "flagged system
   note" treatment already used for badges/labels elsewhere in this
   file) instead of a full fill. Same --iclpv-black2/--iclpv-copper
   tokens as the rest of the panel, no new colors. */
.iclAI01NextStep {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .28);
  border-left: 3px solid var(--iclpv-copper, var(--iclsp-accent));
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(var(--iclsp-accent-rgb), .08), transparent 60%),
    var(--iclpv-black2, #101215);
}

.iclAI01NextStepLabel {
  display: block;
  margin-bottom: 5px;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.iclAI01NextStepAction {
  margin: 0;
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontDisplay);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}

/* Restrained closing line -- the human-decision beat stays visually
   distinct from the CTA box above it. Tightened (round 9) from
   margin-top:16px/padding-top:14px. */
.iclAI01SignalNote {
  position: relative;
  z-index: 2;
  margin: 8px 0 0;
  padding-top: 6px;
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontBody, "IBM Plex Sans", "Segoe UI", Arial, sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ROUND 25 -- low-key sample-data disclosure for the whole panel (all 3
   tabs use the same fictional lead), sitting under the human-decision
   line so it reads as the last, quietest thing in the panel -- smaller
   and lower-opacity than .iclAI01ContextDemo (the existing per-tab
   marker), never a badge/box, no color change to any real content. */
.iclAI01PanelDemoTag {
  position: relative;
  z-index: 2;
  margin: 10px 0 0;
  text-align: right;
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .45;
}

/* =========================================================
   ROUND 30 -- PERSISTENT CHASSIS. Replaces round 28/29's "elements
   fade in from opacity:0 on a timer" model, which produced a real UX
   defect: since layout never changes but several regions sat at
   opacity:0 for seconds at a time, the panel had a large dead-looking
   black area for the first half of the sequence -- read as broken/
   unloaded content, not "premium".

   New model: the ENTIRE structure (identity strip, lead, all 4
   modules, context chips, score, result, recommendation) is ALWAYS
   painted, from the very first frame, at full layout size. Nothing is
   ever opacity:0 or display:none. Animation changes STATE (dormant ->
   active -> done), never EXISTENCE. Two state channels, both driven by
   plain attributes (JS orchestrates only setTimeout + attribute/text
   writes -- see setupAI01HeroFlow in icl-patterns.js; every visual
   response below lives in CSS):

     [data-module-state="dormant|active|done"]   -- one per rail module
     [data-ai01-flow-state="idle|processing|scoring|result|complete"]
                                                  -- one, on .iclAI01FlowBody

   Base markup ships with the FULLY RESOLVED end picture (real VAT/
   revenue/score/time values, "done" modules, "complete" identity) --
   exactly the existing "static markup already shows the lit state"
   convention used everywhere else in this file (autoplay progress,
   pipeline activation, etc). setupAI01HeroFlow's very first step is a
   "prime to dormant" pass (cache the real text, swap in placeholders,
   set idle/dormant attributes); reduced-motion/editor/no-JS visitors
   never run that pass, so they see the complete resolved chassis
   immediately -- satisfying "show full completed state, no essential
   info depends on animation" in the simplest possible way, with zero
   duplicated content and zero risk of an empty-looking panel at any
   point. The switcher moved to Section 01 is untouched by any of this. */
.iclAI01FlowBody {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- AI identity strip -----------------------------------------
   Permanent header for the whole sequence -- "AI Office is doing
   this", stated in plain language above the rail, not just implied by
   motion. Cyan dot is the one deliberate live/status signal; it pulses
   only while genuinely processing (reuses the existing context-tab
   dot-pulse keyframe) and sits still once complete. */
.iclAI01FlowIdentity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 11px;
  row-gap: 4px;
  margin-bottom: 4px;
}

.iclAI01FlowIdentityDot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 1px;
  border-radius: 50%;
  background: var(--iclpv-cyan, #00F2FF);
  box-shadow: 0 0 10px rgba(0, 242, 255, .85);
}

/* DESKTOP PREMIUM PASS -- this is the panel's one PERMANENT identity
   statement (spec: "AI OFFICE * PRACUJE must be the strongest identity
   moment"), visible above every scene, not just scene 02 -- sized up
   from a small mono eyebrow to a real sub-heading so it reads as a
   headline the moment the panel is in view, before any scene resolves. */
.iclAI01FlowIdentityMain {
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.iclAI01FlowIdentityStatus {
  display: inline-block;
  transition: opacity .2s ease, transform .2s ease;
}
.iclAI01FlowIdentityStatus[data-resolving] { opacity: 0; transform: translateY(2px); }

.iclAI01FlowIdentitySecondary {
  flex: 1 1 100%;
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontBody);
  font-size: 12.5px;
}

/* =========================================================
   STRUCTURAL UX PASS -- Hero right panel rebuilt from a tall
   vertical story (Round 30) into a FIXED-HEIGHT horizontal scene
   carousel so the whole Hero fits inside a normal laptop viewport
   (1366x768) without the story being cut in half. One DOM: the same
   four content blocks that used to stack vertically (lead / module
   rail / context+score / result+recommendation) are now re-parented
   into four .iclAI01HeroScene panels inside one .iclAI01HeroSceneTrack.

   Base CSS (below) shows all four scenes stacked and fully visible --
   this is what editor/no-JS/reduced-motion visitors get, satisfying
   "no essential info depends on animation" the same way every other
   component on this page already does. setupAI01HeroFlow (JS) adds
   .ai01-scenes-active to .iclAI01FlowBody ONLY when it actually starts
   the carousel (motion allowed + IntersectionObserver available, not
   in the block editor) -- only then do the rules further below turn
   the stack into a translateX carousel with a fixed-height viewport. */
.iclAI01HeroScenes {
  height: auto;
  overflow: visible;
}
.iclAI01HeroSceneTrack {
  display: block;
  width: 100%;
}
.iclAI01HeroScene {
  width: 100%;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--iclpv-hair, rgba(244, 247, 248, .08));
}
.iclAI01HeroScene:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.iclAI01HeroSceneLabel {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.iclAI01HeroSceneLabel::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
.iclAI01HeroSceneNav {
  display: none;
}

/* --- Enhanced (JS-confirmed motion) state: fixed-height carousel -- */
.iclAI01FlowBody.ai01-scenes-active .iclAI01HeroScenes {
  position: relative;
  height: 348px;
  overflow: hidden;
}
.iclAI01FlowBody.ai01-scenes-active .iclAI01HeroSceneTrack {
  display: flex;
  width: 400%;
  height: 100%;
  transform: translateX(calc(var(--ai01-scene, 0) * -25%));
  transition: transform .65s cubic-bezier(.65, 0, .35, 1);
}
.iclAI01FlowBody.ai01-scenes-active .iclAI01HeroScene {
  flex: 0 0 25%;
  width: 25%;
  height: 100%;
  padding: 2px 20px 2px 2px;
  margin-bottom: 0;
  border-bottom: 0;
  overflow: hidden;
  /* FIX: this used to be a plain block box while its content
     (.iclAI01SceneLead/.iclAI01Network/.iclAI01SceneContext) each
     claimed height:100% of THIS box -- double-counting the label's
     own height above them and silently overflowing the fixed-height
     scene by exactly the label's height, clipped by overflow:hidden
     with no visual warning. Flex column here + flex:1 on the content
     below (not height:100%) makes the label and content share the
     real available height correctly, with zero magic numbers. */
  display: flex;
  flex-direction: column;
}
.iclAI01FlowBody.ai01-scenes-active .iclAI01HeroSceneNav {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--iclpv-hair, rgba(244, 247, 248, .08));
}
/* Restored labeled tabs (was a row of bare "01".."04" number dots with
   no readable text and no sense that scenes rotate on a timer) -- each
   tab now carries its own short label plus a thin fill strip along its
   bottom edge that only animates on the currently active tab, syncing
   visually to the autoplay interval (setupAI01HeroFlow keeps this in
   step: it restarts the fill every time a scene becomes active, from
   either autoplay or a manual click). */
.iclAI01HeroSceneNavBtn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--iclpv-hair, rgba(244, 247, 248, .16));
  border-radius: 6px;
  background: transparent;
  color: var(--iclpv-grey2, #75808A);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.iclAI01HeroSceneNavNum {
  flex: 0 0 auto;
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 9.5px;
  font-weight: 800;
  color: inherit;
}
.iclAI01HeroSceneNavLabel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .01em;
  color: inherit;
}
.iclAI01HeroSceneNavBtn[aria-selected="true"] {
  border-color: var(--iclpv-copper, var(--iclsp-accent));
  background: rgba(var(--iclsp-accent-rgb), .14);
  color: var(--iclpv-copper, var(--iclsp-accent));
}
.iclAI01HeroSceneNavBtn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #FF7A33, var(--iclpv-copper, var(--iclsp-accent)));
}
@media (prefers-reduced-motion: no-preference) {
  .iclAI01HeroSceneNavBtn[aria-selected="true"].is-progressing::after {
    /* Each scene now has its own dwell time (SCENE_DURATIONS in JS) --
       JS writes --ai01-scene-duration on the flow root the moment it
       schedules that same duration's setTimeout, so this fill and the
       actual auto-advance can never drift apart. */
    animation: iclAI01NavProgress var(--ai01-scene-duration, 6.5s) linear forwards;
  }
}
@keyframes iclAI01NavProgress {
  from { width: 0; }
  to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .iclAI01HeroSceneNavBtn[aria-selected="true"]::after {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .iclAI01FlowBody.ai01-scenes-active .iclAI01HeroScenes {
    height: 420px;
  }
}

/* =========================================================
   FULL-PAGE SITE FACTORY BUILD -- three genuinely new,
   locally-namespaced components for the sections that had no
   existing shared-pattern equivalent (everything else on the new
   sections reuses .iclsp* shared primitives verbatim: iclspSection/
   iclspContainer/iclspSectionStart/iclspGrid/iclspCard/iclspSteps/
   iclspCoreMap/iclspCta -- see ai-office-content.html). Each block
   below is scoped under its own .iclAI01* class so nothing here can
   leak into or be affected by any other page. */

/* --- Section 03: "Digital Office Architecture" vertical hierarchy --
   Human -> ICL Controller -> specialist offices -> AI workers ->
   systems/data. A vertical copper spine connects five tiers; each
   tier is a numbered row, never a chart/org-chart library -- keeps
   the "premium via hierarchy/typography/spacing" rule instead of
   reaching for decoration. */
.iclAI01Arch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 34px;
}
.iclAI01Arch::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(var(--iclsp-accent-rgb), .55), rgba(var(--iclsp-accent-rgb), .12));
}
.iclAI01ArchTier {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--iclsp-line, rgba(154, 174, 180, .2));
}
.iclAI01ArchTier--last { border-bottom: 0; }
.iclAI01ArchTier::before {
  content: "";
  position: absolute;
  top: 26px;
  left: -34px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #050809;
  border: 2px solid var(--iclsp-accent, #ff6528);
}
.iclAI01ArchTierNum {
  flex: 0 0 auto;
  min-width: 26px;
  color: var(--iclsp-accent, #ff6528);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 12px;
  font-weight: 700;
}
.iclAI01ArchTierBody { flex: 1 1 auto; min-width: 0; }
.iclAI01ArchTierLabel {
  display: block;
  margin-bottom: 6px;
  color: var(--iclsp-text, #F4F7F8);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.iclAI01ArchTierDesc {
  margin: 0;
  max-width: 620px;
  color: var(--iclsp-muted, #a7b0b5);
  font-size: 16px;
  line-height: 1.5;
}
.iclAI01ArchChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.iclAI01ArchChip {
  padding: 6px 12px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .3);
  border-radius: 3px;
  background: rgba(var(--iclsp-accent-rgb), .06);
  color: var(--iclsp-text, #F4F7F8);
  font-size: 13px;
  font-weight: 600;
}

/* --- Structural UX pass: reversed flow ends at a human decision ---
   node (spec: SYSTEMY/DANE -> PRACOWNICY AI -> BIURA AI -> ICL
   CONTROLLER -> CZLOWIEK). The last tier gets three plain-text
   decision chips (APPROVE is visually primary as the natural default
   reading, the other two stay neutral) -- these are informational,
   not real controls, so they are <span>, not <button>. */
.iclAI01ArchDecision {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.iclAI01ArchDecisionChip {
  padding: 7px 14px;
  border: 1px solid var(--iclsp-line, rgba(154, 174, 180, .2));
  border-radius: 3px;
  color: var(--iclsp-muted, #a7b0b5);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: border-color .4s ease, background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.iclAI01ArchDecisionChip--primary {
  border-color: rgba(var(--iclsp-accent-rgb), .4);
  background: rgba(var(--iclsp-accent-rgb), .08);
  color: var(--iclsp-accent, #ff6528);
}
.iclAI01ArchDecision[data-arch-decision="ready"] .iclAI01ArchDecisionChip--primary {
  border-color: var(--iclsp-accent);
  background: rgba(var(--iclsp-accent-rgb), .16);
  box-shadow: 0 0 16px rgba(var(--iclsp-accent-rgb), .35);
}

/* Signature moment: a copper pulse travels down the spine once per
   scroll-entry, each tier marker lighting up as the pulse passes it,
   settling into a permanent glow on the final human decision node --
   "process, then destination". Purely decorative: every tier/chip is
   already fully readable without it (see base .iclAI01ArchTier* rules
   above), so reduced-motion/no-JS visitors lose nothing but the pulse
   itself (setupAI01Arch in icl-patterns.js never runs for them). */
.iclAI01ArchTier::before {
  transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.iclAI01ArchTier[data-tier-active]::before {
  background: #FF6A2A;
  border-color: #FF6A2A;
  box-shadow: 0 0 10px rgba(255, 106, 42, .8);
}
.iclAI01ArchTier[data-tier-active] .iclAI01ArchTierLabel {
  color: #FF6A2A;
  transition: color .3s ease;
}
.iclAI01ArchSignal {
  position: absolute;
  left: 1px;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FF6A2A;
  box-shadow: 0 0 10px rgba(255, 106, 42, .85);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .iclAI01ArchSignal.is-traveling {
    animation: iclAI01ArchSignalTravel 3.4s ease-in-out;
  }
}
@keyframes iclAI01ArchSignalTravel {
  0% { top: 0; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { top: calc(100% - 9px); opacity: 0; }
}

/* --- Section 09: Integrations chip grid + converging note ---------
   Deliberately lighter than .iclspCard (which is sized for headline
   3-up feature copy) -- eight category chips read better as a dense,
   scannable row than as eight tall cards. */
.iclAI01IntegGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.iclAI01IntegChip {
  padding: 12px 20px;
  border: 1px solid var(--iclsp-line, rgba(154, 174, 180, .2));
  background: rgba(255, 255, 255, .02);
  color: var(--iclsp-text, #F4F7F8);
  font-size: 15px;
  font-weight: 650;
}
.iclAI01IntegNote {
  margin: 28px 0 0;
  color: var(--iclsp-accent, #ff6528);
  font-size: 16px;
  font-weight: 650;
}

/* --- Section 12: FAQ -- native <details>/<summary>, zero JS -------
   Accessible and keyboard-operable for free; the only interactivity
   is the browser's own disclosure behavior. */
.iclAI01Faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--iclsp-line, rgba(154, 174, 180, .2));
}
.iclAI01FaqItem {
  border-bottom: 1px solid var(--iclsp-line, rgba(154, 174, 180, .2));
}
.iclAI01FaqSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
}
.iclAI01FaqSummary::-webkit-details-marker { display: none; }
.iclAI01FaqQuestion {
  color: var(--iclsp-text, #F4F7F8);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.iclAI01FaqIndicator {
  flex: 0 0 auto;
  color: var(--iclsp-accent, #ff6528);
  font-size: 20px;
  font-weight: 700;
  transition: transform .2s ease;
}
.iclAI01FaqItem[open] .iclAI01FaqIndicator { transform: rotate(45deg); }
.iclAI01FaqAnswer { padding: 0 4px 26px; }
.iclAI01FaqAnswer p {
  margin: 0;
  max-width: 720px;
  color: var(--iclsp-muted, #a7b0b5);
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .iclAI01ArchTierLabel { font-size: 17px; }
  .iclAI01IntegChip { padding: 10px 16px; font-size: 14px; }
  .iclAI01FaqQuestion { font-size: 17px; }
}

/* --- Processing rail: 4 real modules, not circles ---------------
   Always-visible bordered cards (per-spec "actual compact module/card
   shape", not "tiny weak circles"). dormant = muted/quiet (system is
   idle on this module); active = the pulse has just reached it (bright
   copper border+glow); done = calmed but still clearly lit (soft
   copper), matching "previous modules stay visible, calm down
   slightly, nothing disappears". */
.iclAI01FlowRail {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

/* DESKTOP PREMIUM PASS -- scene 02 is now the ONLY thing visible in the
   panel while active (the carousel replaced the old model where this
   rail had to share vertical space with lead/context/result), so it
   gets a real geometry upgrade instead of the compact dashboard-row
   treatment: bigger icon, bigger title, real card padding. */
.iclAI01FlowModule {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px 16px;
  border: 1px solid rgba(244, 247, 248, .16);
  border-radius: 10px;
  background: var(--iclpv-black2, #101215);
  text-align: center;
  opacity: .5;
  filter: saturate(.7);
  transition: opacity .4s ease, filter .4s ease, border-color .4s ease, box-shadow .4s ease, background-color .4s ease;
}

.iclAI01FlowModule[data-module-state="active"] {
  opacity: 1;
  filter: none;
  border-color: #FF6A2A;
  box-shadow: 0 0 0 1px rgba(255, 106, 42, .3), 0 0 26px rgba(255, 106, 42, .38);
  background: linear-gradient(180deg, rgba(255, 106, 42, .14), transparent 70%), var(--iclpv-black2, #101215);
}

.iclAI01FlowModule[data-module-state="done"] {
  opacity: 1;
  filter: none;
  border-color: rgba(217, 130, 87, .55);
}

.iclAI01FlowModuleHead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.iclAI01FlowModuleNum {
  position: absolute;
  top: -6px;
  left: -6px;
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  transition: color .4s ease;
}
[data-module-state="active"] .iclAI01FlowModuleNum,
[data-module-state="done"] .iclAI01FlowModuleNum {
  color: var(--iclpv-copper, var(--iclsp-accent));
}

.iclAI01FlowModuleIconWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(244, 247, 248, .2);
  color: var(--iclpv-grey1, #AEB6BE);
  transition: border-color .4s ease, color .4s ease, box-shadow .4s ease, background-color .4s ease;
}
.iclAI01FlowModuleIcon { width: 23px; height: 23px; }
[data-module-state="active"] .iclAI01FlowModuleIconWrap {
  border-color: #FF6A2A;
  color: #FF6A2A;
  background: rgba(255, 106, 42, .1);
  box-shadow: 0 0 16px rgba(255, 106, 42, .55);
}
[data-module-state="done"] .iclAI01FlowModuleIconWrap {
  border-color: var(--iclpv-copper, var(--iclsp-accent));
  color: var(--iclpv-copper, var(--iclsp-accent));
}

/* Small permanent "AI" marker per spec 4 -- reads instantly as "an AI
   agent did this step", independent of the icon/title. */
.iclAI01FlowModuleTag {
  position: absolute;
  top: -6px;
  right: -6px;
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .35);
  border-radius: 2px;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}

.iclAI01FlowModuleTitle {
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontDisplay);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}

/* Completed indicator per spec 4: a small dot ahead of the time value,
   grey while dormant/active, cyan (the panel's one live-signal color)
   once the module is genuinely done. */
.iclAI01FlowModuleTime {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.iclAI01FlowModuleTime::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(244, 247, 248, .25);
  transition: background .3s ease, box-shadow .3s ease;
}
[data-module-state="done"] .iclAI01FlowModuleTime::before {
  background: var(--iclpv-cyan, #00F2FF);
  box-shadow: 0 0 5px rgba(0, 242, 255, .7);
}

/* --- Connecting rail line: always visible ------------------------
   Dark copper at rest (never invisible), fills to soft copper once
   the pulse has passed through, per spec 5/6. Thickened + raised to
   icon-center height so it visually reads as one continuous system
   the modules sit on, not a hairline between boxes. */
.iclAI01FlowConnector {
  position: relative;
  flex: 0 0 22px;
  align-self: flex-start;
  margin-top: 43px;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--iclsp-accent-rgb), .2);
  transition: background-color .4s ease;
}
.iclAI01FlowConnector[data-connector-state="filled"] {
  background: #D98257;
}
.iclAI01FlowSignal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6A2A;
  box-shadow: 0 0 12px rgba(255, 106, 42, .9);
  opacity: 0;
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: no-preference) {
  .iclAI01FlowSignal.is-traveling {
    animation: iclAI01PipelineSignalTravel .6s ease;
  }
  .iclAI01FlowIdentityDot {
    animation: iclAI01ContextDotPulse 2.6s ease infinite;
  }
  .iclAI01FlowBody[data-ai01-flow-state="complete"] .iclAI01FlowIdentityDot {
    animation: none;
  }
}

/* --- Context: always-visible chips, values resolve in place ------
   Container/key never move or fade; only the VALUE swaps + flashes
   (opacity/translate, per spec 7), and only the value dims while it
   still holds a "-" placeholder. */
.iclAI01FlowContext {
  padding-top: 14px;
  border-top: 1px solid var(--iclpv-hair, rgba(244, 247, 248, .08));
}

.iclAI01FlowTags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.iclAI01FlowTag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .3);
  border-radius: 4px;
  background: rgba(var(--iclsp-accent-rgb), .07);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.iclAI01FlowTagKey { color: var(--iclpv-grey2, #75808A); }

.iclAI01FlowTagValue {
  display: inline-block;
  color: var(--iclpv-white, #F4F7F8);
  transition: opacity .25s ease, transform .25s ease, color .3s ease;
}
.iclAI01FlowTagValue[data-value-state="pending"] { color: var(--iclpv-grey2, #75808A); opacity: .55; }
.iclAI01FlowTagValue[data-resolving] { opacity: 0; transform: translateY(3px); }

/* Score: visible from frame 1 (spec 8). Bar width is a CSS custom
   property so JS only ever writes a number, never inline geometry --
   "prefer transform/opacity", "CSS controls visual state". Default
   (no inline override, i.e. reduced-motion/editor/no-JS) resolves to
   the real 82%. */
.iclAI01FlowScoreRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}
.iclAI01FlowScoreLabel {
  flex: 1 1 100%;
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.iclAI01FlowScoreBarRow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 130px;
}
.iclAI01FlowScoreTrack {
  flex: 1 1 auto;
  max-width: none;
  height: 14px;
  border-radius: 7px;
  background: rgba(244, 247, 248, .1);
  overflow: hidden;
}
.iclAI01FlowScoreBar {
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, #FF7A33, var(--iclpv-copper, var(--iclsp-accent)));
  box-shadow: 0 0 14px rgba(var(--iclsp-accent-rgb), .45);
  transform-origin: left center;
  transform: scaleX(var(--flow-score-pct, .82));
  transition: transform 1s ease-out;
}
.iclAI01FlowScoreValue {
  flex: 0 0 auto;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-weight: 800;
  font-size: 24px;
  transition: opacity .2s ease;
}
.iclAI01FlowScoreValue[data-value-state="pending"] { color: var(--iclpv-grey2, #75808A); }
.iclAI01FlowScoreValue[data-resolving] { opacity: 0; }

/* --- Result: the strongest sales moment (spec 9) -----------------
   Dormant label always reads "Wynik pracy AI Office"; RĘCZNIE's bar is
   full-width and its value static from frame 1 (a known constant, not
   something AI resolves) -- only the AI row's bar/value and the note
   change state, so the "~15 min baseline already there, watch AI's
   number land" contrast is legible even before completion. */
.iclAI01FlowResult {
  padding-top: 16px;
  border-top: 1px solid var(--iclpv-hair, rgba(244, 247, 248, .08));
}
.iclAI01FlowResultLabel {
  display: block;
  margin-bottom: 14px;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.iclAI01FlowResultRow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.iclAI01FlowResultRow:first-of-type { margin-top: 0; }
.iclAI01FlowResultKey {
  flex: 0 0 66px;
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.iclAI01FlowResultTrack {
  flex: 1 1 auto;
  height: 14px;
  border-radius: 7px;
  background: rgba(244, 247, 248, .1);
  overflow: hidden;
}
.iclAI01FlowResultBar { height: 100%; border-radius: 7px; }
.iclAI01FlowResultBar--ai {
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--flow-ai-pct, .08));
  background: linear-gradient(90deg, #FF7A33, var(--iclpv-copper, var(--iclsp-accent)));
  box-shadow: 0 0 14px rgba(var(--iclsp-accent-rgb), .55);
  transition: transform 1s ease-out;
}
.iclAI01FlowResultBar--manual {
  width: 100%;
  background: var(--iclpv-grey2, #75808A);
}
.iclAI01FlowResultValue {
  flex: 0 0 auto;
  min-width: 74px;
  text-align: right;
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-weight: 700;
  font-size: 17px;
  transition: opacity .2s ease;
}
.iclAI01FlowResultValue--ai { color: var(--iclpv-copper, var(--iclsp-accent)); font-size: 28px; font-weight: 800; }
.iclAI01FlowResultValue[data-resolving] { opacity: 0; }
.iclAI01FlowResultNote {
  margin: 18px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .3);
  border-radius: 4px;
  background: rgba(var(--iclsp-accent-rgb), .08);
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontBody);
  font-size: 15px;
  font-weight: 700;
  opacity: 1;
  transition: opacity .5s ease;
}
.iclAI01FlowBody[data-ai01-flow-state="idle"] .iclAI01FlowResultNote,
.iclAI01FlowBody[data-ai01-flow-state="processing"] .iclAI01FlowResultNote,
.iclAI01FlowBody[data-ai01-flow-state="scoring"] .iclAI01FlowResultNote {
  opacity: .35;
}

/* --- Recommendation: dormant outline -> activated card (spec 10) --
   Reuses .iclAI01PanelFooter/.iclAI01NextStep/.iclAI01SignalNote
   verbatim (same classes as the moved dashboard's own footer) --
   opacity/filter only, so the border/copper-accent/typography those
   classes already define never has to be duplicated here. */
.iclAI01PanelFooter[data-flow-el="action"] {
  opacity: 1;
  transition: opacity .5s ease, filter .5s ease;
}
.iclAI01FlowBody[data-ai01-flow-state="idle"] .iclAI01PanelFooter[data-flow-el="action"],
.iclAI01FlowBody[data-ai01-flow-state="processing"] .iclAI01PanelFooter[data-flow-el="action"],
.iclAI01FlowBody[data-ai01-flow-state="scoring"] .iclAI01PanelFooter[data-flow-el="action"],
.iclAI01FlowBody[data-ai01-flow-state="result"] .iclAI01PanelFooter[data-flow-el="action"] {
  opacity: .5;
  filter: saturate(.7);
}

/* Sub-heading introducing the moved demonstrator inside "01 ·
   Automatyzacja biura", sitting after the section's own 3-card intro. */
.iclAI01FlowDemo {
  margin-top: clamp(56px, 6vw, 88px);
}

/* Mobile baseline safety only (per-request: desktop direction first,
   no mobile polish pass yet) -- stack the rail like the moved
   dashboard's own pipeline already does at this tier, hide the
   connectors (a diagonal/vertical rail reads worse than no line at
   this width), let each module be a full-width card. */
@media (max-width: 640px) {
  .iclAI01FlowRail { flex-direction: column; gap: 8px; }
  .iclAI01FlowConnector { display: none; }
}

/* Same two breakpoints Smart Home's own Hero uses (1180px stack to one
   column + Lead reverts to inline, 700px mobile tightening) -- verbatim
   structure, adapted to iclAI01* selectors. */
@media (max-width: 1180px) {
  .iclAI01Hero { min-height: 0; }
  .iclAI01Container { width: min(100% - 128px, 900px); padding: 58px 0 70px; grid-template-columns: 1fr; gap: 48px; }
  /* ROUND 21 -- explicit min-width:0 on both grid children: a 1-column
     grid item's default min-width:auto can still force it to at least
     its content's intrinsic minimum, which is exactly how a single
     unbreakable child (see the .iclAI01KickerLabel fix below) forces
     the whole row wider than the viewport. Belt-and-suspenders with
     that fix, not a substitute for it. */
  .iclAI01Copy { max-width: 760px; min-width: 0; }
  .iclAI01Panel { max-width: none; justify-self: stretch; min-width: 0; }
  p.iclAI01Lead { margin-block-start: 28px; }
  .iclAI01LeadLine { display: inline; }
}

@media (max-width: 700px) {
  .iclAI01Container { width: min(100% - 48px, 560px); padding: 44px 0 58px; gap: 38px; }
  .iclAI01Kicker { margin-bottom: 20px; }
  /* ROUND 21 -- this was the actual cause of the reported 309px overflow:
     .iclAI01KickerLabel is a flex:0 0 auto item with white-space:nowrap
     (needed on desktop so the eyebrow + hairline sit on one tidy line).
     At narrow widths "POZIOM -2 · AUTOMATYZACJA BIZNESU" alone exceeds
     the available content width, and flex-shrink:0 means it never
     yields -- confirmed the ONLY white-space:nowrap rule anywhere in the
     AI Office section (grepped). Fix: let it participate in flex
     shrink/wrap instead of forcing its own intrinsic width; give the
     decorative line a small fixed share instead of competing for growth.
     Text itself is untouched -- it now wraps to a second line on the
     narrowest widths instead of ever overflowing. */
  .iclAI01KickerLabel { white-space: normal; flex: 1 1 auto; min-width: 0; }
  .iclAI01KickerLine { flex: 0 1 24px; }
  h1.iclAI01Title { font-size: var(--icl-hero-h1-size-compact-mobile); line-height: var(--icl-hero-h1-lh); }
  p.iclAI01Lead { margin-block-start: 24px; font-size: var(--icl-hero-lead-size-mobile); line-height: var(--icl-hero-lead-lh-mobile); }
  .iclAI01Actions { width: 100%; flex-direction: column; align-items: stretch; margin-top: 28px; }
  /* CTA: explicit width/box-sizing safety on top of the stretch above --
     belt-and-suspenders per the responsive-pass checklist, harmless if
     already redundant with .iclpvBtn's own box model. */
  .iclAI01Cta { width: 100%; max-width: 100%; box-sizing: border-box; }
  /* One card at a time is already the mechanism at every width (see the
     [data-active-tab] rules) -- this only keeps the tab bar itself
     comfortable at narrow widths. */
  .iclAI01TabBtn { padding: 7px 10px; font-size: 10px; }
  /* Mobile collapses the 2-column data grid to 1 column (round 9) --
     desktop and tablet (>700px, where .iclAI01Panel already has more
     room once Hero itself stacks at the 1180px breakpoint above) keep
     2 columns. */
  .iclAI01DataGrid { grid-template-columns: 1fr; }
  /* Same 1-column collapse for the "Efekt AI" tile grid. */
  .iclAI01ImpactGrid { grid-template-columns: 1fr; }
  .iclAI01PipelineTitle { font-size: 12px; }
  .iclAI01PipelineSecondary { font-size: 10px; }
  .iclAI01PipelineConnector { flex-basis: 12px; }
  .iclAI01LeadFlowResultValue { font-size: 18px; }
  /* "Ocena AI" module (round 20) reuses the same font-size scale as the
     Lead pipeline it sits alongside for consistent mobile typography. */
  .iclAI01ContextScoreLabel { font-size: 10px; }
  .iclAI01ContextScoreValue { font-size: 14px; }
}

/* ROUND 21 -- deep mobile recomposition, matching Smart Home's own
   .icl-smart-core @media(max-width:640px) principle exactly: the SAME
   markup/content, recomposed geometry -- no duplicate DOM, no second
   JS system. Nested inside the 700px tier (Hero is already single-
   column and mobile-typed by then); this tier is specifically about the
   right panel's internal density and the Lead pipeline's orientation. */
@media (max-width: 640px) {
  /* Slightly tighter floor than the desktop clamp(18px,2.1vw,24px)
     already provides on its own. */
  .iclAI01Panel { padding: clamp(14px, 4vw, 18px); }

  /* Tablist: was flex-wrap (already non-overflowing, just an uneven
     2+1 wrap) -- an explicit 3-column grid keeps all three buttons even
     and, combined with white-space:normal, lets a longer label ("Efekt
     AI" already short, but "Kontekst firmy" is the long one) wrap to a
     second line instead of ever being forced wider than its own column. */
  .iclAI01TabNav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .iclAI01TabBtn { min-width: 0; max-width: 100%; white-space: normal; text-align: center; padding: 6px 4px; font-size: 9.5px; line-height: 1.25; }

  /* ROUND 22 -- Lead pipeline: the round-21 thin vertical-line recompose
     read as a squeezed/collapsed desktop flow at real narrow widths
     (cramped labels, awkward wraps, a compressed connector). Replaced
     with three separate stacked cards -- same elements, same classes,
     no duplicated markup, no new wrapper: each existing
     .iclAI01PipelineStage becomes a full-width bordered card (matching
     the panel's existing "bordered compact unit" language already used
     by .iclAI01ImpactTile), stacked in one column with real gap between
     them. Num+Title share a header row, Secondary/Task sit below it --
     achieved via CSS Grid placement on the existing 4 children (Num/
     Title/Secondary/Task), not by reordering the DOM. The connecting
     line reads as "cramped timeline" at this width per explicit
     instruction, so it's hidden (display:none on the aria-hidden-only
     decorative connector -- no real content lost) rather than
     recomposed again. */
  .iclAI01Pipeline { flex-direction: column; gap: 10px; }
  .iclAI01PipelineStage {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 10px;
    row-gap: 3px;
    padding: 10px 12px;
    border: 1px solid rgba(244, 247, 248, .14);
    border-radius: 4px;
    background: rgba(244, 247, 248, .03);
  }
  .iclAI01PipelineNum { grid-column: 1; grid-row: 1; align-self: center; margin-bottom: 0; }
  .iclAI01PipelineTitle { grid-column: 2; grid-row: 1; align-self: center; }
  .iclAI01PipelineSecondary { grid-column: 2; grid-row: 2; }
  .iclAI01PipelineTask { grid-column: 2; grid-row: 3; }
  .iclAI01PipelineConnector { display: none; }
  /* Avoid boxes-within-a-box: each stage is now its own bordered card,
     so the outer .iclAI01LeadFlow module frame (full border + gradient
     fill, designed for the desktop single-row layout) is thinned to the
     same "top separator only" treatment .iclAI01ContextScore already
     uses -- one consistent mobile module language, not competing
     borders. */
  .iclAI01LeadFlow {
    padding: 14px 0 0;
    margin-top: 14px;
    border: none;
    border-top: 1px solid rgba(var(--iclsp-accent-rgb), .22);
    border-radius: 0;
    background: none;
  }
  /* Mobile-only: stage 2's secondary line ("Asystent sprzedaży") is
     dropped so the card reads as "AI ANALIZUJE / dane + priorytet" --
     desktop keeps both lines (this rule is scoped to the ≤640px tier
     only, and only targets stage 2's own Secondary span). */
  .iclAI01PipelineStage[data-stage="2"] .iclAI01PipelineSecondary { display: none; }
  .iclAI01PipelineStage[data-stage="2"] .iclAI01PipelineTask { grid-row: 2; }

  /* "Ocena AI": label above its result/bar instead of the desktop
     space-between row, and the bar's 120px desktop cap is dropped so it
     actually uses the available width instead of looking token-sized. */
  .iclAI01ContextScoreRow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .iclAI01ContextScoreBarRow { width: 100%; justify-content: flex-start; }
  .iclAI01ContextScoreTrack { flex: 1 1 auto; max-width: none; }

  .iclAI01PanelFooter { padding-top: 8px; }
  .iclAI01NextStep { padding: 10px 12px; }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  /* ROUND 22 -- with the connecting line hidden (cards recomposition
     above), "signal travels along the connector" no longer applies;
     the activation itself now reads directly on each card -- a brief
     copper border/glow pulse per card, in the same 01->02->03 sequence,
     reusing the exact .iclAI01ImpactTileActivate keyframe already
     proven for "Efekt AI"'s worker cards (same restrained language,
     same file) rather than inventing a new one. Resting layout is
     unaffected either way: all 3 cards stay visible and stacked
     throughout -- this only pulses border-color/box-shadow briefly,
     never opacity/display, so it is progressive activation, never
     tab-like switching. */
  .iclAI01Pipeline.is-animating .iclAI01PipelineStage {
    animation: iclAI01ImpactTileActivate .5s ease;
  }
  .iclAI01Pipeline.is-animating .iclAI01PipelineStage[data-stage="1"] { animation-delay: 0s; }
  .iclAI01Pipeline.is-animating .iclAI01PipelineStage[data-stage="2"] { animation-delay: .6s; }
  .iclAI01Pipeline.is-animating .iclAI01PipelineStage[data-stage="3"] { animation-delay: 1.2s; }
  /* The desktop Num-circle pulse (separate rule, nth-child-timed 0/1/2s)
     would otherwise run alongside this at a mismatched cadence -- the
     card-level pulse above is the single activation signal at this
     width, so the Num-specific one is turned off here. */
  .iclAI01Pipeline.is-animating .iclAI01PipelineNum {
    animation: none;
  }
}

/* ROUND 21 -- extra-small protection only (309-360px class devices).
   Structure is already correct from the 640px tier above; this only
   tightens a few floors further so nothing feels cramped-to-clipping. */
@media (max-width: 400px) {
  .iclAI01Panel { padding: 12px; }
  .iclAI01TabBtn { padding: 5px 3px; font-size: 9px; }
  .iclAI01LeadKey,
  .iclAI01LeadValue,
  .iclAI01ContextScoreLabel,
  .iclAI01ContextScoreSignals {
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   RIGHT PANEL REPLACEMENT -- the 4 Hero scenes are now four distinct
   visual compositions instead of four dashboard-style variants of the
   same key/value layout. Each scene has exactly ONE focal element:
   Scene 1 = the lead card, Scene 2 = the AI Office network, Scene 3 =
   the 82/100 ring, Scene 4 = the ~97% headline stat. Old .iclAI01Flow*
   classes above (FlowRail/FlowModule/FlowContext/FlowResult/etc.) are
   no longer referenced by the Hero markup -- left in place rather than
   removed, since confirming they're truly unused elsewhere would mean
   auditing Section 02+, which is out of scope for this pass. */

/* --- Scene 01: ZGLOSZENIE -- one lead card + a signal leaving it --- */
.iclAI01SceneLead {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1 1 auto;
  min-height: 0;
}
.iclAI01SceneLeadCard {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 26px 28px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .3);
  border-left: 3px solid var(--iclpv-copper, var(--iclsp-accent));
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(var(--iclsp-accent-rgb), .1), transparent 65%), var(--iclpv-black2, #101215);
  box-shadow: 0 20px 50px -30px rgba(var(--iclsp-accent-rgb), .5);
}
.iclAI01SceneLeadEyebrow {
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.iclAI01SceneLeadCompany {
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontDisplay);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
}
.iclAI01SceneLeadMeta {
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontBody);
  font-size: 14.5px;
}
.iclAI01SceneLeadPriority {
  align-self: flex-start;
  margin-top: 2px;
  padding: 5px 13px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .5);
  border-radius: 3px;
  background: rgba(var(--iclsp-accent-rgb), .14);
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.iclAI01SceneLeadSignal {
  position: relative;
  flex: 1 1 auto;
  min-width: 50px;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--iclsp-accent-rgb), .55), rgba(var(--iclsp-accent-rgb), 0));
}
.iclAI01SceneLeadSignalDot {
  position: absolute;
  top: 50%;
  left: 0;
  /* Refinement: slightly larger, brighter copper core + a soft outer
     halo (two box-shadow layers) so the impulse reads as one clear,
     premium pulse instead of a small dot. */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF6A2A;
  box-shadow: 0 0 14px rgba(255, 106, 42, .95), 0 0 30px rgba(255, 106, 42, .4);
  opacity: 0;
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: no-preference) {
  .iclAI01SceneLeadSignal.is-traveling .iclAI01SceneLeadSignalDot {
    /* Rhythm: ~0.5s lead-card settle (the delay) before the impulse
       starts, ~2.9s slower travel, landing with time left in the 4.2s
       scene for a short completed hold. "both" keeps it hidden through
       the delay and holds the final (invisible) frame after. */
    animation: iclAI01SceneLeadSignalTravel 2.9s ease-in-out .5s both;
  }
}
@keyframes iclAI01SceneLeadSignalTravel {
  0% { left: 0%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* --- Scene 02: AI OFFICE PRACUJE -- hub + org-chart network, not ---
   four cards. Hub broadcasts down a stem to a rail, which drops to 4
   nodes; each node wakes in sequence via [data-node-state] on replay. */
.iclAI01Network {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 2px;
}
.iclAI01NetworkHub {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 24px;
  border: 1px solid var(--iclpv-copper, var(--iclsp-accent));
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(var(--iclsp-accent-rgb), .18), rgba(var(--iclsp-accent-rgb), .04));
  box-shadow: 0 0 22px rgba(var(--iclsp-accent-rgb), .35);
}
.iclAI01NetworkHubLabel {
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.iclAI01NetworkStem {
  display: block;
  flex: 0 0 auto;
  width: 2px;
  height: 16px;
  background: linear-gradient(180deg, var(--iclpv-copper, var(--iclsp-accent)), rgba(217, 130, 87, .4));
}
.iclAI01NetworkRail {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 560px;
  height: 2px;
  background: rgba(217, 130, 87, .35);
}
.iclAI01NetworkNodes {
  display: flex;
  width: 100%;
  max-width: 560px;
  margin-top: 16px;
  flex: 0 0 auto;
}
.iclAI01NetworkNode {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  text-align: center;
}
.iclAI01NetworkNodeDrop {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 2px;
  height: 16px;
  background: rgba(217, 130, 87, .3);
  transform: translateX(-50%);
  transition: background-color .4s ease;
}
.iclAI01NetworkNodeDot {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--iclpv-black2, #101215);
  border: 2px solid rgba(217, 130, 87, .5);
  transform: translateX(-50%);
  transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.iclAI01NetworkNodeTitle {
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontDisplay);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}
.iclAI01NetworkNodeTime {
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 650;
  transition: color .4s ease;
}
[data-node-state="dormant"] .iclAI01NetworkNodeDrop { background: rgba(217, 130, 87, .15); }
[data-node-state="dormant"] .iclAI01NetworkNodeDot { border-color: rgba(217, 130, 87, .25); opacity: .6; }
[data-node-state="dormant"] .iclAI01NetworkNodeTitle { opacity: .55; }
[data-node-state="active"] .iclAI01NetworkNodeDrop { background: #FF6A2A; box-shadow: 0 0 8px rgba(255, 106, 42, .6); }
[data-node-state="active"] .iclAI01NetworkNodeDot { border-color: #FF6A2A; background: #FF6A2A; box-shadow: 0 0 12px rgba(255, 106, 42, .85); }
[data-node-state="done"] .iclAI01NetworkNodeDrop { background: #D98257; }
[data-node-state="done"] .iclAI01NetworkNodeDot { border-color: var(--iclpv-copper, var(--iclsp-accent)); background: var(--iclpv-copper, var(--iclsp-accent)); box-shadow: 0 0 6px rgba(var(--iclsp-accent-rgb), .5); }
[data-node-state="done"] .iclAI01NetworkNodeTime { color: var(--iclpv-cyan, #00F2FF); }

/* Micro refinement: the stem/rail read as static wiring without this --
   a slow opacity breathe is enough to say "live", no traveling dot
   needed (that would compete with the node-wake sequence). The stage
   connector (hub -> current agent work -> progress) shares the same
   breathe so the whole chain reads as one live signal. */
@media (prefers-reduced-motion: no-preference) {
  .iclAI01NetworkStem,
  .iclAI01NetworkRail,
  .iclAI01NetworkStageConnector {
    animation: iclAI01NetworkLinePulse 2.4s ease-in-out infinite;
  }
}
@keyframes iclAI01NetworkLinePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* Refinement: the empty gap between the node row and the progress
   module now carries one small live-status line (current specialist
   stage, synced to the same progress ticks that drive the bar/nodes),
   connected to the hub above it by a short, restrained copper line --
   no new card, no extra dashboard weight. */
.iclAI01NetworkStageConnector {
  display: block;
  flex: 0 0 auto;
  width: 2px;
  height: 20px;
  margin-top: 12px;
  background: linear-gradient(180deg, rgba(255, 106, 42, .5), rgba(255, 106, 42, .05));
}
.iclAI01NetworkStageStatus {
  flex: 0 0 auto;
  margin: 8px 0 0;
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}

/* Micro refinement: scene 02's lower area was empty once nodes stopped
   growing to fill it -- this progress module docks to the bottom of
   the fixed-height scene via margin-top:auto, using exactly the
   leftover space instead of a fixed guessed offset. One bar, one
   status line -- deliberately not a second row of boxes. */
.iclAI01NetworkProgress {
  flex: 0 0 auto;
  width: 100%;
  max-width: 560px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--iclpv-hair, rgba(244, 247, 248, .08));
}
.iclAI01NetworkProgressLabel {
  display: block;
  margin-bottom: 8px;
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.iclAI01NetworkProgressBarRow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.iclAI01NetworkProgressBarLabel {
  flex: 0 0 auto;
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.iclAI01NetworkProgressTrack {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 4px;
  background: rgba(244, 247, 248, .1);
  overflow: hidden;
}
.iclAI01NetworkProgressBar {
  position: relative;
  /* POSTĘP PRACY AI OFFICE = completion of this processing stage, so it
     runs all the way to 100% (not a partial figure) -- JS grows this
     from 0 across the scene's visible duration (--progress-pct).
     Default 100% covers editor/no-JS/reduced-motion. */
  width: var(--progress-pct, 100%);
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #FF7A33, var(--iclpv-copper, var(--iclsp-accent)));
  box-shadow: 0 0 10px rgba(var(--iclsp-accent-rgb), .45);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .iclAI01NetworkProgressBar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: translateX(-100%);
    animation: iclAI01ProgressSweep 2.2s ease-in-out infinite;
  }
}
@keyframes iclAI01ProgressSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.iclAI01NetworkProgressValue {
  flex: 0 0 auto;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 13px;
  font-weight: 800;
}
.iclAI01NetworkProgressStatus {
  margin: 10px 0 0;
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  letter-spacing: .04em;
}

/* --- Scene 03: KONTEKST GOTOWY -- facts converge into one ring ----- */
.iclAI01SceneContext {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  gap: 16px;
}
.iclAI01ContextFacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}
.iclAI01ContextFact {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.iclAI01ContextFactKey {
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.iclAI01ContextFactValue {
  color: var(--iclpv-white, #F4F7F8);
  font-size: 12.5px;
  font-weight: 650;
}
/* Refinement: the 4 source facts resolve one at a time as the score
   builds (JS swaps "-" for the real value in sync with the donut) --
   each just gets a brief copper accent on arrival, then settles into
   its normal color and never disappears again. Color/text-shadow only,
   so there's no opacity dip to look like a rendering glitch. */
@media (prefers-reduced-motion: no-preference) {
  .iclAI01ContextFactValue.is-waking {
    animation: iclAI01FactWake .6s ease;
  }
}
@keyframes iclAI01FactWake {
  0% { color: var(--iclpv-copper, var(--iclsp-accent)); text-shadow: 0 0 12px rgba(var(--iclsp-accent-rgb), .7); }
  100% { color: var(--iclpv-white, #F4F7F8); text-shadow: none; }
}
.iclAI01ContextGauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.iclAI01ContextGaugeRing {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  /* Refinement: was a hardcoded "0% 82%" stop -- JS now drives
     --gauge-pct on scene entry so the ring genuinely sweeps up from 0,
     not just fades/scales in already at its final value. Default 82%
     keeps editor/no-JS/reduced-motion showing the correct end state. */
  background: conic-gradient(var(--iclpv-copper, var(--iclsp-accent)) 0% var(--gauge-pct, 82%), rgba(244, 247, 248, .1) var(--gauge-pct, 82%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 32px rgba(var(--iclsp-accent-rgb), .28);
}
@media (prefers-reduced-motion: no-preference) {
  .iclAI01ContextGaugeRing.is-revealing {
    animation: iclAI01GaugeReveal .6s ease;
  }
}
@keyframes iclAI01GaugeReveal {
  0% { transform: scale(.82); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.iclAI01ContextGaugeInner {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  background: var(--iclpv-black2, #101215);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.iclAI01ContextGaugeValue {
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}
.iclAI01ContextGaugeMax {
  margin-top: 2px;
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 11px;
}
.iclAI01ContextGaugeLabel {
  color: var(--iclpv-grey1, #AEB6BE);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}

/* --- Scene 04: CZLOWIEK DECYDUJE -- compare -> hero stat -> handoff */
.iclAI01SceneDecision {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.iclAI01DecisionCompare {
  display: flex;
  align-items: center;
  gap: 20px;
}
.iclAI01DecisionCompareItem { text-align: center; }
.iclAI01DecisionCompareLabel {
  display: block;
  margin-bottom: 4px;
  color: var(--iclpv-grey2, #75808A);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.iclAI01DecisionCompareValue {
  color: var(--iclpv-white, #F4F7F8);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 20px;
  font-weight: 700;
}
.iclAI01DecisionCompareValue--ai {
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-size: 28px;
  font-weight: 800;
}
.iclAI01DecisionCompareVs {
  color: var(--iclpv-grey2, #75808A);
  font-size: 11px;
  text-transform: uppercase;
}
.iclAI01DecisionHero {
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid var(--iclpv-hair, rgba(244, 247, 248, .08));
  border-bottom: 1px solid var(--iclpv-hair, rgba(244, 247, 248, .08));
  text-align: center;
}
/* Refinement: scene 4's containers now stay visible at all times --
   only the VALUES inside them count up (AI time, manual time, the
   payoff percentage, all via the same rAF counter). Once a value
   finishes counting it gets a brief brightness pulse to say "this just
   landed", never an opacity-from-0 reveal, so replaying the scene can't
   produce the old disappear/reappear flash. */
@media (prefers-reduced-motion: no-preference) {
  .is-value-pulse {
    animation: iclAI01ValuePulse .7s ease;
  }
}
@keyframes iclAI01ValuePulse {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.45); }
}
.iclAI01DecisionHeroValue {
  display: block;
  color: var(--iclpv-copper, var(--iclsp-accent));
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 24px rgba(var(--iclsp-accent-rgb), .4);
}
.iclAI01DecisionHeroLabel {
  display: block;
  margin-top: 6px;
  color: var(--iclpv-white, #F4F7F8);
  font-size: 13.5px;
  font-weight: 600;
}
.iclAI01DecisionHandoff {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Refinement: this reads as a process (AI prepares -> Człowiek
   decyduje), not two competing buttons -- AI is the active operational
   actor, so it now carries the stronger, filled pill; Człowiek is the
   final approval step, so it's a clear but visually secondary outline.
   Previously this was inverted (AI looked muted/disabled, Człowiek
   looked like the primary CTA), which sent the wrong "who does the
   work" signal. */
.iclAI01DecisionHandoffNode {
  padding: 5px 14px;
  border: 1px solid var(--iclpv-copper, var(--iclsp-accent));
  border-radius: 14px;
  background: var(--iclpv-copper, var(--iclsp-accent));
  color: var(--iclpv-black2, #101215);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(var(--iclsp-accent-rgb), .35);
}
.iclAI01DecisionHandoffNode--human {
  background: transparent;
  border-color: var(--iclpv-hair, rgba(244, 247, 248, .22));
  color: var(--iclpv-grey1, #AEB6BE);
  font-weight: 700;
  box-shadow: none;
}
.iclAI01DecisionHandoffLine {
  position: relative;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--iclpv-copper, var(--iclsp-accent)), var(--iclpv-grey2, #75808A));
}
.iclAI01DecisionHandoffLine::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--iclpv-grey2, #75808A);
  border-right: 1px solid var(--iclpv-grey2, #75808A);
  transform: translate(-1px, -50%) rotate(45deg);
}

/* =========================================================
   STRUCTURAL UX PASS -- card density. .iclspCard/.iclspCardNo are
   SHARED site-pattern primitives (also used by icl-core/blog/offer-page/
   standard-page), so their own definitions stay untouched -- this is a
   page-scoped override, keyed off the root wrapper class this content
   root already carries (.iclspPageContent.iclspThemeOrange, unique to
   ai-office-content.html), not a global edit. Every .iclspCard grid on
   THIS page ("To nie kolejny CRM", Sales Office intro, Business
   Outcomes) was visibly taller than its actual text needed -- almost
   entirely from the shared .iclspCardNo{margin-bottom:64px} spacer,
   sized for the shorter numeric badges used elsewhere, plus a
   min-height meant for longer copy than these short cards carry. */
.iclspPageContent.iclspThemeOrange .iclspCard {
  min-height: 0;
  padding: 24px 26px;
}
.iclspPageContent.iclspThemeOrange .iclspCardNo {
  margin-bottom: 16px;
}
.iclspPageContent.iclspThemeOrange .iclspCard p {
  margin-top: 10px;
}

/* Section 08 "Kontrola czlowieka" was 3 tall cards for 3 short
   label+sentence pairs -- exactly the "not every section needs cards"
   case. Reworked as one bordered compact row (3 columns on desktop,
   reusing the ZATWIERDZ/POPRAW/ODRZUC vocabulary the Section 03
   decision node already introduced, so the two moments read as the
   same idea instead of two unrelated components). */
.iclAI01CompactRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--iclsp-line, rgba(154, 174, 180, .2));
}
.iclAI01CompactRowItem {
  padding: 24px 26px;
  border-left: 1px solid var(--iclsp-line, rgba(154, 174, 180, .2));
}
.iclAI01CompactRowItem:first-child {
  border-left: 0;
}
.iclAI01CompactRowTag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  border: 1px solid var(--iclsp-line, rgba(154, 174, 180, .2));
  border-radius: 3px;
  color: var(--iclsp-muted, #a7b0b5);
  font-family: var(--iclpv-fontMono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
}
.iclAI01CompactRowTag--primary {
  border-color: rgba(var(--iclsp-accent-rgb), .4);
  background: rgba(var(--iclsp-accent-rgb), .08);
  color: var(--iclsp-accent, #ff6528);
}
.iclAI01CompactRowItem .iclspH3 {
  font-size: 20px;
}
.iclAI01CompactRowItem p {
  margin: 10px 0 0;
  color: var(--iclsp-muted, #a7b0b5);
  font-size: 15.5px;
  line-height: 1.5;
}

/* Short SEO/context sentence appended after a diagram-only section
   (Marketing Office, Dev/Tech Office) that had too little semantic
   text of its own -- 1-2 sentences, not a copy block, so it reads as
   a closing remark under the steps rather than a new lead paragraph. */
.iclAI01SectionNote {
  max-width: 640px;
  margin: 24px 0 0;
  color: var(--iclsp-muted, #a7b0b5);
  font-size: 15.5px;
  line-height: 1.55;
}

@media (max-width: 780px) {
  .iclAI01CompactRow {
    grid-template-columns: 1fr;
  }
  .iclAI01CompactRowItem {
    border-left: 0;
    border-top: 1px solid var(--iclsp-line, rgba(154, 174, 180, .2));
  }
  .iclAI01CompactRowItem:first-child {
    border-top: 0;
  }
}

/* Source layer: icl-ai-office-hero-fix */
/* AI Office master preview — Hero-only correction.
   HOME / Smart Home / Header / Rail / Footer untouched. */

/* Same ICL typography as HOME / Smart Home.
   Only the multiline Hero rhythm differs: 3-line H1 uses 1.12. */
.iclAI01Title{
  line-height:1.12 !important;
}

.iclAI01TitleLine{
  display:block;
  line-height:1.12 !important;
  margin:0 !important;
}

/* Status dots fallback. */
.iclAI01FlowIdentityDot{
  display:inline-block;
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#00f2ff;
  box-shadow:0 0 9px rgba(0,242,255,.7);
}

.iclAI01SignalEyebrow{
  position:relative;
}

.iclAI01SignalEyebrow::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:10px;
  border-radius:50%;
  vertical-align:1px;
  background:#00f2ff;
  box-shadow:0 0 9px rgba(0,242,255,.7);
}

@media(max-width:700px){
  .iclAI01Title,
  .iclAI01TitleLine{
    line-height:1.12 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .iclAI01SignalEyebrow::before,
  .iclAI01FlowIdentityDot{
    animation:none !important;
  }
}

/* Source layer: icl-ai-office-section-02-train */
/* AI Office — Section 02.
   Port mechanizmu pociągu z R18 Smart Home; kolor dopasowany do AI Office. */
.iclAI02Section{
  padding-top:clamp(110px,14vw,190px) !important;
  padding-bottom:clamp(90px,10vw,150px) !important;
}
.iclAI02Intro{max-width:910px;margin-bottom:80px}
.iclAI02Intro .iclspH2{max-width:820px}
.iclAI02Intro .iclspLead{max-width:610px;margin-top:25px;font-size:19px;line-height:1.55}

.iclAI02Train{
  --iclAI02-accent:var(--iclsp-accent,var(--iclsp-accent));
  --iclAI02-rgb:var(--iclsp-accent-rgb,255,77,0);
  position:relative;
  min-height:250px;
  display:flex;
  align-items:flex-end;
  gap:16px;
  padding:22px 35px 43px;
  border:1px solid rgba(var(--iclAI02-rgb),.28);
  background:
    radial-gradient(600px 180px at 24% 90%,rgba(var(--iclAI02-rgb),.12),transparent 64%),
    linear-gradient(90deg,rgba(30,12,5,.72),rgba(8,11,12,.96));
  overflow:hidden;
}
.iclAI02Train::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:24px;
  height:4px;
  background:repeating-linear-gradient(90deg,rgba(var(--iclAI02-rgb),.78) 0 44px,transparent 44px 57px);
  box-shadow:0 0 17px rgba(var(--iclAI02-rgb),.35);
}
.iclAI02Consist{
  width:100%;
  display:flex;
  align-items:flex-end;
  gap:16px;
}
.iclAI02LocomotiveShell{
  height:150px;
  width:31%;
  min-width:255px;
  position:relative;
  z-index:1;
  flex:0 0 auto;
}
.iclAI02LocomotiveShell::before{
  content:"";
  position:absolute;
  z-index:0;
  left:-70px;
  bottom:20px;
  width:98px;
  height:74px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--iclAI02-rgb),.14),rgba(var(--iclAI02-rgb),.04) 52%,transparent 100%);
  clip-path:polygon(100% 43%,0 0,0 100%,100% 58%);
  filter:blur(6px);
  opacity:.8;
}
.iclAI02Locomotive{
  height:150px;
  width:100%;
  min-width:0;
  position:relative;
  z-index:1;
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 29%);
  border:1px solid var(--iclAI02-accent);
  background:linear-gradient(135deg,rgba(var(--iclAI02-rgb),.17),#16100d 65%);
  box-shadow:inset 0 0 45px rgba(var(--iclAI02-rgb),.08),0 0 35px rgba(var(--iclAI02-rgb),.08);
}
.iclAI02Locomotive::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:52px;
  height:48px;
  border-top:1px solid var(--iclAI02-accent);
  background:rgba(var(--iclAI02-rgb),.06);
  clip-path:polygon(0 0,100% 100%,0 100%);
}
.iclAI02Cab{
  position:absolute;
  right:14%;
  top:-54px;
  width:82px;
  height:54px;
  border:1px solid var(--iclAI02-accent);
  border-bottom:0;
  background:linear-gradient(135deg,rgba(var(--iclAI02-rgb),.23),#17100d);
}
.iclAI02Cab::before{
  content:"";
  position:absolute;
  inset:12px 14px 0;
  border:1px solid rgba(255,220,201,.55);
  border-bottom:0;
}
.iclAI02Locomotive strong{
  position:absolute;
  left:25px;
  bottom:50px;
  color:#f4f7f8;
  font:700 26px/1 var(--iclpv-fontDisplay,"Space Grotesk");
  letter-spacing:-.05em;
}
.iclAI02Locomotive small{
  position:absolute;
  left:25px;
  bottom:25px;
  color:var(--iclAI02-accent);
  font:600 10px/1 var(--iclpv-fontMono,"IBM Plex Mono");
  letter-spacing:.12em;
}
.iclAI02Wagon{
  height:136px;
  flex:1;
  min-width:150px;
  position:relative;
  z-index:1;
  padding:24px;
  border:1px solid var(--iclsp-line);
  background:#0b1011;
  transition:transform .25s,border-color .25s;
}
.iclAI02Wagon::before{
  content:"";
  position:absolute;
  left:-17px;
  top:50%;
  width:17px;
  height:1px;
  background:rgba(var(--iclAI02-rgb),.72);
}
.iclAI02Wagon:hover{transform:translateY(-8px);border-color:var(--iclAI02-accent)}
.iclAI02Wagon b{
  display:block;
  color:#f4f7f8;
  font:700 19px/1.05 var(--iclpv-fontDisplay,"Space Grotesk");
  letter-spacing:-.04em;
}
.iclAI02Wagon span{
  display:block;
  margin-top:11px;
  color:var(--iclsp-muted,#aeb6be);
  font-size:14px;
  line-height:1.3;
}
.iclAI02LocomotiveShell::after,
.iclAI02Wagon::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-15px;
  width:100%;
  height:18px;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:
    radial-gradient(circle at 7% 50%,#050808 0 6px,var(--iclAI02-accent) 6.5px 7.5px,transparent 8px),
    radial-gradient(circle at 14% 50%,#050808 0 6px,var(--iclAI02-accent) 6.5px 7.5px,transparent 8px),
    radial-gradient(circle at 86% 50%,#050808 0 6px,var(--iclAI02-accent) 6.5px 7.5px,transparent 8px),
    radial-gradient(circle at 93% 50%,#050808 0 6px,var(--iclAI02-accent) 6.5px 7.5px,transparent 8px);
}
.iclAI02Wagon::after{
  background:
    radial-gradient(circle at 8% 50%,#050808 0 6px,rgba(235,188,164,.9) 6.5px 7.5px,transparent 8px),
    radial-gradient(circle at 15% 50%,#050808 0 6px,rgba(235,188,164,.9) 6.5px 7.5px,transparent 8px),
    radial-gradient(circle at 85% 50%,#050808 0 6px,rgba(235,188,164,.9) 6.5px 7.5px,transparent 8px),
    radial-gradient(circle at 92% 50%,#050808 0 6px,rgba(235,188,164,.9) 6.5px 7.5px,transparent 8px);
}
.iclAI02Result{
  margin:24px 0 0;
  color:var(--iclsp-muted,#aeb6be);
  font-size:16px;
  line-height:1.55;
}
.iclAI02Result b{
  color:var(--iclAI02-accent);
  font-family:var(--iclpv-fontMono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.iclAI02Actions{
  margin-top:28px;
  display:flex;
  align-items:center;
}

/* FINAL R18 Smart Home train choreography — port 1:1.
   Whole consist moves on the compositor, track remains static. */
.iclsh2026.motion-ready .iclAI02Train .iclAI02Consist{
  transform:translate3d(calc(100% + 100px),0,0);
  will-change:transform;
  backface-visibility:hidden;
}
.iclsh2026.motion-ready .iclAI02Train.is-running .iclAI02Consist{
  animation:iclAI02-whole-train-arrival 4200ms linear both;
}
@keyframes iclAI02-whole-train-arrival{
  from{transform:translate3d(calc(100% + 100px),0,0)}
  to{transform:translate3d(0,0,0)}
}

/* Final R18 explicitly stops rail motion. */
.iclAI02Train.is-running::after{
  animation:none !important;
}

/* No individual car/pseudo animations on desktop: the consist is one train. */
.iclsh2026.motion-ready .iclAI02Train .iclAI02LocomotiveShell,
.iclsh2026.motion-ready .iclAI02Train .iclAI02LocomotiveShell::before,
.iclsh2026.motion-ready .iclAI02Train .iclAI02LocomotiveShell::after,
.iclsh2026.motion-ready .iclAI02Train .iclAI02Locomotive,
.iclsh2026.motion-ready .iclAI02Train .iclAI02Wagon,
.iclsh2026.motion-ready .iclAI02Train .iclAI02Wagon::after{
  animation:none !important;
  will-change:auto;
}

@media(max-width:900px){
  .iclAI02Consist{flex-wrap:wrap}
  .iclAI02LocomotiveShell{width:42%}
  .iclAI02Wagon{min-width:calc(33.333% - 16px)}
}
@media(max-width:580px){
  .iclAI02Section{padding-top:clamp(90px,24vw,120px)!important;padding-bottom:95px!important}
  .iclAI02Intro{margin-bottom:54px}
  .iclAI02Intro .iclspLead{font-size:17px}
  .iclAI02Train{display:block;min-height:0;padding:26px 18px 30px}
  .iclAI02Train::after{display:none}
  .iclAI02Consist,
  .iclsh2026.motion-ready .iclAI02Train .iclAI02Consist{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    transform:none!important;
    animation:none!important;
    will-change:auto;
  }
  .iclAI02LocomotiveShell{width:100%;min-width:0;height:136px}
  .iclAI02Locomotive{height:136px;width:100%}
  .iclAI02LocomotiveShell::before,
  .iclAI02LocomotiveShell::after,
  .iclAI02Wagon::after{display:none}
  .iclAI02Wagon{min-width:0;height:auto;min-height:112px;padding:22px}
  .iclAI02Wagon::before{left:50%;top:-16px;width:1px;height:16px;background:var(--iclAI02-accent)}
}
@media(prefers-reduced-motion:reduce){
  .iclsh2026.motion-ready .iclAI02Train .iclAI02Consist{transform:none;animation:none;will-change:auto}
  .iclAI02Train::after{animation:none!important}
  .iclAI02Wagon{transition:none}
}

/* Source layer: icl-ai-office-mobile-contract */
/* =========================================================
   AI OFFICE — MOBILE CONTRACT
   Same typography / button language as ICL.
   Recomposition only; no content is removed.
   ========================================================= */

/* AI Office buttons: section 02 deliberately reuses iclAI01Cta,
   therefore Hero and section CTA share the exact same skin. */
.iclAI02Actions .iclAI01Cta{
  max-width:100%;
  white-space:normal;
}

/* -------- Mobile Hero -------- */
@media(max-width:600px){

  .iclAI01Container{
    width:calc(100% - 36px) !important;
    max-width:560px !important;
    padding:40px 0 54px !important;
    gap:34px !important;
  }

  .iclAI01Copy,
  .iclAI01Panel,
  .iclAI01FlowBody,
  .iclAI01HeroScenes{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* IMPORTANT: preserve the original 4-slide track geometry.
     The carousel controls its own track/slide widths and transform. */
  .iclAI01HeroSceneTrack,
  .iclAI01HeroScene{
    box-sizing:border-box !important;
  }

  .iclAI01Panel{
    width:100% !important;
    justify-self:stretch !important;
    overflow:hidden !important;
  }

  .iclAI01SignalHead{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .iclAI01SignalTitle{
    font-size:clamp(23px,8.4vw,31px) !important;
    line-height:1.08 !important;
    letter-spacing:-.04em !important;
  }

  .iclAI01FlowBody{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .iclAI01FlowIdentitySecondary{
    display:block !important;
    line-height:1.5 !important;
  }

  .iclAI01HeroSceneLabel{
    display:block !important;
    margin-bottom:18px !important;
  }

  /* SCENE 01 — lead card uses the whole useful width.
     Decorative outgoing signal is desktop-only. */
  .iclAI01SceneLead{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    position:relative !important;
  }

  .iclAI01SceneLeadCard{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:20px 16px !important;
    box-sizing:border-box !important;
  }

  .iclAI01SceneLeadSignal{
    display:none !important;
  }

  .iclAI01SceneLeadCompany{
    display:block !important;
    font-size:clamp(25px,9vw,31px) !important;
    line-height:1.06 !important;
    letter-spacing:-.035em !important;
  }

  .iclAI01SceneLeadMeta{
    display:block !important;
    max-width:none !important;
    margin-top:10px !important;
    font-size:15px !important;
    line-height:1.48 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .iclAI01SceneLeadPriority{
    display:inline-flex !important;
    margin-top:14px !important;
    white-space:normal !important;
  }

  /* SCENE 02 — horizontal desktop rail becomes a readable vertical process. */
  .iclAI01Network{
    width:100% !important;
    min-height:0 !important;
  }

  .iclAI01NetworkHub{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    margin:0 auto 16px !important;
  }

  .iclAI01NetworkStem,
  .iclAI01NetworkRail,
  .iclAI01NetworkStageConnector{
    display:none !important;
  }

  .iclAI01NetworkNodes{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    width:100% !important;
    min-width:0 !important;
  }

  .iclAI01NetworkNode{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    display:grid !important;
    grid-template-columns:20px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    padding:12px 0 !important;
    border-top:1px solid rgba(var(--iclsp-accent-rgb),.18) !important;
    text-align:left !important;
  }

  .iclAI01NetworkNode:last-child{
    border-bottom:1px solid rgba(var(--iclsp-accent-rgb),.18) !important;
  }

  .iclAI01NetworkNodeDrop{
    display:none !important;
  }

  .iclAI01NetworkNodeDot{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    width:8px !important;
    height:8px !important;
    margin:0 auto !important;
  }

  .iclAI01NetworkNodeTitle{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    min-width:0 !important;
    font-size:14px !important;
    line-height:1.25 !important;
    text-align:left !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .iclAI01NetworkNodeTime{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    white-space:nowrap !important;
    font-size:11px !important;
    text-align:right !important;
  }

  .iclAI01NetworkStageStatus{
    margin:18px 0 0 !important;
    text-align:left !important;
  }

  .iclAI01NetworkProgress{
    margin-top:20px !important;
  }

  /* SCENE 03 — facts become a compact 2-column mobile matrix. */
  .iclAI01SceneContext{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    width:100% !important;
  }

  .iclAI01ContextFacts{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    width:100% !important;
  }

  .iclAI01ContextFact{
    min-width:0 !important;
    padding:12px 10px !important;
  }

  .iclAI01ContextFactKey,
  .iclAI01ContextFactValue{
    overflow-wrap:anywhere !important;
  }

  .iclAI01ContextGauge{
    width:100% !important;
    max-width:190px !important;
    margin:0 auto !important;
  }

  /* SCENE 04 — comparison remains a comparison, but fits narrow screens. */
  .iclAI01SceneDecision{
    width:100% !important;
    min-width:0 !important;
  }

  .iclAI01DecisionCompare{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
  }

  .iclAI01DecisionCompareItem{
    min-width:0 !important;
  }

  .iclAI01DecisionCompareValue{
    font-size:clamp(22px,8vw,29px) !important;
  }

  .iclAI01DecisionCompareVs{
    font-size:10px !important;
  }

  .iclAI01DecisionHero{
    margin-top:18px !important;
  }

  .iclAI01DecisionHeroValue{
    font-size:clamp(38px,14vw,52px) !important;
  }

  .iclAI01DecisionHandoff{
    margin-top:18px !important;
  }

  /* Footer + scene switcher: 2 x 2 instead of four squeezed buttons. */
  .iclAI01PanelFooter{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .iclAI01NextStepAction{
    font-size:15px !important;
    line-height:1.45 !important;
  }

  .iclAI01HeroSceneNav{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    padding:12px 14px 14px !important;
    box-sizing:border-box !important;
  }

  .iclAI01HeroSceneNavBtn{
    min-width:0 !important;
    width:100% !important;
    padding:10px 8px !important;
  }

  .iclAI01HeroSceneNavLabel{
    min-width:0 !important;
    font-size:10px !important;
    line-height:1.2 !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  /* -------- Section 02 mobile -------- */
  .iclAI02Section{
    padding-bottom:82px !important;
  }

  .iclAI02Intro{
    margin-bottom:48px !important;
  }

  .iclAI02Train{
    padding:22px 14px 24px !important;
  }

  .iclAI02LocomotiveShell{
    height:128px !important;
  }

  .iclAI02Locomotive{
    height:128px !important;
  }

  .iclAI02Locomotive strong{
    left:20px !important;
    bottom:46px !important;
    font-size:23px !important;
  }

  .iclAI02Locomotive small{
    left:20px !important;
    bottom:23px !important;
  }

  .iclAI02Wagon{
    min-height:0 !important;
    height:auto !important;
    padding:18px !important;
  }

  .iclAI02Wagon b{
    font-size:17px !important;
    line-height:1.12 !important;
  }

  .iclAI02Wagon span{
    font-size:14px !important;
    line-height:1.42 !important;
  }

  .iclAI02Result{
    margin-top:20px !important;
    font-size:15px !important;
  }

  .iclAI02Actions{
    margin-top:24px !important;
    width:auto !important;
  }

  .iclAI02Actions .iclAI01Cta{
    width:auto !important;
    max-width:100% !important;
    min-height:56px !important;
  }
}

@media(max-width:360px){
  .iclAI01Container{
    width:calc(100% - 28px) !important;
  }

  .iclAI01SignalHead,
  .iclAI01FlowBody{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .iclAI01ContextFacts{
    grid-template-columns:1fr !important;
  }

  .iclAI01HeroSceneNav{
    gap:6px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .iclAI02Train{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .iclAI01Hero *,
  .iclAI02Section *{
    scroll-behavior:auto !important;
  }
}

/* Source layer: icl-ai-office-cta-skin-fix */
/* AI Office CTA skin — same orange accent as Hero / page theme. */
.iclspThemeOrange .iclAI02Actions .iclpvBtnPrimary{
  background:var(--iclsp-accent,var(--iclsp-accent)) !important;
  border-color:var(--iclsp-accent,var(--iclsp-accent)) !important;
  color:#050809 !important;
  box-shadow:
    0 0 28px rgba(var(--iclsp-accent-rgb),.16),
    inset 0 0 18px rgba(255,255,255,.10) !important;
}
.iclspThemeOrange .iclAI02Actions .iclpvBtnPrimary:hover{
  background:#ff6826 !important;
  border-color:#ff6826 !important;
  color:#050809 !important;
  box-shadow:
    0 0 38px rgba(var(--iclsp-accent-rgb),.28),
    inset 0 0 18px rgba(255,255,255,.14) !important;
}
.iclspThemeOrange .iclAI02Actions .iclpvBtnPrimary:focus-visible{
  outline:2px solid #ffd8c5 !important;
  outline-offset:4px !important;
}

/* Source layer: icl-ai-office-mobile-stable-scenes */
/* =========================================================
   AI OFFICE — STABLE MOBILE SCENE FRAME
   No dynamic height observers. Counters may animate inside,
   but the dashboard frame itself never jumps.
   ========================================================= */
@media(max-width:600px){
  .iclAI01HeroScenes{
    height:500px !important;
    min-height:500px !important;
    overflow:hidden !important;
    transition:none !important;
  }

  .iclAI01HeroSceneTrack{
    height:100% !important;
    align-items:stretch !important;
  }

  .iclAI01HeroScene{
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }

  /* Scene 01 has much less content than the remaining scenes.
     Centre the lead card in the stable frame instead of leaving
     a large dead zone below it. */
  .iclAI01HeroScene[data-scene="1"]{
    display:flex !important;
    flex-direction:column !important;
  }

  .iclAI01HeroScene[data-scene="1"] .iclAI01SceneLead{
    margin-top:auto !important;
    margin-bottom:auto !important;
  }

  /* Scene 04: keep the comparison on one line and tighten only
     the vertical rhythm needed for the narrow mobile frame. */
  .iclAI01HeroScene[data-scene="4"] .iclAI01DecisionCompare{
    grid-template-columns:minmax(0,.9fr) auto minmax(0,1.15fr) !important;
    gap:6px !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01DecisionCompareValue{
    white-space:nowrap !important;
    font-size:clamp(21px,6.8vw,27px) !important;
    line-height:1.05 !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01DecisionHero{
    margin-top:12px !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01DecisionHeroValue{
    font-size:clamp(38px,12.5vw,48px) !important;
    line-height:1 !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01DecisionHeroLabel{
    line-height:1.35 !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01DecisionHandoff{
    margin-top:12px !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01PanelFooter{
    margin-top:12px !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01NextStep{
    padding:13px 14px !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01NextStepAction{
    margin-top:7px !important;
    font-size:14px !important;
    line-height:1.38 !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01SignalNote{
    margin-top:9px !important;
    font-size:13px !important;
    line-height:1.4 !important;
  }
}

@media(max-width:360px){
  .iclAI01HeroScenes{
    height:520px !important;
    min-height:520px !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01DecisionCompareValue{
    font-size:22px !important;
  }

  .iclAI01HeroScene[data-scene="4"] .iclAI01DecisionHeroValue{
    font-size:42px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .iclAI01HeroScenes{transition:none !important;}
}

/* Source layer: icl-ai-office-mobile-scene01-brand */
/* Scene 01 mobile-only brand signature.
   Reuses the exact ICL mark already used by the global header. */
.iclAI01MobileBrand{
  display:none;
}

@media(max-width:600px){
  .iclAI01HeroScene[data-scene="1"] .iclAI01SceneLead{
    margin-top:28px !important;
    margin-bottom:0 !important;
  }

  .iclAI01MobileBrand{
    margin:auto auto 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    opacity:.18;
    pointer-events:none;
    user-select:none;
  }

  .iclAI01MobileBrandMark{
    width:62px !important;
    height:62px !important;
    flex:0 0 62px !important;
    opacity:1 !important;
    filter:invert(1) !important;
  }

  .iclAI01MobileBrandText{
    color:#f4f7f8;
    font-family:var(--iclpv-fontDisplay,"Space Grotesk","Segoe UI",Arial,sans-serif);
    font-size:26px;
    font-weight:700;
    line-height:1;
    letter-spacing:.18em;
    padding-left:.18em;
  }
}

@media(max-width:360px){
  .iclAI01MobileBrand{
    margin-bottom:24px;
    opacity:.16;
  }

  .iclAI01MobileBrandMark{
    width:56px !important;
    height:56px !important;
    flex-basis:56px !important;
  }

  .iclAI01MobileBrandText{
    font-size:23px;
  }
}

@media(prefers-reduced-motion:reduce){
  .iclAI01MobileBrand{
    transition:none !important;
  }
}

/* Source layer: icl-ai-office-section02-smart-home-rhythm */
/* Section 02 rhythm copied from FINAL R18 Smart Home:
   .iclSmartMerge.architecture { padding-top: clamp(82px,9vw,124px) } */
.iclAI02Section{
  padding-top:clamp(82px,9vw,124px) !important;
}

/* Source layer: icl-ai-office-section02-payoff */
/* Section 02 payoff — clearer UX/sales close under the train. */
.iclAI02Result{
  max-width:760px !important;
  margin:28px 0 0 !important;
  color:#d3dadd !important;
  font-family:var(--iclpv-fontBody,"IBM Plex Sans","Segoe UI",Arial,sans-serif) !important;
  font-size:18px !important;
  line-height:1.5 !important;
  letter-spacing:0 !important;
}

.iclAI02Result strong{
  color:#f4f7f8 !important;
  font-weight:600 !important;
}

.iclAI02Actions{
  margin-top:28px !important;
}

@media(max-width:600px){
  .iclAI02Result{
    margin-top:22px !important;
    font-size:16px !important;
    line-height:1.5 !important;
  }

  .iclAI02Actions{
    margin-top:22px !important;
  }
}

/* Source layer: icl-sales-office-screenshot-only */
#sales-office .iclAI01FlowDemo{display:none!important}

/* Source layer: icl-sales-office-cards-ux */
#sales-office .iclspGrid--3{margin-top:54px;gap:0;align-items:stretch;border-top:1px solid rgba(var(--iclsp-accent-rgb),.34);border-bottom:1px solid rgba(154,174,180,.2);overflow:hidden}
#sales-office>.iclspGrid--3{width:calc(100% - 336px)!important;max-width:none;margin-left:168px;margin-right:0}
#sales-office>.iclAI01SectionNote,#sales-office>.iclAI01ArchCta{width:calc(100% - 336px)!important;max-width:none;margin-left:168px;margin-right:0}
#sales-office .iclspCard{min-height:252px;padding:28px 30px 27px;display:flex;flex-direction:column;box-sizing:border-box;background:linear-gradient(160deg,rgba(var(--iclsp-accent-rgb),.045),rgba(7,11,13,.96) 58%);border:0;border-left:1px solid rgba(154,174,180,.22);border-radius:0;position:relative;transition:background .25s ease,box-shadow .25s ease}
#sales-office .iclspCard:first-child{border-left:0}
#sales-office .iclspCard:hover{background:linear-gradient(160deg,rgba(var(--iclsp-accent-rgb),.1),rgba(7,11,13,.96) 66%);box-shadow:inset 0 2px 0 var(--iclsp-accent)}
#sales-office .iclspCard:before{content:"◈  AI PRZYGOTOWUJE";display:block;margin-bottom:19px;color:var(--iclsp-accent);font-family:var(--iclpv-fontMono)!important;font-size:11px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
#sales-office .iclspCard:last-child:before{content:"✓  CZŁOWIEK DECYDUJE";color:#f4f7f8}
#sales-office .iclspCardNo{margin-bottom:auto;color:var(--iclsp-accent);font-family:var(--iclpv-fontMono)!important;font-size:12px;letter-spacing:.08em}
#sales-office .iclspCard h3{margin:0 0 14px;font-family:var(--iclpv-fontDisplay)!important;font-size:clamp(22px,2.1vw,29px);line-height:1.05;letter-spacing:-.035em}
#sales-office .iclspCard p{margin:0;max-width:32ch;font-family:var(--iclpv-fontBody)!important;font-size:16px;line-height:1.48;color:var(--iclsp-muted,#a7b0b5)}
#sales-office .iclspCard:after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:3px;background:var(--iclsp-accent);transform-origin:left;transform:scaleX(.62);transition:transform .3s ease}
#sales-office .iclspCard:hover:after{transform:scaleX(1)}
#sales-office .iclAI01SectionNote{max-width:78ch;margin:28px 0 0;color:var(--iclsp-muted,#a7b0b5);font-family:var(--iclpv-fontBody)!important;font-size:16px;line-height:1.5}
#sales-office .iclAI01ArchCta{margin-top:28px;border-color:var(--iclsp-accent)!important;background:rgba(var(--iclsp-accent-rgb),.06)!important;color:#f4f7f8!important;box-shadow:0 0 18px rgba(var(--iclsp-accent-rgb),.1)!important}
#sales-office .iclAI01ArchCta:hover,#sales-office .iclAI01ArchCta:focus-visible{background:rgba(var(--iclsp-accent-rgb),.14)!important;box-shadow:0 12px 30px rgba(var(--iclsp-accent-rgb),.18)!important}
#sales-office .iclspCard.is-working{background:linear-gradient(160deg,rgba(var(--iclsp-accent-rgb),.13),rgba(7,11,13,.96) 68%);box-shadow:inset 0 2px 0 var(--iclsp-accent)}
#sales-office .iclspCard.is-working:after{animation:iclSalesCardProgress 2.4s linear forwards;transform:scaleX(0)}
#sales-office .iclspCard.is-complete:after{transform:scaleX(1);animation:none}
#sales-office .iclspCard p:after{content:"";display:block;margin-top:18px;color:var(--iclsp-accent);font:700 10px/1.2 var(--iclpv-fontMono);letter-spacing:.08em}
#sales-office .iclspCard:nth-child(1) p:after{content:"AI ANALIZUJE · W TOKU"}
#sales-office .iclspCard:nth-child(2) p:after{content:"AI PRZYGOTOWUJE · W TOKU"}
#sales-office .iclspCard:nth-child(3) p:after{content:"CZŁOWIEK DECYDUJE";color:#f4f7f8}
#sales-office .iclspCard.is-working p:after{animation:iclSalesStatusPulse 1.1s ease-in-out infinite}
#sales-office .iclspCard.is-complete p:after{content:"✓ WYKONANO";color:#f4f7f8;animation:none}
@keyframes iclSalesCardProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes iclSalesStatusPulse{0%,100%{opacity:.42}50%{opacity:1}}
@media(max-width:900px){#sales-office .iclspGrid--3{grid-template-columns:1fr 1fr}#sales-office .iclspCard:last-child{grid-column:1/-1}}
@media(max-width:900px){#sales-office>.iclspGrid--3{width:calc(100% - 28px)!important;margin-left:14px;margin-right:14px}}
@media(max-width:900px){#sales-office>.iclAI01SectionNote,#sales-office>.iclAI01ArchCta{width:calc(100% - 28px)!important;margin-left:14px!important;margin-right:14px!important;padding-left:0!important;padding-right:0!important}}
#sales-office>.iclAI01SectionNote,#sales-office>.iclAI01ArchCta,#sales-office>.iclspGrid--3{width:auto!important;max-width:none;margin-left:0;margin-right:0}
@media(max-width:900px){#sales-office>.iclAI01SectionNote,#sales-office>.iclAI01ArchCta,#sales-office>.iclspGrid--3{margin-left:0;margin-right:0;width:100%!important}}
@media(max-width:600px){#sales-office .iclspGrid--3{grid-template-columns:1fr;margin-top:30px;gap:0}#sales-office .iclspCard:last-child{grid-column:auto}#sales-office .iclspCard,#sales-office .iclspCard:first-child{min-height:0;padding:25px 22px 29px;border-left:0;border-top:1px solid rgba(154,174,180,.2)}#sales-office .iclspCard:first-child{border-top:0}#sales-office .iclspCardNo{margin-bottom:34px}#sales-office .iclspCard h3{font-size:24px}#sales-office .iclspCard:after{left:22px;right:22px}}
#sales-office .iclAI01SectionNote{margin-top:24px}
#sales-office .iclAI01ArchCta{width:100%;max-width:315px;text-align:center;box-sizing:border-box}

/* Source layer: icl-marketing-office-flow-ux */
.iclMarketingOfficeSection .iclspSectionStartLabel{color:var(--iclsp-accent)!important}
.iclMarketingOfficeSection .iclspSectionStartLine{background:var(--iclsp-accent)!important}
.iclMarketingOfficeSection .iclspButton.iclAI01ArchCta{border-color:var(--iclsp-accent)!important;background:rgba(var(--iclsp-accent-rgb),.06)!important;color:#f4f7f8!important;box-shadow:0 0 18px rgba(var(--iclsp-accent-rgb),.12)!important}
.iclMarketingOfficeSection .iclspButton.iclAI01ArchCta:hover,.iclMarketingOfficeSection .iclspButton.iclAI01ArchCta:focus-visible{background:rgba(var(--iclsp-accent-rgb),.14)!important;box-shadow:0 12px 30px rgba(var(--iclsp-accent-rgb),.2)!important}
.iclMarketingOfficeSection .iclspH2{line-height:1.04!important;margin-bottom:0!important}
.iclMarketingOfficeSection .iclspLead{margin-top:28px!important}
.iclMarketingOfficeSection .iclspStep b{color:var(--iclsp-accent)!important}
.iclMarketingOfficeSection .iclspStep::after{background:var(--iclsp-accent)!important}
.iclspSection:has(.iclspSteps) .iclspSteps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:54px;border-top:1px solid rgba(var(--iclsp-accent-rgb),.34);border-bottom:1px solid rgba(154,174,180,.18);overflow:hidden}
.iclspSection:has(.iclspSteps) .iclspStep{position:relative;min-height:174px;padding:48px 30px 26px;border-left:1px solid rgba(154,174,180,.18);background:linear-gradient(180deg,rgba(var(--iclsp-accent-rgb),.055),rgba(7,11,13,.14));transition:background-color .3s ease,box-shadow .3s ease}
.iclMarketingOfficeSection .iclspStep::before{content:"◈  AI PRZYGOTOWUJE";position:absolute;top:18px;left:30px;color:var(--iclsp-accent);font-family:var(--iclpv-fontMono)!important;font-size:10px;font-weight:700;letter-spacing:.1em}
.iclMarketingOfficeSection .iclspStep:nth-child(5){background:linear-gradient(145deg,rgba(var(--iclsp-accent-rgb),.18),rgba(24,13,10,.92) 58%,rgba(var(--iclsp-accent-rgb),.06));box-shadow:inset 0 1px 0 rgba(255,122,68,.38),0 0 28px rgba(var(--iclsp-accent-rgb),.08)}
.iclMarketingOfficeSection .iclspStep:nth-child(5)::before{content:"✓  CZŁOWIEK DECYDUJE";color:#f4f7f8}
.iclMarketingOfficeSection .iclspStep:nth-child(5)::after{animation-name:iclHumanApprovalGlow;background:var(--iclsp-accent)!important}
@keyframes iclHumanApprovalGlow{0%,70%,100%{opacity:.35;transform:scaleX(.35)}82%{opacity:1;transform:scaleX(1);box-shadow:0 0 14px rgba(var(--iclsp-accent-rgb),.8)}}
.iclspSection:has(.iclspSteps) .iclspStep:first-child{border-left:0}
.iclspSection:has(.iclspSteps) .iclspStep::after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:2px;background:var(--iclsp-accent);transform:scaleX(0);transform-origin:left;animation:iclMarketingStepIn 10s linear 1 both}
.iclspSection:has(.iclspSteps) .iclspStep:nth-child(2)::after{animation-delay:2s}.iclspSection:has(.iclspSteps) .iclspStep:nth-child(3)::after{animation-delay:4s}.iclspSection:has(.iclspSteps) .iclspStep:nth-child(4)::after{animation-delay:6s}.iclspSection:has(.iclspSteps) .iclspStep:nth-child(5)::after{animation-delay:8s}
.iclspSection:has(.iclspSteps) .iclspStep b{display:block;margin-bottom:48px;color:var(--iclsp-accent,var(--iclsp-accent));font-family:var(--iclpv-fontMono)!important;font-size:12px;letter-spacing:.08em}
.iclspSection:has(.iclspSteps) .iclspStep span{display:block;color:var(--iclsp-text,#f4f7f8);font-family:var(--iclpv-fontDisplay)!important;font-size:18px;font-weight:700;line-height:1.15;letter-spacing:-.025em}
.iclMarketingOfficeSection .iclspStep span::after{content:"AI analizuje  ·  w toku";display:block;margin-top:18px;color:#a7b0b5;font-family:var(--iclpv-fontMono)!important;font-size:10px;font-weight:600;letter-spacing:.04em;line-height:1.4;opacity:.82}
.iclMarketingOfficeSection .iclspStep:nth-child(2) span::after{content:"AI porządkuje  ·  w toku"}.iclMarketingOfficeSection .iclspStep:nth-child(3) span::after{content:"AI przygotowuje  ·  w toku"}.iclMarketingOfficeSection .iclspStep:nth-child(4) span::after{content:"AI sprawdza  ·  w toku"}.iclMarketingOfficeSection .iclspStep:nth-child(5) span::after{content:"✓  Gotowe  ·  czeka na decyzję";color:#f4f7f8;opacity:1}
.iclMarketingOfficeSection .iclspStep:nth-child(-n+4) span::after{animation:iclStepStatusPulse 1.8s ease-in-out infinite}@keyframes iclStepStatusPulse{0%,100%{opacity:.42}50%{opacity:1;color:#ff8a5c}}
.iclMarketingOfficeSection .iclspStep:nth-child(-n+4) span::after{animation:iclStepStatusComplete 10s linear 1 both}
.iclMarketingOfficeSection .iclspStep:nth-child(2) span::after{animation-delay:2s}.iclMarketingOfficeSection .iclspStep:nth-child(3) span::after{animation-delay:4s}.iclMarketingOfficeSection .iclspStep:nth-child(4) span::after{animation-delay:6s}
@keyframes iclStepStatusComplete{0%,44%{opacity:.75}45%,100%{content:"✓  WYKONANO";opacity:1;color:#f4f7f8}}
.iclspSection:has(.iclspSteps) .iclAI01SectionNote{max-width:760px;margin-top:24px;color:var(--iclsp-muted,#a7b0b5);font-family:var(--iclpv-fontBody)!important;line-height:1.5}
@keyframes iclMarketingStepIn{0%,20%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}}
.iclMarketingOfficeSection .iclspStep:nth-child(5)::after{animation:iclMarketingStepIn 10s linear 1 8s both!important}
@media(max-width:800px){.iclspSection:has(.iclspSteps) .iclspSteps{grid-template-columns:1fr 1fr;margin-top:34px}.iclspSection:has(.iclspSteps) .iclspStep{min-height:140px;padding:42px 20px 22px}.iclspSection:has(.iclspSteps) .iclspStep::before{left:20px;top:16px;font-size:9px}.iclspSection:has(.iclspSteps) .iclspStep:nth-child(odd){border-left:0}.iclspSection:has(.iclspSteps) .iclspStep b{margin-bottom:30px}}
@media(max-width:520px){.iclspSection:has(.iclspSteps) .iclspSteps{grid-template-columns:1fr}.iclspSection:has(.iclspSteps) .iclspStep{min-height:0;border-left:0;border-top:1px solid rgba(154,174,180,.18);min-width:0}.iclspSection:has(.iclspSteps) .iclspStep:first-child{border-top:0}.iclspSection:has(.iclspSteps) .iclspStep b{margin-bottom:16px}.iclMarketingOfficeSection .iclspH2,.iclMarketingOfficeSection .iclspLead,.iclMarketingOfficeSection .iclspStep span,.iclMarketingOfficeSection .iclAI01SectionNote{overflow-wrap:anywhere;word-break:normal}}
@media(prefers-reduced-motion:reduce){.iclspSection:has(.iclspSteps) .iclspStep::after{animation:none;transform:scaleX(1)}}
.iclMarketingOfficeSection .iclspStep::after{animation:none!important;transform:scaleX(0)}
.iclMarketingOfficeSection .iclspStep.is-working::after{animation:iclRealStepProgress 2.4s linear forwards!important}
.iclMarketingOfficeSection .iclspStep.is-complete::after{transform:scaleX(1)}
.iclMarketingOfficeSection .iclspStep.is-working span::after{animation:iclStepStatusPulse 1.2s ease-in-out infinite}
.iclMarketingOfficeSection .iclspStep.is-complete span::after{content:"✓  WYKONANO";color:#f4f7f8;opacity:1;animation:none}
@keyframes iclRealStepProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Source layer: icl-ai-office-overflow-repair */
/* Keep intentionally wide animated tracks inside their visual sections. */
.iclAI01Hero{
  overflow-x:clip;
}

/* Source layer: icl-ai-office-mobile-section01-narrow-repair */
/* Narrow-phone repair: use the full panel width and remove desktop slide padding. */
@media(max-width:360px){
  .iclAI01Container{
    width:calc(100% - 12px) !important;
    max-width:none !important;
  }
  .iclAI01Copy,
  .iclAI01Panel{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  .iclAI01SignalHead,
  .iclAI01FlowBody{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .iclAI01FlowBody.ai01-scenes-active .iclAI01HeroScene{
    flex:0 0 25% !important;
    width:25% !important;
    min-width:0 !important;
    padding:2px 4px !important;
  }
  .iclAI01SceneLeadCard{
    padding:17px 13px !important;
  }
  .iclAI01NetworkNode{
    grid-template-columns:14px minmax(0,1fr) 34px !important;
    gap:6px !important;
  }
  .iclAI01NetworkNodeTitle{
    font-size:13px !important;
  }
  .iclAI01DecisionHandoff,
  .iclAI01PanelFooter,
  .iclAI01NextStep{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .iclAI01HeroSceneNav{
    padding-left:8px !important;
    padding-right:8px !important;
  }
}

/* Source layer: icl-ai-office-section04-global-typography */
.iclAI04Section .iclspH2,.iclAI04Section .iclAI01ArchTierLabel{font-family:var(--iclpv-fontDisplay)!important}
.iclAI04Section .iclspH2{line-height:1.06!important;margin-bottom:0!important}
.iclAI04Section .iclspLead,.iclAI04Section .iclAI01ArchTierDesc{font-family:var(--iclpv-fontBody)!important}
.iclAI04Section .iclspLead{margin-top:30px!important}
.iclAI04Section .iclAI01ArchTierNum,.iclAI04Section .iclAI01ArchDecisionChip{font-family:var(--iclpv-fontMono)!important}
.iclAI04Section .iclAI01ArchChip{font-family:var(--iclpv-fontDisplay)!important}

/* Source layer: icl-ai-office-mobile-section04-architecture */
@media(max-width:700px){
  .iclAI04Section{padding-top:82px!important;padding-bottom:78px!important;overflow:hidden!important}
  .iclAI04Section .iclspContainer{width:calc(100% - 28px)!important;max-width:none!important}
  .iclAI04Section .iclspH2{font-family:var(--iclpv-fontDisplay)!important;font-size:clamp(30px,10vw,42px)!important;line-height:1.04!important;letter-spacing:-.045em!important}
  .iclAI04Section .iclspLead{font-family:var(--iclpv-fontBody)!important;font-size:16px!important;line-height:1.48!important;margin-top:18px!important}
  .iclAI04Section .iclAI01Arch{padding-left:26px!important;margin-top:28px!important}
  .iclAI04Section .iclAI01Arch::before{left:7px!important;top:5px!important}
  .iclAI04Section .iclAI01ArchTier{display:grid!important;grid-template-columns:26px minmax(0,1fr)!important;column-gap:10px!important;align-items:start!important;padding:17px 0!important}
  .iclAI04Section .iclAI01ArchTier::before{left:-25px!important;top:23px!important;width:10px!important;height:10px!important}
  .iclAI04Section .iclAI01ArchTierNum{min-width:0!important;font-family:var(--iclpv-fontMono)!important;font-size:11px!important;padding-top:2px!important}
  .iclAI04Section .iclAI01ArchTierLabel{font-family:var(--iclpv-fontDisplay)!important;font-size:17px!important;line-height:1.16!important;margin-bottom:7px!important}
  .iclAI04Section .iclAI01ArchTierDesc{font-family:var(--iclpv-fontBody)!important;font-size:14px!important;line-height:1.45!important;max-width:none!important}
  .iclAI04Section .iclAI01ArchChips{gap:7px!important;margin-top:11px!important}
  .iclAI04Section .iclAI01ArchChip{padding:7px 9px!important;font-family:var(--iclpv-fontDisplay)!important;font-size:12px!important;line-height:1.2!important}
  .iclAI04Section .iclAI01ArchDecision{gap:7px!important;margin-top:12px!important}
  .iclAI04Section .iclAI01ArchDecisionChip{padding:8px 10px!important;font-family:var(--iclpv-fontMono)!important;font-size:10px!important}
  .iclAI04Section .iclAI01ArchCta{display:block!important;width:100%!important;max-width:none!important;margin-top:26px!important;text-align:center!important;box-sizing:border-box!important}
}
@media(max-width:360px){
  .iclAI04Section .iclspContainer{width:calc(100% - 20px)!important}
  .iclAI04Section .iclAI01Arch{padding-left:24px!important}
  .iclAI04Section .iclAI01ArchTier{grid-template-columns:22px minmax(0,1fr)!important;column-gap:8px!important}
  .iclAI04Section .iclAI01ArchTierLabel{font-size:16px!important}
  .iclAI04Section .iclAI01ArchDecisionChip{padding-inline:8px!important}
}

/* Source layer: icl-orange-office-sections */
.iclOrangeOfficeSection .iclspSectionStartLabel{color:var(--iclsp-accent)!important}
.iclOrangeOfficeSection .iclspSectionStartLine{background:var(--iclsp-accent)!important}
.iclOrangeOfficeSection .iclspH2{margin-bottom:0!important;line-height:1.04!important}
.iclOrangeOfficeSection .iclspLead{margin-top:28px!important;line-height:1.5!important}
.iclOrangeOfficeSection .iclspCoreSide--cyan{border-top-color:var(--iclsp-accent)!important}
.iclOrangeOfficeSection .iclspCoreCenter{border-color:rgba(var(--iclsp-accent-rgb),.35)!important}
.iclOrangeOfficeSection .iclspSignal{border-color:var(--iclsp-accent)!important;color:var(--iclsp-accent)!important;box-shadow:0 0 28px rgba(var(--iclsp-accent-rgb),.12)!important}
.iclOrangeOfficeSection .iclspCoreSide--orange{border-top-color:var(--iclsp-accent)!important}
.iclOrangeOfficeSection .iclAI01CompactRowItem{border-top-color:rgba(var(--iclsp-accent-rgb),.42)!important}
.iclContextDiagram{display:grid;grid-template-columns:repeat(2,max-content);gap:7px 8px;margin-top:34px;position:relative;min-height:62px;align-items:center}
.iclContextDiagram i{font:700 9px/1 var(--iclpv-fontMono);letter-spacing:.08em;color:#f4f7f8;border:1px solid rgba(var(--iclsp-accent-rgb),.38);padding:8px 9px;background:rgba(var(--iclsp-accent-rgb),.035);font-style:normal}
.iclContextDiagram span{display:none}
.iclContextDiagram--offices{justify-content:end}
@media(max-width:700px){.iclContextDiagram{margin-top:24px}}
@media(min-width:901px){
  .iclContextDiagram{position:relative}
  .iclContextDiagram:before{content:"";position:absolute;top:50%;height:1px;width:42%;background:rgba(var(--iclsp-accent-rgb),.22);pointer-events:none}
  .iclContextDiagram--sources:before{right:0}
  .iclContextDiagram--offices:before{left:0}
  .iclContextDiagram span{display:block;position:absolute;z-index:2;width:7px;height:7px;border-radius:50%;background:var(--iclsp-accent);box-shadow:0 0 0 4px rgba(var(--iclsp-accent-rgb),.12),0 0 14px rgba(var(--iclsp-accent-rgb),.65);top:calc(50% - 3px);left:0}
  .iclContextDiagram--sources span{animation:iclDataToController 2.8s ease-in-out infinite}
  .iclContextDiagram--offices span{left:auto;right:0;animation:iclControllerToOffice 2.8s ease-in-out infinite}
}
@media(max-width:900px){.iclContextDiagram span{display:none}}
@keyframes iclDataToController{0%{transform:translateX(0);opacity:0}12%,82%{opacity:1}100%{transform:translateX(-190px);opacity:0}}
@keyframes iclControllerToOffice{0%{transform:translateX(0);opacity:0}12%,82%{opacity:1}100%{transform:translateX(190px);opacity:0}}
.iclLineageDiagram{display:block;width:100%;height:auto;margin-top:28px;overflow:visible;transform:scale(1.04);transform-origin:center}
.iclLineageEdges path{fill:none;stroke:rgba(var(--iclsp-accent-rgb),.5);stroke-width:1.6;stroke-dasharray:6 7;animation:iclLineageFlow 5s linear infinite}
.iclLineageNodes rect{fill:rgba(var(--iclsp-accent-rgb),.035);stroke:rgba(var(--iclsp-accent-rgb),.5);stroke-width:1}
.iclLineageNodes .iclLineageHub{fill:rgba(var(--iclsp-accent-rgb),.11);stroke:var(--iclsp-accent);stroke-width:1.4;filter:drop-shadow(0 0 10px rgba(var(--iclsp-accent-rgb),.16))}
.iclLineageLabels text{fill:#f4f7f8;font:700 13px var(--iclpv-fontMono);letter-spacing:.055em}
.iclLineageLabels .iclLineageStatus{fill:#ff8a5c;font-size:10px;letter-spacing:.045em}
.iclLineageLabels .iclLineageHubLabel,.iclLineageLabels .iclLineageHubStatus{text-anchor:middle}
.iclLineageLabels .iclLineageHubLabel{font-size:14px;letter-spacing:.035em}
.iclLineageLabels .iclLineageHubStatus{font-size:11px;letter-spacing:.04em}
.iclLineagePacket{fill:var(--iclsp-accent);filter:drop-shadow(0 0 7px rgba(var(--iclsp-accent-rgb),.9))}
@keyframes iclLineageFlow{to{stroke-dashoffset:-48}}
@media(max-width:900px){.iclLineageDiagram{display:none}}
@media(prefers-reduced-motion:reduce){.iclLineageEdges path{animation:none}.iclLineagePacket{display:none}}

/* Sekcje 08–09: ten sam rytm, geometria i CTA co zaakceptowane sekcje Office. */
.iclHumanControlSection .iclAI01CompactRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:54px;border:1px solid rgba(154,174,180,.2);border-top-color:rgba(var(--iclsp-accent-rgb),.42);overflow:hidden}
.iclHumanControlSection .iclAI01CompactRowItem{position:relative;display:flex;flex-direction:column;min-height:252px;padding:28px 30px 30px;border:0;border-left:1px solid rgba(154,174,180,.2);background:linear-gradient(160deg,rgba(var(--iclsp-accent-rgb),.045),rgba(7,11,13,.96) 62%);box-sizing:border-box;transition:background .25s ease,box-shadow .25s ease}
.iclHumanControlSection .iclAI01CompactRowItem:first-child{border-left:0;background:linear-gradient(160deg,rgba(var(--iclsp-accent-rgb),.12),rgba(18,11,9,.96) 66%);box-shadow:inset 0 2px 0 var(--iclsp-accent)}
.iclHumanControlSection .iclAI01CompactRowItem:hover{background:linear-gradient(160deg,rgba(var(--iclsp-accent-rgb),.1),rgba(7,11,13,.96) 68%);box-shadow:inset 0 2px 0 var(--iclsp-accent)}
.iclHumanControlSection .iclAI01CompactRowItem::after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:3px;background:var(--iclsp-accent);transform:scaleX(.62);transform-origin:left;transition:transform .3s ease}
.iclHumanControlSection .iclAI01CompactRowItem:hover::after,.iclHumanControlSection .iclAI01CompactRowItem:first-child::after{transform:scaleX(1)}
.iclHumanControlSection .iclAI01CompactRowTag{margin:0 0 24px;padding:0;border:0;border-radius:0;background:none;color:#a7b0b5;font:700 10px/1.2 var(--iclpv-fontMono);letter-spacing:.1em}
.iclHumanControlSection .iclAI01CompactRowTag--primary{color:var(--iclsp-accent)}
.iclHumanControlSection .iclDecisionNo{display:block;margin-bottom:auto;color:var(--iclsp-accent);font:700 12px/1 var(--iclpv-fontMono);letter-spacing:.08em}
.iclHumanControlSection .iclAI01CompactRowItem .iclspH3{margin:36px 0 12px;font-family:var(--iclpv-fontDisplay)!important;font-size:clamp(22px,2vw,27px);line-height:1.08;letter-spacing:-.03em}
.iclHumanControlSection .iclAI01CompactRowItem p{margin:0;max-width:34ch;color:#a7b0b5;font-size:16px;line-height:1.5}
.iclHumanControlSection .iclAI01SectionNote,.iclIntegrationsSection .iclAI01SectionNote{max-width:78ch;margin:28px 0 0;color:#a7b0b5;font-size:16px;line-height:1.5}
.iclHumanControlSection .iclAI01ArchCta,.iclIntegrationsSection .iclAI01ArchCta{width:100%;max-width:330px;margin-top:28px;box-sizing:border-box;border-color:var(--iclsp-accent)!important;background:rgba(var(--iclsp-accent-rgb),.06)!important;color:#f4f7f8!important;text-align:center;box-shadow:0 0 18px rgba(var(--iclsp-accent-rgb),.1)!important}
.iclHumanControlSection .iclAI01ArchCta:hover,.iclHumanControlSection .iclAI01ArchCta:focus-visible,.iclIntegrationsSection .iclAI01ArchCta:hover,.iclIntegrationsSection .iclAI01ArchCta:focus-visible{background:rgba(var(--iclsp-accent-rgb),.14)!important;box-shadow:0 12px 30px rgba(var(--iclsp-accent-rgb),.18)!important}

.iclIntegrationsSection .iclIntegrationBand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:54px;border:1px solid rgba(154,174,180,.2);border-top-color:rgba(var(--iclsp-accent-rgb),.42);overflow:hidden}
.iclIntegrationsSection .iclIntegrationCard{position:relative;display:flex;flex-direction:column;min-height:252px;padding:28px 26px 30px;border-left:1px solid rgba(154,174,180,.2);background:linear-gradient(160deg,rgba(var(--iclsp-accent-rgb),.045),rgba(7,11,13,.96) 62%);box-sizing:border-box;transition:background .25s ease,box-shadow .25s ease}
.iclIntegrationsSection .iclIntegrationCard:first-child{border-left:0}
.iclIntegrationsSection .iclIntegrationCard:hover{background:linear-gradient(160deg,rgba(var(--iclsp-accent-rgb),.1),rgba(7,11,13,.96) 68%);box-shadow:inset 0 2px 0 var(--iclsp-accent)}
.iclIntegrationsSection .iclIntegrationCard::after{content:"";position:absolute;left:26px;right:26px;bottom:0;height:3px;background:var(--iclsp-accent);transform:scaleX(.62);transform-origin:left;transition:transform .3s ease}
.iclIntegrationsSection .iclIntegrationCard:hover::after{transform:scaleX(1)}
.iclIntegrationsSection .iclIntegrationCardMeta{display:block;min-height:28px;margin-bottom:auto;color:var(--iclsp-accent);font:700 10px/1.35 var(--iclpv-fontMono);letter-spacing:.08em}
.iclIntegrationsSection .iclIntegrationCard .iclspH3{margin:36px 0 12px;font-family:var(--iclpv-fontDisplay)!important;font-size:clamp(21px,1.65vw,25px);line-height:1.08;letter-spacing:-.03em}
.iclIntegrationsSection .iclIntegrationCard p{margin:0 0 20px;color:#a7b0b5;font-size:15.5px;line-height:1.48}
.iclIntegrationsSection .iclIntegrationTags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.iclIntegrationsSection .iclIntegrationTags span{padding:6px 8px;border:1px solid rgba(var(--iclsp-accent-rgb),.38);background:rgba(var(--iclsp-accent-rgb),.035);color:#f4f7f8;font:700 9px/1 var(--iclpv-fontMono);letter-spacing:.07em}

@media(max-width:900px){.iclHumanControlSection .iclAI01CompactRow{grid-template-columns:1fr 1fr;margin-top:36px}.iclHumanControlSection .iclAI01CompactRowItem:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid rgba(154,174,180,.2)}.iclIntegrationsSection .iclIntegrationBand{grid-template-columns:1fr 1fr;margin-top:36px}.iclIntegrationsSection .iclIntegrationCard:nth-child(odd){border-left:0}.iclIntegrationsSection .iclIntegrationCard:nth-child(n+3){border-top:1px solid rgba(154,174,180,.2)}}
@media(max-width:600px){.iclHumanControlSection .iclAI01CompactRow,.iclIntegrationsSection .iclIntegrationBand{grid-template-columns:1fr;margin-top:30px}.iclHumanControlSection .iclAI01CompactRowItem,.iclHumanControlSection .iclAI01CompactRowItem:nth-child(3),.iclIntegrationsSection .iclIntegrationCard{grid-column:auto;min-height:0;padding:25px 22px 29px;border-left:0;border-top:1px solid rgba(154,174,180,.2)}.iclHumanControlSection .iclAI01CompactRowItem:first-child,.iclIntegrationsSection .iclIntegrationCard:first-child{border-top:0}.iclHumanControlSection .iclDecisionNo,.iclIntegrationsSection .iclIntegrationCardMeta{margin-bottom:28px}.iclHumanControlSection .iclAI01CompactRowItem .iclspH3,.iclIntegrationsSection .iclIntegrationCard .iclspH3{margin-top:0;font-size:23px}.iclHumanControlSection .iclAI01CompactRowItem::after{left:22px;right:22px}.iclIntegrationsSection .iclIntegrationCard::after{left:22px;right:22px}}

/* FAQ dopasowane do palety i typografii AI Office. */
.iclOrangeFaqSection .iclspSectionStartLabel{color:var(--iclsp-accent)!important}
.iclOrangeFaqSection .iclspSectionStartLine{background:var(--iclsp-accent)!important}
.iclOrangeFaqSection .iclspH2{margin-bottom:0!important;line-height:1.04!important}
.iclOrangeFaqSection .iclAI01Faq{margin-top:48px;border-top:1px solid rgba(var(--iclsp-accent-rgb),.38)}
.iclOrangeFaqSection .iclAI01FaqItem{border-bottom:1px solid rgba(154,174,180,.2)}
.iclOrangeFaqSection .iclAI01FaqSummary{padding:26px 4px;transition:background .2s ease}
.iclOrangeFaqSection .iclAI01FaqSummary:hover,.iclOrangeFaqSection .iclAI01FaqSummary:focus-visible{background:rgba(var(--iclsp-accent-rgb),.045)}
.iclOrangeFaqSection .iclAI01FaqQuestion{font-family:var(--iclpv-fontDisplay)!important;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.iclOrangeFaqSection .iclAI01FaqIndicator{color:var(--iclsp-accent);font-family:var(--iclpv-fontMono)!important;font-size:24px;line-height:1;transition:transform .2s ease,color .2s ease}
.iclOrangeFaqSection .iclAI01FaqItem[open] .iclAI01FaqIndicator{color:#ff8a5c}
.iclOrangeFaqSection .iclAI01FaqAnswer{padding:0 4px 28px}
.iclOrangeFaqSection .iclAI01FaqAnswer p{max-width:780px;font-family:var(--iclpv-fontBody)!important;font-size:16px;line-height:1.55}
@media(max-width:600px){.iclOrangeFaqSection .iclAI01Faq{margin-top:34px}.iclOrangeFaqSection .iclAI01FaqSummary{padding:22px 0}.iclOrangeFaqSection .iclAI01FaqQuestion{font-size:18px}.iclOrangeFaqSection .iclAI01FaqAnswer{padding:0 0 24px}.iclOrangeFaqSection .iclAI01FaqAnswer p{font-size:15.5px}}

/* Końcowe CTA w języku wizualnym AI Office. */
.iclOrangeFinalCtaSection{padding-top:clamp(72px,8vw,118px)!important;padding-bottom:clamp(88px,9vw,138px)!important}
.iclOrangeFinalCtaSection .iclspCta{position:relative;min-height:250px;padding:clamp(40px,5vw,68px);border:1px solid rgba(var(--iclsp-accent-rgb),.42);background:radial-gradient(620px 260px at 14% 48%,rgba(var(--iclsp-accent-rgb),.13),transparent 68%),linear-gradient(110deg,rgba(var(--iclsp-accent-rgb),.055),rgba(7,11,13,.97) 58%);box-shadow:inset 0 1px 0 rgba(255,122,68,.16),0 22px 60px rgba(0,0,0,.22);overflow:hidden}
.iclOrangeFinalCtaSection .iclspCta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--iclsp-accent) 0 38%,rgba(var(--iclsp-accent-rgb),.18) 38% 100%)}
.iclOrangeFinalCtaSection .iclFinalCtaCopy{max-width:820px}
.iclOrangeFinalCtaSection .iclFinalCtaEyebrow{display:block;margin-bottom:22px;color:var(--iclsp-accent);font:700 11px/1 var(--iclpv-fontMono)!important;letter-spacing:.14em;text-transform:uppercase}
.iclOrangeFinalCtaSection .iclspH2{margin:0!important;max-width:820px;font-family:var(--iclpv-fontDisplay)!important;font-size:clamp(38px,4vw,62px);line-height:1.04!important;letter-spacing:-.045em}
.iclOrangeFinalCtaSection .iclFinalCtaLead{max-width:670px;margin:22px 0 0;color:#a7b0b5;font-family:var(--iclpv-fontBody)!important;font-size:17px;line-height:1.55}
.iclOrangeFinalCtaSection .iclspButton--primary{min-width:315px;padding:18px 26px;border-color:var(--iclsp-accent)!important;background:rgba(var(--iclsp-accent-rgb),.08)!important;color:#f4f7f8!important;text-align:center;box-shadow:0 0 20px rgba(var(--iclsp-accent-rgb),.1)!important}
.iclOrangeFinalCtaSection .iclspButton--primary:hover,.iclOrangeFinalCtaSection .iclspButton--primary:focus-visible{background:rgba(var(--iclsp-accent-rgb),.16)!important;box-shadow:0 12px 32px rgba(var(--iclsp-accent-rgb),.2)!important}
@media(max-width:900px){.iclOrangeFinalCtaSection .iclspCta{align-items:flex-start;flex-direction:column;gap:34px}.iclOrangeFinalCtaSection .iclspButton--primary{width:100%;min-width:0;max-width:380px}}
@media(max-width:600px){.iclOrangeFinalCtaSection{padding-top:62px!important;padding-bottom:84px!important}.iclOrangeFinalCtaSection .iclspCta{min-height:0;padding:32px 24px 38px}.iclOrangeFinalCtaSection .iclFinalCtaEyebrow{margin-bottom:18px}.iclOrangeFinalCtaSection .iclspH2{font-size:34px;line-height:1.06!important}.iclOrangeFinalCtaSection .iclFinalCtaLead{margin-top:18px;font-size:15.5px}.iclOrangeFinalCtaSection .iclspButton--primary{max-width:none}}
@media(max-width:360px){.iclOrangeFinalCtaSection .iclspCta{padding:28px 16px 32px}.iclOrangeFinalCtaSection .iclspH2{font-size:20px;line-height:1.12!important;letter-spacing:-.04em;overflow-wrap:normal;word-break:normal}.iclOrangeFinalCtaSection .iclFinalCtaLead{overflow-wrap:normal;word-break:normal}}
@media(max-width:600px){.iclAI01HeroSceneNavBtn[data-scene-btn="2"] .iclAI01HeroSceneNavLabel{font-size:0!important}.iclAI01HeroSceneNavBtn[data-scene-btn="2"] .iclAI01HeroSceneNavLabel::after{content:"AI Office";font-size:10px;line-height:1.2}}

/* Native Section 03 (no iframe). */
.iclAI03Component{--bg:#050809;--o:var(--iclsp-accent);--c:#00dfea}.iclAI03Component *{box-sizing:border-box}.iclAI03Scene{width:min(1280px,calc(100% - 48px));height:720px;margin:28px auto;position:relative;overflow:hidden;border-block:1px solid #294144;background:radial-gradient(ellipse at 75% 75%,#152422,#050809 56%)}.iclAI03Roof{height:116px;border-bottom:1px solid #294144;background:repeating-linear-gradient(135deg,transparent 0 42px,#1b2d2f 43px 46px,transparent 47px 82px)}.iclAI03Label{position:absolute;top:142px;left:28px;color:var(--c);font:700 12px var(--iclpv-fontMono);letter-spacing:.16em}.iclAI03Floor{position:absolute;bottom:86px;left:0;right:0;height:4px;background:#536c6e}.iclAI03Tile{position:absolute;width:150px;height:62px;padding:11px 13px;border:1px solid #11728a;background:#0a1c24;color:#d3eced;font:700 11px/1.35 var(--iclpv-fontMono);transform:rotate(var(--r));z-index:3;will-change:transform,opacity}.iclAI03Machine{position:absolute;width:510px;height:240px;bottom:90px;right:-510px;z-index:5;will-change:transform}.iclAI03Cut{position:absolute;left:0;bottom:35px;width:146px;height:146px;border-radius:50%;background:#0a1112;box-shadow:0 0 32px rgba(var(--iclsp-accent-rgb),.5)}.iclAI03Cut:before{content:"⚙";position:absolute;inset:-9px;color:var(--o);font:154px/1 Arial;animation:iclAI03Spin 1.6s linear infinite}.iclAI03Boom{position:absolute;left:56px;bottom:76px;width:122px;height:53px;background:#3b1b0e;clip-path:polygon(0 27%,100% 0,100% 100%,0 74%);z-index:2}.iclAI03MachineBody{position:absolute;left:116px;right:0;bottom:31px;height:160px;border:2px solid var(--o);background:linear-gradient(145deg,#371b10,#10191a);clip-path:polygon(13% 0,100% 0,100% 83%,85% 100%,0 100%,0 30%)}.iclAI03MachineBody:after{content:"AI OFFICE";position:absolute;right:50px;top:62px;color:var(--o);font:700 24px var(--iclpv-fontMono)}.iclAI03Sub{position:absolute;right:48px;bottom:24px;color:#96a9aa;font:10px var(--iclpv-fontMono)}.iclAI03Cab{position:absolute;right:59px;top:0;width:140px;height:88px;border:1px solid var(--o);background:#11191a;z-index:1}.iclAI03Cab:after{content:"";position:absolute;inset:13px;border:1px solid #466568}.iclAI03Track{position:absolute;left:94px;bottom:0;width:304px;height:38px;border:2px solid #3d5153;border-radius:22px;background:repeating-linear-gradient(90deg,#203234 0 28px,#091012 28px 43px)}.iclAI03Belt{position:absolute;height:40px;left:0;width:0;border:1px solid #40585a;border-top:2px solid var(--o);border-radius:0 20px 20px 0;background:repeating-linear-gradient(90deg,#273a3c 0 31px,#10191a 31px 47px);z-index:4}.iclAI03Receiver{position:absolute;width:142px;height:61px;border:2px solid var(--o);background:#10191a;padding:10px;color:#ffb51c;font:10px var(--iclpv-fontMono);z-index:6}.iclAI03Receiver:after{content:"";display:block;height:13px;margin-top:9px;background:repeating-linear-gradient(90deg,#557174 0 16px,#162326 16px 24px)}.iclAI03Half{position:absolute;width:75px;height:62px;overflow:hidden;border:1px solid #11728a;background:#0a1c24;z-index:4}.iclAI03Half span{display:block;width:150px;padding:11px 13px;color:#d3eced;font:700 11px/1.35 var(--iclpv-fontMono)}.iclAI03Ore{position:absolute;width:78px;height:24px;border:1px solid var(--c);background:#173034;z-index:7}@keyframes iclAI03Spin{to{transform:rotate(360deg)}}@media(max-width:680px){.iclAI03Scene{width:100%;height:620px;margin:0}.iclAI03Roof{height:82px}.iclAI03Label{top:100px;left:14px}.iclAI03Machine{scale:.62;transform-origin:bottom right}.iclAI03Tile{scale:.7;transform-origin:left top}.iclAI03Floor{bottom:58px}}



/* Front cutting head: a proper ICL-style gear, with no train/rail treatment. */
.iclAI03Cut{background:radial-gradient(circle at center,#0a1112 0 31%,var(--o) 32% 42%,#0a1112 43% 48%,transparent 49%)}
.iclAI03Cut:before{content:"";position:absolute;inset:-8px;color:var(--o);text-align:center;animation:iclAI03Spin 1.6s linear infinite}
.iclAI03Cut:after{content:"";position:absolute;inset:51px;border-radius:50%;background:#0a1112}
.iclAI03Receiver{width:172px;height:96px;padding:14px 16px;transform:translateY(-35px);font-size:11px}
.iclAI03Receiver:after{height:18px;margin-top:18px}
.iclAI03Ore{width:max-content;min-width:154px;max-width:260px;height:auto;min-height:58px;padding:12px 18px;border:2px solid var(--c);background:#0c3034;color:#efffff;font:700 13px/1.35 var(--iclpv-fontMono);clip-path:polygon(5% 0,95% 0,100% 18%,100% 82%,95% 100%,5% 100%,0 82%,0 18%)}
.iclAI03Tile{width:clamp(230px,20vw,285px);height:58px;padding:11px 17px;margin-top:0;background:linear-gradient(145deg,#303537,#171b1d);border-color:#687174;color:#e1e4e4;clip-path:polygon(4% 0,96% 0,100% 14%,100% 86%,96% 100%,4% 100%,0 86%,0 14%);font-size:12px;letter-spacing:.01em}
.iclAI03Half{width:125px;height:62px;border-color:#687174;background:#23282a}.iclAI03Half span{width:250px;height:62px;padding:12px 16px;background:linear-gradient(145deg,#303537,#171b1d);color:#e1e4e4}
.iclAI03Scene{height:clamp(560px,calc(100vh - 36px),680px);margin:18px auto}
@media(max-height:800px) and (min-width:681px){.iclAI03Scene{height:590px}.iclAI03Roof{height:88px}.iclAI03Label{top:108px}.iclAI03Machine{bottom:76px}.iclAI03Floor{bottom:72px}}
.iclAI03Cut:before{content:"";inset:0;background:var(--o);clip-path:polygon(44% 0,56% 0,59% 11%,66% 13%,74% 5%,82% 13%,76% 21%,82% 28%,94% 27%,97% 39%,86% 44%,86% 56%,97% 61%,94% 73%,82% 72%,76% 79%,82% 87%,74% 95%,66% 87%,59% 89%,56% 100%,44% 100%,41% 89%,34% 87%,26% 95%,18% 87%,24% 79%,18% 72%,6% 73%,3% 61%,14% 56%,14% 44%,3% 39%,6% 27%,18% 28%,24% 21%,18% 13%,26% 5%,34% 13%,41% 11%);animation:iclAI03Spin 1.6s linear infinite}


.iclAI03Receiver{width:124px!important;padding-inline:12px!important}.iclAI03Receiver:after{width:92px!important;background:linear-gradient(#557174,#557174) 0 0/18px 18px no-repeat,linear-gradient(#557174,#557174) 24px 0/18px 18px no-repeat,linear-gradient(#557174,#557174) 48px 0/18px 18px no-repeat,linear-gradient(#557174,#557174) 72px 0/18px 18px no-repeat!important}

.iclAI03Ore{z-index:5!important}.iclAI03Receiver{z-index:6!important}.iclAI03Belt{z-index:4!important}

.iclAI03Tile{opacity:0}.iclAI03Tile.iclAI03TileReady{opacity:1;transition:opacity .18s linear}


.iclAI03Label{display:flex!important;align-items:center;gap:14px;color:var(--o)!important}.iclAI03Label:after{content:"";display:block;width:clamp(120px,18vw,280px);height:1px;background:var(--o);opacity:.78}
@media(max-width:680px){
 .iclAI03Scene{height:640px!important;margin:0!important}.iclAI03Roof{height:82px}.iclAI03Label{top:102px!important;left:18px!important;font-size:10px!important;gap:10px}.iclAI03Label:after{width:64px}.iclAI03Floor{bottom:34px!important}
 .iclAI03Machine{left:calc(50% - 64px)!important;right:auto!important;bottom:146px!important;width:128px!important;height:128px!important;scale:1!important;transform:none!important;z-index:7!important}
 .iclAI03Machine .iclAI03Boom,.iclAI03Machine .iclAI03MachineBody,.iclAI03Machine .iclAI03Cab,.iclAI03Machine .iclAI03Track{display:none!important}.iclAI03Cut{left:0!important;bottom:0!important;width:128px!important;height:128px!important}
 .iclAI03Tile{display:none!important}
 .iclAI03MobileFeed{position:absolute;inset:0;z-index:9;pointer-events:none}.iclAI03MobileRaw,.iclAI03MobileHalf{position:absolute;width:118px;height:54px;padding:9px 11px;background:linear-gradient(145deg,#303537,#171b1d);border:1px solid #687174;color:#e1e4e4;clip-path:polygon(4% 0,96% 0,100% 14%,100% 86%,96% 100%,4% 100%,0 86%,0 14%);font:700 9px/1.25 var(--iclpv-fontMono);will-change:transform,opacity}.iclAI03MobileHalf{width:59px;overflow:hidden;padding:0}.iclAI03MobileHalf>span{display:block;width:118px;height:54px;padding:9px 11px}.iclAI03MobileHalf.iclAI03Right>span{transform:translateX(-59px)}
 .iclAI03Receiver,.iclAI03Belt,.iclAI03Ore{display:none!important}
 .iclAI03MobileConveyor{position:absolute;left:0;right:0;bottom:48px;height:72px;overflow:hidden;z-index:10;border-bottom:3px solid #527174}
 .iclAI03MobileConveyor:before{content:"";position:absolute;left:0;right:0;bottom:0;height:13px;background:repeating-linear-gradient(90deg,#294649 0 16px,#0a1517 16px 24px);opacity:.9}
 .iclAI03MobileOutput{position:absolute;left:0;bottom:16px;width:128px;min-height:50px;padding:10px 12px;border:2px solid var(--c);background:#0c3034;color:#efffff;font:700 9px/1.3 var(--iclpv-fontMono);white-space:pre-line;clip-path:polygon(6% 0,94% 0,100% 18%,100% 82%,94% 100%,6% 100%,0 82%,0 18%);box-shadow:0 0 12px #00dfea55;will-change:transform,opacity}
}


.iclAI03Component{width:100%;padding:0;background:#050809;overflow:hidden}
.iclAI03TileType,.iclAI03TileAction{display:block}
.iclAI03Receiver{visibility:hidden}
.iclAI03Receiver.is-positioned{visibility:visible}
.iclAI03Tile{top:82px;opacity:0}
.iclAI03Tile.iclAI03TileReady{opacity:1}
.iclAI03MobileFeed{display:none}
@media(max-width:680px){
  .iclAI03MobileFeed{display:block}
  .iclAI03Receiver{visibility:hidden!important}
}
@media(prefers-reduced-motion:reduce){
  .iclAI03Component *,.iclAI03Component *::before,.iclAI03Component *::after{animation:none!important;transition:none!important}
}

/* R20 — native GreenShift equivalents of the former inline SVGs. */
.iclAI01ImpactIcon--glyph{display:inline-grid;place-items:center;width:14px;height:14px;color:var(--iclsp-accent);font:700 11px/1 var(--iclpv-fontMono);text-shadow:0 0 9px rgba(var(--iclsp-accent-rgb),.46)}
.iclLineageDiagram--fallback{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:center;min-height:128px;padding:18px;margin-top:28px;border:1px solid rgba(var(--iclsp-accent-rgb),.30);background:linear-gradient(135deg,rgba(var(--iclsp-accent-rgb),.07),rgba(7,11,13,.35));transform:none}
.iclLineageDiagram--fallback .iclLineageDiagramNode,.iclLineageDiagram--fallback .iclLineageDiagramHub{display:grid;place-items:center;min-height:34px;padding:7px 8px;border:1px solid rgba(var(--iclsp-accent-rgb),.42);color:#dce4e7;font:700 10px/1 var(--iclpv-fontMono);letter-spacing:.07em;text-align:center}
.iclLineageDiagram--fallback .iclLineageDiagramHub{grid-column:2;box-shadow:0 0 18px rgba(var(--iclsp-accent-rgb),.15);color:var(--iclsp-accent)}

/* =========================================================
   R22 — MOBILE / WSPÓLNY KONTEKST
   Na telefonie diagramy pomocnicze pod opisami „Źródła danych” oraz
   „Biura i pracownicy AI” są dekoracyjne i zabierają zbyt dużo miejsca.
   Desktop i tablet pozostają bez zmian. Kontenery boczne dopasowują
   wysokość do samego tekstu zamiast dziedziczyć min-height z Core Map.
   ========================================================= */
@media (max-width: 600px) {
  .iclAIPageRoot .iclOrangeOfficeSection .iclspCoreMap > .iclspCoreSide > .iclLineageDiagram--fallback {
    display: none !important;
  }

  .iclAIPageRoot .iclOrangeOfficeSection .iclspCoreMap > .iclspCoreSide {
    min-height: 0 !important;
    height: auto !important;
    padding: 26px 24px !important;
  }
}

/* =========================================================
   R23 — KOMBAJN HYBRYDOWY
   Treść pozostaje edytowalna w GreenShift, natomiast geometria maszyny,
   taśmy, odbiornika, cięcia i ruchome kopie są tworzone dopiero na froncie.
   Dzięki temu wrappery Gutenberga nie wpływają na animację.
   ========================================================= */
.iclAI03Hybrid .iclAI03Data{display:none!important}
.iclAI03Hybrid .iclAI03Scene>.iclAI03Roof,
.iclAI03Hybrid .iclAI03Scene>.iclAI03Floor,
.iclAI03Hybrid .iclAI03Scene>.iclAI03Belt,
.iclAI03Hybrid .iclAI03Scene>.iclAI03Receiver,
.iclAI03Hybrid .iclAI03Scene>.iclAI03Machine,
.iclAI03Hybrid .iclAI03Scene>.iclAI03MobileFeed,
.iclAI03Hybrid .iclAI03Scene>.iclAI03Label,
.iclAI03Hybrid .iclAI03Scene>.iclAI03Tile{display:none!important}
.iclAI03Hybrid .iclAI03Runtime{position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:layout paint}
.iclAI03Hybrid .iclAI03Runtime>.iclAI03Roof,
.iclAI03Hybrid .iclAI03Runtime>.iclAI03Floor,
.iclAI03Hybrid .iclAI03Runtime>.iclAI03Belt,
.iclAI03Hybrid .iclAI03Runtime>.iclAI03Receiver,
.iclAI03Hybrid .iclAI03Runtime>.iclAI03Machine,
.iclAI03Hybrid .iclAI03Runtime>.iclAI03Label,
.iclAI03Hybrid .iclAI03Runtime>.iclAI03Tile{display:block}
.iclAI03Hybrid .iclAI03Runtime>.iclAI03MobileFeed{display:none}
.iclAI03Hybrid .iclAI03MachineBody:after{content:none!important}
.iclAI03Hybrid .iclAI03MachineTitle{position:absolute;right:50px;top:62px;color:var(--o);font:700 24px var(--iclpv-fontMono);white-space:nowrap}
.iclAI03Hybrid .iclAI03Runtime .iclAI03Ore{max-width:min(260px,calc(100% - 36px));overflow-wrap:anywhere}
.iclAI03Hybrid .iclAI03Runtime .iclAI03Half{box-sizing:border-box}
@media(max-width:680px){
  .iclAI03Hybrid .iclAI03Runtime>.iclAI03Tile{display:none!important}
  .iclAI03Hybrid .iclAI03Runtime>.iclAI03MobileFeed{display:block!important}
}
/* R24 — restore the accepted combine viewport from the original component.
   The scene stays capped at 1280px; stretching it to the full page changed
   the conveyor geometry and made its rounded end appear in the wrong place. */
.iclAI03Hybrid .iclAI03Scene{width:min(1280px,calc(100% - 48px));max-width:1280px;margin:18px auto}
@media(max-width:680px){.iclAI03Hybrid .iclAI03Scene{width:100%;max-width:none;margin:0!important}}


/* R26 — combine output choreography + local typography only.
   The component uses the three font families shipped with ICL; no remote or
   additional font is introduced. Finished turquoise tiles travel one at a
   time, matching the accepted standalone combine instead of stacking. */
.iclAI03Hybrid{
  font-family:var(--iclpv-fontBody,"IBM Plex Sans","Segoe UI",Arial,sans-serif);
}
.iclAI03Hybrid :is(.iclAI03Label,.iclAI03Receiver,.iclAI03Sub,.iclAI03Tile,.iclAI03Half,.iclAI03Ore,.iclAI03MobileRaw,.iclAI03MobileHalf,.iclAI03MobileOutput){
  font-family:var(--iclpv-fontMono,"IBM Plex Mono",ui-monospace,Consolas,monospace)!important;
}
.iclAI03Hybrid .iclAI03MachineTitle{
  font-family:var(--iclpv-fontMono,"IBM Plex Mono",ui-monospace,Consolas,monospace)!important;
  font-weight:700;
}
.iclAI03Hybrid .iclAI03TileType{display:block;font-weight:700;letter-spacing:.015em}
.iclAI03Hybrid .iclAI03TileAction{display:block;margin-top:2px;font-weight:500;letter-spacing:0}
.iclAI03Hybrid .iclAI03Ore{
  font-size:12px;
  font-weight:600;
  line-height:1.28;
  letter-spacing:.01em;
  pointer-events:none;
}
.iclAI03Hybrid .iclAI03OreType{display:block;font-weight:700;white-space:nowrap}
.iclAI03Hybrid .iclAI03OreAction{display:block;margin-top:2px;font-weight:600;white-space:nowrap}


/* R27 — Polish diacritics/readability in combine content.
   Technical UI labels remain IBM Plex Mono; editable card content uses the
   locally bundled IBM Plex Sans for natural Polish glyph shapes. */
.iclAI03Hybrid :is(.iclAI03TileType,.iclAI03TileAction,.iclAI03Half span,.iclAI03OreType,.iclAI03OreAction,.iclAI03MobileRaw,.iclAI03MobileHalf>span,.iclAI03MobileOutput){
  font-family:var(--iclpv-fontBody,"IBM Plex Sans","Segoe UI",Arial,sans-serif)!important;
}
.iclAI03Hybrid .iclAI03TileType,
.iclAI03Hybrid .iclAI03OreType{font-weight:700;letter-spacing:.01em}
.iclAI03Hybrid .iclAI03TileAction,
.iclAI03Hybrid .iclAI03OreAction{font-weight:600;letter-spacing:0}


/* =========================================================
   R30 — AI OFFICE / RESTORE ACCEPTED FRONTEND ANIMATIONS
   Gutenberg keeps the editable text/fallback blocks. Decorative runtime
   geometry is injected by icl-ai-office.js only on the public frontend.
   ========================================================= */

/* Wspólny kontekst — runtime SVG uses the accepted reference geometry. */
.iclAIPageRoot .iclLineageDiagram--fallback.iclLineageRuntimeReady{
  display:block;
  min-height:0;
  padding:0;
  border:0;
  background:none;
  overflow:visible;
}
.iclAIPageRoot .iclLineageDiagram--fallback.iclLineageRuntimeReady > .iclLineageDiagramNode,
.iclAIPageRoot .iclLineageDiagram--fallback.iclLineageRuntimeReady > .iclLineageDiagramHub{
  display:none!important;
}
.iclAIPageRoot .iclLineageRuntimeSvg{
  display:block;
  width:100%;
  height:auto;
  margin-top:0;
  overflow:visible;
  transform:scale(1.04);
  transform-origin:center;
}
.iclAIPageRoot .iclLineageRuntimeSvg .iclLineageEdges path{
  fill:none;
  stroke:rgba(var(--iclsp-accent-rgb),.5);
  stroke-width:1.6;
  stroke-dasharray:6 7;
  animation:iclLineageFlow 5s linear infinite;
}
.iclAIPageRoot .iclLineageRuntimeSvg .iclLineageNodes rect{
  fill:rgba(var(--iclsp-accent-rgb),.035);
  stroke:rgba(var(--iclsp-accent-rgb),.5);
  stroke-width:1;
}
.iclAIPageRoot .iclLineageRuntimeSvg .iclLineageNodes .iclLineageHub{
  fill:rgba(var(--iclsp-accent-rgb),.11);
  stroke:var(--iclsp-accent);
  stroke-width:1.4;
  filter:drop-shadow(0 0 10px rgba(var(--iclsp-accent-rgb),.16));
}
.iclAIPageRoot .iclLineageRuntimeSvg .iclLineageLabels text{
  fill:#f4f7f8;
  font:700 13px var(--iclpv-fontMono);
  letter-spacing:.055em;
}
.iclAIPageRoot .iclLineageRuntimeSvg .iclLineageLabels .iclLineageStatus{
  fill:#ff8a5c;
  font-size:10px;
  letter-spacing:.045em;
}
.iclAIPageRoot .iclLineageRuntimeSvg .iclLineageLabels .iclLineageHubLabel,
.iclAIPageRoot .iclLineageRuntimeSvg .iclLineageLabels .iclLineageHubStatus{text-anchor:middle}
.iclAIPageRoot .iclLineageRuntimeSvg .iclLineageLabels .iclLineageHubLabel{font-size:14px;letter-spacing:.035em}
.iclAIPageRoot .iclLineageRuntimeSvg .iclLineageLabels .iclLineageHubStatus{font-size:11px;letter-spacing:.04em}
.iclAIPageRoot .iclLineageRuntimeSvg .iclLineagePacket{
  fill:var(--iclsp-accent);
  filter:drop-shadow(0 0 7px rgba(var(--iclsp-accent-rgb),.9));
}
/* Keep the restored diagram on tablet too; only the existing <=600px compact
   mobile composition hides it. This is intentionally more robust than the
   old inline-SVG @media(max-width:900px) rule. */
@media (min-width:601px) and (max-width:900px){
  .iclAIPageRoot .iclLineageDiagram--fallback.iclLineageRuntimeReady{display:block!important}
  .iclAIPageRoot .iclLineageRuntimeSvg{display:block!important}
}
@media(prefers-reduced-motion:reduce){
  .iclAIPageRoot .iclLineageRuntimeSvg .iclLineageEdges path{animation:none}
  .iclAIPageRoot .iclLineageRuntimeSvg .iclLineagePacket{display:none}
}

/* Kombajn — prevent the zero-width bordered belt from flashing as a vertical
   line before JS has measured and positioned the conveyor. */
.iclAIPageRoot .iclAI03Hybrid .iclAI03Runtime > .iclAI03Belt{visibility:hidden}