/* =========================================================
   WEBNIME
   INTEGRATIONS & CONNECTED SYSTEMS
   HERO

   Dark opening section built around a connected-system
   infrastructure metaphor.

   Desktop:
   business systems → integration layer → connected results

   Mobile:
   the same story becomes a vertical data journey instead of
   shrinking the desktop network into an unreadable diagram.
   ========================================================= */


.wn-ics-page {
    width: 100%;
    overflow: hidden;
}


.wn-ics-hero {
    position: relative;
    overflow: hidden;
    padding: 132px 0 54px;
    background:
        radial-gradient(
            circle at 76% 39%,
            rgba(37, 111, 255, 0.13),
            transparent 29%
        ),
        radial-gradient(
            circle at 94% 8%,
            rgba(30, 87, 185, 0.09),
            transparent 25%
        ),
        #07111f;
    color: #ffffff;
}


/* Large infrastructure rings establish depth behind the
   integration scene without becoming part of its content. */

.wn-ics-hero::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -270px;
    width: 900px;
    height: 900px;
    border: 1px solid rgba(83, 147, 238, 0.07);
    border-radius: 50%;
    pointer-events: none;
}


.wn-ics-hero::after {
    content: "";
    position: absolute;
    top: 40px;
    right: -40px;
    width: 580px;
    height: 580px;
    border: 1px solid rgba(83, 147, 238, 0.055);
    border-radius: 50%;
    pointer-events: none;
}


.wn-ics-hero .wn-wrap {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   HERO LAYOUT
   ========================================================= */

.wn-ics-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(590px, 1.18fr);
    gap: clamp(68px, 8vw, 125px);
    align-items: center;
}


.wn-ics-hero-content,
.wn-ics-hero-visual {
    min-width: 0;
}


/* =========================================================
   HERO COPY
   ========================================================= */

.wn-ics-hero-kicker {
    display: block;
    margin-bottom: 27px;
    color: #6da8ff;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.14em;
}


.wn-ics-hero-content h1 {
    max-width: 680px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(54px, 5.3vw, 78px);
    font-weight: 750;
    line-height: 0.96;
    letter-spacing: -0.052em;
}


.wn-ics-hero-content h1 span {
    color: #61a2ff;
}


.wn-ics-hero-lead {
    max-width: 610px;
    margin: 29px 0 0;
    color: #96a7ba;
    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.wn-ics-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
}


.wn-ics-hero-primary,
.wn-ics-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 50px;
    padding: 0 18px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        color 180ms ease;
}


.wn-ics-hero-primary {
    min-width: 205px;
    border: 1px solid #2e78e9;
    background: #246de0;
    color: #ffffff;
    box-shadow: 0 13px 28px rgba(20, 85, 191, 0.18);
}


.wn-ics-hero-primary:hover {
    border-color: #3784f7;
    background: #307cf0;
    color: #ffffff;
    transform: translateY(-2px);
}


.wn-ics-hero-secondary {
    min-width: 205px;
    border: 1px solid rgba(114, 151, 197, 0.18);
    background: rgba(15, 34, 57, 0.48);
    color: #b4c1d0;
}


.wn-ics-hero-secondary:hover {
    border-color: rgba(91, 156, 255, 0.38);
    background: rgba(22, 49, 82, 0.58);
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   INTEGRATION VISUAL

   One coherent infrastructure panel. The layout intentionally
   avoids the appearance of a conventional software dashboard.
   ========================================================= */

.wn-ics-hero-visual {
    position: relative;
    padding: 23px 24px 20px;
    border: 1px solid rgba(76, 137, 218, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(11, 29, 51, 0.97),
            rgba(7, 21, 38, 0.97)
        );
    box-shadow:
        0 38px 75px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(40, 105, 198, 0.025);
}


/* Thin technical edge anchors the visual to Webnime blue. */

.wn-ics-hero-visual::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 29px;
    width: 96px;
    height: 2px;
    background: #3c8cff;
}


.wn-ics-hero-visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(113, 151, 198, 0.12);
    color: #6e829a;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.12em;
}


.wn-ics-hero-live {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: #55c99a;
    font-size: 7px;
    letter-spacing: 0.09em;
}


.wn-ics-hero-live-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #45c790;
    box-shadow: 0 0 0 4px rgba(69, 199, 144, 0.08);
}


/* =========================================================
   NETWORK LAYOUT

   Five columns create the exchange:
   source systems → inbound data → integration layer →
   outbound sync → business results.
   ========================================================= */

.wn-ics-hero-network {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(125px, 0.9fr)
        46px
        minmax(170px, 1.18fr)
        46px
        minmax(130px, 0.92fr);
    gap: 0;
    align-items: center;
    min-height: 330px;
    padding: 27px 0 24px;
}


/* Quiet horizontal data axis visually binds all systems. */

.wn-ics-hero-network::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    left: 8px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(57, 118, 204, 0.04),
        rgba(57, 118, 204, 0.26) 22%,
        rgba(72, 142, 240, 0.38) 50%,
        rgba(57, 118, 204, 0.26) 78%,
        rgba(57, 118, 204, 0.04)
    );
}


/* =========================================================
   SOURCE SYSTEMS
   ========================================================= */

.wn-ics-hero-sources {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}


.wn-ics-hero-system {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(74, 128, 194, 0.17);
    border-radius: 8px;
    background: rgba(11, 30, 52, 0.94);
}


.wn-ics-hero-system-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(71, 139, 236, 0.20);
    border-radius: 7px;
    background: rgba(42, 107, 202, 0.08);
}


/* CRM icon — connected contacts. */

.wn-ics-hero-system--crm .wn-ics-hero-system-icon::before,
.wn-ics-hero-system--crm .wn-ics-hero-system-icon::after,
.wn-ics-hero-system--crm .wn-ics-hero-system-icon i {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border: 1px solid #5e9cf3;
    border-radius: 50%;
}


.wn-ics-hero-system--crm .wn-ics-hero-system-icon::before {
    top: 7px;
    left: 7px;
}


.wn-ics-hero-system--crm .wn-ics-hero-system-icon::after {
    top: 7px;
    right: 7px;
}


.wn-ics-hero-system--crm .wn-ics-hero-system-icon i {
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}


/* ERP icon — structured business blocks. */

.wn-ics-hero-system--erp .wn-ics-hero-system-icon::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 6px;
    height: 6px;
    border: 1px solid #5e9cf3;
    box-shadow:
        9px 0 0 -1px #0c213b,
        9px 0 0 0 #5e9cf3,
        0 9px 0 -1px #0c213b,
        0 9px 0 0 #5e9cf3,
        9px 9px 0 -1px #0c213b,
        9px 9px 0 0 #5e9cf3;
}


/* Commerce icon — small transaction basket. */

.wn-ics-hero-system--commerce .wn-ics-hero-system-icon::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 7px;
    width: 14px;
    height: 9px;
    border: 1px solid #5e9cf3;
    border-top: 0;
    transform: skew(-7deg);
}


.wn-ics-hero-system--commerce .wn-ics-hero-system-icon::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 9px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #5e9cf3;
    box-shadow: 9px 0 0 #5e9cf3;
}


.wn-ics-hero-system > div {
    min-width: 0;
}


.wn-ics-hero-system > div > span {
    display: block;
    color: #657b94;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}


.wn-ics-hero-system strong {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #dce7f4;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wn-ics-hero-system-state {
    color: #4fba8d;
    font-size: 5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.07em;
}


/* =========================================================
   DATA CONNECTIONS
   ========================================================= */

.wn-ics-hero-link {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-width: 0;
}


.wn-ics-hero-link-line {
    display: block;
    width: 100%;
    height: 1px;
    background: #326bb7;
}


.wn-ics-hero-data-packet {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 3px 5px;
    border: 1px solid rgba(72, 142, 240, 0.23);
    border-radius: 3px;
    background: #0a1b30;
    color: #5898f1;
    font-size: 5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.07em;
    transform: translate(-50%, -50%);
}


.wn-ics-hero-link--out .wn-ics-hero-link-line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #5798f1;
    border-right: 1px solid #5798f1;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   INTEGRATION LAYER
   ========================================================= */

.wn-ics-hero-hub {
    position: relative;
    z-index: 4;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(73, 143, 239, 0.29);
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            rgba(15, 42, 73, 0.99),
            rgba(9, 27, 48, 0.99)
        );
    box-shadow:
        0 24px 45px rgba(0, 0, 0, 0.19),
        0 0 35px rgba(32, 104, 211, 0.045);
}


.wn-ics-hero-hub::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    width: 58px;
    height: 2px;
    background: #3d8cff;
}


.wn-ics-hero-hub-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(108, 151, 203, 0.13);
}


.wn-ics-hero-hub-head div {
    min-width: 0;
}


.wn-ics-hero-hub-head div span {
    display: block;
    color: #69809a;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}


.wn-ics-hero-hub-head strong {
    display: block;
    margin-top: 3px;
    color: #f1f6fc;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
}


.wn-ics-hero-hub-status {
    flex: 0 0 auto;
    padding: 4px 5px;
    border: 1px solid rgba(66, 195, 142, 0.17);
    border-radius: 4px;
    background: rgba(66, 195, 142, 0.06);
    color: #4bc28e;
    font-size: 5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.07em;
}


/* Concentric rings communicate transformation / routing
   without using a generic gear or cloud icon. */

.wn-ics-hero-hub-core {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 105px;
}


.wn-ics-hero-hub-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(75, 145, 240, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}


.wn-ics-hero-hub-ring--one {
    width: 84px;
    height: 84px;
}


.wn-ics-hero-hub-ring--two {
    width: 59px;
    height: 59px;
    border-style: dashed;
    border-color: rgba(75, 145, 240, 0.24);
}


.wn-ics-hero-hub-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(82, 151, 246, 0.31);
    border-radius: 50%;
    background: #102e52;
    box-shadow:
        0 0 0 7px rgba(45, 113, 210, 0.05),
        0 0 24px rgba(54, 130, 238, 0.09);
}


.wn-ics-hero-hub-node span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #579cff;
    box-shadow: 0 0 0 5px rgba(87, 156, 255, 0.08);
}


/* =========================================================
   RECEIVE → TRANSFORM → ROUTE
   ========================================================= */

.wn-ics-hero-hub-process {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 6px;
    align-items: center;
    padding-top: 11px;
    border-top: 1px solid rgba(108, 151, 203, 0.13);
}


.wn-ics-hero-hub-process div {
    min-width: 0;
}


.wn-ics-hero-hub-process div span {
    display: block;
    color: #4f8fe8;
    font-size: 5px;
    font-weight: 850;
    line-height: 1;
}


.wn-ics-hero-hub-process strong {
    display: block;
    margin-top: 3px;
    color: #8298b2;
    font-size: 6px;
    font-weight: 750;
    line-height: 1.2;
}


.wn-ics-hero-process-line {
    width: 100%;
    height: 1px;
    background: rgba(67, 127, 210, 0.31);
}


/* =========================================================
   CONNECTED RESULTS
   ========================================================= */

.wn-ics-hero-targets {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}


.wn-ics-hero-target {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr) 19px;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 11px 9px;
    border: 1px solid rgba(71, 129, 199, 0.16);
    border-radius: 8px;
    background: rgba(10, 28, 49, 0.93);
}


.wn-ics-hero-target-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border: 1px solid rgba(71, 139, 236, 0.17);
    border-radius: 50%;
    color: #568edb;
    font-size: 6px;
    font-weight: 850;
}


.wn-ics-hero-target > div {
    min-width: 0;
}


.wn-ics-hero-target > div span {
    display: block;
    color: #657b94;
    font-size: 5px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}


.wn-ics-hero-target strong {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #dce7f4;
    font-size: 8px;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wn-ics-hero-target-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(67, 196, 142, 0.17);
    border-radius: 50%;
    background: rgba(67, 196, 142, 0.06);
    color: #4dc491;
    font-size: 7px;
    font-weight: 850;
}


/* =========================================================
   DATA SIGNAL
   ========================================================= */

.wn-ics-hero-signal {
    display: grid;
    grid-template-columns: auto minmax(50px, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding-top: 17px;
    border-top: 1px solid rgba(113, 151, 198, 0.12);
}


.wn-ics-hero-signal > span,
.wn-ics-hero-signal > strong {
    color: #657b94;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}


.wn-ics-hero-signal > strong {
    color: #4fc18f;
}


.wn-ics-hero-signal-track {
    position: relative;
    height: 1px;
    background: rgba(65, 127, 211, 0.28);
}


.wn-ics-hero-signal-track span {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border: 2px solid #09182a;
    border-radius: 50%;
    background: #5799f3;
    transform: translateY(-50%);
}


.wn-ics-hero-signal-track span:nth-child(1) {
    left: 15%;
}


.wn-ics-hero-signal-track span:nth-child(2) {
    left: 50%;
}


.wn-ics-hero-signal-track span:nth-child(3) {
    left: 84%;
}


/* =========================================================
   HERO FOOT

   The small three-stage statement reinforces the page idea
   without adding another section beneath the hero.
   ========================================================= */

.wn-ics-hero-foot {
    display: grid;
    grid-template-columns: auto minmax(40px, 1fr) auto minmax(40px, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-top: 78px;
    padding: 23px 0;
    border-top: 1px solid rgba(116, 151, 193, 0.11);
    border-bottom: 1px solid rgba(116, 151, 193, 0.11);
}


.wn-ics-hero-foot > span:not(.wn-ics-hero-foot-line) {
    color: #70859e;
    font-size: 8px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.11em;
}


.wn-ics-hero-foot > span:last-child {
    color: #5b9cf7;
}


.wn-ics-hero-foot-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(59, 120, 204, 0.10),
        rgba(59, 120, 204, 0.38),
        rgba(59, 120, 204, 0.10)
    );
}


/* =========================================================
   TABLET — ≤ 1100px

   Tighten the horizontal infrastructure while preserving
   the complete left-to-right integration story.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-ics-hero {
        padding-top: 116px;
    }

    .wn-ics-hero .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-ics-hero-grid {
        grid-template-columns: minmax(0, 0.75fr) minmax(520px, 1.25fr);
        gap: 52px;
    }

    .wn-ics-hero-content h1 {
        font-size: clamp(50px, 6vw, 68px);
    }

    .wn-ics-hero-network {
        grid-template-columns:
            minmax(112px, 0.9fr)
            34px
            minmax(155px, 1.18fr)
            34px
            minmax(116px, 0.92fr);
    }

    .wn-ics-hero-visual {
        padding-inline: 20px;
    }

    .wn-ics-hero-system-state {
        display: none;
    }

}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   Copy moves above the visual before the network becomes
   cramped. The infrastructure panel can now use the full
   available page width.
   ========================================================= */

@media (max-width: 950px) {

    .wn-ics-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 68px;
    }

    .wn-ics-hero-content {
        max-width: 760px;
    }

    .wn-ics-hero-content h1 {
        max-width: 720px;
        font-size: clamp(54px, 8vw, 72px);
    }

    .wn-ics-hero-lead {
        max-width: 650px;
    }

    .wn-ics-hero-visual {
        width: min(100%, 760px);
        margin-inline: auto;
    }

    .wn-ics-hero-network {
        grid-template-columns:
            minmax(135px, 0.9fr)
            50px
            minmax(185px, 1.18fr)
            50px
            minmax(140px, 0.92fr);
    }

    .wn-ics-hero-system-state {
        display: inline;
    }

    .wn-ics-hero-foot {
        margin-top: 62px;
    }

}


/* =========================================================
   MOBILE — ≤ 760px

   The desktop network is intentionally rebuilt as a vertical
   data journey:

   source systems
        ↓
   integration layer
        ↓
   connected results

   This preserves meaning and readable labels rather than
   shrinking the five-column infrastructure.
   ========================================================= */

@media (max-width: 760px) {

    .wn-ics-hero {
        padding: 90px 0 42px;
    }

    .wn-ics-hero .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-ics-hero::before {
        top: 370px;
        right: -440px;
        width: 720px;
        height: 720px;
    }

    .wn-ics-hero::after {
        display: none;
    }

    .wn-ics-hero-grid {
        gap: 54px;
    }

    .wn-ics-hero-kicker {
        margin-bottom: 21px;
        font-size: 10px;
        letter-spacing: 0.11em;
    }

    .wn-ics-hero-content h1 {
        font-size: clamp(43px, 11vw, 58px);
        line-height: 0.99;
    }

    .wn-ics-hero-lead {
        margin-top: 23px;
        font-size: 14px;
        line-height: 1.68;
    }

    .wn-ics-hero-actions {
        margin-top: 29px;
    }

    .wn-ics-hero-visual {
        padding: 22px 20px 19px;
        border-radius: 16px;
    }

    .wn-ics-hero-visual::before {
        left: 20px;
        width: 78px;
    }

    .wn-ics-hero-network {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 25px 0 22px;
    }

    .wn-ics-hero-network::before {
        display: none;
    }

    .wn-ics-hero-sources,
    .wn-ics-hero-targets,
    .wn-ics-hero-hub {
        width: min(100%, 390px);
        margin-inline: auto;
    }

    .wn-ics-hero-system {
        padding: 11px 12px;
    }

    .wn-ics-hero-system > div > span,
    .wn-ics-hero-target > div span {
        font-size: 7px;
    }

    .wn-ics-hero-system strong,
    .wn-ics-hero-target strong {
        font-size: 10px;
    }

    .wn-ics-hero-system-state {
        font-size: 6px;
    }

    .wn-ics-hero-link {
        width: 1px;
        height: 46px;
        flex: 0 0 46px;
        margin-inline: auto;
    }

    .wn-ics-hero-link-line {
        width: 1px;
        height: 100%;
        background: #326bb7;
    }

    .wn-ics-hero-data-packet {
        font-size: 6px;
    }

    .wn-ics-hero-link--out .wn-ics-hero-link-line::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .wn-ics-hero-hub {
        padding: 17px;
    }

    .wn-ics-hero-hub-head div span {
        font-size: 7px;
    }

    .wn-ics-hero-hub-head strong {
        font-size: 13px;
    }

    .wn-ics-hero-hub-status {
        font-size: 6px;
    }

    .wn-ics-hero-hub-core {
        height: 116px;
    }

    .wn-ics-hero-hub-process div span {
        font-size: 6px;
    }

    .wn-ics-hero-hub-process strong {
        font-size: 8px;
    }

    .wn-ics-hero-target {
        padding: 12px;
    }

    .wn-ics-hero-signal > span,
    .wn-ics-hero-signal > strong {
        font-size: 7px;
    }

    .wn-ics-hero-foot {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 48px;
        padding: 19px 0;
    }

    .wn-ics-hero-foot > span:not(.wn-ics-hero-foot-line) {
        font-size: 8px;
    }

    .wn-ics-hero-foot-line {
        width: 1px;
        height: 20px;
        margin: 6px 0 6px 3px;
        background: rgba(59, 120, 204, 0.35);
    }

}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Conversion controls become full width and meaningful
   infrastructure labels remain comfortably readable.
   ========================================================= */

