/* Prevents the browser's default 8px body margin (and default white
   background) from showing as a frame around full-bleed dark shells.
   WordPress themes normally zero this out globally, but a shell rendered
   outside a theme context (e.g. a bare preview) has no such reset. */
html,
body {
  margin: 0;
  background: #050809;
}

.iclspShell,
.iclspYoutubeSection {
  --iclsp-bg: #07090a;
  --iclsp-panel: #0d1113;
  --iclsp-panel-2: #111719;
  --iclsp-line: rgba(154, 174, 180, 0.2);
  --iclsp-text: #f4f7f8;
  --iclsp-muted: #a7b0b5;
  --iclsp-accent: #00dbe7;
  --iclsp-accent-rgb: 0, 219, 231;
  --iclsp-orange: #ff6528;
  width: 100%;
  color: var(--iclsp-text);
  background:
    radial-gradient(circle at 12% 20%, rgba(var(--iclsp-accent-rgb), 0.08), transparent 34rem),
    var(--iclsp-bg);
  /* var() fallback (not just var(--iclpv-fontBody)) because .iclspYoutubeSection
     is used as its own standalone root pattern (patterns/components/youtube-cards.html),
     not nested inside .iclspShell -- --iclpv-fontBody (declared on .iclspShell in
     icl-shared-original.css) would otherwise be undefined there and silently fall
     back to the browser default, not the canonical family. */
  font-family: var(--iclpv-fontBody, "IBM Plex Sans", "Segoe UI", Arial, sans-serif);
  line-height: 1.55;
}

.iclspThemeOrange {
  --iclsp-accent: #ff6528;
  --iclsp-accent-rgb: 255, 101, 40;
}

.iclspThemeCore {
  --iclsp-accent: #d4dee1;
  --iclsp-accent-rgb: 212, 222, 225;
  background:
    radial-gradient(circle at 10% 28%, rgba(0, 219, 231, 0.08), transparent 34rem),
    radial-gradient(circle at 92% 58%, rgba(255, 101, 40, 0.07), transparent 36rem),
    var(--iclsp-bg);
}

.iclspShell,
.iclspShell *,
.iclspYoutubeSection,
.iclspYoutubeSection * {
  box-sizing: border-box;
}

.iclspShell a,
.iclspYoutubeSection a {
  color: inherit;
  text-decoration: none;
}

.iclspShell img,
.iclspYoutubeSection img {
  display: block;
  max-width: 100%;
}

.iclspHeader,
.iclspMain,
.iclspFooter {
  margin-left: clamp(44px, 5vw, 72px);
}

.iclspContainer {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
}

.iclspHeader {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid var(--iclsp-line);
  background: rgba(7, 9, 10, 0.94);
  backdrop-filter: blur(18px);
}

.iclspHeaderInner {
  width: min(1240px, calc(100% - 48px));
  min-height: 86px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

.iclspBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  font-weight: 760;
  letter-spacing: -0.03em;
}

.iclspBrandMark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--iclsp-accent-rgb), 0.55);
  border-radius: 50%;
  color: var(--iclsp-accent);
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  box-shadow: 0 0 24px rgba(var(--iclsp-accent-rgb), 0.1);
}

.iclspBrandName {
  white-space: nowrap;
}

.iclspNav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.iclspNavLink {
  position: relative;
  color: var(--iclsp-muted) !important;
  font-size: 14px;
  font-weight: 620;
}

.iclspNavLink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -9px;
  height: 1px;
  background: var(--iclsp-accent);
  transition: right 180ms ease;
}

.iclspNavLink:hover,
.iclspNavLink:focus-visible {
  color: var(--iclsp-text) !important;
}

.iclspNavLink:hover::after,
.iclspNavLink:focus-visible::after {
  right: 0;
}

.iclspHeader .iclspButton {
  min-height: 48px;
  padding-inline: 20px;
  white-space: nowrap;
}

.iclspNavToggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--iclsp-line);
  border-radius: 12px;
  color: var(--iclsp-text);
  background: var(--iclsp-panel);
  cursor: pointer;
}

.iclspNavToggleIcon {
  font-size: 21px;
}

.iclspNavPanel[hidden] {
  display: none !important;
}

.iclspNavPanel {
  display: grid;
  gap: 6px;
  padding: 12px 24px 24px;
  border-top: 1px solid var(--iclsp-line);
  background: #090c0d;
}

.iclspNavPanel a {
  padding: 13px 14px;
  color: var(--iclsp-muted);
  border-radius: 8px;
}

.iclspNavPanel a:hover,
.iclspNavPanel a:focus-visible,
.iclspNavPanelCta {
  color: var(--iclsp-text) !important;
  background: rgba(var(--iclsp-accent-rgb), 0.08);
}

.iclspRail {
  position: fixed;
  z-index: 110;
  left: clamp(18px, 2.4vw, 34px);
  top: 0;
  bottom: 0;
  width: 26px;
  pointer-events: none;
}

.iclspRailLine {
  position: absolute;
  left: 12px;
  top: 86px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--iclsp-accent) 7%, var(--iclsp-accent) 93%, transparent);
  box-shadow: 0 0 18px rgba(var(--iclsp-accent-rgb), 0.24);
}

.iclspRailNode {
  position: absolute;
  left: 3px;
  top: 96px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--iclsp-accent);
  border-radius: 50%;
  background: var(--iclsp-bg);
  box-shadow: 0 0 0 5px rgba(var(--iclsp-accent-rgb), 0.08), 0 0 18px rgba(var(--iclsp-accent-rgb), 0.65);
  will-change: top;
}

.iclspHero {
  position: relative;
  min-height: min(820px, calc(100vh - 86px));
  display: flex;
  align-items: center;
  padding-block: clamp(88px, 12vw, 160px);
  border-bottom: 1px solid var(--iclsp-line);
  overflow: hidden;
}

.iclspHero::after {
  content: "";
  position: absolute;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  right: -8%;
  top: 10%;
  border: 1px solid rgba(var(--iclsp-accent-rgb), 0.15);
  border-radius: 50%;
  box-shadow: inset 0 0 120px rgba(var(--iclsp-accent-rgb), 0.05);
  pointer-events: none;
}

.iclspHeroGrid,
.iclspSplit,
.iclspFooterGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.iclspHeroCopy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.iclspEyebrow {
  display: block;
  margin-bottom: 22px;
  color: var(--iclsp-accent);
  font: 700 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.iclspH1,
.iclspH2,
.iclspH3,
.iclspFooterTitle,
.iclspPostTitle {
  margin: 0;
  color: var(--iclsp-text);
  font-weight: 760;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.iclspH1 {
  max-width: 900px;
  font-size: clamp(48px, 7vw, 94px);
  line-height: var(--icl-hero-h1-lh, 1.06);
}

.iclspH2,
.iclspFooterTitle {
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1;
}

.iclspH3 {
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.08;
}

.iclspLead {
  max-width: 760px;
  margin: 30px 0 0;
  color: var(--iclsp-muted);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.55;
}

.iclspButton {
  width: fit-content;
  min-height: 54px;
  margin-top: 34px;
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--iclsp-accent-rgb), 0.55);
  border-radius: 10px;
  color: var(--iclsp-text) !important;
  background: rgba(var(--iclsp-accent-rgb), 0.07);
  font-weight: 720;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.iclspButton:hover,
.iclspButton:focus-visible {
  transform: translateY(-2px);
  background: rgba(var(--iclsp-accent-rgb), 0.14);
  box-shadow: 0 12px 36px rgba(var(--iclsp-accent-rgb), 0.12);
}

.iclspButton--primary {
  color: #021012 !important;
  border-color: var(--iclsp-accent);
  background: var(--iclsp-accent);
}

.iclspThemeOrange .iclspButton--primary {
  color: #160701 !important;
}

.iclspThemeCore .iclspButton--primary {
  color: #080b0c !important;
}

.iclspSignalCard {
  position: relative;
  z-index: 2;
  min-height: 320px;
  padding: clamp(32px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(var(--iclsp-accent-rgb), 0.3);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--iclsp-accent-rgb), 0.16), transparent 35%),
    rgba(13, 17, 19, 0.82);
  overflow: hidden;
}

.iclspSignal {
  width: 104px;
  height: 104px;
  margin: 0 auto 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--iclsp-accent-rgb), 0.65);
  border-radius: 50%;
  color: var(--iclsp-accent);
  font: 800 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  box-shadow: 0 0 70px rgba(var(--iclsp-accent-rgb), 0.15);
}

.iclspSection {
  position: relative;
  padding-block: clamp(88px, 10vw, 148px);
  border-bottom: 1px solid var(--iclsp-line);
}

.iclspSection--muted {
  background: rgba(255, 255, 255, 0.015);
}

.iclspSection .iclspH2 + .iclspGrid,
.iclspSection .iclspH2 + .iclspSteps,
.iclspSection .iclspH2 + .iclspCoreMap,
.iclspSection .iclspH2 + .iclspQuery,
.iclspSection .iclspH2 + .iclspYoutubeGrid,
.iclspSection > .iclspContainer > .iclspGrid,
.iclspSection > .iclspContainer > .iclspSteps,
.iclspSection > .iclspContainer > .iclspCoreMap,
.iclspSection > .iclspContainer > .iclspQuery,
.iclspSection > .iclspContainer > .iclspYoutubeGrid {
  margin-top: 56px;
}

.iclspCopy,
.iclspArticleCopy {
  color: var(--iclsp-muted);
  font-size: clamp(18px, 1.5vw, 21px);
}

.iclspCopy p,
.iclspArticleCopy p {
  margin: 0 0 1.2em;
}

.iclspGrid {
  display: grid;
  gap: 20px;
}

.iclspGrid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.iclspGrid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.iclspGrid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.iclspCard {
  min-height: 280px;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--iclsp-line);
  background: linear-gradient(145deg, rgba(var(--iclsp-accent-rgb), 0.055), rgba(13, 17, 19, 0.55));
}

.iclspCardNo {
  display: block;
  margin-bottom: 64px;
  color: var(--iclsp-accent);
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
}

.iclspCard p {
  margin: 18px 0 0;
  color: var(--iclsp-muted);
  font-size: 17px;
}

.iclspSteps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--iclsp-line);
}

.iclspStep {
  min-height: 156px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  border-right: 1px solid var(--iclsp-line);
}

.iclspStep:last-child {
  border-right: 0;
}

.iclspStep b {
  color: var(--iclsp-accent);
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.iclspStep span {
  font-size: 17px;
  font-weight: 700;
}

.iclspCta {
  min-height: 260px;
  padding: clamp(36px, 5vw, 68px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), 0.3);
  background: linear-gradient(100deg, rgba(var(--iclsp-accent-rgb), 0.08), transparent);
}

.iclspCta .iclspButton {
  flex: 0 0 auto;
  margin: 0;
}

.iclspCoreMap {
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  align-items: stretch;
  gap: 20px;
}

.iclspCoreSide,
.iclspCoreCenter {
  min-height: 310px;
  padding: 38px;
  border: 1px solid var(--iclsp-line);
  background: var(--iclsp-panel);
}

.iclspCoreSide--cyan {
  border-top-color: #00dbe7;
}

.iclspCoreSide--orange {
  border-top-color: #ff6528;
}

.iclspCoreCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.iclspCoreCenter .iclspSignal {
  margin: 0 0 22px;
}

.iclspCoreCenter b {
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.16em;
}

.iclspPostGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 0 !important;
  list-style: none;
}

.iclspPostGrid > li {
  margin: 0 !important;
}

.iclspPostCard {
  height: 100%;
  border: 1px solid var(--iclsp-line);
  background: var(--iclsp-panel);
  transition: transform 180ms ease, border-color 180ms ease;
}

.iclspPostCard:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--iclsp-accent-rgb), 0.5);
}

.iclspPostImage {
  margin: 0 !important;
  overflow: hidden;
  background: var(--iclsp-panel-2);
}

.iclspPostImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iclspPostCardBody {
  padding: 30px;
}

.iclspPostTerms,
.iclspPostDate {
  color: var(--iclsp-accent);
  font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.iclspPostTitle {
  margin-top: 20px;
  font-size: 28px;
  line-height: 1.05;
}

.iclspPostExcerpt {
  color: var(--iclsp-muted);
}

.iclspPostExcerpt .wp-block-post-excerpt__more-link {
  color: var(--iclsp-accent);
  font-weight: 700;
}

.iclspQuery .wp-block-query-pagination {
  gap: 10px;
  margin-top: 50px;
}

.iclspQuery .page-numbers,
.iclspQuery .wp-block-query-pagination a {
  padding: 10px 14px;
  border: 1px solid var(--iclsp-line);
}

.iclspEmpty {
  padding: 32px;
  border: 1px solid var(--iclsp-line);
  color: var(--iclsp-muted);
}

.iclspYoutubeSection {
  padding-block: clamp(80px, 9vw, 130px);
}

.iclspYoutubeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.iclspYoutubeCard {
  position: relative;
  min-height: 360px;
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--iclsp-line);
  background:
    radial-gradient(circle at 70% 30%, rgba(0, 219, 231, 0.18), transparent 34%),
    linear-gradient(140deg, #081719, #090b0c 70%);
  overflow: hidden;
}

.iclspYoutubeCard--orange {
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 101, 40, 0.2), transparent 34%),
    linear-gradient(140deg, #1a0d08, #090b0c 70%);
}

.iclspPlay {
  position: absolute;
  top: 38px;
  right: 38px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--iclsp-accent);
  font-size: 24px;
  transition: transform 180ms ease;
}

.iclspYoutubeCard--orange .iclspPlay {
  color: var(--iclsp-orange);
}

.iclspYoutubeCard:hover .iclspPlay {
  transform: scale(1.08);
}

