/* =========================================================
   AGRTA TECHNOLOGIES
   Clean Homepage Design System
   ========================================================= */

:root {
    --agrta-navy: #061a33;
    --agrta-navy-2: #0a2748;
    --agrta-blue: #2563eb;
    --agrta-blue-light: #60a5fa;
    --agrta-cyan: #22d3ee;
    --agrta-ink: #0b1b2e;
    --agrta-text: #43546a;
    --agrta-muted: #718096;
    --agrta-border: #dfe7f1;
    --agrta-surface: #f6f9fd;
    --agrta-white: #ffffff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--agrta-text);
    background: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.agrta-container {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
}

/* ---------- HERO ---------- */

.agrta-hero {
    position: relative;
    overflow: hidden;
    min-height: 600px;
    color: #fff;
    background:
        radial-gradient(circle at 75% 30%, rgba(34,211,238,.14), transparent 25%),
        radial-gradient(circle at 55% 85%, rgba(37,99,235,.18), transparent 35%),
        var(--agrta-navy);
}

.agrta-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .35;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, #000 10%, transparent 90%);
}

.agrta-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr);
    gap: 72px;
    align-items: center;
    min-height: 600px;
    padding-block: 45px;
}

.agrta-kicker,
.agrta-section-label {
    color: var(--agrta-cyan);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.agrta-hero h1 {
    max-width: 720px;
    margin: 22px 0 0;
    color: #fff !important;
    font-size: clamp(52px, 5.4vw, 82px);
    line-height: .99;
    letter-spacing: -.055em;
    font-weight: 800;
}

.agrta-hero h1 span {
    display: block;
    color: #60a5fa !important;
}

.agrta-hero-text {
    max-width: 650px;
    margin: 30px 0 0;
    color: rgba(255,255,255,.76);
    font-size: 18px;
    line-height: 1.75;
}

.agrta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.agrta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 24px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.agrta-button:hover {
    transform: translateY(-2px);
}

.agrta-button-primary {
    color: #fff !important;
    background: var(--agrta-blue);
    box-shadow: 0 15px 35px rgba(37,99,235,.28);
}

.agrta-button-primary:hover {
    background: #3474ef;
}

.agrta-button-secondary {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.055);
}

.agrta-button-secondary:hover {
    background: rgba(255,255,255,.10);
}

.agrta-button-light {
    color: var(--agrta-navy) !important;
    background: #fff;
}

.agrta-proof-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
    gap: 22px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.13);
}

.agrta-proof-row div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.agrta-proof-row strong {
    color: #fff;
    font-size: 13px;
}

.agrta-proof-row span {
    color: rgba(255,255,255,.55);
    font-size: 12px;
    line-height: 1.5;
}

/* Hero product */

.agrta-hero-product {
    position: relative;
    padding: 30px 0 45px;
}

.agrta-product-glow {
    position: absolute;
    width: 430px;
    height: 430px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #2563eb;
    opacity: .16;
    filter: blur(80px);
}

.agrta-product-card {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    background: rgba(8,31,57,.92);
    box-shadow: 0 35px 80px rgba(0,0,0,.35);
    backdrop-filter: blur(14px);
}

.agrta-product-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.agrta-product-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.65);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .13em;
}

.agrta-product-mark {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    font-size: 12px;
    font-weight: 800;
}

.agrta-live {
    color: #7ee7b7;
    font-size: 10px;
    font-weight: 700;
}

.agrta-live i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #4ade80;
}

.agrta-product-body {
    display: grid;
    grid-template-columns: 64px 1fr;
    min-height: 440px;
}

.agrta-product-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding-top: 30px;
    border-right: 1px solid rgba(255,255,255,.07);
}

.agrta-product-nav span {
    width: 24px;
    height: 7px;
    border-radius: 5px;
    background: rgba(255,255,255,.12);
}

.agrta-product-nav span.active {
    width: 28px;
    background: #3b82f6;
}

.agrta-product-main {
    padding: 30px;
}

.agrta-product-heading,
.agrta-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.agrta-product-heading small,
.agrta-progress-card small,
.agrta-product-heading h3 {
    display: block;
    margin: 0;
}

.agrta-product-heading small {
    color: #6f8aa6;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .12em;
}

.agrta-product-heading h3 {
    margin-top: 5px;
    color: #fff;
    font-size: 20px;
}

.agrta-status {
    padding: 6px 10px;
    border: 1px solid rgba(74,222,128,.22);
    border-radius: 20px;
    color: #86efac;
    background: rgba(74,222,128,.08);
    font-size: 10px;
}

.agrta-progress-card {
    margin-top: 25px;
    padding: 19px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}

.agrta-progress-info span {
    color: #91a6bd;
    font-size: 11px;
}

.agrta-progress-info strong {
    color: #fff;
    font-size: 22px;
}

.agrta-progress-bar {
    height: 7px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
}

.agrta-progress-bar span {
    display: block;
    width: 78%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #22d3ee);
}

.agrta-progress-card > small {
    margin-top: 10px;
    color: #667e98;
    font-size: 9px;
}

.agrta-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
}

.agrta-mini-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
}

.agrta-mini-icon {
    display: grid;
    min-width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    color: #8cc7ff;
    background: rgba(37,99,235,.16);
    font-size: 8px;
    font-weight: 800;
}

.agrta-mini-card strong,
.agrta-mini-card small {
    display: block;
}

.agrta-mini-card strong {
    color: #fff;
    font-size: 11px;
}

.agrta-mini-card small {
    margin-top: 2px;
    color: #617995;
    font-size: 9px;
}

.agrta-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 145px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    background: rgba(7,29,53,.94);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.agrta-floating-card span {
    color: #7790a9;
    font-size: 9px;
}

.agrta-floating-card strong {
    color: #fff;
    font-size: 11px;
}

.agrta-floating-one {
    top: 12%;
    right: -22px;
}

.agrta-floating-two {
    bottom: 2%;
    left: -28px;
}

/* ---------- INTRO ---------- */

.agrta-intro-section {
    padding: 105px 0 85px;
    background: #fff;
}

.agrta-intro {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 70px;
}

.agrta-intro h2,
.agrta-section-heading h2,
.agrta-connected-copy h2,
.agrta-centered-heading h2,
.agrta-portal-copy h2,
.agrta-final h2 {
    margin: 0;
    color: var(--agrta-ink);
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.agrta-intro h2 span,
.agrta-section-heading h2 span,
.agrta-connected-copy h2 span,
.agrta-centered-heading h2 span,
.agrta-portal-copy h2 span,
.agrta-final h2 span {
    color: var(--agrta-blue);
}

.agrta-intro p {
    max-width: 730px;
    margin: 22px 0 0;
    color: var(--agrta-text);
    font-size: 18px;
    line-height: 1.8;
}

/* ---------- SERVICES ---------- */

.agrta-services-section {
    padding: 100px 0 115px;
    background: var(--agrta-surface);
}

.agrta-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 55px;
}

.agrta-section-heading p {
    max-width: 430px;
    margin: 0;
    color: var(--agrta-muted);
    font-size: 16px;
}

.agrta-section-heading .agrta-section-label {
    margin-bottom: 20px;
}

.agrta-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.agrta-service-feature {
    position: relative;
    min-height: 340px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid var(--agrta-border);
    border-radius: 14px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.agrta-service-feature:hover {
    transform: translateY(-6px);
    border-color: #c5d9f4;
    box-shadow: 0 22px 45px rgba(11,38,70,.09);
}

.agrta-service-wide {
    grid-column: span 2;
    min-height: 270px;
}

.agrta-service-number {
    color: #a3b2c4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.agrta-service-icon {
    display: grid;
    width: 50px;
    height: 50px;
    margin-top: 40px;
    place-items: center;
    border-radius: 12px;
    color: #2563eb;
    background: #edf4ff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
}

.agrta-service-feature h3 {
    max-width: 300px;
    margin: 22px 0 10px;
    color: var(--agrta-ink);
    font-size: 21px;
    line-height: 1.18;
    letter-spacing: -.025em;
}

.agrta-service-feature p {
    max-width: 340px;
    margin: 0;
    color: var(--agrta-muted);
    font-size: 14px;
    line-height: 1.7;
}

.agrta-service-link {
    position: absolute;
    right: 30px;
    bottom: 27px;
    color: var(--agrta-blue);
    font-size: 12px;
    font-weight: 750;
}

.agrta-service-link b {
    margin-left: 5px;
}

/* ---------- CONNECTED ---------- */

.agrta-connected-section {
    overflow: hidden;
    padding: 125px 0;
    color: #fff;
    background:
        radial-gradient(circle at 80% 50%, rgba(37,99,235,.17), transparent 32%),
        var(--agrta-navy);
}

.agrta-connected {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 80px;
    align-items: center;
}

.agrta-connected-copy h2 {
    margin-top: 20px;
    color: #fff;
}

.agrta-connected-copy h2 span {
    display: block;
    color: #60a5fa;
}

.agrta-connected-copy p {
    max-width: 540px;
    margin: 25px 0 0;
    color: rgba(255,255,255,.65);
    font-size: 16px;
    line-height: 1.8;
}

.agrta-text-link {
    display: inline-flex;
    gap: 12px;
    margin-top: 28px;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.agrta-text-link span {
    color: #60a5fa;
}

.agrta-system-map {
    position: relative;
    min-height: 510px;
}

.agrta-map-lines {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(30deg, transparent 49.8%, rgba(96,165,250,.25) 50%, transparent 50.2%),
        linear-gradient(150deg, transparent 49.8%, rgba(96,165,250,.18) 50%, transparent 50.2%);
    background-size: 52% 52%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .8;
}

.agrta-map-node {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 125px;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(9,39,70,.92);
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
}

.agrta-map-node span,
.agrta-map-node small {
    color: #64819d;
    font-size: 9px;
    font-weight: 750;
}

.agrta-map-node strong {
    color: #fff;
    font-size: 12px;
}

.agrta-map-main {
    top: 50%;
    left: 50%;
    min-width: 180px;
    transform: translate(-50%, -50%);
    align-items: center;
    padding: 22px;
    border-color: rgba(96,165,250,.35);
    text-align: center;
    background: linear-gradient(145deg, #123e6c, #0a2748);
}

.agrta-map-main strong {
    font-size: 16px;
}

.node-web { top: 3%; left: 8%; }
.node-crm { top: 5%; right: 8%; }
.node-auto { top: 42%; left: 0; }
.node-app { top: 42%; right: 0; }
.node-api { bottom: 4%; left: 12%; }
.node-infra { bottom: 4%; right: 12%; }

/* ---------- WHY ---------- */

.agrta-why-section {
    padding: 120px 0;
    background: #fff;
}

.agrta-centered-heading {
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.agrta-centered-heading h2 {
    margin-top: 20px;
}

.agrta-centered-heading p {
    max-width: 620px;
    margin: 22px auto 0;
    color: var(--agrta-muted);
    font-size: 17px;
}

.agrta-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--agrta-border);
    border-bottom: 1px solid var(--agrta-border);
}

.agrta-why-grid article {
    min-height: 270px;
    padding: 35px 30px;
    border-right: 1px solid var(--agrta-border);
}

.agrta-why-grid article:last-child {
    border-right: 0;
}

.agrta-why-grid article > span {
    color: var(--agrta-blue);
    font-size: 11px;
    font-weight: 800;
}

.agrta-why-grid h3 {
    margin: 48px 0 13px;
    color: var(--agrta-ink);
    font-size: 20px;
    line-height: 1.2;
}

.agrta-why-grid p {
    margin: 0;
    color: var(--agrta-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* ---------- PROCESS ---------- */

.agrta-process-section {
    padding: 110px 0;
    background: var(--agrta-surface);
}

.agrta-process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--agrta-border);
}

.agrta-process-step {
    display: flex;
    gap: 20px;
    min-height: 230px;
    padding: 32px 25px 25px 0;
    border-right: 1px solid var(--agrta-border);
}

.agrta-process-step:not(:first-child) {
    padding-left: 25px;
}

.agrta-process-step:last-child {
    border-right: 0;
}

.agrta-process-step > span {
    color: #a4b3c4;
    font-size: 11px;
    font-weight: 800;
}

.agrta-process-step h3 {
    margin: 42px 0 10px;
    color: var(--agrta-ink);
    font-size: 20px;
}

.agrta-process-step p {
    margin: 0;
    color: var(--agrta-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* ---------- PORTAL ---------- */

.agrta-portal-section {
    padding: 125px 0;
    background: #fff;
}

.agrta-portal {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 85px;
    align-items: center;
}

.agrta-portal-copy h2 {
    margin-top: 20px;
}

.agrta-portal-copy p {
    max-width: 510px;
    margin: 25px 0 0;
    color: var(--agrta-muted);
    font-size: 16px;
    line-height: 1.8;
}

.agrta-portal-copy .agrta-button {
    margin-top: 28px;
}

.agrta-portal-screen {
    overflow: hidden;
    border: 1px solid #d7e2ef;
    border-radius: 17px;
    background: #f7faff;
    box-shadow: 0 30px 70px rgba(12,43,75,.13);
}

.agrta-screen-top {
    display: flex;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e1e9f2;
    color: #7b8ea4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.agrta-screen-top b {
    color: #16a365;
    font-size: 9px;
}

.agrta-screen-title {
    padding: 28px 30px 20px;
}

.agrta-screen-title small,
.agrta-screen-columns small {
    color: #8a9bad;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.agrta-screen-title h3 {
    margin: 6px 0 0;
    color: var(--agrta-ink);
    font-size: 25px;
}

.agrta-screen-progress {
    margin: 0 30px;
    padding: 20px;
    border-radius: 11px;
    background: #fff;
}

.agrta-screen-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    color: #64778d;
    font-size: 12px;
}

.agrta-screen-progress strong {
    color: var(--agrta-blue);
    font-size: 18px;
}

.agrta-screen-progress .agrta-progress-bar {
    background: #e8eef6;
}

.agrta-screen-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 20px 30px;
}

.agrta-screen-columns > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px;
    border: 1px solid #e0e8f1;
    border-radius: 10px;
    background: #fff;
}

.agrta-screen-columns strong {
    color: var(--agrta-ink);
    font-size: 12px;
}

.agrta-screen-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    padding: 20px 30px 27px;
    border-top: 1px solid #e1e9f2;
    color: #7c8ea2;
    font-size: 11px;
}

.agrta-screen-checklist span {
    color: #aab7c6;
}

.agrta-screen-checklist .done {
    color: #16a365;
}

.agrta-screen-checklist .active {
    color: var(--agrta-blue);
}

/* ---------- FINAL CTA ---------- */

.agrta-final-section {
    position: relative;
    overflow: hidden;
    padding: 125px 0;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 50% 20%, rgba(37,99,235,.22), transparent 34%),
        var(--agrta-navy);
}

.agrta-final-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -250px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(96,165,250,.10);
    box-shadow: 0 0 0 80px rgba(96,165,250,.025), 0 0 0 160px rgba(96,165,250,.018);
}

.agrta-final {
    position: relative;
    z-index: 1;
}