@media (max-width: 520px) {

    .wn-ics-hero {
        padding-top: 80px;
    }

    .wn-ics-hero .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-ics-hero-content h1 {
        font-size: clamp(39px, 11vw, 48px);
        letter-spacing: -0.045em;
    }

    .wn-ics-hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .wn-ics-hero-primary,
    .wn-ics-hero-secondary {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding-inline: 17px;
    }

    .wn-ics-hero-visual {
        padding-inline: 15px;
    }

    .wn-ics-hero-visual::before {
        left: 15px;
    }

    .wn-ics-hero-visual-top {
        align-items: flex-start;
    }

    .wn-ics-hero-visual-top > span {
        max-width: 150px;
    }

    .wn-ics-hero-system,
    .wn-ics-hero-target {
        border-radius: 7px;
    }

    .wn-ics-hero-system-state {
        font-size: 6px;
    }

    .wn-ics-hero-hub-process {
        gap: 5px;
    }

    .wn-ics-hero-hub-process strong {
        font-size: 7px;
    }

    .wn-ics-hero-signal {
        grid-template-columns: auto minmax(30px, 1fr) auto;
        gap: 8px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Final width protection. The network remains complete;
   secondary decoration yields before meaningful information.
   ========================================================= */

@media (max-width: 380px) {

    .wn-ics-hero .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-ics-hero-content h1 {
        font-size: 36px;
    }

    .wn-ics-hero-visual {
        padding: 20px 12px 17px;
    }

    .wn-ics-hero-visual::before {
        left: 12px;
    }

    .wn-ics-hero-live {
        font-size: 6px;
    }

    .wn-ics-hero-system {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .wn-ics-hero-system-state {
        display: none;
    }

    .wn-ics-hero-hub {
        padding: 14px;
    }

    .wn-ics-hero-hub-process strong {
        font-size: 6px;
    }

    .wn-ics-hero-signal {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .wn-ics-hero-signal-track {
        width: 100%;
    }

}
/* =========================================================
   01 — THE CONNECTION GAP

   Light editorial section showing what happens when useful
   business systems operate independently.

   The visual follows one customer record across CRM, ERP and
   e-commerce, with manual work filling the gaps between them.
   ========================================================= */

.wn-ics-gap {
    position: relative;
    overflow: hidden;
    padding: 118px 0 122px;
    background: #f5f7fa;
    color: #0b1727;
}


.wn-ics-gap .wn-wrap {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* Subtle technical background keeps the light section connected
   to the visual language of the page without turning it into
   another dark software interface. */

.wn-ics-gap::before {
    content: "";
    position: absolute;
    top: 0;
    right: 8%;
    width: 1px;
    height: 100%;
    background: rgba(19, 55, 96, 0.045);
}


.wn-ics-gap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 8%;
    width: 320px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(34, 103, 199, 0.13)
    );
}


/* =========================================================
   SECTION INTRO
   ========================================================= */

.wn-ics-gap-head {
    display: grid;
    grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
    gap: clamp(55px, 8vw, 125px);
    align-items: start;
    margin-bottom: 76px;
}


.wn-ics-gap-label {
    display: flex;
    align-items: center;
    gap: 17px;
    padding-top: 8px;
}


.wn-ics-gap-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(24, 89, 181, 0.20);
    border-radius: 50%;
    color: #1f6dd8;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
}


.wn-ics-gap-kicker {
    color: #4e6075;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.12em;
}


.wn-ics-gap-heading {
    min-width: 0;
}


.wn-ics-gap-heading h2 {
    max-width: 900px;
    margin: 0;
    color: #0b1727;
    font-size: clamp(46px, 4.8vw, 68px);
    font-weight: 750;
    line-height: 1.01;
    letter-spacing: -0.048em;
}


.wn-ics-gap-heading h2 span {
    color: #557087;
}


.wn-ics-gap-heading > p {
    max-width: 680px;
    margin: 27px 0 0;
    color: #607184;
    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   DISCONNECTED RECORD SCENE

   One record moves from left to right, but every handoff
   introduces manual work, delay or data inconsistency.
   ========================================================= */

.wn-ics-gap-scene {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(185px, 1fr)
        minmax(105px, 0.48fr)
        minmax(185px, 1fr)
        minmax(105px, 0.48fr)
        minmax(185px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 49px 34px;
    border: 1px solid #dbe3eb;
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96),
            rgba(249, 251, 253, 0.98)
        );
    box-shadow:
        0 26px 65px rgba(29, 54, 84, 0.055);
}


/* Horizontal reference line makes the scene feel like one
   broken business process rather than five separate objects. */

.wn-ics-gap-scene::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 44px;
    left: 44px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(35, 101, 190, 0.07),
        rgba(35, 101, 190, 0.18),
        rgba(35, 101, 190, 0.07)
    );
}


/* Small blue registration mark gives the large white panel
   the same precision seen in the dark hero visual. */

.wn-ics-gap-scene::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 34px;
    width: 92px;
    height: 2px;
    background: #2f78df;
}


/* =========================================================
   SYSTEM RECORDS
   ========================================================= */

.wn-ics-gap-record {
    position: relative;
    z-index: 2;
    min-width: 0;
    border: 1px solid #d8e1ea;
    border-radius: 12px;
    background: #ffffff;
    box-shadow:
        0 14px 34px rgba(28, 54, 85, 0.055);
}


.wn-ics-gap-record-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 17px 17px 14px;
    border-bottom: 1px solid #e8edf2;
}


.wn-ics-gap-record-top > div {
    min-width: 0;
}


.wn-ics-gap-record-source {
    display: block;
    color: #2872d8;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.11em;
}


.wn-ics-gap-record-top strong {
    display: block;
    margin-top: 4px;
    color: #142338;
    font-size: 11px;
    font-weight: 780;
    line-height: 1.3;
}


.wn-ics-gap-record-status {
    flex: 0 0 auto;
    padding: 5px 6px;
    border: 1px solid rgba(38, 163, 111, 0.18);
    border-radius: 4px;
    background: rgba(38, 163, 111, 0.055);
    color: #238f65;
    font-size: 6px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.07em;
}


.wn-ics-gap-record-status--old {
    border-color: rgba(213, 139, 44, 0.22);
    background: rgba(213, 139, 44, 0.07);
    color: #b8731d;
}


.wn-ics-gap-record-status--pending {
    border-color: rgba(89, 110, 135, 0.20);
    background: rgba(89, 110, 135, 0.055);
    color: #68798b;
}


.wn-ics-gap-record-body {
    padding: 8px 17px 9px;
}


.wn-ics-gap-field {
    min-width: 0;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f5;
}


.wn-ics-gap-field:last-child {
    border-bottom: 0;
}


.wn-ics-gap-field span {
    display: block;
    margin-bottom: 4px;
    color: #8a98a8;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}


.wn-ics-gap-field strong {
    display: block;
    overflow: hidden;
    color: #34465b;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wn-ics-gap-field--warning strong {
    color: #a56b23;
}


.wn-ics-gap-field--empty strong {
    color: #8391a0;
    font-style: italic;
    font-weight: 600;
}


.wn-ics-gap-record-time {
    padding: 11px 17px;
    border-top: 1px solid #e8edf2;
    color: #8290a0;
    font-size: 7px;
    font-weight: 650;
    line-height: 1.3;
}


.wn-ics-gap-record--crm {
    border-top-color: #79a9eb;
}


.wn-ics-gap-record--erp {
    border-top-color: #d8a258;
}


.wn-ics-gap-record--commerce {
    border-top-color: #a9b5c2;
}


/* =========================================================
   MANUAL GAPS

   These are deliberately narrower and visually less stable
   than the system records. People are acting as the missing
   integration layer.
   ========================================================= */

.wn-ics-gap-break {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    min-width: 0;
}


.wn-ics-gap-break-line {
    display: block;
    min-width: 8px;
    flex: 1 1 auto;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        #bdc8d4 0,
        #bdc8d4 4px,
        transparent 4px,
        transparent 8px
    );
}


.wn-ics-gap-break-card {
    position: relative;
    width: 94px;
    flex: 0 0 94px;
    padding: 12px 10px;
    border: 1px dashed #c8d1db;
    border-radius: 8px;
    background: #f7f9fb;
    text-align: center;
}


.wn-ics-gap-break-card > span {
    display: block;
    color: #a06a2d;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}


.wn-ics-gap-break-card > strong {
    display: block;
    margin-top: 5px;
    color: #586a7d;
    font-size: 8px;
    font-weight: 750;
    line-height: 1.35;
}


.wn-ics-gap-break-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #e2e7ec;
}


.wn-ics-gap-break-meta span {
    color: #8c99a7;
    font-size: 5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.05em;
}


.wn-ics-gap-break-meta span:nth-child(2) {
    color: #bc7b2c;
}


/* The second gap is slightly lower to break mechanical
   symmetry and suggest an irregular manual process. */

.wn-ics-gap-break--two {
    transform: translateY(19px);
}


/* =========================================================
   BUSINESS CONSEQUENCES
   ========================================================= */

.wn-ics-gap-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 39px;
    border-top: 1px solid #dce3ea;
    border-bottom: 1px solid #dce3ea;
}


.wn-ics-gap-summary-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 17px;
    min-width: 0;
    padding: 27px 30px 28px 0;
}


.wn-ics-gap-summary-item + .wn-ics-gap-summary-item {
    padding-left: 30px;
    border-left: 1px solid #dce3ea;
}


.wn-ics-gap-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #cfdae5;
    border-radius: 50%;
    color: #3276d5;
    font-size: 8px;
    font-weight: 850;
    line-height: 1;
}


.wn-ics-gap-summary-item > div {
    min-width: 0;
}


.wn-ics-gap-summary-item strong {
    display: block;
    color: #18283b;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.35;
}


.wn-ics-gap-summary-item p {
    max-width: 280px;
    margin: 7px 0 0;
    color: #68798a;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   TABLET — ≤ 1100px

   The complete horizontal story still fits, but the manual
   handoff cards become more compact before the section
   changes architecture at narrower widths.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-ics-gap .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-ics-gap-head {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 50px;
    }

    .wn-ics-gap-scene {
        grid-template-columns:
            minmax(165px, 1fr)
            78px
            minmax(165px, 1fr)
            78px
            minmax(165px, 1fr);
        gap: 10px;
        padding-inline: 25px;
    }

    .wn-ics-gap-break-card {
        width: 70px;
        flex-basis: 70px;
        padding-inline: 7px;
    }

    .wn-ics-gap-break-card > strong {
        font-size: 7px;
    }

    .wn-ics-gap-break-meta {
        gap: 3px;
    }

}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   The system records remain horizontal, while unnecessary
   metadata yields enough room to preserve readable values.
   ========================================================= */

@media (max-width: 950px) {

    .wn-ics-gap {
        padding: 100px 0 105px;
    }

    .wn-ics-gap-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        margin-bottom: 60px;
    }

    .wn-ics-gap-label {
        padding-top: 0;
    }

    .wn-ics-gap-heading h2 {
        max-width: 780px;
    }

    .wn-ics-gap-scene {
        grid-template-columns:
            minmax(145px, 1fr)
            56px
            minmax(145px, 1fr)
            56px
            minmax(145px, 1fr);
        padding: 40px 20px;
    }

    .wn-ics-gap-break-card {
        width: 52px;
        flex-basis: 52px;
        padding: 10px 5px;
    }

    .wn-ics-gap-break-card > strong {
        font-size: 6px;
    }

    .wn-ics-gap-break-meta {
        display: none;
    }

    .wn-ics-gap-record-top {
        padding-inline: 13px;
    }

    .wn-ics-gap-record-body {
        padding-inline: 13px;
    }

    .wn-ics-gap-record-time {
        padding-inline: 13px;
    }

    .wn-ics-gap-record-status {
        display: none;
    }

    .wn-ics-gap-summary-item {
        padding-right: 20px;
    }

    .wn-ics-gap-summary-item + .wn-ics-gap-summary-item {
        padding-left: 20px;
    }

}


/* =========================================================
   MOBILE — ≤ 760px

   The horizontal broken record becomes a vertical journey.
   Nothing is shrunk into a miniature desktop diagram:
   records stay readable and manual gaps become clear handoffs.
   ========================================================= */

@media (max-width: 760px) {

    .wn-ics-gap {
        padding: 82px 0 86px;
    }

    .wn-ics-gap .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-ics-gap::before,
    .wn-ics-gap::after {
        display: none;
    }

    .wn-ics-gap-head {
        gap: 29px;
        margin-bottom: 46px;
    }

    .wn-ics-gap-label {
        gap: 13px;
    }

    .wn-ics-gap-number {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .wn-ics-gap-kicker {
        font-size: 9px;
    }

    .wn-ics-gap-heading h2 {
        font-size: clamp(39px, 9.5vw, 52px);
        line-height: 1.02;
    }

    .wn-ics-gap-heading > p {
        margin-top: 21px;
        font-size: 14px;
        line-height: 1.68;
    }

    .wn-ics-gap-scene {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 27px 20px;
    }

    .wn-ics-gap-scene::before {
        top: 35px;
        bottom: 35px;
        left: 50%;
        width: 1px;
        height: auto;
        background: linear-gradient(
            180deg,
            rgba(35, 101, 190, 0.08),
            rgba(35, 101, 190, 0.20),
            rgba(35, 101, 190, 0.08)
        );
        transform: translateX(-50%);
    }

    .wn-ics-gap-scene::after {
        left: 20px;
        width: 72px;
    }

    .wn-ics-gap-record {
        width: min(100%, 410px);
        margin-inline: auto;
    }

    .wn-ics-gap-record-top {
        padding: 16px;
    }

    .wn-ics-gap-record-source {
        font-size: 8px;
    }

    .wn-ics-gap-record-top strong {
        font-size: 12px;
    }

    .wn-ics-gap-record-status {
        display: block;
        font-size: 6px;
    }

    .wn-ics-gap-record-body {
        padding: 8px 16px 9px;
    }

    .wn-ics-gap-field {
        padding: 10px 0;
    }

    .wn-ics-gap-field span {
        font-size: 7px;
    }

    .wn-ics-gap-field strong {
        font-size: 10px;
    }

    .wn-ics-gap-record-time {
        padding: 11px 16px;
        font-size: 8px;
    }

    .wn-ics-gap-break {
        flex-direction: column;
        width: min(100%, 250px);
        height: 104px;
        margin-inline: auto;
    }

    .wn-ics-gap-break-line {
        width: 1px;
        min-width: 1px;
        min-height: 17px;
        flex: 1 1 auto;
        background: repeating-linear-gradient(
            180deg,
            #bdc8d4 0,
            #bdc8d4 4px,
            transparent 4px,
            transparent 8px
        );
    }

    .wn-ics-gap-break-card {
        width: 170px;
        flex: 0 0 auto;
        padding: 11px 13px;
        background: #f7f9fb;
    }

    .wn-ics-gap-break-card > span {
        font-size: 7px;
    }

    .wn-ics-gap-break-card > strong {
        font-size: 9px;
    }

    .wn-ics-gap-break-meta {
        display: flex;
    }

    .wn-ics-gap-break-meta span {
        font-size: 6px;
    }

    .wn-ics-gap-break--two {
        transform: none;
    }

    .wn-ics-gap-summary {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 31px;
    }

    .wn-ics-gap-summary-item {
        padding: 22px 0;
    }

    .wn-ics-gap-summary-item + .wn-ics-gap-summary-item {
        padding-left: 0;
        border-top: 1px solid #dce3ea;
        border-left: 0;
    }

    .wn-ics-gap-summary-item p {
        max-width: 460px;
    }

}


/* =========================================================
   SMALL MOBILE — ≤ 520px
   ========================================================= */

@media (max-width: 520px) {

    .wn-ics-gap .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-ics-gap-heading h2 {
        font-size: clamp(36px, 10vw, 45px);
        letter-spacing: -0.043em;
    }

    .wn-ics-gap-scene {
        padding-inline: 14px;
        border-radius: 14px;
    }

    .wn-ics-gap-scene::after {
        left: 14px;
    }

    .wn-ics-gap-record {
        width: 100%;
    }

    .wn-ics-gap-break {
        height: 96px;
    }

    .wn-ics-gap-summary-item {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 14px;
    }

    .wn-ics-gap-summary-icon {
        width: 35px;
        height: 35px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Long illustrative values are allowed to wrap instead of
   forcing the viewport wider than the device.
   ========================================================= */

@media (max-width: 380px) {

    .wn-ics-gap .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-ics-gap-heading h2 {
        font-size: 34px;
    }

    .wn-ics-gap-record-top {
        gap: 7px;
        padding-inline: 13px;
    }

    .wn-ics-gap-record-body,
    .wn-ics-gap-record-time {
        padding-inline: 13px;
    }

    .wn-ics-gap-field strong {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wn-ics-gap-break-card {
        width: 155px;
    }

}
/* =========================================================
   02 — ONE CONNECTED DATA FLOW

   Dark technical section showing what actually happens inside
   a reliable integration.

   The same customer record from Section 01 now moves through
   a controlled sequence:

   CRM → payload → mapping → validation → transformation →
   ERP

   Unlike the Hero, this is not a network overview. We are
   opening the integration layer and showing its logic.
   ========================================================= */

.wn-ics-flow {
    position: relative;
    overflow: hidden;
    padding: 118px 0 120px;
    background:
        radial-gradient(
            circle at 54% 52%,
            rgba(39, 108, 211, 0.11),
            transparent 31%
        ),
        #07111f;
    color: #ffffff;
}


.wn-ics-flow .wn-wrap {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* Large technical arcs sit behind the mapping stage.
   They provide depth without repeating the Hero network. */

.wn-ics-flow::before {
    content: "";
    position: absolute;
    top: 230px;
    left: 50%;
    width: 760px;
    height: 760px;
    border: 1px solid rgba(75, 137, 220, 0.045);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}


.wn-ics-flow::after {
    content: "";
    position: absolute;
    top: 330px;
    left: 50%;
    width: 550px;
    height: 550px;
    border: 1px solid rgba(75, 137, 220, 0.035);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}


/* =========================================================
   SECTION INTRO
   ========================================================= */

.wn-ics-flow-head {
    display: grid;
    grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
    gap: clamp(55px, 8vw, 125px);
    align-items: start;
    margin-bottom: 76px;
}


.wn-ics-flow-label {
    display: flex;
    align-items: center;
    gap: 17px;
    padding-top: 8px;
}


.wn-ics-flow-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(76, 145, 241, 0.26);
    border-radius: 50%;
    color: #64a3fa;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
}


.wn-ics-flow-kicker {
    color: #8ba0b9;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.12em;
}


.wn-ics-flow-heading {
    min-width: 0;
}


.wn-ics-flow-heading h2 {
    max-width: 880px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(46px, 4.8vw, 68px);
    font-weight: 750;
    line-height: 1.01;
    letter-spacing: -0.048em;
}


.wn-ics-flow-heading h2 span {
    color: #63a2fb;
}


.wn-ics-flow-heading > p {
    max-width: 700px;
    margin: 27px 0 0;
    color: #91a3b7;
    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   LIVE DATA EXCHANGE STAGE

   One large technical canvas contains the complete exchange.
   The visual reads as infrastructure rather than a collection
   of independent cards.
   ========================================================= */

.wn-ics-flow-stage {
    position: relative;
    padding: 23px 26px 22px;
    border: 1px solid rgba(78, 137, 215, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(11, 29, 51, 0.98),
            rgba(7, 21, 38, 0.98)
        );
    box-shadow:
        0 34px 72px rgba(0, 0, 0, 0.20);
}


.wn-ics-flow-stage::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 30px;
    width: 100px;
    height: 2px;
    background: #3d8cff;
}


.wn-ics-flow-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(111, 150, 197, 0.12);
    color: #71859d;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.11em;
}


.wn-ics-flow-stage-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #54c795;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.08em;
}


.wn-ics-flow-stage-status > span {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #48c78f;
    box-shadow: 0 0 0 4px rgba(72, 199, 143, 0.07);
}


/* =========================================================
   COMPLETE ROUTE

   Five columns:
   source → packet → mapping logic → packet → target.

   The middle mapping component receives more visual weight
   because transformation is the key idea of this section.
   ========================================================= */

.wn-ics-flow-route {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(205px, 1fr)
        minmax(70px, 0.35fr)
        minmax(270px, 1.28fr)
        minmax(70px, 0.35fr)
        minmax(205px, 1fr);
    gap: 16px;
    align-items: center;
    padding: 44px 0 42px;
}


/* A quiet data rail visually connects the complete route. */

.wn-ics-flow-route::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    left: 12px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(61, 125, 211, 0.05),
        rgba(61, 125, 211, 0.30) 25%,
        rgba(80, 150, 244, 0.40) 50%,
        rgba(61, 125, 211, 0.30) 75%,
        rgba(61, 125, 211, 0.05)
    );
}


/* =========================================================
   SOURCE + TARGET SYSTEM SHELLS
   ========================================================= */

.wn-ics-flow-source,
.wn-ics-flow-target {
    position: relative;
    z-index: 2;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(76, 132, 201, 0.18);
    border-radius: 12px;
    background: rgba(9, 27, 48, 0.97);
}


.wn-ics-flow-system-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px;
    border-bottom: 1px solid rgba(104, 147, 199, 0.12);
}


.wn-ics-flow-system-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border: 1px solid rgba(75, 143, 235, 0.22);
    border-radius: 50%;
    color: #5899f0;
    font-size: 7px;
    font-weight: 850;
}


.wn-ics-flow-system-head > div {
    min-width: 0;
}