.iclspYoutubeLink {
  margin-top: 28px;
  color: var(--iclsp-muted);
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.iclspArticleHeader {
  padding-block: clamp(90px, 12vw, 170px) 70px;
  border-bottom: 1px solid var(--iclsp-line);
}

.iclspArticleHeaderInner {
  max-width: 980px;
}

.iclspArticleHeader .iclspH1 {
  font-size: clamp(46px, 6.4vw, 86px);
}

.iclspArticleHeader .iclspPostDate {
  display: block;
  margin-top: 32px;
}

.iclspArticleImage {
  margin-top: 54px !important;
  overflow: hidden;
  border: 1px solid var(--iclsp-line);
}

.iclspArticle .iclspContainer {
  max-width: 980px;
}

.iclspChecklist {
  display: grid;
  border-top: 1px solid var(--iclsp-line);
}

.iclspChecklist > div {
  padding: 22px 0;
  border-bottom: 1px solid var(--iclsp-line);
  color: var(--iclsp-muted);
}

.iclspQuote {
  margin: 0;
  padding: clamp(32px, 5vw, 64px);
  border-left: 2px solid var(--iclsp-accent);
  color: var(--iclsp-text);
  background: rgba(var(--iclsp-accent-rgb), 0.055);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 650;
  line-height: 1.25;
}

.iclspFooter {
  padding: clamp(90px, 10vw, 150px) 0 28px;
  background: #080b0c;
}

.iclspFooterGrid {
  align-items: start;
}

.iclspFooterIntro {
  position: sticky;
  top: 130px;
}

.iclspFooterTitle {
  max-width: 650px;
}

.iclspContactLinks {
  display: grid;
  gap: 10px;
  margin-top: 38px;
}

.iclspContactLinks a {
  width: fit-content;
  color: var(--iclsp-accent);
}

.iclspContactCard {
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--iclsp-line);
  background: var(--iclsp-panel);
}

.iclspContactTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--iclsp-line);
  font: 700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.iclspContactTop span {
  color: var(--iclsp-accent);
}

.iclspContactForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.iclspContactForm .iclpvContactField {
  display: grid;
  gap: 9px;
}

.iclspContactForm .iclpvContactField--wide,
.iclspFormBottom {
  grid-column: 1 / -1;
}

.iclspContactForm label {
  color: var(--iclsp-muted);
  font: 700 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.iclspContactForm input,
.iclspContactForm select,
.iclspContactForm textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--iclsp-line);
  border-radius: 0;
  outline: 0;
  color: var(--iclsp-text);
  background: transparent;
  font: inherit;
}

.iclspContactForm textarea {
  min-height: 118px;
  resize: vertical;
}

.iclspContactForm input:focus,
.iclspContactForm select:focus,
.iclspContactForm textarea:focus {
  border-bottom-color: var(--iclsp-accent);
}

.iclspFormBottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.iclspFormBottom .iclspButton {
  margin: 0;
}

.iclspFormBottom small {
  max-width: 250px;
  color: #737e83;
  font: 600 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iclspFooterBottom {
  width: min(1180px, calc(100% - 64px));
  margin: 80px auto 0;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--iclsp-line);
  color: #768087;
  font-size: 13px;
}

.iclspFooterNav {
  display: flex;
  gap: 22px;
}