.agrta-final-label {
    color: var(--agrta-cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

.agrta-final h2 {
    margin-top: 22px;
    color: #fff;
    font-size: clamp(48px, 5vw, 72px);
}

.agrta-final h2 span {
    color: #60a5fa;
}

.agrta-final p {
    max-width: 560px;
    margin: 22px auto 0;
    color: rgba(255,255,255,.65);
    font-size: 17px;
}

.agrta-final .agrta-actions {
    justify-content: center;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1100px) {

    .agrta-hero-inner {
        grid-template-columns: 1fr;
        gap: 55px;
        padding-block: 75px;
    }

    .agrta-hero {
        min-height: auto;
    }

    .agrta-hero-product {
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
    }

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

    .agrta-service-wide {
        grid-column: span 1;
        min-height: 340px;
    }

    .agrta-connected {
        grid-template-columns: 1fr;
    }

    .agrta-system-map {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

    .agrta-why-grid,
    .agrta-process {
        grid-template-columns: repeat(2, 1fr);
    }

    .agrta-why-grid article:nth-child(2) {
        border-right: 0;
    }

    .agrta-why-grid article:nth-child(-n+2) {
        border-bottom: 1px solid var(--agrta-border);
    }

    .agrta-process-step:nth-child(2) {
        border-right: 0;
    }

    .agrta-process-step:nth-child(-n+2) {
        border-bottom: 1px solid var(--agrta-border);
    }

    .agrta-portal {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {

    .agrta-container {
        width: min(100% - 32px, 600px);
    }

    .agrta-hero-inner {
        padding-block: 58px 70px;
    }

    .agrta-hero h1 {
        font-size: clamp(43px, 12vw, 62px);
    }

    .agrta-hero-text {
        font-size: 16px;
    }

    .agrta-proof-row {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 42px;
    }

    .agrta-proof-row div {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .agrta-product-body {
        grid-template-columns: 48px 1fr;
    }

    .agrta-product-main {
        padding: 20px;
    }

    .agrta-product-grid {
        grid-template-columns: 1fr;
    }

    .agrta-floating-one {
        right: -8px;
    }

    .agrta-floating-two {
        left: -8px;
    }

    .agrta-intro-section,
    .agrta-services-section,
    .agrta-connected-section,
    .agrta-why-section,
    .agrta-process-section,
    .agrta-portal-section,
    .agrta-final-section {
        padding-block: 80px;
    }

    .agrta-intro,
    .agrta-section-heading {
        grid-template-columns: 1fr;
        display: grid;
        gap: 28px;
    }

    .agrta-intro h2,
    .agrta-section-heading h2,
    .agrta-connected-copy h2,
    .agrta-centered-heading h2,
    .agrta-portal-copy h2 {
        font-size: 40px;
    }

    .agrta-services-grid {
        grid-template-columns: 1fr;
    }

    .agrta-service-wide {
        grid-column: span 1;
    }

    .agrta-system-map {
        min-height: 560px;
        transform: scale(.9);
        transform-origin: center;
    }

    .agrta-map-node {
        min-width: 110px;
    }

    .node-web { left: 0; }
    .node-crm { right: 0; }
    .node-api { left: 2%; }
    .node-infra { right: 2%; }

    .agrta-why-grid,
    .agrta-process {
        grid-template-columns: 1fr;
    }

    .agrta-why-grid article,
    .agrta-why-grid article:nth-child(2),
    .agrta-process-step,
    .agrta-process-step:nth-child(2) {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--agrta-border);
    }

    .agrta-why-grid article:last-child,
    .agrta-process-step:last-child {
        border-bottom: 0;
    }

    .agrta-why-grid h3 {
        margin-top: 25px;
    }

    .agrta-process-step,
    .agrta-process-step:not(:first-child) {
        padding: 28px 0;
    }

    .agrta-process-step h3 {
        margin-top: 0;
    }

    .agrta-screen-columns {
        grid-template-columns: 1fr;
        padding-inline: 20px;
    }

    .agrta-screen-title,
    .agrta-screen-checklist {
        padding-left: 20px;
        padding-right: 20px;
    }

    .agrta-final h2 {
        font-size: 48px;
    }
}

@media (max-width: 480px) {

    .agrta-hero-product {
        padding-bottom: 25px;
    }

    .agrta-product-top {
        padding-inline: 14px;
    }

    .agrta-product-brand span:last-child {
        font-size: 8px;
    }

    .agrta-product-body {
        grid-template-columns: 1fr;
    }

    .agrta-product-nav {
        display: none;
    }

    .agrta-floating-card {
        min-width: 125px;
        padding: 10px 12px;
    }

    .agrta-floating-one {
        top: 7%;
        right: -4px;
    }

    .agrta-floating-two {
        bottom: 0;
        left: -4px;
    }

    .agrta-system-map {
        min-height: 500px;
        transform: scale(.78);
        margin-block: -40px;
    }

    .agrta-button {
        width: 100%;
    }

    .agrta-final .agrta-actions {
        width: 100%;
    }
}


/* =========================================================
   AGRTA HEADER + FOOTER — CLEAN SYSTEM V1
   ========================================================= */

.agrta-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e8edf4;
}

.agrta-header-inner {
    width: min(1240px, calc(100% - 48px));
    min-height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
}

.agrta-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.agrta-brand .custom-logo-link {
    display: flex;
    align-items: center;
    line-height: 0;
}

.agrta-brand .custom-logo {
    display: block;
    width: auto;
    max-width: 205px;
    height: auto;
    max-height: 58px;
}

.agrta-brand-text {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #071d38;
    line-height: 1;
}

.agrta-brand-text strong {
    font-size: 30px;
    letter-spacing: -.05em;
}

.agrta-brand-text span {
    margin-top: 5px;
    color: #0878d1;
    font-size: 9px;
    letter-spacing: .34em;
    font-weight: 700;
}

.agrta-navigation {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.agrta-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 27px;
}

.agrta-menu li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.agrta-menu a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0;
    color: #152a43;
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    transition: color .2s ease;
}

.agrta-menu a:hover,
.agrta-menu .current-menu-item > a,
.agrta-menu .current-menu-ancestor > a {
    color: #1678dc;
}

.agrta-menu .menu-item-has-children > a::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.agrta-menu .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: -16px;
    z-index: 120;
    min-width: 210px;
    margin: 0;
    padding: 9px;
    list-style: none;
    background: #ffffff;
    border: 1px solid #e4ebf3;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(7,29,56,.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.agrta-menu .menu-item-has-children:hover > .sub-menu,
.agrta-menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.agrta-menu .sub-menu li {
    width: 100%;
}

.agrta-menu .sub-menu a {
    width: 100%;
    min-height: 40px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 12px;
}

.agrta-menu .sub-menu a:hover {
    background: #f2f7fc;
}

.agrta-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

.agrta-header-portal,
.agrta-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 0 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.agrta-header-portal {
    color: #0d68c4;
    background: #edf6ff;
    border: 1px solid #d7eafb;
}

.agrta-header-portal:hover {
    background: #e2f1ff;
    transform: translateY(-1px);
}

.agrta-header-cta {
    color: #ffffff;
    background: #176fe5;
    box-shadow: 0 7px 18px rgba(23,111,229,.22);
}

.agrta-header-cta:hover {
    color: #ffffff;
    background: #0f5fca;
    transform: translateY(-1px);
    box-shadow: 0 10px 23px rgba(23,111,229,.28);
}

.agrta-header-cta span {
    margin-left: 7px;
    font-size: 15px;
}

.agrta-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #dfe7ef;
    border-radius: 9px;
    background: #ffffff;
    cursor: pointer;
}

.agrta-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    background: #0b2340;
    border-radius: 2px;
}


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

.agrta-footer {
    width: 100%;
    background:
        radial-gradient(circle at 80% 0%, rgba(24,110,190,.14), transparent 32%),
        #061b34;
    color: #ffffff;
}

.agrta-footer-main {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    padding: 72px 0 58px;
    display: grid;
    grid-template-columns: 1.55fr .8fr 1.25fr 1.1fr;
    gap: 56px;
}

.agrta-footer-brand {
    min-width: 0;
}

.agrta-footer-brand .custom-logo-link {
    display: inline-flex;
    line-height: 0;
}

.agrta-footer-brand .custom-logo {
    display: block;
    width: auto;
    max-width: 225px;
    max-height: 70px;
    height: auto;
}

.agrta-footer-brand-text {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    color: #ffffff;
}

.agrta-footer-brand-text strong {
    font-size: 34px;
    letter-spacing: -.05em;
}

.agrta-footer-brand-text span {
    margin-top: 6px;
    color: #35a3ff;
    font-size: 9px;
    letter-spacing: .34em;
    font-weight: 700;
}

.agrta-footer-tagline {
    margin: 22px 0 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 650;
}

.agrta-footer-description {
    max-width: 270px;
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 1.7;
}

.agrta-footer-column {
    min-width: 0;
}

.agrta-footer-column h3 {
    position: relative;
    margin: 2px 0 21px;
    padding-bottom: 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .01em;
}

.agrta-footer-column h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: #2196f3;
    border-radius: 2px;
}

.agrta-footer-menu,
.agrta-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.agrta-footer-menu li,
.agrta-footer-contact li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.agrta-footer-menu li + li {
    margin-top: 11px;
}

.agrta-footer-menu a,
.agrta-footer-contact a {
    color: rgba(255,255,255,.68);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.5;
    transition: color .2s ease;
}

.agrta-footer-menu a:hover,
.agrta-footer-contact a:hover {
    color: #ffffff;
}

.agrta-footer-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.agrta-footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 7px;
    color: #ffffff;
    background: #176fe5;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: background .2s ease, transform .2s ease;
}

.agrta-footer-button:hover {
    color: #ffffff;
    background: #2783f3;
    transform: translateY(-1px);
}

.agrta-footer-button-secondary {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
}

.agrta-footer-button-secondary:hover {
    background: rgba(255,255,255,.14);
}

.agrta-footer-button span {
    margin-left: 6px;
}

.agrta-footer-bottom {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    min-height: 66px;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255,255,255,.42);
    font-size: 11px;
}

.agrta-footer-legal {
    display: flex;
    gap: 20px;
}

.agrta-footer-legal a {
    color: rgba(255,255,255,.48);
    text-decoration: none;
}

.agrta-footer-legal a:hover {
    color: #ffffff;
}


/* =========================================================
   HEADER + FOOTER RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
    .agrta-header-inner {
        gap: 18px;
    }

    .agrta-menu {
        gap: 18px;
    }

    .agrta-header-portal,
    .agrta-header-cta {
        padding-left: 12px;
        padding-right: 12px;
    }

    .agrta-footer-main {
        grid-template-columns: 1.3fr .8fr 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 900px) {
    .agrta-header-inner {
        min-height: 70px;
        width: min(100% - 32px, 1240px);
    }

    .agrta-brand .custom-logo {
        max-width: 175px;
        max-height: 52px;
    }

    .agrta-menu-toggle {
        display: block;
        margin-left: auto;
    }

    .agrta-navigation {
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;
        display: none;
        padding: 10px;
        background: #ffffff;
        border: 1px solid #e3eaf2;
        border-radius: 12px;
        box-shadow: 0 18px 40px rgba(7,29,56,.14);
    }

    .agrta-navigation.is-open,
    .agrta-menu-toggle[aria-expanded="true"] + .agrta-navigation {
        display: block;
    }

    .agrta-menu {
        display: block;
    }

    .agrta-menu li {
        width: 100%;
    }

    .agrta-menu a {
        min-height: 44px;
        padding: 0 12px;
        border-radius: 8px;
    }

    .agrta-menu a:hover {
        background: #f3f7fb;
    }

    .agrta-menu .sub-menu {
        position: static;
        display: none;
        margin: 0 0 5px 12px;
        padding: 3px;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        box-shadow: none;
    }

    .agrta-menu .menu-item-has-children:hover > .sub-menu,
    .agrta-menu .menu-item-has-children:focus-within > .sub-menu {
        display: block;
    }

    .agrta-header-actions {
        display: none;
    }

    .agrta-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 42px 34px;
    }
}

@media (max-width: 600px) {
    .agrta-header-inner {
        width: calc(100% - 28px);
    }

    .agrta-brand .custom-logo {
        max-width: 155px;
        max-height: 47px;
    }

    .agrta-navigation {
        left: 14px;
        right: 14px;
    }

    .agrta-footer-main {
        width: calc(100% - 36px);
        padding: 54px 0 42px;
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .agrta-footer-brand .custom-logo {
        max-width: 205px;
        max-height: 64px;
    }

    .agrta-footer-bottom {
        width: calc(100% - 36px);
        padding: 18px 0 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .agrta-footer-legal {
        flex-wrap: wrap;
    }
}


/* =========================================================
   AGRTA VISUAL REFINEMENT V1
   Typography + spacing only
   ========================================================= */

/* Header */
.agrta-header-inner {
    min-height: 80px;
}

.agrta-brand .custom-logo {
    max-width: 225px;
    max-height: 63px;
}

.agrta-menu {
    gap: 29px;
}

.agrta-menu a {
    font-size: 14px;
    font-weight: 650;
}

.agrta-header-portal,
.agrta-header-cta {
    min-height: 44px;
    font-size: 13px;
}


/* Hero supporting content */
.agrta-hero-text {
    font-size: 15px;
    line-height: 1.7;
}

.agrta-proof-row {
    font-size: 12px;
}

.agrta-proof-row strong {
    font-size: 13px;
}


/* Section supporting text */
.agrta-intro-section p,
.agrta-services-section p,
.agrta-connected-section p,
.agrta-why-section p,
.agrta-process-section p,
.agrta-portal-section p {
    font-size: 14px;
    line-height: 1.7;
}


/* Services */
.agrta-service-card {
    padding: 27px 25px;
}

.agrta-service-card h3 {
    font-size: 17px;
    line-height: 1.25;
}

.agrta-service-card p {
    font-size: 13px;
    line-height: 1.6;
}


/* Why Agrta */
.agrta-why-section article h3 {
    font-size: 16px;
}

.agrta-why-section article p {
    font-size: 13px;
}


/* Process */
.agrta-process-section article h3 {
    font-size: 16px;
}

.agrta-process-section article p {
    font-size: 13px;
}


/* Client Portal */
.agrta-portal-section .agrta-hero-text,
.agrta-portal-section p {
    font-size: 14px;
    line-height: 1.7;
}


/* Footer */
.agrta-footer-brand .custom-logo {
    max-width: 245px;
    max-height: 76px;
}

.agrta-footer-tagline {
    font-size: 15px;
}

.agrta-footer-description {
    font-size: 13px;
}

.agrta-footer-menu a,
.agrta-footer-contact a {
    font-size: 13px;
}

.agrta-footer-bottom {
    font-size: 12px;
}


/* Keep mobile typography controlled */
@media (max-width: 900px) {
    .agrta-brand .custom-logo {
        max-width: 185px;
        max-height: 54px;
    }

    .agrta-menu a {
        font-size: 14px;
    }

    .agrta-hero-text {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .agrta-brand .custom-logo {
        max-width: 165px;
        max-height: 49px;
    }

    .agrta-footer-brand .custom-logo {
        max-width: 215px;
        max-height: 66px;
    }

    .agrta-service-card {
        padding: 23px 20px;
    }
}

/* =========================================================
   AGRTA DENSITY + READABILITY PASS V1
   Keep design — improve information density
   ========================================================= */

/* ---------- Global section spacing ---------- */

.agrta-intro-section,
.agrta-services-section,
.agrta-connected-section,
.agrta-why-section,
.agrta-process-section,
.agrta-portal-section {
    padding-top: 72px;
    padding-bottom: 72px;
}


/* ---------- Hero ---------- */

.agrta-hero {
    min-height: 520px;
}

.agrta-hero-inner {
    min-height: 520px;
    padding-top: 35px;
    padding-bottom: 35px;
}

.agrta-hero h1 {
    font-size: clamp(52px, 5.3vw, 76px);
    line-height: .98;
    letter-spacing: -.045em;
    max-width: 650px;
}

.agrta-hero-text {
    max-width: 590px;
    font-size: 16px;
    line-height: 1.65;
}

.agrta-kicker,
.agrta-section-label {
    font-size: 12px;
    letter-spacing: .14em;
}

.agrta-proof-row {
    margin-top: 28px;
    gap: 28px;
}

.agrta-proof-row strong {
    font-size: 14px;
}

.agrta-proof-row span {
    font-size: 12px;
}


/* ---------- Intro ---------- */

.agrta-intro {
    padding-top: 0;
    padding-bottom: 0;
}

.agrta-intro-section .agrta-container {
    min-height: 0;
}

.agrta-intro-section h2 {
    font-size: clamp(34px, 3.6vw, 48px);
    line-height: 1.05;
}

.agrta-intro-section p {
    font-size: 15px;
    line-height: 1.65;
    max-width: 650px;
}


/* ---------- Services ---------- */

.agrta-services-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.agrta-services-section h2,
.agrta-connected-section h2,
.agrta-why-section h2,
.agrta-process-section h2,
.agrta-portal-section h2 {
    font-size: clamp(36px, 4vw, 50px);
    line-height: 1.02;
    letter-spacing: -.035em;
}

.agrta-services-section > .agrta-container > p,
.agrta-services-section .agrta-section-intro {
    font-size: 15px;
    line-height: 1.6;
}

.agrta-service-grid {
    gap: 16px;
    margin-top: 34px;
}

.agrta-service-card {
    min-height: 205px;
    padding: 25px 24px;
}

.agrta-service-card h3 {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.18;
    letter-spacing: -.02em;
}

.agrta-service-card p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.55;
}

.agrta-service-card .agrta-card-link {
    font-size: 12px;
}


/* ---------- Connected Technology ---------- */

.agrta-connected-section {
    padding-top: 68px;
    padding-bottom: 68px;
}

.agrta-connected-section h2 {
    max-width: 650px;
}

.agrta-connected-section > .agrta-container > p {
    max-width: 650px;
    font-size: 15px;
    line-height: 1.65;
}

.agrta-connected-section .agrta-connected-visual {
    min-height: 400px;
}


/* ---------- Why Agrta ---------- */

.agrta-why-section {
    padding-top: 68px;
    padding-bottom: 68px;
}

.agrta-why-section > .agrta-container > p {
    max-width: 650px;
    font-size: 15px;
    line-height: 1.65;
}

.agrta-why-grid {
    margin-top: 34px;
    gap: 0;
}

.agrta-why-section article {
    padding: 8px 28px;
}

.agrta-why-section article h3 {
    font-size: 18px;
    line-height: 1.2;
}

.agrta-why-section article p {
    font-size: 14px;
    line-height: 1.55;
}


/* ---------- Process ---------- */

.agrta-process-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.agrta-process-section > .agrta-container > p {
    max-width: 650px;
    font-size: 15px;
    line-height: 1.65;
}

.agrta-process-grid {
    margin-top: 32px;
    gap: 0;
}

.agrta-process-section article {
    padding: 10px 26px;
}

.agrta-process-section article .agrta-process-number {
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
}

.agrta-process-section article h3 {
    margin-top: 15px;
    font-size: 18px;
    line-height: 1.2;
}

.agrta-process-section article p {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.55;
}


/* ---------- Client Portal ---------- */

.agrta-portal-section {
    padding-top: 72px;
    padding-bottom: 72px;
}

.agrta-portal-section h2 {
    max-width: 560px;
}

.agrta-portal-section p {
    max-width: 560px;
    font-size: 15px;
    line-height: 1.65;
}


/* ---------- Final CTA ---------- */

.agrta-final-section {
    padding-top: 78px;
    padding-bottom: 78px;
}

.agrta-final-section h2 {
    font-size: clamp(42px, 4.5vw, 60px);
    line-height: 1;
}

.agrta-final-section p {
    max-width: 600px;
    font-size: 15px;
    line-height: 1.6;
}


/* ---------- Dashboard readability ---------- */

.agrta-product-card,
.agrta-floating-card {
    font-size: 13px;
}

.agrta-product-heading {
    font-size: 16px;
}

.agrta-status,
.agrta-progress-info,
.agrta-mini-card {
    font-size: 12px;
}


/* ---------- Footer ---------- */

.agrta-footer-main {
    padding-top: 60px;
    padding-bottom: 48px;
}

.agrta-footer-column h3 {
    font-size: 14px;
}

.agrta-footer-menu a,
.agrta-footer-contact a {
    font-size: 13px;
}


/* ---------- Desktop: keep content visible ---------- */

@media (min-width: 1101px) {
    .agrta-services-section .agrta-container,
    .agrta-connected-section .agrta-container,
    .agrta-why-section .agrta-container,
    .agrta-process-section .agrta-container,
    .agrta-portal-section .agrta-container {
        max-width: 1180px;
    }
}


/* ---------- Tablet ---------- */

