/* ============================================================
   FeeLynx — Ambient & Depth Layer (CSS-only, attribute-targeted)
   Visual upgrade: layered surfaces, soft volumetric light,
   editorial pacing, refined motion. Strict palette adherence.
   ============================================================ */

:root {
  --depth-1: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 1px 2px rgba(20, 26, 59, 0.05);
  --depth-2: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 8px 24px -8px rgba(20, 26, 59, 0.16), 0 2px 6px rgba(20, 26, 59, 0.05);
  --depth-3: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 60px -20px rgba(20, 26, 59, 0.30), 0 4px 12px rgba(20, 26, 59, 0.06);
  --depth-4: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 40px 90px -30px rgba(20, 26, 59, 0.40), 0 8px 24px rgba(20, 26, 59, 0.08);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------------- GRAIN ---------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.078 0 0 0 0 0.10 0 0 0 0 0.231 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---------------- AMBIENT BACKDROPS via attribute selectors ----------------
   Match strictly on `background:` prefix so we don't catch sections that
   merely reference a token in `color:` or `border:`. */

/* Hero (dark, fullscreen) */
section[style*="background: var(--dark-green)"][style*="100vh"] {
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(0, 73, 157, 0.55), transparent 65%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(116, 193, 173, 0.18), transparent 60%),
    radial-gradient(ellipse 100% 70% at 50% 100%, rgba(20, 26, 59, 1), transparent 80%),
    var(--dark-lynx) !important;
}

/* Pale-green section (StatBand) */
section[style*="background: var(--pale-green)"] {
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(0, 73, 157, 0.18), transparent 60%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(255, 255, 255, 0.45), transparent 60%),
    var(--pale-green) !important;
}

/* White-lynx sections (ValueProps etc.) */
section[style*="background: var(--white-lynx)"] {
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(116, 193, 173, 0.18), transparent 60%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(117, 181, 223, 0.20), transparent 60%),
    var(--white-lynx) !important;
}

/* Pale-blue sections (FeatureShowcase, Testimonials) */
section[style*="background: var(--pale-blue)"] {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(116, 193, 173, 0.22), transparent 65%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(0, 73, 157, 0.16), transparent 65%),
    var(--pale-blue) !important;
}

/* Dark-green sections without 100vh (PartnersBand, DownloadBand) */
section[style*="background: var(--dark-green)"]:not([style*="100vh"]) {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 73, 157, 0.45), transparent 65%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(116, 193, 173, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 70%, rgba(116, 193, 173, 0.12), transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(20, 26, 59, 0.85), transparent 70%),
    var(--dark-lynx) !important;
}

/* Green-lynx (PartnersBand) — keep brand green canvas, add subtle ambient depth */
section[style*="background: var(--green-lynx)"] {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.32), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(0, 73, 157, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(20, 26, 59, 0.10), transparent 60%),
    var(--green-lynx) !important;
}

/* Bg-muted */
section[style*="background: var(--bg-muted)"] {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(116, 193, 173, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(117, 181, 223, 0.20), transparent 60%),
    var(--bg-muted) !important;
}

/* ---------------- DEPTH ON CARDS ---------------- */
/* Soft inner highlight on white-lynx surfaces inside sections */
[style*="border-radius"][style*="--white-lynx"]:not(button):not(input):not(textarea) {
  box-shadow: var(--depth-2);
}

/* ---------------- SCROLL PROGRESS REFINED ---------------- */
.fl-scroll-progress {
  background: linear-gradient(90deg, rgba(117, 181, 223, 0.95) 0%, rgba(116, 193, 173, 1) 50%, rgba(0, 73, 157, 1) 100%) !important;
  height: 2px !important;
  box-shadow: 0 0 10px rgba(116, 193, 173, 0.6), 0 0 20px rgba(116, 193, 173, 0.2) !important;
}

