/* ==========================================================================
   SMART AGRICULTURE
   ========================================================================== */


/* HERO */

.agri-hero {
    position:relative;

    overflow:hidden;

    padding:
        125px 0
        120px;

    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #faf8ff 52%,
            #f1ecfb 100%
        );
}


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

    position:absolute;

    width:800px;
    height:800px;

    top:-500px;
    right:-350px;

    border:
        1px solid
        rgba(72,0,185,.1);

    border-radius:50%;
}


.agri-hero-layout {
    display:grid;

    grid-template-columns:
        1.04fr .96fr;

    gap:90px;

    align-items:center;
}


.agri-hero h1 {
    margin:0;

    font-size:
        clamp(
            54px,
            5.4vw,
            77px
        );

    line-height:1.08;

    letter-spacing:-.055em;
}


.agri-hero h1 span {
    color:var(--purple);
}


.agri-lead {
    max-width:630px;

    margin:31px 0 0;

    color:var(--text);

    font-size:19px;
    line-height:1.85;

    word-break:keep-all;
}


.agri-hero-tags {
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:31px;
}


.agri-hero-tags span {
    padding:
        8px 12px;

    border:
        1px solid
        rgba(72,0,185,.14);

    border-radius:100px;

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

    color:#625a6b;

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


/* SYSTEM GRAPH */

.agri-system-visual {
    min-height:520px;

    display:flex;
    flex-direction:column;

    justify-content:center;
}


.visual-core {
    position:relative;

    min-height:450px;

    display:grid;
    place-items:center;
}


.core-ring {
    position:absolute;

    border:
        1px solid
        rgba(72,0,185,.15);

    border-radius:50%;
}


.core-ring.ring-one {
    width:260px;
    height:260px;
}


.core-ring.ring-two {
    width:410px;
    height:410px;
}


.core-center {
    position:relative;
    z-index:4;

    width:138px;
    height:138px;

    display:flex;

    flex-direction:column;

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

    border-radius:40px;

    background:
        linear-gradient(
            145deg,
            #5900d6,
            #390094
        );

    color:#fff;

    box-shadow:
        0 30px 70px
        rgba(72,0,185,.25);
}


.core-center strong {
    font-size:25px;

    letter-spacing:.08em;
}


.core-center span {
    margin-top:7px;

    color:
        rgba(255,255,255,.65);

    font-size:10px;
}


.core-node {
    position:absolute;
    z-index:5;

    width:108px;
    min-height:83px;

    padding:14px;

    border:
        1px solid
        rgba(72,0,185,.13);

    border-radius:16px;

    background:#fff;

    box-shadow:
        0 15px 40px
        rgba(50,20,90,.09);
}


.core-node b {
    display:block;

    color:#aea8b5;

    font-size:9px;
}


.core-node strong {
    display:block;

    margin-top:8px;

    color:var(--purple);

    font-size:11px;

    letter-spacing:.08em;
}


.core-node span {
    display:block;

    margin-top:3px;

    color:#77727c;

    font-size:10px;
}


.core-soil {
    top:35px;
    left:60px;
}


.core-water {
    top:35px;
    right:55px;
}


.core-web {
    bottom:30px;
    left:60px;
}


.core-control {
    bottom:30px;
    right:55px;
}


.visual-caption {
    display:flex;

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

    gap:13px;

    color:#8a8490;

    font-size:9px;
    font-weight:800;

    letter-spacing:.09em;
}


.visual-caption i {
    color:#bbb4c2;

    font-style:normal;
}


/* GENERAL HEADING */

.agri-section-heading {
    max-width:800px;

    margin-bottom:60px;
}


.agri-section-heading.center {
    margin-left:auto;
    margin-right:auto;

    text-align:center;
}


.agri-section-heading h2,
.scale-heading h2,
.agri-future h2,
.agri-cta h2,
.monitoring-premium-copy h2 {
    margin:0;

    font-size:
        clamp(
            40px,
            4.3vw,
            58px
        );

    line-height:1.13;

    letter-spacing:-.045em;
}


.agri-section-heading h2 span,
.scale-heading h2 span {
    color:var(--purple);
}


/* PROBLEM */

.agri-problem {
    padding:125px 0;
}


.problem-layout {
    display:grid;

    grid-template-columns:
        .72fr 1.28fr;

    gap:85px;

    align-items:center;
}


.problem-copy p {
    max-width:510px;

    margin:
        0 0 21px;

    color:var(--text);

    font-size:16px;
    line-height:1.85;

    word-break:keep-all;
}


.problem-copy strong {
    color:var(--black);
}


.problem-comparison {
    display:grid;

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

    gap:12px;
}


.problem-comparison article {
    min-height:260px;

    padding:21px;

    border:
        1px solid var(--line);

    border-radius:21px;

    background:#fafafa;
}


.comparison-head {
    display:flex;

    justify-content:space-between;
    align-items:flex-start;
}


.comparison-head span {
    color:#8e8993;

    font-size:9px;
    font-weight:800;

    letter-spacing:.08em;
}


.comparison-head strong {
    font-size:28px;
}


.comparison-head .normal {
    color:var(--purple);
}


.comparison-head .dry {
    color:#a6752c;
}


.comparison-head .wet {
    color:#397d62;
}


.soil-bars {
    height:110px;

    display:flex;

    align-items:flex-end;

    gap:8px;

    margin-top:27px;
}


.soil-bars i {
    flex:1;

    min-height:10px;

    border-radius:20px;

    background:
        linear-gradient(
            to top,
            rgba(72,0,185,.14),
            rgba(72,0,185,.65)
        );
}


.problem-comparison p {
    margin:
        18px 0 0;

    color:#68636c;

    font-size:11px;
}


/* PIPELINE */

.agri-pipeline {
    padding:125px 0;

    background:#f7f7f9;
}


.pipeline-track {
    display:grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap:8px;

    align-items:stretch;
}


.pipeline-step {
    min-height:285px;

    padding:24px;

    border:
        1px solid
        #e5e4e8;

    border-radius:21px;

    background:#fff;
}


.pipeline-number {
    color:var(--purple);

    font-size:10px;
    font-weight:850;
}


.pipeline-icon {
    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    margin:
        31px 0 26px;

    border-radius:16px;

    background:var(--purple-soft);
}


.pipeline-icon span {
    display:block;
}


.icon-soil span {
    width:12px;
    height:31px;

    border:
        3px solid var(--purple);

    border-radius:6px;
}


.icon-connect span {
    width:28px;
    height:28px;

    border:
        3px solid var(--purple);

    border-radius:50%;

    box-shadow:
        0 0 0 6px
        rgba(72,0,185,.09);
}


.icon-analysis span {
    width:32px;
    height:23px;

    border-left:
        3px solid var(--purple);

    border-bottom:
        3px solid var(--purple);

    transform:
        skew(-22deg);
}


.icon-irrigation span {
    width:20px;
    height:30px;

    border-radius:
        50% 50% 50% 10%;

    border:
        3px solid var(--purple);

    transform:
        rotate(45deg);
}


.icon-meter span {
    width:34px;
    height:34px;

    border:
        4px solid var(--purple);

    border-radius:50%;
}


.icon-feedback span {
    width:32px;
    height:32px;

    border:
        3px solid var(--purple);

    border-radius:50%;

    border-left-color:transparent;
}


.pipeline-step > strong {
    display:block;

    font-size:16px;
}


.pipeline-step p {
    margin:12px 0 0;

    color:var(--text);

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


.pipeline-arrow {
    display:grid;

    place-items:center;

    color:#bbb7c1;
}


.pipeline-feedback {
    max-width:720px;

    display:flex;

    align-items:center;

    gap:15px;

    margin:
        37px auto 0;

    color:#747078;

    font-size:12px;
}


.pipeline-feedback span {
    flex:1;

    height:1px;

    background:
        linear-gradient(
            to right,
            var(--purple),
            rgba(72,0,185,.05)
        );
}


.pipeline-feedback strong {
    color:var(--purple);
}


/* COMPONENTS */

.agri-components {
    padding:125px 0;
}


.component-grid {
    display:grid;

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

    gap:18px;
}


.component-card {
    position:relative;

    min-height:560px;

    overflow:hidden;

    border:
        1px solid var(--line);

    border-radius:28px;

    background:#fff;
}


.component-card.purple {
    color:#fff;

    border-color:transparent;

    background:
        linear-gradient(
            145deg,
            #5100c9,
            #2d0072
        );
}


.component-number {
    position:absolute;

    z-index:4;

    top:26px;
    right:29px;

    color:#aaa6ae;

    font-size:10px;
    font-weight:850;
}


.purple .component-number {
    color:
        rgba(255,255,255,.43);
}


.component-graphic {
    position:relative;

    height:260px;

    display:grid;
    place-items:center;

    overflow:hidden;

    background:
        #f8f6fc;
}


.purple .component-graphic {
    background:
        rgba(255,255,255,.06);
}


.component-content {
    padding:31px 34px 35px;
}


.component-category {
    color:var(--purple);

    font-size:9px;
    font-weight:850;

    letter-spacing:.13em;
}


.purple .component-category {
    color:#d8c6ff;
}


.component-content h3 {
    margin:
        13px 0 12px;

    font-size:28px;

    letter-spacing:-.03em;
}


.component-content > p {
    max-width:510px;

    margin:0;

    color:var(--text);

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


.purple .component-content > p {
    color:
        rgba(255,255,255,.7);
}


.component-tags {
    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:21px;
}


.component-tags span {
    padding:
        6px 9px;

    border:
        1px solid var(--line);

    border-radius:100px;

    color:#737078;

    font-size:10px;
}


.purple .component-tags span {
    border-color:
        rgba(255,255,255,.16);

    color:
        rgba(255,255,255,.68);
}


.component-content a {
    display:inline-block;

    margin-top:25px;

    color:var(--purple);

    font-size:12px;
    font-weight:800;
}


.purple .component-content a {
    color:#ddceff;
}


/* DEVICE DRAWINGS */

.soil-product-shape {
    position:relative;

    width:90px;
    height:190px;

    z-index:3;
}


.shape-head {
    position:absolute;

    left:13px;
    top:7px;

    width:64px;
    height:64px;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #ddd8e9
        );

    box-shadow:
        0 15px 30px
        rgba(40,20,70,.13);
}


.shape-head::after {
    content:"";

    position:absolute;

    width:10px;
    height:10px;

    left:27px;
    top:26px;

    border-radius:50%;

    background:var(--purple);
}


.shape-body {
    position:absolute;

    left:40px;
    top:66px;

    width:10px;
    height:57px;

    border-radius:5px;

    background:#b8b5bc;
}


.shape-probe {
    position:absolute;

    left:43px;
    top:117px;

    width:4px;
    height:70px;

    background:#68656d;
}


.sensor-wave {
    position:absolute;

    border:
        1px solid
        rgba(72,0,185,.13);

    border-radius:50%;
}


.sensor-wave.wave-one {
    width:190px;
    height:190px;
}


.sensor-wave.wave-two {
    width:280px;
    height:280px;
}


.flow-device {
    display:flex;

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


.pipe {
    width:85px;
    height:23px;

    background:#b9b7bc;
}


.flow-meter-shape {
    position:relative;

    width:100px;
    height:100px;

    border-radius:50%;

    border:
        13px solid #77737e;

    background:#e9e7ec;

    box-shadow:
        0 16px 35px
        rgba(30,20,40,.12);
}


.meter-display {
    position:absolute;

    width:45px;
    height:25px;

    left:14px;
    top:24px;

    border-radius:4px;

    background:var(--purple);
}


.flow-wave {
    position:absolute;

    bottom:29px;

    color:
        rgba(72,0,185,.35);

    font-size:13px;

    letter-spacing:.3em;
}


.mini-dashboard {
    width:72%;
    height:175px;

    padding:15px;

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

    border-radius:15px;

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

    box-shadow:
        0 20px 40px
        rgba(0,0,0,.15);
}


.mini-dashboard-top {
    width:48%;
    height:8px;

    border-radius:5px;

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


.mini-dashboard-cards {
    display:grid;

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

    gap:7px;

    margin-top:15px;
}


.mini-dashboard-cards span {
    height:42px;

    border-radius:7px;

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


.mini-dashboard-chart {
    position:relative;

    height:65px;

    margin-top:11px;

    border-radius:7px;

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


.mini-dashboard-chart i {
    position:absolute;

    left:10%;
    right:10%;
    bottom:20%;

    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d8c4ff 20%,
            #fff 70%,
            #d8c4ff
        );

    transform:
        rotate(-7deg);
}


.control-box {
    position:relative;

    width:125px;
    height:150px;

    border:
        5px solid #8f8b95;

    border-radius:12px;

    background:#e9e8eb;

    box-shadow:
        0 18px 38px
        rgba(40,30,45,.13);
}


.control-led {
    position:absolute;

    width:10px;
    height:10px;

    top:22px;
    left:22px;

    border-radius:50%;

    background:#4ca66a;
}


.control-lines::before,
.control-lines::after {
    content:"";

    position:absolute;

    left:25px;

    width:70px;
    height:5px;

    border-radius:5px;

    background:#b7b4bb;
}


.control-lines::before {
    top:55px;
}


.control-lines::after {
    top:75px;
}


.valve-node {
    position:absolute;

    width:30px;
    height:30px;

    border:
        5px solid var(--purple);

    border-radius:50%;

    background:#fff;
}


.valve-one {
    left:17%;
    bottom:34px;
}


.valve-two {
    right:17%;
    bottom:34px;
}


.valve-three {
    right:13%;
    top:36px;
}


/* PREMIUM MONITOR */

.agri-monitoring {
    padding:125px 0;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #1f1031,
            #100716
        );
}


.monitoring-premium-layout {
    display:grid;

    grid-template-columns:
        .78fr 1.22fr;

    gap:75px;

    align-items:center;
}


.monitoring-premium-copy h2 span {
    color:#d3bdff;
}


.monitoring-premium-copy > p:not(.sub-kicker) {
    max-width:460px;

    margin:25px 0 0;

    color:
        rgba(255,255,255,.67);

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


.monitoring-points {
    margin-top:34px;

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


.monitoring-points div {
    display:grid;

    grid-template-columns:
        42px 1fr;

    padding:
        14px 0;

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


.monitoring-points strong {
    color:#cdb2ff;

    font-size:10px;
}


.monitoring-points span {
    color:
        rgba(255,255,255,.72);

    font-size:12px;
}


.monitoring-premium-ui {
    overflow:hidden;

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

    border-radius:24px;

    background:#fafafa;

    color:#17171a;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.25);
}


.ui-window-bar {
    height:40px;

    display:flex;

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

    padding:0 16px;

    background:#242128;

    color:
        rgba(255,255,255,.6);
}


.ui-window-bar > div {
    display:flex;

    gap:5px;
}


.ui-window-bar > div span {
    width:7px;
    height:7px;

    border-radius:50%;

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


.ui-window-bar strong {
    font-size:8px;

    letter-spacing:.12em;
}


.ui-toolbar {
    display:flex;

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

    padding:17px 20px;

    border-bottom:
        1px solid #e4e3e6;

    background:#fff;
}


.ui-toolbar > div {
    display:flex;
    flex-direction:column;

    gap:2px;
}


.ui-toolbar span {
    color:#949197;

    font-size:8px;
}


.ui-toolbar strong {
    font-size:11px;
}


.ui-status {
    padding:6px 8px;

    border-radius:100px;

    background:#edf6f0;

    color:#377650;

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


.ui-summary {
    display:grid;

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

    gap:7px;

    padding:13px 16px 0;
}


.ui-summary article {
    padding:12px;

    border-radius:9px;

    background:#f0eef3;
}


.ui-summary span {
    display:block;

    color:#96929b;

    font-size:7px;
}


.ui-summary strong {
    display:block;

    margin-top:4px;

    font-size:17px;
}


.ui-summary small {
    color:#8e8a93;

    font-size:7px;
}


.ui-chart-area {
    position:relative;

    height:230px;

    margin:9px 16px;

    padding:
        18px
        14px
        18px
        40px;

    overflow:hidden;

    border:
        1px solid #e5e3e8;

    border-radius:10px;

    background:#fff;
}


.ui-axis {
    position:absolute;

    left:11px;
    top:20px;
    bottom:20px;

    display:flex;

    flex-direction:column;
    justify-content:space-between;

    color:#aaa6ae;

    font-size:7px;
}


.ui-grid {
    position:absolute;

    inset:
        18px
        14px
        18px
        40px;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 24%,
            #eceaef 25%
        );
}


.ui-chart-area svg {
    position:relative;

    z-index:2;

    width:100%;
    height:100%;

    color:var(--purple);
}


.ui-sensors {
    display:flex;

    gap:5px;

    padding:
        0 16px 16px;
}


.ui-sensors span {
    flex:1;

    padding:7px;

    border-radius:6px;

    background:#eeedf0;

    color:#8e8b92;

    text-align:center;

    font-size:7px;
}


/* SCALE */

.agri-scale {
    padding:125px 0;

    background:#faf9fd;
}


.scale-heading {
    max-width:760px;
}


.scale-heading > p:not(.sub-kicker) {
    max-width:600px;

    margin:24px 0 0;

    color:var(--text);

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


.scale-diagram {
    display:grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap:14px;

    align-items:center;

    margin-top:60px;
}


.scale-level {
    min-height:175px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:23px;

    border:
        1px solid var(--line);

    border-radius:20px;

    background:#fff;
}


.scale-level.highlighted {
    color:#fff;

    border-color:transparent;

    background:
        linear-gradient(
            145deg,
            #5300cc,
            #350087
        );
}


.scale-icon {
    flex:0 0 auto;

    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:var(--purple-soft);

    color:var(--purple);

    font-size:10px;
    font-weight:850;
}


.highlighted .scale-icon {
    background:
        rgba(255,255,255,.13);

    color:#fff;
}


.scale-level strong {
    font-size:13px;

    letter-spacing:.08em;
}


.scale-level p {
    margin:5px 0 0;

    color:#7f7b83;

    font-size:11px;
}


.highlighted p {
    color:
        rgba(255,255,255,.62);
}


.scale-line {
    color:#b9b5bd;
}


/* FUTURE */

.agri-future {
    padding:125px 0;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #25133a,
            #110719
        );
}


.agri-future-layout {
    display:grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap:90px;
}


.agri-future h2 span {
    color:#d2bbff;
}


.future-copy > p {
    max-width:600px;

    margin:
        0 0 19px;

    color:
        rgba(255,255,255,.68);

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


.future-flow {
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    align-items:center;

    margin-top:32px;
}


.future-flow span,
.future-flow strong {
    padding:
        8px 10px;

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

    border-radius:100px;

    color:
        rgba(255,255,255,.7);

    font-size:9px;
    letter-spacing:.08em;
}


.future-flow i {
    color:
        rgba(255,255,255,.3);

    font-style:normal;
}


.future-flow strong {
    color:#d5c0ff;

    border-color:
        rgba(211,186,255,.25);

    background:
        rgba(72,0,185,.25);
}


/* CTA */

.agri-cta {
    padding:105px 0;

    background:
        linear-gradient(
            135deg,
            #5000c9,
            #340086
        );

    color:#fff;
}


.agri-cta-box {
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:90px;
}


.agri-cta h2 {
    color:#fff;
}


.agri-cta-right > p {
    max-width:520px;

    margin:4px 0 0;

    color:
        rgba(255,255,255,.74);

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


.agri-cta-button {
    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-top:29px;

    padding:
        14px 19px;

    border-radius:100px;

    background:#fff;

    color:var(--purple);

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


/* TABLET */

@media(max-width:1100px) {

    .pipeline-track {
        grid-template-columns:
            repeat(3,1fr);

        gap:12px;
    }

    .pipeline-arrow {
        display:none;
    }

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

    .scale-line {
        display:none;
    }

}


/* MOBILE */

@media(max-width:850px) {

    .agri-hero-layout,
    .problem-layout,
    .monitoring-premium-layout,
    .agri-future-layout,
    .agri-cta-box {
        grid-template-columns:1fr;
    }

    .agri-hero-layout {
        gap:45px;
    }

    .agri-system-visual {
        min-height:470px;
    }

    .problem-layout,
    .monitoring-premium-layout,
    .agri-future-layout,
    .agri-cta-box {
        gap:50px;
    }

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

}


@media(max-width:650px) {

    .agri-hero {
        padding:
            80px 0 85px;
    }

    .agri-hero h1 {
        font-size:
            clamp(
                41px,
                12vw,
                54px
            );
    }

    .agri-lead {
        font-size:16px;
    }

    .agri-problem,
    .agri-pipeline,
    .agri-components,
    .agri-monitoring,
    .agri-scale,
    .agri-future {
        padding:85px 0;
    }

    .agri-section-heading h2,
    .scale-heading h2,
    .agri-future h2,
    .agri-cta h2,
    .monitoring-premium-copy h2 {
        font-size:
            clamp(
                34px,
                9.5vw,
                43px
            );
    }

    .visual-core {
        min-height:355px;
    }

    .core-ring.ring-one {
        width:185px;
        height:185px;
    }

    .core-ring.ring-two {
        width:300px;
        height:300px;
    }

    .core-center {
        width:110px;
        height:110px;

        border-radius:31px;
    }

    .core-node {
        width:86px;

        min-height:70px;

        padding:10px;
    }

    .core-soil {
        top:15px;
        left:0;
    }

    .core-water {
        top:15px;
        right:0;
    }

    .core-web {
        left:0;
        bottom:12px;
    }

    .core-control {
        right:0;
        bottom:12px;
    }

    .visual-caption {
        gap:7px;

        font-size:7px;
    }

    .problem-comparison {
        grid-template-columns:1fr;
    }

    .problem-comparison article {
        min-height:210px;
    }

    .pipeline-track {
        grid-template-columns:
            1fr 1fr;
    }

    .pipeline-step {
        min-height:260px;
    }

    .component-card {
        min-height:540px;
    }

    .component-graphic {
        height:230px;
    }

    .monitoring-premium-ui {
        border-radius:17px;
    }

    .ui-summary {
        grid-template-columns:
            1fr 1fr;
    }

    .ui-chart-area {
        height:190px;
    }

    .ui-sensors span:nth-child(n+5) {
        display:none;
    }

    .scale-diagram {
        grid-template-columns:1fr;
    }

    .scale-level {
        min-height:125px;
    }

    .agri-cta {
        padding:80px 0;
    }

}


/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce) {

    .reveal {
        opacity:1;
        transform:none;
        transition:none;
    }

}



/* GF-WEB-SMART-1B START
   Smart Agriculture readability + semantic pipeline icons
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. SMART AGRICULTURE HERO TAGS
   Same readability level used for the enlarged company-page chips.
   -------------------------------------------------------------------------- */

.agri-hero-tags {
    gap: 10px;
}

.agri-hero-tags span {
    min-height: 40px;

    padding: 0 16px;

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

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   02. CONNECTED WATER MANAGEMENT — semantic icons
   -------------------------------------------------------------------------- */

.agri-pipeline .pipeline-icon {
    position: relative;

    display: grid;
    place-items: center;
}

.agri-pipeline .pipeline-icon > span {
    position: static !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    box-shadow: none !important;

    transform: none !important;
}

.agri-pipeline .pipeline-icon > span::before,
.agri-pipeline .pipeline-icon > span::after {
    content: none !important;
    display: none !important;
}

.agri-pipeline .icon-soil > span {
    background-image:
        url("/images/icons/agri-pipeline-soil.svg") !important;
}

.agri-pipeline .icon-connect > span {
    background-image:
        url("/images/icons/agri-pipeline-connect.svg") !important;
}

.agri-pipeline .icon-analysis > span {
    background-image:
        url("/images/icons/agri-pipeline-analysis.svg") !important;
}

.agri-pipeline .icon-irrigation > span {
    background-image:
        url("/images/icons/agri-pipeline-irrigation.svg") !important;
}

.agri-pipeline .icon-meter > span {
    background-image:
        url("/images/icons/agri-pipeline-meter.svg") !important;
}

.agri-pipeline .icon-feedback > span {
    background-image:
        url("/images/icons/agri-pipeline-feedback.svg") !important;
}


/* --------------------------------------------------------------------------
   03. CORE SOLUTION — TAGS + ACTION LINKS
   -------------------------------------------------------------------------- */

.agri-components .component-tags {
    gap: 8px;
}

.agri-components .component-tags span {
    min-height: 38px;

    padding: 0 14px;

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

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}


/*
 * Product detail / product / web monitoring / installation links
 */

.agri-components .component-content > a {
    min-height: 40px;

    display: inline-flex;
    align-items: center;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}


/* --------------------------------------------------------------------------
   04. DATA IN ONE VIEW
   Requested: current text approximately +2px
   -------------------------------------------------------------------------- */

.agri-monitoring .monitoring-points span {
    font-size: 14px;
}

.agri-monitoring .monitoring-points strong {
    font-size: 16px;
}


/* --------------------------------------------------------------------------
   05. FROM ONE FARM TO MANY
   Requested: four item texts approximately +3px
   -------------------------------------------------------------------------- */

.agri-scale .scale-level > div > strong {
    font-size: 17px;
}

.agri-scale .scale-level > div > p {
    font-size: 15px;
}

.agri-scale .scale-icon {
    font-size: 13px;
}


/* --------------------------------------------------------------------------
   06. DATA TO DECISION
   Match the improved company-page R&D pipeline scale.
   -------------------------------------------------------------------------- */

.agri-future .future-flow {
    gap: 11px;
}

.agri-future .future-flow span,
.agri-future .future-flow strong {
    min-height: 40px;

    padding: 0 16px;

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

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}

.agri-future .future-flow i {
    font-size: 20px;
    line-height: 1;
}


/* --------------------------------------------------------------------------
   MOBILE / SMALL TABLET
   Maintain readability without creating oversized wrapping.
   -------------------------------------------------------------------------- */

@media (max-width: 850px) {

    .agri-hero-tags span {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .agri-pipeline .pipeline-icon > span {
        width: 38px !important;
        height: 38px !important;
    }

    .agri-components .component-tags span {
        min-height: 34px;
        padding: 0 11px;
        font-size: 12px;
    }

    .agri-components .component-content > a {
        min-height: 38px;
        font-size: 14px;
    }

    .agri-monitoring .monitoring-points span {
        font-size: 13px;
    }

    .agri-monitoring .monitoring-points strong {
        font-size: 15px;
    }

    .agri-scale .scale-level > div > strong {
        font-size: 15px;
    }

    .agri-scale .scale-level > div > p {
        font-size: 14px;
    }

    .agri-scale .scale-icon {
        font-size: 12px;
    }

    .agri-future .future-flow span,
    .agri-future .future-flow strong {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .agri-future .future-flow i {
        font-size: 17px;
    }

}

/* GF-WEB-SMART-1B END */

/* GF-WEB-HERO-2B START
   Smart Agriculture hero — practical service architecture
   ========================================================================== */


/*
 * The company page uses a radial capability map.
 *
 * Smart Agriculture is deliberately changed to a rectangular
 * service-architecture panel so the two pages are immediately
 * distinguishable.
 */

@media (min-width: 1101px) {

    .agri-hero-layout {
        grid-template-columns:
            minmax(600px, 1.05fr)
            minmax(500px, .95fr);

        gap: 62px;
    }

    .agri-hero-copy {
        min-width: 0;
    }

    .agri-lead {
        max-width: 650px;

        font-size: 18px;
        line-height: 1.85;

        word-break: keep-all;
    }


    /*
     * SERVICE ARCHITECTURE PANEL
     */

    .agri-system-visual {
        min-height: 520px;

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

    .visual-core {
        position: relative;

        width: min(100%, 540px);
        height: 430px;

        overflow: hidden;

        border:
            1px solid
            rgba(72, 0, 185, .11);

        border-radius: 30px;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.98),
                rgba(248,245,255,.96)
            );

        box-shadow:
            0 30px 75px
            rgba(62, 37, 103, .09);
    }


    /*
     * Remove radial rings only on desktop.
     * Existing tablet/mobile responsive visual remains available.
     */

    .visual-core .core-ring {
        display: none;
    }


    /*
     * Architecture connection axis.
     */

    .visual-core::before,
    .visual-core::after {
        content: "";

        position: absolute;

        z-index: 0;

        background:
            rgba(72, 0, 185, .12);
    }

    .visual-core::before {
        top: 50%;
        left: 72px;
        right: 72px;

        height: 1px;
    }

    .visual-core::after {
        top: 72px;
        bottom: 72px;
        left: 50%;

        width: 1px;
    }


    /*
     * Central DATA hub.
     */

    .visual-core .core-center {
        position: absolute;

        z-index: 3;

        top: 50%;
        left: 50%;

        width: 142px;
        height: 142px;

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

        border-radius: 32px;

        box-shadow:
            0 22px 55px
            rgba(72, 0, 185, .22);
    }

    .visual-core .core-center strong {
        font-size: 24px;
        line-height: 1.15;

        letter-spacing: .04em;
    }

    .visual-core .core-center span,
    .visual-core .core-center small {
        font-size: 11px;
        line-height: 1.35;
    }


    /*
     * Four practical service modules.
     */

    .visual-core .core-node {
        z-index: 2;

        width: 146px;
        min-height: 86px;

        padding: 14px 16px;

        border:
            1px solid
            rgba(72, 0, 185, .13);

        border-radius: 17px;

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

        box-shadow:
            0 14px 34px
            rgba(54, 39, 82, .07);
    }

    .visual-core .core-node strong {
        font-size: 14px;
        line-height: 1.25;

        letter-spacing: .04em;
    }

    .visual-core .core-node span {
        font-size: 11px;
        line-height: 1.35;
    }

    .visual-core .core-node small,
    .visual-core .core-node p {
        font-size: 12px;
        line-height: 1.4;
    }


    /*
     * Physical service positions:
     *
     * SOIL       WATER
     *
     *      DATA
     *
     * WEB        CONTROL
     */

    .visual-core .core-soil {
        top: 48px;
        left: 38px;
        right: auto;
        bottom: auto;
    }

    .visual-core .core-water {
        top: 48px;
        right: 38px;
        left: auto;
        bottom: auto;
    }

    .visual-core .core-web {
        bottom: 48px;
        left: 38px;
        top: auto;
        right: auto;
    }

    .visual-core .core-control {
        right: 38px;
        bottom: 48px;
        top: auto;
        left: auto;
    }


    /*
     * Make the data-flow caption part of the visual,
     * not microscopic decoration.
     */

    .visual-caption {
        margin-top: 18px;

        font-size: 11px;
        line-height: 1.5;

        font-weight: 750;
        letter-spacing: .06em;
    }

}


/*
 * Tablet/mobile:
 * retain the existing responsive structure and only
 * improve descriptive copy readability.
 */

@media (max-width: 1100px) {

    .agri-lead {
        line-height: 1.8;
    }

}


/* GF-WEB-HERO-2B END */