/* =========================================================
   2CAN AUTOMATION
   ========================================================= */

:root {
    --automation-accent: #f4c542;
    --automation-purple: #a45cff;

    --automation-bg: #070709;
    --automation-panel: #0b0b0e;

    --automation-text: #f2f2f4;
    --automation-muted: #8c8c96;
    --automation-line: rgba(255, 255, 255, .085);
}


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

.automation-hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 145px max(5vw, 40px) 55px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 72% 42%,
            rgba(244, 197, 66, .055),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(164, 92, 255, .035),
            transparent 22%
        ),
        #070709;
}


/* technical grid */

.automation-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 2%,
            #000 22%,
            #000 82%,
            transparent
        );
}


/* =========================================================
   GRID
   ========================================================= */

.automation-hero__grid {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1500px;

    margin: auto;

    display: grid;
    grid-template-columns:
        minmax(460px, .88fr)
        minmax(560px, 1.12fr);

    align-items: center;

    gap: clamp(50px, 7vw, 120px);
}


/* =========================================================
   CONTENT
   ========================================================= */

.automation-hero__content {
    position: relative;
    z-index: 2;
}


.automation-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 31px;

    color: #74747e;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .18em;
}


.automation-hero__eyebrow span:first-child {
    color: var(--automation-accent);
}


.automation-hero__eyebrow i {
    width: 32px;
    height: 1px;

    background: rgba(255, 255, 255, .18);
}


/* title */

.automation-hero__title {
    margin: 0;

    color: var(--automation-text);

    font-size: clamp(62px, 6vw, 105px);
    font-weight: 500;

    line-height: .91;
    letter-spacing: -.065em;
}


.automation-hero__title span,
.automation-hero__title strong {
    display: block;
}


.automation-hero__title strong {
    color: var(--automation-accent);

    font-weight: 500;
}


/* lead */

.automation-hero__lead {
    max-width: 670px;

    margin: 42px 0 0;

    color: #9a9aa3;

    font-size: 18px;
    line-height: 1.72;
}


/* statement */

.automation-hero__statement {
    position: relative;

    margin: 31px 0 0;
    padding-left: 20px;

    color: #d0d0d5;

    font-size: 14px;
    font-weight: 500;

    letter-spacing: .01em;
}


.automation-hero__statement::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 7px;
    height: 7px;

    border: 1px solid var(--automation-accent);

    transform: translateY(-50%) rotate(45deg);
}


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

.automation-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 43px;
}


.automation-button {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    padding: 0 19px;

    text-decoration: none;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.automation-button span {
    font-size: 13px;

    transition: transform .3s ease;
}


.automation-button:hover span {
    transform: translate(3px, -3px);
}


.automation-button--primary {
    color: #080809;

    background: var(--automation-accent);

    border: 1px solid var(--automation-accent);
}


.automation-button--primary:hover {
    background: #ffd85c;
    border-color: #ffd85c;
}


.automation-button--secondary {
    color: #b9b9c0;

    border: 1px solid rgba(255, 255, 255, .12);
}


.automation-button--secondary:hover {
    color: #fff;

    border-color: rgba(255, 255, 255, .28);

    background: rgba(255, 255, 255, .025);
}


/* =========================================================
   TAGS
   ========================================================= */

.automation-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 36px;
}


.automation-hero__tags span {
    padding: 8px 10px;

    color: #62626b;

    border: 1px solid rgba(255, 255, 255, .07);

    background: rgba(255, 255, 255, .012);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .13em;
}


/* =========================================================
   TECHNICAL VISUAL
   ========================================================= */

.automation-hero__visual {
    position: relative;

    min-width: 0;
}


.automation-machine {
    position: relative;

    width: 100%;

    border: 1px solid rgba(255, 255, 255, .1);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .018),
            transparent 35%
        ),
        rgba(8, 8, 10, .72);

    box-shadow:
        0 35px 100px rgba(0, 0, 0, .35);
}


/* =========================================================
   MACHINE HEADER
   ========================================================= */

.automation-machine__header,
.automation-machine__footer {
    min-height: 55px;

    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    color: #55555e;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .16em;
}


.automation-machine__header {
    border-bottom: 1px solid var(--automation-line);
}


.automation-machine__footer {
    border-top: 1px solid var(--automation-line);
}


.automation-machine__header > div,
.automation-machine__footer > div {
    display: flex;
    align-items: center;
    gap: 8px;
}


.automation-machine__header i,
.automation-machine__footer i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 12px rgba(244, 197, 66, .7);
}


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

.automation-machine__stage {
    position: relative;

    min-height: 470px;

    padding: 36px 30px 32px;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .017) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .017) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
}


/* year */

.automation-machine__year {
    display: flex;
    align-items: center;

    margin-bottom: 76px;

    color: #4d4d55;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
}


.automation-machine__year i {
    position: relative;

    flex: 1;

    height: 1px;

    margin: 0 16px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .08),
            rgba(244, 197, 66, .55)
        );
}


.automation-machine__year i::after {
    content: "";

    position: absolute;

    right: -1px;
    top: -3px;

    width: 6px;
    height: 6px;

    border-top: 1px solid var(--automation-accent);
    border-right: 1px solid var(--automation-accent);

    transform: rotate(45deg);
}


.automation-machine__year strong {
    color: var(--automation-accent);

    font-size: inherit;
    font-weight: 700;
}


/* =========================================================
   FLOW
   ========================================================= */

.automation-machine__flow {
    display: flex;
    align-items: center;
}


.automation-node {
    position: relative;

    flex: 0 0 116px;

    min-height: 145px;

    display: flex;
    flex-direction: column;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, .09);

    background: rgba(6, 6, 8, .88);
}


.automation-node small {
    margin-bottom: auto;

    color: #4e4e56;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}


.automation-node strong {
    color: #b7b7be;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
}


.automation-node > span {
    margin-top: 9px;

    color: #4d4d55;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}


/* PLC */

.automation-node--plc {
    border-color: rgba(244, 197, 66, .35);

    box-shadow:
        inset 0 0 25px rgba(244, 197, 66, .025);
}


.automation-node--plc::before {
    content: "";

    position: absolute;

    left: -1px;
    top: -1px;

    width: 20px;
    height: 2px;

    background: var(--automation-accent);
}


.automation-node--plc strong {
    color: var(--automation-accent);
}


/* process */

.automation-node--process {
    border-color: rgba(164, 92, 255, .25);
}


.automation-node--process strong {
    color: #c6a4ff;
}


/* line */

.automation-flow-line {
    position: relative;

    flex: 1;

    min-width: 22px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .2),
            rgba(244, 197, 66, .65)
        );
}


.automation-flow-line i {
    position: absolute;

    right: 0;
    top: -3px;

    width: 6px;
    height: 6px;

    border-top: 1px solid var(--automation-accent);
    border-right: 1px solid var(--automation-accent);

    transform: rotate(45deg);
}


/* =========================================================
   SECONDARY FLOW
   ========================================================= */

.automation-machine__secondary {
    max-width: 480px;

    margin: 65px auto 0;

    display: flex;
    align-items: center;
    justify-content: center;
}


.automation-machine__secondary > div {
    text-align: center;
}


.automation-machine__secondary span {
    display: block;

    color: #8a8a93;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
}


.automation-machine__secondary small {
    display: block;

    margin-top: 6px;

    color: #3f3f47;

    font-size: 5px;
    font-weight: 700;
    letter-spacing: .12em;
}


.automation-machine__secondary > i {
    flex: 1;

    height: 1px;

    margin: 0 17px;

    background: rgba(164, 92, 255, .22);
}


/* =========================================================
   HERO BOTTOM
   ========================================================= */

.automation-hero__bottom {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1500px;

    margin: 55px auto 0;

    display: flex;
    align-items: center;
    gap: 18px;

    color: #45454d;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .17em;
}


