/* ============================================================
   AEO/GEO PAGE  —  services/aeo-geo-strategy/
   Sirf is page ke naye sections (ae-*):
     hero (live AI chat) · AEO vs GEO · foundations · local use cases
     comparison-content note
   NOTE: sirf site ke theme colors use hue hain (teal / mint / text-*).
   How We Work / services cards / FAQ / Final CTA shared hain (hero.css).
   Breadcrumb aur section wrapper (pg-*) inner.css se.
   ============================================================ */

/* --- reveal (hidden only when JS is running) --- */
.ae-js .ae-rv { opacity: 0; }

.ae-js .ae-rv.is-in {
  opacity: 1;
  animation: aeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) backwards;
}

@keyframes aeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

@keyframes aeSpin { to { transform: rotate(360deg); } }
@keyframes aeFlow { to { background-position: 12px 0; } }

/* ============================================================
   ████  1) HERO — a live AI chat  ████
   ============================================================ */
.ae-hero {
  position: relative;
  padding: 36px 0 74px 0;
  background: #FFFFFF;
  overflow: hidden;
}

.ae-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 46%, rgba(0, 168, 150, 0.14), transparent 46%),
    radial-gradient(circle at 4% 96%, rgba(94, 234, 212, 0.18), transparent 40%);
  pointer-events: none;
}

.ae-crumb { justify-content: center; margin-bottom: 24px; }

.ae-h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  max-width: 620px;
  line-height: 1.13;
}

.ae-points {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ae-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  transition: transform 0.3s cubic-bezier(0.22, 1.4, 0.36, 1), color 0.3s ease;
}

.ae-points li:hover { transform: translateX(8px); color: var(--teal-deep); }

.ae-pt-ic {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.22, 1.6, 0.36, 1);
}

.ae-points li:hover .ae-pt-ic { transform: rotate(360deg) scale(1.2); }

.ae-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 22px;
}

.ae-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--teal-deep);
  text-decoration: none;
}

.ae-link svg { transition: transform 0.25s ease; }
.ae-link:hover { color: var(--teal-darker); }
.ae-link:hover svg { transform: translateY(3px); }

@media (min-width: 992px) {
  .ae-crumb   { justify-content: flex-start; }
  .ae-points  { align-items: flex-start; }
  .ae-actions { justify-content: flex-start; }
}

/* stage */
.ae-stage {
  position: relative;
  max-width: 500px;
  min-height: 500px;
  margin: 0 auto;
  padding: 20px 24px 36px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ae-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 480px;
  height: 480px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 168, 150, 0.24), rgba(94, 234, 212, 0.08) 52%, transparent 72%);
  animation: aeHalo 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes aeHalo {
  0%, 100% { transform: translate(-50%, -50%) scale(0.94); }
  50%      { transform: translate(-50%, -50%) scale(1.06); }
}

.ae-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1.5px dashed rgba(0, 168, 150, 0.4);
  border-radius: 50%;
  pointer-events: none;
}

.ae-ring1 { width: 440px; height: 440px; margin: -220px 0 0 -220px; animation: aeSpin 44s linear infinite; }
.ae-ring2 { width: 350px; height: 350px; margin: -175px 0 0 -175px; animation: aeSpin 32s linear infinite reverse; }

/* chat window */
.ae-chat {
  position: relative;
  z-index: 2;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 44px 70px -32px rgba(0, 70, 68, 0.55), 0 0 0 1.5px var(--mint-100);
  animation: aeFloat 6.5s ease-in-out infinite;
  transition: box-shadow 0.4s ease;
}

.ae-chat:hover { box-shadow: 0 54px 80px -30px rgba(0, 70, 68, 0.65), 0 0 0 3px var(--mint-200); }

@keyframes aeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.ae-chat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--mint-50);
  border-bottom: 1px solid var(--mint-200);
}

.ae-chat-top b { font-size: 0.84rem; font-weight: 800; color: var(--text-dark); }

.ae-spark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aeTwinkle 3.2s ease-in-out infinite;
}

@keyframes aeTwinkle {
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(90deg) scale(1.12); }
}

.ae-tabs { display: flex; gap: 4px; margin-left: auto; }

.ae-tabs i {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  color: var(--text-muted);
  cursor: default;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.ae-tabs i:hover { background: var(--mint-100); color: var(--teal-deep); transform: translateY(-2px); }
.ae-tabs i.is-on { background: var(--teal-deep); color: #FFFFFF; }

.ae-msgs { min-height: 292px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* user bubble */
.ae-u {
  align-self: flex-end;
  max-width: 88%;
  min-height: 40px;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1.4, 0.36, 1);
}

.ae-u span {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 18px 18px 4px 18px;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.5;
  transition: transform 0.3s ease;
}

.ae-u span:hover { transform: scale(1.03) rotate(-0.6deg); }

.ae-u span::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: #FFFFFF;
  animation: aeCaret 0.8s steps(2) infinite;
}

@keyframes aeCaret { 50% { opacity: 0; } }

.is-ask .ae-u { opacity: 1; transform: none; }
.is-send .ae-u span::after, .is-think .ae-u span::after, .is-ans .ae-u span::after { display: none; }

/* AI answer */
.ae-a {
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1.2, 0.36, 1);
}

.is-think .ae-a, .is-ans .ae-a { opacity: 1; transform: none; }

.ae-a-av {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-darker));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ae-a-body {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 12px 15px;
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  border-radius: 4px 18px 18px 18px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.ae-a-body:hover { border-color: var(--teal-main); background: var(--mint-100); }

.ae-a-body p { margin: 0; font-size: 0.84rem; font-weight: 600; line-height: 1.6; color: var(--text-dark); }

.ae-dots { display: none; gap: 5px; padding: 6px 0; }
.is-think .ae-dots { display: flex; }

.ae-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-main);
  animation: aeDot 0.9s ease-in-out infinite;
}

