/* AAgFFiN marketing landing sections — ported from the Node app's index.html,
   namespaced with an "ag-" prefix so nothing here collides with the inherited
   JustAct theme's own .hero/.sec/.btn-gh/.btn-a rules used elsewhere. */

.ag-hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:110px 0 70px;overflow:hidden;
  background:radial-gradient(ellipse 950px 720px at 76% 32%,#2C4226 0%,var(--skin) 48%,var(--skin-2) 100%)}
/* Same frame as .ag-sec below it, so hero text starts at the same left edge
   as every other section instead of sitting flush against the viewport. */
.ag-hero-frame{position:relative;display:flex;align-items:center;width:100%;max-width:var(--max);margin:0 auto;
  padding-left:3rem;padding-right:3rem}
.ag-hero-map{position:absolute;top:50%;right:1.5rem;transform:translateY(-50%);height:min(78vh,620px);width:auto;max-width:46%;
  opacity:.92;pointer-events:none;perspective:1400px;filter:drop-shadow(0 40px 70px rgba(0,0,0,.5))}
.ag-hero-map-inner{display:block;height:100%;animation:ag-float 7s ease-in-out infinite;transform-style:preserve-3d;transform-origin:50% 60%}
.ag-hero-map svg{display:block;height:100%;width:auto;max-width:100%}
@keyframes ag-float{0%,100%{transform:translateY(0) rotateY(-6deg) rotateX(2deg)}50%{transform:translateY(-16px) rotateY(-2deg) rotateX(0deg)}}
.ag-hero-land{fill:rgba(127,169,104,.09);stroke:rgba(127,169,104,.34);stroke-width:1.4}
.ag-hero-node{fill:var(--mango)}
.ag-hero-ring{fill:none;stroke:var(--mango);stroke-width:1.6;opacity:0;animation:ag-ring 3s ease-out infinite}
.ag-hero-link{fill:none;stroke:var(--tea);stroke-width:1.3;stroke-dasharray:5 7;opacity:.6;animation:ag-flow 3.6s linear infinite}
@keyframes ag-ring{0%{r:4;opacity:.95;stroke-width:2.6}100%{r:21;opacity:0;stroke-width:.4}}
@keyframes ag-flow{to{stroke-dashoffset:-36}}
.ag-hero-in{position:relative;z-index:2;max-width:650px}
.ag-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--mango);background:rgba(232,162,51,.13);border:1px solid rgba(232,162,51,.34);
  padding:7px 17px;border-radius:var(--r-pill);margin-bottom:28px}
.ag-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--mango);animation:ag-blink 2s ease-in-out infinite;display:inline-block}
@keyframes ag-blink{0%,100%{opacity:1}50%{opacity:.25}}
.ag-hero h1{font-family:var(--fd);font-size:clamp(36px,5.6vw,64px);color:var(--millet);margin-bottom:24px;font-weight:700;line-height:1.12}
.ag-hero h1 em{font-style:italic;color:var(--mango);font-weight:400}
.ag-hero .ag-lead{font-size:18px;color:rgba(252,247,235,.76);max-width:530px;margin-bottom:36px;line-height:1.6}
.ag-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:50px}
.ag-btn-lg{background:var(--mango);color:var(--cocoa);font-weight:800;font-size:15px;padding:16px 34px;
  border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:9px;transition:all .18s;
  box-shadow:0 10px 28px rgba(232,162,51,.26);text-decoration:none}
.ag-btn-lg:hover{background:#F0B24A;transform:translateY(-2px);box-shadow:0 14px 34px rgba(232,162,51,.34);color:var(--cocoa)}
.ag-btn-gh{color:var(--millet);font-weight:700;font-size:15px;padding:16px 28px;border-radius:var(--r-pill);
  border:1.5px solid rgba(252,247,235,.3);display:inline-flex;align-items:center;gap:8px;transition:all .18s;text-decoration:none}
.ag-btn-gh:hover{border-color:rgba(252,247,235,.65);background:rgba(252,247,235,.07);color:var(--millet)}
.ag-hero-stats{display:flex;flex-wrap:wrap;gap:0}
.ag-hs{padding-right:34px;margin-right:34px;border-right:1px solid rgba(252,247,235,.16)}
.ag-hs:last-child{border:none;margin:0;padding:0}
.ag-hs b{display:block;font-family:var(--fd);font-size:27px;font-weight:700;color:var(--millet);line-height:1}
.ag-hs span{font-size:11.5px;color:rgba(252,247,235,.55);margin-top:5px;display:block;font-weight:600}
@media(max-width:900px){.ag-hero-map{opacity:.3;right:-18%}}
@media(max-width:700px){.ag-hero-frame{padding-left:1.25rem;padding-right:1.25rem}}
@media(prefers-reduced-motion:reduce){.ag-hero-map-inner{animation:none}}

.ag-sec{padding:100px 0;max-width:var(--max);margin:0 auto;padding-left:3rem;padding-right:3rem}
.ag-sec-head{max-width:620px;margin:0 auto 50px}
.ag-eb{font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--green-m);margin-bottom:14px}
.ag-sec-head h2{font-family:var(--fd);font-size:clamp(28px,3.6vw,42px);margin-bottom:16px;font-weight:700;color:var(--dark)}
.ag-sec-head p{color:var(--mid);font-size:16px}