.automation-hero__bottom div {
    flex: 1;

    height: 1px;

    background: rgba(255, 255, 255, .055);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {

    .automation-hero {
        min-height: auto;

        padding-top: 145px;
    }

    .automation-hero__grid {
        grid-template-columns: 1fr;
        gap: 75px;
    }

    .automation-hero__content {
        max-width: 800px;
    }

    .automation-hero__visual {
        max-width: 900px;
        width: 100%;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .automation-hero {
        padding:
            120px
            max(20px, 5vw)
            40px;
    }

    .automation-hero__grid {
        gap: 55px;
    }

    .automation-hero__eyebrow {
        margin-bottom: 24px;

        font-size: 7px;
    }

    .automation-hero__title {
        font-size: clamp(52px, 15vw, 75px);
    }

    .automation-hero__lead {
        margin-top: 31px;

        font-size: 16px;
        line-height: 1.65;
    }

    .automation-hero__statement {
        font-size: 13px;
    }

    .automation-hero__actions {
        flex-direction: column;

        align-items: stretch;
    }

    .automation-button {
        width: 100%;
    }

    .automation-machine__stage {
        min-height: auto;

        padding: 27px 18px;
    }

    .automation-machine__year {
        margin-bottom: 35px;
    }

    .automation-machine__flow {
        display: grid;
        grid-template-columns: 1fr 20px 1fr;
        gap: 8px;
    }

    .automation-node {
        min-height: 120px;

        flex: none;
    }

    .automation-flow-line {
        min-width: 0;
    }

    .automation-machine__flow
    .automation-flow-line:nth-of-type(2) {
        display: none;
    }

    .automation-machine__secondary {
        margin-top: 40px;
    }

    .automation-machine__secondary > i {
        margin: 0 8px;
    }

    .automation-machine__header,
    .automation-machine__footer {
        padding: 0 14px;

        font-size: 6px;
    }

    .automation-hero__bottom {
        margin-top: 38px;
    }

    .automation-hero__bottom span:last-child {
        display: none;
    }

}

/* =========================================================
   COMMON SECTION SHELL
   ========================================================= */

.automation-section-shell {
    position: relative;
    z-index: 2;

    width: min(1500px, 90%);
    margin: 0 auto;
}

.automation-section-meta {
    display: flex;
    align-items: center;
    gap: 13px;

    color: #55555e;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .18em;
}

.automation-section-meta > span {
    color: var(--automation-accent);
}

.automation-section-meta i {
    width: 34px;
    height: 1px;

    background: rgba(255, 255, 255, .13);
}

.automation-section-meta strong {
    font-size: inherit;
    font-weight: inherit;
}

.automation-section-eyebrow {
    margin: 0 0 21px;

    color: var(--automation-accent);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
}


/* =========================================================
   02 / CAPABILITIES
   ========================================================= */

.automation-capabilities {
    position: relative;

    padding: 145px 0 130px;

    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, .055);

    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(244, 197, 66, .035),
            transparent 25%
        ),
        #08080a;
}

.automation-capabilities::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


/* =========================================================
   HEADER
   ========================================================= */

.automation-capabilities__header {
    display: grid;

    grid-template-columns:
        minmax(190px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-bottom: 80px;
}

.automation-capabilities__intro {
    max-width: 1000px;
}

.automation-capabilities__intro h2 {
    margin: 0;

    color: #f2f2f4;

    font-size: clamp(48px, 5vw, 82px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.055em;
}

.automation-capabilities__intro h2 span {
    color: var(--automation-accent);
}

.automation-capabilities__intro > p:last-child {
    max-width: 760px;

    margin: 31px 0 0;

    color: #8d8d96;

    font-size: 17px;
    line-height: 1.72;
}


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

.automation-capabilities__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--automation-line);
    border-left: 1px solid var(--automation-line);
}

.automation-capability {
    position: relative;

    min-height: 390px;

    display: flex;
    flex-direction: column;

    padding: 28px;

    overflow: hidden;

    border-right: 1px solid var(--automation-line);
    border-bottom: 1px solid var(--automation-line);

    background: rgba(7, 7, 9, .55);

    transition:
        background .35s ease,
        border-color .35s ease;
}

.automation-capability::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: var(--automation-accent);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .4s ease;
}

.automation-capability:hover {
    background:
        linear-gradient(
            145deg,
            rgba(244, 197, 66, .045),
            rgba(7, 7, 9, .65) 55%
        );
}

.automation-capability:hover::after {
    transform: scaleX(1);
}


/* top */

.automation-capability__top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #46464e;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .16em;
}

.automation-capability__top span {
    color: var(--automation-accent);
}

.automation-capability__top small {
    font: inherit;
}


/* symbol */

.automation-capability__symbol {
    width: 65px;
    height: 65px;

    margin: 52px 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(244, 197, 66, .24);

    background: rgba(244, 197, 66, .025);

    color: var(--automation-accent);
}

.automation-capability__symbol span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}


/* content */

.automation-capability h3 {
    margin: 0;

    color: #dedee2;

    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.025em;
}

.automation-capability > p {
    max-width: 390px;

    margin: 17px 0 30px;

    color: #777781;

    font-size: 13px;
    line-height: 1.7;
}


/* tags */

.automation-capability__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: auto;
}

.automation-capability__tags span {
    padding: 6px 8px;

    color: #505059;

    border: 1px solid rgba(255, 255, 255, .06);

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}


/* integration card */

.automation-capability--accent {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(244, 197, 66, .075),
            transparent 35%
        ),
        rgba(7, 7, 9, .65);
}

.automation-capability--accent
.automation-capability__symbol {
    color: #09090a;

    background: var(--automation-accent);
    border-color: var(--automation-accent);
}


/* =========================================================
   BOTTOM STATEMENT
   ========================================================= */

.automation-capabilities__statement {
    min-height: 120px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 0 30px;

    border:
        1px solid
        rgba(255, 255, 255, .085);

    border-top: 0;

    background: rgba(255, 255, 255, .008);
}

.automation-capabilities__statement > span {
    color: #494951;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-capabilities__statement p {
    margin: 0;

    color: #85858e;

    font-size: 17px;
}

.automation-capabilities__statement strong {
    margin-left: 5px;

    color: var(--automation-accent);

    font-weight: 500;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .automation-capabilities {
        padding: 110px 0;
    }

    .automation-capabilities__header {
        grid-template-columns: 1fr;

        gap: 34px;

        margin-bottom: 60px;
    }

    .automation-capabilities__grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .automation-section-shell {
        width: calc(100% - 40px);
    }

    .automation-capabilities {
        padding: 90px 0 75px;
    }

    .automation-capabilities__intro h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .automation-capabilities__intro > p:last-child {
        font-size: 15px;
    }

    .automation-capabilities__grid {
        grid-template-columns: 1fr;
    }

    .automation-capability {
        min-height: 340px;

        padding: 24px;
    }

    .automation-capability__symbol {
        margin-top: 40px;
    }

    .automation-capabilities__statement {
        min-height: 150px;

        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 17px;

        padding: 25px;
    }

    .automation-capabilities__statement p {
        font-size: 15px;
        line-height: 1.5;
    }

}

/* =========================================================
   03 / RETROFIT
   ========================================================= */

.automation-retrofit {
    position: relative;

    padding: 145px 0 135px;

    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, .055);

    background:
        radial-gradient(
            circle at 72% 42%,
            rgba(244, 197, 66, .045),
            transparent 27%
        ),
        radial-gradient(
            circle at 15% 75%,
            rgba(164, 92, 255, .025),
            transparent 24%
        ),
        #070709;
}

.automation-retrofit::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


/* =========================================================
   HEADER
   ========================================================= */

.automation-retrofit__header {
    display: grid;

    grid-template-columns:
        minmax(190px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-bottom: 82px;
}

.automation-retrofit__intro {
    max-width: 1050px;
}

.automation-retrofit__intro h2 {
    margin: 0;

    color: #f2f2f4;

    font-size: clamp(48px, 5vw, 82px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.055em;
}

.automation-retrofit__intro h2 span {
    color: var(--automation-accent);
}

.automation-retrofit__intro > p:last-child {
    max-width: 790px;

    margin: 31px 0 0;

    color: #8d8d96;

    font-size: 17px;
    line-height: 1.72;
}


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

.automation-retrofit__architecture {
    border: 1px solid rgba(255, 255, 255, .09);

    background: rgba(6, 6, 8, .6);
}


/* header */

.automation-retrofit__architecture-head {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 0 24px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    color: #4d4d55;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-retrofit__architecture-head > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.automation-retrofit__architecture-head i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 11px rgba(244, 197, 66, .7);
}


/* =========================================================
   DIAGRAM
   ========================================================= */

.automation-retrofit__diagram {
    min-height: 560px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        170px
        minmax(0, 1fr);

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .014) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .014) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
}


/* =========================================================
   COLUMNS
   ========================================================= */

.automation-retrofit__column {
    padding: 34px;

    display: flex;
    flex-direction: column;
}

.automation-retrofit__column--machine {
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.automation-retrofit__column--new {
    border-left: 1px solid rgba(255, 255, 255, .06);
}


/* heading */

.automation-retrofit__column-head {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 45px;
}

.automation-retrofit__column-head > span {
    color: var(--automation-accent);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
}

.automation-retrofit__column-head div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.automation-retrofit__column-head small {
    color: #46464e;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .15em;
}

.automation-retrofit__column-head strong {
    color: #bdbdc4;

    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   EXISTING MACHINE
   ========================================================= */

.automation-retrofit__machine {
    flex: 1;

    padding: 25px;

    border: 1px solid rgba(255, 255, 255, .08);

    background: rgba(5, 5, 7, .82);
}

.automation-retrofit__machine-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 19px;

    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.automation-retrofit__machine-title span {
    color: #c1c1c7;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
}

.automation-retrofit__machine-title small {
    color: #414149;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}


/* parts */

.automation-retrofit__machine-parts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 1px;

    margin-top: 25px;

    background: rgba(255, 255, 255, .055);
}

.automation-retrofit__machine-parts > div {
    min-height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 16px;

    background: #08080a;
}

.automation-retrofit__machine-parts span {
    color: #92929b;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
}

.automation-retrofit__machine-parts small {
    margin-top: 7px;

    color: #46464f;

    font-size: 7px;
    line-height: 1.45;
}


/* =========================================================
   NEW AUTOMATION LAYERS
   ========================================================= */

.automation-retrofit__layers {
    flex: 1;

    border-top: 1px solid rgba(255, 255, 255, .075);
}

.automation-retrofit__layer {
    min-height: 78px;

    display: grid;
    grid-template-columns: 36px 1fr 8px;

    align-items: center;
    gap: 15px;

    padding: 0 17px;

    border-bottom: 1px solid rgba(255, 255, 255, .075);

    background: rgba(5, 5, 7, .72);
}

.automation-retrofit__layer > span {
    color: #494951;

    font-size: 7px;
    font-weight: 700;
}

.automation-retrofit__layer > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.automation-retrofit__layer small {
    color: #484850;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-retrofit__layer strong {
    color: #bcbcc3;

    font-size: 13px;
    font-weight: 500;
}

.automation-retrofit__layer > i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 9px rgba(244, 197, 66, .55);
}


/* =========================================================
   STATUS
   ========================================================= */

.automation-retrofit__status {
    min-height: 54px;

    margin-top: 20px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 15px;

    border: 1px solid rgba(255, 255, 255, .07);

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}

.automation-retrofit__status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;
}