.ae-dots i:nth-child(2) { animation-delay: 0.15s; }
.ae-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes aeDot {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(-6px); opacity: 1; }
}

.ae-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.ae-src span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--teal-deep);
  opacity: 0;
  transform: scale(0.7) translateY(6px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1.6, 0.36, 1), background 0.25s ease, color 0.25s ease;
}

.is-src .ae-src span { opacity: 1; transform: none; }
.is-src .ae-src span:nth-child(2) { transition-delay: 0.12s, 0.12s, 0s, 0s; }
.is-src .ae-src span:nth-child(3) { transition-delay: 0.24s, 0.24s, 0s, 0s; }
.is-src .ae-src span:hover { background: var(--teal-deep); color: #FFFFFF; transform: translateY(-3px) scale(1.06); transition-delay: 0s; }

.ae-comp {
  margin: 0 16px 16px 16px;
  padding: 8px 8px 8px 18px;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--mint-200);
  border-radius: 999px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ae-comp:hover { border-color: var(--teal-main); box-shadow: 0 0 0 4px rgba(0, 168, 150, 0.12); }

.ae-comp-ph { font-size: 0.8rem; font-weight: 600; color: var(--text-faint); }

.ae-send {
  width: 34px;
  height: 34px;
  margin-left: auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.ae-comp:hover .ae-send { transform: rotate(-12deg) scale(1.1); }
.is-send .ae-send { animation: aePing 0.5s ease-out; }

@keyframes aePing {
  0%   { box-shadow: 0 0 0 0 rgba(0, 168, 150, 0.6); transform: scale(0.88); }
  100% { box-shadow: 0 0 0 14px rgba(0, 168, 150, 0); transform: scale(1); }
}

/* floating labels */
.ae-chip { position: absolute; z-index: 5; }

.ae-chip-in {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 8px;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  border-radius: 999px;
  box-shadow: 0 18px 30px -14px rgba(0, 90, 88, 0.5);
  white-space: nowrap;
  animation: aeBob 4.5s ease-in-out infinite;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.ae-chip-in:hover { background: var(--mint-50); border-color: var(--teal-main); }
.ae-chip-in b { font-size: 0.76rem; font-weight: 800; color: var(--text-dark); }
.ae-chip-b .ae-chip-in { animation-delay: -1.5s; }
.ae-chip-c .ae-chip-in { animation-delay: -3s; }

@keyframes aeBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.ae-chip-ic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.22, 1.6, 0.36, 1);
}

.ae-chip-in:hover .ae-chip-ic { transform: rotate(360deg) scale(1.15); }

.ae-chip-a { left: -4px; top: 34px; }
.ae-chip-b { right: -6px; top: 140px; }
.ae-chip-c { left: 0; bottom: 12px; }

/* ============================================================
   ████  2) AEO vs GEO  ████
   ============================================================ */
.ae-duo {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ae-def,
.ae-fc {
  --mx: 50%;
  --my: 0%;
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  border-radius: 26px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.ae-def { padding: 28px 28px 26px 28px; }

.ae-def::before,
.ae-fc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(0, 168, 150, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.ae-def::after,
.ae-fc::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--teal-main), var(--mint-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ae-def:hover,
.ae-fc:hover { transform: translateY(-9px); border-color: var(--teal-main); box-shadow: 0 34px 56px -26px rgba(0, 90, 88, 0.5); }
.ae-def:hover::before, .ae-fc:hover::before { opacity: 1; }
.ae-def:hover::after, .ae-fc:hover::after { transform: scaleX(1); }

.ae-def > *, .ae-fc > * { position: relative; }

.ae-def-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ae-def-top h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--text-dark); }

.ae-badge {
  padding: 8px 15px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: transform 0.45s cubic-bezier(0.22, 1.6, 0.36, 1);
}

.ae-def:hover .ae-badge { transform: rotate(-6deg) scale(1.1); }

.ae-def > p { margin: 0 0 20px 0; font-size: 0.92rem; line-height: 1.72; color: var(--text-body); }

.ae-viz {
  position: relative;
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 12%, rgba(94, 234, 212, 0.35), transparent 55%),
    linear-gradient(160deg, var(--mint-50), #FFFFFF);
  border: 1px solid var(--mint-200);
}

/* AEO: answer gets lifted into a quote */
.ae-viz-aeo { height: 214px; }

.ae-faq {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 64%;
  padding: 13px 14px;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  border-radius: 16px;
  box-shadow: 0 10px 20px -14px rgba(0, 90, 88, 0.5);
  transition: transform 0.35s ease;
}

.ae-viz-aeo:hover .ae-faq { transform: translateY(-4px) rotate(-1deg); }

.ae-faq-q { display: flex; align-items: center; gap: 8px; color: var(--teal-deep); }
.ae-faq-q b { font-size: 0.78rem; font-weight: 800; color: var(--text-dark); }

.ae-faq-a { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.ae-faq-a i { display: block; height: 6px; border-radius: 4px; background: var(--mint-200); }
.ae-faq-a i.ae-short { width: 58%; }

.ae-faq-hit {
  display: block;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dark);
  animation: aeHit 5.5s ease-in-out infinite;
}

@keyframes aeHit {
  0%, 6%, 52%, 100% { background: transparent; color: var(--text-dark); }
  14%, 40%          { background: rgba(0, 168, 150, 0.2); color: var(--teal-darker); }
}

.ae-fly {
  position: absolute;
  z-index: 3;
  left: 8%;
  top: 56%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--teal-deep);
  color: #FFFFFF;
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 10px 18px -8px rgba(0, 90, 88, 0.6);
  animation: aeFly 5.5s ease-in-out infinite;
}

@keyframes aeFly {
  0%, 24%  { opacity: 0; left: 8%;  top: 50%; transform: scale(0.8); }
  30%      { opacity: 1; left: 8%;  top: 50%; transform: scale(1); }
  58%      { opacity: 1; left: 50%; top: 70%; transform: scale(1); }
  66%, 100% { opacity: 0; left: 56%; top: 74%; transform: scale(0.75); }
}

.ae-quote {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--teal-darker);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 16px 26px -14px rgba(0, 60, 58, 0.7);
  transition: transform 0.35s ease;
}

