/* ================================================================
   AEO / GEO PAGE CSS
   Scoped under .ag-* — no global body/* font-family overrides.
   Dark theme + #91d904 green accent, same as all Freshora pages.
   ================================================================ */

.ag-sec,
.ag-hero,
.ag-cta-sec {
  --g:      #91d904;
  --g2:     #6aaa00;
  --g-dim:  rgba(145,217,4,0.12);
  --g-bdr:  rgba(145,217,4,0.22);
  --bg:     #0d0d0d;
  --s1:     #141414;
  --s2:     #1a1a1a;
  --bd:     rgba(255,255,255,0.07);
  --tx:     #e8e8e8;
  --mt:     #888;
  --wt:     #fff;
  --blue:   rgba(25,118,210,.15);
  --bluec:  #64b5f6;
  --green:  rgba(16,185,129,.15);
  --greenc: #34d399;
  --purple: rgba(124,58,237,.15);
  --purplec:#a78bfa;
  --orange: rgba(245,158,11,.15);
  --orangec:#fcd34d;
  --cyan:   rgba(6,182,212,.15);
  --cyanc:  #22d3ee;
  --red:    rgba(239,68,68,.15);
  --redc:   #f87171;
  --gold:   rgba(234,179,8,.15);
  --goldc:  #fde047;
  --r:      14px;
  --rs:     8px;
  --tr:     .3s cubic-bezier(.4,0,.2,1);
}

/* ── Section backgrounds ── */
.ag-sec       { background: var(--bg); padding: 80px 0; }
.ag-sec--alt  { background: var(--s1); padding: 80px 0; }
.ag-hero      {
  background: var(--s1);
  border-bottom: 1px solid var(--bd);
  padding: 88px 0 80px;
  position: relative;
  overflow: hidden;
}
.ag-hero::before {
  content: '';
  position: absolute;
  top: -160px; right: -160px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(145,217,4,.12) 0%, transparent 70%);
  pointer-events: none;
}
.ag-cta-sec { background: var(--bg); padding: 80px 0; }

/* ── Label ── */
.ag-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g);
  background: var(--g-dim);
  border: 1px solid var(--g-bdr);
  padding: 5px 16px;
  border-radius: 9999px;
  margin-bottom: 1rem;
}

/* ── Headings ── */
.ag-h1 {
  font-family: 'Teko', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--wt);
  margin-bottom: .6rem;
}
.ag-h1 span { color: var(--g); }

.ag-h2 {
  font-family: 'Teko', sans-serif;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--wt);
  margin-bottom: .8rem;
}
.ag-h2 span { color: var(--g); }

.ag-h3 {
  font-family: 'Teko', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--wt);
  margin-bottom: .5rem;
}
.ag-h3 span { font-size: .85em; color: var(--g); display: block; }

/* ── Paragraphs ── */
.ag-sec p, .ag-sec--alt p, .ag-hero p, .ag-cta-sec p {
  color: var(--tx);
  font-size: .93rem;
  line-height: 1.8;
  margin-bottom: .9rem;
}

/* ── Section head ── */
.ag-sec-head { text-align: center; margin-bottom: 2.75rem; }
.ag-sec-head .ag-label { justify-content: center; }
.ag-sec-head p {
  color: var(--mt);
  font-size: .93rem;
  line-height: 1.75;
  max-width: 680px;
  margin: .75rem auto 0;
}

/* ── Generic list ── */
.ag-list { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .38rem; }
.ag-list li { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--tx); line-height: 1.45; }
.ag-list li::before { content: '✓'; color: var(--g); font-weight: 700; flex-shrink: 0; }

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
.ag-hero__sub {
  font-size: 1rem;
  color: var(--g);
  font-weight: 600;
  font-style: italic;
  margin-bottom: 1.1rem;
  line-height: 1.55;
}

/* AI question bubbles */
.ag-ai-questions { display: flex; flex-direction: column; gap: 8px; margin: 1rem 0 1.25rem; }
.ag-ai-q {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-left: 2px solid var(--g);
  border-radius: var(--rs);
  padding: .65rem 1rem;
  font-size: .85rem;
  color: var(--tx);
  line-height: 1.5;
}
.ag-ai-q i { color: var(--g); flex-shrink: 0; margin-top: 2px; }