.ag-probs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.ag-probs{grid-template-columns:1fr}}
.ag-prob{border-radius:var(--r-lg);padding:34px 28px;box-shadow:var(--lift-1)}
.ag-prob:nth-child(1){background:var(--paprika-l)}
.ag-prob:nth-child(2){background:var(--mango-l)}
.ag-prob:nth-child(3){background:var(--hibiscus-l)}
.ag-prob b{display:block;font-family:var(--fd);font-size:42px;font-weight:700;line-height:1;margin-bottom:10px}
.ag-prob:nth-child(1) b{color:var(--paprika-d)}
.ag-prob:nth-child(2) b{color:var(--mango-d)}
.ag-prob:nth-child(3) b{color:var(--hibiscus-d)}
.ag-prob h3{font-size:15px;margin-bottom:10px;font-weight:800}
.ag-prob p{font-size:14.5px;color:var(--mid)}

.ag-how{background:radial-gradient(ellipse 900px 600px at 50% 0%,var(--green-xl) 0%,var(--millet) 70%)}
/* Three cards sit on a circle of equal radius around the hub, so every
   card-to-hub gap is the same by construction — the bottom two sit lower
   (more "below" than "beside" the hub) than a plain 120°/120°/120° split
   would put them. Coordinates below are all in the same 860×920 pixel
   space as the SVG viewBox, so the lines drawn there land exactly on the
   hub edge and the nearest card corner. */
.ag-eco{position:relative;max-width:860px;margin:56px auto 0;height:920px}
.ag-eco-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.ag-eco-link{stroke-width:1.6;stroke-dasharray:5 7;opacity:.55;animation:ag-flow 3.6s linear infinite}
.ag-eco-link-1{stroke:var(--mango)}
.ag-eco-link-2{stroke:var(--paprika)}
.ag-eco-link-3{stroke:var(--indigo)}
.ag-eco-dot-1{fill:var(--mango)}
.ag-eco-dot-2{fill:var(--paprika)}
.ag-eco-dot-3{fill:var(--indigo)}
.ag-eco-c{position:absolute;top:480px;left:50%;transform:translate(-50%,-50%);width:190px;height:190px;border-radius:50%;
  background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:2;
  box-shadow:0 0 0 1px var(--border),0 30px 60px -20px rgba(20,75,45,.35)}
.ag-eco-c::before{content:'';position:absolute;inset:-16px;border-radius:50%;border:1.5px solid var(--green-l);
  opacity:0;animation:ag-hub-pulse 2.6s ease-out infinite;z-index:-1}
@keyframes ag-hub-pulse{0%{opacity:.9;transform:scale(.88)}100%{opacity:0;transform:scale(1.3)}}
.ag-eco-c-label{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.4px;
  color:var(--muted);text-transform:uppercase}
.ag-eco-c-label svg{color:var(--green-m);flex-shrink:0}
.ag-eco-c-badge{width:48px;height:48px;border-radius:14px;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(20,75,45,.35)}
.ag-eco-c b{position:relative;z-index:1;font-family:var(--fd);font-size:14px;font-weight:700;text-align:center;line-height:1.25;padding:0 22px;color:var(--dark)}
.ag-eco-n{position:absolute;width:216px;height:250px;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;z-index:3;
  box-sizing:border-box;box-shadow:var(--lift-1);transition:transform .2s,box-shadow .2s;overflow:hidden}