.automation-retrofit__status span {
    color: #4d4d55;
}

.automation-retrofit__status strong {
    margin-left: auto;

    font-size: inherit;
}

.automation-retrofit__status--keep i {
    background: #7c7c84;
}

.automation-retrofit__status--keep strong {
    color: #888891;
}

.automation-retrofit__status--new {
    border-color: rgba(244, 197, 66, .15);
}

.automation-retrofit__status--new i {
    background: var(--automation-accent);

    box-shadow:
        0 0 9px rgba(244, 197, 66, .6);
}

.automation-retrofit__status--new strong {
    color: var(--automation-accent);
}


/* =========================================================
   BRIDGE
   ========================================================= */

.automation-retrofit__bridge {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;
}

.automation-retrofit__bridge > span {
    color: var(--automation-accent);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
}

.automation-retrofit__bridge-line {
    position: relative;

    width: 100%;
    height: 1px;

    margin: 21px 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .08),
            var(--automation-accent)
        );
}

.automation-retrofit__bridge-line i {
    position: absolute;

    right: 0;
    top: -3px;

    width: 6px;
    height: 6px;

    border-top: 1px solid var(--automation-accent);
    border-right: 1px solid var(--automation-accent);

    transform: rotate(45deg);
}

.automation-retrofit__bridge small {
    color: #414149;

    font-size: 5px;
    font-weight: 700;

    text-align: center;
    letter-spacing: .12em;
    line-height: 1.5;
}


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

.automation-retrofit__result {
    min-height: 110px;

    display: grid;

    grid-template-columns:
        240px
        1fr
        190px;

    align-items: center;

    gap: 30px;

    padding: 0 30px;

    border-top: 1px solid rgba(255, 255, 255, .08);

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .018),
            rgba(164, 92, 255, .015)
        );
}


/* result label */

.automation-retrofit__result-label {
    display: flex;
    align-items: center;
    gap: 14px;
}

.automation-retrofit__result-label > span {
    color: var(--automation-accent);

    font-size: 8px;
    font-weight: 700;
}

.automation-retrofit__result-label > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.automation-retrofit__result-label small {
    color: #44444c;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-retrofit__result-label strong {
    color: #bcbcc3;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}


/* result flow */

.automation-retrofit__result-flow {
    display: flex;
    align-items: center;

    min-width: 0;
}

.automation-retrofit__result-flow span {
    color: #606069;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .11em;

    white-space: nowrap;
}

.automation-retrofit__result-flow i {
    flex: 1;

    min-width: 15px;
    height: 1px;

    margin: 0 11px;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .35),
            rgba(164, 92, 255, .3)
        );
}


/* result status */

.automation-retrofit__result-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    color: #595962;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}

.automation-retrofit__result-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 10px rgba(244, 197, 66, .65);
}


/* =========================================================
   BOTTOM COPY
   ========================================================= */

.automation-retrofit__bottom {
    display: grid;

    grid-template-columns:
        minmax(220px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-top: 55px;

    padding-top: 35px;

    border-top: 1px solid rgba(255, 255, 255, .07);
}

.automation-retrofit__bottom > span {
    color: var(--automation-accent);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-retrofit__bottom p {
    max-width: 760px;

    margin: 0;

    color: #a0a0a8;

    font-size: 20px;
    line-height: 1.55;
    letter-spacing: -.015em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .automation-retrofit {
        padding: 110px 0;
    }

    .automation-retrofit__header {
        grid-template-columns: 1fr;

        gap: 34px;

        margin-bottom: 60px;
    }

    .automation-retrofit__diagram {
        grid-template-columns: 1fr;
    }

    .automation-retrofit__column--machine,
    .automation-retrofit__column--new {
        border: 0;
    }

    .automation-retrofit__bridge {
        min-height: 130px;

        border-top: 1px solid rgba(255, 255, 255, .06);
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .automation-retrofit__bridge-line {
        max-width: 300px;
    }

    .automation-retrofit__result {
        grid-template-columns: 1fr;

        gap: 24px;

        padding: 30px;
    }

    .automation-retrofit__result-status {
        justify-content: flex-start;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .automation-retrofit {
        padding: 90px 0 75px;
    }

    .automation-retrofit__intro h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .automation-retrofit__intro > p:last-child {
        font-size: 15px;
    }

    .automation-retrofit__architecture-head {
        padding: 0 15px;

        font-size: 6px;
    }

    .automation-retrofit__column {
        padding: 25px 18px;
    }

    .automation-retrofit__machine {
        padding: 17px;
    }

    .automation-retrofit__machine-parts {
        grid-template-columns: 1fr;
    }

    .automation-retrofit__machine-parts > div {
        min-height: 82px;
    }

    .automation-retrofit__result {
        padding: 25px 18px;
    }

    .automation-retrofit__result-flow {
        overflow-x: auto;

        padding-bottom: 8px;
    }

    .automation-retrofit__result-flow i {
        flex: 0 0 24px;
    }

    .automation-retrofit__bottom {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 42px;
    }

    .automation-retrofit__bottom p {
        font-size: 17px;
    }

}

/* =========================================================
   04 / INTEGRATION
   ========================================================= */

.automation-integration {
    position: relative;

    padding: 145px 0 135px;

    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, .055);

    background:
        radial-gradient(
            circle at 55% 50%,
            rgba(244, 197, 66, .035),
            transparent 30%
        ),
        #08080a;
}

.automation-integration::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


/* =========================================================
   HEADER
   ========================================================= */

.automation-integration__header {
    display: grid;

    grid-template-columns:
        minmax(190px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-bottom: 82px;
}

.automation-integration__intro {
    max-width: 1050px;
}

.automation-integration__intro h2 {
    margin: 0;

    color: #f2f2f4;

    font-size: clamp(48px, 5vw, 82px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.055em;
}

.automation-integration__intro h2 span {
    color: var(--automation-accent);
}

.automation-integration__intro > p:last-child {
    max-width: 790px;

    margin: 31px 0 0;

    color: #8d8d96;

    font-size: 17px;
    line-height: 1.72;
}


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

.automation-integration__system {
    border: 1px solid rgba(255, 255, 255, .09);

    background: rgba(6, 6, 8, .65);
}

.automation-integration__system-head {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 0 24px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    color: #4d4d55;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-integration__system-head > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.automation-integration__system-head i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 11px rgba(244, 197, 66, .7);
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.automation-integration__workspace {
    padding: 40px;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .014) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .014) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
}


/* =========================================================
   GENERIC LAYER
   ========================================================= */

.automation-integration__layer {
    padding: 25px;

    border: 1px solid rgba(255, 255, 255, .075);

    background: rgba(6, 6, 8, .78);
}

.automation-integration__layer-label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 23px;
}

.automation-integration__layer-label span {
    color: var(--automation-accent);

    font-size: 7px;
    font-weight: 700;
}

.automation-integration__layer-label small {
    color: #494951;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .15em;
}


/* =========================================================
   MACHINES
   ========================================================= */

.automation-integration__machines {
    display: flex;
    align-items: stretch;
}

.automation-integration__machine {
    flex: 1;

    min-height: 120px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    padding: 19px;

    border: 1px solid rgba(255, 255, 255, .075);

    background: #08080a;
}

.automation-integration__machine > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.automation-integration__machine small {
    color: #484850;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-integration__machine strong {
    color: #bcbcc3;

    font-size: 16px;
    font-weight: 500;
}

.automation-integration__machine > span {
    color: #55555e;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .12em;
}

.automation-integration__connector {
    position: relative;

    flex: 0 0 75px;

    display: flex;
    align-items: center;
}

.automation-integration__connector::before {
    content: "";

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .18),
            rgba(244, 197, 66, .65)
        );
}

.automation-integration__connector i {
    position: absolute;

    right: 0;

    width: 6px;
    height: 6px;

    border-top: 1px solid var(--automation-accent);
    border-right: 1px solid var(--automation-accent);

    transform: rotate(45deg);
}


/* =========================================================
   VERTICAL FLOW
   ========================================================= */

.automation-integration__vertical-flow {
    position: relative;

    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.automation-integration__vertical-flow span {
    position: absolute;

    left: calc(50% + 20px);

    color: #414149;

    font-size: 5px;
    font-weight: 700;
    letter-spacing: .13em;
}

.automation-integration__vertical-flow i {
    position: relative;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            rgba(244, 197, 66, .5),
            rgba(244, 197, 66, .15)
        );
}

.automation-integration__vertical-flow i::after {
    content: "";

    position: absolute;

    left: -3px;
    bottom: 0;

    width: 6px;
    height: 6px;

    border-right: 1px solid var(--automation-accent);
    border-bottom: 1px solid var(--automation-accent);

    transform: rotate(45deg);
}


/* =========================================================
   CONTROL
   ========================================================= */

.automation-integration__control {
    display: grid;

    grid-template-columns:
        150px
        minmax(260px, .9fr)
        minmax(300px, 1.1fr);

    border: 1px solid rgba(244, 197, 66, .17);

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .018),
            transparent 60%
        ),
        rgba(6, 6, 8, .8);
}