.ae-viz-aeo:hover .ae-quote { transform: scale(1.05) rotate(1deg); }

.ae-quote-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--teal-main); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }

.ae-quote-fill {
  display: block;
  width: 0;
  height: 6px;
  border-radius: 4px;
  background: var(--mint-400);
  animation: aeQfill 5.5s ease-in-out infinite;
}

.ae-quote-fill.ae-q2 { animation-name: aeQfill2; }

@keyframes aeQfill {
  0%, 58%   { width: 0; }
  72%, 94%  { width: 100%; }
  100%      { width: 0; }
}

@keyframes aeQfill2 {
  0%, 62%   { width: 0; }
  78%, 94%  { width: 62%; }
  100%      { width: 0; }
}

/* GEO: entity orbit */
.ae-viz-geo { height: 300px; display: flex; align-items: center; justify-content: center; }

.ae-orbit { position: relative; width: 290px; height: 290px; }

.ae-orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  margin: -105px 0 0 -105px;
  border: 2px dashed rgba(0, 168, 150, 0.4);
  border-radius: 50%;
}

.ae-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border: 2px solid var(--teal-main);
  border-radius: 50%;
  opacity: 0;
  animation: aeRipple 3.2s ease-out infinite;
}

.ae-pulse.ae-p2 { animation-delay: 1.6s; }

@keyframes aeRipple {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2.1); opacity: 0; }
}

.ae-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 66px;
  height: 66px;
  margin: -33px 0 0 -33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  border: 4px solid #FFFFFF;
  color: #FFFFFF;
  box-shadow: 0 14px 26px -8px rgba(0, 90, 88, 0.7);
  transition: transform 0.4s cubic-bezier(0.22, 1.6, 0.36, 1);
}

.ae-orbit:hover .ae-core { transform: scale(1.14); }

.ae-spin { position: absolute; inset: 0; animation: aeSpin 28s linear infinite; }

.ae-node { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateX(105px); }
.ae-n1 { --a: -90deg; }
.ae-n2 { --a: 0deg; }
.ae-n3 { --a: 90deg; }
.ae-n4 { --a: 180deg; }

.ae-node-in {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transform: translate(-50%, -50%) rotate(calc(var(--a) * -1));
  animation: aeCounter 28s linear infinite;
}

@keyframes aeCounter {
  to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1 - 360deg)); }
}

.ae-node-in i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--mint-200);
  color: var(--teal-deep);
  box-shadow: 0 10px 18px -8px rgba(0, 90, 88, 0.5);
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1.6, 0.36, 1);
}

.ae-node-in small { padding: 2px 8px; border-radius: 999px; background: #FFFFFF; font-size: 0.6rem; font-weight: 800; color: var(--text-dark); white-space: nowrap; }

.ae-node-in:hover i { background: var(--teal-deep); color: #FFFFFF; transform: scale(1.25); }

.ae-orbit:hover .ae-spin,
.ae-orbit:hover .ae-node-in { animation-play-state: paused; }

/* ============================================================
   ████  3) FOUNDATIONS  ████
   ============================================================ */
.ae-honest {
  max-width: 860px;
  margin: 0 auto 36px auto;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--teal-darker), var(--teal-deep));
  border-radius: 24px;
  color: #FFFFFF;
  box-shadow: 0 26px 44px -24px rgba(0, 70, 68, 0.7);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ae-honest:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 34px 54px -24px rgba(0, 70, 68, 0.8); }

.ae-honest-ic {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  animation: aeNod 3.4s ease-in-out infinite;
}

@keyframes aeNod {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg) scale(1.08); }
  75%      { transform: rotate(8deg) scale(1.08); }
}

.ae-honest p { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.75; color: rgba(255, 255, 255, 0.95); }

.ae-fgrid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.ae-fc { grid-column: span 2; padding: 22px 22px 28px 22px; }
.ae-fc.ae-fc-wide { grid-column: span 3; }

.ae-fc h3 { margin: 18px 0 8px 0; font-size: 1.08rem; font-weight: 800; color: var(--text-dark); }
.ae-fc p  { margin: 0; font-size: 0.88rem; line-height: 1.68; color: var(--text-body); }

.ae-fv {
  height: 118px;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 12%, rgba(94, 234, 212, 0.32), transparent 55%),
    linear-gradient(160deg, var(--mint-50), #FFFFFF);
  border: 1px solid var(--mint-200);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* entity clarity */
.ae-fv-ent { justify-content: space-between; gap: 10px; }
.ae-src3 { display: flex; flex-direction: column; gap: 7px; }

.ae-src3 i {
  display: block;
  padding: 4px 11px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 800;
  color: var(--text-dark);
  animation: aeBlink 3.6s ease-in-out infinite;
}

.ae-src3 i:nth-child(2) { animation-delay: 0.4s; }
.ae-src3 i:nth-child(3) { animation-delay: 0.8s; }

@keyframes aeBlink {
  0%, 30%, 100% { background: #FFFFFF; color: var(--text-dark); border-color: var(--mint-200); }
  8%, 22%       { background: var(--teal-deep); color: #FFFFFF; border-color: var(--teal-deep); }
}

.ae-conv { flex: 1; display: flex; flex-direction: column; justify-content: space-between; height: 66px; padding: 8px 0; }

.ae-conv i {
  display: block;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--teal-main) 0 6px, transparent 6px 12px);
  background-size: 12px 100%;
  animation: aeFlow 0.6s linear infinite;
}

.ae-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 18px -8px rgba(0, 90, 88, 0.6);
  animation: aeTagPop 3.6s ease-in-out infinite;
}