.iclspJs [data-icl-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.iclspJs [data-icl-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   SHARED SECTION-START MARKER (technical eyebrow + hairline).
   One reusable primitive for every Smart Home content section's opening
   label, replacing what used to be 3 byte-identical per-section rules
   (.iclSh02Eyebrow/.iclSh03Eyebrow/.iclSh04Eyebrow). Flex with a 1fr line
   (min-width, not a fixed width) means the hairline naturally shortens as
   the column narrows -- no media query, no duplicate mobile markup. */
.iclspSectionStart {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.iclspSectionStartLabel {
  flex: 0 0 auto;
  color: var(--iclsp-accent);
  font-family: var(--iclpv-fontMono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* FOUND BY MEASUREMENT during the S03/S04/S05 readability QA pass, not
   guessed: min-width:24px forced a hard floor that could exceed the space
   actually left after a long nowrap label at extreme narrow widths --
   confirmed causing a real ~14px overflow at 320px specifically on S04's
   longer marker label ("INTEGRACJE · WIELE TECHNOLOGII"). min-width:0
   lets the line gracefully shrink toward (not below) 0 instead of forcing
   overflow -- same fix pattern already used elsewhere in this project for
   flex-item min-width floors (e.g. .iclSh02Copy at narrow breakpoints). */
.iclspSectionStartLine {
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(var(--iclsp-accent-rgb), .5), rgba(var(--iclsp-accent-rgb), 0));
}

/* SHARED INTER-SECTION SEPARATOR -- distinct from .iclspSectionStart above.
   .iclspSectionStart is "LABEL --------" (a section's own opening eyebrow
   + hairline, cyan, lives inside that section's content column).
   .iclspChapterStart is "----------------" (a full-width chapter-boundary
   seam, muted/neutral, lives on the SECTION element's own top edge) --
   mirrors HOME's own .iclpvSection{border-top:1px solid var(--iclpv-hair)}
   convention exactly (full-bleed border-top on the section box, no extra
   wrapper element, no new markup), just reusing Smart Home's own existing
   --iclsp-line hairline token (already the border color for every diagram
   panel/chip in S02-S04) instead of inventing a new one. Add this class to
   any future section's root className to continue the same chapter rhythm
   -- e.g. S04 -> S05. */
.iclspChapterStart {
  border-top: 1px solid var(--iclsp-line);
}

@media (max-width: 1100px) {
  .iclspNav {
    gap: 15px;
  }

  .iclspNavLink {
    font-size: 13px;
  }

  .iclspGrid--4,
  .iclspPostGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iclspCoreMap {
    grid-template-columns: 1fr;
  }

  .iclspCoreCenter,
  .iclspCoreSide {
    min-height: 230px;
  }
}

@media (max-width: 900px) {
  .iclspHeaderInner {
    min-height: 74px;
  }

  .iclspNav,
  .iclspHeaderInner > .iclspButton {
    display: none;
  }

  .iclspNavToggle {
    display: grid;
    place-items: center;
  }

  .iclspHeroGrid,
  .iclspSplit,
  .iclspFooterGrid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .iclspSignalCard {
    min-height: 280px;
  }

  .iclspGrid--3,
  .iclspGrid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iclspSteps {
    grid-template-columns: 1fr;
  }

  .iclspStep {
    min-height: auto;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--iclsp-line);
  }

  .iclspStep:last-child {
    border-bottom: 0;
  }

  .iclspFooterIntro {
    position: static;
  }
}

@media (max-width: 640px) {
  .iclspHeader,
  .iclspMain,
  .iclspFooter {
    margin-left: 36px;
  }

  .iclspRail {
    left: 8px;
  }

  .iclspRailLine {
    top: 74px;
  }

  .iclspContainer,
  .iclspHeaderInner,
  .iclspFooterBottom {
    width: min(100% - 28px, 1180px);
  }

  .iclspBrandName {
    font-size: 14px;
  }

  .iclspBrandMark {
    width: 34px;
    height: 34px;
  }

  .iclspHero {
    min-height: 0;
    padding-block: 76px;
  }

  .iclspHero::after {
    width: 80vw;
  }

  .iclspH1 {
    font-size: clamp(42px, 14vw, 62px);
  }

  .iclspGrid--2,
  .iclspGrid--3,
  .iclspGrid--4,
  .iclspPostGrid,
  .iclspYoutubeGrid,
  .iclspContactForm {
    grid-template-columns: 1fr;
  }

  .iclspCard {
    min-height: 240px;
  }

  .iclspCardNo {
    margin-bottom: 44px;
  }

  .iclspCta,
  .iclspFormBottom,
  .iclspFooterBottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .iclspCta .iclspButton {
    width: 100%;
  }

  .iclspContactForm .iclpvContactField--wide,
  .iclspFormBottom {
    grid-column: auto;
  }

  .iclspYoutubeCard {
    min-height: 310px;
    padding: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iclspShell *,
  .iclspYoutubeSection * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ICL Smart Home 2026 — widoczna treść pozostaje w blokach GreenShift. */
.iclsh2026 {
  background:
    radial-gradient(circle at 72% 8%, rgba(0, 237, 245, 0.09), transparent 27rem),
    linear-gradient(180deg, #050708, #070a0b 52%, #050708);
}

.iclshMain {
  overflow: clip;
}

.iclshMain h1,
.iclshMain h2,
.iclshMain h3,
.iclshMain p {
  margin-top: 0;
}

/* ICL Smart Home 2026 -- Hero V3 (adopted from Codex Hero V3 benchmark). */
.iclHeroV3Main { min-height: calc(100svh - 98px); overflow: hidden; background: #050809; }
.iclHeroV3 { position: relative; min-height: calc(100svh - 98px); display: grid; align-items: start; border-bottom: 1px solid rgba(151,174,180,.12); isolation: isolate; }
.iclHeroV3::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(0,237,245,.025) 1px,transparent 1px),linear-gradient(rgba(0,237,245,.018) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,#000 0 72%,transparent); }
.iclHeroV3::after { content:""; position:absolute; z-index:-1; width:52vw; height:52vw; max-width:760px; max-height:760px; right:-8%; top:-18%; border:1px solid rgba(0,237,245,.08); border-radius:50%; box-shadow:0 0 180px rgba(0,237,245,.055); }
.iclHeroV3Container { width:min(100% - 184px,1440px); margin-inline:auto; padding:54px 0 64px; display:grid; grid-template-columns:minmax(430px,.9fr) minmax(620px,1.1fr); gap:clamp(48px,5vw,84px); align-items:start; }
.iclHeroV3Copy { align-self:center; max-width:640px; }
/* Typography here matches the canonical HOME Hero scale (icl-shared-original.css
   --icl-hero-* tokens, reproduced from icl-project.css .iclpvH1/.iclpvLead/.iclpvBadge) --
   see DOCS/DASH_PREVIEW_STANDARD.md "Hero typography tokens". Colors/accent stay
   Smart Home's own (cyan #00edf5 vs HOME's #00F2FF is a deliberate sub-brand distinction). */
/* display:flex replaces display:block -- both are block-outside, so the
   kicker's own box (width, margin-bottom, position in Hero's flow) is
   unchanged; only its internal layout gains a second (line) child. Text
   itself moves into .iclHeroV3KickerLabel, an anonymous flex item sized to
   content exactly like the previous block text was, so wrapping/height is
   pixel-identical. Line color reuses the kicker's own #00edf5 (Hero's
   pre-existing eyebrow color, not the newer --iclsp-accent token, since
   Hero predates that token set and this must stay visually matched to the
   label it belongs to, not the newer Smart Home section palette). */
.iclHeroV3Kicker { display:flex; align-items:center; gap:14px; margin-bottom:28px; color:#00edf5; 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; }
.iclHeroV3KickerLabel { flex:0 0 auto; white-space:nowrap; }
.iclHeroV3KickerLine { flex:1 1 auto; min-width:24px; height:1px; background:linear-gradient(to right, rgba(0,237,245,.5), rgba(0,237,245,0)); }
/* Uses the compact H1 size variant deliberately -- this Hero's copy is short
   by design (2 lines), so it does not need HOME's full up-to-68px maximum.
   See --icl-hero-h1-size-compact in icl-shared-original.css. */
.iclHeroV3Title { max-width:var(--icl-hero-h1-max-width-compact); margin:0; color:#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); }
/* Each headline line is its own block-level GreenLight span (no wp:html <br>).
   display:block makes each line a real block box with a definite height, so
   the H1's total height is the natural sum of both lines and .iclHeroV3Lead
   (its next sibling) starts strictly after the H1 ends -- normal document
   flow, no negative margins/absolute positioning/transform hacks needed. */
.iclHeroV3TitleLine { display:block; }
/* Selector is "p.iclHeroV3Lead" (not just ".iclHeroV3Lead") deliberately --
   .iclshMain h1/h2/h3/p { margin-top:0 } (a page-wide reset, see below)
   has specificity (0,1,1) [class+type], which beats a plain class-only
   Hero rule (0,1,0) regardless of source order. Matching its specificity
   here lets normal cascade source-order (this rule comes after the reset)
   decide, instead of needing !important. See DOCS/DASH_PREVIEW_STANDARD.md
   "Known failure modes" for the full diagnosis. */
p.iclHeroV3Lead { max-width:var(--icl-hero-lead-max-width); margin:0; margin-block-start:54px; color:#a8b4b8; font-family:var(--iclpv-fontBody); font-size:var(--icl-hero-lead-size); line-height:var(--icl-hero-lead-lh); }
/* Lead is composed as 3 GreenLight spans for an exact desktop line
   composition (not achievable via natural wrap alone); each is block-level
   on desktop only. At <=1100px they revert to inline so the text reflows
   naturally instead of forcing the desktop line breaks onto narrower
   viewports (see @media(max-width:1100px) below). */
.iclHeroV3LeadLine { display:block; }
.iclHeroV3Actions { margin-top:40px; display:flex; flex-wrap:wrap; gap:12px; }
.iclHeroV3Proof { margin-top:29px; padding-top:18px; display:flex; flex-wrap:wrap; gap:12px 24px; border-top:1px solid rgba(151,174,180,.14); color:#75878d; font:600 8px/1.4 "IBM Plex Mono ICL",monospace; letter-spacing:.12em; }
.iclHeroV3Proof span { display:flex; align-items:center; gap:8px; }
.iclHeroV3Proof span::before { content:""; width:4px; height:4px; border-radius:50%; background:#00edf5; box-shadow:0 0 10px rgba(0,237,245,.8); }
.iclHeroV3Panel { position:relative; width:100%; max-width:760px; justify-self:end; }
/* Right Hero panel -- verbatim canonical reference supplied by the client
   (icl-smart-core). Do not redesign/simplify -- see DOCS/DASH_PREVIEW_STANDARD.md.
   .iclHeroV3Panel above only carries the two-column grid positioning; all
   visual chrome (border/background/radius/padding) belongs to .icl-smart-core,
   co-applied on the same element. JS: setupSmartCore() in icl-patterns.js. */
.icl-smart-core {
  --cyan: #00f2ff;
  --blue: #2aa8ff;
  /* Hybrid's secondary accent -- the EXACT token from HOME's real Level -2
     scene (.iclpvL2Scene --l2-copper:#ff6a2a in icl-project.css), not the
     generic --iclpv-copper badge token (#FF4D00, a different/redder hue).
     Reused verbatim, no new hex invented. Cyan remains the dominant system
     color; amber is only ever the Hybrid identity accent. */
  --amber: #ff6a2a;
  --line: rgba(130, 180, 190, .10);
  position: relative;
  width: 100%;
  padding: 28px 30px 18px;
  border: 1px solid rgba(0, 242, 255, .18);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 38%, rgba(0, 242, 255, .07), transparent 34%),
    linear-gradient(180deg, rgba(10,18,20,.94), rgba(5,9,10,.97));
  overflow: hidden;
  /* Structural layout: HEADER / SYSTEM MAP / CARDS / FOOTER are real grid
     rows in document flow -- only the SYSTEM MAP row is an absolute-position
     canvas (contained by its own explicit height + overflow:hidden safety
     net). This prevents the map's decorative nodes from ever colliding with
     the cards or footer rows below it. See DOCS/DASH_PREVIEW_STANDARD.md. */
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: 8px;
}

.icl-smart-core .icl-line { display: block; }

.icl-smart-core__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.icl-smart-core__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--cyan); }
.icl-smart-core__title { margin-top: 8px; font-size: 24px; line-height: 1.1; font-weight: 650; letter-spacing: -.025em; color: #f4f7f8; }
.icl-smart-core__status { display: flex; align-items: center; gap: 9px; font-size: 9px; letter-spacing: .15em; color: #89969a; }
.icl-smart-core__status > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

/* SYSTEM MAP -- the only region allowed absolute positioning. Explicit
   contained height + overflow:hidden means nothing inside can ever spill
   into the cards/footer rows below, regardless of node content length.
   All vertical coordinates below are in px (not %) so the diagram layer
   (connector lines) lands EXACTLY on the icon-center line -- never on the
   label/description text underneath -- independent of map height changes. */
.icl-smart-core__map { position: relative; height: 266px; overflow: hidden; }

/* Icon-center datum line for Local/Core/Cloud -- connectors and particles
   sit on this exact y, the node's own label/description always starts
   below the icon's bottom edge, so the line can never cross typography. */
.icl-core-node { position: absolute; left: 50%; top: 80px; width: 112px; height: 112px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 5; }
.icl-core-node__halo { position: absolute; inset: -18px; border: 1px solid rgba(0,242,255,.09); border-radius: 50%; }
.icl-core-node__halo::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(0,242,255,.13); border-radius: inherit; }
.icl-core-node__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(0,242,255,.78); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(0,242,255,.18), rgba(5,11,13,.96) 68%);
  box-shadow: 0 0 40px rgba(0,242,255,.15), inset 0 0 25px rgba(0,242,255,.09);
}
.icl-core-node__inner > span { font-family: var(--iclpv-fontMono); font-size: 16px; letter-spacing: .12em; color: var(--cyan); }
.icl-core-node__inner > strong { margin-top: 7px; font-size: 10px; letter-spacing: .08em; color: #f4f7f8; }
.icl-core-node__inner > small { margin-top: 3px; font-size: 7px; letter-spacing: .16em; color: #718085; }

.icl-mode-node { position: absolute; z-index: 4; appearance: none; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; text-align: center; }
/* top:52px = icon-center(80px) minus half the 56px icon -- keeps Local/Cloud
   icons on the same datum line as Core, so the connector never dips into
   their labels below. */
.icl-mode-node--local { left: 1%; top: 52px; width: 158px; }
.icl-mode-node--cloud { right: 1%; top: 52px; width: 158px; }
/* HYBRID anchors to the map's own bottom edge (not a top:% guess) so its
   description always lands in the map's reserved bottom band and can never
   drift down into the core/local/cloud zone above or the cards row below.
   bottom:16px (not 0) reserves genuine whitespace inside the map itself,
   on top of the panel's row-gap, so Hybrid's microcopy never crowds the
   card row underneath. */
.icl-mode-node--hybrid { left: 50%; bottom: 16px; top: auto; width: 190px; transform: translateX(-50%); }
.icl-mode-node__icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px;
  border: 1px solid rgba(0,242,255,.42); border-radius: 50%; background: rgba(0,242,255,.05);
  font-size: 21px; color: #dce9eb;
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease;
}
/* Hybrid gets a permanent, subtle amber+cyan blend and a soft ambient glow
   so it reads as the deliberate "combined" mode at a glance -- not just on
   interaction -- while staying the same size/spacing as Local/Cloud (never
   visually weaker or secondary). Amber is HOME Level -2's --l2-copper
   accent (see var(--amber) above), used only here, at low opacity, as
   Hybrid's identity. */
.icl-mode-node--hybrid .icl-mode-node__icon {
  border-color: rgba(255,106,42,.4);
  background: linear-gradient(135deg, rgba(0,242,255,.05), rgba(255,106,42,.09));
  box-shadow: 0 0 18px rgba(255,106,42,.07);
}
.icl-mode-node strong { display: block; font-size: 10px; letter-spacing: .18em; color: #e6edef; }
/* Mode descriptions are sales copy, not decorative microcopy. Local/Cloud/
   Hybrid share the exact same label hierarchy, font-size, line-height and
   spacing -- three equal operating modes, none secondary. The diagram only
   names each mode now; the "why" lives in the benefit cards below. */
.icl-mode-node small { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: #9aa7ab; }

/* Diagram connector layer -- very low-opacity guide lines; the visible
   "communication" layer is the particle stream below, not the wiring. */
.icl-flow { position: absolute; z-index: 1; background: var(--line); overflow: visible; }
.icl-flow--local { left: 16%; top: 80px; width: 24%; height: 1px; }
.icl-flow--cloud { left: 60%; top: 80px; width: 24%; height: 1px; }
.icl-flow--hybrid { left: 50%; top: 136px; width: 1px; height: 8px; }

.icl-smart-core[data-mode="local"] .icl-flow--local,
.icl-smart-core[data-mode="cloud"] .icl-flow--cloud,
.icl-smart-core[data-mode="hybrid"] .icl-flow--local,
.icl-smart-core[data-mode="hybrid"] .icl-flow--cloud {
  background: rgba(0,242,255,.52); box-shadow: 0 0 10px rgba(0,242,255,.18);
}
/* Hybrid's own connector lights up amber (not cyan) when Hybrid is active --
   it is the synthesis path, distinct from the two cyan source legs. */
.icl-smart-core[data-mode="hybrid"] .icl-flow--hybrid {
  background: rgba(255,106,42,.55); box-shadow: 0 0 10px rgba(255,106,42,.2);
}

.icl-particle {
  position: absolute; z-index: 3; width: 5px; height: 5px; border-radius: 50%; background: #b7fbff;
  box-shadow: 0 0 5px #fff, 0 0 12px var(--cyan), 0 0 20px rgba(0,242,255,.6);
  pointer-events: none; opacity: 0;
}
@keyframes icl-flow-local { 0%{left:16%;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:42%;opacity:0} }
@keyframes icl-flow-cloud { 0%{left:58%;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:84%;opacity:0} }
@keyframes icl-flow-hybrid { 0%{top:136px;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:144px;opacity:0} }
.icl-particle--local { top: 80px; }
.icl-particle--cloud { top: 80px; }
/* Hybrid particles carry the amber accent, matching the amber connector. */
.icl-particle--hybrid { left: 50%; box-shadow: 0 0 5px #fff, 0 0 12px var(--amber), 0 0 20px rgba(255,106,42,.5); }
.icl-smart-core[data-mode="local"] .icl-particle--local { animation: icl-flow-local 2.8s linear infinite; }
.icl-smart-core[data-mode="cloud"] .icl-particle--cloud { animation: icl-flow-cloud 2.8s linear infinite; }
.icl-smart-core[data-mode="hybrid"] .icl-particle--local { animation: icl-flow-local 2.8s linear infinite; }
.icl-smart-core[data-mode="hybrid"] .icl-particle--cloud { animation: icl-flow-cloud 2.8s linear infinite; }
.icl-smart-core[data-mode="hybrid"] .icl-particle--hybrid { animation: icl-flow-hybrid 2.2s linear infinite; }
.icl-particle.p2 { animation-delay: -.9s !important; }
.icl-particle.p3 { animation-delay: -1.8s !important; }

/* Compact premium comparison row -- deliberately tighter than a generic
   dashboard card: small icon, dense list, no excess air. */
.icl-smart-core__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.icl-benefit-card {
  min-width: 0; padding: 11px 14px; display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid rgba(140,170,178,.10); border-radius: 16px; background: rgba(255,255,255,.018); color: #9aa7aa;
  transition: border-color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease; cursor: pointer;
}
.icl-benefit-card__top { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; font-size: 14px; color: #eef4f5; }
.icl-benefit-card__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,242,255,.30); }
.icl-benefit-card > span:not(.icl-benefit-card__top) { font-size: 11px; line-height: 1.3; }

.icl-smart-core[data-mode="local"] [data-card="local"],
.icl-smart-core[data-mode="cloud"] [data-card="cloud"] {
  border-color: rgba(0,242,255,.85);
  background: linear-gradient(180deg, rgba(0,242,255,.055), rgba(255,255,255,.018));
  box-shadow: 0 0 26px rgba(0,242,255,.06);
  color: #c9d5d7;
}
.icl-smart-core[data-mode="hybrid"] [data-card="hybrid"] {
  border-color: rgba(255,106,42,.6);
  background: linear-gradient(180deg, rgba(255,106,42,.055), rgba(255,255,255,.018));
  box-shadow: 0 0 28px rgba(255,106,42,.07);
}

.icl-smart-core[data-mode="local"] .icl-mode-node--local .icl-mode-node__icon,
.icl-smart-core[data-mode="cloud"] .icl-mode-node--cloud .icl-mode-node__icon {
  background: rgba(0,242,255,.11); border-color: rgba(0,242,255,.85);
  box-shadow: 0 0 26px rgba(0,242,255,.15); transform: scale(1.035);
}
.icl-smart-core[data-mode="hybrid"] .icl-mode-node--hybrid .icl-mode-node__icon {
  border-color: rgba(255,106,42,.85); background: rgba(255,106,42,.12); box-shadow: 0 0 26px rgba(255,106,42,.17);
}

@media(max-width:1180px){
  .iclHeroV3Main,.iclHeroV3{min-height:0}
  .iclHeroV3Container{width:min(100% - 128px,900px);padding:58px 0 70px;grid-template-columns:1fr;gap:48px}
  .iclHeroV3Copy{max-width:760px}.iclHeroV3Panel{max-width:none;justify-self:stretch}
  p.iclHeroV3Lead{margin-block-start:28px}
  .iclHeroV3LeadLine{display:inline}
}
@media(max-width:700px){
  .iclHeroV3Container{width:min(100% - 48px,560px);padding:44px 0 58px;gap:38px}
  .iclHeroV3Kicker{margin-bottom:20px}.iclHeroV3Title{font-size:var(--icl-hero-h1-size-compact-mobile);line-height:var(--icl-hero-h1-lh)}
  p.iclHeroV3Lead{margin-block-start:24px;font-size:var(--icl-hero-lead-size-mobile);line-height:var(--icl-hero-lead-lh-mobile)}
  .iclHeroV3Actions{width:100%;flex-direction:column;align-items:stretch;margin-top:28px}
  .iclHeroV3Proof{display:grid;gap:8px}
}

/* Smart Home Core at mobile widths -- the SAME animated system, recomposed
   geometry, not a static list. R1/R2 replaced the diagram with a hidden-
   particle static stack; R3 keeps it animated per direction: desktop's
   horizontal radial map (Local -- Core -- Cloud, Hybrid below) becomes a
   vertical chain (Local -> flow -> Core -> flow -> Cloud -> flow -> Hybrid)
   using CSS Grid instead of absolute positioning.

   Containing-block lesson (R2, still applies): .icl-core-node's children
   (__halo, __inner) are position:absolute and need a *positioned* ancestor
   sized to just the 100x100 node -- not the whole panel -- so .icl-core-
   node stays position:relative here (never static). The same trap applies
   to .icl-flow and .icl-particle: they are normal CSS Grid items now (NOT
   position:absolute -- an absolutely-positioned grid item is removed from
   grid placement entirely and would escape to .icl-smart-core again, the
   exact R1/R2 bug), each explicitly reset to position:static so their
   grid-row placement actually takes effect.

   No duplicated markup: .icl-flow--local/--cloud/--hybrid and their
   .icl-particle--local/--cloud/--hybrid groups are the SAME three elements
   the desktop diagram uses, just re-placed by grid-row to sit between the
   nodes they now visually connect (local->core, core->cloud, cloud->
   hybrid). The existing [data-mode="..."] highlight-color/opacity rules
   are untouched and keep working unchanged -- they only key off class name
   + active mode, never geometry, so hybrid mode still correctly lights the
   first two connectors cyan (both source paths) and the third amber (the
   synthesis leg), same story as desktop. Only the particles' animation-
   NAME is swapped (via !important on the longhand, which wins over the
   mode-specific `animation` shorthand for that one sub-property while
   leaving its duration/timing/iteration-count intact) so they travel
   vertically (translateY) instead of horizontally (left) -- duration/
   easing/stagger (.p2/.p3 delays) are reused as-is.

   Benefit cards: the inactive-state color (#9aa7aa on a near-black
   rgba(255,255,255,.018) background) is a deliberate low-key desktop
   resting state next to two OTHER cards, one of which is always
   highlighted. Stacked alone on mobile with no side-by-side contrast to
   lean on, that same resting state reads as unreadable -- boosted here for
   mobile only; the active-state accent rules (data-mode targeting) are
   untouched, so the highlighted card still reads as visually distinct.

   Desktop (>640px) is completely unaffected by this block. */
@media (max-width: 640px) {
  .icl-smart-core {
    padding: 22px 18px 16px;
  }

  /* The "ELASTYCZNY I BEZPIECZNY" status micro-label competes with the
     Core title for width inside .icl-smart-core__header's flex row
     (justify-content:space-between). It adds no content priority mobile
     needs and was squeezing the title's wrap -- hidden here to give the
     title its own full row width and free the vertical space for higher-
     priority copy (eyebrow, H1, lead, CTA, then this panel). Desktop
     keeps it unchanged. */
  .icl-smart-core__status {
    display: none;
  }

  .icl-smart-core__map {
    position: relative;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 26px auto 26px auto 26px auto;
    row-gap: 0;
    justify-items: center;
    padding: 6px 0 4px;
  }

  .icl-mode-node--local {
    grid-row: 1;
    grid-column: 1;
  }

  .icl-flow--local,
  .icl-particle--local {
    grid-row: 2;
    grid-column: 1;
  }

  .icl-core-node {
    grid-row: 3;
    grid-column: 1;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100px;
    height: 100px;
    margin: 4px auto;
  }

  .icl-flow--cloud,
  .icl-particle--cloud {
    grid-row: 4;
    grid-column: 1;
  }

  .icl-mode-node--cloud {
    grid-row: 5;
    grid-column: 1;
  }

  .icl-flow--hybrid,
  .icl-particle--hybrid {
    grid-row: 6;
    grid-column: 1;
  }

  .icl-mode-node--hybrid {
    grid-row: 7;
    grid-column: 1;
  }

  .icl-mode-node {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 260px;
  }

  .icl-flow {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 2px;
    height: 100%;
    align-self: stretch;
    justify-self: center;
  }

  .icl-particle {
    position: static;
    left: auto;
    top: auto;
    justify-self: center;
    align-self: start;
    animation-name: icl-flow-vertical-mobile !important;
  }

  @keyframes icl-flow-vertical-mobile {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(26px); opacity: 0; }
  }

  .icl-smart-core__cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .icl-benefit-card {
    color: #d3dfe1;
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(150, 180, 188, 0.22);
    padding: 14px 16px;
  }

  .icl-benefit-card__top {
    font-size: 15px;
  }

  .icl-benefit-card > span:not(.icl-benefit-card__top) {
    font-size: 13.5px;
    line-height: 1.45;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .icl-particle {
    animation: none !important;
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icl-particle { animation: none !important; }
  .icl-benefit-card, .icl-mode-node__icon { transition: none; }
}

/* ==========================================================================
   SECTION 02 -- JEDEN SYSTEM (v3: sticky premium console)
   Left column: eyebrow + H2 + lead + 3 numbered narrative cards (Fragmentacja
   / Integracja / Efekt) + 3 benefit rectangles + closing quote -- copy
   UNCHANGED from v2, not touched again here.
   Right column: ONE console panel (.iclSh02Console) containing the icl-unify
   diagram + an attached status strip (.iclSh02Status), sticky on desktop/
   laptop (>=1025px) so it stays visible while the taller left column scrolls
   past, released naturally at the end of the section via CSS Grid's own
   row-height + align-self:start (no JS height math, no artificial spacer).
   Optional stage sync: setupSh02Stages() in icl-patterns.js toggles
   data-sh02-stage on .iclSh02Visual as the 3 narrative cards scroll through
   the reading band; all actual visual response is CSS-only (opacity/box-
   shadow/border-color/text-shadow), never layout-affecting.
   Still NOT built on .icl-smart-core/.icl-core-node -- own scoped classes,
   own local --cyan, independently maintainable.
   ========================================================================== */

.iclSh02 {
  position: relative;
  width: 100%;
  padding: 96px 0;
  background: var(--iclsp-bg);
}

.iclSh02Container {
  width: min(100% - 184px, 1440px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(420px, .85fr) minmax(520px, 1.15fr);
  gap: clamp(48px, 5vw, 84px);
  align-items: start;
}

.iclSh02Title {
  max-width: 560px;
  margin: 0 0 20px;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontDisplay);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.16;
  letter-spacing: -.02em;
}

.iclSh02Lead {
  max-width: 560px;
  margin: 0 0 30px;
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontBody);
  font-size: 17.5px;
  line-height: 1.55;
}

/* ---- 3 numbered narrative cards ---------------------------------------- */

.iclSh02Narrative { display: grid; gap: 14px; max-width: 620px; }

.iclSh02NarrativeCard {
  padding: 22px 24px;
  border: 1px solid var(--iclsp-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .02);
  transition: border-color 220ms ease, background 220ms ease;
}
.iclSh02NarrativeCard:hover,
.iclSh02NarrativeCard:focus-within {
  border-color: rgba(0, 242, 255, .4);
  background: rgba(0, 242, 255, .03);
}

.iclSh02NarrativeHead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.iclSh02NarrativeNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid rgba(0, 242, 255, .35);
  border-radius: 50%;
  color: var(--iclsp-accent);
  font-family: var(--iclpv-fontMono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.iclSh02NarrativeTitle {
  margin: 0;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontBody);
  font-size: 17px;
  font-weight: 650;
}
.iclSh02NarrativeText { margin: 0; color: var(--iclsp-muted); font-family: var(--iclpv-fontBody); font-size: 14.5px; line-height: 1.6; }
.iclSh02NarrativeText strong { color: var(--iclsp-text); font-weight: 650; }

/* ---- 3 smaller benefit rectangles --------------------------------------- */

.iclSh02Benefits {
  margin: 26px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--iclsp-line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 620px;
}
.iclSh02BenefitCard {
  display: grid;
  gap: 6px;
  padding: 16px 16px;
  border: 1px solid var(--iclsp-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .015);
  transition: border-color 220ms ease, background 220ms ease;
}
.iclSh02BenefitCard:hover,
.iclSh02BenefitCard:focus-within {
  border-color: rgba(0, 242, 255, .32);
  background: rgba(0, 242, 255, .025);
}
.iclSh02BenefitTitle { color: var(--iclsp-text); font-family: var(--iclpv-fontBody); font-size: 13.5px; font-weight: 650; }
.iclSh02BenefitText { color: var(--iclsp-muted); font-family: var(--iclpv-fontBody); font-size: 12.5px; line-height: 1.45; }

.iclSh02Quote {
  margin: 32px 0 0;
  padding: 4px 0 4px 20px;
  max-width: 620px;
  border-left: 2px solid rgba(var(--iclsp-accent-rgb), .55);
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontBody);
  font-size: 16.5px;
  font-style: normal;
  line-height: 1.5;
}

/* ---- closing statement + CTA strip (Section 02 CTA refinement) --------- */

.iclSh02Closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 620px;
}

.iclSh02Closing .iclSh02Quote {
  margin: 0;
  max-width: none;
  flex: 1 1 60%;
}

.iclSh02ClosingCta {
  flex: 0 0 auto;
  gap: 8px;
}

.iclSh02ClosingCta span[aria-hidden] { transition: transform 200ms ease; }

.iclSh02ClosingCta:hover span[aria-hidden],
.iclSh02ClosingCta:focus-visible span[aria-hidden] {
  transform: translateX(3px);
}

/* Desktop composition fix: .iclSh02Copy (this strip's own column) is capped
   by .iclSh02Container's pre-existing minmax(420px,.85fr) track -- 420-576px
   across the whole two-column range, never wider, bottoming out hardest at
   the primary 1440 viewport (473px). Subtracting the CTA's natural ~289px
   left the statement as little as 143-259px (4-7 lines, wrapping almost
   word-by-word). Verified via real getBoundingClientRect measurement, not
   estimated. A row only reads well once the column reaches its 576px
   ceiling (~1700px+, quote ~57-60%/~3 lines); below that, stack instead --
   statement gets the full column width (2-3 lines) and the CTA keeps its
   natural, fully readable single-line size underneath it. */
@media (min-width: 1025px) and (max-width: 1699px) {
  .iclSh02Closing {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    max-width: none;
  }
  .iclSh02Closing .iclSh02Quote { flex: 0 1 auto; }
  .iclSh02ClosingCta { width: auto; }
}

@media (min-width: 1700px) {
  /* .iclpvBtn's own padding rule (icl-shared-original.css) loads AFTER this
     file and ties on specificity, so it wins by source order against a
     single-class override -- chain both classes (0,2,0) to actually win. */
  .iclSh02ClosingCta.iclpvBtn { padding: 13px 20px; }
}

@media (max-width: 640px) {
  .iclSh02Closing {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .iclSh02ClosingCta { width: 100%; }
}

/* ---- right column: sticky console --------------------------------------- */

.iclSh02Visual { width: 100%; }

/* ROOT CAUSE FIX (confirmed via ancestor audit): <main class="iclspMain
   iclshMain iclHeroV3Main"> -- the direct ancestor of .iclSh02, per
   templates/subpage-application.html -- carries TWO separate rules that each
   set overflow to a non-visible value: .iclshMain{overflow:clip} and
   .iclHeroV3Main{...overflow:hidden...}. Per the CSS Overflow spec, any
   ancestor with overflow != visible on either axis becomes the "nearest
   scroll container" that position:sticky measures against. <main> itself
   never scrolls internally (the document/body does), so a sticky descendant
   inside it cannot track real viewport scroll -- it computes position:sticky
   (visible via getComputedStyle) but never actually sticks during a real,
   continuous scroll. This is why earlier discrete-scrollY screenshot checks
   looked correct: they sampled only 2 points, which is indistinguishable
   from an element simply scrolling away in normal (non-sticky) flow.
   Fix: neutralize overflow on <main> at desktop/laptop widths only (mobile/
   tablet keep the original overflow:clip/hidden untouched -- it predates
   this section and was a deliberate mobile horizontal-overflow fix per
   CLAUDE.md history; sticky is disabled <=1024px anyway per requirement #7,
   so nothing needs to change there). Hero's own decorative bleed elements
   (.iclHeroV3::before/::after) are re-contained locally on .iclHeroV3 itself
   below -- a SIBLING of .iclSh02, not its ancestor, so this has zero effect
   on Section 02's sticky chain and zero visual change to Hero. */
@media (min-width: 1025px) {
  .iclshMain,
  .iclHeroV3Main {
    overflow: visible;
  }

  .iclHeroV3 {
    overflow-x: clip;
  }
}

/* ==========================================================================
   SECTION 03 -- TRZY MODELE SMART HOME (engineering architecture journey)
   Namespace: iclSh03* (layout/content), icl-arch03* (diagram primitives).
   Independent of Section 02 -- own tokens reused (--iclsp-*), no shared
   classes, no shared JS state. Section-scoped build per creative brief.
   Structure: intro (ungated, full width) -> .iclSh03Body (2-col grid: a
   persistent left "spine" column with 3 step markers sharing grid rows with
   3 chapter articles) -> closing statement. Each chapter alternates its own
   internal text/visual column order for rhythm (Cloud reversed via `order`,
   not DOM reordering, so mobile source order stays text-then-visual for all
   three per the mobile spec). Learned from the Section 02 grid-overflow bug:
   every grid/flex item that can host long content gets min-width:0 from the
   start here, not retrofitted after an overflow report.
   ========================================================================== */

.iclSh03 {
  position: relative;
  width: 100%;
  padding: 112px 0;
  background: var(--iclsp-bg);
}

.iclSh03Container {
  width: min(100% - 184px, 1320px);
  margin-inline: auto;
}

/* ---- intro: full width, generous space, not a card --------------------- */

/* margin-bottom trimmed from 80px: measured (getBoundingClientRect) real
   gap to the first chapter head was 167.7px at 1440 -- intro's own margin
   plus the "01" spine step's full row height (~80px, its own grid row,
   separate from the chapter's row) plus the chapter's own top padding all
   stack up. Cutting this margin is the minimal, correctly-scoped lever:
   it doesn't touch the spine/grid structure or the already-fine 01->02/
   02->03 chapter rhythm. Re-verified after the change: ~99.7px, a ~41%
   reduction. */
.iclSh03Intro { max-width: 760px; margin: 0 0 12px; }

.iclSh03Title {
  margin: 0;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontDisplay);
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -.02em;
  /* FOUND BY MEASUREMENT: at 1440/1366px this title was breaking to 3
     lines with a ~14% tiny last line ("Twój dom.") -- a real widow.
     text-wrap:balance lets the browser choose better break points across
     the fixed max-width; unsupported browsers silently keep default wrap
     (safe progressive enhancement, no fallback needed). */
  text-wrap: balance;
}

/* ---- body: spine column + chapters column, sharing grid rows ----------- */

.iclSh03Body {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 40px;
}
.iclSh03Body > * { min-width: 0; }

.iclSh03SpineLine {
  grid-column: 1;
  grid-row: 1 / 7;
  justify-self: center;
  position: relative;
  width: 2px;
  min-height: 100%;
  margin-top: 6px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(var(--iclsp-accent-rgb), .55) 6%,
    rgba(var(--iclsp-accent-rgb), .55) 94%,
    transparent);
}
.iclSh03SpinePulse {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--iclsp-accent);
  box-shadow: 0 0 10px rgba(var(--iclsp-accent-rgb), .8);
  animation: iclSh03Pulse 7s linear infinite;
}
@keyframes iclSh03Pulse {
  0% { top: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.iclSh03SpineStep {
  grid-column: 1;
  justify-self: center;
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-top: 4px;
}
.iclSh03SpineStep--local { grid-row: 1; }
.iclSh03SpineStep--cloud { grid-row: 3; }
.iclSh03SpineStep--hybrid { grid-row: 5; }

.iclSh03SpineNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .4);
  border-radius: 50%;
  background: var(--iclsp-bg);
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontMono);
  font-size: 12px;
  font-weight: 700;
  transition: border-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}
.iclSh03SpineLabel {
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontMono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: color 240ms ease;
}

.iclSh03Body[data-sh03-active="local"] .iclSh03SpineStep--local .iclSh03SpineNum,
.iclSh03Body[data-sh03-active="cloud"] .iclSh03SpineStep--cloud .iclSh03SpineNum,
.iclSh03Body[data-sh03-active="hybrid"] .iclSh03SpineStep--hybrid .iclSh03SpineNum {
  border-color: var(--iclsp-accent);
  color: var(--iclsp-accent);
  box-shadow: 0 0 16px rgba(var(--iclsp-accent-rgb), .35);
}
.iclSh03Body[data-sh03-active="local"] .iclSh03SpineStep--local .iclSh03SpineLabel,
.iclSh03Body[data-sh03-active="cloud"] .iclSh03SpineStep--cloud .iclSh03SpineLabel,
.iclSh03Body[data-sh03-active="hybrid"] .iclSh03SpineStep--hybrid .iclSh03SpineLabel {
  color: var(--iclsp-text);
}

/* ---- chapters ------------------------------------------------------------ */

.iclSh03Chapter {
  grid-column: 2;
  padding: 8px 0 64px;
  border-bottom: 1px solid var(--iclsp-line);
}
.iclSh03Chapter--hybrid { padding-bottom: 8px; border-bottom: none; }
.iclSh03Chapter--local { grid-row: 2; }
.iclSh03Chapter--cloud { grid-row: 4; }
.iclSh03Chapter--hybrid { grid-row: 6; }

.iclSh03Chapter[data-icl-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms ease, transform 640ms ease;
}
.iclSh03Chapter[data-icl-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .iclSh03Chapter[data-icl-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Chapter head: stage tag + title, full chapter width, above the 2-col
   canvas composition. The left accent border echoes the spine line's own
   color so the chapter reads as attached to its spine step rather than a
   decorative rail sitting apart from the content (desktop recomposition
   pass, 2026-08-24). */
.iclSh03ChapterHead {
  margin-bottom: 36px;
  padding-left: 22px;
  border-left: 2px solid rgba(var(--iclsp-accent-rgb), .4);
}

.iclSh03StageTag {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--iclsp-accent);
  font-family: var(--iclpv-fontMono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.iclSh03ChapterGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.iclSh03ChapterGrid > * { min-width: 0; }

/* Each chapter's own visual sticks while its own (taller) text column
   scrolls, then releases naturally at the chapter's own row end -- same
   mechanism as Section 02's sticky console (content-driven row height,
   align-self:start, no JS, no artificial section height). top:91px reuses
   the already-verified shared-header offset. Requires the visual to NOT be
   stretched to the text column's height (align-items:start above, Canvas
   has no height:100%/min-height) -- a stretched sticky item has nothing to
   release from since it's already as tall as its own containing block. */
@media (min-width: 1025px) {
  .iclSh03ChapterVisual {
    position: sticky;
    top: 91px;
    align-self: start;
  }
}

.iclSh03ChapterTitle {
  margin: 0;
  max-width: 620px;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontDisplay);
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.24;
  letter-spacing: -.01em;
}

/* Deliberate two-line break at the intended semantic point (main title /
   em-dash descriptor) instead of leaving the wrap to whatever the browser
   picks -- "lokalna / niezawodność" and similar mid-word-feeling breaks
   were landing at laptop widths. Both spans stay block at every width so
   the break point never moves; only the text WITHIN each span may still
   wrap naturally at very narrow widths. Same typography as before -- this
   controls line placement only, not visual weight. */
.iclSh03ChapterTitleMain,
.iclSh03ChapterTitleDescriptor {
  display: block;
}

/* ---- structured editorial sub-blocks (desktop recomposition pass) ------- */

.iclSh03ChapterText { max-width: 560px; }

.iclSh03SubGroup { margin: 0 0 26px; }
.iclSh03SubGroup:last-child { margin-bottom: 0; }

.iclSh03SubLabel {
  display: block;
  margin-bottom: 10px;
  color: var(--iclsp-accent);
  font-family: var(--iclpv-fontMono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}

/* Body copy brightness/size matched to S04/S05 (readability pass, one
   consistent editorial family): 15.5px/plain --iclsp-muted read noticeably
   weaker than Hero/S02's main reading copy -- #b6bec2 is the same ~8%
   brighter blend already used by S04/S05 (80/20 mix of --iclsp-text into
   --iclsp-muted, see that comment on .iclSh04Group p), not a new color. */
.iclSh03ChapterText p {
  margin: 0 0 14px;
  color: #b6bec2;
  font-family: var(--iclpv-fontBody);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}
.iclSh03ChapterText p:last-child { margin-bottom: 0; }
.iclSh03ChapterText p strong { color: var(--iclsp-text); font-weight: 650; }

/* FOUND BY MEASUREMENT, not guessed: the previous bordered/tinted callout
   version of this rule (border-left/background/its own font-size) was
   silently losing font-size/color/line-height to .iclSh03ChapterText p
   (specificity (0,2,1) beats (0,1,0) regardless of source order) -- Pull
   sentences were rendering completely identical to normal body text, the
   callout box never actually applied. Fixed by dropping the box treatment
   entirely and matching S04/S05's own minimal Pull pattern instead (color
   + weight only, !important to guarantee the win, size/line-height
   inherited from the paragraph rule above) -- also resolves "do not turn
   the copy into cards" by removing the box rather than fighting for it. */
.iclSh03Pull {
  margin: 0;
  color: var(--iclsp-text) !important;
  font-weight: 550;
}
.iclSh03Pull + .iclSh03Pull { margin-top: 10px; }

/* ---- diagram canvas (desktop recomposition: the diagram reads as an
   integral architecture canvas -- a bordered/backgrounded panel sized to
   its own diagram content (padding only, no forced stretch/min-height), so
   a short diagram (01/02) reads as a contained, deliberate panel rather
   than an oversized empty box, while a taller diagram (03, with its extra
   resilience footnote) naturally reads taller on its own merits -- not a
   small floating widget next to a text wall, but not artificially inflated
   either). */

.iclSh03Canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
  border: 1px solid var(--iclsp-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--iclsp-accent-rgb), .05), transparent 60%),
    var(--iclsp-panel);
}

/* ---- diagram primitives (icl-arch03*) ------------------------------------ */

.icl-arch03 {
  display: grid;
  justify-items: center;
  gap: 0;
  width: 100%;
}

.icl-arch03__node {
  width: 100%;
  max-width: 340px;
  padding: 16px 22px;
  border: 1px solid var(--iclsp-line);
  border-radius: 10px;
  background: var(--iclsp-panel);
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontMono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.4;
}
.icl-arch03__node--core {
  max-width: 250px;
  padding: 24px 22px;
  border-color: rgba(var(--iclsp-accent-rgb), .85);
  background: rgba(var(--iclsp-accent-rgb), .07);
  color: var(--iclsp-accent);
  font-size: 13px;
  box-shadow: 0 0 0 5px rgba(var(--iclsp-accent-rgb), .06), 0 0 34px rgba(var(--iclsp-accent-rgb), .22);
}
.icl-arch03__node--layer {
  max-width: 260px;
  padding: 12px 22px;
  border-style: dashed;
  border-color: var(--iclsp-line);
  background: transparent;
  color: var(--iclsp-muted);
  font-size: 11.5px;
}
.icl-arch03__node--muted {
  max-width: 240px;
  padding: 12px 18px;
  border-color: var(--iclsp-line);
  border-style: dashed;
  background: transparent;
  color: var(--iclsp-muted);
  font-size: 11px;
  opacity: .6;
}
.icl-arch03__nodeNote {
  display: block;
  margin-top: 4px;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .1em;
  opacity: .75;
}

.icl-arch03__link {
  position: relative;
  width: 2px;
  height: 48px;
  margin: 0 auto;
  background: rgba(var(--iclsp-accent-rgb), .3);
}
.icl-arch03__packet {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--iclsp-accent);
  box-shadow: 0 0 8px rgba(var(--iclsp-accent-rgb), .75);
  animation: iclArch03Down 3.4s ease-in-out infinite;
}
.icl-arch03__packet--rev { animation-name: iclArch03Up; animation-delay: 1.2s; }
@keyframes iclArch03Down {
  0% { top: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes iclArch03Up {
  0% { top: 100%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .icl-arch03__packet { animation: none !important; opacity: .55; top: 50%; }
}

/* Local: Core row hosts the subdued Internet/chmura node as a side branch,
   kept OUT of the main vertical DOM/CZUJNIKI -> CORE -> HOME ASSISTANT path
   per brief. Base (<=1024px) stays flexbox, both nodes in normal flow --
   already proven not to overflow at tablet/mobile widths, left untouched. */
.icl-arch03__coreRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
}
.icl-arch03__coreRow .icl-arch03__node--core { width: auto; flex: 0 0 auto; }
.icl-arch03__coreRow .icl-arch03__node--muted { width: auto; flex: 0 1 210px; }

/* >=1025px only: correct the topology so the vertical link/packet path
   (centered on the whole diagram) visually terminates exactly at Core's own
   center, not at the midpoint between Core+Internet as a combined row --
   that midpoint offset was the actual source of "path looks like it might
   pass through Internet". Internet/Chmura is pulled out of normal flow and
   anchored as a side branch off Core's right edge instead: a dashed
   connector, no packet/particle, lower opacity -- clearly secondary/
   optional, never part of the animated main path. */
@media (min-width: 1025px) {
  /* coreRow's base width:100% spans the WHOLE diagram content column -- if
     left on unchanged here, left:100% on the absolutely-positioned muted
     child below resolves against that full width (the diagram's own right
     edge), not Core's, letting the branch float in the dead space between
     Core and the canvas border. Shrink coreRow to Core's own content width
     so left:100% actually means "Core's right edge". Verified via
     getBoundingClientRect before/after -- the bug was real, not
     theoretical. */
  .icl-arch03__coreRow {
    position: relative;
    width: fit-content;
    margin-inline: auto;
    flex-wrap: nowrap;
  }
  .icl-arch03__coreRow .icl-arch03__node--muted {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 14px;
    transform: translateY(-50%);
    flex: 0 0 auto;
    width: max-content;
    max-width: 108px;
    padding: 10px 12px;
  }
  .icl-arch03__coreRow .icl-arch03__node--muted::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: 14px;
    height: 0;
    border-top: 1px dashed rgba(var(--iclsp-accent-rgb), .35);
  }
}

.icl-arch03__branch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 340px;
  margin-top: 40px;
  position: relative;
}
.icl-arch03__branch::before {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  top: -20px;
  height: 1px;
  background: rgba(var(--iclsp-accent-rgb), .3);
}
.icl-arch03__branch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -40px;
  width: 2px;
  height: 20px;
  background: rgba(var(--iclsp-accent-rgb), .3);
}
.icl-arch03__branchNode {
  padding: 10px 8px;
  border: 1px solid var(--iclsp-line);
  border-radius: 8px;
  background: var(--iclsp-panel);
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontMono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}

/* Hybrid: compact resilience footnote -- Dual WAN vs UPS kept as two
   explicitly separate, differently-labelled chains (never merged into one
   diagram), matching the brief's "keep those concepts technically separate"
   instruction. */
.icl-arch03__resilience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--iclsp-line);
}
.icl-arch03__resPanel { display: grid; gap: 10px; justify-items: start; }
.icl-arch03__resLabel {
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontMono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.icl-arch03__resChain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontMono);
  font-size: 10px;
  font-weight: 600;
}
.icl-arch03__resChain span {
  padding: 5px 8px;
  border: 1px solid var(--iclsp-line);
  border-radius: 6px;
  background: var(--iclsp-panel);
  white-space: nowrap;
}
.icl-arch03__resChain i {
  color: rgba(var(--iclsp-accent-rgb), .6);
  font-style: normal;
  font-size: 11px;
}

/* ---- closing CTA strip ----------------------------------------------------
   Statement (unchanged copy) left, CTA right -- same restrained pattern as
   the Section 02 closing strip (reused concept, not reused implementation):
   real GreenShift-first canonical button (.iclpvBtn.iclpvBtnPrimary, same
   class already used by Hero/Section 02's CTAs and #iclpv-kontakt), no
   forced nowrap on the button text (let it wrap if a width is ever tight --
   the Section 02 CTA task found forcing single-line text is what caused a
   real overflow bug), thin cyan accent + subtle panel, no glow. */
.iclSh03ClosingStrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 900px;
  margin: 64px auto 0;
  padding: 28px 36px;
  border: 1px solid var(--iclsp-line);
  border-left: 2px solid rgba(var(--iclsp-accent-rgb), .55);
  border-radius: 14px;
  background: rgba(var(--iclsp-accent-rgb), .03);
}
.iclSh03ClosingStrip > * { min-width: 0; }

