/* ==========================================================================
   FAE Hero (+ Audit Card)
   --------------------------------------------------------------------------
   Ported from Base44 source: src/components/landing/Hero.jsx + AuditCard.jsx.
   .fae-hero-title, .fae-lime-button, .fae-ghost-link, .fae-reveal already
   live in fae-components.css and are reused here, not duplicated.
   ========================================================================== */

/* Section grid — Base44:
   <section className="mx-auto grid min-h-screen max-w-[1240px] items-end
   gap-16 px-5 pb-24 pt-40 sm:px-8 lg:grid-cols-12 lg:pb-32 lg:pt-48"> */
.fae-hero {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  min-height: 100vh;
  max-width: var(--fae-container-max);
  align-items: end;
  gap: 4rem; /* gap-16 */
  padding: 10rem 1.25rem 6rem; /* pt-40 px-5 pb-24 */
}
@media (min-width: 640px) {
  .fae-hero {
    padding-left: 2rem; /* sm:px-8 */
    padding-right: 2rem;
  }
}
@media (min-width: 1024px) {
  .fae-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-top: 12rem;   /* lg:pt-48 */
    padding-bottom: 8rem; /* lg:pb-32 */
  }
}

/* Text column — Base44: <Reveal className="lg:col-span-7"> */
.fae-hero__text {
  min-width: 0;
}
@media (min-width: 1024px) {
  .fae-hero__text {
    grid-column: span 7 / span 7;
  }
}

/* Eyebrow badge — Base44:
   "mb-8 inline-flex min-h-8 items-center gap-2 rounded-full border
   border-white/[0.08] bg-white/[0.03] px-4 text-xs text-[#a8a8b0]" */
.fae-hero__eyebrow {
  margin-bottom: 2rem; /* mb-8 */
  display: inline-flex;
  min-height: 2rem; /* min-h-8 */
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  border-radius: var(--fae-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(255, 255, 255, 0.03);
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
  font-size: 0.75rem; /* text-xs */
  color: #a8a8b0;
}
/* Base44: <span className="h-1.5 w-1.5 rounded-full bg-[#c6f135] shadow-[0_0_10px_#c6f135]" /> */
.fae-hero__eyebrow-dot {
  height: 0.375rem; /* h-1.5 */
  width: 0.375rem;  /* w-1.5 */
  border-radius: 50%;
  background-color: var(--fae-color-lime);
  box-shadow: 0 0 10px var(--fae-color-lime);
  flex-shrink: 0;
}

/* Headline — Base44:
   "max-w-[820px] text-[clamp(4.1rem,8.2vw,7.5rem)] font-black
   leading-[0.88] tracking-[-0.065em]" (gradient/clip via .fae-hero-title) */
.fae-hero__headline {
  max-width: 820px;
  font-size: clamp(4.1rem, 8.2vw, 7.5rem);
  font-weight: 900; /* font-black */
  line-height: 0.88;
  letter-spacing: -0.065em;
  margin: 0;
}

/* Body copy — Base44:
   "mt-8 max-w-[650px] text-[17px] leading-[1.6] text-[#a8a8b0]
   sm:text-lg sm:leading-[1.6]" */
.fae-hero__body {
  margin-top: 2rem; /* mt-8 */
  margin-bottom: 0;
  max-width: 650px;
  font-size: 17px;
  line-height: 1.6;
  color: #a8a8b0;
}
@media (min-width: 640px) {
  .fae-hero__body {
    font-size: 1.125rem; /* sm:text-lg */
  }
}

/* CTA row — Base44: "mt-9 flex flex-col gap-4 sm:flex-row sm:items-center" */
.fae-hero__ctas {
  margin-top: 2.25rem; /* mt-9 */
  display: flex;
  flex-direction: column;
  gap: 1rem; /* gap-4 */
}
@media (min-width: 640px) {
  .fae-hero__ctas {
    flex-direction: row;
    align-items: center;
  }
}
.fae-ghost-link__arrow {
  flex-shrink: 0;
}

/* Audit card column — Base44: <Reveal className="lg:col-span-5 lg:pb-3" delay={120}> */
@media (min-width: 1024px) {
  .fae-audit-card {
    grid-column: span 5 / span 5;
    padding-bottom: 0.75rem; /* lg:pb-3, applied to the Reveal wrapper in source */
  }
}

/* Audit card — Base44:
   "relative overflow-hidden rounded-[30px] border border-white/[0.08]
   bg-[#0f0f10]/90 p-7 shadow-2xl backdrop-blur-xl sm:p-9" */
.fae-audit-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(15, 15, 16, 0.9); /* #0f0f10 at 90% */
  padding: 1.75rem; /* p-7 */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
@media (min-width: 640px) {
  .fae-audit-card {
    padding: 2.25rem; /* sm:p-9 */
  }
}

/* Decorative glow — Base44:
   "absolute -right-16 -top-16 h-44 w-44 rounded-full bg-[#c6f135]/[0.08] blur-3xl" */
.fae-audit-card__glow {
  position: absolute;
  right: -4rem;  /* -right-16 */
  top: -4rem;    /* -top-16 */
  height: 11rem; /* h-44 */
  width: 11rem;  /* w-44 */
  border-radius: 50%;
  background-color: rgba(198, 241, 53, 0.08);
  filter: blur(64px); /* blur-3xl */
  pointer-events: none;
}

/* Eyebrow — Base44:
   "relative mb-4 text-[11px] font-extrabold uppercase tracking-[0.18em] text-[#c6f135]" */
.fae-audit-card__eyebrow {
  position: relative;
  margin: 0 0 1rem; /* mb-4 */
  font-size: 11px;
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fae-color-lime);
}

/* Heading — Base44: "relative text-3xl font-black tracking-[-0.04em] text-white" */
.fae-audit-card__heading {
  position: relative;
  margin: 0;
  font-size: 1.875rem; /* text-3xl */
  font-weight: 900; /* font-black */
  letter-spacing: -0.04em;
  color: var(--fae-color-white);
}

/* Body — Base44: "relative mt-3 text-[16px] leading-[1.6] text-[#a8a8b0]" */
.fae-audit-card__body {
  position: relative;
  margin: 0.75rem 0 0; /* mt-3 */
  font-size: 16px;
  line-height: 1.6;
  color: #a8a8b0;
}

/* Benefits list — Base44: "relative my-7 space-y-4" */
.fae-audit-card__benefits {
  position: relative;
  margin: 1.75rem 0; /* my-7 */
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* space-y-4 */
}

/* Benefit row — Base44: "flex items-center gap-3 text-[16px] text-[#d4d4d6]" */
.fae-audit-card__benefit {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
  font-size: 16px;
  color: #d4d4d6;
}

/* Check badge — Base44:
   "grid h-5 w-5 shrink-0 place-items-center rounded-full bg-[#c6f135]/15 text-[#c6f135]" */
.fae-audit-card__check {
  display: grid;
  height: 1.25rem; /* h-5 */
  width: 1.25rem;  /* w-5 */
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  background-color: rgba(198, 241, 53, 0.15);
  color: var(--fae-color-lime);
}

/* CTA button — Base44: className="lime-button w-full" (full width variant) */
.fae-audit-card__cta {
  position: relative;
  width: 100%;
}