.ae-tag-ck { width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; color: var(--teal-deep); display: flex; align-items: center; justify-content: center; }

@keyframes aeTagPop {
  0%, 50%, 100% { transform: scale(1); }
  60%           { transform: scale(1.1); }
}

/* content foundations */
.ae-fv-faq { flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; }
.ae-qa { display: flex; align-items: center; gap: 9px; }
.ae-qa-q, .ae-qa-a { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 800; }
.ae-qa-q { background: var(--teal-deep); color: #FFFFFF; }
.ae-qa-a { background: var(--mint-200); color: var(--teal-deep); }

.ae-qa i {
  display: block;
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--mint-400);
  transform: scaleX(0);
  transform-origin: left;
  animation: aeBar 4.4s ease-in-out infinite;
}

.ae-qa:nth-child(2) i { animation-delay: 0.3s; background: var(--mint-200); }
.ae-qa:nth-child(3) i { animation-delay: 0.6s; width: 60%; flex: 0 0 62%; }
.ae-qa:nth-child(4) i { animation-delay: 0.9s; background: var(--mint-200); flex: 0 0 46%; }

@keyframes aeBar {
  0%, 6%    { transform: scaleX(0); }
  26%, 84%  { transform: scaleX(1); }
  100%      { transform: scaleX(0); }
}

/* reviews */
.ae-fv-rev { flex-direction: column; justify-content: center; gap: 10px; }
.ae-stars { display: flex; gap: 4px; }

.ae-stars i {
  display: inline-flex;
  color: var(--mint-200);
  animation: aeStar 4s ease-in-out calc(var(--k) * 0.25s) infinite;
}

@keyframes aeStar {
  0%, 4%    { color: var(--mint-200); transform: scale(1); }
  12%       { color: var(--teal-main); transform: scale(1.45) rotate(-12deg); }
  20%, 78%  { color: var(--teal-main); transform: scale(1); }
  94%, 100% { color: var(--mint-200); transform: scale(1); }
}