.wn-ics-flow-system-head > div span {
    display: block;
    color: #687f99;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}


.wn-ics-flow-system-head > div strong {
    display: block;
    margin-top: 3px;
    color: #e6eef7;
    font-size: 11px;
    font-weight: 780;
    line-height: 1.25;
}


/* =========================================================
   SOURCE PAYLOAD
   ========================================================= */

.wn-ics-flow-payload {
    padding: 15px;
}


.wn-ics-flow-payload-title {
    padding-bottom: 12px;
}


.wn-ics-flow-payload-title span {
    display: block;
    color: #548fdc;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}


.wn-ics-flow-payload-title strong {
    display: block;
    margin-top: 4px;
    color: #dce6f1;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.35;
}


.wn-ics-flow-code {
    overflow: hidden;
    border: 1px solid rgba(77, 128, 188, 0.13);
    border-radius: 7px;
    background: rgba(5, 18, 33, 0.48);
}


.wn-ics-flow-code > div {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 9px;
    padding: 8px 9px;
    border-bottom: 1px solid rgba(93, 133, 179, 0.09);
}


.wn-ics-flow-code > div:last-child {
    border-bottom: 0;
}


.wn-ics-flow-code span {
    min-width: 0;
    color: #6d8299;
    font-size: 6px;
    font-weight: 650;
    line-height: 1.3;
}


.wn-ics-flow-code strong {
    min-width: 0;
    overflow: hidden;
    color: #aebed0;
    font-size: 6px;
    font-weight: 700;
    line-height: 1.3;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   SYSTEM FOOTERS
   ========================================================= */

.wn-ics-flow-system-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 15px;
    border-top: 1px solid rgba(104, 147, 199, 0.12);
    background: rgba(5, 18, 33, 0.23);
}


.wn-ics-flow-system-foot span {
    color: #637990;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}


.wn-ics-flow-system-foot strong {
    overflow: hidden;
    color: #5598f0;
    font-size: 7px;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   DATA PACKETS BETWEEN SYSTEMS
   ========================================================= */

.wn-ics-flow-transfer {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    min-width: 0;
}


.wn-ics-flow-transfer-line {
    width: 100%;
    height: 1px;
    background: #356fbd;
}


.wn-ics-flow-transfer-packet {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50px;
    padding: 6px 7px;
    border: 1px solid rgba(73, 142, 235, 0.25);
    border-radius: 5px;
    background: #0a1d34;
    text-align: center;
    transform: translate(-50%, -50%);
}


.wn-ics-flow-transfer-packet span {
    display: block;
    color: #5899f1;
    font-size: 5px;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: 0.07em;
}


.wn-ics-flow-transfer-packet strong {
    display: block;
    margin-top: 3px;
    color: #879cb5;
    font-size: 6px;
    font-weight: 700;
    line-height: 1.1;
}


.wn-ics-flow-transfer-arrow {
    position: absolute;
    top: 50%;
    right: -2px;
    color: #65a4fa;
    font-size: 11px;
    line-height: 1;
    transform: translateY(-52%);
}


/* =========================================================
   MAP & TRANSFORM

   This is intentionally the strongest element of the scene.
   It exposes the field mapping instead of hiding integration
   behind an abstract icon.
   ========================================================= */

.wn-ics-flow-mapper {
    position: relative;
    z-index: 4;
    min-width: 0;
    padding: 17px;
    border: 1px solid rgba(79, 150, 246, 0.32);
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            rgba(15, 43, 75, 0.99),
            rgba(9, 28, 50, 0.99)
        );
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.19),
        0 0 36px rgba(40, 115, 218, 0.05);
}


.wn-ics-flow-mapper::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 19px;
    width: 66px;
    height: 2px;
    background: #438fff;
}


.wn-ics-flow-mapper-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(105, 150, 203, 0.13);
}


.wn-ics-flow-mapper-head > div {
    min-width: 0;
}


.wn-ics-flow-mapper-head > div span {
    display: block;
    color: #6c829b;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}


.wn-ics-flow-mapper-head > div strong {
    display: block;
    margin-top: 3px;
    color: #f1f6fc;
    font-size: 12px;
    font-weight: 780;
    line-height: 1.3;
}


.wn-ics-flow-mapper-live {
    flex: 0 0 auto;
    padding: 5px 6px;
    border: 1px solid rgba(65, 194, 140, 0.18);
    border-radius: 4px;
    background: rgba(65, 194, 140, 0.06);
    color: #4bc28e;
    font-size: 5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.07em;
}


/* =========================================================
   FIELD MAPPING
   ========================================================= */

.wn-ics-flow-map {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 0;
}


.wn-ics-flow-map-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 45px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}


.wn-ics-flow-map-from,
.wn-ics-flow-map-to {
    overflow: hidden;
    padding: 7px 8px;
    border: 1px solid rgba(74, 126, 189, 0.14);
    border-radius: 5px;
    background: rgba(5, 18, 33, 0.34);
    color: #92a5bb;
    font-size: 6px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wn-ics-flow-map-to {
    border-color: rgba(71, 143, 239, 0.20);
    color: #70a8f4;
}


.wn-ics-flow-map-route {
    position: relative;
    display: block;
    height: 1px;
    background: rgba(69, 139, 233, 0.45);
}


.wn-ics-flow-map-route::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 5px;
    height: 5px;
    border-top: 1px solid #5e9ef5;
    border-right: 1px solid #5e9ef5;
    transform: translateY(-50%) rotate(45deg);
}


.wn-ics-flow-map-route i {
    position: absolute;
    top: 50%;
    left: 35%;
    width: 5px;
    height: 5px;
    border: 2px solid #102b4b;
    border-radius: 50%;
    background: #5b9cf5;
    transform: translateY(-50%);
}


/* =========================================================
   VALIDATE → TRANSFORM → ROUTE
   ========================================================= */

.wn-ics-flow-transform {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding-top: 13px;
    border-top: 1px solid rgba(105, 150, 203, 0.13);
}


.wn-ics-flow-transform > div {
    min-width: 0;
}


.wn-ics-flow-transform > div span {
    display: block;
    color: #607a97;
    font-size: 5px;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: 0.06em;
}


.wn-ics-flow-transform > div strong {
    display: block;
    margin-top: 3px;
    color: #50bd8d;
    font-size: 6px;
    font-weight: 750;
    line-height: 1.2;
}


.wn-ics-flow-transform-line {
    width: 100%;
    height: 1px;
    background: rgba(66, 128, 212, 0.28);
}


/* =========================================================
   TARGET RESULT
   ========================================================= */

.wn-ics-flow-result {
    padding: 19px 15px 16px;
    text-align: center;
}


.wn-ics-flow-result-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 11px;
    border: 1px solid rgba(67, 195, 141, 0.21);
    border-radius: 50%;
    background: rgba(67, 195, 141, 0.07);
    box-shadow: 0 0 0 7px rgba(67, 195, 141, 0.025);
}


.wn-ics-flow-result-check span {
    color: #4bc28e;
    font-size: 13px;
    font-weight: 850;
}


.wn-ics-flow-result > span {
    display: block;
    color: #4dc18e;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}


.wn-ics-flow-result > strong {
    display: block;
    max-width: 160px;
    margin: 5px auto 0;
    color: #dbe6f1;
    font-size: 9px;
    font-weight: 730;
    line-height: 1.4;
}


.wn-ics-flow-result-data {
    margin: 0 15px 15px;
    overflow: hidden;
    border: 1px solid rgba(77, 128, 188, 0.13);
    border-radius: 7px;
    background: rgba(5, 18, 33, 0.42);
}


.wn-ics-flow-result-data > div {
    display: grid;
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 9px;
    border-bottom: 1px solid rgba(93, 133, 179, 0.09);
}


.wn-ics-flow-result-data > div:last-child {
    border-bottom: 0;
}


.wn-ics-flow-result-data span {
    color: #647b94;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.3;
}


.wn-ics-flow-result-data strong {
    min-width: 0;
    overflow: hidden;
    color: #aebed0;
    font-size: 6px;
    font-weight: 700;
    line-height: 1.3;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   EXCHANGE MONITOR

   A thin event timeline makes the exchange feel observable
   and real without turning the section into a dashboard.
   ========================================================= */

.wn-ics-flow-monitor {
    display: grid;
    grid-template-columns:
        auto minmax(25px, 1fr)
        auto minmax(25px, 1fr)
        auto minmax(25px, 1fr)
        auto;
    gap: 13px;
    align-items: center;
    padding: 18px 0 2px;
    border-top: 1px solid rgba(111, 150, 197, 0.12);
}


.wn-ics-flow-monitor-item {
    min-width: 0;
}


.wn-ics-flow-monitor-item span {
    display: block;
    color: #4f8fdf;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
}


.wn-ics-flow-monitor-item strong {
    display: block;
    margin-top: 3px;
    color: #7388a0;
    font-size: 7px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}


.wn-ics-flow-monitor-line {
    width: 100%;
    height: 1px;
    background: rgba(61, 123, 205, 0.24);
}


/* =========================================================
   THREE INTEGRATION PRINCIPLES
   ========================================================= */

.wn-ics-flow-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 38px;
    border-top: 1px solid rgba(112, 148, 191, 0.13);
    border-bottom: 1px solid rgba(112, 148, 191, 0.13);
}


.wn-ics-flow-principle {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 17px;
    min-width: 0;
    padding: 27px 30px 28px 0;
}


.wn-ics-flow-principle + .wn-ics-flow-principle {
    padding-left: 30px;
    border-left: 1px solid rgba(112, 148, 191, 0.13);
}


.wn-ics-flow-principle > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(77, 143, 232, 0.22);
    border-radius: 50%;
    color: #5c9cf3;
    font-size: 8px;
    font-weight: 850;
}


.wn-ics-flow-principle > div {
    min-width: 0;
}


.wn-ics-flow-principle strong {
    display: block;
    color: #dce6f1;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.35;
}


.wn-ics-flow-principle p {
    max-width: 290px;
    margin: 7px 0 0;
    color: #7e91a8;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   TABLET — ≤ 1100px

   Keep the full horizontal data exchange, but give more room
   to the mapping layer and simplify supporting metadata.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-ics-flow .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-ics-flow-head {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 50px;
    }

    .wn-ics-flow-route {
        grid-template-columns:
            minmax(180px, 1fr)
            54px
            minmax(235px, 1.25fr)
            54px
            minmax(180px, 1fr);
        gap: 10px;
    }

    .wn-ics-flow-transfer-packet {
        min-width: 44px;
        padding-inline: 5px;
    }

    .wn-ics-flow-map-row {
        grid-template-columns: minmax(0, 1fr) 31px minmax(0, 1fr);
        gap: 5px;
    }

    .wn-ics-flow-principle {
        padding-right: 20px;
    }

    .wn-ics-flow-principle + .wn-ics-flow-principle {
        padding-left: 20px;
    }

}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   Copy becomes full width. The exchange remains horizontal
   while the source and target panels simplify slightly.
   ========================================================= */

@media (max-width: 950px) {

    .wn-ics-flow {
        padding: 100px 0 105px;
    }

    .wn-ics-flow-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        margin-bottom: 60px;
    }

    .wn-ics-flow-label {
        padding-top: 0;
    }

    .wn-ics-flow-heading h2 {
        max-width: 780px;
    }

    .wn-ics-flow-route {
        grid-template-columns:
            minmax(160px, 0.95fr)
            42px
            minmax(215px, 1.25fr)
            42px
            minmax(160px, 0.95fr);
        gap: 7px;
        padding: 38px 0;
    }

    .wn-ics-flow-source,
    .wn-ics-flow-target {
        border-radius: 10px;
    }

    .wn-ics-flow-system-head {
        padding: 12px;
    }

    .wn-ics-flow-payload {
        padding: 12px;
    }

    .wn-ics-flow-code > div:nth-child(4) {
        display: none;
    }

    .wn-ics-flow-mapper {
        padding: 14px;
    }

    .wn-ics-flow-map-from,
    .wn-ics-flow-map-to {
        padding-inline: 6px;
        font-size: 5px;
    }

    .wn-ics-flow-result-data {
        margin-inline: 12px;
    }

    .wn-ics-flow-transfer-packet {
        min-width: 38px;
    }

    .wn-ics-flow-transfer-packet strong {
        display: none;
    }

    .wn-ics-flow-monitor {
        gap: 9px;
    }

    .wn-ics-flow-monitor-item strong {
        font-size: 6px;
    }

}


/* =========================================================
   MOBILE — ≤ 760px

   The integration becomes a readable vertical journey:

   CRM
    ↓
   DATA PACKET
    ↓
   MAP & TRANSFORM
    ↓
   MAPPED DATA
    ↓
   ERP

   The visual logic is preserved instead of shrinking the
   desktop architecture into an unreadable miniature.
   ========================================================= */

@media (max-width: 760px) {

    .wn-ics-flow {
        padding: 82px 0 86px;
    }

    .wn-ics-flow .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-ics-flow::before {
        top: 420px;
        width: 620px;
        height: 620px;
    }

    .wn-ics-flow::after {
        display: none;
    }

    .wn-ics-flow-head {
        gap: 29px;
        margin-bottom: 46px;
    }

    .wn-ics-flow-label {
        gap: 13px;
    }

    .wn-ics-flow-number {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .wn-ics-flow-kicker {
        font-size: 9px;
    }

    .wn-ics-flow-heading h2 {
        font-size: clamp(39px, 9.5vw, 52px);
        line-height: 1.02;
    }

    .wn-ics-flow-heading > p {
        margin-top: 21px;
        font-size: 14px;
        line-height: 1.68;
    }

    .wn-ics-flow-stage {
        padding: 22px 20px 19px;
        border-radius: 16px;
    }

    .wn-ics-flow-stage::before {
        left: 20px;
        width: 78px;
    }

    .wn-ics-flow-route {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 29px 0 27px;
    }

    .wn-ics-flow-route::before {
        top: 30px;
        bottom: 30px;
        left: 50%;
        width: 1px;
        height: auto;
        background: linear-gradient(
            180deg,
            rgba(61, 125, 211, 0.08),
            rgba(80, 150, 244, 0.34),
            rgba(61, 125, 211, 0.08)
        );
        transform: translateX(-50%);
    }

    .wn-ics-flow-source,
    .wn-ics-flow-target,
    .wn-ics-flow-mapper {
        width: min(100%, 410px);
        margin-inline: auto;
    }

    .wn-ics-flow-system-head {
        padding: 15px;
    }

    .wn-ics-flow-system-head > div span {
        font-size: 7px;
    }

    .wn-ics-flow-system-head > div strong {
        font-size: 12px;
    }

    .wn-ics-flow-payload {
        padding: 15px;
    }

    .wn-ics-flow-payload-title span {
        font-size: 7px;
    }

    .wn-ics-flow-payload-title strong {
        font-size: 11px;
    }

    .wn-ics-flow-code > div:nth-child(4) {
        display: grid;
    }

    .wn-ics-flow-code span,
    .wn-ics-flow-code strong {
        font-size: 7px;
    }

    .wn-ics-flow-system-foot span {
        font-size: 7px;
    }

    .wn-ics-flow-system-foot strong {
        font-size: 8px;
    }

    .wn-ics-flow-transfer {
        flex-direction: column;
        width: 1px;
        height: 58px;
        flex: 0 0 58px;
        margin-inline: auto;
    }

    .wn-ics-flow-transfer-line {
        width: 1px;
        height: 100%;
    }

    .wn-ics-flow-transfer-packet {
        min-width: 58px;
    }

    .wn-ics-flow-transfer-packet span {
        font-size: 6px;
    }

    .wn-ics-flow-transfer-packet strong {
        display: block;
        font-size: 6px;
    }

    .wn-ics-flow-transfer-arrow {
        top: auto;
        right: auto;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }

    .wn-ics-flow-mapper {
        padding: 17px;
    }

    .wn-ics-flow-mapper-head > div span {
        font-size: 7px;
    }

    .wn-ics-flow-mapper-head > div strong {
        font-size: 13px;
    }

    .wn-ics-flow-mapper-live {
        font-size: 6px;
    }

    .wn-ics-flow-map-row {
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
        gap: 8px;
    }

    .wn-ics-flow-map-from,
    .wn-ics-flow-map-to {
        padding: 8px;
        font-size: 7px;
    }

    .wn-ics-flow-transform > div span {
        font-size: 6px;
    }

    .wn-ics-flow-transform > div strong {
        font-size: 7px;
    }

    .wn-ics-flow-result > span {
        font-size: 7px;
    }

    .wn-ics-flow-result > strong {
        font-size: 10px;
    }

    .wn-ics-flow-result-data span,
    .wn-ics-flow-result-data strong {
        font-size: 7px;
    }

    .wn-ics-flow-monitor {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-top: 20px;
    }

    .wn-ics-flow-monitor-item {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        padding: 8px 0;
    }

    .wn-ics-flow-monitor-item span {
        font-size: 7px;
    }

    .wn-ics-flow-monitor-item strong {
        margin-top: 0;
        font-size: 8px;
        white-space: normal;
    }

    .wn-ics-flow-monitor-line {
        width: 1px;
        height: 12px;
        margin-left: 2px;
    }

    .wn-ics-flow-principles {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 31px;
    }

    .wn-ics-flow-principle {
        padding: 22px 0;
    }

    .wn-ics-flow-principle + .wn-ics-flow-principle {
        padding-left: 0;
        border-top: 1px solid rgba(112, 148, 191, 0.13);
        border-left: 0;
    }

    .wn-ics-flow-principle p {
        max-width: 460px;
    }

}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Keep every meaningful field readable while reducing only
   secondary spacing and decoration.
   ========================================================= */

@media (max-width: 520px) {

    .wn-ics-flow .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-ics-flow-heading h2 {
        font-size: clamp(36px, 10vw, 45px);
        letter-spacing: -0.043em;
    }

    .wn-ics-flow-stage {
        padding-inline: 14px;
    }

    .wn-ics-flow-stage::before {
        left: 14px;
    }

    .wn-ics-flow-stage-top {
        align-items: flex-start;
    }

    .wn-ics-flow-stage-top > span {
        max-width: 120px;
    }

    .wn-ics-flow-source,
    .wn-ics-flow-target,
    .wn-ics-flow-mapper {
        width: 100%;
    }

    .wn-ics-flow-map-row {
        grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
        gap: 5px;
    }

    .wn-ics-flow-map-from,
    .wn-ics-flow-map-to {
        padding-inline: 6px;
        font-size: 6px;
    }

    .wn-ics-flow-transform {
        gap: 5px;
    }

    .wn-ics-flow-principle {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 14px;
    }

    .wn-ics-flow-principle > span {
        width: 35px;
        height: 35px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Long illustrative values wrap rather than widening the
   viewport. The mapping itself remains intact.
   ========================================================= */

@media (max-width: 380px) {

    .wn-ics-flow .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-ics-flow-heading h2 {
        font-size: 34px;
    }

    .wn-ics-flow-stage {
        padding-inline: 11px;
    }

    .wn-ics-flow-stage::before {
        left: 11px;
    }

    .wn-ics-flow-code > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }

    .wn-ics-flow-code strong {
        overflow: visible;
        text-align: left;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wn-ics-flow-map-row {
        grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
        gap: 4px;
    }

    .wn-ics-flow-map-from,
    .wn-ics-flow-map-to {
        overflow: visible;
        font-size: 6px;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wn-ics-flow-result-data > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }

    .wn-ics-flow-result-data strong {
        overflow: visible;
        text-align: left;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

}
/* =========================================================
   03 — CONNECT WHAT YOU ALREADY USE

   Light architectural section showing that integration does
   not require every department to use one application.

   Six independent business areas remain distinct, while a
   shared connection fabric allows information to move between
   the systems that need to communicate.

   Desktop: architectural business-system blueprint.
   Mobile: readable connected-system hierarchy.
   ========================================================= */

.wn-ics-architecture {
    position: relative;
    overflow: hidden;
    padding: 118px 0 122px;
    background: #f5f7fa;
    color: #0b1727;
}


.wn-ics-architecture .wn-wrap {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* Quiet blueprint coordinates continue beyond the main map.
   They create architectural depth without adding visible UI. */

.wn-ics-architecture::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    width: 1px;
    height: 100%;
    background: rgba(26, 74, 129, 0.035);
}


.wn-ics-architecture::after {
    content: "";
    position: absolute;
    top: 0;
    right: 11%;
    width: 1px;
    height: 100%;
    background: rgba(26, 74, 129, 0.035);
}


/* =========================================================
   SECTION INTRO
   ========================================================= */

.wn-ics-architecture-head {
    display: grid;
    grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
    gap: clamp(55px, 8vw, 125px);
    align-items: start;
    margin-bottom: 76px;
}


.wn-ics-architecture-label {
    display: flex;
    align-items: center;
    gap: 17px;
    padding-top: 8px;
}


.wn-ics-architecture-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(24, 89, 181, 0.20);
    border-radius: 50%;
    color: #1f6dd8;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
}


.wn-ics-architecture-kicker {
    color: #4e6075;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.12em;
}


.wn-ics-architecture-heading {
    min-width: 0;
}


.wn-ics-architecture-heading h2 {
    max-width: 990px;
    margin: 0;
    color: #0b1727;
    font-size: clamp(44px, 4.55vw, 66px);
    font-weight: 750;
    line-height: 1.01;
    letter-spacing: -0.048em;
}


.wn-ics-architecture-heading h2 span {
    color: #557087;
}


.wn-ics-architecture-heading > p {
    max-width: 720px;
    margin: 27px 0 0;
    color: #607184;
    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   BUSINESS ARCHITECTURE MAP

   This is one large blueprint canvas, not a grid of cards.
   Each zone occupies its own architectural position around
   the central integration fabric.
   ========================================================= */

.wn-ics-architecture-map {
    position: relative;
    overflow: hidden;
    border: 1px solid #d8e2eb;
    border-radius: 18px;
    background:
        linear-gradient(
            rgba(44, 101, 174, 0.032) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(44, 101, 174, 0.032) 1px,
            transparent 1px
        ),
        #ffffff;
    background-size: 42px 42px;
    box-shadow: 0 28px 70px rgba(29, 54, 84, 0.055);
}


.wn-ics-architecture-map::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 30px;
    width: 102px;
    height: 2px;
    background: #3079df;
}


.wn-ics-architecture-map-top {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 26px 18px;
    border-bottom: 1px solid #e3e9ef;
    background: rgba(255, 255, 255, 0.82);
    color: #77889a;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.11em;
}


.wn-ics-architecture-map-state {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #248d65;
    font-size: 7px;
    letter-spacing: 0.08em;
}


.wn-ics-architecture-map-state > span {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #2baa78;
    box-shadow: 0 0 0 4px rgba(43, 170, 120, 0.07);
}


/* =========================================================
   BLUEPRINT CANVAS

   Absolute placement is intentional here. It gives the map
   an architectural composition rather than six equal boxes.
   The layout is rebuilt at the mobile breakpoint.
   ========================================================= */

.wn-ics-architecture-canvas {
    position: relative;
    height: 590px;
    min-width: 0;
}


/* Large coordinate axes make the centre of the architecture
   visible before the eye reaches the individual connections. */

.wn-ics-architecture-canvas::before {
    content: "";
    position: absolute;
    top: 48px;
    bottom: 48px;
    left: 50%;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(40, 101, 181, 0.12) 15%,
        rgba(40, 101, 181, 0.12) 85%,
        transparent
    );
}


.wn-ics-architecture-canvas::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 50px;
    left: 50px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(40, 101, 181, 0.12) 15%,
        rgba(40, 101, 181, 0.12) 85%,
        transparent
    );
}


