/* ============================================================
   base.css — reset, typography, global elements, buttons, bg-fx
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Lenis smooth-scroll: disable native smooth so JS owns it */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{background:var(--beige);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display{font-family:"Space Grotesk",sans-serif;line-height:1.08;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}
::selection{background:var(--lime);color:var(--ink)}

:focus-visible{outline:3px solid var(--lime-2);outline-offset:3px;border-radius:6px}

.skip-link{position:fixed;top:-60px;left:12px;z-index:10000;background:var(--lime-deep);color:#fff;padding:10px 16px;border-radius:10px;font-family:"Space Grotesk";font-weight:600;transition:top .2s}
.skip-link:focus{top:12px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;position:relative;z-index:2}
.block{padding:96px 0}

/* Decorative background */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-fx .grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(77,124,15,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(77,124,15,.07) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 30%,transparent 80%)}
.bg-fx .blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.5}
.blob.a{width:520px;height:520px;background:#d4e0a8;top:-180px;left:-120px;opacity:.35}
.blob.b{width:460px;height:460px;background:#e7dcc0;top:34%;right:-160px;opacity:.5}
.blob.c{width:420px;height:420px;background:#c4d291;bottom:-120px;left:30%;opacity:.25}

/* shared section headings */
.eyebrow{display:inline-block;font-family:"Space Grotesk";font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:12.5px;color:var(--lime-deep);margin-bottom:14px}
.sec-head{text-align:center;max-width:680px;margin:0 auto 56px}
.sec-head h2{font-size:clamp(30px,4.6vw,46px);font-weight:700}
.sec-head p{color:var(--ink-soft);margin-top:16px;font-size:17px}

.glass{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);transition:transform .25s,border-color .25s,box-shadow .3s}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:12px;font-family:"Space Grotesk";font-weight:600;font-size:15px;cursor:pointer;border:1px solid transparent;transition:transform .18s,box-shadow .25s,background .25s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,#6aa717,#4D7C0F);color:#fff;box-shadow:0 10px 26px -14px rgba(77,124,15,.6)}
.btn-primary:hover{box-shadow:0 16px 38px -14px rgba(77,124,15,.75);transform:translateY(-2px)}
.btn-ghost{background:var(--cream);border:1px solid var(--glass-brd);color:var(--ink)}
.btn-ghost:hover{border-color:var(--lime-2);box-shadow:0 0 0 1px var(--lime-2)}
.btn-sm{padding:10px 16px;font-size:14px;border-radius:10px}

/* shared logo mark animation */
.logo-mark{display:block}
.lp{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lp-w{stroke:url(#limeGrad);stroke-width:7;stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1.1s var(--ease-out) forwards}
.lp-arrow{stroke:url(#limeGrad);stroke-width:7;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s ease 1s forwards}
.lp-chart{stroke:var(--lime-2);stroke-width:2.6;opacity:.85;stroke-dasharray:110;stroke-dashoffset:110;animation:draw .9s ease .5s forwards}
.lnode{fill:var(--lime);transform:scale(0);transform-box:fill-box;transform-origin:center;animation:pop .4s var(--ease-spring) forwards}
.lnode.n1{animation-delay:.7s}.lnode.n2{animation-delay:.85s}.lnode.n3{animation-delay:1s}.lnode.n4{animation-delay:1.15s}
.globe circle,.globe ellipse,.globe line{stroke:var(--lime-deep)}
.globe{opacity:0;animation:fadein .5s ease .6s forwards}
.merid{transform-box:fill-box;transform-origin:center;animation:spin 3.4s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes fadein{to{opacity:1}}
@keyframes spin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.18)}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}