/* ===========================================================================
   Extends the glassmorphism treatment already used on the "Let's Talk"
   contact panel (see glass.css) to the rest of the landing page: the header
   bar, the review cards, and the FAQ accordion.

   Same two-part recipe as glass.css throughout: (1) a soft multi-point
   colour field ("aurora") painted behind the glass surface, because
   backdrop-filter can only reveal whatever's actually behind it - blurring
   a flat colour just yields the same flat colour - and (2) the surface
   itself as a translucent fill + blur + an inset-shadow ring/highlight
   instead of a real border, so nothing changes box size in these
   fixed-width Framer layouts.

   Selectors use Framer's semantic data-framer-name attributes rather than
   its generated class hashes, for the same reason as glass.css: hashes
   aren't stable across breakpoints or pages, names are. */

/* --- 1. Header bar -----------------------------------------------------
   Framer already sets backdrop-filter inline on this nav (see header-fx.css's
   own notes on it), but the bar's background-color is fully opaque, so
   that blur has nothing to reveal - it's a solid bar that happens to carry
   an unused blur filter. Making the fill translucent is the only change
   needed to turn it into visible glass; the blur/saturate amount and the
   scroll-reactive sizing stay exactly as header-fx.css already set them. */
nav[style*="backdrop-filter"] {
  background-color: rgba(16, 17, 20, 0.62) !important;
}

html:not([data-theme="dark"]) nav[style*="backdrop-filter"] {
  background-color: rgba(255, 255, 255, 0.62) !important;
}

/* --- 2. Aurora fields behind the Reviews and FAQ sections ---------------
   Both sections sit on the page's own flat background colour with nothing
   to blur, so each gets the same soft radial-gradient field glass.css uses
   behind the contact panel - on-brand blue, low opacity, kept well inside
   each section since both already clip overflow (Reviews for its card
   marquee, FAQ isn't required to but doing so here costs nothing and
   guarantees the blobs can't bleed into neighbouring sections). */
[data-framer-name="Section-Reviews"],
[data-framer-name="Section-FAQ"] {
  position: relative;
  overflow: hidden;
}

[data-framer-name="Section-Reviews"]::before,
[data-framer-name="Section-FAQ"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

/* Reviews and FAQ share a boundary. An earlier version gave each section
   the same four-blob field and masked both to zero at the seam, which
   produced exactly the thing it was meant to remove: a glow at the bottom
   of Reviews, a dark trough, then a second glow at the top of FAQ - three
   stacked bands. So the two fields are now split so that NEITHER carries
   any light near the shared seam: Reviews keeps blobs only in its upper
   half and fades out over its whole lower half; FAQ keeps blobs only in
   its lower half and fades in over its whole upper half. Across the seam
   there is then a single, long, monotonic ramp from base colour into
   FAQ's tint and glow - one gradient, not two meeting. */
[data-framer-name="Section-Reviews"]::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 45%, transparent 100%);
  background:
    radial-gradient(42% 50% at 14% 18%, rgba(54, 160, 253, 0.55), transparent 70%),
    radial-gradient(36% 44% at 88% 12%, rgba(125, 211, 252, 0.42), transparent 72%);
}

[data-framer-name="Section-FAQ"]::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 30%, #000 60%, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 30%, #000 60%, #000 calc(100% - 90px), transparent 100%);
  background:
    radial-gradient(46% 48% at 80% 92%, rgba(54, 160, 253, 0.38), transparent 74%),
    radial-gradient(40% 46% at 30% 85%, rgba(35, 101, 159, 0.3), transparent 74%),
    radial-gradient(36% 44% at 88% 62%, rgba(125, 211, 252, 0.3), transparent 72%);
}

html:not([data-theme="dark"]) [data-framer-name="Section-Reviews"]::before {
  opacity: 0.75;
  background:
    radial-gradient(42% 50% at 14% 18%, rgba(54, 160, 253, 0.4), transparent 70%),
    radial-gradient(36% 44% at 88% 12%, rgba(96, 165, 250, 0.32), transparent 72%);
}

html:not([data-theme="dark"]) [data-framer-name="Section-FAQ"]::before {
  opacity: 0.75;
  background:
    radial-gradient(46% 48% at 80% 92%, rgba(54, 160, 253, 0.26), transparent 74%),
    radial-gradient(40% 46% at 30% 85%, rgba(59, 130, 246, 0.2), transparent 74%),
    radial-gradient(36% 44% at 88% 62%, rgba(96, 165, 250, 0.22), transparent 72%);
}

/* --- 2b. Softening the section-to-section tone step ----------------------
   The template alternates section backgrounds: some sit on the page's own
   base colour, others on a lighter tint (rgba(255,255,255,0.08) in dark
   theme, #edebeb in light). Where a tinted section meets a plain one that
   step is a hard horizontal line across the full width. On its own it's
   mild and reads as deliberate banding, but next to the aurora above it
   looked like a seam - so the tinted sections now fade their tint out at
   both edges, landing on exactly the neighbour's colour at the boundary.

   Done with background-image rather than by gradient-ing the background
   colour itself: dark-theme.js owns background-color here (it rewrites it
   inline per theme), and background-image paints above it without
   competing. The gradient is the page's own base colour, opaque at the
   very edge and fading to transparent to let the tint through in the
   middle - so at the boundary both sides render the identical colour and
   there is nothing left to see. The aurora ::before paints above this and
   is itself masked to zero at the same edges, so the two compose rather
   than fight. */
