li {
     font-family: "Manrope", sans-serif;
 }

 .mfgx-hero {
     position: relative;
     padding: 170px 100px 140px;
     color: #fff;
     overflow: hidden;
 }

 /* background image */
 .mfgx-hero-bg {
     position: absolute;
     inset: 0;
     background:
         linear-gradient(110deg, rgba(4, 18, 32, .92), rgba(6, 64, 78, .85)),
         url('../manufacturing.png') center/cover no-repeat;
     z-index: 0;
 }

 /* glow accents */
 .mfgx-hero::before {
     content: "";
     position: absolute;
     right: -120px;
     top: -120px;
     width: 480px;
     height: 480px;
     background: radial-gradient(circle, #22c55e33, transparent 70%);
     filter: blur(40px);
 }

 .mfgx-hero::after {
     content: "";
     position: absolute;
     left: -120px;
     bottom: -120px;
     width: 420px;
     height: 420px;
     background: radial-gradient(circle, #06b6d433, transparent 70%);
     filter: blur(40px);
 }

 /* layout */
 .hero-grid {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 60px;
     align-items: center;
     position: relative;
     z-index: 2;
     margin-top: 50px;
 }

 /* text */
 .hero-text h1 {
     font-size: 56px;
     line-height: 1.1;
     margin-bottom: 22px;
     letter-spacing: -.6px;
     color: #fff;
 }

 .hero-text p {
     font-size: 18px;
     line-height: 1.7;
     max-width: 640px;
     opacity: .92;
     font-family: "Manrope", sans-serif;
     ;
 }

 .label {
     display: inline-block;
     padding: 7px 18px;
     border-radius: 40px;
     background: rgba(255, 255, 255, .08);
     border: 1px solid rgba(255, 255, 255, .35);
     backdrop-filter: blur(6px);
     margin-bottom: 22px;
     font-weight: 600;
     font-size: 13px;
 }

 /* visual diagram */
 .hero-visual {
     position: relative;
     height: 260px;
 }

 .plant-node,
 .plant-core {
     position: absolute;
     padding: 10px 18px;
     border-radius: 24px;
     font-size: 14px;
     backdrop-filter: blur(6px);
     border: 1px solid rgba(255, 255, 255, .35);
     background: rgba(255, 255, 255, .08);
 }

 .plant-core {
     background: linear-gradient(135deg, #22c55e, #06b6d4);
     border: none;
     color: #fff;
     font-weight: 600;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .plant-node:nth-child(1) {
     top: 0;
     left: 40%
 }

 .plant-node:nth-child(2) {
     top: 40%;
     left: 0
 }

 .plant-node:nth-child(4) {
     top: 40%;
     right: 0
 }

 .plant-node:nth-child(5) {
     bottom: 0;
     left: 40%
 }


 .mfgx-evolution {
     padding: 130px 100px;
     background: linear-gradient(180deg, #f8fbfd 0%, #ffffff 100%);
     position: relative;
     overflow: hidden;
 }

 /* ambient glow */
 .mfgx-evolution::before {
     content: "";
     position: absolute;
     left: -160px;
     top: -160px;
     width: 420px;
     height: 420px;
     background: radial-gradient(circle, #06b6d422, transparent 70%);
     filter: blur(40px);
 }

 .mfgx-evolution::after {
     content: "";
     position: absolute;
     right: -180px;
     bottom: -180px;
     width: 480px;
     height: 480px;
     background: radial-gradient(circle, #22c55e22, transparent 70%);
     filter: blur(40px);
 }

 /* layout */
 .evo-grid {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 70px;
     align-items: center;
     position: relative;
     z-index: 2;
 }

 /* label */
 .evo-label {
     display: inline-block;
     padding: 6px 16px;
     border-radius: 30px;
     background: linear-gradient(135deg, #22c55e18, #06b6d418);
     border: 1px solid rgba(15, 118, 110, .25);
     color: #0f766e;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 18px;
 }

 /* text */
 .evo-text h2 {
     font-size: 40px;
     line-height: 1.18;
     margin-bottom: 16px;
     color: #0b2239;
 }

 .evo-text p {
     color: #516579;
     line-height: 1.7;
     margin-bottom: 16px;
     font-size: 16.5px;
     font-family: "Manrope", sans-serif;
 }

 /* cards */
 .evo-cards {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
     margin-top: 26px;
 }

 .evo-cards div {
     padding: 18px 20px;
     border-radius: 14px;
     background: linear-gradient(180deg, #ffffff, #f6fbfa);
     border: 1px solid #e6f0ef;
     font-weight: 600;
     color: #0b2239;
     box-shadow: 0 12px 28px rgba(15, 118, 110, .08);
     transition: .28s;
     position: relative;
     overflow: hidden;
 }

 .evo-cards div::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(120deg, transparent, rgba(6, 182, 212, .18), transparent);
     opacity: 0;
     transition: .35s;
 }

 .evo-cards div:hover {
     transform: translateY(-5px);
     box-shadow: 0 22px 48px rgba(15, 118, 110, .18);
 }

 .evo-cards div:hover::before {
     opacity: 1;
 }


 .evo-visual {
     display: flex;
     justify-content: center;
 }

 /* plant diagram */
 .plant-visual {
     position: relative;
     width: 340px;
     height: 260px;
 }

 /* nodes */
 .pv-node,
 .pv-core {
     position: absolute;
     padding: 10px 18px;
     border-radius: 24px;
     font-size: 14px;
     border: 1px solid #e6f0ef;
     background: #ffffff;
     box-shadow: 0 10px 24px rgba(15, 118, 110, .12);
     color: #0b2239;
 }

 /* center */
 .pv-core {
     background: linear-gradient(135deg, #0f766e, #06b6d4);
     color: #fff;
     font-weight: 600;
     border: none;
     box-shadow: 0 18px 40px rgba(6, 182, 212, .35);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 /* positions */
 .pv-node:nth-child(1) {
     top: 7px;
     left: 35%;
     z-index: 999;
 }

 .pv-node:nth-child(2) {
     top: 40%;
     left: 0
 }

 .pv-node:nth-child(4) {
     top: 40%;
     right: 0
 }

 .pv-node:nth-child(5) {
     bottom: 11px;
     left: 40%
 }

 /* connection lines */
 .plant-visual::before,
 .plant-visual::after {
     content: "";
     position: absolute;
     left: 50%;
     top: 50%;
     width: 200px;
     height: 200px;
     transform: translate(-50%, -50%);
     border: 1px dashed rgba(15, 118, 110, .25);
     border-radius: 50%;
 }



 .mfgx-operations {
     padding: 140px 100px;
     background: linear-gradient(180deg, #f8fbfd 0%, #eef5f9 100%);
     position: relative;
     overflow: hidden;
 }

 /* ambient glow */
 .mfgx-operations::before {
     content: "";
     position: absolute;
     right: -220px;
     top: -220px;
     width: 520px;
     height: 520px;
     background: radial-gradient(circle, #06b6d422, transparent 70%);
     filter: blur(40px);
 }

 .ops-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
 }

 .ops-visual,
 .ops-text {
     max-width: 520px;
     width: 100%;
 }

 .ops-visual {
     margin-left: auto;
 }

 .ops-text {
     margin-right: auto;
 }


 .ops-visual-panel {
     width: 100%;
     max-width: 420px;
     padding: 40px 34px;
     border-radius: 24px;
     background: linear-gradient(180deg, #ffffff, #f6fbfa);
     border: 1px solid #e6f0ef;
     box-shadow: 0 40px 90px rgba(15, 118, 110, .12);
     position: relative;
 }

 /* glow behind */
 .ops-visual-panel::before {
     content: "";
     position: absolute;
     inset: -50px;
     background: radial-gradient(circle, #22c55e22, transparent 70%);
     filter: blur(40px);
     z-index: -1;
 }

 /* SVG */
 .mfg-svg {
     width: 100%;
     height: auto;
 }

 .mfg-svg line {
     stroke: #0f766e;
     stroke-width: 2;
     stroke-dasharray: 6 6;
     opacity: .5;
 }

 .mfg-node {
     fill: #ffffff;
     stroke: #e6f0ef;
     stroke-width: 1.2;
     filter: drop-shadow(0 10px 20px rgba(15, 118, 110, .15));
 }

 .mfg-text {
     font-size: 13.5px;
     fill: #0b2239;
     font-weight: 600;
 }

 .ops-text {
     position: relative;
 }

 .ops-label {
     display: inline-block;
     padding: 7px 18px;
     border-radius: 30px;
     background: linear-gradient(135deg, #22c55e18, #06b6d418);
     border: 1px solid rgba(15, 118, 110, .25);
     color: #0f766e;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 18px;
 }

 .ops-text h2 {
     font-size: 42px;
     line-height: 1.18;
     margin-bottom: 16px;
     color: #0b2239;
     letter-spacing: -.3px;
 }

 .ops-intro {
     color: #516579;
     line-height: 1.75;
     margin-bottom: 26px;
     font-size: 16.5px;
     max-width: 560px;
 }

 .ops-slider {
     position: relative;
     margin-top: 30px;
     overflow: hidden;
 }

 .ops-track {
     display: flex;
     transition: transform .6s cubic-bezier(.4, 0, .2, 1);
 }

 /* slide container */
 .ops-card {
     min-width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* fixed panel */
 .ops-card-inner {
     width: 100%;
     max-width: 320px;
     height: 200px;
     padding: 32px 34px;
     border-radius: 20px;
     background: linear-gradient(180deg, #ffffff, #f8fbfd);
     border: 1px solid #e6f0ef;
     box-shadow: 0 28px 70px rgba(15, 118, 110, .12);
     line-height: 1.7;
     color: #516579;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 15px;
 }

 .ops-card-inner strong {
     display: block;
     color: #0b2239;
     margin-bottom: 12px;
     font-size: 18px;
 }

 /* arrows */
 .ops-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     border-radius: 50%;
     border: none;
     background: #ffffff;
     box-shadow: 0 10px 26px rgba(15, 118, 110, .2);
     cursor: pointer;
     font-size: 24px;
     color: #0f766e;
     transition: .2s;
     z-index: 2;
     margin-left: 15px;
     margin-right: 15px;
 }

 .ops-nav:hover {
     background: #0f766e;
     color: #fff;
 }

 .ops-nav.prev {
     left: -6px;
 }

 .ops-nav.next {
     right: -6px;
 }




 /* icon container */
 .ops-icon {
     width: 56px;
     height: 56px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 18px;
     position: relative;

     background: linear-gradient(135deg, #0f766e, #06b6d4);
     box-shadow:
         0 12px 28px rgba(6, 182, 212, .35),
         0 0 0 6px rgba(6, 182, 212, .08);
 }

 /* svg */
 .ops-icon svg {
     width: 26px;
     height: 26px;
     stroke: #fff;
     stroke-width: 1.7;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 /* hover glow */
 .ops-card-inner:hover .ops-icon {
     transform: translateY(-2px) scale(1.05);
     box-shadow:
         0 18px 40px rgba(6, 182, 212, .45),
         0 0 0 8px rgba(6, 182, 212, .12);
     transition: .25s;
 }

 .mfgx-trends {
     padding: 130px 100px;
     background: #ffffff;
     position: relative;
 }

 .connect-text .label,
 .security-text .label,
 .mfgx-trends .label,
 .center .label {
     padding: 6px 14px;
     font-size: 13px;
     font-weight: 600;
     color: #0b5cff;
     background: rgba(11, 92, 255, 0.08);
     border: 1px solid rgba(11, 92, 255, 0.18);
     border-radius: 999px;
     letter-spacing: .3px;
 }

 .mfgx-outcomes {
     padding: 130px 100px;
     background: #f8fbfd;
 }

 .out-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 26px;
     margin-top: 50px;
 }

 /* outcome card */
 .outcome {
     position: relative;
     padding: 26px 24px 24px 60px;
     border-radius: 18px;
     background: #ffffff;
     border: 1px solid #e6f0ef;
     box-shadow: 0 18px 40px rgba(15, 118, 110, .08);
     transition: .25s;
 }

 /* icon badge */
 .out-icon {
     position: absolute;
     left: 20px;
     top: 26px;
     width: 28px;
     height: 28px;
     border-radius: 8px;
     background: linear-gradient(135deg, #22c55e, #06b6d4);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     font-weight: 700;
 }

 /* title */
 .outcome strong {
     display: block;
     color: #0b2239;
     margin-bottom: 6px;
     font-size: 16px;
 }

 /* description */
 .outcome span {
     font-size: 14.5px;
     color: #516579;
     line-height: 1.6;
 }

 /* hover */
 .outcome:hover {
     transform: translateY(-6px);
     box-shadow: 0 28px 70px rgba(15, 118, 110, .16);
 }


 /* header */
 .trends-head {
     text-align: center;
     max-width: 760px;
     margin: 0 auto 60px;
 }

 .trends-head h2 {
     font-size: 40px;
     margin: 12px 0 14px;
     color: #0b2239;
 }

 .trends-head p {
     color: #516579;
     line-height: 1.7;
     font-family: "Manrope", sans-serif;
 }

 /* grid */
 .trends-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 26px;
 }

 /* card */
 .trend-card {
     padding: 28px 24px 30px;
     border-radius: 18px;
     background: linear-gradient(180deg, #ffffff, #f8fbfd);
     border: 1px solid #e6f0ef;
     box-shadow: 0 20px 50px rgba(15, 118, 110, .08);
     transition: .25s;
 }

 .trend-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 32px 70px rgba(15, 118, 110, .16);
 }

 /* icon */
 .trend-icon {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;

     background: linear-gradient(135deg, #0f766e, #06b6d4);
     box-shadow:
         0 12px 28px rgba(6, 182, 212, .35),
         0 0 0 6px rgba(6, 182, 212, .08);
 }

 .trend-icon svg {
     width: 24px;
     height: 24px;
     stroke: #fff;
     stroke-width: 1.7;
     fill: none;
 }

 /* text */
 .trend-card h3 {
     font-size: 17px;
     margin-bottom: 8px;
     color: #0b2239;
 }

 .trend-card p {
     font-size: 14.5px;
     line-height: 1.6;
     color: #516579;
     font-family: "Manrope", sans-serif;
 }


 .mfgx-architecture {
     padding: 140px 100px;
     position: relative;
     overflow: hidden;

     background:
         linear-gradient(180deg,
             rgba(8, 18, 32, .88) 0%,
             rgba(8, 28, 45, .82) 40%,
             rgba(8, 28, 45, .78) 70%,
             rgba(8, 28, 45, .85) 100%),
         url('../manufacturer-bg.png');

     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }

 /* glow */
 .mfgx-architecture::before {
     content: "";
     position: absolute;
     left: -200px;
     bottom: -200px;
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, #06b6d422, transparent 70%);
     filter: blur(40px);
 }

 /* layout */
 .arch-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
 }

 /* ===== STACK VISUAL ===== */
 .arch-visual {
     max-width: 420px;
     margin: auto;
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .arch-layer {
     padding: 14px 20px;
     border-radius: 12px;
     background: linear-gradient(180deg, #ffffff, #f6fbfa);
     border: 1px solid #e6f0ef;
     text-align: center;
     font-weight: 600;
     color: #0b2239;
     box-shadow: 0 12px 28px rgba(15, 118, 110, .08);
     position: relative;
 }

 /* connection line */
 .arch-layer::before {
     content: "";
     position: absolute;
     left: 50%;
     top: -14px;
     width: 2px;
     height: 14px;
     background: linear-gradient(#22c55e, #06b6d4);
     transform: translateX(-50%);
 }

 .arch-layer:first-child::before {
     display: none;
 }

 /* core highlight */
 .arch-layer.core {
     background: linear-gradient(135deg, #0f766e, #06b6d4);
     color: #fff;
     box-shadow: 0 20px 50px rgba(6, 182, 212, .35);
 }

 /* ===== TEXT ===== */
 .arch-text h2 {
     font-size: 40px;
     margin-bottom: 14px;
     color: #0b2239;
 }

 .arch-text p {
     color: #516579;
     line-height: 1.7;
     margin-bottom: 14px;
     font-family: "Manrope", sans-serif;
 }


 .mfgx-architecture .arch-text h2 {
     color: #ffffff;
 }

 .mfgx-architecture .arch-text p {
     color: rgba(255, 255, 255, .85);
 }

 .mfgx-architecture .label {
     background: rgba(255, 255, 255, .12);
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, .25);
 }

 .arch-layer {
     background: rgba(255, 255, 255, .9);
     backdrop-filter: blur(6px);
 }

 .arch-layer.core {
     background: linear-gradient(135deg, #0f766e, #06b6d4);
     color: #fff;
 }

 .mfgx-connectivity {
     padding: 100px 80px;
     background: #ffffff;
     position: relative;

 }

 /* layout */
 .connectivity-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
     padding: 40px 20px;
     border: 2px solid #06b6d4;
     border-bottom-left-radius: 50px;
     border-top-right-radius: 50px;
 }

 /* text */
 .connect-text h2 {
     font-size: 40px;
     margin: 12px 0 14px;
     color: #0b2239;
 }

 .connect-text p {
     color: #516579;
     line-height: 1.7;
     margin-bottom: 14px;
     font-family: "Manrope", sans-serif;
 }

 /* pills container */
 .connect-pills {
     display: flex;
     flex-direction: column;
     gap: 18px;
 }

 /* pill card */
 .connect-pill {
     padding: 20px 22px;
     border-radius: 16px;
     background: linear-gradient(180deg, #ffffff, #f8fbfd);
     border: 1px solid #e6f0ef;
     box-shadow: 0 18px 40px rgba(15, 118, 110, .08);
     transition: .25s;
 }

 .connect-pill:hover {
     transform: translateY(-4px);
     box-shadow: 0 28px 60px rgba(15, 118, 110, .14);
 }

 .connect-pill strong {
     display: block;
     color: #0b2239;
     margin-bottom: 4px;
 }

 .connect-pill {
     color: #516579;
     line-height: 1.6;
 }


 .connect-pill {
     display: flex;
     gap: 16px;
     align-items: flex-start;
     padding: 20px 22px;
     border-radius: 16px;
     background: linear-gradient(180deg, #ffffff, #f8fbfd);
     border: 1px solid #e6f0ef;
     box-shadow: 0 18px 40px rgba(15, 118, 110, .08);
     transition: .25s;
 }

 .connect-pill:hover {
     transform: translateY(-4px);
     box-shadow: 0 28px 60px rgba(15, 118, 110, .14);
 }

 /* icon container */
 .pill-icon {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;

     background: linear-gradient(135deg, #0f766e, #06b6d4);
     box-shadow:
         0 10px 22px rgba(6, 182, 212, .35),
         0 0 0 5px rgba(6, 182, 212, .08);
 }

 /* svg */
 .pill-icon svg {
     width: 22px;
     height: 22px;
     stroke: #ffffff;
     stroke-width: 1.7;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 /* text */
 .connect-pill strong {
     display: block;
     color: #0b2239;
     margin-bottom: 4px;
 }

 .connect-pill {
     color: #516579;
     line-height: 1.6;
 }

 /* shared */
 .section-head {
     max-width: 760px;
     margin: 0 auto 50px;
 }

 .section-head.center {
     text-align: center;
 }

 .grid-3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 26px;
 }

 .mfgx-workforce {
     padding: 130px 100px;
     background: #fff;
 }

 .wf-card {
     padding: 26px;
     border-radius: 18px;
     background: #f8fbfd;
     border: 1px solid #e6f0ef;
     box-shadow: 0 18px 40px rgba(15, 118, 110, .08);
 }

 .wf-icon {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     background: linear-gradient(135deg, #0f766e, #06b6d4);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 14px;
 }

 .wf-icon svg {
     stroke: #fff;
     fill: none;
     width: 22px;
     height: 22px
 }

 /* ================= DATA UNIQUE ================= */
 .mfgx-data {
     padding: 130px 100px;
     background: #f8fbfd;
 }

 .data-head {
     text-align: center;
     max-width: 760px;
     margin: 0 auto 70px;
 }

 .data-head h2 {
     font-size: 40px;
     margin: 12px 0 14px;
     color: #0b2239;
 }

 .data-head p {
     color: #516579;
     line-height: 1.7;
     font-family: "Manrope", sans-serif;
 }

 /* flow */
 .data-flow {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 26px;
     margin-bottom: 40px;
 }

 .flow-stage {
     padding: 28px 24px;
     border-radius: 18px;
     background: linear-gradient(180deg, #fff, #f6fbfa);
     border: 1px solid #e6f0ef;
     box-shadow: 0 18px 40px rgba(15, 118, 110, .08);
     position: relative;
 }

 .flow-stage::after {
     content: "";
     position: absolute;
     right: -13px;
     top: 50%;
     width: 26px;
     height: 2px;
     background: linear-gradient(90deg, #22c55e, #06b6d4);
 }

 .flow-stage:last-child::after {
     display: none
 }

 .flow-stage h3 {
     font-size: 16px;
     margin-bottom: 14px;
     color: #0b2239;
 }

 .flow-stage ul {
     padding: 0;
     margin: 0;
     list-style: none;
 }

 .flow-stage li {
     font-size: 14.5px;
     color: #516579;
     margin-bottom: 8px;
 }

 .data-head .label {
     display: inline-block;
     padding: 6px 14px;
     font-size: 13px;
     font-weight: 600;
     color: #0b5cff;
     background: rgba(11, 92, 255, 0.08);
     border: 1px solid rgba(11, 92, 255, 0.18);
     border-radius: 999px;
     letter-spacing: .3px;
 }

 /* outcomes */
 .data-outcomes {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
     margin-top: 20px;
 }

 .data-outcomes div {
     padding: 18px;
     border-radius: 14px;
     background: #fff;
     border: 1px solid #e6f0ef;
     text-align: center;
     font-weight: 600;
     color: #0b2239;
     box-shadow: 0 12px 28px rgba(15, 118, 110, .08);
 }

 .mfgx-security {
     padding: 130px 100px;
     background: linear-gradient(180deg, #f8fbfd, #eef5f9);
     position: relative;
     overflow: hidden;
 }

 .security-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 70px;
     align-items: center;
 }

 /* ===== ZONES PANEL ===== */
 .security-zones {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
     position: relative;
 }

 /* connection lines background */
 .security-zones::before {
     content: "";
     position: absolute;
     inset: 10% 10%;
     border: 1px dashed rgba(15, 118, 110, .25);
     border-radius: 20px;
     pointer-events: none;
 }

 /* zone card */
 .sec-zone {
     padding: 22px 22px 20px;
     border-radius: 16px;
     background: #ffffff;
     border: 1px solid #e6f0ef;
     box-shadow: 0 14px 32px rgba(15, 118, 110, .08);
     position: relative;
     transition: .25s;
 }

 /* top accent */
 .sec-zone::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     border-radius: 16px 16px 0 0;
     background: linear-gradient(90deg, #22c55e, #06b6d4);
 }

 /* hover */
 .sec-zone:hover {
     transform: translateY(-5px);
     box-shadow: 0 26px 60px rgba(15, 118, 110, .16);
 }

 /* text */
 .sec-zone strong {
     display: block;
     font-size: 16px;
     color: #0b2239;
     margin-bottom: 6px;
 }

 .sec-zone p {
     font-size: 14.5px;
     color: #516579;
     line-height: 1.6;
     font-family: "Manrope", sans-serif;
 }

 .mfgx-outcomes {
     padding: 130px 100px;
     background: #f8fbfd;
 }

 .out-card {
     padding: 22px;
     border-radius: 16px;
     background: #fff;
     border: 1px solid #e6f0ef;
     box-shadow: 0 16px 36px rgba(15, 118, 110, .08);
     text-align: center;
     font-weight: 600;
     color: #0b2239;
 }

 .mfgx-insights {
     padding: 130px 100px;
     background: #fff;
 }

 .insight-slider {
     display: flex;
     gap: 24px;
     overflow: auto;
     padding-bottom: 6px;
 }

 .insight-card {
     min-width: 280px;
     padding: 24px;
     border-radius: 18px;
     background: #f8fbfd;
     border: 1px solid #e6f0ef;
 }

 /* ===== CTA ===== */
 .mfgx-cta {
     padding: 140px 100px;
     text-align: center;
     background: linear-gradient(135deg, #0f766e, #123b5a);
     color: #fff;
 }

 .mfgx-cta p {
     max-width: 640px;
     margin: 14px auto 26px;
     opacity: .9;
     font-family: "Manrope", sans-serif;

 }

 .flow-stage::after {
     content: "";
     position: absolute;
     right: -18px;
     top: 50%;
     width: 36px;
     height: 2px;
     background: linear-gradient(90deg, #22c55e, #06b6d4);
     transform: translateY(-50%);
     opacity: .9;
 }

 .flow-stage {
     position: relative;
 }

 .flow-stage::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     border-radius: 18px 18px 0 0;
     background: linear-gradient(90deg, #22c55e, #06b6d4);
 }

 .data-head {
     margin: 0 auto 56px;
     /* was ~70 */
 }

 .flow-stage h3 {
     font-size: 17px;
     margin-bottom: 12px;
     color: #0b2239;
     letter-spacing: -.2px;
 }

 .flow-stage {
     transition: .25s;
 }

 .flow-stage:hover {
     transform: translateY(-6px);
     box-shadow: 0 26px 60px rgba(15, 118, 110, .16);
 }

 .flow-stage::after {
     background:
         linear-gradient(90deg, #22c55e, #06b6d4, #22c55e);
     background-size: 200% 100%;
     animation: dataFlow 3s linear infinite;
 }

 @keyframes dataFlow {
     from {
         background-position: 0% 0
     }

     to {
         background-position: 200% 0
     }
 }



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

 /* ===== LARGE LAPTOP ≤1200 ===== */
 @media (max-width:1200px) {

     .mfgx-hero,
     .mfgx-evolution,
     .mfgx-operations,
     .mfgx-trends,
     .mfgx-architecture,
     .mfgx-connectivity,
     .mfgx-workforce,
     .mfgx-data,
     .mfgx-security,
     .mfgx-outcomes,
     .mfgx-insights,
     .mfgx-cta {
         padding-left: 60px;
         padding-right: 60px;
     }

     .hero-text h1 {
         font-size: 46px;
     }

     .ops-text h2 {
         font-size: 36px;
     }

     .evo-text h2,
     .connect-text h2,
     .arch-text h2,
     .trends-head h2 {
         font-size: 36px;
     }
 }


 /* ===== TABLET ≤992 ===== */
 @media (max-width:992px) {

     /* section padding */
     .mfgx-hero,
     .mfgx-evolution,
     .mfgx-operations,
     .mfgx-trends,
     .mfgx-architecture,
     .mfgx-connectivity,
     .mfgx-workforce,
     .mfgx-data,
     .mfgx-security,
     .mfgx-outcomes,
     .mfgx-insights,
     .mfgx-cta {
         padding: 110px 40px;
     }

     /* stack grids */
     .hero-grid,
     .evo-grid,
     .ops-grid,
     .arch-grid,
     .connectivity-grid,
     .data-grid,
     .security-grid {
         grid-template-columns: 1fr;
         gap: 50px;
     }

     /* center visuals */
     .ops-visual,
     .evo-visual,
     .arch-visual {
         margin: auto;
     }

     /* typography */
     .hero-text h1 {
         font-size: 38px;
     }

     .ops-text h2,
     .evo-text h2,
     .connect-text h2,
     .arch-text h2,
     .trends-head h2 {
         font-size: 32px;
     }

     .hero-text p,
     .ops-intro,
     .evo-text p {
         font-size: 16px;
     }

     /* cards */
     .grid-3 {
         grid-template-columns: 1fr 1fr;
     }

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

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

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


 /* ===== MOBILE ≤768 ===== */
 @media (max-width:768px) {

     /* tighter spacing */
     .mfgx-hero,
     .mfgx-evolution,
     .mfgx-operations,
     .mfgx-trends,
     .mfgx-architecture,
     .mfgx-connectivity,
     .mfgx-workforce,
     .mfgx-data,
     .mfgx-security,
     .mfgx-outcomes,
     .mfgx-insights,
     .mfgx-cta {
         padding: 90px 24px;
     }

     /* headings */
     .hero-text h1 {
         font-size: 32px;
         line-height: 1.2;
     }

     .ops-text h2,
     .evo-text h2,
     .connect-text h2,
     .arch-text h2,
     .trends-head h2 {
         font-size: 28px;
     }

     /* text */
     .hero-text p,
     .evo-text p,
     .connect-text p,
     .ops-intro {
         font-size: 15.5px;
     }

     /* grids collapse */
     .grid-3,
     .trends-grid,
     .data-cards {
         grid-template-columns: 1fr;
     }

     /* hero visual */
     .hero-visual {
         height: 220px;
     }

     /* slider */
     .ops-card-inner {
         max-width: 100%;
         height: auto;
         min-height: 220px;
     }

     /* connectivity */
     .connectivity-grid {
         padding: 24px;
         border-radius: 30px;
     }

     .data-flow {
         grid-template-columns: 1fr;
         gap: 18px
     }

     .flow-stage::after {
         display: none
     }

     .data-outcomes {
         grid-template-columns: 1fr 1fr
     }

     .security-zones {
         grid-template-columns: 1fr;
     }

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

 }


 /* ===== SMALL MOBILE ≤480 ===== */
 @media (max-width:480px) {

     /* section padding */
     .mfgx-hero,
     .mfgx-evolution,
     .mfgx-operations,
     .mfgx-trends,
     .mfgx-architecture,
     .mfgx-connectivity,
     .mfgx-workforce,
     .mfgx-data,
     .mfgx-security,
     .mfgx-outcomes,
     .mfgx-insights,
     .mfgx-cta {
         padding: 70px 18px;
     }

     /* headings */
     .hero-text h1 {
         font-size: 26px;
     }

     .ops-text h2,
     .evo-text h2,
     .connect-text h2,
     .arch-text h2,
     .trends-head h2 {
         font-size: 24px;
     }

     /* labels */
     .label,
     .evo-label,
     .ops-label {
         font-size: 11px;
         padding: 6px 14px;
     }

     /* hero nodes */
     .plant-node,
     .plant-core {
         font-size: 12px;
         padding: 8px 12px;
     }

     /* architecture */
     .arch-layer {
         font-size: 13px;
         padding: 12px 14px;
     }

     /* connectivity */
     .connect-pill {
         padding: 16px;
         gap: 12px;
     }

     .pill-icon {
         width: 38px;
         height: 38px;
     }

     /* ops */
     .ops-icon {
         width: 46px;
         height: 46px;
     }

     /* slider arrows */
     .ops-nav {
         width: 34px;
         height: 34px;
         font-size: 18px;
     }

     /* visual alignment */
     .ops-visual {
         max-width:100%;
         margin-left: 0px !important;
         padding: 5px;
     }

     .data-outcomes {
         grid-template-columns: 1fr
     }
     .ops-text{
        padding: 5px 17px;
        overflow: hidden;
     }
     .ops-nav{
        display: none;
     }
     .data-head h2{
        font-size: 28px !important;
     }
    
 }