.iclSh03Closing {
  margin: 0;
  padding: 0;
  flex: 1 1 62%;
  text-align: left;
}
.iclSh03Closing p {
  margin: 0 0 6px;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontBody);
  font-size: 19px;
  font-weight: 550;
  line-height: 1.5;
  text-wrap: balance;
}
.iclSh03Closing p:last-child { margin-bottom: 0; }

.iclSh03ClosingCta {
  flex: 0 0 auto;
  gap: 8px;
}
.iclSh03ClosingCta span[aria-hidden] { transition: transform 200ms ease; }
.iclSh03ClosingCta:hover span[aria-hidden],
.iclSh03ClosingCta:focus-visible span[aria-hidden] {
  transform: translateX(3px);
}

/* ---- responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .iclSh03 { padding: 88px 0; }
  .iclSh03Container { width: min(100% - 96px, 900px); }
  .iclSh03ChapterGrid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked single-column mode only: show the architecture visual right
     after the chapter heading, before the long editorial text, so the
     reader sees the system idea before the detailed explanation. Order-only
     -- same DOM, same content, desktop (>=1025px) is untouched since this
     rule doesn't exist there and .iclSh03ChapterVisual/.iclSh03ChapterText
     fall back to their normal source order (text, then visual). */
  .iclSh03ChapterVisual { order: -1; }
  .iclSh03ChapterText { max-width: none; }
  .iclSh03ChapterHead { padding-left: 18px; margin-bottom: 28px; }
  /* Canvas's desktop min-height exists to match a taller side-by-side text
     column (ChapterGrid align-items:stretch); once stacked single-column
     that job is gone, so let the canvas hug its own (now-centered) diagram
     instead of carrying dead vertical space. */
  .iclSh03Canvas { min-height: 0; padding: 36px 24px; }
  .icl-arch03 { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .iclSh03Body {
    grid-template-columns: minmax(0, 1fr);
  }
  .iclSh03SpineLine { display: none; }
  .iclSh03SpineStep {
    grid-column: 1;
    justify-items: start;
    justify-self: stretch;
    flex-direction: row;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 20px;
  }
  .iclSh03SpineStep--local,
  .iclSh03SpineStep--cloud,
  .iclSh03SpineStep--hybrid { grid-row: auto; }
  .iclSh03SpineLabel { writing-mode: horizontal-tb; transform: none; }
  .iclSh03Chapter--local,
  .iclSh03Chapter--cloud,
  .iclSh03Chapter--hybrid { grid-column: 1; grid-row: auto; }
}

