/* =========================================================
   V&I Solutions — Agro CSS (compact cards + softer green)
   Palette you provided (with softened turquoise)
   ---------------------------------------------------------
   Dark Gray (primary)        #373643
   Turquoise (logo, softened) #16A37C   (was #18CB96)
   Orange                     #FF8160
   Light Gray                 #7D7D7A
   Dark Gray (alt)            #393838
   Beige                      #E1E1D7
   ========================================================= */

:root{
  --gray-900: #373643;
  --gray-800: #393838;
  --gray-500: #7D7D7A;
  --beige:   #E1E1D7;

  --teal:    #16A37C;   /* softer, less acidic */
  --orange:  #FF8160;

  --ink:     #2b2b2b;
  --paper:   #ffffff;

  --gap:     24px;      /* slightly tighter */
  --radius:  12px;      /* smaller corners for compact look */
  --shadow:  0 8px 20px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html, body { scroll-behavior: auto; } }

body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--beige);
  line-height: 1.65;
}

/* ====================== Layout ====================== */
.container{ width: min(1120px, 92vw); margin-inline: auto; }
.section{ padding: clamp(40px, 5vw, 80px) 0; background: var(--paper); }
.section--beige{ background: var(--beige); }
.section__title{
  margin: 0 0 10px 0;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800; color: var(--gray-800);
}
.lead{ font-size: 1.06rem; color: #3f4248; margin: .35rem 0 .7rem; }
.bullets{ margin:0; padding-left: 1rem; } .bullets li{ margin: 6px 0; }

/* Responsive, compact grids */
.grid-2{
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-3{
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ====================== Nav ====================== */
.nav{
  position: sticky; top: 0; z-index: 10;
  background: var(--gray-900);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0;
}
.nav__brand img{ height: 40px; width: auto; display:block; }
.nav__links a{
  color: #e9e9e9; text-decoration: none; margin-left: 18px;
  font-weight: 600; font-size: 0.95rem;
}
.nav__links a:hover{ color: var(--teal); }

/* ====================== Hero ====================== */
.hero{
  /* overlay + photo + solid fallback */
  --overlay: linear-gradient(0deg, rgba(55,54,67,.58), rgba(55,54,67,.58));
  background:
    var(--overlay),
    url("images/agro-hero.png") center/cover no-repeat,
    var(--gray-900);
  color: #fff;
}
.hero__inner{
  min-height: clamp(320px, 45vw, 480px);
  display: grid; place-items: center;
  text-align: center; padding: 28px 0;
}
.hero__title{
  margin: 0 0 8px 0;
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 900;
  letter-spacing: .2px;
}
.hero__tagline{ margin: 0; font-weight: 700; letter-spacing: .04em; color: var(--teal); }

/* ====================== Cards / Buttons ====================== */
.card{
  background: var(--paper);
  border-radius: var(--radius);
  padding: 16px 16px 12px;           /* tighter padding */
  box-shadow: var(--shadow);
}
.card__title{
  margin: 0 0 6px 0;
  font-weight: 800;
  color: var(--teal);
  font-size: 1.05rem;                /* smaller headings */
}

/* Compact “windows” */
.grid-3 > .card, .grid-2 > .card{
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Buttons */
.btn{
  display: inline-block;
  margin-top: 10px; padding: 10px 16px;
  border-radius: 10px; text-decoration: none; font-weight: 800;
  background: var(--teal); color: #0c3a2c;
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(22,163,124,.28); }
.btn--teal{ background: var(--teal); }
.btn--orange{ background: var(--orange); color: #431f05; }
.btn--orange:hover{ box-shadow: 0 8px 18px rgba(255,129,96,.30); }

/* ====================== How it works ====================== */
.hiw__item{ position: relative; }
.hiw__icon{
  width: 40px; height: 40px;          /* smaller icon */
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900; color: #fff; background: var(--teal);
  margin-bottom: 8px; font-size: 1rem;
}
.hiw__icon--accent{ background: var(--orange); }
.hiw__img{
  display:block; width:100%; height:auto; margin-top: 8px;
  border-radius: 8px;
}

/* CTA row */
.cta{ margin-top: 12px; text-align: center; }

/* ====================== Footer ====================== */
.footer{ background: var(--gray-900); color: #e6e6e6; padding: 16px 0; }
.footer__inner{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.footer__link{ color:#e6e6e6; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25); }
.footer__link:hover{ color:#fff; border-color:#fff; }
.dot{ opacity:.6; }

/* ====================== Progressive rendering ====================== */
section, .card{ content-visibility:auto; contain-intrinsic-size: 560px; }

/* Back-to-top button (agro) */
.to-top{
  position: fixed;
  right: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  z-index: 50;

  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;

  background: rgba(55,54,67,0.92);   /* #373643 with slight opacity */
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  text-decoration: none;

  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  opacity: 0.95;
}
.to-top:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
  background: rgba(55,54,67,1);
  opacity: 1;
}
.to-top svg{ pointer-events: none; }

@media (prefers-reduced-motion: reduce){
  .to-top{ transition: none; }
}