/* =========================================================
   V&I Solutions — Agro (Redesign)
   Uses only agro-logo.png and agro-hero.png
   ========================================================= */
:root{
  /* Palette from hero + brand accents */
  --earth-900: #2f2a25;
  --earth-800: #40362e;
  --earth-600: #5d4c40;

  --wheat-50:  #f2eee6;
  --wheat-100: #e8e1d3;

  --brand-green: #006d65;    /* primary */
  --brand-orange:#ff7a00;    /* accent */

  --ink:   #1f2328;
  --paper: #ffffff;

  --gap: 24px;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
  --card-border: 1px solid rgba(0,0,0,.06);

  /* Hero crop (x% y%) */
  --hero-pos: 50% 45%;
}

*{ 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(--wheat-50);
  line-height: 1.65;
}

.container{ width:min(1140px,92vw); margin-inline:auto; }

/* ----------------------- NAV ----------------------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: var(--earth-900);
  border-bottom: 1px solid rgba(255,255,255,.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{ display:flex; gap:18px; }
.nav__links a{ color:#eaeaea; text-decoration:none; font-weight:700; font-size:.95rem; }
.nav__links a:hover{ color: var(--brand-green); }

.nav__toggle{ display:none; }
.nav__burger{ display:none; width:36px; height:28px; cursor:pointer; position:relative; }
.nav__burger span{ position:absolute; left:0; right:0; height:3px; background:#fff; border-radius:3px; transition:.2s; }
.nav__burger span:nth-child(1){ top:2px; }
.nav__burger span:nth-child(2){ top:12px; }
.nav__burger span:nth-child(3){ bottom:2px; }
#nav-toggle:checked + .nav__burger span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
#nav-toggle:checked + .nav__burger span:nth-child(2){ opacity:.0; }
#nav-toggle:checked + .nav__burger span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

@media (max-width: 880px){
  .nav__burger{ display:block; }
  .nav__links{
    position: fixed; inset: 56px 0 auto 0;
    display:grid; gap:12px; padding:16px 20px;
    background: var(--earth-900);
    transform: translateY(-120%); transition: transform .2s ease;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
  }
  #nav-toggle:checked ~ .nav__links{ transform: translateY(0); }
}

/* ----------------------- HERO ----------------------- */
.hero{ position:relative; color:#fff; overflow:clip; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: var(--hero-pos);
  filter: saturate(1.05);
}
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(47,42,37,.58), rgba(47,42,37,.58));
}
.hero__inner{
  position:relative;
  min-height: clamp(360px, 48vw, 560px);
  display:grid; place-items:center; text-align:center; padding: 28px 0;
}
.hero__title{
  margin:0 0 8px; font-size: clamp(30px,4.8vw,46px);
  font-weight: 900; letter-spacing:.2px;
}
.hero__tagline{ margin:0 0 14px; font-weight:700; letter-spacing:.04em; color:#dfeeea; }

.hero__badges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.badge{
  background: rgba(255,255,255,.12);
  color:#fff; border:1px solid rgba(255,255,255,.22);
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:.85rem;
  backdrop-filter: blur(2px);
}
.hero__cta{ margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ----------------------- BUTTONS ----------------------- */
.btn{
  display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:900;
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary{
  background: var(--brand-green);
  color:#ffffff;                                  /* contrast fix */
  box-shadow: 0 10px 22px rgba(0,109,101,.28);
}
.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,109,101,.34);
  filter: brightness(1.03);
}
/* default ghost = for light sections (e.g., Contact) */
.btn--ghost{
  background: transparent;
  color: var(--brand-green);
  border:2px solid rgba(0,109,101,.45);
}
.btn--ghost:hover{
  background: rgba(0,109,101,.06);
  border-color: rgba(0,109,101,.6);
}
/* keep a white ghost only inside HERO */
.hero .btn--ghost{
  color:#ffffff;
  border-color: rgba(255,255,255,.60);
}
.hero .btn--ghost:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.75);
}

/* ----------------------- STRIP ----------------------- */
.strip{ background: var(--paper); }
.strip__inner{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 12px; padding: 18px 0;
}
.pill{
  display:flex; align-items:center; gap:10px;
  background: var(--wheat-100); color: var(--earth-800);
  padding:10px 12px; border-radius:999px; font-weight:800;
}
.pill svg{ width:20px; height:20px; fill: var(--brand-orange); flex:0 0 auto; }

/* ----------------------- SECTIONS ----------------------- */
.section{ padding: clamp(40px,5vw,80px) 0; background: var(--paper); }
.section--alt{ background: var(--wheat-50); }
.section__title{ margin:0 0 8px; font-size: clamp(26px,3.2vw,34px); font-weight:900; color: var(--earth-800); }
.lead{ margin:.25rem 0 .75rem; font-size:1.05rem; color:#454545; }

/* ----------------------- CARDS ----------------------- */
.grid-3{
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.cards .card{
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  border: var(--card-border);
  padding:18px 16px 14px;
  display:grid; align-content:start; gap:8px;
}
.card__title{ margin:0; color: var(--brand-green); font-weight:900; font-size:1.06rem; }
.list{ margin:6px 0 0; padding-left:18px; }
.list li{ margin:3px 0; }

.ico{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background: rgba(0,109,101,.08); color: var(--brand-green); }
.ico--accent{ background: rgba(255,122,0,.10); color: var(--brand-orange); }
.ico svg{ width:22px; height:22px; fill: currentColor; }

/* ----------------------- WORKFLOW ----------------------- */
.flow{ margin: 8px 0 0; padding:0; list-style:none; display:grid; gap:16px; }
.flow__step{
  display:grid; grid-template-columns: 40px 1fr; gap:12px;
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); border: var(--card-border);
  padding:14px 14px;
}
.flow__num{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; color:#fff; background: var(--brand-orange);
}
.flow__body h4{ margin:.1rem 0 .1rem; font-size:1.02rem; }
.flow__body p{ margin:.2rem 0 0; color:#3f3f3f; }

.cta{ margin-top:14px; text-align:center; }

/* ----------------------- CONTACT ----------------------- */
.contact{ text-align:center; }

/* ----------------------- FOOTER ----------------------- */
.footer{ background: var(--earth-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 */
.to-top{
  position: fixed; right: clamp(14px, 2vw, 22px); bottom: clamp(14px, 2vw, 22px); z-index: 60;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background: rgba(47,42,37,.92); color:#fff; text-decoration:none;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  opacity:.95;
}
.to-top:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.34); background: rgba(47,42,37,1); }
.to-top svg{ pointer-events:none; }

/* ScrollSpy active link */
.nav__links a.is-active{
  color: var(--brand-orange);
  border-bottom: 2px solid var(--brand-orange);
}

/* Optional: clip very long shadows on huge screens */
.section, .section--alt{ overflow: hidden; }