@media (max-width: 640px) {
  .iclSh03 { padding: 64px 0; }
  .iclSh03Container { width: min(100% - 48px, 560px); }
  .iclSh03Intro { margin-bottom: 56px; }
  .iclSh03Title { font-size: clamp(24px, 7vw, 30px); }
  .iclSh03Chapter { padding-bottom: 48px; }
  .iclSh03ChapterHead { padding-left: 14px; margin-bottom: 22px; }
  .iclSh03Canvas { padding: 28px 18px; border-radius: 16px; }
  .icl-arch03__coreRow { flex-direction: column; }
  /* .icl-arch03__coreRow's row-mode flex-basis values (180px, auto) become a
     HEIGHT basis once flex-direction flips to column above -- without this
     reset the muted node stretches into a tall near-empty box. Verified via
     screenshot at 320px. */
  .icl-arch03__coreRow .icl-arch03__node--core,
  .icl-arch03__coreRow .icl-arch03__node--muted {
    flex: 0 0 auto;
    width: 100%;
    max-width: 260px;
  }
  .icl-arch03__resilience { grid-template-columns: 1fr; gap: 22px; }
  .iclSh03ClosingStrip {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 22px 20px;
    margin-top: 48px;
  }
  .iclSh03Closing p { font-size: 17px; }
  .iclSh03ClosingCta { width: 100%; }
}