.ae-ask { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ae-ask b { padding: 4px 10px; border-radius: 12px 12px 12px 3px; background: #FFFFFF; border: 1px solid var(--mint-200); font-size: 0.64rem; font-weight: 800; color: var(--text-dark); }

.ae-ask em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px 12px 3px 12px;
  background: var(--teal-deep);
  color: #FFFFFF;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 800;
  animation: aeAnswer 4s ease-in-out infinite;
}

@keyframes aeAnswer {
  0%, 30%   { opacity: 0; transform: translateY(6px) scale(0.9); }
  42%, 82%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

/* schema */
.ae-fv-code { background: var(--teal-darker); border-color: var(--teal-darker); }
.ae-code { width: 100%; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.68rem; line-height: 1.8; color: var(--mint-400); }
.ae-code span { display: block; width: 0; overflow: hidden; white-space: nowrap; animation: aeType 5s steps(26) calc(var(--l) * 0.6s) infinite; }

@keyframes aeType {
  0%        { width: 0; }
  22%, 84%  { width: 100%; }
  96%, 100% { width: 0; }
}

/* expert proof */
.ae-fv-eeat { justify-content: center; gap: 18px; }

.ae-badge-s {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  box-shadow: 0 12px 22px -8px rgba(0, 90, 88, 0.65);
  animation: aeBadge 3s ease-in-out infinite;
}

@keyframes aeBadge {
  0%, 100% { box-shadow: 0 12px 22px -8px rgba(0, 90, 88, 0.65), 0 0 0 0 rgba(0, 168, 150, 0.5); }
  50%      { box-shadow: 0 12px 22px -8px rgba(0, 90, 88, 0.65), 0 0 0 14px rgba(0, 168, 150, 0); }
}

.ae-eeat { display: flex; gap: 7px; }

.ae-eeat i {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 800;
  color: var(--text-muted);
  animation: aeTile 4s ease-in-out calc(var(--k) * 0.4s) infinite;
}

@keyframes aeTile {
  0%, 38%, 100% { background: #FFFFFF; color: var(--text-muted); transform: none; }
  8%, 30%       { background: var(--teal-deep); color: #FFFFFF; transform: translateY(-6px) scale(1.08); }
}

.ae-fc:hover .ae-fv { border-color: var(--teal-main); }
.ae-fc:hover .ae-src3 i, .ae-fc:hover .ae-stars i, .ae-fc:hover .ae-eeat i { animation-duration: 2s; }

/* ============================================================
   ████  4) LOCAL USE CASES  ████
   ============================================================ */
.ae-asks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.ae-ask-q {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px 999px 999px 6px;
  background: #FFFFFF;
  border: 1.5px solid var(--mint-200);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-dark);
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s cubic-bezier(0.22, 1.4, 0.36, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ae-ask-q svg { color: var(--teal-main); transition: color 0.3s ease, transform 0.4s ease; }
.ae-ask-q:hover { transform: translateX(10px) scale(1.02); background: var(--teal-deep); border-color: var(--teal-deep); color: #FFFFFF; }
.ae-ask-q:hover svg { color: #FFFFFF; transform: rotate(-15deg) scale(1.2); }

.ae-pick {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: #FFFFFF;
  border: 1px solid var(--mint-200);
  border-radius: 26px;
  box-shadow: 0 40px 60px -32px rgba(0, 90, 88, 0.5);
}

.ae-pick-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--teal-deep);
  color: #FFFFFF;
}

.ae-pick-bar svg { animation: aeTwinkle 3s ease-in-out infinite; }
.ae-pick-bar b { font-size: 0.76rem; font-weight: 800; }

.ae-biz {
  position: relative;
  padding: 13px 16px 14px 16px;
  background: #FFFFFF;
  border: 1.5px solid var(--mint-200);
  border-radius: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ae-biz:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 18px 30px -18px rgba(0, 90, 88, 0.55); }

.ae-biz1 { animation: aeScanA 10s ease-in-out infinite; }
.ae-biz3 { animation: aeScanC 10s ease-in-out infinite; }
.ae-biz2 { animation: aeScanB 10s ease-in-out infinite; }

@keyframes aeScanA {
  0%, 4%    { border-color: var(--mint-200); opacity: 1; box-shadow: none; transform: none; }
  8%, 18%   { border-color: var(--teal-main); opacity: 1; box-shadow: 0 0 0 5px rgba(0, 168, 150, 0.16); transform: translateX(6px); }
  24%, 94%  { border-color: var(--mint-200); opacity: 0.5; box-shadow: none; transform: none; }
  100%      { border-color: var(--mint-200); opacity: 1; }
}

@keyframes aeScanC {
  0%, 26%   { border-color: var(--mint-200); opacity: 1; box-shadow: none; transform: none; }
  30%, 40%  { border-color: var(--teal-main); opacity: 1; box-shadow: 0 0 0 5px rgba(0, 168, 150, 0.16); transform: translateX(6px); }
  46%, 94%  { border-color: var(--mint-200); opacity: 0.5; box-shadow: none; transform: none; }
  100%      { border-color: var(--mint-200); opacity: 1; }
}

@keyframes aeScanB {
  0%, 48%   { border-color: var(--mint-200); background: #FFFFFF; box-shadow: none; transform: none; }
  52%, 60%  { border-color: var(--teal-main); background: #FFFFFF; box-shadow: 0 0 0 5px rgba(0, 168, 150, 0.16); transform: translateX(6px); }
  68%, 92%  { border-color: var(--teal-deep); background: var(--mint-50); box-shadow: 0 26px 40px -22px rgba(0, 90, 88, 0.7), 0 0 0 5px rgba(0, 168, 150, 0.14); transform: scale(1.035); }
  100%      { border-color: var(--mint-200); background: #FFFFFF; box-shadow: none; transform: none; }
}

.ae-rec {
  position: absolute;
  right: 16px;
  top: -12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal-main), var(--teal-deep));
  color: #FFFFFF;
  font-size: 0.64rem;
  font-weight: 800;
  opacity: 0;
  animation: aeRec 10s ease-in-out infinite;
}

@keyframes aeRec {
  0%, 64%   { opacity: 0; transform: translateY(8px) scale(0.8); }
  72%, 92%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: none; }
}

.ae-biz-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ae-biz-h b { font-size: 0.86rem; font-weight: 800; color: var(--text-dark); }

.ae-biz-av {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--mint-100);
  color: var(--teal-deep);
}

.ae-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }

.ae-f {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
}

.ae-f-no { border: 1.5px dashed var(--text-faint); color: var(--text-faint); }
.ae-f-ok { background: var(--teal-deep); color: #FFFFFF; }

.ae-bud { display: flex; align-items: center; gap: 10px; }
.ae-bud small { flex-shrink: 0; font-size: 0.64rem; font-weight: 800; color: var(--text-muted); }
.ae-bud > span { flex: 1; height: 7px; border-radius: 7px; background: var(--mint-100); overflow: hidden; }
.ae-bud i { display: block; width: var(--w); height: 100%; border-radius: 7px; background: var(--mint-400); transition: filter 0.3s ease; }
.ae-biz:hover .ae-bud i { filter: saturate(1.6); animation: aeWiggle 0.7s ease; }

@keyframes aeWiggle {
  0%, 100% { transform: scaleX(1); transform-origin: left; }
  40%      { transform: scaleX(0.7); transform-origin: left; }
  70%      { transform: scaleX(1.05); transform-origin: left; }
}

/* ============================================================
   ████  5) COMPARISON-STYLE CONTENT  ████
   ============================================================ */
.ae-cmp-viz {
  position: relative;
  max-width: 500px;
  aspect-ratio: 1 / 0.84;
  margin: 0 auto;
}

.ae-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.ae-ln {
  stroke: var(--teal-main);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
  animation: aeDash 1s linear infinite;
  transition: opacity 0.3s ease, stroke-width 0.3s ease;
}

@keyframes aeDash { to { stroke-dashoffset: -22; } }

.ae-cmp-viz:has(.ae-plat1:hover) .ae-ln:nth-child(1),
.ae-cmp-viz:has(.ae-plat2:hover) .ae-ln:nth-child(2),
.ae-cmp-viz:has(.ae-plat3:hover) .ae-ln:nth-child(3),
.ae-cmp-viz:has(.ae-plat4:hover) .ae-ln:nth-child(4) { opacity: 1; stroke-width: 4px; }

.ae-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 170px;
  padding: 16px 12px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--teal-darker), var(--teal-deep));
  color: #FFFFFF;
  box-shadow: 0 28px 44px -20px rgba(0, 70, 68, 0.75);
  animation: aeHub 4s ease-in-out infinite;
  transition: filter 0.3s ease;
}

.ae-hub:hover { filter: brightness(1.12); }

@keyframes aeHub {
  0%, 100% { box-shadow: 0 28px 44px -20px rgba(0, 70, 68, 0.75), 0 0 0 0 rgba(0, 168, 150, 0.4); }
  50%      { box-shadow: 0 28px 44px -20px rgba(0, 70, 68, 0.75), 0 0 0 16px rgba(0, 168, 150, 0); }
}

.ae-hub-ic { width: 40px; height: 40px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: transform 0.5s cubic-bezier(0.22, 1.6, 0.36, 1); }
.ae-hub:hover .ae-hub-ic { transform: rotate(360deg) scale(1.15); }
.ae-hub b { font-size: 0.82rem; font-weight: 800; }
.ae-hub small { font-size: 0.66rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); }