.automation-integration__control-meta {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 25px;

    border-right: 1px solid rgba(255, 255, 255, .07);
}

.automation-integration__control-meta span {
    color: var(--automation-accent);

    font-size: 8px;
    font-weight: 700;
}

.automation-integration__control-meta small {
    color: #4b4b53;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}


/* core */

.automation-integration__control-core {
    padding: 28px;

    border-right: 1px solid rgba(255, 255, 255, .07);
}

.automation-integration__control-core > small {
    color: #4b4b53;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-integration__control-core > strong {
    display: block;

    margin-top: 10px;

    color: var(--automation-accent);

    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.03em;
}

.automation-integration__control-core > p {
    margin: 7px 0 20px;

    color: #73737c;

    font-size: 11px;
}

.automation-integration__control-status {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #54545d;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .12em;
}

.automation-integration__control-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 9px rgba(244, 197, 66, .65);
}


/* control side */

.automation-integration__control-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.automation-integration__control-side > div {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 25px;
}

.automation-integration__control-side > div:first-child {
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.automation-integration__control-side small {
    color: #494951;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-integration__control-side strong {
    margin-top: 8px;

    color: #b1b1b8;

    font-size: 14px;
    font-weight: 500;
}

.automation-integration__control-side span {
    margin-top: 7px;

    color: #45454d;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .1em;
}


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

.automation-integration__network {
    min-height: 105px;

    display: grid;
    grid-template-columns: 150px 1fr;

    align-items: center;

    margin-top: 1px;

    border: 1px solid rgba(255, 255, 255, .07);

    background: rgba(6, 6, 8, .75);
}

.automation-integration__network > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 25px;
}

.automation-integration__network > div:first-child span {
    color: var(--automation-accent);

    font-size: 8px;
    font-weight: 700;
}

.automation-integration__network > div:first-child small {
    color: #484850;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}


/* network line */

.automation-integration__network-line {
    display: flex;
    align-items: center;

    padding: 0 30px;
}

.automation-integration__network-line span {
    color: #62626b;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .11em;

    white-space: nowrap;
}

.automation-integration__network-line i {
    flex: 1;

    min-width: 25px;
    height: 1px;

    margin: 0 15px;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .32),
            rgba(164, 92, 255, .25)
        );
}


/* =========================================================
   UPPER LAYER
   ========================================================= */

.automation-integration__upper {
    margin-top: 22px;
}

.automation-integration__upper-meta {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 15px;
}

.automation-integration__upper-meta span {
    color: var(--automation-accent);

    font-size: 8px;
    font-weight: 700;
}

.automation-integration__upper-meta small {
    color: #484850;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-integration__upper-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 1px;

    background: rgba(255, 255, 255, .07);
}

.automation-integration__upper-card {
    min-height: 140px;

    padding: 23px;

    background: #08080a;
}

.automation-integration__upper-card small {
    color: #484850;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-integration__upper-card strong {
    display: block;

    margin-top: 27px;

    color: #b8b8bf;

    font-size: 17px;
    font-weight: 500;
}

.automation-integration__upper-card p {
    margin: 9px 0 0;

    color: #595962;

    font-size: 10px;
    line-height: 1.5;
}

.automation-integration__upper-card--accent {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(244, 197, 66, .07),
            transparent 40%
        ),
        #08080a;
}

.automation-integration__upper-card--accent strong {
    color: var(--automation-accent);
}


/* =========================================================
   SYSTEM FLOW
   ========================================================= */

.automation-integration__flow {
    min-height: 100px;

    display: flex;
    align-items: center;

    padding: 0 30px;

    border-top: 1px solid rgba(255, 255, 255, .08);

    color: #595962;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .12em;
}

.automation-integration__flow span {
    white-space: nowrap;
}

.automation-integration__flow i {
    position: relative;

    flex: 1;

    min-width: 20px;
    height: 1px;

    margin: 0 15px;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .4),
            rgba(164, 92, 255, .3)
        );
}

.automation-integration__flow i::after {
    content: "";

    position: absolute;

    right: 0;
    top: -3px;

    width: 6px;
    height: 6px;

    border-top: 1px solid var(--automation-purple);
    border-right: 1px solid var(--automation-purple);

    transform: rotate(45deg);
}


/* =========================================================
   STATEMENT
   ========================================================= */

.automation-integration__statement {
    display: grid;

    grid-template-columns:
        minmax(220px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-top: 55px;

    padding-top: 35px;

    border-top: 1px solid rgba(255, 255, 255, .07);
}

.automation-integration__statement > span {
    color: var(--automation-accent);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-integration__statement p {
    max-width: 800px;

    margin: 0;

    color: #9999a2;

    font-size: 19px;
    line-height: 1.55;
}

.automation-integration__statement strong {
    color: #d0d0d5;

    font-weight: 500;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .automation-integration {
        padding: 110px 0;
    }

    .automation-integration__header {
        grid-template-columns: 1fr;

        gap: 34px;

        margin-bottom: 60px;
    }

    .automation-integration__workspace {
        padding: 25px;
    }

    .automation-integration__control {
        grid-template-columns: 1fr;
    }

    .automation-integration__control-meta,
    .automation-integration__control-core {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .automation-integration__statement {
        grid-template-columns: 1fr;

        gap: 20px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .automation-integration {
        padding: 90px 0 75px;
    }

    .automation-integration__intro h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .automation-integration__intro > p:last-child {
        font-size: 15px;
    }

    .automation-integration__workspace {
        padding: 17px;
    }

    .automation-integration__machines {
        flex-direction: column;
    }

    .automation-integration__machine {
        min-height: 100px;
    }

    .automation-integration__connector {
        flex: 0 0 45px;

        width: 1px;

        align-self: center;
    }

    .automation-integration__connector::before {
        width: 1px;
        height: 100%;

        background: rgba(244, 197, 66, .4);
    }

    .automation-integration__connector i {
        right: -3px;
        bottom: 0;

        transform: rotate(135deg);
    }

    .automation-integration__control-side {
        grid-template-columns: 1fr;
    }

    .automation-integration__control-side > div:first-child {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .automation-integration__network {
        grid-template-columns: 1fr;
    }

    .automation-integration__network-line {
        overflow-x: auto;

        padding: 20px;
    }

    .automation-integration__network-line i {
        flex: 0 0 30px;
    }

    .automation-integration__upper-grid {
        grid-template-columns: 1fr;
    }

    .automation-integration__flow {
        min-height: 82px;

        padding: 0 18px;

        overflow-x: auto;
    }

    .automation-integration__flow i {
        flex: 0 0 28px;

        margin: 0 9px;
    }

    .automation-integration__statement p {
        font-size: 17px;
    }

}

/* =========================================================
   05 / PROCESS
   ========================================================= */

.automation-process {
    position: relative;

    padding: 145px 0 135px;

    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, .055);

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(244, 197, 66, .025),
            transparent 28%
        ),
        #070709;
}

.automation-process::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .01) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .01) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


/* =========================================================
   HEADER
   ========================================================= */

.automation-process__header {
    display: grid;

    grid-template-columns:
        minmax(190px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-bottom: 90px;
}

.automation-process__intro {
    max-width: 1050px;
}

.automation-process__intro h2 {
    margin: 0;

    color: #f2f2f4;

    font-size: clamp(48px, 5vw, 82px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.055em;
}

.automation-process__intro h2 span {
    color: var(--automation-accent);
}

.automation-process__intro > p:last-child {
    max-width: 800px;

    margin: 31px 0 0;

    color: #8d8d96;

    font-size: 17px;
    line-height: 1.72;
}


/* =========================================================
   PROCESS PATH
   ========================================================= */

.automation-process__path {
    position: relative;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid rgba(255, 255, 255, .085);
    border-left: 1px solid rgba(255, 255, 255, .085);
}


/* main process line */

.automation-process__path::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 101px;

    height: 1px;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .15),
            rgba(244, 197, 66, .7) 55%,
            rgba(164, 92, 255, .38)
        );
}


/* =========================================================
   STEP
   ========================================================= */