/* Sticky is desktop/laptop only. Derived from the subpage header's own
   height (.iclspHeaderInner min-height:86px + its border) plus breathing
   room, not an invented number. Gated to >=1025px so it never activates
   in the <=1024px stacked composition (tablet/mobile keep normal flow --
   requirement #5). Releases naturally: .iclSh02Visual is a grid item with
   align-self:start inside .iclSh02Container, whose row height is set by the
   taller left column, so the sticky element's containing block ends exactly
   where the section's own content ends -- no artificial height, no JS. */
@media (min-width: 1025px) {
  .iclSh02Visual {
    position: sticky;
    /* 91px = measured .iclpvHdrOuter height (81px, confirmed via
       getBoundingClientRect at 1280/1366/1440 -- all equal since the real
       shared header's own min-height:80px breakpoint is min-width:1280px)
       + 10px breathing room, i.e. inside the requested 8-12px band. Not an
       invented number -- re-measure .iclpvHdrOuter if the real header ever
       changes height and adjust this value to match. */
    top: 91px;
    align-self: start;
  }
}

.iclSh02Console {
  position: relative;
  width: 100%;
  padding: 46px 40px;
  border: 1px solid rgba(0, 242, 255, .18);
  border-radius: 32px;
  background:
    radial-gradient(circle at 66% 40%, rgba(0, 242, 255, .08), transparent 42%),
    linear-gradient(180deg, rgba(10,18,20,.94), rgba(5,9,10,.97));
  overflow: hidden;
}

/* ---- icl-unify: 7-system convergence diagram ---------------------------- */

.icl-unify {
  --cyan: #00f2ff;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(28px, 58px) 2px minmax(36px, 72px) auto minmax(36px, 72px) auto;
  grid-template-rows: repeat(7, minmax(38px, auto));
  align-items: center;
  column-gap: 0;
}

.icl-unify__inputs { display: contents; list-style: none; margin: 0; padding: 0; }
.icl-unify__row { display: contents; }

.icl-unify__label {
  grid-column: 1;
  padding-right: 12px;
  text-align: right;
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontMono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  white-space: nowrap;
  transition: color 200ms ease;
}
.icl-unify__row:hover .icl-unify__label { color: var(--cyan); }

.icl-unify__spoke {
  grid-column: 2;
  position: relative;
  height: 1px;
  background: rgba(0, 242, 255, .28);
}
.icl-unify__spoke-particle {
  position: absolute;
  top: 50%; left: 0;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px #fff, 0 0 10px var(--cyan), 0 0 16px rgba(0,242,255,.6);
  animation: icl-unify-spoke 2.6s linear infinite;
  opacity: 0;
}
.icl-unify__row:nth-child(1) .icl-unify__spoke-particle { animation-delay: 0s; }
.icl-unify__row:nth-child(2) .icl-unify__spoke-particle { animation-delay: .32s; }
.icl-unify__row:nth-child(3) .icl-unify__spoke-particle { animation-delay: .64s; }
.icl-unify__row:nth-child(4) .icl-unify__spoke-particle { animation-delay: .96s; }
.icl-unify__row:nth-child(5) .icl-unify__spoke-particle { animation-delay: 1.28s; }
.icl-unify__row:nth-child(6) .icl-unify__spoke-particle { animation-delay: 1.60s; }
.icl-unify__row:nth-child(7) .icl-unify__spoke-particle { animation-delay: 1.92s; }
@keyframes icl-unify-spoke {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.icl-unify__trunk {
  grid-column: 3;
  grid-row: 1 / -1;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(0,242,255,.38), transparent);
}

.icl-unify__link {
  grid-column: 4;
  grid-row: 1 / -1;
  align-self: center;
  position: relative;
  height: 1px;
  width: 100%;
  background: rgba(0, 242, 255, .45);
  box-shadow: 0 0 10px rgba(0,242,255,.18);
}
.icl-unify__link-particle {
  position: absolute;
  top: 50%; left: 0;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 14px var(--cyan), 0 0 22px rgba(0,242,255,.65);
  animation: icl-unify-link 1.8s linear infinite;
  opacity: 0;
}
@keyframes icl-unify-link {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.icl-unify__core {
  grid-column: 5;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  position: relative;
  width: 154px;
  height: 154px;
}
.icl-unify__core-halo { position: absolute; inset: -22px; border: 1px solid rgba(0,242,255,.09); border-radius: 50%; }
.icl-unify__core-halo::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(0,242,255,.13); border-radius: inherit; }
.icl-unify__core-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(0,242,255,.78); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(0,242,255,.20), rgba(5,11,13,.96) 68%);
  box-shadow: 0 0 52px rgba(0,242,255,.17), inset 0 0 32px rgba(0,242,255,.1);
  text-align: center;
  transition: box-shadow 420ms ease, border-color 420ms ease;
}
.icl-unify__core-tag { font-family: var(--iclpv-fontMono); font-size: 20px; letter-spacing: .12em; color: var(--cyan); }
.icl-unify__core-name { margin-top: 8px; font-size: 11.5px; letter-spacing: .08em; color: var(--iclsp-text); }
.icl-unify__core-sub { margin-top: 4px; font-size: 8px; letter-spacing: .16em; color: var(--iclsp-muted); }

.icl-unify__outlink {
  grid-column: 6;
  grid-row: 1 / -1;
  align-self: center;
  position: relative;
  height: 1px;
  width: 100%;
  background: rgba(0, 242, 255, .55);
  box-shadow: 0 0 10px rgba(0,242,255,.2);
  transition: background 420ms ease, box-shadow 420ms ease;
}
.icl-unify__outlink-particle {
  position: absolute;
  top: 50%; left: 0;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 14px var(--cyan), 0 0 22px rgba(0,242,255,.65);
  animation: icl-unify-link 1.8s linear infinite;
  animation-delay: .3s;
  opacity: 0;
}

.icl-unify__outlabel {
  grid-column: 7;
  grid-row: 1 / -1;
  align-self: center;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontMono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  white-space: nowrap;
  transition: opacity 420ms ease, color 420ms ease, text-shadow 420ms ease;
}

/* ---- desktop/laptop-only enlargement (>=1025px) ------------------------- */

@media (min-width: 1025px) {
  .iclSh02Console {
    min-height: 520px;
    /* Asymmetric on purpose: content already exceeds min-height so
       justify-content:flex-start (not center) is what actually governs the
       top gap -- trimming padding-top specifically (54px -> 32px) is what
       lifts the first system row closer to the panel's rounded top edge.
       Bottom stays generous (54px) for the status strip's own breathing
       room, which was not part of the complaint. The diagram's own row
       geometry (icl-unify grid-template-rows) is untouched. */
    padding: 32px 46px 54px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 30px;
    background-image:
      repeating-linear-gradient(0deg, rgba(0,242,255,.035) 0px, rgba(0,242,255,.035) 1px, transparent 1px, transparent 34px),
      repeating-linear-gradient(90deg, rgba(0,242,255,.035) 0px, rgba(0,242,255,.035) 1px, transparent 1px, transparent 34px),
      radial-gradient(circle at 66% 40%, rgba(0, 242, 255, .08), transparent 42%),
      linear-gradient(180deg, rgba(10,18,20,.94), rgba(5,9,10,.97));
  }

  .icl-unify {
    grid-template-columns: auto minmax(36px, 78px) 2px minmax(46px, 96px) auto minmax(46px, 96px) auto;
    grid-template-rows: repeat(7, minmax(46px, auto));
  }

  .icl-unify__label { font-size: 12px; }

  .icl-unify__core { width: 182px; height: 182px; }
  .icl-unify__core-halo { inset: -28px; }
  .icl-unify__core-tag { font-size: 22px; }
  .icl-unify__core-name { font-size: 12.5px; margin-top: 9px; }
  .icl-unify__core-sub { font-size: 8.5px; }

  .icl-unify__outlabel { font-size: 14px; letter-spacing: .12em; }
}

/* ---- attached status strip ("ONE console", not 3 separate cards) -------- */