@media (max-width: 900px) {
    .agrta-hero {
        min-height: auto;
    }

    .agrta-hero-inner {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .agrta-intro-section,
    .agrta-services-section,
    .agrta-connected-section,
    .agrta-why-section,
    .agrta-process-section,
    .agrta-portal-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .agrta-service-card {
        min-height: 190px;
    }
}


/* ---------- Mobile ---------- */

@media (max-width: 600px) {
    .agrta-hero-inner {
        padding-top: 46px;
        padding-bottom: 46px;
    }

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

    .agrta-hero-text {
        font-size: 15px;
    }

    .agrta-intro-section,
    .agrta-services-section,
    .agrta-connected-section,
    .agrta-why-section,
    .agrta-process-section,
    .agrta-portal-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .agrta-services-section h2,
    .agrta-connected-section h2,
    .agrta-why-section h2,
    .agrta-process-section h2,
    .agrta-portal-section h2 {
        font-size: 34px;
    }

    .agrta-service-card {
        min-height: 0;
        padding: 22px 20px;
    }

    .agrta-service-card h3 {
        font-size: 18px;
    }

    .agrta-service-card p,
    .agrta-why-section article p,
    .agrta-process-section article p {
        font-size: 14px;
    }

    .agrta-final-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}


/* Connected technology visual */

.agrta-services-orbit {
    position: relative;
    width: 100%;
    max-width: 610px;
    height: 235px;
    margin-left: auto;
}

.agrta-orbit-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 138px;
    height: 112px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7e5f6;
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 20px 50px rgba(37,99,235,.12);
}

.agrta-orbit-core span {
    display: grid;
    width: 30px;
    height: 30px;
    margin-bottom: 7px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg,#176fe5,#22b9ef);
    font-size: 14px;
    font-weight: 850;
}

.agrta-orbit-core strong {
    color: var(--agrta-ink);
    font-size: 15px;
    letter-spacing: .05em;
}

.agrta-orbit-core small {
    margin-top: 2px;
    color: var(--agrta-muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .18em;
}

.agrta-orbit-node {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 68px;
    border: 1px solid #dbe7f5;
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 30px rgba(17,55,95,.08);
}

.agrta-orbit-node b {
    color: var(--agrta-blue);
    font-size: 10px;
    letter-spacing: .08em;
}

.agrta-orbit-node span {
    margin-top: 4px;
    color: #62758e;
    font-size: 10px;
}

.orbit-web { top: 0; left: 5%; }
.orbit-crm { top: 82px; left: 20%; }
.orbit-api { bottom: 0; left: 7%; }
.orbit-app { top: 0; right: 5%; }
.orbit-seo { top: 82px; right: 20%; }
.orbit-sys { bottom: 0; right: 7%; }

.agrta-orbit-line {
    position: absolute;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(37,99,235,.05), rgba(37,99,235,.35), rgba(34,211,238,.1));
    transform-origin: left center;
}

.orbit-line-1 { width: 205px; top: 58px; left: 19%; transform: rotate(24deg); }
.orbit-line-2 { width: 145px; top: 119px; left: 28%; transform: rotate(-5deg); }
.orbit-line-3 { width: 190px; top: 164px; left: 19%; transform: rotate(-24deg); }
.orbit-line-4 { width: 205px; top: 58px; right: 19%; transform: rotate(156deg); }
.orbit-line-5 { width: 145px; top: 119px; right: 28%; transform: rotate(185deg); }
.orbit-line-6 { width: 190px; top: 164px; right: 19%; transform: rotate(204deg); }

/* Featured services */

.agrta-services-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.agrta-service-featured {
    position: relative;
    display: grid;
    grid-template-columns: 1fr .95fr;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid var(--agrta-border);
    border-radius: 18px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.agrta-service-featured:hover,
.agrta-service-support:hover {
    transform: translateY(-4px);
    border-color: #c7dcf4;
    box-shadow: 0 22px 50px rgba(11,38,70,.08);
}

.agrta-service-featured-copy {
    position: relative;
    z-index: 2;
    padding: 32px 0 30px 32px;
}

.agrta-service-meta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.agrta-service-meta span {
    color: #08b9dc;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .12em;
}

.agrta-service-meta b {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 8px;
    color: var(--agrta-blue);
    background: #edf4ff;
    font-size: 9px;
    letter-spacing: .08em;
}

.agrta-service-featured h3 {
    margin: 25px 0 12px;
    color: var(--agrta-ink);
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.agrta-service-featured p {
    max-width: 330px;
    margin: 0;
    color: var(--agrta-muted);
    font-size: 14px;
    line-height: 1.65;
}

.agrta-service-v2-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--agrta-blue);
    font-size: 13px;
    font-weight: 800;
}

.agrta-service-v2-link b {
    font-size: 16px;
}

/* CSS-only web visual */

.agrta-service-visual {
    position: relative;
    align-self: stretch;
    overflow: hidden;
    background: linear-gradient(135deg, #f7fbff, #edf5ff);
}

.agrta-web-visual::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    top: 25px;
    right: -45px;
    border-radius: 50%;
    background: rgba(37,99,235,.08);
}

.agrta-device-screen {
    position: absolute;
    right: 25px;
    top: 54px;
    width: 210px;
    height: 128px;
    padding: 12px;
    border: 5px solid #112944;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 35px rgba(12,37,66,.15);
}

.agrta-screen-bar {
    width: 30%;
    height: 5px;
    margin-bottom: 13px;
    border-radius: 4px;
    background: #176fe5;
}

.agrta-screen-title-line {
    width: 70%;
    height: 12px;
    margin-bottom: 8px;
    border-radius: 3px;
    background: #dce9f8;
}

.agrta-screen-line {
    width: 90%;
    height: 5px;
    margin-bottom: 6px;
    border-radius: 3px;
    background: #edf2f8;
}

.agrta-screen-line.short {
    width: 60%;
}

.agrta-screen-blocks {
    display: flex;
    gap: 7px;
    margin-top: 10px;
}

.agrta-screen-blocks i {
    display: block;
    width: 38px;
    height: 23px;
    border-radius: 4px;
    background: #edf4ff;
}

.agrta-device-tablet {
    position: absolute;
    left: 32px;
    bottom: 32px;
    width: 82px;
    height: 110px;
    padding: 8px;
    border: 4px solid #17324e;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(12,37,66,.12);
}

.agrta-device-mini-line {
    width: 70%;
    height: 5px;
    margin: 6px auto 12px;
    border-radius: 3px;
    background: #176fe5;
}

.agrta-device-mini-block {
    width: 100%;
    height: 45px;
    border-radius: 4px;
    background: #edf4ff;
}

.agrta-device-phone {
    position: absolute;
    right: 4px;
    bottom: 25px;
    width: 40px;
    height: 76px;
    padding: 7px 5px;
    border: 3px solid #17324e;
    border-radius: 9px;
    background: #fff;
}

.agrta-device-phone div {
    width: 18px;
    height: 4px;
    margin: 2px auto 9px;
    border-radius: 3px;
    background: #176fe5;
}

.agrta-device-phone i {
    display: block;
    width: 100%;
    height: 14px;
    margin-bottom: 5px;
    border-radius: 3px;
    background: #edf4ff;
}

/* CSS-only CRM visual */

.agrta-crm-visual {
    background: linear-gradient(135deg, #f3f8ff, #e8f2ff);
}

.agrta-crm-sidebar {
    position: absolute;
    top: 30px;
    left: 22px;
    bottom: 30px;
    width: 35px;
    padding-top: 15px;
    border-radius: 8px 0 0 8px;
    background: #102d4d;
}

.agrta-crm-sidebar i {
    display: block;
    width: 14px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 3px;
    background: rgba(255,255,255,.25);
}

.agrta-crm-sidebar i:first-child {
    background: #2c7bf0;
}

.agrta-crm-dashboard {
    position: absolute;
    top: 30px;
    right: 25px;
    bottom: 30px;
    left: 52px;
    padding: 16px;
    border: 1px solid #d8e6f5;
    border-radius: 0 9px 9px 0;
    background: #fff;
    box-shadow: 0 16px 35px rgba(12,37,66,.10);
}

.agrta-crm-top {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
}

.agrta-crm-top i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dbe7f5;
}

.agrta-crm-widgets {
    display: flex;
    gap: 8px;
}

.agrta-crm-widgets span {
    flex: 1;
    height: 28px;
    border-radius: 5px;
    background: #edf4ff;
}

.agrta-crm-chart {
    display: flex;
    align-items: end;
    gap: 8px;
    height: 90px;
    margin-top: 14px;
    padding: 10px;
    border-radius: 6px;
    background: #f5f9fd;
}

.agrta-crm-chart i {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, #2563eb, #54c8ee);
}

.agrta-crm-chart i:nth-child(1) { height: 30%; }
.agrta-crm-chart i:nth-child(2) { height: 48%; }
.agrta-crm-chart i:nth-child(3) { height: 40%; }
.agrta-crm-chart i:nth-child(4) { height: 72%; }
.agrta-crm-chart i:nth-child(5) { height: 88%; }

/* Supporting services */

.agrta-services-support-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 18px;
}

.agrta-service-support {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 255px;
    padding: 27px;
    border: 1px solid var(--agrta-border);
    border-radius: 16px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.agrta-service-support-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 12px;
    color: var(--agrta-blue);
    background: #edf4ff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .06em;
}

.agrta-service-support .agrta-service-meta {
    margin-bottom: 12px;
}

.agrta-service-support h3 {
    margin: 0 0 9px;
    color: var(--agrta-ink);
    font-size: 19px;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.agrta-service-support p {
    margin: 0;
    color: var(--agrta-muted);
    font-size: 13px;
    line-height: 1.6;
}

.agrta-service-support .agrta-service-v2-link {
    margin-top: auto;
    padding-top: 18px;
}

/* Services responsive */

@media (max-width: 1100px) {
    .agrta-services-v2-heading {
        grid-template-columns: 1fr;
    }

    .agrta-services-orbit {
        margin: 0 auto;
    }

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

@media (max-width: 760px) {
    .agrta-services-v2 {
        padding: 72px 0 80px;
    }

    .agrta-services-featured-grid {
        grid-template-columns: 1fr;
    }

    .agrta-service-featured {
        grid-template-columns: 1fr;
    }

    .agrta-service-visual {
        min-height: 230px;
    }

    .agrta-services-support-grid {
        grid-template-columns: 1fr;
    }

    .agrta-services-orbit {
        height: 205px;
        transform: scale(.88);
        transform-origin: center;
        margin-bottom: -20px;
    }
}

@media (max-width: 520px) {
    .agrta-services-v2-copy h2 {
        font-size: 42px;
    }

    .agrta-service-featured-copy {
        padding: 26px;
    }

    .agrta-service-featured h3 {
        font-size: 25px;
    }

    .agrta-services-orbit {
        display: none;
    }
}

/* =========================================================
   AGRTA SERVICES — CLEAN EDITORIAL
   ========================================================= */

.agrta-services-clean {
    position: relative;
    padding: 92px 0 96px;
    background:
        radial-gradient(circle at 84% 5%, rgba(34,113,235,.055), transparent 28%),
        #f7faff;
    overflow: hidden;
}

.agrta-services-clean-intro {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 42px;
}

.agrta-services-clean-heading {
    max-width: 510px;
}

.agrta-services-clean-heading .agrta-section-label {
    margin-bottom: 17px;
}

.agrta-services-clean-heading h2 {
    margin: 0;
    color: var(--agrta-ink);
    font-size: clamp(46px, 5vw, 68px);
    line-height: .98;
    letter-spacing: -.055em;
}

.agrta-services-clean-heading h2 span {
    color: var(--agrta-blue);
}

.agrta-services-clean-heading p {
    max-width: 450px;
    margin: 21px 0 20px;
    color: var(--agrta-muted);
    font-size: 15px;
    line-height: 1.65;
}

.agrta-services-clean-explore {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--agrta-blue);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.agrta-services-clean-explore span {
    font-size: 18px;
    transition: transform .2s ease;
}

.agrta-services-clean-explore:hover span {
    transform: translateX(4px);
}


/* Technology artwork */

.agrta-services-clean-visual {
    position: relative;
    min-height: 250px;
    padding: 18px 22px 13px;
    border: 1px solid #dfe8f3;
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 16px 42px rgba(20,60,105,.055);
}

.agrta-services-clean-visual-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8796a9;
    font-size: 9px;
    letter-spacing: .13em;
}

.agrta-services-clean-visual-top span {
    color: var(--agrta-blue);
    font-weight: 850;
}

.agrta-services-clean-visual-top b {
    font-weight: 750;
}

.agrta-services-clean-visual img {
    display: block;
    width: 100%;
    height: 185px;
    margin: 3px auto 0;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.agrta-services-clean-visual-caption {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid #e6edf5;
    padding-top: 9px;
    color: #77879b;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .07em;
    text-align: center;
}


/* Featured */

.agrta-services-clean-featured {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.agrta-services-clean-feature {
    min-height: 310px;
    display: grid;
    grid-template-columns: 1fr .82fr;
    overflow: hidden;
    border: 1px solid #dfe8f3;
    border-radius: 21px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 12px 34px rgba(22,61,103,.045);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.agrta-services-clean-feature:hover {
    transform: translateY(-4px);
    border-color: #c7daf0;
    box-shadow: 0 22px 46px rgba(22,61,103,.09);
}

.agrta-services-clean-feature-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 12px 28px 29px;
}

.agrta-clean-number {
    color: #8798ad;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;
}

.agrta-services-clean-feature h3 {
    margin: 32px 0 12px;
    color: var(--agrta-ink);
    font-size: 27px;
    line-height: 1.06;
    letter-spacing: -.04em;
}

.agrta-services-clean-feature p {
    max-width: 285px;
    margin: 0;
    color: var(--agrta-muted);
    font-size: 13px;
    line-height: 1.62;
}

.agrta-clean-arrow {
    margin-top: auto;
    padding-top: 17px;
    color: var(--agrta-blue);
    font-size: 12px;
    font-weight: 800;
}

.agrta-clean-arrow b {
    margin-left: 5px;
    font-size: 17px;
    font-weight: 500;
}

.agrta-services-clean-feature-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg,#edf5ff,#f9fbff);
}

.agrta-clean-art-glow {
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(39,124,242,.09);
}

.agrta-services-clean-feature-art img {
    position: relative;
    z-index: 1;
    width: 190px;
    height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 15px 22px rgba(25,81,142,.10));
}


/* Supporting services */

.agrta-services-clean-support {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.agrta-services-clean-item {
    min-height: 112px;
    display: grid;
    grid-template-columns: 62px minmax(0,1fr) 20px;
    gap: 16px;
    align-items: center;
    padding: 17px 19px;
    border: 1px solid #e0e8f2;
    border-radius: 17px;
    background: rgba(255,255,255,.88);
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(25,60,102,.025);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.agrta-services-clean-item:hover {
    transform: translateY(-2px);
    border-color: #c8dcf3;
    box-shadow: 0 13px 30px rgba(25,60,102,.065);
}

.agrta-clean-item-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 17px;
    background: #edf5ff;
}

.agrta-clean-item-icon img {
    width: 57px;
    height: 57px;
    object-fit: contain;
}

.agrta-services-clean-item div:nth-child(2) > span {
    color: #8a99ac;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .14em;
}

.agrta-services-clean-item h3 {
    margin: 4px 0 4px;
    color: #203752;
    font-size: 16px;
    line-height: 1.18;
    letter-spacing: -.025em;
}

.agrta-services-clean-item p {
    margin: 0;
    color: #728197;
    font-size: 11px;
    line-height: 1.48;
}

.agrta-services-clean-item > b {
    color: var(--agrta-blue);
    font-size: 18px;
    font-weight: 500;
}


/* Responsive */

@media (max-width: 1000px) {
    .agrta-services-clean-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .agrta-services-clean-heading {
        max-width: 680px;
    }

    .agrta-services-clean-feature {
        grid-template-columns: 1fr;
    }

    .agrta-services-clean-feature-art {
        min-height: 190px;
    }
}

@media (max-width: 700px) {
    .agrta-services-clean {
        padding: 70px 0 75px;
    }

    .agrta-services-clean-heading h2 {
        font-size: 45px;
    }

    .agrta-services-clean-visual {
        min-height: 205px;
        padding: 14px;
    }

    .agrta-services-clean-visual img {
        height: 145px;
    }

    .agrta-services-clean-feature,
    .agrta-services-clean-support {
        grid-template-columns: 1fr;
    }

    .agrta-services-clean-feature-copy {
        padding: 25px;
    }

    .agrta-services-clean-feature h3 {
        margin-top: 24px;
        font-size: 25px;
    }

    .agrta-services-clean-feature-art {
        min-height: 190px;
    }

    .agrta-services-clean-feature-art img {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .agrta-services-clean-visual-caption {
        font-size: 7px;
    }

    .agrta-services-clean-item {
        grid-template-columns: 55px minmax(0,1fr) 15px;
        gap: 12px;
        padding: 15px;
    }

    .agrta-clean-item-icon {
        width: 53px;
        height: 53px;
    }

    .agrta-clean-item-icon img {
        width: 51px;
        height: 51px;
    }
}


/* =========================================================
   AGRTA SERVICES — PREMIUM CONTENT-FOCUSED DESIGN
   ========================================================= */

.agrta-services-premium {
    position: relative;
    overflow: hidden;
    padding: 105px 0 110px;
    background:
        radial-gradient(circle at 82% 7%, rgba(38,112,238,.075), transparent 25%),
        linear-gradient(180deg, #f7faff 0%, #ffffff 48%, #f7faff 100%);
}

.agrta-services-premium::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -360px;
    top: 280px;
    border-radius: 50%;
    border: 1px solid rgba(31,111,235,.055);
    box-shadow:
        0 0 0 80px rgba(31,111,235,.018),
        0 0 0 160px rgba(31,111,235,.012);
    pointer-events: none;
}

.agrta-services-premium .agrta-container {
    position: relative;
    z-index: 1;
}


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

.agrta-services-premium-intro {
    display: grid;
    grid-template-columns: minmax(400px,.88fr) minmax(520px,1.12fr);
    gap: 70px;
    align-items: center;
    margin-bottom: 82px;
}

.agrta-services-premium-heading {
    max-width: 610px;
}

.agrta-services-premium-heading .agrta-section-label {
    margin-bottom: 19px;
}

.agrta-services-premium-heading h2 {
    margin: 0;
    color: #0e2038;
    font-size: clamp(52px,5.4vw,78px);
    line-height: .94;
    letter-spacing: -.065em;
    font-weight: 850;
}

.agrta-services-premium-heading h2 span {
    color: #2569e8;
}

.agrta-services-lead {
    max-width: 570px;
    margin: 27px 0 27px;
    color: #60738d;
    font-size: 17px;
    line-height: 1.72;
}

.agrta-services-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 28px;
}

.agrta-services-benefits > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.agrta-services-benefits strong {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 50%;
    color: #1769df;
    background: #e8f1ff;
    font-size: 12px;
    font-weight: 900;
}

.agrta-services-benefits span {
    color: #344c68;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 750;
}

.agrta-services-intro-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
}

.agrta-services-primary-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 19px;
    border-radius: 8px;
    color: #fff;
    background: #1769df;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 9px 22px rgba(23,105,223,.18);
    transition: transform .2s ease, box-shadow .2s ease;
}