/* ---------------- PERISTALTIC DIVIDER GLOW ---------------- */
.fl-peristaltic-divider path {
  stroke-width: 2 !important;
  filter: drop-shadow(0 0 4px rgba(116, 193, 173, 0.30));
}

/* ---------------- BUTTONS — refined depth on primary/secondary ---------------- */
button[class*="fl-btn-shimmer"] {
  box-shadow: 0 8px 18px -8px rgba(20, 26, 59, 0.30), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  transition: transform 220ms var(--ease-soft), box-shadow 220ms var(--ease-soft) !important;
}

button[class*="fl-btn-shimmer"]:hover {
  box-shadow: 0 18px 36px -10px rgba(20, 26, 59, 0.45), 0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
}

/* ---------------- FOCUS RING ---------------- */
*:focus-visible {
  outline: 2px solid var(--green-lynx);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------- HEADER REFINED ---------------- */
header[style*="position: sticky"],
header[style*="position:sticky"] {
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 30px -12px rgba(20, 26, 59, 0.15);
}

/* ---------------- IMAGES — soft cast on illustrations & screens ---------------- */
img[src*="screens"],
img[src*="mockups"],
img[src*="imagery"] {
  filter: drop-shadow(0 30px 60px rgba(20, 26, 59, 0.25)) drop-shadow(0 8px 16px rgba(20, 26, 59, 0.12));
}

/* ---------------- AURORA HALO INSIDE HERO via ::before/::after ---------------- */
section[style*="background: var(--dark-green)"][style*="100vh"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 85% 15%, rgba(116, 193, 173, 0.18), transparent 60%),
    radial-gradient(ellipse 35% 25% at 12% 85%, rgba(117, 181, 223, 0.16), transparent 60%);
  filter: blur(20px);
  z-index: 1;
  opacity: 1;
  animation: fl-aurora-breathe 14s ease-in-out infinite;
}

@keyframes fl-aurora-breathe {

  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  section[style*="background: var(--dark-green)"][style*="100vh"]::after {
    animation: none;
  }

  body::before {
    opacity: 0.025;
  }
}

/* ---------------- SUBTLE SECTION DIVIDER LIGHT ---------------- */
section[style*="background: var(--dark-green)"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116, 193, 173, 0.45), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ---------------- PHONE3D MOUNT GLOW ---------------- */
section[style*="100vh"] canvas {
  filter: drop-shadow(0 50px 80px rgba(0, 73, 157, 0.45)) drop-shadow(0 20px 30px rgba(116, 193, 173, 0.18));
}

/* ---------------- TYPE — editorial polish on H1/H2 ---------------- */
h1,
h2 {
  text-wrap: balance;
}

/* ---------------- CHIP REFINEMENT ---------------- */
[style*="border-radius: 999"][style*="--green-lynx"] {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 8px rgba(116, 193, 173, 0.20);
}

/* ============================================================
   ABOUT PAGE — color refinement (palette-strict)
   The hero/founders sit on white-lynx (#b7daea pale blue).
   green-lynx (#74c1ad) text desaturates against it, so we:
     1. Bloom green-lynx behind the italic accent.
     2. Boost the italic via gradient + soft halo (palette only).
     3. Add a subtle green wash to the founders section so the
        cards lift visibly and the rhythm feels intentional.
   ============================================================ */

/* The italic "errance digestive." accent */
.fl-about-accent {
  color: var(--dark-blue);
  position: relative;
}

/* Drift on the about hero bloom */
@keyframes fl-about-bloom-drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.95;
  }

  50% {
    transform: translate(40px, -30px) scale(1.06);
    opacity: 1;
  }
}

.fl-about-bloom {
  animation: fl-about-bloom-drift 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fl-about-bloom {
    animation: none;
  }
}

/* About hero — keep base white-lynx but layer in subtle warmth */
section[data-about-hero="true"] {
  background: var(--white-lynx) !important;
}