.iclSh02Status {
  padding-top: 22px;
  border-top: 1px solid rgba(0, 242, 255, .14);
  display: grid;
  gap: 10px;
}
.iclSh02StatusHead {
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontMono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 2px;
}
.iclSh02StatusRow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
  font-family: var(--iclpv-fontMono);
}
.iclSh02StatusRow:first-of-type { border-top: 0; }
.iclSh02StatusDot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--iclsp-accent);
  box-shadow: 0 0 8px rgba(var(--iclsp-accent-rgb), .8);
  flex-shrink: 0;
  align-self: center;
}
.iclSh02StatusLabel {
  color: var(--iclsp-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  flex: 1;
}
.iclSh02StatusValue {
  color: var(--iclsp-accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: right;
}

/* ---- optional stage sync: CSS response only ----------------------------- */

.iclSh02Visual[data-sh02-stage="fragmentation"] .icl-unify__core-inner {
  box-shadow: 0 0 30px rgba(0,242,255,.08), inset 0 0 20px rgba(0,242,255,.05);
  border-color: rgba(0,242,255,.4);
}
.iclSh02Visual[data-sh02-stage="fragmentation"] .icl-unify__outlink { opacity: .4; }
.iclSh02Visual[data-sh02-stage="fragmentation"] .icl-unify__outlabel { opacity: .45; }

.iclSh02Visual[data-sh02-stage="integration"] .icl-unify__core-inner {
  box-shadow: 0 0 58px rgba(0,242,255,.22), inset 0 0 34px rgba(0,242,255,.13);
  border-color: rgba(0,242,255,.92);
}
.iclSh02Visual[data-sh02-stage="integration"] .icl-unify__outlink { opacity: .65; }
.iclSh02Visual[data-sh02-stage="integration"] .icl-unify__outlabel { opacity: .7; }

.iclSh02Visual[data-sh02-stage="result"] .icl-unify__core-inner {
  box-shadow: 0 0 58px rgba(0,242,255,.22), inset 0 0 34px rgba(0,242,255,.13);
  border-color: rgba(0,242,255,.92);
}
.iclSh02Visual[data-sh02-stage="result"] .icl-unify__outlink {
  opacity: 1;
  background: rgba(0,242,255,.85);
  box-shadow: 0 0 18px rgba(0,242,255,.4);
}
.iclSh02Visual[data-sh02-stage="result"] .icl-unify__outlabel {
  opacity: 1;
  color: #fff;
  text-shadow: 0 0 16px rgba(0,242,255,.6);
}

@media (max-width: 1024px) {
  .iclSh02Container { grid-template-columns: 1fr; }
  /* 1fr's implicit min-width is auto (the item's own min-content size), not
     0 -- without this, a wide unbreakable child (e.g. the CTA button text)
     can force this single-column track wider than .iclSh02Container itself,
     causing real horizontal overflow at narrow widths. See mobile-overflow
     fix, verified via real headless-browser getBoundingClientRect scan at
     390/360/320/309. */
  .iclSh02Copy { min-width: 0; }
  .iclSh02Visual { max-width: 640px; min-width: 0; }
}

@media (max-width: 900px) {
  .iclSh02 { padding: 72px 0; }
  .iclSh02Container { width: min(100% - 96px, 900px); gap: 40px; }
}

@media (max-width: 700px) {
  .iclSh02Benefits { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .iclSh02 { padding: 56px 0; }
  .iclSh02Container { width: min(100% - 48px, 560px); gap: 34px; }
  .iclSh02Title { font-size: clamp(26px, 7vw, 32px); }
  .iclSh02Lead { font-size: 16px; }

  .iclSh02Console { padding: 30px 22px; }

  /* Recompose the diagram vertically: same DOM/content, no per-row spokes
     or trunk (they only read as "converging lines" horizontally) -- the
     narrative (many systems -> Core -> one system) survives via a single
     continuous down-flow through link/outlink, matching the master spec's
     own mobile ASCII concept. Mirrors the R3 principle already used for the
     Hero Core mobile recomposition: recompose geometry, never flatten to a
     static list. */
  .icl-unify {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 2px;
  }
  .icl-unify__inputs { display: block; }
  .icl-unify__row { display: block; }
  .icl-unify__label {
    display: block;
    padding: 6px 0;
    text-align: center;
  }
  .icl-unify__spoke { display: none; }
  .icl-unify__trunk { display: none; }

  .icl-unify__link,
  .icl-unify__outlink {
    grid-column: 1;
    grid-row: auto;
    width: 2px;
    height: 22px;
    margin: 2px auto;
    justify-self: center;
  }
  .icl-unify__link-particle,
  .icl-unify__outlink-particle {
    top: 0; left: 50%;
    margin-top: 0; margin-left: -2.5px;
    animation-name: icl-unify-vertical;
  }
  @keyframes icl-unify-vertical {
    0% { top: 0; opacity: 0; }
    12% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  .icl-unify__core {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    margin: 2px auto;
    width: 110px;
    height: 110px;
  }

  .icl-unify__outlabel {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icl-unify__spoke-particle,
  .icl-unify__link-particle,
  .icl-unify__outlink-particle {
    animation: none !important;
    opacity: .6;
  }
}

/* ==========================================================================
   SECTION 04 -- INTEGRACJE (layered translation architecture).
   One continuous chapter (no S03-style spine/cards): editorial text left,
   sticky diagram right, reusing the already-verified top:91px shared-header
   offset. The diagram is built entirely from CSS Grid/Flexbox with only one
   small self-contained relative/absolute pair (.icl-arch04__flow and its
   lines) -- deliberately avoiding the containing-block trap found and fixed
   in Hero/Section 03's editor pass (see ICL_BUILD_STANDARD.md, EDITOR
   TECHNICAL BASELINE): no editor rule here ever resets .icl-arch04__flow to
   static, so no positioned-ancestor fix is required for this section.
   ========================================================================== */

.iclSh04 {
  position: relative;
  width: 100%;
  padding: 112px 0;
  background: var(--iclsp-bg);
}

.iclSh04Container {
  width: min(100% - 184px, 1440px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.iclSh04Container > * { min-width: 0; }

.iclSh04Intro { max-width: 620px; }

.iclSh04Title {
  max-width: 600px;
  margin: 0;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontDisplay);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.16;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.iclSh04Copy { max-width: 560px; }

.iclSh04Group { margin: 0 0 30px; }
.iclSh04Group:last-child { margin-bottom: 0; }

.iclSh04GroupLabel {
  display: block;
  margin-bottom: 14px;
  color: var(--iclsp-accent);
  font-family: var(--iclpv-fontMono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}

.iclSh04Group p {
  margin: 0 0 14px;
  /* ~8% brighter than --iclsp-muted (#a7b0b5) -- an 80/20 blend toward
     --iclsp-text (#f4f7f8), computed from the two existing tokens rather
     than an invented color. Still well below --iclsp-text/--iclsp-accent,
     preserving H2 > cyan sublabels > body > disclaimer (disclaimer stays
     on plain --iclsp-muted). */
  color: #b6bec2;
  font-family: var(--iclpv-fontBody);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}
.iclSh04Group p:last-child { margin-bottom: 0; }

.iclSh04Pull { color: var(--iclsp-text) !important; font-weight: 550; }
.iclSh04Pull strong { color: var(--iclsp-text); font-weight: 650; }

/* CTA belongs to the text column: inline-flex (.iclpvBtn's own base
   display) keeps it naturally left-aligned and content-width, no new
   visual system, just the canonical button reused as-is.
   margin-top:0 is deliberate, not an oversight: the CTA is now the last
   child of .iclSh04Copy, so .iclSh04Group:last-child's own margin-bottom
   (30px) no longer collapses to 0 as it did before the CTA existed --
   inline-flex boxes don't participate in margin collapsing at all, so any
   margin-top here would simply ADD to that 30px. Measured: 0 lands the gap
   at exactly 30px, inside the requested 24-32px band. */
.iclSh04Cta { margin-top: 0; }

.iclSh04Visual { width: 100%; }

/* Desktop composition: Intro sits above Copy in the left column; Visual
   moves into the right column via named areas without changing DOM order
   (Intro -> Visual -> Copy stays identical at every breakpoint, per
   ICL_BUILD_STANDARD.md's "same semantic DOM" rule). Sticky release is
   content-driven (align-items:start, no artificial height, no JS) -- same
   proven mechanism as Section 02/03. */
@media (min-width: 1025px) {
  .iclSh04Container {
    /* 1fr:1.15fr (~46.5/53.5) matches S03's own chapter-grid ratio exactly
       -- readability pass: the previous .85fr:1.15fr (~42.5/57.5) gave the
       editorial column noticeably less room than S03, one inconsistent
       ratio inside what should read as a single family. Reusing S03's
       existing ratio rather than inventing a new ~47/53 split. */
    grid-template-columns: minmax(420px, 1fr) minmax(520px, 1.15fr);
    grid-template-areas:
      "intro visual"
      "copy visual";
    column-gap: clamp(48px, 5vw, 84px);
    row-gap: 28px;
    align-items: start;
  }
  .iclSh04Intro { grid-area: intro; }
  .iclSh04Copy { grid-area: copy; }
  .iclSh04Visual {
    grid-area: visual;
    position: sticky;
    top: 91px;
    align-self: start;
  }
}

.iclSh04Canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 34px;
  border: 1px solid var(--iclsp-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--iclsp-accent-rgb), .05), transparent 60%),
    var(--iclsp-panel);
}

.iclSh04Disclaimer {
  margin: 18px 4px 0;
  padding-top: 16px;
  border-top: 1px solid var(--iclsp-line);
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontBody);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
}

.icl-arch04 {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
}

.icl-arch04__layerLabel {
  display: block;
  margin-bottom: 2px;
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontMono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

.icl-arch04__layer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.icl-arch04__chip {
  padding: 7px 13px;
  border: 1px solid var(--iclsp-line);
  border-radius: 8px;
  background: var(--iclsp-panel-2);
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontMono);
  font-size: 11px;
  letter-spacing: .02em;
}

/* Protocol/interface layer reads as the translation medium, not another
   vendor -- dashed border + brighter text distinguishes it from the solid
   vendor chips above without inventing a new color. */
.icl-arch04__layer--protocols .icl-arch04__chip {
  border-style: dashed;
  color: var(--iclsp-text);
  opacity: .9;
}

/* Signal flow: SYSTEM CATEGORY -> PROTOCOL/INTERFACE -> ICL CORE -> UNIFIED
   OUTCOME, on one shared 9s cadence. Chips ripple in a slow staggered
   sequence (one nth-child at a time, never all at once); a small number of
   packets physically travel between layers within a short window of that
   same cadence, then stay invisible for the rest of it -- a controlled
   engineering data flow, not constant motion. Every keyframe here only
   touches opacity/box-shadow/border-color/top (never width/height/padding),
   so nothing can shift layout or reintroduce an overflow bug. */

@keyframes iclArch04ChipPulse {
  0%, 8%, 100% { border-color: var(--iclsp-line); box-shadow: none; }
  4% { border-color: rgba(var(--iclsp-accent-rgb), .85); box-shadow: 0 0 0 3px rgba(var(--iclsp-accent-rgb), .14); }
}
.icl-arch04__layer--devices .icl-arch04__chip,
.icl-arch04__layer--protocols .icl-arch04__chip {
  animation: iclArch04ChipPulse 9s ease-in-out infinite;
}
.icl-arch04__layer--devices .icl-arch04__chip:nth-child(1) { animation-delay: 0s; }
.icl-arch04__layer--devices .icl-arch04__chip:nth-child(2) { animation-delay: 1.5s; }
.icl-arch04__layer--devices .icl-arch04__chip:nth-child(3) { animation-delay: 3s; }
.icl-arch04__layer--devices .icl-arch04__chip:nth-child(4) { animation-delay: 4.5s; }
.icl-arch04__layer--devices .icl-arch04__chip:nth-child(5) { animation-delay: 6s; }
.icl-arch04__layer--devices .icl-arch04__chip:nth-child(6) { animation-delay: 7.5s; }
/* Protocol row ripples ~1.2s behind the device row above it, so each glow
   reads as "signal arriving downstream", never in lockstep with its row. */
.icl-arch04__layer--protocols .icl-arch04__chip:nth-child(1) { animation-delay: 1.2s; }
.icl-arch04__layer--protocols .icl-arch04__chip:nth-child(2) { animation-delay: 2.7s; }
.icl-arch04__layer--protocols .icl-arch04__chip:nth-child(3) { animation-delay: 4.2s; }
.icl-arch04__layer--protocols .icl-arch04__chip:nth-child(4) { animation-delay: 5.7s; }
.icl-arch04__layer--protocols .icl-arch04__chip:nth-child(5) { animation-delay: 7.2s; }
.icl-arch04__layer--protocols .icl-arch04__chip:nth-child(6) { animation-delay: 8.7s; }

@keyframes iclArch04Signal {
  0%, 13%, 100% { top: 0; opacity: 0; }
  4% { opacity: 1; }
  9% { opacity: 1; top: 100%; }
  13% { top: 100%; }
}

/* Device -> protocol connector: a real travelling signal replaces the old
   decorative static mesh. Only 2 packets total, timed a half-cycle apart
   so at most one is ever visibly in flight. */
.icl-arch04__flow {
  position: relative;
  width: 2px;
  height: 30px;
  margin: 0 auto;
  background: rgba(var(--iclsp-accent-rgb), .2);
}
.icl-arch04__flowPacket {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--iclsp-accent);
  opacity: 0;
  animation: iclArch04Signal 9s ease-in-out infinite;
}
.icl-arch04__flowPacket--1 { animation-delay: 0s; }
.icl-arch04__flowPacket--2 { animation-delay: 4.5s; }

/* Protocol -> Core convergence: same restrained cadence, started ~1s after
   the flow packets above so many inputs visibly narrow into one signal
   reaching Core. */
.icl-arch04__funnel {
  position: relative;
  width: 2px;
  height: 42px;
  margin: 0 auto;
  background: linear-gradient(to bottom, var(--iclsp-line), rgba(var(--iclsp-accent-rgb), .5));
}
.icl-arch04__funnelPacket {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--iclsp-accent);
  opacity: 0;
  animation: iclArch04Signal 9s ease-in-out infinite;
  animation-delay: 1s;
}
.icl-arch04__funnelPacket--2 { animation-delay: 5.5s; }

.icl-arch04__node {
  width: 100%;
  max-width: 320px;
  padding: 14px 20px;
  border: 1px solid var(--iclsp-line);
  border-radius: 10px;
  background: var(--iclsp-panel);
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontMono);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

/* Core absorbs the two converging signals with one brief, controlled glow
   pulse per 9s cycle -- not a constant idle animation. */
@keyframes iclArch04CorePulse {
  0%, 6%, 100% { box-shadow: 0 0 0 5px rgba(var(--iclsp-accent-rgb), .06), 0 0 34px rgba(var(--iclsp-accent-rgb), .22); }
  2% { box-shadow: 0 0 0 8px rgba(var(--iclsp-accent-rgb), .14), 0 0 46px rgba(var(--iclsp-accent-rgb), .38); }
}
.icl-arch04__node--core {
  max-width: 280px;
  padding: 22px 20px;
  border-color: rgba(var(--iclsp-accent-rgb), .85);
  background: rgba(var(--iclsp-accent-rgb), .07);
  color: var(--iclsp-accent);
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 0 0 5px rgba(var(--iclsp-accent-rgb), .06), 0 0 34px rgba(var(--iclsp-accent-rgb), .22);
  animation: iclArch04CorePulse 9s ease-in-out infinite;
  animation-delay: 2s;
}

.icl-arch04__node--output {
  max-width: 300px;
  border-color: rgba(var(--iclsp-accent-rgb), .4);
  color: var(--iclsp-text);
}

/* Clean single path out of Core: one line, one packet, no branching -- the
   diagram's own visual argument that translation produces a single
   coherent output. Fires once per 9s cycle, shortly after Core's pulse. */
.icl-arch04__link {
  position: relative;
  width: 2px;
  height: 40px;
  margin: 0 auto;
  background: rgba(var(--iclsp-accent-rgb), .35);
}
.icl-arch04__packet {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--iclsp-accent);
  opacity: 0;
  animation: iclArch04Signal 9s ease-in-out infinite;
  animation-delay: 2.3s;
}

@media (prefers-reduced-motion: reduce) {
  .icl-arch04__layer--devices .icl-arch04__chip,
  .icl-arch04__layer--protocols .icl-arch04__chip,
  .icl-arch04__flowPacket,
  .icl-arch04__funnelPacket,
  .icl-arch04__packet,
  .icl-arch04__node--core {
    animation: none !important;
  }
  .icl-arch04__flowPacket,
  .icl-arch04__funnelPacket,
  .icl-arch04__packet {
    opacity: .5;
    top: 50%;
  }
}

@media (max-width: 1024px) {
  .iclSh04Visual { max-width: 640px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .iclSh04 { padding: 72px 0; }
  .iclSh04Container { width: min(100% - 96px, 900px); gap: 34px; }
}

@media (max-width: 640px) {
  .iclSh04 { padding: 56px 0; }
  .iclSh04Container { width: min(100% - 48px, 560px); gap: 28px; }
  .iclSh04Title { font-size: clamp(26px, 7vw, 32px); }
  .iclSh04Canvas { padding: 30px 20px; }
  .icl-arch04__chip { font-size: 10px; padding: 6px 10px; }
  .icl-arch04__node { font-size: 11px; }
}

/* ==========================================================================
   SECTION 05 -- AUTOMATYZACJE (automation logic engine).
   Composition/grid/sticky/reveal mechanics copied verbatim from Section 04
   (same proven grid-template-areas trick for "same DOM order at every
   breakpoint", same content-driven top:91px sticky release) -- only the
   diagram (icl-arch05) and its labels/copy are section-specific, per
   ICL_BUILD_STANDARD.md EFFICIENCY ("reuse existing tokens/primitives").
   ========================================================================== */

.iclSh05 {
  position: relative;
  width: 100%;
  padding: 112px 0;
  background: var(--iclsp-bg);
}

.iclSh05Container {
  width: min(100% - 184px, 1440px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.iclSh05Container > * { min-width: 0; }

.iclSh05Intro { max-width: 620px; }

.iclSh05Title {
  max-width: 600px;
  margin: 0 0 6px;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontDisplay);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.16;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.iclSh05Copy { max-width: 560px; }

.iclSh05Group { margin: 0 0 30px; }
.iclSh05Group:last-of-type { margin-bottom: 0; }

.iclSh05GroupLabel {
  display: block;
  margin-bottom: 14px;
  color: var(--iclsp-accent);
  font-family: var(--iclpv-fontMono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}

.iclSh05Group p {
  margin: 0 0 14px;
  color: #b6bec2;
  font-family: var(--iclpv-fontBody);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}
.iclSh05Group p:last-child { margin-bottom: 0; }

.iclSh05Pull { color: var(--iclsp-text) !important; font-weight: 550; }

.iclSh05Closing {
  margin: 34px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--iclsp-line);
  max-width: 560px;
}
.iclSh05Closing p {
  margin: 0;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontDisplay);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -.01em;
  font-style: normal;
  /* FOUND BY MEASUREMENT: at 1440/1366px "Usuwa je." landed alone on its
     own line at only ~17% width -- a textbook widow on the section's
     closing statement. balance redistributes the break. */
  text-wrap: balance;
}

.iclSh05Visual { width: 100%; }

@media (min-width: 1025px) {
  .iclSh05Container {
    /* Same ratio rebalance as S04 -- see that comment. */
    grid-template-columns: minmax(420px, 1fr) minmax(520px, 1.15fr);
    grid-template-areas:
      "intro visual"
      "copy visual";
    column-gap: clamp(48px, 5vw, 84px);
    row-gap: 28px;
    align-items: start;
  }
  .iclSh05Intro { grid-area: intro; }
  .iclSh05Copy { grid-area: copy; }
  .iclSh05Visual {
    grid-area: visual;
    position: sticky;
    top: 91px;
    align-self: start;
  }
}

.iclSh05Canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  border: 1px solid var(--iclsp-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--iclsp-accent-rgb), .05), transparent 60%),
    var(--iclsp-panel);
}

/* Scenario UX card, not an architecture diagram: a left-aligned, top-to-
   bottom step LIST (event -> context checklist -> decision badge ->
   reaction chips) instead of the centered node/link/chip silhouette shared
   by S03/S04. Deliberately reuses the same tokens (--iclsp-*) and the same
   restrained-pulse animation convention, but a genuinely different shape
   and grammar (list rows + inline status elements, not a topology map). */
