/* ====================================================================
   CROP ANALYTICA V6 — SHARED DESIGN SYSTEM
   Phase 2 pages (Solutions, About, Contact) share this stylesheet.
   Tokens → reset → primitives → components → shared sections
   ==================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --ink:           #070A08;
  --soil:          #0F1410;
  --ink2:          #141A16;
  --ink3:          #1C2420;
  --paper:         #F4F0E6;
  --paper2:        #EAE4D3;
  --paper3:        #DED6BF;
  --signal:        #2E7D4A;
  --signal-hi:     #3A9559;
  --hyper:         #7CC16A;
  --amber:         #D4960A;
  --cyan:          #6AA8C1;
  --red:           #C24A3A;
  --ink-mute:      #8A958E;
  --paper-mute:    #5C5A50;
  --hairline-dark: rgba(255,255,255,0.10);
  --hairline-lite: rgba(12,14,12,0.14);

  --serif:  "Fraunces", "DM Serif Display", Georgia, serif;
  --sans:   "Sora", "Inter", system-ui, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-disp-xl: clamp(56px, 9.2vw, 128px);
  --fs-disp-l:  clamp(44px, 6.2vw,  88px);
  --fs-disp-m:  clamp(36px, 4.4vw,  64px);
  --fs-disp-s:  clamp(28px, 3.0vw,  44px);
  --fs-headline: clamp(22px, 2.0vw, 30px);
  --fs-subhead:  clamp(17px, 1.3vw, 21px);
  --fs-body-l:   18px;
  --fs-body:     16px;
  --fs-mono-lbl: 11.5px;
  --fs-mono-dt:  13px;

  --side: clamp(24px, 6vw, 96px);
  --col-gap: 24px;
  --section-pad: clamp(80px, 9vw, 160px);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

/* ---------- 3. TYPE PRIMITIVES ---------- */
.display-xl { font-family: var(--serif); font-size: var(--fs-disp-xl); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; }
.display-l  { font-family: var(--serif); font-size: var(--fs-disp-l);  font-weight: 400; line-height: 1.00; letter-spacing: -0.015em; }
.display-m  { font-family: var(--serif); font-size: var(--fs-disp-m);  font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
.display-s  { font-family: var(--serif); font-size: var(--fs-disp-s);  font-weight: 400; line-height: 1.10; letter-spacing: -0.01em; }
.headline   { font-family: var(--sans);  font-size: var(--fs-headline);  font-weight: 600; line-height: 1.25; }
.subhead    { font-family: var(--sans);  font-size: var(--fs-subhead);   font-weight: 400; line-height: 1.50; color: var(--ink-mute); }
.body-l     { font-family: var(--sans);  font-size: var(--fs-body-l);    line-height: 1.65; }
.mono-lbl   { font-family: var(--mono);  font-size: var(--fs-mono-lbl);  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.mono-dt    { font-family: var(--mono);  font-size: var(--fs-mono-dt);   font-weight: 400; }

em { font-style: italic; color: var(--hyper); }

.plate-dark  { background: var(--ink);  color: var(--paper); }
.plate-dark  .subhead { color: var(--ink-mute); }
.plate-light { background: var(--paper); color: var(--ink); }
.plate-light .subhead { color: var(--paper-mute); }

/* ---------- 4. LAYOUT ---------- */
.container { width: 100%; padding-inline: var(--side); }
.container.wide { padding-inline: clamp(16px, 3vw, 48px); }
.section { padding-block: var(--section-pad); position: relative; }

.hairline-top    { border-top: 1px solid var(--hairline-dark); }
.hairline-bottom { border-bottom: 1px solid var(--hairline-dark); }
.plate-light .hairline-top    { border-top-color: var(--hairline-lite); }
.plate-light .hairline-bottom { border-bottom-color: var(--hairline-lite); }

/* ---------- 5. NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--side);
  background: rgba(7,10,8,0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline-dark);
}
.brand {
  font-family: var(--serif);
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
  color: var(--paper);
}
.brand .mark {
  width: 28px; height: 28px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
  flex-shrink: 0;
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--paper); opacity: 0.8;
  transition: opacity 160ms var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--hyper); }
.nav .cta {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 18px;
  background: var(--signal);
  color: var(--paper);
  border-radius: 999px;
  transition: background 160ms var(--ease-out);
}
.nav .cta:hover { background: var(--signal-hi); }

/* ---------- 6. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; height: 52px;
  padding-inline: 28px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: 2px;
  transition: all 180ms var(--ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--signal); color: var(--paper); }
.btn-primary:hover { background: var(--signal-hi); box-shadow: 0 0 0 4px rgba(46,125,74,0.18); }
.btn-ghost { border: 1px solid var(--ink-mute); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); }
.plate-light .btn-ghost { border-color: var(--paper-mute); color: var(--ink); }
.plate-light .btn-ghost:hover { border-color: var(--ink); }
.btn .arrow { transition: transform 180ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- 7. DATELINE, REVEAL, PILLS ---------- */
.dateline {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.dateline .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--hyper);
  box-shadow: 0 0 8px rgba(124,193,106,0.7);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
.dateline .sep { opacity: 0.45; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  border: 1px solid currentColor;
  line-height: 1;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-verified  { color: var(--hyper); }
.pill-monitor   { color: var(--amber); }
.pill-stressed  { color: var(--red); }
.pill-pending   { color: var(--ink-mute); }

/* ---------- 8. SHARED MASTHEAD ---------- */
.masthead {
  position: relative;
  min-height: 92vh;
  padding-top: 132px;
  padding-bottom: clamp(96px, 10vw, 140px);
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--ink);
}
.masthead-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 25%, rgba(46,125,74,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(212,150,10,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0a1009 0%, #050806 100%);
  z-index: 0;
}
.masthead-sat { position: absolute; inset: 0; z-index: 0; opacity: 0.6; }
.masthead-sat::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 110% at 50% 50%, transparent 40%, rgba(7,10,8,0.7) 75%, rgba(7,10,8,0.95) 100%);
}
.masthead-inner { position: relative; z-index: 2; margin-top: auto; margin-bottom: auto; }
.masthead .dateline-strip {
  padding-block: 12px;
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  margin-bottom: clamp(48px, 8vw, 88px);
}
.masthead h1 { max-width: 19ch; margin-bottom: 32px; }
.masthead .subhead { max-width: 58ch; color: var(--ink-mute); margin-bottom: 36px; }
.masthead .cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- 9. SHARED FOOTER ---------- */
.footer { padding-block: 72px 40px; background: #050806; border-top: 1px solid var(--hairline-dark); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}
.footer-brand .brand { margin-bottom: 22px; }
.footer-brand .brand.brand-full { gap: 0; }
.footer-brand .brand.brand-full img {
  height: 44px; width: auto; max-width: 280px;
  object-fit: contain;
  display: block;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.footer-brand p { color: var(--ink-mute); font-size: 14px; max-width: 40ch; line-height: 1.55; }
.footer-col h5 {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-mute); letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-family: var(--sans); font-size: 14px; color: var(--paper); opacity: 0.85;
  transition: opacity 160ms var(--ease-out);
}
.footer-col a:hover { opacity: 1; color: var(--hyper); }
.footer-colophon {
  padding-top: 28px;
  border-top: 1px solid var(--hairline-dark);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- 10. PROOF STRIP (shared) ---------- */
.proof {
  padding-block: clamp(100px, 12vw, 180px);
  background: var(--ink);
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.proof-cell {
  padding: 12px 28px;
  border-right: 1px solid var(--hairline-dark);
}
.proof-cell:last-child { border-right: none; }
.proof-numeral {
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 136px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--paper);
  display: flex; align-items: baseline; gap: 4px;
}
.proof-numeral .suffix { font-size: 0.55em; color: var(--hyper); letter-spacing: -0.01em; }
.proof-label { margin-top: 18px; color: var(--ink-mute); max-width: 22ch; }

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-cell { border-right: none; border-bottom: 1px solid var(--hairline-dark); padding-block: 36px; }
  .proof-cell:nth-child(odd) { border-right: 1px solid var(--hairline-dark); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-cell { border-right: none !important; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}