.agrta-services-primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 27px rgba(23,105,223,.25);
}

.agrta-services-primary-button span {
    font-size: 17px;
}

.agrta-services-text-button {
    color: #213b59;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.agrta-services-text-button:hover {
    color: #1769df;
}


/* =========================================================
   TOP SERVICE PILLARS
   ========================================================= */

.agrta-services-pillars {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    padding: 20px 12px 17px;
    border-top: 1px solid #dce6f2;
    border-bottom: 1px solid #dce6f2;
}

.agrta-services-pillar {
    position: relative;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.agrta-services-pillar + .agrta-services-pillar {
    border-left: 1px solid #e1e9f3;
}

.agrta-services-pillar-art {
    width: 145px;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.agrta-services-pillar-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 20px rgba(23,82,145,.08));
}

.agrta-services-pillar strong {
    color: #1769df;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .16em;
}

.agrta-services-pillar span {
    margin-top: 7px;
    color: #526984;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
}


/* =========================================================
   LARGE FEATURED SERVICES
   ========================================================= */

.agrta-service-feature-large {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.03fr) minmax(0,.97fr);
    min-height: 590px;
    margin-bottom: 25px;
    overflow: hidden;
    border-top: 1px solid #dce6f2;
    border-bottom: 1px solid #dce6f2;
    background: rgba(255,255,255,.72);
}

.agrta-service-feature-large:first-of-type {
    margin-top: 15px;
}

.agrta-service-feature-large:nth-of-type(odd) {
    grid-template-columns: minmax(0,1.03fr) minmax(0,.97fr);
}

.agrta-service-feature-large.agrta-service-feature-crm {
    grid-template-columns: minmax(0,.97fr) minmax(0,1.03fr);
}

.agrta-service-feature-number {
    position: absolute;
    top: 28px;
    right: 34px;
    z-index: 5;
    color: #d8e3f0;
    font-size: clamp(72px,8vw,120px);
    line-height: .8;
    letter-spacing: -.07em;
    font-weight: 850;
    pointer-events: none;
}

.agrta-service-feature-crm .agrta-service-feature-number {
    right: auto;
    left: 34px;
}

.agrta-service-feature-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 55px 70px 12px;
}

.agrta-service-feature-crm .agrta-service-feature-content {
    padding: 80px 12px 70px 55px;
}

.agrta-service-eyebrow {
    margin-bottom: 18px;
    color: #1769df;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .18em;
}

.agrta-service-feature-content h3 {
    max-width: 650px;
    margin: 0;
    color: #0d2038;
    font-size: clamp(42px,4.5vw,65px);
    line-height: .97;
    letter-spacing: -.055em;
    font-weight: 850;
}

.agrta-service-feature-content h3 span {
    color: #2569e8;
}

.agrta-service-feature-content p {
    max-width: 590px;
    margin: 25px 0 23px;
    color: #60738c;
    font-size: 16px;
    line-height: 1.72;
}

.agrta-service-feature-content ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 27px;
    width: 100%;
    max-width: 620px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.agrta-service-feature-content li {
    position: relative;
    padding-left: 20px;
    color: #304963;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 650;
}

.agrta-service-feature-content li::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    left: 0;
    top: 6px;
    border-radius: 50%;
    background: #1769df;
}

.agrta-service-feature-actions {
    display: flex;
    align-items: center;
    gap: 23px;
    margin-top: 30px;
}

.agrta-service-feature-actions a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #1769df;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

.agrta-service-feature-actions a span {
    font-size: 19px;
    font-weight: 500;
}

.agrta-service-feature-actions a.secondary {
    color: #526982;
    font-weight: 700;
}


/* =========================================================
   FEATURE ART
   ========================================================= */

.agrta-service-feature-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(32,113,235,.13), transparent 44%),
        linear-gradient(145deg,#eef5ff,#f9fbff);
}

.agrta-feature-art-circle {
    position: absolute;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(37,105,232,.10);
    border-radius: 50%;
    box-shadow:
        0 0 0 55px rgba(37,105,232,.025),
        0 0 0 110px rgba(37,105,232,.015);
}

.agrta-service-art-icon {
    position: absolute;
    right: 25px;
    bottom: 25px;
    z-index: 8;
    width: 105px;
    height: 105px;
    padding: 7px;
    border-radius: 22px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 15px 35px rgba(20,63,108,.12);
    backdrop-filter: blur(8px);
}

.agrta-service-art-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* Website mockup */

.agrta-website-mockup {
    position: relative;
    z-index: 4;
    width: 76%;
    max-width: 490px;
    border: 6px solid #102c4b;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 35px 55px rgba(15,46,82,.20);
    transform: perspective(1100px) rotateY(-5deg) rotateX(3deg);
}

.agrta-mockup-top {
    height: 31px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    background: #eaf1f8;
}

.agrta-mockup-top span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8ea2b8;
}

.agrta-mockup-top b {
    margin-left: auto;
    color: #1769df;
    font-size: 8px;
    letter-spacing: .1em;
}

.agrta-mockup-body {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 240px;
}

.agrta-mockup-body > div:first-child {
    padding: 34px 22px;
    background: linear-gradient(145deg,#1769df,#2d8df0);
}

.agrta-mockup-body strong {
    display: block;
    color: #fff;
    font-size: 27px;
    line-height: .95;
    letter-spacing: -.05em;
}

.agrta-mockup-body em {
    color: #8fdcff;
    font-style: normal;
}

.agrta-mockup-body small {
    display: block;
    margin-top: 16px;
    color: rgba(255,255,255,.75);
    font-size: 9px;
    line-height: 1.5;
}

.agrta-mockup-body i {
    display: inline-block;
    margin-top: 18px;
    padding: 7px 10px;
    border-radius: 4px;
    color: #1769df;
    background: #fff;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
}

.agrta-mockup-image {
    position: relative;
    background:
        linear-gradient(135deg,transparent 45%,rgba(36,115,231,.06) 45%),
        #f1f6fb;
}

.agrta-mockup-image::before {
    content: "";
    position: absolute;
    width: 55%;
    height: 45%;
    right: 15%;
    top: 25%;
    border-radius: 8px;
    background: linear-gradient(145deg,#fff,#dbe9f8);
    box-shadow: 0 14px 28px rgba(26,73,125,.13);
}

.agrta-mockup-image::after {
    content: "";
    position: absolute;
    width: 35%;
    height: 10%;
    right: 25%;
    top: 38%;
    border-radius: 4px;
    background: #2d85ee;
}


/* CRM mockup */

.agrta-crm-mockup {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 115px 1fr;
    width: 78%;
    max-width: 500px;
    min-height: 315px;
    overflow: hidden;
    border: 5px solid #112f50;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 35px 55px rgba(15,46,82,.19);
    transform: perspective(1100px) rotateY(5deg) rotateX(3deg);
}

.agrta-crm-sidebar {
    display: flex;
    flex-direction: column;
    padding: 19px 12px;
    background: #0d2947;
}

.agrta-crm-sidebar b {
    margin-bottom: 25px;
    color: #55c6ff;
    font-size: 12px;
    letter-spacing: .08em;
}

.agrta-crm-sidebar span {
    margin: 0 0 14px;
    color: rgba(255,255,255,.55);
    font-size: 8px;
}

.agrta-crm-sidebar span:first-of-type {
    color: #fff;
}

.agrta-crm-main {
    padding: 25px 20px;
    background: #f7faff;
}

.agrta-crm-main > strong {
    display: block;
    color: #172f4b;
    font-size: 15px;
}

.agrta-crm-main > small {
    color: #7c8da2;
    font-size: 8px;
}

.agrta-crm-stat-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
    margin-top: 23px;
}

.agrta-crm-stat-row div {
    padding: 10px 8px;
    border: 1px solid #e1e9f3;
    border-radius: 7px;
    background: #fff;
}

.agrta-crm-stat-row small {
    display: block;
    color: #8b9aae;
    font-size: 6px;
}

.agrta-crm-stat-row b {
    display: block;
    margin-top: 5px;
    color: #1769df;
    font-size: 18px;
}

.agrta-crm-chart {
    height: 125px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 19px;
    padding: 14px;
    border: 1px solid #e3ebf4;
    border-radius: 8px;
    background: #fff;
}

.agrta-crm-chart span {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top,#1769df,#68c8f4);
}

.agrta-crm-chart span:nth-child(1) { height: 30%; }
.agrta-crm-chart span:nth-child(2) { height: 46%; }
.agrta-crm-chart span:nth-child(3) { height: 38%; }
.agrta-crm-chart span:nth-child(4) { height: 61%; }
.agrta-crm-chart span:nth-child(5) { height: 52%; }
.agrta-crm-chart span:nth-child(6) { height: 76%; }
.agrta-crm-chart span:nth-child(7) { height: 67%; }
.agrta-crm-chart span:nth-child(8) { height: 90%; }


/* =========================================================
   SUPPORTING SERVICES
   ========================================================= */

.agrta-services-support-premium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #dce6f2;
    border-bottom: 1px solid #dce6f2;
}

.agrta-services-support-premium article {
    position: relative;
    display: grid;
    grid-template-columns: 66px 65px minmax(0,1fr);
    gap: 18px;
    min-height: 220px;
    padding: 31px 28px;
    align-items: start;
    background: rgba(255,255,255,.5);
}

.agrta-services-support-premium article:nth-child(odd) {
    border-right: 1px solid #dce6f2;
}

.agrta-services-support-premium article:nth-child(-n+2) {
    border-bottom: 1px solid #dce6f2;
}

.agrta-support-premium-number {
    color: #1769df;
    font-size: 30px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.05em;
}

.agrta-services-support-premium article > img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.agrta-services-support-premium article > div:last-child {
    padding-top: 1px;
}

.agrta-services-support-premium h3 {
    margin: 0;
    color: #142d4a;
    font-size: 24px;
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 800;
}

.agrta-services-support-premium p {
    margin: 10px 0 12px;
    color: #657991;
    font-size: 12px;
    line-height: 1.55;
}

.agrta-services-support-premium ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
    margin: 0 0 13px;
    padding: 0;
    list-style: none;
}

.agrta-services-support-premium li {
    color: #49617c;
    font-size: 10px;
}

.agrta-services-support-premium li::before {
    content: "✓";
    margin-right: 4px;
    color: #1769df;
    font-weight: 850;
}

.agrta-services-support-premium a {
    color: #1769df;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
}

.agrta-support-custom-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #1769df;
    background: #eaf3ff;
    font-size: 30px;
    font-weight: 700;
}

.agrta-bars-icon {
    font-size: 17px;
    letter-spacing: 2px;
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.agrta-services-bottom-cta {
    display: grid;
    grid-template-columns: 65px 1fr minmax(250px,.8fr) auto;
    gap: 28px;
    align-items: center;
    margin-top: 60px;
    padding: 35px 38px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 50%,rgba(55,150,255,.17),transparent 34%),
        #09223e;
    box-shadow: 0 20px 45px rgba(8,37,67,.14);
}

.agrta-services-bottom-icon {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(111,194,255,.25);
    border-radius: 16px;
    color: #5cc8ff;
    background: rgba(255,255,255,.05);
    font-size: 18px;
    letter-spacing: 4px;
}

.agrta-services-bottom-cta small {
    color: #52c6ff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .16em;
}

.agrta-services-bottom-cta h3 {
    margin: 6px 0 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.agrta-services-bottom-cta p {
    margin: 0;
    color: rgba(255,255,255,.66);
    font-size: 12px;
    line-height: 1.55;
}

.agrta-services-bottom-cta > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 17px;
    border-radius: 7px;
    color: #1769df;
    background: #fff;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.agrta-services-bottom-cta > a span {
    font-size: 16px;
}


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

@media (max-width: 1050px) {

    .agrta-services-premium-intro {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .agrta-services-premium-heading {
        max-width: 760px;
    }

    .agrta-service-feature-large,
    .agrta-service-feature-large.agrta-service-feature-crm {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .agrta-service-feature-large .agrta-service-feature-content,
    .agrta-service-feature-crm .agrta-service-feature-content {
        order: 1;
        padding: 65px 40px;
    }

    .agrta-service-feature-large .agrta-service-feature-art,
    .agrta-service-feature-crm .agrta-service-feature-art {
        order: 2;
        min-height: 440px;
    }

    .agrta-service-feature-crm .agrta-service-feature-art {
        order: 2;
    }

    .agrta-services-support-premium article {
        grid-template-columns: 55px 58px minmax(0,1fr);
    }

    .agrta-services-bottom-cta {
        grid-template-columns: 60px 1fr;
    }

    .agrta-services-bottom-cta p {
        grid-column: 2;
    }

    .agrta-services-bottom-cta > a {
        grid-column: 2;
        justify-self: start;
    }
}


@media (max-width: 760px) {

    .agrta-services-premium {
        padding: 72px 0 80px;
    }

    .agrta-services-premium-heading h2 {
        font-size: 50px;
    }

    .agrta-services-lead {
        font-size: 15px;
    }

    .agrta-services-benefits {
        gap: 15px;
    }

    .agrta-services-pillars {
        grid-template-columns: 1fr 1fr;
    }

    .agrta-services-pillar {
        min-height: 205px;
    }

    .agrta-services-pillar:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #e1e9f3;
    }

    .agrta-services-pillar:nth-child(4) {
        border-top: 1px solid #e1e9f3;
    }

    .agrta-services-pillar-art {
        width: 105px;
        height: 105px;
    }

    .agrta-service-feature-number {
        font-size: 76px;
    }

    .agrta-service-feature-content h3 {
        font-size: 43px;
    }

    .agrta-service-feature-content ul {
        grid-template-columns: 1fr;
    }

    .agrta-service-feature-large .agrta-service-feature-content,
    .agrta-service-feature-crm .agrta-service-feature-content {
        padding: 55px 25px;
    }

    .agrta-service-feature-large .agrta-service-feature-art,
    .agrta-service-feature-crm .agrta-service-feature-art {
        min-height: 350px;
    }

    .agrta-website-mockup,
    .agrta-crm-mockup {
        width: 82%;
    }

    .agrta-services-support-premium {
        grid-template-columns: 1fr;
    }

    .agrta-services-support-premium article,
    .agrta-services-support-premium article:nth-child(odd),
    .agrta-services-support-premium article:nth-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid #dce6f2;
    }

    .agrta-services-support-premium article:last-child {
        border-bottom: 0;
    }

    .agrta-services-support-premium article {
        min-height: 185px;
    }

    .agrta-services-bottom-cta {
        grid-template-columns: 55px 1fr;
        gap: 18px;
        padding: 28px 23px;
    }

    .agrta-services-bottom-icon {
        width: 52px;
        height: 52px;
    }

    .agrta-services-bottom-cta h3 {
        font-size: 24px;
    }
}


@media (max-width: 520px) {

    .agrta-services-premium-heading h2 {
        font-size: 43px;
    }

    .agrta-services-intro-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .agrta-services-pillars {
        grid-template-columns: 1fr 1fr;
        padding: 10px 0;
    }

    .agrta-services-pillar {
        min-height: 180px;
    }

    .agrta-services-pillar-art {
        width: 82px;
        height: 82px;
    }

    .agrta-services-pillar span {
        font-size: 12px;
    }

    .agrta-services-pillar strong {
        font-size: 8px;
    }

    .agrta-service-feature-content h3 {
        font-size: 36px;
    }

    .agrta-service-feature-large .agrta-service-feature-art,
    .agrta-service-feature-crm .agrta-service-feature-art {
        min-height: 290px;
    }

    .agrta-website-mockup {
        width: 88%;
    }

    .agrta-crm-mockup {
        width: 90%;
        grid-template-columns: 82px 1fr;
    }

    .agrta-crm-sidebar span {
        font-size: 7px;
    }

    .agrta-crm-stat-row {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .agrta-service-art-icon {
        width: 78px;
        height: 78px;
        right: 14px;
        bottom: 14px;
        border-radius: 15px;
    }

    .agrta-services-support-premium article {
        grid-template-columns: 45px 55px minmax(0,1fr);
        gap: 11px;
        padding: 25px 15px;
    }

    .agrta-support-premium-number {
        font-size: 23px;
    }

    .agrta-services-support-premium article > img,
    .agrta-support-custom-icon {
        width: 55px;
        height: 55px;
    }

    .agrta-services-support-premium h3 {
        font-size: 19px;
    }

    .agrta-services-support-premium p {
        font-size: 11px;
    }

    .agrta-services-bottom-cta {
        grid-template-columns: 1fr;
    }

    .agrta-services-bottom-cta p,
    .agrta-services-bottom-cta > a {
        grid-column: 1;
    }
}


/* =========================================================
   AGRTA CONNECTED TECHNOLOGY — FINAL CONTENT DESIGN
   ========================================================= */

.agrta-connected-section {
    position: relative;
    overflow: hidden;
    padding: 125px 0 135px;
    color: #fff;
    background:
        radial-gradient(circle at 78% 50%, rgba(37,99,235,.20), transparent 34%),
        radial-gradient(circle at 15% 80%, rgba(14,165,233,.08), transparent 28%),
        #071d35;
}

.agrta-connected {
    display: grid;
    grid-template-columns: minmax(360px,.78fr) minmax(560px,1.22fr);
    gap: 70px;
    align-items: center;
}

.agrta-connected-copy {
    position: relative;
    z-index: 5;
}

.agrta-connected-copy .agrta-section-label {
    color: #60a5fa;
}

.agrta-connected-copy h2 {
    max-width: 590px;
    margin: 22px 0 0;
    color: #fff;
    font-size: clamp(44px, 5vw, 68px);
    line-height: .98;
    letter-spacing: -.055em;
}

.agrta-connected-copy h2 span {
    display: block;
    margin-top: 7px;
    color: #60a5fa;
}

.agrta-connected-copy p {
    max-width: 530px;
    margin: 28px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 17px;
    line-height: 1.8;
}

.agrta-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.agrta-text-link span {
    color: #60a5fa;
    font-size: 19px;
    transition: transform .2s ease;
}

.agrta-text-link:hover span {
    transform: translateX(4px);
}


/* ---------- SYSTEM MAP ---------- */

.agrta-system-map {
    position: relative;
    width: 100%;
    min-height: 570px;
}

.agrta-map-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .75;
    pointer-events: none;
}

