/* ============================================================
   TERRA SIGNAL — Biostimulants Distribution
   Brand system derived from the logo (leaf+droplet greens)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* greens pulled from the logo */
  --forest:#0E3B24;       /* deepest — wordmark "SIGNAL" */
  --pine:#0F5A2E;         /* deep green */
  --green:#2C8A3C;        /* primary */
  --leaf:#4FA63E;         /* mid leaf */
  --grass:#5DA22E;        /* subtitle green */
  --lime:#9ACA3C;         /* lime accent */
  --lime-soft:#C7E58A;

  /* warm neutrals */
  --bg:#F5F7EF;           /* page */
  --bg-2:#EDF1E3;         /* alt section */
  --card:#FFFFFF;
  --sand:#E9E4D4;         /* warm panel */
  --ink:#16241B;          /* body text on light */
  --muted:#586A5C;        /* secondary text */
  --line:#DDE4D2;         /* hairline */
  --line-2:#C9D4BA;

  --grad-leaf:linear-gradient(135deg,#A8D23A 0%,#3F9A3E 48%,#0F5A2E 100%);
  --grad-forest:linear-gradient(160deg,#15613A 0%,#0E3B24 100%);

  --shadow-sm:0 1px 2px rgba(14,59,36,.06),0 2px 8px rgba(14,59,36,.05);
  --shadow:0 4px 14px rgba(14,59,36,.08),0 14px 40px rgba(14,59,36,.08);
  --shadow-lg:0 10px 30px rgba(14,59,36,.12),0 30px 80px rgba(14,59,36,.14);

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:34px;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Mulish',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- typography ---------- */
h1,h2,h3,h4,.display{font-family:'Archivo',sans-serif;line-height:1.04;letter-spacing:-.01em;color:var(--forest);font-weight:800}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--green);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--green);display:inline-block}
.eyebrow.on-dark{color:var(--lime)}
.eyebrow.on-dark::before{background:var(--lime)}
.lead{font-size:clamp(1.06rem,1.5vw,1.28rem);color:var(--muted);line-height:1.55}
.mono{font-family:'IBM Plex Mono',monospace}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.section{padding:clamp(64px,9vw,128px) 0}
.section.tight{padding:clamp(48px,6vw,84px) 0}
.bg-alt{background:var(--bg-2)}
.bg-forest{background:var(--grad-forest);color:#EAF3E6}
.bg-forest h1,.bg-forest h2,.bg-forest h3{color:#fff}

/* ---------- responsive grid utilities (overflow-safe) ---------- */
/* min-width:0 lets grid tracks shrink below their content's min size,
   preventing horizontal overflow from long unbreakable strings. */
.split{display:grid;grid-template-columns:1fr 1fr}
.split>*{min-width:0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-grid>*{min-width:0}
.field-2{display:grid;grid-template-columns:1fr 1fr}
.field-2>*{min-width:0}
@media(max-width:820px){
  .split{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .field-2{grid-template-columns:1fr}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.96rem;
  padding:.92em 1.5em;border-radius:999px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(44,138,60,.32)}
.btn-primary:hover{background:var(--pine);transform:translateY(-2px);box-shadow:0 12px 26px rgba(44,138,60,.36)}
.btn-lime{background:var(--lime);color:var(--forest)}
.btn-lime:hover{background:var(--lime-soft);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--green);color:var(--green)}
.btn-ghost.on-dark{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn-ghost.on-dark:hover{box-shadow:inset 0 0 0 1.5px var(--lime);color:var(--lime)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(245,247,239,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.site-head.scrolled{border-color:var(--line);background:rgba(245,247,239,.94)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;min-width:0}
.brand .brand-logo{height:46px;width:auto;max-width:min(70vw,300px);object-fit:contain;display:block}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  font-weight:600;font-size:.95rem;color:var(--ink);padding:.5em .9em;border-radius:999px;
  transition:color .2s,background .2s;position:relative;
}
.nav-links a:hover{color:var(--green)}
.nav-links a.active{color:var(--green);background:rgba(44,138,60,.1)}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;flex-direction:column;gap:5px;padding:10px}
.burger span{width:24px;height:2px;background:var(--forest);border-radius:2px;transition:.3s}

/* ---------- footer ---------- */
.site-foot{background:var(--grad-forest);color:#C6D8C7;padding:72px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.foot-brand .chip{background:#fff;border-radius:14px;padding:10px;display:inline-block}
.foot-brand .chip img{height:46px}
.foot-brand p{margin-top:18px;max-width:30ch;color:#9FBAA2;font-size:.95rem}
.foot-col h5{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:16px}
.foot-col a,.foot-col p{display:block;color:#B7CCB9;font-size:.94rem;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:54px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);color:#86A089;font-size:.84rem;flex-wrap:wrap;gap:12px}

/* ---------- placeholder imagery ---------- */
.ph{
  position:relative;overflow:hidden;background:var(--bg-2);
  background-image:repeating-linear-gradient(135deg,rgba(44,138,60,.07) 0 14px,transparent 14px 28px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
}
.ph.dark{background:rgba(255,255,255,.04);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 14px,transparent 14px 28px);border-color:rgba(255,255,255,.14)}
.ph .ph-tag{
  font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);background:var(--card);padding:7px 13px;border-radius:999px;
  box-shadow:var(--shadow-sm);display:inline-flex;gap:.5em;align-items:center;
}
.ph.dark .ph-tag{background:rgba(0,0,0,.25);color:var(--lime);box-shadow:none;border:1px solid rgba(255,255,255,.16)}
.ph .ph-tag::before{content:"⊹"}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}

/* ---------- stats ---------- */
.stat-num{font-family:'Archivo';font-weight:900;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.02em;color:var(--green)}
.stat-num .u{font-size:.42em;font-weight:700;color:var(--grass);margin-left:.15em}
.stat-lbl{color:var(--muted);font-size:.95rem;margin-top:10px;max-width:22ch}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- pills / tags ---------- */
.pill{display:inline-flex;align-items:center;gap:.5em;font-family:'IBM Plex Mono';font-size:.74rem;letter-spacing:.06em;font-weight:500;padding:.45em .85em;border-radius:999px;background:rgba(44,138,60,.1);color:var(--pine);text-transform:uppercase}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--leaf)}

/* ---------- divider leaf rule ---------- */
.rule{height:3px;width:54px;background:var(--grad-leaf);border-radius:3px}

/* ---------- mobile ---------- */
@media (max-width:920px){
  .wrap{padding:0 22px}
  .brand .brand-logo{height:34px}
  .nav-links{
    position:fixed;inset:78px 0 auto 0;background:var(--bg);
    flex-direction:column;align-items:stretch;gap:0;padding:14px 22px 26px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-130%);transition:transform .38s var(--ease);
  }
  .nav-links.open{transform:none}
  .nav-links a{padding:.95em .4em;border-radius:10px;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
}