.ae-plat {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  text-align: center;
  background: #FFFFFF;
  border: 1.5px solid var(--mint-200);
  border-radius: 18px;
  box-shadow: 0 16px 28px -16px rgba(0, 90, 88, 0.5);
  white-space: nowrap;
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.22, 1.5, 0.36, 1), background 0.3s ease, border-color 0.3s ease;
}

.ae-plat b { font-size: 0.8rem; font-weight: 800; color: var(--text-dark); transition: color 0.3s ease; }
.ae-plat small { font-size: 0.62rem; font-weight: 700; color: var(--text-muted); transition: color 0.3s ease; }

.ae-plat:hover { transform: translate(-50%, -50%) scale(1.1) rotate(-1.5deg); background: var(--teal-deep); border-color: var(--teal-deep); }
.ae-plat:hover b { color: #FFFFFF; }
.ae-plat:hover small { color: rgba(255, 255, 255, 0.85); }

.ae-plat1 { left: 19%; top: 15%; }
.ae-plat2 { left: 81%; top: 15%; }
.ae-plat3 { left: 19%; top: 85%; }
.ae-plat4 { left: 81%; top: 85%; border-color: var(--teal-deep); }

.ae-ghost {
  position: absolute;
  left: 50%;
  top: 99%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  transform: translate(-50%, -50%);
  border: 1.5px dashed var(--text-faint);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text-faint);
  font-size: 0.66rem;
  font-weight: 800;
  text-decoration: line-through;
  white-space: nowrap;
  animation: aeGhost 5s ease-in-out infinite;
  transition: transform 0.3s ease, color 0.3s ease;
}

.ae-ghost:hover { transform: translate(-50%, -50%) rotate(-4deg) scale(1.1); color: var(--text-muted); }
 
/* ============================================================
   PATCH: "What Can Be Influenced" (.ae-honest) + "Questions Where
   This Matters" (#ae-local)  —  aeo-geo.css ke bilkul END mein paste karein
   ============================================================ */
 
/* ---------- 1) HONEST BOX ---------- */
.ae-honest {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: 1040px;               /* neeche wale Foundations grid ke barabar */
  padding: 34px 38px;
  gap: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.ae-honest::before,
.ae-honest::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(46px);
}
.ae-honest::before {
  width: 300px; height: 300px; top: -120px; right: -60px;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.35), transparent 70%);
  animation: aeHoBlobA 9s ease-in-out infinite alternate;
}
.ae-honest::after {
  width: 260px; height: 260px; bottom: -120px; left: 20%;
  background: radial-gradient(circle, rgba(0, 168, 150, 0.45), transparent 70%);
  animation: aeHoBlobB 11s ease-in-out infinite alternate;
}
@keyframes aeHoBlobA { to { transform: translate(-80px, 50px) scale(1.2); } }
@keyframes aeHoBlobB { to { transform: translate(90px, -40px) scale(1.25); } }
 
.ae-honest-ic { position: relative; width: 60px; height: 60px; border-radius: 18px; }
.ae-honest-ic::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  animation: aePulse 2.6s ease-out infinite;
}
.ae-honest p { font-size: 1rem; line-height: 1.75; color: rgba(255, 255, 255, 0.95); }
.ae-honest p strong { color: #FFFFFF; }
.ae-honest p + p { margin-top: 10px; }
 
/* list: ab text saaf nazar aata hai (pehle dark text dark bg par tha) */
.ae-honest .ae-infl {
  margin: 18px 0 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.ae-honest .ae-infl li {
  position: relative;
  padding: 12px 16px 12px 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;                  /* <<< asal fix */
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.5;
  backdrop-filter: blur(4px);
  transition: transform 0.35s cubic-bezier(0.22, 1.4, 0.36, 1), background 0.3s ease, border-color 0.3s ease;
}
.ae-honest .ae-infl li:last-child { grid-column: 1 / -1; }
.ae-honest .ae-infl li::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  width: 24px; height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007A78' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat,
    #FFFFFF;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.35);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ae-honest .ae-infl li:hover {
  transform: translateX(8px);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.45);
}
.ae-honest .ae-infl li:hover::before { transform: rotate(360deg) scale(1.15); }
 
/* list items ek ek karke slide-in */
.ae-honest.is-in .ae-infl li { animation: aeHoLi 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.ae-honest.is-in .ae-infl li:nth-child(1) { animation-delay: 0.35s; }
.ae-honest.is-in .ae-infl li:nth-child(2) { animation-delay: 0.45s; }
.ae-honest.is-in .ae-infl li:nth-child(3) { animation-delay: 0.55s; }
.ae-honest.is-in .ae-infl li:nth-child(4) { animation-delay: 0.65s; }
.ae-honest.is-in .ae-infl li:nth-child(5) { animation-delay: 0.75s; }
@keyframes aeHoLi { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
 
/* ---------- 2) LOCAL USES (#ae-local) ---------- */
#ae-local { position: relative; overflow: hidden; isolation: isolate; }
#ae-local > .container { position: relative; z-index: 1; }
#ae-local::before {
  content: "";
  position: absolute; z-index: 0;
  width: 420px; height: 420px; top: -150px; left: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 157, 138, 0.2), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: aeLocBlob 14s ease-in-out infinite alternate;
}
@keyframes aeLocBlob { to { transform: translate(110px, 80px) scale(1.2); } }
 