/* =========================================================
   BUSINESS ZONES
   ========================================================= */

.wn-ics-architecture-zone {
    position: absolute;
    z-index: 4;
    width: 225px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #d8e2eb;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(28, 54, 85, 0.045);
}


.wn-ics-architecture-zone::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #3e83df;
    box-shadow: 0 0 0 1px rgba(48, 112, 199, 0.18);
}


.wn-ics-architecture-zone-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid #e9eef3;
}


.wn-ics-architecture-zone-head > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border: 1px solid #d7e3ef;
    border-radius: 50%;
    color: #3478d4;
    font-size: 7px;
    font-weight: 850;
}


.wn-ics-architecture-zone-head > div {
    min-width: 0;
}


.wn-ics-architecture-zone-head small {
    display: block;
    color: #7a8a9b;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}


.wn-ics-architecture-zone-head strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #17283c;
    font-size: 11px;
    font-weight: 780;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wn-ics-architecture-zone > p {
    min-height: 38px;
    margin: 12px 0;
    color: #697a8c;
    font-size: 9px;
    line-height: 1.55;
}


.wn-ics-architecture-zone-data {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}


.wn-ics-architecture-zone-data span {
    padding: 5px 6px;
    border: 1px solid #e0e7ee;
    border-radius: 4px;
    background: #f7f9fb;
    color: #718296;
    font-size: 5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.06em;
}


/* =========================================================
   DESKTOP ZONE POSITIONS

   The arrangement is deliberately asymmetrical. This makes
   the visual feel like a real architecture diagram instead
   of a six-item feature grid.
   ========================================================= */

.wn-ics-architecture-zone--sales {
    top: 58px;
    left: 6%;
}


.wn-ics-architecture-zone--sales::before {
    right: -5px;
    bottom: 34px;
}


.wn-ics-architecture-zone--commerce {
    top: 54px;
    right: 7%;
}


.wn-ics-architecture-zone--commerce::before {
    bottom: 34px;
    left: -5px;
}


.wn-ics-architecture-zone--operations {
    top: 230px;
    left: 2.5%;
}


.wn-ics-architecture-zone--operations::before {
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
}


.wn-ics-architecture-zone--finance {
    top: 225px;
    right: 2.5%;
}


.wn-ics-architecture-zone--finance::before {
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
}


.wn-ics-architecture-zone--logistics {
    bottom: 48px;
    left: 11%;
}


.wn-ics-architecture-zone--logistics::before {
    top: 31px;
    right: -5px;
}


.wn-ics-architecture-zone--external {
    right: 10%;
    bottom: 43px;
}


.wn-ics-architecture-zone--external::before {
    top: 31px;
    left: -5px;
}


/* =========================================================
   CENTRAL CONNECTION FABRIC

   The centre is intentionally smaller than the Hero hub.
   Its role is architectural: it connects the environment,
   but it does not visually overpower the business systems.
   ========================================================= */

.wn-ics-architecture-fabric {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 240px;
    transform: translate(-50%, -50%);
}


.wn-ics-architecture-fabric-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(42, 108, 196, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}


.wn-ics-architecture-fabric-orbit--outer {
    width: 230px;
    height: 230px;
}


.wn-ics-architecture-fabric-orbit--inner {
    width: 174px;
    height: 174px;
    border-style: dashed;
    border-color: rgba(42, 108, 196, 0.21);
}


.wn-ics-architecture-fabric-core {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    border: 1px solid rgba(45, 112, 202, 0.26);
    border-radius: 50%;
    background: #f8fbff;
    box-shadow:
        0 16px 35px rgba(33, 76, 130, 0.08),
        0 0 0 9px rgba(46, 112, 201, 0.025);
    text-align: center;
    transform: translate(-50%, -50%);
}


.wn-ics-architecture-fabric-core > span {
    color: #3478d4;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}


.wn-ics-architecture-fabric-core > strong {
    max-width: 90px;
    margin-top: 5px;
    color: #17283c;
    font-size: 11px;
    font-weight: 780;
    line-height: 1.25;
}


.wn-ics-architecture-fabric-signal {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
}


.wn-ics-architecture-fabric-signal i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3f83df;
}


.wn-ics-architecture-fabric-signal i:nth-child(2) {
    background: #7ca9e4;
}


.wn-ics-architecture-fabric-signal i:nth-child(3) {
    background: #2baa78;
}


/* =========================================================
   ARCHITECTURE LINKS

   Each line belongs to the blueprint rather than to a UI
   component. They intentionally meet the central fabric at
   different angles.
   ========================================================= */

.wn-ics-architecture-link {
    position: absolute;
    z-index: 2;
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(49, 113, 199, 0.16),
        rgba(49, 113, 199, 0.48)
    );
    transform-origin: left center;
}


.wn-ics-architecture-link--sales {
    top: 188px;
    left: 22%;
    width: 29%;
    transform: rotate(19deg);
}


.wn-ics-architecture-link--commerce {
    top: 188px;
    right: 21%;
    width: 29%;
    background: linear-gradient(
        90deg,
        rgba(49, 113, 199, 0.48),
        rgba(49, 113, 199, 0.16)
    );
    transform: rotate(-19deg);
    transform-origin: right center;
}


.wn-ics-architecture-link--operations {
    top: 50%;
    left: 20%;
    width: 31%;
}


.wn-ics-architecture-link--finance {
    top: 50%;
    right: 20%;
    width: 31%;
    background: linear-gradient(
        90deg,
        rgba(49, 113, 199, 0.48),
        rgba(49, 113, 199, 0.16)
    );
}


.wn-ics-architecture-link--logistics {
    bottom: 177px;
    left: 24%;
    width: 28%;
    transform: rotate(-22deg);
}


.wn-ics-architecture-link--external {
    right: 23%;
    bottom: 175px;
    width: 29%;
    background: linear-gradient(
        90deg,
        rgba(49, 113, 199, 0.48),
        rgba(49, 113, 199, 0.16)
    );
    transform: rotate(22deg);
    transform-origin: right center;
}


/* =========================================================
   DATA PULSES

   Small signals stop the blueprint feeling static while still
   keeping the visual restrained and professional.
   ========================================================= */

.wn-ics-architecture-pulse {
    position: absolute;
    z-index: 3;
    width: 7px;
    height: 7px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #4386e0;
    box-shadow: 0 0 0 1px rgba(48, 112, 199, 0.18);
}


.wn-ics-architecture-pulse--one {
    top: 210px;
    left: 36%;
}


.wn-ics-architecture-pulse--two {
    top: calc(50% - 3px);
    right: 32%;
}


.wn-ics-architecture-pulse--three {
    bottom: 198px;
    left: 39%;
}


.wn-ics-architecture-pulse--four {
    right: 38%;
    bottom: 195px;
}


/* =========================================================
   MAP FOOT

   The architecture resolves into a simple business statement:
   keep → connect → operate.
   ========================================================= */

.wn-ics-architecture-map-foot {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(35px, 0.28fr)
        minmax(0, 1fr)
        minmax(35px, 0.28fr)
        minmax(0, 1fr);
    gap: 17px;
    align-items: center;
    padding: 20px 26px;
    border-top: 1px solid #e2e8ee;
    background: rgba(250, 252, 254, 0.92);
}


.wn-ics-architecture-map-foot > div {
    min-width: 0;
}


.wn-ics-architecture-map-foot > div:nth-of-type(2) {
    text-align: center;
}


.wn-ics-architecture-map-foot > div:nth-of-type(3) {
    text-align: right;
}


.wn-ics-architecture-map-foot > div span {
    display: block;
    color: #3276d5;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}


.wn-ics-architecture-map-foot > div strong {
    display: block;
    margin-top: 4px;
    color: #64768a;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.35;
}


.wn-ics-architecture-map-foot-line {
    width: 100%;
    height: 1px;
    background: #d6e0e9;
}


/* =========================================================
   SUPPORTING PRINCIPLES
   ========================================================= */

.wn-ics-architecture-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 39px;
    border-top: 1px solid #dce3ea;
    border-bottom: 1px solid #dce3ea;
}


.wn-ics-architecture-principle {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 17px;
    min-width: 0;
    padding: 27px 30px 28px 0;
}


.wn-ics-architecture-principle + .wn-ics-architecture-principle {
    padding-left: 30px;
    border-left: 1px solid #dce3ea;
}


.wn-ics-architecture-principle > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #cfdae5;
    border-radius: 50%;
    color: #3276d5;
    font-size: 8px;
    font-weight: 850;
}


.wn-ics-architecture-principle > div {
    min-width: 0;
}


.wn-ics-architecture-principle strong {
    display: block;
    color: #18283b;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.35;
}


.wn-ics-architecture-principle p {
    max-width: 300px;
    margin: 7px 0 0;
    color: #68798a;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   TABLET — ≤ 1100px

   Preserve the architectural map while pulling the outer
   business zones slightly closer to the connection fabric.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-ics-architecture .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-ics-architecture-head {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 50px;
    }

    .wn-ics-architecture-canvas {
        height: 560px;
    }

    .wn-ics-architecture-zone {
        width: 205px;
    }

    .wn-ics-architecture-zone--sales {
        left: 4%;
    }

    .wn-ics-architecture-zone--commerce {
        right: 5%;
    }

    .wn-ics-architecture-zone--operations {
        left: 1.5%;
    }

    .wn-ics-architecture-zone--finance {
        right: 1.5%;
    }

    .wn-ics-architecture-zone--logistics {
        left: 8%;
    }

    .wn-ics-architecture-zone--external {
        right: 7%;
    }

    .wn-ics-architecture-fabric {
        width: 215px;
        height: 215px;
    }

    .wn-ics-architecture-fabric-orbit--outer {
        width: 208px;
        height: 208px;
    }

    .wn-ics-architecture-fabric-orbit--inner {
        width: 158px;
        height: 158px;
    }

    .wn-ics-architecture-principle {
        padding-right: 20px;
    }

    .wn-ics-architecture-principle + .wn-ics-architecture-principle {
        padding-left: 20px;
    }

}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   Intro becomes single-column. The blueprint still remains
   a spatial map, but zones are compacted before the complete
   mobile architecture takes over.
   ========================================================= */

@media (max-width: 950px) {

    .wn-ics-architecture {
        padding: 100px 0 105px;
    }

    .wn-ics-architecture-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        margin-bottom: 60px;
    }

    .wn-ics-architecture-label {
        padding-top: 0;
    }

    .wn-ics-architecture-heading h2 {
        max-width: 820px;
    }

    .wn-ics-architecture-canvas {
        height: 535px;
    }

    .wn-ics-architecture-zone {
        width: 180px;
        padding: 13px;
    }

    .wn-ics-architecture-zone-head {
        gap: 8px;
    }

    .wn-ics-architecture-zone-head > span {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .wn-ics-architecture-zone-head strong {
        font-size: 10px;
    }

    .wn-ics-architecture-zone > p {
        min-height: 34px;
        font-size: 8px;
    }

    .wn-ics-architecture-zone-data span {
        padding: 4px 5px;
    }

    .wn-ics-architecture-fabric {
        width: 190px;
        height: 190px;
    }

    .wn-ics-architecture-fabric-orbit--outer {
        width: 186px;
        height: 186px;
    }

    .wn-ics-architecture-fabric-orbit--inner {
        width: 142px;
        height: 142px;
    }

    .wn-ics-architecture-fabric-core {
        width: 112px;
        height: 112px;
    }

    .wn-ics-architecture-map-foot {
        gap: 11px;
        padding-inline: 20px;
    }

}


/* =========================================================
   MOBILE — ≤ 760px

   The spatial desktop blueprint is rebuilt as a deliberate
   vertical architecture.

   Top: systems already used by the business.
   Middle: connection fabric.
   Bottom: connected business areas.

   No desktop diagram is simply scaled down.
   ========================================================= */

@media (max-width: 760px) {

    .wn-ics-architecture {
        padding: 82px 0 86px;
    }

    .wn-ics-architecture .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-ics-architecture::before,
    .wn-ics-architecture::after {
        display: none;
    }

    .wn-ics-architecture-head {
        gap: 29px;
        margin-bottom: 46px;
    }

    .wn-ics-architecture-label {
        gap: 13px;
    }

    .wn-ics-architecture-number {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .wn-ics-architecture-kicker {
        font-size: 9px;
    }

    .wn-ics-architecture-heading h2 {
        font-size: clamp(38px, 9.3vw, 51px);
        line-height: 1.02;
    }

    .wn-ics-architecture-heading > p {
        margin-top: 21px;
        font-size: 14px;
        line-height: 1.68;
    }

    .wn-ics-architecture-map {
        border-radius: 16px;
        background-size: 32px 32px;
    }

    .wn-ics-architecture-map::before {
        left: 20px;
        width: 78px;
    }

    .wn-ics-architecture-map-top {
        padding: 19px 20px 17px;
    }

    .wn-ics-architecture-canvas {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        height: auto;
        padding: 28px 20px 30px;
    }

    .wn-ics-architecture-canvas::before {
        top: 25px;
        bottom: 25px;
        left: 50%;
        height: auto;
    }

    .wn-ics-architecture-canvas::after {
        top: 50%;
        right: 20px;
        left: 20px;
    }

    .wn-ics-architecture-zone {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        min-width: 0;
        padding: 14px;
    }

    .wn-ics-architecture-zone::before {
        display: none;
    }

    .wn-ics-architecture-zone-head small {
        font-size: 7px;
    }

    .wn-ics-architecture-zone-head strong {
        font-size: 11px;
    }

    .wn-ics-architecture-zone > p {
        min-height: 42px;
        font-size: 9px;
    }

    .wn-ics-architecture-zone-data span {
        font-size: 6px;
    }

    /* The connection fabric spans both columns and creates a
       clear architectural break between system groups. */

    .wn-ics-architecture-fabric {
        position: relative;
        top: auto;
        left: auto;
        grid-column: 1 / -1;
        grid-row: 3;
        width: 180px;
        height: 180px;
        margin: 18px auto;
        transform: none;
    }

    .wn-ics-architecture-fabric-orbit--outer {
        width: 176px;
        height: 176px;
    }

    .wn-ics-architecture-fabric-orbit--inner {
        width: 134px;
        height: 134px;
    }

    .wn-ics-architecture-fabric-core {
        width: 108px;
        height: 108px;
    }

    /* First three systems occupy the architecture above the
       fabric. Remaining systems continue below it. */

    .wn-ics-architecture-zone--sales {
        grid-column: 1;
        grid-row: 1;
    }

    .wn-ics-architecture-zone--commerce {
        grid-column: 2;
        grid-row: 1;
    }

    .wn-ics-architecture-zone--operations {
        grid-column: 1 / -1;
        grid-row: 2;
        width: min(100%, 300px);
        justify-self: center;
    }

    .wn-ics-architecture-zone--finance {
        grid-column: 1;
        grid-row: 4;
    }

    .wn-ics-architecture-zone--logistics {
        grid-column: 2;
        grid-row: 4;
    }

    .wn-ics-architecture-zone--external {
        grid-column: 1 / -1;
        grid-row: 5;
        width: min(100%, 300px);
        justify-self: center;
    }

    /* Desktop diagonal connection geometry is replaced by a
       restrained vertical spine on mobile. */

    .wn-ics-architecture-link,
    .wn-ics-architecture-pulse {
        display: none;
    }

    .wn-ics-architecture-map-foot {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 19px 20px;
    }

    .wn-ics-architecture-map-foot > div,
    .wn-ics-architecture-map-foot > div:nth-of-type(2),
    .wn-ics-architecture-map-foot > div:nth-of-type(3) {
        text-align: left;
    }

    .wn-ics-architecture-map-foot > div span {
        font-size: 7px;
    }

    .wn-ics-architecture-map-foot > div strong {
        font-size: 9px;
    }

    .wn-ics-architecture-map-foot-line {
        width: 1px;
        height: 20px;
        margin: 7px 0 7px 3px;
        background: #cddae6;
    }

    .wn-ics-architecture-principles {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 31px;
    }

    .wn-ics-architecture-principle {
        padding: 22px 0;
    }

    .wn-ics-architecture-principle + .wn-ics-architecture-principle {
        padding-left: 0;
        border-top: 1px solid #dce3ea;
        border-left: 0;
    }

    .wn-ics-architecture-principle p {
        max-width: 460px;
    }

}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Two-column business zones remain readable where possible.
   Supporting text and data tags retain useful size rather
   than being compressed into desktop-scale labels.
   ========================================================= */

@media (max-width: 520px) {

    .wn-ics-architecture .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-ics-architecture-heading h2 {
        font-size: clamp(35px, 9.8vw, 44px);
        letter-spacing: -0.043em;
    }

    .wn-ics-architecture-map::before {
        left: 14px;
    }

    .wn-ics-architecture-map-top {
        align-items: flex-start;
        padding-inline: 14px;
    }

    .wn-ics-architecture-map-top > span {
        max-width: 125px;
    }

    .wn-ics-architecture-canvas {
        gap: 9px;
        padding-inline: 14px;
    }

    .wn-ics-architecture-zone {
        padding: 12px;
    }

    .wn-ics-architecture-zone-head {
        gap: 7px;
    }

    .wn-ics-architecture-zone-head > span {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
    }

    .wn-ics-architecture-zone-head strong {
        font-size: 10px;
    }

    .wn-ics-architecture-zone > p {
        min-height: 0;
        font-size: 8px;
    }

    .wn-ics-architecture-zone-data {
        gap: 4px;
    }

    .wn-ics-architecture-zone-data span {
        padding: 4px;
        font-size: 5px;
    }

    .wn-ics-architecture-map-foot {
        padding-inline: 14px;
    }

    .wn-ics-architecture-principle {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 14px;
    }

    .wn-ics-architecture-principle > span {
        width: 35px;
        height: 35px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   At the smallest widths the business zones become one
   column. Architecture remains understandable and no text
   is forced into miniature cards.
   ========================================================= */

@media (max-width: 380px) {

    .wn-ics-architecture .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-ics-architecture-heading h2 {
        font-size: 33px;
    }

    .wn-ics-architecture-canvas {
        grid-template-columns: minmax(0, 1fr);
    }

    .wn-ics-architecture-zone--sales,
    .wn-ics-architecture-zone--commerce,
    .wn-ics-architecture-zone--operations,
    .wn-ics-architecture-zone--finance,
    .wn-ics-architecture-zone--logistics,
    .wn-ics-architecture-zone--external,
    .wn-ics-architecture-fabric {
        grid-column: 1;
        width: 100%;
        max-width: none;
    }

    .wn-ics-architecture-zone--sales {
        grid-row: 1;
    }

    .wn-ics-architecture-zone--commerce {
        grid-row: 2;
    }

    .wn-ics-architecture-zone--operations {
        grid-row: 3;
    }

    .wn-ics-architecture-fabric {
        grid-row: 4;
        width: 170px;
        height: 170px;
    }

    .wn-ics-architecture-zone--finance {
        grid-row: 5;
    }

    .wn-ics-architecture-zone--logistics {
        grid-row: 6;
    }

    .wn-ics-architecture-zone--external {
        grid-row: 7;
    }

    .wn-ics-architecture-zone > p {
        font-size: 9px;
    }

    .wn-ics-architecture-zone-data span {
        font-size: 6px;
    }

}
/* =========================================================
   04 — RELIABILITY & RECOVERY

   Dark technical section showing how a reliable integration
   behaves when a connected system temporarily fails.

   Story:
   normal events → interrupted event → preserve → retry →
   recovered event → processing continues.

   This is deliberately an event journey, not another
   dashboard, integration hub or architecture map.
   ========================================================= */

.wn-ics-reliability {
    position: relative;
    overflow: hidden;
    padding: 118px 0 122px;
    background:
        radial-gradient(
            circle at 58% 47%,
            rgba(38, 103, 194, 0.10),
            transparent 32%
        ),
        #07111f;
    color: #ffffff;
}

.wn-ics-reliability .wn-wrap {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}

/* Quiet technical coordinates behind the scene. */

.wn-ics-reliability::before {
    content: "";
    position: absolute;
    top: 280px;
    left: 50%;
    width: 820px;
    height: 820px;
    border: 1px solid rgba(74, 137, 219, 0.04);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.wn-ics-reliability::after {
    content: "";
    position: absolute;
    top: 390px;
    left: 50%;
    width: 590px;
    height: 590px;
    border: 1px solid rgba(74, 137, 219, 0.03);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}


/* =========================================================
   SECTION INTRO
   ========================================================= */

.wn-ics-reliability-head {
    display: grid;
    grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
    gap: clamp(55px, 8vw, 125px);
    align-items: start;
    margin-bottom: 76px;
}

.wn-ics-reliability-label {
    display: flex;
    align-items: center;
    gap: 17px;
    padding-top: 8px;
}

.wn-ics-reliability-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(76, 145, 241, 0.26);
    border-radius: 50%;
    color: #64a3fa;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
}

.wn-ics-reliability-kicker {
    color: #8ba0b9;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.12em;
}

.wn-ics-reliability-heading {
    min-width: 0;
}

.wn-ics-reliability-heading h2 {
    max-width: 980px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4.55vw, 66px);
    font-weight: 750;
    line-height: 1.01;
    letter-spacing: -0.048em;
}

.wn-ics-reliability-heading h2 span {
    color: #63a2fb;
}

.wn-ics-reliability-heading > p {
    max-width: 730px;
    margin: 27px 0 0;
    color: #91a3b7;
    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   RELIABILITY STAGE

   One continuous technical canvas. The failure path happens
   inside the same scene so the user can follow one event from
   interruption through recovery.
   ========================================================= */

.wn-ics-reliability-stage {
    position: relative;
    overflow: hidden;
    padding: 23px 26px 25px;
    border: 1px solid rgba(78, 137, 215, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(11, 29, 51, 0.98),
            rgba(7, 21, 38, 0.98)
        );
    box-shadow: 0 34px 72px rgba(0, 0, 0, 0.20);
}

.wn-ics-reliability-stage::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 30px;
    width: 100px;
    height: 2px;
    background: #3d8cff;
}

.wn-ics-reliability-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(111, 150, 197, 0.12);
    color: #71859d;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.11em;
}

.wn-ics-reliability-stage-state {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #54c795;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.wn-ics-reliability-stage-state i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #48c78f;
    box-shadow: 0 0 0 4px rgba(72, 199, 143, 0.07);
}


/* =========================================================
   EVENT SCENE
   ========================================================= */

.wn-ics-reliability-scene {
    position: relative;
    padding: 38px 0 28px;
}


/* =========================================================
   NORMAL EVENT FLOW
   ========================================================= */

.wn-ics-reliability-main {
    position: relative;
    z-index: 3;
}

.wn-ics-reliability-main-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.wn-ics-reliability-main-label span {
    color: #5599f1;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}

.wn-ics-reliability-main-label strong {
    color: #72879f;
    font-size: 8px;
    font-weight: 700;
}

.wn-ics-reliability-track {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(22px, 0.18fr)
        minmax(0, 1fr)
        minmax(22px, 0.18fr)
        minmax(0, 1fr)
        minmax(22px, 0.18fr)
        minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.wn-ics-reliability-track-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(66, 134, 224, 0.22),
        rgba(66, 134, 224, 0.58)
    );
}

.wn-ics-reliability-track-line--muted {
    background: repeating-linear-gradient(
        90deg,
        rgba(96, 119, 145, 0.30) 0,
        rgba(96, 119, 145, 0.30) 5px,
        transparent 5px,
        transparent 9px
    );
}


/* =========================================================
   EVENT CARDS

   Compact nodes on a process rail rather than large UI cards.
   Status is communicated through restrained accent changes.
   ========================================================= */

.wn-ics-reliability-event {
    position: relative;
    min-width: 0;
    min-height: 124px;
    padding: 15px;
    border: 1px solid rgba(75, 130, 197, 0.18);
    border-radius: 10px;
    background: rgba(8, 26, 46, 0.92);
}

.wn-ics-reliability-event--failed {
    border-color: rgba(224, 151, 67, 0.32);
    background:
        linear-gradient(
            145deg,
            rgba(42, 31, 24, 0.72),
            rgba(10, 27, 46, 0.96)
        );
}

.wn-ics-reliability-event--waiting {
    opacity: 0.72;
}

.wn-ics-reliability-event-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin-bottom: 14px;
    border: 1px solid rgba(75, 143, 235, 0.22);
    border-radius: 50%;
    color: #5899f0;
    font-size: 7px;
    font-weight: 850;
}

