/* ==========================================================================
   Agriculture ERP — FRESH bespoke design
   A split hero whose signature is an aerial "farm field map" (a plot grid,
   not a metrics dashboard card), on an organic tilled-field texture.
   Deliberately different from the split-dashboard-card and centered-board
   heroes used on the other pages. Scoped under .ag-scope (+ .ag-header-bg).
   ========================================================================== */
.ag-scope {
    --ag-ink: #1a2e12;
    --ag: #4d8b28;           /* field / crop green primary */
    --ag-2: #6fae3e;
    --ag-3: #356b1c;         /* deep leaf green */
    --ag-gold: #d4a017;      /* harvest / wheat gold accent */
    --ag-gold-2: #eab308;
    --ag-soil: #a9713f;      /* earthy soil brown (sparingly) */
    --ag-soft: #eef6e4;
    --ag-soft-2: #f6faef;
    --ag-line: #e2ecd4;
    --ag-muted: #5c6f4e;
    --ag-grad: linear-gradient(120deg, #6fae3e 0%, #4d8b28 55%, #356b1c 100%);
    --ag-grad-gold: linear-gradient(120deg, #eab308 0%, #d4a017 100%);
    color: #33452a;
}
.ag-scope section { overflow: hidden; }

/* page-only header background so the navbar blends into the hero */
.ag-header-bg {
    background:
        radial-gradient(1100px 320px at 86% 130%, #e2f2cf 0%, rgba(226,242,207,0) 70%),
        #f6faee;
}

/* ---- shared bits ---- */
.ag-kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ag-3); background: var(--ag-soft);
    padding: .45rem .95rem; border-radius: 2rem; border: 1px solid #dcecc9;
}
.ag-h { font-weight: 800; letter-spacing: -.02em; color: var(--ag-ink); line-height: 1.12; }
.ag-grad-txt {
    background: var(--ag-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.ag-gold-txt {
    background: var(--ag-grad-gold); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.ag-lead { color: var(--ag-muted); font-size: 1.075rem; line-height: 1.7; }

/* buttons */
.ag-btn {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 700;
    padding: .85rem 1.5rem; border-radius: .85rem; border: 0; cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    text-decoration: none;
}
.ag-btn i { transition: transform .25s ease; }
.ag-btn:hover i { transform: translate(2px,-2px); }
.ag-btn-primary { background: var(--ag-grad); color: #fff; box-shadow: 0 .8rem 1.6rem rgba(77,139,40,.32); }
.ag-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 1.2rem 2.2rem rgba(77,139,40,.42); }
.ag-btn-ghost { background: #fff; color: var(--ag-3); border: 1.5px solid var(--ag-line); }
.ag-btn-ghost:hover { color: var(--ag-3); transform: translateY(-3px); border-color: var(--ag); box-shadow: 0 1rem 2rem rgba(77,139,40,.14); }

/* ==========================================================================
   HERO — split copy + aerial farm field map
   ========================================================================== */
.ag-hero {
    position: relative;
    background:
        radial-gradient(900px 480px at 86% -10%, #e6f4d3 0%, rgba(230,244,211,0) 60%),
        radial-gradient(760px 420px at 6% 108%, #fbf3d6 0%, rgba(251,243,214,0) 55%),
        #f6faee;
}
/* organic "tilled field rows" texture */
.ag-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(77,139,40,.06) 0 2px, transparent 2px 22px);
    -webkit-mask-image: linear-gradient(180deg,#000,transparent 80%);
    mask-image: linear-gradient(180deg,#000,transparent 80%); opacity: .8;
}
.ag-hero .container { position: relative; z-index: 2; }
.ag-hero h1 { font-size: clamp(2.15rem, 4.4vw, 3.5rem); }
.ag-hero-trust { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; }
.ag-hero-trust .t { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ag-ink); font-size: .95rem; }
.ag-hero-trust .t i { color: var(--ag); font-size: 1.15rem; }

/* aerial farm field map */
.ag-map-wrap { position: relative; }
.ag-map {
    position: relative; z-index: 2; background: #fff; border-radius: 1.6rem;
    border: 1px solid var(--ag-line); box-shadow: 0 2.4rem 5rem rgba(26,46,18,.16);
    padding: 1.4rem;
}
.ag-map__head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.ag-map__head .av { width: 3rem; height: 3rem; border-radius: .9rem; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; background: var(--ag-grad); box-shadow: 0 .5rem 1rem rgba(77,139,40,.35); }
.ag-map__head h6 { margin: 0; font-weight: 800; color: var(--ag-ink); font-size: 1rem; }
.ag-map__head span { font-size: .8rem; color: var(--ag-muted); }
.ag-map__head .pill { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; color: var(--ag-3); background: var(--ag-soft); padding: .32rem .7rem; border-radius: 2rem; }
.ag-map__head .pill .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ag-2); box-shadow: 0 0 0 0 rgba(111,174,62,.6); animation: agpulse 1.7s infinite; }
@keyframes agpulse { 70% { box-shadow: 0 0 0 .5rem rgba(111,174,62,0); } 100% { box-shadow: 0 0 0 0 rgba(111,174,62,0); } }

.ag-plots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ag-plot { position: relative; border-radius: .7rem; padding: .7rem .7rem .6rem; min-height: 4.6rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; }
.ag-plot::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(50deg, rgba(255,255,255,.14) 0 1px, transparent 1px 9px); }
.ag-plot b { position: relative; z-index: 2; font-size: .82rem; font-weight: 800; line-height: 1; }
.ag-plot small { position: relative; z-index: 2; font-size: .66rem; opacity: .92; margin-top: .12rem; }
.ag-plot .hd { position: absolute; top: .5rem; right: .5rem; z-index: 2; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.ag-plot.crop-wheat  { background: linear-gradient(135deg, #e9be3d, #caa017); }
.ag-plot.crop-rice   { background: linear-gradient(135deg, #5fa02f, #3f7d20); }
.ag-plot.crop-cotton { background: linear-gradient(135deg, #93c964, #6fae3e); }
.ag-plot.crop-maize  { background: linear-gradient(135deg, #62a531, #4d8b28); }
.ag-plot.crop-soy    { background: linear-gradient(135deg, #a9d47c, #86bf55); }
.ag-plot.crop-fallow { background: linear-gradient(135deg, #c9a97e, #a9713f); }
.ag-plot.sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ag-gold); }

.ag-sensors { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; border-top: 1px dashed var(--ag-line); padding-top: .9rem; }
.ag-sensor { display: flex; align-items: center; gap: .5rem; }
.ag-sensor .ic { width: 2rem; height: 2rem; flex: none; border-radius: .55rem; background: var(--ag-soft); color: var(--ag-3); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.ag-sensor b { display: block; font-size: .88rem; font-weight: 800; color: var(--ag-ink); line-height: 1; }
.ag-sensor span { font-size: .64rem; color: var(--ag-muted); }

/* floating chips */
.ag-chip { position: absolute; z-index: 3; background: #fff; border-radius: .9rem; box-shadow: 0 1rem 2.4rem rgba(26,46,18,.16); padding: .7rem .95rem; display: flex; align-items: center; gap: .6rem; border: 1px solid var(--ag-line); animation: agfloat 5s ease-in-out infinite; }
.ag-chip .ic { width: 2.1rem; height: 2.1rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; flex: none; }
.ag-chip .ic--moist { background: linear-gradient(120deg,#38bdf8,#0ea5e9); }
.ag-chip .ic--yield { background: var(--ag-grad); }
.ag-chip b { display: block; font-size: .92rem; color: var(--ag-ink); line-height: 1; }
.ag-chip span { font-size: .7rem; color: var(--ag-muted); }
.ag-chip--tl { top: -2.1rem; left: -1.4rem; }
.ag-chip--br { bottom: -1.9rem; right: -1.4rem; animation-delay: 1.4s; }
@keyframes agfloat { 50% { transform: translateY(-10px); } }

/* ==========================================================================
   FEATURES — field cards
   ========================================================================== */
.ag-features { background: linear-gradient(180deg, #fff, var(--ag-soft-2)); }
.ag-head { max-width: 760px; margin: 0 auto 3.2rem; text-align: center; }
.ag-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.ag-head p { margin-top: 1rem; }

.ag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.ag-card {
    position: relative; background: #fff; border: 1px solid var(--ag-line); border-radius: 1.2rem;
    padding: 1.6rem 1.5rem 1.5rem; height: 100%; overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ag-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ag-grad); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.ag-card:hover { transform: translateY(-.5rem); box-shadow: 0 1.6rem 3.2rem rgba(26,46,18,.12); border-color: transparent; }
.ag-card:hover::before { transform: scaleX(1); }
.ag-ico { width: 3.2rem; height: 3.2rem; border-radius: .95rem; background: var(--ag-soft); color: var(--ag); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.ag-ico img, .ag-ico svg { width: 1.7rem; height: 1.7rem; }
/* icons are teal monochrome — recolor to each chip's accent */
.ag-ico svg [fill]:not([fill="none"]) { fill: currentColor; }
.ag-ico svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.ag-card h3 { font-size: 1.08rem; font-weight: 800; color: var(--ag-ink); margin-bottom: .5rem; }
.ag-card p { font-size: .88rem; color: var(--ag-muted); margin-bottom: .9rem; line-height: 1.5; }
.ag-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.ag-ticks li { position: relative; padding-left: 1.5rem; font-size: .84rem; color: #435537; line-height: 1.45; }
.ag-ticks li::before {
    content: "\2713"; position: absolute; left: 0; top: 0; font-size: .7rem; font-weight: 700; color: var(--ag-3);
    width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ag-soft);
    display: flex; align-items: center; justify-content: center;
}
/* icon color chips (varied greens + harvest) */
.ag-c1 { background: #eaf5db; color: #4d8b28; } .ag-c2 { background: #fdf3d6; color: #c08a06; }
.ag-c3 { background: #e3f0f7; color: #0e8fca; } .ag-c4 { background: #efe8db; color: #a9713f; }
.ag-c5 { background: #e6f4de; color: #356b1c; } .ag-c6 { background: #f0eafb; color: #7c5cd0; }
.ag-c7 { background: #fdeee0; color: #d9730d; } .ag-c8 { background: #e6f6ee; color: #0e9c6e; }
.ag-c9 { background: #eef2e2; color: #6a8a1f; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    .ag-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .ag-grid { grid-template-columns: 1fr; }
    .ag-map { margin-top: 1rem; }
    .ag-chip { display: none; }
}

/* legacy contact textarea marker kept for the untouched lower sections */
.gen-1 { height: 150px; }