/* Hero card */
.ag-hero-card {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-top: 3px solid var(--g);
  border-radius: var(--r);
  padding: 1.75rem;
  box-shadow: 0 0 40px rgba(145,217,4,.09);
}
.ag-hero-card__title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--g);
  margin-bottom: 1.1rem;
}
.ag-platforms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1.5rem;
}
.ag-platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--rs);
  padding: .9rem .5rem;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.ag-platform:hover {
  border-color: var(--g);
  transform: translateY(-4px);
  box-shadow: 0 0 14px rgba(145,217,4,.35);
}
.ag-platform i { font-size: 1.35rem; color: var(--g); }
.ag-platform span { font-size: .72rem; color: var(--mt); font-weight: 500; text-align: center; }
.ag-hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
.ag-hstat { text-align: center; background: var(--s1); border: 1px solid var(--bd); border-radius: var(--rs); padding: .85rem .5rem; }
.ag-hstat strong { display: block; font-family: 'Teko', sans-serif; font-size: 1.7rem; color: var(--g); line-height: 1; }
.ag-hstat span { font-size: .68rem; color: var(--mt); text-transform: uppercase; letter-spacing: .05em; }

/* ═══════════════════════════════════
   COMPARE (SEO vs AI)
═══════════════════════════════════ */
.ag-compare-block {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 1.25rem 0;
}
.ag-compare-item {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--rs);
  padding: 1.1rem;
}
.ag-compare-item--new { border-color: var(--g-bdr); background: var(--g-dim); }
.ag-compare-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--g);
  margin-bottom: .4rem;
}
.ag-compare-item p { font-size: .81rem; color: var(--mt); margin: 0; line-height: 1.55; }
.ag-compare-arrow { color: var(--g); font-size: 1.3rem; text-align: center; }

.ag-goal-box {
  background: var(--s2);
  border-left: 3px solid var(--g);
  border-radius: var(--rs);
  padding: 1rem 1.3rem;
  margin-top: 1.1rem;
}
.ag-goal-box strong { display: block; font-size: .82rem; color: var(--g); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; }
.ag-goal-box p { font-size: .88rem; margin: 0; color: var(--tx); line-height: 1.65; }

/* AEO/GEO definition cards */
.ag-def-cards { display: flex; flex-direction: column; gap: 14px; }
.ag-def-card {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 1.5rem;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.ag-def-card:hover { border-color: var(--g); box-shadow: 0 0 22px rgba(145,217,4,.3); }
.ag-def-card--aeo { border-left: 3px solid var(--bluec); }
.ag-def-card--geo { border-left: 3px solid var(--g); }
.ag-def-card__head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: .9rem; }
.ag-def-icon {
  width: 44px; height: 44px; border-radius: var(--rs);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.ag-def-icon--blue { background: var(--blue); color: var(--bluec); }
.ag-def-icon--green { background: var(--green); color: var(--greenc); }
.ag-def-card > p { font-size: .84rem; color: var(--mt); margin-bottom: .75rem; line-height: 1.6; }

/* ═══════════════════════════════════
   WHY IT MATTERS
═══════════════════════════════════ */
.ag-prefer-list { display: flex; flex-direction: column; gap: 8px; }
.ag-prefer-item {
  display: flex; align-items: center; gap: .6rem;
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: var(--rs); padding: .65rem 1rem;
  font-size: .88rem; color: var(--tx);
}
.ag-prefer-item i { color: var(--g); font-size: 1rem; flex-shrink: 0; }

.ag-benefit-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.ag-benefit-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--s2); border: 1px solid var(--g-bdr);
  border-radius: 9999px; padding: 7px 14px;
  font-size: .82rem; color: var(--g); font-weight: 600;
  transition: all var(--tr);
}
.ag-benefit-pill i { font-size: .9rem; }
.ag-benefit-pill:hover { background: var(--g-dim); transform: translateY(-2px); }