.automation-process__step {
    position: relative;

    min-height: 390px;

    display: flex;
    flex-direction: column;

    padding: 25px 24px;

    border-right: 1px solid rgba(255, 255, 255, .085);
    border-bottom: 1px solid rgba(255, 255, 255, .085);

    background: rgba(7, 7, 9, .55);
}

.automation-process__step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #484850;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .15em;
}

.automation-process__step-head span {
    color: var(--automation-accent);

    font-size: 7px;
}

.automation-process__step-head small {
    font: inherit;
}


/* marker */

.automation-process__marker {
    position: relative;
    z-index: 3;

    height: 52px;

    display: flex;
    align-items: flex-end;

    margin-bottom: 42px;
}

.automation-process__marker i {
    position: relative;

    width: 11px;
    height: 11px;

    border: 1px solid rgba(244, 197, 66, .75);

    border-radius: 50%;

    background: #070709;
}

.automation-process__marker i::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--automation-accent);

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 9px rgba(244, 197, 66, .7);
}


/* text */

.automation-process__step h3 {
    margin: 0;

    color: #d7d7dc;

    font-size: 21px;
    font-weight: 500;

    letter-spacing: -.025em;
}

.automation-process__step > p {
    margin: 17px 0 28px;

    color: #73737d;

    font-size: 12px;
    line-height: 1.7;
}

.automation-process__step-footer {
    margin-top: auto;

    color: #42424a;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: .12em;
}


/* =========================================================
   ACTIVE / COMMISSIONING
   ========================================================= */

.automation-process__step--active {
    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(244, 197, 66, .07),
            transparent 45%
        ),
        rgba(7, 7, 9, .65);
}

.automation-process__step--active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: var(--automation-accent);
}

.automation-process__step--active
.automation-process__marker i {
    background: var(--automation-accent);

    box-shadow:
        0 0 16px rgba(244, 197, 66, .4);
}

.automation-process__step--active
.automation-process__marker i::after {
    background: #080809;

    box-shadow: none;
}


/* =========================================================
   ENGINEERING RULE
   ========================================================= */

.automation-process__rule {
    margin-top: 55px;

    border: 1px solid rgba(255, 255, 255, .085);

    background:
        linear-gradient(
            120deg,
            rgba(244, 197, 66, .018),
            transparent 55%
        ),
        rgba(7, 7, 9, .6);
}


/* meta */

.automation-process__rule-meta {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0 23px;

    border-bottom: 1px solid rgba(255, 255, 255, .07);

    color: #494951;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .16em;
}

.automation-process__rule-meta > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.automation-process__rule-meta i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 10px rgba(244, 197, 66, .65);
}


/* content */

.automation-process__rule-content {
    min-height: 165px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;

    padding: 30px 45px;
}

.automation-process__rule-content p {
    margin: 0;

    color: #a1a1a9;

    font-size: clamp(23px, 2.5vw, 37px);
    font-weight: 400;

    line-height: 1.25;
    letter-spacing: -.035em;
}

.automation-process__rule-content strong {
    color: var(--automation-accent);

    font-weight: 500;
}

.automation-process__rule-content > span {
    flex: 0 0 auto;

    color: #55555e;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .automation-process {
        padding: 110px 0;
    }

    .automation-process__header {
        grid-template-columns: 1fr;

        gap: 34px;

        margin-bottom: 65px;
    }

    .automation-process__path {
        grid-template-columns: repeat(2, 1fr);
    }

    .automation-process__path::before {
        display: none;
    }

    .automation-process__step {
        min-height: 330px;
    }

    .automation-process__marker {
        height: 40px;

        margin-bottom: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .automation-process {
        padding: 90px 0 75px;
    }

    .automation-process__intro h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .automation-process__intro > p:last-child {
        font-size: 15px;
    }

    .automation-process__path {
        grid-template-columns: 1fr;
    }

    .automation-process__step {
        min-height: 285px;

        padding: 23px;
    }

    .automation-process__marker {
        height: 33px;

        margin-bottom: 26px;
    }

    .automation-process__rule {
        margin-top: 40px;
    }

    .automation-process__rule-meta {
        padding: 0 16px;
    }

    .automation-process__rule-content {
        min-height: 160px;

        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 20px;

        padding: 28px 23px;
    }

    .automation-process__rule-content p {
        font-size: 25px;
    }

}

/* =========================================================
   07 / REAL ENGINEERING
   ========================================================= */

.automation-case {
    position: relative;

    padding: 150px 0 145px;

    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, .06);

    background:
        radial-gradient(
            circle at 20% 34%,
            rgba(244, 197, 66, .055),
            transparent 25%
        ),
        radial-gradient(
            circle at 82% 67%,
            rgba(164, 92, 255, .035),
            transparent 24%
        ),
        #060608;
}

.automation-case::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


/* =========================================================
   HEADER
   ========================================================= */

.automation-case__header {
    display: grid;

    grid-template-columns:
        minmax(190px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-bottom: 85px;
}

.automation-case__intro {
    max-width: 1050px;
}

.automation-case__intro h2 {
    margin: 0;

    color: #f2f2f4;

    font-size: clamp(48px, 5vw, 82px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.055em;
}

.automation-case__intro h2 span {
    color: var(--automation-accent);
}


/* =========================================================
   YEAR HERO
   ========================================================= */

.automation-case__hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        210px
        minmax(0, 1fr);

    align-items: stretch;

    border: 1px solid rgba(255, 255, 255, .09);

    background: rgba(5, 5, 7, .68);
}


/* YEAR */

.automation-case__year {
    min-height: 340px;

    display: flex;
    flex-direction: column;

    padding: 28px 32px;
}

.automation-case__year--modern {
    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(244, 197, 66, .07),
            transparent 38%
        );
}

.automation-case__year-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #4c4c54;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .15em;
}

.automation-case__year-meta small {
    font: inherit;
}

.automation-case__year > strong {
    margin: auto 0;

    color: #25252a;

    font-size: clamp(90px, 11vw, 180px);
    font-weight: 500;

    line-height: .8;
    letter-spacing: -.08em;
}

.automation-case__year--modern > strong {
    color: var(--automation-accent);

    text-shadow:
        0 0 70px rgba(244, 197, 66, .08);
}

.automation-case__year-status {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #505059;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}

.automation-case__year-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #6e6e76;
}

.automation-case__year--modern
.automation-case__year-status i {
    background: var(--automation-accent);

    box-shadow:
        0 0 10px rgba(244, 197, 66, .65);
}


/* =========================================================
   RETROFIT ARROW
   ========================================================= */

.automation-case__arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    border-left: 1px solid rgba(255, 255, 255, .07);
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.automation-case__arrow > span {
    color: var(--automation-accent);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-case__arrow > div {
    position: relative;

    width: 100%;
    height: 1px;

    margin: 25px 0;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .15),
            var(--automation-accent)
        );
}

.automation-case__arrow > div i {
    position: absolute;

    right: 0;
    top: -4px;

    width: 7px;
    height: 7px;

    border-top: 1px solid var(--automation-accent);
    border-right: 1px solid var(--automation-accent);

    transform: rotate(45deg);
}

.automation-case__arrow small {
    color: #44444c;

    font-size: 5px;
    font-weight: 700;

    text-align: center;

    letter-spacing: .13em;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.automation-case__statement {
    display: grid;

    grid-template-columns:
        minmax(190px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    padding: 80px 0;
}

.automation-case__statement > span {
    padding-top: 8px;

    color: var(--automation-accent);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-case__statement h3 {
    max-width: 900px;

    margin: 0;

    color: #d0d0d5;

    font-size: clamp(31px, 3.7vw, 58px);
    font-weight: 400;

    line-height: 1.07;
    letter-spacing: -.045em;
}

.automation-case__statement h3 strong {
    display: block;

    margin-top: 8px;

    color: var(--automation-accent);

    font-weight: 500;
}

.automation-case__statement p {
    max-width: 790px;

    margin: 30px 0 0;

    color: #81818a;

    font-size: 16px;
    line-height: 1.75;
}


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

.automation-case__architecture {
    border: 1px solid rgba(255, 255, 255, .09);

    background: rgba(5, 5, 7, .7);
}

.automation-case__architecture-head {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 0 24px;

    border-bottom: 1px solid rgba(255, 255, 255, .075);

    color: #4d4d55;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-case__architecture-head > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.automation-case__architecture-head i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 10px rgba(244, 197, 66, .65);
}


/* =========================================================
   ARCHITECTURE BODY
   ========================================================= */

.automation-case__architecture-body {
    display: grid;

    grid-template-columns:
        minmax(140px, 1fr)
        55px
        minmax(140px, 1fr)
        55px
        minmax(140px, 1fr)
        55px
        minmax(140px, 1fr)
        55px
        minmax(140px, 1fr);

    align-items: stretch;

    padding: 40px;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .014) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .014) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
}


/* NODE */

.automation-case__node {
    min-height: 175px;

    display: flex;
    flex-direction: column;

    padding: 18px;

    border: 1px solid rgba(255, 255, 255, .08);

    background: #08080a;
}

.automation-case__node-number {
    color: #46464e;

    font-size: 6px;
    font-weight: 700;
}

.automation-case__node-content {
    margin-top: auto;

    display: flex;
    flex-direction: column;
}

.automation-case__node-content small {
    color: #484850;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}

.automation-case__node-content strong {
    margin-top: 8px;

    color: #b9b9c0;

    font-size: 16px;
    font-weight: 500;
}

.automation-case__node-content span {
    margin-top: 7px;

    color: #4d4d55;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .12em;
}


/* PLC */

.automation-case__node--accent {
    border-color: rgba(244, 197, 66, .25);

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(244, 197, 66, .08),
            transparent 42%
        ),
        #08080a;
}

.automation-case__node--accent
.automation-case__node-number,

.automation-case__node--accent
.automation-case__node-content strong {
    color: var(--automation-accent);
}


/* PROCESS */

.automation-case__node--process {
    border-color: rgba(164, 92, 255, .18);

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(164, 92, 255, .065),
            transparent 42%
        ),
        #08080a;
}


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