/* Founders section — green-tinted ambient depth so cards lift */
section[data-about-founders="true"] {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(116, 193, 173, 0.20), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(117, 181, 223, 0.16), transparent 60%),
    var(--white-lynx) !important;
}

/* Founder + advisor card surfaces — lighter, lifted, with crisper edge */
section[data-about-founders="true"] a[href*="linkedin"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.20) 100%),
    var(--white-lynx) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 20px 50px -16px rgba(20, 26, 59, 0.20),
    0 4px 12px rgba(20, 26, 59, 0.06) !important;
}

/* ============================================================
   TESTIMONIALS — lift cards with editorial depth
   ============================================================ */
section[style*="background: var(--bg-muted)"] article[style*="border-radius: 22"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%),
    var(--bg-elevated) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 20px 50px -16px rgba(20, 26, 59, 0.18),
    0 4px 14px rgba(20, 26, 59, 0.05) !important;
  position: relative;
  backdrop-filter: blur(2px);
}

section[style*="background: var(--bg-muted)"] article[style*="border-radius: 22"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116, 193, 173, 0.45), transparent);
  pointer-events: none;
}

/* ============================================================
   PARTNERS MARQUEE — soft fade on edges + lifted logos
   ============================================================ */
section[style*="background: var(--green-lynx)"] [style*="overflow"][style*="hidden"]:has(img[alt]) {
  position: relative;
}

section[style*="background: var(--green-lynx)"] img[src*="partners"] {
  filter: drop-shadow(0 8px 18px rgba(20, 26, 59, 0.18)) drop-shadow(0 2px 4px rgba(20, 26, 59, 0.10));
  transition: transform 320ms var(--ease-soft), filter 320ms var(--ease-soft);
}

section[style*="background: var(--green-lynx)"] img[src*="partners"]:hover {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 14px 28px rgba(20, 26, 59, 0.25)) drop-shadow(0 4px 8px rgba(20, 26, 59, 0.12));
}

/* ============================================================
   FAQ — refined accordions with depth on hover/open
   ============================================================ */
[role="button"][aria-expanded] {
  transition: background 220ms var(--ease-soft), box-shadow 220ms var(--ease-soft) !important;
}

[role="button"][aria-expanded="true"] {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 12px 32px -10px rgba(20, 26, 59, 0.15),
    0 2px 6px rgba(20, 26, 59, 0.04);
}

/* ============================================================
   FEATURE SHOWCASE — phone mockup lift
   ============================================================ */
section[style*="background: var(--pale-blue)"] img[src*="mockup"],
section[style*="background: var(--pale-blue)"] img[src*="screen"] {
  filter:
    drop-shadow(0 50px 80px rgba(0, 73, 157, 0.30)) drop-shadow(0 20px 30px rgba(116, 193, 173, 0.18)) drop-shadow(0 4px 8px rgba(20, 26, 59, 0.10));
}

/* ============================================================
   STAT BAND — counters lift with subtle glow
   ============================================================ */
section[style*="background: var(--pale-green)"] [style*="font-size"][style*="clamp(60px"],
section[style*="background: var(--pale-green)"] [style*="font-size"][style*="clamp(72px"] {
  text-shadow: 0 2px 24px rgba(20, 26, 59, 0.10);
}

/* ============================================================
   DOWNLOAD BAND — refined glow on dark
   ============================================================ */
section[style*="background: var(--dark-green)"]:not([style*="100vh"])::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 40% at 50% 50%, rgba(116, 193, 173, 0.10), transparent 65%);
  filter: blur(30px);
  z-index: 0;
  animation: fl-aurora-breathe 18s ease-in-out infinite;
}

/* ============================================================
   GLASS MORPH — feature cards on pale-blue
   ============================================================ */
section[style*="background: var(--pale-blue)"] article,
section[style*="background: var(--pale-blue)"] [style*="border-radius: 24"]:not(button):not(img) {
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
}

/* ============================================================
   SUBTLE LIGHT BEAM in dark hero — fixed not animated
   ============================================================ */