/* ═══════════════════════════════════
   SIGNALS GRID
═══════════════════════════════════ */
.ag-signals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 2.5rem;
}
.ag-signal-card {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 1.4rem 1.2rem;
  text-align: center;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.ag-signal-card:hover {
  border-color: var(--g);
  transform: translateY(-6px);
  box-shadow: 0 0 18px rgba(145,217,4,.4), 0 0 36px rgba(145,217,4,.15);
}
.ag-signal-icon {
  width: 50px; height: 50px; border-radius: var(--rs);
  background: var(--g-dim); border: 1px solid var(--g-bdr);
  color: var(--g); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.ag-signal-card h3 { font-size: .95rem; margin-bottom: .4rem; text-transform: uppercase; }
.ag-signal-card p  { font-size: .79rem; color: var(--mt); margin: 0; line-height: 1.55; }

.ag-why-today {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--g);
  border-radius: var(--r);
  padding: 1.75rem 2rem;
}
.ag-why-today .ag-h3 { margin-top: 0; }
.ag-today-questions {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin: .75rem 0 1rem;
}
.ag-today-questions span {
  background: var(--g-dim); border: 1px solid var(--g-bdr);
  border-radius: 9999px; padding: 5px 14px;
  font-size: .8rem; color: var(--g); font-weight: 600;
}

/* ═══════════════════════════════════
   FRAMEWORK GRID
═══════════════════════════════════ */
.ag-framework-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 1.5rem;
}
.ag-framework-card {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 1.5rem;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.ag-framework-card:hover {
  border-color: var(--g);
  transform: translateY(-6px);
  box-shadow: 0 0 20px rgba(145,217,4,.38), 0 0 40px rgba(145,217,4,.15);
}
.ag-framework-card--wide { grid-column: span 3; }
.ag-fw-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.ag-fw-icon {
  width: 44px; height: 44px; border-radius: var(--rs);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.ag-fw-icon--blue   { background: var(--blue);   color: var(--bluec);   }
.ag-fw-icon--purple { background: var(--purple);  color: var(--purplec); }
.ag-fw-icon--orange { background: var(--orange);  color: var(--orangec); }
.ag-fw-icon--cyan   { background: var(--cyan);    color: var(--cyanc);   }
.ag-fw-icon--green  { background: var(--green);   color: var(--greenc);  }
.ag-fw-icon--red    { background: var(--red);     color: var(--redc);    }
.ag-fw-icon--gold   { background: var(--gold);    color: var(--goldc);   }
.ag-fw-head h3 { font-size: 1rem; margin: 0; text-transform: uppercase; }
.ag-fw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .42rem; }
.ag-fw-list--row { flex-direction: row; flex-wrap: wrap; gap: .6rem 2rem; }
.ag-fw-list li {
  display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; color: var(--tx); line-height: 1.45;
}
.ag-fw-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; border-radius: 6px;
  background: var(--g-dim); border: 1px solid var(--g-bdr);
  font-size: .68rem; font-weight: 700; color: var(--g);
  letter-spacing: .03em; flex-shrink: 0;
}
.ag-framework-note {
  text-align: center; color: var(--mt); font-size: .88rem;
  line-height: 1.7; max-width: 680px; margin: 0 auto;
}