.automation-case__connection {
    position: relative;

    display: flex;
    align-items: center;
}

.automation-case__connection::before {
    content: "";

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .2),
            rgba(244, 197, 66, .65)
        );
}

.automation-case__connection i {
    position: absolute;

    right: 0;

    width: 6px;
    height: 6px;

    border-top: 1px solid var(--automation-accent);
    border-right: 1px solid var(--automation-accent);

    transform: rotate(45deg);
}


/* =========================================================
   ENGINEERING SYSTEMS
   ========================================================= */

.automation-case__systems {
    padding: 0 40px 40px;
}

.automation-case__systems-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 15px;

    color: #47474f;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-case__systems-label small {
    font: inherit;
}

.automation-case__systems-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 1px;

    background: rgba(255, 255, 255, .07);
}

.automation-case__systems-grid > div {
    min-height: 125px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 18px;

    background: #08080a;
}

.automation-case__systems-grid small {
    color: #46464e;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}

.automation-case__systems-grid strong {
    margin-top: 20px;

    color: #b2b2ba;

    font-size: 14px;
    font-weight: 500;
}

.automation-case__systems-grid span {
    margin-top: 7px;

    color: #4d4d55;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .12em;
}


/* =========================================================
   TECH FOOTER
   ========================================================= */

.automation-case__tech {
    min-height: 76px;

    display: flex;
    align-items: center;

    padding: 0 30px;

    border-top: 1px solid rgba(255, 255, 255, .075);

    color: #55555e;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .12em;
}

.automation-case__tech span {
    white-space: nowrap;
}

.automation-case__tech i {
    flex: 1;

    min-width: 20px;
    height: 1px;

    margin: 0 14px;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .3),
            rgba(164, 92, 255, .25)
        );
}


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

.automation-case__result {
    margin-top: 55px;

    border: 1px solid rgba(244, 197, 66, .13);

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(244, 197, 66, .055),
            transparent 32%
        ),
        #070709;
}

.automation-case__result-meta {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 0 23px;

    border-bottom: 1px solid rgba(255, 255, 255, .07);

    color: #4b4b53;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .15em;
}

.automation-case__result-meta > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.automation-case__result-meta i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 10px rgba(244, 197, 66, .65);
}

.automation-case__result-content {
    min-height: 250px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 70px;

    align-items: center;

    padding: 45px;
}

.automation-case__result-content p {
    margin: 0;

    color: #8f8f98;

    font-size: clamp(25px, 2.8vw, 42px);
    font-weight: 400;

    line-height: 1.2;
    letter-spacing: -.04em;
}

.automation-case__result-content p span {
    color: #55555d;
}

.automation-case__result-content strong {
    color: var(--automation-accent);

    font-weight: 500;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1150px) {

    .automation-case__architecture-body {
        grid-template-columns:
            minmax(120px, 1fr)
            35px
            minmax(120px, 1fr)
            35px
            minmax(120px, 1fr)
            35px
            minmax(120px, 1fr)
            35px
            minmax(120px, 1fr);

        padding: 25px;
    }

}


@media (max-width: 1050px) {

    .automation-case {
        padding: 110px 0;
    }

    .automation-case__header,
    .automation-case__statement {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .automation-case__hero {
        grid-template-columns: 1fr;
    }

    .automation-case__arrow {
        min-height: 120px;

        border-left: 0;
        border-right: 0;

        border-top: 1px solid rgba(255, 255, 255, .07);
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .automation-case__arrow > div {
        max-width: 300px;
    }

    .automation-case__architecture-body {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .automation-case__node {
        min-height: 135px;
    }

    .automation-case__connection {
        width: 1px;
        height: 55px;

        justify-self: center;
    }

    .automation-case__connection::before {
        width: 1px;
        height: 100%;

        background:
            linear-gradient(
                to bottom,
                rgba(244, 197, 66, .2),
                rgba(244, 197, 66, .65)
            );
    }

    .automation-case__connection i {
        right: -3px;
        bottom: 0;

        transform: rotate(135deg);
    }

    .automation-case__systems-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .automation-case {
        padding: 90px 0 75px;
    }

    .automation-case__intro h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .automation-case__year {
        min-height: 260px;

        padding: 22px;
    }

    .automation-case__year > strong {
        font-size: clamp(90px, 30vw, 135px);
    }

    .automation-case__statement {
        padding: 60px 0;
    }

    .automation-case__statement p {
        font-size: 15px;
    }

    .automation-case__architecture-head {
        padding: 0 16px;

        font-size: 6px;
    }

    .automation-case__architecture-body {
        padding: 18px;
    }

    .automation-case__systems {
        padding: 0 18px 18px;
    }

    .automation-case__systems-label {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;
    }

    .automation-case__systems-grid {
        grid-template-columns: 1fr;
    }

    .automation-case__tech {
        overflow-x: auto;

        padding: 0 18px;
    }

    .automation-case__tech i {
        flex: 0 0 28px;
    }

    .automation-case__result {
        margin-top: 40px;
    }

    .automation-case__result-meta {
        padding: 0 16px;
    }

    .automation-case__result-content {
        min-height: 0;

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 35px 23px;
    }

    .automation-case__result-content p {
        font-size: 27px;
    }

}
/* =========================================================
   06 / TECHNOLOGIES
   ========================================================= */

.automation-tech {
    position: relative;

    padding: 145px 0 135px;

    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, .055);

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(164, 92, 255, .035),
            transparent 24%
        ),
        radial-gradient(
            circle at 25% 70%,
            rgba(244, 197, 66, .025),
            transparent 28%
        ),
        #08080a;
}

.automation-tech::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


/* =========================================================
   HEADER
   ========================================================= */

.automation-tech__header {
    display: grid;

    grid-template-columns:
        minmax(190px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-bottom: 82px;
}

.automation-tech__intro {
    max-width: 1050px;
}

.automation-tech__intro h2 {
    margin: 0;

    color: #f2f2f4;

    font-size: clamp(48px, 5vw, 82px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.055em;
}

.automation-tech__intro h2 span {
    color: var(--automation-accent);
}

.automation-tech__intro > p:last-child {
    max-width: 790px;

    margin: 31px 0 0;

    color: #8d8d96;

    font-size: 17px;
    line-height: 1.72;
}


/* =========================================================
   STACK
   ========================================================= */

.automation-tech__stack {
    border: 1px solid rgba(255, 255, 255, .09);

    background: rgba(6, 6, 8, .65);
}

.automation-tech__stack-head {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 0 24px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    color: #4d4d55;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-tech__stack-head > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.automation-tech__stack-head i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 10px rgba(244, 197, 66, .65);
}


/* =========================================================
   GRID
   ========================================================= */

.automation-tech__grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1px;

    padding: 1px;

    background: rgba(255, 255, 255, .065);
}


/* =========================================================
   CARD
   ========================================================= */

.automation-tech__card {
    position: relative;

    min-height: 300px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    background: #08080a;

    overflow: hidden;
}

.automation-tech__card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    opacity: 0;

    background: var(--automation-accent);

    transition: opacity .25s ease;
}

.automation-tech__card:hover::after {
    opacity: .7;
}


/* head */

.automation-tech__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #47474f;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .15em;
}

.automation-tech__card-head span {
    color: var(--automation-accent);

    font-size: 7px;
}

.automation-tech__card-head small {
    font: inherit;
}


/* title */

.automation-tech__card h3 {
    margin: 64px 0 0;

    color: #c3c3c9;

    font-size: 20px;
    font-weight: 500;

    letter-spacing: -.025em;
}


/* description */

.automation-tech__card p {
    max-width: 280px;

    margin: 14px 0 28px;

    color: #696972;

    font-size: 11px;
    line-height: 1.65;
}


/* tags */

.automation-tech__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: auto;
}

.automation-tech__tags span {
    padding: 6px 8px;

    border: 1px solid rgba(255, 255, 255, .07);

    color: #505058;

    font-size: 5px;
    font-weight: 700;

    letter-spacing: .12em;
}


/* =========================================================
   ACCENT CARDS
   ========================================================= */

.automation-tech__card--accent {
    border-color: rgba(244, 197, 66, .16);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(244, 197, 66, .07),
            transparent 42%
        ),
        #08080a;
}

.automation-tech__card--accent h3 {
    color: var(--automation-accent);
}