.agrta-map-lines::before,
.agrta-map-lines::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%,-50%);
    border: 1px solid rgba(96,165,250,.13);
    border-radius: 50%;
}

.agrta-map-lines::after {
    width: 275px;
    height: 275px;
    border-color: rgba(96,165,250,.10);
}


/* Connecting spokes */

.agrta-system-map::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 470px;
    height: 1px;
    transform: translate(-50%,-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(96,165,250,.30) 18%,
        rgba(96,165,250,.30) 82%,
        transparent
    );
}

.agrta-system-map::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 1px;
    height: 470px;
    transform: translate(-50%,-50%);
    background: linear-gradient(
        180deg,
        transparent,
        rgba(96,165,250,.30) 18%,
        rgba(96,165,250,.30) 82%,
        transparent
    );
}


/* ---------- NODES ---------- */

.agrta-map-node {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 155px;
    min-height: 82px;
    padding: 17px 20px;
    border: 1px solid rgba(148,190,235,.18);
    border-radius: 14px;
    background: rgba(10,38,67,.92);
    box-shadow: 0 18px 45px rgba(0,0,0,.20);
    backdrop-filter: blur(10px);
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.agrta-map-node:hover {
    border-color: rgba(96,165,250,.55);
    background: rgba(14,49,83,.98);
    transform: translateY(-3px);
}

.agrta-map-node span,
.agrta-map-node small {
    margin-bottom: 6px;
    color: #60a5fa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.agrta-map-node strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -.015em;
}


/* ---------- CENTRAL BUSINESS NODE ---------- */

.agrta-map-main {
    top: 50%;
    left: 50%;
    z-index: 8;
    width: 205px;
    min-width: 205px;
    min-height: 145px;
    transform: translate(-50%,-50%);
    align-items: center;
    justify-content: center;
    padding: 25px;
    border: 1px solid rgba(96,165,250,.48);
    border-radius: 22px;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(22,70,116,.98), rgba(7,31,55,.98));
    box-shadow:
        0 25px 70px rgba(0,0,0,.30),
        0 0 0 10px rgba(96,165,250,.035);
}

.agrta-map-main::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(96,165,250,.12);
    border-radius: 15px;
}

.agrta-map-main small {
    position: relative;
    margin: 0 0 8px;
    color: #7dd3fc;
    font-size: 9px;
    letter-spacing: .25em;
}

.agrta-map-main strong {
    position: relative;
    font-size: 22px;
    letter-spacing: -.025em;
}


/* ---------- NODE POSITIONS ---------- */

.node-web {
    top: 5%;
    left: 5%;
}

.node-crm {
    top: 5%;
    right: 5%;
}

.node-auto {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.node-app {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.node-api {
    bottom: 5%;
    left: 8%;
}

.node-infra {
    right: 8%;
    bottom: 5%;
}


/* ---------- SMALL CONNECTOR DOTS ---------- */

.node-web::after,
.node-crm::after,
.node-auto::after,
.node-app::after,
.node-api::after,
.node-infra::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px solid #60a5fa;
    border-radius: 50%;
    background: #071d35;
    box-shadow: 0 0 15px rgba(96,165,250,.45);
}

.node-web::after,
.node-api::after {
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
}

.node-crm::after,
.node-infra::after {
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
}

.node-auto::after {
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
}

.node-app::after {
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
}


/* ---------- CONNECTED RESPONSIVE ---------- */

@media (max-width: 1050px) {

    .agrta-connected {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .agrta-connected-copy {
        max-width: 720px;
    }

    .agrta-system-map {
        max-width: 720px;
        margin: 0 auto;
    }
}


@media (max-width: 700px) {

    .agrta-connected-section {
        padding: 80px 0 90px;
    }

    .agrta-connected-copy h2 {
        font-size: 46px;
    }

    .agrta-connected-copy p {
        font-size: 16px;
    }

    .agrta-system-map {
        min-height: 520px;
        transform: scale(.88);
        transform-origin: center center;
        margin-top: -25px;
        margin-bottom: -25px;
    }

    .agrta-map-node {
        min-width: 130px;
        min-height: 70px;
        padding: 13px 15px;
    }

    .agrta-map-node strong {
        font-size: 13px;
    }

    .agrta-map-main {
        width: 170px;
        min-width: 170px;
        min-height: 125px;
    }

    .agrta-map-main strong {
        font-size: 19px;
    }
}


@media (max-width: 520px) {

    .agrta-system-map {
        min-height: 430px;
        transform: none;
        margin: 15px 0 0;
    }

    .agrta-map-node {
        min-width: 108px;
        min-height: 62px;
        padding: 11px 12px;
        border-radius: 11px;
    }

    .agrta-map-node strong {
        font-size: 11px;
    }

    .agrta-map-node span,
    .agrta-map-node small {
        font-size: 7px;
    }

    .agrta-map-main {
        width: 145px;
        min-width: 145px;
        min-height: 105px;
        padding: 18px;
        border-radius: 17px;
    }

    .agrta-map-main strong {
        font-size: 17px;
    }

    .node-web {
        top: 2%;
        left: 0;
    }

    .node-crm {
        top: 2%;
        right: 0;
    }

    .node-auto {
        left: -5px;
    }

    .node-app {
        right: -5px;
    }

    .node-api {
        bottom: 2%;
        left: 0;
    }

    .node-infra {
        right: 0;
        bottom: 2%;
    }

    .agrta-system-map::before {
        width: 300px;
    }

    .agrta-system-map::after {
        height: 330px;
    }

    .agrta-map-lines::before {
        width: 300px;
        height: 300px;
    }

    .agrta-map-lines::after {
        width: 210px;
        height: 210px;
    }
}


/* Connected Technology — tighter vertical crop */
.agrta-connected-section {
    padding-top: 72px;
    padding-bottom: 78px;
}

.agrta-system-map {
    min-height: 450px;
}

@media (max-width: 1050px) {
    .agrta-connected-section {
        padding-top: 65px;
        padding-bottom: 70px;
    }

    .agrta-system-map {
        min-height: 450px;
    }
}

@media (max-width: 700px) {
    .agrta-connected-section {
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .agrta-system-map {
        min-height: 430px;
    }
}

@media (max-width: 520px) {
    .agrta-connected-section {
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .agrta-system-map {
        min-height: 390px;
    }
}


/* =========================================================
   AGRTA WHY AGRTA — PREMIUM EDITORIAL DESIGN
   ========================================================= */

.agrta-why-section {
    padding: 115px 0 120px;
    background: #fff;
}

.agrta-centered-heading {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    column-gap: 80px;
    max-width: 1180px;
    margin: 0 auto 70px;
    text-align: left;
}

.agrta-centered-heading .agrta-section-label {
    grid-column: 1;
    align-self: start;
    margin-top: 10px;
}

.agrta-centered-heading h2 {
    grid-column: 2;
    max-width: 720px;
    margin: 0;
    color: var(--agrta-ink);
    font-size: clamp(46px, 5vw, 68px);
    line-height: .98;
    letter-spacing: -.055em;
}

.agrta-centered-heading h2 span {
    display: block;
    color: var(--agrta-blue);
}

.agrta-centered-heading p {
    grid-column: 2;
    max-width: 650px;
    margin: 26px 0 0;
    color: var(--agrta-muted);
    font-size: 17px;
    line-height: 1.8;
}


/* ---------- REASONS ---------- */

.agrta-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 0;
    border-top: 1px solid var(--agrta-border);
    border-bottom: 1px solid var(--agrta-border);
}

.agrta-why-grid article {
    position: relative;
    min-height: 295px;
    padding: 32px 30px 35px;
    border-right: 1px solid var(--agrta-border);
}

.agrta-why-grid article:last-child {
    border-right: 0;
}

.agrta-why-grid article > span {
    display: block;
    color: var(--agrta-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.agrta-why-grid h3 {
    max-width: 220px;
    margin: 72px 0 16px;
    color: var(--agrta-ink);
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.agrta-why-grid p {
    max-width: 245px;
    margin: 0;
    color: var(--agrta-muted);
    font-size: 14px;
    line-height: 1.7;
}


/* subtle blue rule */
.agrta-why-grid article::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 30px;
    width: 38px;
    height: 2px;
    background: var(--agrta-blue);
}


/* ---------- WHY RESPONSIVE ---------- */

@media (max-width: 1050px) {

    .agrta-why-section {
        padding: 90px 0 95px;
    }

    .agrta-centered-heading {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 55px;
    }

    .agrta-centered-heading .agrta-section-label,
    .agrta-centered-heading h2,
    .agrta-centered-heading p {
        grid-column: 1;
    }

    .agrta-centered-heading h2 {
        max-width: 720px;
    }

    .agrta-centered-heading p {
        margin-top: 4px;
    }

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

    .agrta-why-grid article:nth-child(2) {
        border-right: 0;
    }

    .agrta-why-grid article:nth-child(-n+2) {
        border-bottom: 1px solid var(--agrta-border);
    }
}


@media (max-width: 600px) {

    .agrta-why-section {
        padding: 70px 0 75px;
    }

    .agrta-centered-heading {
        margin-bottom: 45px;
    }

    .agrta-centered-heading h2 {
        font-size: 42px;
    }

    .agrta-centered-heading p {
        font-size: 15px;
        line-height: 1.7;
    }

    .agrta-why-grid {
        grid-template-columns: 1fr;
    }

    .agrta-why-grid article,
    .agrta-why-grid article:nth-child(2) {
        min-height: auto;
        padding: 28px 22px 32px;
        border-right: 0;
        border-bottom: 1px solid var(--agrta-border);
    }

    .agrta-why-grid article:last-child {
        border-bottom: 0;
    }

    .agrta-why-grid article::before {
        left: 22px;
    }

    .agrta-why-grid h3 {
        max-width: 300px;
        margin-top: 42px;
        font-size: 21px;
    }

    .agrta-why-grid p {
        max-width: 340px;
        font-size: 14px;
    }
}


/* =========================================================
   AGRTA PROCESS — PREMIUM PROJECT JOURNEY
   ========================================================= */

.agrta-process-section {
    padding: 105px 0 110px;
    background: var(--agrta-surface);
}

.agrta-process-section .agrta-section-heading {
    display: grid;
    grid-template-columns: 1fr 430px;
    align-items: end;
    gap: 70px;
    margin-bottom: 65px;
}

.agrta-process-section .agrta-section-heading h2 {
    margin-top: 20px;
    color: var(--agrta-ink);
    font-size: clamp(46px, 5vw, 66px);
    line-height: .98;
    letter-spacing: -.055em;
}

.agrta-process-section .agrta-section-heading h2 span {
    color: var(--agrta-blue);
}

.agrta-process-section .agrta-section-heading p {
    max-width: 430px;
    margin: 0;
    color: var(--agrta-muted);
    font-size: 16px;
    line-height: 1.8;
}


/* ---------- PROCESS JOURNEY ---------- */

.agrta-process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--agrta-border);
    border-bottom: 1px solid var(--agrta-border);
}

.agrta-process::before {
    content: "";
    position: absolute;
    top: 47px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--agrta-border);
}

.agrta-process-step {
    position: relative;
    display: block;
    min-height: 300px;
    padding: 30px 30px 35px;
    border-right: 1px solid var(--agrta-border);
}

.agrta-process-step:first-child {
    padding-left: 0;
}

.agrta-process-step:last-child {
    padding-right: 0;
    border-right: 0;
}

.agrta-process-step > span {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #fff;
    border-radius: 50%;
    background: var(--agrta-blue);
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 0 0 7px var(--agrta-surface);
}

.agrta-process-step > div {
    padding-top: 58px;
}

.agrta-process-step h3 {
    margin: 0 0 14px;
    color: var(--agrta-ink);
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.agrta-process-step p {
    max-width: 230px;
    margin: 0;
    color: var(--agrta-muted);
    font-size: 14px;
    line-height: 1.75;
}


/* ---------- STEP ACCENT ---------- */

.agrta-process-step > div::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-bottom: 20px;
    background: var(--agrta-blue);
}


/* ---------- PROCESS RESPONSIVE ---------- */

@media (max-width: 1050px) {

    .agrta-process-section {
        padding: 85px 0 90px;
    }

    .agrta-process-section .agrta-section-heading {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 50px;
    }

    .agrta-process-section .agrta-section-heading p {
        max-width: 620px;
    }

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

    .agrta-process::before {
        display: none;
    }

    .agrta-process-step,
    .agrta-process-step:first-child,
    .agrta-process-step:last-child {
        min-height: 255px;
        padding: 28px;
        border-right: 1px solid var(--agrta-border);
        border-bottom: 1px solid var(--agrta-border);
    }

    .agrta-process-step:nth-child(2),
    .agrta-process-step:nth-child(4) {
        border-right: 0;
    }

    .agrta-process-step:nth-child(3),
    .agrta-process-step:nth-child(4) {
        border-bottom: 0;
    }
}


@media (max-width: 600px) {

    .agrta-process-section {
        padding: 70px 0 75px;
    }

    .agrta-process-section .agrta-section-heading {
        margin-bottom: 42px;
    }

    .agrta-process-section .agrta-section-heading h2 {
        font-size: 42px;
    }

    .agrta-process-section .agrta-section-heading p {
        font-size: 15px;
    }

    .agrta-process {
        grid-template-columns: 1fr;
    }

    .agrta-process-step,
    .agrta-process-step:first-child,
    .agrta-process-step:last-child {
        min-height: auto;
        padding: 27px 22px 32px;
        border-right: 0;
        border-bottom: 1px solid var(--agrta-border);
    }

    .agrta-process-step:last-child {
        border-bottom: 0;
    }

    .agrta-process-step > div {
        padding-top: 38px;
    }

    .agrta-process-step h3 {
        font-size: 21px;
    }

    .agrta-process-step p {
        max-width: 380px;
    }
}


/* =========================================================
   AGRTA CLIENT PORTAL — PREMIUM PRODUCT SECTION
   ========================================================= */

.agrta-portal-section {
    position: relative;
    overflow: hidden;
    padding: 95px 0 105px;
    background: #fff;
}

.agrta-portal {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 75px;
    align-items: center;
}

.agrta-portal-copy {
    position: relative;
    z-index: 2;
}

.agrta-portal-copy h2 {
    margin-top: 20px;
    color: var(--agrta-ink);
    font-size: clamp(46px, 5vw, 66px);
    line-height: .98;
    letter-spacing: -.055em;
}

.agrta-portal-copy h2 span {
    display: block;
    color: var(--agrta-blue);
}

.agrta-portal-copy p {
    max-width: 510px;
    margin: 27px 0 0;
    color: var(--agrta-muted);
    font-size: 16px;
    line-height: 1.8;
}

.agrta-portal-copy .agrta-button {
    margin-top: 30px;
}

.agrta-portal-copy::after {
    content: "See your project.  Track progress.  Stay in control.";
    display: block;
    max-width: 390px;
    margin-top: 22px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
}


/* ---------- DASHBOARD ---------- */

.agrta-portal-screen {
    position: relative;
    overflow: hidden;
    border: 1px solid #d7e2ef;
    border-radius: 20px;
    background: #f7faff;
    box-shadow:
        0 35px 80px rgba(12,43,75,.12),
        0 8px 25px rgba(12,43,75,.05);
}

.agrta-portal-screen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #176fe5, #22b9ef);
}

.agrta-screen-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e1e9f2;
    color: #7b8ea4;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    background: rgba(255,255,255,.7);
}

.agrta-screen-top b {
    color: #16a365;
    font-size: 9px;
}

.agrta-screen-title {
    padding: 30px 32px 22px;
}

.agrta-screen-title small,
.agrta-screen-columns small {
    color: #8a9bad;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.agrta-screen-title h3 {
    margin: 7px 0 0;
    color: var(--agrta-ink);
    font-size: 27px;
    letter-spacing: -.025em;
}

.agrta-screen-progress {
    margin: 0 32px;
    padding: 21px;
    border: 1px solid #e7edf5;
    border-radius: 12px;
    background: #fff;
}

.agrta-screen-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    color: #64778d;
    font-size: 12px;
}

.agrta-screen-progress strong {
    color: var(--agrta-blue);
    font-size: 19px;
}

.agrta-screen-progress .agrta-progress-bar {
    height: 7px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 20px;
    background: #e8eef6;
}

.agrta-screen-progress .agrta-progress-bar span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #176fe5, #22b9ef);
}

.agrta-screen-columns {
    gap: 14px;
    padding: 22px 32px;
}

.agrta-screen-columns > div {
    padding: 18px;
    border: 1px solid #e0e8f1;
    border-radius: 11px;
    background: #fff;
}

.agrta-screen-columns strong {
    margin-top: 2px;
    color: var(--agrta-ink);
    font-size: 13px;
    line-height: 1.35;
}

.agrta-screen-checklist {
    gap: 12px 22px;
    padding: 20px 32px 28px;
    border-top: 1px solid #e1e9f2;
    color: #7c8ea2;
    font-size: 11px;
}

.agrta-screen-checklist .done {
    color: #16a365;
}

.agrta-screen-checklist .active {
    color: var(--agrta-blue);
}


/* ---------- PORTAL RESPONSIVE ---------- */