/* ═══════════════════════════════════
   VISIBILITY GRID
═══════════════════════════════════ */
.ag-visibility-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.75rem;
}
.ag-vis-item {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 1.3rem 1rem; text-align: center;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.ag-vis-item:hover {
  border-color: var(--g);
  transform: translateY(-5px);
  box-shadow: 0 0 16px rgba(145,217,4,.38);
}
.ag-vis-item i { font-size: 1.45rem; color: var(--g); }
.ag-vis-item span { font-size: .78rem; color: var(--tx); line-height: 1.45; font-weight: 500; }

/* ═══════════════════════════════════
   SERVICES GRID
═══════════════════════════════════ */
.ag-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ag-service-card {
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 1.6rem;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.ag-service-card:hover {
  transform: translateY(-8px); border-color: var(--g);
  box-shadow: 0 0 22px rgba(145,217,4,.4), 0 0 44px rgba(145,217,4,.16);
}
.ag-service-icon {
  width: 50px; height: 50px; border-radius: var(--rs);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 1rem; flex-shrink: 0;
}
.ag-service-icon--blue   { background: var(--blue);   color: var(--bluec);   }
.ag-service-icon--green  { background: var(--green);  color: var(--greenc);  }
.ag-service-icon--orange { background: var(--orange); color: var(--orangec); }
.ag-service-icon--purple { background: var(--purple); color: var(--purplec); }
.ag-service-icon--cyan   { background: var(--cyan);   color: var(--cyanc);   }
.ag-service-icon--red    { background: var(--red);    color: var(--redc);    }
.ag-service-card h3 { font-size: 1rem; text-transform: uppercase; margin-bottom: .5rem; }
.ag-service-card > p { font-size: .83rem; color: var(--mt); margin-bottom: .6rem; line-height: 1.6; }

/* ═══════════════════════════════════
   BENEFITS GRID
═══════════════════════════════════ */
.ag-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ag-ben-card {
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 1.5rem 1.2rem; text-align: center;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.ag-ben-card:hover {
  transform: translateY(-6px); border-color: var(--g);
  box-shadow: 0 0 18px rgba(145,217,4,.4), 0 0 36px rgba(145,217,4,.15);
}
.ag-ben-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--g-dim); border: 1px solid var(--g-bdr);
  color: var(--g); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.ag-ben-card h3 { font-size: .95rem; text-transform: uppercase; margin-bottom: .45rem; }
.ag-ben-card p  { font-size: .81rem; color: var(--mt); margin: 0; line-height: 1.55; }

/* ═══════════════════════════════════
   INDUSTRY GRID
═══════════════════════════════════ */
.ag-industry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.ag-industry-item {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 1.2rem .75rem; text-align: center;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.ag-industry-item:hover {
  border-color: var(--g); transform: translateY(-4px);
  box-shadow: 0 0 14px rgba(145,217,4,.35);
}
.ag-industry-item i { font-size: 1.35rem; color: var(--g); }
.ag-industry-item span { font-size: .75rem; color: var(--tx); line-height: 1.35; font-weight: 500; }

/* ═══════════════════════════════════
   FUTURE OF SEARCH
═══════════════════════════════════ */
.ag-future-list { display: flex; flex-direction: column; gap: 8px; margin-top: .75rem; }
.ag-future-item {
  display: flex; align-items: center; gap: .65rem;
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: var(--rs); padding: .7rem 1rem;
  font-size: .88rem; color: var(--tx); font-weight: 500;
  transition: border-color var(--tr);
}
.ag-future-item i { color: var(--g); font-size: 1rem; flex-shrink: 0; }
.ag-future-item:hover { border-color: var(--g); }

.ag-evolution-box {
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 1.75rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.ag-evo-item {
  display: flex; align-items: center; gap: .9rem;
  background: var(--s1); border: 1px solid var(--bd);
  border-radius: var(--rs); padding: .9rem 1rem;
}
.ag-evo-icon {
  width: 40px; height: 40px; border-radius: var(--rs);
  background: var(--g-dim); color: var(--g); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ag-evo-icon--blue  { background: var(--blue);  color: var(--bluec);  }
.ag-evo-icon--green { background: var(--green); color: var(--greenc); }
.ag-evo-item strong { display: block; font-size: .88rem; color: var(--wt); margin-bottom: 2px; }
.ag-evo-item p { font-size: .78rem; color: var(--mt); margin: 0; }
.ag-evo-arrow { text-align: center; color: var(--g); font-size: 1.1rem; }
.ag-evo-result {
  background: var(--g-dim); border: 1px solid var(--g-bdr);
  border-radius: var(--rs); padding: .9rem 1rem;
  display: flex; align-items: center; gap: .8rem;
  font-size: .9rem; font-weight: 700; color: var(--g);
}
.ag-evo-result i { font-size: 1.2rem; flex-shrink: 0; }

/* ═══════════════════════════════════
   WHY CHOOSE FRESHORA
═══════════════════════════════════ */
.ag-why-list { display: flex; flex-direction: column; gap: 8px; margin: .75rem 0; }
.ag-why-item {
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: var(--tx);
}
.ag-why-item i { color: var(--g); font-size: 1rem; flex-shrink: 0; }

.ag-why-card {
  background: var(--s2); border: 1px solid var(--bd);
  border-top: 3px solid var(--g); border-radius: var(--r); padding: 1.75rem;
  box-shadow: 0 0 30px rgba(145,217,4,.08);
}
.ag-why-card__head {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.25rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--bd);
}
.ag-why-card__head i { font-size: 1.4rem; color: var(--g); }
.ag-why-card__head strong { font-size: .88rem; color: var(--wt); text-transform: uppercase; letter-spacing: .05em; }
.ag-why-platforms { display: flex; flex-direction: column; gap: 8px; }
.ag-wp-item {
  display: flex; align-items: center; gap: .65rem;
  background: var(--s1); border: 1px solid var(--bd);
  border-radius: var(--rs); padding: .75rem 1rem;
  font-size: .86rem; color: var(--tx); font-weight: 500;
  transition: border-color var(--tr), color var(--tr);
}
.ag-wp-item i { color: var(--g); font-size: 1rem; flex-shrink: 0; }
.ag-wp-item:hover { border-color: var(--g); color: var(--wt); }


/* ═══════════════════════════════════
   FINAL CTA
═══════════════════════════════════ */
.ag-cta-box {
  max-width: 860px; margin: 0 auto; text-align: center;
  background: var(--s2); border: 1px solid var(--bd);
  border-top: 3px solid var(--g); border-radius: var(--r);
  padding: 2.75rem 2.5rem;
  box-shadow: 0 0 50px rgba(145,217,4,.09);
}
.ag-cta-box p { color: var(--tx); }
.ag-cta-platforms {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 1.75rem 0;
}
.ag-cta-platforms span {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--s1); border: 1px solid var(--g-bdr);
  border-radius: 9999px; padding: 6px 14px;
  font-size: .8rem; color: var(--g); font-weight: 600;
}
.ag-cta-platforms span i { font-size: .9rem; }

/* ── Buttons ── */
.ag-cta-row, .ag-cta-btn-row {
  display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem;
}
.ag-cta-btn-row { justify-content: center; }
.ag-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 2rem; border-radius: 9999px;
  font-weight: 700; font-size: .87rem;
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; transition: all var(--tr);
  border: none; cursor: pointer;
}
.ag-btn--primary {
  background: var(--g); color: #0d0d0d;
  box-shadow: 0 4px 20px rgba(145,217,4,.28);
}
.ag-btn--primary:hover {
  background: var(--g2); color: #0d0d0d;
  transform: translateY(-3px); box-shadow: 0 8px 32px rgba(145,217,4,.45);
}
.ag-btn--outline {
  background: transparent; color: var(--g); border: 1.5px solid var(--g);
}
.ag-btn--outline:hover {
  background: var(--g); color: #0d0d0d; transform: translateY(-3px);
}
.ag-btn--wa {
  background: linear-gradient(135deg,#25d366,#128c7e); color: #fff;
  box-shadow: 0 4px 18px rgba(37,211,102,.3);
}
.ag-btn--wa:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(37,211,102,.45); }

/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 1199px) {
  .ag-industry-grid { grid-template-columns: repeat(4, 1fr); }
  .ag-benefits-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
  .ag-sec, .ag-sec--alt, .ag-hero { padding: 60px 0; }
  .ag-signals-grid    { grid-template-columns: repeat(2, 1fr); }
  .ag-framework-grid  { grid-template-columns: repeat(2, 1fr); }
  .ag-framework-card--wide { grid-column: span 2; }
  .ag-services-grid   { grid-template-columns: repeat(2, 1fr); }
  .ag-benefits-grid   { grid-template-columns: repeat(2, 1fr); }
  .ag-industry-grid   { grid-template-columns: repeat(3, 1fr); }
  .ag-visibility-grid { grid-template-columns: repeat(2, 1fr); }
  .ag-compare-block   { grid-template-columns: 1fr; }
  .ag-compare-arrow   { transform: rotate(90deg); margin: .25rem auto; }
}

@media (max-width: 767px) {
  .ag-sec, .ag-sec--alt, .ag-hero { padding: 46px 0; }
  .ag-signals-grid   { grid-template-columns: 1fr 1fr; }
  .ag-framework-grid { grid-template-columns: 1fr; }
  .ag-framework-card--wide { grid-column: span 1; }
  .ag-fw-list--row   { flex-direction: column; }
  .ag-services-grid  { grid-template-columns: 1fr; }
  .ag-benefits-grid  { grid-template-columns: repeat(2, 1fr); }
  .ag-industry-grid  { grid-template-columns: repeat(2, 1fr); }
  .ag-visibility-grid{ grid-template-columns: repeat(2, 1fr); }
  .ag-platforms-grid { grid-template-columns: repeat(3, 1fr); }
  .ag-cta-row, .ag-cta-btn-row { flex-direction: column; align-items: stretch; }
  .ag-btn { justify-content: center; }
  .ag-cta-box { padding: 2rem 1.25rem; }
}

@media (max-width: 480px) {
  .ag-sec, .ag-sec--alt, .ag-hero { padding: 36px 0; }
  .ag-signals-grid   { grid-template-columns: 1fr; }
  .ag-benefits-grid  { grid-template-columns: 1fr; }
  .ag-industry-grid  { grid-template-columns: 1fr 1fr; }
  .ag-visibility-grid{ grid-template-columns: 1fr; }
  .ag-service-card,
  .ag-ben-card,
  .ag-signal-card    { padding: 1.25rem 1rem; }
  .ag-platforms-grid { grid-template-columns: repeat(2, 1fr); }
  .ag-hero-stats     { grid-template-columns: repeat(3, 1fr); }
}

 

.faq-search-box {
    position: relative;
    max-width: 600px;
    margin: 0 auto 25px;
}

.faq-search-box input {
    width: 100%;
    padding: 14px 20px 14px 45px;
    border-radius: 50px;
    border: 1px solid #333;
    background: #1e1e1e;
    color: #fff;
    font-size: 15px;
}

/* Placeholder visible */
.faq-search-box input::placeholder {
    color: #aaa;
}

/* Icon */
.faq-search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #85c815;
    font-size: 16px;
}