.wn-ics-reliability-event--failed .wn-ics-reliability-event-index {
    border-color: rgba(221, 148, 63, 0.28);
    color: #e3a154;
}

.wn-ics-reliability-event-body {
    min-width: 0;
}

.wn-ics-reliability-event-body > span {
    display: block;
    color: #687f99;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-reliability-event-body > strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #e5edf6;
    font-size: 11px;
    font-weight: 780;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-ics-reliability-event-body > small {
    display: block;
    margin-top: 5px;
    color: #71859c;
    font-size: 7px;
    font-weight: 650;
    line-height: 1.35;
}

.wn-ics-reliability-event-status {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #4fc18e;
    font-size: 5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.06em;
}

.wn-ics-reliability-event-status > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(70, 193, 140, 0.18);
    border-radius: 50%;
    background: rgba(70, 193, 140, 0.06);
    font-size: 7px;
}

.wn-ics-reliability-event--failed .wn-ics-reliability-event-status {
    color: #e4a04e;
}

.wn-ics-reliability-event--failed .wn-ics-reliability-event-status > span {
    border-color: rgba(228, 160, 78, 0.22);
    background: rgba(228, 160, 78, 0.07);
}

.wn-ics-reliability-event--waiting .wn-ics-reliability-event-status {
    color: #7c8da1;
}


/* =========================================================
   FAILURE BRANCH

   The interrupted event physically drops below the normal
   event rail. This is the central storytelling move of 04.
   ========================================================= */

.wn-ics-reliability-branch {
    position: relative;
    width: min(72%, 830px);
    margin: 0 7% 0 auto;
    padding-top: 67px;
}

.wn-ics-reliability-branch-line {
    position: absolute;
    top: 0;
    left: 42%;
    width: 1px;
    height: 68px;
    background: linear-gradient(
        180deg,
        rgba(225, 153, 70, 0.68),
        rgba(225, 153, 70, 0.18)
    );
}

.wn-ics-reliability-branch-line::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 2px solid #0a1b30;
    border-radius: 50%;
    background: #e3a052;
    transform: translateX(-50%);
}

.wn-ics-reliability-branch-line > span {
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid #d89a50;
    border-bottom: 1px solid #d89a50;
    transform: translateX(-50%) rotate(45deg);
}


/* =========================================================
   RECOVERY ENGINE
   ========================================================= */

.wn-ics-reliability-recovery {
    position: relative;
    z-index: 3;
    padding: 20px;
    border: 1px solid rgba(224, 151, 67, 0.23);
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            rgba(29, 31, 36, 0.96),
            rgba(9, 26, 46, 0.98)
        );
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.16),
        0 0 35px rgba(220, 147, 62, 0.025);
}

.wn-ics-reliability-recovery::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    width: 74px;
    height: 2px;
    background: #dc9849;
}

.wn-ics-reliability-recovery-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(128, 144, 164, 0.13);
}

.wn-ics-reliability-recovery-head > div:first-child {
    min-width: 0;
}

.wn-ics-reliability-recovery-head span {
    display: block;
    color: #c88c4b;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}

.wn-ics-reliability-recovery-head strong {
    display: block;
    margin-top: 4px;
    color: #edf2f7;
    font-size: 12px;
    font-weight: 780;
    line-height: 1.3;
}

.wn-ics-reliability-recovery-state {
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 1px solid rgba(226, 153, 70, 0.22);
    border-radius: 4px;
    background: rgba(226, 153, 70, 0.06);
    color: #e3a052;
    font-size: 6px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.07em;
}


/* Failure explanation inside the recovery path. */

.wn-ics-reliability-recovery-event {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(128, 144, 164, 0.13);
}

.wn-ics-reliability-recovery-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(226, 153, 70, 0.25);
    border-radius: 50%;
    background: rgba(226, 153, 70, 0.07);
    color: #e4a04e;
    font-size: 13px;
    font-weight: 850;
}

.wn-ics-reliability-recovery-event > div:last-child {
    min-width: 0;
}

.wn-ics-reliability-recovery-event span {
    display: block;
    color: #c88c4b;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-reliability-recovery-event strong {
    display: block;
    margin-top: 4px;
    color: #e8eef5;
    font-size: 11px;
    font-weight: 760;
    line-height: 1.35;
}

.wn-ics-reliability-recovery-event p {
    max-width: 500px;
    margin: 7px 0 0;
    color: #8092a7;
    font-size: 9px;
    line-height: 1.55;
}


/* =========================================================
   DETECT → PRESERVE → RETRY
   ========================================================= */

.wn-ics-reliability-recovery-steps {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(25px, 0.28fr)
        minmax(0, 1fr)
        minmax(25px, 0.28fr)
        minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 20px 0;
}

.wn-ics-reliability-recovery-step {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) 17px;
    gap: 9px;
    align-items: center;
    min-width: 0;
}

.wn-ics-reliability-recovery-step > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(74, 138, 223, 0.22);
    border-radius: 50%;
    color: #5b9bf1;
    font-size: 6px;
    font-weight: 850;
}

.wn-ics-reliability-recovery-step > div {
    min-width: 0;
}

.wn-ics-reliability-recovery-step small {
    display: block;
    color: #657d97;
    font-size: 5px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-reliability-recovery-step strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #b9c7d6;
    font-size: 7px;
    font-weight: 720;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-ics-reliability-recovery-step > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(67, 191, 139, 0.19);
    border-radius: 50%;
    background: rgba(67, 191, 139, 0.05);
    color: #4dc08e;
    font-size: 6px;
    font-style: normal;
}

.wn-ics-reliability-recovery-step > i.wn-ics-reliability-recovery-step-live {
    position: relative;
    border-color: rgba(226, 153, 70, 0.25);
    background: rgba(226, 153, 70, 0.07);
}

.wn-ics-reliability-recovery-step-live::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e2a054;
}

.wn-ics-reliability-recovery-step-line {
    width: 100%;
    height: 1px;
    background: rgba(72, 130, 207, 0.23);
}


/* =========================================================
   RETRY DETAIL
   ========================================================= */

.wn-ics-reliability-retry {
    padding: 14px;
    border: 1px solid rgba(81, 126, 182, 0.13);
    border-radius: 8px;
    background: rgba(5, 18, 33, 0.35);
}

.wn-ics-reliability-retry-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.wn-ics-reliability-retry-meta > div {
    min-width: 0;
}

.wn-ics-reliability-retry-meta span {
    display: block;
    color: #647b94;
    font-size: 5px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-reliability-retry-meta strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #aebed0;
    font-size: 7px;
    font-weight: 720;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-ics-reliability-retry-progress {
    height: 3px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(100, 128, 161, 0.12);
}

.wn-ics-reliability-retry-progress span {
    display: block;
    width: 68%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #d38d45,
        #4c93ee
    );
}


/* =========================================================
   RECOVERED RETURN PATH
   ========================================================= */

.wn-ics-reliability-return {
    display: grid;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    gap: 13px;
    align-items: center;
    padding: 23px 0 18px;
}

.wn-ics-reliability-return-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(64, 135, 224, 0.10),
        rgba(64, 135, 224, 0.45)
    );
}

.wn-ics-reliability-return-line:last-child {
    background: linear-gradient(
        90deg,
        rgba(64, 135, 224, 0.45),
        rgba(64, 135, 224, 0.10)
    );
}

.wn-ics-reliability-return-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(67, 191, 139, 0.17);
    border-radius: 7px;
    background: rgba(67, 191, 139, 0.045);
}

.wn-ics-reliability-return-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 1px solid rgba(67, 191, 139, 0.20);
    border-radius: 50%;
    color: #4cc08d;
    font-size: 8px;
    font-weight: 850;
}

.wn-ics-reliability-return-result small {
    display: block;
    color: #4fc18e;
    font-size: 5px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-reliability-return-result strong {
    display: block;
    margin-top: 3px;
    color: #b9c9d8;
    font-size: 8px;
    font-weight: 740;
    line-height: 1.25;
}


/* =========================================================
   FLOW RESTORED

   Final state closes the recovery branch and returns the eye
   to normal processing.
   ========================================================= */

.wn-ics-reliability-outcome {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    width: min(58%, 650px);
    margin: 0 0 0 auto;
    padding: 15px 17px;
    border: 1px solid rgba(65, 192, 139, 0.18);
    border-radius: 10px;
    background:
        linear-gradient(
            90deg,
            rgba(65, 192, 139, 0.055),
            rgba(8, 26, 46, 0.75)
        );
}

.wn-ics-reliability-outcome-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(65, 192, 139, 0.22);
    border-radius: 50%;
    background: rgba(65, 192, 139, 0.06);
    color: #4dc18e;
    font-size: 12px;
    font-weight: 850;
}

.wn-ics-reliability-outcome-copy {
    min-width: 0;
}

.wn-ics-reliability-outcome-copy > span {
    display: block;
    color: #4fc18e;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-reliability-outcome-copy > strong {
    display: block;
    margin-top: 3px;
    color: #e1eaf3;
    font-size: 11px;
    font-weight: 760;
    line-height: 1.3;
}

.wn-ics-reliability-outcome-copy > p {
    margin: 5px 0 0;
    color: #778ca4;
    font-size: 8px;
    line-height: 1.5;
}

.wn-ics-reliability-outcome-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4fc18e;
    font-size: 6px;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.wn-ics-reliability-outcome-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4bc28e;
}


/* =========================================================
   EVENT HISTORY

   This is not a generic monitoring dashboard. It is the
   chronological record of the same failed event shown above.
   ========================================================= */

.wn-ics-reliability-log {
    display: grid;
    grid-template-columns:
        minmax(115px, 0.65fr)
        repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 5px;
    border-top: 1px solid rgba(111, 150, 197, 0.12);
    border-bottom: 1px solid rgba(111, 150, 197, 0.12);
}

.wn-ics-reliability-log-title,
.wn-ics-reliability-log-entry {
    min-width: 0;
    padding: 16px 14px;
}

.wn-ics-reliability-log-title {
    padding-left: 0;
}

.wn-ics-reliability-log-entry {
    display: grid;
    grid-template-columns: auto 7px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    border-left: 1px solid rgba(111, 150, 197, 0.10);
}

.wn-ics-reliability-log-title > span {
    display: block;
    color: #617a95;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-reliability-log-title > strong {
    display: block;
    margin-top: 4px;
    color: #9dafc1;
    font-size: 8px;
    font-weight: 750;
}

.wn-ics-reliability-log-entry > span {
    color: #568fd8;
    font-size: 6px;
    font-weight: 750;
    white-space: nowrap;
}

.wn-ics-reliability-log-entry > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4b8de3;
}

.wn-ics-reliability-log-entry > i.wn-ics-reliability-log-warning {
    background: #dfa052;
}

.wn-ics-reliability-log-entry--complete > i {
    background: #49bd8a;
}

.wn-ics-reliability-log-entry > div {
    min-width: 0;
}

.wn-ics-reliability-log-entry small {
    display: block;
    color: #637b95;
    font-size: 5px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.06em;
}

.wn-ics-reliability-log-entry strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #8fa2b6;
    font-size: 6px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-ics-reliability-log-entry--complete strong {
    color: #74ad94;
}


/* =========================================================
   RELIABILITY PRINCIPLES
   ========================================================= */

.wn-ics-reliability-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 39px;
    border-top: 1px solid rgba(112, 148, 191, 0.13);
    border-bottom: 1px solid rgba(112, 148, 191, 0.13);
}

.wn-ics-reliability-principle {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 17px;
    min-width: 0;
    padding: 27px 30px 28px 0;
}

.wn-ics-reliability-principle + .wn-ics-reliability-principle {
    padding-left: 30px;
    border-left: 1px solid rgba(112, 148, 191, 0.13);
}

.wn-ics-reliability-principle > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(77, 143, 232, 0.22);
    border-radius: 50%;
    color: #5c9cf3;
    font-size: 8px;
    font-weight: 850;
}

.wn-ics-reliability-principle > div {
    min-width: 0;
}

.wn-ics-reliability-principle strong {
    display: block;
    color: #dce6f1;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.35;
}

.wn-ics-reliability-principle p {
    max-width: 300px;
    margin: 7px 0 0;
    color: #7e91a8;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   TABLET — ≤ 1100px

   Keep the complete event story horizontal while reducing
   secondary spacing. Nothing important becomes miniature.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-ics-reliability .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-ics-reliability-head {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 50px;
    }

    .wn-ics-reliability-track {
        gap: 7px;
    }

    .wn-ics-reliability-event {
        padding: 12px;
    }

    .wn-ics-reliability-event-status {
        top: 11px;
        right: 11px;
    }

    .wn-ics-reliability-branch {
        width: 77%;
        margin-right: 4%;
    }

    .wn-ics-reliability-recovery-step {
        grid-template-columns: 25px minmax(0, 1fr) 16px;
        gap: 6px;
    }

    .wn-ics-reliability-log {
        grid-template-columns:
            minmax(100px, 0.6fr)
            repeat(5, minmax(0, 1fr));
    }

    .wn-ics-reliability-log-title,
    .wn-ics-reliability-log-entry {
        padding-inline: 9px;
    }

    .wn-ics-reliability-log-title {
        padding-left: 0;
    }

    .wn-ics-reliability-principle {
        padding-right: 20px;
    }

    .wn-ics-reliability-principle + .wn-ics-reliability-principle {
        padding-left: 20px;
    }
}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   Intro becomes one column. Event rail still works as a
   horizontal process before the mobile reconstruction.
   ========================================================= */

@media (max-width: 950px) {

    .wn-ics-reliability {
        padding: 100px 0 105px;
    }

    .wn-ics-reliability-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        margin-bottom: 60px;
    }

    .wn-ics-reliability-label {
        padding-top: 0;
    }

    .wn-ics-reliability-heading h2 {
        max-width: 850px;
    }

    .wn-ics-reliability-event {
        min-height: 116px;
        padding: 11px;
    }

    .wn-ics-reliability-event-index {
        width: 24px;
        height: 24px;
        margin-bottom: 12px;
    }

    .wn-ics-reliability-event-body > strong {
        font-size: 9px;
    }

    .wn-ics-reliability-event-status {
        font-size: 4px;
    }

    .wn-ics-reliability-event-status > span {
        width: 14px;
        height: 14px;
    }

    .wn-ics-reliability-branch {
        width: 82%;
        margin-right: 2%;
    }

    .wn-ics-reliability-outcome {
        width: 65%;
    }

    .wn-ics-reliability-log-entry {
        grid-template-columns: 6px minmax(0, 1fr);
    }

    .wn-ics-reliability-log-entry > span {
        grid-column: 1 / -1;
        font-size: 5px;
    }
}


/* =========================================================
   MOBILE — ≤ 760px

   Desktop event rail is deliberately rebuilt.

   Normal events become a vertical timeline.
   The failed event flows directly into the recovery engine.
   The recovery engine then resolves into FLOW RESTORED.

   We preserve the story instead of shrinking the desktop
   process into unreadable cards.
   ========================================================= */