@media (max-width: 1050px) {

    .agrta-portal-section {
        padding: 85px 0 90px;
    }

    .agrta-portal {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .agrta-portal-copy {
        max-width: 720px;
    }

    .agrta-portal-screen {
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
    }
}


@media (max-width: 600px) {

    .agrta-portal-section {
        padding: 70px 0 75px;
    }

    .agrta-portal {
        gap: 40px;
    }

    .agrta-portal-copy h2 {
        font-size: 42px;
    }

    .agrta-portal-copy p {
        font-size: 15px;
        line-height: 1.7;
    }

    .agrta-screen-title {
        padding: 25px 22px 19px;
    }

    .agrta-screen-title h3 {
        font-size: 23px;
    }

    .agrta-screen-progress {
        margin: 0 22px;
    }

    .agrta-screen-columns {
        grid-template-columns: 1fr;
        padding: 18px 22px;
    }

    .agrta-screen-checklist {
        padding: 18px 22px 24px;
    }
}


/* =========================================================
   AGRTA FINAL CTA — PREMIUM CLOSING SECTION
   ========================================================= */

.agrta-final-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0 105px;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(37,99,235,.24), transparent 38%),
        linear-gradient(180deg, #071d35 0%, #06192d 100%);
}

.agrta-final-section::before {
    content: "";
    position: absolute;
    top: -300px;
    left: 50%;
    width: 620px;
    height: 620px;
    transform: translateX(-50%);
    border: 1px solid rgba(96,165,250,.10);
    border-radius: 50%;
    box-shadow:
        0 0 0 75px rgba(96,165,250,.025),
        0 0 0 150px rgba(96,165,250,.015);
}

.agrta-final {
    position: relative;
    z-index: 2;
}

.agrta-final-label {
    color: #67e8f9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
}

.agrta-final h2 {
    max-width: 800px;
    margin: 20px auto 0;
    color: #fff;
    font-size: clamp(48px, 6vw, 78px);
    line-height: .95;
    letter-spacing: -.06em;
}

.agrta-final h2 span {
    color: #60a5fa;
}

.agrta-final p {
    max-width: 560px;
    margin: 25px auto 0;
    color: rgba(255,255,255,.67);
    font-size: 17px;
    line-height: 1.75;
}

.agrta-final .agrta-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}


/* ---------- FINAL CTA RESPONSIVE ---------- */

@media (max-width: 600px) {

    .agrta-final-section {
        padding: 75px 0 80px;
    }

    .agrta-final h2 {
        font-size: 46px;
    }

    .agrta-final p {
        font-size: 15px;
        line-height: 1.7;
    }

    .agrta-final .agrta-actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   AGRTA FOOTER — FINAL PREMIUM DESIGN
   ========================================================= */

.agrta-footer {
    position: relative;
    overflow: hidden;
    color: rgba(255,255,255,.72);
    background: #06192d;
}

.agrta-footer-main {
    display: grid;
    grid-template-columns: 1.35fr .75fr 1.15fr .95fr;
    gap: 55px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 78px 24px 65px;
}


/* ---------- BRAND ---------- */

.agrta-footer-brand {
    max-width: 310px;
}

.agrta-footer-brand .custom-logo {
    display: block;
    width: auto;
    max-width: 190px;
    max-height: 58px;
    object-fit: contain;
}

.agrta-footer-tagline {
    margin: 22px 0 0;
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .08em;
}

.agrta-footer-description {
    margin: 12px 0 0;
    color: rgba(255,255,255,.48);
    font-size: 13px;
    line-height: 1.7;
}


/* ---------- COLUMNS ---------- */

.agrta-footer-column h3 {
    position: relative;
    margin: 0 0 23px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.agrta-footer-column h3::after {
    content: "";
    display: block;
    width: 25px;
    height: 2px;
    margin-top: 10px;
    background: #3b82f6;
}

.agrta-footer-menu,
.agrta-footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agrta-footer-menu li,
.agrta-footer-contact li {
    margin: 0;
    padding: 0;
}

.agrta-footer-menu li + li {
    margin-top: 11px;
}

.agrta-footer-menu a,
.agrta-footer-contact a {
    color: rgba(255,255,255,.57);
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    transition:
        color .2s ease,
        transform .2s ease;
}

.agrta-footer-menu a:hover,
.agrta-footer-contact a:hover {
    color: #fff;
}


/* ---------- CONTACT ---------- */

.agrta-footer-contact a {
    color: #fff;
    font-weight: 600;
}

.agrta-footer-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 25px;
}

.agrta-footer-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid #3b82f6;
    border-radius: 7px;
    color: #fff;
    background: #2563eb;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.agrta-footer-button:hover {
    color: #fff;
    background: #1d4ed8;
    border-color: #60a5fa;
    transform: translateY(-2px);
}

.agrta-footer-button-secondary {
    border-color: rgba(148,190,235,.24);
    background: rgba(255,255,255,.04);
}

.agrta-footer-button-secondary:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(148,190,235,.45);
}

.agrta-footer-button span {
    font-size: 15px;
}


/* ---------- BOTTOM BAR ---------- */

.agrta-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 21px 24px 24px;
    border-top: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.38);
    font-size: 11px;
}

.agrta-footer-legal {
    display: flex;
    gap: 22px;
}

.agrta-footer-legal a {
    color: rgba(255,255,255,.45);
    text-decoration: none;
}

.agrta-footer-legal a:hover {
    color: #fff;
}


/* ---------- FOOTER RESPONSIVE ---------- */

@media (max-width: 950px) {

    .agrta-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 50px 40px;
        padding-top: 65px;
    }

    .agrta-footer-brand {
        max-width: 360px;
    }
}


@media (max-width: 600px) {

    .agrta-footer-main {
        grid-template-columns: 1fr;
        gap: 42px;
        padding: 58px 22px 50px;
    }

    .agrta-footer-brand {
        max-width: 340px;
    }

    .agrta-footer-brand .custom-logo {
        max-width: 175px;
    }

    .agrta-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 19px 22px 23px;
    }

    .agrta-footer-legal {
        gap: 18px;
    }
}


/* Footer — use existing white Agrta logo */
.agrta-footer-logo {
    display: block;
    width: 205px;
    height: auto;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
}

.agrta-footer-brand .agrta-footer-logo {
    filter: none;
}


/* =========================================================
   AGRTA HOMEPAGE — SPACING & FLOW CLEANUP
   Keep approved designs/content, remove excessive whitespace
   ========================================================= */

/* ---------- WHAT WE BUILD ---------- */

.agrta-intro-section {
    padding: 68px 0 62px;
}

.agrta-intro {
    grid-template-columns: .42fr 1.58fr;
    gap: 55px;
    align-items: start;
}

.agrta-intro h2 {
    max-width: 850px;
    font-size: clamp(40px, 4.4vw, 58px);
    line-height: .98;
}

.agrta-intro p {
    max-width: 760px;
    margin-top: 20px;
    line-height: 1.65;
}


/* ---------- SERVICES ---------- */

.agrta-services-premium {
    padding-top: 72px;
    padding-bottom: 78px;
}


/* ---------- CONNECTED TECHNOLOGY ---------- */

.agrta-connected-section {
    padding-top: 58px;
    padding-bottom: 62px;
}


/* ---------- WHY AGRTA ---------- */

.agrta-why-section {
    padding-top: 68px;
    padding-bottom: 72px;
}

.agrta-centered-heading {
    margin-bottom: 52px;
}


/* ---------- PROCESS ---------- */

.agrta-process-section {
    padding-top: 68px;
    padding-bottom: 72px;
}

.agrta-process-section .agrta-section-heading {
    margin-bottom: 48px;
}


/* ---------- CLIENT PORTAL ---------- */

.agrta-portal-section {
    padding-top: 68px;
    padding-bottom: 72px;
}


/* ---------- FINAL CTA ---------- */

.agrta-final-section {
    padding-top: 68px;
    padding-bottom: 72px;
}


/* ---------- FOOTER ---------- */

.agrta-footer-main {
    padding-top: 48px;
    padding-bottom: 45px;
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .agrta-intro-section {
        padding: 52px 0 50px;
    }

    .agrta-intro {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .agrta-intro h2 {
        font-size: 42px;
    }

    .agrta-intro p {
        margin-top: 16px;
    }

    .agrta-services-premium {
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .agrta-connected-section {
        padding-top: 50px;
        padding-bottom: 54px;
    }

    .agrta-why-section {
        padding-top: 56px;
        padding-bottom: 60px;
    }

    .agrta-process-section {
        padding-top: 56px;
        padding-bottom: 60px;
    }

    .agrta-portal-section {
        padding-top: 56px;
        padding-bottom: 60px;
    }

    .agrta-final-section {
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .agrta-footer-main {
        padding-top: 45px;
        padding-bottom: 42px;
    }
}


/* =========================================================
   AGRTA — INFORMATIVE WEB DESIGN VISUAL
   ========================================================= */

.agrta-web-informative-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
}

.agrta-web-informative-art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 18px;
}

@media (max-width: 900px) {
    .agrta-web-informative-art {
        min-height: 360px;
        padding: 8px;
    }
}

@media (max-width: 700px) {
    .agrta-web-informative-art {
        min-height: 300px;
    }
}

/* =========================================================
   AGRTA — INFORMATIVE CRM VISUAL
   ========================================================= */

.agrta-crm-informative-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
}

.agrta-crm-informative-art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 18px;
}

@media (max-width: 900px) {
    .agrta-crm-informative-art {
        min-height: 360px;
        padding: 8px;
    }
}

@media (max-width: 700px) {
    .agrta-crm-informative-art {
        min-height: 300px;
    }
}

/* =========================================================
   AGRTA — INFORMATIVE CLIENT PORTAL VISUAL
   ========================================================= */

.agrta-portal-informative-art {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
}

.agrta-portal-informative-art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 18px;
}

@media (max-width: 900px) {
    .agrta-portal-informative-art {
        min-height: 360px;
        padding: 8px;
    }
}

@media (max-width: 700px) {
    .agrta-portal-informative-art {
        min-height: 300px;
    }
}

/* =========================================================
   AGRTA — INFORMATIVE HERO VISUAL
   ========================================================= */

.agrta-hero-informative-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
    background: transparent;
}

.agrta-hero-informative-art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 1050px) {
    .agrta-hero-informative-art {
        min-height: 420px;
    }
}

@media (max-width: 700px) {
    .agrta-hero-informative-art {
        min-height: 330px;
        margin-top: 20px;
    }

    .agrta-hero-informative-art img {
        width: 100%;
        height: auto;
    }
}

/* =========================================================
   AGRTA — INTEGRATED HERO VISUAL
   Make the hero visual part of the composition instead of
   a separate right-hand panel.
   ========================================================= */

@media (min-width: 1101px) {

    .agrta-hero-inner {
        display: block;
        position: relative;
        min-height: 620px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .agrta-hero-content {
        position: relative;
        z-index: 3;
        width: 54%;
        max-width: 850px;
    }

    .agrta-hero-informative-art {
        position: absolute;
        z-index: 1;
        top: 50%;
        right: -3%;
        width: 59%;
        height: 620px;
        min-height: 0;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        overflow: visible;
        pointer-events: none;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.15) 10%,
            rgba(0,0,0,.65) 23%,
            #000 38%,
            #000 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.15) 10%,
            rgba(0,0,0,.65) 23%,
            #000 38%,
            #000 100%
        );
    }

    .agrta-hero-informative-art img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: contain;
        object-position: right center;
        border-radius: 0;
    }
}

@media (max-width: 1100px) {

    .agrta-hero-inner {
        display: grid;
    }

    .agrta-hero-informative-art {
        position: relative;
        width: 100%;
        height: auto;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
}


/* =========================================================
   AGRTA HERO — RIGHT-SIDE BACKGROUND VISUAL
   ========================================================= */

@media (min-width: 1101px) {

    .agrta-hero {
        min-height: 620px;
        height: 620px;
        padding-top: 86px;
        box-sizing: border-box;
    }

    .agrta-hero-inner {
        display: block;
        position: relative;
        min-height: 534px;
        height: 534px;
        padding: 0;
    }

    .agrta-hero-content {
        position: relative;
        z-index: 3;
        width: 52%;
        max-width: 850px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .agrta-hero-informative-art {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        width: 68%;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        display: block;
        overflow: hidden;
        transform: none;
        pointer-events: none;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.12) 12%,
            rgba(0,0,0,.55) 25%,
            #000 40%,
            #000 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.12) 12%,
            rgba(0,0,0,.55) 25%,
            #000 40%,
            #000 100%
        );
    }

    .agrta-hero-informative-art img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center center;
        border-radius: 0;
    }
}

@media (max-width: 1100px) {

    .agrta-hero {
        height: auto;
        min-height: auto;
        padding-top: 86px;
    }

    .agrta-hero-inner {
        display: grid;
        height: auto;
        min-height: 0;
        padding-block: 55px;
    }

    .agrta-hero-content {
        height: auto;
    }

    .agrta-hero-informative-art {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 420px;
        transform: none;
        overflow: hidden;
        -webkit-mask-image: none;
        mask-image: none;
    }
}


/* =========================================================
   AGRTA HERO — FINAL VIEWPORT COMPOSITION
   ========================================================= */

@media (min-width: 1101px) {

    .agrta-hero {
        position: relative;
        height: 100vh;
        min-height: 650px;
        max-height: none;
        padding-top: 88px;
        box-sizing: border-box;
    }

    .agrta-hero-inner {
        position: relative;
        display: block;
        width: min(1240px, calc(100% - 48px));
        height: calc(100vh - 88px);
        min-height: 562px;
        margin-inline: auto;
        padding: 0;
    }

    .agrta-hero-content {
        position: relative;
        z-index: 5;
        width: 53%;
        max-width: 850px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .agrta-hero-informative-art {
        position: absolute;
        z-index: 2;

        top: 0;
        right: calc((1240px - 100vw) / 2);

        width: 76%;
        height: 100%;

        min-height: 0;
        margin: 0;
        padding: 0;

        display: block;
        overflow: hidden;
        pointer-events: none;
        transform: none;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.10) 12%,
            rgba(0,0,0,.48) 24%,
            rgba(0,0,0,.85) 34%,
            #000 44%,
            #000 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.10) 12%,
            rgba(0,0,0,.48) 24%,
            rgba(0,0,0,.85) 34%,
            #000 44%,
            #000 100%
        );
    }

    .agrta-hero-informative-art img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;

        object-fit: cover;
        object-position: center center;

        border-radius: 0;
    }

    .agrta-proof-row {
        margin-top: 38px;
    }
}


/* ---------- Hero on smaller screens ---------- */

@media (max-width: 1100px) {

    .agrta-hero {
        height: auto;
        min-height: 0;
        padding-top: 88px;
    }

    .agrta-hero-inner {
        display: grid;
        width: min(1240px, calc(100% - 48px));
        height: auto;
        min-height: 0;
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .agrta-hero-content {
        height: auto;
    }

    .agrta-hero-informative-art {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: auto;
        min-height: 420px;
        margin: 0 auto;
        transform: none;
        overflow: hidden;

        -webkit-mask-image: none;
        mask-image: none;
    }
}


/* =========================================================
   AGRTA SERVICES PAGE
   ========================================================= */

.agrta-services-page {
    background: #fff;
    color: var(--agrta-text);
}

.agrta-services-page .agrta-services-section-label {
    color: var(--agrta-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}


/* HERO */

.agrta-services-hero {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 78% 35%, rgba(34,211,238,.16), transparent 27%),
        radial-gradient(circle at 55% 90%, rgba(37,99,235,.22), transparent 38%),
        var(--agrta-navy);
}

.agrta-services-hero-inner {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
}

.agrta-services-hero-copy {
    position: relative;
    z-index: 3;
    width: 53%;
    padding: 90px 0 70px;
}

.agrta-services-eyebrow {
    color: var(--agrta-cyan);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
}

.agrta-services-hero h1 {
    max-width: 760px;
    margin: 20px 0 0;
    color: #fff;
    font-size: clamp(52px, 5.4vw, 78px);
    line-height: .98;
    letter-spacing: -.055em;
}

.agrta-services-hero h1 span {
    display: block;
    color: #60a5fa;
}

.agrta-services-hero-copy > p {
    max-width: 650px;
    margin: 28px 0 0;
    color: rgba(255,255,255,.76);
    font-size: 17px;
    line-height: 1.7;
}

.agrta-services-hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 30px;
}

.agrta-services-hero-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 700px;
    margin-top: 42px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.15);
}

.agrta-services-hero-benefits div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agrta-services-hero-benefits strong {
    color: #fff;
    font-size: 12px;
}

.agrta-services-hero-benefits span {
    color: rgba(255,255,255,.55);
    font-size: 11px;
    line-height: 1.45;
}

.agrta-services-hero-art {
    position: absolute;
    z-index: 1;
    top: 0;
    right: -10vw;
    width: 68%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.15) 15%,
        rgba(0,0,0,.7) 34%,
        #000 48%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.15) 15%,
        rgba(0,0,0,.7) 34%,
        #000 48%
    );
}

.agrta-services-hero-art img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}


/* SERVICE GROUPS */

.agrta-service-group {
    padding: 82px 0 88px;
}

.agrta-service-group-light {
    background: #fff;
}

.agrta-service-group-dark {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--agrta-navy);
}

.agrta-service-group-intro {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 42px;
}

.agrta-service-group-intro-reverse {
    grid-template-columns: 1.3fr .7fr;
}

.agrta-service-group-visual {
    height: 170px;
    overflow: hidden;
    border-radius: 18px;
    background: #edf3fa;
}

.agrta-service-group-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agrta-service-group-copy h2,
.agrta-service-dark-heading h2,
.agrta-services-why-copy h2,
.agrta-services-final h2 {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--agrta-ink);
    font-size: clamp(38px, 4.2vw, 58px);
    line-height: .99;
    letter-spacing: -.05em;
}

.agrta-service-group-copy h2 span,
.agrta-service-dark-heading h2 span,
.agrta-services-why-copy h2 span,
.agrta-services-final h2 span {
    color: var(--agrta-blue);
}

.agrta-service-group-copy p {
    max-width: 780px;
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.7;
}

.agrta-service-cards {
    display: grid;
    gap: 16px;
}

.agrta-service-cards-four {
    grid-template-columns: repeat(4, 1fr);
}

.agrta-service-cards-five {
    grid-template-columns: repeat(5, 1fr);
}