.ae-asks { gap: 12px; margin-bottom: 22px; }
 
.ae-ask-q {
  position: relative;
  overflow: hidden;
  display: flex;                    /* pill ab poori width, text sahi wrap hota hai */
  align-self: stretch;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 20px 20px 20px 6px;
  line-height: 1.5;
  font-size: 0.92rem;
}
.ae-ask-q svg { flex: 0 0 auto; width: 20px; height: 20px; }
 
/* pills ek ke baad ek "scan" hoti hain, jaise AI sawal parh raha ho */
.ae-asks .ae-ask-q { animation: aeAskScan 10s ease-in-out infinite; }
.ae-asks .ae-ask-q:nth-child(2) { animation-delay: 2.5s; }
.ae-asks .ae-ask-q:nth-child(3) { animation-delay: 5s; }
.ae-asks .ae-ask-q:nth-child(4) { animation-delay: 7.5s; }
@keyframes aeAskScan {
  0%, 22%, 100% { border-color: var(--mint-200); box-shadow: var(--shadow-soft); }
  6%, 16%       { border-color: var(--teal-main); box-shadow: 0 0 0 5px rgba(0, 168, 150, 0.14), var(--shadow-soft); }
}
.ae-asks .ae-ask-q:hover { animation-play-state: paused; }
 
/* right card halka tairta hai */
.ae-pick { animation: aePickFloat 7s ease-in-out infinite; }
@keyframes aePickFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ae-pick-bar { background: linear-gradient(135deg, var(--teal-deep), var(--teal-darker)); }
.ae-biz { margin-top: 2px; }
 
/* ---------- responsive ---------- */
@media (max-width: 767.98px) {
  .ae-honest { padding: 26px 20px; flex-direction: column; gap: 16px; }
  .ae-honest .ae-infl { grid-template-columns: 1fr; }
  .ae-ask-q { padding: 12px 16px; font-size: 0.86rem; }
}
 
@media (prefers-reduced-motion: reduce) {
  .ae-honest::before, .ae-honest::after, .ae-honest-ic::after,
  #ae-local::before, .ae-asks .ae-ask-q, .ae-pick { animation: none !important; }
  .ae-honest.is-in .ae-infl li { animation: none; }
}
 
@keyframes aeGhost {
  0%, 100% { opacity: 0.9; margin-top: 0; }
  50%      { opacity: 0.35; margin-top: -8px; }
}

/* related links */
.ae-rel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-muted);
}

.ae-rel a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1.5px solid var(--mint-200);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--teal-deep);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ae-rel a svg { transition: transform 0.25s ease; }
.ae-rel a:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #FFFFFF; transform: translateY(-4px); box-shadow: 0 14px 22px -12px rgba(0, 90, 88, 0.6); }
.ae-rel a:hover svg { transform: translateX(5px); }

/* focus */
.ae-rel a:focus-visible, .ae-link:focus-visible { outline: 3px solid var(--teal-main); outline-offset: 3px; }

/* ============================================================
   ████  RESPONSIVE  ████
   ============================================================ */
@media (max-width: 991px) {
  .ae-hero { padding: 28px 0 58px 0; }
  .ae-duo { grid-template-columns: 1fr; max-width: 560px; }
  .ae-fgrid { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
  .ae-fc, .ae-fc.ae-fc-wide { grid-column: span 1; }
  .ae-fc:last-child { grid-column: span 2; }
}

@media (max-width: 575px) {
  .ae-stage { min-height: 470px; padding: 16px 8px 34px 8px; }
  .ae-msgs { min-height: 300px; padding: 14px; }
  .ae-chip-a { left: 0; top: 24px; }
  .ae-chip-b { right: 0; top: 118px; }
  .ae-chip-c { display: none; }
  .ae-chip-in b { font-size: 0.68rem; }
  .ae-tabs i { padding: 4px 7px; font-size: 0.56rem; }

  .ae-def { padding: 22px 18px; }
  .ae-viz-geo { height: 290px; }
  .ae-orbit { transform: scale(0.88); }

  .ae-honest { flex-direction: column; padding: 20px; }
  .ae-fgrid { grid-template-columns: 1fr; }
  .ae-fc:last-child { grid-column: auto; }

  .ae-plat { padding: 8px 10px; }
  .ae-plat b { font-size: 0.68rem; }
  .ae-plat small { font-size: 0.54rem; }
  .ae-hub { width: 132px; padding: 12px 8px; }
  .ae-hub b { font-size: 0.7rem; }
  .ae-hub small { display: none; }
  .ae-ask-q { font-size: 0.78rem; padding: 10px 14px; }
}

/* ============================================================
   ████  REDUCED MOTION  ████
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ae-js .ae-rv.is-in { animation: none; }

  .ae-halo, .ae-ring, .ae-chat, .ae-spark, .ae-chip-in, .ae-dots i, .ae-faq-hit, .ae-fly,
  .ae-quote-fill, .ae-pulse, .ae-spin, .ae-node-in, .ae-honest-ic, .ae-src3 i, .ae-conv i,
  .ae-tag, .ae-qa i, .ae-stars i, .ae-ask em, .ae-code span, .ae-badge-s, .ae-eeat i,
  .ae-pick-bar svg, .ae-biz, .ae-rec, .ae-ln, .ae-hub, .ae-ghost { animation: none; }

  .ae-fly { opacity: 0; }
  .ae-quote-fill { width: 100%; }
  .ae-quote-fill.ae-q2 { width: 62%; }
  .ae-qa i { transform: none; }
  .ae-ask em { opacity: 1; }
  .ae-code span { width: 100%; }
  .ae-rec { opacity: 1; }
  .ae-biz1, .ae-biz3 { opacity: 0.6; }
  .ae-biz2 { border-color: var(--teal-deep); background: var(--mint-50); }
  .ae-stars i { color: var(--teal-main); }

  .ae-def, .ae-fc, .ae-ask-q, .ae-plat, .ae-rel a, .ae-biz, .ae-honest, .ae-points li { transition: none; }
}

/* ============================================================
   NEW (10 review): ae-infl, ae-fv-ment, ae-fv-crawl
   ============================================================ */
.ae-honest > div { flex: 1; }
.ae-infl { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.ae-infl li { position: relative; padding-left: 26px; font-size: .92rem; color: var(--text-body); }
.ae-infl li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); box-shadow: 0 4px 10px -2px rgba(0,122,120,.5); }