/* Centered-axis composition (final polish): every stage now shares one
   central vertical line -- the connectors already sat on that axis, this
   makes the actual content (event/context/reaction, previously left-
   flowing list rows) share it too, instead of hugging the left edge of a
   much wider canvas and leaving the right side looking empty/loose.
   max-width caps the column so it reads as one tight, deliberate shape
   rather than sparse content stretched across the full canvas width. */
.icl-scenario05 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  text-align: center;
}

.icl-scenario05__tag {
  display: block;
  margin-bottom: 16px;
  text-align: center;
  color: var(--iclsp-accent);
  font-family: var(--iclpv-fontMono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Noise-reduction pass: Event/Context/Reaction are no longer identically
   framed boxes -- plain content, no border, no panel fill. The one real
   box in the whole diagram is the Decision step below, so the hierarchy
   ("this is the moment that matters") reads from restraint everywhere
   else, not from four equally loud panels. */
.icl-scenario05__step {
  padding: 4px 2px;
}

.icl-scenario05__step--decision {
  padding: 18px 22px;
  border-radius: 10px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .28);
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--iclsp-accent-rgb), .07), transparent 70%),
    var(--iclsp-panel-2);
}

.icl-scenario05__stepLabel {
  display: block;
  margin-bottom: 11px;
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontMono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}

.icl-scenario05__eventRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.icl-scenario05__eventDot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--iclsp-accent);
}

.icl-scenario05__eventValue {
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontDisplay);
  font-weight: 600;
  font-size: 14.5px;
}

.icl-scenario05__conditions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

.icl-scenario05__condition {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* A plain status dot, not a checkbox shape -- avoids reading as a fake
   interactive control while still communicating "checked"/"not yet". */
.icl-scenario05__conditionMark {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--iclsp-line);
  background: transparent;
}

.icl-scenario05__condition span {
  color: var(--iclsp-muted);
  font-family: var(--iclpv-fontBody);
  font-size: 13.5px;
}

/* Decision step centers its content (label + badge) instead of following
   the other steps' left-flowing list layout -- the alignment shift itself
   is a hierarchy cue: this is the one moment the scenario resolves to a
   single focal result, not another line item. */
.icl-scenario05__step--decision {
  text-align: center;
}

.icl-scenario05__status {
  display: inline-flex;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .55);
  background: rgba(var(--iclsp-accent-rgb), .1);
  color: var(--iclsp-accent);
  font-family: var(--iclpv-fontMono);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .08em;
  /* Persistent, restrained presence even outside the pulse window -- reads
     as the diagram's focal point at rest, not just during its animation.
     Softened further per explicit "avoid excessive glow" feedback. */
  box-shadow: 0 0 16px rgba(var(--iclsp-accent-rgb), .08);
}

.icl-scenario05__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* FOUND BY MEASUREMENT: the 4 reaction chips need 382px unwrapped, but the
   380px scenario spine (minus the step's own 4px padding) only leaves
   376px -- a 6px shortfall that forced "Bezpieczeństwo" onto its own line.
   The canvas itself has ~215px of spare room at 1440px, so letting just
   this row size to its natural content width (instead of the spine's
   max-width) fixes it without touching chip padding/font-size, the spine
   width, or the canvas. Stays centered on the shared axis via the
   unchanged align-items:center on .icl-scenario05. Gated to >=768px so
   430/390/320 keep their existing wrap behavior untouched. */
@media (min-width: 768px) {
  .icl-scenario05__actions {
    width: max-content;
    max-width: none;
  }
}

.icl-scenario05__actionChip {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(var(--iclsp-accent-rgb), .4);
  background: var(--iclsp-panel-2);
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontMono);
  font-size: 11px;
}

/* A plain hairline instead of an arrow glyph -- one more framed/iconified
   element removed in favor of restraint. The line itself still animates
   (see choreography below), so causality still reads without adding a
   visual element that competes with the Decision box for attention. */
.icl-scenario05__connector {
  display: block;
  width: 1px;
  height: 20px;
  margin: 4px auto;
  background: var(--iclsp-line);
  opacity: .55;
}

/* ---- choreography: event -> context (progressive) -> decision -> coordinated action -- */

@keyframes iclScenario05Dot {
  0%, 10%, 100% { box-shadow: none; }
  5% { box-shadow: 0 0 0 3px rgba(var(--iclsp-accent-rgb), .18); }
}
.icl-scenario05__eventDot {
  animation: iclScenario05Dot 9s ease-in-out infinite;
  animation-delay: .2s;
}

@keyframes iclScenario05Connector {
  0%, 16%, 100% { opacity: .55; }
  8% { opacity: .95; background: var(--iclsp-accent); }
}
.icl-scenario05__connector {
  animation: iclScenario05Connector 9s ease-in-out infinite;
}
.icl-scenario05__connector--1 { animation-delay: .5s; }
.icl-scenario05__connector--2 { animation-delay: 3.2s; }
.icl-scenario05__connector--3 { animation-delay: 4s; }

@keyframes iclScenario05Mark {
  0%, 20%, 100% { border-color: var(--iclsp-line); background: transparent; }
  10% { border-color: var(--iclsp-accent); background: var(--iclsp-accent); }
}
.icl-scenario05__conditionMark {
  animation: iclScenario05Mark 9s ease-in-out infinite;
}
.icl-scenario05__condition--1 .icl-scenario05__conditionMark { animation-delay: 1s; }
.icl-scenario05__condition--2 .icl-scenario05__conditionMark { animation-delay: 2s; }
.icl-scenario05__condition--3 .icl-scenario05__conditionMark { animation-delay: 3s; }

/* Decision badge: the one deliberately stronger, held highlight -- the
   moment the scenario argues is decisive, once all conditions are met.
   Builds on the persistent base glow above (0 0 22px rgba(...,.1)) rather
   than animating from "none", so the pulse reads as an intensification of
   an already-present focal point, not a flash appearing from nothing. */
@keyframes iclScenario05Status {
  0%, 18%, 100% { box-shadow: 0 0 16px rgba(var(--iclsp-accent-rgb), .08); }
  9% { box-shadow: 0 0 0 4px rgba(var(--iclsp-accent-rgb), .1), 0 0 22px rgba(var(--iclsp-accent-rgb), .18); }
}
.icl-scenario05__status {
  animation: iclScenario05Status 9s ease-in-out infinite;
  animation-delay: 3.6s;
}

/* Reaction chips activate TOGETHER, not staggered -- deliberate contrast
   with the progressively-checked conditions above: several conditions
   checked over time, but ONE coordinated, simultaneous response out. This
   is the diagram's own restatement of "jedno zdarzenie uruchamia kolejne
   działania" (one event dispatches several actions at once), not
   decorative noise. */
@keyframes iclScenario05Action {
  0%, 20%, 100% { border-color: rgba(var(--iclsp-accent-rgb), .4); box-shadow: none; }
  10% { border-color: rgba(var(--iclsp-accent-rgb), .8); box-shadow: 0 0 0 3px rgba(var(--iclsp-accent-rgb), .12); }
}
.icl-scenario05__actionChip {
  animation: iclScenario05Action 9s ease-in-out infinite;
  animation-delay: 4.3s;
}

@media (prefers-reduced-motion: reduce) {
  .icl-scenario05__eventDot,
  .icl-scenario05__connector,
  .icl-scenario05__conditionMark,
  .icl-scenario05__status,
  .icl-scenario05__actionChip {
    animation: none !important;
  }
}

@media (max-width: 1024px) {
  .iclSh05Visual { max-width: 640px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .iclSh05 { padding: 72px 0; }
  .iclSh05Container { width: min(100% - 96px, 900px); gap: 34px; }
}

.iclSh05Cta { margin-top: 32px; }

@media (max-width: 640px) {
  .iclSh05 { padding: 56px 0; }
  .iclSh05Container { width: min(100% - 48px, 560px); gap: 28px; }
  .iclSh05Title { font-size: clamp(26px, 7vw, 32px); }
  .iclSh05Canvas { padding: 30px 20px; }
  .icl-scenario05__actionChip { font-size: 10px; padding: 6px 10px; }
  .iclSh05Closing p { font-size: 17px; }
}

/* ==========================================================================
   SECTION 11 -- FAQ (restrained editorial accordion).
   Native <details>/<summary> -- confirmed working via this project's own
   established pattern: greenshift-blocks/element has rendered every tag
   tried so far (section/article/blockquote/i/h1-h5/ul/li/a) with zero
   allowlist friction, and the preview pipeline (stripBlockComments) is
   fully tag-agnostic. details/summary are standard, non-void HTML5
   elements with no special parsing behavior that would differ from those
   already-proven tags. No JS: the browser's native open/closed toggle,
   keyboard handling and focus behavior are used as-is.
   ========================================================================== */

.iclSh11 {
  position: relative;
  width: 100%;
  padding: 112px 0;
  background: var(--iclsp-bg);
}

.iclSh11Container {
  width: min(100% - 184px, 1440px);
  margin-inline: auto;
}

.iclSh11Intro {
  max-width: 680px;
  margin: 0 0 48px;
}

.iclSh11Title {
  margin: 16px 0 12px;
  color: var(--iclsp-text);
  font-family: var(--iclpv-fontDisplay);
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.16;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.iclSh11Lead {
  margin: 0;
  max-width: 620px;
  color: #b6bec2;
  font-family: var(--iclpv-fontBody);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Two INDEPENDENT vertical stacks, not a row-based grid -- opening an item
   in the left column never affects the right column's height (no paired
   empty grid-cell). Single shared top border on the flex container itself
   (not per-column) avoids a doubled line at the desktop column seam and at
   the mobile stacking seam alike. */
.iclSh11Columns {
  display: flex;
  gap: clamp(40px, 4vw, 64px);
  align-items: flex-start;
  border-top: 1px solid var(--iclsp-line);
}

.iclSh11Column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.iclSh11Item {
  border-bottom: 1px solid var(--iclsp-line);
}

.iclSh11Summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
}
.iclSh11Summary::-webkit-details-marker { display: none; }
.iclSh11Summary::marker { content: ""; }

.iclSh11Summary:focus-visible {
  outline: 2px solid var(--iclsp-accent);
  outline-offset: 2px;
}

.iclSh11SummaryText {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

.iclSh11Index {
  flex: 0 0 auto;
  color: var(--iclsp-accent);
  opacity: .65;
  font-family: var(--iclpv-fontMono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
}

.iclSh11Question {
  color: #b6bec2;
  font-family: var(--iclpv-fontBody);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

/* Open/focus state: subtle strengthening only, per "avoid strong glow". */
.iclSh11Item[open] .iclSh11Question,
.iclSh11Summary:hover .iclSh11Question {
  color: var(--iclsp-text);
}
.iclSh11Item[open] .iclSh11Index {
  opacity: 1;
}
.iclSh11Item[open] .iclSh11Summary {
  background: rgba(var(--iclsp-accent-rgb), .04);
}

/* CSS-only +/- indicator: a crosshair (two bars) that loses its vertical
   bar on [open], leaving a plain "-". No CTA arrow, no separate glyph
   span beyond this one aria-hidden decorative element. */
.iclSh11Indicator {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.iclSh11Indicator::before,
.iclSh11Indicator::after {
  content: "";
  position: absolute;
  background: var(--iclsp-muted);
  transition: transform .2s ease, background .2s ease;
}
.iclSh11Indicator::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}
.iclSh11Indicator::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  transform: translateX(-50%) scaleY(1);
}
.iclSh11Item[open] .iclSh11Indicator::after {
  transform: translateX(-50%) scaleY(0);
}
.iclSh11Item[open] .iclSh11Indicator::before {
  background: var(--iclsp-accent);
}

.iclSh11Answer {
  padding: 0 2px 22px;
}

.iclSh11Answer p {
  margin: 0;
  max-width: 60ch;
  color: #b6bec2;
  font-family: var(--iclpv-fontBody);
  font-size: 15.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .iclSh11Indicator::before,
  .iclSh11Indicator::after {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .iclSh11Columns {
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 900px) {
  .iclSh11 { padding: 72px 0; }
  .iclSh11Container { width: min(100% - 96px, 900px); }
}

@media (max-width: 640px) {
  .iclSh11 { padding: 56px 0; }
  .iclSh11Container { width: min(100% - 48px, 560px); }
  .iclSh11Title { font-size: clamp(24px, 7vw, 30px); }
  .iclSh11Question { font-size: 15px; }
  .iclSh11Summary { padding: 16px 2px; gap: 12px; }
}

/* Blog ICL: WordPress adds category-* classes to each dynamic post item. */
.iclBlogPostGrid > li { --icl-blog-accent: #d4dee1; --icl-blog-accent-rgb: 212, 222, 225; }
.iclBlogPostGrid > li.category-smart-home { --icl-blog-accent: #00dbe7; --icl-blog-accent-rgb: 0, 219, 231; }
.iclBlogPostGrid > li.category-ai-office { --icl-blog-accent: #ff6528; --icl-blog-accent-rgb: 255, 101, 40; }
.iclBlogPostCard {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-top: 2px solid var(--icl-blog-accent);
  background: radial-gradient(circle at 84% 12%, rgba(var(--icl-blog-accent-rgb), .16), transparent 30%), var(--iclsp-panel);
}
.iclBlogPostCard::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -70px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(var(--icl-blog-accent-rgb), .22);
  border-radius: 50%;
  pointer-events: none;
}
.iclBlogPostCardBody { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100%; }
.iclBlogPostCard .iclspPostTerms { order: 0; color: var(--icl-blog-accent); }
.iclBlogPostCard .iclspPostDate { order: 1; margin: 9px 0 0; color: var(--iclsp-muted); font-family: var(--iclpv-fontMono, "IBM Plex Mono", Consolas, monospace); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.iclBlogPostCard .iclspPostTitle { order: 2; margin-top: 16px; font-family: var(--iclpv-fontDisplay, "Space Grotesk", "Segoe UI", Arial, sans-serif); }
.iclBlogPostCard .iclspPostExcerpt { order: 3; flex: 1 1 auto; }
.iclBlogPostCard .wp-block-post-excerpt__more-link { color: var(--icl-blog-accent); }
.iclBlogVideoSection .iclspYoutubeCard { position: relative; overflow: hidden; }
.iclBlogVideoSection .iclspYoutubeCard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(7,9,10,0) 35%, rgba(7,9,10,.42)); pointer-events: none; }
.iclBlogVideoSection .iclspYoutubeCard > * { position: relative; z-index: 1; }