@media (max-width: 760px) {

    .wn-ics-reliability {
        padding: 82px 0 86px;
    }

    .wn-ics-reliability .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-ics-reliability::before {
        top: 450px;
        width: 620px;
        height: 620px;
    }

    .wn-ics-reliability::after {
        display: none;
    }

    .wn-ics-reliability-head {
        gap: 29px;
        margin-bottom: 46px;
    }

    .wn-ics-reliability-label {
        gap: 13px;
    }

    .wn-ics-reliability-number {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .wn-ics-reliability-kicker {
        font-size: 9px;
    }

    .wn-ics-reliability-heading h2 {
        font-size: clamp(38px, 9.3vw, 51px);
        line-height: 1.02;
    }

    .wn-ics-reliability-heading > p {
        margin-top: 21px;
        font-size: 14px;
        line-height: 1.68;
    }

    .wn-ics-reliability-stage {
        padding: 22px 20px 21px;
        border-radius: 16px;
    }

    .wn-ics-reliability-stage::before {
        left: 20px;
        width: 78px;
    }

    .wn-ics-reliability-scene {
        padding: 30px 0 24px;
    }

    .wn-ics-reliability-main-label {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .wn-ics-reliability-track {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(100%, 430px);
        margin-inline: auto;
    }

    .wn-ics-reliability-track::before {
        content: "";
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 21px;
        width: 1px;
        background: rgba(68, 137, 228, 0.26);
    }

    .wn-ics-reliability-event {
        min-height: 0;
        padding: 15px 15px 15px 55px;
    }

    .wn-ics-reliability-event-index {
        position: absolute;
        top: 15px;
        left: 9px;
        z-index: 2;
        width: 26px;
        height: 26px;
        margin: 0;
        background: #0a1b30;
    }

    .wn-ics-reliability-event-body > span {
        font-size: 7px;
    }

    .wn-ics-reliability-event-body > strong {
        font-size: 11px;
    }

    .wn-ics-reliability-event-body > small {
        font-size: 8px;
    }

    .wn-ics-reliability-event-status {
        top: 15px;
        right: 15px;
        font-size: 6px;
    }

    .wn-ics-reliability-event-status > span {
        width: 17px;
        height: 17px;
    }

    .wn-ics-reliability-track-line {
        width: 1px;
        height: 28px;
        margin-left: 21px;
    }

    .wn-ics-reliability-branch {
        width: min(100%, 430px);
        margin: 0 auto;
        padding-top: 54px;
    }

    .wn-ics-reliability-branch-line {
        left: 21px;
        height: 55px;
    }

    .wn-ics-reliability-recovery {
        padding: 17px;
    }

    .wn-ics-reliability-recovery-head span {
        font-size: 7px;
    }

    .wn-ics-reliability-recovery-head strong {
        font-size: 13px;
    }

    .wn-ics-reliability-recovery-state {
        font-size: 6px;
    }

    .wn-ics-reliability-recovery-event span {
        font-size: 7px;
    }

    .wn-ics-reliability-recovery-event strong {
        font-size: 11px;
    }

    .wn-ics-reliability-recovery-event p {
        font-size: 9px;
    }

    .wn-ics-reliability-recovery-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .wn-ics-reliability-recovery-step {
        grid-template-columns: 30px minmax(0, 1fr) 18px;
        gap: 10px;
        padding: 8px 0;
    }

    .wn-ics-reliability-recovery-step > span {
        width: 30px;
        height: 30px;
    }

    .wn-ics-reliability-recovery-step small {
        font-size: 6px;
    }

    .wn-ics-reliability-recovery-step strong {
        overflow: visible;
        font-size: 8px;
        text-overflow: clip;
        white-space: normal;
    }

    .wn-ics-reliability-recovery-step-line {
        width: 1px;
        height: 14px;
        margin-left: 15px;
    }

    .wn-ics-reliability-retry-meta span {
        font-size: 6px;
    }

    .wn-ics-reliability-retry-meta strong {
        font-size: 7px;
    }

    .wn-ics-reliability-return {
        grid-template-columns: 1fr;
        gap: 10px;
        justify-items: center;
        padding: 20px 0 16px;
    }

    .wn-ics-reliability-return-line {
        width: 1px;
        height: 18px;
    }

    .wn-ics-reliability-return-result {
        width: min(100%, 240px);
        justify-content: center;
    }

    .wn-ics-reliability-outcome {
        grid-template-columns: 42px minmax(0, 1fr);
        width: min(100%, 430px);
        margin: 0 auto;
    }

    .wn-ics-reliability-outcome-status {
        grid-column: 2;
    }

    /* Event history becomes a readable chronological list. */

    .wn-ics-reliability-log {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 14px;
    }

    .wn-ics-reliability-log-title,
    .wn-ics-reliability-log-entry {
        padding: 13px 0;
    }

    .wn-ics-reliability-log-entry {
        grid-template-columns: 64px 7px minmax(0, 1fr);
        gap: 10px;
        border-top: 1px solid rgba(111, 150, 197, 0.09);
        border-left: 0;
    }

    .wn-ics-reliability-log-entry > span {
        grid-column: auto;
        font-size: 7px;
    }

    .wn-ics-reliability-log-entry small {
        font-size: 6px;
    }

    .wn-ics-reliability-log-entry strong {
        overflow: visible;
        font-size: 8px;
        text-overflow: clip;
        white-space: normal;
    }

    .wn-ics-reliability-principles {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 31px;
    }

    .wn-ics-reliability-principle {
        padding: 22px 0;
    }

    .wn-ics-reliability-principle + .wn-ics-reliability-principle {
        padding-left: 0;
        border-top: 1px solid rgba(112, 148, 191, 0.13);
        border-left: 0;
    }

    .wn-ics-reliability-principle p {
        max-width: 460px;
    }
}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Reduce decoration and spacing, not meaningful information.
   Long values are allowed to wrap rather than widening the
   viewport.
   ========================================================= */

@media (max-width: 520px) {

    .wn-ics-reliability .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-ics-reliability-heading h2 {
        font-size: clamp(35px, 9.8vw, 44px);
        letter-spacing: -0.043em;
    }

    .wn-ics-reliability-stage {
        padding-inline: 14px;
    }

    .wn-ics-reliability-stage::before {
        left: 14px;
    }

    .wn-ics-reliability-stage-top {
        align-items: flex-start;
    }

    .wn-ics-reliability-stage-top > span {
        max-width: 125px;
    }

    .wn-ics-reliability-event {
        padding-right: 12px;
    }

    .wn-ics-reliability-event-status {
        position: static;
        width: fit-content;
        margin-top: 10px;
    }

    .wn-ics-reliability-recovery-head {
        align-items: flex-start;
    }

    .wn-ics-reliability-recovery-event {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 11px;
    }

    .wn-ics-reliability-recovery-icon {
        width: 36px;
        height: 36px;
    }

    .wn-ics-reliability-retry-meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .wn-ics-reliability-retry-meta strong {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .wn-ics-reliability-outcome {
        padding-inline: 14px;
    }

    .wn-ics-reliability-principle {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 14px;
    }

    .wn-ics-reliability-principle > span {
        width: 35px;
        height: 35px;
    }
}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Final protection against narrow viewport overflow.
   Everything remains normal-flow and readable.
   ========================================================= */

@media (max-width: 380px) {

    .wn-ics-reliability .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-ics-reliability-heading h2 {
        font-size: 33px;
    }

    .wn-ics-reliability-stage {
        padding-inline: 11px;
    }

    .wn-ics-reliability-stage::before {
        left: 11px;
    }

    .wn-ics-reliability-recovery {
        padding: 14px;
    }

    .wn-ics-reliability-recovery-head {
        flex-direction: column;
    }

    .wn-ics-reliability-outcome {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
    }

    .wn-ics-reliability-outcome-icon {
        width: 36px;
        height: 36px;
    }

    .wn-ics-reliability-outcome-copy > p {
        font-size: 8px;
    }

    .wn-ics-reliability-log-entry {
        grid-template-columns: 58px 6px minmax(0, 1fr);
        gap: 7px;
    }
}
/* =========================================================
   05 — VISIBILITY & CONTROL

   Light operational section showing business activity across
   connected systems.

   Unlike section 04, this is not about technical failure.
   The integration is working, but one business event needs
   human attention.

   Story:
   connected systems → visible activity → business exception
   → context → owner → next action.
   ========================================================= */

.wn-ics-visibility {
    position: relative;
    overflow: hidden;
    padding: 118px 0 122px;
    background:
        linear-gradient(
            90deg,
            rgba(30, 91, 171, 0.025) 1px,
            transparent 1px
        ),
        #f5f7fa;
    background-size: 120px 100%;
    color: #0a1728;
}

.wn-ics-visibility .wn-wrap {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}

/* Subtle technical reference line behind the section. */

.wn-ics-visibility::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 640px);
    width: 1px;
    height: 100%;
    background: rgba(35, 92, 166, 0.035);
    pointer-events: none;
}


/* =========================================================
   SECTION INTRO
   ========================================================= */

.wn-ics-visibility-head {
    display: grid;
    grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
    gap: clamp(55px, 8vw, 125px);
    align-items: start;
    margin-bottom: 76px;
}

.wn-ics-visibility-label {
    display: flex;
    align-items: center;
    gap: 17px;
    padding-top: 8px;
}

.wn-ics-visibility-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(43, 113, 211, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    color: #2475e5;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
}

.wn-ics-visibility-kicker {
    color: #52667d;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.12em;
}

.wn-ics-visibility-heading {
    min-width: 0;
}

.wn-ics-visibility-heading h2 {
    max-width: 930px;
    margin: 0;
    color: #0a1728;
    font-size: clamp(44px, 4.55vw, 66px);
    font-weight: 750;
    line-height: 1.01;
    letter-spacing: -0.048em;
}

.wn-ics-visibility-heading h2 span {
    color: #687f95;
}

.wn-ics-visibility-heading > p {
    max-width: 720px;
    margin: 27px 0 0;
    color: #5f7082;
    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   OPERATIONAL TRACE

   A wide business activity canvas rather than another
   software dashboard. Events appear across one working day.
   ========================================================= */

.wn-ics-visibility-trace {
    position: relative;
    overflow: hidden;
    padding: 25px 28px 28px;
    border: 1px solid rgba(32, 87, 156, 0.11);
    border-radius: 18px;
    background:
        linear-gradient(
            rgba(38, 98, 174, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(38, 98, 174, 0.035) 1px,
            transparent 1px
        ),
        #ffffff;
    background-size: 46px 46px;
    box-shadow:
        0 28px 65px rgba(23, 49, 78, 0.07),
        0 2px 8px rgba(23, 49, 78, 0.025);
}

.wn-ics-visibility-trace::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 30px;
    width: 100px;
    height: 2px;
    background: #3385f2;
}


/* =========================================================
   TRACE HEADER
   ========================================================= */

.wn-ics-visibility-trace-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 21px;
    border-bottom: 1px solid rgba(46, 92, 148, 0.10);
}

.wn-ics-visibility-trace-top > div:first-child span {
    display: block;
    color: #2f79db;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.10em;
}

.wn-ics-visibility-trace-top > div:first-child strong {
    display: block;
    margin-top: 5px;
    color: #15263a;
    font-size: 12px;
    font-weight: 760;
    line-height: 1.3;
}

.wn-ics-visibility-trace-state {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 2px;
    color: #24976b;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-visibility-trace-state i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #34b781;
    box-shadow: 0 0 0 4px rgba(52, 183, 129, 0.08);
}


/* =========================================================
   CONNECTED SYSTEM ORIGINS
   ========================================================= */

.wn-ics-visibility-sources {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 25px 0 22px;
}

.wn-ics-visibility-source {
    position: relative;
    min-width: 0;
    padding-left: 14px;
}

.wn-ics-visibility-source::before {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0;
    width: 2px;
    border-radius: 10px;
    background: rgba(48, 127, 233, 0.38);
}

.wn-ics-visibility-source span {
    display: block;
    color: #4080d2;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}

.wn-ics-visibility-source strong {
    display: block;
    margin-top: 4px;
    color: #45596f;
    font-size: 9px;
    font-weight: 720;
    line-height: 1.3;
}


/* =========================================================
   TIME AXIS
   ========================================================= */

.wn-ics-visibility-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    margin: 18px 0 0;
}

.wn-ics-visibility-timeline::before {
    content: "";
    position: absolute;
    top: 22px;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(42, 115, 211, 0.16),
        rgba(42, 115, 211, 0.55) 50%,
        rgba(42, 115, 211, 0.16)
    );
}

.wn-ics-visibility-time {
    position: relative;
    min-width: 0;
    text-align: center;
}

.wn-ics-visibility-time span {
    display: block;
    margin-bottom: 12px;
    color: #708297;
    font-size: 7px;
    font-weight: 760;
    line-height: 1;
}

.wn-ics-visibility-time i {
    position: relative;
    z-index: 2;
    display: block;
    width: 7px;
    height: 7px;
    margin-inline: auto;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #4a8de7;
    box-shadow: 0 0 0 1px rgba(49, 119, 214, 0.24);
}

.wn-ics-visibility-time:last-child span {
    color: #2777df;
    font-weight: 850;
}

.wn-ics-visibility-time:last-child i {
    background: #2f80ed;
    box-shadow:
        0 0 0 1px rgba(49, 119, 214, 0.25),
        0 0 0 5px rgba(47, 128, 237, 0.06);
}


/* =========================================================
   BUSINESS EVENTS

   Cards alternate above and below an implied operational
   trace. This creates rhythm without turning the section
   into a conventional dashboard.
   ========================================================= */

.wn-ics-visibility-events {
    position: relative;
    height: 315px;
    margin-top: 7px;
}

.wn-ics-visibility-events::before {
    content: "";
    position: absolute;
    top: 155px;
    right: 1%;
    left: 1%;
    height: 1px;
    background: rgba(43, 111, 201, 0.13);
}

.wn-ics-visibility-event {
    position: absolute;
    width: 18%;
    min-width: 0;
}

.wn-ics-visibility-event--one {
    top: 17px;
    left: 1%;
}

.wn-ics-visibility-event--two {
    top: 178px;
    left: 20%;
}

.wn-ics-visibility-event--three {
    top: 17px;
    left: 39.5%;
}

.wn-ics-visibility-event--attention {
    top: 178px;
    left: 59%;
}

.wn-ics-visibility-event--five {
    top: 17px;
    right: 1%;
}


/* Vertical stems connect each event to the shared trace. */

.wn-ics-visibility-event-marker {
    position: absolute;
    left: 20px;
    width: 1px;
    background: rgba(48, 119, 214, 0.25);
}

.wn-ics-visibility-event--one .wn-ics-visibility-event-marker,
.wn-ics-visibility-event--three .wn-ics-visibility-event-marker,
.wn-ics-visibility-event--five .wn-ics-visibility-event-marker {
    top: 100%;
    height: 40px;
}

.wn-ics-visibility-event--two .wn-ics-visibility-event-marker,
.wn-ics-visibility-event--attention .wn-ics-visibility-event-marker {
    bottom: 100%;
    height: 24px;
}

.wn-ics-visibility-event-marker i {
    position: absolute;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #3c85e7;
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(50, 119, 211, 0.20);
}

.wn-ics-visibility-event--one .wn-ics-visibility-event-marker i,
.wn-ics-visibility-event--three .wn-ics-visibility-event-marker i,
.wn-ics-visibility-event--five .wn-ics-visibility-event-marker i {
    bottom: -4px;
}

.wn-ics-visibility-event--two .wn-ics-visibility-event-marker i,
.wn-ics-visibility-event--attention .wn-ics-visibility-event-marker i {
    top: -4px;
}


/* =========================================================
   EVENT CARDS
   ========================================================= */

.wn-ics-visibility-event-card {
    position: relative;
    min-width: 0;
    padding: 14px 15px 15px;
    border: 1px solid rgba(40, 96, 165, 0.12);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 9px 25px rgba(29, 59, 94, 0.055);
}

.wn-ics-visibility-event--attention .wn-ics-visibility-event-card {
    border-color: rgba(213, 143, 52, 0.30);
    background:
        linear-gradient(
            145deg,
            rgba(255, 250, 241, 0.98),
            #ffffff
        );
    box-shadow: 0 9px 26px rgba(165, 111, 37, 0.07);
}

.wn-ics-visibility-event-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.wn-ics-visibility-event-meta span {
    color: #2f7bdc;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.2;
}

.wn-ics-visibility-event-meta small {
    overflow: hidden;
    color: #8090a2;
    font-size: 5px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-ics-visibility-event-card > strong {
    display: block;
    margin-top: 10px;
    color: #142538;
    font-size: 11px;
    font-weight: 780;
    line-height: 1.3;
}

.wn-ics-visibility-event-card > p {
    min-height: 30px;
    margin: 5px 0 0;
    color: #6b7b8d;
    font-size: 8px;
    line-height: 1.5;
}

.wn-ics-visibility-event-result {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: #31926c;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.06em;
}

.wn-ics-visibility-event-result > i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #3eb280;
}

.wn-ics-visibility-event--attention .wn-ics-visibility-event-marker {
    background: rgba(210, 142, 52, 0.46);
}

.wn-ics-visibility-event--attention .wn-ics-visibility-event-marker i {
    background: #dc9843;
    box-shadow:
        0 0 0 1px rgba(211, 142, 49, 0.30),
        0 0 0 5px rgba(211, 142, 49, 0.06);
}

.wn-ics-visibility-event--attention .wn-ics-visibility-event-meta span {
    color: #b8792f;
}

.wn-ics-visibility-event--attention .wn-ics-visibility-event-result {
    color: #b8782e;
}

.wn-ics-visibility-event--attention .wn-ics-visibility-event-result > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(210, 139, 47, 0.23);
    border-radius: 50%;
    background: rgba(210, 139, 47, 0.07);
    color: #bd7a2b;
    font-size: 7px;
    font-style: normal;
}


/* =========================================================
   ATTENTION DETAIL

   The business exception expands out of the timeline.
   It answers the practical questions:
   what happened, where, what next and who owns it?
   ========================================================= */

.wn-ics-visibility-attention {
    position: relative;
    width: min(72%, 820px);
    margin: 13px 6% 0 auto;
    border: 1px solid rgba(207, 137, 45, 0.22);
    border-radius: 12px;
    background: rgba(255, 253, 249, 0.98);
    box-shadow: 0 18px 42px rgba(41, 59, 81, 0.07);
}

.wn-ics-visibility-attention::before {
    content: "";
    position: absolute;
    top: -42px;
    left: 58%;
    width: 1px;
    height: 42px;
    background: linear-gradient(
        180deg,
        rgba(208, 138, 46, 0.18),
        rgba(208, 138, 46, 0.65)
    );
}

.wn-ics-visibility-attention::after {
    content: "";
    position: absolute;
    top: -46px;
    left: calc(58% - 3px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d58f36;
}

.wn-ics-visibility-attention-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(57, 91, 131, 0.09);
}

.wn-ics-visibility-attention-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(208, 138, 46, 0.22);
    border-radius: 50%;
    background: rgba(208, 138, 46, 0.07);
    color: #bd7b2c;
    font-size: 11px;
    font-weight: 850;
}

.wn-ics-visibility-attention-head > div:nth-child(2) {
    min-width: 0;
}

.wn-ics-visibility-attention-head span {
    display: block;
    color: #b67931;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-visibility-attention-head strong {
    display: block;
    margin-top: 4px;
    color: #17283a;
    font-size: 12px;
    font-weight: 780;
    line-height: 1.3;
}

.wn-ics-visibility-attention-state {
    padding: 6px 8px;
    border: 1px solid rgba(207, 137, 45, 0.20);
    border-radius: 4px;
    background: rgba(207, 137, 45, 0.06);
    color: #b7762b;
    font-size: 6px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.06em;
}


/* Context behind the exception. */

.wn-ics-visibility-attention-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 16px 18px;
    border-bottom: 1px solid rgba(57, 91, 131, 0.09);
}

.wn-ics-visibility-attention-context {
    min-width: 0;
    padding-right: 14px;
}

.wn-ics-visibility-attention-context + .wn-ics-visibility-attention-context {
    padding-left: 14px;
    border-left: 1px solid rgba(57, 91, 131, 0.09);
}

.wn-ics-visibility-attention-context span {
    display: block;
    color: #7c8da0;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.07em;
}

.wn-ics-visibility-attention-context strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #304459;
    font-size: 8px;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Owner and next action make the exception operational. */

.wn-ics-visibility-attention-action {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 20px;
    padding: 15px 18px;
    background: rgba(245, 248, 251, 0.58);
}

.wn-ics-visibility-attention-action > div {
    min-width: 0;
}

.wn-ics-visibility-attention-action span {
    display: block;
    color: #367dd7;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-visibility-attention-action strong {
    display: block;
    margin-top: 5px;
    color: #263b50;
    font-size: 9px;
    font-weight: 760;
    line-height: 1.35;
}

.wn-ics-visibility-attention-owner {
    padding-left: 20px;
    border-left: 1px solid rgba(57, 91, 131, 0.09);
}


/* =========================================================
   TRACE SUMMARY

   Three short ideas close the graphic without introducing
   another card system.
   ========================================================= */

.wn-ics-visibility-summary {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        1px
        minmax(0, 1fr)
        1px
        minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    margin-top: 30px;
    padding-top: 21px;
    border-top: 1px solid rgba(46, 92, 148, 0.10);
}

.wn-ics-visibility-summary-item {
    min-width: 0;
}

.wn-ics-visibility-summary-item span {
    display: block;
    color: #2e79da;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-visibility-summary-item strong {
    display: block;
    margin-top: 5px;
    color: #4c6075;
    font-size: 9px;
    font-weight: 720;
    line-height: 1.35;
}

.wn-ics-visibility-summary-line {
    width: 1px;
    height: 27px;
    background: rgba(46, 92, 148, 0.12);
}


/* =========================================================
   BUSINESS VALUE
   ========================================================= */

.wn-ics-visibility-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 39px;
    border-top: 1px solid rgba(35, 84, 143, 0.11);
    border-bottom: 1px solid rgba(35, 84, 143, 0.11);
}

.wn-ics-visibility-principle {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 17px;
    min-width: 0;
    padding: 27px 30px 28px 0;
}

.wn-ics-visibility-principle + .wn-ics-visibility-principle {
    padding-left: 30px;
    border-left: 1px solid rgba(35, 84, 143, 0.11);
}

.wn-ics-visibility-principle > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(43, 113, 211, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    color: #2879e4;
    font-size: 8px;
    font-weight: 850;
}

.wn-ics-visibility-principle > div {
    min-width: 0;
}

.wn-ics-visibility-principle strong {
    display: block;
    color: #17283a;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.35;
}