.automation-tech__card--network {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(244, 197, 66, .035),
            transparent 42%
        ),
        #08080a;
}


.automation-tech__card--software {
    grid-column: span 2;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(164, 92, 255, .07),
            transparent 36%
        ),
        #08080a;
}

.automation-tech__card--software h3 {
    color: #c9b0eb;
}


/* =========================================================
   FLOW
   ========================================================= */

.automation-tech__flow {
    min-height: 94px;

    display: flex;
    align-items: center;

    padding: 0 30px;

    border-top: 1px solid rgba(255, 255, 255, .075);

    color: #55555e;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .12em;
}

.automation-tech__flow span {
    white-space: nowrap;
}

.automation-tech__flow i {
    position: relative;

    flex: 1;

    min-width: 20px;
    height: 1px;

    margin: 0 14px;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .35),
            rgba(164, 92, 255, .3)
        );
}

.automation-tech__flow i::after {
    content: "";

    position: absolute;

    right: 0;
    top: -3px;

    width: 6px;
    height: 6px;

    border-top: 1px solid rgba(164, 92, 255, .65);
    border-right: 1px solid rgba(164, 92, 255, .65);

    transform: rotate(45deg);
}


/* =========================================================
   PRINCIPLE
   ========================================================= */

.automation-tech__principle {
    display: grid;

    grid-template-columns:
        minmax(220px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-top: 55px;

    padding-top: 35px;

    border-top: 1px solid rgba(255, 255, 255, .07);
}

.automation-tech__principle > div {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.automation-tech__principle > div span {
    color: var(--automation-accent);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-tech__principle > div small {
    color: #44444c;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-tech__principle p {
    max-width: 820px;

    margin: 0;

    color: #9a9aa3;

    font-size: 20px;
    line-height: 1.55;

    letter-spacing: -.015em;
}

.automation-tech__principle strong {
    color: #d4d4d9;

    font-weight: 500;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .automation-tech {
        padding: 110px 0;
    }

    .automation-tech__header {
        grid-template-columns: 1fr;

        gap: 34px;

        margin-bottom: 60px;
    }

    .automation-tech__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .automation-tech__card--software {
        grid-column: span 2;
    }

    .automation-tech__principle {
        grid-template-columns: 1fr;

        gap: 20px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .automation-tech {
        padding: 90px 0 75px;
    }

    .automation-tech__intro h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .automation-tech__intro > p:last-child {
        font-size: 15px;
    }

    .automation-tech__stack-head {
        padding: 0 16px;

        font-size: 6px;
    }

    .automation-tech__grid {
        grid-template-columns: 1fr;
    }

    .automation-tech__card,
    .automation-tech__card--software {
        grid-column: auto;

        min-height: 255px;

        padding: 22px;
    }

    .automation-tech__card h3 {
        margin-top: 45px;
    }

    .automation-tech__flow {
        min-height: 82px;

        padding: 0 18px;

        overflow-x: auto;
    }

    .automation-tech__flow i {
        flex: 0 0 28px;

        margin: 0 9px;
    }

    .automation-tech__principle p {
        font-size: 17px;
    }

}

/* =========================================================
   08 / FAQ
   ========================================================= */

.automation-faq {
    position: relative;

    padding: 145px 0 135px;

    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, .055);

    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(244, 197, 66, .025),
            transparent 25%
        ),
        #08080a;
}

.automation-faq::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .01) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .01) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


/* =========================================================
   HEADER
   ========================================================= */