/* Focus */
.faq-search-box input:focus {
    border-color: #85c815;
    outline: none;
    box-shadow: 0 0 10px rgba(133, 200, 21, 0.4);
}

/* No result */
.no-result {
    text-align: center;
    color: #ff4d4d;
    font-size: 14px;
}
 
  /* ── CSS Variables (scoped to this section) ── */
    .fq-section {
      --fq-accent:   #91d904;
      --fq-accent2:  #6aaa00;
      --fq-dark:     #0d1117;
      --fq-card:     #141b22;
      --fq-border:   rgba(145,217,4,0.18);
      --fq-text:     #c9d1d9;
      --fq-muted:    #8b949e;
      --fq-white:    #ffffff;
      --fq-radius:   14px;
      --fq-trans:    0.32s cubic-bezier(.4,0,.2,1);

      background: var(--fq-dark);
      padding: 72px 0 80px;
      position: relative;
      overflow: hidden;
    }

    /* subtle grid texture */
    .fq-section::before {
      content: "";
      position: absolute;
      inset: 0;
     
      background-size: 48px 48px;
      pointer-events: none;
    }

    /* glow blobs */
    .fq-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      opacity: .18;
    }
    .fq-blob--1 {
      width: 400px; height: 400px;
      background: var(--fq-accent);
      top: -120px; left: -100px;
    }
    .fq-blob--2 {
      width: 300px; height: 300px;
      background: var(--fq-accent2);
      bottom: -80px; right: -80px;
    }

    .fq-wrap {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 20px;
      position: relative;
      z-index: 1;
    }

    /* ── Header ── */
    .fq-header {
      text-align: center;
      margin-bottom: 48px;
    }
    .fq-badge {
      display: inline-block;
      background: rgba(145,217,4,.12);
      border: 1px solid var(--fq-border);
      color: var(--fq-accent);
      letter-spacing: .12em;
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      padding: 5px 16px;
      border-radius: 50px;
      margin-bottom: 18px;
    }
    .fq-title {
      color: var(--fq-white);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 800;
      line-height: 1.22;
      margin: 0 0 14px;
      letter-spacing: -.02em;
    }
    .fq-title span {
      color: var(--fq-accent);
    }
    .fq-sub {
      color: var(--fq-muted);
      font-size: .97rem;
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.65;
    }

    /* ── Accordion List ── */
    .fq-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* ── Single FAQ Item ── */
    .fq-item {
      background: var(--fq-card);
      border: 1px solid var(--fq-border);
      border-radius: var(--fq-radius);
      overflow: hidden;
      transition: border-color var(--fq-trans), box-shadow var(--fq-trans);
    }
    .fq-item:hover {
      border-color: rgba(145,217,4,.45);
    }
    .fq-item.fq-open {
      border-color: var(--fq-accent);
      box-shadow: 0 0 0 1px rgba(145,217,4,.25), 0 8px 32px rgba(0,0,0,.35);
    }

    /* ── Question Button ── */
    .fq-btn {
      width: 100%;
      background: none;
      border: none;
      padding: 20px 22px;
      display: flex;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      text-align: left;
      outline: none;
    }
    .fq-btn:focus-visible {
      outline: 2px solid var(--fq-accent);
      outline-offset: -2px;
    }

    .fq-num {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(145,217,4,.1);
      border: 1px solid var(--fq-border);
      color: var(--fq-accent);
      font-size: .7rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: .05em;
      transition: background var(--fq-trans), border-color var(--fq-trans);
    }
    .fq-open .fq-num {
      background: var(--fq-accent);
      border-color: var(--fq-accent);
      color: var(--fq-dark);
    }

    /* ONLY CHANGE: h2.fq-q-text — reset browser h2 defaults so it looks like before */
    h2.fq-q-text {
      margin: 0;
      padding: 0;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.4;
      flex: 1;
      color: var(--fq-white);
      transition: color var(--fq-trans);
    }
    .fq-open h2.fq-q-text {
      color: var(--fq-accent);
    }

    .fq-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(145,217,4,.08);
      border: 1px solid var(--fq-border);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--fq-trans), transform var(--fq-trans);
    }
    .fq-icon svg {
      width: 13px;
      height: 13px;
      stroke: var(--fq-accent);
      transition: transform var(--fq-trans);
    }
    .fq-open .fq-icon {
      background: var(--fq-accent);
    }
    .fq-open .fq-icon svg {
      stroke: var(--fq-dark);
      transform: rotate(45deg);
    }

    /* ── Answer Panel ── */
    .fq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--fq-trans);
    }
    .fq-answer-inner {
      padding: 0 22px 20px 70px;
      text-align:justify;
      color: var(--fq-text);
      font-size: .94rem;
      line-height: 1.72;
    }

    /* ── More Button ── */
    .fq-more-wrap {
      text-align: center;
      margin-top: 40px;
    }
    .fq-more-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--fq-accent);
      color: var(--fq-dark);
      font-size: .9rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: 14px 32px;
      border-radius: 50px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: background var(--fq-trans), transform var(--fq-trans), box-shadow var(--fq-trans);
      box-shadow: 0 4px 20px rgba(145,217,4,.25);
    }
    .fq-more-btn:hover {
      background: var(--fq-accent2);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(145,217,4,.35);
    }
    .fq-more-btn svg {
      width: 16px;
      height: 16px;
      stroke: var(--fq-dark);
      flex-shrink: 0;
      transition: transform var(--fq-trans);
    }
    .fq-more-btn:hover svg {
      transform: translateX(3px);
    }
.fq-answer {
  cursor: pointer;
}
    /* ── Responsive ── */
    @media (max-width: 600px) {
      .fq-section { padding: 52px 0 60px; }
      .fq-answer-inner { padding-left: 22px; }
      .fq-btn { padding: 16px 16px; gap: 12px; }
      /* .fq-num { display: none; } */
    }