.wn-ics-visibility-principle p {
    max-width: 300px;
    margin: 7px 0 0;
    color: #65768a;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   TABLET — ≤ 1100px

   Preserve the horizontal operational trace while reducing
   the amount of empty space around it.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-ics-visibility .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-ics-visibility-head {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 50px;
    }

    .wn-ics-visibility-event {
        width: 18.5%;
    }

    .wn-ics-visibility-event--two {
        left: 19.5%;
    }

    .wn-ics-visibility-event--three {
        left: 39%;
    }

    .wn-ics-visibility-event--attention {
        left: 58.5%;
    }

    .wn-ics-visibility-event-card {
        padding-inline: 12px;
    }

    .wn-ics-visibility-attention {
        width: 76%;
        margin-right: 3%;
    }

    .wn-ics-visibility-principle {
        padding-right: 20px;
    }

    .wn-ics-visibility-principle + .wn-ics-visibility-principle {
        padding-left: 20px;
    }
}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   The editorial intro becomes one column. The timeline stays
   horizontal here; the full reconstruction happens at 760px.
   ========================================================= */

@media (max-width: 950px) {

    .wn-ics-visibility {
        padding: 100px 0 105px;
    }

    .wn-ics-visibility-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        margin-bottom: 60px;
    }

    .wn-ics-visibility-label {
        padding-top: 0;
    }

    .wn-ics-visibility-heading h2 {
        max-width: 850px;
    }

    .wn-ics-visibility-trace {
        padding-inline: 22px;
    }

    .wn-ics-visibility-events {
        height: 300px;
    }

    .wn-ics-visibility-event {
        width: 19%;
    }

    .wn-ics-visibility-event--one {
        left: 0;
    }

    .wn-ics-visibility-event--two {
        left: 19.5%;
    }

    .wn-ics-visibility-event--three {
        left: 39%;
    }

    .wn-ics-visibility-event--attention {
        left: 58.5%;
    }

    .wn-ics-visibility-event--five {
        right: 0;
    }

    .wn-ics-visibility-event-card > strong {
        font-size: 10px;
    }

    .wn-ics-visibility-event-card > p {
        font-size: 7px;
    }

    .wn-ics-visibility-event-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .wn-ics-visibility-attention {
        width: 80%;
        margin-right: 1%;
    }

    .wn-ics-visibility-attention-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 15px;
    }

    .wn-ics-visibility-attention-context:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}


/* =========================================================
   MOBILE — ≤ 760px

   The desktop timeline is rebuilt vertically.

   This is not the desktop scene squeezed onto a phone.
   Events become a readable chronological trace and the
   attention event expands naturally into its detail panel.
   ========================================================= */

@media (max-width: 760px) {

    .wn-ics-visibility {
        padding: 82px 0 86px;
        background-size: 72px 100%;
    }

    .wn-ics-visibility .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-ics-visibility-head {
        gap: 29px;
        margin-bottom: 46px;
    }

    .wn-ics-visibility-label {
        gap: 13px;
    }

    .wn-ics-visibility-number {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .wn-ics-visibility-kicker {
        font-size: 9px;
    }

    .wn-ics-visibility-heading h2 {
        font-size: clamp(38px, 9.3vw, 51px);
        line-height: 1.02;
    }

    .wn-ics-visibility-heading > p {
        margin-top: 21px;
        font-size: 14px;
        line-height: 1.68;
    }

    .wn-ics-visibility-trace {
        padding: 22px 20px 23px;
        border-radius: 16px;
        background:
            linear-gradient(
                90deg,
                rgba(38, 98, 174, 0.03) 1px,
                transparent 1px
            ),
            #ffffff;
        background-size: 42px 100%;
    }

    .wn-ics-visibility-trace::before {
        left: 20px;
        width: 78px;
    }

    .wn-ics-visibility-sources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 20px;
        padding: 23px 0 25px;
    }

    .wn-ics-visibility-source:last-child {
        grid-column: 1 / -1;
    }

    /* Desktop hour scale is unnecessary on the vertical trace. */

    .wn-ics-visibility-timeline {
        display: none;
    }

    .wn-ics-visibility-events {
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: min(100%, 440px);
        height: auto;
        margin: 8px auto 0;
        padding-left: 34px;
    }

    .wn-ics-visibility-events::before {
        top: 0;
        bottom: 0;
        left: 11px;
        width: 1px;
        height: auto;
        background: linear-gradient(
            180deg,
            rgba(48, 122, 220, 0.18),
            rgba(48, 122, 220, 0.46),
            rgba(48, 122, 220, 0.18)
        );
    }

    .wn-ics-visibility-event,
    .wn-ics-visibility-event--one,
    .wn-ics-visibility-event--two,
    .wn-ics-visibility-event--three,
    .wn-ics-visibility-event--attention,
    .wn-ics-visibility-event--five {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
    }

    .wn-ics-visibility-event-marker,
    .wn-ics-visibility-event--one .wn-ics-visibility-event-marker,
    .wn-ics-visibility-event--two .wn-ics-visibility-event-marker,
    .wn-ics-visibility-event--three .wn-ics-visibility-event-marker,
    .wn-ics-visibility-event--attention .wn-ics-visibility-event-marker,
    .wn-ics-visibility-event--five .wn-ics-visibility-event-marker {
        top: 25px;
        bottom: auto;
        left: -23px;
        width: 23px;
        height: 1px;
        background: rgba(48, 119, 214, 0.27);
    }

    .wn-ics-visibility-event-marker i,
    .wn-ics-visibility-event--one .wn-ics-visibility-event-marker i,
    .wn-ics-visibility-event--two .wn-ics-visibility-event-marker i,
    .wn-ics-visibility-event--three .wn-ics-visibility-event-marker i,
    .wn-ics-visibility-event--attention .wn-ics-visibility-event-marker i,
    .wn-ics-visibility-event--five .wn-ics-visibility-event-marker i {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 0;
        transform: translate(-50%, -50%);
    }

    .wn-ics-visibility-event--attention .wn-ics-visibility-event-marker {
        background: rgba(210, 142, 52, 0.46);
    }

    .wn-ics-visibility-event-card {
        padding: 15px 16px;
    }

    .wn-ics-visibility-event-meta {
        align-items: center;
        flex-direction: row;
        gap: 10px;
    }

    .wn-ics-visibility-event-meta span {
        font-size: 8px;
    }

    .wn-ics-visibility-event-meta small {
        font-size: 6px;
    }

    .wn-ics-visibility-event-card > strong {
        margin-top: 9px;
        font-size: 12px;
    }

    .wn-ics-visibility-event-card > p {
        min-height: 0;
        font-size: 9px;
    }

    .wn-ics-visibility-event-result {
        font-size: 7px;
    }

    /*
     * The attention panel now follows the event list instead
     * of floating underneath a desktop coordinate.
     */

    .wn-ics-visibility-attention {
        width: min(100%, 440px);
        margin: 39px auto 0;
    }

    .wn-ics-visibility-attention::before {
        top: -40px;
        left: 45px;
        height: 40px;
    }

    .wn-ics-visibility-attention::after {
        top: -44px;
        left: 42px;
    }

    .wn-ics-visibility-attention-head {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .wn-ics-visibility-attention-head span {
        font-size: 7px;
    }

    .wn-ics-visibility-attention-head strong {
        font-size: 12px;
    }

    .wn-ics-visibility-attention-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .wn-ics-visibility-attention-context {
        padding: 11px 12px 11px 0;
    }

    .wn-ics-visibility-attention-context + .wn-ics-visibility-attention-context {
        padding-left: 12px;
    }

    .wn-ics-visibility-attention-context:nth-child(3) {
        padding-left: 0;
        border-top: 1px solid rgba(57, 91, 131, 0.09);
        border-left: 0;
    }

    .wn-ics-visibility-attention-context:nth-child(4) {
        border-top: 1px solid rgba(57, 91, 131, 0.09);
    }

    .wn-ics-visibility-attention-context span {
        font-size: 7px;
    }

    .wn-ics-visibility-attention-context strong {
        overflow: visible;
        font-size: 9px;
        text-overflow: clip;
        white-space: normal;
    }

    .wn-ics-visibility-attention-action span {
        font-size: 7px;
    }

    .wn-ics-visibility-attention-action strong {
        font-size: 9px;
    }

    .wn-ics-visibility-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-top: 25px;
    }

    .wn-ics-visibility-summary-line {
        width: 100%;
        height: 1px;
    }

    .wn-ics-visibility-summary-item span {
        font-size: 7px;
    }

    .wn-ics-visibility-summary-item strong {
        font-size: 10px;
    }

    .wn-ics-visibility-principles {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 31px;
    }

    .wn-ics-visibility-principle {
        padding: 22px 0;
    }

    .wn-ics-visibility-principle + .wn-ics-visibility-principle {
        padding-left: 0;
        border-top: 1px solid rgba(35, 84, 143, 0.11);
        border-left: 0;
    }

    .wn-ics-visibility-principle p {
        max-width: 460px;
    }
}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Keep the business message readable. Secondary structure
   simplifies, but owner / issue / next action remain visible.
   ========================================================= */

@media (max-width: 520px) {

    .wn-ics-visibility .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-ics-visibility-heading h2 {
        font-size: clamp(35px, 9.8vw, 44px);
        letter-spacing: -0.043em;
    }

    .wn-ics-visibility-trace {
        padding-inline: 14px;
    }

    .wn-ics-visibility-trace::before {
        left: 14px;
    }

    .wn-ics-visibility-trace-top {
        align-items: flex-start;
    }

    .wn-ics-visibility-trace-top > div:first-child {
        min-width: 0;
    }

    .wn-ics-visibility-sources {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .wn-ics-visibility-source:last-child {
        grid-column: auto;
    }

    .wn-ics-visibility-events {
        padding-left: 29px;
    }

    .wn-ics-visibility-events::before {
        left: 9px;
    }

    .wn-ics-visibility-event-marker,
    .wn-ics-visibility-event--one .wn-ics-visibility-event-marker,
    .wn-ics-visibility-event--two .wn-ics-visibility-event-marker,
    .wn-ics-visibility-event--three .wn-ics-visibility-event-marker,
    .wn-ics-visibility-event--attention .wn-ics-visibility-event-marker,
    .wn-ics-visibility-event--five .wn-ics-visibility-event-marker {
        left: -20px;
        width: 20px;
    }

    .wn-ics-visibility-event-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .wn-ics-visibility-event-meta small {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .wn-ics-visibility-attention-head {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .wn-ics-visibility-attention-icon {
        width: 36px;
        height: 36px;
    }

    .wn-ics-visibility-attention-state {
        grid-column: 2;
        width: fit-content;
    }

    .wn-ics-visibility-attention-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .wn-ics-visibility-attention-context,
    .wn-ics-visibility-attention-context + .wn-ics-visibility-attention-context,
    .wn-ics-visibility-attention-context:nth-child(3),
    .wn-ics-visibility-attention-context:nth-child(4) {
        padding: 10px 0;
        border-top: 1px solid rgba(57, 91, 131, 0.09);
        border-left: 0;
    }

    .wn-ics-visibility-attention-context:first-child {
        border-top: 0;
    }

    .wn-ics-visibility-attention-action {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .wn-ics-visibility-attention-owner {
        padding: 13px 0 0;
        border-top: 1px solid rgba(57, 91, 131, 0.09);
        border-left: 0;
    }

    .wn-ics-visibility-principle {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 14px;
    }

    .wn-ics-visibility-principle > span {
        width: 35px;
        height: 35px;
    }
}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Final narrow-screen protection. No fixed content width,
   no horizontal overflow and no hidden meaningful copy.
   ========================================================= */

@media (max-width: 380px) {

    .wn-ics-visibility .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-ics-visibility-heading h2 {
        font-size: 33px;
    }

    .wn-ics-visibility-trace {
        padding-inline: 11px;
    }

    .wn-ics-visibility-trace::before {
        left: 11px;
    }

    .wn-ics-visibility-events {
        padding-left: 26px;
    }

    .wn-ics-visibility-event-card {
        padding-inline: 13px;
    }

    .wn-ics-visibility-attention-head,
    .wn-ics-visibility-attention-body,
    .wn-ics-visibility-attention-action {
        padding-inline: 14px;
    }
}
/* =========================================================
   FAQ — INTEGRATIONS & CONNECTED SYSTEMS

   Dark editorial closing section before the final CTA.

   This section intentionally steps away from the large
   technical diagrams used earlier on the page. The visual
   language becomes quieter: editorial copy, a small
   integration signature and a clean native accordion.

   Story:
   systems → data → business outcome → practical questions.
   ========================================================= */

.wn-ics-faq {
    position: relative;
    overflow: hidden;
    padding: 122px 0 126px;
    background:
        radial-gradient(
            circle at 16% 24%,
            rgba(38, 113, 215, 0.09),
            transparent 31%
        ),
        linear-gradient(
            115deg,
            #061321 0%,
            #071523 52%,
            #06111d 100%
        );
    color: #ffffff;
}

.wn-ics-faq .wn-wrap {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}

/*
 * Very subtle structural lines.
 * They give the section depth without turning the FAQ into
 * another technical illustration.
 */

.wn-ics-faq::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: rgba(92, 151, 224, 0.045);
    pointer-events: none;
}

.wn-ics-faq::after {
    content: "";
    position: absolute;
    top: 88px;
    right: -190px;
    width: 540px;
    height: 540px;
    border: 1px solid rgba(75, 138, 220, 0.055);
    border-radius: 50%;
    pointer-events: none;
}


/* =========================================================
   MAIN FAQ LAYOUT

   Left side holds the editorial introduction and the small
   integration signature. Right side carries the questions.
   ========================================================= */

.wn-ics-faq-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(520px, 1.22fr);
    gap: clamp(72px, 9vw, 145px);
    align-items: start;
}


/* =========================================================
   FAQ INTRO
   ========================================================= */

.wn-ics-faq-intro {
    position: relative;
    min-width: 0;
    padding-top: 5px;
}

.wn-ics-faq-kicker {
    display: block;
    margin-bottom: 25px;
    color: #5e9ff6;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.13em;
}

.wn-ics-faq-intro h2 {
    max-width: 570px;
    margin: 0;
    color: #f7fbff;
    font-size: clamp(43px, 4.2vw, 62px);
    font-weight: 750;
    line-height: 1.02;
    letter-spacing: -0.047em;
}

.wn-ics-faq-intro h2 span {
    color: #629df0;
}

.wn-ics-faq-intro > p {
    max-width: 500px;
    margin: 28px 0 0;
    color: #9fb3c9;
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   INTEGRATION SIGNATURE

   A deliberately small visual summary of the entire page.
   It is not another diagram or dashboard.

   SYSTEMS → DATA → BUSINESS
   ========================================================= */

.wn-ics-faq-signature {
    position: relative;
    width: min(100%, 470px);
    margin-top: 61px;
    padding: 25px 0;
    border-top: 1px solid rgba(106, 158, 218, 0.13);
    border-bottom: 1px solid rgba(106, 158, 218, 0.13);
}

.wn-ics-faq-signature-node {
    position: relative;
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    min-width: 0;
}

.wn-ics-faq-signature-node > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(74, 143, 230, 0.24);
    border-radius: 50%;
    background: rgba(43, 112, 204, 0.055);
    color: #5c9df0;
    font-size: 7px;
    font-weight: 850;
    line-height: 1;
}

.wn-ics-faq-signature-node > div {
    min-width: 0;
}

.wn-ics-faq-signature-node small {
    display: block;
    color: #538edc;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.10em;
}

.wn-ics-faq-signature-node strong {
    display: block;
    margin-top: 4px;
    color: #c4d3e3;
    font-size: 11px;
    font-weight: 690;
    line-height: 1.35;
}

/*
 * Vertical connector between the three ideas.
 */

.wn-ics-faq-signature > i {
    position: relative;
    display: block;
    width: 1px;
    height: 27px;
    margin: 5px 0 5px 17px;
    background: linear-gradient(
        180deg,
        rgba(63, 132, 220, 0.16),
        rgba(63, 132, 220, 0.58),
        rgba(63, 132, 220, 0.16)
    );
}

.wn-ics-faq-signature > i::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #438be7;
    transform: translateX(-50%);
    box-shadow: 0 0 0 4px rgba(67, 139, 231, 0.05);
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.wn-ics-faq-list {
    min-width: 0;
    border-top: 1px solid rgba(111, 157, 211, 0.16);
}


/*
 * Native <details> keeps the FAQ usable without JavaScript.
 * Each question is separated only by a fine line so the
 * right side stays editorial rather than card-heavy.
 */

.wn-ics-faq-item {
    position: relative;
    border-bottom: 1px solid rgba(111, 157, 211, 0.16);
}

.wn-ics-faq-item summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    gap: 20px;
    align-items: center;
    min-width: 0;
    padding: 29px 0;
    cursor: pointer;
    list-style: none;
}

.wn-ics-faq-item summary::-webkit-details-marker {
    display: none;
}

.wn-ics-faq-item summary::marker {
    content: "";
}

.wn-ics-faq-item-number {
    color: #4e8fdf;
    font-size: 8px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.05em;
}

.wn-ics-faq-item summary strong {
    min-width: 0;
    color: #eaf2fa;
    font-size: 18px;
    font-weight: 690;
    line-height: 1.35;
    letter-spacing: -0.018em;
    transition: color 180ms ease;
}

.wn-ics-faq-item summary:hover strong {
    color: #ffffff;
}


/* =========================================================
   PLUS / MINUS CONTROL

   Pure CSS. The vertical stroke disappears when <details>
   is open, changing + into −.
   ========================================================= */

.wn-ics-faq-item-toggle {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(92, 151, 224, 0.18);
    border-radius: 50%;
    background: rgba(58, 123, 207, 0.035);
    transition:
        border-color 180ms ease,
        background 180ms ease;
}

.wn-ics-faq-item-toggle::before,
.wn-ics-faq-item-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #6da6ef;
    transform: translate(-50%, -50%);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.wn-ics-faq-item-toggle::before {
    width: 10px;
    height: 1px;
}

.wn-ics-faq-item-toggle::after {
    width: 1px;
    height: 10px;
}

.wn-ics-faq-item[open] .wn-ics-faq-item-toggle {
    border-color: rgba(89, 155, 239, 0.34);
    background: rgba(55, 126, 219, 0.075);
}

.wn-ics-faq-item[open] .wn-ics-faq-item-toggle::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.wn-ics-faq-item[open] summary strong {
    color: #ffffff;
}


/* =========================================================
   ANSWER

   Answers remain comfortably readable. They are not treated
   as secondary microcopy simply because this is an accordion.
   ========================================================= */

.wn-ics-faq-answer {
    padding: 0 54px 30px 58px;
}

.wn-ics-faq-answer p {
    max-width: 660px;
    margin: 0;
    color: #9eb2c8;
    font-size: 14px;
    line-height: 1.75;
}


/*
 * A quiet blue trace appears underneath an open question.
 * This is enough to connect the accordion visually with the
 * integration language used throughout the page.
 */

.wn-ics-faq-item[open]::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 58px;
    width: 82px;
    height: 1px;
    background: linear-gradient(
        90deg,
        #4b95f3,
        rgba(75, 149, 243, 0)
    );
}


/* =========================================================
   TABLET — ≤ 1100px

   Keep the two-column composition while reducing the fixed
   width pressure on the accordion.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-ics-faq .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-ics-faq-grid {
        grid-template-columns:
            minmax(0, 0.78fr)
            minmax(460px, 1.22fr);
        gap: 65px;
    }

    .wn-ics-faq-intro h2 {
        font-size: clamp(42px, 4.7vw, 57px);
    }

    .wn-ics-faq-item summary {
        gap: 16px;
    }

    .wn-ics-faq-item summary strong {
        font-size: 17px;
    }
}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   This is the architectural breakpoint. The section becomes
   one column before either side starts feeling compressed.
   ========================================================= */

@media (max-width: 950px) {

    .wn-ics-faq {
        padding: 104px 0 108px;
    }

    .wn-ics-faq-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 70px;
    }

    .wn-ics-faq-intro h2 {
        max-width: 720px;
        font-size: clamp(45px, 7vw, 62px);
    }

    .wn-ics-faq-intro > p {
        max-width: 650px;
    }

    /*
     * At this width the signature can become horizontal.
     * It creates a clean bridge between the intro and FAQ.
     */

    .wn-ics-faq-signature {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            54px
            minmax(0, 1fr)
            54px
            minmax(0, 1fr);
        gap: 0;
        align-items: center;
        width: 100%;
        max-width: 760px;
        margin-top: 49px;
    }

    .wn-ics-faq-signature > i {
        width: 100%;
        height: 1px;
        margin: 0;
        background: linear-gradient(
            90deg,
            rgba(63, 132, 220, 0.12),
            rgba(63, 132, 220, 0.56),
            rgba(63, 132, 220, 0.12)
        );
    }

    .wn-ics-faq-signature > i::after {
        top: 50%;
        right: -1px;
        bottom: auto;
        left: auto;
        transform: translateY(-50%);
    }
}


/* =========================================================
   MOBILE — ≤ 760px

   Keep the editorial rhythm and readable question sizes.
   The signature returns to a vertical sequence because that
   is more natural on a narrow screen.
   ========================================================= */