.automation-faq__header {
    display: grid;

    grid-template-columns:
        minmax(190px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-bottom: 85px;
}

.automation-faq__intro {
    max-width: 1050px;
}

.automation-faq__intro h2 {
    margin: 0;

    color: #f2f2f4;

    font-size: clamp(48px, 5vw, 82px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.055em;
}

.automation-faq__intro h2 span {
    color: var(--automation-accent);
}

.automation-faq__intro > p:last-child {
    max-width: 790px;

    margin: 31px 0 0;

    color: #8d8d96;

    font-size: 17px;
    line-height: 1.72;
}


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

.automation-faq__layout {
    display: grid;

    grid-template-columns:
        minmax(230px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;
}


/* =========================================================
   SIDE
   ========================================================= */

.automation-faq__side {
    align-self: start;

    position: sticky;
    top: 120px;

    padding-top: 23px;

    border-top: 1px solid rgba(255, 255, 255, .08);
}

.automation-faq__side > span {
    color: var(--automation-accent);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-faq__side > p {
    max-width: 280px;

    margin: 20px 0 35px;

    color: #686871;

    font-size: 12px;
    line-height: 1.7;
}

.automation-faq__side-status {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #494951;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}

.automation-faq__side-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 9px rgba(244, 197, 66, .55);
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.automation-faq__list {
    border-top: 1px solid rgba(255, 255, 255, .09);
}


/* =========================================================
   ITEM
   ========================================================= */

.automation-faq__item {
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.automation-faq__item summary {
    min-height: 105px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    padding: 25px 0;

    cursor: pointer;

    list-style: none;
}

.automation-faq__item summary::-webkit-details-marker {
    display: none;
}


/* QUESTION */

.automation-faq__question {
    display: flex;
    align-items: center;

    gap: 25px;
}

.automation-faq__question > span {
    flex: 0 0 28px;

    color: var(--automation-accent);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .12em;
}

.automation-faq__question h3 {
    margin: 0;

    color: #bdbdc4;

    font-size: 17px;
    font-weight: 500;

    line-height: 1.4;
    letter-spacing: -.015em;

    transition: color .2s ease;
}

.automation-faq__item summary:hover
.automation-faq__question h3 {
    color: #e0e0e4;
}


/* =========================================================
   PLUS / MINUS
   ========================================================= */

.automation-faq__toggle {
    position: relative;

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    border: 1px solid rgba(255, 255, 255, .08);
}

.automation-faq__toggle i {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 1px;

    background: #676770;

    transform: translate(-50%, -50%);

    transition:
        transform .25s ease,
        background .25s ease;
}

.automation-faq__toggle i:last-child {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

.automation-faq__item[open]
.automation-faq__toggle {
    border-color: rgba(244, 197, 66, .25);
}

.automation-faq__item[open]
.automation-faq__toggle i {
    background: var(--automation-accent);
}

.automation-faq__item[open]
.automation-faq__toggle i:last-child {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}


/* =========================================================
   ANSWER
   ========================================================= */

.automation-faq__answer {
    padding:
        0
        65px
        35px
        53px;
}

.automation-faq__answer p {
    max-width: 760px;

    margin: 0;

    color: #777780;

    font-size: 14px;
    line-height: 1.75;
}


/* open state */

.automation-faq__item[open]
.automation-faq__question h3 {
    color: #dedee3;
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.automation-faq__bottom {
    display: grid;

    grid-template-columns:
        minmax(180px, .55fr)
        minmax(300px, 1fr)
        auto;

    align-items: center;

    gap: 50px;

    margin-top: 70px;

    padding: 35px 0;

    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.automation-faq__bottom > span {
    color: var(--automation-accent);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .16em;
}

.automation-faq__bottom p {
    margin: 0;

    color: #898992;

    font-size: 17px;
    line-height: 1.5;
}

.automation-faq__bottom p strong {
    color: #d1d1d6;

    font-weight: 500;
}

.automation-faq__bottom > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 17px;

    min-height: 50px;

    padding: 0 19px;

    border: 1px solid rgba(244, 197, 66, .3);

    color: var(--automation-accent);

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.automation-faq__bottom > a:hover {
    border-color: var(--automation-accent);

    background: var(--automation-accent);

    color: #080809;
}

.automation-faq__bottom > a span {
    font-size: 13px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .automation-faq {
        padding: 110px 0;
    }

    .automation-faq__header {
        grid-template-columns: 1fr;

        gap: 34px;

        margin-bottom: 60px;
    }

    .automation-faq__layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .automation-faq__side {
        position: static;
    }

    .automation-faq__bottom {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .automation-faq__bottom > a {
        justify-self: start;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .automation-faq {
        padding: 90px 0 75px;
    }

    .automation-faq__intro h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .automation-faq__intro > p:last-child {
        font-size: 15px;
    }

    .automation-faq__item summary {
        min-height: 95px;

        gap: 17px;

        padding: 22px 0;
    }

    .automation-faq__question {
        align-items: flex-start;

        gap: 14px;
    }

    .automation-faq__question > span {
        flex-basis: 22px;

        padding-top: 5px;
    }

    .automation-faq__question h3 {
        font-size: 15px;
    }

    .automation-faq__toggle {
        flex-basis: 29px;

        width: 29px;
        height: 29px;
    }

    .automation-faq__answer {
        padding:
            0
            43px
            28px
            36px;
    }

    .automation-faq__answer p {
        font-size: 13px;
    }

    .automation-faq__bottom {
        margin-top: 50px;

        padding: 30px 0;
    }

}

/* =========================================================
   09 / CONTACT
   ========================================================= */

.automation-contact {
    position: relative;

    padding: 150px 0 95px;

    overflow: hidden;

    border-top: 1px solid rgba(255, 255, 255, .06);

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(244, 197, 66, .055),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(164, 92, 255, .03),
            transparent 25%
        ),
        #060608;
}

.automation-contact::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .012) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


/* =========================================================
   HEADER
   ========================================================= */

.automation-contact__header {
    display: grid;

    grid-template-columns:
        minmax(190px, .55fr)
        minmax(0, 1.45fr);

    gap: 70px;

    margin-bottom: 85px;
}

.automation-contact__intro {
    max-width: 1100px;
}

.automation-contact__intro h2 {
    margin: 0;

    color: #f2f2f4;

    font-size: clamp(48px, 5vw, 82px);
    font-weight: 500;

    line-height: .98;
    letter-spacing: -.055em;
}

.automation-contact__intro h2 span {
    color: var(--automation-accent);
}

.automation-contact__lead {
    margin: 31px 0 0;

    color: #d2d2d7;

    font-size: 23px;
    font-weight: 500;

    letter-spacing: -.02em;
}

.automation-contact__description {
    max-width: 760px;

    margin: 15px 0 0;

    color: #7f7f88;

    font-size: 16px;
    line-height: 1.72;
}


/* =========================================================
   PANEL
   ========================================================= */

.automation-contact__panel {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(430px, .95fr);

    border: 1px solid rgba(255, 255, 255, .09);

    background: rgba(5, 5, 7, .7);
}


/* =========================================================
   DETAILS
   ========================================================= */

.automation-contact__details {
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.automation-contact__details-head {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0 25px;

    border-bottom: 1px solid rgba(255, 255, 255, .075);

    color: #4d4d55;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .16em;
}

.automation-contact__details-head > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.automation-contact__details-head i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 10px rgba(244, 197, 66, .65);
}


/* =========================================================
   MAIN CONTACT
   ========================================================= */

.automation-contact__main {
    padding: 40px;
}

.automation-contact__main-label {
    margin-bottom: 28px;

    color: #4a4a52;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .16em;
}


/* PHONE / MAIL */

.automation-contact__phone,
.automation-contact__mail {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 25px 45px 25px 0;

    border-top: 1px solid rgba(255, 255, 255, .075);

    text-decoration: none;
}

.automation-contact__mail {
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.automation-contact__phone small,
.automation-contact__mail small {
    color: #4c4c54;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .15em;
}

.automation-contact__phone strong,
.automation-contact__mail strong {
    margin-top: 10px;

    color: #c8c8ce;

    font-size: clamp(21px, 2.1vw, 31px);
    font-weight: 400;

    letter-spacing: -.035em;

    transition: color .2s ease;
}

.automation-contact__phone > span,
.automation-contact__mail > span {
    position: absolute;

    right: 4px;
    top: 50%;

    color: #55555e;

    font-size: 17px;

    transform: translateY(-50%);

    transition:
        color .2s ease,
        transform .2s ease;
}

.automation-contact__phone:hover strong,
.automation-contact__mail:hover strong {
    color: var(--automation-accent);
}

.automation-contact__phone:hover > span,
.automation-contact__mail:hover > span {
    color: var(--automation-accent);

    transform:
        translateY(-50%)
        translate(3px, -3px);
}


/* =========================================================
   LOCATION
   ========================================================= */

.automation-contact__location {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid rgba(255, 255, 255, .075);
}

.automation-contact__location > div {
    min-height: 105px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 25px 40px;
}

.automation-contact__location > div:first-child {
    border-right: 1px solid rgba(255, 255, 255, .075);
}

.automation-contact__location small {
    color: #47474f;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-contact__location strong {
    margin-top: 8px;

    color: #91919a;

    font-size: 12px;
    font-weight: 500;
}


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

.automation-contact__system {
    padding: 35px;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .014) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .014) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
}

.automation-contact__system-head {
    display: flex;
    justify-content: space-between;

    color: #484850;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .15em;
}

.automation-contact__system-head small {
    font: inherit;
}


/* MACHINE */

.automation-contact__machine {
    min-height: 180px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-top: 35px;

    padding: 25px;

    border: 1px solid rgba(255, 255, 255, .085);

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(244, 197, 66, .04),
            transparent 42%
        ),
        rgba(6, 6, 8, .82);
}

.automation-contact__machine-status {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 30px;

    color: #4e4e56;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}

.automation-contact__machine-status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--automation-accent);

    box-shadow:
        0 0 9px rgba(244, 197, 66, .55);
}

.automation-contact__machine > strong {
    color: #c4c4ca;

    font-size: 25px;
    font-weight: 500;

    letter-spacing: -.03em;
}

.automation-contact__machine > small {
    margin-top: 8px;

    color: #484850;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}


/* =========================================================
   SYSTEM FLOW
   ========================================================= */

.automation-contact__system-flow {
    min-height: 100px;

    display: flex;
    align-items: center;

    padding: 0 10px;

    color: #55555e;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .12em;
}

.automation-contact__system-flow span {
    white-space: nowrap;
}

.automation-contact__system-flow i {
    position: relative;

    flex: 1;

    height: 1px;

    margin: 0 12px;

    background:
        linear-gradient(
            90deg,
            rgba(244, 197, 66, .3),
            rgba(244, 197, 66, .65)
        );
}

.automation-contact__system-flow i::after {
    content: "";

    position: absolute;

    right: 0;
    top: -3px;

    width: 6px;
    height: 6px;

    border-top: 1px solid var(--automation-accent);
    border-right: 1px solid var(--automation-accent);

    transform: rotate(45deg);
}


/* =========================================================
   SYSTEM RESULT
   ========================================================= */

.automation-contact__system-result {
    min-height: 125px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 25px;

    border: 1px solid rgba(244, 197, 66, .2);

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(244, 197, 66, .075),
            transparent 42%
        ),
        #08080a;
}

.automation-contact__system-result > div {
    display: flex;
    flex-direction: column;
}

.automation-contact__system-result small {
    color: #4d4d55;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.automation-contact__system-result strong {
    margin-top: 8px;

    color: var(--automation-accent);

    font-size: 16px;
    font-weight: 500;
}

.automation-contact__system-result > span {
    color: #62626b;

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .13em;
}


/* =========================================================
   SYSTEM FOOTER
   ========================================================= */

.automation-contact__system-footer {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 25px;
}

.automation-contact__system-footer span {
    padding: 6px 8px;

    border: 1px solid rgba(255, 255, 255, .075);

    color: #505058;

    font-size: 5px;
    font-weight: 700;
    letter-spacing: .12em;
}


/* =========================================================
   FINAL
   ========================================================= */

.automation-contact__final {
    display: grid;

    grid-template-columns:
        minmax(180px, .55fr)
        minmax(300px, 1fr)
        auto;

    align-items: center;

    gap: 50px;

    margin-top: 70px;

    padding: 40px 0;

    border-top: 1px solid rgba(255, 255, 255, .08);
}

.automation-contact__final > span {
    color: var(--automation-accent);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.automation-contact__final p {
    margin: 0;

    color: #92929b;

    font-size: 19px;
    line-height: 1.5;
}

.automation-contact__final p strong {
    color: #d4d4d9;

    font-weight: 500;
}

.automation-contact__final > a {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 0 20px;

    border: 1px solid rgba(244, 197, 66, .35);

    color: var(--automation-accent);

    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;

    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.automation-contact__final > a:hover {
    color: #080809;

    border-color: var(--automation-accent);

    background: var(--automation-accent);
}

.automation-contact__final > a span {
    font-size: 13px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .automation-contact {
        padding: 110px 0 80px;
    }

    .automation-contact__header {
        grid-template-columns: 1fr;

        gap: 34px;

        margin-bottom: 60px;
    }

    .automation-contact__panel {
        grid-template-columns: 1fr;
    }

    .automation-contact__details {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .automation-contact__final {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .automation-contact__final > a {
        justify-self: start;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .automation-contact {
        padding: 90px 0 60px;
    }

    .automation-contact__intro h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .automation-contact__lead {
        font-size: 20px;
    }

    .automation-contact__description {
        font-size: 15px;
    }

    .automation-contact__details-head {
        padding: 0 16px;

        font-size: 6px;
    }

    .automation-contact__main {
        padding: 28px 20px;
    }

    .automation-contact__phone strong,
    .automation-contact__mail strong {
        font-size: 22px;
    }

    .automation-contact__location {
        grid-template-columns: 1fr;
    }

    .automation-contact__location > div {
        min-height: 90px;

        padding: 20px;
    }

    .automation-contact__location > div:first-child {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .075);
    }

    .automation-contact__system {
        padding: 25px 18px;
    }

    .automation-contact__system-flow {
        overflow-x: auto;
    }

    .automation-contact__system-flow i {
        flex: 0 0 30px;
    }

    .automation-contact__system-result {
        align-items: flex-start;
        flex-direction: column;
    }

    .automation-contact__final {
        margin-top: 50px;

        padding: 30px 0;
    }

    .automation-contact__final p {
        font-size: 17px;
    }

}


/* footer */
.footer p,
.footer p span,
.footer a[href="/polityka-prywatnosci/"],
.footer a[href="/cookies/"] {
    color: #9a9aa3;
}