section[style*="background: var(--dark-green)"][style*="100vh"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 10%,
      rgba(116, 193, 173, 0.5) 50%,
      transparent 90%);
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   SECTION TRANSITIONS — deeper visual rhythm via top inner glow
   ============================================================ */
section[style*="background: var(--white-lynx)"]::before,
section[style*="background: var(--pale-blue)"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Make sure section content stays above the ::before glow layer.
   Only adjust children that don't already set their own position. */
section>*:not([style*="position: absolute"]):not([style*="position:absolute"]):not([style*="position: fixed"]):not([class*="-bloom"]):not(.fl-about-bloom):not(.fl-ab2-mission-bloom):not(.fl-ab2-mission-bloom-2) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   ANIMATED GRADIENT MESH — very slow, only on dark hero
   ============================================================ */
/* ============================================================
   ORGANIC BLOB TRANSITIONS — between sections (Terminal/Ribbit feel)
   Uses SVG-based wavy masks via mask-image so colors blend organically.
   ============================================================ */

/* Soft organic edge between Hero (dark) → StatBand (pale-green)
   The dark hero gets a wavy bottom edge. */
section[style*="background: var(--dark-green)"][style*="100vh"] {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'><defs><filter id='wave'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.012' numOctaves='2' seed='5'/><feDisplacementMap in='SourceGraphic' scale='40'/></filter></defs><rect width='1440' height='960' fill='black'/><path d='M0 940 C 240 980 480 920 720 950 S 1200 990 1440 940 L 1440 1000 L 0 1000 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'><rect width='1440' height='960' fill='black'/><path d='M0 940 C 240 980 480 920 720 950 S 1200 990 1440 940 L 1440 1000 L 0 1000 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Wavy bottom on FeatureShowcase (pale-blue) → smooth blob into PartnersBand (green-lynx) */
section[style*="background: var(--pale-blue)"]:not([data-screen-label]) {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'><rect width='1440' height='960' fill='black'/><path d='M0 940 Q 360 1000 720 950 T 1440 940 L 1440 1000 L 0 1000 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'><rect width='1440' height='960' fill='black'/><path d='M0 940 Q 360 1000 720 950 T 1440 940 L 1440 1000 L 0 1000 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ============================================================
   FEATURE CARDS — micro-tilt + glow follow on hover
   ============================================================ */
.fl-card-glow {
  transition: transform 360ms var(--ease-soft), box-shadow 360ms var(--ease-soft) !important;
  position: relative;
}

.fl-card-glow:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 30px 60px -16px rgba(20, 26, 59, 0.22),
    0 8px 18px rgba(20, 26, 59, 0.08) !important;
}

.fl-card-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(116, 193, 173, 0.10), transparent 40%);
  opacity: 0;
  transition: opacity 320ms ease;
}

.fl-card-glow:hover::after {
  opacity: 1;
}

/* ============================================================
   TESTIMONIALS — stacked appearance with deeper shadow on middle card
   ============================================================ */
section[style*="background: var(--bg-muted)"] article[style*="border-radius: 22"]:nth-child(2) {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 36px 70px -24px rgba(20, 26, 59, 0.28),
    0 8px 20px rgba(20, 26, 59, 0.08) !important;
  z-index: 2;
}

@media (max-width: 768px) {
  section[style*="background: var(--bg-muted)"] article[style*="border-radius: 22"]:nth-child(2) {
    transform: none;
  }
}

/* ============================================================
   FAQ — refined chrome
   ============================================================ */
[role="button"][aria-expanded="true"]+div,
[role="button"][aria-expanded="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.20)) !important;
}

/* ============================================================
   SECTION REVEAL — gentle parallax via translate on .fl-reveal
   ============================================================ */
.fl-reveal {
  transition: opacity 800ms var(--ease-soft), transform 800ms var(--ease-soft) !important;
}

.fl-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}

.fl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}