/* ============================================================
   BIOFARMS · Think Fresh — Base system
   ============================================================ */

:root{
  /* — Brand palette (from logo DNA: blue arc + green/lime field) — */
  --ink:        #06170F;   /* deep forest — primary dark bg */
  --ink-2:      #0A2318;   /* raised dark panel */
  --ink-3:      #0E2C20;   /* hairlines / cards on dark */
  --paper:      #F3F0E7;   /* warm off-white — light bg */
  --paper-2:    #FBFAF4;   /* brightest paper */
  --paper-3:    #E9E4D6;   /* paper hairline */

  --blue:       #1E86C7;
  --blue-deep:  #115E92;
  --green:      #3FA838;
  --green-deep: #1F7C3B;
  --lime:       #8CC63E;

  /* — Text — */
  --on-dark:        #EDF2EC;
  --on-dark-soft:   rgba(237,242,236,0.66);
  --on-dark-faint:  rgba(237,242,236,0.40);
  --on-light:       #0C2117;
  --on-light-soft:  rgba(12,33,23,0.62);
  --on-light-faint: rgba(12,33,23,0.40);

  /* — Accent gradient (logo) — */
  --grad: linear-gradient(100deg, var(--blue) 0%, var(--green) 55%, var(--lime) 100%);

  /* — Type — */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* — Rhythm — */
  --pad: clamp(20px, 5.2vw, 110px);
  --maxw: 1480px;

  /* — Motion — */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--on-dark);
  line-height:1.5;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--lime); color:var(--ink); }

/* — Type scale — */
.eyebrow{
  font-family:var(--sans);
  font-size:clamp(11px,0.78vw,13px);
  font-weight:600;
  letter-spacing:0.34em;
  text-transform:uppercase;
}
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:0.98;
  letter-spacing:-0.02em;
  font-size:clamp(40px, 7.4vw, 116px);
  text-wrap:balance;
}
.h2{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-0.018em;
  font-size:clamp(32px, 4.6vw, 76px);
  text-wrap:balance;
}
.h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.01em;
  font-size:clamp(24px, 2.4vw, 38px);
}
.lead{
  font-size:clamp(17px, 1.35vw, 22px);
  line-height:1.55;
  font-weight:400;
  text-wrap:pretty;
}
.italic{ font-style:italic; }

/* — Layout — */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ position:relative; }
.section-pad{ padding-block:clamp(80px, 11vw, 200px); }

/* — Buttons — */
.btn{
  display:inline-flex; align-items:center; gap:0.7em;
  font-family:var(--sans); font-weight:600; font-size:14px;
  letter-spacing:0.02em;
  padding:1.05em 1.7em;
  border-radius:100px;
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.btn--solid{ background:var(--on-dark); color:var(--ink); }
.btn--solid:hover{ transform:translateY(-3px); box-shadow:0 16px 40px -12px rgba(0,0,0,.6); }
.btn--lime{ background:var(--lime); color:#103210; }
.btn--lime:hover{ transform:translateY(-3px); box-shadow:0 16px 44px -10px rgba(140,198,62,.55); }
.btn--ghost{ border:1px solid currentColor; color:inherit; }
.btn--ghost:hover{ background:currentColor; transform:translateY(-3px); }
.btn--ghost:hover span{ color:var(--ink); }
.btn .arr{ transition:transform .5s var(--ease); }
.btn:hover .arr{ transform:translate(4px,-4px); }

/* — Section chapter tag (editorial) — */
.chapter{
  display:flex; align-items:center; gap:1.2em;
  font-size:clamp(11px,0.78vw,13px); font-weight:600;
  letter-spacing:0.3em; text-transform:uppercase;
}
.chapter .num{ font-family:var(--serif); font-size:1.05em; letter-spacing:0; opacity:.85; }
.chapter .rule{ flex:1; height:1px; background:currentColor; opacity:.28; max-width:120px; }

/* — Reveal animation base (skroller) — */
[data-reveal]{
  opacity:0;
  transform:translateY(38px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
  will-change:opacity, transform;
}
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-46px); }
[data-reveal="left"].in{ transform:none; }
[data-reveal="right"]{ transform:translateX(46px); }
[data-reveal="right"].in{ transform:none; }
[data-reveal="scale"]{ transform:scale(1.06); opacity:0; }
[data-reveal="scale"].in{ transform:none; opacity:1; }
[data-delay="1"]{ transition-delay:.08s; }
[data-delay="2"]{ transition-delay:.16s; }
[data-delay="3"]{ transition-delay:.24s; }
[data-delay="4"]{ transition-delay:.32s; }
[data-delay="5"]{ transition-delay:.40s; }
[data-delay="6"]{ transition-delay:.48s; }

/* word-by-word line reveal */
.line-mask{ display:block; overflow:hidden; }
.line-mask > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease);
}
.in .line-mask > span,
.line-mask.in > span{ transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .line-mask > span{ transform:none !important; }
}