[data-framer-name="Section-CTA"] {
  --aimore-page-base: #ffffff;
  background-image: linear-gradient(
    to bottom,
    var(--aimore-page-base) 0,
    rgba(255, 255, 255, 0) 140px,
    rgba(255, 255, 255, 0) calc(100% - 140px),
    var(--aimore-page-base) 100%
  );
}

html[data-theme="dark"] [data-framer-name="Section-CTA"] {
  --aimore-page-base: #101114;
  background-image: linear-gradient(
    to bottom,
    var(--aimore-page-base) 0,
    rgba(16, 17, 20, 0) 140px,
    rgba(16, 17, 20, 0) calc(100% - 140px),
    var(--aimore-page-base) 100%
  );
}

/* FAQ sits directly under the Reviews aurora, so its tint can't arrive in
   140px without reading as a fresh band. It ramps in over the top 45% of
   the section instead - the same distance over which the FAQ aurora fades
   in above - so tint and glow rise together as one gradient. */
[data-framer-name="Section-FAQ"] {
  --aimore-page-base: #ffffff;
  background-image: linear-gradient(
    to bottom,
    var(--aimore-page-base) 0,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0) calc(100% - 140px),
    var(--aimore-page-base) 100%
  );
}

html[data-theme="dark"] [data-framer-name="Section-FAQ"] {
  --aimore-page-base: #101114;
  background-image: linear-gradient(
    to bottom,
    var(--aimore-page-base) 0,
    rgba(16, 17, 20, 0) 45%,
    rgba(16, 17, 20, 0) calc(100% - 140px),
    var(--aimore-page-base) 100%
  );
}

/* --- 2c. The FAQ illustration's own hard bottom edge ---------------------
   Separate cause, same symptom: this decorative mockup is taller than the
   space left for it and overhangs the section's bottom edge by ~68px, and
   the Contact section that follows paints an opaque background straight
   over the overhang. The result is the image being guillotined flat across
   its full width - a hard horizontal line that reads as another seam.
   Fading its lower portion out means it has already dissolved by the time
   it reaches the boundary, so there is no edge left to cut. Percentages
   (not px) so the fade keeps its proportions as the image scales down
   across breakpoints.

   The stops are set from where the cut actually falls: the boundary lands
   around 74% of the way down this image (and drifts a few percent with
   layout state), so the fade has to be fully transparent by ~70% to leave
   nothing visible to slice. An earlier attempt ending at 86% still left
   the image ~40% opaque where it got cut, which would have kept the hard
   line - measured in the browser rather than eyeballed. */
[data-framer-name="Section-FAQ"] [data-framer-name="Image"] img {
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, 0) 70%);
  mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, 0) 70%);
}

/* Everything already inside these sections (headings, cards, the marquee)
   needs to sit above the aurora layer, which is why the aurora rule above
   targets ::before specifically rather than the section's own background -
   a plain z-index:0 on ::before under normal-flow content (z-index:auto)
   already paints behind it without needing every child re-stacked. */

/* --- 3. Review cards ------------------------------------------------------
   Same rgb(16,17,20)-on-rgb(16,17,20) (light theme: white-on-white) flatness
   as the header - the card and the section behind it were the identical
   colour, so the border was the only thing separating them. Swapped for a
   translucent fill + blur so the card reads as a pane floating over the
   aurora rather than a same-colour box with an outline. */
[data-framer-name="Review Card"] {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 55%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 20px 50px rgba(0, 0, 0, 0.35);
}

html:not([data-theme="dark"]) [data-framer-name="Review Card"] {
  background-color: rgba(255, 255, 255, 0.55) !important;
  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08) 55%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 40px rgba(20, 55, 100, 0.1);
}

/* --- 4. FAQ accordion -----------------------------------------------------
   The accordion's open state renders as a SEPARATE element from its closed
   one (data-framer-name="Closed" vs "Opened" on the actual bordered pill -
   see border-glow.js's own notes on this same pair for why two rules are
   needed instead of one: nothing here is unstable the way that hover-swap
   was, these two names are just genuinely two different states, so a plain
   selector for each is enough, no JS involved). */
[data-framer-name="Section-FAQ"] [data-framer-name="Closed"],
[data-framer-name="Section-FAQ"] [data-framer-name="Opened"] {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 55%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: background-color 0.2s ease;
}

html:not([data-theme="dark"]) [data-framer-name="Section-FAQ"] [data-framer-name="Closed"],
html:not([data-theme="dark"]) [data-framer-name="Section-FAQ"] [data-framer-name="Opened"] {
  background-color: rgba(255, 255, 255, 0.55) !important;
  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08) 55%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 34px rgba(20, 55, 100, 0.08);
}