.ae-fv-ment { justify-content: center; }
.ae-ment { display: flex; gap: 10px; }
.ae-ment i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #fff; box-shadow: 0 12px 22px -8px rgba(0,122,120,.6); animation: aeFloat 3.6s ease-in-out infinite; }
.ae-ment i:nth-child(2) { animation-delay: .5s; }
.ae-ment i:nth-child(3) { animation-delay: 1s; }
@keyframes aeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.ae-fv-crawl { justify-content: center; }
.ae-crawl { display: flex; gap: 8px; align-items: center; }
.ae-crawl i { width: 12px; border-radius: 6px; background: linear-gradient(180deg, var(--teal-main), var(--mint-300)); animation: aeCrawl 1.8s ease-in-out infinite; }
.ae-crawl i:nth-child(1) { height: 22px; }
.ae-crawl i:nth-child(2) { height: 38px; animation-delay: .25s; }
.ae-crawl i:nth-child(3) { height: 54px; animation-delay: .5s; }
@keyframes aeCrawl { 0%,100% { transform: scaleY(.7); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---- Measure steps / Expect cards / Who (10 review) ---- */
.ae-steps { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }
.ae-step { display: flex; align-items: center; gap: 18px; background: #fff; border: 1.5px solid var(--mint-100); border-radius: 18px; padding: 18px 24px; box-shadow: 0 8px 20px -12px rgba(0,122,120,.25); transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .35s ease; }
.ae-step:hover { transform: translateX(10px); border-color: var(--teal-main); box-shadow: 0 20px 34px -18px rgba(0, 122, 120, 0.55); }
.ae-step-n { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #fff; font-weight: 800; font-size: 1.05rem; box-shadow: 0 12px 22px -8px rgba(0,122,120,.6); transition: transform .4s cubic-bezier(.22,1.4,.36,1); }
.ae-step:hover .ae-step-n { transform: rotate(-10deg) scale(1.12); }
.ae-step p { margin: 0; font-size: .95rem; font-weight: 600; color: var(--text-dark); }

.ae-exp { position: relative; overflow: hidden; background: #fff; border: 1.5px solid var(--mint-100); border-radius: 22px; padding: 26px 24px; box-shadow: 0 8px 22px -12px rgba(0,122,120,.22); transition: transform .3s ease, border-color .3s ease, box-shadow .35s ease; }
.ae-exp::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--teal-main), #5eead4); transform: scaleX(0); transform-origin: left; transition: transform .55s ease; }
.ae-exp:hover::after { transform: scaleX(1); }
.ae-exp:hover { transform: translateY(-7px); border-color: var(--teal-main); box-shadow: 0 28px 46px -24px rgba(0, 122, 120, 0.6); }
.ae-exp h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: var(--text-dark); }
.ae-exp p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--text-body); }

.ae-who { position: relative; overflow: hidden; background: #fff; border: 1.5px solid var(--mint-100); border-radius: 28px; padding: 32px 30px; box-shadow: 0 10px 30px -12px rgba(0,122,120,.18); transition: transform .3s ease, box-shadow .4s ease, border-color .3s ease; }
.ae-who::before { content: ""; position: absolute; width: 220px; height: 220px; top: -90px; right: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(94,234,212,.25), transparent 70%); pointer-events: none; transition: transform .6s ease; }
.ae-who:hover::before { transform: scale(1.4); }
.ae-who:hover { transform: translateY(-6px); border-color: var(--teal-main); box-shadow: 0 30px 52px -26px rgba(0, 122, 120, 0.55); }
.ae-who h3 { font-size: 1.35rem; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; }
.ae-who p { color: var(--text-body); font-size: .95rem; line-height: 1.75; margin: 0; }
.ae-who-in { display: flex; gap: 20px; align-items: flex-start; }
.ae-who-mono { position: relative; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #fff; font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 28px -10px rgba(0,122,120,.65); transition: transform .45s cubic-bezier(.22,1.4,.36,1); }
.ae-who-mono::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--teal-main); opacity: 0; animation: aePulse 3s ease-out infinite; }
.ae-who:hover .ae-who-mono { transform: scale(1.1) rotate(-6deg); }
.ae-who-in h3 { margin-bottom: 8px; }
.ae-proof-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 8px 16px; border-radius: 999px; background: var(--mint-50); border: 1px solid var(--mint-200); font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: var(--teal-deep); }
.ae-proof-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-main); animation: aePulse 2s ease-out infinite; }
@keyframes aePulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

/* ============================================================
   RESPONSIVE PATCH (CSS-only, mobile text-first) — appended, no
   desktop rule above was changed. Desktop layout untouched.
   ============================================================ */
@media (max-width: 991px) {
  /* Mobile text-first: the hero's Bootstrap order classes render the
     graphic column first below lg (text order-2, graphic order-1).
     Flip them so text renders above the graphic. The order-lg-*
     desktop rules are outside this breakpoint and still apply. */
  .ae-hero > .container > .row > .order-2 { order: 1 !important; }
  .ae-hero > .container > .row > .order-1 { order: 2 !important; }
}