.agrta-service-cards article {
    position: relative;
    min-height: 250px;
    padding: 25px 22px 22px;
    border: 1px solid #dfe7f1;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(11,27,46,.06);
}

.agrta-service-card-icon {
    color: var(--agrta-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
}

.agrta-service-cards h3 {
    margin: 16px 0 0;
    color: var(--agrta-ink);
    font-size: 16px;
    line-height: 1.2;
}

.agrta-service-cards p {
    margin: 12px 0 0;
    color: #5d6d81;
    font-size: 13px;
    line-height: 1.6;
}

.agrta-service-cards a {
    position: absolute;
    left: 22px;
    bottom: 20px;
    color: var(--agrta-blue);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.agrta-service-cards a span {
    margin-left: 5px;
}

.agrta-service-dark-heading {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 70px;
    align-items: end;
    margin: 12px 0 40px;
}

.agrta-service-group-dark .agrta-services-section-label {
    color: var(--agrta-cyan);
}

.agrta-service-dark-heading h2 {
    color: #fff;
}

.agrta-service-dark-heading p {
    margin: 0;
    color: rgba(255,255,255,.68);
    line-height: 1.7;
}

.agrta-service-group-dark .agrta-service-cards article {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    box-shadow: none;
}

.agrta-service-group-dark .agrta-service-cards h3 {
    color: #fff;
}

.agrta-service-group-dark .agrta-service-cards p {
    color: rgba(255,255,255,.62);
}

.agrta-service-dark-visual {
    width: min(720px, 75%);
    margin: 48px auto -25px;
    opacity: .82;
}

.agrta-service-dark-visual img {
    display: block;
    width: 100%;
    border-radius: 18px;
}


/* INFRASTRUCTURE VISUAL */

.agrta-infrastructure-visual {
    position: relative;
    min-height: 170px;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 50%, rgba(34,211,238,.22), transparent 45%),
        linear-gradient(135deg, #061a33, #0d3760);
}

.agrta-infrastructure-grid {
    position: absolute;
    inset: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agrta-infrastructure-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96,165,250,.25);
    border-radius: 10px;
    color: rgba(255,255,255,.75);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    background: rgba(255,255,255,.045);
}


/* WHY AGRTA */

.agrta-services-why {
    padding: 82px 0 88px;
    color: #fff;
    background: var(--agrta-navy);
}

.agrta-services-why-copy {
    display: grid;
    grid-template-columns: .55fr 1.45fr;
    gap: 65px;
    align-items: start;
    margin-bottom: 52px;
}

.agrta-services-why-copy .agrta-services-section-label {
    color: var(--agrta-cyan);
}

.agrta-services-why-copy h2 {
    margin-top: 0;
    color: #fff;
}

.agrta-services-why-copy p {
    grid-column: 2;
    max-width: 780px;
    margin: 0;
    color: rgba(255,255,255,.66);
    line-height: 1.7;
}

.agrta-services-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.agrta-services-why-grid article {
    padding: 8px 28px;
    border-left: 1px solid rgba(255,255,255,.14);
}

.agrta-services-why-grid article:first-child {
    border-left: 0;
}

.agrta-services-why-grid strong {
    color: var(--agrta-cyan);
    font-size: 11px;
    letter-spacing: .12em;
}

.agrta-services-why-grid h3 {
    margin: 18px 0 0;
    color: #fff;
    font-size: 17px;
}

.agrta-services-why-grid p {
    margin: 12px 0 0;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 1.6;
}


/* FINAL CTA */

.agrta-services-final {
    padding: 72px 0;
    background: #f6f9fd;
}

.agrta-services-final-inner {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 60px;
    align-items: center;
}

.agrta-services-final h2 {
    margin-top: 10px;
}

.agrta-services-final p {
    max-width: 760px;
    margin: 18px 0 0;
}

.agrta-services-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}


/* MOBILE */