@media (max-width: 760px) {

    .wn-ics-faq {
        padding: 84px 0 89px;
    }

    .wn-ics-faq .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-ics-faq::after {
        top: 120px;
        right: -270px;
        width: 470px;
        height: 470px;
    }

    .wn-ics-faq-grid {
        gap: 58px;
    }

    .wn-ics-faq-kicker {
        margin-bottom: 21px;
        font-size: 9px;
    }

    .wn-ics-faq-intro h2 {
        max-width: 600px;
        font-size: clamp(38px, 9.4vw, 51px);
        line-height: 1.03;
    }

    .wn-ics-faq-intro > p {
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.7;
    }

    .wn-ics-faq-signature {
        display: block;
        width: 100%;
        max-width: 470px;
        margin-top: 41px;
        padding: 22px 0;
    }

    .wn-ics-faq-signature > i {
        width: 1px;
        height: 24px;
        margin: 5px 0 5px 17px;
        background: linear-gradient(
            180deg,
            rgba(63, 132, 220, 0.14),
            rgba(63, 132, 220, 0.56),
            rgba(63, 132, 220, 0.14)
        );
    }

    .wn-ics-faq-signature > i::after {
        top: auto;
        right: auto;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
    }

    .wn-ics-faq-item summary {
        grid-template-columns: 30px minmax(0, 1fr) 32px;
        gap: 13px;
        padding: 24px 0;
    }

    .wn-ics-faq-item-number {
        font-size: 8px;
    }

    .wn-ics-faq-item summary strong {
        font-size: 16px;
        line-height: 1.4;
    }

    .wn-ics-faq-item-toggle {
        width: 32px;
        height: 32px;
    }

    .wn-ics-faq-answer {
        padding: 0 45px 25px 43px;
    }

    .wn-ics-faq-answer p {
        font-size: 13px;
        line-height: 1.72;
    }

    .wn-ics-faq-item[open]::after {
        left: 43px;
        width: 70px;
    }
}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Reduce decorative structure, not meaningful copy.
   Questions and answers stay comfortable to read.
   ========================================================= */

@media (max-width: 520px) {

    .wn-ics-faq .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-ics-faq-intro h2 {
        font-size: clamp(35px, 9.8vw, 44px);
        letter-spacing: -0.043em;
    }

    .wn-ics-faq-signature-node strong {
        font-size: 10px;
    }

    .wn-ics-faq-item summary {
        grid-template-columns: 25px minmax(0, 1fr) 30px;
        gap: 10px;
        padding: 22px 0;
    }

    .wn-ics-faq-item summary strong {
        font-size: 15px;
    }

    .wn-ics-faq-item-toggle {
        width: 30px;
        height: 30px;
    }

    .wn-ics-faq-answer {
        padding: 0 39px 24px 35px;
    }

    .wn-ics-faq-answer p {
        font-size: 13px;
    }

    .wn-ics-faq-item[open]::after {
        left: 35px;
    }
}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Last narrow-screen protection. The number becomes part of
   the question row without stealing useful reading width.
   ========================================================= */

@media (max-width: 380px) {

    .wn-ics-faq .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-ics-faq-intro h2 {
        font-size: 33px;
    }

    .wn-ics-faq-item summary {
        grid-template-columns: 22px minmax(0, 1fr) 28px;
        gap: 8px;
    }

    .wn-ics-faq-item summary strong {
        font-size: 14px;
    }

    .wn-ics-faq-item-toggle {
        width: 28px;
        height: 28px;
    }

    .wn-ics-faq-answer {
        padding-right: 35px;
        padding-left: 30px;
    }

    .wn-ics-faq-item[open]::after {
        left: 30px;
    }
}
/* =========================================================
   FINAL CTA — INTEGRATIONS & CONNECTED SYSTEMS

   Light closing section after the dark FAQ.

   This is intentionally simpler than the main technical
   sections above. The page has already explained how the
   integration works; the final scene condenses that story:

   existing systems → Webnime connection layer
   → one connected business flow.
   ========================================================= */

.wn-ics-final {
    position: relative;
    overflow: hidden;
    padding: 112px 0 70px;
    background:
        radial-gradient(
            circle at 83% 35%,
            rgba(47, 128, 237, 0.065),
            transparent 28%
        ),
        #f5f7fa;
    color: #0a1728;
}

.wn-ics-final .wn-wrap {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}

/*
 * Very quiet structural grid.
 * Enough to connect the CTA with the technical language of
 * the page without making it another full diagram section.
 */

.wn-ics-final::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(41, 101, 177, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41, 101, 177, 0.025) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
    pointer-events: none;
}

.wn-ics-final::after {
    content: "";
    position: absolute;
    top: -250px;
    right: -210px;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(47, 112, 201, 0.055);
    border-radius: 50%;
    pointer-events: none;
}


/* =========================================================
   MAIN CTA LAYOUT
   ========================================================= */

.wn-ics-final-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.86fr)
        minmax(560px, 1.14fr);
    gap: clamp(65px, 7vw, 110px);
    align-items: center;
}


/* =========================================================
   FINAL MESSAGE
   ========================================================= */

.wn-ics-final-content {
    min-width: 0;
}

.wn-ics-final-kicker {
    display: block;
    margin-bottom: 24px;
    color: #287ce7;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.13em;
}

.wn-ics-final-content h2 {
    max-width: 650px;
    margin: 0;
    color: #0a1728;
    font-size: clamp(48px, 4.65vw, 68px);
    font-weight: 760;
    line-height: 1.01;
    letter-spacing: -0.05em;
}

.wn-ics-final-content h2 span {
    color: #667f98;
}

.wn-ics-final-content > p {
    max-width: 600px;
    margin: 28px 0 0;
    color: #5d7084;
    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   CTA BUTTONS

   Keep the established Webnime primary / secondary rhythm.
   ========================================================= */

.wn-ics-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 35px;
}

.wn-ics-final-primary,
.wn-ics-final-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 54px;
    padding: 0 20px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        color 180ms ease;
}

.wn-ics-final-primary {
    min-width: 218px;
    border: 1px solid #287fee;
    background: #287fee;
    color: #ffffff;
}

.wn-ics-final-secondary {
    min-width: 235px;
    border: 1px solid rgba(27, 69, 119, 0.15);
    background: rgba(255, 255, 255, 0.58);
    color: #1b324b;
}

.wn-ics-final-primary:hover,
.wn-ics-final-secondary:hover {
    transform: translateY(-2px);
}

.wn-ics-final-primary:hover {
    background: #1f72dc;
    color: #ffffff;
}

.wn-ics-final-secondary:hover {
    border-color: rgba(40, 127, 238, 0.30);
    background: #ffffff;
    color: #152b43;
}


/* =========================================================
   CONNECTED BUSINESS VISUAL

   This is the compressed summary of the entire page.
   It is deliberately lighter and simpler than the main
   integration graphics above.
   ========================================================= */

.wn-ics-final-visual {
    position: relative;
    min-width: 0;
    padding: 23px 24px 22px;
    border: 1px solid rgba(32, 88, 157, 0.12);
    border-radius: 17px;
    background:
        linear-gradient(
            rgba(39, 99, 174, 0.032) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(39, 99, 174, 0.032) 1px,
            transparent 1px
        ),
        rgba(255, 255, 255, 0.84);
    background-size: 42px 42px;
    box-shadow:
        0 25px 60px rgba(23, 49, 78, 0.075),
        0 2px 8px rgba(23, 49, 78, 0.025);
}

.wn-ics-final-visual::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 26px;
    width: 92px;
    height: 2px;
    background: #3385f2;
}


/* =========================================================
   VISUAL HEADER
   ========================================================= */

.wn-ics-final-visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(41, 89, 146, 0.10);
}

.wn-ics-final-visual-top > span {
    color: #4b6f99;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.10em;
}

.wn-ics-final-visual-top > div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #2b9b70;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.07em;
}

.wn-ics-final-visual-top > div i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #39b783;
    box-shadow: 0 0 0 4px rgba(57, 183, 131, 0.08);
}


/* =========================================================
   MAIN FLOW

   Five columns:
   systems → route → Webnime → route → business result.
   ========================================================= */

.wn-ics-final-flow {
    display: grid;
    grid-template-columns:
        minmax(115px, 0.95fr)
        minmax(45px, 0.36fr)
        minmax(130px, 1fr)
        minmax(45px, 0.36fr)
        minmax(150px, 1.15fr);
    gap: 13px;
    align-items: center;
    min-width: 0;
    padding: 43px 0 40px;
}


/* =========================================================
   EXISTING SYSTEMS
   ========================================================= */

.wn-ics-final-systems {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.wn-ics-final-system {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(39, 96, 166, 0.11);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.72);
}

.wn-ics-final-system > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(45, 119, 216, 0.18);
    border-radius: 50%;
    background: rgba(45, 119, 216, 0.045);
    color: #337edc;
    font-size: 6px;
    font-weight: 850;
}

.wn-ics-final-system > div {
    min-width: 0;
}

.wn-ics-final-system small {
    display: block;
    color: #7890a9;
    font-size: 5px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-final-system strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #263c53;
    font-size: 9px;
    font-weight: 760;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   ROUTES

   Simple transmission lines rather than another detailed
   data-flow diagram.
   ========================================================= */

.wn-ics-final-route {
    position: relative;
    min-width: 0;
    text-align: center;
}

.wn-ics-final-route > span {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(47, 126, 230, 0.18),
        rgba(47, 126, 230, 0.72),
        rgba(47, 126, 230, 0.18)
    );
}

.wn-ics-final-route > span::before,
.wn-ics-final-route > span::after {
    content: "";
    position: absolute;
    top: 50%;
    border-radius: 50%;
    transform: translateY(-50%);
}

.wn-ics-final-route > span::before {
    left: 0;
    width: 5px;
    height: 5px;
    background: #4a91ec;
}

.wn-ics-final-route > span::after {
    right: 0;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(48, 126, 228, 0.45);
    background: #ffffff;
}

.wn-ics-final-route small {
    display: block;
    margin-top: 9px;
    color: #4b84cb;
    font-size: 5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.08em;
}


/* =========================================================
   WEBNIME CONNECTION LAYER
   ========================================================= */

.wn-ics-final-core {
    position: relative;
    min-width: 0;
    padding: 21px 12px 17px;
    border: 1px solid rgba(40, 116, 216, 0.22);
    border-radius: 12px;
    background:
        radial-gradient(
            circle at 50% 34%,
            rgba(47, 128, 237, 0.09),
            transparent 37%
        ),
        rgba(247, 251, 255, 0.92);
    text-align: center;
    box-shadow: 0 13px 32px rgba(38, 89, 153, 0.065);
}

.wn-ics-final-core::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 44px;
    height: 2px;
    background: #3385f2;
    transform: translateX(-50%);
}

.wn-ics-final-core-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 15px;
    border: 1px solid rgba(47, 128, 237, 0.16);
    border-radius: 50%;
}

.wn-ics-final-core-ring::before,
.wn-ics-final-core-ring::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(47, 128, 237, 0.09);
    border-radius: 50%;
}

.wn-ics-final-core-ring::before {
    inset: 8px;
}

.wn-ics-final-core-ring::after {
    inset: 17px;
}

.wn-ics-final-core-dot {
    position: relative;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2f80ed;
    box-shadow:
        0 0 0 5px rgba(47, 128, 237, 0.08),
        0 0 18px rgba(47, 128, 237, 0.22);
}

.wn-ics-final-core > span {
    display: block;
    color: #337edc;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}

.wn-ics-final-core > strong {
    display: block;
    margin-top: 5px;
    color: #172b42;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.2;
}

.wn-ics-final-core > small {
    display: block;
    margin-top: 13px;
    color: #6f88a2;
    font-size: 5px;
    font-weight: 820;
    line-height: 1.3;
    letter-spacing: 0.06em;
}


/* =========================================================
   CONNECTED BUSINESS RESULT
   ========================================================= */

.wn-ics-final-result {
    min-width: 0;
    padding: 19px 16px;
    border: 1px solid rgba(48, 153, 110, 0.16);
    border-radius: 10px;
    background:
        linear-gradient(
            145deg,
            rgba(246, 253, 249, 0.96),
            rgba(255, 255, 255, 0.92)
        );
}

.wn-ics-final-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    margin-bottom: 14px;
    border: 1px solid rgba(48, 166, 117, 0.18);
    border-radius: 50%;
    background: rgba(48, 166, 117, 0.07);
    color: #279a69;
    font-size: 11px;
    font-weight: 850;
}

.wn-ics-final-result > span {
    display: block;
    color: #2a966b;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.wn-ics-final-result > strong {
    display: block;
    margin-top: 5px;
    color: #1c3549;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.25;
}

.wn-ics-final-result-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(45, 112, 160, 0.09);
}

.wn-ics-final-result-items > div {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.wn-ics-final-result-items i {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #3aae7c;
}

.wn-ics-final-result-items span {
    color: #617589;
    font-size: 7px;
    font-weight: 680;
    line-height: 1.3;
}


/* =========================================================
   FINAL TRACE

   A tiny textual summary underneath the visual.
   ========================================================= */

.wn-ics-final-trace {
    display: grid;
    grid-template-columns:
        auto
        minmax(25px, 1fr)
        auto
        minmax(25px, 1fr)
        auto;
    gap: 12px;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(41, 89, 146, 0.10);
}

.wn-ics-final-trace span {
    color: #507399;
    font-size: 5px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.wn-ics-final-trace span:last-child {
    color: #298e68;
}

.wn-ics-final-trace i {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(47, 128, 237, 0.10),
        rgba(47, 128, 237, 0.42),
        rgba(47, 128, 237, 0.10)
    );
}


/* =========================================================
   CLOSING LINE

   Final quiet statement before the footer.
   ========================================================= */

.wn-ics-final-close {
    display: grid;
    grid-template-columns: auto minmax(40px, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-top: 68px;
    padding-top: 23px;
    border-top: 1px solid rgba(35, 84, 143, 0.11);
}

.wn-ics-final-close > span,
.wn-ics-final-close > strong {
    font-size: 7px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}

.wn-ics-final-close > span {
    color: #70849a;
}

.wn-ics-final-close > strong {
    color: #327bd8;
    text-align: right;
}

.wn-ics-final-close > i {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(46, 117, 208, 0.10),
        rgba(46, 117, 208, 0.38),
        rgba(46, 117, 208, 0.10)
    );
}


/* =========================================================
   TABLET — ≤ 1100px

   Preserve the two-column closing composition while there
   is still enough room for the visual to remain meaningful.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-ics-final .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-ics-final-grid {
        grid-template-columns:
            minmax(0, 0.78fr)
            minmax(500px, 1.22fr);
        gap: 55px;
    }

    .wn-ics-final-content h2 {
        font-size: clamp(44px, 4.9vw, 60px);
    }

    .wn-ics-final-flow {
        grid-template-columns:
            minmax(105px, 0.9fr)
            minmax(34px, 0.3fr)
            minmax(120px, 1fr)
            minmax(34px, 0.3fr)
            minmax(135px, 1.1fr);
        gap: 9px;
    }
}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   The final CTA becomes one column before either the copy
   or the connected-business visual becomes compressed.
   ========================================================= */

@media (max-width: 950px) {

    .wn-ics-final {
        padding: 100px 0 64px;
    }

    .wn-ics-final-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 66px;
    }

    .wn-ics-final-content {
        max-width: 760px;
    }

    .wn-ics-final-content h2 {
        max-width: 760px;
        font-size: clamp(48px, 7vw, 66px);
    }

    .wn-ics-final-content > p {
        max-width: 650px;
    }

    .wn-ics-final-visual {
        width: 100%;
    }

    .wn-ics-final-flow {
        grid-template-columns:
            minmax(125px, 0.95fr)
            minmax(50px, 0.36fr)
            minmax(145px, 1fr)
            minmax(50px, 0.36fr)
            minmax(165px, 1.15fr);
        gap: 14px;
    }
}


/* =========================================================
   MOBILE — ≤ 760px

   The desktop flow is rebuilt vertically:

   systems
      ↓
   connection layer
      ↓
   business result

   Nothing is simply scaled down. Meaningful labels stay
   readable and the graphic becomes a normal mobile story.
   ========================================================= */

@media (max-width: 760px) {

    .wn-ics-final {
        padding: 82px 0 55px;
    }

    .wn-ics-final .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-ics-final::before {
        background-size: 56px 56px;
    }

    .wn-ics-final-grid {
        gap: 50px;
    }

    .wn-ics-final-kicker {
        margin-bottom: 20px;
        font-size: 9px;
    }

    .wn-ics-final-content h2 {
        font-size: clamp(39px, 9.4vw, 52px);
        line-height: 1.02;
    }

    .wn-ics-final-content > p {
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.7;
    }

    .wn-ics-final-actions {
        align-items: stretch;
        flex-direction: column;
        width: min(100%, 390px);
        margin-top: 29px;
    }

    .wn-ics-final-primary,
    .wn-ics-final-secondary {
        width: 100%;
        min-width: 0;
        min-height: 52px;
    }

    .wn-ics-final-visual {
        width: min(100%, 520px);
        margin-inline: auto;
        padding: 21px 20px;
    }

    .wn-ics-final-visual::before {
        left: 20px;
        width: 76px;
    }

    .wn-ics-final-flow {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        width: min(100%, 390px);
        margin-inline: auto;
        padding: 31px 0 30px;
    }

    .wn-ics-final-systems {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .wn-ics-final-system {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 11px 9px;
        text-align: center;
    }

    .wn-ics-final-system > span {
        margin-inline: auto;
    }

    .wn-ics-final-system small {
        font-size: 6px;
    }

    .wn-ics-final-system strong {
        overflow: visible;
        font-size: 9px;
        text-overflow: clip;
        white-space: normal;
    }

    /*
     * Horizontal transmission lines become vertical arrows.
     */

    .wn-ics-final-route {
        width: 1px;
        height: 51px;
        margin: 0 auto;
    }

    .wn-ics-final-route > span {
        width: 1px;
        height: 100%;
        background: linear-gradient(
            180deg,
            rgba(47, 126, 230, 0.18),
            rgba(47, 126, 230, 0.72),
            rgba(47, 126, 230, 0.18)
        );
    }

    .wn-ics-final-route > span::before {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .wn-ics-final-route > span::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
    }

    .wn-ics-final-route small {
        position: absolute;
        top: 50%;
        left: 11px;
        width: max-content;
        margin: 0;
        transform: translateY(-50%);
    }

    .wn-ics-final-core {
        width: min(100%, 220px);
        margin-inline: auto;
        padding: 22px 18px 18px;
    }

    .wn-ics-final-core > span {
        font-size: 7px;
    }

    .wn-ics-final-core > strong {
        font-size: 14px;
    }

    .wn-ics-final-core > small {
        font-size: 6px;
    }

    .wn-ics-final-result {
        width: min(100%, 280px);
        margin-inline: auto;
        padding: 19px;
    }

    .wn-ics-final-result > span {
        font-size: 7px;
    }

    .wn-ics-final-result > strong {
        font-size: 14px;
    }

    .wn-ics-final-result-items span {
        font-size: 9px;
    }

    .wn-ics-final-trace {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        text-align: center;
    }

    .wn-ics-final-trace i {
        width: 1px;
        height: 14px;
        margin-inline: auto;
        background: rgba(47, 128, 237, 0.25);
    }

    .wn-ics-final-trace span {
        font-size: 6px;
        white-space: normal;
    }

    .wn-ics-final-close {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
        margin-top: 49px;
        text-align: center;
    }

    .wn-ics-final-close > i {
        width: 80px;
        margin-inline: auto;
    }

    .wn-ics-final-close > strong {
        text-align: center;
    }
}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Preserve the story while removing unnecessary horizontal
   pressure. Systems become a stacked list when three small
   columns would start reducing readability.
   ========================================================= */

@media (max-width: 520px) {

    .wn-ics-final .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-ics-final-content h2 {
        font-size: clamp(35px, 9.8vw, 44px);
        letter-spacing: -0.043em;
    }

    .wn-ics-final-visual {
        padding-inline: 15px;
    }

    .wn-ics-final-visual::before {
        left: 15px;
    }

    .wn-ics-final-visual-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .wn-ics-final-systems {
        grid-template-columns: minmax(0, 1fr);
        width: min(100%, 270px);
        margin-inline: auto;
    }

    .wn-ics-final-system {
        grid-template-columns: 30px minmax(0, 1fr);
        padding: 10px 12px;
        text-align: left;
    }

    .wn-ics-final-system > span {
        width: 30px;
        height: 30px;
        margin: 0;
    }

    .wn-ics-final-system small {
        font-size: 6px;
    }

    .wn-ics-final-system strong {
        font-size: 10px;
    }

    .wn-ics-final-core {
        width: min(100%, 210px);
    }

    .wn-ics-final-result {
        width: min(100%, 270px);
    }
}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Final narrow-screen protection.
   No fixed width can widen the viewport.
   ========================================================= */

@media (max-width: 380px) {

    .wn-ics-final .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-ics-final-content h2 {
        font-size: 33px;
    }

    .wn-ics-final-primary,
    .wn-ics-final-secondary {
        gap: 15px;
        padding-inline: 16px;
        font-size: 12px;
    }

    .wn-ics-final-visual {
        padding-inline: 12px;
    }

    .wn-ics-final-visual::before {
        left: 12px;
    }
}