/* Each pill's own opaque fill is only half the story: Framer nests a
   "Content" div directly inside it that carries a SEPARATE, independently
   dark-theme-mapped background-color spanning the same box - covering the
   glass fill above completely instead of layering with it. (Review cards
   don't have this problem; their own direct children are all already
   transparent.) Forced transparent so the glass on the pill itself is what
   actually shows. */
[data-framer-name="Section-FAQ"] [data-framer-name="Closed"] > [data-framer-name="Content"],
[data-framer-name="Section-FAQ"] [data-framer-name="Opened"] > [data-framer-name="Content"] {
  background-color: transparent !important;
}

/* --- FAQ chevron buttons --------------------------------------------------
   The little round toggle on each row is drawn by Framer as a SOLID disc -
   its inline background-color is the plain page colour (rgb(16,17,20) in
   dark theme, white in light), which was fine against the flat cards it was
   designed for but reads as an opaque blob punched into the glass ones. Same
   glass recipe as the cards themselves, just at a smaller scale: translucent
   fill, blur, and a hairline inset ring instead of a border (a real border
   would change the 28px box and shift the row's layout).

   The chevron glyph inside is left alone - it's a token-coloured SVG that
   already follows the active theme. */
[data-framer-name="Section-FAQ"] [data-framer-name="Icon"] {
  background-color: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

html:not([data-theme="dark"]) [data-framer-name="Section-FAQ"] [data-framer-name="Icon"] {
  background-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(20, 55, 100, 0.08);
}

[data-framer-name="Section-FAQ"] [data-framer-name="Closed"]:hover [data-framer-name="Icon"],
[data-framer-name="Section-FAQ"] [data-framer-name="Opened"]:hover [data-framer-name="Icon"] {
  background-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

html:not([data-theme="dark"]) [data-framer-name="Section-FAQ"] [data-framer-name="Closed"]:hover [data-framer-name="Icon"],
html:not([data-theme="dark"]) [data-framer-name="Section-FAQ"] [data-framer-name="Opened"]:hover [data-framer-name="Icon"] {
  background-color: rgba(255, 255, 255, 0.72) !important;
}

/* The open pill sits a touch brighter than its closed siblings, echoing the
   focus-state lift glass.css gives the contact form's input fields - reads
   as "this is the one that's active" without relying on colour alone. */
[data-framer-name="Section-FAQ"] [data-framer-name="Opened"] {
  background-color: rgba(255, 255, 255, 0.16) !important;
}

html:not([data-theme="dark"]) [data-framer-name="Section-FAQ"] [data-framer-name="Opened"] {
  background-color: rgba(255, 255, 255, 0.72) !important;
}

/* --- Support page contact pills -------------------------------------------
   The two pills under the Support hero ("support@aimorelove.com" and the
   response-time note) shipped with a near-white fill
   (rgba(255,255,255,0.82)) set from a Framer CLASS rule rather than an
   inline style. dark-theme.js only rewrites inline styles, and the
   generated class-level override sheet on that page missed this one
   selector - so while the pill text flipped to near-white with the rest of
   the dark theme, the pill itself stayed near-white too and the label
   disappeared into its own background. (Light theme was unaffected: the
   text there is black, which reads fine on the pale fill.)

   Fixing it as glass rather than just re-darkening the fill, to match the
   treatment used everywhere else - and it fixes the contrast either way,
   since each theme now gets a fill chosen against that theme's text
   colour instead of one shared pale value. */
[data-framer-name="Support Email"],
[data-framer-name="Response Time"] {
  background-color: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html:not([data-theme="dark"]) [data-framer-name="Support Email"],
html:not([data-theme="dark"]) [data-framer-name="Response Time"] {
  background-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 22px rgba(20, 55, 100, 0.08);
}

/* Without backdrop-filter support the translucent fills would look washed
   out with nothing behind them to blur, so fall back to solid surfaces
   close to the page's own base tone - same escape hatch glass.css uses. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  nav[style*="backdrop-filter"] {
    background-color: rgb(16, 17, 20) !important;
  }

  html:not([data-theme="dark"]) nav[style*="backdrop-filter"] {
    background-color: rgb(255, 255, 255) !important;
  }

  [data-framer-name="Review Card"],
  [data-framer-name="Section-FAQ"] [data-framer-name="Closed"],
  [data-framer-name="Section-FAQ"] [data-framer-name="Opened"] {
    background-color: rgb(24, 26, 32) !important;
  }

  html:not([data-theme="dark"]) [data-framer-name="Review Card"],
  html:not([data-theme="dark"]) [data-framer-name="Section-FAQ"] [data-framer-name="Closed"],
  html:not([data-theme="dark"]) [data-framer-name="Section-FAQ"] [data-framer-name="Opened"] {
    background-color: rgb(255, 255, 255) !important;
  }
}