@media (max-width: 1050px) {

    .agrta-services-hero,
    .agrta-services-hero-inner {
        min-height: auto;
    }

    .agrta-services-hero-inner {
        display: block;
    }

    .agrta-services-hero-copy {
        width: 100%;
        padding: 80px 0 45px;
    }

    .agrta-services-hero-art {
        position: relative;
        right: auto;
        width: 100%;
        height: 380px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .agrta-service-cards-four,
    .agrta-service-cards-five {
        grid-template-columns: repeat(2, 1fr);
    }

    .agrta-service-dark-heading,
    .agrta-services-final-inner {
        grid-template-columns: 1fr;
    }

    .agrta-services-final-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {

    .agrta-service-group,
    .agrta-services-why {
        padding: 58px 0 62px;
    }

    .agrta-services-hero-copy {
        padding: 58px 0 35px;
    }

    .agrta-services-hero h1 {
        font-size: 44px;
    }

    .agrta-services-hero-benefits {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .agrta-services-hero-art {
        height: 280px;
    }

    .agrta-service-group-intro,
    .agrta-service-group-intro-reverse {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .agrta-service-cards-four,
    .agrta-service-cards-five {
        grid-template-columns: 1fr;
    }

    .agrta-service-cards article {
        min-height: 220px;
    }

    .agrta-service-dark-heading {
        gap: 20px;
    }

    .agrta-services-why-copy {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .agrta-services-why-copy p {
        grid-column: auto;
    }

    .agrta-services-why-grid {
        grid-template-columns: 1fr;
    }

    .agrta-services-why-grid article,
    .agrta-services-why-grid article:first-child {
        padding: 25px 0;
        border-left: 0;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .agrta-services-why-grid article:last-child {
        border-bottom: 0;
    }

    .agrta-services-final {
        padding: 58px 0 62px;
    }

    .agrta-services-final-actions {
        justify-content: flex-start;
    }
}


/* =========================================================
   SERVICES HERO — SERVICE TECHNOLOGY MAP
   ========================================================= */

.agrta-services-hero-services-map {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -20px;
    width: 540px;
    height: 470px;
    transform: translateY(-50%);
}

.agrta-services-map-center {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96,165,250,.45);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(37,99,235,.35), rgba(8,31,57,.95));
    box-shadow:
        0 0 0 20px rgba(37,99,235,.035),
        0 0 70px rgba(37,99,235,.25);
    text-align: center;
}

.agrta-services-map-center small {
    color: #22d3ee;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

.agrta-services-map-center strong {
    margin-top: 8px;
    color: #fff;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.agrta-services-map-card {
    position: absolute;
    z-index: 4;
    width: 170px;
    min-height: 105px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 15px;
    background: rgba(8,31,57,.88);
    box-shadow: 0 20px 45px rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
}

.agrta-services-map-card img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.agrta-services-map-card span {
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 750;
}

.agrta-map-web {
    top: 20px;
    left: 5px;
}

.agrta-map-crm {
    top: 15px;
    right: 5px;
}

.agrta-map-auto {
    bottom: 20px;
    left: 5px;
}

.agrta-map-infra {
    bottom: 15px;
    right: 5px;
}

.agrta-services-map-line {
    position: absolute;
    z-index: 1;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(
        to right,
        rgba(34,211,238,.08),
        rgba(96,165,250,.48)
    );
}

.agrta-line-one {
    width: 155px;
    top: 150px;
    left: 175px;
    transform: rotate(28deg);
}

.agrta-line-two {
    width: 155px;
    top: 150px;
    left: 205px;
    transform: rotate(-28deg);
}

.agrta-line-three {
    width: 155px;
    bottom: 150px;
    left: 175px;
    transform: rotate(-28deg);
}

.agrta-line-four {
    width: 155px;
    bottom: 150px;
    left: 205px;
    transform: rotate(28deg);
}

@media (max-width: 1050px) {

    .agrta-services-hero-services-map {
        position: relative;
        top: auto;
        right: auto;
        width: min(540px, 100%);
        height: 430px;
        margin: 0 auto 50px;
        transform: none;
    }
}

@media (max-width: 600px) {

    .agrta-services-hero-services-map {
        height: 390px;
        transform: scale(.86);
        transform-origin: top center;
        margin-bottom: -40px;
    }

    .agrta-services-map-card {
        width: 145px;
    }
}


/* =========================================================
   SERVICES HERO — CLEAN FINAL
   ========================================================= */

.agrta-services-page {
    padding-top: 80px;
}

.agrta-services-hero {
    min-height: 460px;
    height: 460px;
}

.agrta-services-hero-inner {
    min-height: 460px;
    height: 460px;
    display: flex;
    align-items: center;
}

.agrta-services-hero-copy {
    position: relative;
    z-index: 3;
    width: 46%;
    padding: 30px 0 25px;
}

.agrta-services-hero h1 {
    max-width: 560px;
    margin-top: 14px;
    font-size: clamp(40px, 3.8vw, 54px);
    line-height: .99;
    letter-spacing: -.045em;
}

.agrta-services-hero-copy > p {
    max-width: 570px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.58;
}

.agrta-services-hero-actions {
    margin-top: 21px;
}

.agrta-services-hero-benefits strong {
    font-size: 10px;
}

.agrta-services-hero-benefits span {
    font-size: 9px;
}

/* Right-side artwork */
.agrta-services-hero-final-art {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 54%;
    height: 460px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.45) 10%,
        #000 22%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.45) 10%,
        #000 22%
    );
}

.agrta-services-hero-final-art::after {
    display: none;
}

.agrta-services-hero-final-art img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
    object-fit: cover;
    object-position: right center;
}

/* Tablet */
@media (max-width: 1050px) {
    .agrta-services-page {
        padding-top: 0;
    }

    .agrta-services-hero {
        min-height: auto;
        height: auto;
    }

    .agrta-services-hero-inner {
        min-height: auto;
        height: auto;
    }

    .agrta-services-hero-copy {
        width: 100%;
        padding: 60px 0 35px;
    }

    .agrta-services-hero-final-art {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 360px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .agrta-services-hero-final-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .agrta-services-hero h1 {
        font-size: 40px;
    }

    .agrta-services-hero-final-art {
        height: 280px;
    }
}

@media (max-width: 1050px) {
    .agrta-services-hero-final-art {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 430px;
        margin: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (max-width: 700px) {
    .agrta-services-hero-final-art {
        height: 300px;
    }
}


/* =========================================================
   SERVICES HERO — FINAL IMAGE POSITIONING
   Keep the left copy clean and push the visual to the right.
   ========================================================= */

.agrta-services-hero-final-art {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 56%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 17%,
        rgba(0,0,0,.35) 29%,
        rgba(0,0,0,.82) 42%,
        #000 53%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 17%,
        rgba(0,0,0,.35) 29%,
        rgba(0,0,0,.82) 42%,
        #000 53%
    );
}

.agrta-services-hero-final-art img {
    display: block;
    width: 120%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: right center;
    flex-shrink: 0;
}

.agrta-services-hero-copy {
    position: relative;
    z-index: 3;
    width: 50%;
}

@media (max-width: 1050px) {

    .agrta-services-hero-final-art {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 430px;
        display: block;
        margin: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .agrta-services-hero-final-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .agrta-services-hero-copy {
        width: 100%;
    }
}

@media (max-width: 700px) {

    .agrta-services-hero-final-art {
        height: 300px;
    }
}


/* =========================================================
   SERVICES HERO — COMPACT FINAL PROPORTIONS
   ========================================================= */

.agrta-services-hero {
    min-height: 500px;
    height: 500px;
}

.agrta-services-hero-inner {
    min-height: 500px;
    height: 500px;
    display: flex;
    align-items: center;
}

.agrta-services-hero-copy {
    width: 47%;
    padding: 45px 0 35px;
}

.agrta-services-hero h1 {
    max-width: 600px;
    margin-top: 16px;
    font-size: clamp(44px, 4.4vw, 62px);
    line-height: .98;
    letter-spacing: -.05em;
}

.agrta-services-hero-copy > p {
    max-width: 590px;
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.6;
}

.agrta-services-hero-actions {
    margin-top: 24px;
}

.agrta-services-hero-benefits {
    max-width: 650px;
    margin-top: 30px;
    padding-top: 17px;
    gap: 18px;
}

.agrta-services-hero-benefits strong {
    font-size: 11px;
}

.agrta-services-hero-benefits span {
    font-size: 10px;
}

.agrta-services-hero-final-art {
    width: 53%;
    height: 500px;
    right: 0;
}

.agrta-services-hero-final-art img {
    width: 108%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

@media (max-width: 1050px) {

    .agrta-services-hero {
        min-height: auto;
        height: auto;
    }

    .agrta-services-hero-inner {
        min-height: auto;
        height: auto;
    }

    .agrta-services-hero-copy {
        width: 100%;
    }

    .agrta-services-hero-final-art {
        width: 100%;
        height: 360px;
    }
}

@media (max-width: 700px) {

    .agrta-services-hero h1 {
        font-size: 42px;
    }

    .agrta-services-hero-final-art {
        height: 280px;
    }
}


/* =========================================================
   SERVICES HERO — FINAL SIZE + HEADER CLEARANCE
   ========================================================= */

.agrta-services-page {
    padding-top: 80px;
}

.agrta-services-hero {
    min-height: 460px;
    height: 460px;
}

.agrta-services-hero-inner {
    min-height: 460px;
    height: 460px;
}

.agrta-services-hero-copy {
    width: 46%;
    padding: 30px 0 25px;
}

.agrta-services-hero h1 {
    max-width: 560px;
    margin-top: 14px;
    font-size: clamp(40px, 3.8vw, 54px);
    line-height: .99;
    letter-spacing: -.045em;
}

.agrta-services-hero-copy > p {
    max-width: 570px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.58;
}

.agrta-services-hero-actions {
    margin-top: 21px;
}

.agrta-services-hero-benefits {
    max-width: 620px;
    margin-top: 25px;
    padding-top: 15px;
    gap: 16px;
}

.agrta-services-hero-benefits strong {
    font-size: 10px;
}

.agrta-services-hero-benefits span {
    font-size: 9px;
}

.agrta-services-hero-final-art {
    width: 54%;
    height: 460px;
}

.agrta-services-hero-final-art img {
    width: 106%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

@media (max-width: 1050px) {

    .agrta-services-page {
        padding-top: 0;
    }

    .agrta-services-hero {
        min-height: auto;
        height: auto;
    }

    .agrta-services-hero-inner {
        min-height: auto;
        height: auto;
    }

    .agrta-services-hero-copy {
        width: 100%;
        padding: 60px 0 35px;
    }

    .agrta-services-hero-final-art {
        width: 100%;
        height: 360px;
    }
}

@media (max-width: 700px) {

    .agrta-services-hero h1 {
        font-size: 40px;
    }

    .agrta-services-hero-final-art {
        height: 280px;
    }
}


/* =========================================================
   SERVICES HERO — EXPAND RIGHT-SIDE VISUAL
   ========================================================= */

.agrta-services-hero-final-art {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 63%;
    height: 460px;
    overflow: hidden;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.18) 8%,
        rgba(0,0,0,.62) 15%,
        #000 24%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.18) 8%,
        rgba(0,0,0,.62) 15%,
        #000 24%
    );
}

.agrta-services-hero-final-art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: right center;
}

.agrta-services-hero-copy {
    position: relative;
    z-index: 3;
    width: 46%;
}

@media (max-width: 1050px) {

    .agrta-services-hero-final-art {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 360px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .agrta-services-hero-final-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .agrta-services-hero-copy {
        width: 100%;
    }
}

@media (max-width: 700px) {

    .agrta-services-hero-final-art {
        height: 280px;
    }
}


/* Services hero — shift visual toward the right edge */
.agrta-services-hero-final-art img {
    transform: translateX(9%);
}


/* Services hero — right edge correction */
.agrta-services-hero-final-art {
    width: 66%;
    right: 0;
    height: 460px;
    overflow: hidden;
}

.agrta-services-hero-final-art img {
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    object-position: right center;
}


/* Services hero — final right-side positioning */
.agrta-services-hero-final-art {
    width: 59%;
    right: 0;
}

.agrta-services-hero-final-art img {
    width: 100%;
    transform: none;
    object-position: right center;
}


/* Services hero — crop unwanted left side of artwork */
.agrta-services-hero-final-art {
    width: 59%;
    right: 0;
    height: 460px;
    overflow: hidden;
}

.agrta-services-hero-final-art img {
    position: absolute;
    top: 0;
    right: 0;
    width: 118%;
    height: 100%;
    max-width: none;
    transform: none;
    object-fit: cover;
    object-position: right center;
}


/* =========================================================
   AGRTA SERVICES HERO — FINAL CLEAN VERSION
   REAL HTML LEFT / RIGHT-SIDE ARTWORK
   ========================================================= */

.agrta-services-page .agrta-services-hero {
    position: relative;
    width: 100%;
    height: 460px;
    min-height: 460px;
    max-height: 460px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(110deg, #ffffff 0%, #f7fbff 52%, #edf6ff 100%);
}

.agrta-services-page .agrta-services-hero-inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 460px;
    min-height: 460px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    z-index: 5;
}

/* ---------------------------------------------------------
   LEFT SIDE — REAL HTML CONTENT
   --------------------------------------------------------- */

.agrta-services-page .agrta-services-hero-copy {
    position: relative;
    width: 54%;
    padding: 25px 20px 25px 0;
    box-sizing: border-box;
    z-index: 20;
    pointer-events: auto;
}

.agrta-services-page .agrta-services-hero-copy h1,
.agrta-services-page .agrta-services-hero-copy p,
.agrta-services-page .agrta-services-eyebrow,
.agrta-services-page .agrta-services-hero-benefits {
    position: relative;
    z-index: 20;
}

/* Buttons are genuine HTML links and remain clickable */
.agrta-services-page .agrta-services-hero-actions {
    position: relative;
    z-index: 30;
    pointer-events: auto;
}

.agrta-services-page .agrta-services-hero-actions a {
    position: relative;
    z-index: 31;
    pointer-events: auto;
}


/* ---------------------------------------------------------
   RIGHT SIDE — ARTWORK ONLY
   --------------------------------------------------------- */

.agrta-services-page .agrta-services-hero-final-art {
    position: absolute;
    top: 0;
    right: 0;
    width: 57%;
    height: 460px;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

/*
 * The image has already been cropped to contain only the
 * right-side artwork. No artificial 140% / 175% zoom.
 */
.agrta-services-page .agrta-services-hero-final-art img {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}

/*
 * Soft transition between the real HTML area and artwork.
 * This does NOT cover the buttons because the artwork itself
 * has pointer-events disabled.
 */
.agrta-services-page .agrta-services-hero-final-art::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 22%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.72) 45%,
        rgba(255,255,255,0) 100%
    );
    pointer-events: none;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .agrta-services-page .agrta-services-hero {
        height: 430px;
        min-height: 430px;
        max-height: 430px;
    }

    .agrta-services-page .agrta-services-hero-inner {
        height: 430px;
        min-height: 430px;
        padding: 0 30px;
    }

    .agrta-services-page .agrta-services-hero-copy {
        width: 58%;
    }

    .agrta-services-page .agrta-services-hero-final-art {
        width: 55%;
        height: 430px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .agrta-services-page .agrta-services-hero {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .agrta-services-page .agrta-services-hero-inner {
        height: auto;
        min-height: 0;
        padding: 45px 20px 0;
        display: block;
    }

    .agrta-services-page .agrta-services-hero-copy {
        width: 100%;
        padding: 0 0 30px;
    }

    .agrta-services-page .agrta-services-hero-final-art {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 280px;
    }

    .agrta-services-page .agrta-services-hero-final-art::after {
        display: none;
    }
}

/* =========================================================
   SERVICES HERO — TRUE TWO-COLUMN FINAL
   ========================================================= */

.agrta-services-page .agrta-services-hero {
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
    overflow: hidden !important;
    background: #071a3d !important;
}

.agrta-services-page .agrta-services-hero-inner {
    max-width: 1280px !important;
    height: 460px !important;
    min-height: 460px !important;
    padding: 0 50px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
}

.agrta-services-page .agrta-services-hero-copy {
    width: 52% !important;
    position: relative !important;
    z-index: 20 !important;
    padding-right: 35px !important;
    pointer-events: auto !important;
}

/* RIGHT ARTWORK */
.agrta-services-page .agrta-services-hero-final-art {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 50% !important;
    height: 460px !important;
    z-index: 3 !important;
    overflow: hidden !important;
    pointer-events: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Remove all old overlay/fade effects */
.agrta-services-page .agrta-services-hero-final-art::after {
    display: none !important;
    content: none !important;
}

.agrta-services-page .agrta-services-hero-final-art img {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    pointer-events: none !important;
}

/* REAL HTML BUTTONS ABOVE ARTWORK */
.agrta-services-page .agrta-services-hero-copy,
.agrta-services-page .agrta-services-hero-copy *,
.agrta-services-page .agrta-services-hero-actions,
.agrta-services-page .agrta-services-hero-actions a {
    pointer-events: auto !important;
}

.agrta-services-page .agrta-services-hero-copy {
    z-index: 50 !important;
}

.agrta-services-page .agrta-services-hero-actions {
    position: relative !important;
    z-index: 60 !important;
}

/* Desktop artwork must stay strictly on the right */
@media (min-width: 1051px) {
    .agrta-services-page .agrta-services-hero-final-art {
        left: auto !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .agrta-services-page .agrta-services-hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .agrta-services-page .agrta-services-hero-inner {
        height: auto !important;
        min-height: 0 !important;
        padding: 45px 20px 0 !important;
        display: block !important;
    }

    .agrta-services-page .agrta-services-hero-copy {
        width: 100% !important;
        padding-right: 0 !important;
    }

    .agrta-services-page .agrta-services-hero-final-art {
        position: relative !important;
        width: 100% !important;
        height: 280px !important;
        top: auto !important;
        right: auto !important;
    }
}


/* =========================================================
   SERVICES HERO — CLEAN SPLIT
   LEFT = HTML / RIGHT = ARTWORK
   ========================================================= */

.agrta-services-page .agrta-services-hero-inner {
    max-width: 1280px !important;
    padding: 0 40px !important;
}

.agrta-services-page .agrta-services-hero-copy {
    width: 56% !important;
    padding-right: 30px !important;
    z-index: 20 !important;
}

.agrta-services-page .agrta-services-hero-final-art {
    width: 44% !important;
    right: 0 !important;
    left: auto !important;
    height: 460px !important;
    z-index: 2 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.agrta-services-page .agrta-services-hero-final-art::after {
    display: none !important;
}

.agrta-services-page .agrta-services-hero-final-art img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    pointer-events: none !important;
}

.agrta-services-page .agrta-services-hero-copy,
.agrta-services-page .agrta-services-hero-copy *,
.agrta-services-page .agrta-services-hero-actions,
.agrta-services-page .agrta-services-hero-actions a {
    pointer-events: auto !important;
}

@media (max-width: 1050px) {
    .agrta-services-page .agrta-services-hero-copy {
        width: 58% !important;
    }

    .agrta-services-page .agrta-services-hero-final-art {
        width: 42% !important;
    }
}


/* =========================================================
   AGRTA SERVICES HERO
   CLEAN SPLIT LAYOUT
   LEFT = ORIGINAL HTML
   RIGHT = ARTWORK ONLY
   ========================================================= */

.agrta-services-page .agrta-services-hero {
    position: relative !important;
    width: 100% !important;
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

/* Full-width inner wrapper */
.agrta-services-page .agrta-services-hero-inner {
    position: relative !important;
    width: 100% !important;
    max-width: 1280px !important;
    height: 460px !important;
    min-height: 460px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    z-index: 5 !important;
}

/* =========================================================
   LEFT SIDE — HTML ONLY
   ========================================================= */

.agrta-services-page .agrta-services-hero-copy {
    position: relative !important;
    width: 50% !important;
    max-width: 620px !important;
    height: auto !important;
    padding: 35px 35px 30px 0 !important;
    box-sizing: border-box !important;
    z-index: 20 !important;

    /* IMPORTANT: no image behind this area */
    background: #ffffff !important;

    pointer-events: auto !important;
}

/* Restore normal readable text */
.agrta-services-page .agrta-services-hero-copy h1 {
    color: #071a3d !important;
}

.agrta-services-page .agrta-services-hero-copy h1 span {
    color: #1769e8 !important;
}

.agrta-services-page .agrta-services-hero-copy p {
    color: #4b5563 !important;
}

/* Eyebrow */
.agrta-services-page .agrta-services-eyebrow {
    color: #1769e8 !important;
}

/* Real buttons */
.agrta-services-page .agrta-services-hero-actions,
.agrta-services-page .agrta-services-hero-actions a {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}

/* Benefits */
.agrta-services-page .agrta-services-hero-benefits {
    position: relative !important;
    z-index: 30 !important;
}


/* =========================================================
   RIGHT SIDE — ARTWORK ONLY
   ========================================================= */

.agrta-services-page .agrta-services-hero-final-art {
    position: absolute !important;

    /* EXACTLY RIGHT HALF */
    top: 0 !important;
    right: 0 !important;
    left: 50% !important;

    width: 50% !important;
    height: 460px !important;

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

    overflow: hidden !important;
    z-index: 3 !important;

    /* Absolutely no click interception */
    pointer-events: none !important;

    /* Remove all old masks */
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Remove old fade/overlay */
.agrta-services-page .agrta-services-hero-final-art::before,
.agrta-services-page .agrta-services-hero-final-art::after {
    display: none !important;
    content: none !important;
}

/* Artwork fills ONLY right half */
.agrta-services-page .agrta-services-hero-final-art img {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

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

    object-fit: cover !important;
    object-position: center center !important;

    transform: none !important;

    pointer-events: none !important;
}


/* =========================================================
   KEEP LEFT SIDE ABOVE EVERYTHING
   ========================================================= */

.agrta-services-page .agrta-services-hero-copy,
.agrta-services-page .agrta-services-hero-copy *,
.agrta-services-page .agrta-services-hero-actions,
.agrta-services-page .agrta-services-hero-actions a {
    pointer-events: auto !important;
}


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

@media (max-width: 1050px) {

    .agrta-services-page .agrta-services-hero {
        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;
    }

    .agrta-services-page .agrta-services-hero-inner {
        height: 430px !important;
        min-height: 430px !important;
        padding: 0 30px !important;
    }

    .agrta-services-page .agrta-services-hero-copy {
        width: 52% !important;
        padding-right: 25px !important;
    }

    .agrta-services-page .agrta-services-hero-final-art {
        left: 52% !important;
        width: 48% !important;
        height: 430px !important;
    }
}


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

@media (max-width: 700px) {

    .agrta-services-page .agrta-services-hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .agrta-services-page .agrta-services-hero-inner {
        height: auto !important;
        min-height: 0 !important;
        padding: 45px 20px 0 !important;
        display: block !important;
    }

    .agrta-services-page .agrta-services-hero-copy {
        width: 100% !important;
        max-width: none !important;
        padding: 0 0 30px !important;
        background: #ffffff !important;
    }

    .agrta-services-page .agrta-services-hero-final-art {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 280px !important;
    }
}



/* =========================================================

/* =========================================================
   AGRTA FOOTER — PREMIUM SIGNATURE DESIGN V2
   ========================================================= */

.agrta-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: rgba(255,255,255,.72);
    background:
        radial-gradient(circle at 5% 10%, rgba(37,99,235,.12), transparent 30%),
        radial-gradient(circle at 95% 80%, rgba(59,130,246,.08), transparent 30%),
        linear-gradient(135deg,#041323 0%,#06192d 52%,#071d35 100%);
}

.agrta-footer-glow {
    position:absolute;
    z-index:-1;
    pointer-events:none;
    border:1px solid rgba(59,130,246,.08);
    border-radius:50%;
}

.agrta-footer-glow-one {
    width:520px;
    height:520px;
    top:-380px;
    left:-180px;
}

.agrta-footer-glow-two {
    width:620px;
    height:620px;
    right:-350px;
    bottom:-450px;
}


/* =========================================================
   MAIN AREA
   ========================================================= */

.agrta-footer-main {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.45fr .72fr 1.15fr 1fr;
    gap:58px;
    max-width:1180px;
    margin:0 auto;
    padding:62px 24px 48px;
}


/* =========================================================
   BRAND
   ========================================================= */

.agrta-footer-brand {
    max-width:350px;
}

.agrta-footer-logo {
    display:block;
    width:205px;
    height:auto;
    max-height:58px;
    object-fit:contain;
    object-position:left center;
}

.agrta-footer-tagline {
    margin:20px 0 0;
    color:#fff;
    font-size:13px;
    font-weight:800;
    letter-spacing:.07em;
}

.agrta-footer-description {
    max-width:330px;
    margin:12px 0 0;
    color:rgba(255,255,255,.46);
    font-size:12px;
    line-height:1.75;
}


/* =========================================================
   COLUMN HEADINGS
   ========================================================= */

.agrta-footer-column h3 {
    margin:0 0 23px;
    color:#fff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.agrta-footer-column h3::after {
    content:"";
    display:block;
    width:27px;
    height:2px;
    margin-top:10px;
    background:linear-gradient(90deg,#3b82f6,#60a5fa);
}


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

.agrta-footer-menu {
    margin:0;
    padding:0;
    list-style:none;
}

.agrta-footer-menu li {
    margin:0;
    padding:0;
}

.agrta-footer-menu li + li {
    margin-top:11px;
}

.agrta-footer-menu a {
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:rgba(255,255,255,.52);
    font-size:12px;
    line-height:1.5;
    text-decoration:none;
    transition:color .2s ease,transform .2s ease;
}

.agrta-footer-menu a:hover {
    color:#fff;
    transform:translateX(3px);
}

.agrta-footer-menu a span {
    color:#60a5fa;
    font-size:10px;
    opacity:0;
    transform:translate(-3px,2px);
    transition:opacity .2s ease,transform .2s ease;
}

.agrta-footer-menu a:hover span {
    opacity:1;
    transform:translate(0,0);
}


/* =========================================================
   CONTACT
   ========================================================= */

.agrta-footer-contact-card {
    padding:14px 15px;
    border:1px solid rgba(96,165,250,.13);
    border-radius:9px;
    background:rgba(255,255,255,.025);
}

.agrta-footer-contact-label {
    display:block;
    margin-bottom:7px;
    color:rgba(96,165,250,.72);
    font-size:9px;
    font-weight:800;
    letter-spacing:.15em;
}

.agrta-footer-email {
    display:block;
    color:#fff;
    font-size:12px;
    font-weight:650;
    text-decoration:none;
    word-break:break-word;
}

.agrta-footer-email:hover {
    color:#60a5fa;
}

.agrta-footer-contact-note {
    display:block;
    margin-top:7px;
    color:rgba(255,255,255,.35);
    font-size:10px;
}

.agrta-footer-buttons {
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:14px;
}

.agrta-footer-button {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:11px 14px;
    border:1px solid #3b82f6;
    border-radius:8px;
    color:#fff;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    box-shadow:0 8px 25px rgba(37,99,235,.13);
    font-size:10px;
    font-weight:800;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease;
}

.agrta-footer-button:hover {
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(37,99,235,.23);
}

.agrta-footer-button span {
    font-size:14px;
}

.agrta-footer-button-secondary {
    border-color:rgba(148,190,235,.18);
    background:rgba(255,255,255,.035);
    box-shadow:none;
}

.agrta-footer-button-secondary:hover {
    background:rgba(255,255,255,.07);
    box-shadow:none;
}


/* =========================================================
   FEATURE STRIP
   ========================================================= */

.agrta-footer-feature-strip {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    max-width:1180px;
    margin:0 auto;
    padding:0 24px 38px;
}

.agrta-footer-feature {
    display:flex;
    align-items:center;
    gap:14px;
    min-height:62px;
    padding:12px 15px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:rgba(255,255,255,.025);
    transition:border-color .25s ease,background .25s ease,transform .25s ease;
}

.agrta-footer-feature:hover {
    border-color:rgba(59,130,246,.30);
    background:rgba(59,130,246,.055);
    transform:translateY(-2px);
}

.agrta-footer-feature-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 32px;
    width:32px;
    height:32px;
    border:1px solid rgba(59,130,246,.28);
    border-radius:7px;
    color:#60a5fa;
    background:rgba(37,99,235,.10);
    font-size:14px;
    font-weight:700;
}

.agrta-footer-feature strong {
    display:block;
    color:rgba(255,255,255,.88);
    font-size:11px;
    font-weight:750;
}

.agrta-footer-feature div > span {
    display:block;
    margin-top:3px;
    color:rgba(255,255,255,.36);
    font-size:10px;
}


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.agrta-footer-bottom {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    max-width:1180px;
    margin:0 auto;
    padding:18px 24px 21px;
    border-top:1px solid rgba(255,255,255,.075);
    color:rgba(255,255,255,.34);
    font-size:10px;
}

.agrta-footer-copyright {
    display:flex;
    align-items:center;
    gap:8px;
}

.agrta-footer-dot {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#3b82f6;
    box-shadow:0 0 10px rgba(59,130,246,.65);
}

.agrta-footer-legal {
    display:flex;
    gap:22px;
}

.agrta-footer-legal a {
    color:rgba(255,255,255,.38);
    text-decoration:none;
}

.agrta-footer-legal a:hover {
    color:#fff;
}


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

@media (max-width:1000px) {

    .agrta-footer-main {
        grid-template-columns:1.3fr .8fr 1fr;
        gap:45px 32px;
    }

    .agrta-footer-brand {
        grid-row:span 2;
    }

    .agrta-footer-contact-column {
        grid-column:2 / 4;
    }
}


@media (max-width:700px) {

    .agrta-footer-main {
        grid-template-columns:1fr 1fr;
        gap:40px 28px;
        padding:52px 22px 38px;
    }

    .agrta-footer-brand {
        grid-column:1 / -1;
        grid-row:auto;
    }

    .agrta-footer-contact-column {
        grid-column:auto;
    }

    .agrta-footer-feature-strip {
        grid-template-columns:1fr;
        padding:0 22px 35px;
    }
}


@media (max-width:560px) {

    .agrta-footer-main {
        grid-template-columns:1fr;
        gap:34px;
        padding:48px 20px 35px;
    }

    .agrta-footer-brand,
    .agrta-footer-contact-column {
        grid-column:auto;
    }

    .agrta-footer-logo {
        width:180px;
    }

    .agrta-footer-feature-strip {
        padding:0 20px 32px;
    }

    .agrta-footer-bottom {
        flex-direction:column;
        align-items:flex-start;
        gap:13px;
        padding:17px 20px 21px;
    }

    .agrta-footer-legal {
        gap:18px;
    }
}


/* =========================================================
   AGRTA FOOTER — FEATURE STRIP FINAL FIX
   ========================================================= */

footer.agrta-footer > .agrta-footer-feature-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: calc(100% - 48px) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 0 38px !important;
    box-sizing: border-box !important;
    gap: 14px !important;
    position: relative !important;
}

footer.agrta-footer > .agrta-footer-feature-strip > .agrta-footer-feature {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 62px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 15px !important;
    align-items: center !important;
    gap: 14px !important;
    position: relative !important;
}

footer.agrta-footer > .agrta-footer-feature-strip > .agrta-footer-feature > div {
    min-width: 0 !important;
}

footer.agrta-footer > .agrta-footer-feature-strip > .agrta-footer-feature-icon {
    flex: 0 0 32px !important;
}

@media (max-width: 700px) {
    footer.agrta-footer > .agrta-footer-feature-strip {
        grid-template-columns: 1fr !important;
        width: calc(100% - 44px) !important;
    }
}

@media (max-width: 560px) {
    footer.agrta-footer > .agrta-footer-feature-strip {
        width: calc(100% - 40px) !important;
    }
}


/* =========================================================
   AGRTA FOOTER — FINAL MICRO POLISH
   ========================================================= */

@media (min-width: 1001px) {

    .agrta-footer-main {
        grid-template-columns: 1.40fr .70fr 1.05fr 1.15fr !important;
        gap: 50px !important;
        padding-bottom: 38px !important;
    }

    .agrta-footer-email {
        white-space: nowrap !important;
        font-size: 11.5px !important;
    }

    .agrta-footer-feature-strip {
        padding-bottom: 32px !important;
    }

}

@media (min-width: 1200px) {

    .agrta-footer-email {
        font-size: 12px !important;
    }

}