.ag-eco-n:hover{transform:translateY(-4px);box-shadow:var(--lift-3)}
.ag-eco-1{top:20px;left:50%;transform:translateX(-50%)}
.ag-eco-2{top:647px;left:94px}
.ag-eco-3{top:647px;right:94px}
.ag-eco-i{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.ag-eco-n h3{font-size:15px;color:var(--dark);margin-bottom:7px;font-weight:700}
.ag-eco-n p{font-size:12.5px;color:var(--mid);line-height:1.55}
/* The diagram's connecting lines are drawn in a fixed 860×820 coordinate
   space and stretched to fill .ag-eco — exact only when .ag-eco actually
   renders at its full 860px design width. .ag-sec's 3rem side padding
   means that needs roughly 956px of viewport; below that (including all
   of mobile), fall back to a simple stacked layout with no diagram lines
   rather than let them drift off the cards. */
@media(max-width:980px){
  .ag-eco{height:auto;position:static;display:flex;flex-direction:column;gap:16px;align-items:center;margin-top:50px}
  .ag-eco-svg{display:none}
  .ag-eco-c{position:static;transform:none}
  .ag-eco-n{position:static;width:100%;max-width:340px;height:auto;min-height:0;transform:none}
}
@media(prefers-reduced-motion:reduce){.ag-eco-c::before{animation:none}}

.ag-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.ag-mods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ag-mods{grid-template-columns:1fr}}
.ag-mod{position:relative;background:var(--shell);border-radius:var(--r-lg);padding:30px 30px 30px 33px;box-shadow:var(--lift-1);transition:all .22s cubic-bezier(.2,.7,.3,1);overflow:hidden}
.ag-mod::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--me,var(--husk));transition:width .22s}
.ag-mod:hover{transform:translateY(-5px);box-shadow:var(--lift-3)}
.ag-mod:hover::before{width:9px}
.ag-mod:nth-child(1){--me:var(--avocado)} .ag-mod:nth-child(2){--me:var(--mango)} .ag-mod:nth-child(3){--me:var(--paprika)}
.ag-mod:nth-child(4){--me:var(--indigo)} .ag-mod:nth-child(5){--me:var(--hibiscus)} .ag-mod:nth-child(6){--me:var(--avocado)}
.ag-mod-i{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ag-mod h3{font-size:18px;margin-bottom:10px;font-weight:700}
.ag-mod p{font-size:14px;color:var(--mid)}

.ag-mani{background:var(--avocado);color:var(--millet);padding:100px 0;text-align:center;position:relative;overflow:hidden}
.ag-mani::before{content:'';position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:640px;height:640px;
  border-radius:50%;background:radial-gradient(circle,rgba(232,162,51,.18),transparent 70%)}
.ag-mani-in{position:relative;max-width:800px;margin:0 auto;padding:0 30px}
.ag-mani blockquote{font-family:var(--fd);font-size:clamp(24px,3.8vw,38px);font-weight:400;font-style:italic;line-height:1.38}
.ag-mani blockquote em{color:var(--mango);font-style:italic}
.ag-mani-by{margin-top:28px;font-size:13.5px;color:var(--millet);font-weight:700}
.ag-pills{display:flex;gap:11px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.ag-pill{font-size:12px;font-weight:800;color:var(--millet);border:1px solid rgba(252,247,235,.34);
  padding:9px 19px;border-radius:var(--r-pill);background:rgba(252,247,235,.09)}

.ag-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:820px){.ag-trust{grid-template-columns:repeat(2,1fr)}}
.ag-tr{background:var(--shell);border-radius:var(--r);padding:22px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--lift-1);transition:transform .2s,box-shadow .2s}
.ag-tr:hover{transform:translateY(-3px);box-shadow:var(--lift-2)}
.ag-tr-i{width:36px;height:36px;border-radius:11px;background:var(--avocado-l);color:var(--avocado-d);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ag-tr b{display:block;font-size:13.5px;margin-bottom:3px}
.ag-tr span{font-size:12px;color:var(--mid);line-height:1.45}

.ag-fin{background:var(--skin);color:var(--millet);padding:100px 0;text-align:center;position:relative;overflow:hidden}
.ag-fin::before{content:'';position:absolute;bottom:-270px;right:-110px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(74,124,63,.42),transparent 70%)}
.ag-fin-in{position:relative;max-width:620px;margin:0 auto;padding:0 30px}
.ag-fin h2{font-family:var(--fd);font-size:clamp(28px,4.4vw,46px);color:var(--millet);margin-bottom:18px;font-weight:700}
.ag-fin p{font-size:16px;color:rgba(252,247,235,.7);margin-bottom:36px}

.ag-link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px;color:var(--green-d);
  text-decoration:none;margin-top:8px}
.ag-link-arrow:hover{text-decoration:underline}
.ag-link-arrow-lg{font-size:17px;color:var(--millet)}
.ag-eb-light{color:var(--green-m)}

/* ── THEME / NEXT CONVENING banner ── */
.ag-theme{background:linear-gradient(160deg,var(--green-d) 0%,var(--skin) 60%,var(--skin-2) 100%);
  color:var(--millet);padding:90px 0;text-align:center;position:relative;overflow:hidden}
.ag-theme-in{position:relative;max-width:720px;margin:0 auto;padding:0 30px}
.ag-theme h2{font-family:var(--fd);font-size:clamp(30px,4.6vw,50px);font-weight:800;line-height:1.15;margin-bottom:18px;color:var(--millet)}
.ag-theme-tag{font-size:16px;color:rgba(252,247,235,.75);margin-bottom:32px}
.ag-theme .ag-hero-cta{justify-content:center;margin-bottom:28px}
.ag-theme-meta{font-size:14px;color:rgba(252,247,235,.6);margin-bottom:30px}
.ag-theme-meta em{color:var(--mango);font-style:normal}
.ag-countdown{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ag-cd-unit{background:rgba(252,247,235,.08);border:1px solid rgba(252,247,235,.16);border-radius:var(--rs);
  padding:14px 22px;min-width:76px}
.ag-cd-unit b{display:block;font-family:var(--fd);font-size:28px;font-weight:800;line-height:1}
.ag-cd-unit span{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:rgba(252,247,235,.55);margin-top:4px;display:block}

/* ── WHO WE ARE ── */
.ag-who-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start;max-width:var(--max);margin:0 auto}
@media(max-width:820px){.ag-who-grid{grid-template-columns:1fr}}
.ag-who-vision{font-family:var(--fd);font-size:clamp(20px,2.6vw,26px);font-weight:500;line-height:1.5;color:var(--dark);margin:14px 0 6px}
.ag-obj-tabs{display:flex;gap:10px;margin-bottom:18px}
.ag-obj-tab{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border);background:#fff;
  color:var(--mid);font-weight:800;font-size:13px;cursor:pointer;transition:all .18s}
.ag-obj-tab.is-active{background:var(--green);border-color:var(--green);color:#fff}
.ag-obj-text{font-size:15px;color:var(--mid);line-height:1.65;min-height:100px}

/* ── WHAT WE DO — three pillar cards ── */
.ag-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.ag-pillars{grid-template-columns:1fr}}
.ag-pillar{display:block;background:var(--shell);border-radius:var(--r-lg);padding:34px 30px;box-shadow:var(--lift-1);
  text-decoration:none;transition:transform .2s,box-shadow .2s}
.ag-pillar:hover{transform:translateY(-5px);box-shadow:var(--lift-3)}
.ag-pillar h3{font-size:19px;font-weight:700;color:var(--dark);margin-bottom:10px}
.ag-pillar p{font-size:14.5px;color:var(--mid);margin-bottom:6px}

/* ── DECLARATIONS / STATS ── */
.ag-decl{background:var(--green-xl);padding:70px 0}
.ag-decl-in{max-width:var(--max);margin:0 auto;padding:0 3rem;text-align:center}
.ag-decl-stats{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;margin-top:20px}
.ag-decl-stat b{display:block;font-family:var(--fd);font-size:clamp(32px,4vw,48px);font-weight:800;color:var(--green-d);line-height:1}
.ag-decl-stat span{font-size:13px;color:var(--mid);margin-top:8px;display:block;font-weight:600}

/* ── CTA BANNER (dealroom-style) ── */
.ag-cta-banner{background:var(--green);padding:56px 0;text-align:center}
.ag-cta-banner-in{max-width:640px;margin:0 auto;padding:0 30px}
.ag-cta-banner p{color:var(--millet);font-size:18px;font-weight:600;margin-bottom:14px}

/* ── LATEST UPDATES ── */
.ag-update-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
@media(max-width:820px){.ag-update-grid{grid-template-columns:1fr}}
.ag-update-card{background:var(--shell);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift-1);padding-bottom:22px}
.ag-update-img{height:140px}
.ag-update-tag{display:inline-block;margin:18px 24px 10px;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.8px;color:var(--green-d);background:var(--green-xl);padding:4px 12px;border-radius:var(--r-pill)}
.ag-update-card h3{font-size:16px;font-weight:700;color:var(--dark);margin:0 24px 12px;line-height:1.4}
.ag-update-card .ag-link-arrow{margin:0 24px}
.ag-update-note{margin-top:24px;font-size:12.5px;color:var(--muted);font-style:italic;text-align:center}

/* ── NEWSLETTER ── */
.ag-newsletter{background:var(--dark);padding:70px 0;text-align:center}
.ag-newsletter-in{max-width:560px;margin:0 auto;padding:0 30px}
.ag-newsletter h2{font-family:var(--fd);font-size:clamp(22px,3vw,30px);color:var(--millet);font-weight:700;margin-bottom:28px}
.ag-newsletter-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ag-newsletter-form input{flex:1;min-width:220px;padding:14px 20px;border-radius:var(--r-pill);border:none;font-size:14px;font-family:var(--fb)}
.ag-newsletter-form button{padding:14px 30px;border-radius:var(--r-pill);border:none;background:var(--green-m);
  color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:background .2s}
.ag-newsletter-form button:hover{background:var(--green)}
.ag-newsletter-note{color:var(--millet);font-size:15px;margin-top:4px}
.ag-newsletter-note em{color:rgba(252,247,235,.55);font-style:normal;font-size:13px;display:block;margin-top:4px}
